ouatterrir-app/src/components/MapConcernements.vue

<script>

// import { mapActions, mapState } from 'pinia'
import { computed } from 'vue'
import MapBackground from '@components/MapBackground.vue'

// https://brm.io/matter-js/docs/classes/Engine.html
import Matter from "matter-js";

import MatterAttractors from "matter-attractors";
Matter.use(MatterAttractors);

import paper from 'paper';

import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'
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 {
      canvasMap: {
        canvas: null,
        ctx: null
      },
      animateEvent: new Event('animate'),
      granim: null,
      // MATTER
      engine: null,
      world: null,
      // PAPERJS
      paper: null,
      //
      mapPopupData: null,
    }
  },
  provide() {
    // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
    return {
      // explicitly provide a computed property
      canvasMap: computed(() => this.canvasMap),
      matterEngine: computed(() => this.engine)
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['map_mode']),
    ...mapState(ConcernementsStore,['concernements']),
    ...mapState(ConcernementsStore,['concernementsByID']),
    ...mapState(ConcernementsStore,['opened_concernement']),
    ...mapState(CommonStore,['map_item_ray']),
    ...mapState(CommonStore,['hover_elmt']),
    ...mapState(CommonStore,['paper_symbol_definitions'])
  },
  created() {
    // MATTER
    // create an engine
    let engineOptions = {
      enableSleeping: true,
      timing: {
        //timestamp: 0.5,
        timeScale: 0.5
      }
    }
    this.engine = Matter.Engine.create(engineOptions);
    this.engine.gravity.scale = 0;
    this.world = this.engine.world;
  },
  mounted() {
    this.canvasMap.canvas = this.$refs['canvas-map'];
    this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');

    let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
    let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
    console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);

    // PAPER
    this.paper = paper.setup(this.canvasMap.canvas);
    
    // symbol defintions
    this.initPaperSymbols();

    // use the paper.view click to get back if no items is clicked
    this.paper.view.onClick = function(event) {
      console.log("view onClick", this, event.target);
      if(event.target._id === "paper-view-0") {
        this.resetConcernementOpened();
        this.$router.push({
          name: 'home',
          hash: `#${this.map_mode}`
        });
      }
    }.bind(this);

    // MATTER
    let wall_w = 1000;
    Matter.Composite.add(this.world, [
        // walls
        Matter.Bodies.rectangle(canvas_w/2,        -wall_w/2,         canvas_w, wall_w,   { isStatic: true }),   // top
        Matter.Bodies.rectangle(canvas_w/2,        canvas_h+wall_w/2, canvas_w, wall_w,   { isStatic: true }),   // bottom
        Matter.Bodies.rectangle(-wall_w/2,         canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // left
        Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // right
        // make the items never goes under menus
        Matter.Bodies.rectangle(550,          25, 900, 50, { isStatic: true }),  // menu top
        Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true })   // menu bottom
    ]);

    // add mouse control
    // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
    // this.mouse = Matter.Mouse.create(this.canvasMap.canvas);

    this.animate()
  },
  watch: {
    hover_elmt: {
      handler (n, o) {
        console.log(`watch hover_elmt map: o, n`, o, n);
        // over highlight effect on paper items
        if (n && n.paper_id) {
          let nitem = paper.project.getItem({id: n.paper_id});
          console.log('watch hover_element nitem', nitem.definition);
          if (!nitem.is_symbol_instance) { // not symbol instance
            nitem.bringToFront();
            if (nitem.strokeColor) {
              nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
              nitem.strokeColor = "#01ffe2";          
            } else {
              nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
              nitem.fillColor = "#01ffe2";
            }
            
          } else { // is a symbol instanceof, then swap
            console.log(`symbol instance n.type:${n.type}, nitem`, nitem);
            switch (n.type) {
              case 'entite':
                nitem.definition = this.paper_symbol_definitions.entite_hover;
                break;
              case 'besoin':
                nitem.definition = this.paper_symbol_definitions.besoin_hover;
                break;
              case 'reponse':
                nitem.definition = this.paper_symbol_definitions.reponse_hover;
                break;
              case 'entite_action':
                nitem.definition = this.paper_symbol_definitions.entite_action_hover;
                break;
            }
          }
        }

        if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) {
          let oitem = paper.project.getItem({id: o.paper_id})
          console.log('watch hover_element oitem', oitem);
          if (!oitem.is_symbol_instance) { // not symbol instance
            if (oitem.data.prevStrokeColor) {
              oitem.strokeColor = oitem.data.prevStrokeColor;
            } else {
              oitem.fillColor = oitem.data.prevFillColor;
            }            
          } else { // is a symbol instanceof, then swap
            console.log(`symbol instance o.type:${o.type}, oitem`, oitem);
            switch (o.type) {
              case 'entite':
                oitem.definition = this.paper_symbol_definitions.entite;
                break;
              case 'besoin':
                oitem.definition = this.paper_symbol_definitions.besoin;
                break;
              case 'reponse':
                oitem.definition = this.paper_symbol_definitions.reponse;
                break;
              case 'entite_action':
                oitem.definition = this.paper_symbol_definitions.entite_action;
                break;
            }
          }

        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(ConcernementsStore,['setMapMode']),
    ...mapActions(ConcernementsStore,['resetConcernementOpened']),
    // ...mapActions(ConcernementsStore,['openCloseConcernements']),
    ...mapActions(CommonStore,['addPaperSymbolDefinition']),
    animate () {
      Matter.Engine.update(this.engine, 1);
      window.requestAnimationFrame(this.animate);
    },
    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());
      //
      this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol());
      this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
      this.addPaperSymbolDefinition('entite_action', this.setPaperEntiteActionSymbol());
      this.addPaperSymbolDefinition('entite_action_hover', this.setPaperEntiteActionHoverSymbol());
      this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol());
      this.addPaperSymbolDefinition('besoin_hover', this.setPaperBesoinHoverSymbol());
      this.addPaperSymbolDefinition('reponse', this.setPaperReponseSymbol());
      this.addPaperSymbolDefinition('reponse_hover', this.setPaperReponseHoverSymbol());
    },
    setPaperBoussoleBGSymbol(){
      // BOUSSOLE
      let children = [];
      let ray = this.map_item_ray;
      let pos = {x:0, y:0};

      // big global exterior circle to keep center aligned
      children.push(new paper.Path.Circle({
        center: [0, 0],
        radius: ray*3,
        style: {
          strokeColor: 'rgba(255,255,255,0)',
          strokeWidth: 0.5
        }
      }));

      // cercles pointillés
      for (let i = 1; i < 9; i++) {
        let sw = i === 4 || i === 8 ? 0.5 : 0.25;
        let da = i === 4 || i === 8 ? null : [5,5];
        children.push(new paper.Path.Circle({
          center: [pos.x, pos.y],
          radius: ray/8*i,
          strokeColor: '#fff',
          strokeWidth: sw,
          dashArray: da
        }));
        
      }

      // axes
      // vertical
      children.push(new paper.Path.Line({
        from: [pos.x, pos.y - ray],
        to: [pos.x, pos.y + ray],
        strokeColor: '#fff',
        strokeWidth: 0.5
      }));
      // horizontal
      children.push(new paper.Path.Line({
        from: [pos.x - ray, pos.y],
        to: [pos.x + ray, pos.y],
        strokeColor: '#fff',
        strokeWidth: 0.5
      }))
      
      // fleches
      // haute
      children.push(new paper.Path({
        segments: [
          [pos.x - 8, pos.y - ray + 8],
          [pos.x, pos.y - ray],
          [pos.x + 8, pos.y - ray + 8],
        ],
        strokeWidth: 0.5,
        strokeColor: '#fff',
      }));
      // milieu
      children.push(new paper.Path({
        segments: [
        [pos.x - 8, pos.y + 8],
        [pos.x, pos.y],
        [pos.x + 8, pos.y + 8],
        ],
        strokeWidth: 0.5,
        strokeColor: '#fff',
      }));


      // MOINS - PLUS
      // PLUS
      // horizontal
      children.push(new paper.Path.Line({
        from: [pos.x + ray - 5, pos.y - ray],
        to: [pos.x + ray + 5, pos.y - ray],
        strokeWidth: 2,
        strokeColor: '#fff',
      }))
      // vertical
      children.push(new paper.Path.Line({
        from: [pos.x + ray, pos.y - ray - 5],
        to: [pos.x + ray, pos.y - ray + 5],
        strokeWidth: 2,
        strokeColor: '#fff',
      }))
      
      // MOINS
      // horizontal
      children.push(new paper.Path.Line({
        from: [pos.x - ray - 5, pos.y - ray],
        to: [pos.x - ray + 5, pos.y - ray],
        strokeWidth: 2,
        strokeColor: '#fff',
      }))

      let fontsize = 4;
      let fontFamily = "public_sans";
      
      children.push(new paper.PointText({
        point: [pos.x + 4.5, pos.y - ray - 5],
        content: `entités qui menacent \u2194 entités qui maintiennent`,
        fontSize: fontsize,
        fontFamily: fontFamily,
        justification: 'center',
        fillColor: '#000',
      }))

      children.push(new paper.PointText({
        point: [pos.x - ray - 5, pos.y + 1],
        content: "axe d'intensité",
        fontSize: fontsize,
        fontFamily: fontFamily,
        justification: 'right',
        fillColor: '#000',
      }))

      children.push(new paper.PointText({
        point: [pos.x + ray + 5, pos.y - 3],
        content: "situation future\n\u2195\nsituation actuelle",
        fontSize: fontsize,
        fontFamily: fontFamily,
        justification: 'left',
        fillColor: '#000',
      }))


      let t1 = new paper.PointText({
        point: [pos.x - ray/8*2.3, pos.y - ray/8*2.3],
        content: "avec prise",
        fontSize: fontsize,
        fontFamily: fontFamily,
        justification: 'center',
        fillColor: '#000',
      })
      t1.rotate(-45)
      children.push(t1)

      let t2 = new paper.PointText({
        point: [pos.x - ray/8*2.95, pos.y - ray/8*2.95],
        content: "sans prise",
        fontSize: fontsize,
        fontFamily: fontFamily,
        justification: 'center',
        fillColor: '#000',
      })
      t2.rotate(-45)
      children.push(t2)


      return new paper.Group({
        children: children,
        pivot: new paper.Point(pos),
        name: 'boussole_bg',
        // locked: true,
      });

    },
    setPaperPuissanceagirBGSymbol(){
      let children = [];
      let ray = this.map_item_ray;
      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 = this.map_item_ray;
      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*3,
          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
        }
      });


    },
    setPaperEntiteSymbol(){
      return new paper.Path.Circle({
        pivot: new paper.Point({x:0,y:0}),
        center: [0,0],
        radius: 0.5, //0.3
        fillColor: '#000',
        strokeColor: 'rgba(255,255,255,0.05)',
        strokeWidth:2
      })
    },
    setPaperEntiteHoverSymbol(){
      return new paper.Path.Circle({
        pivot: new paper.Point({x:0,y:0}),
        center: [0,0],
        radius: 0.5,
        fillColor: '#01ffe2',
        strokeColor: 'rgba(255,255,255,0.05)',
        strokeWidth:2
      })
    },
    setPaperEntiteActionSymbol(){
      let svgIcon = paper.project.importSVG(iconAction);
      svgIcon.strokeColor = '#000';
      svgIcon.strokeWidth = 0.75;
      svgIcon.fillColor = null;
      svgIcon.position = {x:0, y:0};

      let circle = new paper.Path.Circle({
        radius: 15,
        fillColor: 'rgba(255,255,255,0.05)'
      })

      return new paper.Group({
        children: [circle, svgIcon],
        name: 'action_icon'
      });
    },
    setPaperEntiteActionHoverSymbol(){
      let svgIcon = paper.project.importSVG(iconAction);
      svgIcon.strokeColor = '#01ffe2';
      svgIcon.strokeWidth = 0.75;
      svgIcon.fillColor = null;
      svgIcon.position = {x:0, y:0};

      let circle = new paper.Path.Circle({
        radius: 15,
        fillColor: 'rgba(255,255,255,0.05)'
      })

      return new paper.Group({
        children: [circle, svgIcon],
        name: 'action_icon'
      });
    },
    setPaperBesoinSymbol(){
      return new paper.Path({
        pivot: new paper.Point(this.pos),
        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
        fillColor: '#000'
      })
    },
    setPaperBesoinHoverSymbol(){
      return new paper.Path({
        pivot: new paper.Point(this.pos),
        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
        fillColor: '#01ffe2'
      })
    },
    setPaperReponseSymbol(){
      return new paper.Path({
        pivot: new paper.Point(this.pos),
        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
        fillColor: '#eee',
        strokeColor: "#000",
        strokeWidth: 0.25,
      })
    },
    setPaperReponseHoverSymbol(){
      return new paper.Path({
        pivot: new paper.Point(this.pos),
        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
        fillColor: '#eee',
        strokeColor: "#01ffe2",
        strokeWidth: 0.25,
      })
    }
  },
  beforeUpdate () {
  },
  components: {
    MapBackground,
    ConcernementMapPopup
  }
}

</script>

<template>
  <div id="map-backgrounds">
    <MapBackground />
  </div>
  <div id="map-matter">
    <canvas ref="canvas-engine"></canvas>
  </div>
  <div id="map-concernements">
    <canvas ref="canvas-map"></canvas>
    <slot></slot>
  </div>
  <nav id="map-nav">
    <ul>
      <li>
        <a 
          href="#terraindevie" @click="setMapMode('terraindevie')"
        >
          <span class="icon terraindevie"></span>  terrain de vie
        </a>
      </li>
      <li>
        <a 
          href="#proximite" @click="setMapMode('proximite')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
        >
          <span class="icon proximite"></span>  proximité
        </a>
      </li>
      <li>
        <a 
          href="#superposition" @click="setMapMode('superposition')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
        >
          <span class="icon superposition"></span>  superposition
        </a>
      </li>
      <li>
        <a 
          href="#puissancedagir" @click="setMapMode('puissancedagir')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
        >
          <span class="icon puissancedagir"></span>  puissance d'agir
        </a>
      </li>
      <li>
        <a 
          href="#action" @click="setMapMode('action')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
        >
          <span class="icon action"></span>  action
        </a>
      </li>
      <li>
        <a 
          href="#doleancer" @click="setMapMode('doleancer')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
        >
          <span class="icon doleancer"></span>  cercle politique
        </a>
      </li>
    </ul>
  </nav>
  <ConcernementMapPopup
    v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
    :infos="hover_elmt"
  />  
</template>

<style lang="css" scoped>

</style>