diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index 5c72c089..f0d57031 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -63,6 +63,7 @@ class LineMode extends React.Component { this.props.onChangeStrokeWidth(1); } this.tool = new paper.Tool(); + this.active = false; this.path = null; this.hitResult = null; @@ -88,6 +89,7 @@ class LineMode extends React.Component { } onMouseDown (event) { if (event.event.button > 0) return; // only first mouse button + this.active = true; // If you click near a point, continue that line instead of making a new line this.hitResult = endPointHit(event.point, LineMode.SNAP_TOLERANCE); @@ -131,7 +133,7 @@ class LineMode extends React.Component { this.drawHitPoint(this.hitResult); } onMouseDrag (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button // If near another path's endpoint, or this path's beginpoint, clip to it to suggest // joining/closing the paths. @@ -162,7 +164,7 @@ class LineMode extends React.Component { } } onMouseUp (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button // If I single clicked, don't do anything if (this.path.segments.length < 2 || @@ -203,6 +205,7 @@ class LineMode extends React.Component { this.props.onUpdateSvg(); this.path = null; } + this.active = false; } deactivateTool () { this.tool.remove(); diff --git a/src/helper/blob-tools/blob.js b/src/helper/blob-tools/blob.js index 985c9184..bc04dcc7 100644 --- a/src/helper/blob-tools/blob.js +++ b/src/helper/blob-tools/blob.js @@ -82,6 +82,7 @@ class Blobbiness { this.tool = new paper.Tool(); this.cursorPreviewLastPoint = new paper.Point(-10000, -10000); this.setOptions(options); + this.tool.active = false; this.tool.fixedDistance = 1; const blob = this; @@ -95,6 +96,7 @@ class Blobbiness { this.tool.onMouseDown = function (event) { blob.resizeCursorIfNeeded(event.point); if (event.event.button > 0) return; // only first mouse button + this.active = true; if (blob.options.brushSize < Blobbiness.THRESHOLD) { blob.brush = Blobbiness.BROAD; @@ -110,7 +112,7 @@ class Blobbiness { this.tool.onMouseDrag = function (event) { blob.resizeCursorIfNeeded(event.point); - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (blob.brush === Blobbiness.BROAD) { blob.broadBrushHelper.onBroadMouseDrag(event, blob.tool, blob.options); } else if (blob.brush === Blobbiness.SEGMENT) { @@ -126,7 +128,7 @@ class Blobbiness { this.tool.onMouseUp = function (event) { blob.resizeCursorIfNeeded(event.point); - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button let lastPath; if (blob.brush === Blobbiness.BROAD) { @@ -152,6 +154,7 @@ class Blobbiness { // Reset blob.brush = null; this.fixedDistance = 1; + this.active = false; }; this.tool.activate(); } diff --git a/src/helper/selection-tools/reshape-tool.js b/src/helper/selection-tools/reshape-tool.js index a477c730..be5796c9 100644 --- a/src/helper/selection-tools/reshape-tool.js +++ b/src/helper/selection-tools/reshape-tool.js @@ -51,6 +51,7 @@ class ReshapeTool extends paper.Tool { this.onUpdateSvg = onUpdateSvg; this.prevHoveredItemId = null; this.lastEvent = null; + this.active = false; this.mode = ReshapeModes.SELECTION_BOX; this._modeMap = {}; this._modeMap[ReshapeModes.FILL] = @@ -131,6 +132,7 @@ class ReshapeTool extends paper.Tool { } handleMouseDown (event) { if (event.event.button > 0) return; // only first mouse button + this.active = true; this.clearHoveredItem(); // Check if double clicked @@ -217,13 +219,14 @@ class ReshapeTool extends paper.Tool { } } handleMouseDrag (event) { - if (event.event.button > 0 || !this.mode) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button this._modeMap[this.mode].onMouseDrag(event); } handleMouseUp (event) { - if (event.event.button > 0 || !this.mode) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button this._modeMap[this.mode].onMouseUp(event); this.mode = ReshapeModes.SELECTION_BOX; + this.active = false; } deactivateTool () { paper.settings.handleSize = 0; diff --git a/src/helper/selection-tools/select-tool.js b/src/helper/selection-tools/select-tool.js index fb8dada3..587ae52d 100644 --- a/src/helper/selection-tools/select-tool.js +++ b/src/helper/selection-tools/select-tool.js @@ -34,6 +34,7 @@ class SelectTool extends paper.Tool { this.selectionBoxTool = new SelectionBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems); this.selectionBoxMode = false; this.prevHoveredItemId = null; + this.active = false; // We have to set these functions instead of just declaring them because // paper.js tools hook up the listeners in the setter functions. @@ -87,6 +88,7 @@ class SelectTool extends paper.Tool { } handleMouseDown (event) { if (event.event.button > 0) return; // only first mouse button + this.active = true; // If bounding box tool does not find an item that was hit, use selection box tool. this.clearHoveredItem(); @@ -110,7 +112,7 @@ class SelectTool extends paper.Tool { } } handleMouseDrag (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (this.selectionBoxMode) { this.selectionBoxTool.onMouseDrag(event); @@ -119,7 +121,7 @@ class SelectTool extends paper.Tool { } } handleMouseUp (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (this.selectionBoxMode) { this.selectionBoxTool.onMouseUp(event); @@ -128,6 +130,7 @@ class SelectTool extends paper.Tool { this.boundingBoxTool.onMouseUp(event); } this.selectionBoxMode = false; + this.active = false; } deactivateTool () { this.clearHoveredItem(); diff --git a/src/helper/tools/oval-tool.js b/src/helper/tools/oval-tool.js index fff6bf5c..065a4806 100644 --- a/src/helper/tools/oval-tool.js +++ b/src/helper/tools/oval-tool.js @@ -33,6 +33,7 @@ class OvalTool extends paper.Tool { this.oval = null; this.colorState = null; this.isBoundingBoxMode = null; + this.active = false; } getHitOptions () { return { @@ -58,6 +59,9 @@ class OvalTool extends paper.Tool { this.colorState = colorState; } handleMouseDown (event) { + if (event.event.button > 0) return; // only first mouse button + this.active = true; + if (this.boundingBoxTool.onMouseDown(event, false /* clone */, false /* multiselect */, this.getHitOptions())) { this.isBoundingBoxMode = true; } else { @@ -71,7 +75,7 @@ class OvalTool extends paper.Tool { } } handleMouseDrag (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (this.isBoundingBoxMode) { this.boundingBoxTool.onMouseDrag(event); @@ -93,7 +97,7 @@ class OvalTool extends paper.Tool { } handleMouseUp (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (this.isBoundingBoxMode) { this.boundingBoxTool.onMouseUp(event); @@ -116,6 +120,7 @@ class OvalTool extends paper.Tool { this.onUpdateSvg(); } } + this.active = false; } deactivateTool () { this.boundingBoxTool.removeBoundsPath(); diff --git a/src/helper/tools/rect-tool.js b/src/helper/tools/rect-tool.js index b7447ad8..4e48a713 100644 --- a/src/helper/tools/rect-tool.js +++ b/src/helper/tools/rect-tool.js @@ -32,6 +32,7 @@ class RectTool extends paper.Tool { this.rect = null; this.colorState = null; this.isBoundingBoxMode = null; + this.active = false; } getHitOptions () { return { @@ -57,6 +58,9 @@ class RectTool extends paper.Tool { this.colorState = colorState; } handleMouseDown (event) { + if (event.event.button > 0) return; // only first mouse button + this.active = true; + if (this.boundingBoxTool.onMouseDown(event, false /* clone */, false /* multiselect */, this.getHitOptions())) { this.isBoundingBoxMode = true; } else { @@ -65,7 +69,7 @@ class RectTool extends paper.Tool { } } handleMouseDrag (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (this.isBoundingBoxMode) { this.boundingBoxTool.onMouseDrag(event); @@ -89,7 +93,7 @@ class RectTool extends paper.Tool { styleShape(this.rect, this.colorState); } handleMouseUp (event) { - if (event.event.button > 0) return; // only first mouse button + if (event.event.button > 0 || !this.active) return; // only first mouse button if (this.isBoundingBoxMode) { this.boundingBoxTool.onMouseUp(event); @@ -109,6 +113,7 @@ class RectTool extends paper.Tool { this.rect = null; } } + this.active = false; } deactivateTool () { this.boundingBoxTool.removeBoundsPath();