From 51ed04fa035763c063902561117a705e4fd89c24 Mon Sep 17 00:00:00 2001 From: fangjun Date: Fri, 13 Apr 2018 13:45:10 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20onStartDraw=20onStopDr?= =?UTF-8?q?aw=20=E5=8A=9F=E8=83=BD=20=E4=BF=AE=E6=94=B9=20getAnnotations?= =?UTF-8?q?=20=E5=87=BD=E6=95=B0bug=20=E5=8E=BB=E6=8E=89=20=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=20button=20=E5=8E=BB=E6=8E=89=20=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E7=9A=84mousedown=20mousemup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 20 ++++++++++++++------ src/views/Overlay.js | 6 +++--- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/main.js b/src/main.js index b9066ac..3126386 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import { Rect } from 'OpenSeadragon'; import { h, render } from 'preact'; import Overlay from './views/Overlay'; -import { DrawControl, MoveControl } from './views/Controls'; +// import { DrawControl, MoveControl } from './views/Controls'; import createDispatcher from './model/createDispatcher'; import generalActions from './model/generalActions'; import createModel from './model/createModel'; @@ -14,10 +14,10 @@ const annotationsPrototype = { const zoom = this.viewer.viewport.getZoom(); const { width, height } = this.overlay.getBoundingClientRect(); this.dispatch({ type: 'INITIALIZE', zoom, width, height }); - this.controls = [ - new MoveControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }), - new DrawControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }), - ]; + // this.controls = [ + // new MoveControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }), + // new DrawControl({ dispatch: this.dispatch, model: this.model, viewer: this.viewer }), + // ]; }, onClose() { @@ -25,7 +25,7 @@ const annotationsPrototype = { }, getAnnotations() { - return this.model.getAll(); + return this.model.annotations; }, setAnnotations(annotations) { @@ -47,6 +47,14 @@ const annotationsPrototype = { getStatus() { return { active: !!this.overlay }; }, + + onStartDraw() { + this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' }); + }, + + onStopDraw() { + this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' }); + }, }; export default ({ viewer }) => { diff --git a/src/views/Overlay.js b/src/views/Overlay.js index a37155b..bcfb590 100644 --- a/src/views/Overlay.js +++ b/src/views/Overlay.js @@ -40,7 +40,7 @@ class Overlay extends Component { onMouseMove = (e) => { if (this.state.mode !== 'MOVE') { e.stopPropagation(); - this.props.dispatch({ type: 'MOVE', ...this.calculateCoords(e) }) + this.props.dispatch({ type: 'MOVE', ...this.calculateCoords(e) }); } }; @@ -82,10 +82,10 @@ class Overlay extends Component { cursor: 'default', 'background-color': 'rgba(0,0,0,0)', // IE 9-10 fix }, - onMouseDown, + // onMouseDown, onMouseLeave, onMouseMove, - onMouseUp, + // onMouseUp, onPointerDown: onMouseDown, onPointerUp: onMouseUp, }, From 67e17f91177639cc11cdd5a9b6ad68961446cb94 Mon Sep 17 00:00:00 2001 From: fangjun Date: Fri, 13 Apr 2018 16:26:41 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BB=98=E5=88=B6?= =?UTF-8?q?=E6=9B=B2=E7=BA=BF=E7=9A=84style=20=20=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E6=89=8B=E5=8A=A8=E4=BF=AE=E6=94=B9=20=E7=BA=BF=E7=9A=84?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=EF=BC=8C=E7=B2=97=E7=BB=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/createModel.js | 4 ++++ src/model/generalActions.js | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/model/createModel.js b/src/model/createModel.js index 0d90024..c7b97a1 100644 --- a/src/model/createModel.js +++ b/src/model/createModel.js @@ -9,4 +9,8 @@ export default () => height: 0, activityInProgress: false, annotations: [], + style: { + color: 'red', + width: 3, + }, }); diff --git a/src/model/generalActions.js b/src/model/generalActions.js index 619691a..f857dc6 100644 --- a/src/model/generalActions.js +++ b/src/model/generalActions.js @@ -20,8 +20,8 @@ const reactToGeneralAction = (model) => { fill: 'none', d: `M${action.x} ${action.y}`, - stroke: 'red', - 'stroke-width': 3, + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, 'stroke-linejoin': 'round', 'stroke-linecap': 'round', 'vector-effect': 'non-scaling-stroke', From 1e0abc7fcc009ad9dca6d8fe47bd4e3021822128 Mon Sep 17 00:00:00 2001 From: fangjun Date: Mon, 16 Apr 2018 22:32:36 +0800 Subject: [PATCH 3/9] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=87=E6=B3=A8?= =?UTF-8?q?=E6=97=B6=E5=90=8E=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E5=9B=9E?= =?UTF-8?q?=E8=B0=83=E5=87=BD=E6=95=B0=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/createModel.js | 1 + src/model/generalActions.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/src/model/createModel.js b/src/model/createModel.js index c7b97a1..298c9d6 100644 --- a/src/model/createModel.js +++ b/src/model/createModel.js @@ -9,6 +9,7 @@ export default () => height: 0, activityInProgress: false, annotations: [], + addAnnotaionCallback: null, style: { color: 'red', width: 3, diff --git a/src/model/generalActions.js b/src/model/generalActions.js index f857dc6..c83c960 100644 --- a/src/model/generalActions.js +++ b/src/model/generalActions.js @@ -33,6 +33,9 @@ const reactToGeneralAction = (model) => case 'RELEASE': if (model.mode === 'DRAW') { model.activityInProgress = false; + if (model.addAnnotaionCallback instanceof Function) { + model.addAnnotaionCallback(); + } } break; From fb949973e54bcc4f6df2433693f864eebd461f5a Mon Sep 17 00:00:00 2001 From: fangjun Date: Tue, 17 Apr 2018 22:35:30 +0800 Subject: [PATCH 4/9] fixbug --- src/model/createModel.js | 2 +- src/model/generalActions.js | 4 ++-- src/views/Overlay.js | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/model/createModel.js b/src/model/createModel.js index 298c9d6..eb8411f 100644 --- a/src/model/createModel.js +++ b/src/model/createModel.js @@ -9,7 +9,7 @@ export default () => height: 0, activityInProgress: false, annotations: [], - addAnnotaionCallback: null, + addAnnotationCallback: null, style: { color: 'red', width: 3, diff --git a/src/model/generalActions.js b/src/model/generalActions.js index c83c960..53182dd 100644 --- a/src/model/generalActions.js +++ b/src/model/generalActions.js @@ -33,8 +33,8 @@ const reactToGeneralAction = (model) => case 'RELEASE': if (model.mode === 'DRAW') { model.activityInProgress = false; - if (model.addAnnotaionCallback instanceof Function) { - model.addAnnotaionCallback(); + if (model.addAnnotationCallback instanceof Function) { + model.addAnnotationCallback(); } } break; diff --git a/src/views/Overlay.js b/src/views/Overlay.js index bcfb590..c5b5b18 100644 --- a/src/views/Overlay.js +++ b/src/views/Overlay.js @@ -79,7 +79,6 @@ class Overlay extends Component { width: '100%', height: '100%', style: { - cursor: 'default', 'background-color': 'rgba(0,0,0,0)', // IE 9-10 fix }, // onMouseDown, From 9febf390e7cc8ea8dbbbe3571b42aea98762041a Mon Sep 17 00:00:00 2001 From: fangjun Date: Fri, 20 Apr 2018 19:24:45 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=EF=BC=9A=20=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E7=8A=B6=E6=80=81=EF=BC=8Csvg=20=E7=9A=84=20cursor=20?= =?UTF-8?q?=E4=B8=8D=E4=B8=80=E6=A0=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main.js b/src/main.js index 3126386..61b06f3 100644 --- a/src/main.js +++ b/src/main.js @@ -50,10 +50,12 @@ const annotationsPrototype = { onStartDraw() { this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' }); + this.overlay.style.cursor = 'pointer'; }, onStopDraw() { this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' }); + this.overlay.style.cursor = ''; }, }; From 509d168aa2b999ba07261366a07117fb9ca301ee Mon Sep 17 00:00:00 2001 From: fangjun Date: Sun, 22 Apr 2018 16:36:47 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat(=E5=A2=9E=E5=8A=A0=E6=A0=87=E6=B3=A8?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B):=20=E9=80=9A=E8=BF=87=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=A0=87=E6=B3=A8=E7=B1=BB=E5=9E=8B=EF=BC=8C=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E7=94=BB=E5=87=BA=20=E7=9F=A9=E5=BD=A2=EF=BC=8C=E6=A4=AD?= =?UTF-8?q?=E5=9C=86=EF=BC=8C=E7=BA=BF=EF=BC=8C=E6=9B=B2=E7=BA=BF=E7=AD=89?= =?UTF-8?q?=E5=9B=BE=E5=BD=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/createModel.js | 1 + src/model/generalActions.js | 135 ++++++++++++++++++++++++++++++++---- 2 files changed, 122 insertions(+), 14 deletions(-) diff --git a/src/model/createModel.js b/src/model/createModel.js index eb8411f..b1f3bc0 100644 --- a/src/model/createModel.js +++ b/src/model/createModel.js @@ -11,6 +11,7 @@ export default () => annotations: [], addAnnotationCallback: null, style: { + type: 'path', // type: polyline, polygon, line, ellipse, rect, path (default) color: 'red', width: 3, }, diff --git a/src/model/generalActions.js b/src/model/generalActions.js index 53182dd..0113d96 100644 --- a/src/model/generalActions.js +++ b/src/model/generalActions.js @@ -15,18 +15,102 @@ const reactToGeneralAction = (model) => case 'PRESS': if (model.mode === 'DRAW') { model.activityInProgress = true; - model.annotations.push([ - 'path', - { - fill: 'none', - d: `M${action.x} ${action.y}`, - stroke: model.style.color || 'red', - 'stroke-width': model.style.width || 3, - 'stroke-linejoin': 'round', - 'stroke-linecap': 'round', - 'vector-effect': 'non-scaling-stroke', - }, - ]); + switch (model.style.type) { + case 'polyline': + model.annotations.push([ + 'polyline', + { + fill: 'none', + points: `${action.x},${action.y}`, + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, + 'stroke-linejoin': 'round', + 'stroke-linecap': 'round', + 'vector-effect': 'non-scaling-stroke', + }, + ]); + break; + case 'polygon': + model.annotations.push([ + 'polygon', + { + fill: 'none', + points: `${action.x},${action.y}`, + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, + 'stroke-linejoin': 'round', + 'stroke-linecap': 'round', + 'vector-effect': 'non-scaling-stroke', + }, + ]); + break; + case 'line': + model.annotations.push([ + 'line', + { + fill: 'none', + x1: action.x, + y1: action.y, + x2: action.x, + y2: action.y, + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, + 'stroke-linejoin': 'round', + 'stroke-linecap': 'round', + 'vector-effect': 'non-scaling-stroke', + }, + ]); + break; + case 'ellipse': + model.annotations.push([ + 'ellipse', + { + fill: 'none', + cx: action.x, + cy: action.y, + // rx: '', + // ry: '', + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, + 'stroke-linejoin': 'round', + 'stroke-linecap': 'round', + 'vector-effect': 'non-scaling-stroke', + }, + ]); + break; + case 'rect': + model.annotations.push([ + 'rect', + { + fill: 'none', + sx: action.x, + sy: action.y, + // x: '', + // y: '', + // width: '', + // height: '', + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, + 'stroke-linejoin': 'round', + 'stroke-linecap': 'round', + 'vector-effect': 'non-scaling-stroke', + }, + ]); + break; + default: + model.annotations.push([ + 'path', + { + fill: 'none', + d: `M${action.x} ${action.y}`, + stroke: model.style.color || 'red', + 'stroke-width': model.style.width || 3, + 'stroke-linejoin': 'round', + 'stroke-linecap': 'round', + 'vector-effect': 'non-scaling-stroke', + }, + ]); + } } break; @@ -43,8 +127,31 @@ const reactToGeneralAction = (model) => if (model.mode === 'DRAW' && model.activityInProgress === true) { const annotations = model.annotations; const lastAnnotation = annotations[annotations.length - 1]; - if (lastAnnotation && lastAnnotation[0] === 'path') { - lastAnnotation[1].d += ` L${action.x} ${action.y}`; + if (lastAnnotation) { + switch (lastAnnotation[0]) { + case 'polyline': + lastAnnotation[1].points += ` ${action.x},${action.y}`; + break; + case 'polygon': + lastAnnotation[1].points += ` ${action.x},${action.y}`; + break; + case 'line': + lastAnnotation[1].x2 = action.x; + lastAnnotation[1].y2 = action.y; + break; + case 'ellipse': + lastAnnotation[1].rx = Math.abs(action.x - lastAnnotation[1].cx); + lastAnnotation[1].ry = Math.abs(action.y - lastAnnotation[1].cy); + break; + case 'rect': + lastAnnotation[1].x = lastAnnotation[1].sx < action.x ? lastAnnotation[1].sx : action.x; + lastAnnotation[1].y = lastAnnotation[1].sy < action.y ? lastAnnotation[1].sy : action.y; + lastAnnotation[1].width = Math.abs(lastAnnotation[1].sx - action.x); + lastAnnotation[1].height = Math.abs(lastAnnotation[1].sy - action.y); + break; + default: + lastAnnotation[1].d += ` L${action.x} ${action.y}`; + } } } break; From bdf2b11031084f16a0a07e16b90abcfffdf69a61 Mon Sep 17 00:00:00 2001 From: fangjun Date: Sun, 22 Apr 2018 16:37:42 +0800 Subject: [PATCH 7/9] build: --- package.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/package.json b/package.json index 4b502b4..9e41bfa 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "babel-plugin-transform-flow-strip-types": "^6.22.0", "babel-preset-es2015": "^6.22.0", "babel-preset-stage-0": "^6.22.0", + "cz-conventional-changelog": "^2.1.0", "eslint": "^3.17.0", "eslint-config-airbnb": "^14.1.0", "eslint-plugin-import": "^2.2.0", @@ -88,5 +89,10 @@ }, "peerDependencies": { "openseadragon": "^2.2.1" + }, + "config": { + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } } } From f559f22d0d5371e43c7cc273621dc259c180f976 Mon Sep 17 00:00:00 2001 From: fangjun Date: Mon, 23 Apr 2018 02:06:46 +0800 Subject: [PATCH 8/9] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=87=E6=B3=A8?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=B8=BA=E5=8F=B3?= =?UTF-8?q?=E9=94=AE=E6=A0=87=E6=B3=A8=EF=BC=8C=E5=B7=A6=E9=94=AE=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=EF=BC=8C=E5=8E=BB=E6=8E=89=E2=80=9C=E5=BC=80=E5=A7=8B?= =?UTF-8?q?=E6=A0=87=E6=B3=A8=E2=80=9D=E5=92=8C=E2=80=9C=E5=81=9C=E6=AD=A2?= =?UTF-8?q?=E6=A0=87=E6=B3=A8=E2=80=9D=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 14 ++++++-------- src/model/createModel.js | 2 +- src/views/Overlay.js | 7 ++++++- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/main.js b/src/main.js index 61b06f3..746dcfa 100644 --- a/src/main.js +++ b/src/main.js @@ -48,15 +48,13 @@ const annotationsPrototype = { return { active: !!this.overlay }; }, - onStartDraw() { - this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' }); - this.overlay.style.cursor = 'pointer'; - }, + // onStartDraw() { + // this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' }); + // }, - onStopDraw() { - this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' }); - this.overlay.style.cursor = ''; - }, + // onStopDraw() { + // this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' }); + // }, }; export default ({ viewer }) => { diff --git a/src/model/createModel.js b/src/model/createModel.js index b1f3bc0..8e35704 100644 --- a/src/model/createModel.js +++ b/src/model/createModel.js @@ -3,7 +3,7 @@ import { EventSource } from 'OpenSeadragon'; export default () => Object.assign(Object.create(EventSource.prototype), { events: {}, - mode: 'MOVE', + mode: 'DRAW', zoom: 1, width: 0, height: 0, diff --git a/src/views/Overlay.js b/src/views/Overlay.js index c5b5b18..3230f24 100644 --- a/src/views/Overlay.js +++ b/src/views/Overlay.js @@ -31,9 +31,12 @@ class Overlay extends Component { } onMouseDown = (e) => { - if (this.state.mode !== 'MOVE') { + if (e.button !== 0) { e.stopPropagation(); this.props.dispatch({ type: 'PRESS', ...this.calculateCoords(e) }); + this.base.style.cursor = 'pointer' + } else { + this.base.style.cursor = 'move' } }; @@ -49,6 +52,7 @@ class Overlay extends Component { e.stopPropagation(); this.props.dispatch({ type: 'RELEASE' }); } + this.base.style.cursor = 'default'; }; onMouseLeave = (e) => { @@ -56,6 +60,7 @@ class Overlay extends Component { e.stopPropagation(); this.props.dispatch({ type: 'LEAVE_CANVAS' }); } + this.base.style.cursor = 'default'; }; calculateCoords(e) { From f6bd33f23a132bb17e50ebe4f00fbcda76dd860c Mon Sep 17 00:00:00 2001 From: fangjun Date: Tue, 24 Apr 2018 13:38:56 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix(=E6=A0=87=E6=B3=A8=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E7=82=B9=E5=87=BB=E6=8C=89=E9=92=AE=E6=A0=87=E6=B3=A8?= =?UTF-8?q?,=E9=BB=98=E8=AE=A4=E4=B8=BA=E7=A7=BB=E5=8A=A8,=E7=A6=81?= =?UTF-8?q?=E7=94=A8=E5=8F=B3=E9=94=AE=E5=8A=9F=E8=83=BD):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 12 ++++++------ src/model/createModel.js | 4 ++-- src/model/generalActions.js | 12 ++++++------ src/views/Overlay.js | 5 +++-- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/main.js b/src/main.js index 746dcfa..3126386 100644 --- a/src/main.js +++ b/src/main.js @@ -48,13 +48,13 @@ const annotationsPrototype = { return { active: !!this.overlay }; }, - // onStartDraw() { - // this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' }); - // }, + onStartDraw() { + this.dispatch({ type: 'MODE_UPDATE', mode: 'DRAW' }); + }, - // onStopDraw() { - // this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' }); - // }, + onStopDraw() { + this.dispatch({ type: 'MODE_UPDATE', mode: 'MOVE' }); + }, }; export default ({ viewer }) => { diff --git a/src/model/createModel.js b/src/model/createModel.js index 8e35704..dd9056c 100644 --- a/src/model/createModel.js +++ b/src/model/createModel.js @@ -3,7 +3,7 @@ import { EventSource } from 'OpenSeadragon'; export default () => Object.assign(Object.create(EventSource.prototype), { events: {}, - mode: 'DRAW', + mode: 'MOVE', zoom: 1, width: 0, height: 0, @@ -11,7 +11,7 @@ export default () => annotations: [], addAnnotationCallback: null, style: { - type: 'path', // type: polyline, polygon, line, ellipse, rect, path (default) + type: 'polyline', // type: polyline, polygon, line, ellipse, rect, path (default) color: 'red', width: 3, }, diff --git a/src/model/generalActions.js b/src/model/generalActions.js index 0113d96..1158308 100644 --- a/src/model/generalActions.js +++ b/src/model/generalActions.js @@ -68,8 +68,8 @@ const reactToGeneralAction = (model) => fill: 'none', cx: action.x, cy: action.y, - // rx: '', - // ry: '', + rx: 0, + ry: 0, stroke: model.style.color || 'red', 'stroke-width': model.style.width || 3, 'stroke-linejoin': 'round', @@ -85,10 +85,10 @@ const reactToGeneralAction = (model) => fill: 'none', sx: action.x, sy: action.y, - // x: '', - // y: '', - // width: '', - // height: '', + x: action.x, + y: action.x, + width: 0, + height: 0, stroke: model.style.color || 'red', 'stroke-width': model.style.width || 3, 'stroke-linejoin': 'round', diff --git a/src/views/Overlay.js b/src/views/Overlay.js index 3230f24..500931d 100644 --- a/src/views/Overlay.js +++ b/src/views/Overlay.js @@ -32,11 +32,12 @@ class Overlay extends Component { onMouseDown = (e) => { if (e.button !== 0) { + return false; + } + if (this.state.mode !== 'MOVE') { e.stopPropagation(); this.props.dispatch({ type: 'PRESS', ...this.calculateCoords(e) }); this.base.style.cursor = 'pointer' - } else { - this.base.style.cursor = 'move' } };