@zuttora/charts 0.1.0 → 0.3.0

package/dist/dom/legendSync.js

@@ -1,4 +1,5 @@
 import { priceFormatter } from "../core/format.js";
+import { indicatorReadings } from "./indicatorReadings.js";
 export function crosshairCandle(s) {
     const c = s.crosshair;
     if (!c || c.index < 0 || c.index > s.series.lastIndex())
@@ -19,5 +20,11 @@ export function syncLegend(s, legend) {
             if (m.tooltip && s.series.indexAtTime(m.t) === idx)
                 notes.push(m.tooltip);
     }
-    legend.update({ candle, notes, caption: o.type === 'heikinAshi' ? o.labels.heikinAshi : null }, o.labels, o.theme, o.priceDecimals, priceFormatter(o.priceDecimals, o.locale), o.locale);
+    const fmt = priceFormatter(o.priceDecimals, o.locale);
+    legend.update({
+        candle,
+        notes,
+        caption: o.type === 'heikinAshi' ? o.labels.heikinAshi : null,
+        indicators: candle ? indicatorReadings(s.indicators.entries, idx, fmt) : [],
+    }, o.labels, o.theme, o.priceDecimals, fmt, o.locale);
 }

package/dist/draw/controller.d.ts

@@ -0,0 +1,36 @@
+import type { Drawing, DrawingTool, Point } from '../core/drawings.ts';
+import type { PointerInput } from '../interact/gestures.ts';
+import type { Hit } from './geometry.ts';
+import type { Mapper } from './mapper.ts';
+import type { DrawDeps, DrawState } from './state.ts';
+export { createDrawState } from './state.ts';
+export type { DrawDeps, DrawProgress, DrawState } from './state.ts';
+export declare class DrawController {
+    readonly state: DrawState;
+    readonly deps: DrawDeps;
+    private pointer;
+    constructor(deps: DrawDeps, state: DrawState);
+    down: (p: PointerInput) => boolean;
+    move: (p: PointerInput) => boolean;
+    up: (p: PointerInput) => boolean;
+    cancel: (p: PointerInput) => void;
+    cursor: (x: number, y: number) => string;
+    selected(): Drawing | undefined;
+    setTool(tool: DrawingTool | null): void;
+    setColor(color: string): void;
+    replace(list: readonly unknown[]): void;
+    update(id: string, patch: {
+        text?: string;
+        color?: string;
+    }): void;
+    deleteSelected(): boolean;
+    clear(): void;
+    key(key: string): boolean;
+    finish(last: Point): void;
+    select(id: string | null): void;
+    edit(id: string, fn: (d: Drawing) => Drawing): void;
+    topHit(x: number, y: number, tol: number, m: Mapper): {
+        drawing: Drawing;
+        hit: Hit;
+    } | null;
+}

package/dist/draw/controller.js

@@ -0,0 +1,151 @@
+import { MAX_DRAWINGS, newDrawingId, pointsNeeded, sanitizeDrawings } from "../core/drawings.js";
+import { hitTest } from "./geometry.js";
+import { DrawPointer } from "./pointer.js";
+import { DEFAULT_NOTE } from "./state.js";
+export { createDrawState } from "./state.js";
+export class DrawController {
+    constructor(deps, state) {
+        this.down = (p) => this.pointer.down(p);
+        this.move = (p) => this.pointer.move(p);
+        this.up = (p) => this.pointer.up(p);
+        this.cancel = (p) => this.pointer.cancel(p);
+        this.cursor = (x, y) => this.pointer.cursor(x, y);
+        this.deps = deps;
+        this.state = state;
+        this.pointer = new DrawPointer(this);
+    }
+    selected() {
+        return this.deps.drawings().find((d) => d.id === this.state.selectedId);
+    }
+    setTool(tool) {
+        const s = this.state;
+        s.tool = tool;
+        s.pending = [];
+        s.preview = null;
+        s.measure = null;
+        this.pointer.reset();
+        if (tool !== null)
+            this.select(null);
+        this.deps.progress(tool === null ? null : { tool, placed: 0, needed: pointsNeeded(tool) });
+        this.deps.redraw();
+    }
+    setColor(color) {
+        this.state.color = color;
+        const d = this.selected();
+        if (d)
+            this.update(d.id, { color });
+    }
+    replace(list) {
+        this.deps.store(sanitizeDrawings(list));
+        this.setTool(null);
+        this.select(null);
+    }
+    update(id, patch) {
+        const list = this.deps.drawings();
+        if (!list.some((d) => d.id === id))
+            return;
+        const next = list.map((d) => (d.id === id ? { ...d, ...patch } : d));
+        this.deps.store(next);
+        this.deps.changed(next);
+        this.deps.redraw();
+    }
+    deleteSelected() {
+        const id = this.state.selectedId;
+        if (id === null)
+            return false;
+        const next = this.deps.drawings().filter((d) => d.id !== id);
+        this.deps.store(next);
+        this.select(null);
+        this.deps.changed(next);
+        this.deps.redraw();
+        return true;
+    }
+    clear() {
+        this.deps.store([]);
+        this.select(null);
+        this.deps.changed([]);
+        this.deps.redraw();
+    }
+    key(key) {
+        const s = this.state;
+        if (key === 'Escape') {
+            if (s.pending.length > 0 && s.tool) {
+                this.setTool(s.tool);
+                return true;
+            }
+            if (s.tool !== null) {
+                this.setTool(null);
+                return true;
+            }
+            if (s.measure !== null) {
+                s.measure = null;
+                this.deps.redraw();
+                return true;
+            }
+            if (s.selectedId !== null) {
+                this.select(null);
+                this.deps.redraw();
+                return true;
+            }
+            return false;
+        }
+        if (key === 'Delete' || key === 'Backspace')
+            return this.deleteSelected();
+        return false;
+    }
+    finish(last) {
+        const s = this.state;
+        const tool = s.tool;
+        if (!tool)
+            return;
+        const points = [...s.pending, last];
+        s.pending = [];
+        s.preview = null;
+        if (tool === 'measure') {
+            s.measure = { a: points[0], b: points[1] ?? last };
+            this.deps.progress({ tool, placed: 0, needed: 2 });
+            return;
+        }
+        const list = this.deps.drawings();
+        if (list.length >= MAX_DRAWINGS) {
+            this.setTool(null);
+            return;
+        }
+        const drawing = { id: newDrawingId(), type: tool, points, color: s.color };
+        if (tool === 'note')
+            drawing.text = DEFAULT_NOTE;
+        const next = [...list, drawing];
+        this.deps.store(next);
+        s.tool = null;
+        this.deps.progress(null);
+        this.select(drawing.id);
+        this.deps.changed(next);
+        if (tool === 'note')
+            this.deps.edit(drawing);
+    }
+    select(id) {
+        if (this.state.selectedId === id)
+            return;
+        this.state.selectedId = id;
+        this.deps.selection(id);
+    }
+    edit(id, fn) {
+        this.deps.store(this.deps.drawings().map((d) => (d.id === id ? fn(d) : d)));
+    }
+    topHit(x, y, tol, m) {
+        const list = this.deps.drawings();
+        const fontSize = this.deps.fontSize();
+        const sel = list.find((d) => d.id === this.state.selectedId);
+        if (sel) {
+            const hit = hitTest(sel, x, y, tol, true, m, fontSize);
+            if (hit)
+                return { drawing: sel, hit };
+        }
+        for (let i = list.length - 1; i >= 0; i--) {
+            const hit = hitTest(list[i], x, y, tol, false, m, fontSize);
+            if (hit)
+                return { drawing: list[i], hit };
+        }
+        return null;
+    }
+}

package/dist/draw/geometry.d.ts

@@ -0,0 +1,44 @@
+import type { Drawing } from '../core/drawings.ts';
+import type { Mapper } from './mapper.ts';
+export interface Px {
+    x: number;
+    y: number;
+}
+export interface Seg {
+    a: Px;
+    b: Px;
+}
+export interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface FibLine {
+    level: number;
+    price: number;
+    seg: Seg;
+}
+export interface Shape {
+    segments: Seg[];
+    box: Box | null;
+    fib: FibLine[];
+    note: {
+        box: Box;
+        pin: Px;
+    } | null;
+    handles: Px[];
+}
+export type Hit = {
+    handle: number;
+} | 'body';
+type Shaped = Pick<Drawing, 'type' | 'points' | 'text'>;
+export declare const noteSize: (text: string, fontSize: number) => {
+    w: number;
+    h: number;
+};
+export declare function distToSegment(p: Px, s: Seg): number;
+export declare function shapeOf(d: Shaped, m: Mapper, fontSize: number): Shape;
+export declare function measureBox(a: Px, b: Px): Box;
+export declare function hitTest(d: Shaped, x: number, y: number, tol: number, withHandles: boolean, m: Mapper, fontSize: number): Hit | null;
+export {};

package/dist/draw/geometry.js

@@ -0,0 +1,118 @@
+import { FIB_LEVELS } from "../core/drawings.js";
+export const noteSize = (text, fontSize) => ({
+    w: Math.max(24, Math.ceil(text.length * fontSize * 0.62) + 12),
+    h: fontSize + 10,
+});
+const NOTE_GAP = 8;
+export function distToSegment(p, s) {
+    const dx = s.b.x - s.a.x;
+    const dy = s.b.y - s.a.y;
+    const len2 = dx * dx + dy * dy;
+    const u = len2 === 0 ? 0 : Math.max(0, Math.min(1, ((p.x - s.a.x) * dx + (p.y - s.a.y) * dy) / len2));
+    return Math.hypot(p.x - (s.a.x + u * dx), p.y - (s.a.y + u * dy));
+}
+function extend(a, b, m) {
+    const { left, right, top, bottom } = m.bounds;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    if (Math.abs(dx) < 1e-6)
+        return { a, b: { x: a.x, y: dy >= 0 ? bottom + 1 : top - 1 } };
+    const x = dx > 0 ? right + 1 : left - 1;
+    return { a, b: { x, y: a.y + (dy / dx) * (x - a.x) } };
+}
+function boxOf(a, b) {
+    return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), w: Math.abs(b.x - a.x), h: Math.abs(b.y - a.y) };
+}
+function edgesOf(r) {
+    const tl = { x: r.x, y: r.y };
+    const tr = { x: r.x + r.w, y: r.y };
+    const br = { x: r.x + r.w, y: r.y + r.h };
+    const bl = { x: r.x, y: r.y + r.h };
+    return [
+        { a: tl, b: tr },
+        { a: tr, b: br },
+        { a: br, b: bl },
+        { a: bl, b: tl },
+    ];
+}
+const empty = () => ({ segments: [], box: null, fib: [], note: null, handles: [] });
+export function shapeOf(d, m, fontSize) {
+    const s = empty();
+    const px = d.points.map((p) => m.px(p));
+    const a = px[0];
+    const b = px[1];
+    if (!a)
+        return s;
+    const { left, right } = m.bounds;
+    switch (d.type) {
+        case 'hline':
+            s.segments.push({ a: { x: left, y: a.y }, b: { x: right, y: a.y } });
+            s.handles.push({ x: Math.min(right - 12, Math.max(left + 12, a.x)), y: a.y });
+            break;
+        case 'trend':
+            if (b)
+                s.segments.push({ a, b });
+            s.handles.push(...px);
+            break;
+        case 'ray':
+            if (b)
+                s.segments.push(extend(a, b, m));
+            s.handles.push(...px);
+            break;
+        case 'rect':
+            if (b) {
+                s.box = boxOf(a, b);
+                s.segments.push(...edgesOf(s.box));
+            }
+            s.handles.push(...px);
+            break;
+        case 'fib':
+            if (b) {
+                const x1 = Math.min(a.x, b.x);
+                for (const level of FIB_LEVELS) {
+                    const y = b.y + (a.y - b.y) * level;
+                    s.fib.push({
+                        level,
+                        price: d.points[1].price + (d.points[0].price - d.points[1].price) * level,
+                        seg: { a: { x: x1, y }, b: { x: right, y } },
+                    });
+                }
+                s.segments.push({ a, b });
+            }
+            s.handles.push(...px);
+            break;
+        case 'note': {
+            const size = noteSize(d.text ?? '', fontSize);
+            const x = a.x + NOTE_GAP + size.w > right ? a.x - NOTE_GAP - size.w : a.x + NOTE_GAP;
+            const y = a.y - NOTE_GAP - size.h < m.bounds.top ? a.y + NOTE_GAP : a.y - NOTE_GAP - size.h;
+            const box = { x, y, w: size.w, h: size.h };
+            s.note = { box, pin: a };
+            s.handles.push(a);
+            break;
+        }
+    }
+    return s;
+}
+export function measureBox(a, b) {
+    return boxOf(a, b);
+}
+const inside = (p, r, pad) => p.x >= r.x - pad && p.x <= r.x + r.w + pad && p.y >= r.y - pad && p.y <= r.y + r.h + pad;
+export function hitTest(d, x, y, tol, withHandles, m, fontSize) {
+    const shape = shapeOf(d, m, fontSize);
+    const p = { x, y };
+    if (withHandles) {
+        for (let i = shape.handles.length - 1; i >= 0; i--) {
+            if (Math.hypot(shape.handles[i].x - x, shape.handles[i].y - y) <= tol)
+                return { handle: i };
+        }
+    }
+    for (const seg of shape.segments)
+        if (distToSegment(p, seg) <= tol)
+            return 'body';
+    for (const f of shape.fib)
+        if (distToSegment(p, f.seg) <= tol)
+            return 'body';
+    if (shape.note && (inside(p, shape.note.box, tol / 2) || Math.hypot(shape.note.pin.x - x, shape.note.pin.y - y) <= tol))
+        return 'body';
+    return null;
+}

package/dist/draw/mapper.d.ts

@@ -0,0 +1,30 @@
+import type { CandleSeries } from '../core/series.ts';
+import type { PriceScale } from '../core/priceScale.ts';
+import type { Viewport } from '../core/viewport.ts';
+import type { Point } from '../core/drawings.ts';
+export interface Bounds {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface MapperInput {
+    series: CandleSeries;
+    vp: Viewport;
+    scale: PriceScale;
+    intervalMs: number;
+    bounds: Bounds;
+}
+export interface Mapper {
+    bounds: Bounds;
+    indexOfTime(t: number): number;
+    timeOfIndex(i: number): number;
+    px(p: Point): {
+        x: number;
+        y: number;
+    };
+    point(x: number, y: number): Point;
+    indexAtX(x: number): number;
+    priceAtY(y: number): number;
+}
+export declare function makeMapper(m: MapperInput): Mapper;

package/dist/draw/mapper.js

@@ -0,0 +1,32 @@
+export function makeMapper(m) {
+    const { series, vp, scale, intervalMs, bounds } = m;
+    const last = series.count - 1;
+    const indexOfTime = (t) => {
+        if (last < 0)
+            return 0;
+        const i = series.indexAtTime(t);
+        if (i < 0)
+            return (t - series.timeAt(0)) / intervalMs;
+        const frac = (t - series.timeAt(i)) / intervalMs;
+        return i === last ? last + frac : i + Math.min(1, frac);
+    };
+    const timeOfIndex = (i) => {
+        if (last < 0)
+            return Math.round(i) * intervalMs;
+        if (i <= 0)
+            return series.timeAt(0) + i * intervalMs;
+        if (i >= last)
+            return series.timeAt(last) + (i - last) * intervalMs;
+        const lo = Math.floor(i);
+        return series.timeAt(lo) + (i - lo) * intervalMs;
+    };
+    return {
+        bounds,
+        indexOfTime,
+        timeOfIndex,
+        px: (p) => ({ x: vp.x(indexOfTime(p.t)), y: scale.y(p.price) }),
+        point: (x, y) => ({ t: timeOfIndex(Math.round(vp.indexAt(x))), price: scale.priceAt(y) }),
+        indexAtX: (x) => vp.indexAt(x),
+        priceAtY: (y) => scale.priceAt(y),
+    };
+}

package/dist/draw/pointer.d.ts

@@ -0,0 +1,17 @@
+import type { PointerInput } from '../interact/gestures.ts';
+import type { DrawController } from './controller.ts';
+export declare class DrawPointer {
+    private c;
+    private drag;
+    private lastTap;
+    constructor(controller: DrawController);
+    reset(): void;
+    cursor(x: number, y: number): string;
+    down(p: PointerInput): boolean;
+    move(p: PointerInput): boolean;
+    up(p: PointerInput): boolean;
+    cancel(p: PointerInput): void;
+    private downTool;
+    private tapped;
+    private inPlot;
+}

package/dist/draw/pointer.js

@@ -0,0 +1,144 @@
+import { pointsNeeded } from "../core/drawings.js";
+import { DRAG_SLOP, MOUSE_TOLERANCE, NOTE_DOUBLE_MS, TOUCH_TOLERANCE } from "./state.js";
+export class DrawPointer {
+    constructor(controller) {
+        this.drag = null;
+        this.lastTap = null;
+        this.c = controller;
+    }
+    reset() {
+        this.drag = null;
+    }
+    cursor(x, y) {
+        if (this.c.state.tool)
+            return 'crosshair';
+        const m = this.c.deps.mapper();
+        return m && this.c.topHit(x, y, TOUCH_TOLERANCE / 2, m) ? 'pointer' : '';
+    }
+    down(p) {
+        if (p.type === 'mouse' && p.button !== 0)
+            return false;
+        const m = this.c.deps.mapper();
+        if (!m || !this.inPlot(p, m))
+            return false;
+        if (this.c.state.tool)
+            return this.downTool(p, m);
+        const tol = p.type === 'mouse' ? MOUSE_TOLERANCE : TOUCH_TOLERANCE;
+        const found = this.c.topHit(p.x, p.y, tol, m);
+        if (!found) {
+            if (this.c.state.selectedId !== null)
+                this.c.select(null);
+            this.c.deps.redraw();
+            return false;
+        }
+        this.c.select(found.drawing.id);
+        if (typeof found.hit === 'object') {
+            this.drag = { kind: 'handle', id: p.id, drawing: found.drawing.id, index: found.hit.handle, moved: false };
+        }
+        else {
+            this.drag = { kind: 'move', id: p.id, origin: found.drawing, idx: m.indexAtX(p.x), price: m.priceAtY(p.y), moved: false, x: p.x, y: p.y };
+        }
+        this.c.deps.redraw();
+        return true;
+    }
+    move(p) {
+        const m = this.c.deps.mapper();
+        if (!m)
+            return false;
+        const d = this.drag;
+        const s = this.c.state;
+        if (!d || d.id !== p.id) {
+            if (s.pending.length > 0) {
+                s.preview = m.point(p.x, p.y);
+                this.c.deps.redraw();
+            }
+            return false;
+        }
+        switch (d.kind) {
+            case 'create':
+                if (Math.hypot(p.x - d.x, p.y - d.y) > DRAG_SLOP)
+                    d.moved = true;
+                s.preview = m.point(p.x, p.y);
+                break;
+            case 'handle':
+                d.moved = true;
+                this.c.edit(d.drawing, (q) => ({ ...q, points: q.points.map((pt, i) => (i === d.index ? m.point(p.x, p.y) : pt)) }));
+                break;
+            case 'move': {
+                if (Math.hypot(p.x - d.x, p.y - d.y) > 2)
+                    d.moved = true;
+                const di = m.indexAtX(p.x) - d.idx;
+                const dp = m.priceAtY(p.y) - d.price;
+                const flat = d.origin.type === 'hline';
+                this.c.edit(d.origin.id, (q) => ({
+                    ...q,
+                    points: d.origin.points.map((pt) => ({ t: flat ? pt.t : m.timeOfIndex(m.indexOfTime(pt.t) + di), price: pt.price + dp })),
+                }));
+                break;
+            }
+            default:
+                break;
+        }
+        this.c.deps.redraw();
+        return true;
+    }
+    up(p) {
+        const d = this.drag;
+        const m = this.c.deps.mapper();
+        if (!d || d.id !== p.id)
+            return false;
+        this.drag = null;
+        if (d.kind === 'create') {
+            if (d.moved && m)
+                this.c.finish(m.point(p.x, p.y));
+            this.c.deps.redraw();
+        }
+        else if (d.kind === 'handle' || d.kind === 'move') {
+            if (d.moved)
+                this.c.deps.changed(this.c.deps.drawings());
+            else
+                this.tapped(d.kind === 'move' ? d.origin.id : d.drawing);
+        }
+        return true;
+    }
+    cancel(p) {
+        if (this.drag && this.drag.id === p.id)
+            this.drag = null;
+    }
+    downTool(p, m) {
+        const s = this.c.state;
+        const tool = s.tool;
+        const pt = m.point(p.x, p.y);
+        if (s.pending.length === 0) {
+            if (pointsNeeded(tool) === 1) {
+                this.c.finish(pt);
+                this.drag = { kind: 'consumed', id: p.id };
+                return true;
+            }
+            s.pending = [pt];
+            s.measure = null;
+            s.preview = pt;
+            this.drag = { kind: 'create', id: p.id, x: p.x, y: p.y, moved: false };
+            this.c.deps.progress({ tool, placed: 1, needed: 2 });
+            this.c.deps.redraw();
+            return true;
+        }
+        this.c.finish(pt);
+        this.drag = { kind: 'consumed', id: p.id };
+        return true;
+    }
+    tapped(id) {
+        const now = this.c.deps.now();
+        const d = this.c.deps.drawings().find((q) => q.id === id);
+        if (d && d.type === 'note' && this.lastTap && this.lastTap.id === id && now - this.lastTap.t <= NOTE_DOUBLE_MS) {
+            this.lastTap = null;
+            this.c.deps.edit(d);
+            return;
+        }
+        this.lastTap = { id, t: now };
+    }
+    inPlot(p, m) {
+        const b = m.bounds;
+        return p.x >= b.left && p.x <= b.right && p.y >= b.top && p.y <= b.bottom;
+    }
+}

package/dist/draw/state.d.ts

@@ -0,0 +1,61 @@
+import type { Drawing, DrawingTool, Point } from '../core/drawings.ts';
+import type { Mapper } from './mapper.ts';
+export declare const MOUSE_TOLERANCE = 6;
+export declare const TOUCH_TOLERANCE = 14;
+export declare const DRAG_SLOP = 6;
+export declare const NOTE_DOUBLE_MS = 350;
+export declare const DEFAULT_NOTE = "Note";
+export interface DrawState {
+    tool: DrawingTool | null;
+    pending: Point[];
+    preview: Point | null;
+    selectedId: string | null;
+    measure: {
+        a: Point;
+        b: Point;
+    } | null;
+    color: string;
+}
+export interface DrawProgress {
+    tool: DrawingTool;
+    placed: number;
+    needed: number;
+}
+export interface DrawDeps {
+    drawings(): Drawing[];
+    store(next: Drawing[]): void;
+    mapper(): Mapper | null;
+    fontSize(): number;
+    now(): number;
+    redraw(): void;
+    changed(list: readonly Drawing[]): void;
+    selection(id: string | null): void;
+    progress(info: DrawProgress | null): void;
+    edit(d: Drawing): void;
+}
+export type Drag = {
+    kind: 'create';
+    id: number;
+    x: number;
+    y: number;
+    moved: boolean;
+} | {
+    kind: 'consumed';
+    id: number;
+} | {
+    kind: 'handle';
+    id: number;
+    drawing: string;
+    index: number;
+    moved: boolean;
+} | {
+    kind: 'move';
+    id: number;
+    origin: Drawing;
+    idx: number;
+    price: number;
+    moved: boolean;
+    x: number;
+    y: number;
+};
+export declare function createDrawState(color: string): DrawState;

package/dist/draw/state.js

@@ -0,0 +1,8 @@
+export const MOUSE_TOLERANCE = 6;
+export const TOUCH_TOLERANCE = 14;
+export const DRAG_SLOP = 6;
+export const NOTE_DOUBLE_MS = 350;
+export const DEFAULT_NOTE = 'Note';
+export function createDrawState(color) {
+    return { tool: null, pending: [], preview: null, selectedId: null, measure: null, color };
+}

package/dist/drawApi.d.ts

@@ -0,0 +1,20 @@
+import type { Emitter } from './core/emitter.ts';
+import type { Chart, ChartEvents } from './core/types.ts';
+import { DrawController } from './draw/controller.ts';
+import type { ChartState } from './chartState.ts';
+import type { Frame } from './render/frame.ts';
+export interface DrawApiDeps {
+    s: ChartState;
+    root: HTMLElement;
+    events: Emitter<ChartEvents>;
+    invalidate(layer: 'main' | 'overlay'): void;
+    lastFrame(): Frame | null;
+    now(): number;
+    isDestroyed(): boolean;
+}
+type DrawMethods = Pick<Chart, 'setDrawingTool' | 'setDrawings' | 'getDrawings' | 'updateDrawing' | 'deleteSelected' | 'clearDrawings' | 'setDrawingColor'>;
+export declare function createDrawApi(d: DrawApiDeps): {
+    controller: DrawController;
+    methods: DrawMethods;
+};
+export {};