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.

platform/ui/src/components/simpleDialog/SimpleDialog.styl

@@ -6,9 +6,7 @@
     position: relative
 
 .simpleDialog
-  position: fixed;
-  top: 0px;
-  left: 0px;
+  position: relative;
   z-index: 1000;
   border: 0;
   border-radius: 6px;

platform/ui/src/contextProviders/ContextMenuProvider.js

@@ -0,0 +1,147 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import { useDialog } from '@ohif/ui';
+import { useLabellingFlow } from '@ohif/ui';
+
+const ContextMenuContext = createContext(null);
+const { Provider } = ContextMenuContext;
+
+export const useContextMenu = () => useContext(ContextMenuContext);
+
+const ContextMenuProvider = ({
+  children,
+  service,
+  contextMenuComponent: ContextMenuComponent,
+  onDelete,
+}) => {
+  const { create, dismiss } = useDialog();
+  const { show: showLabellingFlow } = useLabellingFlow();
+
+  /**
+   * Sets the implementation of a context menu service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({
+        show,
+        hide,
+      });
+    }
+  }, [hide, service, show]);
+
+  const hide = useCallback(() => dismiss({ id: 'context-menu' }), [dismiss]);
+
+  /**
+   * Show the context menu and override its configuration props.
+   *
+   * @param {ContextMenuProps} props { eventData, isTouchEvent, onClose, visible }
+   * @returns void
+   */
+  const show = useCallback(
+    ({ event }) => {
+      hide();
+      create({
+        id: 'context-menu',
+        isDraggable: false,
+        preservePosition: false,
+        content: ContextMenuComponent,
+        contentProps: {
+          eventData: event,
+          onDelete: (nearbyToolData, eventData) =>
+            onDelete(nearbyToolData, eventData),
+          onClose: () => dismiss({ id: 'context-menu' }),
+          onSetLabel: (eventData, measurementData) =>
+            showLabellingFlow({
+              event: eventData,
+              centralize: true,
+              props: {
+                measurementData,
+                skipAddLabelButton: true,
+                editLocation: true,
+              },
+            }),
+          onSetDescription: (eventData, measurementData) =>
+            showLabellingFlow({
+              event: eventData,
+              centralize: false,
+              defaultPosition: _getDefaultPosition(eventData),
+              props: {
+                measurementData,
+                editDescriptionOnDialog: true,
+              },
+            }),
+        },
+        defaultPosition: _getDefaultPosition(event),
+      });
+    },
+    [ContextMenuComponent, create, dismiss, hide, onDelete, showLabellingFlow]
+  );
+
+  const _getDefaultPosition = event => ({
+    x: (event && event.currentPoints.client.x) || 0,
+    y: (event && event.currentPoints.client.y) || 0,
+  });
+
+  return (
+    <Provider
+      value={{
+        show,
+        hide,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+};
+
+/**
+ * Higher Order Component to use the context menu methods through a Class Component.
+ *
+ * @returns
+ */
+export const withContextMenu = Component => {
+  return function WrappedComponent(props) {
+    const { show, hide } = useContextMenu();
+    return (
+      <Component
+        {...props}
+        modal={{
+          show,
+          hide,
+        }}
+      />
+    );
+  };
+};
+
+ContextMenuProvider.defaultProps = {
+  service: null,
+};
+
+ContextMenuProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  service: PropTypes.shape({
+    setServiceImplementation: PropTypes.func,
+  }),
+  contextMenuComponent: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]).isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default ContextMenuProvider;
+
+export const ContextMenuConsumer = ContextMenuContext.Consumer;

platform/ui/src/contextProviders/DialogProvider.js

@@ -20,7 +20,30 @@ export const useDialog = () => useContext(DialogContext);
 const DialogProvider = ({ children, service }) => {
   const [isDragging, setIsDragging] = useState(false);
   const [dialogs, setDialogs] = useState([]);
+  const [lastDialogId, setLastDialogId] = useState(null);
   const [lastDialogPosition, setLastDialogPosition] = useState(null);
+  const [centerPositions, setCenterPositions] = useState([]);
+
+  useEffect(() => {
+    setCenterPositions(
+      dialogs.map(dialog => ({
+        id: dialog.id,
+        ...getCenterPosition(dialog.id),
+      }))
+    );
+  }, [dialogs]);
+
+  const getCenterPosition = id => {
+    const root = document.querySelector('#root');
+    const centerX = root.offsetLeft + root.offsetWidth / 2;
+    const centerY = root.offsetTop + root.offsetHeight / 2;
+    const item = document.querySelector(`#draggableItem-${id}`);
+    const itemBounds = item.getBoundingClientRect();
+    return {
+      x: centerX - itemBounds.width / 2,
+      y: centerY - itemBounds.height / 2,
+    };
+  };
 
   /**
    * Sets the implementation of a dialog service that can be used by extensions.
@@ -42,13 +65,16 @@ const DialogProvider = ({ children, service }) => {
    * @property {Object} contentProps The dialog content props.
    * @property {boolean} isDraggable Controls if dialog content is draggable or not.
    * @property {boolean} showOverlay Controls dialog overlay.
+   * @property {boolean} centralize Center the dialog on the screen.
+   * @property {boolean} preservePosition Use last position instead of default.
    * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
-   * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
    * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
    * @property {Function} onStop Called when dragging stops.
    * @property {Function} onDrag Called while dragging.
    */
 
+  useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]);
+
   /**
    * Creates a new dialog and return its id.
    *
@@ -64,6 +90,7 @@ const DialogProvider = ({ children, service }) => {
     }
 
     setDialogs(dialogs => [...dialogs, { ...props, id: dialogId }]);
+    setLastDialogId(dialogId);
 
     return dialogId;
   }, []);
@@ -75,9 +102,11 @@ const DialogProvider = ({ children, service }) => {
    * @property {string} props.id The dialog id.
    * @returns void
    */
-  const dismiss = useCallback(({ id }) => {
-    setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id));
-  }, []);
+  const dismiss = useCallback(
+    ({ id }) =>
+      setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id)),
+    []
+  );
 
   /**
    * Dismisses all dialogs.
@@ -101,14 +130,14 @@ const DialogProvider = ({ children, service }) => {
    * @param {string} id The dialog id.
    * @returns void
    */
-  const _bringToFront = id => {
+  const _bringToFront = useCallback(id => {
     setDialogs(dialogs => {
       const topDialog = dialogs.find(dialog => dialog.id === id);
       return topDialog
         ? [...dialogs.filter(dialog => dialog.id !== id), topDialog]
-        : [];
+        : dialogs;
     });
-  };
+  }, []);
 
   const renderDialogs = () =>
     dialogs.map(dialog => {
@@ -116,20 +145,27 @@ const DialogProvider = ({ children, service }) => {
         id,
         content: DialogContent,
         contentProps,
-        position,
         defaultPosition,
+        centralize = false,
+        preservePosition = true,
         isDraggable = true,
         onStart,
         onStop,
         onDrag,
       } = dialog;
 
+      let position =
+        (preservePosition && lastDialogPosition) || defaultPosition;
+      if (centralize) {
+        position = centerPositions.find(position => position.id === id);
+      }
+
       return (
         <Draggable
           key={id}
           disabled={!isDraggable}
           position={position}
-          defaultPosition={lastDialogPosition || defaultPosition}
+          defaultPosition={position}
           bounds="parent"
           onStart={event => {
             const e = event || window.event;
@@ -169,7 +205,11 @@ const DialogProvider = ({ children, service }) => {
         >
           <div
             id={`draggableItem-${id}`}
-            className={classNames('DraggableItem', isDragging && 'dragging')}
+            className={classNames(
+              'DraggableItem',
+              isDragging && 'dragging',
+              isDraggable && 'draggable'
+            )}
             style={{ zIndex: '999', position: 'absolute' }}
             onClick={() => _bringToFront(id)}
           >

platform/ui/src/contextProviders/DialogProvider.styl

@@ -1,8 +1,8 @@
-.DraggableItem
+.DraggableItem.draggable
   div
     cursor: grab !important
 
-.DraggableItem.dragging
+.DraggableItem.draggable.dragging
   div
     cursor: grabbing !important
 

platform/ui/src/contextProviders/LabellingFlowProvider.js

@@ -0,0 +1,136 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import { useDialog } from './DialogProvider';
+
+const LabellingFlowContext = createContext(null);
+const { Provider } = LabellingFlowContext;
+
+export const useLabellingFlow = () => useContext(LabellingFlowContext);
+
+const LabellingFlowProvider = ({
+  children,
+  service,
+  labellingComponent: LabellingComponent,
+  onUpdateLabelling,
+}) => {
+  const { create, dismiss } = useDialog();
+
+  /**
+   * Sets the implementation of a labelling flow service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({
+        show,
+        hide,
+      });
+    }
+  }, [hide, service, show]);
+
+  const hide = useCallback(() => dismiss({ id: 'labelling' }), [dismiss]);
+
+  const show = useCallback(
+    ({ centralize, defaultPosition, props }) => {
+      hide();
+      create({
+        id: 'labelling',
+        centralize,
+        isDraggable: false,
+        showOverlay: true,
+        content: LabellingComponent,
+        defaultPosition,
+        contentProps: {
+          visible: true,
+          measurementData: props.measurementData,
+          labellingDoneCallback: () => dismiss({ id: 'labelling' }),
+          updateLabelling: labellingData =>
+            _updateLabellingHandler(labellingData, props.measurementData),
+          ...props,
+        },
+      });
+    },
+    [LabellingComponent, _updateLabellingHandler, create, dismiss, hide]
+  );
+
+  const _updateLabellingHandler = useCallback(
+    (labellingData, measurementData) => {
+      const { location, description, response } = labellingData;
+
+      if (location) {
+        measurementData.location = location;
+      }
+
+      measurementData.description = description || '';
+
+      if (response) {
+        measurementData.response = response;
+      }
+
+      onUpdateLabelling(labellingData, measurementData);
+    },
+    [onUpdateLabelling]
+  );
+
+  return (
+    <Provider
+      value={{
+        show,
+        hide,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+};
+
+/**
+ * Higher Order Component to use the labelling flow methods through a Class Component.
+ *
+ * @returns
+ */
+export const withLabellingFlow = Component => {
+  return function WrappedComponent(props) {
+    const { show, hide } = useLabellingFlow();
+    return (
+      <Component
+        {...props}
+        modal={{
+          show,
+          hide,
+        }}
+      />
+    );
+  };
+};
+
+LabellingFlowProvider.defaultProps = {
+  service: null,
+};
+
+LabellingFlowProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  service: PropTypes.shape({
+    setServiceImplementation: PropTypes.func,
+  }),
+  labellingComponent: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]).isRequired,
+  onUpdateLabelling: PropTypes.func.isRequired,
+};
+
+export default LabellingFlowProvider;
+
+export const LabellingFlowConsumer = LabellingFlowContext.Consumer;

platform/ui/src/contextProviders/index.js

@@ -18,3 +18,15 @@ export {
   withDialog,
   useDialog,
 } from './DialogProvider.js';
+export {
+  default as ContextMenuProvider,
+  withContextMenu,
+  useContextMenu,
+  ContextMenuConsumer,
+} from './ContextMenuProvider.js';
+export {
+  default as LabellingFlowProvider,
+  withLabellingFlow,
+  useLabellingFlow,
+  LabellingFlowConsumer,
+} from './LabellingFlowProvider.js';

platform/ui/src/index.js

@@ -60,6 +60,14 @@ import {
   ModalConsumer,
   useModal,
   withModal,
+  ContextMenuProvider,
+  ContextMenuConsumer,
+  useContextMenu,
+  withContextMenu,
+  LabellingFlowProvider,
+  LabellingFlowConsumer,
+  useLabellingFlow,
+  withLabellingFlow,
 } from './contextProviders';
 
 export {
@@ -117,6 +125,14 @@ export {
   DialogProvider,
   withDialog,
   useDialog,
+  ContextMenuProvider,
+  ContextMenuConsumer,
+  useContextMenu,
+  withContextMenu,
+  LabellingFlowProvider,
+  LabellingFlowConsumer,
+  useLabellingFlow,
+  withLabellingFlow,
   // Hooks
   useDebounce,
   useMedia,