iink-ts - v4.0.0
    Preparing search index...

    Class IIPlaybackManager

    Replays a recorded set of strokes on the canvas, point by point, honoring their original relative timing (roadmap: Stroke Playback / Animation).

    Each point is fed to canvas.writer (start/continue/end) at the moment it was originally recorded (scaled by speed), so ink appears to be drawn progressively rather than strokes popping in fully formed. Play / pause / resume / stop and live speed changes are supported.

    Hierarchy (View Summary)

    Index
    constructor
    canvas logger managerName onEnd? onProgress? onStateChange?
    client configuration model progress renderer state
    destroy onDestroy onInit? pause play resume setSpeed stop
    canvas: TInteractiveInkCanvas

    The Interactive Ink Canvas instance

    logger: Logger

    Logger instance for this manager Automatically uses LoggerCategory.MANAGER

    managerName: string = "IIPlaybackManager"

    Name of the manager for logging purposes Must be overridden in concrete classes

    "IITypesetManager", "IIMathManager"
    onEnd?: () => void

    Called once every stroke has been replayed.

    onProgress?: (current: number, total: number) => void

    Called after each stroke is completed, with the running count.

    onStateChange?: (state: TPlaybackState) => void

    Called whenever play/pause/resume/stop changes the manager's state.

    • get client(): WebSocketClient

      Get the client from the canvas Convenience getter to avoid accessing canvas.client everywhere

      Returns WebSocketClient

    • get model(): IIModel

      Get the model from the canvas Convenience getter to avoid accessing canvas.model everywhere

      Returns IIModel

    • get progress(): { current: number; total: number }

      Returns { current: number; total: number }

    • get renderer(): SVGRenderer

      Get the renderer from the canvas Convenience getter to avoid accessing canvas.renderer everywhere

      Returns SVGRenderer

    • Destroy the manager and cleanup resources Calls the onDestroy hook if defined

      Returns void

    • Lifecycle hook called when the manager is being destroyed Override in subclasses to cleanup resources

      Returns void

      protected onDestroy(): void {
        this.logger.info(`${this.managerName} destroyed`)
        // Remove event listeners, clear intervals, etc.
      }

    • Lifecycle hook called after manager initialization Override in subclasses if needed

      This is called at the end of the constructor, allowing subclasses to perform initialization that requires access to this.managerName or other properties set in the subclass constructor.

      Returns void

      protected onInit(): void {
        this.logger.info(`${this.managerName} initialized`)
        // Setup event listeners, etc.
      }

    • Pause playback, preserving progress so resume() continues from here. If a stroke is mid-progress, pause is deferred until that stroke completes naturally - it is never cut short.

      Returns void

    • Start replaying strokes in order of their first point's timestamp. Stops any run already in progress.

      Parameters

      • strokes: {
            bounds?: {
                angle?: number;
                center?: { x?: number; y?: number };
                height?: number;
                width?: number;
            };
            creationTime?: number;
            decoratorKind?: DecoratorKind;
            edges?: (
                | { p1?: { x?: number; y?: number }; p2?: { x?: number; y?: number } }
                | undefined
            )[];
            id?: string;
            isSolverOutput?: boolean;
            jiixBlockId?: string;
            jiixBlockType?: "Text" | "Math" | "Node" | "Edge" | "Decorator";
            length?: number;
            modificationDate?: number;
            pointers?: ({ p?: number; t?: number; x?: number; y?: number } | undefined)[];
            pointerType?: string;
            snapPoints?: ({ x?: number; y?: number } | undefined)[];
            style?: {
                color?: string;
                fill?: string;
                opacity?: number;
                width?: number;
                [key: string]: string | number | undefined;
            };
            type?: Stroke;
            vertices?: ({ p?: number; t?: number; x?: number; y?: number } | undefined)[];
        }[]

        Recorded strokes to replay (same shape as importPointEvents).

      • speed: number = 1

        Playback speed multiplier (1 = original timing, 2 = twice as fast).

      Returns void

    • Resume playback from where it was paused.

      Returns void

    • Change the playback speed. If currently playing, remaining points are rescheduled immediately at the new speed without losing progress.

      Parameters

      • speed: number

      Returns void

    • Stop playback and reset progress. Already-replayed strokes remain on the canvas.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods