refactoring: convertion off all static common paper objects (backgrounds & icon) into symbols for perf optimization DONE
This commit is contained in:
@@ -18,6 +18,13 @@ import { CommonStore } from '@/stores/common'
|
||||
|
||||
import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
|
||||
|
||||
// import iconTerraindevie from "@/assets/icons/terraindevie.svg"
|
||||
// import iconProximite from "@/assets/icons/proximite.svg"
|
||||
// import iconSuperposition from "@/assets/icons/superposition.svg"
|
||||
import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
|
||||
// import iconAction from "@/assets/icons/action.svg"
|
||||
import iconDoleancer from "@/assets/icons/doleancer.svg"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -150,6 +157,10 @@ export default {
|
||||
},
|
||||
initPaperSymbols(){
|
||||
this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol());
|
||||
this.addPaperSymbolDefinition('puissanceagir_bg', this.setPaperPuissanceagirBGSymbol());
|
||||
this.addPaperSymbolDefinition('puissanceagir_icon', this.setPaperPuissanceagirICONSymbol());
|
||||
this.addPaperSymbolDefinition('doleance_bg', this.setPaperDoleanceBGSymbol());
|
||||
this.addPaperSymbolDefinition('doleance_icon', this.setPaperDoleanceICONSymbol());
|
||||
},
|
||||
setPaperBoussoleBGSymbol(){
|
||||
// BOUSSOLE
|
||||
@@ -297,6 +308,497 @@ export default {
|
||||
locked: true,
|
||||
});
|
||||
|
||||
},
|
||||
setPaperPuissanceagirBGSymbol(){
|
||||
let children = [];
|
||||
let ray = 100;
|
||||
let pos = {x:0,y:0};
|
||||
|
||||
// cercles interieur
|
||||
for (let i = 1; i < 6; i++) {
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [pos.x, pos.y],
|
||||
radius: (ray/5)*i,
|
||||
strokeWidth: 0.25
|
||||
}));
|
||||
}
|
||||
|
||||
// rayons
|
||||
for (let j = 0; j < 16; j++) {
|
||||
let a = (360 / 16) * j;
|
||||
|
||||
let ext_x = Math.cos(a*(Math.PI/180)) * ray;
|
||||
let ext_y = Math.sin(a*(Math.PI/180)) * ray;
|
||||
let int_x = Math.cos(a*(Math.PI/180)) * 2;
|
||||
let int_y = Math.sin(a*(Math.PI/180)) * 2;
|
||||
|
||||
children.push(new paper.Path.Line({
|
||||
from: [pos.x + ext_x, pos.y + ext_y],
|
||||
to: [pos.x + int_x, pos.y + int_y],
|
||||
strokeWidth: 0.25,
|
||||
dashArray: [0.5,1]
|
||||
}))
|
||||
}
|
||||
|
||||
// cercle exterieur
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [pos.x, pos.y],
|
||||
radius: ray,
|
||||
strokeWidth: 0.5,
|
||||
fillColor: `rgba(255,255,255,0.6)`
|
||||
}));
|
||||
|
||||
|
||||
return new paper.Group({
|
||||
children: children,
|
||||
pivot: new paper.Point(pos),
|
||||
name: 'puissanceagir_bg',
|
||||
// locked: true,
|
||||
style: {
|
||||
strokeColor: '#fff'
|
||||
}
|
||||
});
|
||||
},
|
||||
setPaperPuissanceagirICONSymbol(){
|
||||
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: 0.75,
|
||||
fillColor: null
|
||||
}
|
||||
});
|
||||
},
|
||||
setPaperDoleanceBGSymbol(){
|
||||
let ray = 100;
|
||||
let pos = {x:0,y:0};
|
||||
var r = ray * 0.8; // ray
|
||||
var dr = r/2; // demi ray
|
||||
var pcr = 2; // 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: 0.25}
|
||||
let felchesstyle = {strokeColor: '#fff', strokeWidth: 0.5}
|
||||
let legende_style = {strokeColor: '#000', strokeWidth: 0.25}
|
||||
let fontsize = 4;
|
||||
let fontFamily = "public_sans";
|
||||
|
||||
let children = [
|
||||
|
||||
// big global exterior circle to keep center aligned
|
||||
new paper.Path.Circle({
|
||||
center: [0, 0],
|
||||
radius: r*2,
|
||||
style: {
|
||||
strokeColor: 'rgba(255,255,255,0)',
|
||||
strokeWidth: 0.5
|
||||
}
|
||||
}),
|
||||
//
|
||||
// ARCS EXTERIEURS
|
||||
// haut gauche
|
||||
new paper.Path.Arc({
|
||||
from: [- r, -pcr],
|
||||
through: [- m, -m],
|
||||
to: [ -pcr, -r],
|
||||
style: style
|
||||
}),
|
||||
// haut droite
|
||||
new paper.Path.Arc({
|
||||
from: [pcr, -r],
|
||||
through: [m, -m],
|
||||
to: [r, -pcr],
|
||||
style: style
|
||||
}),
|
||||
// bas droite
|
||||
new paper.Path.Arc({
|
||||
from: [r, pcr],
|
||||
through: [m, m],
|
||||
to: [pcr, r],
|
||||
style: style
|
||||
}),
|
||||
// bas gauche
|
||||
new paper.Path.Arc({
|
||||
from: [-pcr, r],
|
||||
through: [-m, m],
|
||||
to: [-r, pcr],
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// cercle interieur
|
||||
new paper.Path.Circle({
|
||||
center: [0, 0],
|
||||
radius: dr,
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// petit cercles
|
||||
new paper.Path.Circle({
|
||||
center: [0, -r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Circle({
|
||||
center: [0, r],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Circle({
|
||||
center: [r, 0],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
new paper.Path.Circle({
|
||||
center: [-r, 0],
|
||||
radius: pcr,
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// AXES
|
||||
// vertical haut
|
||||
new paper.Path.Line({
|
||||
from: [0, -r + pcr],
|
||||
to: [0, -dr],
|
||||
style: style
|
||||
}),
|
||||
// vertical bas
|
||||
new paper.Path.Line({
|
||||
from: [0, r - pcr],
|
||||
to: [0, dr],
|
||||
style: style
|
||||
}),
|
||||
// horizontal gauche
|
||||
new paper.Path.Line({
|
||||
from: [-r + pcr, 0],
|
||||
to: [-dr, 0],
|
||||
style: style
|
||||
}),
|
||||
// horizontal droite
|
||||
new paper.Path.Line({
|
||||
from: [r - pcr, 0],
|
||||
to: [dr, 0],
|
||||
style: style
|
||||
}),
|
||||
//
|
||||
// DIAGONALES
|
||||
// bas droite
|
||||
new paper.Path.Line({
|
||||
from: [m, m],
|
||||
to: [n, n],
|
||||
style: style
|
||||
}),
|
||||
// bas gauche
|
||||
new paper.Path.Line({
|
||||
from: [-m, m],
|
||||
to: [-n, n],
|
||||
style: style
|
||||
}),
|
||||
// fleches
|
||||
// haut
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[-2, -dr*1.5 - 2],
|
||||
[0, -dr*1.5],
|
||||
[-2, -dr*1.5 + 2]
|
||||
],
|
||||
style: felchesstyle
|
||||
}),
|
||||
// bas
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[2, dr*1.5 - 2],
|
||||
[0, dr*1.5],
|
||||
[2, dr*1.5 + 2]
|
||||
],
|
||||
style: felchesstyle
|
||||
}),
|
||||
// gauche
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[-dr*1.5 - 2, 2],
|
||||
[-dr*1.5, 0],
|
||||
[-dr*1.5 + 2, 2]
|
||||
],
|
||||
style: felchesstyle
|
||||
}),
|
||||
// droite
|
||||
new paper.Path({
|
||||
segments: [
|
||||
[dr*1.5 - 2, -2],
|
||||
[dr*1.5, 0],
|
||||
[dr*1.5 + 2, -2]
|
||||
],
|
||||
style: felchesstyle
|
||||
}),
|
||||
//
|
||||
// LEGENDES
|
||||
//
|
||||
// arc bas gauche 1
|
||||
new paper.Path.Arc({
|
||||
from: [-pcr, lar],
|
||||
through: [-p, o],
|
||||
to: [-q + pcr/2, q + pcr/2],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [-p, o],
|
||||
to: [-p_t, o_t],
|
||||
style: legende_style
|
||||
}),
|
||||
//text
|
||||
new paper.PointText({
|
||||
point: [-p_t - 1, 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: [-q - pcr/2, q - pcr/2],
|
||||
through: [-o, p],
|
||||
to: [-lar, pcr],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [-o, p],
|
||||
to: [-o_t, p_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [-o_t - 1, 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: [-lar, -pcr],
|
||||
through: [-q, -q],
|
||||
to: [-pcr, -lar],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [-q, -q],
|
||||
to: [-q_t, -q_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [-q_t - 1, -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: [pcr, -lar],
|
||||
through: [q, -q],
|
||||
to: [lar, -pcr],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [q, -q],
|
||||
to: [q_t, -q_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [q_t + 1, -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: [lar, pcr],
|
||||
through: [o, p],
|
||||
to: [q + pcr/2, q - pcr/2],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [o, p],
|
||||
to: [o_t, p_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [o_t + 1, 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: [q - pcr/2, q + pcr/2],
|
||||
through: [p, o],
|
||||
to: [pcr, lar],
|
||||
style: legende_style
|
||||
}),
|
||||
// tiret
|
||||
new paper.Path.Line({
|
||||
from: [p, o],
|
||||
to: [p_t, o_t],
|
||||
style: legende_style
|
||||
}),
|
||||
// texte
|
||||
new paper.PointText({
|
||||
point: [p_t + 1, o_t],
|
||||
content: "Réussite / échec / reprise\ndu cercle politique",
|
||||
fontSize: fontsize,
|
||||
fontFamily: fontFamily,
|
||||
justification: 'left'
|
||||
}),
|
||||
//
|
||||
// Points Cardinaux
|
||||
//
|
||||
// haut
|
||||
new paper.Path.Circle({
|
||||
center: [0, -r],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [0, -r],
|
||||
to: [0, -r - 9],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [0, -r - 11],
|
||||
content: "Décision",
|
||||
fontSize: fontsize,
|
||||
fontFamily: fontFamily,
|
||||
justification: 'center'
|
||||
}),
|
||||
// bas
|
||||
new paper.Path.Circle({
|
||||
center: [0, r],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [0, r],
|
||||
to: [0, r + 9],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [0, 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: [r, 0],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [r, 0],
|
||||
to: [r + 8, 0],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [r + 10, -0.5],
|
||||
content: "Adresse de la décision\nà appliquer",
|
||||
fontSize: fontsize,
|
||||
fontFamily: fontFamily,
|
||||
justification: 'left'
|
||||
}),
|
||||
// gauche
|
||||
new paper.Path.Circle({
|
||||
center: [-r, 0],
|
||||
radius: 0.5,
|
||||
style: {
|
||||
fillColor: '#000'
|
||||
}
|
||||
}),
|
||||
new paper.Path.Line({
|
||||
from: [-r, 0],
|
||||
to: [-r - 8, 0],
|
||||
style: legende_style
|
||||
}),
|
||||
new paper.PointText({
|
||||
point: [-r - 10, 0.4],
|
||||
content: "Adresse de la doléance",
|
||||
fontSize: fontsize,
|
||||
fontFamily: fontFamily,
|
||||
justification: 'right'
|
||||
}),
|
||||
];
|
||||
|
||||
return new paper.Group({
|
||||
children: children,
|
||||
pivot: new paper.Point(pos),
|
||||
name: 'doleance_bg',
|
||||
// locked: true
|
||||
});
|
||||
},
|
||||
setPaperDoleanceICONSymbol(){
|
||||
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: 0.75,
|
||||
fillColor: null
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
|
||||
Reference in New Issue
Block a user