diff --git a/.DS_Store b/.DS_Store
index 94e91fc9c7816fc97b471daafcb884f5f9e977d1..2cf9dd3fbe680113a2c17d01e4ec4c06c14fd222 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/app/src/components/ScribbleLayer.vue b/app/src/components/ScribbleLayer.vue
index 2af7562c4993549ed61fcc70f8895eecc75cd79a..12987ec95f67f6be82621899119f847e464f74d8 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 b2df402957b9beb9b2b660a05ed547e7364d028c..51a547253b60171d3b68ec54f074b888ec5b7ac6 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 ea9d754b6f18665b03750fdb9c4ae0df105b35b8..6f0da4bfc78a7797368114c6a601d8abdbc3aeb0 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