StepController

Tracks which step a scene is on and when each step was entered, for every environment in the scene to animate against.

@internote/canvas-sdkClass
On this page
import { StepController } from '@internote/canvas-sdk';

A scene's step timeline is the partition sequence its === markers carve out of the body: step 0 is the opening partition, and step N becomes current when the reader passes the Nth marker. Every drive mode feeds the same controller: a reading view's scroll-spy calls goTo, presentation's keyboard calls advance and back, and a test calls any of them.

Moving:

  • goTo(step) makes a step current. Every earlier step settles. A step entered forwards starts fresh, so its choreography plays, and a step that holds waits at its start. A step entered backwards settles too, so nothing moves.
  • settleAt(step) lands on a step with nothing live, scene clock included: a scene the reader scrolls back up into.
  • advance() and back() move one step.
  • replay() plays the current step's choreography again, and nothing else. Replaying step 0 restarts the scene clock too.
  • reset() returns to step 0 with a fresh scene clock.

The clock:

  • pause() freezes the scene clock, so time anchors and transitions hold; resume() lets it run, and the paused span never happened as far as anchors know.
  • paused says whether it is frozen, and waiting whether the current step holds and has not yet been played.

Reading:

  • step is the current step and stepCount how many there are.
  • progress() gives the step, the time in it and the scene time, frozen while paused.
  • isSettled(step) says whether a step's content renders finished rather than animating: it was scrolled past, jumped over or re-entered backwards.
  • stepEnteredAt(step) and stepEnteredSceneMs(step) give when a step was last entered, on the clock and on the scene clock.
  • lastDirection is 1 after a forward move and -1 after a backward one.
  • subscribe(listener) calls the listener after every step change and returns the unsubscribe.

Only a step entered forwards animates. Entering a step backdates every earlier step by a large constant, so a fast scroll lands without replaying what it passed, and going back backdates the landing step as well. Time-based motion stays subordinate to steps.

#Signature

typeof StepController

#Example

let now = 0;
const steps = new StepController({ stepCount: 2, clock: () => now });
now = 1000;
steps.goTo(1);
steps.progress(); // { step: 1, timeInStepMs: 0, sceneTimeMs: 1000 }

Declared in packages/canvas-sdk/src/animation/StepController.ts:125.

Last updated