@cornerstonejs/tools 2.0.0-beta.1 → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^2.0.0-beta.1",
+    "@cornerstonejs/core": "^2.0.0-beta.2",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "8cb0ace8dd10393a32f88507ef911ce823b0069d"
+  "gitHead": "c154f7531c166db29a54fe41c76a22ecc7ac47c8"
 }

package/src/drawingSvg/drawCircle.ts

@@ -3,8 +3,8 @@ import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
 
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 
 function drawCircle(
   svgDrawingHelper: SVGDrawingHelper,
@@ -15,13 +15,23 @@ function drawCircle(
   options = {},
   dataId = ''
 ): void {
-  const { color, fill, width, lineWidth, lineDash } = Object.assign(
+  const {
+    color,
+    fill,
+    width,
+    lineWidth,
+    lineDash,
+    fillOpacity,
+    strokeOpacity,
+  } = Object.assign(
     {
       color: 'dodgerblue',
       fill: 'transparent',
       width: '2',
       lineDash: undefined,
       lineWidth: undefined,
+      strokeOpacity: 1,
+      fillOpacity: 1,
     },
     options
   );
@@ -42,10 +52,12 @@ function drawCircle(
     fill,
     'stroke-width': strokeWidth,
     'stroke-dasharray': lineDash,
+    'fill-opacity': fillOpacity, // setting fill opacity
+    'stroke-opacity': strokeOpacity, // setting stroke opacity
   };
 
   if (existingCircleElement) {
-    _setAttributesIfNecessary(attributes, existingCircleElement);
+    setAttributesIfNecessary(attributes, existingCircleElement);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -55,7 +67,7 @@ function drawCircle(
       newCircleElement.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, newCircleElement);
+    setNewAttributesIfValid(attributes, newCircleElement);
 
     svgDrawingHelper.appendNode(newCircleElement, svgNodeHash);
   }

package/src/drawingSvg/drawEllipse.ts

@@ -2,8 +2,8 @@ import type { Types } from '@cornerstonejs/core';
 import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 
 function drawEllipse(
   svgDrawingHelper: SVGDrawingHelper,
@@ -52,7 +52,7 @@ function drawEllipse(
   };
 
   if (existingEllipse) {
-    _setAttributesIfNecessary(attributes, existingEllipse);
+    setAttributesIfNecessary(attributes, existingEllipse);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -62,7 +62,7 @@ function drawEllipse(
       svgEllipseElement.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, svgEllipseElement);
+    setNewAttributesIfValid(attributes, svgEllipseElement);
 
     svgDrawingHelper.appendNode(svgEllipseElement, svgNodeHash);
   }

package/src/drawingSvg/drawHandles.ts

@@ -1,8 +1,8 @@
 import type { Types } from '@cornerstonejs/core';
 
 import _getHash from './_getHash';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 import { SVGDrawingHelper } from '../types';
 
 function drawHandles(
@@ -75,13 +75,13 @@ function drawHandles(
     const existingHandleElement = svgDrawingHelper.getSvgNode(svgNodeHash);
 
     if (existingHandleElement) {
-      _setAttributesIfNecessary(attributes, existingHandleElement);
+      setAttributesIfNecessary(attributes, existingHandleElement);
 
       svgDrawingHelper.setNodeTouched(svgNodeHash);
     } else {
       const newHandleElement = document.createElementNS(svgns, type);
 
-      _setNewAttributesIfValid(attributes, newHandleElement);
+      setNewAttributesIfValid(attributes, newHandleElement);
 
       svgDrawingHelper.appendNode(newHandleElement, svgNodeHash);
     }

package/src/drawingSvg/drawLine.ts

@@ -1,8 +1,8 @@
 import type { Types } from '@cornerstonejs/core';
 
 import _getHash from './_getHash';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 import { SVGDrawingHelper } from '../types';
 
 export default function drawLine(
@@ -53,7 +53,7 @@ export default function drawLine(
 
   if (existingLine) {
     // This is run to avoid re-rendering annotations that actually haven't changed
-    _setAttributesIfNecessary(attributes, existingLine);
+    setAttributesIfNecessary(attributes, existingLine);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -63,7 +63,7 @@ export default function drawLine(
       newLine.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, newLine);
+    setNewAttributesIfValid(attributes, newLine);
 
     svgDrawingHelper.appendNode(newLine, svgNodeHash);
   }

package/src/drawingSvg/drawPolyline.ts

@@ -1,7 +1,7 @@
 import type { Types } from '@cornerstonejs/core';
 import _getHash from './_getHash';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 import { SVGDrawingHelper } from '../types';
 
 /**
@@ -67,13 +67,13 @@ export default function drawPolyline(
 
   if (existingPolyLine) {
     // This is run to avoid re-rendering annotations that actually haven't changed
-    _setAttributesIfNecessary(attributes, existingPolyLine);
+    setAttributesIfNecessary(attributes, existingPolyLine);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
     const newPolyLine = document.createElementNS(svgns, 'polyline');
 
-    _setNewAttributesIfValid(attributes, newPolyLine);
+    setNewAttributesIfValid(attributes, newPolyLine);
 
     svgDrawingHelper.appendNode(newPolyLine, svgNodeHash);
   }

package/src/drawingSvg/drawRect.ts

@@ -1,8 +1,8 @@
 import type { Types } from '@cornerstonejs/core';
 
 import _getHash from './_getHash';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
-import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 import { SVGDrawingHelper } from '../types';
 
 // <rect x="120" y="100" width="100" height="100" />
@@ -53,7 +53,7 @@ export default function drawRect(
   };
 
   if (existingRect) {
-    _setAttributesIfNecessary(attributes, existingRect);
+    setAttributesIfNecessary(attributes, existingRect);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
@@ -63,7 +63,7 @@ export default function drawRect(
       svgRectElement.setAttribute('data-id', dataId);
     }
 
-    _setNewAttributesIfValid(attributes, svgRectElement);
+    setNewAttributesIfValid(attributes, svgRectElement);
 
     svgDrawingHelper.appendNode(svgRectElement, svgNodeHash);
   }

package/src/drawingSvg/drawTextBox.ts

@@ -2,7 +2,7 @@ import type { Types } from '@cornerstonejs/core';
 import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
-import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
 
 /**
  * Draws a textBox.
@@ -100,8 +100,8 @@ function _drawTextGroup(
     };
 
     // Todo: for some reason this does not work to not re-render the textBox
-    _setAttributesIfNecessary(textAttributes, textElement);
-    _setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
+    setAttributesIfNecessary(textAttributes, textElement);
+    setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
 
     textGroupBoundingBox = _drawTextBackground(existingTextGroup, background);
 
@@ -205,7 +205,7 @@ function _drawTextBackground(group: SVGGElement, color: string) {
     fill: color,
   };
 
-  _setAttributesIfNecessary(attributes, element);
+  setAttributesIfNecessary(attributes, element);
 
   return bBox;
 }

package/src/drawingSvg/index.ts

@@ -8,6 +8,8 @@ import drawLinkedTextBox from './drawLinkedTextBox';
 import drawRect from './drawRect';
 import drawTextBox from './drawTextBox';
 import drawArrow from './drawArrow';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
 
 export {
   draw,
@@ -20,4 +22,6 @@ export {
   drawRect,
   drawTextBox,
   drawArrow,
+  setAttributesIfNecessary,
+  setNewAttributesIfValid,
 };

package/src/drawingSvg/{_setAttributesIfNecessary.ts → setAttributesIfNecessary.ts}

@@ -1,4 +1,4 @@
-export function _setAttributesIfNecessary(attributes, svgNode) {
+export function setAttributesIfNecessary(attributes, svgNode) {
   Object.keys(attributes).forEach((key) => {
     const currentValue = svgNode.getAttribute(key);
     const newValue = attributes[key];
@@ -10,4 +10,4 @@ export function _setAttributesIfNecessary(attributes, svgNode) {
   });
 }
 
-export default _setAttributesIfNecessary;
+export default setAttributesIfNecessary;

package/src/drawingSvg/{_setNewAttributesIfValid.ts → setNewAttributesIfValid.ts}

@@ -1,4 +1,4 @@
-export function _setNewAttributesIfValid(attributes, svgNode) {
+export function setNewAttributesIfValid(attributes, svgNode) {
   Object.keys(attributes).forEach((key) => {
     const newValue = attributes[key];
     if (newValue !== undefined && newValue !== '') {
@@ -7,4 +7,4 @@ export function _setNewAttributesIfValid(attributes, svgNode) {
   });
 }
 
-export default _setNewAttributesIfValid;
+export default setNewAttributesIfValid;

package/src/enums/Events.ts

@@ -5,6 +5,19 @@
  *
  */
 enum Events {
+  ///////////////////////////////////////
+  //            Tools
+  ///////////////////////////////////////
+
+  /**
+   * Triggers on the eventTarget when a new tools is activated.
+   *
+   * Make use of {@link EventTypes.ToolActivatedEventType | Tool Activated Event Type  }
+   * for typing your event listeners for this tool activated event, and see what event
+   * detail is included in {@link EventTypes.ToolActivatedEventDetail | Tool Activated Event Detail}.
+   */
+  TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
+
   ///////////////////////////////////////
   //            Annotations
   ///////////////////////////////////////

package/src/eventDispatchers/shared/getMouseModifier.ts

@@ -8,14 +8,24 @@ import { KeyboardBindings as kb } from '../../enums';
 const getMouseModifierKey = (evt) => {
   // The logic is a hard coded key mapping
   if (evt.shiftKey) {
-    if (evt.ctrlKey) return kb.ShiftCtrl;
-    if (evt.altKey) return kb.ShiftAlt;
-    if (evt.metaKey) return kb.ShiftMeta;
+    if (evt.ctrlKey) {
+      return kb.ShiftCtrl;
+    }
+    if (evt.altKey) {
+      return kb.ShiftAlt;
+    }
+    if (evt.metaKey) {
+      return kb.ShiftMeta;
+    }
     return kb.Shift;
   }
   if (evt.ctrlKey) {
-    if (evt.altKey) return kb.CtrlAlt;
-    if (evt.metaKey) return kb.CtrlMeta;
+    if (evt.altKey) {
+      return kb.CtrlAlt;
+    }
+    if (evt.metaKey) {
+      return kb.CtrlMeta;
+    }
     return kb.Ctrl;
   }
   if (evt.altKey) {

package/src/eventListeners/keyboard/keyDownListener.ts

@@ -64,11 +64,23 @@ function keyListener(evt: KeyboardEvent): void {
   triggerEvent(eventDetail.element, Events.KEY_DOWN, eventDetail);
 
   document.addEventListener('keyup', _onKeyUp);
+  document.addEventListener('visibilitychange', _onVisibilityChange);
 
   // Todo: handle combination of keys
   state.element.removeEventListener('keydown', keyListener);
 }
 
+/**
+ * Whenever the visibility (i.e. tab focus) changes such that the tab is NOT the
+ * active tab, reset the modifier key.
+ */
+function _onVisibilityChange(): void {
+  document.removeEventListener('visibilitychange', _onVisibilityChange);
+  if (document.visibilityState === 'hidden') {
+    resetModifierKey();
+  }
+}
+
 function _onKeyUp(evt: KeyboardEvent): void {
   const eventDetail: KeyUpEventDetail = {
     renderingEngineId: state.renderingEngineId,
@@ -81,6 +93,7 @@ function _onKeyUp(evt: KeyboardEvent): void {
 
   // Remove our temporary handlers
   document.removeEventListener('keyup', _onKeyUp);
+  document.removeEventListener('visibilitychange', _onVisibilityChange);
   state.element.addEventListener('keydown', keyListener);
 
   // Restore `state` to `defaultState`

package/src/eventListeners/mouse/mouseDownListener.ts

@@ -129,7 +129,9 @@ const doubleClickState: IDoubleClickState = {
 function mouseDownListener(evt: MouseEvent) {
   if (doubleClickState.doubleClickTimeout) {
     // A second identical click will be a double click event, so ignore it
-    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) return;
+    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) {
+      return;
+    }
 
     // Record the second button or the changed button event as the initial
     // button down state so that the multi-button event can be detected

package/src/eventListeners/touch/touchStartListener.ts

@@ -168,7 +168,9 @@ function touchStartListener(evt: TouchEvent) {
   state.renderingEngineId = renderingEngineId;
   state.viewportId = viewportId;
   // this prevents multiple start firing
-  if (state.isTouchStart) return;
+  if (state.isTouchStart) {
+    return;
+  }
   // this will clear on touchstart and touchend
   clearTimeout(state.pressTimeout);
   state.pressTimeout = setTimeout(() => _onTouchPress(evt), state.pressDelay);
@@ -187,7 +189,9 @@ function touchStartListener(evt: TouchEvent) {
  */
 function _onTouchPress(evt: TouchEvent) {
   const totalDistance = state.accumulatedDistance.canvas;
-  if (totalDistance > state.pressMaxDistance) return;
+  if (totalDistance > state.pressMaxDistance) {
+    return;
+  }
   const eventDetail: EventTypes.TouchPressEventDetail = {
     event: evt, // touchstart native event
     eventName: TOUCH_PRESS,
@@ -384,7 +388,9 @@ function _onTouchEnd(evt: TouchEvent): void {
 function _checkTouchTap(evt: TouchEvent): void {
   const currentTime = new Date().getTime();
   const startTime = state.startTime.getTime();
-  if (currentTime - startTime > tapState.tapToleranceMs) return;
+  if (currentTime - startTime > tapState.tapToleranceMs) {
+    return;
+  }
 
   // first tap, initialize the state
   if (tapState.taps === 0) {
@@ -422,7 +428,9 @@ function _checkTouchTap(evt: TouchEvent): void {
   // region where the user has the option to perform unlimited multitaps as long
   // as they are < the tapToleranceMs value. So a tap somewhere else on the screen
   // that is > the tapMaxDistance will start a separate and new "TapChain".
-  if (distanceFromStart > tapState.tapMaxDistance) return;
+  if (distanceFromStart > tapState.tapMaxDistance) {
+    return;
+  }
 
   clearTimeout(tapState.tapTimeout);
   tapState.taps += 1;
@@ -447,7 +455,9 @@ function _checkTouchTap(evt: TouchEvent): void {
 function _checkTouchSwipe(evt: TouchEvent, deltaPoints: IPoints) {
   const currentTime = new Date().getTime();
   const startTime = state.startTime.getTime();
-  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) return;
+  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) {
+    return;
+  }
   const [x, y] = deltaPoints.canvas;
   const eventDetail: EventTypes.TouchSwipeEventDetail = {
     event: evt,

package/src/index.ts

@@ -23,6 +23,7 @@ import * as segmentation from './stateManagement/segmentation';
 import {
   BaseTool,
   AnnotationTool,
+  AnnotationDisplayTool,
   PanTool,
   TrackballRotateTool,
   DragProbeTool,
@@ -71,6 +72,7 @@ export {
   // Base Tools
   BaseTool,
   AnnotationTool,
+  AnnotationDisplayTool,
   // Manipulation Tools
   PanTool,
   TrackballRotateTool,

package/src/stateManagement/annotation/config/ToolStyle.ts

@@ -35,6 +35,7 @@ class ToolStyle {
       lineWidth: '1',
       lineDash: '',
       shadow: true,
+      textBoxVisibility: true,
       textBoxFontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
       textBoxFontSize: '14px',
       textBoxColor: 'rgb(255, 255, 0)',

package/src/stateManagement/annotation/config/getState.ts

@@ -11,13 +11,17 @@ import { AnnotationStyleStates } from '../../../enums';
  */
 function getState(annotation?: Annotation): AnnotationStyleStates {
   if (annotation) {
-    if (annotation.data && annotation.highlighted)
+    if (annotation.data && annotation.highlighted) {
       return AnnotationStyleStates.Highlighted;
-    if (isAnnotationSelected(annotation.annotationUID))
+    }
+    if (isAnnotationSelected(annotation.annotationUID)) {
       return AnnotationStyleStates.Selected;
+    }
 
     // Todo: make annotation lock api not to rely on the annotation itself
-    if (isAnnotationLocked(annotation)) return AnnotationStyleStates.Locked;
+    if (isAnnotationLocked(annotation)) {
+      return AnnotationStyleStates.Locked;
+    }
   }
 
   return AnnotationStyleStates.Default;

package/src/stateManagement/annotation/config/helpers.ts

@@ -15,8 +15,12 @@ function getHierarchalPropertyStyles(
   mode?: ToolModes
 ): string[] {
   const list = [`${property}`];
-  if (state) list.push(`${list[0]}${state}`);
-  if (mode) list.push(`${list[list.length - 1]}${mode}`);
+  if (state) {
+    list.push(`${list[0]}${state}`);
+  }
+  if (mode) {
+    list.push(`${list[list.length - 1]}${mode}`);
+  }
   return list;
 }
 

package/src/store/SynchronizerManager/Synchronizer.ts

@@ -205,6 +205,7 @@ class Synchronizer {
     }
 
     this._ignoreFiredEvents = true;
+    const promises = [];
     try {
       for (let i = 0; i < this._targetViewports.length; i++) {
         const targetViewport = this._targetViewports[i];
@@ -214,19 +215,26 @@ class Synchronizer {
         if (targetIsSource) {
           continue;
         }
-
-        this._eventHandler(
-          this,
-          sourceViewport,
-          targetViewport,
-          sourceEvent,
-          this._options
+        promises.push(
+          this._eventHandler(
+            this,
+            sourceViewport,
+            targetViewport,
+            sourceEvent,
+            this._options
+          )
         );
       }
     } catch (ex) {
       console.warn(`Synchronizer, for: ${this._eventName}`, ex);
     } finally {
-      this._ignoreFiredEvents = false;
+      if (promises.length) {
+        Promise.allSettled(promises).then(() => {
+          this._ignoreFiredEvents = false;
+        });
+      } else {
+        this._ignoreFiredEvents = false;
+      }
     }
   }
 

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -2,6 +2,8 @@ import { MouseBindings, ToolModes } from '../../enums';
 import cloneDeep from 'lodash.clonedeep';
 import get from 'lodash.get';
 import {
+  triggerEvent,
+  eventTarget,
   getRenderingEngine,
   getRenderingEngines,
   getEnabledElementByIds,
@@ -9,6 +11,8 @@ import {
   utilities as csUtils,
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
+import { Events } from '../../enums';
+import { ToolActivatedEventDetail } from '../../types/EventTypes';
 import { state } from '../index';
 import {
   IToolBinding,
@@ -16,6 +20,7 @@ import {
   IToolGroup,
   SetToolBindingsType,
   ToolOptionsType,
+  ToolConfiguration,
 } from '../../types';
 
 import { MouseCursor, SVGMouseCursor } from '../../cursors';
@@ -69,7 +74,7 @@ export default class ToolGroup implements IToolGroup {
     const toolInstance = this._toolInstances[toolInstanceName];
     if (!toolInstance) {
       console.warn(
-        `'${toolInstanceName}' is not registered with this toolGroup.`
+        `'${toolInstanceName}' is not registered with this toolGroup (${this.id}).`
       );
       return;
     }
@@ -83,9 +88,9 @@ export default class ToolGroup implements IToolGroup {
    * to set the tool to be active or passive or in other states.
    *
    * @param toolName - string
-   * @param configuration - Tool configuration objects
+   * @param configuration - Tool configuration objects and a custom statistics calculator if needed
    */
-  addTool(toolName: string, configuration = {}): void {
+  addTool(toolName: string, configuration: ToolConfiguration = {}): void {
     const toolDefinition = state.tools[toolName];
     const hasToolName = typeof toolName !== 'undefined' && toolName !== '';
     const localToolInstance = this.toolOptions[toolName];
@@ -372,6 +377,14 @@ export default class ToolGroup implements IToolGroup {
       toolInstance.onSetToolActive();
     }
     this._renderViewports();
+
+    const eventDetail: ToolActivatedEventDetail = {
+      toolGroupId: this.id,
+      toolName,
+      toolBindingsOptions,
+    };
+
+    triggerEvent(eventTarget, Events.TOOL_ACTIVATED, eventDetail);
   }
 
   /**
@@ -593,7 +606,7 @@ export default class ToolGroup implements IToolGroup {
    */
   public setToolConfiguration(
     toolName: string,
-    configuration: Record<any, any>,
+    configuration: ToolConfiguration,
     overwrite?: boolean
   ): boolean {
     if (this._toolInstances[toolName] === undefined) {
@@ -608,7 +621,10 @@ export default class ToolGroup implements IToolGroup {
     if (overwrite) {
       _configuration = configuration;
     } else {
-      _configuration = csUtils.deepMerge(
+      // We should not deep copy here, it is the job of the application to
+      // deep copy the configuration before passing it to the toolGroup, otherwise
+      // some strange appending behaviour happens for the arrays
+      _configuration = Object.assign(
         this._toolInstances[toolName].configuration,
         configuration
       );

package/src/store/ToolGroupManager/getToolGroupsWithToolName.ts

@@ -15,7 +15,9 @@ function getToolGroupsWithToolName(toolName: string): IToolGroup[] | [] {
     const toolGroupToolNames = Object.keys(toolOptions);
 
     for (let i = 0; i < toolGroupToolNames.length; i++) {
-      if (toolName !== toolGroupToolNames[i]) continue;
+      if (toolName !== toolGroupToolNames[i]) {
+        continue;
+      }
 
       /* filter out tools that don't have options */
       if (!toolOptions[toolName]) {