starting navigation inside projects

src/components/mixins.js

@@ -1,8 +1,40 @@
 // https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
 export default {
   methods: {
-    deg2rad: function (deg) {
+    deg2rad (deg) {
       return deg * (Math.PI / 180)
+    },
+    createLabelCanvas (text, fontsize) {
+      // console.log('createLabelCanvas', this.data.Titre)
+      const size = fontsize
+      const borderSize = 5
+      let lines = text.split('\n')
+      const ctx = document.createElement('canvas').getContext('2d')
+      const font = `${size}px bold noto_sans,sans-serif`
+      ctx.font = font
+      // measure how long the name will be
+      const doubleBorderSize = borderSize * 2
+      let width = 0
+      for (var i = 0; i < lines.length; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
+      }
+      const height = size * lines.length + doubleBorderSize
+      this.label_size = { x: width / 21, y: height / 21 }
+      ctx.canvas.width = width
+      ctx.canvas.height = height
+
+      // need to set font again after resizing canvas
+      ctx.font = font
+      ctx.textBaseline = 'top'
+
+      // ctx.fillStyle = 'red'
+      // ctx.fillRect(0, 0, width, height)
+      ctx.fillStyle = 'black'
+      for (var j = 0; j < lines.length; j++) {
+        ctx.fillText(lines[j], borderSize, borderSize + j * size)
+      }
+      // console.log('createLabelCanvas', ctx)
+      return ctx.canvas
     }
   }
 }