refactoring: converting all static commun paper objects (like backgrounds) into symbols for perf optimization
This commit is contained in:
parent
b0bfd5cd1f
commit
344b07c93b
@ -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,
|
||||
|
||||
@ -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 () {
|
||||
},
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user