WIP ellipse sr + fix build errors

src/annotations/_AnnotationManager.js

@@ -90,6 +90,11 @@ class _AnnotationManager {
             value: "G-A186",
             schemeDesignator: "SRT",
           }),
+          new dcmjs.sr.coding.CodedConcept({
+            meaning: "AREA",
+            value: "G-D7FE",
+            schemeDesignator: "SRT",
+          }),
         ];
         const measurementCodedConcept =
           getContentItemNameCodedConcept(measurement);
@@ -152,10 +157,9 @@ class _AnnotationManager {
 
   getMeasurements(feature) {
     /** Annotations */
-    return (
-      bidirectional.getMeasurements(feature, this.props) ||
-      ellipse.getMeasurements(feature, this.props)
-    );
+    return bidirectional
+      .getMeasurements(feature, this.props)
+      .concat(ellipse.getMeasurements(feature, this.props));
   }
 
   onAdd(feature) {

src/annotations/markers/arrow.js

@@ -124,8 +124,7 @@ const _isArrow = (feature) =>
  * @param {object} dependencies.markupManager Markup manager shared instance
  */
 const ArrowMarker = ({ map, markupManager }) => {
-  return {
-    ...annotationInterface,
+  return Object.assign({}, annotationInterface, {
     onAdd: (feature) => {
       if (_isArrow(feature)) {
         _applyStyles(feature, map)
@@ -162,7 +161,7 @@ const ArrowMarker = ({ map, markupManager }) => {
         markupManager.remove(uid)
       }
     },
-  }
+  })
 }
 
 export default ArrowMarker

src/annotations/markups/bidirectional/bidirectional.js

@@ -216,8 +216,7 @@ const attachPointerEvents = (viewerProperties) => {
   map.on(Enums.MapEvents.POINTER_DRAG, onPointerDragHandler);
 };
 
-const bidirectional = {
-  ...annotationInterface,
+const bidirectional = Object.assign({}, annotationInterface, {
   onAdd: (feature, viewerProperties) => {
     const { measurements } = feature.getProperties();
     if (measurements && JSON.stringify(measurements).includes("Long Axis")) {
@@ -393,7 +392,7 @@ const bidirectional = {
         longAxisFeature.set(Enums.InternalProperties.StyleOptions, styles);
       }
     }
-  },
-};
+  }
+})
 
 export default bidirectional;

src/annotations/markups/ellipse/ellipse.js

@@ -1,16 +1,18 @@
-import Enums from "../../../enums";
 import Style from "ol/style/Style";
 import Stroke from "ol/style/Stroke";
+import dcmjs from "dcmjs";
 import { fromCircle } from "ol/geom/Polygon";
 import CircleGeometry from "ol/geom/Circle";
-import { distance } from "../bidirectional/mathUtils";
 import { Feature } from "ol";
 import CircleStyle from "ol/style/Circle";
 import Point from "ol/geom/Point";
-import { getFeatureScoord3dArea } from "../../../scoord3dUtils";
-import { getUnitSuffix } from "../../../utils";
 import Fill from "ol/style/Fill";
 import RegularShape from "ol/style/RegularShape";
+
+import Enums from "../../../enums";
+import { distance } from "../bidirectional/mathUtils";
+import { getFeatureScoord3dArea } from "../../../scoord3dUtils";
+import { getUnitSuffix } from "../../../utils";
 import annotationInterface from "../../annotationInterface";
 import { getEllipseHandlesId, getEllipseId } from "./id";
 
@@ -277,8 +279,7 @@ const getChangeEvent = (viewerProperties) => {
   };
 };
 
-const ellipse = {
-  ...annotationInterface,
+const ellipse = Object.assign({}, annotationInterface, {
   onAdd: (feature, viewerProperties) => {
     const { markupManager, drawingSource } = viewerProperties;
     const { isEllipseHandles } = feature.getProperties();
@@ -353,8 +354,60 @@ const ellipse = {
       markupManager.remove(ellipseHandlesFeature.getId());
     }
   },
-  getMeasurements: feature => {
-    // todo
+  getMeasurements: (feature, viewerProperties) => {
+    const { drawingSource, pyramid } = viewerProperties;
+
+    const { isEllipseHandles, isEllipseShape } =
+      feature.getProperties();
+    const isEllipse = isEllipseHandles || isEllipseShape;
+
+    if (isEllipse) {
+      let ellipseHandlesFeature;
+      let ellipseFeature;
+      let points = [];
+      let area = 0;
+
+      if (ellipseHandlesFeature) {
+        ellipseHandlesFeature = feature;
+
+        const ellipseFeatureId = getEllipseId(ellipseHandlesFeature);
+        ellipseFeature = drawingSource.getFeatureById(ellipseFeatureId);
+
+        if (ellipseFeature) {
+          area = getFeatureScoord3dArea(ellipseFeature, pyramid);
+          points = ellipseFeature.getGeometry().getCoordinates().map(coordinate => ({
+            x: coordinate[0],
+            y: coordinate[1] 
+          }));
+        }
+      }
+
+      if (isEllipseShape) {
+        ellipseFeature = feature;
+        area = getFeatureScoord3dArea(ellipseFeature, pyramid);
+        points = ellipseFeature.getGeometry().getCoordinates().map(coordinate => ({
+          x: coordinate[0],
+          y: coordinate[1] 
+        }));
+      }
+
+      const ellipse = new dcmjs.utilities.TID300.Ellipse({
+        area,
+        points
+      });
+
+      const contentItem = ellipse.contentItem();
+      const numContentItems = contentItem.filter(
+        (ci) => ci.ValueType === "NUM"
+      );
+      return numContentItems.map((measurement) => {
+        /** Update format wrong in dcmjs */
+        measurement.ConceptNameCodeSequence = [
+          measurement.ConceptNameCodeSequence,
+        ];
+        return measurement;
+      });
+    }
     return [];
   },
   onSetFeatureStyle: (feature, styleOptions, viewerProperties) => {
@@ -409,6 +462,6 @@ const ellipse = {
       }
     }
   },
-};
+})
 
 export default ellipse;

src/annotations/markups/measurement.js

@@ -43,8 +43,7 @@ const _isMeasurement = (feature) =>
 const MeasurementMarkup = (viewerProperties) => {
   const { map, pyramid, markupManager } = viewerProperties;
 
-  return {
-    ...annotationInterface,
+  return Object.assign({}, annotationInterface, {
     onAdd: (feature) => {
       if (_isMeasurement(feature)) {
         const view = map.getView();
@@ -74,7 +73,7 @@ const MeasurementMarkup = (viewerProperties) => {
         markupManager.create({ feature });
       }
     },
-  };
+  });
 };
 
 export default MeasurementMarkup;

src/annotations/markups/textEvaluation.js

@@ -87,8 +87,7 @@ const _onInteractionEventHandler = ({ feature, markupManager }) => {
  * @param {object} dependencies.markupManager MarkupManager shared instance
  */
 const TextEvaluationMarkup = ({ markupManager }) => {
-  return {
-    ...annotationInterface,
+  return Object.assign({}, annotationInterface, {
     onAdd: (feature) => {
       if (_isTextEvaluation(feature)) {
         _onInteractionEventHandler({ feature, markupManager })
@@ -130,7 +129,7 @@ const TextEvaluationMarkup = ({ markupManager }) => {
         _onInteractionEventHandler({ feature, markupManager })
       }
     },
-  }
+  })
 }
 
 export default TextEvaluationMarkup

src/viewer.js

@@ -65,7 +65,6 @@ import {
 import { RenderingEngine } from './renderingEngine.js'
 import Enums from './enums'
 import _AnnotationManager from './annotations/_AnnotationManager'
-import { getLongAxisId, getShortAxisId } from './annotations/markups/bidirectional/id'
 
 function _getInteractionBindingCondition (bindings, condition = () => true) {
   const BUTTONS = {
@@ -378,19 +377,10 @@ function _updateFeatureEvaluations (feature) {
  */
 function _updateFeatureMeasurements (feature, viewerProperties) {
   const { map, pyramid, annotationManager } = viewerProperties;
+  const featureMarkup = feature.get(Enums.InternalProperties.Markup);
 
-  const { 
-    [Enums.InternalProperties.Markup]: featureMarkup, 
-    [Enums.Bidirectional.IsShortAxis]: isShortAxis,
-    [Enums.Bidirectional.IsLongAxis]: isLongAxis
-  } = feature.getProperties();
-
-  const isBidirectional = isShortAxis || isLongAxis;
-
-  if (
-    Enums.Markup.Measurement !== featureMarkup
-  ) {
-    return
+  if (Enums.Markup.Measurement !== featureMarkup) {
+    return;
   }
 
   const area = getFeatureScoord3dArea(feature, pyramid)