Fix/cine black images

common/reviews/api/tools.api.md

@@ -649,6 +649,7 @@ type CinePlayContext = {
     get numScrollSteps(): number;
     get currentStepIndex(): number;
     get frameTimeVectorEnabled(): boolean;
+    tries?: number;
     scroll(delta: number): void;
 };
 
@@ -3182,7 +3183,6 @@ interface IVolumeViewport extends IViewport {
     // (undocumented)
     useCPURendering: boolean;
     worldToCanvas: (worldPos: Point3) => Point2;
-
 }
 
 // @public (undocumented)
@@ -3761,6 +3761,7 @@ type PlayClipOptions = {
     loop?: boolean;
     dynamicCineEnabled?: boolean;
     frameTimeVectorSpeedMultiplier?: number;
+    waitForRendered?: number;
 };
 
 declare namespace point {

packages/adapters/rollup.config.mjs

@@ -25,6 +25,7 @@ export default {
     ],
     plugins: [
         resolve({
+            preferBuiltins: true,
             browser: true
         }),
         commonjs(),

packages/core/src/RenderingEngine/StackViewport.ts

@@ -2151,6 +2151,7 @@ class StackViewport extends Viewport implements IStackViewport {
     // Update the state of the viewport to the new imageIdIndex;
     this.currentImageIdIndex = imageIdIndex;
     this.hasPixelSpacing = true;
+    this.viewportStatus = ViewportStatus.PRE_RENDER;
 
     // Todo: trigger an event to allow applications to hook into START of loading state
     // Currently we use loadHandlerManagers for this

packages/tools/src/types/CINETypes.ts

@@ -1,12 +1,12 @@
-import { Types } from '@cornerstonejs/core';
-
 type PlayClipOptions = {
   framesPerSecond?: number;
   frameTimeVector?: number[];
   reverse?: boolean;
   loop?: boolean;
   dynamicCineEnabled?: boolean;
   frameTimeVectorSpeedMultiplier?: number;
+  // How many items to wait for.  Set to 0 to play immediately
+  waitForRendered?: number;
 };
 
 interface ToolData {
@@ -26,6 +26,7 @@ type CinePlayContext = {
   get numScrollSteps(): number;
   get currentStepIndex(): number;
   get frameTimeVectorEnabled(): boolean;
+  tries?: number;
   scroll(delta: number): void;
 };
 

packages/tools/src/utilities/cine/playClip.ts

@@ -6,6 +6,7 @@ import {
   VolumeViewport,
   cache,
   BaseVolumeViewport,
+  Enums,
 } from '@cornerstonejs/core';
 
 import { Types } from '@cornerstonejs/core';
@@ -14,6 +15,7 @@ import { addToolState, getToolState } from './state';
 import { CINETypes } from '../../types';
 import scroll from '../scroll';
 
+const { ViewportStatus } = Enums;
 const { triggerEvent } = csUtils;
 
 const debounced = true;
@@ -315,7 +317,8 @@ function _getVolumeFromViewport(viewport): Types.IImageVolume {
 }
 
 function _createStackViewportCinePlayContext(
-  viewport: StackViewport
+  viewport: StackViewport,
+  waitForRendered: number
 ): CINETypes.CinePlayContext {
   const imageIds = viewport.getImageIds();
 
@@ -330,7 +333,16 @@ function _createStackViewportCinePlayContext(
       // It is always in acquired orientation
       return true;
     },
+    tries: 0,
     scroll(delta: number): void {
+      if (
+        this.tries <= waitForRendered &&
+        viewport.viewportStatus !== ViewportStatus.RENDERED
+      ) {
+        this.tries++;
+        return;
+      }
+      this.tries = 0;
       scroll(viewport, { delta, debounceLoading: debounced });
     },
   };
@@ -419,7 +431,10 @@ function _createCinePlayContext(
   playClipOptions: CINETypes.PlayClipOptions
 ): CINETypes.CinePlayContext {
   if (viewport instanceof StackViewport) {
-    return _createStackViewportCinePlayContext(viewport);
+    return _createStackViewportCinePlayContext(
+      viewport,
+      playClipOptions.waitForRendered ?? 30
+    );
   }
 
   if (viewport instanceof VolumeViewport) {