diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json index 0a6802edf..832776a33 100644 --- a/extensions/cornerstone/package.json +++ b/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", diff --git a/extensions/default/src/CustomizeableContextMenu/ContextMenuItemsBuilder.ts b/extensions/default/src/CustomizeableContextMenu/ContextMenuItemsBuilder.ts index ad5bc7380..2fe20e8d9 100644 --- a/extensions/default/src/CustomizeableContextMenu/ContextMenuItemsBuilder.ts +++ b/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) => { diff --git a/extensions/default/src/CustomizeableContextMenu/types.ts b/extensions/default/src/CustomizeableContextMenu/types.ts index d0ffb4787..23075d057 100644 --- a/extensions/default/src/CustomizeableContextMenu/types.ts +++ b/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] | []; }; diff --git a/extensions/default/src/commandsModule.ts b/extensions/default/src/commandsModule.ts index 524db2812..e44651101 100644 --- a/extensions/default/src/commandsModule.ts +++ b/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, diff --git a/extensions/default/src/getCustomizationModule.tsx b/extensions/default/src/getCustomizationModule.tsx index babc47250..dee0b530f 100644 --- a/extensions/default/src/getCustomizationModule.tsx +++ b/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; diff --git a/extensions/test-extension/src/custom-context-menu/contextMenuCodeItem.ts b/extensions/test-extension/src/custom-context-menu/contextMenuCodeItem.ts index 4e054e4f1..aa13c27ee 100644 --- a/extensions/test-extension/src/custom-context-menu/contextMenuCodeItem.ts +++ b/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) { diff --git a/extensions/test-extension/src/custom-context-menu/findingsContextMenu.ts b/extensions/test-extension/src/custom-context-menu/findingsContextMenu.ts index ccfc0fb54..21dc5b621 100644 --- a/extensions/test-extension/src/custom-context-menu/findingsContextMenu.ts +++ b/extensions/test-extension/src/custom-context-menu/findingsContextMenu.ts @@ -52,7 +52,6 @@ const findingsContextMenu = { { id: 'orientationSelectionSubMenu', - selector: ({ nearbyToolData }) => !!nearbyToolData, items: [ { customizationType: '@ohif/contextMenuAnnotationCode', diff --git a/platform/core/package.json b/platform/core/package.json index f2b11412d..2ccc18696 100644 --- a/platform/core/package.json +++ b/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" }, diff --git a/platform/docs/docs/platform/services/ui/customization-service.md b/platform/docs/docs/platform/services/ui/customization-service.md index d1e81de60..b59bf10d9 100644 --- a/platform/docs/docs/platform/services/ui/customization-service.md +++ b/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 diff --git a/platform/ui/src/assets/icons/chevron-menu.svg b/platform/ui/src/assets/icons/chevron-menu.svg new file mode 100644 index 000000000..7e0d9054d --- /dev/null +++ b/platform/ui/src/assets/icons/chevron-menu.svg @@ -0,0 +1,12 @@ + + + chevron-menu + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/components/ContextMenu/ContextMenu.tsx b/platform/ui/src/components/ContextMenu/ContextMenu.tsx index d26df265f..b41d872c9 100644 --- a/platform/ui/src/components/ContextMenu/ContextMenu.tsx +++ b/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" > - - {item.label} - {item.iconRight && ( - - )} - + {item.label} + {item.iconRight && } ))} diff --git a/platform/ui/src/components/Icon/getIcon.js b/platform/ui/src/components/Icon/getIcon.js index b4ebdf562..e6c3b986a 100644 --- a/platform/ui/src/components/Icon/getIcon.js +++ b/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, diff --git a/platform/ui/src/types/ContextMenuItem.ts b/platform/ui/src/types/ContextMenuItem.ts index 0bf4f8b84..5e856b058 100644 --- a/platform/ui/src/types/ContextMenuItem.ts +++ b/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; }; diff --git a/platform/viewer/package.json b/platform/viewer/package.json index b7fe69b1e..bb15b5b1e 100644 --- a/platform/viewer/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index d72f1d1e9..0e7b213ac 100644 --- a/yarn.lock +++ b/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: - version "4.9.1" - resolved "https://registry.npmjs.org/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.9.1.tgz#442eeca78ff0bcf9f9cbde04e8c429f35b31c55a" - integrity sha512-l0HRxGAupfufnHjT9uFpwAtafvuGMKKB9SCL8dHUwCK+7jwNeVigy8s6+Oki2nycaJUzy2TRQaauO78mIf3grg== +cornerstone-wado-image-loader@^4.10.2: + version "4.10.2" + resolved "https://registry.yarnpkg.com/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.10.2.tgz#139956654324fd2b01fe5b4900d0f4ed8c52633d" + integrity sha512-qj9dThELqYCm3jAZfg9qnUl8d76gngOl55kYJabY5lh/dFeVIxno/hYxy3ydE7RtG2c/TUGXb+EMUl0CJSqKBQ== dependencies: "@babel/eslint-parser" "^7.19.1" "@cornerstonejs/codec-charls" "^1.2.3"