feat!: Ability to configure cornerstone tools via extension configuration (#1229)

* Fix ExtensionManager bug and add test to bandaid * Add tools configuration to extension manager preinit * Fix reducing of configs * Merge internal with external configs * Merge internal with external configs * Remove dialog from init in measurementstable * Testing injected configuration * New way to set config * Add new prop to dialog provider to allow disabling last position * Remove code from preinit in cornerstone * Add new prop to dialog provider to allow disabling last position * Add centralize to dialogs * Reorder dialogs when adding them * Fix draggable styles (cursor) * Remove repositioning methods from labelling flow and remove overlay from labelling manager * Fix empty array being set in bringToFront * Add new command to update table and pass commands manager to modules/preinit hook * Ad UIContextMenu service / factory * Use new contextmenu service in measurementspanel extension * Use dialogs for arrow annotate in default * Remove positioning funcionality from tool context menu * Add context menu service * Pass commandsModule to extension * Update edit description dialog and simple dialog to position relative * Remove style code from labelling flow and manager * Remove eventdata from labelling * Remove labelling code from measurement init * Add commandsmanager to provider * Update contextmenu provider and service * Add touchstart and mouseclick to hide contextmenu * Hide labelling if click/touch * Remove labelling and context menu dead code * Fix undefined bug if ViewerMain grid has no children * Fix broken prop on context menu * Update commandsmodule based on master * Fix broken configuration * Update script tag config * Remove cornerstone from toolcontextmenu * Remove cornerstone from toolcontextmenu * Split labelling and context menu providers * Split labelling and context menu providers * Update test * Destructure extensions into new array * CR Update: Move default arrow config to cornerstone instead of default * CR Update: Fix app configuration props structure * CR Update: Fix app configuration prop in script tag and extract commands manager from providers * CR Update: Create custom providers to use commandsManager * CR Update: Use services directly in measurementspanel * CR Update: Pass components to providers * CR Update: Remove position from dialog * CR Update: fix dialog prop check * CR Update: Fix comments * CR Update: Update documentation * CR Update: Add test default configuration * CR Update: Add default empy array to extensions * CR Update: Update i18n configuration all ot match current function configuration * CR Update: Add defaults to injected dependencies in configuration and extension configuration * CR Update: Add defaults to configuration with no args * Update documentation * CR Update: Add default for tools * CR Update: Update config object to i18n * CR Update: spread defaults * CR Update: Add tool configuration example to cornerstone extension * CR Update: Add tool configuration to netlify (testing) * CR Update: Remove netlify config for tools * CR Update: Rollback changes to i18n to be fixed later * CR Update: Update documentation and pass whole cornerstone config object instead of tools key SEE: https://www.conventionalcommits.org/en/v1.0.0/#commit-message-with-both-and-breaking-change-footer BREAKING CHANGE: modifies the exposed react <App /> components props. The contract for providing configuration for the app has changed. Please reference updated documentation for guidance.
2019-12-09 12:47:23 -05:00
1 parent fd7620ced9
commit 55a580659e
@@ -12,8 +12,9 @@ export default {
   */

  preRegistration({
-    servicesManager,
-    configuration: extensionConfiguration,
+    servicesManager = {},
+    commandsManager = {},
+    configuration = {},
  }) {},

  /**
@@ -67,6 +67,24 @@ Our Viewport wraps [cornerstonejs/react-cornerstone-viewport][react-viewport]
 and is connected the redux store. This module is the most prone to change as we
 hammer out our Viewport interface.

+## Tool Configuration
+
+Tools can be configured through extension configuration using the tools key:
+
+```js
+  ...
+  cornerstoneExtensionConfig: {
+    tools: {
+      ArrowAnnotate: {
+        configuration: {
+          getTextCallback: (callback, eventDetails) => callback(prompt('Enter your custom annotation')),
+        },
+      },
+    },
+  },
+  ...
+```
+
 ## Resources

 ### Repositories
@@ -47,6 +47,7 @@
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "classnames": "^2.2.6",
+    "lodash.merge": "^4.6.2",
    "lodash.throttle": "^4.1.1",
    "query-string": "^6.8.3",
    "react-cornerstone-viewport": "2.x.x"
@@ -248,10 +248,13 @@ class OHIFCornerstoneViewport extends Component {
    // TODO: Does it make more sense to use Context?
    if (this.props.children && this.props.children.length) {
      childrenWithProps = this.props.children.map((child, index) => {
-        return React.cloneElement(child, {
-          viewportIndex: this.props.viewportIndex,
-          key: index,
-        });
+        return (
+          child &&
+          React.cloneElement(child, {
+            viewportIndex: this.props.viewportIndex,
+            key: index,
+          })
+        );
      });
    }

@@ -148,18 +148,118 @@ const commandsModule = ({ servicesManager }) => {
    showDownloadViewportModal: ({ title, viewports }) => {
      const activeViewportIndex = viewports.activeViewportIndex;
      const { UIModalService } = servicesManager.services;
-      UIModalService.show({
-        content: CornerstoneViewportDownloadForm,
-        title,
-        contentProps: {
-          activeViewportIndex,
-          onClose: UIModalService.hide,
-        },
+      if (UIModalService) {
+        UIModalService.show({
+          content: CornerstoneViewportDownloadForm,
+          title,
+          contentProps: {
+            activeViewportIndex,
+            onClose: UIModalService.hide,
+          },
+        });
+      }
+    },
+    updateTableWithNewMeasurementData({
+      toolType,
+      measurementNumber,
+      location,
+      description,
+    }) {
+      // Update all measurements by measurement number
+      const measurementApi = OHIF.measurements.MeasurementApi.Instance;
+      const measurements = measurementApi.tools[toolType].filter(
+        m => m.measurementNumber === measurementNumber
+      );
+
+      measurements.forEach(measurement => {
+        measurement.location = location;
+        measurement.description = description;
+
+        measurementApi.updateMeasurement(measurement.toolType, measurement);
      });
+
+      measurementApi.syncMeasurementsAndToolData();
+
+      // Update images in all active viewports
+      cornerstone.getEnabledElements().forEach(enabledElement => {
+        cornerstone.updateImage(enabledElement.element);
+      });
+    },
+    getNearbyToolData({ element, canvasCoordinates, availableToolTypes }) {
+      const nearbyTool = {};
+      let pointNearTool = false;
+
+      availableToolTypes.forEach(toolType => {
+        const elementToolData = cornerstoneTools.getToolState(
+          element,
+          toolType
+        );
+
+        if (!elementToolData) {
+          return;
+        }
+
+        elementToolData.data.forEach((toolData, index) => {
+          let elementToolInstance = cornerstoneTools.getToolForElement(
+            element,
+            toolType
+          );
+
+          if (!elementToolInstance) {
+            elementToolInstance = cornerstoneTools.getToolForElement(
+              element,
+              `${toolType}Tool`
+            );
+          }
+
+          if (!elementToolInstance) {
+            console.warn('Tool not found.');
+            return undefined;
+          }
+
+          if (
+            elementToolInstance.pointNearTool(
+              element,
+              toolData,
+              canvasCoordinates
+            )
+          ) {
+            pointNearTool = true;
+            nearbyTool.tool = toolData;
+            nearbyTool.index = index;
+            nearbyTool.toolType = toolType;
+          }
+        });
+
+        if (pointNearTool) {
+          return false;
+        }
+      });
+
+      return pointNearTool ? nearbyTool : undefined;
+    },
+    removeToolState: ({ element, toolType, tool }) => {
+      cornerstoneTools.removeToolState(element, toolType, tool);
+      cornerstone.updateImage(element);
    },
  };

  const definitions = {
+    getNearbyToolData: {
+      commandFn: actions.getNearbyToolData,
+      storeContexts: [],
+      options: {},
+    },
+    removeToolState: {
+      commandFn: actions.removeToolState,
+      storeContexts: [],
+      options: {},
+    },
+    updateTableWithNewMeasurementData: {
+      commandFn: actions.updateTableWithNewMeasurementData,
+      storeContexts: [],
+      options: {},
+    },
    showDownloadViewportModal: {
      commandFn: actions.showDownloadViewportModal,
      storeContexts: ['viewports'],
@@ -4,6 +4,7 @@ import csTools from 'cornerstone-tools';
 import initCornerstoneTools from './initCornerstoneTools.js';
 import queryString from 'query-string';
 import { SimpleDialog } from '@ohif/ui';
+import merge from 'lodash.merge';

 function fallbackMetaDataProvider(type, imageId) {
  if (!imageId.includes('wado?requestType=WADO')) {
@@ -26,30 +27,33 @@ cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);

 /**
 *
- * @param {object} configuration
+ * @param {Object} servicesManager
+ * @param {Object} configuration
 * @param {Object|Array} configuration.csToolsConfig
 */
-export default function init({ servicesManager, configuration = {} }) {
-  const { UIDialogService } = servicesManager.services;
+export default function init({ servicesManager, configuration }) {
  const callInputDialog = (data, event, callback) => {
-    let dialogId = UIDialogService.create({
-      content: SimpleDialog.InputDialog,
-      defaultPosition: {
-        x: (event && event.currentPoints.canvas.x) || 0,
-        y: (event && event.currentPoints.canvas.y) || 0,
-      },
-      showOverlay: true,
-      contentProps: {
-        title: 'Enter your annotation',
-        label: 'New label',
-        measurementData: data ? { description: data.text } : {},
-        onClose: () => UIDialogService.dismiss({ id: dialogId }),
-        onSubmit: value => {
-          callback(value);
-          UIDialogService.dismiss({ id: dialogId });
+    const { UIDialogService } = servicesManager.services;
+
+    if (UIDialogService) {
+      let dialogId = UIDialogService.create({
+        centralize: true,
+        isDraggable: false,
+        content: SimpleDialog.InputDialog,
+        useLastPosition: false,
+        showOverlay: true,
+        contentProps: {
+          title: 'Enter your annotation',
+          label: 'New label',
+          measurementData: data ? { description: data.text } : {},
+          onClose: () => UIDialogService.dismiss({ id: dialogId }),
+          onSubmit: value => {
+            callback(value);
+            UIDialogService.dismiss({ id: dialogId });
+          },
        },
-      },
-    });
+      });
+    }
  };

  const { csToolsConfig } = configuration;
@@ -73,61 +77,55 @@ export default function init({ servicesManager, configuration = {} }) {
  initCornerstoneTools(defaultCsToolsConfig);

  // ~~ Toooools 🙌
-  const {
-    PanTool,
-    ZoomTool,
-    WwwcTool,
-    MagnifyTool,
-    StackScrollTool,
-    StackScrollMouseWheelTool,
-    // Touch
-    PanMultiTouchTool,
-    ZoomTouchPinchTool,
-    // Annotations
-    EraserTool,
-    BidirectionalTool,
-    LengthTool,
-    AngleTool,
-    FreehandRoiTool,
-    EllipticalRoiTool,
-    DragProbeTool,
-    RectangleRoiTool,
-    // Segmentation
-    BrushTool,
-  } = csTools;
  const tools = [
-    PanTool,
-    ZoomTool,
-    WwwcTool,
-    MagnifyTool,
-    StackScrollTool,
-    StackScrollMouseWheelTool,
+    csTools.PanTool,
+    csTools.ZoomTool,
+    csTools.WwwcTool,
+    csTools.MagnifyTool,
+    csTools.StackScrollTool,
+    csTools.StackScrollMouseWheelTool,
    // Touch
-    PanMultiTouchTool,
-    ZoomTouchPinchTool,
+    csTools.PanMultiTouchTool,
+    csTools.ZoomTouchPinchTool,
    // Annotations
-    EraserTool,
-    BidirectionalTool,
-    LengthTool,
-    AngleTool,
-    FreehandRoiTool,
-    EllipticalRoiTool,
-    DragProbeTool,
-    RectangleRoiTool,
+    csTools.ArrowAnnotateTool,
+    csTools.EraserTool,
+    csTools.BidirectionalTool,
+    csTools.LengthTool,
+    csTools.AngleTool,
+    csTools.FreehandRoiTool,
+    csTools.EllipticalRoiTool,
+    csTools.DragProbeTool,
+    csTools.RectangleRoiTool,
    // Segmentation
-    BrushTool,
+    csTools.BrushTool,
  ];

-  tools.forEach(tool => csTools.addTool(tool));
-
-  csTools.addTool(csTools.ArrowAnnotateTool, {
-    configuration: {
-      getTextCallback: (callback, eventDetails) =>
-        callInputDialog(null, eventDetails, callback),
-      changeTextCallback: (data, eventDetails, callback) =>
-        callInputDialog(data, eventDetails, callback),
+  /* Add extension tools configuration here. */
+  const extensionToolsConfiguration = {
+    ArrowAnnotate: {
+      configuration: {
+        getTextCallback: (callback, eventDetails) =>
+          callInputDialog(null, eventDetails, callback),
+        changeTextCallback: (data, eventDetails, callback) =>
+          callInputDialog(data, eventDetails, callback),
+      },
    },
-  });
+  };
+
+  const isEmpty = obj => Object.keys(obj).length < 1;
+  if (!isEmpty(configuration.tools) || !isEmpty(extensionToolsConfiguration)) {
+    /* Add tools with its custom props through extension configuration. */
+    tools.forEach(tool => {
+      const toolName = tool.name.replace('Tool', '');
+      const configurationToolProps = configuration.tools[toolName] || {};
+      const extensionToolProps = extensionToolsConfiguration[toolName];
+      let props = merge(extensionToolProps, configurationToolProps);
+      csTools.addTool(tool, props);
+    });
+  } else {
+    tools.forEach(tool => csTools.addTool(tool));
+  }

  csTools.setToolActive('Pan', { mouseButtonMask: 4 });
  csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
@@ -358,10 +358,13 @@ class OHIFVTKViewport extends Component {
    // TODO: Does it make more sense to use Context?
    if (this.props.children && this.props.children.length) {
      childrenWithProps = this.props.children.map((child, index) => {
-        return React.cloneElement(child, {
-          viewportIndex: this.props.viewportIndex,
-          key: index,
-        });
+        return (
+          child &&
+          React.cloneElement(child, {
+            viewportIndex: this.props.viewportIndex,
+            key: index,
+          })
+        );
      });
    }