fix(Measurement): fixed line dashing of measurements in various scenarios (#3407)

* fix(Measurement): fixed line dashing of measurements in various scenarios

For a StackViewport simply rely on the SeriesInstanceUID being part of the
tracked measurements or not.

For a VolumeViewport first check the image id of the current image in the viewport
and then check the SeriesInstanceUID (like for a StackViewport) if an id is returned.
To reliably get the id of the current image, listen for the VOLUME_VIEWPORT_NEW_VOLUME event.

* Changes for PR comments.

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import OHIF, { utils } from '@ohif/core';
 
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { annotation } from '@cornerstonejs/tools';
 import { useTrackedMeasurements } from './../getContextModule';
+import { BaseVolumeViewport, Enums } from '@cornerstonejs/core';
 
 const { formatDate } = utils;
 
@@ -34,6 +35,7 @@ function TrackedCornerstoneViewport(props) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [isTracked, setIsTracked] = useState(false);
   const [trackedMeasurementUID, setTrackedMeasurementUID] = useState(null);
+  const [viewportElem, setViewportElem] = useState(null);
 
   const { trackedSeries } = trackedMeasurements.context;
   const viewportId = viewportOptions.viewportId;
@@ -55,6 +57,69 @@ function TrackedCornerstoneViewport(props) {
     ManufacturerModelName,
   } = displaySet.images[0];
 
+  const updateIsTracked = useCallback(() => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
+      viewportIndex
+    );
+
+    if (viewport instanceof BaseVolumeViewport) {
+      // A current image id will only exist for volume viewports that can have measurements tracked.
+      // Typically these are those volume viewports for the series of acquisition.
+      const currentImageId = viewport?.getCurrentImageId();
+
+      if (!currentImageId) {
+        if (isTracked) {
+          setIsTracked(false);
+        }
+        return;
+      }
+    }
+
+    if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
+      setIsTracked(!isTracked);
+    }
+  }, [isTracked, trackedMeasurements, viewportIndex, SeriesInstanceUID]);
+
+  const onElementEnabled = useCallback(
+    evt => {
+      if (evt.detail.element !== viewportElem) {
+        // The VOLUME_VIEWPORT_NEW_VOLUME event allows updateIsTracked to reliably fetch the image id for a volume viewport.
+        evt.detail.element?.addEventListener(
+          Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+          updateIsTracked
+        );
+        setViewportElem(evt.detail.element);
+      }
+    },
+    [updateIsTracked, viewportElem]
+  );
+
+  const onElementDisabled = useCallback(() => {
+    viewportElem?.removeEventListener(
+      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      updateIsTracked
+    );
+  }, [updateIsTracked, viewportElem]);
+
+  useEffect(updateIsTracked, [updateIsTracked]);
+
+  useEffect(() => {
+    const { unsubscribe } = cornerstoneViewportService.subscribe(
+      cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
+      props => {
+        if (props.viewportIndex !== viewportIndex) {
+          return;
+        }
+
+        updateIsTracked();
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [updateIsTracked, viewportIndex]);
+
   useEffect(() => {
     if (isTracked) {
       annotation.config.style.setViewportToolStyles(viewportId, {
@@ -83,19 +148,6 @@ function TrackedCornerstoneViewport(props) {
     };
   }, [isTracked]);
 
-  // A current image id will only exist for viewports that can have measurements tracked.
-  // Typically these are stack viewports and those volume viewports for the series of acquisition.
-  const currentImageId = cornerstoneViewportService
-    .getCornerstoneViewport(viewportId)
-    ?.getCurrentImageId();
-  if (currentImageId) {
-    if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
-      setIsTracked(!isTracked);
-    }
-  } else if (isTracked) {
-    setIsTracked(false);
-  }
-
   function switchMeasurement(direction) {
     const newTrackedMeasurementUID = _getNextMeasurementUID(
       direction,
@@ -121,7 +173,13 @@ function TrackedCornerstoneViewport(props) {
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
     );
 
-    return <Component {...props} />;
+    return (
+      <Component
+        {...props}
+        onElementEnabled={onElementEnabled}
+        onElementDisabled={onElementDisabled}
+      />
+    );
   };
 
   return (