wip on react transition 4

Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/ToolContextMenu.js

@@ -0,0 +1,263 @@
+import { Component } from 'react';
+import React from 'react';
+/*import * as cornerstone from 'cornerstone-core';
+import * as cornerstoneTools from 'cornerstone-tools';*/
+import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
+import PropTypes from 'prop-types';
+import './ToolContextMenu.css';
+
+const toolTypes = ['Bidirectional'];
+
+let defaultDropdownItems = [
+  {
+    actionType: 'Delete',
+    action: ({ nearbyToolData, eventData }) => {
+      const element = eventData.element;
+
+      cornerstoneTools.removeToolState(
+        element,
+        nearbyToolData.toolType,
+        nearbyToolData.tool
+      );
+      cornerstone.updateImage(element);
+    }
+  },
+  {
+    actionType: 'bidirectionalLabel',
+    action: ({ nearbyToolData, eventData }) => {
+      const element = eventData.element;
+      const { tool, toolType } = nearbyToolData;
+
+      const doneCallback = () => {
+        cornerstone.updateImage(element);
+      };
+
+      const options = {
+        skipButton: true
+      };
+
+      const ToolInstance = cornerstoneTools.getToolForElement(
+        element,
+        toolType
+      );
+      ToolInstance.configuration.getMeasurementLocationCallback(
+        tool,
+        eventData,
+        doneCallback,
+        options
+      );
+    }
+  },
+  {
+    actionType: 'bidirectionalDescription',
+    action: ({ nearbyToolData, eventData }) => {
+      const element = eventData.element;
+      const { tool, toolType } = nearbyToolData;
+
+      const doneCallback = () => {
+        cornerstone.updateImage(element);
+      };
+
+      const options = {
+        skipButton: true,
+        editDescription: true
+      };
+
+      const ToolInstance = cornerstoneTools.getToolForElement(
+        element,
+        toolType
+      );
+      ToolInstance.configuration.getMeasurementLocationCallback(
+        tool,
+        eventData,
+        doneCallback,
+        options
+      );
+    }
+  }
+];
+
+function getNearbyToolData(element, coords, toolTypes) {
+  const nearbyTool = {};
+  let pointNearTool = false;
+
+  toolTypes.forEach(toolType => {
+    const toolData = cornerstoneTools.getToolState(element, toolType);
+    if (!toolData) {
+      return;
+    }
+
+    toolData.data.forEach(function(data, index) {
+      const toolInterface = cornerstoneTools[`${toolType}Tool`];
+
+      // TODO: vNext wants me to do this?
+      // Switch to cornerstoneTools.store.state.tools
+      const t = new toolInterface();
+
+      if (t.pointNearTool(element, data, coords)) {
+        pointNearTool = true;
+        nearbyTool.tool = data;
+        nearbyTool.index = index;
+        nearbyTool.toolType = toolType;
+      }
+    });
+
+    if (pointNearTool) {
+      return false;
+    }
+  });
+
+  return pointNearTool ? nearbyTool : undefined;
+}
+
+function getDropdownItems(eventData, isTouchEvent = false) {
+  const nearbyToolData = getNearbyToolData(
+    eventData.element,
+    eventData.currentPoints.canvas,
+    toolTypes
+  );
+
+  // Annotate tools for touch events already have a press handle to edit it, has a better UX for deleting it
+  if (
+    isTouchEvent &&
+    nearbyToolData &&
+    nearbyToolData.toolType === 'arrowAnnotate'
+  ) {
+    return;
+  }
+
+  let dropdownItems = [];
+  if (nearbyToolData) {
+    defaultDropdownItems.forEach(function(item) {
+      item.params = {
+        eventData,
+        nearbyToolData
+      };
+
+      if (item.actionType === 'Delete') {
+        item.text = 'Delete measurement';
+      }
+
+      if (item.actionType === 'bidirectionalLabel') {
+        if (nearbyToolData.toolType !== 'Bidirectional') {
+          return;
+        }
+        item.text = `${nearbyToolData.tool.location ? 'Edit' : 'Add'} Label`;
+      }
+
+      if (item.actionType === 'bidirectionalDescription') {
+        if (
+          nearbyToolData.toolType !== 'Bidirectional' ||
+          !nearbyToolData.tool.location
+        ) {
+          return;
+        }
+        item.text = `${
+          nearbyToolData.tool.description ? 'Edit' : 'Add'
+        } Description`;
+      }
+
+      dropdownItems.push(item);
+    });
+  }
+
+  return dropdownItems;
+}
+
+class ToolContextMenu extends Component {
+  constructor(props) {
+    super(props);
+
+    this.mainElement = React.createRef();
+  }
+
+  render() {
+    if (!this.props.toolContextMenuData) {
+      return '';
+    }
+
+    const { eventData, isTouchEvent } = this.props.toolContextMenuData;
+    const dropdownItems = getDropdownItems(eventData, isTouchEvent);
+
+    // Skip if there is no dropdown item
+    if (!dropdownItems.length) {
+      return '';
+    }
+
+    const dropdownComponents = dropdownItems.map(item => {
+      const itemOnClick = event => {
+        item.action(item.params);
+        this.props.onClose();
+      };
+
+      return (
+        <li key={item.actionType}>
+          <button className="form-action" onClick={itemOnClick}>
+            <span key={item.actionType}>{item.text}</span>
+          </button>
+        </li>
+      );
+    });
+
+    const position = {
+      top: `${eventData.currentPoints.canvas.y}px`,
+      left: `${eventData.currentPoints.canvas.x}px`
+    };
+
+    return (
+      <div
+        className="ToolContextMenu dropdown"
+        style={position}
+        ref={this.mainElement}
+      >
+        <ul className="dropdown-menu dropdown-menu-left bounded">
+          {dropdownComponents}
+        </ul>
+      </div>
+    );
+  }
+
+  componentDidMount = () => {
+    if (this.mainElement.current) {
+      this.updateElementPosition();
+    }
+  };
+
+  componentDidUpdate = () => {
+    if (this.mainElement.current) {
+      this.updateElementPosition();
+    }
+  };
+
+  updateElementPosition = () => {
+    const {
+      offsetParent,
+      offsetTop,
+      offsetHeight,
+      offsetWidth,
+      offsetLeft
+    } = this.mainElement.current;
+    const { eventData } = this.props.toolContextMenuData;
+    if (offsetTop + offsetHeight > offsetParent.offsetHeight) {
+      const offBoundPixels =
+        offsetTop + offsetHeight - offsetParent.offsetHeight;
+      const top = eventData.currentPoints.canvas.y - offBoundPixels;
+
+      this.mainElement.current.style.top = `${top > 0 ? top : 0}px`;
+    }
+    if (offsetLeft + offsetWidth > offsetParent.offsetWidth) {
+      const offBoundPixels =
+        offsetLeft + offsetWidth - offsetParent.offsetWidth;
+      const left = eventData.currentPoints.canvas.x - offBoundPixels;
+
+      this.mainElement.current.style.left = `${left > 0 ? left : 0}px`;
+    }
+  };
+}
+
+ToolContextMenu.propTypes = {
+  toolContextMenuData: PropTypes.object, // or null
+  onClose: PropTypes.func.isRequired
+};
+
+export default ToolContextMenu;