fix(viewport): Reset viewport state and fix CINE looping, thumbnail resolution, and dynamic tool settings (#4037)

extensions/measurement-tracking/package.json

@@ -32,8 +32,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^1.70.5",
-    "@cornerstonejs/tools": "^1.70.5",
+    "@cornerstonejs/core": "^1.70.6",
+    "@cornerstonejs/tools": "^1.70.6",
     "@ohif/core": "3.8.0-beta.80",
     "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.80",
     "@ohif/ui": "3.8.0-beta.80",

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/getImageSrcFromImageId.js

@@ -5,14 +5,8 @@
 function getImageSrcFromImageId(cornerstone, imageId) {
   return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas');
-    // Note: the default width and height of the canvas is 300x150
-    // but we need to set the width and height to the same number since
-    // the thumbnails are usually square and we want to maintain the aspect ratio
-    canvas.width = 128 / window.devicePixelRatio;
-    canvas.height = 128 / window.devicePixelRatio;
-
     cornerstone.utilities
-      .loadImageToCanvas({ canvas, imageId })
+      .loadImageToCanvas({ canvas, imageId, thumbnail: true })
       .then(imageId => {
         resolve(canvas.toDataURL());
       })

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

@@ -219,7 +219,10 @@ function TrackedCornerstoneViewport(props) {
     return (
       <Component
         {...props}
-        onElementEnabled={onElementEnabled}
+        onElementEnabled={evt => {
+          props.onElementEnabled?.(evt);
+          onElementEnabled(evt);
+        }}
         onElementDisabled={onElementDisabled}
       />
     );