started to integrate matter for physics in the map

src/components/ConcernementMapItem.vue

@@ -1,14 +1,24 @@
 <script>
 
-// import { mapActions, mapState } from 'pinia'
-// import { ConcernementsStore } from '@/stores/concernements'
+// https://brm.io/matter-js/docs/classes/Engine.html
+import {
+  // Engine,
+  // Render,
+  // World,
+  Bodies,
+  Body,
+  Events,
+  Composite,
+  // Composites,
+  // Constraint,
+  // Vertices,
+  // Mouse,
+  // MouseConstraint,
+  // Query,
+  // Common
+} from "matter-js";
 
 
-// import LoginBlock from '@components/block/LoginBlock.vue'
-// import UserTools from '@components/block/UserTools.vue'
-
-// import MA from '/api/ma-axios'
-
 export default {
   inject: ['canvasMap'],
   data() {
@@ -21,18 +31,23 @@ export default {
       },
       ray: 60,
       time: 0,
-      salientPoints: []
+      salientPoints: [],
+      // matter
+      body: null
     }
   },
   props: ['concernement'],
   created () {
-    // console.log("ConcernementsMapItem concernement", this.concernement);
+    console.log("ConcernementsMapItem concernement", this.canvasMap);
     this.entites = this.concernement.entites
     this.parsePoints()
     this.getSalientPoints()
-    if (this.canvasMap) {
-      this.initCanvasMap()
-    }
+  },
+  mounted() {
+    // console.log('concernementItem mounted', typeof this.canvasMap.canvas);
+    // if (this.canvasMap) {
+    //   // this.initCanvasMap()
+    // }
   },
   watch: {
     // canvasMap (n, o) {
@@ -40,7 +55,7 @@ export default {
     // }
     canvasMap: {
       handler (n, o){
-        console.log("concernementItem watch canvasMap.ctx", o, n);
+        // console.log("concernementItem watch canvasMap.ctx", typeof this.canvas, o, n);
         if (!this.canvas) {
           this.initCanvasMap()
         }
@@ -50,12 +65,36 @@ export default {
   },
   methods: {
     initCanvasMap (){
+      // record canvas and ctx for rendering (drawing)
       this.canvas = this.canvasMap.canvas
       this.ctx = this.canvasMap.ctx
+
+      // define init position of the item
       this.pos.x = this.ray/2 + Math.random()*(this.canvas.width - this.ray)
       this.pos.y = this.ray/2 + Math.random()*(this.canvas.height - this.ray)
-      // listen for animate event dispatched from parent
-      this.canvas.addEventListener('animate', this.animate)
+      
+      // MATTER
+      // create the matter body and add it to the engine
+      if (!this.body) {
+        console.log('concernementItem creating body');
+        this.body = Bodies.circle(this.pos.x, this.pos.y, this.ray, {
+          frictionAir: 0,
+          mass: this.entites.length,
+          restitution: 0.9
+        });
+        // Body.setPosition(this.body, this.pos);
+        Body.setVelocity(this.body, {
+            x: -50 + Math.random()*50,
+            y: -50 + Math.random()*50
+          });
+        // console.log('concernementItem mass', this.body.mass);
+        Composite.add(this.canvasMap.matter.engine.world, this.body);
+      }
+
+      // // listen for animate event dispatched from parent
+      // this.canvas.addEventListener('animate', this.animate)
+      // listen for afterUpdate event from Matter.Engine object
+      Events.on(this.canvasMap.matter.engine, "afterUpdate", this.animate)
     },
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
@@ -120,11 +159,11 @@ export default {
       }
       console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
     },
-    animate () {
+    animate (event) {
       if (this.ctx) {
         // this var is only here to trigger the render()
         this.time = Date.now();
-        // this.pos.x += 0;
+        this.pos = this.body.position;
       }
     }
   },