fix(itk-remote-viewport): start frame render loop after connection

packages/element/package.json

@@ -55,6 +55,7 @@
  "gl-matrix": "^3.4.3",
  "lit": "^2.8.0",
  "orbit-camera": "^1.0.0",
+ "xstate": "5.0.0-beta.24",
  "xstate-lit": "^1.3.1"
  }
 }

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

@@ -3,6 +3,7 @@ import { PropertyValues, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { SelectorController } from 'xstate-lit/dist/select-controller.js';
+import { ActorStatus } from 'xstate';
 
 import {
  RemoteActor,
@@ -48,6 +49,11 @@ export class ItkRemoteViewport extends ItkViewport {
  canvasHeight = 0;
 
  remote: RemoteActor;
+
+ remoteOnline: SelectorController<RemoteActor, boolean>;
+ lastRemoteOnlineValue = false;
+ renderLoopRunning = false;
+
  frame: SelectorController<RemoteActor, Image | undefined>;
  lastFrameValue: Image | undefined = undefined;
 
@@ -56,10 +62,15 @@ export class ItkRemoteViewport extends ItkViewport {
  const { remote, viewport } = createRemoteViewport(createHyphaActors());
  this.actor = viewport;
  this.remote = remote;
+ this.remoteOnline = new SelectorController(
+ this,
+ this.remote,
+ (state) => state?.matches('root.online') ?? false,
+ );
  this.frame = new SelectorController(
  this,
  this.remote,
- (state) => state?.context.frame
+ (state) => state?.context.frame,
  );
  }
 
@@ -75,19 +86,28 @@ export class ItkRemoteViewport extends ItkViewport {
  this.canvasCtx.putImageData(imageData, 0, 0);
  }
 
- connectedCallback() {
- super.connectedCallback();
+ startRenderLoop() {
+ if (this.renderLoopRunning || !this.remoteOnline.value) return;
+ this.renderLoopRunning = true;
 
  const render = () => {
- if (!this.isConnected) return;
+ if (!this.isConnected || this.remote.status === ActorStatus.Stopped) {
+ this.renderLoopRunning = false;
+ return;
+ }
 
  this.remote.send({ type: 'render' });
  requestAnimationFrame(render);
  };
  requestAnimationFrame(render);
  }
 
- firstUpdated(): void {
+ connectedCallback() {
+ super.connectedCallback();
+ this.startRenderLoop();
+ }
+
+ firstUpdated() {
  const canvas = this.canvas.value;
  if (!canvas) throw new Error('canvas not found');
  this.canvasCtx = canvas.getContext('2d');
@@ -133,6 +153,13 @@ export class ItkRemoteViewport extends ItkViewport {
  this.lastFrameValue = this.frame.value;
  this.putFrame();
  }
+
+ if (this.remoteOnline.value !== this.lastRemoteOnlineValue) {
+ this.lastRemoteOnlineValue = this.remoteOnline.value;
+ if (this.remoteOnline.value) {
+ this.startRenderLoop();
+ }
+ }
  }
 
  onDensity(event: Event) {

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

@@ -188,7 +188,6 @@ export const remoteMachine = createMachine(
  invoke: {
  id: 'fpsWatcher',
  src: fpsWatcher,
- onSnapshot: { actions: (e) => console.log('slow', e) },
  },
  },
  renderLoop: {
@@ -216,6 +215,11 @@ export const remoteMachine = createMachine(
  ],
  target: 'idle',
  },
+ onError: {
+ actions: (e) =>
+ console.error('Error while updating render', e),
+ target: 'idle', // soldier on
+ },
  },
  },
  idle: {