@cornerstonejs/tools 0.58.0 → 0.59.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "0.58.0",
+  "version": "0.59.1",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "9a2711ca032949079e7b96ba332b6e01b3316da8"
+  "gitHead": "9afbe1a42ec510313a29c0c5b6f953bb26813079"
 }

package/src/drawingSvg/drawHandles.ts

@@ -12,17 +12,19 @@ function drawHandles(
   handlePoints: Array<Types.Point2>,
   options = {}
 ): void {
-  const { color, handleRadius, width, lineWidth, fill, type } = Object.assign(
-    {
-      color: 'dodgerblue',
-      handleRadius: '6',
-      width: '2',
-      lineWidth: undefined,
-      fill: 'transparent',
-      type: 'circle',
-    },
-    options
-  );
+  const { color, handleRadius, width, lineWidth, fill, type, opacity } =
+    Object.assign(
+      {
+        color: 'dodgerblue',
+        handleRadius: '6',
+        width: '2',
+        lineWidth: undefined,
+        fill: 'transparent',
+        type: 'circle',
+        opacity: 1,
+      },
+      options
+    );
 
   // for supporting both lineWidth and width options
   const strokeWidth = lineWidth || width;
@@ -47,6 +49,7 @@ function drawHandles(
         stroke: color,
         fill,
         'stroke-width': strokeWidth,
+        opacity: opacity,
       };
     } else if (type === 'rect') {
       const handleRadiusFloat = parseFloat(handleRadius);
@@ -63,6 +66,7 @@ function drawHandles(
         fill,
         'stroke-width': strokeWidth,
         rx: `${side * 0.1}`,
+        opacity: opacity,
       };
     } else {
       throw new Error(`Unsupported handle type: ${type}`);

package/src/tools/CrosshairsTool.ts

@@ -22,6 +22,7 @@ import {
   getAnnotations,
   removeAnnotation,
 } from '../stateManagement/annotation/annotationState';
+
 import {
   drawCircle as drawCircleSvg,
   drawHandles as drawHandlesSvg,
@@ -61,6 +62,15 @@ interface ToolConfiguration {
     getReferenceLineDraggableRotatable?: (viewportId: string) => boolean;
     getReferenceLineSlabThicknessControlsOn?: (viewportId: string) => boolean;
     shadow?: boolean;
+    autopan?: {
+      enabled: boolean;
+      panSize: number;
+    };
+    mobile?: {
+      enabled: boolean;
+      opacity: number;
+      handleRadius: number;
+    };
   };
 }
 
@@ -113,11 +123,6 @@ const EPSILON = 1e-3;
 class CrosshairsTool extends AnnotationTool {
   static toolName;
 
-  // define the stroke width for mobile/web screen
-  private widthStrokeAnnotation = /Mobi|Android/i.test(navigator.userAgent)
-    ? 2.5
-    : 1;
-
   toolCenter: Types.Point3 = [0, 0, 0]; // NOTE: it is assumed that all the active/linked viewports share the same crosshair center.
   // This because the rotation operation rotates also all the other active/intersecting reference lines of the same angle
   _getReferenceLineColor?: (viewportId: string) => string;
@@ -152,6 +157,11 @@ class CrosshairsTool extends AnnotationTool {
         filterActorUIDsToSetSlabThickness: [],
         // blend mode for slabThickness modifications
         slabThicknessBlendMode: Enums.BlendModes.MAXIMUM_INTENSITY_BLEND,
+        mobile: {
+          enabled: false,
+          opacity: 0.8,
+          handleRadius: 9,
+        },
       },
     }
   ) {
@@ -476,7 +486,6 @@ class CrosshairsTool extends AnnotationTool {
   ): void => {
     const eventDetail = evt.detail;
     const { element } = eventDetail;
-
     annotation.highlighted = true;
 
     // NOTE: handle index or coordinates are not used when dragging.
@@ -523,7 +532,6 @@ class CrosshairsTool extends AnnotationTool {
     const eventDetail = evt.detail;
     const { element } = eventDetail;
     annotation.highlighted = true;
-
     this._activateModify(element);
 
     hideElementCursor(element);
@@ -1104,9 +1112,11 @@ class CrosshairsTool extends AnnotationTool {
         otherViewport.id
       );
       const viewportDraggableRotatable =
-        this._getReferenceLineDraggableRotatable(otherViewport.id);
+        this._getReferenceLineDraggableRotatable(otherViewport.id) ||
+        this.configuration.mobile?.enabled;
       const viewportSlabThicknessControlsOn =
-        this._getReferenceLineSlabThicknessControlsOn(otherViewport.id);
+        this._getReferenceLineSlabThicknessControlsOn(otherViewport.id) ||
+        this.configuration.mobile?.enabled;
       const selectedViewportId = data.activeViewportIds.find(
         (id) => id === otherViewport.id
       );
@@ -1114,7 +1124,7 @@ class CrosshairsTool extends AnnotationTool {
       let color =
         viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
 
-      let lineWidth = this.widthStrokeAnnotation;
+      let lineWidth = 1;
 
       const lineActive =
         data.handles.activeOperation !== null &&
@@ -1224,7 +1234,7 @@ class CrosshairsTool extends AnnotationTool {
         );
 
         if (
-          lineActive &&
+          (lineActive || this.configuration.mobile?.enabled) &&
           !rotHandlesActive &&
           !slabThicknessHandlesActive &&
           viewportDraggableRotatable &&
@@ -1239,7 +1249,12 @@ class CrosshairsTool extends AnnotationTool {
             rotationHandles,
             {
               color,
-              handleRadius: 3,
+              handleRadius: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.handleRadius
+                : 3,
+              opacity: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.opacity
+                : 1,
               type: 'circle',
             }
           );
@@ -1251,7 +1266,12 @@ class CrosshairsTool extends AnnotationTool {
             slabThicknessHandles,
             {
               color,
-              handleRadius: 3,
+              handleRadius: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.handleRadius
+                : 3,
+              opacity: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.opacity
+                : 1,
               type: 'rect',
             }
           );
@@ -1270,7 +1290,12 @@ class CrosshairsTool extends AnnotationTool {
             rotationHandles,
             {
               color,
-              handleRadius: 3,
+              handleRadius: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.handleRadius
+                : 3,
+              opacity: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.opacity
+                : 1,
               type: 'circle',
             }
           );
@@ -1289,7 +1314,12 @@ class CrosshairsTool extends AnnotationTool {
             slabThicknessHandles,
             {
               color,
-              handleRadius: 3,
+              handleRadius: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.handleRadius
+                : 3,
+              opacity: this.configuration.mobile?.enabled
+                ? this.configuration.mobile?.opacity
+                : 1,
               type: 'rect',
             }
           );
@@ -1903,7 +1933,10 @@ class CrosshairsTool extends AnnotationTool {
   };
 
   _activateModify = (element) => {
-    state.isInteractingWithTool = true;
+    // mobile sometimes has lingering interaction even when touchEnd triggers
+    // this check allows for multiple handles to be active which doesn't affect
+    // tool usage.
+    state.isInteractingWithTool = !this.configuration.mobile?.enabled;
 
     element.addEventListener(Events.MOUSE_UP, this._endCallback);
     element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);

package/src/tools/displayTools/Labelmap/labelmapDisplay.ts

@@ -410,7 +410,7 @@ function _needsTransferFunctionUpdate(
     renderFill,
     renderOutline,
     outlineWidth,
-    segmentColor,
+    segmentColor: segmentColor.slice(), // Create a copy
     segmentsHidden: new Set(segmentsHidden), // Create a copy
   });