basic scribbling

app/src/components/ScribbleLayer.vue

+<template>
+  <div class="scribble">
+    <canvas
+      @mousedown="startPainting"
+      @mouseup="finishedPainting"
+      @mousemove="draw"
+      id="canvas"
+    ></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScribbleLayer',
+
+  props: {},
+
+  data() {
+    return {
+      painting: false,
+      canvas: null,
+      ctx: null,
+    }
+  },
+
+  methods: {
+    startPainting(e) {
+      this.painting = true
+     // console.log(this.painting)
+      this.draw(e)
+    },
+    finishedPainting() {
+      this.painting = false
+    //  console.log(this.painting)
+      this.ctx.beginPath()
+    },
+    draw(e) {
+      if (!this.painting) return
+
+      this.ctx.lineWidth = 6
+      this.ctx.lineCap = 'round'
+
+      this.ctx.lineTo(e.clientX, e.clientY)
+      this.ctx.stroke()
+
+      this.ctx.beginPath()
+      this.ctx.moveTo(e.clientX, e.clientY)
+    },
+  },
+
+  mounted() {
+    this.canvas = document.getElementById('canvas')
+    this.ctx = this.canvas.getContext('2d')
+
+    // Resize canvas
+    this.canvas.height = window.innerHeight
+    this.canvas.width = window.innerWidth
+  },
+}
+</script>
+
+<style lang="css" scoped></style>

app/src/views/Home.vue

@@ -33,6 +33,7 @@
           v-bind:height="height"
           v-bind:connections="connections"
         />
+
         <PanZoomContainer
           v-bind:width="width"
           v-bind:height="height"
@@ -54,6 +55,7 @@
               v-bind:nodetext="value.node_text"
             />
           </div>
+
           <div v-else>
             <OtherNodeslayer
               v-for="value in otherNodes"
@@ -73,6 +75,7 @@
               @editTrue="(e) => editTrue(e)"
             />
           </div>
+          <ScribbleLayer></ScribbleLayer>
         </PanZoomContainer>
 
         <ModeToolbar
@@ -98,6 +101,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
 import OffLine from '@/components/OffLine'
+import ScribbleLayer from '@/components/ScribbleLayer'
 import UploadLayer from '@/components/UploadLayer'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
 import OnBoard from '@/components/OnBoard.vue'
@@ -207,6 +211,7 @@ export default {
     OnBoard,
     OffLine,
     UploadLayer,
+    ScribbleLayer,
   },
 }
 </script>