bodies a moving well and are clickable

src/components/MapConcernements.vue

@@ -5,23 +5,30 @@ import { computed } from 'vue'
 import MapBackground from '@components/MapBackground.vue'
 
 // 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 {
+//   Engine,
+//   // Render,
+//   // World,
+//   Bodies,
+//   // Body,
+//   // Events,
+//   Composite,
+//   // Composites,
+//   // Constraint,
+//   // Vertices,
+//   // Mouse,
+//   // MouseConstraint,
+//   // Query,
+//   // Common
+// } from "matter-js";
+import Matter from "matter-js";
 
+import MatterAttractors from "matter-attractors";
+Matter.use(MatterAttractors);
+
+
+import { mapState, mapActions } from 'pinia'
+import { ConcernementsStore } from '@/stores/concernements'
 
 export default {
   data() {
@@ -29,23 +36,27 @@ export default {
       canvasMap: {
         canvas: null,
         ctx: null,
-        matter: null
       },
       animateEvent: new Event('animate'),
       granim: null,
       // MATTER
       engine: null,
       world: null,
-      render: null
+      // render: null,
+      mouse: null
     }
   },
   provide() {
     // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
     return {
       // explicitly provide a computed property
-      canvasMap: computed(() => this.canvasMap)
+      canvasMap: computed(() => this.canvasMap),
+      matterEngine: computed(() => this.engine)
     }
   },
+  computed: {
+    ...mapState(ConcernementsStore,['concernements'])
+  },
   created() {
     // MATTER
     // create an engine
@@ -56,13 +67,9 @@ export default {
         timeScale: 0.5
       }
     }
-    this.engine = Engine.create(engineOptions);
+    this.engine = Matter.Engine.create(engineOptions);
     this.engine.gravity.scale = 0;
-    this.canvasMap.matter = {
-      engine: this.engine
-    }
     this.world = this.engine.world;
-
   },
   mounted() {
     this.canvasMap.canvas = this.$refs['canvas-map'];
@@ -73,37 +80,40 @@ export default {
 
     // MATTER
     let wall_w = 5;
-    Composite.add(this.world, [
+    Matter.Composite.add(this.world, [
         // walls
-        Bodies.rectangle(canvas_w/2, 0, canvas_w, wall_w, { isStatic: true }),                 // top
-        Bodies.rectangle(canvas_w/2, canvas_h-wall_w, canvas_w, wall_w, { isStatic: true }),   // bottom
-        Bodies.rectangle(0, canvas_h/2, wall_w, canvas_h, { isStatic: true }),                 // left
-        Bodies.rectangle(canvas_w-wall_w, canvas_h/2, wall_w, canvas_h, { isStatic: true })    // right
+        Matter.Bodies.rectangle(canvas_w/2, 0, canvas_w, wall_w, { isStatic: true }),                 // top
+        Matter.Bodies.rectangle(canvas_w/2, canvas_h-wall_w, canvas_w, wall_w, { isStatic: true }),   // bottom
+        Matter.Bodies.rectangle(0, canvas_h/2, wall_w, canvas_h, { isStatic: true }),                 // left
+        Matter.Bodies.rectangle(canvas_w-wall_w, canvas_h/2, wall_w, canvas_h, { isStatic: true })    // right
     ]);
 
-    // this.render = Render.create({
-    //   canvas: this.$refs['canvas-engine'],
-    //   engine: this.engine,
-    //   options: {
-    //     width: canvas_w,
-    //     height: canvas_h,
-    //     showVelocity: true
-    //   }
-    // });
-    // Render.run(this.render);
+    // add mouse control
+    // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
+    this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
+    this.canvasMap.canvas.addEventListener('click', this.onClick)
 
     this.animate()
   },
-  // computed: {
-  // },
-  // created () {
-  // },
   methods: {
+    ...mapActions(ConcernementsStore,['openCloseConcernement']),
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
-      Engine.update(this.canvasMap.matter.engine, 1)
+      Matter.Engine.update(this.engine, 1)
       window.requestAnimationFrame(this.animate);
+    },
+    onClick (e) {
+      console.log('onClick', this, e);
+      const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
+      // console.log(this.mouse.position);
+      // console.log(query);
+      query.forEach(elmt => {
+        // console.log('body id:', elmt.id);
+        this.concernements.forEach((concernement, index) => {
+          this.openCloseConcernement(concernement.id, elmt.id === concernement.id)
+        });
+      });
     }
   },
   beforeUpdate () {