@itk-viewer/remote-viewport - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

 # @itk-viewer/remote-viewport
 
+## 0.2.2
+
+### Patch Changes
+
+- b85a579: Route MultiscaleSpatialImages through Viewport actor to RemoteViewport actor.
+- Updated dependencies [b85a579]
+  - @itk-viewer/viewer@0.2.1
+  - @itk-viewer/io@0.1.2
+
 ## 0.2.1
@@ -4,0 +13,0 @@

dist/remote-machine.d.ts

 /// <reference types="gl-matrix/index.js" />
 import { ReadonlyMat4 } from 'gl-matrix';
-import { Viewport } from '@itk-viewer/viewer/viewport.js';
+import { ActorRefFrom } from 'xstate';
 import { Image } from './types.js';
-type MultiscaleImage = {
-    scaleCount: number;
-    scale: number;
-};
+import { viewportMachine } from '@itk-viewer/viewer/viewport-machine.js';
+import MultiscaleSpatialImage from '@itk-viewer/io/MultiscaleSpatialImage.js';
 type RendererProps = {
@@ -26,4 +24,3 @@ density: number;
     stagedRendererEvents: RendererEntries;
-    viewport: Viewport;
-    image?: MultiscaleImage;
+    viewport: ActorRefFrom<typeof viewportMachine>;
 };
@@ -41,5 +38,5 @@ type ConnectEvent = {
 };
-type SetMultiscaleImage = {
-    type: 'setMultiscaleImage';
-    image: MultiscaleImage;
+type SetImage = {
+    type: 'setImage';
+    image: MultiscaleSpatialImage;
 };
@@ -52,3 +49,84 @@ type SlowFps = {
 };
-export declare const remoteMachine: import("xstate").StateMachine<Context, ConnectEvent | UpdateRendererEvent | RenderEvent | SetMultiscaleImage | SlowFps | FastFps, import("xstate").ParameterizedObject, import("xstate").ActorMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, ConnectEvent | UpdateRendererEvent | RenderEvent | SetMultiscaleImage | SlowFps | FastFps, import("xstate").ParameterizedObject, import("xstate").ActorMap>>;
+type CameraPoseUpdated = {
+    type: 'cameraPoseUpdated';
+    pose: ReadonlyMat4;
+};
+export declare const remoteMachine: import("xstate").StateMachine<Context, ConnectEvent | UpdateRendererEvent | RenderEvent | SetImage | SlowFps | FastFps | CameraPoseUpdated, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, {
+    viewport: import("xstate").Actor<import("xstate").StateMachine<{
+        image: MultiscaleSpatialImage | undefined;
+        camera?: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }> | undefined;
+        cameraSubscription?: import("xstate").Subscription | undefined;
+    }, {
+        type: "setImage";
+        image: MultiscaleSpatialImage;
+    } | {
+        type: "setCamera";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }>;
+    } | {
+        type: "cameraPoseUpdated";
+        pose: ReadonlyMat4;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        type: "setImage";
+        image: MultiscaleSpatialImage;
+    } | {
+        type: "setCamera";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }>;
+    } | {
+        type: "cameraPoseUpdated";
+        pose: ReadonlyMat4;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+        type: "setImage";
+        image: MultiscaleSpatialImage;
+    } | {
+        type: "setCamera";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: ReadonlyMat4;
+        }>;
+    } | {
+        type: "cameraPoseUpdated";
+        pose: ReadonlyMat4;
+    }>;
+}, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, ConnectEvent | UpdateRendererEvent | RenderEvent | SetImage | SlowFps | FastFps | CameraPoseUpdated, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>;
 export {};

dist/remote-machine.js

 import { mat4 } from 'gl-matrix';
 import { assign, createMachine, raise, sendTo } from 'xstate';
 import { fpsWatcher } from '@itk-viewer/viewer/fps-watcher-machine.js';
+import { viewportMachine } from '@itk-viewer/viewer/viewport-machine.js';
 const getEntries = (obj) => Object.entries(obj);
@@ -21,2 +22,7 @@ export const remoteMachine = createMachine({
         root: {
+            entry: [
+                assign({
+                    viewport: ({ spawn }) => spawn(viewportMachine, { id: 'viewport' }),
+                }),
+            ],
             on: {
@@ -41,9 +47,26 @@ updateRenderer: {
                 },
-                setMultiscaleImage: {
+                setImage: {
                     actions: [
-                        assign({
-                            image: ({ event: { image } }) => image,
+                        raise(({ event }) => {
+                            const image = event.image;
+                            return {
+                                type: 'updateRenderer',
+                                props: {
+                                    image: image.name,
+                                    imageScale: image.scaleInfos.length - 1,
+                                },
+                            };
                         }),
                     ],
                 },
+                cameraPoseUpdated: {
+                    actions: [
+                        raise(({ event }) => {
+                            return {
+                                type: 'updateRenderer',
+                                props: { cameraPose: event.pose },
+                            };
+                        }),
+                    ],
+                },
             },
@@ -53,17 +76,2 @@ initial: 'disconnected',
                 disconnected: {
-                    entry: ({ context, self }) => {
-                        // Update camera pose on viewport change
-                        context.viewport.subscribe(() => {
-                            var _a;
-                            const cameraPose = (_a = context.viewport
-                                .getSnapshot()
-                                .context.camera) === null || _a === void 0 ? void 0 : _a.getSnapshot().context.pose;
-                            if (!cameraPose)
-                                throw new Error('no camera pose');
-                            self.send({
-                                type: 'updateRenderer',
-                                props: { cameraPose },
-                            });
-                        });
-                    },
                     on: {
@@ -114,3 +122,2 @@ connect: {
                                 src: fpsWatcher,
-                                onSnapshot: { actions: (e) => console.log('slow', e) },
                             },
@@ -143,2 +150,6 @@ },
                                         },
+                                        onError: {
+                                            actions: (e) => console.error('Error while updating render', e),
+                                            target: 'idle', // soldier on
+                                        },
                                     },
@@ -173,5 +184,7 @@ },
         updateImageScale: ({ event, context, self }) => {
-            if (!context.image)
-                throw new Error('no scaleImage');
-            const { scaleCount, scale } = context.image;
+            const image = context.viewport.getSnapshot().context.image;
+            if (!image || context.rendererProps.imageScale === undefined)
+                return;
+            const scaleCount = image.scaleInfos.length - 1;
+            const scale = context.rendererProps.imageScale;
             const { type } = event;
@@ -182,3 +195,2 @@ const scaleChange = type === 'slowFps' ? 1 : -1;
             if (newScale !== scale) {
-                context.image.scale = newScale;
                 self.send({
@@ -192,1 +204,2 @@ type: 'updateRenderer',
 });
+//# sourceMappingURL=remote-machine.js.map

dist/remote-viewport.d.ts

 /// <reference types="gl-matrix/index.js" />
 import { fromPromise } from 'xstate';
-import { Viewport } from '@itk-viewer/viewer/viewport.js';
-import { Context } from './remote-machine.js';
+import { RendererEntries, Context } from './remote-machine.js';
 import { RenderedFrame } from './types.js';
+type Renderer = {
+    updateRenderer: (events: unknown) => unknown;
+    loadImage: (image: string | undefined) => void;
+    render: () => Promise<{
+        frame: ArrayBuffer;
+        renderTime: number;
+    }>;
+};
+type RendererInput = {
+    server: Renderer;
+    events: RendererEntries;
+};
+type ConnectInput = {
+    context: Context;
+};
 export type RemoteMachineActors = {
-    actors: {
-        connect: ReturnType<typeof fromPromise<unknown>>;
-        renderer: ReturnType<typeof fromPromise<RenderedFrame>>;
-    };
+    connect: ReturnType<typeof fromPromise<unknown, ConnectInput>>;
+    renderer: ReturnType<typeof fromPromise<RenderedFrame, RendererInput>>;
 };
 export declare const createHyphaActors: () => RemoteMachineActors;
 export type RemoteMachineOptions = {
-    context: {
-        viewport: Viewport;
-    };
-} & RemoteMachineActors;
-declare const createRemote: (config: RemoteMachineOptions) => import("xstate").Interpreter<import("xstate").ActorLogic<{
+    actors: RemoteMachineActors;
+};
+declare const createRemote: (config: RemoteMachineOptions) => import("xstate").Actor<import("xstate").StateMachine<Context, {
     type: "connect";
@@ -32,7 +42,4 @@ config: unknown;
 } | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
+    type: "setImage";
+    image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
 } | {
@@ -42,26 +49,83 @@ type: "slowFps";
     type: "fastFps";
-}, import("xstate").State<Context, {
-    type: "connect";
-    config: unknown;
 } | {
-    type: "updateRenderer";
-    props: Partial<{
-        density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
-        image?: string | undefined;
-        imageScale?: number | undefined;
+    type: "cameraPoseUpdated";
+    pose: import("gl-matrix").ReadonlyMat4;
+}, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, {
+    viewport: import("xstate").Actor<import("xstate").StateMachine<{
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default | undefined;
+        camera?: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }> | undefined;
+        cameraSubscription?: import("xstate").Subscription | undefined;
+    }, {
+        type: "setImage";
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
+    } | {
+        type: "setCamera";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }>;
+    } | {
+        type: "cameraPoseUpdated";
+        pose: import("gl-matrix").ReadonlyMat4;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        type: "setImage";
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
+    } | {
+        type: "setCamera";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }>;
+    } | {
+        type: "cameraPoseUpdated";
+        pose: import("gl-matrix").ReadonlyMat4;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+        type: "setImage";
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
+    } | {
+        type: "setCamera";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setPose";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }>;
+    } | {
+        type: "cameraPoseUpdated";
+        pose: import("gl-matrix").ReadonlyMat4;
     }>;
-} | {
-    type: "render";
-} | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
-} | {
-    type: "slowFps";
-} | {
-    type: "fastFps";
-}, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+}, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
     type: "connect";
@@ -80,7 +144,4 @@ config: unknown;
 } | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
+    type: "setImage";
+    image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
 } | {
@@ -90,26 +151,6 @@ type: "slowFps";
     type: "fastFps";
-}, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<Context, {
-    type: "connect";
-    config: unknown;
 } | {
-    type: "updateRenderer";
-    props: Partial<{
-        density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
-        image?: string | undefined;
-        imageScale?: number | undefined;
-    }>;
-} | {
-    type: "render";
-} | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
-} | {
-    type: "slowFps";
-} | {
-    type: "fastFps";
-}, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+    type: "cameraPoseUpdated";
+    pose: import("gl-matrix").ReadonlyMat4;
+}, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
     type: "connect";
@@ -128,7 +169,4 @@ config: unknown;
 } | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
+    type: "setImage";
+    image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
 } | {
@@ -138,75 +176,9 @@ type: "slowFps";
     type: "fastFps";
-}, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<Context, {
-    type: "connect";
-    config: unknown;
 } | {
-    type: "updateRenderer";
-    props: Partial<{
-        density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
-        image?: string | undefined;
-        imageScale?: number | undefined;
-    }>;
-} | {
-    type: "render";
-} | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
-} | {
-    type: "slowFps";
-} | {
-    type: "fastFps";
-}, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-    type: "connect";
-    config: unknown;
-} | {
-    type: "updateRenderer";
-    props: Partial<{
-        density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
-        image?: string | undefined;
-        imageScale?: number | undefined;
-    }>;
-} | {
-    type: "render";
-} | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
-} | {
-    type: "slowFps";
-} | {
-    type: "fastFps";
-}, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-    type: "connect";
-    config: unknown;
-} | {
-    type: "updateRenderer";
-    props: Partial<{
-        density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
-        image?: string | undefined;
-        imageScale?: number | undefined;
-    }>;
-} | {
-    type: "render";
-} | {
-    type: "setMultiscaleImage";
-    image: {
-        scaleCount: number;
-        scale: number;
-    };
-} | {
-    type: "slowFps";
-} | {
-    type: "fastFps";
+    type: "cameraPoseUpdated";
+    pose: import("gl-matrix").ReadonlyMat4;
 }>;
 export type RemoteActor = ReturnType<typeof createRemote>;
-export declare const createRemoteViewport: (config: RemoteMachineActors) => {
-    remote: import("xstate").Interpreter<import("xstate").ActorLogic<{
+export declare const createRemoteViewport: (actors: RemoteMachineActors) => {
+    remote: import("xstate").Actor<import("xstate").StateMachine<Context, {
         type: "connect";
@@ -225,7 +197,4 @@ config: unknown;
     } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
+        type: "setImage";
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
     } | {
@@ -235,26 +204,83 @@ type: "slowFps";
         type: "fastFps";
-    }, import("xstate").State<Context, {
-        type: "connect";
-        config: unknown;
     } | {
-        type: "updateRenderer";
-        props: Partial<{
-            density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
-            image?: string | undefined;
-            imageScale?: number | undefined;
+        type: "cameraPoseUpdated";
+        pose: import("gl-matrix").ReadonlyMat4;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, {
+        viewport: import("xstate").Actor<import("xstate").StateMachine<{
+            image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default | undefined;
+            camera?: import("xstate").Actor<import("xstate").StateMachine<{
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }> | undefined;
+            cameraSubscription?: import("xstate").Subscription | undefined;
+        }, {
+            type: "setImage";
+            image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
+        } | {
+            type: "setCamera";
+            camera: import("xstate").Actor<import("xstate").StateMachine<{
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }>;
+        } | {
+            type: "cameraPoseUpdated";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+            type: "setImage";
+            image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
+        } | {
+            type: "setCamera";
+            camera: import("xstate").Actor<import("xstate").StateMachine<{
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }>;
+        } | {
+            type: "cameraPoseUpdated";
+            pose: import("gl-matrix").ReadonlyMat4;
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+            type: "setImage";
+            image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
+        } | {
+            type: "setCamera";
+            camera: import("xstate").Actor<import("xstate").StateMachine<{
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
+                type: "setPose";
+                pose: import("gl-matrix").ReadonlyMat4;
+            }>;
+        } | {
+            type: "cameraPoseUpdated";
+            pose: import("gl-matrix").ReadonlyMat4;
         }>;
-    } | {
-        type: "render";
-    } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
-    } | {
-        type: "slowFps";
-    } | {
-        type: "fastFps";
-    }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+    }, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
         type: "connect";
@@ -273,7 +299,4 @@ config: unknown;
     } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
+        type: "setImage";
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
     } | {
@@ -283,26 +306,6 @@ type: "slowFps";
         type: "fastFps";
-    }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<Context, {
-        type: "connect";
-        config: unknown;
     } | {
-        type: "updateRenderer";
-        props: Partial<{
-            density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
-            image?: string | undefined;
-            imageScale?: number | undefined;
-        }>;
-    } | {
-        type: "render";
-    } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
-    } | {
-        type: "slowFps";
-    } | {
-        type: "fastFps";
-    }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        type: "cameraPoseUpdated";
+        pose: import("gl-matrix").ReadonlyMat4;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
         type: "connect";
@@ -321,7 +324,4 @@ config: unknown;
     } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
+        type: "setImage";
+        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
     } | {
@@ -331,73 +331,7 @@ type: "slowFps";
         type: "fastFps";
-    }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<Context, {
-        type: "connect";
-        config: unknown;
     } | {
-        type: "updateRenderer";
-        props: Partial<{
-            density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
-            image?: string | undefined;
-            imageScale?: number | undefined;
-        }>;
-    } | {
-        type: "render";
-    } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
-    } | {
-        type: "slowFps";
-    } | {
-        type: "fastFps";
-    }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-        type: "connect";
-        config: unknown;
-    } | {
-        type: "updateRenderer";
-        props: Partial<{
-            density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
-            image?: string | undefined;
-            imageScale?: number | undefined;
-        }>;
-    } | {
-        type: "render";
-    } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
-    } | {
-        type: "slowFps";
-    } | {
-        type: "fastFps";
-    }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-        type: "connect";
-        config: unknown;
-    } | {
-        type: "updateRenderer";
-        props: Partial<{
-            density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
-            image?: string | undefined;
-            imageScale?: number | undefined;
-        }>;
-    } | {
-        type: "render";
-    } | {
-        type: "setMultiscaleImage";
-        image: {
-            scaleCount: number;
-            scale: number;
-        };
-    } | {
-        type: "slowFps";
-    } | {
-        type: "fastFps";
+        type: "cameraPoseUpdated";
+        pose: import("gl-matrix").ReadonlyMat4;
     }>;
-    viewport: import("xstate").Interpreter<import("xstate").ActorLogic<{
+    viewport: import("xstate").ActorRef<{
         type: "setImage";
@@ -407,32 +341,13 @@ image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
         type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
         }, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
         }>;
@@ -444,32 +359,13 @@ } | {
         image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default | undefined;
-        camera?: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
+        camera?: import("xstate").Actor<import("xstate").StateMachine<{
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
         }, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
         }> | undefined;
@@ -482,32 +378,13 @@ cameraSubscription?: import("xstate").Subscription | undefined;
         type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
         }, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
         }>;
@@ -517,3 +394,3 @@ } | {
         pose: import("gl-matrix").ReadonlyMat4;
-    }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+    }, import("xstate").ProvidedActor, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
         type: "setImage";
@@ -523,32 +400,13 @@ image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
         type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
+        camera: import("xstate").Actor<import("xstate").StateMachine<{
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
         }, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
+        }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
         }>;
@@ -558,267 +416,4 @@ } | {
         pose: import("gl-matrix").ReadonlyMat4;
-    }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default | undefined;
-        camera?: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }> | undefined;
-        cameraSubscription?: import("xstate").Subscription | undefined;
-    }, {
-        type: "setImage";
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
-    } | {
-        type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }>;
-    } | {
-        type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
-    }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-        type: "setImage";
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
-    } | {
-        type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }>;
-    } | {
-        type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
-    }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default | undefined;
-        camera?: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }> | undefined;
-        cameraSubscription?: import("xstate").Subscription | undefined;
-    }, {
-        type: "setImage";
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
-    } | {
-        type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }>;
-    } | {
-        type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
-    }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-        type: "setImage";
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
-    } | {
-        type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }>;
-    } | {
-        type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
-    }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-        type: "setImage";
-        image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default;
-    } | {
-        type: "setCamera";
-        camera: import("xstate").Interpreter<import("xstate").ActorLogic<{
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>, import("xstate").PersistedMachineState<import("xstate").State<{
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }, import("xstate").ParameterizedObject, import("xstate").ActorMap>>>, import("xstate").ActorSystem<any>>, {
-            type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
-        }>;
-    } | {
-        type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
-    }>;
+    }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>>;
 };
 export {};

dist/remote-viewport.js

@@ -1,2 +0,2 @@
-import { fromPromise, interpret } from 'xstate';
+import { createActor, fromPromise } from 'xstate';
 import { hyphaWebsocketClient } from 'imjoy-rpc';
@@ -6,3 +6,2 @@ import { mat4, vec3 } from 'gl-matrix';
 import { decode } from '@itk-wasm/htj2k';
-import { createViewport } from '@itk-viewer/viewer/viewport.js';
 import { remoteMachine } from './remote-machine.js';
@@ -27,29 +26,28 @@ const createHyphaRenderer = async (context) => {
     return {
-        actors: {
-            connect: fromPromise(async ({ input }) => createHyphaRenderer(input.context)),
-            renderer: fromPromise(async ({ input: { server, events }, }) => {
-                const translatedEvents = events
-                    .map(([key, value]) => {
-                    if (key === 'cameraPose') {
-                        const eye = vec3.create();
-                        mat4.getTranslation(eye, value);
-                        const target = vec3.fromValues(value[8], value[9], value[10]);
-                        vec3.subtract(target, eye, target);
-                        const up = vec3.fromValues(value[4], value[5], value[6]);
-                        return ['cameraPose', { eye, up, target }];
-                    }
-                    if (key === 'image') {
-                        server.loadImage(value);
-                        return;
-                    }
-                    return [key, value];
-                })
-                    .filter(Boolean);
-                server.updateRenderer(translatedEvents);
-                const { frame: encodedImage, renderTime } = await server.render();
-                const { image: frame, webWorker } = await decode(decodeWorker, encodedImage);
-                decodeWorker = webWorker;
-                return { frame, renderTime };
-            }),
-        },
+        connect: fromPromise(async ({ input }) => createHyphaRenderer(input.context)),
+        renderer: fromPromise(async ({ input: { server, events } }) => {
+            const translatedEvents = events
+                .map(([key, value]) => {
+                if (key === 'cameraPose') {
+                    const eye = vec3.create();
+                    mat4.getTranslation(eye, value);
+                    const target = vec3.fromValues(value[8], value[9], value[10]);
+                    vec3.subtract(target, eye, target);
+                    const up = vec3.fromValues(value[4], value[5], value[6]);
+                    return ['cameraPose', { eye, up, target }];
+                }
+                if (key === 'image') {
+                    console.log('loading image', value);
+                    server.loadImage(value);
+                    return;
+                }
+                return [key, value];
+            })
+                .filter(Boolean);
+            server.updateRenderer(translatedEvents);
+            const { frame: encodedImage, renderTime } = await server.render();
+            const { image: frame, webWorker } = await decode(decodeWorker, encodedImage);
+            decodeWorker = webWorker;
+            return { frame, renderTime };
+        }),
     };
@@ -59,16 +57,12 @@ };
     const remoteActor = remoteMachine.provide(config);
-    return interpret(remoteActor, {
-        input: config.context,
-    }).start();
+    return createActor(remoteActor).start();
 };
-export const createRemoteViewport = (config) => {
-    const viewport = createViewport();
-    const configWithViewport = {
-        ...config,
-        context: {
-            viewport,
-        },
+export const createRemoteViewport = (actors) => {
+    const config = {
+        actors,
     };
-    const remote = createRemote(configWithViewport);
+    const remote = createRemote(config);
+    const viewport = remote.getSnapshot().context.viewport;
     return { remote, viewport };
 };
+//# sourceMappingURL=remote-viewport.js.map

dist/types.js

 export {};
+//# sourceMappingURL=types.js.map

package.json

 {
   "name": "@itk-viewer/remote-viewport",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "",
@@ -20,10 +20,12 @@ "type": "module",
   "devDependencies": {
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@itk-wasm/htj2k": "^1.0.0",
-    "imjoy-rpc": "^0.5.42",
-    "xstate": "5.0.0-beta.18",
-    "@itk-viewer/viewer": "^0.2.0"
+    "gl-matrix": "^3.4.3",
+    "imjoy-rpc": "^0.5.44",
+    "xstate": "5.0.0-beta.24",
+    "@itk-viewer/io": "^0.1.2",
+    "@itk-viewer/viewer": "^0.2.1"
   },
@@ -30,0 +32,0 @@ "scripts": {

src/remote-machine.ts

 import { ReadonlyMat4, mat4 } from 'gl-matrix';
-import { assign, createMachine, raise, sendTo } from 'xstate';
+import { ActorRefFrom, assign, createMachine, raise, sendTo } from 'xstate';
 
@@ -7,8 +7,5 @@ import { Viewport } from '@itk-viewer/viewer/viewport.js';
 import { Image } from './types.js';
+import { viewportMachine } from '@itk-viewer/viewer/viewport-machine.js';
+import MultiscaleSpatialImage from '@itk-viewer/io/MultiscaleSpatialImage.js';
 
-type MultiscaleImage = {
-  scaleCount: number;
-  scale: number;
-};
-
 type RendererProps = {
@@ -39,6 +36,3 @@ density: number;
   stagedRendererEvents: RendererEntries;
-  viewport: Viewport;
-
-  // TODO: move to viewport machine
-  image?: MultiscaleImage;
+  viewport: ActorRefFrom<typeof viewportMachine>;
 };
@@ -60,5 +54,5 @@
 
-type SetMultiscaleImage = {
-  type: 'setMultiscaleImage';
-  image: MultiscaleImage;
+type SetImage = {
+  type: 'setImage';
+  image: MultiscaleSpatialImage;
 };
@@ -74,2 +68,7 @@
 
+type CameraPoseUpdated = {
+  type: 'cameraPoseUpdated';
+  pose: ReadonlyMat4;
+};
+
 export const remoteMachine = createMachine(
@@ -83,5 +82,6 @@ {
         | RenderEvent
-        | SetMultiscaleImage
+        | SetImage
         | SlowFps
-        | FastFps;
+        | FastFps
+        | CameraPoseUpdated;
     },
@@ -98,3 +98,2 @@ id: 'remote',
     }),
-
     initial: 'root',
@@ -104,2 +103,7 @@ states: {
       root: {
+        entry: [
+          assign({
+            viewport: ({ spawn }) => spawn(viewportMachine, { id: 'viewport' }),
+          }),
+        ],
         on: {
@@ -124,9 +128,26 @@ updateRenderer: {
           },
-          setMultiscaleImage: {
+          setImage: {
             actions: [
-              assign({
-                image: ({ event: { image } }) => image,
+              raise(({ event }) => {
+                const image = event.image;
+                return {
+                  type: 'updateRenderer' as const,
+                  props: {
+                    image: image.name,
+                    imageScale: image.scaleInfos.length - 1,
+                  },
+                };
               }),
             ],
           },
+          cameraPoseUpdated: {
+            actions: [
+              raise(({ event }) => {
+                return {
+                  type: 'updateRenderer' as const,
+                  props: { cameraPose: event.pose },
+                };
+              }),
+            ],
+          },
         },
@@ -136,15 +157,2 @@ initial: 'disconnected',
           disconnected: {
-            entry: ({ context, self }) => {
-              // Update camera pose on viewport change
-              context.viewport.subscribe(() => {
-                const cameraPose = context.viewport
-                  .getSnapshot()
-                  .context.camera?.getSnapshot().context.pose;
-                if (!cameraPose) throw new Error('no camera pose');
-                self.send({
-                  type: 'updateRenderer',
-                  props: { cameraPose },
-                });
-              });
-            },
             on: {
@@ -200,3 +208,2 @@ connect: {
                   src: fpsWatcher,
-                  onSnapshot: { actions: (e) => console.log('slow', e) },
                 },
@@ -229,2 +236,7 @@ },
                       },
+                      onError: {
+                        actions: (e) =>
+                          console.error('Error while updating render', e),
+                        target: 'idle', // soldier on
+                      },
                     },
@@ -261,5 +273,7 @@ },
       updateImageScale: ({ event, context, self }) => {
-        if (!context.image) throw new Error('no scaleImage');
+        const image = context.viewport.getSnapshot().context.image;
+        if (!image || context.rendererProps.imageScale === undefined) return;
 
-        const { scaleCount, scale } = context.image;
+        const scaleCount = image.scaleInfos.length - 1;
+        const scale = context.rendererProps.imageScale;
         const { type } = event;
@@ -272,3 +286,2 @@
         if (newScale !== scale) {
-          context.image.scale = newScale;
           self.send({
@@ -281,3 +294,3 @@ type: 'updateRenderer',
     },
-  }
+  },
 );

src/remote-viewport.ts

@@ -1,2 +0,2 @@
-import { fromPromise, interpret } from 'xstate';
+import { createActor, fromPromise } from 'xstate';
 import { hyphaWebsocketClient } from 'imjoy-rpc';
@@ -6,3 +6,2 @@ import { mat4, vec3 } from 'gl-matrix';
 import { decode } from '@itk-wasm/htj2k';
-import { Viewport, createViewport } from '@itk-viewer/viewer/viewport.js';
 import { RendererEntries, remoteMachine, Context } from './remote-machine.js';
@@ -17,7 +16,12 @@ import { RenderedFrame } from './types.js';
 
+type RendererInput = {
+  server: Renderer;
+  events: RendererEntries;
+};
+
+type ConnectInput = { context: Context };
+
 export type RemoteMachineActors = {
-  actors: {
-    connect: ReturnType<typeof fromPromise<unknown>>;
-    renderer: ReturnType<typeof fromPromise<RenderedFrame>>;
-  };
+  connect: ReturnType<typeof fromPromise<unknown, ConnectInput>>;
+  renderer: ReturnType<typeof fromPromise<RenderedFrame, RendererInput>>;
 };
@@ -52,50 +56,42 @@
   return {
-    actors: {
-      connect: fromPromise(async ({ input }) =>
-        createHyphaRenderer(input.context)
-      ),
-      renderer: fromPromise(
-        async ({
-          input: { server, events },
-        }: {
-          input: {
-            server: Renderer;
-            events: RendererEntries;
-          };
-        }) => {
-          const translatedEvents = events
-            .map(([key, value]) => {
-              if (key === 'cameraPose') {
-                const eye = vec3.create();
-                mat4.getTranslation(eye, value);
+    connect: fromPromise(async ({ input }: { input: ConnectInput }) =>
+      createHyphaRenderer(input.context),
+    ),
+    renderer: fromPromise(
+      async ({ input: { server, events } }: { input: RendererInput }) => {
+        const translatedEvents = events
+          .map(([key, value]) => {
+            if (key === 'cameraPose') {
+              const eye = vec3.create();
+              mat4.getTranslation(eye, value);
 
-                const target = vec3.fromValues(value[8], value[9], value[10]);
-                vec3.subtract(target, eye, target);
+              const target = vec3.fromValues(value[8], value[9], value[10]);
+              vec3.subtract(target, eye, target);
 
-                const up = vec3.fromValues(value[4], value[5], value[6]);
+              const up = vec3.fromValues(value[4], value[5], value[6]);
 
-                return ['cameraPose', { eye, up, target }];
-              }
+              return ['cameraPose', { eye, up, target }];
+            }
 
-              if (key === 'image') {
-                server.loadImage(value);
-                return;
-              }
+            if (key === 'image') {
+              console.log('loading image', value);
+              server.loadImage(value);
+              return;
+            }
 
-              return [key, value];
-            })
-            .filter(Boolean);
+            return [key, value];
+          })
+          .filter(Boolean);
 
-          server.updateRenderer(translatedEvents);
-          const { frame: encodedImage, renderTime } = await server.render();
-          const { image: frame, webWorker } = await decode(
-            decodeWorker,
-            encodedImage
-          );
-          decodeWorker = webWorker;
+        server.updateRenderer(translatedEvents);
+        const { frame: encodedImage, renderTime } = await server.render();
+        const { image: frame, webWorker } = await decode(
+          decodeWorker,
+          encodedImage,
+        );
+        decodeWorker = webWorker;
 
-          return { frame, renderTime };
-        }
-      ),
-    },
+        return { frame, renderTime };
+      },
+    ),
   };
@@ -105,6 +101,4 @@ };
 export type RemoteMachineOptions = {
-  context: {
-    viewport: Viewport;
-  };
-} & RemoteMachineActors;
+  actors: RemoteMachineActors;
+};
 
@@ -114,5 +108,3 @@ const createRemote = (config: RemoteMachineOptions) => {
 
-  return interpret(remoteActor, {
-    input: config.context,
-  }).start();
+  return createActor(remoteActor).start();
 };
@@ -122,13 +114,10 @@
 
-export const createRemoteViewport = (config: RemoteMachineActors) => {
-  const viewport = createViewport();
-  const configWithViewport = {
-    ...config,
-    context: {
-      viewport,
-    },
+export const createRemoteViewport = (actors: RemoteMachineActors) => {
+  const config = {
+    actors,
   };
-  const remote = createRemote(configWithViewport);
+  const remote = createRemote(config);
+  const viewport = remote.getSnapshot().context.viewport;
 
   return { remote, viewport };
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109259

increased by1.95%

Number of package files

18

increased by20%

Worsened metrics

Dependency count

6

increased by50%

Lines of code

1206

decreased by-20.92%

Dependency changes

• + Added@itk-viewer/io@^0.1.2

• + Addedgl-matrix@^3.4.3

• + Addedxstate@5.0.0-beta.24(transitive)

• - Removedxstate@5.0.0-beta.18(transitive)

• Updated@itk-viewer/viewer@^0.2.1

• Updatedimjoy-rpc@^0.5.44

• Updatedxstate@5.0.0-beta.24