From e2c2906b7ce0617b48ec60e1557b1ae46ea5cc51 Mon Sep 17 00:00:00 2001 From: James Petts Date: Thu, 2 Jul 2020 15:01:02 +0100 Subject: [PATCH] [OHIF-248] hideHandlesIfMoving (#1257) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * hideHandlesOnEdit * feat: 🎸 hideHandlesOnMove hides handles whilst they are edited * Highlight ellipse active when mouse over handle. * Reset defaults. * Fix unit tests --- src/drawing/drawHandles.js | 3 +++ src/manipulators/moveHandle.js | 2 ++ src/manipulators/moveNewHandle.js | 2 ++ src/tools/annotation/AngleTool.js | 4 ++++ src/tools/annotation/ArrowAnnotateTool.js | 7 +++++-- src/tools/annotation/BidirectionalTool.js | 1 + src/tools/annotation/CircleRoiTool.js | 3 +++ src/tools/annotation/CobbAngleTool.js | 4 ++++ src/tools/annotation/EllipticalRoiTool.js | 16 ++++++++++++++++ src/tools/annotation/EllipticalRoiTool.test.js | 4 +--- src/tools/annotation/LengthTool.js | 4 ++++ src/tools/annotation/RectangleRoiTool.js | 4 ++++ .../bidirectionalTool/moveHandle/moveHandle.js | 1 + .../bidirectionalTool/renderToolData.js | 8 +++++++- 14 files changed, 57 insertions(+), 6 deletions(-) diff --git a/src/drawing/drawHandles.js b/src/drawing/drawHandles.js index 9b964d5c1..2d7b4d9de 100755 --- a/src/drawing/drawHandles.js +++ b/src/drawing/drawHandles.js @@ -39,6 +39,9 @@ export default function(context, evtDetail, handles, options = {}) { if (options.drawHandlesIfActive === true && !handle.active) { continue; } + if (options.hideHandlesIfMoving && handle.moving) { + continue; + } const lineWidth = handle.active ? toolStyle.getActiveWidth() diff --git a/src/manipulators/moveHandle.js b/src/manipulators/moveHandle.js index e76c8cb06..5f483713d 100755 --- a/src/manipulators/moveHandle.js +++ b/src/manipulators/moveHandle.js @@ -115,6 +115,7 @@ export default function( ); handle.active = true; + handle.moving = true; annotation.active = true; state.isToolLocked = true; @@ -270,6 +271,7 @@ function _endHandler( const element = evtDetail.element; handle.active = false; + handle.moving = false; annotation.active = false; annotation.invalidated = true; runAnimation.value = false; diff --git a/src/manipulators/moveNewHandle.js b/src/manipulators/moveNewHandle.js index 9ee9b033c..a2fb04a3b 100644 --- a/src/manipulators/moveNewHandle.js +++ b/src/manipulators/moveNewHandle.js @@ -66,6 +66,7 @@ export default function( annotation.active = true; + handle.moving = true; handle.active = true; state.isToolLocked = true; @@ -252,6 +253,7 @@ function _moveEndHandler( annotation.active = false; annotation.invalidated = true; handle.active = false; + handle.moving = false; handle.x = targetLocation.x; handle.y = targetLocation.y; diff --git a/src/tools/annotation/AngleTool.js b/src/tools/annotation/AngleTool.js index 8cf548664..bfdce7cf1 100644 --- a/src/tools/annotation/AngleTool.js +++ b/src/tools/annotation/AngleTool.js @@ -47,6 +47,8 @@ export default class AngleTool extends BaseAnnotationTool { svgCursor: angleCursor, configuration: { drawHandles: true, + drawHandlesOnHover: false, + hideHandlesIfMoving: false, renderDashed: false, }, }; @@ -142,6 +144,7 @@ export default class AngleTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; // If we have no toolData for this element, return immediately as there is nothing to do @@ -200,6 +203,7 @@ export default class AngleTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; if (this.configuration.drawHandles) { diff --git a/src/tools/annotation/ArrowAnnotateTool.js b/src/tools/annotation/ArrowAnnotateTool.js index 624584fe8..81f702cb6 100644 --- a/src/tools/annotation/ArrowAnnotateTool.js +++ b/src/tools/annotation/ArrowAnnotateTool.js @@ -39,8 +39,9 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool { configuration: { getTextCallback, changeTextCallback, - drawHandles: false, - drawHandlesOnHover: true, + drawHandles: true, + drawHandlesOnHover: false, + hideHandlesIfMoving: false, arrowFirst: true, renderDashed: false, }, @@ -102,6 +103,7 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; @@ -170,6 +172,7 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; if (this.configuration.drawHandles) { diff --git a/src/tools/annotation/BidirectionalTool.js b/src/tools/annotation/BidirectionalTool.js index cc34d61c1..a5ddcefe8 100644 --- a/src/tools/annotation/BidirectionalTool.js +++ b/src/tools/annotation/BidirectionalTool.js @@ -37,6 +37,7 @@ export default class BidirectionalTool extends BaseAnnotationTool { shadow: '', drawHandles: true, drawHandlesOnHover: true, + hideHandlesIfMoving: false, renderDashed: false, additionalData: [], }, diff --git a/src/tools/annotation/CircleRoiTool.js b/src/tools/annotation/CircleRoiTool.js index c769119ad..928ef9968 100644 --- a/src/tools/annotation/CircleRoiTool.js +++ b/src/tools/annotation/CircleRoiTool.js @@ -46,6 +46,7 @@ export default class CircleRoiTool extends BaseAnnotationTool { svgCursor: circleRoiCursor, configuration: { renderDashed: false, + hideHandlesIfMoving: false, }, }; @@ -171,6 +172,7 @@ export default class CircleRoiTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; const newContext = getNewContext(canvasContext.canvas); @@ -201,6 +203,7 @@ export default class CircleRoiTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; setShadow(context, this.configuration); diff --git a/src/tools/annotation/CobbAngleTool.js b/src/tools/annotation/CobbAngleTool.js index 52df04b84..7c16bffee 100644 --- a/src/tools/annotation/CobbAngleTool.js +++ b/src/tools/annotation/CobbAngleTool.js @@ -44,6 +44,8 @@ export default class CobbAngleTool extends BaseAnnotationTool { svgCursor: cobbAngleCursor, configuration: { drawHandles: true, + drawHandlesOnHover: false, + hideHandlesIfMoving: false, renderDashed: false, }, }; @@ -164,6 +166,7 @@ export default class CobbAngleTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; // If we have no toolData for this element, return immediately as there is nothing to do @@ -222,6 +225,7 @@ export default class CobbAngleTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; if (this.configuration.drawHandles) { diff --git a/src/tools/annotation/EllipticalRoiTool.js b/src/tools/annotation/EllipticalRoiTool.js index db6c15d87..db1f9bfa3 100644 --- a/src/tools/annotation/EllipticalRoiTool.js +++ b/src/tools/annotation/EllipticalRoiTool.js @@ -5,6 +5,7 @@ import BaseAnnotationTool from '../base/BaseAnnotationTool.js'; import { getToolState } from './../../stateManagement/toolState.js'; import toolStyle from './../../stateManagement/toolStyle.js'; import toolColors from './../../stateManagement/toolColors.js'; +import getHandleNearImagePoint from '../../manipulators/getHandleNearImagePoint'; // Drawing import { @@ -48,6 +49,8 @@ export default class EllipticalRoiTool extends BaseAnnotationTool { configuration: { // showMinMax: false, // showHounsfieldUnits: true, + drawHandlesOnHover: false, + hideHandlesIfMoving: false, renderDashed: false, }, svgCursor: ellipticalRoiCursor, @@ -116,6 +119,17 @@ export default class EllipticalRoiTool extends BaseAnnotationTool { return false; } + const handleNearImagePoint = getHandleNearImagePoint( + element, + data.handles, + coords, + 6 + ); + + if (handleNearImagePoint) { + return true; + } + const distance = interactionType === 'mouse' ? 15 : 25; const startCanvas = external.cornerstone.pixelToCanvas( element, @@ -183,6 +197,7 @@ export default class EllipticalRoiTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; const context = getNewContext(eventData.canvasContext.canvas); @@ -212,6 +227,7 @@ export default class EllipticalRoiTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; setShadow(context, this.configuration); diff --git a/src/tools/annotation/EllipticalRoiTool.test.js b/src/tools/annotation/EllipticalRoiTool.test.js index 892af3e29..cb67e91f6 100644 --- a/src/tools/annotation/EllipticalRoiTool.test.js +++ b/src/tools/annotation/EllipticalRoiTool.test.js @@ -136,9 +136,7 @@ describe('EllipticalRoiTool.js', () => { // Todo: Not sure we want all of our methods to check for valid params. it('emits a console warning when measurementData without start/end handles are supplied', () => { const instantiatedTool = new EllipticalRoiTool(); - const noHandlesMeasurementData = { - handles: {}, - }; + const noHandlesMeasurementData = {}; const logger = getLogger(); instantiatedTool.pointNearTool(element, noHandlesMeasurementData, coords); diff --git a/src/tools/annotation/LengthTool.js b/src/tools/annotation/LengthTool.js index e99e8548e..cc522aa4c 100644 --- a/src/tools/annotation/LengthTool.js +++ b/src/tools/annotation/LengthTool.js @@ -36,6 +36,8 @@ export default class LengthTool extends BaseAnnotationTool { svgCursor: lengthCursor, configuration: { drawHandles: true, + drawHandlesOnHover: false, + hideHandlesIfMoving: false, renderDashed: false, }, }; @@ -142,6 +144,7 @@ export default class LengthTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; const toolData = getToolState(evt.currentTarget, this.name); @@ -191,6 +194,7 @@ export default class LengthTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; if (this.configuration.drawHandles) { diff --git a/src/tools/annotation/RectangleRoiTool.js b/src/tools/annotation/RectangleRoiTool.js index 7e4e78f89..ecd45f3cb 100644 --- a/src/tools/annotation/RectangleRoiTool.js +++ b/src/tools/annotation/RectangleRoiTool.js @@ -43,6 +43,8 @@ export default class RectangleRoiTool extends BaseAnnotationTool { supportedInteractionTypes: ['Mouse', 'Touch'], configuration: { drawHandles: true, + drawHandlesOnHover: false, + hideHandlesIfMoving: false, renderDashed: false, // showMinMax: false, // showHounsfieldUnits: true @@ -171,6 +173,7 @@ export default class RectangleRoiTool extends BaseAnnotationTool { const { handleRadius, drawHandlesOnHover, + hideHandlesIfMoving, renderDashed, } = this.configuration; const context = getNewContext(eventData.canvasContext.canvas); @@ -200,6 +203,7 @@ export default class RectangleRoiTool extends BaseAnnotationTool { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; setShadow(context, this.configuration); diff --git a/src/tools/annotation/bidirectionalTool/moveHandle/moveHandle.js b/src/tools/annotation/bidirectionalTool/moveHandle/moveHandle.js index d9488edae..bff482d86 100644 --- a/src/tools/annotation/bidirectionalTool/moveHandle/moveHandle.js +++ b/src/tools/annotation/bidirectionalTool/moveHandle/moveHandle.js @@ -64,6 +64,7 @@ export default function( }; handle.active = true; + handle.moving = true; state.isToolLocked = true; element.addEventListener(EVENTS.MOUSE_DRAG, _dragCallback); diff --git a/src/tools/annotation/bidirectionalTool/renderToolData.js b/src/tools/annotation/bidirectionalTool/renderToolData.js index 3008398d7..aea019102 100644 --- a/src/tools/annotation/bidirectionalTool/renderToolData.js +++ b/src/tools/annotation/bidirectionalTool/renderToolData.js @@ -18,7 +18,12 @@ import getPixelSpacing from '../../../util/getPixelSpacing'; export default function(evt) { const eventData = evt.detail; const { element, canvasContext, image } = eventData; - const { handleRadius, drawHandlesOnHover, renderDashed } = this.configuration; + const { + handleRadius, + drawHandlesOnHover, + hideHandlesIfMoving, + renderDashed, + } = this.configuration; const lineDash = getModule('globalConfiguration').configuration.lineDash; @@ -102,6 +107,7 @@ export default function(evt) { color, handleRadius, drawHandlesIfActive: drawHandlesOnHover, + hideHandlesIfMoving, }; // Draw the handles