ouatterrir-app/src/components/ConcernementMapItem.vue

<script>


import { nextTick } from 'vue'

import Matter from "matter-js";
import MatterAttractors from "matter-attractors";
// Matter.use(MatterAttractors);
// import polydecomp from "poly-decomp";

import paper from 'paper';

// import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
import Tween from "@tweenjs/tween.js";

import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'
import { CommonStore } from '@/stores/common'
import { mdiPictureInPictureBottomRight } from '@mdi/js';

export default {
  inject: ['canvasMap', 'matterEngine'],
  data() {
    return {
      id: null,
      cid: null,
      concernement: null,
      active_revision: null,
      entities: null,
      superposedEntitesIDsList: [],
      canvas: null,
      ctx: null,
      pos : {
        x: 0,
        y: 0
      },
      ray: 100,
      time: 0,
      salientPoints: [],
      scale: 1,
      prev_scale: 1,
      opacity: 0,
      tween: null,
      is_open: false,
      is_opening: false,
      is_closing: false,
      is_hover: false,
      //
      body: null,
      body_parts: [],
      constraint: null,
      //
      paper_main_object: {},
      paper_groups: {}
    }
  },
  props: ['mapitem'],
  computed: {
    ...mapState(ConcernementsStore,['map_mode',
                                    'concernementsByID',
                                    'allSuperpositions_byid',
                                    'allMapItems_byid',
                                    'opened_concernement',
                                    'opened_entite_id']),
    ...mapState(CommonStore,['hover_elmt',
                            'map_item_ray',
                            'cartouch_width',
                            'cartouch_is_opened',
                            'paper_symbol_definitions'])
  },
  created () {
    console.log('ConcernementMapItem created', this.mapitem);
    // this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
    this.id = this.mapitem.id;
    this.concernement = this.mapitem.concernement;
    this.cid = this.concernement.id;
    console.log('mapitem this.cid', this.cid);
    this.active_revision = this.concernement.active_revision;

    // console.log(`ConcernementsMapItem ${this.id} created`);
    // this.entites = this.concernement.entites
    this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
    

    // disable concernement if less than 3 entite
    if(this.entites.length < 3){
      this.hideShowConcernement(this.concernement.id, false);
    } else{
      // record canvas and ctx for rendering (drawing)
      this.canvas = this.canvasMap.canvas
      this.ctx = this.canvasMap.ctx
      
      // define the ray regarding the width and height of screen
      this.ray = this.map_item_ray;
      // console.log(`this.ray: ${this.ray}`);
      // 
      this.parseEntityPointsValues()
      // this.getSalientPoints()
      this.getJarvisEnvelopeConvexe()

      // define init position of the item
      this.pos = this.getRandomPos();
      //
      this.getSuperposedEntitesIDsList();
      //
      this.initMatterBody()
      //
      this.initPaperObjects()
    }

    // this.setConcernementMapItem(this.cid, this);
  },
  // mounted() {
  //   console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
    
  // },
  // beforeUnmount () {
  unmounted () {
    // console.log(`mapitem ${this.id} unmounted`);
    if(this.mapitem.clone) {
      // console.log(`this.paper_main_object ${this.paper_main_object.id}`, this.paper_main_object);
      paper.project.getItem({id:this.paper_main_object.id}).remove();
    };
    if (this.body) {
      Matter.Composite.remove(this.matterEngine.world, this.body);
    }
  },
  watch: {
    // canvasMap (n, o) {
    //   console.log("concernementItem watch canvasMap", o, n);
    // }
    canvasMap: {
      handler (n, o){
        // console.log("concernementItem watch canvasMap.ctx", typeof this.canvas, o, n);
        if (!this.canvas) {
          this.initCanvasMap()
        }
      },
      deep: true
    },
    opened_concernement: {
      handler (n, o) {
        if (!n) { // if there is no opened concernement
          this.is_open = false;
          this.applyShuffleForces();
        } else {
          if(this.cid === n.id && this.id === n.opened_mapitem_id){
            this.is_open = true;
          }else{
            this.is_open = false;
          }
        }
      },
      deep: true
    },
    is_open: {
      handler (n, o) {
        // console.log('mapItem watch is_open', n, this.is_open);
        if(n){ // opened
          this.openClose(true);
        }else if(o) { // closed if was opened
          this.openClose(false);
        }
      },
      deep: true
    },
    map_mode: {
      handler (n, o) {
        console.log('concernementMapItem watch map_mode', o, n);
        if (n === 'terraindevie' && !this.opened_concernement) {
          this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
        }
        if (this.is_open & n !== o) {
          this.setPaperContents();
        }
        if (n !== o) {
          this.handlePaperVisibilityOnMapMode()
        }
      },
      deep: true
    },
    hover_elmt: {
      handler (n, o) {
        // console.log(`watch hover_elmt ${this.id}`, o, n);
        if (n && (n.type === 'concernement' || n.type === 'superposition') && n.id === this.id) {
          this.is_hover = true;
        } else {
          this.is_hover = false;
        }
      },
      deep: true
    },
    is_hover: {
      handler (n, o) {
        this.onIsHover(n);
      },
      deep: true
    },
    active_revision: {
      handler (n, o) {
        console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
        if(o & n){ // do not trigger on first variable filling (if o is null)
          this.resetPaperActiveRevision();
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(CommonStore,['setHoverElmt']),
    ...mapActions(ConcernementsStore,['openCloseConcernements',
                                      // 'setConcernementMapItem',
                                      'hideShowConcernement',
                                      'setBesoinPaperId',
                                      'setOpenedDoleanceField',
                                      'setOpenedRecit']),
    
    // getResponsiveRay(){
    //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
    // },
    parseEntityPointsValues (){
      // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
      for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
        for (let i = 0; i < this.concernement.revisions[r].entites.length; i++) { // loop through all entite for each revision
          let entite = this.concernement.revisions[r].entites[i]
          // console.log('entite', entite);
          
          entite.display = {
            alpha: null,
            ray: null
          }
          // RAYON
          // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
          // slope = (output_end - output_start) / (input_end - input_start)
          // output = output_start + slope * (input - input_start)
          // from range 0 -> 100 to range 0 -> this.ray
          let init_max = 100
          let slope = this.ray / init_max
          entite.display.ray = slope * (init_max - entite.prise);
          // if (this.concernement.id === 28) {
          //   console.log(`entity prise: ${entite.prise} | ray: ${entite.display.ray}`);
          // }
          

          // ANGLE
          // -90 <= mm <= 90
          if (entite.actuelfuture) {
            // future en haut : 180 <= a <= 360
            // from -90 -> 90 to range 180 -> 360
            entite.display.alpha = entite.menacemaintien + 270
          } else {
            // actuel: en bas : O <= a <= 180
            // from -90 -> 90 to range 180 -> 0
            entite.display.alpha = -1 * entite.menacemaintien + 90
          }

          // POSITION X Y (par rapport au centre du concernement)
          entite.display.pos = {
            x: entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180)),
            y: entite.display.ray * Math.sin(entite.display.alpha * (Math.PI/180))
          }
          // if (entite.entite) {
          //   this.entites_byid[entite.entite.id].display = entite.display;
          // }
        }
      }
    },
    getSalientPoints_OLD() {
      // debugger
      // console.log(this.entites);
      let arc = 360/30;
      // loop through arcs
      // for (let i = 360/arc; i >= 0 ; i--) {
      for (let i = 0; i <= 360/arc ; i++) {
        // loop through entities to find the farest on the arc
        let max_r = 0;
        let farest = null;
        for (let j = 0; j < this.entites.length; j++) {
          let entite = this.entites[j];
          if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) { // if entity is in arc
            if (entite.display.ray > max_r) { //  && entite.display.ray > this.ray/2 // and farest from minimu
              // if entity is farest from precedent one 
              max_r = entite.display.ray;
              // recalcul x & y to get a little padding between entite and contour by increasing ray
              farest = {
                alpha: entite.display.alpha,
                ray: entite.display.ray,
                pos: {
                  x: (entite.display.ray + 3) * Math.cos(entite.display.alpha * (Math.PI/180)),
                  y: (entite.display.ray + 3) * Math.sin(entite.display.alpha * (Math.PI/180))
                }
              };
            }
          }
        }
        if (farest) {
          this.salientPoints.push(farest)
        }
      }
      // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
    },
    getJarvisEnvelopeConvexe(){
      this.salientPoints = [];
      let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites;
      // console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length);
      // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/
      // find the most left point
      let l, min_x = null;
      for (let i = 0; i < entites.length; i++) {
        let entite = entites[i];
        let x = entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180));
        if(!min_x || min_x > x){
          l = i;
          min_x = x;
        }
      }
      // Start from leftmost point, keep moving clockwise
      // until reach the start point again.  This loop runs O(h)
      // times where h is number of points in result or output.
      let p = l, q;
      do {
        // console.log(`do while ${this.id}`, p);
        // Add current point to result
        let entite = entites[p];
        let farest = {
          alpha: entite.display.alpha,
          ray: entite.display.ray,
          pos: {
            x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
            y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
          }
        };
        this.salientPoints.push(farest);


        // Search for a point 'q' such that 
        // orientation(p, q, x) is clockwise 
        // for all points 'x'. The idea is to keep 
        // track of last visited most clockwise
        // point in q. If any point 'i' is more 
        // clockwise than q, then update q.
        q = (p + 1) % entites.length;
        for (let i = 0; i < entites.length; i++) {
          let p_x = (entites[p].display.ray) * Math.cos(entites[p].display.alpha * (Math.PI/180));
          let p_y = (entites[p].display.ray) * Math.sin(entites[p].display.alpha * (Math.PI/180));
          let i_x = (entites[i].display.ray) * Math.cos(entites[i].display.alpha * (Math.PI/180));
          let i_y = (entites[i].display.ray) * Math.sin(entites[i].display.alpha * (Math.PI/180));
          let q_x = (entites[q].display.ray) * Math.cos(entites[q].display.alpha * (Math.PI/180));
          let q_y = (entites[q].display.ray) * Math.sin(entites[q].display.alpha * (Math.PI/180));
          
          let val = (i_y - p_y) * (q_x - i_x) - (i_x - p_x) * (q_y - i_y);
          
          // If i is more clockwise than current q, then update q
          if (val > 0){
            q = i;
          }
        }

        // Now q is the most clockwise with
        // respect to p. Set p as q for next iteration, 
        // so that q is added to result 'hull'
        p = q;
      } while (p != l);

    },
    getRandomPos(){
      let pad = 200;
      // if (this.concernement.id === 56) {
      //   return {
      //     x: Math.random() > 0.5 ? pad : this.canvas.width - pad,
      //     y: pad + this.ray/2 + Math.random()*(this.canvas.height - this.ray - pad)
      //   };
      // } else {
        return {
          x: pad + this.getGaussianRandom()*(this.canvas.width - pad*2),
          y: pad + this.getGaussianRandom()*(this.canvas.height - pad*2)
        };
      // }
    },
    getGaussianRandom(){
      // INFO https://stackoverflow.com/a/49434653
      let u = 0, v = 0;
      while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
      while(v === 0) v = Math.random();
      let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
      num = num / 10.0 + 0.5; // Translate to 0 -> 1
      if (num > 1 || num < 0) return this.getGaussianRandom() // resample between 0 and 1
      return num
    },
    getSuperposedEntitesIDsList(){
      if (this.concernement.superpositions) {
        // loop through all concernement superpositions couples of this concernement
        for(let [couple_id, superpositions] of Object.entries(this.concernement.superpositions)){
          // loop through all superpositions of each couple
          for(let [superposition_id, superposition] of Object.entries(superpositions)){
            if (this.mapitem.superposition_ids.indexOf(superposition_id) >= 0) {
              switch (this.cid) { // get the right eid regarding the cid
                case superposition[0].cid:
                  this.superposedEntitesIDsList.push(superposition[0].eid);
                  break;
                case superposition[1].cid:
                  this.superposedEntitesIDsList.push(superposition[1].eid);
                  break;
              }
            }
          }
        }
      }
      console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);

    },
    // MATTER BODY
    initMatterBody (){
      
      // MATTER
      // create the matter body and add it to the engine
      if (!this.body) {
        // console.log('concernementItem creating body');

        // INFO https://github.com/liabru/matter-attractors/issues/8        
        // INFO https://github.com/liabru/matter-attractors/blob/master/index.js
        // INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L180
        MatterAttractors.Attractors.gravityConstant = -20;

        // Create parts of the body : main big circle & entities
        // INFO map a range of numbers to another range of numbers https://stackoverflow.com/a/46462321
        let entite_range = [3, 100];
        let ray_range = [this.ray*0.8,this.ray*1.2];
        let ray = ray_range[0] + (this.entites.length - entite_range[0]) * (ray_range[1] - ray_range[0]) / (entite_range[1] - entite_range[0]);
        this.body_parts = [
          Matter.Bodies.circle(0, 0, ray, {
            // item_type: 'concernement',
            // id: this.concernement.id,
          })
        ];
        
        // INFO map a range of numbers to another range of numbers https://stackoverflow.com/a/46462321
        let mass_range = [5,15];
        let mass = mass_range[0] + (this.entites.length - entite_range[0]) * (mass_range[1] - mass_range[0]) / (entite_range[1] - entite_range[0]);

        // create the body
        this.body = Matter.Body.create({
          parts: this.body_parts,
          item_type: 'concernement',
          id: this.id,
          frictionAir: 0,
          // mass: Math.pow(3, this.entites.length),
          // mass: 10,
          mass: mass,
          restitution: 0.06,
          collisionFilter: {
            group: -1
          },
          plugin: {
            attractors: [
              // // there is a built in helper function for Newtonian gravity!
              // // you can find out how it works in index.js
              MatterAttractors.Attractors.gravity
              
              // function(bodyA, bodyB) {
              //   var force = {
              //     x: (bodyA.position.x - bodyB.position.x) * 1e-6,
              //     y: (bodyA.position.y - bodyB.position.y) * 1e-6
              //   }
              //   // apply force to both bodies
              //   Matter.Body.applyForce(bodyA, bodyA.position, force);
              //   Matter.Body.applyForce(bodyB, bodyB.position, Matter.Vector.neg(force));
              // }

              // INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L192
              // function (bodyA, bodyB){
              //   // use Newton's law of gravitation
              //   var bToA = Matter.Vector.sub(bodyB.position, bodyA.position),
              //       distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001,
              //       normal = Matter.Vector.normalise(bToA),
              //       magnitude = -MatterAttractors.Attractors.gravityConstant * (bodyA.mass * bodyB.mass / distanceSq),
              //       force = Matter.Vector.mult(normal, magnitude);

              //   // to apply forces to both bodies
              //   Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
              //   Matter.Body.applyForce(bodyB, bodyB.position, force);
              // }
            ]
          }
        });
        Matter.Body.setPosition(this.body, this.pos);

        // add init velocity
        this.setInitBodyVelocity()
        // console.log('concernementItem mass', this.body.mass);
        Matter.Composite.add(this.matterEngine.world, this.body);
        // console.log('concernement body', this.body);

        // listen for afterUpdate event from Matter.Engine object
        Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate);
        Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
      }
    },
    setInitBodyVelocity(){
      let delta = 50;
      Matter.Body.setVelocity(this.body, {
        x: -delta + Math.random()*delta*2,
        y: -delta + Math.random()*delta*2
      });
    },
    // PAPER OBJECTS
    initPaperObjects(){

      // the main paper group containing all paper graphical items for one concernement
      this.paper_main_object = new paper.Group({
        pivot: new paper.Point(this.pos),
        name: `main_${this.id}`,
        cid: this.cid,
        superposition_id: this.mapitem.superposition_ids[0] // TODO what to do with multiples superpositions ids
      });

      // the sub items for one concernement
      this.paper_main_object.addChild(this.setPaperContour());

      if (this.concernement.has_superpositions) {
        this.paper_main_object.addChild(this.setPaperEntitesSuperposees());
      }

      if (this.concernement.has_puissancedagir) {
        this.addNewPaperSymbolInstance('puissanceagir_icon', false, 0.7);
      }
      if (this.concernement.has_agissantes) {
        this.paper_main_object.addChild(this.setPaperAgissantesIcons());
      }
      if (this.concernement.has_doleance) {
        this.addNewPaperSymbolInstance('doleance_icon', false, 0.7);
      }
      
      this.initPaperEvents()
    },
    setPaperContents(){
      // trigered once opening tween is complete
      this.clearPaperContents();
      switch(this.map_mode){
        case 'terraindevie':
          this.addNewPaperSymbolInstance('boussole_bg', true);
          this.paper_main_object.addChild(this.setPaperEntites());
          break;
        case 'superposition':
          this.addNewPaperSymbolInstance('boussole_bg', true);
          break;
        case 'puissancedagir':
          this.addNewPaperSymbolInstance('puissanceagir_bg', true);
          this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
          break;
        case 'action':
          this.addNewPaperSymbolInstance('boussole_bg', true);
          this.paper_main_object.addChild(this.setPaperAgissantes());
          break;
        case 'doleancer':
          this.addNewPaperSymbolInstance('doleance_bg');
          this.paper_main_object.addChild(this.setPaperDoleances());
          break;
      }
    },
    resetPaperActiveRevision(){
      this.getJarvisEnvelopeConvexe();
      // remove contours if already exists
      if (this.paper_main_object.children.contours) {
        this.paper_main_object.children.contours.remove();
      }
      this.paper_main_object.addChild(this.setPaperContour());
      // remove entites if already exists
      if (this.paper_main_object.children.entites) {
        this.paper_main_object.children.entites.remove();
      }
      this.paper_main_object.addChild(this.setPaperEntites());
    },
    clearPaperContents(){
      let clearable_children = ['boussole_bg', 'entites', 
                                'puissanceagir_bg','puissanceagir_besoins',
                                'agissantes',
                                'doleance_bg', 'doleances'];

      clearable_children.forEach(child_name => {
        if (this.paper_main_object.children[child_name]) {
          this.paper_main_object.children[child_name].remove();
        }
      });
    },
    addNewPaperSymbolInstance(name, back, scale){
      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;
      let s = scale ? this.scale * scale : this.scale;
      instance.scale(s);
      // instance.locked = true;
      this.paper_main_object.addChild(instance);
      if (back) {
        this.paper_main_object.children[name].sendToBack();
      } else {
        this.paper_main_object.children[name].bringToFront();
      }
    },
    setPaperContour(){
      // console.log(`setPaperContour ${this.concernement.id}`);
      let getPaddedRoundedSegments = (b,a,c,d) => {
        const ac  = { x: c.x - a.x, y: c.y - a.y } // get ac vecteur
        const lac = Math.sqrt(Math.pow(ac.x, 2) + Math.pow(ac.y, 2)); // get ac longueur ac
        const ab  = { x: b.x - a.x, y: b.y - a.y } // get ab vecteur
        const lab = Math.sqrt(Math.pow(ab.x, 2) + Math.pow(ab.y, 2)); // get ab longeur
        const vab = { x: ab.x/lab, y: ab.y/lab } // get unit vecteur ab
        const an  = { x: vab.x*lac, y: vab.y*lac } // get an vecteur
        const n   = { x: a.x + an.x, y: a.y+an.y } // get n point
        const m   = { x: (c.x + n.x)/2, y: (c.y + n.y)/2 } // get nc midle point
        const ma  = { x:a.x - m.x, y: a.y - m.y } // get ma vecteur
        const lma = Math.sqrt(Math.pow(ma.x, 2)+Math.pow(ma.y, 2)) // get longeur m->a
        const vma = { x: ma.x/lma, y: ma.y/lma } // get ma vecteur unitaire
        // console.log(`vma x:${vma.x}, y:${vma.y}`);
        const pad = 4; // exterior padding
        // the final padded point
        const pa  = [
          this.pos.x+(a.x+vma.x*pad)*this.scale,
          this.pos.y+(a.y+vma.y*pad)*this.scale
        ]
        
        // handles
        const delta = 0.05;
        // handle IN
        const hli   = Math.abs(lab)*delta;            // handle longeur
        const vnai  = { x: -vma.y, y: vma.x }     // get the ma normal unit vector IN
        const hai   = [ vnai.x*hli, vnai.y*hli ]; // get the handleIn point
        // handle OUT
        const hlo   = Math.abs(lac)*delta;            // handle longeur
        const vnao  = { x: vma.y, y: -vma.x }     // get the ma normal vector Out
        const hao   = [ vnao.x*hlo, vnao.y*hlo ]; // get the handleOut point

        return new paper.Segment({
          point: pa,
          handleIn: hai,
          handleOut: hao
        })
        
      }
      const first_point = getPaddedRoundedSegments(
        this.salientPoints[this.salientPoints.length-1].pos,
        this.salientPoints[0].pos,
        this.salientPoints[1].pos
      );
      let segments = [first_point]; 
      for (let j = 1; j < this.salientPoints.length-1; j++) {
        // segments.push([this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap])
          segments.push(getPaddedRoundedSegments(
            this.salientPoints[j-1].pos,
            this.salientPoints[j].pos,
            this.salientPoints[j+1].pos
          ))
      }
      const last_point = getPaddedRoundedSegments(
        this.salientPoints[this.salientPoints.length-2].pos,
        this.salientPoints[this.salientPoints.length-1].pos,
        this.salientPoints[0].pos
      );
      segments.push(last_point)
      segments.push(first_point)
      

      const contrs = new paper.Path({
        name: 'contours',
        segments: segments,
        fillColor: 'rgba(255,255,255,0.4)',
        // selected: true,
        strokeColor: '#fff',
        strokeWidth: 1,
        pivot: new paper.Point(this.pos),
        cid: this.cid
      });

      return contrs;
    },
    setPaperEntites(){
      let g = new paper.Group({
        pivot: new paper.Point(this.pos),
        name: 'entites'
      });
      // for (let i = 0; i < this.entites.length; i++) {
      for (let i = 0; i < this.concernement.revisions_byid[this.concernement.active_revision].entites.length; i++) {
        let entite = this.concernement.revisions_byid[this.concernement.active_revision].entites[i];
        // use paper symbol
        let symbol_name = entite.entite ? entite.entite.agissante ? 'entite_action' : 'entite' : 'entite_hidden';
        let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
        instance.name = 'entite';
        instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
        instance.scale(this.scale);
        instance.fillColor = '#000';
        instance.item_id = entite.entite ? entite.entite.id : null;
        instance.item_type = symbol_name;
        instance.is_symbol_instance = true;
        g.addChild(instance)
      }
      return g;
    },
    setPaperEntitesSuperposees(){
      // console.log('setPaperSuperpositions, superpositions', this.concernement.superpositions);

      let g = new paper.Group({
        pivot: new paper.Point(this.pos),
        name: 'entites_superposes'
      });
      for (let i = 0; i < this.concernement.revisions_byid[this.concernement.active_revision].entites.length; i++) {
        let entite = this.concernement.revisions_byid[this.concernement.active_revision].entites[i];
        if (entite.entite // check if we have an entite object with all the contents
            && this.superposedEntitesIDsList.indexOf(entite.entite.id) >= 0) // check if entite id is in the list builded above
          {
          // console.log(`entite ${entite.entite.id}`, entite, entite.entite.superposition);
          // use paper symbol
          let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
          instance.name = 'entite';
          instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
          // instance.scale(this.scale);
          instance.scale(3);
          instance.fillColor = '#000';
          instance.item_id = entite.entite.id;
          instance.item_type = 'entite_superpose';
          instance.is_symbol_instance = true;
          g.addChild(instance)
        }
      }
      return g;
    },
    setPaperAgissantes(){
      console.log('setPaperAgissantes');
      let g = new paper.Group({
        pivot: new paper.Point(this.pos),
        name: 'agissantes'
      });
      
      for (let i = 0; i < this.concernement.revisions_byid[this.concernement.revision_id].entites.length; i++) {
        let entite = this.concernement.revisions_byid[this.concernement.revision_id].entites[i];
        console.log('agissantes', entite);
        if (entite.entite && entite.entite.agissante) {
          let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
          instance.name = 'entite_action';
          instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
          instance.fillColor = '#000';
          // instance.scale(0.2);
          instance.scale(this.scale);
          instance.item_id = entite.entite.id;
          instance.item_type = 'entite_action';
          instance.is_symbol_instance = true;
          g.addChild(instance)
        }
      }
      return g;
    },
    setPaperAgissantesIcons(){
      let g = new paper.Group({
        pivot: new paper.Point(this.pos),
        name: 'agissantes_icons'
      });
      for (let i = 0; i < this.concernement.revisions_byid[this.concernement.revision_id].entites.length; i++) {
        let entite = this.concernement.revisions_byid[this.concernement.active_revision].entites[i];
        if (entite.entite && entite.entite.agissante) {
          let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action_icon']);
          instance.name = 'entite_action';
          instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
          instance.fillColor = '#000';
          // instance.scale(0.2);
          instance.scale(this.scale);
          instance.item_id = entite.entite.id;
          instance.item_type = 'entite_action';
          instance.is_symbol_instance = true;
          g.addChild(instance)
        }
      }
      return g;
    },
    setPaperPuissanceagirBesoins(){
      let g = new paper.Group({
        pivot: new paper.Point(this.pos),
        name: 'puissanceagir_besoins'
      });

      let res_fields = ['qui','quoi','ou','avec'];
      let arc = (360 / 16);               // unit arc
      let r = (this.ray * this.scale)/5;  // unit ray
      let br = r - r/3;                   // besoin ray

      for (let i = 0; i < this.concernement.besoins.length; i++) {
        let start_a = arc * i;              // angle depart (for reponses)
        let center_a = start_a + arc/2;     // angle central
        let x = Math.cos(center_a*(Math.PI/180)) * br;
        let y = Math.sin(center_a*(Math.PI/180)) * br;

        // use paper symbol
        let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
        besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
        besoin.scale(this.scale);
        besoin.item_id = this.concernement.besoins[i].id;
        besoin.item_cid = this.concernement.id;
        besoin.item_type = 'besoin';
        besoin.is_symbol_instance = true;
        console.log(`paper besoin id:${besoin.id}`);
        this.setBesoinPaperId(besoin.id, this.cid, this.concernement.besoins[i].id);
        g.addChild(besoin)

        let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
        for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
          let res_a = start_a + res_arc * (j+1); // angle for response line
          for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled
            if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
              && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
              ){
              let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
              let rx = Math.cos(res_a*(Math.PI/180)) * rr;
              let ry = Math.sin(res_a*(Math.PI/180)) * rr;

              // use paper symbol
              let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
              reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
              reponse.scale(this.scale);
              reponse.item_id = this.concernement.besoins[i].reponses[j].id;
              reponse.item_bid = this.concernement.besoins[i].id;
              reponse.item_cid = this.concernement.id;
              reponse.item_type = 'reponse';
              reponse.is_symbol_instance = true;
              this.setBesoinPaperId(reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
              g.addChild(reponse)
            }
          }
        }
      }

      return g;
    },
    setPaperDoleances(){
      let g = new paper.Group({
        pivot: new paper.Point({x:0,y:0}),
        name: `doleances`
      });
      this.concernement.doleances.forEach((d) => {
        g.addChild(this.setPaperDoleanceSteps(d))
      });
      return g;
    },
    setPaperDoleanceSteps(doleance){
      let g = new paper.Group({
        pivot: new paper.Point({x:0,y:0}),
        name: `doleance_${doleance.id}`,
        doleance_id: doleance.id
      });
      // let doleance = this.concernement.doleances[0];
      let all_fields = [
        [
          'leprobleme',
          'lenquete',
          {
            fieldname: 'groupesinterets',
            fields: [
                    'groupe_interets',
                    'accorder_interets',
                    'formuler',
                    ] 
          }
        ],
        [
          'entite_addresse_doleance',
          'comment_ennonce_doleance',
          'aqui_addresse_doleance',
          {
            fieldname: 'reception_traitement',
            fields: [
                    'entite_adressee',
                    'doleance_formulee',
                    'traite_doleance',
                    'entite_recoit_doleance',
                    ]
          }
        ],
        [
          'entites_decisionnaires',
          'decision_formule',
          {
            fieldname: 'mise_en_oeuvre_decision',
            fields: [
                    'entite_adresse_decision',
                    'formule_decision',
                    'entite_metenoeuvre_decisio',
                    ]
          }
        ],
        [
          'entite_adresse_application',
          'aqui_adresse_decision',
          'comment_formule_decision',
          {
            fieldname: 'receptions_et_applications',
            fields: [
                    'applique_decision',
                    'formule_decision_applic',
                    'entite_recoit_decision',
                    ]
          },
          'probleme_initial_resolu',
          'oui_nouvelle_situation',
          'non_adresse_doleance',
        ]
      ];
      
      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

      let o = Math.cos(22.5*(Math.PI/180)) * r; // x @ 22.5° for rayon
      let p = Math.sin(22.5*(Math.PI/180)) * r; // y @ 22.5° for rayon
      let o_d = Math.cos(22.5*(Math.PI/180)) * r/2; // x @ 22.5° for demi rayon
      let p_d = Math.sin(22.5*(Math.PI/180)) * r/2; // y @ 22.5° for demi rayon

      // let fontsize = 4;
      
      //
      // CAMENBERT STATIQUES
      //
      // l'enquete
      //
      // camenbert
      let cam = new paper.Path({
        strokeColor: '#fff',
        strokeWidth: 2,
        fillColor: "rgba(255, 255, 255, 0.4)",
        item_type: 'doleance_step',
        item_id: `lenquete`,
        did: doleance.id, 
        field: 'lenquete',
        field_index: null
      });
      cam.add({x: this.pos.x , y: this.pos.y + dr});
      cam.lineTo({x: this.pos.x, y: this.pos.y + r});
      cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
      cam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
      cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
      // texte
      // enquete.addChild(new paper.PointText({
        //   point: {
          //     x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75,
          //     y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
          //   },
          //   content: doleance['lenquete'],
          //   fontSize: fontsize,
      //   fillColor: '#fff',
      //   justification: 'center',
      //   locked: true
      // }));
      g.addChild(cam);
      
      //
      // probleme_initial_resolu
      //
      // camenbert
      let rescam = new paper.Path({
        strokeColor: '#fff',
        strokeWidth: 2,
        fillColor: "rgba(255, 255, 255, 0.4)",
        closed: true,
        item_type: 'doleance_step',
        item_id: `probleme_initial_resolu`,
        did: doleance.id,
        field: 'probleme_initial_resolu',
        field_index: null
      });
      rescam.add({x: this.pos.x + n, y: this.pos.y + n});
      rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
      rescam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r});
      rescam.lineTo({x: this.pos.x, y: this.pos.y + dr});
      rescam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
      // texte
      // resolution.addChild(new paper.PointText({
        //   point: {
          //     x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
          //     y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
          //   },
          //   content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
          //   fontSize: fontsize,
          //   fillColor: '#fff',
          //   justification: 'center'
          // }));
      g.addChild(rescam)
      
      //
      // MULTIPLE FIELDS
      //
      let multiple_fields = [
        { field_name: 'groupesinterets',            arc: 45, decalage: -45 },
        { field_name: 'reception_traitement',       arc: 90, decalage: -90 },
        { field_name: 'mise_en_oeuvre_decision',    arc: 90, decalage: -180 },
        { field_name: 'receptions_et_applications', arc: 45, decalage: 90 }
      ]

      multiple_fields.forEach((mf, j) => {
        for (let i = 0, l = doleance[mf.field_name].length, a = mf.arc/l; i < l; i++) {
          // let gi = new paper.Group({
          //   item_type: 'doleance_step',
          //   item_id: 'lenquete',
          //   item_field: mf.field_name,
          //   item_index: i
          // });
          //camenbert
          let x1=  this.pos.x + Math.sin((mf.decalage- a*i)*(Math.PI/180)) * dr,
              y1=  this.pos.y + Math.cos((mf.decalage- a*i)*(Math.PI/180)) * dr;
          let x2=  this.pos.x + Math.sin((mf.decalage- a*i)*(Math.PI/180)) * r,
              y2=  this.pos.y + Math.cos((mf.decalage- a*i)*(Math.PI/180)) * r;
          let x3=  this.pos.x + Math.sin((mf.decalage- a*(i+1))*(Math.PI/180)) * r,
              y3=  this.pos.y + Math.cos((mf.decalage- a*(i+1))*(Math.PI/180)) * r;
          let x3t= this.pos.x + Math.sin((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r,
              y3t= this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r;
          let x4=  this.pos.x + Math.sin((mf.decalage- a*(i+1))*(Math.PI/180)) * dr,
              y4=  this.pos.y + Math.cos((mf.decalage- a*(i+1))*(Math.PI/180)) * dr;
          let x4t= this.pos.x + Math.sin((mf.decalage- a*(i+0.5))*(Math.PI/180)) * dr,
              y4t= this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * dr;
          let x5=  this.pos.x + Math.sin((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r*0.75,
              y5=  this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r*0.75;
          let p = new paper.Path({
            strokeColor: '#fff',
            strokeWidth: 2,
            fillColor: "rgba(255, 255, 255, 0.4)",
            item_type: 'doleance_step',
            item_id: `${mf.field_name}-${i}`,
            did: doleance.id,
            field: mf.field_name,
            field_index: i
          });
          p.add([x1,y1]);
          p.lineTo([x2,y2]);
          p.arcTo([x3t,y3t], [x3,y3]);
          p.lineTo([x4,y4]);
          p.arcTo([x4t,y4t], [x1,y1]);
          g.addChild(p);
          // gi.addChild(p);
          // // text
          // gi.addChild(new paper.PointText({
          //   point: {x:x5,y:y5},
          //   content: `${j}-${i}`,
          //   fontSize: fontsize,
          //   fillColor: '#fff',
          //   justification: 'center'
          // }))

          // g.addChild(gi)
        }
      });


      // POINTS CARDINAUX
      //
      // // leprobleme
      // g.addChild(new paper.Path.Circle({
      //   center: [this.pos.x, this.pos.y + r],
      //   radius: 3,
      //   style: {
      //     strokeColor: '#fff',
      //     strokeWidth: 2,
      //     fillColor: "rgba(255, 255, 255, 0.4)",
      //   },
      //   item_type: 'doleance_step',
      //   item_id: `leprobleme`,
      //   did: doleance.id,
      //   field: 'leprobleme'
      // }));

      // adresse de la doleance
      g.addChild(new paper.Path.Circle({
        center: [this.pos.x - r, this.pos.y],
        radius: 3 * this.scale,
        style: {
          strokeColor: '#fff',
          strokeWidth: 2,
          fillColor: "rgba(255, 255, 255, 0.9)",
        },
        item_type: 'doleance_step',
        item_id: `adresse_de_la_doleance`,
        did: doleance.id,
        field: 'adresse_de_la_doleance'
      }));
      
      // decision
      g.addChild(new paper.Path.Circle({
        center: [this.pos.x, this.pos.y - r],
        radius: 3 * this.scale,
        style: {
          strokeColor: '#fff',
          strokeWidth: 2,
          fillColor: "rgba(255, 255, 255, 0.9)",
        },
        item_type: 'doleance_step',
        item_id: `decision`,
        did: doleance.id,
        field: 'decision'
      }));

      // adresse_de_la_decision
      g.addChild(new paper.Path.Circle({
        center: [this.pos.x + r, this.pos.y],
        radius: 3 * this.scale,
        style: {
          strokeColor: '#fff',
          strokeWidth: 2,
          fillColor: "rgba(255, 255, 255, 0.9)",
        },
        item_type: 'doleance_step',
        item_id: `adresse_de_la_decision`,
        did: doleance.id,
        field: 'adresse_de_la_decision'
      }));
      

      return g;
    },
    // PAPER VISIBILITY
    handlePaperVisibilityOnBeforeOpen(){
      // agissantes
      if (this.concernement.has_agissantes && this.map_mode === "action") {
        if (!this.is_open) {
          this.paper_main_object.children.agissantes_icons.visible = true;
        } else {
          this.paper_main_object.children.agissantes_icons.visible = false;
        }
      }

      // superposition
      // scale down superposed entites on open
      let entites_superposes = this.paper_main_object.children['entites_superposes'];
      // console.log('entites_superposes.children', entites_superposes.children);
      if(entites_superposes){
        for(let paper_item of entites_superposes.children) {
          // paper_item.definition = this.paper_symbol_definitions.entite_hover;
          paper_item.scale(0.25)
        }
      }
    },
    handlePaperVisibilityOnOpened(){},
    handlePaperVisibilityOnBeforeClose(){
      // superposition
      // scale up superposed entites on open
      let entites_superposes = this.paper_main_object.children['entites_superposes'];
      // console.log('entites_superposes.children', entites_superposes.children);
      if(entites_superposes){
        for(let paper_item of entites_superposes.children) {
          // paper_item.definition = this.paper_symbol_definitions.entite_hover;
          paper_item.scale(4)
        }
      }
    },
    handlePaperVisibilityOnClosed(){
      // agissantes
      if (this.concernement.has_agissantes && this.map_mode === "action") {
        if (!this.is_open) {
          this.paper_main_object.children.agissantes_icons.visible = true;
        } else {
          this.paper_main_object.children.agissantes_icons.visible = false;
        }
      }
    },
    handlePaperVisibilityOnMapMode(){},
    handlePaperVisibilityOnAfterEnginUpdate(){
      // contours focused
      if (!this.isFocused()){
        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; //this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
      }else{
        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; //this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
        if (this.is_hover) {
          this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
          this.paper_main_object.children['contours'].strokeWidth = 2;


        }else{
          this.paper_main_object.children['contours'].strokeColor = "#fff";
          this.paper_main_object.children['contours'].strokeWidth = 1;
        }
      }

      // contours visibility
      if (!this.is_open 
        || (this.is_open && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
        this.paper_main_object.children['contours'].visible = true;
      } else {
        this.paper_main_object.children['contours'].visible = false;
      }

      // proximite

      // superposition
      if (this.concernement.has_superpositions) {
        if (this.map_mode === "superposition") {
          this.paper_main_object.children.entites_superposes.visible = true;
          // highlight of entite part of opened superposition
          let group = this.paper_main_object.children['entites_superposes'];
          if(group){
            if (this.$route.query.superposition_id) {
              let superposition_id = this.$route.query.superposition_id;
              if(superposition_id){
                let ids = superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
                group.children.forEach((item) => {
                  if ( (this.cid === parseInt(ids[1]) && item.item_id === parseInt(ids[2])) 
                    || (this.cid === parseInt(ids[3]) && item.item_id === parseInt(ids[4])) ) {
                      item.definition = this.paper_symbol_definitions.entite_hover;
                      if(!item.focused){
                        item.scale(2)
                        item.focused = true;
                      }
                  } else if(!this.is_hover) {
                    item.definition = this.paper_symbol_definitions.entite;
                    if (item.focused) {
                      item.scale(0.5)
                      item.focused = false;
                    }
                  }
                })
              }
            }else{
              group.children.forEach((item) => {
                if(!this.is_hover) {
                  item.definition = this.paper_symbol_definitions.entite;
                  if (item.focused) {
                    item.scale(0.5)
                    item.focused = false;
                  }
                }
              })
            }
          }
        } else {
            this.paper_main_object.children.entites_superposes.visible = false;
        }
      }

      // puissance d'agir     
      if (this.concernement.has_puissancedagir) {
        if (this.map_mode === "puissancedagir") {
          if (!this.is_open) {
            this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
          } else {
            this.paper_main_object.children.puissanceagir_icon.visible = false;
          }
        } else {
          this.paper_main_object.children.puissanceagir_icon.visible = false;
        }
      }
      
      // agissantes
      if (this.concernement.has_agissantes) {
        if (this.map_mode !== "action") {
          this.paper_main_object.children.agissantes_icons.visible = false;
        } else if(!this.is_open && !this.is_closing){
          this.paper_main_object.children.agissantes_icons.visible = true;
        }
      }

      // doleance     
      if (this.concernement.has_doleance) {
        if (this.map_mode === "doleancer") {
          if (!this.is_open) {
            this.paper_main_object.children.doleance_icon.visible = true;
          } else {
            this.paper_main_object.children.doleance_icon.visible = false;
            // display the right (opened) doleance
            this.concernement.doleances.forEach((d) => {
                this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
            })
          }
        } else {
          this.paper_main_object.children.doleance_icon.visible = false;
        }
      }
      
      // focus on opened entite
      if (this.is_open && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) {
        let group = this.map_mode === 'terraindevie' ? this.paper_main_object.children['entites'] : this.paper_main_object.children['agissantes'];
        if(group){
          group.children.forEach((item) => {
            if (item.item_id === this.opened_entite_id) {
              item.definition = item.item_type === 'entite' ? this.paper_symbol_definitions.entite_hover : this.paper_symbol_definitions.entite_action_hover;
            } else {
              if (!this.hover_elmt || item.item_id !== this.hover_elmt.id) {
                item.definition = item.item_type === 'entite' ? this.paper_symbol_definitions.entite : this.paper_symbol_definitions.entite_action;
              }
            }
          })
        }
      }

      
      

    },
    onIsHover(){
      // handle layer z-index
      if (this.is_hover) {
        this.paper_main_object.bringToFront();
      } else {
        // mapitem can be hover while an other mapitem is open if it is superposed (superposition) to the currently opened mapitem
        // in this case don't send it back
        if (!this.opened_concernement) { 
          this.paper_main_object.sendToBack();
        }
      }
      // hightlight superposed entites on focus
      let entites_superposes = this.paper_main_object.children['entites_superposes'];
      // console.log('entites_superposes.children', entites_superposes.children);
      if(entites_superposes){
        for(let paper_item of entites_superposes.children) {
          if (this.is_hover) {
            paper_item.definition = this.paper_symbol_definitions.entite_hover;
            // paper_item.scale(2)
          } else {
            paper_item.definition = this.paper_symbol_definitions.entite;
            // paper_item.scale(0.5)
          }
        }
      }

    },
    // PAPER EVENTS
    initPaperEvents(){

      this.paper_main_object.onMouseLeave = function(event){
        if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
          this.resetHoverElmt();
          document.body.style.cursor = "auto";
        }
      }.bind(this);

      this.paper_main_object.onMouseMove = function(event){
        console.log(`onmousemove ${this.id}`, this.cartouch_is_opened);

        // prevent hover map item mouse event if cartouch is opened
        if (this.cartouch_is_opened && this.map_mode !== "superposition") return;
        
        if (!this.is_open) {
          if (!this.opened_concernement) { // only if no concernement is opened and is this focused
            if(this.isFocused()){
              if (this.map_mode === 'superposition') {
                // get the superposed entite
                this.setHoverElmt({
                  type: 'superposition',
                  id: this.id,
                  cid: this.cid,
                  eids: this.superposedEntitesIDsList
                });
              } else{
                this.setHoverElmt({
                  type: 'concernement',
                  id: this.id,
                  cid: this.cid
                });
              }
              document.body.style.cursor = "pointer";
            }

          } else if (this.map_mode === 'superposition'){
            // if this mapitem is superposed to the opened mapitem
            if(this.opened_concernement.all_superposed_concernements_id.indexOf(this.cid) >= 0){
              this.setHoverElmt({
                type: 'superposition',
                id: this.id,
                cid: this.cid,
                eids: this.superposedEntitesIDsList
              });
              document.body.style.cursor = "pointer";
            }
          }

        } else {
          
          // lets define some options regarding the map_mode
          let paper_group_tohit;
          switch (this.map_mode) {
            case "terraindevie":
              paper_group_tohit = this.paper_main_object.children['entites'];
              break;
            case "superposition":
              paper_group_tohit = this.paper_main_object.children['entites_superposes'];
              break;
            case "action":
              paper_group_tohit = this.paper_main_object.children['agissantes'];
              break;
            case "puissancedagir":
              paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins'];
              break;
            case "doleancer":
              if(this.paper_main_object.children['doleances']){
                paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
              }
              break;
          }

          let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
          // console.log('move result', result);
          if (result && result.item.item_id) {
            // console.log('move has result', result);
            let new_hover_elmt = {
              paper_id: result.item.id,
              type: result.item.item_type,
              id: result.item.item_id
            }; 
            switch (result.item.item_type) {
              case "besoin":
                new_hover_elmt.no_popup = true;
                break;
              case "reponse":
                new_hover_elmt.bid = result.item.item_bid;
                new_hover_elmt.cid = result.item.item_cid;
                new_hover_elmt.no_popup = true;
                break;
            }
            if (!this.hover_elmt || new_hover_elmt.paper_id !== this.hover_elmt.paper_id) {
              // console.log(`before setHoverElmt ${this.id}`);
              this.setHoverElmt(new_hover_elmt);
            }
            document.body.style.cursor = "pointer";
          } else {
            // console.log('move no result');
            this.resetHoverElmt();
            document.body.style.cursor = "auto";
          }
        }
      }.bind(this);
      
      this.paper_main_object.onClick = async function(event){
        console.log('paper concernement onClick');
        
        // prevent hover map item mouse event if cartouch is opened
        if (this.cartouch_is_opened) return;
        
        if (!this.is_open) { // si ce concernement n'est pas ouvet
          console.log('mapitem is NOT opened');
          if (!this.opened_concernement) { // si aucun concernement n'est ouvert
            console.log(`Open me ${this.id}`);
            // push route (keep the hash for map_mode)
            // wait for routing to be finished before opening the mapItem
            await this.$router.push({
              name: 'concernement',
              params: {cid: parseInt(this.cid)},
              query: {
                mapitemid: this.id,
                superposition_id: this.mapitem.superposition_ids[0]
              },
              hash: `#${this.map_mode}`
            });
            // open/close all concernements
            this.openCloseConcernements(this.cid, this.id)
            // reset the mousehover
            this.resetHoverElmt();
          }  else if (this.map_mode === 'superposition'){
            // if this mapitem is superposed to the opened mapitem
            if(this.opened_concernement.all_superposed_concernements_id.indexOf(this.cid) >= 0){
              // push route (keep the hash for map_mode)
              // wait for routing to be finished before opening the mapItem
              console.log('click on superposed this.mapitem.superposition_ids', this.mapitem.superposition_ids);
              await this.$router.push({
                name: 'concernement',
                params: {cid: this.opened_concernement.cid},
                query: {
                  mapitemid: this.opened_concernement.opened_mapitem_id,
                  superposition_id: this.mapitem.superposition_ids[0]
                },
                hash: `#${this.map_mode}`
              });
            }
          }
        } else { // si ce concernement est ouvert
          console.log('mapitem is opened');
          // lets define some options regarding the map_mode
          let group_to_hit = null;
          switch (this.map_mode) {
            case "terraindevie":
              group_to_hit = this.paper_main_object.children['entites'];
              break;
            case "superposition":
              group_to_hit = this.paper_main_object.children['entites_superposes'];
              break;
            case "action":
              group_to_hit = this.paper_main_object.children['agissantes'];
              break;
            case "doleancer":
              group_to_hit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
              break;
          }
          if (group_to_hit) {
            let result = group_to_hit.hitTest(event.point);
            console.log('click result', result);
            if (result) {
              switch (this.map_mode) {
                case "terraindevie":
                case "superposition":
                case "action":
                  // we have clicked on an entite
                  this.$router.push({
                    name: 'concernement',
                    params: {cid: this.cid, eid: result.item.item_id},
                    query: {
                      mapitemid: this.id,
                      superposition_id: this.mapitem.superposition_ids[0]
                    },
                    hash: `#${this.map_mode}`,
                  });    
                  break;
                case "doleancer":
                  this.setOpenedDoleanceField(this.cid, result.item.did, result.item.field, result.item.field_index);
                  break;
              }
              
            } else {
              // otherwise we close the entite and come back to the concernement
              this.$router.push({
                name: 'concernement',
                hash: `#${this.map_mode}`,
                params: {id: this.cid, mapitemid: this.id}
              });
              // reset the mousehover
              this.resetHoverElmt();
            }
          }
        }
      }.bind(this);

    },
    resetHoverElmt(){
      // console.log('resetHoverElmt');
      setTimeout(()=>{
        this.setHoverElmt(null);
      }, 100);
    },
    // OPEN / CLOSE (with tween)
    openClose(open) { // async 
      // await nextTick(); // not working
      console.log(`ConcernementsMapItem ${this.id} openClose: ${open}`);
      if (this.tween) {
        this.tween.stop();
      }
      if (open) {
        this.is_opening = true;
        // create the paper objects to display (like entite, besoin, etc)
        this.setPaperContents();
        this.handlePaperVisibilityOnBeforeOpen();

        // calcul opened size regarding window size and surounding contents
        let header = document.querySelector('header#header');
        let header_height = header.clientHeight;
        let map_nav = document.querySelector('nav#map-nav');
        let map_nav_height = map_nav.clientHeight;
        let s_h = (this.canvas.height - header_height - map_nav_height) / (this.ray*2*1.15);
        let s_w = (this.canvas.width - this.cartouch_width) / (this.ray*2*1.7);
        let s = Math.min(s_h, s_w)
        
        // create once the opening tweening
        this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
          .to({
            s: s,
            x: (this.canvas.width - this.cartouch_width) / 2,
            y: this.canvas.height / 2,
            o: 0.8
          }, 800)
          .onUpdate((obj) => {
            // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
            // revert to the original size (by reverting the previous scale)
            Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
            this.paper_main_object.scale(1 / this.scale);
            // then scale again to new scale
            Matter.Body.scale(this.body, obj.s, obj.s)
            this.paper_main_object.scale(obj.s);

            // update superposition constraints points poisitions
            if (this.concernement.superposition_constraints_id 
              && this.concernement.superposition_constraints_id[this.id] 
              && this.concernement.superposition_constraints_id[this.id].length)
            {
              // get all the constraints of the world
              let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
              // loop through all constraint ids recorded in the concernement
              // get only the constraint of this concernement mapitem
              for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
                // get the right constraint object from matter
                let constraint;
                for (const c of all_constrains) {
                 if (c.id === constraint_id) {
                  constraint = c;
                  break;
                 } 
                }  
                if (constraint) {
                  // tween the constraint point
                  let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
                  let point = constraint[`point${ab}`];
                  // revert to the original point
                  let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
                  // newpoint from original point
                  let newpoint = Matter.Vector.create(oripoint.x * obj.s, oripoint.y * obj.s)
                  constraint[`point${ab}`] = newpoint;
                }
              }
            }

            // record new scale
            this.prev_scale = this.scale;
            this.scale = obj.s;
            this.opacity = obj.o;
            // console.log('tween update obj.s', obj.s);
            this.pos = {x:obj.x, y:obj.y};
            Matter.Body.setPosition(this.body, this.pos);
          })
          .onComplete((obj) => {
            // console.log('tween complete obj.s', obj.s);
            // record tween one last time
            this.prev_scale = this.scale = obj.s;
            this.opacity = obj.o;
            this.pos = {x:obj.x, y:obj.y};
            Matter.Body.setPosition(this.body, this.pos);
            
            this.handlePaperVisibilityOnOpened();

            // fix the concernement position with a constraint
            this.constraint = Matter.Constraint.create({
              pointA: this.pos,
              bodyB: this.body,
              stiffness: 1,
              damping: 0,
              length: 0
            });
            Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
            
            // paper bring to front
            // this.paper_main_object.bringToFront();
            this.paper_main_object.sendToBack();

            this.is_opening = false;
          });
          // recreate the matter engine event to get it a the end of the events stack
          Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
          Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
      } else {
        // closing
        this.is_closing = true;

        if(this.constraint){
          Matter.Composite.remove(this.matterEngine.world, this.constraint);
        }

        this.concernement.active_revision = this.concernement.revision_id;

        this.handlePaperVisibilityOnBeforeClose();

        // this.setOpenedRecit(null);

        // create once the closing tween
        this.tween = new Tween.Tween({s: this.scale, o: 1})
          .to({s: 1, o: 0}, 500)
          .onUpdate((obj) => {
            // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
            // revert to the original size (by reverting the previous scale)
            Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
            this.paper_main_object.scale(1 / this.scale);
            // then scale again to new scale
            Matter.Body.scale(this.body, obj.s, obj.s)
            this.paper_main_object.scale(obj.s);
            
            // update superposition constraints points positions
            if (this.concernement.superposition_constraints_id 
              && this.concernement.superposition_constraints_id[this.id] 
              && this.concernement.superposition_constraints_id[this.id].length)
            {
              // get all the constraints of the world
              let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
              // loop through all constraint ids recorded in the concernement
              // get only the constraint of this concernement mapitem
              for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
                // get the right constraint object from matter
                let constraint;
                for (const c of all_constrains) {
                 if (c.id === constraint_id) {
                  constraint = c;
                  break;
                 } 
                }  
                if (constraint) {
                  // tween the constraint point
                  let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
                  let point = constraint[`point${ab}`];
                  // revert to the original point
                  let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
                  // newpoint from original point
                  let newpoint = Matter.Vector.create(oripoint.x * obj.s, oripoint.y * obj.s)
                  constraint[`point${ab}`] = newpoint;
                }
              }
            }

            // record new scale
            this.prev_scale = this.scale;
            this.scale = obj.s;
            this.opacity = obj.o;
          })
          .onComplete((obj) => {
            this.prev_scale = this.scale = 1;
            this.handlePaperVisibilityOnClosed();
            this.clearPaperContents();
            this.is_closing = false;
          });
      }
      this.tween.easing(Tween.Easing.Quadratic.InOut).start();
    },
    // ENGINE UPDATE
    onBeforeEngineUpdate (event) {

      // update the opening/closing tweening
      if (this.tween) {
        this.tween.update();
      }

      if (this.opened_concernement) {
        // console.log("try to push aside", this.opened_concernement.opened_mapitem_id, this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]);
        // console.log(this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id));
        if (this.opened_concernement.opened_mapitem_id !== this.id) {
          // push all aside mapitems not superposed the the opened mapitem
          let pushaside = true;

          // BUT NOT push aside mapitems superposed to superposed mapitems
          // opened_mapitem <-- superposed_mapitems <-- superposed_mapitem
          if (this.opened_concernement.superposed_mapitem_id_by_mapitem_id
              && this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id])
            { // if opened mapitem has superposed mapitems
            let superposed_ids = this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]
            if (superposed_ids.indexOf(this.id) >= 0) { //this mapitem is directly superposed to the opened mapitem
              pushaside = false;
            } else { // else we look for second stage of the rockette ... superposed to superposed to opened
              superposed_ids.forEach(mapitem_id => { // for each superposed map_item, check if this mapitem is in their superposed
                let mapitem = this.allMapItems_byid[mapitem_id]; // get the superposed (stage 1) mapitem
                mapitem.superposition_ids.forEach(sup_id => { // for each superposed (stage 2) of the superposed (stage 1)
                  if (this.mapitem.superposition_ids.indexOf(sup_id) >= 0) {
                    pushaside = false;
                  }
                });
              });
            }
          }

          if (pushaside) {
            this.pushAside()
          }
        }
      } else if (!this.is_hover){
        if (this.map_mode === 'proximite' 
          || this.map_mode === 'superposition'
          || this.map_mode === 'puissancedagir'
          || this.map_mode === 'action'
          || this.map_mode === 'doleancer'){ // apply focus forces : move unfocused on the sides and focused on the center
          this.applyFocusForces(); //
        } else {
          this.applyNormalForces(); // if terrain de vie apply force to gently reject items from the sides and so create a continuasly mvmt
        }
      } else {
        // stop movement if is mouse hover
        Matter.Body.setVelocity(this.body, {x:0, y:0})
      }
      
      // reset all matter rotation forces otherwise items will spin when colide 
      Matter.Body.setAngle(this.body, 0);
      Matter.Body.setAngularSpeed(this.body, 0);
    },
    applyFocusForces(){
      if(!this.isFocused()) {
        this.pushAside()
      }else{
        this.bringToCenter()
      }
    },
    isFocused(){
      return this.map_mode === 'terraindevie'
          || (this.map_mode === 'proximite' && this.concernement.has_proximites)
          || (this.map_mode === 'superposition' && this.concernement.has_superpositions)
          || (this.map_mode === 'action' && this.concernement.has_agissantes)
          || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir)
          || (this.map_mode === 'doleancer' && this.concernement.has_doleance);
    },
    pushAside(){
      // console.log('pushAside');
      // apply a force in direction of one side or an other depending of the start position
      // the force is exponentialy proportional to the distance from the side
      // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
      // TODO cartouch width should change regarding actual cartouch is opened or not (and how many cartouch are opened) 
      let pseudo_center_x = this.opened_concernement 
        ? (this.canvas.width - this.cartouch_width) / 2
        : this.canvas.width / 2;
      // get the direction to the closest side
      let dir = this.map_mode === 'superposition' 
          && this.concernement.superposition_constraints_id
          && this.concernement.superposition_constraints_id[this.id]
          && this.concernement.superposition_constraints_id[this.id].length // go to the right if has superposition constraint applied
        ? 1 // to the right
        : this.pos.x > pseudo_center_x // else
          ? 1   // to the right 
          : -1; // to the left
      // max and min item position
      let minp = 0;
      let maxp = dir < 0 
        ? pseudo_center_x 
        : this.canvas.width - pseudo_center_x;
      // max and min force
      let minf = 0;
      let maxf = 6;
      // scale factor
      let scale = (maxf-minf) / (maxp-minp);
      // get the inversed distance
      let dist = dir < 0 
        ? this.pos.x 
        : this.canvas.width - this.pos.x; // get the distance from the side
      // // calculate the force
      // let x_force = Math.pow(dist/700,100) * dir;
      // calculate the logarithmic force
      let x_force = Math.exp(minf + scale*(dist-minp)) * dir;

      let ori_pos = {x:pseudo_center_x, y:this.body.position.y};

      Matter.Body.applyForce(
        this.body, 
        ori_pos, 
        {
          x: x_force,
          y: 0
        }
      );

      this.body.frictionAir = 0.01;
    },
    bringToCenter(){
      // bring to the centre
      // apply a force in direction of one side or an other depending of the start position
      // the force is exponentialy inversed proportional to the distance from the side
      // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
      // TODO cartouch width should change regarding actual cartouch is opened or not (and how many cartouch are opened) 
      let pseudo_center_x = this.opened_concernement 
        ? (this.canvas.width - this.cartouch_width) / 2
        : this.canvas.width / 2;
      let dir = this.pos.x > pseudo_center_x 
        ? -1 // to left 
        : 1; // to right
      // get the inversed distance from the side
      let dist = dir < 0 
        ? this.pos.x - pseudo_center_x 
        : pseudo_center_x - this.pos.x; 

      if (dist > this.canvas.width/6) { // apply decreasing forces and increasing friction air only out of center to let the items float in the center zone
        // max & min item position
        let minp = 0;
        let maxp = dir < 0
          ? this.canvas.width - pseudo_center_x
          : pseudo_center_x;
        
        // X force decrsinsing near the center
        // max and min force
        let xminf = 0;
        let xmaxf = 1 + Math.random()*4;
        // scale factor
        let xscale = (xmaxf-xminf) / (maxp-minp);
        let x_force = Math.exp(xminf + xscale*(dist-minp)) * dir;
        let ori_pos = dir < 0 
          ? {x:this.canvas.width, y:this.body.position.y} 
          : {x:0, y:this.body.position.y};
        Matter.Body.applyForce(
          this.body, 
          ori_pos, 
          {
            x: x_force,
            y: 0
          }
        );
        
        // Friction air fa (increasing near the center)
        let fa_minf = 0;
        let fa_maxf = 6;
        // scale factor
        let fa_scale = (fa_maxf-fa_minf) / (maxp-minp);
        let fa = Math.exp(fa_minf + fa_scale*(dist-minp)*-1);
        this.body.frictionAir = fa;
        
        // console.log(`bringToCenter dist:${dist}, x_force:${x_force}, friction air:${fa}`);        
      } else { // in the ceneter zone let items floats freely
        let fa = 0.01;
        let velocity = Matter.Body.getVelocity(this.body);
        if (velocity.x) {
          let velocityx = Math.abs(velocity.x);
          // map a range of numbers to another range of numbers
          // INFO https://stackoverflow.com/a/46462321
          let velocity_range = [50, 1000];
          let fa_range = [0,3];
          fa = fa_range[0] + (velocityx - velocity_range[0]) * (fa_range[1] - fa_range[0]) / (velocity_range[1] - velocity_range[0]);
          // console.log(`bringToCenter velocityx:${velocityx}, fa:${fa}, velocity`, velocity);
        } else {
          console.warn(`bringToCenter no velocity`, velocity);
        }

        this.body.frictionAir = fa;
      }

    },
    applyShuffleForces() {
      // console.log('applyShuffleForces');
      // var dist, dir, x_velocity;
      // dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
      // dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
      // x_velocity = Math.pow(dist/650,10) * dir;
      // TODO cartouch width should change regarding actual cartouch is opened or not (and how many cartouch are opened) 
      let pseudo_center_x = this.opened_concernement 
        ? (this.canvas.width - this.cartouch_width) / 2
        : this.canvas.width / 2;
      // get the direction to the centre
      let dir = this.pos.x > pseudo_center_x 
        ? -1 // to left 
        : 1; // to right
      // get the inversed distance from the side
      let dist = dir < 0 
        ? this.pos.x - pseudo_center_x 
        : pseudo_center_x - this.pos.x;

      dist = dist > 1000 ? 1000 : dist;
      
      if (dist > this.canvas.width/6) { // apply decreasing forces and increasing friction air only out of center to let the items float in the center zone
        // max & min item position
        let minp = 0;
        let maxp = dir < 0
          ? this.canvas.width - pseudo_center_x
          : pseudo_center_x;

        // X max and min force
        let xminf = 0;
        let xmaxf = 4 + Math.random()*3;
        // scale factor
        let xscale = (xmaxf-xminf) / (maxp-minp);
        
        let x_velocity = Math.exp(xminf + xscale*(dist-minp))*dir;

        // let y_velocity = 30 + Math.random() * 50;
        // y_velocity = Math.random() > 0.5 ? -y_velocity : y_velocity;
        // X max and min force
        let yminf = 1;
        let ymaxf = 2 + Math.random()*4;
        // scale factor
        let yscale = (ymaxf-yminf) / (maxp-minp);
        
        let y_velocity = Math.exp(yminf + yscale*(dist-minp)) * (Math.random() > 0.5 ? 1 : -1);       // let ori_pos = dir < 0 

        //   ? {x:this.canvas.width, y:this.body.position.y} 
        //   : {x:0, y:this.body.position.y};
        // let x_force = Math.pow(dist/800,10) * dir;
        console.log(`applyShuffleForces dir:${dir}, maxp:${maxp}, dist:${dist}, x_velocity:${x_velocity}, y_velocity:${y_velocity}`);
        Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity});
      } else { // if in center zone real shuffle velocity
        // x_velocity = -50 + Math.random()*100;
        // y_velocity = -50 + Math.random()*100;
        // this.setInitBodyVelocity();
      }
      
      this.body.frictionAir = 0.01;
    },
    applyNormalForces () {
      // bring gently to the centre
      // apply a force in direction of one side or an other depending of the start position
      // the force is exponentialy inversed proportional to the distance from the side
      // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
      // TODO cartouch width should change regarding actual cartouch is opened or not (and how many cartouch are opened) 
      // X
      let pseudo_center_x = this.opened_concernement 
        ? (this.canvas.width - this.cartouch_width) / 2
        : this.canvas.width / 2;
      let xdir = this.pos.x > pseudo_center_x 
        ? -1 // to left 
        : 1; // to right
      // get the inversed distance from the side
      let xdist = xdir < 0 
        ? this.pos.x - pseudo_center_x 
        : pseudo_center_x - this.pos.x; 

      // Y
      let pseudo_center_y = this.canvas.height / 2;
      let ydir = this.pos.y > pseudo_center_y 
        ? -1 // to top
        : 1; // to bottom
      // get the inversed distance from the side
      let ydist = ydir < 0 
        ? this.pos.y - pseudo_center_y 
        : pseudo_center_y - this.pos.y; 

      let k = 4;
      if (xdist > this.canvas.width/k || ydist > this.canvas.height/k) { // apply decreasing forces and increasing friction air only out of center to let the items float in the center zone
        // max and min force
        let minf = 0;
        let maxf = 0.1;

        // X
        // max & min item position
        let xminp = 0;
        let xmaxp = xdir < 0
          ? this.canvas.width - pseudo_center_x
          : pseudo_center_x;
        // X force decrsinsing near the center
        // scale factor
        let xscale = (maxf-minf) / (xmaxp-xminp);
        let x_force = Math.exp(minf + xscale*(xdist-xminp)) * xdir;
        let xori_pos = xdir < 0 
          ? {x:this.canvas.width, y:this.body.position.y} 
          : {x:0, y:this.body.position.y};
        Matter.Body.applyForce(
          this.body, 
          xori_pos, 
          {
            x: x_force,
            y: 0
          }
        );

        // Y
        // max & min item position
        let yminp = 0;
        let ymaxp = ydir < 0
          ? this.canvas.height - pseudo_center_y
          : pseudo_center_y;
        // X force decrsinsing near the center
        // scale factor
        let yscale = (maxf-minf) / (ymaxp-yminp);
        let y_force = Math.exp(minf + yscale*(ydist-xminp)) * ydir;
        let yori_pos = ydir < 0 
          ? {x:this.body.position.x, y:this.canvas.height} 
          : {x:this.body.position.x, y:0};
        Matter.Body.applyForce(
          this.body, 
          yori_pos, 
          {
            x: 0,
            y: y_force
          }
        );
        
        // // Friction air fa (increasing near the center)
        // let fa_minf = 0;
        // let fa_maxf = 6;
        // // scale factor
        // let fa_scale = (fa_maxf-fa_minf) / (maxp-minp);
        // let fa = Math.exp(fa_minf + fa_scale*(dist-minp)*-1);
        // this.body.frictionAir = fa;
        
        // console.log(`bringToCenter dist:${xdist}, x_force:${x_force}`);        
      } else { // in the ceneter zone let items floats freely
        // let velocity = Matter.Body.getVelocity(this.body);
        // let velocityx = Math.abs(velocity.x);
        // // map a range of numbers to another range of numbers
        // // INFO https://stackoverflow.com/a/46462321
        // let velocity_range = [50, 1000];
        // let fa_range = [0,3];
        // let fa = fa_range[0] + (velocityx - velocity_range[0]) * (fa_range[1] - fa_range[0]) / (velocity_range[1] - velocity_range[0]);
        // console.log(`bringToCenter velocity.x:${velocity.x}, fa:${fa}`);

        // this.body.frictionAir = fa;
        this.body.frictionAir = 0.1;
      }

    },
    respawn() {
      // respawn element if outside screen
      if(this.pos.x <= 0
        || this.pos.x >= this.canvas.width
        || this.pos.y <= 0
        || this.pos.y >= this.canvas.height){
          this.pos = this.getRandomPos()
          Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
          // this.setInitBodyVelocity();
          Matter.Body.setVelocity(this.body, {x:0,y:0});
        }
      
    },
    onAfterEngineUpdate (event) {
      this.respawn();

      this.paper_main_object.position = this.pos = this.body.position;

      this.handlePaperVisibilityOnAfterEnginUpdate()

    },
  },
  render() {
    // console.log('render()', this.ctx);
  },
}

</script>