bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring: convertion off entites, besoin, reponse items into symbols for perf optimization DONE

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-06-29 11:29:16 +02:00
parent ba7f2a6ec0
commit b105c9ddff
3 changed files with 147 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/ConcernementMapItem.vue
View File

@@ -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}),