feat(remote-viewport): add initial render machine logic

packages/element/index.html

@@ -7,7 +7,7 @@
  <title>itk-viewer</title>
  <link rel="stylesheet" href="./src/index.css" />
  <script type="module" src="/src/image-info-viewport.ts"></script>
- <script type="module" src="/src/remote-viewport.ts"></script>
+ <script type="module" src="/src/itk-remote-viewport.ts"></script>
  <script type="module" src="/src/itk-viewer-element.ts"></script>
  <script type="module" src="/src/main.ts"></script>
  </head>
@@ -16,7 +16,7 @@
  <itk-image-info-viewport id="left-viewport"></itk-image-info-viewport>
  <itk-remote-viewport
  id="right-viewport"
- address="asdf"
+ address="https://ai.imjoy.io"
  ></itk-remote-viewport>
  </itk-viewer>
  </body>

packages/element/src/remote-viewport.ts → packages/element/src/itk-remote-viewport.ts

@@ -1,10 +1,12 @@
 import { PropertyValues, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Ref, ref, createRef } from 'lit/directives/ref.js';
+import { SelectorController } from 'xstate-lit/dist/select-controller.js';
 
 import {
- Remote,
+ RemoteActor,
  createRemoteViewport,
+ createTestActors,
 } from '@itk-viewer/remote-viewport/remote-viewport.js';
 
 import { ItkViewport } from './itk-viewport.js';
@@ -14,14 +16,24 @@ export class RemoteViewport extends ItkViewport {
  @property({ type: String })
  address: string | undefined;
 
+ remote: RemoteActor;
  canvas: Ref<HTMLImageElement> = createRef();
- remote: Remote;
+ frame: any;
 
  constructor() {
  super();
- const { remote, viewport } = createRemoteViewport();
+ const { remote, viewport } = createRemoteViewport(createTestActors());
  this.actor = viewport;
  this.remote = remote;
+ this.frame = new SelectorController(
+ this,
+ this.remote,
+ (state) => state?.context.frame
+ );
+ const p = new Promise((resolve) => setTimeout(resolve, 5000));
+ p.then(() => {
+ this.remote.send({ type: 'render' });
+ });
  }
 
  willUpdate(changedProperties: PropertyValues<this>) {
@@ -31,6 +43,7 @@ export class RemoteViewport extends ItkViewport {
  }
 
  render() {
+ console.log(this.frame.value);
  return html` <h1>Remote viewport</h1>
  <img ${ref(this.canvas)}></img>`;
  }

packages/remote-viewport/package.json

@@ -25,7 +25,7 @@
  "vite": "^4.3.9"
  },
  "dependencies": {
- "xstate": "5.0.0-beta.8",
+ "xstate": "5.0.0-beta.18",
  "@itk-viewer/viewer": "workspace:^"
  }
 }

packages/remote-viewport/src/remote-machine.ts

@@ -2,31 +2,79 @@ import { assign, createMachine } from 'xstate';
 
 type Context = {
  address: string | undefined;
+ server: any | undefined;
+ frame: any | undefined;
 };
 
 type SetAddressEvent = {
  type: 'setAddress';
  address: string | undefined;
 };
 
+type RenderEvent = {
+ type: 'render';
+};
+
 export const remoteMachine = createMachine({
  types: {} as {
  context: Context;
- events: SetAddressEvent;
+ events: SetAddressEvent | RenderEvent;
  },
  id: 'remote',
- initial: 'active',
- context: { address: undefined },
+ initial: 'disconnected',
+ context: { address: undefined, server: undefined, frame: undefined },
  states: {
- active: {
+ disconnected: {
  on: {
  setAddress: {
  actions: [
  assign({
- address: ({ event: { address } }: { event: SetAddressEvent }) =>
- address,
+ address: ({ event: { address } }: { event: SetAddressEvent }) => {
+ return address;
+ },
  }),
  ],
+ target: 'connecting',
+ },
+ },
+ },
+ connecting: {
+ invoke: {
+ id: 'connect',
+ src: 'connect',
+ input: ({ context }: { context: Context }) => ({
+ address: context.address,
+ }),
+ onDone: {
+ actions: assign({
+ server: ({ event }) => event.output,
+ }),
+ target: 'connected',
+ },
+ },
+ },
+ connected: {
+ initial: 'render',
+ states: {
+ render: {
+ invoke: {
+ id: 'render',
+ src: 'renderer',
+ input: ({ context }: { context: Context }) => ({
+ server: context.server,
+ }),
+ onDone: {
+ actions: assign({
+ frame: ({ event }) => event.output,
+ }),
+ target: 'idle',
+ },
+ },
+ },
+ idle: {
+ on: {
+ render: { target: 'render' },
+ },
  },
  },
  },

packages/remote-viewport/src/remote-viewport.cy.ts

@@ -1,16 +1,12 @@
-import { createRemoteViewport } from './remote-viewport.js';
+import { createRemoteViewport, createTestActors } from './remote-viewport.js';
 
 describe('remote-viewport', () => {
- it('creates', () => {
- cy.mount("<div id='viewport'></div>");
+ it('remote actor saves server address', () => {
+ const { remote } = createRemoteViewport(createTestActors());
 
- cy.get('#viewport')
- .then((parent) => {
- const { element } = createRemoteViewport({
- address: 'http://localhost:3000',
- });
- return parent.append(element);
- })
- .contains('Remote viewport at http://localhost:3000');
+ const address = 'foo';
+ remote.send({ type: 'setAddress', address });
+
+ cy.wrap(remote.getSnapshot().context.address).should('equal', address);
  });
 });

packages/remote-viewport/src/remote-viewport.ts

@@ -1,14 +1,41 @@
 import { createViewport } from '@itk-viewer/viewer/viewport.js';
 import { remoteMachine } from './remote-machine.js';
-import { interpret } from 'xstate';
+import { fromPromise, interpret } from 'xstate';
 
-const createRemote = () => interpret(remoteMachine).start();
+type RemoteConfig = {
+ actors: {
+ connect: ReturnType<typeof fromPromise<any>>;
+ renderer: ReturnType<typeof fromPromise<any>>;
+ };
+};
+
+export const createTestActors: () => RemoteConfig = () => ({
+ actors: {
+ connect: fromPromise(async ({ input }) => {
+ console.log('connecting...', input.address);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ // return { server: 'asdf' };
+ return 'aServer';
+ }),
+ renderer: fromPromise(async ({ input }) => {
+ console.log('render', input);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ return { frame: 'new frame here' };
+ }),
+ },
+});
+
+const createRemote = (config: RemoteConfig) => {
+ const hyphaMachine = remoteMachine.provide(config);
+
+ return interpret(hyphaMachine).start();
+};
 
-export type Remote = ReturnType<typeof createRemote>;
+export type RemoteActor = ReturnType<typeof createRemote>;
 
-export const createRemoteViewport = () => {
+export const createRemoteViewport = (config: RemoteConfig) => {
  const viewport = createViewport();
- const remote = createRemote();
+ const remote = createRemote(config);
 
  return { remote, viewport };
 };

packages/viewer/package.json

@@ -46,6 +46,6 @@
  },
  "dependencies": {
  "@itk-viewer/io": "workspace:^",
- "xstate": "5.0.0-beta.8"
+ "xstate": "5.0.0-beta.18"
  }
 }

packages/viewer/src/viewport-machine.ts

@@ -1,4 +1,4 @@
-import { assign, createMachine } from 'xstate';
+import { ActorRef, assign, createMachine } from 'xstate';
 
 import MultiscaleSpatialImage from '@itk-viewer/io/MultiscaleSpatialImage.js';
 import { Camera } from './camera-machine.js';
@@ -32,7 +32,11 @@ export const viewportMachine = createMachine({
  },
  id: 'viewport',
  initial: 'active',
- context: { image: undefined, camera: undefined },
+ context: {
+ image: undefined,
+ camera: undefined,
+ cameraSubscription: undefined,
+ },
  states: {
  active: {
  on: {
@@ -54,7 +58,7 @@ export const viewportMachine = createMachine({
  context.cameraSubscription.unsubscribe();
  context.cameraSubscription = context.camera?.subscribe(
  (state) => {
- self.send({
+ (self as ActorRef<SetCameraEvent | SetCameraPoseEvent>).send({
  type: 'setCameraPose',
  pose: state.context.pose,
  });