From 797b2f5588dea926d83844ca702d243656aea70f Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Fri, 16 Feb 2018 09:55:29 -0200 Subject: [PATCH] Fixing cornerstone tools issues --- .../client/components/viewer/viewer.js | 15 +- .../client/components/base/mixins/dropdown.js | 2 +- .../components/bootstrap/dialog/confirm.html | 5 +- .../bidirectionalTool/addNewMeasurement.js | 34 ++--- .../addNewMeasurementTouch.js | 21 ++- .../bidirectionalTool/mouseDownCallback.js | 6 +- .../moveHandle/moveHandle.js | 18 +-- .../client/compatibility/nonTargetTool.js | 119 ++++++++------- .../compatibility/qualitativeTargetTools.js | 142 +++++++++--------- .../viewer/toolContextMenu/toolContextMenu.js | 4 +- .../StackImagePositionOffsetSynchronizer.js | 7 +- .../lib/classes/StudyLoadingListener.js | 2 +- 12 files changed, 183 insertions(+), 192 deletions(-) diff --git a/LesionTracker/client/components/viewer/viewer.js b/LesionTracker/client/components/viewer/viewer.js index a9faf7370..24f1aabc3 100644 --- a/LesionTracker/client/components/viewer/viewer.js +++ b/LesionTracker/client/components/viewer/viewer.js @@ -363,16 +363,19 @@ Template.viewer.helpers({ }); Template.viewer.events({ - 'CornerstoneToolsMeasurementAdded .imageViewerViewport'(event, instance) { - OHIF.measurements.MeasurementHandlers.onAdded(event, instance); + 'cornerstonetoolsmeasurementadded .imageViewerViewport'(event, instance) { + const originalEvent = event.originalEvent; + OHIF.measurements.MeasurementHandlers.onAdded(originalEvent, instance); }, - 'CornerstoneToolsMeasurementModified .imageViewerViewport'(event, instance) { - instance.measurementModifiedHandler(event, instance); + 'cornerstonetoolsmeasurementmodified .imageViewerViewport'(event, instance) { + const originalEvent = event.originalEvent; + instance.measurementModifiedHandler(originalEvent, instance); }, - 'CornerstoneToolsMeasurementRemoved .imageViewerViewport'(event, instance) { - OHIF.measurements.MeasurementHandlers.onRemoved(event, instance); + 'cornerstonetoolsmeasurementremoved .imageViewerViewport'(event, instance) { + const originalEvent = event.originalEvent; + OHIF.measurements.MeasurementHandlers.onRemoved(originalEvent, instance); } }); diff --git a/Packages/ohif-core/client/components/base/mixins/dropdown.js b/Packages/ohif-core/client/components/base/mixins/dropdown.js index 49240db97..2af982551 100644 --- a/Packages/ohif-core/client/components/base/mixins/dropdown.js +++ b/Packages/ohif-core/client/components/base/mixins/dropdown.js @@ -112,7 +112,7 @@ OHIF.mixins.dropdown = new OHIF.Mixin({ // Change the dropdown position if mouse event was given if (event) { - const originalEventTouches = event.originalEvent.touches; + const originalEventTouches = event.originalEvent && event.originalEvent.touches; const position = { left: 0, top: 0 diff --git a/Packages/ohif-core/client/components/bootstrap/dialog/confirm.html b/Packages/ohif-core/client/components/bootstrap/dialog/confirm.html index 4626f47e6..9d82c3e98 100644 --- a/Packages/ohif-core/client/components/bootstrap/dialog/confirm.html +++ b/Packages/ohif-core/client/components/bootstrap/dialog/confirm.html @@ -1,8 +1,7 @@ diff --git a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurement.js b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurement.js index 4aced3c91..9b9b080ff 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurement.js +++ b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurement.js @@ -23,8 +23,6 @@ export default function(mouseEventData) { const measurementData = createNewMeasurement(mouseEventData); measurementData.viewport = cornerstone.getViewport(element); - const eventData = { mouseButtonMask: mouseEventData.which }; - const tool = cornerstoneTools[toolType]; const config = tool.getConfiguration(); const { mouseDownActivateCallback } = tool; @@ -35,18 +33,18 @@ export default function(mouseEventData) { const disableDefaultHandlers = () => { // since we are dragging to another place to drop the end point, we can just activate // the end point and let the moveHandle move it for us. - $element.off('CornerstoneToolsMouseMove', mouseMoveCallback); - $element.off('CornerstoneToolsMouseDown', mouseDownCallback); - $element.off('CornerstoneToolsMouseDownActivate', mouseDownActivateCallback); - $element.off('CornerstoneToolsMouseDoubleClick', doubleClickCallback); + element.removeEventListener('cornerstonetoolsmousemove', mouseMoveCallback); + element.removeEventListener('cornerstonetoolsmousedown', mouseDownCallback); + element.removeEventListener('cornerstonetoolsmousedownactivate', mouseDownActivateCallback); + element.removeEventListener('cornerstonetoolsmousedoubleclick', doubleClickCallback); }; disableDefaultHandlers(); // Update the perpendicular line handles position const updateHandler = event => updatePerpendicularLineHandles(event.detail, measurementData); - $element.on('CornerstoneToolsMouseDrag', updateHandler); - $element.on('CornerstoneToolsMouseUp', updateHandler); + element.addEventListener('cornerstonetoolsmousedrag', updateHandler); + element.addEventListener('cornerstonetoolsmouseup', updateHandler); let cancelled = false; const cancelAction = () => { @@ -95,10 +93,10 @@ export default function(mouseEventData) { }; // Bind the event listener for image rendering - $element.on('cornerstoneimagerendered', imageRenderedHandler); + element.addEventListener('cornerstoneimagerendered', imageRenderedHandler); // Bind the tool deactivation and enlargement handlers - $element.on('CornerstoneToolsToolDeactivated', cancelAction); + element.addEventListener('cornerstonetoolstooldeactivated', cancelAction); $element.one('ohif.viewer.viewport.toggleEnlargement', cancelAction); cornerstone.updateImage(element); @@ -128,25 +126,25 @@ export default function(mouseEventData) { $element.off('mousedown', mousedownHandler); // Unbind the event listener for image rendering - $element.off('cornerstoneimagerendered', imageRenderedHandler); + element.removeEventListener('cornerstoneimagerendered', imageRenderedHandler); // Unbind the tool deactivation and enlargement handlers - $element.off('CornerstoneToolsToolDeactivated', cancelAction); + element.removeEventListener('cornerstonetoolstooldeactivated', cancelAction); $element.off('ohif.viewer.viewport.toggleEnlargement', cancelAction); // perpendicular line is not connected to long-line perpendicularStart.locked = false; // Unbind the handlers to update perpendicular line - $element.off('CornerstoneToolsMouseDrag', updateHandler); - $element.off('CornerstoneToolsMouseUp', updateHandler); + element.removeEventListener('cornerstonetoolsmousedrag', updateHandler); + element.removeEventListener('cornerstonetoolsmouseup', updateHandler); // Disable the default handlers and re-enable again disableDefaultHandlers(); - $element.on('CornerstoneToolsMouseMove', eventData, mouseMoveCallback); - $element.on('CornerstoneToolsMouseDown', eventData, mouseDownCallback); - $element.on('CornerstoneToolsMouseDownActivate', eventData, mouseDownActivateCallback); - $element.on('CornerstoneToolsMouseDoubleClick', eventData, doubleClickCallback); + element.addEventListener('cornerstonetoolsmousemove', mouseMoveCallback); + element.addEventListener('cornerstonetoolsmousedown', mouseDownCallback); + element.addEventListener('cornerstonetoolsmousedownactivate', mouseDownActivateCallback); + element.addEventListener('cornerstonetoolsmousedoubleclick', doubleClickCallback); cornerstone.updateImage(element); }); diff --git a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurementTouch.js b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurementTouch.js index d91479383..6d174e6a8 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurementTouch.js +++ b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/addNewMeasurementTouch.js @@ -5,7 +5,6 @@ import updatePerpendicularLineHandles from './updatePerpendicularLineHandles'; export default function(touchEventData) { const element = { touchEventData }; - const $element = $(element); // LT-29 Disable Target Measurements when pixel spacing is not available if (!touchEventData.image.rowPixelSpacing || !touchEventData.image.columnPixelSpacing) return; @@ -25,14 +24,14 @@ export default function(touchEventData) { // since we are dragging to another place to drop the end point, we can just activate // the end point and let the moveHandle move it for us. const { touchMoveHandle, tapCallback, touchDownActivateCallback } = cornerstoneTools[toolType]; - $element.off('CornerstoneToolsTouchDrag', touchMoveHandle); - $element.off('CornerstoneToolsTap', tapCallback); - $element.off('CornerstoneToolsDragStartActive', touchDownActivateCallback); + element.removeEventListener('cornerstonetoolstouchdrag', touchMoveHandle); + element.removeEventListener('cornerstonetoolstap', tapCallback); + element.removeEventListener('cornerstonetoolsdragstartactive', touchDownActivateCallback); // Update the perpendicular line handles position const updateHandler = event => updatePerpendicularLineHandles(event.detail, measurementData); - $element.on('CornerstoneToolsTouchDrag', updateHandler); - $element.on('CornerstoneToolsTouchEnd', updateHandler); + element.addEventListener('cornerstonetoolstouchdrag', updateHandler); + element.addEventListener('cornerstonetoolstouchend', updateHandler); cornerstone.updateImage(element); const { end, perpendicularStart } = handles; @@ -49,12 +48,12 @@ export default function(touchEventData) { perpendicularStart.locked = false; // Unbind the handlers to update perpendicular line - $element.off('CornerstoneToolsTouchDrag', updateHandler); - $element.off('CornerstoneToolsTouchEnd', updateHandler); + element.removeEventListener('cornerstonetoolstouchdrag', updateHandler); + element.removeEventListener('cornerstonetoolstouchend', updateHandler); - $element.on('CornerstoneToolsTouchDrag', touchMoveHandle); - $element.on('CornerstoneToolsTap', tapCallback); - $element.on('CornerstoneToolsDragStartActive', touchDownActivateCallback); + element.addEventListener('cornerstonetoolstouchdrag', touchMoveHandle); + element.addEventListener('cornerstonetoolstap', tapCallback); + element.addEventListener('cornerstonetoolsdragstartactive', touchDownActivateCallback); cornerstone.updateImage(element); }); } diff --git a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/mouseDownCallback.js b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/mouseDownCallback.js index 16662bc20..6f4bf1abe 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/mouseDownCallback.js +++ b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/mouseDownCallback.js @@ -74,7 +74,7 @@ export default function(event) { } cornerstone.updateImage(element); - $element.on('CornerstoneToolsMouseMove', eventData, mouseMoveCallback); + element.removeEventListener('cornerstonetoolsmousemove', mouseMoveCallback); } if (cornerstoneTools.isMouseButtonEnabled(eventData.which, options.mouseButtonMask)) { @@ -97,7 +97,7 @@ export default function(event) { // if dragging text box $element.css('cursor', handle.hasBoundingBox ? 'move' : 'none'); - $element.off('CornerstoneToolsMouseMove', mouseMoveCallback); + element.removeEventListener('cornerstonetoolsmousemove', mouseMoveCallback); data.active = true; unselectAllHandles(data.handles); @@ -128,7 +128,7 @@ export default function(event) { // Set the cursor to move $element.css('cursor', 'move'); - $element.off('CornerstoneToolsMouseMove', mouseMoveCallback); + element.removeEventListener('cornerstonetoolsmousemove', mouseMoveCallback); data.active = true; unselectAllHandles(data.handles); diff --git a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/moveHandle/moveHandle.js b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/moveHandle/moveHandle.js index d78d22e65..8adb9e530 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/moveHandle/moveHandle.js +++ b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool/moveHandle/moveHandle.js @@ -30,7 +30,7 @@ export default function (mouseEventData, toolType, data, handle, doneMovingCallb cornerstone.updateImage(element); - const eventType = 'CornerstoneToolsMeasurementModified'; + const eventType = 'cornerstonetoolsmeasurementmodified'; const modifiedEventData = { toolType: toolType, element: element, @@ -39,7 +39,7 @@ export default function (mouseEventData, toolType, data, handle, doneMovingCallb $element.trigger(eventType, modifiedEventData); }; - $element.on('CornerstoneToolsMouseDrag', mouseDragCallback); + element.addEventListener('cornerstonetoolsmousedrag', mouseDragCallback); const currentImage = cornerstone.getImage(element); const imageRenderedHandler = () => { @@ -52,13 +52,13 @@ export default function (mouseEventData, toolType, data, handle, doneMovingCallb }; // Bind the event listener for image rendering - $element.on('cornerstoneimagerendered', imageRenderedHandler); + element.addEventListener('cornerstoneimagerendered', imageRenderedHandler); const mouseUpCallback = () => { - $element.off('CornerstoneToolsMouseDrag', mouseDragCallback); - $element.off('CornerstoneToolsMouseUp', mouseUpCallback); - $element.off('CornerstoneToolsMouseClick', mouseUpCallback); - $element.off('cornerstoneimagerendered', imageRenderedHandler); + element.removeEventListener('cornerstonetoolsmousedrag', mouseDragCallback); + element.removeEventListener('cornerstonetoolsmouseup', mouseUpCallback); + element.removeEventListener('cornerstonetoolsmouseclick', mouseUpCallback); + element.removeEventListener('cornerstoneimagerendered', imageRenderedHandler); cornerstone.updateImage(element); if (typeof doneMovingCallback === 'function') { @@ -66,6 +66,6 @@ export default function (mouseEventData, toolType, data, handle, doneMovingCallb } }; - $element.on('CornerstoneToolsMouseUp', mouseUpCallback); - $element.on('CornerstoneToolsMouseClick', mouseUpCallback); + element.addEventListener('cornerstonetoolsmouseup', mouseUpCallback); + element.addEventListener('cornerstonetoolsmouseclick', mouseUpCallback); } diff --git a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js index 95191e807..54906b006 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js +++ b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js @@ -9,15 +9,14 @@ const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates(); const shadowConfig = toolDefaultStates.shadowConfig; const textBoxConfig = toolDefaultStates.textBoxConfig; -const configuration = { +const configuration = Object.assign({}, shadowConfig, { getMeasurementLocationCallback, changeMeasurementLocationCallback, drawHandles: false, drawHandlesOnHover: true, arrowFirst: true, - textBox: textBoxConfig, - ...shadowConfig, -}; + textBox: textBoxConfig +}); // Used to cancel tool placement const keys = { @@ -77,8 +76,8 @@ function addNewMeasurement(mouseEventData) { const measurementData = createNewMeasurement(mouseEventData); measurementData.viewport = cornerstone.getViewport(element); - const eventData = { mouseButtonMask: mouseEventData.which }; - const config = cornerstoneTools[toolType].getConfiguration(); + const tool = cornerstoneTools[toolType]; + const config = tool.getConfiguration(); // associate this data with this imageId so we can render it and manipulate it cornerstoneTools.addToolState(element, toolType, measurementData); @@ -86,10 +85,11 @@ function addNewMeasurement(mouseEventData) { const disableDefaultHandlers = () => { // since we are dragging to another place to drop the end point, we can just activate // the end point and let the moveHandle move it for us. - $element.off('CornerstoneToolsMouseMove', cornerstoneTools[toolType].mouseMoveCallback); - $element.off('CornerstoneToolsMouseDown', cornerstoneTools[toolType].mouseDownCallback); - $element.off('CornerstoneToolsMouseDownActivate', cornerstoneTools[toolType].mouseDownActivateCallback); - $element.off('CornerstoneToolsMouseDoubleClick', doubleClickCallback); + + element.removeEventListener('cornerstonetoolsmousemove', tool.mouseMoveCallback); + element.removeEventListener('cornerstonetoolsmousedown', tool.mouseDownCallback); + element.removeEventListener('cornerstonetoolsmousedownactivate', tool.mouseDownActivateCallback); + element.removeEventListener('cornerstonetoolsmousedoubleclick', doubleClickCallback); }; disableDefaultHandlers(); @@ -142,10 +142,10 @@ function addNewMeasurement(mouseEventData) { }; // Bind the event listener for image rendering - $element.on('cornerstoneimagerendered', imageRenderedHandler); + element.addEventListener('cornerstoneimagerendered', imageRenderedHandler); // Bind the tool deactivation and enlargement handlers - $element.on('CornerstoneToolsToolDeactivated', cancelAction); + element.addEventListener('cornerstonetoolstooldeactivated', cancelAction); $element.one('ohif.viewer.viewport.toggleEnlargement', cancelAction); cornerstone.updateImage(element); @@ -165,37 +165,37 @@ function addNewMeasurement(mouseEventData) { $element.off('mousedown', mousedownHandler); // Unbind the event listener for image rendering - $element.off('cornerstoneimagerendered', imageRenderedHandler); + element.removeEventListener('cornerstoneimagerendered', imageRenderedHandler); // Unbind the tool deactivation and enlargement handlers - $element.off('CornerstoneToolsToolDeactivated', cancelAction); + element.removeEventListener('cornerstonetoolstooldeactivated', cancelAction); $element.off('ohif.viewer.viewport.toggleEnlargement', cancelAction); // Disable the default handlers and re-enable again disableDefaultHandlers(); - $element.on('CornerstoneToolsMouseMove', eventData, cornerstoneTools[toolType].mouseMoveCallback); - $element.on('CornerstoneToolsMouseDown', eventData, cornerstoneTools[toolType].mouseDownCallback); - $element.on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools[toolType].mouseDownActivateCallback); - $element.on('CornerstoneToolsMouseDoubleClick', eventData, doubleClickCallback); + element.addEventListener('cornerstonetoolsmousemove', tool.mouseMoveCallback); + element.addEventListener('cornerstonetoolsmousedown', tool.mouseDownCallback); + element.addEventListener('cornerstonetoolsmousedownactivate', tool.mouseDownActivateCallback); + element.addEventListener('cornerstonetoolsmousedoubleclick', doubleClickCallback); cornerstone.updateImage(element); }); } function createNewMeasurement(mouseEventData) { - var imageId = mouseEventData.image.imageId; + const imageId = mouseEventData.image.imageId; // Get studyInstanceUid - var study = cornerstone.metaData.get('study', imageId); - var studyInstanceUid = study.studyInstanceUid; - var patientId = study.patientId; + const study = cornerstone.metaData.get('study', imageId); + const studyInstanceUid = study.studyInstanceUid; + const patientId = study.patientId; // Get seriesInstanceUid - var series = cornerstone.metaData.get('series', imageId); - var seriesInstanceUid = series.seriesInstanceUid; + const series = cornerstone.metaData.get('series', imageId); + const seriesInstanceUid = series.seriesInstanceUid; // create the measurement data for this tool with the end handle activated - var measurementData = { + const measurementData = { isCreating: true, visible: true, active: true, @@ -238,11 +238,11 @@ function createNewMeasurement(mouseEventData) { ///////// END ACTIVE TOOL /////// function pointNearTool(element, data, coords) { - var lineSegment = { + const lineSegment = { start: cornerstone.pixelToCanvas(element, data.handles.start), end: cornerstone.pixelToCanvas(element, data.handles.end) }; - var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords); + const distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords); if (cornerstoneTools.pointInsideBoundingBox(data.handles.textBox, coords)) { return true; @@ -254,24 +254,24 @@ function pointNearTool(element, data, coords) { ///////// BEGIN IMAGE RENDERING /////// function onImageRendered(e) { const eventData = e.detail; - var element = eventData.element; + const { element } = eventData; // if we have no toolData for this element, return immediately as there is nothing to do - var toolData = cornerstoneTools.getToolState(element, toolType); + const toolData = cornerstoneTools.getToolState(element, toolType); if (!toolData) { return; } // we have tool data for this element - iterate over each one and draw it - var context = eventData.canvasContext.canvas.getContext('2d'); + const context = eventData.canvasContext.canvas.getContext('2d'); context.setTransform(1, 0, 0, 1, 0, 0); - var color; - var lineWidth = cornerstoneTools.toolStyle.getToolWidth(); - var config = cornerstoneTools.nonTarget.getConfiguration(); + let color; + const lineWidth = cornerstoneTools.toolStyle.getToolWidth(); + const config = cornerstoneTools.nonTarget.getConfiguration(); - for (var i = 0; i < toolData.data.length; i++) { - var data = toolData.data[i]; + for (let i = 0; i < toolData.data.length; i++) { + const data = toolData.data[i]; context.save(); @@ -289,9 +289,9 @@ function onImageRendered(e) { } // Draw the arrow - var handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start); - var handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end); - var canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox); + const handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start); + const handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end); + const canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox); cornerstoneTools.drawArrow(context, handleEndCanvas, handleStartCanvas, color, lineWidth); @@ -305,32 +305,31 @@ function onImageRendered(e) { // Draw the text if (data.measurementNumber) { - - var textLine = `Non-Target ${data.measurementNumber}`; - var boundingBox = cornerstoneTools.drawTextBox(context, textLine, canvasTextLocation.x, canvasTextLocation.y, color, config.textBox); + const textLine = `Non-Target ${data.measurementNumber}`; + const boundingBox = cornerstoneTools.drawTextBox(context, textLine, canvasTextLocation.x, canvasTextLocation.y, color, config.textBox); data.handles.textBox.boundingBox = boundingBox; OHIF.cornerstone.repositionTextBox(eventData, data, config.textBox); // Draw linked line as dashed - var link = { + const link = { start: {}, end: {} }; - var midpointCanvas = { + const midpointCanvas = { x: (handleStartCanvas.x + handleEndCanvas.x) / 2, y: (handleStartCanvas.y + handleEndCanvas.y) / 2, }; - var points = [ handleStartCanvas, handleEndCanvas, midpointCanvas ]; + const points = [ handleStartCanvas, handleEndCanvas, midpointCanvas ]; link.end.x = canvasTextLocation.x; link.end.y = canvasTextLocation.y; link.start = cornerstoneMath.point.findClosestPoint(points, link.end); - var boundingBoxPoints = [ { + const boundingBoxPoints = [ { // Top middle point of bounding box x: boundingBox.left + boundingBox.width / 2, y: boundingBox.top @@ -368,19 +367,19 @@ function onImageRendered(e) { ///////// BEGIN ACTIVE TOOL /////// function addNewMeasurementTouch(touchEventData) { - var element = touchEventData.element; + const element = touchEventData.element; function doneCallback() { measurementData.active = true; cornerstone.updateImage(element); } - var measurementData = createNewMeasurement(touchEventData); + const measurementData = createNewMeasurement(touchEventData); cornerstoneTools.addToolState(element, toolType, measurementData); - $(element).off('CornerstoneToolsTouchDrag', cornerstoneTools.nonTargetTouch.touchMoveHandle); - $(element).off('CornerstoneToolsDragStartActive', cornerstoneTools.nonTargetTouch.touchDownActivateCallback); - $(element).off('CornerstoneToolsTap', cornerstoneTools.nonTargetTouch.tapCallback); - var config = cornerstoneTools.nonTarget.getConfiguration(); + element.removeEventListener('cornerstonetoolstouchdrag', cornerstoneTools.nonTargetTouch.touchMoveHandle); + element.removeEventListener('cornerstonetoolsdragstartactive', cornerstoneTools.nonTargetTouch.touchDownActivateCallback); + element.removeEventListener('cornerstonetoolstap', cornerstoneTools.nonTargetTouch.tapCallback); + const config = cornerstoneTools.nonTarget.getConfiguration(); cornerstone.updateImage(element); @@ -394,16 +393,16 @@ function addNewMeasurementTouch(touchEventData) { config.getMeasurementLocationCallback(measurementData, touchEventData, doneCallback); - $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.nonTargetTouch.touchMoveHandle); - $(element).on('CornerstoneToolsDragStartActive', cornerstoneTools.nonTargetTouch.touchDownActivateCallback); - $(element).on('CornerstoneToolsTap', cornerstoneTools.nonTargetTouch.tapCallback); + element.addEventListener('cornerstonetoolstouchdrag', cornerstoneTools.nonTargetTouch.touchMoveHandle); + element.addEventListener('cornerstonetoolsdragstartactive', cornerstoneTools.nonTargetTouch.touchDownActivateCallback); + element.addEventListener('cornerstonetoolstap', cornerstoneTools.nonTargetTouch.tapCallback); }); } function doubleClickCallback(e) { const eventData = e.detail; - var element = eventData.element; - var data; + const { element } = eventData; + let data; function doneCallback(data, deleteTool) { if (deleteTool === true) { @@ -420,17 +419,17 @@ function doubleClickCallback(e) { return false; } - var config = cornerstoneTools.nonTarget.getConfiguration(); + const config = cornerstoneTools.nonTarget.getConfiguration(); - var coords = eventData.currentPoints.canvas; - var toolData = cornerstoneTools.getToolState(element, toolType); + const coords = eventData.currentPoints.canvas; + const toolData = cornerstoneTools.getToolState(element, toolType); // now check to see if there is a handle we can move if (!toolData) { return; } - for (var i = 0; i < toolData.data.length; i++) { + for (let i = 0; i < toolData.data.length; i++) { data = toolData.data[i]; if (pointNearTool(element, data, coords)) { data.active = true; diff --git a/Packages/ohif-lesiontracker/client/compatibility/qualitativeTargetTools.js b/Packages/ohif-lesiontracker/client/compatibility/qualitativeTargetTools.js index 8bd900214..99fcafa78 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/qualitativeTargetTools.js +++ b/Packages/ohif-lesiontracker/client/compatibility/qualitativeTargetTools.js @@ -5,7 +5,7 @@ import { cornerstone, cornerstoneMath, cornerstoneTools } from 'meteor/ohif:corn const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates(); const textBoxConfig = toolDefaultStates.textBoxConfig; -var configuration = { +const configuration = { getMeasurementLocationCallback, changeMeasurementLocationCallback, drawHandles: false, @@ -15,27 +15,21 @@ var configuration = { }; // Used to cancel tool placement -var keys = { - ESC: 27 -}; +const keys = { ESC: 27 }; // Define a callback to get your text annotation // This could be used, e.g. to open a modal function getMeasurementLocationCallback(measurementData, eventData, doneCallback) { - doneCallback(prompt('Enter your lesion location:')); + doneCallback(window.prompt('Enter your lesion location:')); } function changeMeasurementLocationCallback(measurementData, eventData, doneCallback) { - doneCallback(prompt('Change your lesion location:')); + doneCallback(window.prompt('Change your lesion location:')); } - function createQualitativeTargetTool(toolType, responseText='') { - var toolInterface = { - toolType: toolType - }; - - var response = responseText; + const toolInterface = { toolType }; + const response = responseText; /// --- Mouse Tool --- /// ///////// BEGIN ACTIVE TOOL /////// @@ -51,8 +45,8 @@ function createQualitativeTargetTool(toolType, responseText='') { const measurementData = createNewMeasurement(mouseEventData); measurementData.viewport = cornerstone.getViewport(element); - const eventData = { mouseButtonMask: mouseEventData.which }; - const config = cornerstoneTools[toolType].getConfiguration(); + const tool = cornerstoneTools[toolType]; + const config = tool.getConfiguration(); // associate this data with this imageId so we can render it and manipulate it cornerstoneTools.addToolState(element, toolType, measurementData); @@ -60,10 +54,10 @@ function createQualitativeTargetTool(toolType, responseText='') { const disableDefaultHandlers = () => { // since we are dragging to another place to drop the end point, we can just activate // the end point and let the moveHandle move it for us. - $element.off('CornerstoneToolsMouseMove', cornerstoneTools[toolType].mouseMoveCallback); - $element.off('CornerstoneToolsMouseDown', cornerstoneTools[toolType].mouseDownCallback); - $element.off('CornerstoneToolsMouseDownActivate', cornerstoneTools[toolType].mouseDownActivateCallback); - $element.off('CornerstoneToolsMouseDoubleClick', doubleClickCallback); + element.removeEventListener('cornerstonetoolsmousemove', tool.mouseMoveCallback); + element.removeEventListener('cornerstonetoolsmousedown', tool.mouseDownCallback); + element.removeEventListener('cornerstonetoolsmousedownactivate', tool.mouseDownActivateCallback); + element.removeEventListener('cornerstonetoolsmousedoubleclick', doubleClickCallback); }; disableDefaultHandlers(); @@ -116,10 +110,10 @@ function createQualitativeTargetTool(toolType, responseText='') { }; // Bind the event listener for image rendering - $element.on('cornerstoneimagerendered', imageRenderedHandler); + element.addEventListener('cornerstoneimagerendered', imageRenderedHandler); // Bind the tool deactivation and enlargement handlers - $element.on('CornerstoneToolsToolDeactivated', cancelAction); + element.addEventListener('cornerstonetoolstooldeactivated', cancelAction); $element.one('ohif.viewer.viewport.toggleEnlargement', cancelAction); cornerstone.updateImage(element); @@ -139,37 +133,37 @@ function createQualitativeTargetTool(toolType, responseText='') { $element.off('mousedown', mousedownHandler); // Unbind the event listener for image rendering - $element.off('cornerstoneimagerendered', imageRenderedHandler); + element.removeEventListener('cornerstoneimagerendered', imageRenderedHandler); // Unbind the tool deactivation and enlargement handlers - $element.off('CornerstoneToolsToolDeactivated', cancelAction); + element.removeEventListener('cornerstonetoolstooldeactivated', cancelAction); $element.off('ohif.viewer.viewport.toggleEnlargement', cancelAction); // Disable the default handlers and re-enable again disableDefaultHandlers(); - $element.on('CornerstoneToolsMouseMove', eventData, cornerstoneTools[toolType].mouseMoveCallback); - $element.on('CornerstoneToolsMouseDown', eventData, cornerstoneTools[toolType].mouseDownCallback); - $element.on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools[toolType].mouseDownActivateCallback); - $element.on('CornerstoneToolsMouseDoubleClick', eventData, doubleClickCallback); + element.addEventListener('cornerstonetoolsmousemove', tool.mouseMoveCallback); + element.addEventListener('cornerstonetoolsmousedown', tool.mouseDownCallback); + element.addEventListener('cornerstonetoolsmousedownactivate', tool.mouseDownActivateCallback); + element.addEventListener('cornerstonetoolsmousedoubleclick', doubleClickCallback); cornerstone.updateImage(element); }); } function createNewMeasurement(mouseEventData) { - var imageId = mouseEventData.image.imageId; + const imageId = mouseEventData.image.imageId; // Get studyInstanceUid - var study = cornerstone.metaData.get('study', imageId); - var studyInstanceUid = study.studyInstanceUid; - var patientId = study.patientId; + const study = cornerstone.metaData.get('study', imageId); + const studyInstanceUid = study.studyInstanceUid; + const patientId = study.patientId; // Get seriesInstanceUid - var series = cornerstone.metaData.get('series', imageId); - var seriesInstanceUid = series.seriesInstanceUid; + const series = cornerstone.metaData.get('series', imageId); + const seriesInstanceUid = series.seriesInstanceUid; // create the measurement data for this tool with the end handle activated - var measurementData = { + const measurementData = { isCreating: true, visible: true, active: true, @@ -212,11 +206,11 @@ function createQualitativeTargetTool(toolType, responseText='') { ///////// END ACTIVE TOOL /////// function pointNearTool(element, data, coords) { - var lineSegment = { + const lineSegment = { start: cornerstone.pixelToCanvas(element, data.handles.start), end: cornerstone.pixelToCanvas(element, data.handles.end) }; - var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords); + const distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords); if (cornerstoneTools.pointInsideBoundingBox(data.handles.textBox, coords)) { return true; @@ -227,9 +221,9 @@ function createQualitativeTargetTool(toolType, responseText='') { function drawDottedArrow(context, start, end, color, lineWidth) { //variables to be used when creating the arrow - var headLength = 10; + const headLength = 10; - var angle = Math.atan2(end.y - start.y, end.x - start.x); + const angle = Math.atan2(end.y - start.y, end.x - start.x); //starting path of the arrow from the start square to the end square and drawing the stroke context.beginPath(); @@ -263,24 +257,22 @@ function createQualitativeTargetTool(toolType, responseText='') { ///////// BEGIN IMAGE RENDERING /////// function onImageRendered(e) { const eventData = e.detail; - var element = eventData.element; + const { element } = eventData; // if we have no toolData for this element, return immediately as there is nothing to do - var toolData = cornerstoneTools.getToolState(element, toolType); - if (!toolData) { - return; - } + const toolData = cornerstoneTools.getToolState(element, toolType); + if (!toolData) return; // we have tool data for this element - iterate over each one and draw it - var context = eventData.canvasContext.canvas.getContext('2d'); + const context = eventData.canvasContext.canvas.getContext('2d'); context.setTransform(1, 0, 0, 1, 0, 0); - var color; - var lineWidth = cornerstoneTools.toolStyle.getToolWidth(); - var config = cornerstoneTools[toolType].getConfiguration(); + let color; + const lineWidth = cornerstoneTools.toolStyle.getToolWidth(); + const config = cornerstoneTools[toolType].getConfiguration(); - for (var i = 0; i < toolData.data.length; i++) { - var data = toolData.data[i]; + for (let i = 0; i < toolData.data.length; i++) { + const data = toolData.data[i]; context.save(); @@ -298,9 +290,9 @@ function createQualitativeTargetTool(toolType, responseText='') { } // Draw the arrow - var handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start); - var handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end); - var canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox); + const handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start); + const handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end); + const canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox); drawDottedArrow(context, handleEndCanvas, handleStartCanvas, color, lineWidth); @@ -314,9 +306,9 @@ function createQualitativeTargetTool(toolType, responseText='') { // Draw the text if (data.measurementNumber) { - var textLines = [`Target ${data.measurementNumber}`, response]; + const textLines = [`Target ${data.measurementNumber}`, response]; - var boundingBox = cornerstoneTools.drawTextBox( + const boundingBox = cornerstoneTools.drawTextBox( context, textLines, canvasTextLocation.x, @@ -330,24 +322,24 @@ function createQualitativeTargetTool(toolType, responseText='') { OHIF.cornerstone.repositionTextBox(eventData, data, config.textBox); // Draw linked line as dashed - var link = { + const link = { start: {}, end: {} }; - var midpointCanvas = { + const midpointCanvas = { x: (handleStartCanvas.x + handleEndCanvas.x) / 2, y: (handleStartCanvas.y + handleEndCanvas.y) / 2, }; - var points = [ handleStartCanvas, handleEndCanvas, midpointCanvas ]; + const points = [ handleStartCanvas, handleEndCanvas, midpointCanvas ]; link.end.x = canvasTextLocation.x; link.end.y = canvasTextLocation.y; link.start = cornerstoneMath.point.findClosestPoint(points, link.end); - var boundingBoxPoints = [ { + const boundingBoxPoints = [ { // Top middle point of bounding box x: boundingBox.left + boundingBox.width / 2, y: boundingBox.top @@ -385,19 +377,20 @@ function createQualitativeTargetTool(toolType, responseText='') { ///////// BEGIN ACTIVE TOOL /////// function addNewMeasurementTouch(touchEventData) { - var element = touchEventData.element; + const { element } = touchEventData; function doneCallback() { measurementData.active = true; cornerstone.updateImage(element); } - var measurementData = createNewMeasurement(touchEventData); + const measurementData = createNewMeasurement(touchEventData); cornerstoneTools.addToolState(element, toolType, measurementData); - $(element).off('CornerstoneToolsTouchDrag', cornerstoneTools[toolType + "Touch"].touchMoveHandle); - $(element).off('CornerstoneToolsDragStartActive', cornerstoneTools[toolType + "Touch"].touchDownActivateCallback); - $(element).off('CornerstoneToolsTap', cornerstoneTools[toolType + "Touch"].tapCallback); - var config = cornerstoneTools[toolType].getConfiguration(); + const touchTool = cornerstoneTools[toolType + 'Touch']; + element.removeEventListener('cornerstonetoolstouchdrag', touchTool.touchMoveHandle); + element.removeEventListener('cornerstonetoolsdragstartactive', touchTool.touchDownActivateCallback); + element.removeEventListener('cornerstonetoolstap', touchTool.tapCallback); + const config = cornerstoneTools[toolType].getConfiguration(); cornerstone.updateImage(element); @@ -411,16 +404,16 @@ function createQualitativeTargetTool(toolType, responseText='') { config.getMeasurementLocationCallback(measurementData, touchEventData, doneCallback); - $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools[toolType + "Touch"].touchMoveHandle); - $(element).on('CornerstoneToolsDragStartActive', cornerstoneTools[toolType + "Touch"].touchDownActivateCallback); - $(element).on('CornerstoneToolsTap', cornerstoneTools[toolType + "Touch"].tapCallback); + element.addEventListener('cornerstonetoolstouchdrag', touchTool.touchMoveHandle); + element.addEventListener('cornerstonetoolsdragstartactive', touchTool.touchDownActivateCallback); + element.addEventListener('cornerstonetoolstap', touchTool.tapCallback); }); } function doubleClickCallback(e) { const eventData = e.detail; - var element = eventData.element; - var data; + const { element } = eventData; + let data; function doneCallback(data, deleteTool) { if (deleteTool === true) { @@ -437,17 +430,17 @@ function createQualitativeTargetTool(toolType, responseText='') { return false; } - var config = cornerstoneTools[toolType].getConfiguration(); + const config = cornerstoneTools[toolType].getConfiguration(); - var coords = eventData.currentPoints.canvas; - var toolData = cornerstoneTools.getToolState(element, toolType); + const coords = eventData.currentPoints.canvas; + const toolData = cornerstoneTools.getToolState(element, toolType); // now check to see if there is a handle we can move if (!toolData) { return; } - for (var i = 0; i < toolData.data.length; i++) { + for (let i = 0; i < toolData.data.length; i++) { data = toolData.data[i]; if (pointNearTool(element, data, coords)) { data.active = true; @@ -461,7 +454,6 @@ function createQualitativeTargetTool(toolType, responseText='') { } } - toolInterface.mouse = cornerstoneTools.mouseButtonTool({ addNewMeasurement: addNewMeasurement, createNewMeasurement: createNewMeasurement, @@ -483,12 +475,12 @@ function createQualitativeTargetTool(toolType, responseText='') { return toolInterface; } -var targetCRInterface = createQualitativeTargetTool('targetCR', 'CR'); +const targetCRInterface = createQualitativeTargetTool('targetCR', 'CR'); cornerstoneTools.targetCR = targetCRInterface.mouse; cornerstoneTools.targetCR.setConfiguration(configuration); cornerstoneTools.targetCRTouch = targetCRInterface.touch; -var targetUNInterface = createQualitativeTargetTool('targetUN', 'UN'); +const targetUNInterface = createQualitativeTargetTool('targetUN', 'UN'); cornerstoneTools.targetUN = targetUNInterface.mouse; cornerstoneTools.targetUN.setConfiguration(configuration); cornerstoneTools.targetUNTouch = targetUNInterface.touch; diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolContextMenu/toolContextMenu.js b/Packages/ohif-viewerbase/client/components/viewer/toolContextMenu/toolContextMenu.js index a105e480f..45797b81c 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolContextMenu/toolContextMenu.js +++ b/Packages/ohif-viewerbase/client/components/viewer/toolContextMenu/toolContextMenu.js @@ -57,13 +57,13 @@ const createDropdown = function(event, isTouchEvent = false) { }; Template.viewerMain.events({ - 'CornerstoneToolsMouseClick .imageViewerViewport'(event, instance) { + 'cornerstonetoolsmouseclick .imageViewerViewport'(event, instance) { if (event.which === 3) { createDropdown(event); } }, - 'CornerstoneToolsTouchPress .imageViewerViewport'(event, instance) { + 'cornerstonetoolstouchpress .imageViewerViewport'(event, instance) { createDropdown(event, true); } }); diff --git a/Packages/ohif-viewerbase/client/lib/classes/StackImagePositionOffsetSynchronizer.js b/Packages/ohif-viewerbase/client/lib/classes/StackImagePositionOffsetSynchronizer.js index 7e7ee01ad..6d7e546b1 100644 --- a/Packages/ohif-viewerbase/client/lib/classes/StackImagePositionOffsetSynchronizer.js +++ b/Packages/ohif-viewerbase/client/lib/classes/StackImagePositionOffsetSynchronizer.js @@ -1,6 +1,7 @@ -import { OHIF } from 'meteor/ohif:core'; import { Session } from 'meteor/session'; import { $ } from 'meteor/jquery'; +import { OHIF } from 'meteor/ohif:core'; +import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone'; import { toolManager } from '../toolManager'; export class StackImagePositionOffsetSynchronizer { @@ -11,7 +12,7 @@ export class StackImagePositionOffsetSynchronizer { } static get ELEMENT_DISABLED_EVENT() { - return 'CornerstoneElementDisabled.StackImagePositionOffsetSynchronizer'; + return 'cornerstoneelementdisabled.StackImagePositionOffsetSynchronizer'; } isActive() { @@ -211,4 +212,4 @@ export class StackImagePositionOffsetSynchronizer { OHIF.log.info(`StackImagePositionOffsetSynchronizer getViewportImageNormal: ${errorMessage}`); } } -}; +} diff --git a/Packages/ohif-viewerbase/client/lib/classes/StudyLoadingListener.js b/Packages/ohif-viewerbase/client/lib/classes/StudyLoadingListener.js index 9880ca943..8e2db6c2b 100644 --- a/Packages/ohif-viewerbase/client/lib/classes/StudyLoadingListener.js +++ b/Packages/ohif-viewerbase/client/lib/classes/StudyLoadingListener.js @@ -235,7 +235,7 @@ class StackLoadingListener extends BaseLoadingListener { } _getImageCachePromiseRemoveEventName() { - return 'CornerstoneImageCachePromiseRemoved.' + this.id; + return 'cornerstoneimagecachepromiseremoved.' + this.id; } startListening() {