fix(toolbox): Preserve user-specified tool state and streamline command execution (#4063)
This commit is contained in:
Alireza authored and GitHub committed
1 parent
4784638717
commit
f1a736d193
34 files changed
+332
-181
No files matched your search
@@ -54,7 +54,7 @@
|
||||
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
|
||||
"@cornerstonejs/codec-openjpeg": "^1.2.2",
|
||||
"@cornerstonejs/codec-openjph": "^2.4.5",
|
||||
"@cornerstonejs/dicom-image-loader": "^1.70.13",
|
||||
"@cornerstonejs/dicom-image-loader": "^1.70.14",
|
||||
"@emotion/serialize": "^1.1.3",
|
||||
"@ohif/core": "3.8.0-beta.92",
|
||||
"@ohif/extension-cornerstone": "3.8.0-beta.92",
|
||||
|
||||
@@ -125,11 +125,12 @@ function Local({ modePath }: LocalProps) {
|
||||
>
|
||||
<div className="flex h-screen w-screen items-center justify-center ">
|
||||
<div className="bg-secondary-dark mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md">
|
||||
<img
|
||||
className="mx-auto block h-14"
|
||||
src="./ohif-logo.svg"
|
||||
alt="OHIF"
|
||||
/>
|
||||
<div className="flex items-center justify-center">
|
||||
<Icon
|
||||
name="logo-dark-background"
|
||||
className="h-28"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 pt-4 text-center">
|
||||
{dropInitiated ? (
|
||||
<div className="flex flex-col items-center justify-center pt-48">
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
|
||||
"@cornerstonejs/codec-openjpeg": "^1.2.2",
|
||||
"@cornerstonejs/codec-openjph": "^2.4.2",
|
||||
"@cornerstonejs/dicom-image-loader": "^1.70.13",
|
||||
"@cornerstonejs/dicom-image-loader": "^1.70.14",
|
||||
"@ohif/ui": "3.8.0-beta.92",
|
||||
"cornerstone-math": "0.1.9",
|
||||
"dicom-parser": "^1.8.21"
|
||||
|
||||
@@ -204,7 +204,8 @@ export class CommandsManager {
|
||||
|
||||
// Execute each command in the array
|
||||
let result: unknown;
|
||||
commands.forEach(({ commandName, commandOptions, context }) => {
|
||||
commands.forEach(command => {
|
||||
const { commandName, commandOptions, context } = command;
|
||||
if (commandName) {
|
||||
result = this.runCommand(
|
||||
commandName,
|
||||
@@ -215,7 +216,11 @@ export class CommandsManager {
|
||||
context
|
||||
);
|
||||
} else {
|
||||
console.warn('No command name supplied in', toRun);
|
||||
if (typeof command === 'function') {
|
||||
result = command();
|
||||
} else {
|
||||
console.warn('No command name supplied in', toRun);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -156,7 +156,7 @@ export default class ToolbarService extends PubSubService {
|
||||
const itemId = interaction.itemId ?? interaction.id;
|
||||
interaction.itemId = itemId;
|
||||
|
||||
const commands = Array.isArray(interaction.commands)
|
||||
let commands = Array.isArray(interaction.commands)
|
||||
? interaction.commands
|
||||
: [interaction.commands];
|
||||
|
||||
@@ -170,6 +170,27 @@ export default class ToolbarService extends PubSubService {
|
||||
|
||||
const commandOptions = { ...options, ...interaction };
|
||||
|
||||
commands = commands.map(command => {
|
||||
if (typeof command === 'function') {
|
||||
return () => {
|
||||
command({
|
||||
...commandOptions,
|
||||
commandsManager: this._commandsManager,
|
||||
servicesManager: this._servicesManager,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
return command;
|
||||
});
|
||||
|
||||
// if still no commands, return
|
||||
commands = commands.filter(Boolean);
|
||||
|
||||
if (!commands.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Loop through commands and run them with the combined options
|
||||
this._commandsManager.run(commands, commandOptions);
|
||||
|
||||
@@ -377,6 +398,26 @@ export default class ToolbarService extends PubSubService {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the tool name for a given button.
|
||||
* @param button - The button object.
|
||||
* @returns The tool name associated with the button.
|
||||
*/
|
||||
getToolNameForButton(button) {
|
||||
const { props } = button;
|
||||
|
||||
const commands = props?.commands || button.commands;
|
||||
const commandsArray = Array.isArray(commands) ? commands : [commands];
|
||||
const firstCommand = commandsArray[0];
|
||||
|
||||
if (firstCommand?.commandOptions) {
|
||||
return firstCommand.commandOptions.toolName ?? props?.id ?? button.id;
|
||||
}
|
||||
|
||||
// use id as a fallback for toolName
|
||||
return props?.id ?? button.id;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} btn
|
||||
|
||||
@@ -44,7 +44,7 @@ Key features:
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-volume-rendering.webp?raw=true" alt="Volume Rendering" width="350"/> | Volume Rendering | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&hangingprotocolId=mprAnd3DVolumeViewport) |
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-pdf.webp?raw=true" alt="PDF" width="350"/> | PDF | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=2.25.317377619501274872606137091638706705333) |
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-rtstruct.webp?raw=true" alt="RTSTRUCT" width="350"/> | RT STRUCT | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.5962.99.1.2968617883.1314880426.1493322302363.3.0) |
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-4D.webp?raw=true" alt="4D" width="350"/> | 4D | [Demo](https://viewer.ohif.org/dynamic-volume?StudyInstanceUIDs=2.25.232704420736447710317909004159492840763) |
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-4d.webp?raw=true" alt="4D" width="350"/> | 4D | [Demo](https://viewer.ohif.org/dynamic-volume?StudyInstanceUIDs=2.25.232704420736447710317909004159492840763) |
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-video.webp?raw=true" alt="VIDEO" width="350"/> | Video | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=2.25.96975534054447904995905761963464388233) |
|
||||
| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/microscopy.webp?raw=true" alt="microscopy" width="350"/> | Slide Microscopy | [Demo](https://viewer.ohif.org/microscopy?StudyInstanceUIDs=2.25.141277760791347900862109212450152067508) |
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 91 KiB |
@@ -91,7 +91,7 @@ Let's look at one of the evaluators (for `evaluate.cornerstoneTool`)
|
||||
return;
|
||||
}
|
||||
|
||||
const toolName = getToolNameForButton(button);
|
||||
const toolName = toolbarService.getToolNameForButton(button);
|
||||
|
||||
if (!toolGroup || !toolGroup.hasTool(toolName)) {
|
||||
return {
|
||||
@@ -405,7 +405,12 @@ state will get synchronized with the toolbar service automatically.
|
||||
Your toolbox toolbar buttons can have options, this is really useful
|
||||
for advanced tools that require to change some parameters. For example, the brush tool that requires the brush size to change or the mode (2D or 3D).
|
||||
|
||||
currently we support three types of options
|
||||
:::note
|
||||
Toolbox with options will run the options commands
|
||||
on the mount of the toolbox component. This is useful for setting the initial state of the toolbox.
|
||||
:::
|
||||
|
||||
Currently we support three types of options.
|
||||
|
||||
### Radio option
|
||||
|
||||
@@ -423,7 +428,6 @@ three different modes
|
||||
toolNames: ['CircleScissor', 'SphereScissor', 'RectangleScissor'],
|
||||
},
|
||||
icon: 'icon-tool-shape',
|
||||
commands: _createSetToolActiveCommands('CircleScissor'),
|
||||
options: [
|
||||
{
|
||||
name: 'Shape',
|
||||
@@ -456,7 +460,6 @@ We use this for brush radius change
|
||||
toolNames: ['CircularBrush', 'SphereBrush'],
|
||||
disabledText: 'Create new segmentation to enable this tool.',
|
||||
},
|
||||
commands: _createSetToolActiveCommands('CircularBrush'),
|
||||
options: [
|
||||
{
|
||||
name: 'Radius (mm)',
|
||||
|
||||
@@ -160,3 +160,23 @@ const _initMeasurementService = (MeasurementService, DisplaySetService) => {
|
||||
return csToolsVer4MeasurementSource;
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
## Auto complete
|
||||
Use a customization service to add more customizations for measurement labels. Later, when adding a measurement, the user will be prompted to choose from a list of labels.
|
||||
|
||||
```js
|
||||
customizationService.addModeCustomizations([
|
||||
{
|
||||
id: 'measurementLabels',
|
||||
labelOnMeasure: true,
|
||||
exclusive: true,
|
||||
items: [
|
||||
{ value: 'Head', label: 'Head' },
|
||||
{ value: 'Neck', label: 'Neck' },
|
||||
{ value: 'Knee', label: 'Knee' },
|
||||
{ value: 'Toe', label: 'Toe' },
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="320px" height="81px" viewBox="0 0 320 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>ohif-logo-color-darkbg</title>
|
||||
<g id="Twitter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ohif-logo-color-darkbg">
|
||||
<rect id="Rectangle" x="0" y="0" width="320" height="81"></rect>
|
||||
<path d="M90.7142154,33.7409791 C95.2782966,33.7409791 98.5881266,30.2141383 98.5881266,24.5572253 C98.5881266,18.9003123 95.2782966,15.3734715 90.7142154,15.3734715 C86.1501341,15.3734715 82.8403042,18.9003123 82.8403042,24.5572253 C82.8403042,30.2141383 86.1501341,33.7409791 90.7142154,33.7409791 Z M90.9016894,31.8667436 C87.6457391,31.8667436 85.0899931,29.3653249 85.0899931,24.7446488 C85.0899931,20.1239727 87.6457391,17.6225541 90.9016894,17.6225541 C94.1576398,17.6225541 96.7133858,20.1239727 96.7133858,24.7446488 C96.7133858,29.3653249 94.1576398,31.8667436 90.9016894,31.8667436 Z M103.98561,38.2391442 L103.98561,31.2436394 L104.157047,31.2436394 C104.602782,31.9673123 105.459964,33.5525006 107.997224,33.5525006 C111.288804,33.5525006 113.586053,30.8990333 113.586053,26.6948383 C113.586053,22.5251039 111.288804,19.8716366 107.962936,19.8716366 C105.391389,19.8716366 104.602782,21.4568249 104.157047,22.1460372 L103.917036,22.1460372 L103.917036,20.0439397 L101.96266,20.0439397 L101.96266,38.2391442 L103.98561,38.2391442 Z M107.928051,31.8667436 C105.529734,31.8667436 104.212349,29.779966 104.212349,26.7541384 C104.212349,23.7630905 105.495955,21.7458721 107.928051,21.7458721 C110.461485,21.7458721 111.711312,23.9369886 111.711312,26.7541384 C111.711312,29.6060678 110.427706,31.8667436 107.928051,31.8667436 Z M122.366273,33.7409791 C125.048595,33.7409791 127.008753,32.3784996 127.62775,30.352248 L125.667592,29.7932821 C125.151761,31.190697 123.956752,31.8894044 122.366273,31.8894044 C119.984853,31.8894044 118.342791,30.3260465 118.248222,27.4526122 L127.834082,27.4526122 L127.834082,26.5792279 C127.834082,21.5834698 124.91104,19.8716366 122.159941,19.8716366 C118.583512,19.8716366 116.21069,22.7363371 116.21069,26.8587109 C116.21069,30.9810847 118.549124,33.7409791 122.366273,33.7409791 Z M125.959342,25.494343 L118.460379,25.494343 C118.597503,23.5122975 120.045874,21.7458721 122.359839,21.7458721 C124.553822,21.7458721 125.959342,23.3381429 125.959342,25.494343 Z M133.246163,33.366132 L133.246163,25.3526913 C133.246163,23.0284466 134.679353,21.7102182 136.630563,21.7102182 C138.521338,21.7102182 139.669617,22.9503936 139.669617,25.0404793 L139.669617,33.366132 L141.707164,33.366132 L141.707164,24.9017184 C141.707164,21.5020769 139.902726,19.8716366 137.217653,19.8716366 C135.214641,19.8716366 133.971392,20.7735823 133.349767,22.1265009 L133.177094,22.1265009 L133.177094,20.0450877 L131.208616,20.0450877 L131.208616,33.366132 L133.246163,33.366132 Z M154.372289,33.366132 L154.372289,25.4862897 L163.912217,25.4862897 L163.912217,33.366132 L166.078794,33.366132 L166.078794,15.7483186 L163.912217,15.7483186 L163.912217,23.5937511 L154.372289,23.5937511 L154.372289,15.7483186 L152.205712,15.7483186 L152.205712,33.366132 L154.372289,33.366132 Z M175.608911,33.7409791 C178.291232,33.7409791 180.25139,32.3784996 180.870388,30.352248 L178.91023,29.7932821 C178.394399,31.190697 177.19939,31.8894044 175.608911,31.8894044 C173.227491,31.8894044 171.585429,30.3260465 171.49086,27.4526122 L181.07672,27.4526122 L181.07672,26.5792279 C181.07672,21.5834698 178.153677,19.8716366 175.402579,19.8716366 C171.82615,19.8716366 169.453327,22.7363371 169.453327,26.8587109 C169.453327,30.9810847 171.791761,33.7409791 175.608911,33.7409791 Z M179.201979,25.494343 L171.703016,25.494343 C171.84014,23.5122975 173.288511,21.7458721 175.602477,21.7458721 C177.796459,21.7458721 179.201979,23.3381429 179.201979,25.494343 Z M188.181194,33.7409791 C190.472408,33.7409791 191.669311,32.4864657 192.079677,31.6152758 L192.182269,31.6152758 L192.182269,33.4273507 L194.199905,33.4273507 L194.199905,24.6109094 C194.199905,20.3595029 191.019563,19.8716366 189.343899,19.8716366 C187.36046,19.8716366 185.103443,20.5685885 184.077527,23.0079201 L185.992571,23.704872 C186.437135,22.7291393 187.4887,21.6837115 189.412294,21.6837115 C191.267493,21.6837115 192.182269,22.6855798 192.182269,24.4018238 L192.182269,24.471519 C192.182269,25.4646755 191.19055,25.3775565 188.796744,25.6911848 C186.360191,26.0135251 183.701357,26.5623747 183.701357,29.628963 C183.701357,32.2425325 185.684796,33.7409791 188.181194,33.7409791 Z M188.682811,31.8667436 C187.097713,31.8667436 185.951046,31.1271124 185.951046,29.6830706 C185.951046,28.0981466 187.333791,27.6050592 188.885164,27.393736 C189.728301,27.2880744 191.98791,27.0415307 192.325165,26.6188843 L192.325165,28.520793 C192.325165,30.2113786 191.043596,31.8667436 188.682811,31.8667436 Z M200.199076,33.366132 L200.199076,15.7483186 L198.324335,15.7483186 L198.324335,33.366132 L200.199076,33.366132 Z M208.426094,33.7409791 C209.186911,33.7409791 209.671067,33.6038209 209.947728,33.5009522 L209.532737,31.6836062 C209.359824,31.7178958 209.083163,31.7864749 208.633589,31.7864749 C207.734442,31.7864749 206.869877,31.5121585 206.869877,29.7976812 L206.869877,22.1168226 L209.70565,22.1168226 L209.70565,20.4023453 L206.869877,20.4023453 L206.869877,17.247707 L204.829503,17.247707 L204.829503,20.4023453 L202.Line truncated
|
||||
<g id="Group" transform="translate(12.8702, 15.2102)" fill="#5ACCE6" fill-rule="nonzero">
|
||||
<path d="M46.9154768,0.29250457 L32.1434028,0.29250457 C30.1279219,0.29250457 28.4940518,1.92637469 28.4940518,3.94185562 L28.4940518,18.7139296 C28.4940518,20.7294105 30.1279219,22.3632807 32.1434028,22.3632807 L46.9154768,22.3632807 C48.9309577,22.3632807 50.5648279,20.7294105 50.5648279,18.7139296 L50.5648279,3.94185562 C50.5648279,1.92637469 48.9309577,0.29250457 46.9154768,0.29250457 Z M32.1434028,1.75224499 L46.9154768,1.75224499 C48.1247654,1.75224499 49.1050874,2.73256706 49.1050874,3.94185562 L49.1050874,18.7139296 C49.1050874,19.9232182 48.1247654,20.9035402 46.9154768,20.9035402 L32.1434028,20.9035402 C30.9341143,20.9035402 29.9537922,19.9232182 29.9537922,18.7139296 L29.9537922,3.94185562 C29.9537922,2.73256706 30.9341143,1.75224499 32.1434028,1.75224499 Z" id="Rectangle"></path>
|
||||
<path d="M46.9154768,0 C49.0925036,0 50.8573324,1.76482887 50.8573324,3.94185562 L50.8573324,18.7139296 C50.8573324,20.8909563 49.0925036,22.6557852 46.9154768,22.6557852 L32.1434028,22.6557852 C29.9663761,22.6557852 28.2015472,20.8909563 28.2015472,18.7139296 L28.2015472,3.94185562 C28.2015472,1.76482887 29.9663761,0 32.1434028,0 L46.9154768,0 Z M46.9154768,0.585009141 L32.1434028,0.585009141 C30.2894677,0.585009141 28.7865564,2.0879205 28.7865564,3.94185562 L28.7865564,18.7139296 C28.7865564,20.5678647 30.2894677,22.0707761 32.1434028,22.0707761 L46.9154768,22.0707761 C48.7694119,22.0707761 50.2723233,20.5678647 50.2723233,18.7139296 L50.2723233,3.94185562 C50.2723233,2.0879205 48.7694119,0.585009141 46.9154768,0.585009141 Z M46.9154768,1.45974042 C48.2863112,1.45974042 49.397592,2.57102125 49.397592,3.94185562 L49.397592,18.7139296 C49.397592,20.084764 48.2863112,21.1960448 46.9154768,21.1960448 L32.1434028,21.1960448 C30.7725685,21.1960448 29.6612876,20.084764 29.6612876,18.7139296 L29.6612876,3.94185562 C29.6612876,2.57102125 30.7725685,1.45974042 32.1434028,1.45974042 L46.9154768,1.45974042 Z M46.9154768,2.04474956 L32.1434028,2.04474956 C31.0956601,2.04474956 30.2462968,2.89411287 30.2462968,3.94185562 L30.2462968,18.7139296 C30.2462968,19.7616723 31.0956601,20.6110357 32.1434028,20.6110357 L46.9154768,20.6110357 C47.9632196,20.6110357 48.8125829,19.7616723 48.8125829,18.7139296 L48.8125829,3.94185562 C48.8125829,2.89411287 47.9632196,2.04474956 46.9154768,2.04474956 Z" id="Rectangle"></path>
|
||||
<path d="M18.7139296,0.29250457 L3.94185562,0.29250457 C1.92637469,0.29250457 0.29250457,1.92637469 0.29250457,3.94185562 L0.29250457,18.7139296 C0.29250457,20.7294105 1.92637469,22.3632807 3.94185562,22.3632807 L18.7139296,22.3632807 C20.7294105,22.3632807 22.3632807,20.7294105 22.3632807,18.7139296 L22.3632807,3.94185562 C22.3632807,1.92637469 20.7294105,0.29250457 18.7139296,0.29250457 Z M3.94185562,1.75224499 L18.7139296,1.75224499 C19.9232182,1.75224499 20.9035402,2.73256706 20.9035402,3.94185562 L20.9035402,18.7139296 C20.9035402,19.9232182 19.9232182,20.9035402 18.7139296,20.9035402 L3.94185562,20.9035402 C2.73256706,20.9035402 1.75224499,19.9232182 1.75224499,18.7139296 L1.75224499,3.94185562 C1.75224499,2.73256706 2.73256706,1.75224499 3.94185562,1.75224499 Z" id="Rectangle"></path>
|
||||
<path d="M18.7139296,0 C20.8909563,0 22.6557852,1.76482887 22.6557852,3.94185562 L22.6557852,18.7139296 C22.6557852,20.8909563 20.8909563,22.6557852 18.7139296,22.6557852 L3.94185562,22.6557852 C1.76482887,22.6557852 0,20.8909563 0,18.7139296 L0,3.94185562 C0,1.76482887 1.76482887,0 3.94185562,0 L18.7139296,0 Z M18.7139296,0.585009141 L3.94185562,0.585009141 C2.0879205,0.585009141 0.585009141,2.0879205 0.585009141,3.94185562 L0.585009141,18.7139296 C0.585009141,20.5678647 2.0879205,22.0707761 3.94185562,22.0707761 L18.7139296,22.0707761 C20.5678647,22.0707761 22.0707761,20.5678647 22.0707761,18.7139296 L22.0707761,3.94185562 C22.0707761,2.0879205 20.5678647,0.585009141 18.7139296,0.585009141 Z M18.7139296,1.45974042 C20.084764,1.45974042 21.1960448,2.57102125 21.1960448,3.94185562 L21.1960448,18.7139296 C21.1960448,20.084764 20.084764,21.1960448 18.7139296,21.1960448 L3.94185562,21.1960448 C2.57102125,21.1960448 1.45974042,20.084764 1.45974042,18.7139296 L1.45974042,3.94185562 C1.45974042,2.57102125 2.57102125,1.45974042 3.94185562,1.45974042 L18.7139296,1.45974042 Z M18.7139296,2.04474956 L3.94185562,2.04474956 C2.89411287,2.04474956 2.04474956,2.89411287 2.04474956,3.94185562 L2.04474956,18.7139296 C2.04474956,19.7616723 2.89411287,20.6110357 3.94185562,20.6110357 L18.7139296,20.6110357 C19.7616723,20.6110357 20.6110357,19.7616723 20.6110357,18.7139296 L20.6110357,3.94185562 C20.6110357,2.89411287 19.7616723,2.04474956 18.7139296,2.04474956 Z" id="Rectangle"></path>
|
||||
<path d="M46.9154768,28.4940518 L32.1434028,28.4940518 C30.1279219,28.4940518 28.4940518,30.1279219 28.4940518,32.1434028 L28.4940518,46.9154768 C28.4940518,48.9309577 30.1279219,50.5648279 32.1434028,50.5648279 L46.9154768,50.5648279 C48.9309577,50.5648279 50.5648279,48.9309577 50.5648279,46.9154768 L50.5648279,32.1434028 C50.5648279,30.1279219 48.9309577,28.4940518 46.9154768,28.4940518 Z M32.1434028,29.9537922 L46.9154768,29.9537922 C48.1247654,29.9537922 49.1050874,30.9341143 49.1050874,32.1434028 L49.1050874,46.9154768 C49.1050874,48.1247654 48.1247654,49.1050874 46.9154768,49.1050874 L32.1434028,49.1050874 C30.9341143,49.1050874 29.9537922,48.1247654 29.9537922,46.9154768 L29.9537922,32.1434028 C29.9537922,30.9341143 30.9341143,29.9537922 32.1434028,29.9537922 Z" id="Rectangle"></path>
|
||||
<path d="M46.9154768,28.2015472 C49.0925036,28.2015472 50.8573324,29.9663761 50.8573324,32.1434028 L50.8573324,46.9154768 C50.8573324,49.0925036 49.0925036,50.8573324 46.9154768,50.8573324 L32.1434028,50.8573324 C29.9663761,50.8573324 28.2015472,49.0925036 28.2015472,46.9154768 L28.2015472,32.1434028 C28.2015472,29.9663761 29.9663761,28.2015472 32.1434028,28.2015472 L46.9154768,28.2015472 Z M46.9154768,28.7865564 L32.1434028,28.7865564 C30.2894677,28.7865564 28.7865564,30.2894677 28.7865564,32.1434028 L28.7865564,46.9154768 C28.7865564,48.7694119 30.2894677,50.2723233 32.1434028,50.2723233 L46.9154768,50.2723233 C48.7694119,50.2723233 50.2723233,48.7694119 50.2723233,46.9154768 L50.2723233,32.1434028 C50.2723233,30.2894677 48.7694119,28.7865564 46.9154768,28.7865564 Z M46.9154768,29.6612876 C48.2863112,29.6612876 49.397592,30.7725685 49.397592,32.1434028 L49.397592,46.9154768 C49.397592,48.2863112 48.2863112,49.397592 46.9154768,49.397592 L32.1434028,49.397592 C30.7725685,49.397592 29.6612876,48.2863112 29.6612876,46.9154768 L29.6612876,32.1434028 C29.6612876,30.7725685 30.7725685,29.6612876 32.1434028,29.6612876 L46.9154768,29.6612876 Z M46.9154768,30.2462968 L32.1434028,30.2462968 C31.0956601,30.2462968 30.2462968,31.0956601 30.2462968,32.1434028 L30.2462968,46.9154768 C30.2462968,47.9632196 31.0956601,48.8125829 32.1434028,48.8125829 L46.9154768,48.8125829 C47.9632196,48.8125829 48.8125829,47.9632196 48.8125829,46.9154768 L48.8125829,32.1434028 C48.8125829,31.0956601 47.9632196,30.2462968 46.9154768,30.2462968 Z" id="Rectangle"></path>
|
||||
<path d="M18.7139296,28.4940518 L3.94185562,28.4940518 C1.92637469,28.4940518 0.29250457,30.1279219 0.29250457,32.1434028 L0.29250457,46.9154768 C0.29250457,48.9309577 1.92637469,50.5648279 3.94185562,50.5648279 L18.7139296,50.5648279 C20.7294105,50.5648279 22.3632807,48.9309577 22.3632807,46.9154768 L22.3632807,32.1434028 C22.3632807,30.1279219 20.7294105,28.4940518 18.7139296,28.4940518 Z M3.94185562,29.9537922 L18.7139296,29.9537922 C19.9232182,29.9537922 20.9035402,30.9341143 20.9035402,32.1434028 L20.9035402,46.9154768 C20.9035402,48.1247654 19.9232182,49.1050874 18.7139296,49.1050874 L3.94185562,49.1050874 C2.73256706,49.1050874 1.75224499,48.1247654 1.75224499,46.9154768 L1.75224499,32.1434028 C1.75224499,30.9341143 2.73256706,29.9537922 3.94185562,29.9537922 Z" id="Rectangle"></path>
|
||||
<path d="M18.7139296,28.2015472 C20.8909563,28.2015472 22.6557852,29.9663761 22.6557852,32.1434028 L22.6557852,46.9154768 C22.6557852,49.0925036 20.8909563,50.8573324 18.7139296,50.8573324 L3.94185562,50.8573324 C1.76482887,50.8573324 0,49.0925036 0,46.9154768 L0,32.1434028 C0,29.9663761 1.76482887,28.2015472 3.94185562,28.2015472 L18.7139296,28.2015472 Z M18.7139296,28.7865564 L3.94185562,28.7865564 C2.0879205,28.7865564 0.585009141,30.2894677 0.585009141,32.1434028 L0.585009141,46.9154768 C0.585009141,48.7694119 2.0879205,50.2723233 3.94185562,50.2723233 L18.7139296,50.2723233 C20.5678647,50.2723233 22.0707761,48.7694119 22.0707761,46.9154768 L22.0707761,32.1434028 C22.0707761,30.2894677 20.5678647,28.7865564 18.7139296,28.7865564 Z M18.7139296,29.6612876 C20.084764,29.6612876 21.1960448,30.7725685 21.1960448,32.1434028 L21.1960448,46.9154768 C21.1960448,48.2863112 20.084764,49.397592 18.7139296,49.397592 L3.94185562,49.397592 C2.57102125,49.397592 1.45974042,48.2863112 1.45974042,46.9154768 L1.45974042,32.1434028 C1.45974042,30.7725685 2.57102125,29.6612876 3.94185562,29.6612876 L18.7139296,29.6612876 Z M18.7139296,30.2462968 L3.94185562,30.2462968 C2.89411287,30.2462968 2.04474956,31.0956601 2.04474956,32.1434028 L2.04474956,46.9154768 C2.04474956,47.9632196 2.89411287,48.8125829 3.94185562,48.8125829 L18.7139296,48.8125829 C19.7616723,48.8125829 20.6110357,47.9632196 20.6110357,46.9154768 L20.6110357,32.1434028 C20.6110357,31.0956601 19.7616723,30.2462968 18.7139296,30.2462968 Z" id="Rectangle"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 26 KiB |
@@ -103,7 +103,7 @@ const renderDoubleRangeSetting = option => {
|
||||
key={option.id}
|
||||
>
|
||||
<InputDoubleRange
|
||||
values={option.values}
|
||||
values={option.value}
|
||||
onChange={option.commands}
|
||||
minValue={option.min}
|
||||
maxValue={option.max}
|
||||
|
||||
@@ -34,6 +34,7 @@ import link from './../../assets/icons/tool-stack-image-sync.svg';
|
||||
import listBullets from './../../assets/icons/list-bullets.svg';
|
||||
import lock from './../../assets/icons/lock.svg';
|
||||
import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
|
||||
import logoDarkBackGround from './../../assets/icons/ohif-logo-color-darkbg.svg';
|
||||
import magnifier from './../../assets/icons/magnifier.svg';
|
||||
import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
|
||||
import pencil from './../../assets/icons/pencil.svg';
|
||||
@@ -264,6 +265,7 @@ const ICONS = {
|
||||
'list-bullets': listBullets,
|
||||
lock: lock,
|
||||
'logo-ohif-small': logoOhifSmall,
|
||||
'logo-dark-background': logoDarkBackGround,
|
||||
magnifier: magnifier,
|
||||
exclamation: exclamation,
|
||||
'notificationwarning-diamond': notificationwarningDiamond,
|
||||
|
||||
@@ -21,6 +21,7 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
|
||||
});
|
||||
|
||||
const prevButtonIdsRef = useRef();
|
||||
const prevToolboxStateRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const currentButtonIdsStr = JSON.stringify(
|
||||
@@ -33,11 +34,24 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
|
||||
})
|
||||
);
|
||||
|
||||
if (prevButtonIdsRef.current === currentButtonIdsStr) {
|
||||
const currentToolBoxStateStr = JSON.stringify(
|
||||
Object.keys(toolboxState.toolOptions).map(tool => {
|
||||
const options = toolboxState.toolOptions[tool];
|
||||
if (Array.isArray(options)) {
|
||||
return options?.map(option => `${option.id}-${option.value}`);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
if (
|
||||
prevButtonIdsRef.current === currentButtonIdsStr &&
|
||||
prevToolboxStateRef.current === currentToolBoxStateStr
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
prevButtonIdsRef.current = currentButtonIdsStr;
|
||||
prevToolboxStateRef.current = currentToolBoxStateStr;
|
||||
|
||||
const initializeOptionsWithEnhancements = toolbarButtons.reduce(
|
||||
(accumulator, toolbarButton) => {
|
||||
@@ -51,11 +65,15 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
|
||||
return option;
|
||||
}
|
||||
|
||||
const value =
|
||||
toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ??
|
||||
option.value;
|
||||
|
||||
const updatedOptions = toolboxState.toolOptions?.[parentId];
|
||||
|
||||
return {
|
||||
...option,
|
||||
value:
|
||||
toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ??
|
||||
option.value,
|
||||
value,
|
||||
commands: value => {
|
||||
api.handleToolOptionChange(parentId, option.id, value);
|
||||
|
||||
@@ -72,10 +90,15 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
|
||||
} else if (isObject) {
|
||||
commandsManager.run({
|
||||
...command,
|
||||
commandOptions: { ...command.commandOptions, ...option, value },
|
||||
commandOptions: {
|
||||
...command.commandOptions,
|
||||
...option,
|
||||
value,
|
||||
options: updatedOptions,
|
||||
},
|
||||
});
|
||||
} else if (isFunction) {
|
||||
command({ value, commandsManager, servicesManager });
|
||||
command({ value, commandsManager, servicesManager, options: updatedOptions });
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -101,7 +124,7 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
|
||||
);
|
||||
|
||||
api.initializeToolOptions(initializeOptionsWithEnhancements);
|
||||
}, [toolbarButtons, api]);
|
||||
}, [toolbarButtons, api, toolboxState]);
|
||||
|
||||
const handleToolOptionChange = (toolName, optionName, newValue) => {
|
||||
api.handleToolOptionChange(toolName, optionName, newValue);
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
import React from 'react';
|
||||
import { PanelSection, ToolSettings, Tooltip } from '../../components';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { PanelSection, ToolSettings } from '../../components';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const ItemsPerRow = 4;
|
||||
|
||||
function usePrevious(value) {
|
||||
const ref = useRef();
|
||||
useEffect(() => {
|
||||
ref.current = value;
|
||||
});
|
||||
return ref.current;
|
||||
}
|
||||
|
||||
/**
|
||||
* Just refactoring from the toolbox component to make it more readable
|
||||
*/
|
||||
@@ -18,6 +26,27 @@ function ToolboxUI(props) {
|
||||
useCollapsedPanel = true,
|
||||
} = props;
|
||||
|
||||
const prevToolOptions = usePrevious(activeToolOptions);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeToolOptions) {
|
||||
return;
|
||||
}
|
||||
|
||||
activeToolOptions.forEach((option, index) => {
|
||||
const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
|
||||
if (!prevOption || option.value !== prevOption.value) {
|
||||
const isOptionValid = option.condition
|
||||
? option.condition({ options: activeToolOptions })
|
||||
: true;
|
||||
if (isOptionValid) {
|
||||
const { commands } = option;
|
||||
commands(option.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [activeToolOptions]);
|
||||
|
||||
const render = () => {
|
||||
return (
|
||||
<>
|
||||
@@ -34,7 +63,8 @@ function ToolboxUI(props) {
|
||||
const toolClasses = `ml-1 ${isLastRow ? '' : 'mb-2'}`;
|
||||
|
||||
const onInteraction = ({ itemId, id, commands }) => {
|
||||
handleToolSelect(itemId || id);
|
||||
const idToUse = itemId || id;
|
||||
handleToolSelect(idToUse);
|
||||
props.onInteraction({
|
||||
itemId,
|
||||
commands,
|
||||
|
||||
@@ -78,6 +78,13 @@ const Tooltip = ({
|
||||
handleMouseOutDebounced();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
handleMouseOverDebounced.cancel();
|
||||
handleMouseOutDebounced.cancel();
|
||||
};
|
||||
}, [handleMouseOverDebounced, handleMouseOutDebounced]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen && onHide) {
|
||||
onHide();
|
||||
|
||||
Reference in new issue
Block a user