feat: draw center point of the ellipticalROI tool and make it configu…

…rable (#191)

* #190 - draw center point of the ellipticalROI tool and make it configurable

* #190 - moved utility function : getCanvasEllipseCenter() to internal, as it changes public api of cornerstone-tools and not quite sure of its usuability in other tools, yet

* #190 - removed separate getCanvasEllipseCenter()

* #190 - ran build:update-api

* #190 - code review fixes

* #190 - update comments of the EllipticalROITool

common/reviews/api/tools.api.md

@@ -1410,6 +1410,8 @@ export class EllipticalROITool extends AnnotationTool {
         hasMoved?: boolean;
     } | null;
     // (undocumented)
+    _getCanvasEllipseCenter(ellipseCanvasPoints: Types_2.Point2[]): Types_2.Point2;
+    // (undocumented)
     _getTextLines: (data: any, targetId: string, isPreScaled: boolean) => string[];
     // (undocumented)
     handleSelectedCallback: (evt: EventTypes_2.MouseDownEventType, annotation: EllipticalROIAnnotation, handle: ToolHandle, interactionType?: string) => void;

packages/tools/src/tools/annotation/EllipticalROITool.ts

@@ -18,6 +18,7 @@ import {
 import { isAnnotationLocked } from '../../stateManagement/annotation/annotationLocking';
 import { isAnnotationVisible } from '../../stateManagement/annotation/annotationVisibility';
 import {
+  drawCircle as drawCircleSvg,
   drawEllipse as drawEllipseSvg,
   drawHandles as drawHandlesSvg,
   drawLinkedTextBox as drawLinkedTextBoxSvg,
@@ -78,6 +79,9 @@ const { transformWorldToIndex } = csUtils;
  * ToolState manager and can be accessed from the ToolState by calling getAnnotations
  * or similar methods.
  *
+ * Changing tool configuration (see below) you can make the tool to draw the center
+ * point circle with a given radius.
+ *
  * ```js
  * cornerstoneTools.addTool(EllipticalROITool)
  *
@@ -94,6 +98,11 @@ const { transformWorldToIndex } = csUtils;
  *     },
  *   ],
  * })
+ *
+ * // draw a circle at the center point with 4px radius.
+ * toolGroup.setToolConfiguration(EllipticalROITool.toolName, {
+ *   centerPointRadius: 4,
+ * });
  * ```
  *
  * Read more in the Docs section of the website.
@@ -125,6 +134,9 @@ class EllipticalROITool extends AnnotationTool {
       configuration: {
         shadow: true,
         preventHandleOutsideImage: false,
+        // Radius of the circle to draw  at the center point of the ellipse.
+        // Set this zero(0) in order not to draw the circle.
+        centerPointRadius: 0,
       },
     }
   ) {
@@ -757,6 +769,8 @@ class EllipticalROITool extends AnnotationTool {
         getCanvasEllipseCorners(canvasCoordinates)
       );
 
+      const { centerPointRadius } = this.configuration;
+
       // If cachedStats does not exist, or the unit is missing (as part of import/hydration etc.),
       // force to recalculate the stats from the points
       if (
@@ -868,6 +882,29 @@ class EllipticalROITool extends AnnotationTool {
         }
       );
 
+      // draw center point, if "centerPointRadius" configuration is valid.
+      if (centerPointRadius > 0) {
+        const minRadius = Math.min(
+          Math.abs(canvasCorners[0][0] - canvasCorners[1][0]) / 2, // horizontal radius
+          Math.abs(canvasCorners[0][1] - canvasCorners[1][1]) / 2 // vertical radius
+        );
+        if (minRadius > 3 * centerPointRadius) {
+          const centerPoint = this._getCanvasEllipseCenter(canvasCoordinates);
+          drawCircleSvg(
+            svgDrawingHelper,
+            annotationUID,
+            ellipseUID,
+            centerPoint,
+            centerPointRadius,
+            {
+              color,
+              lineDash,
+              lineWidth,
+            }
+          );
+        }
+      }
+
       renderStatus = true;
 
       const isPreScaled = isViewportPreScaled(viewport, targetId);
@@ -1139,6 +1176,22 @@ class EllipticalROITool extends AnnotationTool {
 
     return inEllipse;
   }
+
+  /**
+   * It takes the canvas coordinates of the ellipse corners and returns the center point of it
+   *
+   * @param ellipseCanvasPoints - The coordinates of the ellipse in the canvas.
+   * @returns center point.
+   */
+  _getCanvasEllipseCenter(ellipseCanvasPoints: Types.Point2[]): Types.Point2 {
+    const [bottom, top, left, right] = ellipseCanvasPoints;
+    const topLeft = [left[0], top[1]];
+    const bottomRight = [right[0], bottom[1]];
+    return [
+      (topLeft[0] + bottomRight[0]) / 2,
+      (topLeft[1] + bottomRight[1]) / 2,
+    ] as Types.Point2;
+  }
 }
 
 EllipticalROITool.toolName = 'EllipticalROI';