@cornerstonejs/tools 2.17.2 → 2.17.3

package/dist/esm/drawingSvg/drawArrow.js

@@ -1,20 +1,47 @@
 import drawLine from './drawLine';
+const svgns = 'http://www.w3.org/2000/svg';
 export default function drawArrow(svgDrawingHelper, annotationUID, arrowUID, start, end, options = {}) {
     if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) {
         return;
     }
-    const { color, width, lineWidth, lineDash } = Object.assign({
-        color: 'rgb(0, 255, 0)',
-        width: '2',
-        lineWidth: undefined,
-        lineDash: undefined,
-    }, options);
-    drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, {
-        color,
-        width,
-        lineWidth,
-        lineDash,
-    });
+    const { viaMarker = false, color = 'rgb(0, 255, 0)', markerSize = 10, } = options;
+    if (!viaMarker) {
+        legacyDrawArrow(svgDrawingHelper, annotationUID, arrowUID, start, end, options);
+        return;
+    }
+    const layerId = svgDrawingHelper.svgLayerElement.id;
+    const markerBaseId = `arrow-${annotationUID}`;
+    const markerFullId = `${markerBaseId}-${layerId}`;
+    const defs = svgDrawingHelper.svgLayerElement.querySelector('defs');
+    let arrowMarker = defs.querySelector(`#${markerFullId}`);
+    if (!arrowMarker) {
+        arrowMarker = document.createElementNS(svgns, 'marker');
+        arrowMarker.setAttribute('id', markerFullId);
+        arrowMarker.setAttribute('viewBox', '0 0 10 10');
+        arrowMarker.setAttribute('refX', '8');
+        arrowMarker.setAttribute('refY', '5');
+        arrowMarker.setAttribute('markerWidth', `${markerSize}`);
+        arrowMarker.setAttribute('markerHeight', `${markerSize}`);
+        arrowMarker.setAttribute('orient', 'auto');
+        const arrowPath = document.createElementNS(svgns, 'path');
+        arrowPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+        arrowPath.setAttribute('fill', color);
+        arrowMarker.appendChild(arrowPath);
+        defs.appendChild(arrowMarker);
+    }
+    else {
+        arrowMarker.setAttribute('markerWidth', `${markerSize}`);
+        arrowMarker.setAttribute('markerHeight', `${markerSize}`);
+        const arrowPath = arrowMarker.querySelector('path');
+        if (arrowPath) {
+            arrowPath.setAttribute('fill', color);
+        }
+    }
+    options.markerEndId = markerFullId;
+    drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, options);
+}
+function legacyDrawArrow(svgDrawingHelper, annotationUID, arrowUID, start, end, options = {}) {
+    const { color = 'rgb(0, 255, 0)', width = 2, lineWidth, lineDash } = options;
     const headLength = 10;
     const angle = Math.atan2(end[1] - start[1], end[0] - start[0]);
     const firstLine = {
@@ -31,14 +58,22 @@ export default function drawArrow(svgDrawingHelper, annotationUID, arrowUID, sta
         ],
         end: end,
     };
+    drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, {
+        color,
+        width,
+        lineWidth,
+        lineDash,
+    });
     drawLine(svgDrawingHelper, annotationUID, '2', firstLine.start, firstLine.end, {
         color,
         width,
         lineWidth,
+        lineDash,
     });
     drawLine(svgDrawingHelper, annotationUID, '3', secondLine.start, secondLine.end, {
         color,
         width,
         lineWidth,
+        lineDash,
     });
 }

package/dist/esm/drawingSvg/drawHeight.js

@@ -28,15 +28,18 @@ export default function drawHeight(svgDrawingHelper, annotationUID, heightUID, s
         color,
         width,
         lineWidth,
+        lineDash,
     });
     drawLine(svgDrawingHelper, annotationUID, '2', secondLine.start, secondLine.end, {
         color,
         width,
         lineWidth,
+        lineDash,
     });
     drawLine(svgDrawingHelper, annotationUID, '3', threeLine.start, threeLine.end, {
         color,
         width,
         lineWidth,
+        lineDash,
     });
 }

package/dist/esm/drawingSvg/drawLine.js

@@ -5,20 +5,13 @@ export default function drawLine(svgDrawingHelper, annotationUID, lineUID, start
     if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) {
         return;
     }
-    const { color, width, lineWidth, lineDash, shadow } = Object.assign({
-        color: 'rgb(0, 255, 0)',
-        width: '2',
-        lineWidth: undefined,
-        lineDash: undefined,
-        shadow: undefined,
-    }, options);
+    const { color = 'rgb(0, 255, 0)', width = 10, lineWidth, lineDash, markerStartId = null, markerEndId = null, shadow = false, } = options;
     const strokeWidth = lineWidth || width;
     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-${svgDrawingHelper.svgLayerElement.id});`
-        : '';
+    const layerId = svgDrawingHelper.svgLayerElement.id;
+    const dropShadowStyle = shadow ? `filter:url(#shadow-${layerId});` : '';
     const attributes = {
         x1: `${start[0]}`,
         y1: `${start[1]}`,
@@ -28,6 +21,8 @@ export default function drawLine(svgDrawingHelper, annotationUID, lineUID, start
         style: dropShadowStyle,
         'stroke-width': strokeWidth,
         'stroke-dasharray': lineDash,
+        'marker-start': markerStartId ? `url(#${markerStartId})` : '',
+        'marker-end': markerEndId ? `url(#${markerEndId})` : '',
     };
     if (existingLine) {
         setAttributesIfNecessary(attributes, existingLine);

package/dist/esm/drawingSvg/drawPolyline.d.ts

@@ -8,4 +8,6 @@ export default function drawPolyline(svgDrawingHelper: SVGDrawingHelper, annotat
     lineWidth?: number;
     lineDash?: string;
     closePath?: boolean;
+    markerStartId?: string;
+    markerEndId?: string;
 }): void;

package/dist/esm/drawingSvg/drawPolyline.js

@@ -5,7 +5,7 @@ export default function drawPolyline(svgDrawingHelper, annotationUID, polylineUI
     if (points.length < 2) {
         return;
     }
-    const { color = 'rgb(0, 255, 0)', width = 10, fillColor = 'none', fillOpacity = 0, lineWidth, lineDash, closePath = false, } = options;
+    const { color = 'rgb(0, 255, 0)', width = 10, fillColor = 'none', fillOpacity = 0, lineWidth, lineDash, closePath = false, markerStartId = null, markerEndId = null, } = options;
     const strokeWidth = lineWidth || width;
     const svgns = 'http://www.w3.org/2000/svg';
     const svgNodeHash = _getHash(annotationUID, 'polyline', polylineUID);
@@ -25,6 +25,8 @@ export default function drawPolyline(svgDrawingHelper, annotationUID, polylineUI
         'fill-opacity': fillOpacity,
         'stroke-width': strokeWidth,
         'stroke-dasharray': lineDash,
+        'marker-start': markerStartId ? `url(#${markerStartId})` : '',
+        'marker-end': markerEndId ? `url(#${markerEndId})` : '',
     };
     if (existingPolyLine) {
         setAttributesIfNecessary(attributes, existingPolyLine);

package/dist/esm/stateManagement/annotation/config/ToolStyle.js

@@ -19,6 +19,7 @@ class ToolStyle {
             textBoxLinkLineWidth: '1',
             textBoxLinkLineDash: '2,3',
             textBoxShadow: true,
+            markerSize: '10',
         };
         this._initializeConfig(defaultConfig);
     }

package/dist/esm/tools/annotation/ArrowAnnotateTool.js

@@ -20,6 +20,7 @@ class ArrowAnnotateTool extends AnnotationTool {
             changeTextCallback,
             preventHandleOutsideImage: false,
             arrowFirst: true,
+            arrowHeadStyle: 'legacy',
         },
     }) {
         super(toolProps, defaultToolProps);
@@ -302,7 +303,7 @@ class ArrowAnnotateTool extends AnnotationTool {
                 const { handles, text } = data;
                 const { points, activeHandleIndex } = handles;
                 styleSpecifier.annotationUID = annotationUID;
-                const { color, lineWidth, lineDash } = this.getAnnotationStyle({
+                const { color, lineWidth, lineDash, markerSize } = this.getAnnotationStyle({
                     annotation,
                     styleSpecifier,
                 });
@@ -333,6 +334,8 @@ class ArrowAnnotateTool extends AnnotationTool {
                         color,
                         width: lineWidth,
                         lineDash: lineDash,
+                        viaMarker: this.configuration.arrowHeadStyle !== 'legacy',
+                        markerSize,
                     });
                 }
                 else {
@@ -340,6 +343,8 @@ class ArrowAnnotateTool extends AnnotationTool {
                         color,
                         width: lineWidth,
                         lineDash: lineDash,
+                        viaMarker: this.configuration.arrowHeadStyle !== 'legacy',
+                        markerSize,
                     });
                 }
                 renderStatus = true;

package/dist/esm/tools/base/AnnotationTool.js

@@ -158,6 +158,7 @@ class AnnotationTool extends AnnotationDisplayTool {
         const lineWidth = getStyle('lineWidth');
         const lineDash = getStyle('lineDash');
         const color = getStyle('color');
+        const markerSize = getStyle('markerSize');
         const shadow = getStyle('shadow');
         const textboxStyle = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
         return {
@@ -171,6 +172,7 @@ class AnnotationTool extends AnnotationDisplayTool {
             fillOpacity: 0,
             shadow,
             textbox: textboxStyle,
+            markerSize,
         };
     }
     _imagePointNearToolOrHandle(element, annotation, canvasCoords, proximity) {

package/dist/esm/types/AnnotationStyle.d.ts

@@ -1,6 +1,6 @@
 type Modes = '' | 'Active' | 'Passive' | 'Enabled';
 type States = '' | 'Highlighted' | 'Selected' | 'Locked' | 'AutoGenerated';
-type Properties = 'color' | 'colorAutoGenerated' | 'lineWidth' | 'lineWidthAutoGenerated' | 'lineDash' | 'textBoxFontFamily' | 'textBoxFontSize' | 'textBoxColor' | 'textBoxBackground' | 'textBoxLinkLineWidth' | 'textBoxLinkLineDash' | 'locked' | 'fillColor' | 'fillOpacity' | 'textbox' | 'shadow' | 'visibility';
+type Properties = 'color' | 'colorAutoGenerated' | 'lineWidth' | 'lineWidthAutoGenerated' | 'lineDash' | 'textBoxFontFamily' | 'textBoxFontSize' | 'textBoxColor' | 'textBoxBackground' | 'textBoxLinkLineWidth' | 'textBoxLinkLineDash' | 'locked' | 'fillColor' | 'fillOpacity' | 'textbox' | 'shadow' | 'visibility' | 'markerSize';
 export type AnnotationStyle = {
     [key in `${Properties}${States}${Modes}`]?: string | number | boolean | Record<string, unknown>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "2.17.2",
+  "version": "2.17.3",
   "description": "Cornerstone3D Tools",
   "types": "./dist/esm/index.d.ts",
   "module": "./dist/esm/index.js",
@@ -104,7 +104,7 @@
     "canvas": "^2.11.2"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^2.17.2",
+    "@cornerstonejs/core": "^2.17.3",
     "@kitware/vtk.js": "32.9.0",
     "@types/d3-array": "^3.0.4",
     "@types/d3-interpolate": "^3.0.1",
@@ -123,5 +123,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "26657751a6e715570cc44115ee8cc673aa453037"
+  "gitHead": "8fe548248197e61fba869257fdebdd33714e42f8"
 }