From 8f001f8a1bcbcf2e1ac45eafc21cbeabf6d8f26e Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 14 Jul 2023 11:05:54 +0200 Subject: [PATCH] created paper contents once concernement opened and not on init, UI should be smoother #2150 --- src/components/ConcernementMapItem.vue | 69 +++++++++++++++----------- src/components/MapConcernements.vue | 55 ++++++++++---------- 2 files changed, 69 insertions(+), 55 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 9f263b3..7b084ee 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -454,16 +454,9 @@ export default { // this.paper_main_object.addChild(this.setPaperAgissantes()); } if (this.concernement.has_doleance) { - this.addNewPaperSymbolInstance('doleance_bg'); + // this.addNewPaperSymbolInstance('doleance_bg'); this.addNewPaperSymbolInstance('doleance_icon'); - let g = new paper.Group({ - pivot: new paper.Point({x:0,y:0}), - name: `doleances` - }); - this.concernement.doleances.forEach((d) => { - g.addChild(this.setPaperDoleanceSteps(d)) - }); - this.paper_main_object.addChild(g); + // this.paper_main_object.addChild(this.setPaperDoleances()); } // console.log(`initPaperObjects ${this.id}`, this.paper_main_object); @@ -485,12 +478,17 @@ export default { this.addNewPaperSymbolInstance('boussole_bg', true); this.paper_main_object.addChild(this.setPaperAgissantes()); break; + case 'doleancer': + this.addNewPaperSymbolInstance('doleance_bg'); + this.paper_main_object.addChild(this.setPaperDoleances()); + break; } }, clearPaperContents(){ let clearable_children = ['boussole_bg', 'entites', 'puissanceagir_bg','puissanceagir_besoins', - 'agissantes']; + 'agissantes', + 'doleance_bg', 'doleances']; clearable_children.forEach(child_name => { if (this.paper_main_object.children[child_name]) { @@ -687,6 +685,16 @@ export default { return g; }, + setPaperDoleances(){ + let g = new paper.Group({ + pivot: new paper.Point({x:0,y:0}), + name: `doleances` + }); + this.concernement.doleances.forEach((d) => { + g.addChild(this.setPaperDoleanceSteps(d)) + }); + return g; + }, setPaperDoleanceSteps(doleance){ let g = new paper.Group({ pivot: new paper.Point({x:0,y:0}), @@ -922,7 +930,7 @@ export default { // adresse de la doleance g.addChild(new paper.Path.Circle({ center: [this.pos.x - r, this.pos.y], - radius: 3, + radius: 3 * this.scale, style: { strokeColor: '#fff', strokeWidth: 2, @@ -937,7 +945,7 @@ export default { // decision g.addChild(new paper.Path.Circle({ center: [this.pos.x, this.pos.y - r], - radius: 3, + radius: 3 * this.scale, style: { strokeColor: '#fff', strokeWidth: 2, @@ -952,7 +960,7 @@ export default { // adresse_de_la_decision g.addChild(new paper.Path.Circle({ center: [this.pos.x + r, this.pos.y], - radius: 3, + radius: 3 * this.scale, style: { strokeColor: '#fff', strokeWidth: 2, @@ -998,9 +1006,9 @@ export default { // 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; - } + // if (this.concernement.has_doleance) { + // this.paper_main_object.children.doleance_bg.visible = false; + // } // choose wich one to show, if one switch (this.map_mode) { case 'terraindevie': @@ -1013,9 +1021,9 @@ export default { // } break; case 'doleancer': - if (this.concernement.has_doleance) { - this.paper_main_object.children.doleance_bg.visible = true; - } + // if (this.concernement.has_doleance) { + // this.paper_main_object.children.doleance_bg.visible = true; + // } break; } }else{ @@ -1023,9 +1031,9 @@ export default { // 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; - } + // if (this.concernement.has_doleance) { + // this.paper_main_object.children.doleance_bg.visible = false; + // } } // entites @@ -1071,10 +1079,10 @@ export default { if (this.map_mode === "doleancer") { if (!this.is_opened) { this.paper_main_object.children.doleance_icon.visible = true; - this.paper_main_object.children.doleances.visible = false; + // this.paper_main_object.children.doleances.visible = false; } else { this.paper_main_object.children.doleance_icon.visible = false; - this.paper_main_object.children.doleances.visible = true; + // this.paper_main_object.children.doleances.visible = true; // display the right (opened) doleance this.concernement.doleances.forEach((d) => { this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id; @@ -1082,7 +1090,7 @@ export default { } } else { this.paper_main_object.children.doleance_icon.visible = false; - this.paper_main_object.children.doleances.visible = false; + // this.paper_main_object.children.doleances.visible = false; } } @@ -1133,11 +1141,13 @@ export default { paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins']; break; case "doleancer": - paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`]; + if(this.paper_main_object.children['doleances']){ + paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`]; + } break; } - let result = paper_group_tohit.hitTest(event.point); + let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null; // console.log('move result', result); if (result && result.item.item_id) { // console.log('move has result', result); @@ -1247,6 +1257,9 @@ export default { if (open) { // paper bring to front this.paper_main_object.bringToFront(); + // create the paper objects to display (like entite, besoin, etc) + this.setPaperContents(); + // calcul opened size regarding window size // let ch = this.canvas.height; // let s = this.canvas.height / (this.ray*2.8) @@ -1295,8 +1308,6 @@ export default { }); Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); - // 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); diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 9b955e8..8a14756 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -161,28 +161,30 @@ export default { if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) { let oitem = paper.project.getItem({id: o.paper_id}) - console.log('watch hover_element oitem', oitem); - if (!oitem.is_symbol_instance) { // not symbol instance - if (oitem.data.prevStrokeColor) { - oitem.strokeColor = oitem.data.prevStrokeColor; - } else { - oitem.fillColor = oitem.data.prevFillColor; - } - } else { // is a symbol instanceof, then swap - console.log(`symbol instance o.type:${o.type}, oitem`, oitem); - switch (o.type) { - case 'entite': - oitem.definition = this.paper_symbol_definitions.entite; - break; - case 'besoin': - oitem.definition = this.paper_symbol_definitions.besoin; - break; - case 'reponse': - oitem.definition = this.paper_symbol_definitions.reponse; - break; - case 'entite_action': - oitem.definition = this.paper_symbol_definitions.entite_action; - break; + if (oitem) { + console.log('watch hover_element oitem', oitem); + if (!oitem.is_symbol_instance) { // not symbol instance + if (oitem.data.prevStrokeColor) { + oitem.strokeColor = oitem.data.prevStrokeColor; + } else { + oitem.fillColor = oitem.data.prevFillColor; + } + } else { // is a symbol instanceof, then swap + console.log(`symbol instance o.type:${o.type}, oitem`, oitem); + switch (o.type) { + case 'entite': + oitem.definition = this.paper_symbol_definitions.entite; + break; + case 'besoin': + oitem.definition = this.paper_symbol_definitions.besoin; + break; + case 'reponse': + oitem.definition = this.paper_symbol_definitions.reponse; + break; + case 'entite_action': + oitem.definition = this.paper_symbol_definitions.entite_action; + break; + } } } @@ -897,11 +899,11 @@ export default { }, setPaperEntiteActionSymbol(){ let svgIcon = paper.project.importSVG(iconAction); - svgIcon.strokeColor = '#000'; svgIcon.strokeWidth = 0.25; + svgIcon.scale(0.15); + svgIcon.strokeColor = '#000'; svgIcon.fillColor = null; svgIcon.position = {x:0, y:0}; - svgIcon.scale(0.15); let circle = new paper.Path.Circle({ radius: 3, @@ -916,12 +918,13 @@ export default { setPaperEntiteActionHoverSymbol(){ let svgIcon = paper.project.importSVG(iconAction); svgIcon.strokeColor = '#01ffe2'; - svgIcon.strokeWidth = 0.75; + svgIcon.strokeWidth = 0.25; + svgIcon.scale(0.15); svgIcon.fillColor = null; svgIcon.position = {x:0, y:0}; let circle = new paper.Path.Circle({ - radius: 15, + radius: 3, fillColor: 'rgba(255,255,255,0.05)' })