@cornerstonejs/tools 0.56.2 → 0.56.4

package/src/cursors/index.ts

@@ -0,0 +1,24 @@
+import MouseCursor, { standardCursorNames } from './MouseCursor';
+import ImageMouseCursor from './ImageMouseCursor';
+import SVGMouseCursor from './SVGMouseCursor';
+import * as elementCursor from './elementCursor';
+import setCursorForElement from './setCursorForElement';
+import {
+  registerCursor,
+  svgCursorNames,
+  CursorSVG,
+} from './SVGCursorDescriptor';
+
+// Todo: this should be enum
+const CursorNames = [...svgCursorNames, ...standardCursorNames];
+
+export {
+  MouseCursor,
+  ImageMouseCursor,
+  SVGMouseCursor,
+  elementCursor,
+  registerCursor,
+  CursorNames,
+  CursorSVG,
+  setCursorForElement,
+};

package/src/cursors/setCursorForElement.ts

@@ -0,0 +1,33 @@
+import { setElementCursor } from './elementCursor';
+import MouseCursor from './MouseCursor';
+import SVGMouseCursor from './SVGMouseCursor';
+
+/**
+ * Set the cursor for an HTML element. cursorNames can be either
+ * cornerstone3DTools cursors or standard cursors.
+ *
+ * @param element - The element to set the cursor on.
+ * @param cursorName - The name of the cursor to set. This can be
+ * any cursor name either Cornerstone-specific cursor names or the standard
+ * CSS cursor names.
+ */
+function setCursorForElement(
+  element: HTMLDivElement,
+  cursorName: string
+): void {
+  let cursor = SVGMouseCursor.getDefinedCursor(cursorName, true);
+  if (!cursor) {
+    cursor = MouseCursor.getDefinedCursor(cursorName);
+  }
+
+  if (!cursor) {
+    console.log(
+      `Cursor ${cursorName} is not defined either as SVG or as a standard cursor.`
+    );
+    cursor = MouseCursor.getDefinedCursor(cursorName);
+  }
+
+  setElementCursor(element, cursor);
+}
+
+export default setCursorForElement;

package/src/drawingSvg/_getHash.ts

@@ -0,0 +1,9 @@
+function _getHash(
+  annotationUID: string,
+  drawingElementType: string,
+  nodeUID: string
+): string {
+  return `${annotationUID}::${drawingElementType}::${nodeUID}`;
+}
+
+export default _getHash;

package/src/drawingSvg/_setAttributesIfNecessary.ts

@@ -0,0 +1,13 @@
+export function _setAttributesIfNecessary(attributes, svgNode) {
+  Object.keys(attributes).forEach((key) => {
+    const currentValue = svgNode.getAttribute(key);
+    const newValue = attributes[key];
+    if (newValue === undefined || newValue === '') {
+      svgNode.removeAttribute(key);
+    } else if (currentValue !== newValue) {
+      svgNode.setAttribute(key, newValue);
+    }
+  });
+}
+
+export default _setAttributesIfNecessary;

package/src/drawingSvg/_setNewAttributesIfValid.ts

@@ -0,0 +1,10 @@
+export function _setNewAttributesIfValid(attributes, svgNode) {
+  Object.keys(attributes).forEach((key) => {
+    const newValue = attributes[key];
+    if (newValue !== undefined && newValue !== '') {
+      svgNode.setAttribute(key, newValue);
+    }
+  });
+}
+
+export default _setNewAttributesIfValid;

package/src/drawingSvg/clearByToolType.ts

@@ -0,0 +1,26 @@
+import getSvgDrawingHelper from './getSvgDrawingHelper';
+
+/**
+ * We are not using it anywhere yet.
+ * @param element
+ * @param toolType
+ * @internal
+ */
+function clearByToolType(element: HTMLDivElement, toolType: string): void {
+  const svgDrawingHelper = getSvgDrawingHelper(element);
+  const nodes = svgDrawingHelper.svgLayerElement.querySelectorAll(
+    'svg > *'
+  ) as NodeListOf<SVGElement>;
+
+  // Todo: check variable namings when this function starts to get utilized
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const toolUID = node.dataset.toolUid;
+
+    if (toolUID === toolType) {
+      svgDrawingHelper.svgLayerElement.removeChild(node);
+    }
+  }
+}
+
+export default clearByToolType;

package/src/drawingSvg/draw.ts

@@ -0,0 +1,16 @@
+import getSvgDrawingHelper from './getSvgDrawingHelper';
+
+function draw(
+  element: HTMLDivElement,
+  fn: (svgDrawingElement: any) => any
+): void {
+  const svgDrawingHelper = getSvgDrawingHelper(element);
+
+  // Save...
+  fn(svgDrawingHelper);
+  // Restore...
+
+  svgDrawingHelper.clearUntouched();
+}
+
+export default draw;

package/src/drawingSvg/drawArrow.ts

@@ -0,0 +1,82 @@
+import type { Types } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+import drawLine from './drawLine';
+
+export default function drawArrow(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  arrowUID: string,
+  start: Types.Point2,
+  end: Types.Point2,
+  options = {}
+): void {
+  // if length is NaN return
+  if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) {
+    return;
+  }
+
+  const { color, width, lineWidth, lineDash } = Object.assign(
+    {
+      color: 'dodgerblue',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+    },
+    options
+  );
+
+  // The line itself
+  drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, {
+    color,
+    width,
+    lineWidth,
+    lineDash,
+  });
+
+  // Drawing the head arrow with two lines
+  // Variables to be used when creating the arrow
+  const headLength = 10;
+  const angle = Math.atan2(end[1] - start[1], end[0] - start[0]);
+
+  const firstLine = {
+    start: [
+      end[0] - headLength * Math.cos(angle - Math.PI / 7),
+      end[1] - headLength * Math.sin(angle - Math.PI / 7),
+    ] as Types.Point2,
+    end: end,
+  };
+
+  const secondLine = {
+    start: [
+      end[0] - headLength * Math.cos(angle + Math.PI / 7),
+      end[1] - headLength * Math.sin(angle + Math.PI / 7),
+    ] as Types.Point2,
+    end: end,
+  };
+
+  drawLine(
+    svgDrawingHelper,
+    annotationUID,
+    '2',
+    firstLine.start,
+    firstLine.end,
+    {
+      color,
+      width,
+      lineWidth,
+    }
+  );
+
+  drawLine(
+    svgDrawingHelper,
+    annotationUID,
+    '3',
+    secondLine.start,
+    secondLine.end,
+    {
+      color,
+      width,
+      lineWidth,
+    }
+  );
+}

package/src/drawingSvg/drawCircle.ts

@@ -0,0 +1,62 @@
+import type { Types } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+
+import _getHash from './_getHash';
+
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+
+function drawCircle(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  circleUID: string,
+  center: Types.Point2,
+  radius: number,
+  options = {},
+  dataId = ''
+): void {
+  const { color, fill, width, lineWidth } = Object.assign(
+    {
+      color: 'dodgerblue',
+      fill: 'transparent',
+      width: '2',
+      lineWidth: undefined,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width options
+  const strokeWidth = lineWidth || width;
+
+  // variable for the namespace
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'circle', circleUID);
+  const existingCircleElement = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const attributes = {
+    cx: `${center[0]}`,
+    cy: `${center[1]}`,
+    r: `${radius}`,
+    stroke: color,
+    fill,
+    'stroke-width': strokeWidth,
+  };
+
+  if (existingCircleElement) {
+    _setAttributesIfNecessary(attributes, existingCircleElement);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const newCircleElement = document.createElementNS(svgns, 'circle');
+
+    if (dataId !== '') {
+      newCircleElement.setAttribute('data-id', dataId);
+    }
+
+    _setNewAttributesIfValid(attributes, newCircleElement);
+
+    svgDrawingHelper.appendNode(newCircleElement, svgNodeHash);
+  }
+}
+
+export default drawCircle;

package/src/drawingSvg/drawEllipse.ts

@@ -0,0 +1,71 @@
+import type { Types } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+
+import _getHash from './_getHash';
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+
+function drawEllipse(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  ellipseUID: string,
+  corner1: Types.Point2,
+  corner2: Types.Point2,
+  options = {},
+  dataId = ''
+): void {
+  const { color, width, lineWidth, lineDash } = Object.assign(
+    {
+      color: 'dodgerblue',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width options
+  const strokeWidth = lineWidth || width;
+
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'ellipse', ellipseUID);
+  const existingEllipse = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const w = Math.abs(corner1[0] - corner2[0]);
+  const h = Math.abs(corner1[1] - corner2[1]);
+  const xMin = Math.min(corner1[0], corner2[0]);
+  const yMin = Math.min(corner1[1], corner2[1]);
+
+  const center = [xMin + w / 2, yMin + h / 2];
+  const radiusX = w / 2;
+  const radiusY = h / 2;
+
+  const attributes = {
+    cx: `${center[0]}`,
+    cy: `${center[1]}`,
+    rx: `${radiusX}`,
+    ry: `${radiusY}`,
+    stroke: color,
+    fill: 'transparent',
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingEllipse) {
+    _setAttributesIfNecessary(attributes, existingEllipse);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const svgEllipseElement = document.createElementNS(svgns, 'ellipse');
+
+    if (dataId !== '') {
+      svgEllipseElement.setAttribute('data-id', dataId);
+    }
+
+    _setNewAttributesIfValid(attributes, svgEllipseElement);
+
+    svgDrawingHelper.appendNode(svgEllipseElement, svgNodeHash);
+  }
+}
+
+export default drawEllipse;

package/src/drawingSvg/drawHandles.ts

@@ -0,0 +1,87 @@
+import type { Types } from '@cornerstonejs/core';
+
+import _getHash from './_getHash';
+import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import { SVGDrawingHelper } from '../types';
+
+function drawHandles(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  handleGroupUID: string,
+  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
+  );
+
+  // for supporting both lineWidth and width options
+  const strokeWidth = lineWidth || width;
+
+  for (let i = 0; i < handlePoints.length; i++) {
+    const handle = handlePoints[i];
+
+    // variable for the namespace
+    const svgns = 'http://www.w3.org/2000/svg';
+    const svgNodeHash = _getHash(
+      annotationUID,
+      'handle',
+      `hg-${handleGroupUID}-index-${i}`
+    );
+
+    let attributes;
+    if (type === 'circle') {
+      attributes = {
+        cx: `${handle[0]}`,
+        cy: `${handle[1]}`,
+        r: handleRadius,
+        stroke: color,
+        fill,
+        'stroke-width': strokeWidth,
+      };
+    } else if (type === 'rect') {
+      const handleRadiusFloat = parseFloat(handleRadius);
+      const side = handleRadiusFloat * 1.5;
+      const x = handle[0] - side * 0.5;
+      const y = handle[1] - side * 0.5;
+
+      attributes = {
+        x: `${x}`,
+        y: `${y}`,
+        width: `${side}`,
+        height: `${side}`,
+        stroke: color,
+        fill,
+        'stroke-width': strokeWidth,
+        rx: `${side * 0.1}`,
+      };
+    } else {
+      throw new Error(`Unsupported handle type: ${type}`);
+    }
+
+    const existingHandleElement = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+    if (existingHandleElement) {
+      _setAttributesIfNecessary(attributes, existingHandleElement);
+
+      svgDrawingHelper.setNodeTouched(svgNodeHash);
+    } else {
+      const newHandleElement = document.createElementNS(svgns, type);
+
+      _setNewAttributesIfValid(attributes, newHandleElement);
+
+      svgDrawingHelper.appendNode(newHandleElement, svgNodeHash);
+    }
+  }
+}
+
+export default drawHandles;

package/src/drawingSvg/drawLine.ts

@@ -0,0 +1,70 @@
+import type { Types } from '@cornerstonejs/core';
+
+import _getHash from './_getHash';
+import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import { SVGDrawingHelper } from '../types';
+
+export default function drawLine(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  lineUID: string,
+  start: Types.Point2,
+  end: Types.Point2,
+  options = {},
+  dataId = ''
+): void {
+  // if length is NaN return
+  if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) {
+    return;
+  }
+
+  const { color, width, lineWidth, lineDash, shadow } = Object.assign(
+    {
+      color: 'dodgerblue',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+      shadow: undefined,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width 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 attributes = {
+    x1: `${start[0]}`,
+    y1: `${start[1]}`,
+    x2: `${end[0]}`,
+    y2: `${end[1]}`,
+    stroke: color,
+    style: dropShadowStyle,
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingLine) {
+    // This is run to avoid re-rendering annotations that actually haven't changed
+    _setAttributesIfNecessary(attributes, existingLine);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const newLine = document.createElementNS(svgns, 'line');
+
+    if (dataId !== '') {
+      newLine.setAttribute('data-id', dataId);
+    }
+
+    _setNewAttributesIfValid(attributes, newLine);
+
+    svgDrawingHelper.appendNode(newLine, svgNodeHash);
+  }
+}

package/src/drawingSvg/drawLink.ts

@@ -0,0 +1,76 @@
+import type { Types } from '@cornerstonejs/core';
+
+import drawLine from './drawLine';
+import findClosestPoint from '../utilities/math/vec2/findClosestPoint';
+import { PlanarBoundingBox, SVGDrawingHelper } from '../types';
+
+/**
+ * Draw a link between an annotation to a box.
+ */
+function drawLink(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  linkUID: string,
+  // Find closest point to approx. bounding box
+  annotationAnchorPoints: Array<Types.Point2>,
+  refPoint: Types.Point2,
+  // Find bounding box point that's closest to our identified
+  // start point
+  boundingBox: PlanarBoundingBox,
+  options = {}
+): void {
+  // The closest anchor point (for the annotation) to the
+  // text box / bounding box
+  const start =
+    annotationAnchorPoints.length > 0
+      ? findClosestPoint(annotationAnchorPoints, refPoint)
+      : refPoint;
+
+  // Calculate the midpoints of the bounding box
+  const boundingBoxPoints = _boundingBoxPoints(boundingBox);
+  // Find the closest textBox midpoint to the annotation's anchor/start point
+  const end = findClosestPoint(boundingBoxPoints, start);
+
+  // Finally we draw the dashed linking line
+  const mergedOptions = Object.assign(
+    {
+      color: 'rgb(255, 255, 0)',
+      lineWidth: '1',
+      lineDash: '2,3',
+    },
+    options
+  );
+
+  drawLine(
+    svgDrawingHelper,
+    annotationUID,
+    `link-${linkUID}`,
+    start,
+    end,
+    mergedOptions
+  );
+}
+
+/**
+ * Find potential anchor points for a given bounding box. For example, it may
+ * look nicer to draw a line from the "middle left" of a bounding box to an
+ * annotation (instead of from a corner). This function calculates those points
+ *
+ * @param boundingBox
+ */
+function _boundingBoxPoints(
+  boundingBox: PlanarBoundingBox
+): Array<Types.Point2> {
+  const { x: left, y: top, height, width } = boundingBox;
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+
+  const topMiddle = [left + halfWidth, top] as Types.Point2;
+  const leftMiddle = [left, top + halfHeight] as Types.Point2;
+  const bottomMiddle = [left + halfWidth, top + height] as Types.Point2;
+  const rightMiddle = [left + width, top + halfHeight] as Types.Point2;
+
+  return [topMiddle, leftMiddle, bottomMiddle, rightMiddle];
+}
+
+export default drawLink;

package/src/drawingSvg/drawLinkedTextBox.ts

@@ -0,0 +1,64 @@
+import type { Types } from '@cornerstonejs/core';
+
+import drawTextBox from './drawTextBox';
+import drawLink from './drawLink';
+import { SVGDrawingHelper } from '../types';
+
+function drawLinkedTextBox(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  textBoxUID: string,
+  //
+  textLines: Array<string>,
+  textBoxPosition: Types.Point2,
+  annotationAnchorPoints: Array<Types.Point2>,
+  textBox: unknown,
+  options = {}
+  // TODO: yCenter as an option
+): SVGRect {
+  const mergedOptions = Object.assign(
+    {
+      handleRadius: '6',
+      centering: {
+        x: false,
+        y: true, // yCenter,
+      },
+    },
+    options
+  );
+
+  // Draw the text box
+  const canvasBoundingBox = drawTextBox(
+    svgDrawingHelper,
+    annotationUID,
+    textBoxUID,
+    textLines,
+    textBoxPosition,
+    mergedOptions
+  );
+  // if (textBox.hasMoved) {
+  //   // Draw dashed link line between tool and text
+  drawLink(
+    svgDrawingHelper,
+    annotationUID,
+    textBoxUID,
+    annotationAnchorPoints, // annotationAnchorPoints
+    textBoxPosition, // refPoint (text)
+    canvasBoundingBox, // textBoxBoundingBox
+    mergedOptions
+  );
+  // }
+
+  // const { top, left, width, height } = canvasBoundingBox
+
+  // textBox.worldBoundingBox = {
+  //   topLeft: canvasToWorld([left, top]),
+  //   topRight: canvasToWorld([left + width, top]),
+  //   bottomLeft: canvasToWorld([left, top + height]),
+  //   bottomRight: canvasToWorld([left + width, top + height]),
+  // }
+
+  return canvasBoundingBox;
+}
+
+export default drawLinkedTextBox;