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

fix: backward compatibility with toolbar service (#5052)

Browse Source
This commit is contained in:
Alireza authored and GitHub committed 2025-05-16 13:42:35 -04:00
1 parent c6b28654b5
commit 9b1b501d83
27 files changed
+198 -144
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/app/cypress/integration/ImageConsistency.spec.js
+1 -1
View File
@@ -56,7 +56,7 @@ describe('CS3D Image Consistency and Quality', () => {
'2.16.124.113543.6004.101.103.20021117.061159.1.004'
);
cy.wait(2000);
cy.wait(3000);
testPixel(1018, 1028, 255);
// Horizontal and vertical delta from this should not be contaminated
// by values from center
platform/cli/templates/mode/src/index.tsx
+4 -4
View File
@@ -50,7 +50,7 @@ function modeFactory({ modeConfiguration }) {
toolbarService.register([...toolbarButtons, ...moreTools]);
toolbarService.updateSection('primary', [
'measurementSection',
'MeasurementTools',
'Zoom',
'Pan',
'TrackballRotate',
@@ -58,10 +58,10 @@ function modeFactory({ modeConfiguration }) {
'Capture',
'Layout',
'Crosshairs',
'moreToolsSection',
'MoreTools',
]);
toolbarService.updateSection('measurementSection', [
toolbarService.updateSection('MeasurementTools', [
'Length',
'Bidirectional',
'ArrowAnnotate',
@@ -73,7 +73,7 @@ function modeFactory({ modeConfiguration }) {
'LivewireContour',
]);
toolbarService.updateSection('moreToolsSection', [
toolbarService.updateSection('MoreTools', [
'Reset',
'rotate-right',
'flipHorizontal',
platform/core/src/services/ToolBarService/ToolbarService.ts
+35 -14
View File
@@ -37,20 +37,10 @@ export const TOOLBAR_SECTIONS = {
rightMiddle: 'viewportActionMenu.rightMiddle',
},
/**
* Measurement tools section
*/
measurementSection: 'measurementSection',
/**
* More tools section
*/
moreToolsSection: 'moreToolsSection',
/**
* Advanced rendering controls section
*/
advancedRenderingControlsSection: 'advancedRenderingControlsSection',
// mode specific
segmentationToolbox: 'segmentationToolbox',
dynamicToolbox: 'dynamic-toolbox',
roiThresholdToolbox: 'ROIThresholdToolbox',
};
export enum ButtonLocation {
@@ -199,6 +189,11 @@ export default class ToolbarService extends PubSubService {
button.props = {} as ButtonProps;
}
// if button section is true as boolean, we assign the id of the button to the buttonSection
if (button.props.buttonSection === true) {
button.props.buttonSection = button.id;
}
this.state.buttons[button.id] = button;
}
});
@@ -410,6 +405,19 @@ export default class ToolbarService extends PubSubService {
return this.state.buttons[id];
}
/**
* @deprecated Use register() instead. This method will be removed in a future version.
* Adds buttons to the toolbar.
* @param buttons - The buttons to be added.
* @param replace - Flag indicating if any existing button with the same id as one being added should be replaced
*/
public addButtons(buttons: Button[], replace: boolean = false): void {
console.warn(
'ToolbarService.addButtons() is deprecated. Use ToolbarService.register() instead.'
);
this.register(buttons, replace);
}
/**
* Retrieves the buttons from the toolbar service.
* @returns An array of buttons.
@@ -470,6 +478,19 @@ export default class ToolbarService extends PubSubService {
this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, { ...this.state });
}
/**
* @deprecated Use updateSection() instead. This method will be removed in a future version.
* Creates a button section with the specified key and buttons.
* @param {string} key - The key of the button section.
* @param {Array} buttons - The buttons to be added to the section.
*/
createButtonSection(key, buttons) {
console.warn(
'ToolbarService.createButtonSection() is deprecated. Use ToolbarService.updateSection() instead.'
);
this.updateSection(key, buttons);
}
/**
* Retrieves the button section with the specified sectionId.
*
platform/core/src/services/ToolBarService/types.ts
+1 -3
View File
@@ -13,8 +13,6 @@ export type ToolbarSections = {
bottomLeft: string;
bottomRight: string;
};
measurementSection: string;
moreToolsSection: string;
};
export type EvaluatePublic =
@@ -59,7 +57,7 @@ export type ButtonProps = {
evaluate?: EvaluatePublic;
listeners?: Record<string, RunCommand>;
options?: ButtonOptions[];
buttonSection?: string;
buttonSection?: string | boolean;
};
export type Button = {
platform/core/src/services/WorkflowStepsService/WorkflowStepsService.ts
+1 -1
View File
@@ -27,7 +27,7 @@ export const EVENTS = {
sections: [
{
key: 'primary',
buttons: [ 'measurementSection', 'Zoom', ... ],
buttons: [ 'MeasurementTools', 'Zoom', ... ],
},
],
},
platform/docs/docs/migration-guide/3p10-to-3p11/toolbarService.md
+52 -27
View File
@@ -31,6 +31,7 @@ summary: Migration guide for OHIF 3.11's toolbar service changes, including the
**Migration Steps:**
1. **Update `ToolbarService` Method Calls:**
* Although the previous method also works but gives warning in the console when used.
* Replace all instances of `toolbarService.addButtons(...)` with `toolbarService.register(...)`.
* Replace all instances of `toolbarService.createButtonSection(...)` with `toolbarService.updateSection(...)`.
@@ -96,36 +97,60 @@ summary: Migration guide for OHIF 3.11's toolbar service changes, including the
```
3. **Adapt Toolbar Button and Component Configurations:**
* For `ohif.toolButtonList` or `ohif.toolBoxButtonGroup` (and their wrappers), the `groupId` prop is no longer the primary way to define the set of buttons. Instead, ensure the `buttonSection` prop correctly points to the section name containing the desired buttons. The `id` prop on these wrapper components should be unique for the component instance.
```diff
// Before
- {
- id: 'MeasurementTools',
- uiType: 'ohif.toolButtonList',
- props: {
- buttonSection: 'measurementSection',
- groupId: 'MeasurementTools', // groupId often matched buttonSection
- },
- },
The configuration of toolbar buttons, especially how they relate to sections
// After
+ {
+ id: 'MeasurementTools', // This is the ID of the ToolButtonList/ToolBox component itself
+ uiType: 'ohif.toolButtonList',
+ props: {
+ // This section contains the actual tool buttons (e.g., Length, Bidirectional)
+ buttonSection: 'measurementSection',
+ },
+ },
```
* Update wrappers like `ToolBoxButtonGroupWrapper` and `ToolButtonListWrapper`:
* The `groupId` prop is replaced by `id` (which is the ID of the wrapper button itself).
* The `onInteraction` callback in these wrappers now provides `id` (the wrapper's ID) instead of `groupId`.
* If you have custom `evaluate` functions, you can now use `evaluateProps: { hideWhenDisabled: true }` in your button definition to automatically hide the button if it evaluates to disabled.
* **Button Section Association via `props.buttonSection`:**
The toolbar service now offers two ways to define this association:
* **A. Simple Approach: `buttonSection: true` (Implicitly Uses Button's Own ID)**
If a button definition includes `props: { buttonSection: true }`, the `ToolbarService` automatically sets the effective `buttonSection` ID to be the same as the button's own `id`.
```javascript
// Example: A ToolButtonList component's definition in toolbarButtons.ts
// {
// id: 'MeasurementTools', // ID of this ToolButtonList component
// uiType: 'ohif.toolButtonList',
// props: {
// buttonSection: true // This ToolButtonList will render the section named 'MeasurementTools'
// }
// }
```
later you can use it like
5. **Adopt `IconPresentationProvider` (Optional but Recommended):**
```javascript
toolbarService.updateSection('MeasurementTools', ['Length', 'Bidirectional', ...]);
```
* **B. Flexible Approach: `buttonSection: 'customSectionName'` (Explicit Section ID)**
You can explicitly provide a string for `props.buttonSection` if the button should be associated with a section ID that is different from its own `id`, or if you prefer explicit naming.
```javascript
// Example: A ToolButtonList component's definition
// {
// id: 'MySpecialToolList', // ID of this ToolButtonList component
// uiType: 'ohif.toolButtonList',
// props: {
// buttonSection: 'toolsForAdvancedUsers', // This list renders 'toolsForAdvancedUsers' section
// }
// }
```
* **`evaluate` Function Enhancement:**
* Button `evaluate` functions can now leverage `evaluateProps: { hideWhenDisabled: true }` in your button definition to automatically hide a button when it's disabled.
* **Wrapper Component `onInteraction` (e.g., `ToolButtonListWrapper`):**
* Update wrappers like `ToolBoxButtonGroupWrapper` and `ToolButtonListWrapper`:
* The `groupId` prop is replaced by `id` (which is the ID of the wrapper button component itself).
* The `onInteraction` callback in these wrappers now provides `id` (the wrapper's ID) instead of `groupId`.
4. **Adopt `IconPresentationProvider` (Optional but Recommended):**
* For consistent icon styling across your application's toolbars, wrap a high-level component (like your main `Header` or layout component) with `<IconPresentationProvider size="yourDefaultSize">`.
* Custom tool button components can then use the `useIconPresentation` hook to get appropriate class names for icons or a pre-styled `IconContainer`.
@@ -149,5 +174,5 @@ summary: Migration guide for OHIF 3.11's toolbar service changes, including the
+ }
```
6. **Remove Legacy Component Usage:**
5. **Remove Legacy Component Usage:**
* Replace any usage of `ToolbarSplitButtonWithServicesLegacy` and `ToolbarButtonGroupWithServicesLegacy` with the newer patterns, typically by configuring individual buttons and using `ToolButtonList` or `ButtonGroup` from `@ohif/ui-next` directly, driven by `useToolbar`.