ouatterrir-app/src/components/MapConcernements.vue

<script>

import Granim from 'granim'
// import { mapActions, mapState } from 'pinia'
import { computed } from 'vue'
// import LoginBlock from '@components/block/LoginBlock.vue'
import MapBackground from '@components/MapBackground.vue'

// import MA from '/api/ma-axios'


// https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas

export default {
  data() {
    return {
      canvasMap: {
        canvas: null,
        ctx: null
      },
      animateEvent: new Event('animate'),
      granim: null

    }
  },
  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 () {
  // },
  methods: {
    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);
    }
  },
  beforeUpdate () {
  },
  components: {
    MapBackground
  }
}

</script>

<template>
  <div id="map-backgrounds">
    <MapBackground />
  </div>
  <div id="map-concernements">
    <canvas ref="canvas-map"></canvas>
    <slot></slot>
  </div>
  <nav id="map-nav">
    <ul>
      <li>
        <a href="#terraindevie">terrain de vie</a>
      </li>
      <li>
        <a href="#proximite">proximité</a>
      </li>
      <li>
        <a href="#superposition">superposition</a>
      </li>
      <li>
        <a href="#puissancedagir">puissance d'agir</a>
      </li>
      <li>
        <a href="#action">action</a>
      </li>
      <li>
        <a href="#doleancer">doléancer</a>
      </li>
    </ul>
  </nav>
</template>

<style lang="css" scoped>

</style>