fix: shadow for annotations and stack viewport targetImageIdIndex bug (…

…#189)

* fix iop ipp window level bug and export svg

* fix: shadow for drawLine SVG

* fix: stack viewport bugs

* updated api

* review comments

* try to fix netlify

* try to fix netlify

* try to fix netlify

* update api

common/reviews/api/tools.api.md

@@ -1117,11 +1117,51 @@ declare namespace cursors {
         elementCursor,
         registerCursor,
         CursorNames,
+        CursorSVG,
         setCursorForElement
     }
 }
 export { cursors }
 
+// @public (undocumented)
+const CursorSVG: {
+    Angle: SVGCursorDescriptor;
+    ArrowAnnotate: SVGCursorDescriptor;
+    Bidirectional: SVGCursorDescriptor;
+    CobbAngle: SVGCursorDescriptor;
+    CircleROI: SVGCursorDescriptor;
+    EllipticalROI: SVGCursorDescriptor;
+    FreehandROI: SVGCursorDescriptor;
+    FreehandROISculptor: SVGCursorDescriptor;
+    Length: SVGCursorDescriptor;
+    Probe: SVGCursorDescriptor;
+    RectangleROI: SVGCursorDescriptor;
+    TextMarker: SVGCursorDescriptor;
+    Crosshairs: SVGCursorDescriptor;
+    Eraser: SVGCursorDescriptor;
+    Magnify: SVGCursorDescriptor;
+    Pan: SVGCursorDescriptor;
+    Rotate: SVGCursorDescriptor;
+    StackScroll: SVGCursorDescriptor;
+    WindowLevelRegion: SVGCursorDescriptor;
+    WindowLevel: SVGCursorDescriptor;
+    Zoom: SVGCursorDescriptor;
+    SegmentationFreeHandEraseInside: SVGCursorDescriptor;
+    SegmentationFreeHandFillInside: SVGCursorDescriptor;
+    SegmentationFreeHandEraseOutside: SVGCursorDescriptor;
+    SegmentationFreeHandFillOutside: SVGCursorDescriptor;
+    SegmentationRectangleEraseInside: SVGCursorDescriptor;
+    RectangleScissor: SVGCursorDescriptor;
+    'RectangleScissor.FILL_INSIDE': SVGCursorDescriptor;
+    'RectangleScissor.FILL_OUTSIDE': SVGCursorDescriptor;
+    'RectangleScissor.ERASE_OUTSIDE': SVGCursorDescriptor;
+    'RectangleScissor.ERASE_INSIDE': SVGCursorDescriptor;
+    CircleScissor: SVGCursorDescriptor;
+    'CircleScissor.FILL_INSIDE': SVGCursorDescriptor;
+    'CircleScissor.ERASE_OUTSIDE': SVGCursorDescriptor;
+    'CircleScissor.FILL_OUTSIDE': SVGCursorDescriptor;
+};
+
 // @public (undocumented)
 interface CustomEvent_2<T = any> extends Event {
     readonly detail: T;

packages/core/src/RenderingEngine/StackViewport.ts

@@ -417,8 +417,7 @@ class StackViewport extends Viewport implements IStackViewport {
     // todo: some tools rely on the modality
     this.modality = modality;
 
-    let imagePlaneModule = metaData.get('imagePlaneModule', imageId);
-    imagePlaneModule = this._getImagePlaneModule(imagePlaneModule);
+    let imagePlaneModule = this._getImagePlaneModule(imageId);
 
     // Todo: for now, it gives error for getImageData
     if (!this.useCPURendering) {
@@ -1304,7 +1303,7 @@ class StackViewport extends Viewport implements IStackViewport {
 
     const [xSpacing, ySpacing] = imageData.getSpacing();
     const [xVoxels, yVoxels] = imageData.getDimensions();
-    const imagePlaneModule = metaData.get('imagePlaneModule', image.imageId);
+    const imagePlaneModule = this._getImagePlaneModule(image.imageId);
     const direction = imageData.getDirection();
     const rowCosines = direction.slice(0, 3);
     const columnCosines = direction.slice(3, 6);
@@ -1315,8 +1314,6 @@ class StackViewport extends Viewport implements IStackViewport {
       ySpacing !== image.columnPixelSpacing ||
       xVoxels !== image.columns ||
       yVoxels !== image.rows ||
-      !imagePlaneModule.rowCosines ||
-      !imagePlaneModule.columnCosines ||
       !isEqual(imagePlaneModule.rowCosines, <Point3>rowCosines) ||
       !isEqual(imagePlaneModule.columnCosines, <Point3>columnCosines)
     ) {
@@ -1332,7 +1329,7 @@ class StackViewport extends Viewport implements IStackViewport {
    * @param image - Cornerstone Image object
    */
   private _updateVTKImageDataFromCornerstoneImage(image: IImage): void {
-    const imagePlaneModule = metaData.get('imagePlaneModule', image.imageId);
+    const imagePlaneModule = this._getImagePlaneModule(image.imageId);
     let origin = imagePlaneModule.imagePositionPatient;
 
     if (origin == null) {
@@ -1811,6 +1808,9 @@ class StackViewport extends Viewport implements IStackViewport {
       imageIdIndex
     );
 
+    // update the target imageIdIndex for it to not interfere
+    // with the scroll event
+    this.targetImageIdIndex = imageIdIndex;
     return imageId;
   }
 
@@ -1922,7 +1922,7 @@ class StackViewport extends Viewport implements IStackViewport {
   public async setImageIdIndex(imageIdIndex: number): Promise<string> {
     // If we are already on this imageId index, stop here
     if (this.currentImageIdIndex === imageIdIndex) {
-      return;
+      return this.getCurrentImageId();
     }
 
     // Otherwise, get the imageId and attempt to display it
@@ -2459,9 +2459,9 @@ class StackViewport extends Viewport implements IStackViewport {
   }
 
   // create default values for imagePlaneModule if values are undefined
-  private _getImagePlaneModule(
-    imagePlaneModule: ImagePlaneModule
-  ): ImagePlaneModule {
+  private _getImagePlaneModule(imageId: string): ImagePlaneModule {
+    const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
+
     const newImagePlaneModule: ImagePlaneModule = {
       ...imagePlaneModule,
     };

packages/docs/netlify.toml

@@ -9,7 +9,7 @@
   publish = "build"
 
   # Rebuild if anything changes, don't scope to this folder
-  # ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../../"
+  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../"
 
 # COMMENT: NODE_VERSION in root `.nvmrc` takes priority
 # COMMENT: Why we specify YARN_FLAGS: https://www.netlify.com/docs/build-gotchas/#yarn

packages/docs/package.json

@@ -11,7 +11,7 @@
     "docs": "cross-env NODE_OPTIONS=--max_old_space_size=16384 docusaurus start --port 3333",
     "dev": "yarn run docs",
     "dev:docs": "yarn run docs:ci && yarn run start",
-    "docs:ci": "cross-env NODE_OPTIONS=--max_old_space_size=16384 && yarn run prep && yarn run build:docs",
+    "docs:ci": "cross-env NODE_OPTIONS=--max_old_space_size=16384 && yarn run prep && cd docs && yarn run build:docs",
     "docs:ci-no-tests": "cross-env NODE_OPTIONS=--max_old_space_size=16384 && yarn run prep-no-tests && yarn run build:docs",
     "dev:watch": "cross-env NODE_OPTIONS=--max_old_space_size=16384 TYPEDOC_WATCH=true docusaurus start",
     "swizzle": "docusaurus swizzle",

packages/tools/src/cursors/SVGCursorDescriptor.ts

@@ -39,7 +39,7 @@ const SCISSOR_ICON = `<path fill="{{color}}" d="M82.89,10a12.09,12.09,0,0,0-16.8
 const RECTANGLE_ICON = `<path fill="{{color}}" d="M8.86,2.25V66.08H72.69V2.25H8.86ZM65.28,58.67h-49v-49h49v49Z" transform="translate(-8.86 -2.25)"/>`;
 const CIRCLE_ICON = `<path fill="{{color}}" d="M40.77,2.25A31.92,31.92,0,1,0,72.69,34.16,31.92,31.92,0,0,0,40.77,2.25Zm0,57.63A25.71,25.71,0,1,1,66.48,34.16,25.71,25.71,0,0,1,40.77,59.87Z" transform="translate(-8.86 -2.25)"/>`;
 
-const DefinedDescriptorsMap = {
+const CursorSVG = {
   Angle: extend(BASE, {
     iconContent: `<path fill="{{color}}" d="M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50
     50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23
@@ -339,27 +339,27 @@ const DefinedDescriptorsMap = {
    * Segmentation Cursors
    */
 
-  segmentationFreeHandEraseInside: extend(BASE, {
+  SegmentationFreeHandEraseInside: extend(BASE, {
     iconContent: `${SCISSOR_ICON} ${MINUS_RECT}`,
     viewBox: SEGMENTATION_CURSOR_BOUNDARIES,
   }),
 
-  segmentationFreeHandFillInside: extend(BASE, {
+  SegmentationFreeHandFillInside: extend(BASE, {
     iconContent: `${SCISSOR_ICON} ${PLUS_RECT}`,
     viewBox: SEGMENTATION_CURSOR_BOUNDARIES,
   }),
 
-  segmentationFreeHandEraseOutside: extend(BASE, {
+  SegmentationFreeHandEraseOutside: extend(BASE, {
     iconContent: `${SCISSOR_ICON} ${MINUS_RECT}`,
     viewBox: SEGMENTATION_CURSOR_BOUNDARIES,
   }),
 
-  segmentationFreeHandFillOutside: extend(BASE, {
+  SegmentationFreeHandFillOutside: extend(BASE, {
     iconContent: `${SCISSOR_ICON} ${PLUS_RECT}`,
     viewBox: SEGMENTATION_CURSOR_BOUNDARIES,
   }),
 
-  segmentationRectangleEraseInside: extend(BASE, {
+  SegmentationRectangleEraseInside: extend(BASE, {
     iconContent: `${RECTANGLE_ICON} ${MINUS_RECT}`,
     viewBox: SEGMENTATION_CURSOR_BOUNDARIES,
   }),
@@ -435,7 +435,7 @@ function registerCursor(
   iconContent: string,
   viewBox: { x: number; y: number }
 ) {
-  DefinedDescriptorsMap[toolName] = extend(BASE, {
+  CursorSVG[toolName] = extend(BASE, {
     iconContent,
     viewBox,
   });
@@ -444,14 +444,19 @@ function registerCursor(
 function getDefinedSVGCursorDescriptor(
   name: string
 ): SVGCursorDescriptor | undefined {
-  if (Object.prototype.hasOwnProperty.call(DefinedDescriptorsMap, name)) {
-    return DefinedDescriptorsMap[name];
+  if (Object.prototype.hasOwnProperty.call(CursorSVG, name)) {
+    return CursorSVG[name];
   }
 }
 
 /*
  * Exports
  */
-const svgCursorNames = Object.keys(DefinedDescriptorsMap);
+const svgCursorNames = Object.keys(CursorSVG);
 
-export { getDefinedSVGCursorDescriptor, registerCursor, svgCursorNames };
+export {
+  getDefinedSVGCursorDescriptor,
+  registerCursor,
+  svgCursorNames,
+  CursorSVG,
+};

packages/tools/src/cursors/index.ts

@@ -3,7 +3,11 @@ import ImageMouseCursor from './ImageMouseCursor';
 import SVGMouseCursor from './SVGMouseCursor';
 import * as elementCursor from './elementCursor';
 import setCursorForElement from './setCursorForElement';
-import { registerCursor, svgCursorNames } from './SVGCursorDescriptor';
+import {
+  registerCursor,
+  svgCursorNames,
+  CursorSVG,
+} from './SVGCursorDescriptor';
 
 // Todo: this should be enum
 const CursorNames = [...svgCursorNames, ...standardCursorNames];
@@ -15,5 +19,6 @@ export {
   elementCursor,
   registerCursor,
   CursorNames,
+  CursorSVG,
   setCursorForElement,
 };

packages/tools/src/drawingSvg/drawLine.ts

@@ -18,12 +18,13 @@ export default function drawLine(
     return;
   }
 
-  const { color, width, lineWidth, lineDash } = Object.assign(
+  const { color, width, lineWidth, lineDash, shadow } = Object.assign(
     {
       color: 'dodgerblue',
       width: '2',
       lineWidth: undefined,
       lineDash: undefined,
+      shadow: undefined,
     },
     options
   );
@@ -34,13 +35,15 @@ export default function drawLine(
   const svgns = 'http://www.w3.org/2000/svg';
   const svgNodeHash = _getHash(annotationUID, 'line', lineUID);
   const existingLine = svgDrawingHelper.getSvgNode(svgNodeHash);
+  const dropShadowStyle = shadow ? 'filter:url(#shadow);' : '';
 
   const attributes = {
     x1: `${start[0]}`,
     y1: `${start[1]}`,
     x2: `${end[0]}`,
     y2: `${end[1]}`,
     stroke: color,
+    style: dropShadowStyle,
     'stroke-width': strokeWidth,
     'stroke-dasharray': lineDash,
   };

packages/tools/src/stateManagement/annotation/config/ToolStyle.ts

@@ -34,6 +34,7 @@ class ToolStyle {
       colorLocked: 'rgb(255, 255, 0)',
       lineWidth: '1',
       lineDash: '',
+      shadow: true,
       textBoxFontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
       textBoxFontSize: '14px',
       textBoxColor: 'rgb(255, 255, 0)',
@@ -43,6 +44,7 @@ class ToolStyle {
       textBoxBackground: '',
       textBoxLinkLineWidth: '1',
       textBoxLinkLineDash: '2,3',
+      textBoxShadow: true,
     };
 
     this._initializeConfig(defaultConfig);

packages/tools/src/tools/annotation/BidirectionalTool.ts

@@ -109,7 +109,6 @@ class BidirectionalTool extends AnnotationTool {
     defaultToolProps: ToolProps = {
       supportedInteractionTypes: ['Mouse', 'Touch'],
       configuration: {
-        shadow: true,
         preventHandleOutsideImage: false,
       },
     }
@@ -993,6 +992,7 @@ class BidirectionalTool extends AnnotationTool {
       const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotation);
       const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
       const color = this.getStyle('color', styleSpecifier, annotation);
+      const shadow = this.getStyle('shadow', styleSpecifier, annotation);
 
       // If cachedStats does not exist, or the unit is missing (as part of import/hydration etc.),
       // force to recalculate the stats from the points
@@ -1061,6 +1061,7 @@ class BidirectionalTool extends AnnotationTool {
           color,
           lineDash,
           lineWidth,
+          shadow,
         }
       );
 
@@ -1075,6 +1076,7 @@ class BidirectionalTool extends AnnotationTool {
           color,
           lineDash,
           lineWidth,
+          shadow,
         }
       );
 

packages/tools/src/tools/annotation/LengthTool.ts

@@ -108,7 +108,6 @@ class LengthTool extends AnnotationTool {
     defaultToolProps: ToolProps = {
       supportedInteractionTypes: ['Mouse', 'Touch'],
       configuration: {
-        shadow: true,
         preventHandleOutsideImage: false,
       },
     }
@@ -609,9 +608,11 @@ class LengthTool extends AnnotationTool {
 
       styleSpecifier.annotationUID = annotationUID;
 
+      // Todo: move these into annotationTool class
       const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotation);
       const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
       const color = this.getStyle('color', styleSpecifier, annotation);
+      const shadow = this.getStyle('shadow', styleSpecifier, annotation);
 
       const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
 
@@ -677,6 +678,7 @@ class LengthTool extends AnnotationTool {
           color,
           width: lineWidth,
           lineDash,
+          shadow,
         }
       );
 

packages/tools/src/tools/base/AnnotationTool.ts

@@ -442,6 +442,7 @@ abstract class AnnotationTool extends BaseTool {
       ),
       fontSize: this.getStyle('textBoxFontSize', specifications, annotation),
       color: this.getStyle('textBoxColor', specifications, annotation),
+      shadow: this.getStyle('textBoxShadow', specifications, annotation),
       background: this.getStyle(
         'textBoxBackground',
         specifications,