diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 9ac85f5..e928aed 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -715,7 +715,6 @@ export default { var dr = r/2; // demi ray var d = r*2; // diameter var pcr = 2*this.scale; // petits cercle rayon - var lr = r*1.1; // legendes 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 @@ -728,9 +727,15 @@ export default { // console.log('m', m); // points for legende arcs - let o = Math.cos(22.5*(Math.PI/180)) * lr; // x - let p = Math.sin(22.5*(Math.PI/180)) * lr; // y - let q = Math.sin(45*(Math.PI/180)) * lr; // x = y for legende rayon + 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', @@ -742,6 +747,8 @@ export default { strokeWidth: 1 } + let fontsize = 2.1; + // arcs exterieur // haut gauche children.push(new paper.Path.Arc({ @@ -772,51 +779,90 @@ export default { style: style })); - // arcs legendes - // bas gauche 1 + // legendes + // ARC bas gauche 1 children.push(new paper.Path.Arc({ - from: [this.pos.x - pcr, this.pos.y + lr], + 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' + })); - // bas gauche 2 + // 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 - lr, this.pos.y + pcr], + 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' + })); - // haut gauche + // ARC haut gauche children.push(new paper.Path.Arc({ - from: [this.pos.x - lr, this.pos.y - pcr], + 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 - lr], + to: [this.pos.x - pcr, this.pos.y - lar], style: legende_style })); - // haut droite + 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 - lr], + from: [this.pos.x + pcr, this.pos.y - lar], through: [this.pos.x + q, this.pos.y - q], - to: [this.pos.x + lr, this.pos.y - pcr], + to: [this.pos.x + lar, this.pos.y - pcr], style: legende_style })); - // bas droite 1 + 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 + lr, this.pos.y + pcr], + 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 })); - // bas droite 2 + 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 + lr], + 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' + })); // cercle interieur