diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 4425392..dcf9c65 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -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 diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 8065d5f..07f7a44 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -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 () {