refactoring: convertion off entites, besoin, reponse items into symbols for perf optimization DONE
This commit is contained in:
parent
ba7f2a6ec0
commit
b105c9ddff
@ -268,6 +268,8 @@ body{
|
||||
// font-size: 2em;
|
||||
}
|
||||
}
|
||||
.entite-map-popup,
|
||||
.besoin-map-popup,
|
||||
.reponse-map-popup{
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
|
||||
@ -387,7 +387,7 @@ export default {
|
||||
this.addNewPaperSymbolInstance('doleance_icon');
|
||||
this.paper_main_object.addChild(this.setPaperDoleanceSteps());
|
||||
}
|
||||
console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
|
||||
// console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
|
||||
|
||||
this.initPaperEvents()
|
||||
},
|
||||
@ -397,11 +397,11 @@ export default {
|
||||
// instance.pivot = new paper.Point({x:0,y:0});
|
||||
instance.position = this.pos;
|
||||
instance.scale = this.scale;
|
||||
instance.locked = true;
|
||||
// instance.locked = true;
|
||||
this.paper_main_object.addChild(instance);
|
||||
},
|
||||
setPaperContour(){
|
||||
console.log(`setPaperContour ${this.concernement.id}`);
|
||||
// console.log(`setPaperContour ${this.concernement.id}`);
|
||||
let getPaddedRoundedSegments = (b,a,c,d) => {
|
||||
const ac = { x: c.x - a.x, y: c.y - a.y } // get ac vecteur
|
||||
const lac = Math.sqrt(Math.pow(ac.x, 2) + Math.pow(ac.y, 2)); // get ac longueur ac
|
||||
@ -414,7 +414,7 @@ export default {
|
||||
const ma = { x:a.x - m.x, y: a.y - m.y } // get ma vecteur
|
||||
const lma = Math.sqrt(Math.pow(ma.x, 2)+Math.pow(ma.y, 2)) // get longeur m->a
|
||||
const vma = { x: ma.x/lma, y: ma.y/lma } // get ma vecteur unitaire
|
||||
console.log(`vma x:${vma.x}, y:${vma.y}`);
|
||||
// console.log(`vma x:${vma.x}, y:${vma.y}`);
|
||||
const pad = 4; // exterior padding
|
||||
// the final padded point
|
||||
const pa = [
|
||||
@ -482,14 +482,15 @@ export default {
|
||||
name: 'entites'
|
||||
});
|
||||
for (let i = 0; i < this.entites.length; i++) {
|
||||
g.addChild(new paper.Path.Circle({
|
||||
pivot: new paper.Point(this.pos),
|
||||
center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
|
||||
radius: 0.5, //0.3
|
||||
fillColor: '#000',
|
||||
item_id: this.entites[i].entite.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
// use paper symbol
|
||||
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
|
||||
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.fillColor = '#000';
|
||||
instance.item_id = this.entites[i].entite.id;
|
||||
instance.item_type = 'entite';
|
||||
instance.is_symbol_instance = true;
|
||||
g.addChild(instance)
|
||||
}
|
||||
return g;
|
||||
},
|
||||
@ -500,17 +501,14 @@ export default {
|
||||
});
|
||||
for (let i = 0; i < this.entites.length; i++) {
|
||||
if (this.entites[i].entite.agissante) {
|
||||
g.addChild(new paper.Path.Circle({
|
||||
pivot: new paper.Point(this.pos),
|
||||
center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
|
||||
radius: 0.5, //0.3
|
||||
fillColor: '#000',
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 3,
|
||||
item_id: this.entites[i].entite.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
|
||||
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
|
||||
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.fillColor = '#000';
|
||||
instance.item_id = this.entites[i].entite.id;
|
||||
instance.item_type = 'entite';
|
||||
instance.is_symbol_instance = true;
|
||||
g.addChild(instance)
|
||||
}
|
||||
}
|
||||
return g;
|
||||
@ -532,16 +530,14 @@ export default {
|
||||
let x = Math.cos(center_a*(Math.PI/180)) * br;
|
||||
let y = Math.sin(center_a*(Math.PI/180)) * br;
|
||||
|
||||
g.addChild(
|
||||
new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: this.getDiamondSegments(this.pos.x + x, this.pos.y + y, 1),
|
||||
fillColor: '#000',
|
||||
item_id: this.concernement.besoins[i].id,
|
||||
item_cid: this.concernement.id,
|
||||
item_type: 'besoin'
|
||||
})
|
||||
)
|
||||
// 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.item_id = this.concernement.besoins[i].id;
|
||||
besoin.item_cid = this.concernement.id;
|
||||
besoin.item_type = 'besoin';
|
||||
besoin.is_symbol_instance = true;
|
||||
g.addChild(besoin)
|
||||
|
||||
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
|
||||
for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
|
||||
@ -554,19 +550,15 @@ export default {
|
||||
let rx = Math.cos(res_a*(Math.PI/180)) * rr;
|
||||
let ry = Math.sin(res_a*(Math.PI/180)) * rr;
|
||||
|
||||
g.addChild(
|
||||
new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: this.getDiamondSegments(this.pos.x + rx, this.pos.y + ry, 1),
|
||||
fillColor: '#eee',
|
||||
strokeColor: "#000",
|
||||
strokeWidth: 1,
|
||||
item_id: this.concernement.besoins[i].reponses[j].id,
|
||||
item_bid: this.concernement.besoins[i].id,
|
||||
item_cid: this.concernement.id,
|
||||
item_type: 'reponse'
|
||||
})
|
||||
)
|
||||
// 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.item_id = this.concernement.besoins[i].reponses[j].id;
|
||||
reponse.item_bid = this.concernement.besoins[i].id;
|
||||
reponse.item_cid = this.concernement.id;
|
||||
reponse.item_type = 'reponse';
|
||||
reponse.is_symbol_instance = true;
|
||||
g.addChild(reponse)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -574,15 +566,6 @@ export default {
|
||||
|
||||
return g;
|
||||
},
|
||||
getDiamondSegments(x,y,r){
|
||||
return [
|
||||
[x, y - r],
|
||||
[x + r, y],
|
||||
[x, y + r],
|
||||
[x - r, y],
|
||||
[x, y - r]
|
||||
];
|
||||
},
|
||||
setPaperDoleanceSteps(){
|
||||
let g = new paper.Group({
|
||||
pivot: new paper.Point({x:0,y:0}),
|
||||
|
||||
@ -121,26 +121,61 @@ export default {
|
||||
watch: {
|
||||
hover_elmt: {
|
||||
handler (n, o) {
|
||||
// console.log(`watch hover_elmt map`, o, n);
|
||||
console.log(`watch hover_elmt map: o, n`, o, n);
|
||||
// over highlight effect on paper items
|
||||
if (n && n.paper_id) {
|
||||
let nitem = paper.project.getItem({id: n.paper_id});
|
||||
nitem.bringToFront();
|
||||
if (nitem.strokeColor) {
|
||||
nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
|
||||
nitem.strokeColor = "#01ffe2";
|
||||
} else {
|
||||
nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
|
||||
nitem.fillColor = "#01ffe2";
|
||||
console.log('watch hover_element nitem', nitem.definition);
|
||||
if (!nitem.is_symbol_instance) { // not symbol instance
|
||||
nitem.bringToFront();
|
||||
if (nitem.strokeColor) {
|
||||
nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
|
||||
nitem.strokeColor = "#01ffe2";
|
||||
} else {
|
||||
nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
|
||||
nitem.fillColor = "#01ffe2";
|
||||
}
|
||||
|
||||
} else { // is a symbol instanceof, then swap
|
||||
console.log(`symbol instance n.type:${n.type}, nitem`, nitem);
|
||||
switch (n.type) {
|
||||
case 'entite':
|
||||
nitem.definition = this.paper_symbol_definitions.entite_hover;
|
||||
break;
|
||||
case 'besoin':
|
||||
nitem.definition = this.paper_symbol_definitions.besoin_hover;
|
||||
break;
|
||||
case 'reponse':
|
||||
nitem.definition = this.paper_symbol_definitions.reponse_hover;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (o && o.paper_id) {
|
||||
let oitem = paper.project.getItem({id: o.paper_id})
|
||||
if (oitem.data.prevStrokeColor) {
|
||||
oitem.strokeColor = oitem.data.prevStrokeColor;
|
||||
} else {
|
||||
oitem.fillColor = oitem.data.prevFillColor;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
@ -161,6 +196,13 @@ export default {
|
||||
this.addPaperSymbolDefinition('puissanceagir_icon', this.setPaperPuissanceagirICONSymbol());
|
||||
this.addPaperSymbolDefinition('doleance_bg', this.setPaperDoleanceBGSymbol());
|
||||
this.addPaperSymbolDefinition('doleance_icon', this.setPaperDoleanceICONSymbol());
|
||||
//
|
||||
this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol());
|
||||
this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
|
||||
this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol());
|
||||
this.addPaperSymbolDefinition('besoin_hover', this.setPaperBesoinHoverSymbol());
|
||||
this.addPaperSymbolDefinition('reponse', this.setPaperReponseSymbol());
|
||||
this.addPaperSymbolDefinition('reponse_hover', this.setPaperReponseHoverSymbol());
|
||||
},
|
||||
setPaperBoussoleBGSymbol(){
|
||||
// BOUSSOLE
|
||||
@ -305,7 +347,7 @@ export default {
|
||||
children: children,
|
||||
pivot: new paper.Point(pos),
|
||||
name: 'boussole_bg',
|
||||
locked: true,
|
||||
// locked: true,
|
||||
});
|
||||
|
||||
},
|
||||
@ -799,6 +841,58 @@ export default {
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
setPaperEntiteSymbol(){
|
||||
return new paper.Path.Circle({
|
||||
pivot: new paper.Point({x:0,y:0}),
|
||||
center: [0,0],
|
||||
radius: 0.5, //0.3
|
||||
fillColor: '#000',
|
||||
strokeColor: 'rgba(255,255,255,0.05)',
|
||||
strokeWidth:2
|
||||
})
|
||||
},
|
||||
setPaperEntiteHoverSymbol(){
|
||||
return new paper.Path.Circle({
|
||||
pivot: new paper.Point({x:0,y:0}),
|
||||
center: [0,0],
|
||||
radius: 0.5,
|
||||
fillColor: '#01ffe2',
|
||||
strokeColor: 'rgba(255,255,255,0.05)',
|
||||
strokeWidth:2
|
||||
})
|
||||
},
|
||||
setPaperBesoinSymbol(){
|
||||
return new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
||||
fillColor: '#000'
|
||||
})
|
||||
},
|
||||
setPaperBesoinHoverSymbol(){
|
||||
return new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
||||
fillColor: '#01ffe2'
|
||||
})
|
||||
},
|
||||
setPaperReponseSymbol(){
|
||||
return new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
||||
fillColor: '#eee',
|
||||
strokeColor: "#000",
|
||||
strokeWidth: 0.25,
|
||||
})
|
||||
},
|
||||
setPaperReponseHoverSymbol(){
|
||||
return new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
||||
fillColor: '#eee',
|
||||
strokeColor: "#01ffe2",
|
||||
strokeWidth: 0.25,
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user