othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bill Wallace 2023-03-22 18:04:44 -04:00 committed by GitHub
parent bc642fd2b6
commit dd22e37e4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/cornerstone/package.json
View File

@ -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",

4
extensions/default/src/CustomizeableContextMenu/ContextMenuItemsBuilder.ts
View File

@ -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) => {

10
extensions/default/src/CustomizeableContextMenu/types.ts
View File

@ -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] | [];
};

4
extensions/default/src/commandsModule.ts
View File

@ -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,

7
extensions/default/src/getCustomizationModule.tsx
View File

@ -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;

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

@ -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) {

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

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

2
platform/core/package.json
View File

@ -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"
},

2
platform/docs/docs/platform/services/ui/customization-service.md
View File

@ -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

12
platform/ui/src/assets/icons/chevron-menu.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

9
platform/ui/src/components/ContextMenu/ContextMenu.tsx
View File

@ -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>
{item.label}
{item.iconRight && (
<Icon name={item.iconRight} className="inline" />
)}
</Typography>
<Typography>{item.label}</Typography>
{item.iconRight && <Icon name={item.iconRight} className="inline" />}
</div>
))}
</div>

2
platform/ui/src/components/Icon/getIcon.js
View File

@ -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,

4
platform/ui/src/types/ContextMenuItem.ts
View File

@ -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;
};

2
platform/viewer/package.json
View File

@ -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",

8
yarn.lock
View File

@ -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"