refactoring: convertion off all static common paper objects (backgrounds & icon) into symbols for perf optimization DONE
This commit is contained in:
parent
344b07c93b
commit
ba7f2a6ec0
@ -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
|
||||
|
||||
@ -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 () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user