ouatterrir-app/src/components/MapConcernements.vue

<script>

// import { mapActions, mapState } from 'pinia'
import { computed } from 'vue'
import { nextTick } 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 RecitPlayer from '@components/RecitPlayer.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_2.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,
      //
      superpositions_constraints: []
    }
  },
  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',
                                    'concernements',
                                    'concernementsByID',
                                    'opened_concernement',
                                    'opened_entite_id',
                                    'opened_recit',
                                    'allSuperpositions',
                                    'allSuperpositions_byid'
                                  ]),
    ...mapState(CommonStore,['map_item_ray',
                             'hover_elmt',
                             'paper_symbol_definitions'])
  },
  created() {
    // MATTER
    // create an engine
    let engineOptions = {
      enableSleeping: true,
      timing: {
        //timestamp: 0.5,
        timeScale: 0.5
      },
      // constraintIterations: 20,
      // positionIterations: 20,
      // velocityIterations: 20
    }
    this.engine = Matter.Engine.create(engineOptions);
    this.engine.gravity.scale = 0;
    this.world = this.engine.world;


    // listen for afterUpdate event from Matter.Engine object
    Matter.Events.on(this.engine, "beforeUpdate", this.onBeforeEngineUpdate);
    Matter.Events.on(this.engine, "afterUpdate", this.onAfterEngineUpdate);
  },
  mounted() {
    console.log('map 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);

    // use the paper.view mousemouve to removed mappopup
    this.paper.view.onMouseMove = function(event) {
      // console.log("view onMouseMove", event.target);
      if(event.target._id === "paper-view-0") {
        this.setHoverElmt(null);
      }
    }.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})
          if (oitem) {
            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':
                  if (!this.opened_entite_id || this.opened_entite_id !== oitem.item_id) {
                    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':
                  if (!this.opened_entite_id || this.opened_entite_id !== oitem.item_id) {
                    oitem.definition = this.paper_symbol_definitions.entite_action;
                  }
                  break;
              }
            }
          }

        }
      },
      deep: true
    },
    map_mode: {
      handler (n, o) {
        console.log('concernementMap watch map_mode', o, n);
        if (n === 'superposition' && !this.opened_concernement) {
          // create constraints
          this.setSuperpositionsMatterConstraints();
        }else{
          // destroy constraints
          this.clearSuperpositionsMatterConstraints();
        }
      },
      deep: true
    },
    allSuperpositions: {
      handler (n, o) {
        console.log('concernementMap watch allSuperpositions', o, n);
        if (this.map_mode === "superposition" && n && n.length) {
          // create constraints with a delay (watch is needed for first page load)
          window.setTimeout(this.setSuperpositionsMatterConstraints, 200);
        }
        // else{
        //   // destroy constraints
        //   this.clearSuperpositionsMatterConstraints();
        // }
      },
      deep: true
    },
    // opened_concernement: {
    //   handler (n, o) {
    //     console.log('map opened_concernement', this.opened_concernement);
    //     if (this.map_mode === 'superposition' && n) {
    //       this.resetSuperpositionsMatterConstraints();
    //     }
    //   }, 
    //   deep: true
    // }
  },
  methods: {
    ...mapActions(ConcernementsStore,['setMapMode',
                                      'resetConcernementOpened']),
    ...mapActions(CommonStore,['addPaperSymbolDefinition',
                               'setHoverElmt']),
    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_hidden', this.setPaperHiddenEntiteSymbol());
      this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
      this.addPaperSymbolDefinition('entite_action_icon', this.setPaperEntiteActionIconSymbol());
      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 = 3;               // 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, ...{fillColor: 'rgba(255,255,255,0.9)'}},
        }),
        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: [
            [-4, -dr*1.5 - 4],
            [0, -dr*1.5],
            [-4, -dr*1.5 + 4]
          ],
          style: felchesstyle
        }),
        // bas
        new paper.Path({
          segments: [
            [4, dr*1.5 - 4],
            [0, dr*1.5],
            [4, dr*1.5 + 4]
          ],
          style: felchesstyle
        }),
        // gauche
        new paper.Path({
          segments: [
            [-dr*1.5 - 4, 4],
            [-dr*1.5, 0],
            [-dr*1.5 + 4, 4]
          ],
          style: felchesstyle
        }),
        // droite
        new paper.Path({
          segments: [
            [dr*1.5 - 4, -4],
            [dr*1.5, 0],
            [dr*1.5 + 4, -4]
          ],
          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: "2. 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: "3. 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: "5. 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: "7. 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: "9. 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: "10. 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: "6. 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: "1. 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: "8. 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: "4. 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
      })
    },
    setPaperHiddenEntiteSymbol(){
      return new paper.Path.Circle({
        pivot: new paper.Point({x:0,y:0}),
        center: [0,0],
        radius: 0.7, //0.3
        fillColor: '#fff',
        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
      })
    },
    setPaperEntiteActionIconSymbol(){
      let svgIcon = paper.project.importSVG(iconAction);
      svgIcon.strokeWidth = 0.8;
      svgIcon.scale(0.6);
      svgIcon.strokeColor = '#000';
      svgIcon.fillColor = null;
      svgIcon.position = {x:0, y:0};

      // let circle = new paper.Path.Circle({
      //   radius: 3,
      //   fillColor: 'rgba(255,255,255,0.01)'
      // })

      return new paper.Group({
        children: [svgIcon],
        name: 'action_icon'
      });
    },
    setPaperEntiteActionSymbol(){
      let svgIcon = paper.project.importSVG(iconAction);
      svgIcon.strokeWidth = 0.25;
      svgIcon.scale(0.15);
      svgIcon.strokeColor = '#000';
      svgIcon.fillColor = null;
      svgIcon.position = {x:0, y:0};

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

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

      let circle = new paper.Path.Circle({
        radius: 3,
        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,
      })
    },
    async setSuperpositionsMatterConstraints(){
      await nextTick(); // wait for dom to be upadted before applying consraint
      console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
      // let allBodies = Matter.Composite.allBodies(this.world);
      // console.log('allBodies', allBodies);
      // let allComposites = Matter.Composite.allComposites(this.world); 
      // console.log('allComposites', allComposites);

      // loop through all supperposition couple
      for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
        // if couple has only one superposition, use regular mapItems
        let superpositions_ids = Object.keys(superpositions);
        let i = 0;
        for(let [superposition_id, superposition] of Object.entries(superpositions)){
          i++;
          // console.log('superposition', superposition[0].cid, superposition[1].cid);
          let matter_bodyA_id, matter_bodyB_id;
          if (superpositions_ids.length === 1 || i === 1) {
            matter_bodyA_id = superposition[0].cid
            matter_bodyB_id = superposition[1].cid
          } else {
            matter_bodyA_id = `${superposition[0].cid}___${superposition_id}`
            matter_bodyB_id = `${superposition[1].cid}___${superposition_id}`
          }  
          
          // get the concernement matter bodies with id
          let bodyA = Matter.Composite.get(this.world, matter_bodyA_id, 'body');
          let bodyB = Matter.Composite.get(this.world, matter_bodyB_id, 'body');
          // console.log('bodyA, bodyB', bodyA, bodyB);
            
          // get the entite coordinates inside the concernement body
          let pointA = null;
          let concernementA = this.concernementsByID[superposition[0].cid];
          // console.log('concernementA', concernementA);
          for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
            if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
              // console.log('entiteA', entiteA);
              pointA = Matter.Vector.create(entiteA.display.pos.x, entiteA.display.pos.y);
              break;
            }
          }
          let pointB = null;
          let concernementB = this.concernementsByID[superposition[1].cid];
          // console.log('concernementB', concernementB);
          for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
            if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
              // console.log('entiteB', entiteB);
              pointB = Matter.Vector.create(entiteB.display.pos.x, entiteB.display.pos.y); 
              break;
            }
          }
          
          // console.log(`pointA:`, pointA,` pointB:`, pointB);
          if (bodyA && bodyB && pointA && pointB) {
            let c = Matter.Constraint.create({
              bodyA: bodyA,
              pointA: pointA,
              bodyB: bodyB,
              pointB: pointB,
              stiffness: 1,
              length: 0,
              damping: 1,
              concernementA: concernementA,
              concernementB: concernementB
            });
            this.superpositions_constraints.push(c);
            Matter.Composite.add(this.world, c);
            // keep a link the constraint into the concernement object (useful for tweening the constraint pointA & pointB in concernementMapItem)
            concernementA.superposition_constraints_id.push(c.id);
            concernementB.superposition_constraints_id.push(c.id);
            // record all superposed concernements for each concernement
            if (concernementA.superposed_concernements_id.indexOf(concernementB.id) < 0) {
              concernementA.superposed_concernements_id.push(concernementB.id);
            }
            if (concernementB.superposed_concernements_id.indexOf(concernementA.id) < 0) {
              concernementB.superposed_concernements_id.push(concernementA.id);
            }

          }
        } 

      }
    },
    clearSuperpositionsMatterConstraints(){
      console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints);
      for(let constraint of this.superpositions_constraints){
        
        // Delete superposition constraints recorded in concernement object
        // delete constraint.concernementA.superposition_constraints[constraint.id];
        // delete constraint.concernementB.superposition_constraints[constraint.id];
        let keysA = constraint.concernementA.superposition_constraints_id;
        keysA.forEach(i => {
          if(constraint.concernementA.superposition_constraints_id[i] === constraint.id) {
            delete constraint.concernementA.superposition_constraints_id[i];
          }
        });
        let keysB = constraint.concernementB.superposition_constraints_id;
        keysB.forEach(i => {
          if(constraint.concernementB.superposition_constraints_id[i] === constraint.id) {
            delete constraint.concernementB.superposition_constraints_id[i];
          }
        });
        Matter.Composite.remove(this.world, constraint, true);
      }
      this.superpositions_constraints = [];
    },
    // resetSuperpositionsMatterConstraints(){
    //   this.clearSuperpositionsMatterConstraints();
    //   this.setSuperpositionsMatterConstraints();
    // },
    onBeforeEngineUpdate(){

    },
    onAfterEngineUpdate(){

      // // START OF DEBUGGING
      // // draw lines of constraints for debuging
      // let constraints_lines = this.paper.project.getItem({name: 'constraints_lines', class: paper.Group});
      // if (constraints_lines) {
      //   constraints_lines.removeChildren();
      // }else{
      //   constraints_lines = new paper.Group({
      //     pivot: new paper.Point({x:0,y:0}),
      //     name: 'constraints_lines',
      //   });
      // }
      // let all_constrains = Matter.Composite.allConstraints(this.world);
      // let children = [];
      // for(let constraint of all_constrains){
      //   // console.log('constrain', constraint);
      //   let pointAWorld = Matter.Constraint.pointAWorld(constraint);
      //   let pointBWorld = Matter.Constraint.pointBWorld(constraint);
      //   // console.log('pointAWorld, pointBWorld', pointAWorld, pointBWorld);
      //   children.push(new paper.Path.Line({
      //     from: [pointAWorld.x, pointAWorld.y],
      //     to: [pointBWorld.x, pointBWorld.y],
      //     strokeColor: '#f00',
      //     strokeWidth: 1
      //   }));
      // }
      // constraints_lines.addChildren(children);
      // // END OF DEBUGGING
    }
  },
  beforeUpdate () {
  },
  components: {
    MapBackground,
    ConcernementMapPopup,
    RecitPlayer
  }
}

</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 
          title="terrain de vie" href="#terraindevie" @click="setMapMode('terraindevie')"
        >
          <span class="icon terraindevie"></span> <span class="label"> terrain de vie</span>
        </a>
      </li>
      <li>
        <a 
          title="proximite" href="#proximite" @click="setMapMode('proximite')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
        >
          <span class="icon proximite"></span> <span class="label"> proximité</span>
        </a>
      </li>
      <li>
        <a 
          title="superposition" href="#superposition" @click="setMapMode('superposition')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
        >
          <span class="icon superposition"></span> <span class="label"> superposition</span>
        </a>
      </li>
      <li>
        <a 
          title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
        >
          <span class="icon puissancedagir"></span> <span class="label"> puissance d'agir</span>
        </a>
      </li>
      <li>
        <a 
          title="action" href="#action" @click="setMapMode('action')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
        >
          <span class="icon action"></span> <span class="label"> action</span>
        </a>
      </li>
      <li>
        <a 
          title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
        >
          <span class="icon doleancer"></span> <span class="label"> cercle politique</span>
        </a>
      </li>
    </ul>
  </nav>
  <RecitPlayer />
  <ConcernementMapPopup
    v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
    :infos="hover_elmt"
  />

</template>

<style lang="css" scoped>

</style>