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

Comparing version 0.2.4 to 0.2.5

CHANGELOG.md

 # @itk-viewer/remote-viewport
 
+## 0.2.5
+
+### Patch Changes
+
+- e187ce4: Remote-Zarr service from remote-image package returns a Zarr store to create a ZarrMultiscaleSpatialImage for use by remote-viewport. Adds reset camera logic in viewport actor.
+- Updated dependencies [e187ce4]
+  - @itk-viewer/viewer@0.2.2
+
 ## 0.2.4
@@ -4,0 +12,0 @@

dist/remote-machine.d.ts

@@ -25,2 +25,3 @@ /// <reference types="gl-matrix/index.js" />
     viewport: ActorRefFrom<typeof viewportMachine>;
+    toRendererCoordinateSystem: ReadonlyMat4;
 };
@@ -57,11 +58,21 @@ type ConnectEvent = {
             pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }> | undefined;
@@ -76,11 +87,21 @@ cameraSubscription?: import("xstate").Subscription | undefined;
             pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
@@ -97,11 +118,21 @@ } | {
             pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
@@ -118,11 +149,21 @@ } | {
             pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
             pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
@@ -129,0 +170,0 @@ } | {

dist/remote-machine.js

@@ -16,6 +16,45 @@ import { mat4 } from 'gl-matrix';
         stagedRendererEvents: [],
+        toRendererCoordinateSystem: mat4.create(),
         ...input, // captures injected viewport
     }),
-    initial: 'root',
+    type: 'parallel',
     states: {
+        // imageProcessor computes toRendererCoordinateSystem.
+        // Needs to be a service because MultiscaleSpatialImage.scaleIndexToWorld is async due to coords
+        imageProcessor: {
+            initial: 'idle',
+            states: {
+                idle: {
+                    on: {
+                        setImage: 'processing',
+                    },
+                },
+                processing: {
+                    invoke: {
+                        id: 'imageProcessor',
+                        src: 'imageProcessor',
+                        input: ({ event }) => ({
+                            event,
+                        }),
+                        onDone: {
+                            actions: [
+                                assign({
+                                    toRendererCoordinateSystem: ({ event: { output: { toRendererCoordinateSystem }, }, }) => toRendererCoordinateSystem,
+                                }),
+                                raise(({ event: { output: { image }, }, }) => {
+                                    return {
+                                        type: 'updateRenderer',
+                                        props: {
+                                            image: image.name,
+                                            imageScale: image.scaleInfos.length - 1,
+                                        },
+                                    };
+                                }),
+                            ],
+                            target: 'idle',
+                        },
+                    },
+                },
+            },
+        },
         // root state captures initial rendererProps even when disconnected
@@ -47,16 +86,2 @@ root: {
                 },
-                setImage: {
-                    actions: [
-                        raise(({ event }) => {
-                            const image = event.image;
-                            return {
-                                type: 'updateRenderer',
-                                props: {
-                                    image: image.name,
-                                    imageScale: image.scaleInfos.length - 1,
-                                },
-                            };
-                        }),
-                    ],
-                },
                 cameraPoseUpdated: {
@@ -133,2 +158,3 @@ actions: [
                                             events: [...context.stagedRendererEvents],
+                                            toRendererCoordinateSystem: context.toRendererCoordinateSystem,
                                         }),
@@ -135,0 +161,0 @@ onDone: {

dist/remote-viewport.d.ts

 /// <reference types="gl-matrix/index.js" />
 import { fromPromise } from 'xstate';
+import { ReadonlyMat4 } from 'gl-matrix';
 import { Image } from '@itk-wasm/htj2k';
-import { RendererEntries, Context } from './remote-machine.js';
+import { RendererEntries, remoteMachine, Context } from './remote-machine.js';
 export type { Image } from '@itk-wasm/htj2k';
@@ -21,2 +22,3 @@ type RenderedFrame = {
     events: RendererEntries;
+    toRendererCoordinateSystem: ReadonlyMat4;
 };
@@ -30,6 +32,4 @@ type ConnectInput = {
 };
-export declare const createHyphaActors: () => RemoteMachineActors;
-export type RemoteMachineOptions = {
-    actors: RemoteMachineActors;
-};
+export declare const createHyphaMachineConfig: () => RemoteMachineOptions;
+export type RemoteMachineOptions = Parameters<typeof remoteMachine.provide>[0];
 declare const createRemote: (config: RemoteMachineOptions) => import("xstate").Actor<import("xstate").StateMachine<Context, {
@@ -42,3 +42,3 @@ type: "connect";
         density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
+        cameraPose: ReadonlyMat4;
         image?: string | undefined;
@@ -58,3 +58,3 @@ imageScale?: number | undefined;
     type: "cameraPoseUpdated";
-    pose: import("gl-matrix").ReadonlyMat4;
+    pose: ReadonlyMat4;
 }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, {
@@ -64,12 +64,22 @@ viewport: import("xstate").Actor<import("xstate").StateMachine<{
         camera?: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }> | undefined;
@@ -83,16 +93,26 @@ cameraSubscription?: import("xstate").Subscription | undefined;
         camera: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
     } | {
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
@@ -104,16 +124,26 @@ type: "setImage";
         camera: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
     } | {
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
@@ -125,16 +155,26 @@ type: "setImage";
         camera: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
     } | {
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }>;
@@ -148,3 +188,3 @@ }, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
         density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
+        cameraPose: ReadonlyMat4;
         image?: string | undefined;
@@ -164,3 +204,3 @@ imageScale?: number | undefined;
     type: "cameraPoseUpdated";
-    pose: import("gl-matrix").ReadonlyMat4;
+    pose: ReadonlyMat4;
 }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
@@ -173,3 +213,3 @@ type: "connect";
         density: number;
-        cameraPose: import("gl-matrix").ReadonlyMat4;
+        cameraPose: ReadonlyMat4;
         image?: string | undefined;
@@ -189,6 +229,6 @@ imageScale?: number | undefined;
     type: "cameraPoseUpdated";
-    pose: import("gl-matrix").ReadonlyMat4;
+    pose: ReadonlyMat4;
 }>;
 export type RemoteActor = ReturnType<typeof createRemote>;
-export declare const createRemoteViewport: (actors: RemoteMachineActors) => {
+export declare const createRemoteViewport: (config: RemoteMachineOptions) => {
     remote: import("xstate").Actor<import("xstate").StateMachine<Context, {
@@ -201,3 +241,3 @@ type: "connect";
             density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
+            cameraPose: ReadonlyMat4;
             image?: string | undefined;
@@ -217,3 +257,3 @@ imageScale?: number | undefined;
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, {
@@ -223,12 +263,22 @@ viewport: import("xstate").Actor<import("xstate").StateMachine<{
             camera?: import("xstate").Actor<import("xstate").StateMachine<{
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, 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;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }> | undefined;
@@ -242,16 +292,26 @@ cameraSubscription?: import("xstate").Subscription | undefined;
             camera: import("xstate").Actor<import("xstate").StateMachine<{
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, 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;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }>;
         } | {
             type: "cameraPoseUpdated";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, any, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
@@ -263,16 +323,26 @@ type: "setImage";
             camera: import("xstate").Actor<import("xstate").StateMachine<{
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, 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;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }>;
         } | {
             type: "cameraPoseUpdated";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
@@ -284,16 +354,26 @@ type: "setImage";
             camera: import("xstate").Actor<import("xstate").StateMachine<{
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, 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;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
                 type: "setPose";
-                pose: import("gl-matrix").ReadonlyMat4;
+                pose: ReadonlyMat4;
+            } | {
+                type: "lookAt";
+                lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
             }>;
         } | {
             type: "cameraPoseUpdated";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
         }>;
@@ -307,3 +387,3 @@ }, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
             density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
+            cameraPose: ReadonlyMat4;
             image?: string | undefined;
@@ -323,3 +403,3 @@ imageScale?: number | undefined;
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
@@ -332,3 +412,3 @@ type: "connect";
             density: number;
-            cameraPose: import("gl-matrix").ReadonlyMat4;
+            cameraPose: ReadonlyMat4;
             image?: string | undefined;
@@ -348,3 +428,3 @@ imageScale?: number | undefined;
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }>;
@@ -357,29 +437,49 @@ viewport: import("xstate").ActorRef<{
         camera: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
     } | {
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").State<{
         image: import("@itk-viewer/io/MultiscaleSpatialImage.js").default | undefined;
         camera?: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }> | undefined;
@@ -393,16 +493,26 @@ cameraSubscription?: import("xstate").Subscription | undefined;
         camera: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
     } | {
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").ProvidedActor, import("xstate").NonReducibleUnknown, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, {
@@ -414,17 +524,27 @@ type: "setImage";
         camera: import("xstate").Actor<import("xstate").StateMachine<{
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, 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;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>, {
             type: "setPose";
-            pose: import("gl-matrix").ReadonlyMat4;
+            pose: ReadonlyMat4;
+        } | {
+            type: "lookAt";
+            lookAt: import("@itk-viewer/viewer/camera-machine.js").LookAtParams;
         }>;
     } | {
         type: "cameraPoseUpdated";
-        pose: import("gl-matrix").ReadonlyMat4;
+        pose: ReadonlyMat4;
     }, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject>>>;
 };

dist/remote-viewport.js

@@ -21,31 +21,51 @@ import { createActor, fromPromise } from 'xstate';
 };
-export const createHyphaActors = () => {
+export const createHyphaMachineConfig = () => {
     let decodeWorker = null;
     return {
-        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 };
-        }),
+        actors: {
+            connect: fromPromise(async ({ input }) => createHyphaRenderer(input.context)),
+            renderer: fromPromise(async ({ input: { server, events, toRendererCoordinateSystem }, }) => {
+                const translatedEvents = events
+                    .map(([key, value]) => {
+                    if (key === 'cameraPose') {
+                        const transform = mat4.create();
+                        mat4.multiply(transform, toRendererCoordinateSystem, value);
+                        const eye = vec3.create();
+                        mat4.getTranslation(eye, transform);
+                        const target = vec3.fromValues(transform[8], transform[9], transform[10]);
+                        vec3.subtract(target, eye, target);
+                        const up = vec3.fromValues(transform[4], transform[5], transform[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 };
+            }),
+            imageProcessor: fromPromise(async ({ input: { event: { image }, }, }) => {
+                // compute toRendererCoordinateSystem
+                const imageScale = image.coarsestScale;
+                await image.scaleIndexToWorld(imageScale); // initializes indexToWorld matrix for getWorldBounds
+                const bounds = image.getWorldBounds(imageScale);
+                // match Agave by normalizing to largest dim
+                const wx = bounds[1] - bounds[0];
+                const wy = bounds[3] - bounds[2];
+                const wz = bounds[5] - bounds[4];
+                const maxDim = Math.max(wx, wy, wz);
+                const scale = vec3.fromValues(maxDim, maxDim, maxDim);
+                vec3.inverse(scale, scale);
+                // Move to Agave origin
+                const transform = mat4.fromScaling(mat4.create(), scale);
+                mat4.translate(transform, transform, vec3.fromValues(-bounds[0] / maxDim, -bounds[2] / maxDim, -bounds[4] / maxDim));
+                return { toRendererCoordinateSystem: transform, image };
+            }),
+        },
     };
@@ -57,6 +77,3 @@ };
 };
-export const createRemoteViewport = (actors) => {
-    const config = {
-        actors,
-    };
+export const createRemoteViewport = (config) => {
     const remote = createRemote(config);
@@ -63,0 +80,0 @@ const viewport = remote.getSnapshot().context.viewport;

package.json

 {
   "name": "@itk-viewer/remote-viewport",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "",
@@ -29,3 +29,3 @@ "type": "module",
     "@itk-viewer/io": "^0.1.2",
-    "@itk-viewer/viewer": "^0.2.1"
+    "@itk-viewer/viewer": "^0.2.2"
   },
@@ -32,0 +32,0 @@ "scripts": {

src/remote-machine.ts

@@ -36,2 +36,3 @@ import { ReadonlyMat4, mat4 } from 'gl-matrix';
   viewport: ActorRefFrom<typeof viewportMachine>;
+  toRendererCoordinateSystem: ReadonlyMat4;
 };
@@ -92,6 +93,55 @@
       stagedRendererEvents: [],
+      toRendererCoordinateSystem: mat4.create(),
       ...input, // captures injected viewport
     }),
-    initial: 'root',
+    type: 'parallel',
     states: {
+      // imageProcessor computes toRendererCoordinateSystem.
+      // Needs to be a service because MultiscaleSpatialImage.scaleIndexToWorld is async due to coords
+      imageProcessor: {
+        initial: 'idle',
+        states: {
+          idle: {
+            on: {
+              setImage: 'processing',
+            },
+          },
+          processing: {
+            invoke: {
+              id: 'imageProcessor',
+              src: 'imageProcessor',
+              input: ({ event }) => ({
+                event,
+              }),
+              onDone: {
+                actions: [
+                  assign({
+                    toRendererCoordinateSystem: ({
+                      event: {
+                        output: { toRendererCoordinateSystem },
+                      },
+                    }) => toRendererCoordinateSystem,
+                  }),
+                  raise(
+                    ({
+                      event: {
+                        output: { image },
+                      },
+                    }) => {
+                      return {
+                        type: 'updateRenderer' as const,
+                        props: {
+                          image: image.name,
+                          imageScale: image.scaleInfos.length - 1,
+                        },
+                      };
+                    },
+                  ),
+                ],
+                target: 'idle',
+              },
+            },
+          },
+        },
+      },
       // root state captures initial rendererProps even when disconnected
@@ -123,16 +173,2 @@ root: {
           },
-          setImage: {
-            actions: [
-              raise(({ event }) => {
-                const image = event.image;
-                return {
-                  type: 'updateRenderer' as const,
-                  props: {
-                    image: image.name,
-                    imageScale: image.scaleInfos.length - 1,
-                  },
-                };
-              }),
-            ],
-          },
           cameraPoseUpdated: {
@@ -214,2 +250,4 @@ actions: [
                         events: [...context.stagedRendererEvents],
+                        toRendererCoordinateSystem:
+                          context.toRendererCoordinateSystem,
                       }),
@@ -216,0 +254,0 @@ onDone: {

src/remote-viewport.ts

 import { createActor, fromPromise } from 'xstate';
 import { hyphaWebsocketClient } from 'imjoy-rpc';
-import { mat4, vec3 } from 'gl-matrix';
+import { ReadonlyMat4, mat4, vec3 } from 'gl-matrix';
 import { decode, Image } from '@itk-wasm/htj2k';
@@ -23,2 +23,3 @@ import { RendererEntries, remoteMachine, Context } from './remote-machine.js';
   events: RendererEntries;
+  toRendererCoordinateSystem: ReadonlyMat4;
 };
@@ -56,52 +57,100 @@
 
-export const createHyphaActors: () => RemoteMachineActors = () => {
+export const createHyphaMachineConfig: () => RemoteMachineOptions = () => {
   let decodeWorker: Worker | null = null;
 
   return {
-    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);
+    actors: {
+      connect: fromPromise(async ({ input }: { input: ConnectInput }) =>
+        createHyphaRenderer(input.context),
+      ),
+      renderer: fromPromise(
+        async ({
+          input: { server, events, toRendererCoordinateSystem },
+        }: {
+          input: RendererInput;
+        }) => {
+          const translatedEvents = events
+            .map(([key, value]) => {
+              if (key === 'cameraPose') {
+                const transform = mat4.create();
+                mat4.multiply(transform, toRendererCoordinateSystem, value);
 
-              const target = vec3.fromValues(value[8], value[9], value[10]);
-              vec3.subtract(target, eye, target);
+                const eye = vec3.create();
+                mat4.getTranslation(eye, transform);
 
-              const up = vec3.fromValues(value[4], value[5], value[6]);
+                const target = vec3.fromValues(
+                  transform[8],
+                  transform[9],
+                  transform[10],
+                );
+                vec3.subtract(target, eye, target);
 
-              return ['cameraPose', { eye, up, target }];
-            }
+                const up = vec3.fromValues(
+                  transform[4],
+                  transform[5],
+                  transform[6],
+                );
 
-            if (key === 'image') {
-              console.log('loading image', value);
-              server.loadImage(value);
-              return;
-            }
+                return ['cameraPose', { eye, up, target }];
+              }
 
-            return [key, value];
-          })
-          .filter(Boolean);
+              if (key === 'image') {
+                server.loadImage(value);
+                return;
+              }
 
-        server.updateRenderer(translatedEvents);
-        const { frame: encodedImage, renderTime } = await server.render();
-        const { image: frame, webWorker } = await decode(
-          decodeWorker,
-          encodedImage,
-        );
-        decodeWorker = webWorker;
+              return [key, value];
+            })
+            .filter(Boolean);
 
-        return { frame, renderTime };
-      },
-    ),
+          server.updateRenderer(translatedEvents);
+          const { frame: encodedImage, renderTime } = await server.render();
+          const { image: frame, webWorker } = await decode(
+            decodeWorker,
+            encodedImage,
+          );
+          decodeWorker = webWorker;
+
+          return { frame, renderTime };
+        },
+      ),
+      imageProcessor: fromPromise(
+        async ({
+          input: {
+            event: { image },
+          },
+        }) => {
+          // compute toRendererCoordinateSystem
+          const imageScale = image.coarsestScale;
+          await image.scaleIndexToWorld(imageScale); // initializes indexToWorld matrix for getWorldBounds
+          const bounds = image.getWorldBounds(imageScale);
+
+          // match Agave by normalizing to largest dim
+          const wx = bounds[1] - bounds[0];
+          const wy = bounds[3] - bounds[2];
+          const wz = bounds[5] - bounds[4];
+          const maxDim = Math.max(wx, wy, wz);
+
+          const scale = vec3.fromValues(maxDim, maxDim, maxDim);
+          vec3.inverse(scale, scale);
+
+          // Move to Agave origin
+          const transform = mat4.fromScaling(mat4.create(), scale);
+          mat4.translate(
+            transform,
+            transform,
+            vec3.fromValues(
+              -bounds[0] / maxDim,
+              -bounds[2] / maxDim,
+              -bounds[4] / maxDim,
+            ),
+          );
+          return { toRendererCoordinateSystem: transform, image };
+        },
+      ),
+    },
   };
 };
 
-export type RemoteMachineOptions = {
-  actors: RemoteMachineActors;
-};
+export type RemoteMachineOptions = Parameters<typeof remoteMachine.provide>[0];
 
@@ -116,6 +165,3 @@ const createRemote = (config: RemoteMachineOptions) => {
 
-export const createRemoteViewport = (actors: RemoteMachineActors) => {
-  const config = {
-    actors,
-  };
+export const createRemoteViewport = (config: RemoteMachineOptions) => {
   const remote = createRemote(config);
@@ -122,0 +168,0 @@ const viewport = remote.getSnapshot().context.viewport;

No alert changes

Improved metrics

Total package byte prevSize

152592

increased by15.75%

Number of package files

18

increased by28.57%

Lines of code

1528

increased by27.87%

Dependency changes

• Updated@itk-viewer/viewer@^0.2.2