fix(contextMenu): fixes for context menu icon (#3275)

extensions/cornerstone/package.json

@@ -29,7 +29,7 @@
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
     "@ohif/ui": "^2.0.0",
-    "cornerstone-wado-image-loader": "^4.2.1",
+    "cornerstone-wado-image-loader": "^4.10.2",
     "dcmjs": "^0.29.4",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",

extensions/default/src/CustomizeableContextMenu/ContextMenuItemsBuilder.ts

@@ -111,7 +111,7 @@ export function findMenu(
  * @returns
  */
 export function getMenuItems(
-  selectorProps: Types.IProps,
+  selectorProps: SelectorProps,
   event: Event,
   menus: Menu[],
   menuIdFilter?: string
@@ -171,7 +171,7 @@ export function adaptItem(
   };
 
   if (item.actionType === 'ShowSubMenu' && !newItem.iconRight) {
-    newItem.iconRight = 'chevron-right';
+    newItem.iconRight = 'chevron-menu';
   }
   if (!item.action) {
     newItem.action = (itemRef, componentProps) => {

extensions/default/src/CustomizeableContextMenu/types.ts

@@ -1,13 +1,12 @@
 import { Types } from '@ohif/core';
 
 /**
- * SelectorProps are properties used to decide whether to select a manu or
+ * SelectorProps are properties used to decide whether to select a menu or
  * menu item for display.
  * An instance of SelectorProps is provided to the selector functions, which
  * return true to include the item or false to exclude it.
  * The point of this is to allow more specific conext menus which hide
  * non-relevant menu options, optimizing the speed of selection of menus
- * (See Bill Wallace's masters thesis for selection time versus complexity of user menus).
  */
 export interface SelectorProps {
   // If the context menu is invoked in the context of a measurement, then it
@@ -17,7 +16,7 @@ export interface SelectorProps {
   // The tool name for the nearby tool
   toolName?: string;
 
-  // An annotation UID - this will be present if nearyToolData is present.
+  // An annotation UID - this will be present if nearbyToolData is present.
   uid?: string;
 
   // If the context menu is invoked on an active viewport, then it will contain
@@ -112,12 +111,15 @@ export type Point = {
  */
 export type ContextMenuProps = {
   event?: EventTarget;
-  subMenu?: string;
+  menuCustomizationId?: string;
   menuId: string;
+  element?: HTMLElement;
 
   /** A set of menus to choose from for this context menu */
   menus: Menu[];
 
   /** The properties used to decide the menu type */
   selectorProps: SelectorProps;
+
+  defaultPointsPosition?: [number, number] | [];
 };

extensions/default/src/commandsModule.ts

@@ -10,6 +10,8 @@ import findViewportsByPosition, {
   findOrCreateViewport as layoutFindOrCreate,
 } from './findViewportsByPosition';
 
+import { ContextMenuProps } from './CustomizeableContextMenu/types';
+
 export type HangingProtocolParams = {
   protocolId?: string;
   stageIndex?: number;
@@ -57,7 +59,7 @@ const commandsModule = ({
      * @param options.event is the event that caused the context menu
      * @param options.selectorProps is the set of selection properties to use
      */
-    showContextMenu: options => {
+    showContextMenu: (options: ContextMenuProps) => {
       const {
         menuCustomizationId,
         element,

extensions/default/src/getCustomizationModule.tsx

@@ -113,11 +113,14 @@ export default function getCustomizationModule() {
         {
           id: 'ohif.contextMenu',
 
-          /** Applies the customizationType to all the menu items */
+          /** Applies the customizationType to all the menu items.
+           * This function clones the object and child objects to prevent
+           * changes to the original customization object.
+           */
           transform: function (customizationService: CustomizationService) {
             // Don't modify the children, as those are copied by reference
             const clonedObject = { ...this };
-            clonedObject.menus = this.menus.map(it => ({ ...it }));
+            clonedObject.menus = this.menus.map(menu => ({ ...menu }));
 
             for (const menu of clonedObject.menus) {
               const { items: originalItems } = menu;

extensions/test-extension/src/custom-context-menu/contextMenuCodeItem.ts

@@ -1,8 +1,5 @@
-import codingValues from './codingValues';
-
 const codeMenuItem = {
   id: '@ohif/contextMenuAnnotationCode',
-  codingValues,
 
   /** Applies the code value setup for this item */
   transform: function (customizationService) {

extensions/test-extension/src/custom-context-menu/findingsContextMenu.ts

@@ -52,7 +52,6 @@ const findingsContextMenu = {
 
     {
       id: 'orientationSelectionSubMenu',
-      selector: ({ nearbyToolData }) => !!nearbyToolData,
       items: [
         {
           customizationType: '@ohif/contextMenuAnnotationCode',

platform/core/package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "cornerstone-math": "0.1.9",
-    "cornerstone-wado-image-loader": "^4.2.1",
+    "cornerstone-wado-image-loader": "^4.10.2",
     "dicom-parser": "^1.8.9",
     "@ohif/ui": "^2.0.0"
   },

platform/docs/docs/platform/services/ui/customization-service.md

@@ -496,7 +496,7 @@ The behaviour on clicking on the cornerstone viewport can be customized
 by setting the `cornerstoneViewportClickCommands`.  This is intended to
 support both the cornerstone 3D internal commands as well as things like
 context menus.  Currently it supports buttons 1-3, as well as modifier keys
-by associated a commands list with the button to click.  See `initContextMenu`
+by associating a commands list with the button to click.  See `initContextMenu`
 for more details.
 
 ## Please add additional customizations above this section

platform/ui/src/assets/icons/chevron-menu.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="13px" viewBox="0 0 8 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>chevron-menu</title>
+    <g id="Form-fields" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard" transform="translate(-454.000000, -76.000000)" stroke="#348CFD" stroke-width="1.25">
+            <g id="chevron-menu" transform="translate(455.000000, 77.000000)">
+                <line x1="0.5" y1="0.5" x2="5.5" y2="5.5" id="Line"></line>
+                <line x1="0.5" y1="5.5" x2="5.5" y2="10.5" id="Line" transform="translate(3.000000, 8.000000) scale(1, -1) translate(-3.000000, -8.000000) "></line>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/src/components/ContextMenu/ContextMenu.tsx

@@ -19,14 +19,11 @@ const ContextMenu = ({ items, ...props }) => {
           key={index}
           data-cy="context-menu-item"
           onClick={() => item.action(item, props)}
+          style={{ justifyContent: 'space-between' }}
           className="flex px-4 py-3 cursor-pointer items-center transition duration-300 hover:bg-primary-dark border-b border-primary-dark last:border-b-0"
         >
-          <Typography>
+          <Typography>{item.label}</Typography>
-            {item.label}
+          {item.iconRight && <Icon name={item.iconRight} className="inline" />}
-            {item.iconRight && (
-              <Icon name={item.iconRight} className="inline" />
-            )}
-          </Typography>
         </div>
       ))}
     </div>

platform/ui/src/components/Icon/getIcon.js

@@ -13,6 +13,7 @@ import dottedCircle from './../../assets/icons/dotted-circle.svg';
 import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';
 import chevronLeft from './../../assets/icons/chevron-left.svg';
+import chevronMenu from './../../assets/icons/chevron-menu.svg';
 import chevronNext from './../../assets/icons/chevron-next.svg';
 import chevronPrev from './../../assets/icons/chevron-prev.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
@@ -130,6 +131,7 @@ const ICONS = {
   'circled-checkmark': circledCheckmark,
   'chevron-down': chevronDown,
   'chevron-left': chevronLeft,
+  'chevron-menu': chevronMenu,
   'chevron-next': chevronNext,
   'chevron-prev': chevronPrev,
   'chevron-right': chevronRight,

platform/ui/src/types/ContextMenuItem.ts

@@ -3,5 +3,7 @@ export type ContextMenuItem = {
   label: string;
   // An icon to show the on right of the text - typically used for submenus
   iconRight?: string;
-  action: (item, component) => void;
+  // item is the menu item (eg the instance of this that is clicked on)
+  // props is the remaining properties passed to the context menu
+  action: (item, props) => void;
 };

platform/viewer/package.json

@@ -65,7 +65,7 @@
     "config-point": "^0.4.8",
     "core-js": "^3.16.1",
     "cornerstone-math": "^0.1.9",
-    "cornerstone-wado-image-loader": "^4.2.1",
+    "cornerstone-wado-image-loader": "^4.10.2",
     "dcmjs": "^0.29.4",
     "detect-gpu": "^4.0.16",
     "dicom-parser": "^1.8.9",

yarn.lock

@@ -8535,10 +8535,10 @@ cornerstone-wado-image-loader@^4.10.0:
     pako "^2.0.4"
     uuid "^9.0.0"
 
-cornerstone-wado-image-loader@^4.2.1:
+cornerstone-wado-image-loader@^4.10.2:
-  version "4.9.1"
+  version "4.10.2"
-  resolved "https://registry.npmjs.org/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.9.1.tgz#442eeca78ff0bcf9f9cbde04e8c429f35b31c55a"
+  resolved "https://registry.yarnpkg.com/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.10.2.tgz#139956654324fd2b01fe5b4900d0f4ed8c52633d"
-  integrity sha512-l0HRxGAupfufnHjT9uFpwAtafvuGMKKB9SCL8dHUwCK+7jwNeVigy8s6+Oki2nycaJUzy2TRQaauO78mIf3grg==
+  integrity sha512-qj9dThELqYCm3jAZfg9qnUl8d76gngOl55kYJabY5lh/dFeVIxno/hYxy3ydE7RtG2c/TUGXb+EMUl0CJSqKBQ==
   dependencies:
     "@babel/eslint-parser" "^7.19.1"
     "@cornerstonejs/codec-charls" "^1.2.3"