From 344b07c93b9bd42d1aca9b59376968908a1d74b6 Mon Sep 17 00:00:00 2001 From: bach Date: Wed, 28 Jun 2023 12:17:06 +0200 Subject: [PATCH] refactoring: converting all static commun paper objects (like backgrounds) into symbols for perf optimization --- src/components/ConcernementMapItem.vue | 278 ++----------------------- src/components/MapConcernements.vue | 164 ++++++++++++++- src/stores/common.js | 11 +- 3 files changed, 182 insertions(+), 271 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 627bbe1..4425392 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -74,7 +74,8 @@ export default { ...mapState(ConcernementsStore,['opened_concernement']), ...mapState(ConcernementsStore,['opened_entite_id']), ...mapState(CommonStore,['hover_elmt']), - ...mapState(CommonStore,['cartouch_width']) + ...mapState(CommonStore,['cartouch_width']), + ...mapState(CommonStore,['paper_symbol_definitions']) }, created () { // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine); @@ -369,11 +370,14 @@ export default { }, // PAPER OBJECTS initPaperObjects(){ + // the main paper group containing all paper graphical items for one concernement this.paper_main_object = new paper.Group({ pivot: new paper.Point(this.pos), cid: this.id }); - this.paper_main_object.addChild(this.setPaperBoussoleBG()); + + // the sub items for one concernement + this.addNewPaperSymbolInstance('boussole_bg'); this.paper_main_object.addChild(this.setPaperContour()); this.paper_main_object.addChild(this.setPaperEntites()); // this.paper_groups.entites = this.setPaperEntites() @@ -395,165 +399,12 @@ export default { this.initPaperEvents() }, - setPaperBoussoleBG(){ - // BOUSSOLE - let children = []; - let ray = this.ray*0.92*this.scale; - - // // // exterieur circle - // children.push(new paper.Path.Circle({ - // center: [this.pos.x, this.pos.y], - // radius: ray, - // strokeWidth: 2 - // })); - - // // interieur circle - // children.push(new paper.Path.Circle({ - // center: [this.pos.x, this.pos.y], - // radius: this.ray/2*this.scale, - // strokeWidth: 2 - // })); - - // cercles pointillés - for (let i = 1; i < 9; i++) { - let sw = i === 4 || i === 8 ? 2 : 1; - let da = i === 4 || i === 8 ? null : [5,5]; - children.push(new paper.Path.Circle({ - center: [this.pos.x, this.pos.y], - radius: ray/8*i, - strokeColor: '#fff', - strokeWidth: sw, - dashArray: da - })); - - } - - // axes - // vertical - children.push(new paper.Path.Line({ - from: [this.pos.x, this.pos.y - ray], - to: [this.pos.x, this.pos.y + ray], - strokeColor: '#fff', - strokeWidth: 2 - })); - // horizontal - children.push(new paper.Path.Line({ - from: [this.pos.x - ray, this.pos.y], - to: [this.pos.x + ray, this.pos.y], - strokeColor: '#fff', - strokeWidth: 2 - })) - - // fleches - // haute - children.push(new paper.Path({ - segments: [ - [this.pos.x - (8*this.scale), this.pos.y - ray + (8*this.scale)], - [this.pos.x, this.pos.y - ray], - [this.pos.x + (8*this.scale), this.pos.y - ray + (8*this.scale)], - ], - strokeWidth: 2, - strokeColor: '#fff', - })); - // milieu - children.push(new paper.Path({ - segments: [ - [this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)], - [this.pos.x, this.pos.y], - [this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)], - ], - strokeWidth: 2, - strokeColor: '#fff', - })); - - - // MOINS - PLUS - // PLUS - // horizontal - children.push(new paper.Path.Line({ - from: [this.pos.x + ray - (5 * this.scale), this.pos.y - ray], - to: [this.pos.x + ray + (5 * this.scale), this.pos.y - ray], - strokeWidth: 8, - strokeColor: '#fff', - })) - // vertical - children.push(new paper.Path.Line({ - from: [this.pos.x + ray, this.pos.y - ray - (5 * this.scale)], - to: [this.pos.x + ray, this.pos.y - ray + (5 * this.scale)], - strokeWidth: 8, - strokeColor: '#fff', - })) - - // MOINS - // horizontal - children.push(new paper.Path.Line({ - from: [this.pos.x - ray - (5 * this.scale), this.pos.y - ray], - to: [this.pos.x - ray + (5 * this.scale), this.pos.y - ray], - strokeWidth: 8, - strokeColor: '#fff', - })) - - let fontsize = 4; - let fontFamily = "public_sans"; - - children.push(new paper.PointText({ - point: [this.pos.x + 4.5, this.pos.y - ray - 5], - content: `entités qui menacent \u2194 entités qui maintiennent`, - fontSize: fontsize, - fontFamily: fontFamily, - justification: 'center', - fillColor: '#000', - })) - - children.push(new paper.PointText({ - point: [this.pos.x - ray - 5, this.pos.y + 1], - content: "axe d'intensité", - fontSize: fontsize, - fontFamily: fontFamily, - justification: 'right', - fillColor: '#000', - })) - - children.push(new paper.PointText({ - point: [this.pos.x + ray + 5, this.pos.y - 3], - content: "situation future\n\u2195\nsituation actuelle", - fontSize: fontsize, - fontFamily: fontFamily, - justification: 'left', - fillColor: '#000', - })) - - - let t1 = new paper.PointText({ - point: [this.pos.x - ray/8*2.3, this.pos.y - ray/8*2.3], - content: "avec prise", - fontSize: fontsize, - fontFamily: fontFamily, - justification: 'center', - fillColor: '#000', - }) - t1.rotate(-45) - children.push(t1) - - let t2 = new paper.PointText({ - point: [this.pos.x - ray/8*2.95, this.pos.y - ray/8*2.95], - content: "sans prise", - fontSize: fontsize, - fontFamily: fontFamily, - justification: 'center', - fillColor: '#000', - }) - t2.rotate(-45) - children.push(t2) - - - return new paper.Group({ - children: children, - pivot: new paper.Point(this.pos), - name: 'boussole_bg', - locked: true, - }); - + addNewPaperSymbolInstance(name){ + let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]); + instance.name = name; + instance.position = this.pos; + instance.scale = this.scale; + this.paper_main_object.addChild(instance); }, setPaperContour(){ console.log(`setPaperContour ${this.concernement.id}`); @@ -588,111 +439,6 @@ export default { const vnao = { x: vma.y, y: -vma.x } // get the ma normal vector Out const hao = [ vnao.x*hlo, vnao.y*hlo ]; // get the handleOut point - // - / - / - / - / - / - / - / - / - / - / - / - / - / - / - / - if (d) { - let debug = new paper.Group({ - pivot: new paper.Point(this.pos), - name: 'debug' - }); - // B - debug.addChild(new paper.PointText({ - point: [this.pos.x + b.x, this.pos.y + b.y], - content: "b", - fontSize: 10, - justification: 'center', - fillColor: 'red' - })) - // A - debug.addChild(new paper.PointText({ - point: [this.pos.x + a.x, this.pos.y + a.y], - content: "a", - fontSize: 10, - justification: 'center', - fillColor: 'red' - })) - // C - debug.addChild(new paper.PointText({ - point: [this.pos.x + c.x, this.pos.y + c.y], - content: "c", - fontSize: 10, - justification: 'center', - fillColor: 'red' - })) - // N - debug.addChild(new paper.PointText({ - point: [this.pos.x + n.x, this.pos.y + n.y], - content: "n", - fontSize: 10, - justification: 'center', - fillColor: 'red' - })) - // M - debug.addChild(new paper.PointText({ - point: [this.pos.x + m.x, this.pos.y + m.y], - content: "m", - fontSize: 10, - justification: 'center', - fillColor: 'red' - })) - // BA - debug.addChild(new paper.Path.Line({ - from: [this.pos.x + b.x, this.pos.y + b.y], - to: [this.pos.x + a.x, this.pos.y + a.y], - strokeWidth: 4, - strokeColor: 'green', - // dashArray: [5,5] - })) - // CA - debug.addChild(new paper.Path.Line({ - from: [this.pos.x + c.x, this.pos.y + c.y], - to: [this.pos.x + a.x, this.pos.y + a.y], - strokeWidth: 4, - strokeColor: 'green', - // dashArray: [5,5] - })) - // NA - debug.addChild(new paper.Path.Line({ - from: [this.pos.x + n.x, this.pos.y + n.y], - to: [this.pos.x + a.x, this.pos.y + a.y], - strokeWidth: 2, - strokeColor: 'blue', - // dashArray: [5,5] - })) - // NC - debug.addChild(new paper.Path.Line({ - from: [this.pos.x + n.x, this.pos.y + n.y], - to: [this.pos.x + c.x, this.pos.y + c.y], - strokeWidth: 2, - strokeColor: 'orange', - // dashArray: [5,5] - })) - // // MA - // debug.addChild(new paper.Path.Line({ - // from: [this.pos.x + m.x, this.pos.y + m.y], - // to: [this.pos.x + a.x, this.pos.y + a.y], - // strokeWidth: 1, - // strokeColor: 'red', - // // dashArray: [5,5] - // })) - // // NC - // debug.addChild(new paper.Path.Line({ - // from: [this.pos.x + n.x, this.pos.y + n.y], - // to: [this.pos.x + c.x, this.pos.y + c.y], - // strokeWidth: 1, - // strokeColor: 'green', - // dashArray: [5,5] - // })) - this.paper_main_object.addChild(debug) - - } - // - / - / - / - / - / - / - / - / - / - / - / - / - / - / - / - // return new paper.Segment({ - // point: [ - // this.pos.x+(a.x)*this.scale, - // this.pos.y+(a.y)*this.scale - // ] - // }) - return new paper.Segment({ point: pa, handleIn: hai, diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index e5b3e96..8065d5f 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -49,7 +49,8 @@ export default { ...mapState(ConcernementsStore,['concernements']), ...mapState(ConcernementsStore,['concernementsByID']), // ...mapState(ConcernementsStore,['opened_concernement']), - ...mapState(CommonStore,['hover_elmt']) + ...mapState(CommonStore,['hover_elmt']), + ...mapState(CommonStore,['paper_symbol_definitions']) }, created() { // MATTER @@ -73,8 +74,13 @@ export default { let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight; console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`); + // PAPER this.paper = paper.setup(this.canvasMap.canvas); - // // use the paper.view click to get back if no items is clicked + + // symbol defintions + this.initPaperSymbols(); + + // use the paper.view click to get back if no items is clicked this.paper.view.onClick = function(event) { console.log("view onClick", this, event.target); if(event.target._id === "paper-view-0") { @@ -135,13 +141,163 @@ export default { }, methods: { ...mapActions(ConcernementsStore,['setMapMode']), - ...mapActions(ConcernementsStore,['openCloseConcernements']), ...mapActions(ConcernementsStore,['resetConcernementOpened']), - ...mapActions(CommonStore,['setHoverElmt']), + // ...mapActions(ConcernementsStore,['openCloseConcernements']), + ...mapActions(CommonStore,['addPaperSymbolDefinition']), animate () { Matter.Engine.update(this.engine, 1); window.requestAnimationFrame(this.animate); }, + initPaperSymbols(){ + this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol()); + }, + setPaperBoussoleBGSymbol(){ + // BOUSSOLE + let children = []; + let ray = 100; + let pos = {x:0, y:0}; + + // cercles pointillés + for (let i = 1; i < 9; i++) { + let sw = i === 4 || i === 8 ? 0.5 : 0.25; + let da = i === 4 || i === 8 ? null : [5,5]; + children.push(new paper.Path.Circle({ + center: [pos.x, pos.y], + radius: ray/8*i, + strokeColor: '#fff', + strokeWidth: sw, + dashArray: da + })); + + } + + // axes + // vertical + children.push(new paper.Path.Line({ + from: [pos.x, pos.y - ray], + to: [pos.x, pos.y + ray], + strokeColor: '#fff', + strokeWidth: 0.5 + })); + // horizontal + children.push(new paper.Path.Line({ + from: [pos.x - ray, pos.y], + to: [pos.x + ray, pos.y], + strokeColor: '#fff', + strokeWidth: 0.5 + })) + + // fleches + // haute + children.push(new paper.Path({ + segments: [ + [pos.x - 8, pos.y - ray + 8], + [pos.x, pos.y - ray], + [pos.x + 8, pos.y - ray + 8], + ], + strokeWidth: 0.5, + strokeColor: '#fff', + })); + // milieu + children.push(new paper.Path({ + segments: [ + [pos.x - 8, pos.y + 8], + [pos.x, pos.y], + [pos.x + 8, pos.y + 8], + ], + strokeWidth: 0.5, + strokeColor: '#fff', + })); + + + // MOINS - PLUS + // PLUS + // horizontal + children.push(new paper.Path.Line({ + from: [pos.x + ray - 5, pos.y - ray], + to: [pos.x + ray + 5, pos.y - ray], + strokeWidth: 2, + strokeColor: '#fff', + })) + // vertical + children.push(new paper.Path.Line({ + from: [pos.x + ray, pos.y - ray - 5], + to: [pos.x + ray, pos.y - ray + 5], + strokeWidth: 2, + strokeColor: '#fff', + })) + + // MOINS + // horizontal + children.push(new paper.Path.Line({ + from: [pos.x - ray - 5, pos.y - ray], + to: [pos.x - ray + 5, pos.y - ray], + strokeWidth: 2, + strokeColor: '#fff', + })) + + let fontsize = 4; + let fontFamily = "public_sans"; + + children.push(new paper.PointText({ + point: [pos.x + 4.5, pos.y - ray - 5], + content: `entités qui menacent \u2194 entités qui maintiennent`, + fontSize: fontsize, + fontFamily: fontFamily, + justification: 'center', + fillColor: '#000', + })) + + children.push(new paper.PointText({ + point: [pos.x - ray - 5, pos.y + 1], + content: "axe d'intensité", + fontSize: fontsize, + fontFamily: fontFamily, + justification: 'right', + fillColor: '#000', + })) + + children.push(new paper.PointText({ + point: [pos.x + ray + 5, pos.y - 3], + content: "situation future\n\u2195\nsituation actuelle", + fontSize: fontsize, + fontFamily: fontFamily, + justification: 'left', + fillColor: '#000', + })) + + + let t1 = new paper.PointText({ + point: [pos.x - ray/8*2.3, pos.y - ray/8*2.3], + content: "avec prise", + fontSize: fontsize, + fontFamily: fontFamily, + justification: 'center', + fillColor: '#000', + }) + t1.rotate(-45) + children.push(t1) + + let t2 = new paper.PointText({ + point: [pos.x - ray/8*2.95, pos.y - ray/8*2.95], + content: "sans prise", + fontSize: fontsize, + fontFamily: fontFamily, + justification: 'center', + fillColor: '#000', + }) + t2.rotate(-45) + children.push(t2) + + + return new paper.Group({ + children: children, + pivot: new paper.Point(pos), + name: 'boussole_bg', + locked: true, + }); + + } }, beforeUpdate () { }, diff --git a/src/stores/common.js b/src/stores/common.js index 7746934..7050bf1 100644 --- a/src/stores/common.js +++ b/src/stores/common.js @@ -1,10 +1,13 @@ import { defineStore } from 'pinia' +import paper from 'paper'; + export const CommonStore = defineStore({ id: 'common', state: () => ({ hover_elmt: null, - cartouch_width: 450 + cartouch_width: 450, + paper_symbol_definitions: {} }), getters: { @@ -14,6 +17,12 @@ export const CommonStore = defineStore({ // console.log(`setHoverElmt`, elmt); // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer this.hover_elmt = elmt; + }, + addPaperSymbolDefinition(name, path) { + console.log(`addPaperSymbolDefinition ${name}`, path); + // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer + this.paper_symbol_definitions[name] = new paper.SymbolDefinition(path); } + } }) \ No newline at end of file