started map: drawing concernement with entities and contours

src/components/MapConcernements.vue

@@ -1,32 +1,50 @@
 <script>
 
-import { mapActions, mapState } from 'pinia'
-import { ConcernementsStore } from '@/stores/concernements'
-import ConcernementMapItem from '@components/ConcernementMapItem.vue'
-
+// import { mapActions, mapState } from 'pinia'
+import { computed } from 'vue'
 // import LoginBlock from '@components/block/LoginBlock.vue'
 // import UserTools from '@components/block/UserTools.vue'
 
 // import MA from '/api/ma-axios'
 
+// https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
+
 export default {
-  // data(){
-  //   return {
-  //     block: null
-  //   }
+  data() {
+    return {
+      canvasMap: {
+        canvas: null,
+        ctx: null
+      },
+      animateEvent: new Event('animate')
+    }
+  },
+  provide() {
+    return {
+      // explicitly provide a computed property
+      canvasMap: computed(() => this.canvasMap)
+    }
+  },
+  mounted() {
+    this.canvasMap.canvas = this.$refs['canvas-map'];
+    this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
+
+    this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
+    this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
+    this.animate()
+  },
+  // computed: {
+  // },
+  // created () {
   // },
-  computed: {
-    ...mapState(ConcernementsStore,['concernements'])
-  },
-  created () {
-    console.log("mapConcernements created");
-    this.loadConcernements()
-  },
   methods: {
-    ...mapActions(ConcernementsStore,['loadConcernements'])
+    animate () {
+      this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
+      this.canvasMap.canvas.dispatchEvent(this.animateEvent)
+      window.requestAnimationFrame(this.animate);
+    }
   },
-  components: {
-    ConcernementMapItem
+  beforeUpdate () {
   }
 }
 
@@ -34,16 +52,8 @@ export default {
 
 <template>
   <div id="map-concernements">
-    <!-- <h1>Concernements</h1> -->
-    <!-- <canvas rel="canvas-map"></canvas> -->
-    <ul>
-      <li
-        v-for="concernement in concernements"
-        v-bind:key="concernement.id"
-      >
-        <ConcernementMapItem :concernement="concernement"/>
-      </li>
-    </ul>
+    <canvas ref="canvas-map"></canvas>
+    <slot></slot>
   </div>
 </template>