acttrader-charts 1.2.0-beta.4 → 1.2.0-beta.5

package/README.md

@@ -312,6 +312,34 @@ When the on-canvas ✓/✗ buttons are hidden (mobile native UI), the chart adap
 
 When `enableTrading` is on and live BID/ASK data is streaming, hovering / activating the trade crosshair button while the cursor price is inside the spread shows **"Buy Market"** and **"Sell Market"** rows instead of the standard Limit/Stop rows. Tapping either row calls `showMarketDraft()` internally and emits `draftInitiated` with `orderType: 'market'`.
 
+### Horizontal (time-axis) order-line dragging
+
+Opt-in via `features.orderLineTimeDrag` (off by default; enable it per broker from the host app — e.g. only for Hankotrade users). When enabled, any level flagged `timeDraggable: true` can have its **info-box badge** dragged left/right to re-anchor the order to a different candle. The **price line stays locked** — only the time anchor moves. Grab the badge for horizontal drag (`grab` / `grabbing` cursor); the price line itself still drags vertically as before.
+
+```ts
+const chart = new ChartEngine({
+  container,
+  features: { orderLineTimeDrag: true }, // host enables this only for the gated broker
+  orderLineDragSnap: true,               // snap to nearest candle on release (default)
+});
+
+chart.setLevels(
+  [{ id: 'A1', price: 1.21013, side: 'buy', orderType: 'limit', lots: 0.08,
+     timestamp: 1718000000000, timeDraggable: true }],
+  'id', 'price', 'pending',
+);
+
+chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
+  // Persist the move, then echo `timestamp: toTimestamp` in your next setLevels().
+});
+```
+
+- **Bounds:** the badge is clamped to the visible viewport — it can't be dragged past the left/right edge.
+- **Snap:** controlled by `orderLineDragSnap` (default `true`); set `false` to keep the exact released time.
+- **Escape / touch-cancel:** reverts the badge to its starting candle without emitting `orderLineMoved`.
+- **Stays put after release:** the chart holds the dropped position across `setLevels` refreshes until you echo the new `timestamp` back (auto-released on match).
+- A level **without** `timestamp` renders exactly as before (badge centered), so existing consumers are unaffected.
+
 ---
 
 ## Default Configuration
@@ -368,6 +396,8 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 | `showTradeLevelsAlways` | | `false` | Always render SL/TP bracket lines + price pills, even when the parent level is not hovered or selected. The close (×) button stays hover-only so the chart isn't cluttered. Toggleable from the Settings dialog (Trading tab). Persisted in `localStorage`. |
 | `tradeLevelButtonScale` | | `1` | Multiplier for trade-level Confirm/Cancel/Edit/Close button radii and gaps. Scales visuals **and** hit/drag areas together — raise it on touch devices for larger tap targets. Clamped to `[1, 3]`. Also settable at runtime via `chart.setTradeLevelButtonScale(scale)` |
 | `tfcEnabled` | | `true` | Enable the TFC toggle button in the top bar. When `false`, TFC is completely disabled — the toggle button is hidden and all trade levels, draft orders, and the floating trade button are suppressed |
+| `features.orderLineTimeDrag` | | `false` | Enable **horizontal (time-axis) order-line dragging**. A level with `timeDraggable: true` can have its info-box badge dragged left/right to re-anchor the order to a different candle — **price stays locked**. Emits `orderLineMoved` on release. Off by default; intended to be enabled per broker (e.g. Hankotrade) by the host app |
+| `orderLineDragSnap` | | `true` | When horizontal dragging is enabled, snap the badge to the nearest candle on release. Set `false` to keep the exact released time |
 | `levelClusteringEnabled` | | `true` | Enable trade-level fan-out clustering; overlapping levels group into expandable badges |
 | `clusterThresholdDistance` | | `20` | Pixel proximity threshold for clustering (only when `levelClusteringEnabled` is `true`) |
 | `hideSymbolAndTick` | | `false` | Hide the symbol name and tick-activity (streaming) dot in the top-left overlay. Does **not** affect the OHLC(V) strip — use `hideOHLCV` for that |
@@ -450,6 +480,16 @@ new ChartEngine({
 });
 ```
 
+> **Fonts & the host document.** Canvas-drawn UI text (axes, crosshair, indicator pills)
+> uses the `*FontFamily` values above. The DOM overlays — the **symbol name**, the
+> **O/H/L/C strip**, and the toolbar — use `font-family: inherit`, so they resolve to the
+> **host document's `body` font**. When you mount the chart on a normal web page this lets
+> the chart pick up your site's font automatically. When you embed it in a bare host (e.g.
+> a native WebView whose page sets no font), give the host `<body>` a `font-family` — the
+> bundled WebView template (`wrappers/webview/src/template.html`) now ships one
+> (`'Inter', system-ui, -apple-system, …`) so these elements fall back to the platform
+> system font instead of the WebView's default serif.
+
 You can also import individual section defaults:
 
 ```ts
@@ -893,6 +933,15 @@ chart.on('tfcToggle',         ({ enabled }) => {}); // TFC toggled on or off via
 chart.on('tradeLevelDragEnd',  ({ label, type, newPrice, data }) => {}); // deprecated — use tradeLevelEdit
 chart.on('tradeLevelBracketDrag', ({ label, bracketType, newPrice, data }) => {}); // deprecated
 
+// Horizontal (time-axis) order-line dragging — requires features.orderLineTimeDrag + level.timeDraggable.
+// Price is never changed; only the badge's time anchor moves. `label` is your order id.
+chart.on('orderLineMoveStart', ({ label, fromTimestamp, fromBarIndex, isFullscreen }) => {});
+chart.on('orderLineMoving',    ({ label, toTimestamp, toBarIndex, isFullscreen }) => {}); // fires on every move
+chart.on('orderLineMoved',     ({ label, fromTimestamp, toTimestamp, fromBarIndex, toBarIndex, data, isFullscreen }) => {
+    // Persist the new time anchor for this order. Echo `timestamp: toTimestamp` back in your
+    // next setLevels() payload so the badge stays put across refreshes.
+});
+
 // Fires after addLevelBracket() auto-places a bracket, delivering the computed price back to the caller
 chart.on('tradeLevelBracketActivated', ({ label, bracketType, price, isFullscreen }) => {
     // Use price to pre-populate the SL/TP input field in your native form

package/dist/{MACD-dGgN6dtc.d.cts → MACD-BdHIBbmq.d.cts}

@@ -1020,8 +1020,19 @@ interface ChartConfig {
      *
      * If both `headerLayout` and the deprecated `features.advancedToolbar` are set,
      * `headerLayout` wins.
+     *
+     * - `'mobile'` — Mobile header: a single scrollable action row
+     *   (`Tools` button · timeframe pills · `Ask AI` button). Opt-in and fully
+     *   isolated; selecting it has no effect on any other white-label. The host
+     *   gates it itself, e.g. `headerLayout: isMobile ? 'mobile' : undefined`.
+     *   The `Ask AI` button only renders when {@link ChartConfig.onAskAiClick} is set.
+     */
+    headerLayout?: 'simple' | 'advanced' | 'compact' | 'mobile';
+    /**
+     * Called when the user taps the "Ask AI" (✦) button in the `'mobile'` header.
+     * Omit to hide the button entirely. No effect in other header layouts.
      */
-    headerLayout?: 'simple' | 'advanced' | 'compact';
+    onAskAiClick?: () => void;
     /**
      * Hide the chart header entirely (simple TopBar / AdvancedToolbar /
      * CompactToolbar — whichever `headerLayout` would have rendered).
@@ -1078,6 +1089,15 @@ interface ChartConfig {
          * removed in a future major version. Currently treated as an alias.
          */
         advancedToolbar?: boolean;
+        /**
+         * Enable horizontal (time-axis) order-line dragging: a level whose `timeDraggable`
+         * is true can have its info-box badge dragged left/right to re-anchor the order to
+         * a different candle (price stays locked), emitting `orderLineMoved` on release.
+         * This is the broker-gating seam — hosts (e.g. the Hankotrade app) enable it only
+         * for their flagged users. When `false` / omitted, behavior is unchanged.
+         * Default: false.
+         */
+        orderLineTimeDrag?: boolean;
     };
     /**
      * Fetches historical OHLC bars for a compare symbol. When provided, the
@@ -1141,6 +1161,12 @@ interface ChartConfig {
      * allowing the user to enable/disable TFC at runtime.
      */
     tfcEnabled?: boolean;
+    /**
+     * Snap a horizontally-dragged order line to the nearest candle on drag release.
+     * Only relevant when `features.orderLineTimeDrag` is enabled. When `false`, the badge
+     * keeps the exact (interpolated) time it was released at. Default: `true`.
+     */
+    orderLineDragSnap?: boolean;
 }
 interface IndicatorResult {
     index: number;
@@ -1543,6 +1569,33 @@ type ChartEventMap = {
             bracketOrderLabel?: string;
         }>;
     };
+    /** Emitted at the instant a horizontal (time-axis) order-line drag begins — before any movement.
+     *  Only fires when `features.orderLineTimeDrag` is enabled and the level is `timeDraggable`. */
+    orderLineMoveStart: {
+        label: string;
+        fromTimestamp: number;
+        fromBarIndex: number;
+        isFullscreen: boolean;
+    };
+    /** Emitted on every move during a horizontal order-line drag (before release) for live external sync. */
+    orderLineMoving: {
+        label: string;
+        toTimestamp: number;
+        toBarIndex: number;
+        isFullscreen: boolean;
+    };
+    /** Emitted once when a horizontal order-line drag ends (after snap, if enabled).
+     *  `label` is the level's label (i.e. your order id). The price is unchanged — only the
+     *  time anchor moved. `data` is the level's original object, returned as-is. */
+    orderLineMoved: {
+        label: string;
+        fromTimestamp: number;
+        toTimestamp: number;
+        fromBarIndex: number;
+        toBarIndex: number;
+        data: unknown;
+        isFullscreen: boolean;
+    };
     /**
      * Emitted when the user picks a preset in the multi-layout popover or toggles
      * a sync option. Fires only when `enableMultipleLayouts: true`. The host
@@ -1677,6 +1730,19 @@ interface PositionLevel {
     orderType?: 'limit' | 'stop';
     /** Lot size for Entry Limit / Entry Stop orders — shown in the info box label. */
     lots?: number;
+    /**
+     * Unix-ms time anchor for the order's badge on the X (time) axis. When set, the info
+     * box is centered horizontally over the candle nearest this time instead of the chart
+     * center. When omitted, the badge renders at the legacy centered X (behavior unchanged).
+     * Only honored when `ChartConfig.features.orderLineTimeDrag` is enabled.
+     */
+    timestamp?: number;
+    /**
+     * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
+     * dragged horizontally to re-anchor the order to a different candle (price stays locked).
+     * Emits `orderLineMoved` on release. Default: false.
+     */
+    timeDraggable?: boolean;
     /**
      * Your original position object. Returned as-is in the `tradeLevelClose` event.
      * The library never inspects this value.
@@ -1721,6 +1787,19 @@ interface PendingOrderLevel {
      * using the parent's `side` field (buy: price below parent → SL, above → TP; sell: reversed).
      */
     ToClose?: string;
+    /**
+     * Unix-ms time anchor for the order's badge on the X (time) axis. When set, the info
+     * box is centered horizontally over the candle nearest this time instead of the chart
+     * center. When omitted, the badge renders at the legacy centered X (behavior unchanged).
+     * Only honored when `ChartConfig.features.orderLineTimeDrag` is enabled.
+     */
+    timestamp?: number;
+    /**
+     * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
+     * dragged horizontally to re-anchor the order to a different candle (price stays locked).
+     * Emits `orderLineMoved` on release. Default: false.
+     */
+    timeDraggable?: boolean;
     /** Your original order object. Returned as-is in events. The library never inspects this. */
     data?: unknown;
 }

package/dist/{MACD-dGgN6dtc.d.ts → MACD-BdHIBbmq.d.ts}

@@ -1020,8 +1020,19 @@ interface ChartConfig {
      *
      * If both `headerLayout` and the deprecated `features.advancedToolbar` are set,
      * `headerLayout` wins.
+     *
+     * - `'mobile'` — Mobile header: a single scrollable action row
+     *   (`Tools` button · timeframe pills · `Ask AI` button). Opt-in and fully
+     *   isolated; selecting it has no effect on any other white-label. The host
+     *   gates it itself, e.g. `headerLayout: isMobile ? 'mobile' : undefined`.
+     *   The `Ask AI` button only renders when {@link ChartConfig.onAskAiClick} is set.
+     */
+    headerLayout?: 'simple' | 'advanced' | 'compact' | 'mobile';
+    /**
+     * Called when the user taps the "Ask AI" (✦) button in the `'mobile'` header.
+     * Omit to hide the button entirely. No effect in other header layouts.
      */
-    headerLayout?: 'simple' | 'advanced' | 'compact';
+    onAskAiClick?: () => void;
     /**
      * Hide the chart header entirely (simple TopBar / AdvancedToolbar /
      * CompactToolbar — whichever `headerLayout` would have rendered).
@@ -1078,6 +1089,15 @@ interface ChartConfig {
          * removed in a future major version. Currently treated as an alias.
          */
         advancedToolbar?: boolean;
+        /**
+         * Enable horizontal (time-axis) order-line dragging: a level whose `timeDraggable`
+         * is true can have its info-box badge dragged left/right to re-anchor the order to
+         * a different candle (price stays locked), emitting `orderLineMoved` on release.
+         * This is the broker-gating seam — hosts (e.g. the Hankotrade app) enable it only
+         * for their flagged users. When `false` / omitted, behavior is unchanged.
+         * Default: false.
+         */
+        orderLineTimeDrag?: boolean;
     };
     /**
      * Fetches historical OHLC bars for a compare symbol. When provided, the
@@ -1141,6 +1161,12 @@ interface ChartConfig {
      * allowing the user to enable/disable TFC at runtime.
      */
     tfcEnabled?: boolean;
+    /**
+     * Snap a horizontally-dragged order line to the nearest candle on drag release.
+     * Only relevant when `features.orderLineTimeDrag` is enabled. When `false`, the badge
+     * keeps the exact (interpolated) time it was released at. Default: `true`.
+     */
+    orderLineDragSnap?: boolean;
 }
 interface IndicatorResult {
     index: number;
@@ -1543,6 +1569,33 @@ type ChartEventMap = {
             bracketOrderLabel?: string;
         }>;
     };
+    /** Emitted at the instant a horizontal (time-axis) order-line drag begins — before any movement.
+     *  Only fires when `features.orderLineTimeDrag` is enabled and the level is `timeDraggable`. */
+    orderLineMoveStart: {
+        label: string;
+        fromTimestamp: number;
+        fromBarIndex: number;
+        isFullscreen: boolean;
+    };
+    /** Emitted on every move during a horizontal order-line drag (before release) for live external sync. */
+    orderLineMoving: {
+        label: string;
+        toTimestamp: number;
+        toBarIndex: number;
+        isFullscreen: boolean;
+    };
+    /** Emitted once when a horizontal order-line drag ends (after snap, if enabled).
+     *  `label` is the level's label (i.e. your order id). The price is unchanged — only the
+     *  time anchor moved. `data` is the level's original object, returned as-is. */
+    orderLineMoved: {
+        label: string;
+        fromTimestamp: number;
+        toTimestamp: number;
+        fromBarIndex: number;
+        toBarIndex: number;
+        data: unknown;
+        isFullscreen: boolean;
+    };
     /**
      * Emitted when the user picks a preset in the multi-layout popover or toggles
      * a sync option. Fires only when `enableMultipleLayouts: true`. The host
@@ -1677,6 +1730,19 @@ interface PositionLevel {
     orderType?: 'limit' | 'stop';
     /** Lot size for Entry Limit / Entry Stop orders — shown in the info box label. */
     lots?: number;
+    /**
+     * Unix-ms time anchor for the order's badge on the X (time) axis. When set, the info
+     * box is centered horizontally over the candle nearest this time instead of the chart
+     * center. When omitted, the badge renders at the legacy centered X (behavior unchanged).
+     * Only honored when `ChartConfig.features.orderLineTimeDrag` is enabled.
+     */
+    timestamp?: number;
+    /**
+     * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
+     * dragged horizontally to re-anchor the order to a different candle (price stays locked).
+     * Emits `orderLineMoved` on release. Default: false.
+     */
+    timeDraggable?: boolean;
     /**
      * Your original position object. Returned as-is in the `tradeLevelClose` event.
      * The library never inspects this value.
@@ -1721,6 +1787,19 @@ interface PendingOrderLevel {
      * using the parent's `side` field (buy: price below parent → SL, above → TP; sell: reversed).
      */
     ToClose?: string;
+    /**
+     * Unix-ms time anchor for the order's badge on the X (time) axis. When set, the info
+     * box is centered horizontally over the candle nearest this time instead of the chart
+     * center. When omitted, the badge renders at the legacy centered X (behavior unchanged).
+     * Only honored when `ChartConfig.features.orderLineTimeDrag` is enabled.
+     */
+    timestamp?: number;
+    /**
+     * When true (and `ChartConfig.features.orderLineTimeDrag` is enabled), the badge can be
+     * dragged horizontally to re-anchor the order to a different candle (price stays locked).
+     * Emits `orderLineMoved` on release. Default: false.
+     */
+    timeDraggable?: boolean;
     /** Your original order object. Returned as-is in events. The library never inspects this. */
     data?: unknown;
 }