From f17781b8be48e1d9e99373ee5d362cf90949a619 Mon Sep 17 00:00:00 2001 From: bach Date: Thu, 13 Jul 2023 22:49:31 +0200 Subject: [PATCH] started to create paper contents once concernement opened and not on init (doleance left to do) --- .../gql/concernementrevisions.fragment.gql | 22 +++ src/components/ConcernementMapItem.vue | 141 ++++++++++++------ src/components/MapConcernements.vue | 7 +- 3 files changed, 122 insertions(+), 48 deletions(-) create mode 100644 src/api/gql/concernementrevisions.fragment.gql diff --git a/src/api/gql/concernementrevisions.fragment.gql b/src/api/gql/concernementrevisions.fragment.gql new file mode 100644 index 0000000..b650ccd --- /dev/null +++ b/src/api/gql/concernementrevisions.fragment.gql @@ -0,0 +1,22 @@ +fragment ConcernementRevisionsFields on Concernement { + id + revision_id + entites { + menacemaintien + prise + actuelfuture + entite { + title + id + agissante + proximite { + id + title + } + superposition { + id + title + } + } + } +} diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 5ffc11b..9f263b3 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -141,10 +141,13 @@ export default { }, map_mode: { handler (n, o) { - // console.log('watch map_mode', o, n); + console.log('concernementMapItem watch map_mode', o, n); if (n === 'terraindevie' && !this.opened_concernement) { this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie } + if (this.is_opened & n !== o) { + this.setPaperContents(); + } }, deep: true }, @@ -438,17 +441,17 @@ export default { }); // the sub items for one concernement - this.addNewPaperSymbolInstance('boussole_bg'); + // this.addNewPaperSymbolInstance('boussole_bg'); this.paper_main_object.addChild(this.setPaperContour()); - this.paper_main_object.addChild(this.setPaperEntites()); + // this.paper_main_object.addChild(this.setPaperEntites()); if (this.concernement.has_puissancedagir) { - this.addNewPaperSymbolInstance('puissanceagir_bg'); + // this.addNewPaperSymbolInstance('puissanceagir_bg'); this.addNewPaperSymbolInstance('puissanceagir_icon'); - this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins()); + // this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins()); } if (this.concernement.has_agissantes) { - this.paper_main_object.addChild(this.setPaperAgissantes()); + // this.paper_main_object.addChild(this.setPaperAgissantes()); } if (this.concernement.has_doleance) { this.addNewPaperSymbolInstance('doleance_bg'); @@ -466,14 +469,48 @@ export default { this.initPaperEvents() }, - addNewPaperSymbolInstance(name){ + setPaperContents(){ + // trigered once opening tween is complete + this.clearPaperContents(); + switch(this.map_mode){ + case 'terraindevie': + this.addNewPaperSymbolInstance('boussole_bg', true); + this.paper_main_object.addChild(this.setPaperEntites()); + break; + case 'puissancedagir': + this.addNewPaperSymbolInstance('puissanceagir_bg', true); + this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins()); + break; + case 'action': + this.addNewPaperSymbolInstance('boussole_bg', true); + this.paper_main_object.addChild(this.setPaperAgissantes()); + break; + } + }, + clearPaperContents(){ + let clearable_children = ['boussole_bg', 'entites', + 'puissanceagir_bg','puissanceagir_besoins', + 'agissantes']; + + clearable_children.forEach(child_name => { + if (this.paper_main_object.children[child_name]) { + this.paper_main_object.children[child_name].remove(); + } + }); + }, + addNewPaperSymbolInstance(name, back){ let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]); // , {x:0,y:0} instance.name = name; // instance.pivot = new paper.Point({x:0,y:0}); instance.position = this.pos; - instance.scale = this.scale; + instance.scale(this.scale); // instance.locked = true; this.paper_main_object.addChild(instance); + if (back) { + this.paper_main_object.children[name].sendToBack(); + } else { + this.paper_main_object.children[name].bringToFront(); + } }, setPaperContour(){ // console.log(`setPaperContour ${this.concernement.id}`); @@ -561,7 +598,8 @@ export default { let symbol_name = this.entites[i].entite ? 'entite' : 'entite_hidden'; let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]); instance.name = 'entite'; - instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y]); + 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.scale(this.scale); instance.fillColor = '#000'; instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null; instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite'; @@ -579,9 +617,10 @@ export default { if (this.entites[i].entite && this.entites[i].entite.agissante) { let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']); instance.name = 'entite_action'; - instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y]); + 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(0.2); + instance.scale(this.scale); instance.item_id = this.entites[i].entite.id; instance.item_type = 'entite_action'; instance.is_symbol_instance = true; @@ -610,6 +649,7 @@ export default { // use paper symbol let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']); besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]); + besoin.scale(this.scale); besoin.item_id = this.concernement.besoins[i].id; besoin.item_cid = this.concernement.id; besoin.item_type = 'besoin'; @@ -632,6 +672,7 @@ export default { // use paper symbol let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']); reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]); + reponse.scale(this.scale); reponse.item_id = this.concernement.besoins[i].reponses[j].id; reponse.item_bid = this.concernement.besoins[i].id; reponse.item_cid = this.concernement.id; @@ -953,10 +994,10 @@ export default { // backgrounds if (this.is_opened) { // hide all bgs - this.paper_main_object.children.boussole_bg.visible = false; - if (this.concernement.has_puissancedagir) { - this.paper_main_object.children.puissanceagir_bg.visible = false; - } + // this.paper_main_object.children.boussole_bg.visible = false; + // if (this.concernement.has_puissancedagir) { + // this.paper_main_object.children.puissanceagir_bg.visible = false; + // } if (this.concernement.has_doleance) { this.paper_main_object.children.doleance_bg.visible = false; } @@ -964,12 +1005,12 @@ export default { switch (this.map_mode) { case 'terraindevie': case 'action': - this.paper_main_object.children.boussole_bg.visible = true; + // this.paper_main_object.children.boussole_bg.visible = true; break; case 'puissancedagir': - if (this.concernement.has_puissancedagir) { - this.paper_main_object.children.puissanceagir_bg.visible = true; - } + // if (this.concernement.has_puissancedagir) { + // this.paper_main_object.children.puissanceagir_bg.visible = true; + // } break; case 'doleancer': if (this.concernement.has_doleance) { @@ -978,24 +1019,24 @@ export default { break; } }else{ - this.paper_main_object.children.boussole_bg.visible = false; - if (this.concernement.has_puissancedagir) { - this.paper_main_object.children.puissanceagir_bg.visible = false; - } + // this.paper_main_object.children.boussole_bg.visible = false; + // if (this.concernement.has_puissancedagir) { + // this.paper_main_object.children.puissanceagir_bg.visible = false; + // } if (this.concernement.has_doleance) { this.paper_main_object.children.doleance_bg.visible = false; } } // entites - if (this.is_opened - && this.map_mode !== 'puissancedagir' - && this.map_mode !== 'doleancer' - && this.map_mode !== 'action' ) { - this.paper_main_object.children.entites.visible = true; - } else { - this.paper_main_object.children.entites.visible = false; - } + // if (this.is_opened + // && this.map_mode !== 'puissancedagir' + // && this.map_mode !== 'doleancer' + // && this.map_mode !== 'action' ) { + // this.paper_main_object.children.entites.visible = true; + // } else { + // this.paper_main_object.children.entites.visible = false; + // } // puissance d'agir @@ -1003,27 +1044,27 @@ export default { if (this.map_mode === "puissancedagir") { if (!this.is_opened) { this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone - this.paper_main_object.children.puissanceagir_besoins.visible = false; + // this.paper_main_object.children.puissanceagir_besoins.visible = false; } else { this.paper_main_object.children.puissanceagir_icon.visible = false; - this.paper_main_object.children.puissanceagir_besoins.visible = true; + // this.paper_main_object.children.puissanceagir_besoins.visible = true; // this.drawBesoins(); } } else { this.paper_main_object.children.puissanceagir_icon.visible = false; - this.paper_main_object.children.puissanceagir_besoins.visible = false; + // this.paper_main_object.children.puissanceagir_besoins.visible = false; } } - // 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 + // // 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; + // } + // } // doleance if (this.concernement.has_doleance) { @@ -1234,10 +1275,17 @@ export default { this.scale = obj.s; this.opacity = obj.o; - Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y}); this.pos = {x:obj.x, y:obj.y}; + Matter.Body.setPosition(this.body, this.pos); }) .onComplete((obj) => { + // record tween one last time + this.prev_scale = this.scale = obj.s; + this.opacity = obj.o; + this.pos = {x:obj.x, y:obj.y}; + Matter.Body.setPosition(this.body, this.pos); + + // fix the concernement position with a constraint this.constraint = Matter.Constraint.create({ pointA: this.pos, bodyB: this.body, @@ -1246,7 +1294,9 @@ export default { length: 0 }); Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); - this.prev_scale = this.scale; + + // create the paper objects to display (like entite, besoin, etc) + this.setPaperContents(); }); // recreate the matter engine event to get it a the end of the events stack Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); @@ -1274,6 +1324,7 @@ export default { }) .onComplete((obj) => { this.prev_scale = this.scale = 1; + this.clearPaperContents(); }); } this.tween.easing(Tween.Easing.Quadratic.InOut).start(); diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 77a1af8..9b955e8 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -898,13 +898,14 @@ export default { setPaperEntiteActionSymbol(){ let svgIcon = paper.project.importSVG(iconAction); svgIcon.strokeColor = '#000'; - svgIcon.strokeWidth = 0.75; + svgIcon.strokeWidth = 0.25; svgIcon.fillColor = null; svgIcon.position = {x:0, y:0}; + svgIcon.scale(0.15); let circle = new paper.Path.Circle({ - radius: 15, - fillColor: 'rgba(255,255,255,0.05)' + radius: 3, + fillColor: 'rgba(255,255,255,0.01)' }) return new paper.Group({