@cornerstonejs/tools 1.35.2 → 1.35.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.35.2",
+  "version": "1.35.3",
   "description": "Cornerstone3D Tools",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.35.2",
+    "@cornerstonejs/core": "^1.35.3",
     "comlink": "^4.4.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
@@ -53,5 +53,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "323d50dd5e96fd476514db0cd2b62d526d480de0"
+  "gitHead": "8c78a01f328ad05b05c4664fce746281ed381829"
 }

package/src/drawingSvg/drawEllipse.ts

@@ -2,8 +2,7 @@ import type { Types } from '@cornerstonejs/core';
 import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
-import setAttributesIfNecessary from './setAttributesIfNecessary';
-import setNewAttributesIfValid from './setNewAttributesIfValid';
+import drawEllipseByCoordinates from './drawEllipseByCoordinates';
 
 function drawEllipse(
   svgDrawingHelper: SVGDrawingHelper,
@@ -13,59 +12,20 @@ function drawEllipse(
   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);
-  }
+){
+  const top: Types.Point2 = [ (corner1[0] + corner2[0]) / 2, corner1[1] ];
+  const bottom: Types.Point2 = [ (corner1[0] + corner2[0]) / 2, corner2[1] ];
+  const left: Types.Point2 = [ corner1[0], (corner1[1] + corner2[1]) / 2];
+  const right: Types.Point2 = [ corner2[0], (corner1[1] + corner2[1]) / 2];
+
+  drawEllipseByCoordinates(
+    svgDrawingHelper,
+    annotationUID,
+    ellipseUID,
+    [bottom, top, left, right],
+    options = {},
+    dataId = ''
+  )
 }
 
 export default drawEllipse;

package/src/drawingSvg/drawEllipseByCoordinates.ts

@@ -0,0 +1,73 @@
+2
+import type { Types } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+
+import _getHash from './_getHash';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+
+function drawEllipseByCoordinates(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  ellipseUID: string,
+  canvasCoordinates: [Types.Point2, Types.Point2, Types.Point2, 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 [bottom, top, left, right] = canvasCoordinates;
+
+  const w = Math.hypot(left[0] - right[0], left[1] - right[1]);
+  const h = Math.hypot(top[0] - bottom[0], top[1] - bottom[1]);
+  const angle = Math.atan2(left[1] - right[1], left[0] - right[0]) * 180 / Math.PI;
+
+  const center = [(left[0] + right[0]) / 2 , ( top[1] + bottom[1] ) / 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',
+    'transform': `rotate(${angle} ${center[0]} ${center[1]})`,
+    '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 drawEllipseByCoordinates;

package/src/drawingSvg/index.ts

@@ -1,6 +1,7 @@
 import draw from './draw';
 import drawCircle from './drawCircle';
 import drawEllipse from './drawEllipse';
+import drawEllipseByCoordinates from './drawEllipseByCoordinates';
 import drawHandles from './drawHandles';
 import drawLine from './drawLine';
 import drawPolyline from './drawPolyline';
@@ -16,6 +17,7 @@ export {
   draw,
   drawCircle,
   drawEllipse,
+  drawEllipseByCoordinates,
   drawHandles,
   drawLine,
   drawPolyline,

package/src/tools/annotation/EllipticalROITool.ts

@@ -24,7 +24,7 @@ import { isAnnotationLocked } from '../../stateManagement/annotation/annotationL
 import { isAnnotationVisible } from '../../stateManagement/annotation/annotationVisibility';
 import {
   drawCircle as drawCircleSvg,
-  drawEllipse as drawEllipseSvg,
+  drawEllipseByCoordinates as drawEllipseSvg,
   drawHandles as drawHandlesSvg,
   drawLinkedTextBox as drawLinkedTextBoxSvg,
 } from '../../drawingSvg';
@@ -787,18 +787,9 @@ class EllipticalROITool extends AnnotationTool {
       );
       let canvasCorners;
 
-      if (rotation == 90 || rotation == 270) {
-        canvasCorners = <Array<Types.Point2>>getCanvasEllipseCorners([
-          canvasCoordinates[2], // bottom
-          canvasCoordinates[3], // top
-          canvasCoordinates[0], // left
-          canvasCoordinates[1], // right
-        ]);
-      } else {
-        canvasCorners = <Array<Types.Point2>>(
-          getCanvasEllipseCorners(canvasCoordinates) // bottom, top, left, right, keep as is
-        );
-      }
+      canvasCorners = <Array<Types.Point2>>(
+        getCanvasEllipseCorners(canvasCoordinates) // bottom, top, left, right, keep as is
+      );
 
       const { centerPointRadius } = this.configuration;
 
@@ -905,8 +896,7 @@ class EllipticalROITool extends AnnotationTool {
         svgDrawingHelper,
         annotationUID,
         ellipseUID,
-        canvasCorners[0],
-        canvasCorners[1],
+        canvasCoordinates,
         {
           color,
           lineDash,