@cornerstonejs/tools 1.14.4 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.14.4",
+  "version": "1.15.1",
   "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": "^1.14.4",
+    "@cornerstonejs/core": "^1.15.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "96dc1772a2f77a7626c07e19434b42753e9d4188"
+  "gitHead": "39fc0a489df073eeee5c1c735f78a70f57258a4d"
 }

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/tools/annotation/AngleTool.ts

@@ -745,6 +745,21 @@ class AngleTool extends AnnotationTool {
         continue;
       }
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
 
       if (!data.handles.textBox.hasMoved) {
@@ -768,7 +783,7 @@ class AngleTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/ArrowAnnotateTool.ts

@@ -776,6 +776,21 @@ class ArrowAnnotateTool extends AnnotationTool {
         continue;
       }
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       // Need to update to sync w/ annotation while unlinked/not moved
       if (!data.handles.textBox.hasMoved) {
         // linked to the point that doesn't have the arrowhead by default
@@ -798,7 +813,7 @@ class ArrowAnnotateTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/BidirectionalTool.ts

@@ -1162,11 +1162,26 @@ class BidirectionalTool extends AnnotationTool {
 
       renderStatus = true;
 
-      const textLines = this.configuration.getTextLines(data, targetId);
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
 
+      const textLines = this.configuration.getTextLines(data, targetId);
       if (!textLines || textLines.length === 0) {
         continue;
       }
+
       let canvasTextBoxCoords;
 
       if (!data.handles.textBox.hasMoved) {
@@ -1189,7 +1204,7 @@ class BidirectionalTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/CircleROITool.ts

@@ -826,6 +826,21 @@ class CircleROITool extends AnnotationTool {
 
       renderStatus = true;
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
       if (!textLines || textLines.length === 0) {
         continue;
@@ -854,7 +869,7 @@ class CircleROITool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/CobbAngleTool.ts

@@ -770,6 +770,21 @@ class CobbAngleTool extends AnnotationTool {
         continue;
       }
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
 
       if (!data.handles.textBox.hasMoved) {
@@ -792,7 +807,7 @@ class CobbAngleTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/EllipticalROITool.ts

@@ -950,6 +950,21 @@ class EllipticalROITool extends AnnotationTool {
 
       renderStatus = true;
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
       if (!textLines || textLines.length === 0) {
         continue;
@@ -978,7 +993,7 @@ class EllipticalROITool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/LengthTool.ts

@@ -732,6 +732,21 @@ class LengthTool extends AnnotationTool {
         return renderStatus;
       }
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
 
       // Need to update to sync with annotation while unlinked/not moved
@@ -755,7 +770,7 @@ class LengthTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/PlanarFreehandROITool.ts

@@ -882,6 +882,17 @@ class PlanarFreehandROITool extends AnnotationTool {
     const data = annotation.data;
     const targetId = this.getTargetId(viewport);
 
+    const styleSpecifier: AnnotationStyle.StyleSpecifier = {
+      toolGroupId: this.toolGroupId,
+      toolName: this.getToolName(),
+      viewportId: enabledElement.viewport.id,
+    };
+
+    const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+    if (!options.visibility) {
+      return;
+    }
+
     const textLines = this.configuration.getTextLines(data, targetId);
     if (!textLines || textLines.length === 0) {
       return;
@@ -901,12 +912,6 @@ class PlanarFreehandROITool extends AnnotationTool {
       data.handles.textBox.worldPosition
     );
 
-    const styleSpecifier: AnnotationStyle.StyleSpecifier = {
-      toolGroupId: this.toolGroupId,
-      toolName: this.getToolName(),
-      viewportId: enabledElement.viewport.id,
-    };
-
     const textBoxUID = '1';
     const boundingBox = drawLinkedTextBox(
       svgDrawingHelper,
@@ -916,7 +921,7 @@ class PlanarFreehandROITool extends AnnotationTool {
       textBoxPosition,
       canvasCoordinates,
       {},
-      this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+      options
     );
 
     const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/ProbeTool.ts

@@ -527,6 +527,11 @@ class ProbeTool extends AnnotationTool {
 
       renderStatus = true;
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
       if (textLines) {
         const textCanvasCoordinates = [
@@ -541,7 +546,7 @@ class ProbeTool extends AnnotationTool {
           textUID,
           textLines,
           [textCanvasCoordinates[0], textCanvasCoordinates[1]],
-          this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+          options
         );
       }
     }

package/src/tools/annotation/RectangleROITool.ts

@@ -791,6 +791,21 @@ class RectangleROITool extends AnnotationTool {
 
       renderStatus = true;
 
+      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+      if (!options.visibility) {
+        data.handles.textBox = {
+          hasMoved: false,
+          worldPosition: <Types.Point3>[0, 0, 0],
+          worldBoundingBox: {
+            topLeft: <Types.Point3>[0, 0, 0],
+            topRight: <Types.Point3>[0, 0, 0],
+            bottomLeft: <Types.Point3>[0, 0, 0],
+            bottomRight: <Types.Point3>[0, 0, 0],
+          },
+        };
+        continue;
+      }
+
       const textLines = this.configuration.getTextLines(data, targetId);
       if (!textLines || textLines.length === 0) {
         continue;
@@ -816,7 +831,7 @@ class RectangleROITool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/base/AnnotationTool.ts

@@ -257,6 +257,11 @@ abstract class AnnotationTool extends AnnotationDisplayTool {
     // for the textBox.
 
     return {
+      visibility: this.getStyle(
+        'textBoxVisibility',
+        specifications,
+        annotation
+      ),
       fontFamily: this.getStyle(
         'textBoxFontFamily',
         specifications,

package/src/types/CINETypes.ts

@@ -1,5 +1,3 @@
-import { Types } from '@cornerstonejs/core';
-
 type PlayClipOptions = {
   framesPerSecond?: number;
   frameTimeVector?: number[];
@@ -7,6 +5,11 @@ type PlayClipOptions = {
   loop?: boolean;
   dynamicCineEnabled?: boolean;
   frameTimeVectorSpeedMultiplier?: number;
+  // How many CINE frames to wait for a rendered event to occur before
+  // trying to display the image after the next one
+  // A CINE frame is attempted every 1 / fps seconds
+  // The default is 30 tries, or 1.25 seconds at 24 fps
+  waitForRendered?: number;
 };
 
 interface ToolData {
@@ -26,6 +29,9 @@ type CinePlayContext = {
   get numScrollSteps(): number;
   get currentStepIndex(): number;
   get frameTimeVectorEnabled(): boolean;
+  // How many times has the wait for rendered been tried without showing
+  // the next image.
+  waitForRenderedCount?: number;
   scroll(delta: number): void;
 };
 

package/src/utilities/cine/playClip.ts

@@ -6,6 +6,7 @@ import {
   VolumeViewport,
   cache,
   BaseVolumeViewport,
+  Enums,
 } from '@cornerstonejs/core';
 
 import { Types } from '@cornerstonejs/core';
@@ -14,6 +15,7 @@ import { addToolState, getToolState } from './state';
 import { CINETypes } from '../../types';
 import scroll from '../scroll';
 
+const { ViewportStatus } = Enums;
 const { triggerEvent } = csUtils;
 
 const debounced = true;
@@ -315,7 +317,8 @@ function _getVolumeFromViewport(viewport): Types.IImageVolume {
 }
 
 function _createStackViewportCinePlayContext(
-  viewport: StackViewport
+  viewport: StackViewport,
+  waitForRendered: number
 ): CINETypes.CinePlayContext {
   const imageIds = viewport.getImageIds();
 
@@ -330,7 +333,16 @@ function _createStackViewportCinePlayContext(
       // It is always in acquired orientation
       return true;
     },
+    waitForRenderedCount: 0,
     scroll(delta: number): void {
+      if (
+        this.waitForRenderedCount <= waitForRendered &&
+        viewport.viewportStatus !== ViewportStatus.RENDERED
+      ) {
+        this.waitForRenderedCount++;
+        return;
+      }
+      this.waitForRenderedCount = 0;
       scroll(viewport, { delta, debounceLoading: debounced });
     },
   };
@@ -419,7 +431,10 @@ function _createCinePlayContext(
   playClipOptions: CINETypes.PlayClipOptions
 ): CINETypes.CinePlayContext {
   if (viewport instanceof StackViewport) {
-    return _createStackViewportCinePlayContext(viewport);
+    return _createStackViewportCinePlayContext(
+      viewport,
+      playClipOptions.waitForRendered ?? 30
+    );
   }
 
   if (viewport instanceof VolumeViewport) {