From d6ff15683d1da42d0eddc11892b8d92a435f2577 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 23 Jun 2020 17:08:28 +0100
Subject: [PATCH] basic scribbling
---
app/src/components/ScribbleLayer.vue | 62 ++++++++++++++++++++++++++++
app/src/views/Home.vue | 5 +++
2 files changed, 67 insertions(+)
create mode 100644 app/src/components/ScribbleLayer.vue
diff --git a/app/src/components/ScribbleLayer.vue b/app/src/components/ScribbleLayer.vue
new file mode 100644
index 0000000..8ff4683
--- /dev/null
+++ b/app/src/components/ScribbleLayer.vue
@@ -0,0 +1,62 @@
+<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>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 744ed31..522dd1f 100644
--- a/app/src/views/Home.vue
+++ b/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>
--
GitLab