feat(extension-cornerstone): Add additional tools: Magnify, ROI Window, Probe, Ellipse, Rectangle, Invert, Rotate Right, Flip H, Flip V, Clear

extensions/ohif-cornerstone-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",

extensions/ohif-cornerstone-extension/src/commandsModule.js

@@ -1,5 +1,6 @@
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
+import OHIF from 'ohif-core';
 
 const actions = {
   rotateViewport: ({ viewports, rotation }) => {
@@ -89,15 +90,60 @@ const actions = {
     // TODO
     console.warn('updateDisplaySet: ', direction);
   },
-  clearAnnotations: () => {
-    console.warn('clearAnnotations: not yet implemented');
-    // const toolState =
-    //   cornerstoneTools.globalImageIdSpecificToolStateManager.toolState;
-    // if (!toolState) return;
-    // Object.keys(toolState).forEach(imageId => {
-    //   if (!cornerstoneImageId || cornerstoneImageId === imageId)
-    //     delete toolState[imageId];
-    // });
+  clearAnnotations: ({ viewports }) => {
+    const element = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+    if (!element) {
+      return;
+    }
+
+    const enabledElement = cornerstone.getEnabledElement(element);
+    if (!enabledElement || !enabledElement.image) {
+      return;
+    }
+
+    const {
+      toolState,
+    } = cornerstoneTools.globalImageIdSpecificToolStateManager;
+    if (
+      !toolState ||
+      toolState.hasOwnProperty(enabledElement.image.imageId) === false
+    ) {
+      return;
+    }
+
+    const imageIdToolState = toolState[enabledElement.image.imageId];
+
+    const measurementsToRemove = [];
+
+    Object.keys(imageIdToolState).forEach(toolType => {
+      const { data } = imageIdToolState[toolType];
+
+      data.forEach(measurementData => {
+        const { _id, lesionNamingNumber, measurementNumber } = measurementData;
+        if (!_id) {
+          return;
+        }
+
+        measurementsToRemove.push({
+          toolType,
+          _id,
+          lesionNamingNumber,
+          measurementNumber,
+        });
+      });
+    });
+
+    measurementsToRemove.forEach(measurementData => {
+      OHIF.measurements.MeasurementHandlers.onRemoved({
+        detail: {
+          toolType: measurementData.toolType,
+          measurementData,
+        },
+      });
+    });
   },
 };
 
@@ -147,7 +193,11 @@ const definitions = {
     storeContexts: ['viewports'],
     options: {},
   },
-  // TODO: Clear Annotations
+  clearAnnotations: {
+    commandFn: actions.clearAnnotations,
+    storeContexts: ['viewports'],
+    options: {},
+  },
   // TODO: Next/Previous image
   // TODO: First/Last image
   // Next/Previous series/DisplaySet

extensions/ohif-cornerstone-extension/src/toolbarModule.js

@@ -17,12 +17,12 @@
 //  -- ACTIVE_ROUTE::VIEWER
 //  -- ACTIVE_VIEWPORT::CORNERSTONE
 // setToolActive commands should receive the button event that triggered
-// so we can do the "bind to this butyon" magic
+// so we can do the "bind to this button" magic
 
 const TOOLBAR_BUTTON_TYPES = {
   COMMAND: 'command',
   SET_TOOL_ACTIVE: 'setToolActive',
-  BUILT_IN: 'builtIn',
+  BUILT_IN: 'builtIn'
 };
 
 const definitions = [
@@ -98,6 +98,98 @@ const definitions = [
       behavior: 'CINE',
     },
   },
+  {
+    id: 'More',
+    label: 'More',
+    icon: 'ellipse-circle',
+    buttons: [
+      {
+        id: 'Magnify',
+        label: 'Magnify',
+        icon: 'circle',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Magnify' },
+      },
+      {
+        id: 'WwwcRegion',
+        label: 'ROI Window',
+        icon: 'stop',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'WwwcRegion' },
+      },
+      {
+        id: 'DragProbe',
+        label: 'Probe',
+        icon: 'dot-circle',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'DragProbe' },
+      },
+      {
+        id: 'EllipticalRoi',
+        label: 'Ellipse',
+        icon: 'circle-o',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'EllipticalRoi' },
+      },
+      {
+        id: 'RectangleRoi',
+        label: 'Rectangle',
+        icon: 'square-o',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'RectangleRoi' },
+      },
+      {
+        id: 'Invert',
+        label: 'Invert',
+        icon: 'adjust',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'invertViewport',
+      },
+      {
+        id: 'RotateRight',
+        label: 'Rotate Right',
+        icon: 'rotate-right',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'rotateViewportCW',
+      },
+      {
+        id: 'FlipH',
+        label: 'Flip H',
+        icon: 'ellipse-h',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'flipViewportHorizontal',
+      },
+      {
+        id: 'FlipV',
+        label: 'Flip V',
+        icon: 'ellipse-v',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'flipViewportVertical',
+      },
+      {
+        id: 'Clear',
+        label: 'Clear',
+        icon: 'trash',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'clearAnnotations',
+      },
+    ],
+  },
 ];
 
 export default {

package.json

@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.5",
-    "@ohif/extension-cornerstone": "0.0.38",
+    "@ohif/extension-cornerstone": "0.0.39",
     "@ohif/extension-dicom-html": "0.0.3",
     "@ohif/extension-dicom-microscopy": "0.0.8",
     "@ohif/extension-dicom-pdf": "0.0.7",

src/connectedComponents/PluginSwitch.js

@@ -13,7 +13,7 @@ class PluginSwitch extends Component {
   render() {
     return (
       <div className="PluginSwitch">
-        <ExpandableToolMenu buttons={this.props.buttons} />
+        <ExpandableToolMenu buttons={this.props.buttons} text={'View'} />
       </div>
     );
   }

src/connectedComponents/ToolbarRow.js

@@ -1,11 +1,7 @@
 import './ToolbarRow.css';
 
 import React, { Component } from 'react';
-import {
-  RoundedButtonGroup,
-  ToolbarButton,
-  ExpandableToolMenu,
-} from 'react-viewerbase';
+import { ExpandableToolMenu, RoundedButtonGroup, ToolbarButton } from 'react-viewerbase';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
@@ -155,7 +151,7 @@ class ToolbarRow extends Component {
  */
 function _getButtonComponents(toolbarButtons, activeButtons) {
   return toolbarButtons.map((button, index) => {
-    if (button.buttons) {
+    if (button.buttons && button.buttons.length) {
       // Iterate over button definitions and update `onClick` behavior
       const childButtons = button.buttons.map(childButton => {
         childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
@@ -171,7 +167,6 @@ function _getButtonComponents(toolbarButtons, activeButtons) {
         />
       );
     }
-
     return (
       <ToolbarButton
         key={button.id}

src/setupTools.js

@@ -145,6 +145,8 @@ export default function setupTools(store) {
     { name: 'Pan', mouseButtonMasks: [1, 4] },
     { name: 'Zoom', mouseButtonMasks: [1, 2] },
     { name: 'Wwwc', mouseButtonMasks: [1] },
+    { name: 'Magnify', mouseButtonMasks: [1] },
+    { name: 'WwwcRegion', mouseButtonMasks: [1] },
     {
       name: 'Bidirectional',
       props: {
@@ -210,6 +212,7 @@ export default function setupTools(store) {
       },
       mouseButtonMasks: [1],
     },
+    { name: 'DragProbe', mouseButtonMasks: [1] },
     { name: 'PanMultiTouch' },
     { name: 'ZoomTouchPinch' },
     { name: 'StackScrollMouseWheel' },

yarn.lock

@@ -1214,10 +1214,10 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
-"@ohif/extension-cornerstone@0.0.38":
-  version "0.0.38"
-  resolved "https://registry.yarnpkg.com/@ohif/extension-cornerstone/-/extension-cornerstone-0.0.38.tgz#c1cdf2796bef441a293bcc045f9748c7b2c1395f"
-  integrity sha512-xWvK04s2xwjNlIvz4BpJ5pWP8wNmW9kpud1zkywR+TFYgthH2X64Tr01VZTOh8Mi+0Xkwe5IElb4Sw2aVA4SBg==
+"@ohif/extension-cornerstone@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@ohif/extension-cornerstone/-/extension-cornerstone-0.0.39.tgz#aa70e3181cd1aa24101e815161fd9688722d26d6"
+  integrity sha512-HVu+tUYgdY7J9SxfA1R5YGuninMe+eOtGAX4Rx5YgunsH8QQmC+uhSjcclJt8Z+W7ac/iQ+k6Hx9smnPBqiObw==
   dependencies:
     "@babel/runtime" "^7.2.0"
     classnames "^2.2.6"