From 0a5f1adf905ecc1e566093bd1858c202727305d6 Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 14 Jul 2023 11:39:04 +0200 Subject: [PATCH] fixed agissantes icons size #2190 --- src/components/ConcernementMapItem.vue | 94 ++++++++++++++++++++++---- src/components/MapConcernements.vue | 19 ++++++ 2 files changed, 99 insertions(+), 14 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 9c8a222..9e66176 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -51,6 +51,8 @@ export default { prev_scale: 1, opacity: 0, tween: null, + is_opening: false, + is_closing: false, body: null, body_parts: [], constraint: null, @@ -148,6 +150,9 @@ export default { if (this.is_opened & n !== o) { this.setPaperContents(); } + if (n !== o) { + this.handlePaperVisibilityOnMapMode() + } }, deep: true }, @@ -448,7 +453,7 @@ export default { } if (this.concernement.has_agissantes) { // TODO icons - // this.paper_main_object.addChild(this.setPaperAgissantes()); + this.paper_main_object.addChild(this.setPaperAgissantesIcons()); } if (this.concernement.has_doleance) { this.addNewPaperSymbolInstance('doleance_icon'); @@ -621,6 +626,27 @@ export default { } return g; }, + setPaperAgissantesIcons(){ + let g = new paper.Group({ + pivot: new paper.Point(this.pos), + name: 'agissantes_icons' + }); + for (let i = 0; i < this.entites.length; i++) { + if (this.entites[i].entite && this.entites[i].entite.agissante) { + let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action_icon']); + instance.name = 'entite_action'; + instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x * this.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]); + instance.fillColor = '#000'; + // instance.scale(0.2); + instance.scale(this.scale); + instance.item_id = this.entites[i].entite.id; + instance.item_type = 'entite_action'; + instance.is_symbol_instance = true; + g.addChild(instance) + } + } + return g; + }, setPaperPuissanceagirBesoins(){ let g = new paper.Group({ pivot: new paper.Point(this.pos), @@ -970,7 +996,37 @@ export default { return g; }, // PAPER VISIBILITY - handlePaperVisibility(){ + handlePaperVisibilityOnBeforeOpen(){ + // agissantes + if (this.concernement.has_agissantes && this.map_mode === "action") { + if (!this.is_opened) { + this.paper_main_object.children.agissantes_icons.visible = true; + } else { + this.paper_main_object.children.agissantes_icons.visible = false; + } + } + }, + handlePaperVisibilityOnOpened(){ + + + }, + handlePaperVisibilityOnBeforeClose(){ + + }, + handlePaperVisibilityOnClosed(){ + // agissantes + if (this.concernement.has_agissantes && this.map_mode === "action") { + if (!this.is_opened) { + this.paper_main_object.children.agissantes_icons.visible = true; + } else { + this.paper_main_object.children.agissantes_icons.visible = false; + } + } + }, + handlePaperVisibilityOnMapMode(){ + + }, + handlePaperVisibilityOnAfterEnginUpdate(){ // contours focused if (!this.isFocused()){ this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; @@ -1006,18 +1062,16 @@ export default { this.paper_main_object.children.puissanceagir_icon.visible = false; } } - - // TODO icons - // // agissantes - // // console.log('this.concernement.has_agissantes', this.concernement.has_agissantes); - // if (this.concernement.has_agissantes) { - // if (this.map_mode === "action") { - // // this.paper_main_object.children.agissantes.visible = true; - // } else { - // // this.paper_main_object.children.agissantes.visible = false; - // } - // } + // agissantes + if (this.concernement.has_agissantes) { + if (this.map_mode !== "action") { + this.paper_main_object.children.agissantes_icons.visible = false; + } else if(!this.is_opened && !this.is_closing){ + this.paper_main_object.children.agissantes_icons.visible = true; + } + } + // doleance if (this.concernement.has_doleance) { if (this.map_mode === "doleancer") { @@ -1196,10 +1250,12 @@ export default { this.tween.stop(); } if (open) { + this.is_opening = true; // paper bring to front this.paper_main_object.bringToFront(); // create the paper objects to display (like entite, besoin, etc) this.setPaperContents(); + this.handlePaperVisibilityOnBeforeOpen(); // calcul opened size regarding window size // let ch = this.canvas.height; @@ -1238,6 +1294,8 @@ export default { this.opacity = obj.o; this.pos = {x:obj.x, y:obj.y}; Matter.Body.setPosition(this.body, this.pos); + + this.handlePaperVisibilityOnOpened(); // fix the concernement position with a constraint this.constraint = Matter.Constraint.create({ @@ -1249,15 +1307,21 @@ export default { }); Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); + this.is_opening = false; }); // recreate the matter engine event to get it a the end of the events stack Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); } else { // closing + this.is_closing = true; + if(this.constraint){ Matter.Composite.remove(this.matterEngine.world, this.constraint); } + + this.handlePaperVisibilityOnBeforeClose(); + this.tween = new Tween.Tween({s: this.scale, o: 1}) .to({s: 1, o: 0}, 500) .onUpdate((obj) => { @@ -1276,7 +1340,9 @@ export default { }) .onComplete((obj) => { this.prev_scale = this.scale = 1; + this.handlePaperVisibilityOnClosed(); this.clearPaperContents(); + this.is_closing = false; }); } this.tween.easing(Tween.Easing.Quadratic.InOut).start(); @@ -1619,7 +1685,7 @@ export default { this.paper_main_object.position = this.pos = this.body.position; - this.handlePaperVisibility() + this.handlePaperVisibilityOnAfterEnginUpdate() }, }, render() { diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 8a14756..f7b9a32 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -212,6 +212,7 @@ export default { this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol()); this.addPaperSymbolDefinition('entite_hidden', this.setPaperHiddenEntiteSymbol()); this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol()); + this.addPaperSymbolDefinition('entite_action_icon', this.setPaperEntiteActionIconSymbol()); this.addPaperSymbolDefinition('entite_action', this.setPaperEntiteActionSymbol()); this.addPaperSymbolDefinition('entite_action_hover', this.setPaperEntiteActionHoverSymbol()); this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol()); @@ -897,6 +898,24 @@ export default { strokeWidth:2 }) }, + setPaperEntiteActionIconSymbol(){ + let svgIcon = paper.project.importSVG(iconAction); + svgIcon.strokeWidth = 0.8; + svgIcon.scale(0.6); + svgIcon.strokeColor = '#000'; + svgIcon.fillColor = null; + svgIcon.position = {x:0, y:0}; + + // let circle = new paper.Path.Circle({ + // radius: 3, + // fillColor: 'rgba(255,255,255,0.01)' + // }) + + return new paper.Group({ + children: [svgIcon], + name: 'action_icon' + }); + }, setPaperEntiteActionSymbol(){ let svgIcon = paper.project.importSVG(iconAction); svgIcon.strokeWidth = 0.25;