@cornerstonejs/tools 0.56.2 → 0.56.4

package/src/drawingSvg/drawPolyline.ts

@@ -0,0 +1,80 @@
+import type { Types } from '@cornerstonejs/core';
+import _getHash from './_getHash';
+import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import { SVGDrawingHelper } from '../types';
+
+/**
+ * Draws an SVG polyline with the given points.
+ *
+ * The `connectLastToFirst` option, if true, draws a closed polyline, with the
+ * last point connected to the first.
+ */
+export default function drawPolyline(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  polylineUID: string,
+  points: Types.Point2[],
+  options: {
+    color?: string;
+    width?: number;
+    lineWidth?: number;
+    lineDash?: string;
+    connectLastToFirst?: boolean;
+  }
+): void {
+  if (points.length < 2) {
+    return;
+  }
+
+  const { color, width, lineWidth, lineDash } = Object.assign(
+    {
+      color: 'dodgerblue',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+      connectLastToFirst: false,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width options
+  const strokeWidth = lineWidth || width;
+
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'polyline', polylineUID);
+  const existingPolyLine = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  let pointsAttribute = '';
+
+  for (const point of points) {
+    pointsAttribute += `${point[0]}, ${point[1]} `;
+  }
+
+  if (options.connectLastToFirst) {
+    const firstPoint = points[0];
+
+    pointsAttribute += `${firstPoint[0]}, ${firstPoint[1]}`;
+  }
+
+  const attributes = {
+    points: pointsAttribute,
+    stroke: color,
+    fill: 'none',
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingPolyLine) {
+    // This is run to avoid re-rendering annotations that actually haven't changed
+    _setAttributesIfNecessary(attributes, existingPolyLine);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const newPolyLine = document.createElementNS(svgns, 'polyline');
+
+    _setNewAttributesIfValid(attributes, newPolyLine);
+
+    svgDrawingHelper.appendNode(newPolyLine, svgNodeHash);
+  }
+}

package/src/drawingSvg/drawRect.ts

@@ -0,0 +1,70 @@
+import type { Types } from '@cornerstonejs/core';
+
+import _getHash from './_getHash';
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+import _setNewAttributesIfValid from './_setNewAttributesIfValid';
+import { SVGDrawingHelper } from '../types';
+
+// <rect x="120" y="100" width="100" height="100" />
+export default function drawRect(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  rectangleUID: string,
+  start: Types.Point2,
+  end: Types.Point2,
+  options = {},
+  dataId = ''
+): void {
+  const {
+    color,
+    width: _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, 'rect', rectangleUID);
+  const existingRect = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const tlhc = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
+  const width = Math.abs(start[0] - end[0]);
+  const height = Math.abs(start[1] - end[1]);
+
+  const attributes = {
+    x: `${tlhc[0]}`,
+    y: `${tlhc[1]}`,
+    width: `${width}`,
+    height: `${height}`,
+    stroke: color,
+    fill: 'transparent',
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingRect) {
+    _setAttributesIfNecessary(attributes, existingRect);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const svgRectElement = document.createElementNS(svgns, 'rect');
+
+    if (dataId !== '') {
+      svgRectElement.setAttribute('data-id', dataId);
+    }
+
+    _setNewAttributesIfValid(attributes, svgRectElement);
+
+    svgDrawingHelper.appendNode(svgRectElement, svgNodeHash);
+  }
+}

package/src/drawingSvg/drawTextBox.ts

@@ -0,0 +1,213 @@
+import type { Types } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+
+import _getHash from './_getHash';
+import _setAttributesIfNecessary from './_setAttributesIfNecessary';
+
+/**
+ * Draws a textBox.
+ *
+ * @param textLines - The text to display.
+ * @param position - The x/y position of the textbox
+ * @param options - Options for the textBox.
+ * @returns Bounding box; can be used for isPointNearTool
+ */
+function drawTextBox(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  textUID: string,
+  textLines: Array<string>,
+  position: Types.Point2,
+  options = {}
+): SVGRect {
+  const mergedOptions = Object.assign(
+    {
+      fontFamily: 'Helvetica, Arial, sans-serif',
+      fontSize: '14px',
+      color: 'rgb(255, 255, 0)',
+      background: '',
+      padding: 25,
+      centerX: false,
+      centerY: true,
+    },
+    options
+  );
+
+  // Draw each of the text lines on top of the background box
+  const textGroupBoundingBox = _drawTextGroup(
+    svgDrawingHelper,
+    annotationUID,
+    textUID,
+    textLines,
+    position,
+    mergedOptions
+  );
+
+  return textGroupBoundingBox;
+}
+
+function _drawTextGroup(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  textUID: string,
+  textLines: Array<string> = [''],
+  position: Types.Point2,
+  options: any
+): SVGRect {
+  const { padding, color, fontFamily, fontSize, background } = options;
+
+  let textGroupBoundingBox;
+  const [x, y] = [position[0] + padding, position[1] + padding];
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'text', textUID);
+  const existingTextGroup = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  // Todo: right now textBox gets a re-render even if the textBox has not changed
+  // and evenIf the attributes are not set again since they are the same.
+  if (existingTextGroup) {
+    // TODO: Iterate each node and update color? font-size?
+    const textElement = existingTextGroup.querySelector('text');
+    const textSpans = Array.from(textElement.children) as Array<SVGElement>;
+
+    for (let i = 0; i < textSpans.length; i++) {
+      const textSpanElement = textSpans[i];
+      const text = textLines[i] || '';
+
+      textSpanElement.textContent = text;
+    }
+
+    // if the textLines have changed size, we need to create textSpans for them
+    if (textLines.length > textSpans.length) {
+      for (let i = 0; i < textLines.length - textSpans.length; i++) {
+        const textLine = textLines[i + textSpans.length];
+        const textSpan = _createTextSpan(textLine);
+
+        textElement.appendChild(textSpan);
+      }
+
+      existingTextGroup.appendChild(textElement);
+      svgDrawingHelper.appendNode(existingTextGroup, svgNodeHash);
+    }
+
+    const textAttributes = {
+      fill: color,
+      'font-size': fontSize,
+      'font-family': fontFamily,
+    };
+
+    const textGroupAttributes = {
+      transform: `translate(${x} ${y})`,
+    };
+
+    // Todo: for some reason this does not work to not re-render the textBox
+    _setAttributesIfNecessary(textAttributes, textElement);
+    _setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
+
+    textGroupBoundingBox = _drawTextBackground(existingTextGroup, background);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const textGroup = document.createElementNS(svgns, 'g');
+
+    textGroup.setAttribute('transform', `translate(${x} ${y})`);
+
+    //
+    const textElement = _createTextElement(svgDrawingHelper, options);
+    for (let i = 0; i < textLines.length; i++) {
+      const textLine = textLines[i];
+      const textSpan = _createTextSpan(textLine);
+
+      textElement.appendChild(textSpan);
+    }
+
+    textGroup.appendChild(textElement);
+    svgDrawingHelper.appendNode(textGroup, svgNodeHash);
+    textGroupBoundingBox = _drawTextBackground(textGroup, background);
+  }
+
+  // We translate the group using `position`
+  // which means we also need to pluck those values when returning
+  // the bounding box
+  return Object.assign({}, textGroupBoundingBox, {
+    x,
+    y,
+    height: textGroupBoundingBox.height + padding,
+    width: textGroupBoundingBox.width + padding,
+  });
+}
+
+function _createTextElement(
+  svgDrawingHelper: SVGDrawingHelper,
+  options: any
+): SVGElement {
+  const { color, fontFamily, fontSize } = options;
+  const svgns = 'http://www.w3.org/2000/svg';
+  const textElement = document.createElementNS(svgns, 'text');
+  const noSelectStyle =
+    'user-select: none; pointer-events: none; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);';
+  const dropShadowStyle = `filter:url(#shadow-${svgDrawingHelper.svgLayerElement.id});`;
+  const combinedStyle = `${noSelectStyle}${dropShadowStyle}`;
+
+  // font-size="100"
+  textElement.setAttribute('x', '0');
+  textElement.setAttribute('y', '0');
+  textElement.setAttribute('fill', color);
+  textElement.setAttribute('font-family', fontFamily);
+  textElement.setAttribute('font-size', fontSize);
+  textElement.setAttribute('style', combinedStyle);
+
+  return textElement;
+}
+
+function _createTextSpan(text): SVGElement {
+  const svgns = 'http://www.w3.org/2000/svg';
+  const textSpanElement = document.createElementNS(svgns, 'tspan');
+
+  // TODO: centerX
+  // (parent width / 2) - my width
+  // TODO: centerY
+
+  textSpanElement.setAttribute('x', '0');
+  textSpanElement.setAttribute('dy', '1.2em');
+  textSpanElement.textContent = text;
+
+  return textSpanElement;
+}
+
+function _drawTextBackground(group: SVGGElement, color: string) {
+  let element = group.querySelector('rect.background');
+
+  // If we have no background color, remove any element that exists and return
+  // the bounding box of the text
+  if (!color) {
+    if (element) {
+      group.removeChild(element);
+    }
+
+    return group.getBBox();
+  }
+
+  // Otherwise, check if we have a <rect> element. If not, create one
+  if (!element) {
+    element = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    element.setAttribute('class', 'background');
+    group.insertBefore(element, group.firstChild);
+  }
+
+  // Get the text groups's bounding box and use it to draw the background rectangle
+  const bBox = group.getBBox();
+
+  const attributes = {
+    x: `${bBox.x}`,
+    y: `${bBox.y}`,
+    width: `${bBox.width}`,
+    height: `${bBox.height}`,
+    fill: color,
+  };
+
+  _setAttributesIfNecessary(attributes, element);
+
+  return bBox;
+}
+
+export default drawTextBox;

package/src/drawingSvg/getSvgDrawingHelper.ts

@@ -0,0 +1,98 @@
+import { state } from '../store';
+import { getEnabledElement } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+
+const VIEWPORT_ELEMENT = 'viewport-element';
+
+/**
+ * Returns the SVG drawing helper for the given HTML element.
+ * @param element - The HTML element to get the SVG drawing helper for.
+ * @private
+ */
+function getSvgDrawingHelper(element: HTMLDivElement): SVGDrawingHelper {
+  const enabledElement = getEnabledElement(element);
+  const { viewportId, renderingEngineId } = enabledElement;
+  const canvasHash = `${viewportId}:${renderingEngineId}`;
+  const svgLayerElement = _getSvgLayer(element);
+
+  // Reset touched
+  Object.keys(state.svgNodeCache[canvasHash]).forEach((cacheKey) => {
+    state.svgNodeCache[canvasHash][cacheKey].touched = false;
+  });
+
+  return {
+    svgLayerElement: svgLayerElement,
+    svgNodeCacheForCanvas: state.svgNodeCache,
+    getSvgNode: getSvgNode.bind(this, canvasHash),
+    appendNode: appendNode.bind(this, svgLayerElement, canvasHash),
+    setNodeTouched: setNodeTouched.bind(this, canvasHash),
+    clearUntouched: clearUntouched.bind(this, svgLayerElement, canvasHash),
+  };
+}
+
+/**
+ *
+ * @param element
+ * @private
+ */
+function _getSvgLayer(element) {
+  const viewportElement = `.${VIEWPORT_ELEMENT}`;
+  const internalDivElement = element.querySelector(viewportElement);
+  const svgLayer = internalDivElement.querySelector('.svg-layer');
+
+  return svgLayer;
+}
+
+function getSvgNode(canvasHash, cacheKey) {
+  // If state has been reset
+  if (!state.svgNodeCache[canvasHash]) {
+    return;
+  }
+
+  if (state.svgNodeCache[canvasHash][cacheKey]) {
+    return state.svgNodeCache[canvasHash][cacheKey].domRef;
+  }
+}
+
+function appendNode(svgLayerElement, canvasHash, svgNode, cacheKey) {
+  // If state has been reset
+  if (!state.svgNodeCache[canvasHash]) {
+    return null;
+  }
+
+  state.svgNodeCache[canvasHash][cacheKey] = {
+    touched: true,
+    domRef: svgNode,
+  };
+
+  svgLayerElement.appendChild(svgNode);
+}
+
+function setNodeTouched(canvasHash, cacheKey) {
+  // If state has been reset
+  if (!state.svgNodeCache[canvasHash]) {
+    return;
+  }
+
+  if (state.svgNodeCache[canvasHash][cacheKey]) {
+    state.svgNodeCache[canvasHash][cacheKey].touched = true;
+  }
+}
+
+function clearUntouched(svgLayerElement, canvasHash) {
+  // If state has been reset
+  if (!state.svgNodeCache[canvasHash]) {
+    return;
+  }
+
+  Object.keys(state.svgNodeCache[canvasHash]).forEach((cacheKey) => {
+    const cacheEntry = state.svgNodeCache[canvasHash][cacheKey];
+
+    if (!cacheEntry.touched && cacheEntry.domRef) {
+      svgLayerElement.removeChild(cacheEntry.domRef);
+      delete state.svgNodeCache[canvasHash][cacheKey];
+    }
+  });
+}
+
+export default getSvgDrawingHelper;

package/src/drawingSvg/index.ts

@@ -0,0 +1,23 @@
+import draw from './draw';
+import drawCircle from './drawCircle';
+import drawEllipse from './drawEllipse';
+import drawHandles from './drawHandles';
+import drawLine from './drawLine';
+import drawPolyline from './drawPolyline';
+import drawLinkedTextBox from './drawLinkedTextBox';
+import drawRect from './drawRect';
+import drawTextBox from './drawTextBox';
+import drawArrow from './drawArrow';
+
+export {
+  draw,
+  drawCircle,
+  drawEllipse,
+  drawHandles,
+  drawLine,
+  drawPolyline,
+  drawLinkedTextBox,
+  drawRect,
+  drawTextBox,
+  drawArrow,
+};

package/src/enums/AnnotationStyleStates.ts

@@ -0,0 +1,22 @@
+/**
+ * AnnotationStyleStates - This enum defines the 4 possible states available for
+ *  a Annotation instance.
+ *
+ * Default:
+ *   The default state for the annotation instance
+ * Highlighted:
+ *   The annotation should be rendered in "highlighted" mode in response to
+ *   direct user interaction;
+ * Selected:
+ *   The annotation has been selected by the user;
+ * Locked:
+ *   The annotation has been locked;
+ */
+enum AnnotationStyleStates {
+  Default = '',
+  Highlighted = 'Highlighted',
+  Selected = 'Selected',
+  Locked = 'Locked',
+}
+
+export default AnnotationStyleStates;