@sudobility/music_drawing 0.0.33 → 0.0.35

package/dist/score-canvas.js

@@ -0,0 +1,702 @@
+import { displayScore, measureAtTick, measureIndexOf, } from '@sudobility/music_types';
+import { TRACK_INFO_WIDTH, boxForMeasureIndex, computeLayout, resolveZoom, } from './layout.js';
+import { eventIdAtPoint, eventIdsAtPoint, eventIdsInBox, measureAtPoint, measureIndexAtGutterPoint, pitchAtStavePoint, } from './hit-test.js';
+import { trackIdAtGutterPoint } from './track-gutter.js';
+import { noteColorsFor } from './note-colors.js';
+import { outOfRangeNoteIds } from './out-of-range.js';
+import { playbackScrollTarget } from './playback-scroll.js';
+import { tickForPoint } from './playhead.js';
+import { shouldShowTrackInfo } from './types.js';
+import { cursorGeometryAt, cursorPathFor, cursorTickAt, measureStartTicks, sameCursorPath, systemEndTick, systemIndexForTick, } from './cursor.js';
+/** A frame, the default for `presentLatencyMs`. */
+const FRAME_MS = 16;
+/** Highlight latency before anything has been measured: one frame. */
+const DEFAULT_HIGHLIGHT_LATENCY_SECONDS = 0.016;
+/** Measurements kept for the median. */
+const HIGHLIGHT_SAMPLES = 15;
+/** A change smaller than this is not worth telling the player about. */
+const HIGHLIGHT_REPORT_STEP_SECONDS = 0.003;
+/** Clear space kept between the playing bar and the edge it nears, in view px. */
+const FOLLOW_MARGIN = 40;
+const HELD = { tick: 0, atMs: 0, ticksPerSecond: 0 };
+export class ScoreCanvas {
+    constructor({ surface, scheduler }) {
+        this.score = null;
+        /** What `setStoredScore` was last given, so a repeat call does no work. */
+        this.stored = null;
+        this.pitchDisplay = 'concert';
+        this.view = null;
+        this.scrollLeft = 0;
+        this.scrollTop = 0;
+        this.activeTrackId = null;
+        this.playing = [];
+        this.selectedIds = [];
+        this.regenerated = false;
+        this.outOfRangeIds = [];
+        this.selectedMeasureIds = new Set();
+        this.lastFrame = null;
+        /** The plan the last frame was drawn against is only trusted while this matches. */
+        this.currentPlan = null;
+        this.starts = [];
+        this.cancelPaint = null;
+        /** What the drawn window last showed, so an invisible colour change skips the paint. */
+        this.paintedSignature = '';
+        /**
+         * Moves whenever something other than the lit notes changes what a paint
+         * draws; see `PaintFrame`. Bumped lazily, at the next paint, so a burst of
+         * changes costs one version.
+         */
+        this.baseVersion = 0;
+        this.baseDirty = true;
+        /**
+         * Moves with every change `baseDirty` records, eagerly — the base colour
+         * signature is cached against it, and that cache is read between paints.
+         */
+        this.baseEpoch = 0;
+        this.baseSignatureCache = null;
+        /** When the lit notes last changed without being painted yet. */
+        this.highlightRequestedAt = null;
+        this.highlightSamples = [];
+        this.highlightLatency = DEFAULT_HIGHLIGHT_LATENCY_SECONDS;
+        this.highlightListeners = new Set();
+        this.motion = HELD;
+        this.path = null;
+        this.shownMotion = null;
+        this.cancelWrap = null;
+        /** The look-ahead preparation in progress, and the window it is for. */
+        this.cancelLookahead = null;
+        this.lookaheadKey = null;
+        this.lookaheadPlan = null;
+        this.surface = surface;
+        this.scheduler = scheduler;
+    }
+    // ---- what is drawn -------------------------------------------------------
+    /**
+     * The score as the store holds it — sounding pitch, before any lens — and
+     * the reading mode to draw it in.
+     *
+     * The preferred way in. The canvas applies `displayScore` itself and scans
+     * the stored score with `outOfRangeNoteIds`, so no host has to remember
+     * either half: the scan must see **stored** pitch (the compass is sounding
+     * pitch) while the paint must see the **display** score, and a host handed
+     * only one of the two was always one line away from colouring a clarinet's
+     * part a tone out, or from marking nothing at all.
+     *
+     * The ids it marks survive the lenses — both keep event ids — so they colour
+     * the drawn notes correctly in either mode. Calling again with the same
+     * score and mode does nothing. A later `setOutOfRangeNotes` overrides the
+     * marks until the stored score next changes.
+     */
+    setStoredScore(score, pitchDisplay = 'concert') {
+        if (score === this.stored && pitchDisplay === this.pitchDisplay)
+            return;
+        const scoreChanged = score !== this.stored;
+        this.stored = score;
+        this.pitchDisplay = pitchDisplay;
+        this.setScore(score ? displayScore(score, pitchDisplay) : null);
+        if (scoreChanged) {
+            this.outOfRangeIds = outOfRangeNoteIds(score).ids;
+            this.markBaseDirty();
+            this.scheduleColourPaint();
+        }
+    }
+    /**
+     * The **display** score, lenses already applied.
+     *
+     * Lower level than `setStoredScore`: the host owns the lenses and, if it
+     * wants out-of-range marks, must pass them to `setOutOfRangeNotes` from a
+     * scan of the stored score. Kept for hosts that have not moved over.
+     */
+    setScore(score) {
+        if (score === this.score)
+            return;
+        this.score = score;
+        this.starts = score ? measureStartTicks(score) : [];
+        this.invalidateLayout();
+    }
+    setView(view) {
+        const previous = this.view;
+        this.view = view;
+        if (previous &&
+            previous.width === view.width &&
+            previous.zoom === view.zoom &&
+            previous.layoutMode === view.layoutMode &&
+            previous.theme === view.theme &&
+            sameIds(previous.trackIds, view.trackIds)) {
+            // Only the height or the pixel ratio moved: same layout, new window.
+            if (previous.height !== view.height ||
+                previous.devicePixelRatio !== view.devicePixelRatio) {
+                this.markBaseDirty();
+                this.schedulePaint();
+            }
+            return;
+        }
+        this.invalidateLayout();
+    }
+    /** Content px. */
+    setScroll(left, top) {
+        if (left === this.scrollLeft && top === this.scrollTop)
+            return;
+        this.scrollLeft = left;
+        this.scrollTop = top;
+        this.markBaseDirty();
+        this.schedulePaint();
+    }
+    // ---- 1–2. the cursor -----------------------------------------------------
+    setCursorTick(tick) {
+        this.animateCursor({ tick, atMs: this.scheduler.now(), ticksPerSecond: 0 });
+    }
+    animateCursor(motion) {
+        this.motion = motion;
+        this.refreshCursor();
+    }
+    // ---- 3–6. what colours the notation --------------------------------------
+    setActiveTrack(trackId) {
+        if (trackId === this.activeTrackId)
+            return;
+        this.activeTrackId = trackId;
+        this.markBaseDirty();
+        // The stave tint changes with it, so this is always visible.
+        this.paintedSignature = '';
+        this.schedulePaint();
+    }
+    setPlayingNotes(notes) {
+        this.playing = notes;
+        // Stamped before scheduling: a host that paints synchronously measures
+        // inside `scheduleColourPaint`, and must find the stamp already there.
+        const stamped = this.highlightRequestedAt === null;
+        if (stamped)
+            this.highlightRequestedAt = this.scheduler.now();
+        if (!this.scheduleColourPaint() && stamped) {
+            this.highlightRequestedAt = null;
+        }
+    }
+    setSelectedNotes(ids, options = {}) {
+        const regenerated = options.regenerated ?? false;
+        // Compared, because hosts hand a fresh array per render and the base a
+        // layered surface keeps is only thrown away for a real change.
+        if (sameIds(ids, this.selectedIds) && regenerated === this.regenerated) {
+            return;
+        }
+        this.selectedIds = ids;
+        this.regenerated = regenerated;
+        this.markBaseDirty();
+        this.scheduleColourPaint();
+    }
+    setSelectedMeasures(ids) {
+        if (ids.length === this.selectedMeasureIds.size &&
+            ids.every(id => this.selectedMeasureIds.has(id))) {
+            return;
+        }
+        this.selectedMeasureIds = new Set(ids);
+        this.markBaseDirty();
+        this.scheduleColourPaint();
+    }
+    setOutOfRangeNotes(ids) {
+        if (sameIds(ids, this.outOfRangeIds))
+            return;
+        this.outOfRangeIds = ids;
+        this.markBaseDirty();
+        this.scheduleColourPaint();
+    }
+    // ---- questions -----------------------------------------------------------
+    /** The layout the canvas draws against, or null with no score or view. */
+    get plan() {
+        if (this.currentPlan)
+            return this.currentPlan;
+        if (!this.score || !this.view)
+            return null;
+        this.currentPlan = computeLayout(this.score, this.layoutOptions(this.view));
+        return this.currentPlan;
+    }
+    /** What the last paint drew, while it still describes the current layout. */
+    get frame() {
+        return this.lastFrame;
+    }
+    get zoom() {
+        return resolveZoom(this.view?.zoom ?? 1);
+    }
+    /** How large the scrollable content is, in content px. */
+    contentSize() {
+        const plan = this.plan;
+        if (!plan)
+            return { width: 0, height: 0 };
+        return {
+            width: plan.totalWidth * this.zoom,
+            height: plan.totalHeight * this.zoom,
+        };
+    }
+    /** Content px. */
+    cursorGeometry(tick) {
+        const plan = this.plan;
+        if (!plan || !this.score)
+            return null;
+        return cursorGeometryAt(plan, this.score, this.zoom, tick, this.positions());
+    }
+    hitTest(point) {
+        const plan = this.plan;
+        const score = this.score;
+        const view = this.view;
+        if (!plan || !score || !view)
+            return null;
+        const zoom = this.zoom;
+        // 10. The gutter is pinned to the view, so it is tested in view px.
+        if (shouldShowTrackInfo(this.layoutOptions(view))) {
+            const trackId = trackIdAtGutterPoint(plan, zoom, this.scrollTop, point);
+            if (trackId)
+                return { kind: 'trackGutter', trackId };
+            if (point.x >= 0 && point.x <= TRACK_INFO_WIDTH * zoom)
+                return null;
+        }
+        const content = {
+            x: point.x + this.scrollLeft,
+            y: point.y + this.scrollTop,
+        };
+        const logical = { x: content.x / zoom, y: content.y / zoom };
+        // 11.
+        const measureIndex = measureIndexAtGutterPoint(plan, logical);
+        if (measureIndex !== null)
+            return { kind: 'measureNumber', measureIndex };
+        const measure = measureAtPoint(plan, logical);
+        if (!measure)
+            return null;
+        const tick = tickForPoint(plan, score, logical.x, logical.y, this.positions()) ?? 0;
+        // 12. Bounding boxes are content px.
+        const boxes = this.lastFrame?.idToBBox;
+        const noteId = boxes ? eventIdAtPoint(boxes, content) : null;
+        if (boxes && noteId) {
+            const chord = eventIdsAtPoint(boxes, content);
+            return {
+                kind: 'note',
+                eventIds: chord.length > 0 ? chord : [noteId],
+                trackId: measure.trackId,
+                measureIndex: measure.measureIndex,
+                tick,
+            };
+        }
+        // 13.
+        return {
+            kind: 'stave',
+            trackId: measure.trackId,
+            measureIndex: measure.measureIndex,
+            tick,
+            pitch: pitchAtStavePoint(plan, score, logical)?.pitch ?? null,
+        };
+    }
+    /** The tick under a view point: the inverse of the cursor. */
+    tickAt(point) {
+        const plan = this.plan;
+        if (!plan || !this.score)
+            return null;
+        const zoom = this.zoom;
+        return tickForPoint(plan, this.score, (point.x + this.scrollLeft) / zoom, (point.y + this.scrollTop) / zoom, this.positions());
+    }
+    /** Drawn notes inside a view-px rectangle spanned by two corners. */
+    noteIdsInRect(a, b) {
+        const boxes = this.lastFrame?.idToBBox;
+        if (!boxes)
+            return [];
+        const x = Math.min(a.x, b.x) + this.scrollLeft;
+        const y = Math.min(a.y, b.y) + this.scrollTop;
+        return eventIdsInBox(boxes, {
+            x,
+            y,
+            width: Math.abs(a.x - b.x),
+            height: Math.abs(a.y - b.y),
+        });
+    }
+    /** The bar index `tick` falls in, or null — following playback decides per bar. */
+    measureIndexAt(tick) {
+        const score = this.score;
+        const track = score?.tracks[0];
+        if (!score || !track)
+            return null;
+        const measure = measureAtTick(score, track.id, tick);
+        return measure ? measureIndexOf(score, measure.id) : null;
+    }
+    /**
+     * Ticks per second at `tick` from the written tempo — a first guess for a
+     * cursor that has just started moving, before the real rate is measured.
+     */
+    writtenTicksPerSecond(tick) {
+        const score = this.score;
+        if (!score)
+            return 0;
+        let bpm = 0;
+        for (const event of score.tempoMap) {
+            if (event.tick > tick)
+                break;
+            bpm = event.bpm;
+        }
+        return (bpm * score.ppq) / 60;
+    }
+    /** Where following playback should scroll for `tick`, or null to stay. */
+    followTarget(tick) {
+        const plan = this.plan;
+        const score = this.score;
+        const view = this.view;
+        const track = score?.tracks[0];
+        if (!plan || !score || !view || !track)
+            return null;
+        const measure = measureAtTick(score, track.id, tick);
+        const measureIndex = measure ? measureIndexOf(score, measure.id) : null;
+        if (measureIndex === null)
+            return null;
+        const box = boxForMeasureIndex(plan, 0, measureIndex);
+        if (!box)
+            return null;
+        return playbackScrollTarget({
+            plan,
+            layoutMode: view.layoutMode,
+            zoom: this.zoom,
+            measureIndex,
+            measureX: box.x,
+            measureWidth: box.width,
+            scrollLeft: this.scrollLeft,
+            viewportWidth: view.width,
+            scrollTop: this.scrollTop,
+            viewportHeight: view.height,
+            margin: FOLLOW_MARGIN,
+        });
+    }
+    /** Scroll so `tick` is in view: a jump for more than a screen, else smooth. */
+    scrollToFollow(tick) {
+        const target = this.followTarget(tick);
+        const view = this.view;
+        if (!target || !view)
+            return;
+        const relocating = Math.abs(target.top - this.scrollTop) > view.height ||
+            Math.abs(target.left - this.scrollLeft) > view.width;
+        this.surface.scrollTo?.(target, relocating ? 'jump' : 'smooth');
+    }
+    /**
+     * How long a change of lit notes takes to reach the screen here, in seconds:
+     * waiting for the frame, drawing, and presenting.
+     *
+     * Measured rather than assumed because it is a property of the host. A web
+     * canvas repaints a window of notation in a few milliseconds; the native app
+     * records a Skia picture and waits a React commit, measured at 45–70ms on a
+     * dense score. The player publishes the lit notes this far ahead
+     * (`setSoundingRenderDelay`), which is what keeps them with the sound on
+     * both. The median of recent paints, so one stalled frame does not move it.
+     */
+    get highlightLatencySeconds() {
+        return this.highlightLatency;
+    }
+    subscribeHighlightLatency(listener) {
+        this.highlightListeners.add(listener);
+        return () => this.highlightListeners.delete(listener);
+    }
+    /** Paint now rather than on the next frame — for a host that must, like a resize. */
+    paintNow() {
+        // A host paints now when its drawing surface itself changed — a resize
+        // clears a canvas — so nothing it kept can be trusted.
+        this.markBaseDirty();
+        this.cancelPaint?.();
+        this.cancelPaint = null;
+        this.paint();
+    }
+    dispose() {
+        this.cancelLookahead?.();
+        this.cancelLookahead = null;
+        this.cancelPaint?.();
+        this.cancelPaint = null;
+        this.cancelWrap?.();
+        this.cancelWrap = null;
+    }
+    // ---- internals -----------------------------------------------------------
+    layoutOptions(view) {
+        return {
+            zoom: view.zoom,
+            layoutMode: view.layoutMode,
+            width: view.width,
+            theme: view.theme,
+            ...(view.trackIds ? { trackIds: view.trackIds } : {}),
+        };
+    }
+    positions() {
+        const frame = this.lastFrame;
+        return frame && frame.plan === this.plan
+            ? frame.measureNotePositions
+            : undefined;
+    }
+    invalidateLayout() {
+        this.markBaseDirty();
+        this.currentPlan = null;
+        this.lastFrame = null;
+        this.paintedSignature = '';
+        this.schedulePaint();
+        this.refreshCursor();
+    }
+    /** Schedules a paint for a colour change; says whether one was needed. */
+    scheduleColourPaint() {
+        const frame = this.lastFrame;
+        if (frame) {
+            const signature = this.colourSignature(frame);
+            if (signature === this.paintedSignature)
+                return false;
+        }
+        this.schedulePaint();
+        return true;
+    }
+    markBaseDirty() {
+        this.baseDirty = true;
+        this.baseEpoch += 1;
+    }
+    /**
+     * What colour the drawn window shows, as a string two states compare by.
+     *
+     * In two parts, because they change at very different rates. Everything but
+     * the lit notes — the active track, the selection, the out-of-range marks,
+     * the selected bars — changes when somebody does something, and is cached
+     * until then; the lit notes change on every note during playback, and are a
+     * handful. Building the whole string on every change of lit notes cost time
+     * in proportion to every coloured note in the window, which on an import
+     * full of out-of-range notes is most of them. A playing note is drawn playing
+     * whatever else it is (`buildNoteColors` applies it last), so the two parts
+     * together decide the colours exactly.
+     */
+    colourSignature(frame) {
+        return `${this.baseSignature(frame)}|${this.playingSignature(frame)}`;
+    }
+    baseSignature(frame) {
+        const cached = this.baseSignatureCache;
+        if (cached && cached.frame === frame && cached.epoch === this.baseEpoch) {
+            return cached.signature;
+        }
+        let signature = `a${this.activeTrackId ?? ''};`;
+        const selectedRole = this.regenerated ? 'r' : 's';
+        for (const id of this.outOfRangeIds) {
+            if (frame.idToBBox.has(id))
+                signature += `${id}:o;`;
+        }
+        for (const id of this.selectedIds) {
+            if (frame.idToBBox.has(id))
+                signature += `${id}:${selectedRole};`;
+        }
+        for (const id of this.selectedMeasureIds) {
+            if (frame.measureIdToBBox.has(id))
+                signature += `m${id};`;
+        }
+        this.baseSignatureCache = { frame, epoch: this.baseEpoch, signature };
+        return signature;
+    }
+    /** The drawn notes lit now: the active track's sounding notes on screen. */
+    playingSignature(frame) {
+        const active = this.activeTrackId;
+        if (active === null)
+            return '';
+        const lit = [];
+        for (const note of this.playing) {
+            if (note.trackId === active && frame.idToBBox.has(note.noteId)) {
+                lit.push(note.noteId);
+            }
+        }
+        return lit.sort().join(';');
+    }
+    noteColors() {
+        return noteColorsFor({
+            selectedIds: this.selectedIds,
+            outOfRangeIds: this.outOfRangeIds,
+            sounding: this.playing,
+            activeTrackId: this.activeTrackId,
+            regenerated: this.regenerated,
+        });
+    }
+    schedulePaint() {
+        if (this.cancelPaint)
+            return;
+        /*
+          The canceller is kept only if the callback has not already run. A host
+          may run a frame callback synchronously (a test's stubbed
+          `requestAnimationFrame` does), and storing the canceller *after* that
+          callback had cleared it left this guard set for good: the canvas never
+          painted again.
+        */
+        let ran = false;
+        const cancel = this.scheduler.frame(() => {
+            ran = true;
+            this.cancelPaint = null;
+            this.paint();
+        });
+        if (!ran)
+            this.cancelPaint = cancel;
+    }
+    paint() {
+        const score = this.score;
+        const view = this.view;
+        if (!score || !view)
+            return;
+        const zoom = this.zoom;
+        const noteColors = this.noteColors();
+        if (this.baseDirty) {
+            this.baseVersion += 1;
+            this.baseDirty = false;
+        }
+        const frame = this.surface.paint(score, {
+            ...this.layoutOptions(view),
+            noteColors,
+            activeTrackId: this.activeTrackId,
+            selectedMeasureIds: this.selectedMeasureIds,
+            viewport: {
+                top: this.scrollTop / zoom,
+                bottom: (this.scrollTop + view.height) / zoom,
+                left: this.scrollLeft / zoom,
+                right: (this.scrollLeft + view.width) / zoom,
+            },
+            ...(view.devicePixelRatio
+                ? { devicePixelRatio: view.devicePixelRatio }
+                : {}),
+        }, { baseVersion: this.baseVersion });
+        this.measureHighlight();
+        if (!frame)
+            return;
+        // The renderer's plan is the one the notes were placed in.
+        this.currentPlan = frame.plan;
+        this.lastFrame = frame;
+        this.paintedSignature = this.colourSignature(frame);
+        // 6. A repaint can move the noteheads the path runs through.
+        this.refreshCursor();
+        this.scheduleLookahead();
+    }
+    /**
+     * While the cursor moves, builds the window following it will show next —
+     * the music just past what is drawn, where `followTarget` would put it — a
+     * slice per task, so the frame that scrolls there only has to paint.
+     *
+     * Keyed on the plan and that window, so each is prepared once however many
+     * paints happen while it is the next one.
+     */
+    scheduleLookahead() {
+        const prepare = this.surface.prepare;
+        const score = this.score;
+        const view = this.view;
+        const frame = this.lastFrame;
+        const plan = this.currentPlan;
+        if (!prepare || !score || !view || !frame || !plan)
+            return;
+        if (this.motion.ticksPerSecond <= 0)
+            return;
+        let last = -1;
+        for (const index of frame.drawnMeasureIndices)
+            last = Math.max(last, index);
+        const nextStart = this.starts[last + 1];
+        if (nextStart === undefined)
+            return;
+        const target = this.followTarget(nextStart);
+        if (!target)
+            return;
+        const zoom = this.zoom;
+        const options = {
+            ...this.layoutOptions(view),
+            viewport: {
+                top: target.top / zoom,
+                bottom: (target.top + view.height) / zoom,
+                left: target.left / zoom,
+                right: (target.left + view.width) / zoom,
+            },
+        };
+        const key = `${last}:${target.top}:${target.left}`;
+        if (key === this.lookaheadKey && plan === this.lookaheadPlan)
+            return;
+        this.cancelLookahead?.();
+        this.cancelLookahead = null;
+        this.lookaheadKey = key;
+        this.lookaheadPlan = plan;
+        const step = () => {
+            this.cancelLookahead = null;
+            // A new plan or a stopped cursor makes the work pointless; a later
+            // paint schedules whatever is next.
+            if (this.currentPlan !== plan || this.motion.ticksPerSecond <= 0) {
+                this.lookaheadKey = null;
+                return;
+            }
+            if (prepare.call(this.surface, score, options) === 0)
+                return;
+            // Kept only if not already run, for the reason `schedulePaint` gives.
+            let ran = false;
+            const cancel = this.scheduler.timeout(() => {
+                ran = true;
+                step();
+            }, 0);
+            if (!ran)
+                this.cancelLookahead = cancel;
+        };
+        let ran = false;
+        const cancel = this.scheduler.timeout(() => {
+            ran = true;
+            step();
+        }, 0);
+        if (!ran)
+            this.cancelLookahead = cancel;
+    }
+    measureHighlight() {
+        const requestedAt = this.highlightRequestedAt;
+        if (requestedAt === null)
+            return;
+        this.highlightRequestedAt = null;
+        const present = this.surface.presentLatencyMs ?? FRAME_MS;
+        const sample = (this.scheduler.now() - requestedAt + present) / 1000;
+        this.highlightSamples.push(sample);
+        if (this.highlightSamples.length > HIGHLIGHT_SAMPLES) {
+            this.highlightSamples.shift();
+        }
+        const sorted = [...this.highlightSamples].sort((a, b) => a - b);
+        const median = sorted[sorted.length >> 1] ?? sample;
+        const unreported = this.highlightSamples.length === 1;
+        if (unreported ||
+            Math.abs(median - this.highlightLatency) >= HIGHLIGHT_REPORT_STEP_SECONDS) {
+            this.highlightLatency = median;
+            for (const listener of this.highlightListeners)
+                listener(median);
+        }
+    }
+    refreshCursor() {
+        this.cancelWrap?.();
+        this.cancelWrap = null;
+        const plan = this.plan;
+        const score = this.score;
+        if (!plan || !score) {
+            this.show(null);
+            return;
+        }
+        const now = this.scheduler.now();
+        const tick = cursorTickAt(this.motion, now);
+        const systemIndex = systemIndexForTick(plan, this.starts, tick);
+        const path = systemIndex < 0
+            ? null
+            : cursorPathFor(plan, score, this.zoom, this.starts, systemIndex, this.positions());
+        this.show(path);
+        // 6. Hand over to the next system when the moving cursor gets there.
+        const rate = this.motion.ticksPerSecond;
+        if (path && rate > 0 && systemIndex < plan.systems.length - 1) {
+            const end = systemEndTick(plan, this.starts, systemIndex);
+            const ms = ((end - tick) / rate) * 1000;
+            // Kept only if not already run, for the reason `schedulePaint` gives.
+            let ran = false;
+            const cancel = this.scheduler.timeout(() => {
+                ran = true;
+                this.cancelWrap = null;
+                this.refreshCursor();
+            }, Math.max(0, ms) + 1);
+            if (!ran)
+                this.cancelWrap = cancel;
+        }
+    }
+    show(path) {
+        if (sameCursorPath(path, this.path) && this.shownMotion === this.motion) {
+            return;
+        }
+        this.path = path;
+        this.shownMotion = this.motion;
+        this.surface.showCursor(path, this.motion);
+    }
+}
+function sameIds(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || a.length !== b.length)
+        return false;
+    return a.every((id, index) => id === b[index]);
+}
+//# sourceMappingURL=score-canvas.js.map