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

refactoring: convertion off all static common paper objects (backgrounds & icon) into symbols for perf optimization DONE

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-06-28 15:32:59 +02:00
parent 344b07c93b
commit ba7f2a6ec0
2 changed files with 511 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
src/components/ConcernementMapItem.vue
View File

@@ -32,13 +32,6 @@ import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'
import { CommonStore } from '@/stores/common'
import iconAction from "@/assets/icons/action.svg"
import iconDoleancer from "@/assets/icons/doleancer.svg"
import iconProximite from "@/assets/icons/proximite.svg"
import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
import iconSuperposition from "@/assets/icons/superposition.svg"
import iconTerraindevie from "@/assets/icons/terraindevie.svg"
export default {
inject: ['canvasMap', 'matterEngine'],
data() {
@@ -380,19 +373,18 @@ export default {
this.addNewPaperSymbolInstance('boussole_bg');
this.paper_main_object.addChild(this.setPaperContour());
this.paper_main_object.addChild(this.setPaperEntites());
// this.paper_groups.entites = this.setPaperEntites()
if (this.concernement.has_puissancedagir) {
this.paper_main_object.addChild(this.setPaperPuissanceagirBG());
this.paper_main_object.addChild(this.setPaperPuissanceagirICON());
this.addNewPaperSymbolInstance('puissanceagir_bg');
this.addNewPaperSymbolInstance('puissanceagir_icon');
this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
}
if (this.concernement.has_agissantes) {
this.paper_main_object.addChild(this.setPaperAgissantes());
}
if (this.concernement.has_doleance) {
this.paper_main_object.addChild(this.setPaperDoleanceBG());
this.paper_main_object.addChild(this.setPaperDoleanceICON());
this.addNewPaperSymbolInstance('doleance_bg');
this.addNewPaperSymbolInstance('doleance_icon');
this.paper_main_object.addChild(this.setPaperDoleanceSteps());
}
console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
@@ -400,10 +392,12 @@ export default {
this.initPaperEvents()
},
addNewPaperSymbolInstance(name){
let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]);
let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]); // , {x:0,y:0}
instance.name = name;
// instance.pivot = new paper.Point({x:0,y:0});
instance.position = this.pos;
instance.scale = this.scale;
instance.locked = true;
this.paper_main_object.addChild(instance);
},
setPaperContour(){
@@ -521,80 +515,6 @@ export default {
}
return g;
},
setPaperPuissanceagirBG(){
let children = [];
for (let i = 1; i < 6; i++) {
children.push(new paper.Path.Circle({
center: [this.pos.x, this.pos.y],
radius: ((this.ray*this.scale)/5)*i,
strokeWidth: 0.5
}));
}
for (let j = 0; j < 4; j++) {
let a = (90 / 4) * j;
// diagonale
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
// radians = degrees * (pi/180)
// degrees = radians * (180/pi)
let x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
let y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale;
children.push(new paper.Path.Line({
from: [this.pos.x + x, this.pos.y + y],
to: [this.pos.x - x, this.pos.y - y],
strokeWidth: 1,
dashArray: [5,5]
}))
children.push(new paper.Path.Line({
from: [this.pos.x - y, this.pos.y + x],
to: [this.pos.x + y, this.pos.y - x],
strokeWidth: 1,
dashArray: [5,5]
}))
}
children.push(new paper.Path.Circle({
center: [this.pos.x, this.pos.y],
radius: this.ray*this.scale,
strokeWidth: 2,
fillColor: `rgba(255,255,255,0.6)`
}));
return new paper.Group({
children: children,
pivot: new paper.Point(this.pos),
name: 'puissanceagir_bg',
// locked: true,
style: {
strokeColor: '#fff'
}
});
},
setPaperPuissanceagirICON(){
let children = [];
let svgIcon = paper.project.importSVG(iconPuissanceagir);
children.push(svgIcon);
svgIcon.position = this.pos;
return new paper.Group({
children: children,
pivot: new paper.Point(this.pos),
name: 'puissanceagir_icon',
locked: true,
style: {
strokeColor: '#000',
strokeWidth: 1,
fillColor: null
}
});
},
setPaperPuissanceagirBesoins(){
let g = new paper.Group({
pivot: new paper.Point(this.pos),
@@ -662,443 +582,10 @@ export default {
[x - r, y],
[x, y - r]
];
},
setPaperDoleanceBG(){
var r = this.ray * this.scale * 0.8; // ray
var dr = r/2; // demi ray
var pcr = 2*this.scale; // petits cercle rayon
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
// radians = degrees * (pi/180)
// degrees = radians * (180/pi)
// Points for 45° axes
let m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
let n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
// console.log('m', m);
// points for legende arcs
var lar = r*1.1; // legendes arcs rayon
let o = Math.cos(22.5*(Math.PI/180)) * lar; // x @ 22.5° for legende arc rayon
let p = Math.sin(22.5*(Math.PI/180)) * lar; // y @ 22.5° for legende arc rayon
let q = Math.sin(45*(Math.PI/180)) * lar; // x = y @ 45° for legende arc rayon
var ltr = lar + 4; // legendes texts rayon
let o_t = Math.cos(22.5*(Math.PI/180)) * ltr; // x @ 22.5° for legende text rayon
let p_t = Math.sin(22.5*(Math.PI/180)) * ltr; // y @ 22.5° for legende text rayon
let q_t = Math.sin(45*(Math.PI/180)) * ltr; // x = y @ 45° for legende text rayon
let style = {
strokeColor: '#fff',
strokeWidth: 1
}
let felchesstyle = {
strokeColor: '#fff',
strokeWidth: 2
}
let legende_style = {
strokeColor: '#000',
strokeWidth: 1
}
let fontsize = 4;
let fontFamily = "public_sans";
let children = [
// ARCS EXTERIEURS
// haut gauche
new paper.Path.Arc({
from: [this.pos.x - r, this.pos.y - pcr],
through: [this.pos.x - m, this.pos.y - m],
to: [this.pos.x - pcr, this.pos.y - r],
style: style
}),
// haut droite
new paper.Path.Arc({
from: [this.pos.x + pcr, this.pos.y - r],
through: [this.pos.x + m, this.pos.y - m],
to: [this.pos.x + r, this.pos.y - pcr],
style: style
}),
// bas droite
new paper.Path.Arc({
from: [this.pos.x + r, this.pos.y + pcr],
through: [this.pos.x + m, this.pos.y + m],
to: [this.pos.x + pcr, this.pos.y + r],
style: style
}),
// bas gauche
new paper.Path.Arc({
from: [this.pos.x - pcr, this.pos.y + r],
through: [this.pos.x - m, this.pos.y + m],
to: [this.pos.x - r, this.pos.y + pcr],
style: style
}),
//
// cercle interieur
new paper.Path.Circle({
center: [this.pos.x, this.pos.y],
radius: dr,
style: style
}),
//
// petit cercles
new paper.Path.Circle({
center: [this.pos.x, this.pos.y -r],
radius: pcr,
style: style
}),
new paper.Path.Circle({
center: [this.pos.x, this.pos.y + r],
radius: pcr,
style: style
}),
new paper.Path.Circle({
center: [this.pos.x + r, this.pos.y],
radius: pcr,
style: style
}),
new paper.Path.Circle({
center: [this.pos.x -r, this.pos.y],
radius: pcr,
style: style
}),
//
// AXES
// vertical haut
new paper.Path.Line({
from: [this.pos.x, this.pos.y - r + pcr],
to: [this.pos.x , this.pos.y - dr],
style: style
}),
// vertical bas
new paper.Path.Line({
from: [this.pos.x, this.pos.y + r - pcr],
to: [this.pos.x , this.pos.y + dr],
style: style
}),
// horizontal gauche
new paper.Path.Line({
from: [this.pos.x - r + pcr, this.pos.y],
to: [this.pos.x - dr, this.pos.y],
style: style
}),
// horizontal droite
new paper.Path.Line({
from: [this.pos.x + r - pcr, this.pos.y],
to: [this.pos.x + dr, this.pos.y],
style: style
}),
//
// DIAGONALES
// bas droite
new paper.Path.Line({
from: [this.pos.x + m, this.pos.y + m],
to: [this.pos.x + n, this.pos.y + n],
style: style
}),
// bas gauche
new paper.Path.Line({
from: [this.pos.x - m, this.pos.y + m],
to: [this.pos.x - n, this.pos.y + n],
style: style
}),
// // haut droite
// new paper.Path.Line({
// from: [this.pos.x + m, this.pos.y - m],
// to: [this.pos.x + n, this.pos.y - n],
// style: style
// }),
// // haut gauche
// new paper.Path.Line({
// from: [this.pos.x - m, this.pos.y - m],
// to: [this.pos.x - n, this.pos.y - n],
// style: style
// }),
// fleches
// haut
new paper.Path({
segments: [
[this.pos.x - 2, this.pos.y - dr*1.5 - 2],
[this.pos.x, this.pos.y - dr*1.5],
[this.pos.x - 2, this.pos.y - dr*1.5 + 2]
],
style: felchesstyle
}),
// bas
new paper.Path({
segments: [
[this.pos.x + 2, this.pos.y + dr*1.5 - 2],
[this.pos.x, this.pos.y + dr*1.5],
[this.pos.x + 2, this.pos.y + dr*1.5 + 2]
],
style: felchesstyle
}),
// gauche
new paper.Path({
segments: [
[this.pos.x - dr*1.5 - 2, this.pos.y + 2],
[this.pos.x - dr*1.5, this.pos.y],
[this.pos.x - dr*1.5 + 2, this.pos.y + 2]
],
style: felchesstyle
}),
// droite
new paper.Path({
segments: [
[this.pos.x + dr*1.5 - 2, this.pos.y - 2],
[this.pos.x + dr*1.5, this.pos.y],
[this.pos.x + dr*1.5 + 2, this.pos.y - 2]
],
style: felchesstyle
}),
//
// LEGENDES
//
// arc bas gauche 1
new paper.Path.Arc({
from: [this.pos.x - pcr, this.pos.y + lar],
through: [this.pos.x - p, this.pos.y + o],
to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2],
style: legende_style
}),
// tiret
new paper.Path.Line({
from: [this.pos.x - p, this.pos.y + o],
to: [this.pos.x - p_t, this.pos.y + o_t],
style: legende_style
}),
//text
new paper.PointText({
point: [this.pos.x - p_t - 1, this.pos.y + o_t],
content: "Enquête menée\nsur le terrain de vie",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'right'
}),
// arc bas gauche 2
new paper.Path.Arc({
from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2],
through: [this.pos.x - o, this.pos.y + p],
to: [this.pos.x - lar, this.pos.y + pcr],
style: legende_style
}),
// tiret
new paper.Path.Line({
from: [this.pos.x - o, this.pos.y + p],
to: [this.pos.x - o_t, this.pos.y + p_t],
style: legende_style
}),
// texte
new paper.PointText({
point: [this.pos.x - o_t - 1, this.pos.y + p_t],
content: "Construction de groupes d'intérets\navec qui composer la doléance",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'right'
}),
// arc haut gauche
new paper.Path.Arc({
from: [this.pos.x - lar, this.pos.y - pcr],
through: [this.pos.x - q, this.pos.y - q],
to: [this.pos.x - pcr, this.pos.y - lar],
style: legende_style
}),
// tiret
new paper.Path.Line({
from: [this.pos.x - q, this.pos.y - q],
to: [this.pos.x - q_t, this.pos.y - q_t],
style: legende_style
}),
// texte
new paper.PointText({
point: [this.pos.x - q_t - 1, this.pos.y - q_t],
content: "Réception et traitement\nde la doléance",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'right'
}),
// arc haut droite
new paper.Path.Arc({
from: [this.pos.x + pcr, this.pos.y - lar],
through: [this.pos.x + q, this.pos.y - q],
to: [this.pos.x + lar, this.pos.y - pcr],
style: legende_style
}),
// tiret
new paper.Path.Line({
from: [this.pos.x + q, this.pos.y - q],
to: [this.pos.x + q_t, this.pos.y - q_t],
style: legende_style
}),
// texte
new paper.PointText({
point: [this.pos.x + q_t + 1, this.pos.y - q_t],
content: "Mise-en-œuvre\nde la décision",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'left'
}),
// arc bas droite 1
new paper.Path.Arc({
from: [this.pos.x + lar, this.pos.y + pcr],
through: [this.pos.x + o, this.pos.y + p],
to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2],
style: legende_style
}),
// tiret
new paper.Path.Line({
from: [this.pos.x + o, this.pos.y + p],
to: [this.pos.x + o_t, this.pos.y + p_t],
style: legende_style
}),
// texte
new paper.PointText({
point: [this.pos.x + o_t + 1, this.pos.y + p_t],
content: "Réception et application\nde la décision",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'left'
}),
// arc bas droite 2
new paper.Path.Arc({
from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2],
through: [this.pos.x + p, this.pos.y + o],
to: [this.pos.x + pcr, this.pos.y + lar],
style: legende_style
}),
// tiret
new paper.Path.Line({
from: [this.pos.x + p, this.pos.y + o],
to: [this.pos.x + p_t, this.pos.y + o_t],
style: legende_style
}),
// texte
new paper.PointText({
point: [this.pos.x + p_t + 1, this.pos.y + o_t],
content: "Réussite / échec / reprise\ndu cercle politique",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'left'
}),
//
// Points Cardinaux
//
// haut
new paper.Path.Circle({
center: [this.pos.x, this.pos.y -r],
radius: 0.5,
style: {
fillColor: '#000'
}
}),
new paper.Path.Line({
from: [this.pos.x, this.pos.y -r],
to: [this.pos.x, this.pos.y - r - 9],
style: legende_style
}),
new paper.PointText({
point: [this.pos.x, this.pos.y - r - 11],
content: "Décision",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'center'
}),
// bas
new paper.Path.Circle({
center: [this.pos.x, this.pos.y + r],
radius: 0.5,
style: {
fillColor: '#000'
}
}),
new paper.Path.Line({
from: [this.pos.x, this.pos.y + r],
to: [this.pos.x, this.pos.y + r + 9],
style: legende_style
}),
new paper.PointText({
point: [this.pos.x, this.pos.y + r + 14],
content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'center'
}),
// droite
new paper.Path.Circle({
center: [this.pos.x + r, this.pos.y],
radius: 0.5,
style: {
fillColor: '#000'
}
}),
new paper.Path.Line({
from: [this.pos.x + r, this.pos.y],
to: [this.pos.x + r + 8, this.pos.y],
style: legende_style
}),
new paper.PointText({
point: [this.pos.x + r + 10, this.pos.y - 0.5],
content: "Adresse de la décision\nà appliquer",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'left'
}),
// gauche
new paper.Path.Circle({
center: [this.pos.x -r, this.pos.y],
radius: 0.5,
style: {
fillColor: '#000'
}
}),
new paper.Path.Line({
from: [this.pos.x - r, this.pos.y],
to: [this.pos.x - r - 8, this.pos.y],
style: legende_style
}),
new paper.PointText({
point: [this.pos.x - r - 10, this.pos.y + 0.4],
content: "Adresse de la doléance",
fontSize: fontsize,
fontFamily: fontFamily,
justification: 'right'
}),
];
return new paper.Group({
children: children,
pivot: new paper.Point(this.pos),
name: 'doleance_bg',
locked: true
});
},
setPaperDoleanceICON(){
let children = [];
let svgIcon = paper.project.importSVG(iconDoleancer);
children.push(svgIcon);
svgIcon.position = this.pos;
return new paper.Group({
children: children,
pivot: new paper.Point(this.pos),
name: 'doleance_icon',
locked: true,
style: {
strokeColor: '#000',
strokeWidth: 1,
fillColor: null
}
});
},
setPaperDoleanceSteps(){
let g = new paper.Group({
pivot: new paper.Point(this.pos),
pivot: new paper.Point({x:0,y:0}),
name: 'doleance_steps'
});
let doleance = this.concernement.doleances[0];
@@ -1161,7 +648,7 @@ export default {
var r = this.ray * this.scale * 0.8; // ray
var dr = r/2; // demi ray
var pcr = 2*this.scale; // petits cercle rayon
// var pcr = 2*this.scale; // petits cercle rayon
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9