@zuttora/charts 0.0.0-stage → 0.3.0

package/dist/render/drawMarkers.js

@@ -0,0 +1,39 @@
+const bar = { o: 0, h: 0, l: 0, c: 0 };
+export function drawMarkers(ctx, f) {
+    if (f.markers.length === 0)
+        return;
+    const r = f.vp.visibleRange();
+    if (!r)
+        return;
+    const size = Math.min(14, Math.max(8, Math.round(f.vp.barSpacing * 1.1)));
+    const stacks = new Map();
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    for (const m of f.markers) {
+        const idx = f.series.indexAtTime(m.t);
+        if (idx < r.from || idx > r.to)
+            continue;
+        f.source.at(idx, bar);
+        const key = `${idx}${m.kind}`;
+        const n = stacks.get(key) ?? 0;
+        stacks.set(key, n + 1);
+        const x = f.vp.x(idx);
+        const up = m.kind === 'buy';
+        const gap = 4 + n * (size + 2);
+        const apex = up ? f.scale.y(bar.l) + gap : f.scale.y(bar.h) - gap;
+        const base = up ? apex + size : apex - size;
+        ctx.beginPath();
+        ctx.moveTo(x, apex);
+        ctx.lineTo(x - size / 2, base);
+        ctx.lineTo(x + size / 2, base);
+        ctx.closePath();
+        ctx.fillStyle = up ? f.theme.up : f.theme.down;
+        ctx.fill();
+        if (m.label && size >= 11) {
+            ctx.font = `700 ${size - 4}px ${f.theme.fontFamily}`;
+            ctx.fillStyle = f.theme.background;
+            ctx.fillText(m.label.slice(0, 2), x, up ? base - size * 0.3 : base + size * 0.3);
+        }
+    }
+    ctx.textAlign = 'left';
+}

package/dist/render/drawPriceLines.d.ts

@@ -0,0 +1,4 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function spreadTags(ys: readonly number[], gap: number, top: number, bottom: number): number[];
+export declare function drawPriceLines(ctx: Ctx, f: Frame): void;
+export declare function drawPriceLineTags(ctx: Ctx, f: Frame): void;

package/dist/render/drawPriceLines.js

@@ -0,0 +1,60 @@
+import { TAG_HEIGHT, TAG_PAD_X } from "./frame.js";
+import { pinSide } from "../core/priceScale.js";
+const DASH = { solid: [], dashed: [6, 4], dotted: [2, 3] };
+export function spreadTags(ys, gap, top, bottom) {
+    const order = ys.map((_, i) => i).sort((a, b) => ys[a] - ys[b]);
+    const out = order.map((i) => Math.min(bottom, Math.max(top, ys[i])));
+    for (let k = 1; k < out.length; k++)
+        out[k] = Math.max(out[k], out[k - 1] + gap);
+    if (out.length > 0 && out[out.length - 1] > bottom) {
+        out[out.length - 1] = bottom;
+        for (let k = out.length - 2; k >= 0; k--)
+            out[k] = Math.min(out[k], out[k + 1] - gap);
+    }
+    const result = new Array(ys.length);
+    order.forEach((orig, k) => {
+        result[orig] = out[k];
+    });
+    return result;
+}
+export function drawPriceLines(ctx, f) {
+    ctx.lineWidth = 1;
+    for (const line of f.lines) {
+        if (pinSide(line.price, f.range))
+            continue;
+        const y = Math.round(f.scale.y(line.price)) + 0.5;
+        ctx.beginPath();
+        ctx.setLineDash(DASH[line.style ?? 'dashed']);
+        ctx.moveTo(f.layout.plotLeft, y);
+        ctx.lineTo(f.layout.plotRight, y);
+        ctx.strokeStyle = line.color;
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+}
+export function drawPriceLineTags(ctx, f) {
+    if (f.lines.length === 0)
+        return;
+    const { layout } = f;
+    const half = TAG_HEIGHT / 2;
+    const top = layout.mainTop + half;
+    const bottom = layout.mainTop + layout.mainHeight - half;
+    const ys = f.lines.map((line) => {
+        const side = pinSide(line.price, f.range);
+        return side === 'above' ? top : side === 'below' ? bottom : f.scale.y(line.price);
+    });
+    const placed = spreadTags(ys, TAG_HEIGHT + 2, top, bottom);
+    ctx.font = f.font;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    f.lines.forEach((line, i) => {
+        const side = pinSide(line.price, f.range);
+        const text = `${side === 'above' ? '↑ ' : side === 'below' ? '↓ ' : ''}${line.label}`;
+        const w = Math.max(layout.axisWidth, Math.ceil(ctx.measureText(text).width) + TAG_PAD_X * 2);
+        const y = Math.round(placed[i]);
+        ctx.fillStyle = line.color;
+        ctx.fillRect(layout.width - w, y - half, w, TAG_HEIGHT);
+        ctx.fillStyle = f.theme.background;
+        ctx.fillText(text, layout.width - w + TAG_PAD_X, y);
+    });
+}

package/dist/render/drawSubPanes.d.ts

@@ -0,0 +1,2 @@
+import type { Ctx, Frame } from './frame.ts';
+export declare function drawSubPanes(ctx: Ctx, f: Frame): void;

package/dist/render/drawSubPanes.js

@@ -0,0 +1,104 @@
+import { priceFormatter } from "../core/format.js";
+import { indicatorTitle } from "../core/indicators.js";
+import { bodyWidth } from "./drawCandles.js";
+import { tracePath } from "./drawIndicators.js";
+import { TAG_PAD_X } from "./frame.js";
+import { RSI_GUIDES, subTicks, subY } from "./indicatorFrame.js";
+const HIST_ALPHA = 0.55;
+function drawRsi(ctx, f, p, from, to) {
+    const { layout } = f;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    for (const g of RSI_GUIDES) {
+        const y = Math.round(subY(p, g)) + 0.5;
+        ctx.moveTo(layout.plotLeft, y);
+        ctx.lineTo(layout.plotRight, y);
+    }
+    ctx.strokeStyle = f.theme.textMuted;
+    ctx.globalAlpha = 0.5;
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = p.entry.spec.color;
+    tracePath(ctx, f, p.entry.calc.lines.rsi, from, to, (v) => subY(p, v));
+    ctx.stroke();
+}
+function drawMacd(ctx, f, p, from, to) {
+    const spec = p.entry.spec;
+    if (spec.type !== 'macd')
+        return;
+    const l = p.entry.calc.lines;
+    const zero = Math.round(subY(p, 0));
+    const bw = bodyWidth(f.vp.barSpacing);
+    const half = (bw - 1) / 2;
+    ctx.globalAlpha = HIST_ALPHA;
+    for (const up of [true, false]) {
+        ctx.beginPath();
+        for (let i = from; i <= to; i++) {
+            const h = l.hist[i];
+            if (h === null || h === undefined || h >= 0 !== up)
+                continue;
+            const y = Math.round(subY(p, h));
+            ctx.rect(Math.round(f.vp.x(i)) - half, Math.min(y, zero), bw, Math.max(1, Math.abs(y - zero)));
+        }
+        ctx.fillStyle = up ? f.theme.up : f.theme.down;
+        ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.moveTo(f.layout.plotLeft, zero + 0.5);
+    ctx.lineTo(f.layout.plotRight, zero + 0.5);
+    ctx.strokeStyle = f.theme.grid;
+    ctx.stroke();
+    ctx.lineWidth = 1.5;
+    for (const [values, color] of [
+        [l.macd, spec.color],
+        [l.signal, spec.signalColor],
+    ]) {
+        ctx.strokeStyle = color;
+        tracePath(ctx, f, values, from, to, (v) => subY(p, v));
+        ctx.stroke();
+    }
+}
+export function drawSubPanes(ctx, f) {
+    const r = f.vp.visibleRange();
+    const { layout, theme } = f;
+    for (const p of f.subs) {
+        ctx.beginPath();
+        ctx.lineWidth = 1;
+        ctx.moveTo(0, p.top + 0.5);
+        ctx.lineTo(layout.width, p.top + 0.5);
+        ctx.strokeStyle = theme.grid;
+        ctx.stroke();
+        if (r) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(layout.plotLeft, p.top + 1, layout.plotRight - layout.plotLeft, p.height - 1);
+            ctx.clip();
+            const from = Math.max(0, r.from - 1);
+            const to = Math.min(f.series.lastIndex(), r.to + 1);
+            if (p.entry.spec.type === 'rsi')
+                drawRsi(ctx, f, p, from, to);
+            else
+                drawMacd(ctx, f, p, from, to);
+            ctx.restore();
+        }
+        ctx.font = f.font;
+        ctx.fillStyle = theme.textMuted;
+        ctx.textBaseline = 'top';
+        ctx.textAlign = 'left';
+        ctx.fillText(indicatorTitle(p.entry.spec), 8, p.top + 4);
+        ctx.fillStyle = theme.text;
+        ctx.textBaseline = 'middle';
+        const fmt = p.entry.spec.type === 'rsi' ? priceFormatter(0, 'en-IN') : f.fmt;
+        for (const v of subTicks(p, 2)) {
+            const y = subY(p, v);
+            if (y < p.top + 8 || y > p.top + p.height - 8)
+                continue;
+            ctx.fillText(fmt(v), layout.plotRight + TAG_PAD_X, Math.round(y));
+        }
+    }
+}

package/dist/render/frame.d.ts

@@ -0,0 +1,57 @@
+import type { CandleSeries } from '../core/series.ts';
+import type { PriceRange, PriceScale } from '../core/priceScale.ts';
+import type { TimeLabel } from '../core/timeLabels.ts';
+import type { CandleStyle, ChartTheme, ChartType, Marker, PriceLine } from '../core/types.ts';
+import type { Viewport } from '../core/viewport.ts';
+import type { IndicatorEntry } from '../core/indicatorSet.ts';
+import type { SubPane } from './indicatorFrame.ts';
+export type Ctx = CanvasRenderingContext2D;
+export interface Ohlc {
+    o: number;
+    h: number;
+    l: number;
+    c: number;
+}
+export interface BarSource {
+    at(i: number, out: Ohlc): void;
+}
+export interface Layout {
+    width: number;
+    height: number;
+    plotLeft: number;
+    plotRight: number;
+    mainTop: number;
+    mainHeight: number;
+    axisWidth: number;
+    timeTop: number;
+    timeHeight: number;
+    subs: {
+        top: number;
+        height: number;
+    }[];
+}
+export interface Frame {
+    theme: ChartTheme;
+    layout: Layout;
+    vp: Viewport;
+    scale: PriceScale;
+    series: CandleSeries;
+    source: BarSource;
+    type: ChartType;
+    candleStyle: CandleStyle;
+    range: PriceRange;
+    ticks: number[];
+    timeLabels: TimeLabel[];
+    lines: readonly PriceLine[];
+    markers: readonly Marker[];
+    overlays: readonly IndicatorEntry[];
+    subs: readonly SubPane[];
+    fmt: (v: number) => string;
+    font: string;
+    noDataText: string;
+    intervalMs: number;
+    tzOffsetMs: number;
+}
+export declare const TAG_PAD_X = 6;
+export declare const TAG_HEIGHT = 18;
+export declare function fontOf(theme: ChartTheme): string;

package/dist/render/frame.js

@@ -0,0 +1,5 @@
+export const TAG_PAD_X = 6;
+export const TAG_HEIGHT = 18;
+export function fontOf(theme) {
+    return `500 ${theme.fontSize}px ${theme.fontFamily}`;
+}

package/dist/render/frameBuilder.d.ts

@@ -0,0 +1,12 @@
+import type { ChartState } from '../chartState.ts';
+import type { BarSource, Ctx, Frame } from './frame.ts';
+export declare const RANGE_TWEEN_MS = 150;
+export declare const CLOSE_TWEEN_MS = 180;
+export declare const SCROLL_TWEEN_MS = 250;
+export declare function sourceOf(s: ChartState): BarSource;
+export interface Built {
+    frame: Frame;
+    animating: boolean;
+    relayout: boolean;
+}
+export declare function buildFrame(s: ChartState, ctx: Ctx, animNow: number): Built;

package/dist/render/frameBuilder.js

@@ -0,0 +1,129 @@
+import { autoRange, axisTicks } from "../core/priceScale.js";
+import { priceFormatter } from "../core/format.js";
+import { INTERVAL_MS } from "../core/time.js";
+import { pickTimeLabels } from "../core/timeLabels.js";
+import { fontOf } from "./frame.js";
+import { buildSubPanes, mainExtremes } from "./indicatorFrame.js";
+import { computeLayout } from "./layout.js";
+export const RANGE_TWEEN_MS = 150;
+export const CLOSE_TWEEN_MS = 180;
+export const SCROLL_TWEEN_MS = 250;
+const bar = { o: 0, h: 0, l: 0, c: 0 };
+export function sourceOf(s) {
+    return s.options.type === 'heikinAshi' ? s.haBars : s.plainBars;
+}
+function extremes(src, from, to) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = from; i <= to; i++) {
+        src.at(i, bar);
+        if (bar.l < min)
+            min = bar.l;
+        if (bar.h > max)
+            max = bar.h;
+    }
+    return { min, max };
+}
+function textWidth(s, ctx, text) {
+    let w = s.textWidths.get(text);
+    if (w === undefined) {
+        w = ctx.measureText(text).width;
+        if (s.textWidths.size > 500)
+            s.textWidths.clear();
+        s.textWidths.set(text, w);
+    }
+    return w;
+}
+export function buildFrame(s, ctx, animNow) {
+    const o = s.options;
+    const theme = o.theme;
+    const reduced = o.reducedMotion;
+    const font = fontOf(theme);
+    const layout = computeLayout(s.width, s.height, s.axisWidth, s.indicators.subCount);
+    s.vp.setPlot(layout.plotLeft, layout.plotRight);
+    s.scale.setPane(layout.mainTop, layout.mainHeight);
+    let animating = false;
+    if (s.rightAnimating) {
+        s.vp.setRightIndex(s.rightTween.value(animNow));
+        if (s.rightTween.active(animNow))
+            animating = true;
+        else
+            s.rightAnimating = false;
+    }
+    const src = sourceOf(s);
+    s.plainBars.drawnClose = s.series.forming ? s.closeTween.value(animNow) : null;
+    if (s.closeTween.active(animNow))
+        animating = true;
+    const vis = s.vp.visibleRange();
+    const overlays = s.indicators.main();
+    if (s.scale.manual) {
+        s.rangeMin.jump(s.scale.min);
+        s.rangeMax.jump(s.scale.max);
+    }
+    else if (vis) {
+        const bars = extremes(src, vis.from, vis.to);
+        const ind = mainExtremes(overlays, vis.from, vis.to);
+        if (ind) {
+            bars.min = Math.min(bars.min, ind.min);
+            bars.max = Math.max(bars.max, ind.max);
+        }
+        const target = autoRange(bars, [], s.lines, o.minMove);
+        if (!s.rangeReady || reduced) {
+            s.rangeMin.jump(target.min);
+            s.rangeMax.jump(target.max);
+            s.rangeReady = true;
+        }
+        else {
+            s.rangeMin.set(target.min, animNow, RANGE_TWEEN_MS);
+            s.rangeMax.set(target.max, animNow, RANGE_TWEEN_MS);
+        }
+    }
+    if (s.rangeMin.active(animNow) || s.rangeMax.active(animNow))
+        animating = true;
+    const range = { min: s.rangeMin.value(animNow), max: s.rangeMax.value(animNow) };
+    s.scale.setRange(range);
+    const ticks = axisTicks(range, layout.mainHeight, o.minMove);
+    const fmt = priceFormatter(o.priceDecimals, o.locale);
+    ctx.font = font;
+    let widest = 0;
+    for (const p of ticks)
+        widest = Math.max(widest, textWidth(s, ctx, fmt(p)));
+    if (s.series.forming) {
+        widest = Math.max(widest, textWidth(s, ctx, fmt(s.series.forming.c)));
+        widest = Math.max(widest, textWidth(s, ctx, o.intervalMs >= INTERVAL_MS['1h'] ? '00:00:00' : '0:00'));
+    }
+    const wanted = Math.ceil(widest) + 12;
+    const relayout = wanted > s.axisWidth || wanted < s.axisWidth - 8;
+    if (relayout)
+        s.axisWidth = wanted;
+    const labelBars = [];
+    if (vis) {
+        for (let i = vis.from; i <= vis.to; i++)
+            labelBars.push({ t: s.series.timeAt(i), x: s.vp.x(i) });
+    }
+    const prevT = vis && vis.from > 0 ? s.series.timeAt(vis.from - 1) : null;
+    const timeLabels = pickTimeLabels(labelBars, prevT, o.intervalMs, o.tzOffsetMs);
+    const frame = {
+        theme,
+        layout,
+        vp: s.vp,
+        scale: s.scale,
+        series: s.series,
+        source: src,
+        type: o.type,
+        candleStyle: o.candleStyle,
+        range,
+        ticks,
+        timeLabels,
+        lines: s.lines,
+        markers: s.markers,
+        overlays,
+        subs: vis ? buildSubPanes(s.indicators.subs(), layout, vis.from, vis.to) : [],
+        fmt,
+        font,
+        noDataText: o.labels.noData,
+        intervalMs: o.intervalMs,
+        tzOffsetMs: o.tzOffsetMs,
+    };
+    return { frame, animating, relayout };
+}

package/dist/render/indicatorFrame.d.ts

@@ -0,0 +1,17 @@
+import type { PriceRange } from '../core/priceScale.ts';
+import type { IndicatorEntry } from '../core/indicatorSet.ts';
+import type { Layout } from './frame.ts';
+export declare const SUB_PAD = 6;
+export declare const RSI_GUIDES: number[];
+export interface SubPane {
+    entry: IndicatorEntry;
+    top: number;
+    height: number;
+    min: number;
+    max: number;
+}
+export declare function subY(p: SubPane, v: number): number;
+export declare function subValueAt(p: SubPane, y: number): number;
+export declare function mainExtremes(entries: readonly IndicatorEntry[], from: number, to: number): PriceRange | null;
+export declare function buildSubPanes(entries: readonly IndicatorEntry[], layout: Layout, from: number, to: number): SubPane[];
+export declare function subTicks(p: SubPane, decimals: number): number[];

package/dist/render/indicatorFrame.js

@@ -0,0 +1,55 @@
+import { axisTicks } from "../core/priceScale.js";
+export const SUB_PAD = 6;
+export const RSI_GUIDES = [30, 70];
+export function subY(p, v) {
+    return p.top + SUB_PAD + ((p.max - v) / (p.max - p.min)) * Math.max(1, p.height - 2 * SUB_PAD);
+}
+export function subValueAt(p, y) {
+    return p.max - ((y - p.top - SUB_PAD) / Math.max(1, p.height - 2 * SUB_PAD)) * (p.max - p.min);
+}
+function scan(lists, from, to, into) {
+    for (const values of lists) {
+        for (let i = from; i <= to; i++) {
+            const v = values[i];
+            if (v === null || v === undefined)
+                continue;
+            if (v < into.min)
+                into.min = v;
+            if (v > into.max)
+                into.max = v;
+        }
+    }
+}
+export function mainExtremes(entries, from, to) {
+    const out = { min: Infinity, max: -Infinity };
+    for (const e of entries) {
+        const l = e.calc.lines;
+        scan(e.spec.type === 'bollinger' ? [l.upper, l.lower] : [l.main], from, to, out);
+    }
+    return out.min <= out.max ? out : null;
+}
+export function buildSubPanes(entries, layout, from, to) {
+    const panes = [];
+    entries.forEach((entry, i) => {
+        const slot = layout.subs[i];
+        if (!slot)
+            return;
+        let min = 0;
+        let max = 100;
+        if (entry.spec.type === 'macd') {
+            const l = entry.calc.lines;
+            const r = { min: 0, max: 0 };
+            scan([l.macd, l.signal, l.hist], from, to, r);
+            const pad = (r.max - r.min || 1) * 0.08;
+            min = r.min - pad;
+            max = r.max + pad;
+        }
+        panes.push({ entry, top: slot.top, height: slot.height, min, max });
+    });
+    return panes;
+}
+export function subTicks(p, decimals) {
+    if (p.entry.spec.type === 'rsi')
+        return RSI_GUIDES;
+    return axisTicks({ min: p.min, max: p.max }, p.height, 10 ** -(decimals + 2)).map((v) => v + 0);
+}

package/dist/render/layout.d.ts

@@ -0,0 +1,4 @@
+import type { Layout } from './frame.ts';
+export declare const TIME_AXIS_HEIGHT = 22;
+export declare const MIN_AXIS_WIDTH = 56;
+export declare function computeLayout(width: number, height: number, axisWidth: number, subCount: number): Layout;

package/dist/render/layout.js

@@ -0,0 +1,26 @@
+export const TIME_AXIS_HEIGHT = 22;
+export const MIN_AXIS_WIDTH = 56;
+export function computeLayout(width, height, axisWidth, subCount) {
+    const axisW = Math.max(MIN_AXIS_WIDTH, Math.ceil(axisWidth));
+    const avail = Math.max(0, height - TIME_AXIS_HEIGHT);
+    const share = width < 360 ? 0.18 : 0.22;
+    let subH = subCount > 0 ? Math.max(64, Math.round(avail * share)) : 0;
+    if (subCount * subH > avail * 0.7)
+        subH = Math.floor((avail * 0.7) / subCount);
+    const mainH = avail - subCount * subH;
+    const subs = [];
+    for (let i = 0; i < subCount; i++)
+        subs.push({ top: mainH + i * subH, height: subH });
+    return {
+        width,
+        height,
+        plotLeft: 0,
+        plotRight: Math.max(0, width - axisW),
+        mainTop: 0,
+        mainHeight: mainH,
+        axisWidth: axisW,
+        timeTop: avail,
+        timeHeight: TIME_AXIS_HEIGHT,
+        subs,
+    };
+}

package/dist/render/paintFrame.d.ts

@@ -0,0 +1,11 @@
+import type { ChartState } from '../chartState.ts';
+import type { Frame } from './frame.ts';
+import type { Flags } from './scheduler.ts';
+export interface PaintTarget {
+    mainCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
+    dpr(): number;
+    frameBuilt(frame: Frame): void;
+    afterDraw(): void;
+}
+export declare function paintFrame(s: ChartState, t: PaintTarget, flags: Flags, now: number): boolean;

package/dist/render/paintFrame.js

@@ -0,0 +1,33 @@
+import { fitCanvas } from "./canvas.js";
+import { drawCrosshair } from "./drawCrosshair.js";
+import { drawDrawings } from "./drawDrawings.js";
+import { drawLastPrice, PULSE_MS } from "./drawLastPrice.js";
+import { drawMain } from "./drawMain.js";
+import { buildFrame } from "./frameBuilder.js";
+export function paintFrame(s, t, flags, now) {
+    if (s.width <= 0 || s.height <= 0)
+        return false;
+    const mainCtx = fitCanvas(t.mainCanvas, s.width, s.height, t.dpr());
+    const built = buildFrame(s, mainCtx, now);
+    t.frameBuilt(built.frame);
+    if (flags.main || built.animating || built.relayout)
+        drawMain(mainCtx, built.frame);
+    const overlayCtx = fitCanvas(t.overlayCanvas, s.width, s.height, t.dpr());
+    overlayCtx.clearRect(0, 0, s.width, s.height);
+    s.pulses = s.pulses.filter((p) => now - p < PULSE_MS);
+    if (s.series.count > 0)
+        drawDrawings(overlayCtx, built.frame, { drawings: s.drawings, state: s.draw });
+    if (s.series.forming) {
+        drawLastPrice(overlayCtx, built.frame, {
+            close: s.closeTween.value(now),
+            wallNow: s.options.now(),
+            animNow: now,
+            pulses: s.pulses,
+            reducedMotion: s.options.reducedMotion,
+        });
+    }
+    if (s.crosshair)
+        drawCrosshair(overlayCtx, built.frame, s.crosshair);
+    t.afterDraw();
+    return built.animating || built.relayout || s.pulses.length > 0;
+}

package/dist/render/scheduler.d.ts

@@ -0,0 +1,17 @@
+export type Layer = 'main' | 'overlay';
+export interface Flags {
+    main: boolean;
+    overlay: boolean;
+}
+export declare class Scheduler {
+    private flags;
+    private handle;
+    private draw;
+    private raf;
+    private caf;
+    private stopped;
+    constructor(draw: (flags: Flags, now: number) => boolean, raf?: (cb: (now: number) => void) => number, caf?: (handle: number) => void);
+    invalidate(layer: Layer): void;
+    stop(): void;
+    private frame;
+}

package/dist/render/scheduler.js

@@ -0,0 +1,38 @@
+export class Scheduler {
+    constructor(draw, raf = (cb) => requestAnimationFrame(cb), caf = (h) => cancelAnimationFrame(h)) {
+        this.flags = { main: false, overlay: false };
+        this.handle = null;
+        this.stopped = false;
+        this.frame = (now) => {
+            this.handle = null;
+            if (this.stopped)
+                return;
+            const flags = { main: this.flags.main, overlay: this.flags.overlay };
+            this.flags.main = false;
+            this.flags.overlay = false;
+            const again = this.draw(flags, now);
+            if (again) {
+                this.flags.main = true;
+                this.flags.overlay = true;
+                if (this.handle === null)
+                    this.handle = this.raf(this.frame);
+            }
+        };
+        this.draw = draw;
+        this.raf = raf;
+        this.caf = caf;
+    }
+    invalidate(layer) {
+        if (this.stopped)
+            return;
+        this.flags[layer] = true;
+        if (this.handle === null)
+            this.handle = this.raf(this.frame);
+    }
+    stop() {
+        this.stopped = true;
+        if (this.handle !== null)
+            this.caf(this.handle);
+        this.handle = null;
+    }
+}

package/dist/render/tween.d.ts

@@ -0,0 +1,12 @@
+export declare class Tween {
+    private from;
+    private to;
+    private start;
+    private dur;
+    constructor(value: number);
+    get target(): number;
+    set(target: number, now: number, duration: number): void;
+    jump(value: number): void;
+    value(now: number): number;
+    active(now: number): boolean;
+}