feat: 🎸 Dashed rendering options for tools with lines/handles (#1254)

cornerstonejs · Jun 24, 2020 · aa54b30 · aa54b30
1 parent c07c3bf
commit aa54b30
Show file tree

Hide file tree

Showing 14 changed files with 208 additions and 76 deletions.
diff --git a/src/drawing/drawArrow.js b/src/drawing/drawArrow.js
@@ -12,9 +12,10 @@ import drawJoinedLines from './drawJoinedLines.js';
  * @param  {Object} end       The end position.
  * @param  {string} color     The color of the arrow.
  * @param  {number} lineWidth The width of the arrow line.
+ * @param  {number[]|| undefined} [lineDash] The optional lineDash style.
  * @returns {undefined}
  */
-export default function(context, start, end, color, lineWidth) {
+export default function(context, start, end, color, lineWidth, lineDash) {
   // Variables to be used when creating the arrow
   const headLength = 10;
 
@@ -26,6 +27,10 @@ export default function(context, start, end, color, lineWidth) {
     lineWidth,
   };
 
+  if (lineDash) {
+    options.lineDash = lineDash;
+  }
+
   drawLine(context, undefined, start, end, options, 'canvas');
   options = {
     color,

diff --git a/src/drawing/drawHandles.js b/src/drawing/drawHandles.js
@@ -45,30 +45,29 @@ export default function(context, evtDetail, handles, options = {}) {
       : toolStyle.getToolWidth();
     const fillStyle = options.fill;
 
-    path(
-      context,
-      {
-        lineWidth,
-        fillStyle,
-      },
-      context => {
-        const handleCanvasCoords = external.cornerstone.pixelToCanvas(
-          element,
-          handle
-        );
+    const pathOptions = { lineWidth, fillStyle };
 
-        // Handle's radisu, then tool's radius, then default radius
-        const handleRadius =
-          handle.radius || options.handleRadius || state.handleRadius;
+    if (options.lineDash) {
+      pathOptions.lineDash = options.lineDash;
+    }
+
+    path(context, pathOptions, context => {
+      const handleCanvasCoords = external.cornerstone.pixelToCanvas(
+        element,
+        handle
+      );
+
+      // Handle's radisu, then tool's radius, then default radius
+      const handleRadius =
+        handle.radius || options.handleRadius || state.handleRadius;
 
-        context.arc(
-          handleCanvasCoords.x,
-          handleCanvasCoords.y,
-          handleRadius,
-          0,
-          2 * Math.PI
-        );
-      }
-    );
+      context.arc(
+        handleCanvasCoords.x,
+        handleCanvasCoords.y,
+        handleRadius,
+        0,
+        2 * Math.PI
+      );
+    });
   }
 }
diff --git a/src/store/modules/globalConfigurationModule.js b/src/store/modules/globalConfigurationModule.js
@@ -4,6 +4,7 @@ const configuration = {
   globalToolSyncEnabled: false,
   showSVGCursors: false,
   autoResizeViewports: true,
+  lineDash: [4, 4],
 };
 
 export default {

diff --git a/src/tools/annotation/AngleTool.js b/src/tools/annotation/AngleTool.js
@@ -27,6 +27,7 @@ import triggerEvent from '../../util/triggerEvent.js';
 import EVENTS from '../../events.js';
 import getPixelSpacing from '../../util/getPixelSpacing';
 import throttle from '../../util/throttle';
+import { getModule } from '../../store/index';
 
 /**
  * @public
@@ -46,6 +47,7 @@ export default class AngleTool extends BaseAnnotationTool {
       svgCursor: angleCursor,
       configuration: {
         drawHandles: true,
+        renderDashed: false,
       },
     };
 
@@ -137,9 +139,14 @@ export default class AngleTool extends BaseAnnotationTool {
   renderToolData(evt) {
     const eventData = evt.detail;
     const enabledElement = eventData.enabledElement;
-    const { handleRadius, drawHandlesOnHover } = this.configuration;
+    const {
+      handleRadius,
+      drawHandlesOnHover,
+      renderDashed,
+    } = this.configuration;
     // If we have no toolData for this element, return immediately as there is nothing to do
     const toolData = getToolState(evt.currentTarget, this.name);
+    const lineDash = getModule('globalConfiguration').configuration.lineDash;
 
     if (!toolData) {
       return;
@@ -174,12 +181,18 @@ export default class AngleTool extends BaseAnnotationTool {
           data.handles.middle
         );
 
+        const lineOptions = { color };
+
+        if (renderDashed) {
+          lineOptions.lineDash = lineDash;
+        }
+
         drawJoinedLines(
           context,
           eventData.element,
           data.handles.start,
           [data.handles.middle, data.handles.end],
-          { color }
+          lineOptions
         );
 
         // Draw the handles

diff --git a/src/tools/annotation/ArrowAnnotateTool.js b/src/tools/annotation/ArrowAnnotateTool.js
@@ -22,6 +22,7 @@ import drawArrow from './../../drawing/drawArrow.js';
 import drawHandles from './../../drawing/drawHandles.js';
 import { textBoxWidth } from './../../drawing/drawTextBox.js';
 import { arrowAnnotateCursor } from '../cursors/index.js';
+import { getModule } from '../../store/index';
 
 /**
  * @public
@@ -41,6 +42,7 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
         drawHandles: false,
         drawHandlesOnHover: true,
         arrowFirst: true,
+        renderDashed: false,
       },
       svgCursor: arrowAnnotateCursor,
     };
@@ -97,7 +99,11 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
 
   renderToolData(evt) {
     const { element, enabledElement } = evt.detail;
-    const { handleRadius, drawHandlesOnHover } = this.configuration;
+    const {
+      handleRadius,
+      drawHandlesOnHover,
+      renderDashed,
+    } = this.configuration;
 
     // If we have no toolData for this element, return immediately as there is nothing to do
     const toolData = getToolState(element, this.name);
@@ -112,6 +118,11 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
 
     const lineWidth = toolStyle.getToolWidth();
 
+    let lineDash;
+    if (renderDashed) {
+      lineDash = getModule('globalConfiguration').configuration.lineDash;
+    }
+
     for (let i = 0; i < toolData.data.length; i++) {
       const data = toolData.data[i];
 
@@ -141,15 +152,17 @@ export default class ArrowAnnotateTool extends BaseAnnotationTool {
             handleEndCanvas,
             handleStartCanvas,
             color,
-            lineWidth
+            lineWidth,
+            lineDash
           );
         } else {
           drawArrow(
             context,
             handleStartCanvas,
             handleEndCanvas,
             color,
-            lineWidth
+            lineWidth,
+            lineDash
           );
         }
 

diff --git a/src/tools/annotation/BidirectionalTool.js b/src/tools/annotation/BidirectionalTool.js
@@ -37,6 +37,7 @@ export default class BidirectionalTool extends BaseAnnotationTool {
         shadow: '',
         drawHandles: true,
         drawHandlesOnHover: true,
+        renderDashed: false,
         additionalData: [],
       },
       svgCursor: bidirectionalCursor,

diff --git a/src/tools/annotation/CircleRoiTool.js b/src/tools/annotation/CircleRoiTool.js
@@ -5,6 +5,7 @@ import BaseAnnotationTool from '../base/BaseAnnotationTool.js';
 import { getToolState } from './../../stateManagement/toolState.js';
 import toolStyle from './../../stateManagement/toolStyle.js';
 import toolColors from './../../stateManagement/toolColors.js';
+import { getModule } from '../../store/index';
 
 // Drawing
 import {
@@ -43,6 +44,9 @@ export default class CircleRoiTool extends BaseAnnotationTool {
       name: 'CircleRoi',
       supportedInteractionTypes: ['Mouse', 'Touch'],
       svgCursor: circleRoiCursor,
+      configuration: {
+        renderDashed: false,
+      },
     };
 
     super(props, defaultProps);
@@ -164,9 +168,14 @@ export default class CircleRoiTool extends BaseAnnotationTool {
     const eventData = evt.detail;
     const { image, element, canvasContext } = eventData;
     const lineWidth = toolStyle.getToolWidth();
-    const { handleRadius, drawHandlesOnHover } = this.configuration;
+    const {
+      handleRadius,
+      drawHandlesOnHover,
+      renderDashed,
+    } = this.configuration;
     const newContext = getNewContext(canvasContext.canvas);
     const { rowPixelSpacing, colPixelSpacing } = getPixelSpacing(image);
+    const lineDash = getModule('globalConfiguration').configuration.lineDash;
 
     // Meta
     const seriesModule =
@@ -209,15 +218,19 @@ export default class CircleRoiTool extends BaseAnnotationTool {
         // Calculating the radius where startCanvas is the center of the circle to be drawn
         const radius = getDistance(startCanvas, endCanvas);
 
+        const circleOptions = { color };
+
+        if (renderDashed) {
+          circleOptions.lineDash = lineDash;
+        }
+
         // Draw Circle
         drawCircle(
           context,
           element,
           data.handles.start,
           radius,
-          {
-            color,
-          },
+          circleOptions,
           'pixel'
         );
 

diff --git a/src/tools/annotation/CobbAngleTool.js b/src/tools/annotation/CobbAngleTool.js
@@ -27,6 +27,7 @@ import { cobbAngleCursor } from '../cursors/index.js';
 import triggerEvent from '../../util/triggerEvent.js';
 import throttle from '../../util/throttle';
 import getPixelSpacing from '../../util/getPixelSpacing';
+import { getModule } from '../../store/index';
 
 /**
  * @public
@@ -43,6 +44,7 @@ export default class CobbAngleTool extends BaseAnnotationTool {
       svgCursor: cobbAngleCursor,
       configuration: {
         drawHandles: true,
+        renderDashed: false,
       },
     };
 
@@ -159,7 +161,11 @@ export default class CobbAngleTool extends BaseAnnotationTool {
 
   renderToolData(evt) {
     const eventData = evt.detail;
-    const { handleRadius, drawHandlesOnHover } = this.configuration;
+    const {
+      handleRadius,
+      drawHandlesOnHover,
+      renderDashed,
+    } = this.configuration;
     // If we have no toolData for this element, return immediately as there is nothing to do
     const toolData = getToolState(evt.currentTarget, this.name);
 
@@ -171,6 +177,7 @@ export default class CobbAngleTool extends BaseAnnotationTool {
     const context = getNewContext(eventData.canvasContext.canvas);
 
     const lineWidth = toolStyle.getToolWidth();
+    const lineDash = getModule('globalConfiguration').configuration.lineDash;
     const font = textStyle.getFont();
 
     for (let i = 0; i < toolData.data.length; i++) {
@@ -186,14 +193,18 @@ export default class CobbAngleTool extends BaseAnnotationTool {
         // Differentiate the color of activation tool
         const color = toolColors.getColorIfActive(data);
 
+        const lineOptions = { color };
+
+        if (renderDashed) {
+          lineOptions.lineDash = lineDash;
+        }
+
         drawLine(
           context,
           eventData.element,
           data.handles.start,
           data.handles.end,
-          {
-            color,
-          }
+          lineOptions
         );
 
         if (data.complete) {
@@ -202,9 +213,7 @@ export default class CobbAngleTool extends BaseAnnotationTool {
             eventData.element,
             data.handles.start2,
             data.handles.end2,
-            {
-              color,
-            }
+            lineOptions
           );
         }
 

diff --git a/src/tools/annotation/EllipticalRoiTool.js b/src/tools/annotation/EllipticalRoiTool.js
@@ -28,6 +28,7 @@ import throttle from './../../util/throttle.js';
 import { ellipticalRoiCursor } from '../cursors/index.js';
 import { getLogger } from '../../util/logger.js';
 import getPixelSpacing from '../../util/getPixelSpacing';
+import { getModule } from '../../store/index';
 
 const logger = getLogger('tools:annotation:EllipticalRoiTool');
 
@@ -47,6 +48,7 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
       configuration: {
         // showMinMax: false,
         // showHounsfieldUnits: true,
+        renderDashed: false,
       },
       svgCursor: ellipticalRoiCursor,
     };
@@ -177,7 +179,12 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
     const eventData = evt.detail;
     const { image, element } = eventData;
     const lineWidth = toolStyle.getToolWidth();
-    const { handleRadius, drawHandlesOnHover } = this.configuration;
+    const lineDash = getModule('globalConfiguration').configuration.lineDash;
+    const {
+      handleRadius,
+      drawHandlesOnHover,
+      renderDashed,
+    } = this.configuration;
     const context = getNewContext(eventData.canvasContext.canvas);
     const { rowPixelSpacing, colPixelSpacing } = getPixelSpacing(image);
 
@@ -209,15 +216,19 @@ export default class EllipticalRoiTool extends BaseAnnotationTool {
 
         setShadow(context, this.configuration);
 
+        const ellipseOptions = { color };
+
+        if (renderDashed) {
+          ellipseOptions.lineDash = lineDash;
+        }
+
         // Draw
         drawEllipse(
           context,
           element,
           data.handles.start,
           data.handles.end,
-          {
-            color,
-          },
+          ellipseOptions,
           'pixel',
           data.handles.initialRotation
         );