@funnest/charts 0.6.0 → 0.6.1

package/dist/chart.d.ts

@@ -99,8 +99,23 @@ export interface ChartEvents {
     };
     comparesChange: CompareInfo[];
     replayChange: ReplayStatus;
+    /**
+     * Right-click on the chart (mouse only). While anything listens, the browser's own menu is
+     * suppressed — the widget shows its menu (undo, horizontal line here, reset…).
+     */
+    contextMenu: ChartContextMenu;
     error: unknown;
 }
+export interface ChartContextMenu {
+    /** Pixels relative to the chart element. */
+    x: number;
+    y: number;
+    pane: PaneId;
+    /** Price under the pointer (tick-rounded) when it's over the price pane, else null. */
+    price: number | null;
+    /** Time of the bar under the pointer, or null past the data. */
+    time: number | null;
+}
 export interface ChartPaneLayout {
     id: PaneId;
     kind: 'main' | 'volume' | 'indicator';
@@ -205,6 +220,9 @@ export declare class Chart {
     private percentBaseIndex;
     private replayState;
     private replaySelecting;
+    /** Pane height weights the user set by dragging borders (unset panes use PANE_WEIGHT). */
+    private readonly paneWeights;
+    private paneWeightTotal;
     constructor(container: HTMLElement, options?: ChartOptions);
     /** Replaces all bars and scrolls to the latest. */
     setData(bars: readonly Bar[]): void;
@@ -296,6 +314,8 @@ export declare class Chart {
     /** Restores drawings (e.g. from storage). */
     setDrawings(drawings: readonly Drawing[]): void;
     updateDrawing(id: string, patch: Partial<Omit<Drawing, 'id'>>): void;
+    /** Adds a drawing (e.g. a horizontal line at a price) and selects it. Returns its id. */
+    addDrawing(drawing: Omit<Drawing, 'id'>): string;
     removeDrawing(id: string): void;
     clearDrawings(): void;
     get selectedDrawing(): Drawing | null;
@@ -317,6 +337,13 @@ export declare class Chart {
     indicatorDefinition(type: IndicatorType): IndicatorDefinition | undefined;
     /** Built-in and custom drawing tools, in drawing-bar order. */
     drawingDefinitions(): DrawingDefinition[];
+    /**
+     * Moves the border above pane `index` (1 = between the price pane and the next one) by `dy` px.
+     * The two neighbouring panes trade height; the rest keep theirs. Users do this by dragging.
+     */
+    resizePane(index: number, dy: number): void;
+    /** Back to the default pane heights. */
+    resetPaneSizes(): void;
     get canUndo(): boolean;
     get canRedo(): boolean;
     /** Reverts the last drawing or indicator change. */

package/dist/events.d.ts

@@ -3,5 +3,6 @@ export declare class Emitter<Events extends object> {
     private readonly listeners;
     on<K extends keyof Events>(event: K, listener: Listener<Events[K]>): () => void;
     emit<K extends keyof Events>(event: K, payload: Events[K]): void;
+    has<K extends keyof Events>(event: K): boolean;
     clear(): void;
 }

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Chart, createChart, fallbackResolution } from './chart';
 export { DEFAULT_CHART_SETTINGS, parseChartState } from './settings';
 export type { ChartSettings, ChartState } from './settings';
-export type { ChartEvents, ChartLayout, ChartOptions, ChartPaneLayout, CompareInfo, IndicatorLegendItem, ReplayStatus } from './chart';
+export type { ChartContextMenu, ChartEvents, ChartLayout, ChartOptions, ChartPaneLayout, CompareInfo, IndicatorLegendItem, ReplayStatus } from './chart';
 export type { PriceScaleMode } from './model/price-scale';
 export type { CrosshairInfo, PaneId } from './render/renderer';
 export type { Locale } from './model/time-format';

package/dist/index.js

@@ -12,6 +12,9 @@ var Emitter = class {
     if (!set) return;
     for (const listener of set) listener(payload);
   }
+  has(event) {
+    return (this.listeners.get(event)?.size ?? 0) > 0;
+  }
   clear() {
     this.listeners.clear();
   }
@@ -102,6 +105,9 @@ var Interaction = class {
       case "timeAxis":
         this.mode = "timeScale";
         break;
+      case "paneBorder":
+        this.mode = "paneResize";
+        break;
       case "plot": {
         if (this.host.toolActive()) {
           this.mode = "draw";
@@ -173,6 +179,9 @@ var Interaction = class {
       case "timeScale":
         this.host.zoomTime(this.host.plotWidth(), Math.exp((p.x - this.last.x) * AXIS_DRAG_SPEED));
         break;
+      case "paneResize":
+        if (this.region.border) this.host.resizePane(this.region.border, p.y - this.last.y);
+        break;
     }
     this.last = p;
   }
@@ -187,7 +196,7 @@ var Interaction = class {
     }
     if (this.mode === "draw") this.host.drawRelease(p.x, p.y, this.moved);
     if (this.mode === "object") this.host.objectUp(this.moved);
-    const tapModes = ["pending", "priceScale", "timeScale"];
+    const tapModes = ["pending", "priceScale", "timeScale", "paneResize"];
     if (this.touch && !this.moved && tapModes.includes(this.mode)) this.handleTap(p);
     if (this.mode === "pan") this.startKinetic();
     if (this.mode === "crosshair") this.host.clearCrosshair();
@@ -213,7 +222,7 @@ var Interaction = class {
   }
   hover(p) {
     const region = this.host.hitTest(p.x, p.y);
-    let cursor = region.area === "priceAxis" ? "ns-resize" : region.area === "timeAxis" ? "ew-resize" : "crosshair";
+    let cursor = region.area === "priceAxis" ? "ns-resize" : region.area === "timeAxis" ? "ew-resize" : region.area === "paneBorder" ? "row-resize" : "crosshair";
     let hovered = null;
     if (region.area === "plot") {
       if (this.host.toolActive()) {
@@ -244,6 +253,7 @@ var Interaction = class {
     if (isDouble) {
       this.lastTap.t = 0;
       if (this.region.area === "priceAxis" && this.region.pane) this.host.resetPriceScale(this.region.pane);
+      else if (this.region.area === "paneBorder") this.host.resetPaneSizes();
       else this.host.resetView();
     } else {
       this.lastTap = { t, x: p.x, y: p.y };
@@ -331,13 +341,19 @@ var Interaction = class {
     const p = this.local(e);
     const region = this.host.hitTest(p.x, p.y);
     if (region.area === "priceAxis" && region.pane) this.host.resetPriceScale(region.pane);
+    else if (region.area === "paneBorder") this.host.resetPaneSizes();
     else if (region.area !== "none") this.host.resetView();
   }
   onTouchMove(e) {
     if (this.mode !== "idle" && this.mode !== "pending") e.preventDefault();
   }
   onContextMenu(e) {
-    if (this.touch) e.preventDefault();
+    if (this.touch) {
+      e.preventDefault();
+      return;
+    }
+    const p = this.local(e);
+    if (this.host.contextMenu(p.x, p.y)) e.preventDefault();
   }
 };
 
@@ -1801,6 +1817,7 @@ function parseChartState(input) {
     settings: { ...DEFAULT_CHART_SETTINGS, ...s.settings ?? {} },
     indicators: Array.isArray(s.indicators) ? s.indicators : [],
     drawings: s.drawings && typeof s.drawings === "object" ? s.drawings : {},
+    paneWeights: s.paneWeights && typeof s.paneWeights === "object" ? Object.fromEntries(Object.entries(s.paneWeights).filter(([, w]) => typeof w === "number" && w > 0)) : {},
     compares: Array.isArray(s.compares) ? s.compares.filter((x) => typeof x === "string") : [],
     view: {
       barSpacing: Number(s.view?.barSpacing) || 8,
@@ -2561,6 +2578,8 @@ function createTheme(base, overrides = {}, direction) {
 var TIME_AXIS_HEIGHT = 28;
 var MIN_PRICE_AXIS_WIDTH = 56;
 var PANE_WEIGHT = { main: 4, volume: 1, indicator: 1.3 };
+var MIN_PANE_HEIGHT = 32;
+var PANE_BORDER_GRAB = 4;
 var HISTORY_TRIGGER_BARS = 20;
 var TIME_LABEL_MIN_GAP = 72;
 var PRICE_TICK_SPACING = 48;
@@ -2676,6 +2695,9 @@ var Chart = class {
   percentBaseIndex = 0;
   replayState = null;
   replaySelecting = false;
+  /** Pane height weights the user set by dragging borders (unset panes use PANE_WEIGHT). */
+  paneWeights = /* @__PURE__ */ new Map();
+  paneWeightTotal = 1;
   constructor(container, options = {}) {
     this.theme = { ...lightTheme, ...options.theme };
     this.locale = options.locale ?? "ko";
@@ -3035,7 +3057,8 @@ var Chart = class {
       indicators: this.getIndicators(),
       drawings: JSON.parse(JSON.stringify(drawings)),
       view: { barSpacing: this.timeScale.barSpacing, rightOffset: this.timeScale.rightOffset },
-      compares: [...this.compares.keys()]
+      compares: [...this.compares.keys()],
+      paneWeights: Object.fromEntries(this.paneWeights)
     };
   }
   /**
@@ -3058,6 +3081,8 @@ var Chart = class {
     this.timeScale.barSpacing = state.view.barSpacing;
     this.timeScale.rightOffset = state.view.rightOffset;
     this.timeScale.clamp();
+    this.paneWeights.clear();
+    for (const [id, w] of Object.entries(state.paneWeights ?? {})) if (w > 0) this.paneWeights.set(id, w);
     const compares = state.compares ?? [];
     for (const symbol of [...this.compares.keys()]) if (!compares.includes(symbol)) this.removeCompare(symbol);
     if (this.datafeed) for (const symbol of compares) void this.addCompare(symbol);
@@ -3107,6 +3132,13 @@ var Chart = class {
   updateDrawing(id, patch) {
     this.drawings.update(id, patch);
   }
+  /** Adds a drawing (e.g. a horizontal line at a price) and selects it. Returns its id. */
+  addDrawing(drawing) {
+    const id = `d_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+    this.drawings.set([...this.drawings.drawings, { ...drawing, id, points: drawing.points.map((p) => ({ ...p })) }]);
+    this.drawings.select(id);
+    return id;
+  }
   removeDrawing(id) {
     this.drawings.remove(id);
   }
@@ -3129,6 +3161,7 @@ var Chart = class {
   removeIndicator(id) {
     if (!this.indicators.remove(id)) return;
     this.indicatorScales.delete(id);
+    this.paneWeights.delete(id);
     this.indicatorsChanged();
   }
   /** Changes params, per-series styles (color/width/visible) and/or overall visibility. */
@@ -3188,6 +3221,32 @@ var Chart = class {
   drawingDefinitions() {
     return [...this.drawings.registry.values()];
   }
+  // ── Pane sizes ─────────────────────────────────────────────────────
+  /**
+   * Moves the border above pane `index` (1 = between the price pane and the next one) by `dy` px.
+   * The two neighbouring panes trade height; the rest keep theirs. Users do this by dragging.
+   */
+  resizePane(index, dy) {
+    const panes = this.frame?.panes;
+    const above = panes?.[index - 1];
+    const below = panes?.[index];
+    if (!panes || !above || !below || !this.frame) return;
+    const pair = above.height + below.height;
+    const top = Math.min(pair - MIN_PANE_HEIGHT, Math.max(MIN_PANE_HEIGHT, above.height + dy));
+    const unit = this.paneWeightTotal / Math.max(1, this.frame.panesHeight);
+    for (const p of panes) this.paneWeights.set(p.id, p.height * unit);
+    this.paneWeights.set(above.id, top * unit);
+    this.paneWeights.set(below.id, (pair - top) * unit);
+    this.invalidate();
+    this.stateChanged();
+  }
+  /** Back to the default pane heights. */
+  resetPaneSizes() {
+    if (this.paneWeights.size === 0) return;
+    this.paneWeights.clear();
+    this.invalidate();
+    this.stateChanged();
+  }
   // ── Undo / redo ────────────────────────────────────────────────────
   get canUndo() {
     return this.history.undo.length > 0;
@@ -3689,11 +3748,16 @@ var Chart = class {
     const panesHeight = Math.max(0, height - TIME_AXIS_HEIGHT);
     this.timeScale.barCount = this.store.length;
     const indicatorPanes = this.indicators.panes;
-    const totalWeight = PANE_WEIGHT.main + (this.settingsValue.volume ? PANE_WEIGHT.volume : 0) + indicatorPanes.length * PANE_WEIGHT.indicator;
-    const share = (w) => Math.round(panesHeight * w / totalWeight);
-    const volumeHeight = this.settingsValue.volume ? share(PANE_WEIGHT.volume) : 0;
-    const indicatorHeight = share(PANE_WEIGHT.indicator);
-    const mainHeight = panesHeight - volumeHeight - indicatorHeight * indicatorPanes.length;
+    const weightOf = (id, kind) => this.paneWeights.get(id) ?? PANE_WEIGHT[kind];
+    const weights = [["main", weightOf("main", "main")]];
+    if (this.settingsValue.volume) weights.push(["volume", weightOf("volume", "volume")]);
+    for (const c of indicatorPanes) weights.push([c.id, weightOf(c.id, "indicator")]);
+    const totalWeight = weights.reduce((sum, [, w]) => sum + w, 0);
+    this.paneWeightTotal = totalWeight;
+    const heightOf = new Map(weights.map(([id, w]) => [id, Math.max(MIN_PANE_HEIGHT, Math.round(panesHeight * w / totalWeight))]));
+    const volumeHeight = heightOf.get("volume") ?? 0;
+    const indicatorHeights = indicatorPanes.map((c) => heightOf.get(c.id));
+    const mainHeight = Math.max(MIN_PANE_HEIGHT, panesHeight - volumeHeight - indicatorHeights.reduce((a, b) => a + b, 0));
     this.mainScale.height = mainHeight;
     this.volumeScale.height = volumeHeight;
     const drawable = (config) => {
@@ -3713,7 +3777,7 @@ var Chart = class {
     this.countdownLabel = this.countdownText();
     const subPanes = indicatorPanes.map((config) => {
       const scale = this.indicatorScale(config.id);
-      scale.height = indicatorHeight;
+      scale.height = heightOf.get(config.id);
       return { config, scale, output: drawable(config) };
     });
     const indicatorFormat = (output) => {
@@ -3743,8 +3807,8 @@ var Chart = class {
       for (const pane of subPanes) this.autoScaleIndicator(pane.scale, pane.output, range);
       priceTicks = this.mainTicks(mainHeight);
       subTicks = subPanes.map((p) => {
-        const [lo, hi] = p.output.range ?? [p.scale.yToPrice(indicatorHeight), p.scale.yToPrice(0)];
-        return niceTicks(lo, hi, Math.max(1, Math.floor(indicatorHeight / 36)));
+        const [lo, hi] = p.output.range ?? [p.scale.yToPrice(p.scale.height), p.scale.yToPrice(0)];
+        return niceTicks(lo, hi, Math.max(1, Math.floor(p.scale.height / 36)));
       });
       let labelWidth = 0;
       const measure = (text) => labelWidth = Math.max(labelWidth, ctx.measureText(text).width);
@@ -3789,14 +3853,14 @@ var Chart = class {
         id: p.config.id,
         kind: "indicator",
         top,
-        height: indicatorHeight,
+        height: p.scale.height,
         scale: p.scale,
         ticks: subTicks[i],
         format: indicatorFormat(p.output),
         tickFormat: tickFormat(subTicks[i], p.output),
         indicator: p.output
       });
-      top += indicatorHeight;
+      top += p.scale.height;
     });
     return {
       width,
@@ -4062,6 +4126,8 @@ var Chart = class {
         const f = this.frame;
         if (!f) return { area: "none", pane: null };
         if (y >= f.panesHeight) return { area: x < f.plotWidth ? "timeAxis" : "none", pane: null };
+        const border = f.panes.findIndex((p, i) => i > 0 && Math.abs(y - p.top) <= PANE_BORDER_GRAB);
+        if (border > 0) return { area: "paneBorder", pane: f.panes[border].id, border };
         return { area: x >= f.plotWidth ? "priceAxis" : "plot", pane: this.paneAt(f, y).id };
       },
       plotWidth: () => this.timeScale.width,
@@ -4097,6 +4163,23 @@ var Chart = class {
         this.invalidate();
       },
       resetView: () => this.resetView(),
+      resizePane: (index, dy) => this.resizePane(index, dy),
+      contextMenu: (x, y) => {
+        const f = this.frame;
+        if (!this.emitter.has("contextMenu") || !f || x > f.plotWidth || y > f.panesHeight) return false;
+        const pane = this.paneAt(f, y);
+        const index = this.timeScale.xToIndex(x);
+        const bar = this.store.at(index);
+        this.emitter.emit("contextMenu", {
+          x,
+          y,
+          pane: pane.id,
+          price: pane.kind === "main" ? roundToTick(this.mainScale.yToPrice(y), this.tickSize) : null,
+          time: bar?.time ?? null
+        });
+        return true;
+      },
+      resetPaneSizes: () => this.resetPaneSizes(),
       toolActive: () => (this.drawings.tool !== null || this.replaySelecting) && this.store.length > 0,
       hitObject: (x, y, touch) => {
         if (y > this.mainScale.height) return null;

package/dist/interaction.d.ts

@@ -1,8 +1,10 @@
 import type { ObjectHit } from './objects/types';
 import type { PaneId } from './render/renderer';
 export interface HitRegion {
-    area: 'plot' | 'priceAxis' | 'timeAxis' | 'none';
+    area: 'plot' | 'priceAxis' | 'timeAxis' | 'paneBorder' | 'none';
     pane: PaneId | null;
+    /** paneBorder: index of the pane below the border. */
+    border?: number;
 }
 /** What the interaction layer needs from the chart. Kept narrow so gestures stay testable. */
 export interface InteractionHost {
@@ -17,6 +19,9 @@ export interface InteractionHost {
     scalePrice(pane: PaneId, factor: number): void;
     resetPriceScale(pane: PaneId): void;
     resetView(): void;
+    /** Drag of the border above pane `index`. */
+    resizePane(index: number, dy: number): void;
+    resetPaneSizes(): void;
     /** A drawing tool is armed: presses create drawings instead of panning. */
     toolActive(): boolean;
     hitObject(x: number, y: number, touch: boolean): ObjectHit | null;
@@ -29,6 +34,8 @@ export interface InteractionHost {
     /** Mouse hover over an object (or nothing) — e.g. to show a fill tooltip. */
     hoverObject(hit: ObjectHit | null): void;
     clearSelection(): void;
+    /** Mouse right-click at (x, y). Return true to suppress the browser's own menu. */
+    contextMenu(x: number, y: number): boolean;
 }
 /**
  * Unified mouse / touch / pen gestures on top of Pointer Events.

package/dist/settings.d.ts

@@ -44,6 +44,8 @@ export interface ChartState {
     };
     /** Symbols overlaid for comparison (see `Chart.addCompare`). */
     compares?: string[];
+    /** Pane heights the user dragged, as weights by pane id ('main', 'volume', indicator ids). */
+    paneWeights?: Record<string, number>;
 }
 /** Validates untrusted JSON (e.g. from storage) into a ChartState; throws on an incompatible shape. */
 export declare function parseChartState(input: unknown): ChartState;

package/package.json

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