@funnest/charts 0.6.9 → 0.6.12

package/dist/chart.d.ts

@@ -6,6 +6,7 @@ import { type Drawing, type DrawingDefinition, type DrawingType } from './object
 import { type AlertLineOptions, type ExecutionMarker, type LineHandle, type OrderLineOptions, type PositionLineOptions, type TradingLabelOptions } from './objects/trading';
 import { type ChartSettings, type ChartState } from './settings';
 import { type TradingAdapter } from './objects/trading-sync';
+import type { ChartOverlay } from './objects/types';
 import { type ChartType, type CrosshairInfo, type PaneId } from './render/renderer';
 import { type ThemeTokens } from './theme';
 import type { Bar, ConnectionState, Datafeed, Quote, Resolution, SymbolInfo, TickSize } from './types';
@@ -166,6 +167,7 @@ export declare class Chart {
     private readonly interaction;
     private readonly cleanups;
     private readonly drawings;
+    private readonly overlays;
     private readonly trading;
     private readonly tradingSync;
     private tooltipKey;
@@ -411,6 +413,14 @@ export declare class Chart {
     addOrderLine(options: OrderLineOptions): LineHandle<OrderLineOptions>;
     /** Price alert line (dotted, gray, "알림" label). Pass `onMove` to make it draggable and `onCancel` for an ×. */
     addAlertLine(options: AlertLineOptions): LineHandle<AlertLineOptions>;
+    /**
+     * Paints `overlay` on the price pane every frame (see ChartOverlay). `redraw()` asks for a
+     * new frame after its data changed; `remove()` takes it off.
+     */
+    addOverlay(overlay: ChartOverlay): {
+        redraw(): void;
+        remove(): void;
+    };
     /** Fill markers (▲ buy under the bar, ▼ sell above; ⚡ at the price for liquidations). Replaces the previous set. */
     setExecutions(markers: readonly ExecutionMarker[]): void;
     /** What position/order/alert line labels show and where (direction, price, size, P&L, ×, alignment, line width). */

package/dist/index.d.ts

@@ -13,9 +13,9 @@ export type { FormatPriceOptions } from './price';
 export { decimalsOf, formatCompact, formatPrice, krxTickSize, resolveTickSize, roundToTick } from './price';
 export { isIntradayResolution, resolutionToMs } from './resolution';
 export type { ChartType } from './render/renderer';
-export type { BuiltinDrawingType, Drawing, DrawingDefinition, DrawingGeometry, DrawingPoint, DrawingRenderContext, DrawingType, } from './objects/drawings';
+export type { BuiltinDrawingType, Drawing, DrawingDefinition, DrawingGeometry, DrawingPoint, DrawingRenderContext, DrawingStyle, DrawingColorSlot, DrawingType, } from './objects/drawings';
 export { BUILTIN_DRAWINGS, distToSegment, FIB_LEVELS } from './objects/drawings';
-export type { PaneCoords } from './objects/types';
+export type { ChartOverlay, ObjectRenderContext, PaneCoords } from './objects/types';
 export type { Painter } from './render/painter';
 export type { Palette } from './render/renderer';
 export { snapToOhlc } from './objects/magnet';

package/dist/index.js

@@ -1221,6 +1221,7 @@ var IndicatorManager = class {
 };
 
 // src/objects/drawings.ts
+var DASHES = { solid: [], dashed: [6, 4], dotted: [1.5, 3] };
 var FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
 var FIB_COLORS = ["#8B95A1", "#F04452", "#FF9F0A", "#12B886", "#3182F6", "#7048E8", "#8B95A1"];
 var HANDLE_RADIUS = 5;
@@ -1240,7 +1241,7 @@ var BUILTIN_DRAWINGS = [
     group: "line",
     clicks: 2,
     distance: (g, x, y) => distToSegment(x, y, ...p0(g), ...p1(g)),
-    render: (_d, { painter, color, ...g }) => painter.line(...p0(g), ...p1(g), color, 2)
+    render: (_d, { painter, color, ...g }) => painter.line(...p0(g), ...p1(g), color, g.width(2), g.dash())
   },
   {
     type: "horizontal",
@@ -1252,7 +1253,9 @@ var BUILTIN_DRAWINGS = [
     distance: (g, _x, y) => Math.abs(y - p0(g)[1]),
     render: (d, { painter, color, coords, badge, ...g }) => {
       const y = p0(g)[1];
-      painter.hLine(y, 0, coords.plotWidth, color);
+      const dash = g.dash();
+      if (g.width(1) === 1 && !dash.length) painter.hLine(y, 0, coords.plotWidth, color);
+      else painter.line(0, y, coords.plotWidth, y, color, g.width(1), dash);
       badge(y, coords.formatPrice(d.points[0].price), color);
     }
   },
@@ -1262,6 +1265,7 @@ var BUILTIN_DRAWINGS = [
     group: "fib",
     section: { ko: "\uD53C\uBCF4\uB098\uCE58", en: "Fibonacci" },
     clicks: 2,
+    colors: FIB_LEVELS.map((level, i) => ({ key: String(level), name: { ko: String(level), en: String(level) }, color: FIB_COLORS[i] })),
     distance: (g, x, y) => {
       const [x1, y1] = p0(g);
       const [x2, y2] = p1(g);
@@ -1282,7 +1286,7 @@ var BUILTIN_DRAWINGS = [
       FIB_LEVELS.forEach((level, i) => {
         const price = b + (a - b) * level;
         const y = c.priceToY(price);
-        const levelColor = d.color ?? FIB_COLORS[i];
+        const levelColor = d.style?.colors?.[String(level)] ?? d.color ?? FIB_COLORS[i];
         if (i > 0) {
           const prevY = c.priceToY(b + (a - b) * FIB_LEVELS[i - 1]);
           ctx.save();
@@ -1314,6 +1318,7 @@ var DrawingManager = class {
   tool = null;
   selectedId = null;
   draft = null;
+  freehandLast = null;
   drag = null;
   get selected() {
     return this.drawings.find((d) => d.id === this.selectedId) ?? null;
@@ -1368,6 +1373,13 @@ var DrawingManager = class {
     const def = this.tool ? this.registry.get(this.tool) : void 0;
     if (!def) return;
     const point = c.pointAt(x, y);
+    if (def.freehand) {
+      if (this.draft) return this.finish();
+      this.draft = { drawing: { id: newId("d"), type: def.type, points: [point] }, placed: [point] };
+      this.freehandLast = [x, y];
+      this.onChange("preview");
+      return;
+    }
     if (!this.draft) {
       const placed = [point];
       this.draft = { drawing: { id: newId("d"), type: def.type, points: this.expand(def, placed, c) }, placed };
@@ -1384,11 +1396,25 @@ var DrawingManager = class {
     const draft = this.draft;
     const def = draft && this.registry.get(draft.drawing.type);
     if (!draft || !def) return;
+    if (def.freehand) {
+      const last = this.freehandLast;
+      if (last && Math.hypot(x - last[0], y - last[1]) < 3) return;
+      if (draft.drawing.points.length >= 4e3) return;
+      this.freehandLast = [x, y];
+      draft.drawing.points.push(c.pointAt(x, y));
+      this.onChange("preview");
+      return;
+    }
     draft.drawing.points = this.expand(def, [...draft.placed, c.pointAt(x, y)], c);
     this.onChange("preview");
   }
   /** Pointer released: a drag since the first point places the next one (drag-to-draw). */
   releaseAt(c, x, y, moved) {
+    const def = this.draft && this.registry.get(this.draft.drawing.type);
+    if (def?.freehand) {
+      if (moved && this.draft.drawing.points.length > 1) this.finish();
+      return;
+    }
     if (this.draft && moved) this.createAt(c, x, y);
   }
   finish() {
@@ -1407,7 +1433,7 @@ var DrawingManager = class {
   handles(c, d) {
     const def = this.registry.get(d.type);
     const g = this.geometry(c, d);
-    return def?.handles ? def.handles(g) : g.points;
+    return def?.handles ? def.handles(g) : def?.freehand ? [] : g.points;
   }
   hitTest(c, x, y, tolerance) {
     const selected = this.selected;
@@ -1426,6 +1452,7 @@ var DrawingManager = class {
     const d = this.drawings.find((x2) => x2.id === id);
     if (!d) return;
     this.select(id);
+    if (d.style?.locked) return;
     this.drag = { id, part, x, y, origin: this.geometry(c, d).points };
   }
   dragTo(c, x, y) {
@@ -1448,21 +1475,33 @@ var DrawingManager = class {
     this.drag = null;
   }
   // ── Rendering ─────────────────────────────────────────────────────
-  render(rc, badges) {
+  render(rc, badges, bars = [], barIndexAt = () => -1) {
     const all = this.draft ? [...this.drawings, this.draft.drawing] : this.drawings;
     const c = rc.coords;
     for (const d of all) {
       const def = this.registry.get(d.type);
       if (!def) continue;
       const color = d.color ?? rc.palette.accent;
-      def.render(d, {
-        ...this.geometry(c, d),
-        painter: rc.painter,
-        palette: rc.palette,
-        color,
-        badge: (y, text, bg, fg = "#FFFFFF") => badges.push({ y, text, bg, fg })
-      });
-      if (d.id === this.selectedId || d === this.draft?.drawing) {
+      const style = d.style ?? {};
+      rc.painter.ctx.save();
+      try {
+        def.render(d, {
+          ...this.geometry(c, d),
+          painter: rc.painter,
+          palette: rc.palette,
+          color,
+          style,
+          colorOf: (key) => style.colors?.[key] ?? d.color ?? def.colors?.find((c2) => c2.key === key)?.color ?? color,
+          width: (fallback) => Math.min(8, Math.max(0.5, style.width ?? fallback)),
+          dash: (fallback = []) => style.dash ? DASHES[style.dash] : [...fallback],
+          bars,
+          barIndexAt,
+          badge: (y, text, bg, fg = "#FFFFFF") => badges.push({ y, text, bg, fg })
+        });
+      } finally {
+        rc.painter.ctx.restore();
+      }
+      if (d.id === this.selectedId && !style.locked || d === this.draft?.drawing) {
         for (const [px, py] of this.handles(c, d)) rc.painter.circle(px, py, HANDLE_RADIUS, rc.palette.background, color);
       }
     }
@@ -2409,8 +2448,17 @@ function drawMain(layer, m) {
   ctx.clip();
   const o = m.objects;
   const rc = { painter: p, coords: o.coords, palette: pal };
+  for (const overlay of o.overlays) {
+    ctx.save();
+    try {
+      overlay.render(rc);
+    } catch (error) {
+      console.error("[fnc] overlay", error);
+    }
+    ctx.restore();
+  }
   o.trading.render(rc, m.bars, o.barIndexAt, (i) => m.timeScale.indexToX(i), o.tradingLabels, badges);
-  o.drawings.render(rc, badges);
+  o.drawings.render(rc, badges, m.bars, o.barIndexAt);
   ctx.restore();
   const last = f.settings.lastPriceLine ? m.bars[m.bars.length - 1] : void 0;
   const lastColor = last && last.close >= last.open ? pal.up : pal.down;
@@ -2747,6 +2795,7 @@ var Chart = class {
   interaction;
   cleanups = [];
   drawings;
+  overlays = [];
   trading;
   tradingSync;
   tooltipKey = null;
@@ -3723,6 +3772,22 @@ var Chart = class {
   addAlertLine(options) {
     return this.trading.addAlert(options);
   }
+  /**
+   * Paints `overlay` on the price pane every frame (see ChartOverlay). `redraw()` asks for a
+   * new frame after its data changed; `remove()` takes it off.
+   */
+  addOverlay(overlay) {
+    this.overlays.push(overlay);
+    this.invalidate();
+    return {
+      redraw: () => this.invalidate(),
+      remove: () => {
+        const i = this.overlays.indexOf(overlay);
+        if (i >= 0) this.overlays.splice(i, 1);
+        this.invalidate();
+      }
+    };
+  }
   /** Fill markers (▲ buy under the bar, ▼ sell above; ⚡ at the price for liquidations). Replaces the previous set. */
   setExecutions(markers) {
     this.trading.setExecutions(markers);
@@ -3829,6 +3894,7 @@ var Chart = class {
       replaySelecting: this.replaySelecting,
       objects: {
         coords: this.paneCoords(),
+        overlays: this.overlays,
         drawings: this.drawings,
         trading: this.trading,
         tradingLabels: TRADING_LABELS[this.locale],

package/dist/objects/drawings.d.ts

@@ -1,3 +1,4 @@
+import type { Bar } from '../types';
 import type { Locale } from '../model/time-format';
 import type { Painter } from '../render/painter';
 import type { Palette } from '../render/renderer';
@@ -11,11 +12,37 @@ export interface DrawingPoint {
     time: number;
     price: number;
 }
+/** How a drawing looks beyond its color (all optional; tools read them through the render context). */
+export interface DrawingStyle {
+    /** Main line width in CSS px (1–4). */
+    width?: number;
+    /** Main line pattern. */
+    dash?: 'solid' | 'dashed' | 'dotted';
+    /** Text tools (and notes on others): what it says. */
+    text?: string;
+    /** Text size in CSS px. */
+    fontSize?: number;
+    /** Can't be dragged or edited until unlocked (still selectable). */
+    locked?: boolean;
+    /** Colors of the tool's parts (`DrawingDefinition.colors` keys), where set apart from the rest. */
+    colors?: Record<string, string>;
+}
+/**
+ * A part of a tool with its own color (a Fibonacci level, a position's target zone…). Its color
+ * is `style.colors[key]`, else the drawing's color (picking one recolors every part), else `color`.
+ */
+export interface DrawingColorSlot {
+    key: string;
+    name: Record<Locale, string>;
+    /** Default color. */
+    color: string;
+}
 export interface Drawing {
     id: string;
     type: DrawingType;
     points: DrawingPoint[];
     color?: string;
+    style?: DrawingStyle;
 }
 /** What a drawing definition gets to measure and paint itself. Pixels are relative to the price pane. */
 export interface DrawingGeometry {
@@ -28,6 +55,18 @@ export interface DrawingRenderContext extends DrawingGeometry {
     palette: Palette;
     /** `drawing.color`, or the theme accent. */
     color: string;
+    /** `drawing.style` (empty object when none). */
+    style: DrawingStyle;
+    /** A part's color (see `DrawingDefinition.colors`): its own, else the drawing's, else the default. */
+    colorOf(key: string): string;
+    /** The main line width: the drawing's style, else the tool's default. */
+    width(fallback: number): number;
+    /** The main line dash pattern for canvas: the drawing's style, else the tool's default. */
+    dash(fallback?: readonly number[]): number[];
+    /** The chart's bars (oldest first), for tools that measure them (VWAP, volume profile…). */
+    bars: readonly Bar[];
+    /** Index of the last bar at or before `time` (-1 before the first). */
+    barIndexAt(time: number): number;
     /** Adds a price-axis badge (drawn above the axis labels, clamped to the pane). */
     badge(y: number, text: string, bg: string, fg?: string): void;
 }
@@ -61,6 +100,15 @@ export interface DrawingDefinition {
     constrain?(points: DrawingPoint[], index: number): DrawingPoint[];
     /** Drag handle positions; dragging handle i moves point i. Default: the points. */
     handles?(geometry: DrawingGeometry): [number, number][];
+    /**
+     * Drawn by dragging: every pointer move adds a point (a brush); releasing (or clicking again)
+     * finishes it. `clicks` is ignored.
+     */
+    freehand?: boolean;
+    /** Has text (`style.text`): the widget offers a text field for it when selected. */
+    text?: boolean;
+    /** Parts with their own colors: the widget lets each be recolored (read them with `rc.colorOf`). */
+    colors?: DrawingColorSlot[];
     /** Distance in px from (x, y) to the shape, for hit testing. */
     distance(geometry: DrawingGeometry, x: number, y: number): number;
     render(drawing: Drawing, rc: DrawingRenderContext): void;
@@ -84,6 +132,7 @@ export declare class DrawingManager {
     tool: DrawingType | null;
     selectedId: string | null;
     private draft;
+    private freehandLast;
     private drag;
     constructor(onChange: (change: DrawingsChange) => void, registry?: Map<string, DrawingDefinition>);
     get selected(): Drawing | null;
@@ -109,5 +158,5 @@ export declare class DrawingManager {
     beginDrag(c: PaneCoords, id: string, part: 'body' | number, x: number, y: number): void;
     dragTo(c: PaneCoords, x: number, y: number): void;
     endDrag(moved: boolean): void;
-    render(rc: ObjectRenderContext, badges: AxisBadge[]): void;
+    render(rc: ObjectRenderContext, badges: AxisBadge[], bars?: readonly Bar[], barIndexAt?: (time: number) => number): void;
 }

package/dist/objects/types.d.ts

@@ -22,6 +22,14 @@ export interface ObjectRenderContext {
     coords: PaneCoords;
     palette: Palette;
 }
+/**
+ * Something an app paints on the price pane every frame (a liquidation map, volume profile…),
+ * clipped to the pane, above the candles and indicators, under trading lines and drawings.
+ * Added with chart.addOverlay(); it reads its own data and the pane's coordinates.
+ */
+export interface ChartOverlay {
+    render(rc: ObjectRenderContext): void;
+}
 export type ObjectHit = {
     kind: 'drawing';
     id: string;

package/dist/render/renderer.d.ts

@@ -5,7 +5,7 @@ import type { Bar } from '../types';
 import type { CanvasLayer } from './canvas-layer';
 import type { DrawingManager } from '../objects/drawings';
 import type { TradingLabels, TradingLayer } from '../objects/trading';
-import type { PaneCoords } from '../objects/types';
+import type { ChartOverlay, PaneCoords } from '../objects/types';
 import type { IndicatorOutput } from '../indicators/definitions';
 import type { ChartSettings } from '../settings';
 export type ChartType = 'candles' | 'line' | 'area';
@@ -95,6 +95,7 @@ export interface RenderModel {
     replaySelecting?: boolean;
     objects: {
         coords: PaneCoords;
+        overlays: readonly ChartOverlay[];
         drawings: DrawingManager;
         trading: TradingLayer;
         tradingLabels: TradingLabels;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts",
-  "version": "0.6.9",
+  "version": "0.6.12",
   "description": "Canvas charting engine for financial charts",
   "keywords": [
     "chart",