From 0c4d680c30d626783a885a07e45079cdcfac42fa Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 25 Jun 2020 14:14:43 +0100
Subject: [PATCH] fixed for only scribbling when draw mode is selected
---
.DS_Store | Bin 10244 -> 10244 bytes
app/src/components/ScribbleLayer.vue | 166 ++++++++++++++-------------
app/src/experimental/ModeToolbar.vue | 7 +-
app/src/views/Home.vue | 7 +-
4 files changed, 99 insertions(+), 81 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index 94e91fc9c7816fc97b471daafcb884f5f9e977d1..2cf9dd3fbe680113a2c17d01e4ec4c06c14fd222 100644
GIT binary patch
delta 1300
zcmeH_TWm~07{}*dm(Gcyv+Zinwnw`~D{7^--O{4;7TtAg(M470wr6mnyGze@tF~1S
z65{f-?nF{T2tv{#E{O+mYs8E7fW(7HJR-c{f!SS&7ZQnAFEjbR|9msw_y5hV#$An9
z>p6y_Zoad~7KxOV%y8IU<)wWNd&KE1FL&6>DqMYi3e75TR(e|fJ=-I_eLIdvKk_`B
zh*~U_xooWJ_P7^%*m|BGHbi&BmXHw)m@7r6Dfj4f>(+kWWs2pZ!xu8bqRtl*CWmry
zT$Yw!P*m)ym{%K1<Cb)0WtpqOhH12Q2yeHchc-3)%ytpbjljk=hAsjjV}l_&6-!E~
z(iHIdMWRZzsX3HSqN}^wjICWps3&<>u4-5KHM&-puPx~h>hV%NS&*wvrnDt4)OHHF
z>alcgNh_S9vL@5mF1U{>iOe(yV@;clfX+=NnVI2as<*?}COWvT(8Qs#nM_?3PL9eK
z{Y=iD!_?L7LBC)2Y+B$bmHGIDYL!|;`E9x`{`g{_8EV)f0>9c?KxuPasn&I&N5^K^
z`xQdT1X4ok$YRn;I!S~aAV<jn86wxo4RVh>Au;ljye03+2l9!0CSQ<(5g3KhNP`L+
za-d-<N>B<Hs^Gy=G-4T+qXn&KLpyZ%VWJCRbYmy>U@!JzKMvs(25=f@vT+HQaRpa#
z7mx55!-(NIUgI4;M;~S^l;pK~cfH5`XYx~iNB+gQxEUGN@tIlnf~nI>X3edRKCpWG
zS>B)UdnE<2jY=yOo*K)sWvlrUHI2u;q=|4$p~fU`B@q-AN-aeysx3Q*6>CmKGUX!@
zq2^*Usien8CDjTxN0EH_$e21op4R5EDk?eh(TSUCY8m4s{^69r;4w^|kvEdXHxNl+
z3^F8xeCdBNDllLAUyC{{K!YT(0!{E@ouuHC95zb|0R*uPJ&2$eJFxpFivu`}BRGcR
wIEk}3r{X*=;39@_9XD|cw{Zve@f5EHgPBK^!BqR#k<sr~?Z1)#V&p;m0E!Gp4FCWD
delta 1348
zcmdUuO>9h26vyx1=X-9nccx|fw9OkI)m8>=I;KjdMT<_0R@17_GVQx~G4ne5rbCS}
zf`uqH<NG5L3lS_Nlti(xKw}}8NGv35ENw^#3+}wv#s*7?yLcz(oZS2V_y0ThQ1hYY
zo68x7QuS<qATJ*Gc`H5cdA{<5#~rV%Ec3X%6~075mRv>U{=k-S-=6s1#J;n{T7Vr%
z_HY~t=Tc6Gzkp6u>I3x+fyT{@^_skehk{W(#_NJnZl=m|cP5=No$qRjMD=dNT*G@z
z5oP&$maAZD(X6@Ns_NQwHgh<0=p?#c*SHbYx9YrSUC`{}hNc_a+IHz$bbEVDH}%dC
zZ#9BpE;}$JTf6d<DazX3PJL&u9_^FZbjhj~Dk|Nm2>~m+H9aYg(<C-vZ<wa2%7#p<
zwug(aCP`_hgJsiVrBr4?snyi?aJ%B6b7W@9tvhr>vnonCt&o@|w}pb8JY<)AbiTwI
z<@T6;FT1#q`XvWE^4hNMaF~0IsA;LHQ5Gv5nP0C6n$e~RH!`vYZN+s$*1Ak@v8H82
zrLuF}Nd_X3LQ+PSkOtC0BBYP>lT+jpxlIPh9rB1gBd^Ij@_~FLpU7wOg?t4t0TdIF
z1s7(Z2*oHtIsB+b4eAj<BUWHF)?))Up#xnAA&hQB5JM9CaR3L=j}thFGdPR<%eanv
z7{miS#1p*0OT0oFZ}9=2QcrUl1bNjWU-}2~CBG&ACd<N|J881ZT{LS>#eDyg)YIIy
zBvspl(|oth`xpNa@@#y@Qz@N4Mafgu=`$o@9<x)bmXyi@F~e}TWVYyzN{i{ppIfF<
zHd>&St<*b@s%)&FC|POM0!rB!fmv3qyt+oT#|fgt2h*j?<jk}&ViEZ(k0J7sycaCK
zkslZ<I5-6ZH)g^EpYVSXYEg%!ScN7uqXn%Nfz1dGQ!oUDKE#p0KEdKJj^HSc;W$nU
z66bLN7jXrytGFhZ+`s_t;I3eEU$A+M=eHu0Ps_K)xxbG|hOBuVnMdojSQjfO{3rfa
N<^R#(|J&b__zBX+P<a3V
diff --git a/app/src/components/ScribbleLayer.vue b/app/src/components/ScribbleLayer.vue
index 2af7562..12987ec 100644
--- a/app/src/components/ScribbleLayer.vue
+++ b/app/src/components/ScribbleLayer.vue
@@ -1,11 +1,6 @@
<template>
<div class="scribble">
- <canvas
- @mousedown="startPainting"
- @mouseup="finishedPainting"
- @mousemove="draw"
- id="canvas"
- ></canvas>
+ <canvas id="canvas"></canvas>
</div>
</template>
@@ -29,49 +24,53 @@ export default {
},
methods: {
- startPainting(e) {
- this.painting = this.drawready
- if (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)
- },
+ // startPainting(e) {
+ // this.painting = this.drawready
+ // if (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)
+ // },
// touch methods
handleStart(evt) {
- evt.preventDefault()
- console.log('touchstart.')
- var el = document.getElementById('canvas')
- var ctx = el.getContext('2d')
- var touches = evt.changedTouches
-
- for (var i = 0; i < touches.length; i++) {
- console.log('touchstart:' + i + '...')
- ongoingTouches.push(this.copyTouch(touches[i]))
- var color = this.colorForTouch(touches[i])
- ctx.beginPath()
- ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false) // a circle at the start
- ctx.fillStyle = color
- ctx.fill()
- console.log('touchstart:' + i + '.')
+ this.painting = this.drawready
+ // console.log(this.painting)
+ if (this.painting == true) {
+ evt.preventDefault()
+ console.log('touchstart.')
+ var el = document.getElementById('canvas')
+ var ctx = el.getContext('2d')
+ var touches = evt.changedTouches
+
+ for (var i = 0; i < touches.length; i++) {
+ //console.log('touchstart:' + i + '...')
+ ongoingTouches.push(this.copyTouch(touches[i]))
+ var color = this.colorForTouch(touches[i])
+ ctx.beginPath()
+ ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false) // a circle at the start
+ ctx.fillStyle = color
+ ctx.fill()
+ // console.log('touchstart:' + i + '.')
+ }
}
},
@@ -80,34 +79,35 @@ export default {
var el = document.getElementById('canvas')
var ctx = el.getContext('2d')
var touches = evt.changedTouches
-
- for (var i = 0; i < touches.length; i++) {
- var color = this.colorForTouch(touches[i])
- var idx = this.ongoingTouchIndexById(touches[i].identifier)
-
- if (idx >= 0) {
- console.log('continuing touch ' + idx)
- ctx.beginPath()
- console.log(
- 'ctx.moveTo(' +
- ongoingTouches[idx].pageX +
- ', ' +
- ongoingTouches[idx].pageY +
- ');'
- )
- ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY)
- console.log(
- 'ctx.lineTo(' + touches[i].pageX + ', ' + touches[i].pageY + ');'
- )
- ctx.lineTo(touches[i].pageX, touches[i].pageY)
- ctx.lineWidth = 4
- ctx.strokeStyle = color
- ctx.stroke()
-
- ongoingTouches.splice(idx, 1, this.copyTouch(touches[i])) // swap in the new touch record
- console.log('.')
- } else {
- console.log("can't figure out which touch to continue")
+ if (this.painting == true) {
+ for (var i = 0; i < touches.length; i++) {
+ var color = this.colorForTouch(touches[i])
+ var idx = this.ongoingTouchIndexById(touches[i].identifier)
+
+ if (idx >= 0) {
+ // console.log('continuing touch ' + idx)
+ ctx.beginPath()
+ // console.log(
+ // 'ctx.moveTo(' +
+ // ongoingTouches[idx].pageX +
+ // ', ' +
+ // ongoingTouches[idx].pageY +
+ // ');'
+ // )
+ ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY)
+ // console.log(
+ // 'ctx.lineTo(' + touches[i].pageX + ', ' + touches[i].pageY + ');'
+ // )
+ ctx.lineTo(touches[i].pageX, touches[i].pageY)
+ ctx.lineWidth = 4
+ ctx.strokeStyle = color
+ ctx.stroke()
+
+ ongoingTouches.splice(idx, 1, this.copyTouch(touches[i])) // swap in the new touch record
+ // console.log('.')
+ } else {
+ // console.log("can't figure out which touch to continue")
+ }
}
}
},
@@ -131,10 +131,22 @@ export default {
ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8) // and a square at the end
ongoingTouches.splice(idx, 1) // remove it; we're done
} else {
- console.log("can't figure out which touch to end")
+ // console.log("can't figure out which touch to end")
}
}
},
+
+ handleCancel(evt) {
+ evt.preventDefault()
+
+ // console.log('touchcancel.')
+ var touches = evt.changedTouches
+
+ for (var i = 0; i < touches.length; i++) {
+ var idx = this.ongoingTouchIndexById(touches[i].identifier)
+ ongoingTouches.splice(idx, 1) // remove it; we're done
+ }
+ },
colorForTouch(touch) {
var r = touch.identifier % 16
var g = Math.floor(touch.identifier / 3) % 16
@@ -143,9 +155,9 @@ export default {
g = g.toString(16) // make it a hex digit
b = b.toString(16) // make it a hex digit
var color = '#' + r + g + b
- console.log(
- 'color for touch with identifier ' + touch.identifier + ' = ' + color
- )
+ // console.log(
+ // 'color for touch with identifier ' + touch.identifier + ' = ' + color
+ // )
return color
},
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index b2df402..51a5472 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -44,9 +44,6 @@ export default {
}
if (mode == 'upload') {
this.$emit('uploadAdded')
- // onFileSelected(event) {
- // this.selectedFile = event.target.files[0]
- // }
}
if (mode == 'copy') {
this.$emit('copyDone')
@@ -55,6 +52,10 @@ export default {
this.$emit('drawOn')
// console.log(mode)
}
+ if (mode != 'draw') {
+ this.$emit('drawOff')
+ //console.log(mode)
+ }
},
isActive(mode) {
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index ea9d754..6f0da4b 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -84,6 +84,7 @@
@uploadAdded="uploadAdded()"
@copyDone="copyDone()"
@drawOn="drawOn()"
+ @drawOff="drawOff()"
/>
<ViewToolbar />
<UploadLayer
@@ -192,7 +193,11 @@ export default {
drawOn() {
this.drawready = !this.drawready
- console.log(this.drawready)
+ //console.log(this.drawready)
+ },
+
+ drawOff() {
+ this.drawready = false
},
// This is here to support the shortcuts
--
GitLab