diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index e928aed..47955e6 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -709,8 +709,6 @@ export default { return g; }, setPaperDoleanceBG(){ - let children = []; - var r = this.ray * this.scale * 0.8; // ray var dr = r/2; // demi ray var d = r*2; // diameter @@ -739,7 +737,7 @@ export default { let style = { strokeColor: '#fff', - strokeWidth: 1 + strokeWidth: 2 } let legende_style = { @@ -749,208 +747,354 @@ export default { let fontsize = 2.1; - // arcs exterieur - // haut gauche - children.push(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 - children.push(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 - children.push(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 - children.push(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 - })); - - // legendes - // ARC bas gauche 1 - children.push(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 - })); - children.push(new paper.PointText({ - point: [this.pos.x - p_t, this.pos.y + o_t], - content: "Enquête menée\nsur le terrain de vie", - fontSize: fontsize, - justification: 'right' - })); - - // ARC bas gauche 2 - children.push(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 - })); - children.push(new paper.PointText({ - point: [this.pos.x - o_t, this.pos.y + p_t], - content: "Construction de groupes d'intérets\navec qui composer la doléance", - fontSize: fontsize, - justification: 'right' - })); - - // ARC haut gauche - children.push(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 - })); - children.push(new paper.PointText({ - point: [this.pos.x - q_t, this.pos.y - q_t], - content: "Réception et traitement\nde la doléance", - fontSize: fontsize, - justification: 'right' - })); - - // ARC haut droite - children.push(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 - })); - children.push(new paper.PointText({ - point: [this.pos.x + q_t, this.pos.y - q_t], - content: "Mise-en-œuvre\nde la décision", - fontSize: fontsize, - justification: 'left' - })); - - // ARC bas droite 1 - children.push(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 - })); - children.push(new paper.PointText({ - point: [this.pos.x + o_t, this.pos.y + p_t], - content: "Réception et application\nde la décision", - fontSize: fontsize, - justification: 'left' - })); - - // ARC bas droite 2 - children.push(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 - })); - children.push(new paper.PointText({ - point: [this.pos.x + p_t, this.pos.y + o_t], - content: "Réussite / échec / reprise\ndu cercle politique", - fontSize: fontsize, - justification: 'left' - })); + 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 + new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y + m], + to: [this.pos.x + n, this.pos.y + n], + style: style + }), + new paper.Path.Line({ + from: [this.pos.x - m, this.pos.y + m], + to: [this.pos.x - n, this.pos.y + n], + style: style + }), + new paper.Path.Line({ + from: [this.pos.x + m, this.pos.y - m], + to: [this.pos.x + n, this.pos.y - n], + style: style + }), + 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: style + }), + // 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: style + }), + // 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: style + }), + // 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: style + }), + // + // 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, + 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, + 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, + 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, + 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, + 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, + justification: 'left' + }), + // + // legendes petits cercles + // 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 - 8], + style: legende_style + }), + new paper.PointText({ + point: [this.pos.x, this.pos.y - r - 9], + content: "Décision", + fontSize: fontsize, + 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 + 8], + style: legende_style + }), + new paper.PointText({ + point: [this.pos.x, this.pos.y + r + 10], + content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)", + fontSize: fontsize, + 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 + 9, this.pos.y - 0.5], + content: "Adresse de la décision\nà appliquer", + fontSize: fontsize, + 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 - 9, this.pos.y + 0.4], + content: "Adresse de la doléance", + fontSize: fontsize, + justification: 'right' + }), + ]; - // cercle interieur - children.push(new paper.Path.Circle({ - center: [this.pos.x, this.pos.y], - radius: dr, - style: style - })); - - // petit cercles - children.push(new paper.Path.Circle({ - center: [this.pos.x, this.pos.y -r], - radius: pcr, - style: style - })); - - children.push(new paper.Path.Circle({ - center: [this.pos.x, this.pos.y + r], - radius: pcr, - style: style - })); - - children.push(new paper.Path.Circle({ - center: [this.pos.x + r, this.pos.y], - radius: pcr, - style: style - })); - - children.push(new paper.Path.Circle({ - center: [this.pos.x -r, this.pos.y], - radius: pcr, - style: style - })); - - // axes - // vertical - // haut - children.push(new paper.Path.Line({ - from: [this.pos.x, this.pos.y - r + pcr], - to: [this.pos.x , this.pos.y - dr], - style: style - })); - // bas - children.push(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 - children.push(new paper.Path.Line({ - from: [this.pos.x - r + pcr, this.pos.y], - to: [this.pos.x - dr, this.pos.y], - style: style - })); - // droite - children.push(new paper.Path.Line({ - from: [this.pos.x + r - pcr, this.pos.y], - to: [this.pos.x + dr, this.pos.y], - style: style - })); - - // diagonales - children.push(new paper.Path.Line({ - from: [this.pos.x + m, this.pos.y + m], - to: [this.pos.x + n, this.pos.y + n], - style: style - })); - // - children.push(new paper.Path.Line({ - from: [this.pos.x - m, this.pos.y + m], - to: [this.pos.x - n, this.pos.y + n], - style: style - })); - // - children.push(new paper.Path.Line({ - from: [this.pos.x + m, this.pos.y - m], - to: [this.pos.x + n, this.pos.y - n], - style: style - })); - // - children.push(new paper.Path.Line({ - from: [this.pos.x - m, this.pos.y - m], - to: [this.pos.x - n, this.pos.y - n], - style: style - })); - return new paper.Group({ children: children, pivot: new paper.Point(this.pos), @@ -1177,7 +1321,7 @@ export default { .to({ s: 7, x: (this.canvas.width - 450) / 2, - y: this.canvas.height / 2 + 50, + y: this.canvas.height / 2 + 30, o: 0.8 }, 800) .onUpdate((obj) => {