feat(Segmentation): Segmentation highlight animation function selection (#5401)

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -16,7 +16,7 @@ import {
 } from '@cornerstonejs/tools';
 import { PubSubService, Types as OHIFTypes } from '@ohif/core';
 import i18n from '@ohif/i18n';
-import { easeInOutBell, easeInOutBellRelative } from '../../utils/transitions';
+import { EasingFunctionEnum, EasingFunctionMap } from '../../utils/transitions';
 import { mapROIContoursToRTStructData } from './RTSTRUCT/mapROIContoursToRTStructData';
 import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
 import { addColorLUT } from '@cornerstonejs/tools/segmentation/addColorLUT';
@@ -1178,7 +1178,7 @@ class SegmentationService extends PubSubService {
     highlightSegment = true,
     animationLength = 750,
     highlightHideOthers = false,
-    highlightFunctionType = 'ease-in-out' // todo: make animation functions configurable from outside
+    animationFunctionType: EasingFunctionEnum = EasingFunctionEnum.EASE_IN_OUT
   ): void {
     const center = this._getSegmentCenter(segmentationId, segmentIndex);
     if (!center) {
@@ -1204,7 +1204,8 @@ class SegmentationService extends PubSubService {
           viewportId,
           highlightAlpha,
           animationLength,
-          highlightHideOthers
+          highlightHideOthers,
+          animationFunctionType
         );
     });
   }
@@ -1216,7 +1217,7 @@ class SegmentationService extends PubSubService {
     alpha = 0.9,
     animationLength = 750,
     hideOthers = true,
-    highlightFunctionType = 'ease-in-out'
+    animationFunctionType: EasingFunctionEnum = EasingFunctionEnum.EASE_IN_OUT
   ): void {
     if (this.highlightIntervalId) {
       clearInterval(this.highlightIntervalId);
@@ -1249,7 +1250,8 @@ class SegmentationService extends PubSubService {
         segments,
         viewportId,
         animationLength,
-        representation
+        representation,
+        animationFunctionType
       );
     });
   }
@@ -1614,7 +1616,8 @@ class SegmentationService extends PubSubService {
     segments: Segment[],
     viewportId: string,
     animationLength: number,
-    representation: cstTypes.SegmentationRepresentation
+    representation: cstTypes.SegmentationRepresentation,
+    animationFunctionType: EasingFunctionEnum
   ) {
     const { segmentationId } = representation;
     const newSegmentSpecificConfig = {
@@ -1648,6 +1651,8 @@ class SegmentationService extends PubSubService {
       const elapsed = timestamp - startTime;
       const progress = Math.min(elapsed / animationLength, 1);
 
+      const easingFunction = EasingFunctionMap.get(animationFunctionType);
+
       cstSegmentation.config.style.setStyle(
         {
           segmentationId,
@@ -1655,7 +1660,7 @@ class SegmentationService extends PubSubService {
           type: LABELMAP,
         },
         {
-          fillAlpha: easeInOutBell(progress, fillAlpha),
+          fillAlpha: easingFunction(progress, fillAlpha),
         }
       );
 
@@ -1683,7 +1688,8 @@ class SegmentationService extends PubSubService {
     segments: Segment[],
     viewportId: string,
     animationLength: number,
-    representation: cstTypes.SegmentationRepresentation
+    representation: cstTypes.SegmentationRepresentation,
+    animationFunctionType: EasingFunctionEnum
   ) {
     const { segmentationId } = representation;
     const startTime = performance.now();
@@ -1693,8 +1699,6 @@ class SegmentationService extends PubSubService {
     }) as ContourStyle;
 
     const prevOutlineWidth = prevStyle.outlineWidth;
-    // make this configurable
-    const baseline = Math.max(prevOutlineWidth * 3.5, 5);
 
     const animate = (currentTime: number) => {
       const progress = (currentTime - startTime) / animationLength;
@@ -1703,7 +1707,8 @@ class SegmentationService extends PubSubService {
         return;
       }
 
-      const reversedProgress = easeInOutBellRelative(progress, baseline, prevOutlineWidth);
+      const OUTLINE_ANIMATION_SCALE_FACTOR = 5;
+      const easingFunction = EasingFunctionMap.get(animationFunctionType);
 
       cstSegmentation.config.style.setStyle(
         {
@@ -1712,7 +1717,7 @@ class SegmentationService extends PubSubService {
           type: CONTOUR,
         },
         {
-          outlineWidth: reversedProgress,
+          outlineWidth: easingFunction(progress, prevOutlineWidth, OUTLINE_ANIMATION_SCALE_FACTOR),
         }
       );