feat(structuredClone): drop lodash.clonedeep in favor of structuredClone

.eslintignore

@@ -1,3 +1,5 @@
 *.css
 *.md
 *.json
+packages/adapters/config/webpack/*.js
+packages/docs/*.js

common/reviews/api/tools.api.md

@@ -1395,16 +1395,16 @@ function createLabelmapVolumeForViewport(input: {
     renderingEngineId: string;
     segmentationId?: string;
     options?: {
-        volumeId?: string;
-        scalarData?: Float32Array | Uint8Array | Uint16Array | Int16Array;
-        targetBuffer?: {
+        volumeId: string;
+        scalarData: Float32Array | Uint8Array | Uint16Array | Int16Array;
+        targetBuffer: {
             type: 'Float32Array' | 'Uint8Array' | 'Uint16Array' | 'Int8Array';
         };
-        metadata?: any;
-        dimensions?: Types_2.Point3;
-        spacing?: Types_2.Point3;
-        origin?: Types_2.Point3;
-        direction?: Float32Array;
+        metadata: Types_2.Metadata;
+        dimensions: Types_2.Point3;
+        spacing: Types_2.Point3;
+        origin: Types_2.Point3;
+        direction: Types_2.Mat3;
     };
 }): Promise<string>;
 

package.json

@@ -139,7 +139,7 @@
     "stylelint": "^15.6.0",
     "ts-loader": "^9.4.2",
     "typedoc": "^0.24.6",
-    "typescript": "4.6.4",
+    "typescript": "4.9.5",
     "unzipper": "^0.10.11",
     "url-loader": "^4.1.1",
     "webpack-bundle-analyzer": "^4.8.0",

packages/adapters/config/webpack/merge.js

@@ -0,0 +1,24 @@
+const _ = require("lodash");
+
+// Merge two objects
+// Instead of merging array objects index by index (n-th source
+// item with n-th object item) it concatenates both arrays
+module.exports = function (object, source) {
+    const clone = structuredClone(object);
+    const merged = _.mergeWith(
+        clone,
+        source,
+        function (objValue, srcValue, key, object, source, stack) {
+            if (
+                objValue &&
+                srcValue &&
+                _.isArray(objValue) &&
+                _.isArray(srcValue)
+            ) {
+                return _.concat(objValue, srcValue);
+            }
+        }
+    );
+
+    return merged;
+};

packages/adapters/package.json

@@ -45,7 +45,6 @@
         "buffer": "^6.0.3",
         "dcmjs": "^0.29.8",
         "gl-matrix": "^3.4.3",
-        "lodash.clonedeep": "^4.5.0",
         "ndarray": "^1.0.19"
     },
     "devDependencies": {

packages/adapters/rollup.config.mjs

@@ -8,7 +8,7 @@ import { readFileSync } from "fs";
 const pkg = JSON.parse(readFileSync("package.json", { encoding: "utf8" }));
 
 export default {
-    external: ["dcmjs", "gl-matrix", "lodash.clonedeep", "ndarray"],
+    external: ["dcmjs", "gl-matrix", "ndarray"],
     input: pkg.src || "src/index.ts",
     output: [
         // {

packages/adapters/src/adapters/Cornerstone/Segmentation_4X.js

@@ -6,7 +6,6 @@ import {
     derivations
 } from "dcmjs";
 import ndarray from "ndarray";
-import cloneDeep from "lodash.clonedeep";
 
 import { Events } from "../enums";
 
@@ -923,7 +922,7 @@ function insertOverlappingPixelDataPlanar(
     let tempBuffer = labelmapBufferArray[m].slice(0);
 
     // temp list for checking overlaps
-    let tempSegmentsOnFrame = cloneDeep(segmentsOnFrameArray[m]);
+    let tempSegmentsOnFrame = structuredClone(segmentsOnFrameArray[m]);
 
     /** split overlapping SEGs algorithm for each segment:
      *  A) copy the labelmapBuffer in the array with index 0
@@ -1049,7 +1048,7 @@ function insertOverlappingPixelDataPlanar(
                             M++;
                         }
                         tempBuffer = labelmapBufferArray[m].slice(0);
-                        tempSegmentsOnFrame = cloneDeep(
+                        tempSegmentsOnFrame = structuredClone(
                             segmentsOnFrameArray[m]
                         );
 
@@ -1078,12 +1077,12 @@ function insertOverlappingPixelDataPlanar(
         }
 
         labelmapBufferArray[m] = tempBuffer.slice(0);
-        segmentsOnFrameArray[m] = cloneDeep(tempSegmentsOnFrame);
+        segmentsOnFrameArray[m] = structuredClone(tempSegmentsOnFrame);
 
         // reset temp variables/buffers for new segment
         m = 0;
         tempBuffer = labelmapBufferArray[m].slice(0);
-        tempSegmentsOnFrame = cloneDeep(segmentsOnFrameArray[m]);
+        tempSegmentsOnFrame = structuredClone(segmentsOnFrameArray[m]);
     }
 }
 

packages/core/.webpack/webpack.prod.js

@@ -43,14 +43,6 @@ module.exports = (env, argv) => {
           amd: 'detect-gpu',
         },
       },
-      {
-        'lodash.clonedeep': {
-          root: 'window',
-          commonjs: 'lodash.clonedeep',
-          commonjs2: 'lodash.clonedeep',
-          amd: 'lodash.clonedeep',
-        },
-      },
     ],
     // plugins: [new webpackBundleAnalyzer.BundleAnalyzerPlugin()],
   });

packages/core/package.json

@@ -32,8 +32,7 @@
   "dependencies": {
     "@kitware/vtk.js": "27.3.1",
     "detect-gpu": "^5.0.22",
-    "gl-matrix": "^3.4.3",
-    "lodash.clonedeep": "4.5.0"
+    "gl-matrix": "^3.4.3"
   },
   "contributors": [
     {

packages/core/src/RenderingEngine/StackViewport.ts

@@ -1,7 +1,6 @@
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import type { vtkImageData as vtkImageDataType } from '@kitware/vtk.js/Common/DataModel/ImageData';
-import _cloneDeep from 'lodash.clonedeep';
 import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
 import { vec2, vec3, mat4 } from 'gl-matrix';
 import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
@@ -1957,7 +1956,7 @@ class StackViewport extends Viewport implements IStackViewport {
 
     // Cache camera props so we can trigger one camera changed event after
     // The full transition.
-    const previousCameraProps = _cloneDeep(this.getCamera());
+    const previousCameraProps = structuredClone(this.getCamera());
     if (sameImageData && !this.stackInvalidated) {
       // 3a. If we can reuse it, replace the scalar data under the hood
       this._updateVTKImageDataFromCornerstoneImage(image);

packages/core/src/RenderingEngine/Viewport.ts

@@ -4,7 +4,6 @@ import vtkMath from '@kitware/vtk.js/Common/Core/Math';
 import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
 
 import { vec2, vec3 } from 'gl-matrix';
-import _cloneDeep from 'lodash.clonedeep';
 
 import Events from '../enums/Events';
 import ViewportStatus from '../enums/ViewportStatus';
@@ -103,11 +102,11 @@ class Viewport implements IViewport {
       this.renderingEngineId
     );
 
-    this.defaultOptions = _cloneDeep(props.defaultOptions);
+    this.defaultOptions = structuredClone(props.defaultOptions);
     this.suppressEvents = props.defaultOptions.suppressEvents
       ? props.defaultOptions.suppressEvents
       : false;
-    this.options = _cloneDeep(props.defaultOptions);
+    this.options = structuredClone(props.defaultOptions);
     this.isDisabled = false;
   }
 
@@ -180,7 +179,7 @@ class Viewport implements IViewport {
    * @param immediate - If `true`, renders the viewport after the options are set.
    */
   public setOptions(options: ViewportInputOptions, immediate = false): void {
-    this.options = <ViewportInputOptions>_cloneDeep(options);
+    this.options = <ViewportInputOptions>structuredClone(options);
 
     // TODO When this is needed we need to move the camera position.
     // We can steal some logic from the tools we build to do this.
@@ -198,7 +197,7 @@ class Viewport implements IViewport {
    * @param immediate - If `true`, renders the viewport after the options are reset.
    */
   public reset(immediate = false) {
-    this.options = _cloneDeep(this.defaultOptions);
+    this.options = structuredClone(this.defaultOptions);
 
     // TODO When this is needed we need to move the camera position.
     // We can steal some logic from the tools we build to do this.
@@ -660,7 +659,7 @@ class Viewport implements IViewport {
       flipVertical: false,
     });
 
-    const previousCamera = _cloneDeep(this.getCamera());
+    const previousCamera = structuredClone(this.getCamera());
     const bounds = renderer.computeVisiblePropBounds();
     const focalPoint = <Point3>[0, 0, 0];
     const imageData = this.getDefaultImageData();
@@ -775,9 +774,9 @@ class Viewport implements IViewport {
       clippingRange: clippingRangeToUse,
     });
 
-    const modifiedCamera = _cloneDeep(this.getCamera());
+    const modifiedCamera = structuredClone(this.getCamera());
 
-    this.setFitToCanvasCamera(_cloneDeep(this.getCamera()));
+    this.setFitToCanvasCamera(structuredClone(this.getCamera()));
 
     if (storeAsInitialCamera) {
       this.setInitialCamera(modifiedCamera);
@@ -1007,7 +1006,7 @@ class Viewport implements IViewport {
     storeAsInitialCamera = false
   ): void {
     const vtkCamera = this.getVtkActiveCamera();
-    const previousCamera = _cloneDeep(this.getCamera());
+    const previousCamera = structuredClone(this.getCamera());
     const updatedCamera = Object.assign({}, previousCamera, cameraInterface);
     const {
       viewUp,

packages/core/src/Settings.ts

@@ -13,7 +13,9 @@ const DICTIONARY = Symbol('Dictionary');
 export default class Settings {
   constructor(base?: Settings) {
     const dictionary = Object.create(
-      base instanceof Settings && DICTIONARY in base ? base[DICTIONARY] : null
+      base instanceof Settings && DICTIONARY in base
+        ? (base[DICTIONARY] as object)
+        : null
     );
     Object.seal(
       Object.defineProperty(this, DICTIONARY, {

packages/core/src/loaders/volumeLoader.ts

@@ -3,7 +3,6 @@ import '@kitware/vtk.js/Rendering/Profiles/Volume';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import type { vtkImageData as vtkImageDataType } from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
-import cloneDeep from 'lodash.clonedeep';
 
 import { ImageVolume } from '../cache/classes/ImageVolume';
 import type * as Types from '../types';
@@ -330,7 +329,7 @@ export async function createAndCacheDerivedVolume(
 
   const derivedVolume = new ImageVolume({
     volumeId,
-    metadata: cloneDeep(metadata),
+    metadata: structuredClone(metadata),
     dimensions: [dimensions[0], dimensions[1], dimensions[2]],
     spacing,
     origin,
@@ -419,7 +418,7 @@ export function createLocalVolume(
 
   const derivedVolume = new ImageVolume({
     volumeId,
-    metadata: cloneDeep(metadata),
+    metadata: structuredClone(metadata),
     dimensions: [dimensions[0], dimensions[1], dimensions[2]],
     spacing,
     origin,

packages/dicomImageLoader/.webpack/merge.js

@@ -4,7 +4,7 @@ const _ = require('lodash');
 // Instead of merging array objects index by index (n-th source
 // item with n-th object item) it concatenates both arrays
 module.exports = function (object, source) {
-  const clone = _.cloneDeep(object);
+  const clone = structuredClone(object);
   const merged = _.mergeWith(
     clone,
     source,

packages/tools/examples/contourRenderingConfiguration/Circle.json

@@ -43,7 +43,6 @@
       "id": "circleSmall2",
       "color": [0, 255, 0],
       "segmentIndex": 2
-
     },
     {
       "data": [
@@ -88,7 +87,6 @@
       "id": "circleSmall4",
       "color": [255, 255, 0],
       "segmentIndex": 4
-
     }
   ]
 }

packages/tools/src/eventListeners/keyboard/keyDownListener.ts

@@ -1,4 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
 import { getEnabledElement, triggerEvent } from '@cornerstonejs/core';
 import Events from '../../enums/Events';
 import { KeyDownEventDetail, KeyUpEventDetail } from '../../types/EventTypes';
@@ -97,7 +96,7 @@ function _onKeyUp(evt: KeyboardEvent): void {
   state.element.addEventListener('keydown', keyListener);
 
   // Restore `state` to `defaultState`
-  state = _cloneDeep(defaultState);
+  state = structuredClone(defaultState);
   triggerEvent(eventDetail.element, Events.KEY_UP, eventDetail);
 }
 

packages/tools/src/stateManagement/annotation/FrameOfReferenceSpecificAnnotationManager.ts

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash.clonedeep';
 import {
   Annotation,
   Annotations,
@@ -314,14 +313,14 @@ class FrameOfReferenceSpecificAnnotationManager implements IAnnotationManager {
       const toolSpecificAnnotations =
         frameOfReferenceSpecificAnnotations[toolName];
 
-      return cloneDeep(toolSpecificAnnotations);
+      return structuredClone(toolSpecificAnnotations);
     } else if (groupKey) {
       const frameOfReferenceSpecificAnnotations = annotations[groupKey];
 
-      return cloneDeep(frameOfReferenceSpecificAnnotations);
+      return structuredClone(frameOfReferenceSpecificAnnotations);
     }
 
-    return cloneDeep(annotations);
+    return structuredClone(annotations);
   };
 
   /**
@@ -361,7 +360,7 @@ class FrameOfReferenceSpecificAnnotationManager implements IAnnotationManager {
       annotations[groupKey] = <GroupSpecificAnnotations>state;
     } else {
       // Set entire annotations
-      this.annotations = <AnnotationState>cloneDeep(state);
+      this.annotations = <AnnotationState>structuredClone(state);
     }
   };
 

packages/tools/src/stateManagement/segmentation/SegmentationStateManager.ts

@@ -1,5 +1,4 @@
 import { utilities as csUtils } from '@cornerstonejs/core';
-import cloneDeep from 'lodash.clonedeep';
 
 import CORNERSTONE_COLOR_LUT from '../../constants/COLOR_LUT';
 
@@ -52,7 +51,7 @@ export default class SegmentationStateManager {
     if (!uid) {
       uid = csUtils.uuidv4();
     }
-    this.state = cloneDeep(initialDefaultState);
+    this.state = structuredClone(initialDefaultState);
     this.uid = uid;
   }
 
@@ -85,7 +84,7 @@ export default class SegmentationStateManager {
    * Reset the state to the default state
    */
   resetState(): void {
-    this.state = cloneDeep(initialDefaultState);
+    this.state = structuredClone(initialDefaultState);
   }
 
   /**

packages/tools/src/stateManagement/segmentation/addSegmentationRepresentations.ts

@@ -1,4 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
 import {
   SegmentationRepresentationConfig,
   RepresentationPublicInput,

packages/tools/src/stateManagement/segmentation/addSegmentations.ts

@@ -1,4 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
 import { SegmentationPublicInput } from '../../types/SegmentationStateTypes';
 import { validateSegmentationInput } from './helpers';
 import { addSegmentation as addSegmentationToState } from './segmentationState';
@@ -18,7 +17,7 @@ function addSegmentations(
   validateSegmentationInput(segmentationInputArray);
 
   segmentationInputArray.map((segInput) => {
-    const segmentationInput = _cloneDeep(segInput);
+    const segmentationInput = structuredClone(segInput);
 
     addSegmentationToState(segmentationInput);
   });