acttrader-charts 1.0.17 → 1.0.19

package/README.md

@@ -13,6 +13,17 @@ Dual ESM/CJS output, TypeScript-first.
 npm install acttrader-charts
 ```
 
+### Beta releases
+
+Pre-release builds are published under the `beta` dist-tag and use prerelease semver (`X.Y.Z-beta.N`). They never move the default `latest` tag, so existing consumers are unaffected.
+
+```bash
+npm install acttrader-charts@beta          # opt in to the latest beta
+npm install acttrader-charts@1.1.0-beta.1  # pin a specific beta
+```
+
+`npm install acttrader-charts` and existing semver ranges (`^1.0.0`, `~1.0.0`) continue to resolve only to stable releases — by spec, semver ranges exclude prerelease versions.
+
 ---
 
 ## Basic Usage
@@ -164,6 +175,10 @@ chart.setLevels([], 'label', 'price', 'pending'); // clear all of one type
 
 **Visual differentiation:** pending orders and ES/EL entry working orders render as **dashed** lines tinted by side (`pendingBuyLine` green / `pendingSellLine` red). True open positions render as **solid** lines: green/red when `pnl` is set (sign-colored), otherwise `positionLine` (purple/indigo). The info-box border matches the line color. Each true open position also gets a small colored price tag on the right-side price axis showing the entry price — same visual language as the Bid/Ask tag — so you can read the entry price without hunting for the info box.
 
+**Brackets follow entry on drag:** when the entry line of a pending order, draft order, or an open position with `entryPriceEditable: true` is dragged, any existing `stopLossPrice` / `takeProfitPrice` brackets translate along with it by the same price delta. The distance between entry and each bracket is whatever the user currently sees — if they manually drag SL or TP to a new price, that new distance becomes the anchor for the next entry drag. Missing brackets aren't auto-created. On confirm, `tradeLevelEdit` carries all translated fields together in one `changes[]` array; on mobile (`hideLevelConfirmCancel`) the three changes are applied as one atomic event.
+
+**Bracket pill auto-offset:** when an SL or TP price sits within about one pill-height of the entry price, the bracket's label pill is pushed vertically away from the entry pill and connected back to its real price line by a dashed leader. The horizontal bracket line itself stays at the true price; only the pill and its `×` button move, and drag targets follow the displaced pill — so grabbing the pill always drags the bracket, grabbing the entry pill always drags the entry, and grabbing the real bracket line still drags the bracket. Works for both buy and sell orders without configuration.
+
 **TFC events:**
 
 ```ts
@@ -191,6 +206,14 @@ chart.on('tradeLevelClose', ({ label, type, action, isFullscreen }) => {
 chart.on('tradeLevelDrag', ({ label, newPrice, bracketType, isFullscreen }) => {
     updatePricePreview(label, newPrice);
 });
+
+// Live qty while the user edits the QTY pill flyout — fires before the level edit is
+// confirmed, so host-side Estimated PNL for SL/TP brackets can recompute immediately
+// instead of waiting for `tradeLevelEdit` at ✓ confirm. `type` is `'draft'` for draft
+// orders, otherwise the parent level's type.
+chart.on('tradeLevelQtyChange', ({ label, type, newLots, previousLots }) => {
+    updateEstimatedPnl(label, newLots);
+});
 ```
 
 **Off-viewport level indicators:**
@@ -263,6 +286,7 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 | `tradeDisplayFilter` | | `"all"` | Which TFC levels are visible: `"all"` · `"positions"` · `"orders"` · `"none"` |
 | `positionRenderStyle` | | auto | Force position render style: `"line"` or `"dot"` |
 | `hideLevelConfirmCancel` | | `false` | Hide on-canvas ✓/✗ confirm-cancel buttons for TFC level edits |
+| `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 |
 | `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`) |
@@ -604,6 +628,53 @@ if (saved) chart.setState(JSON.parse(saved) as ChartState);
 chart.destroy(): void
 ```
 
+### Dismissing open UI
+
+Closes any open flyout/modal/dropdown/popover (quantity edit, symbol picker,
+indicator settings, chart settings, trade popover, topbar dropdowns, mobile
+drawing flyout) in a single call. Designed for wiring to the system back
+button / gesture in PWAs, installed web apps, and native wrapper hosts.
+
+```ts
+chart.dismissAllUI(): boolean  // true if anything was dismissed, false if nothing was open
+```
+
+Paired with the `uiStateChange` event so you can track whether a back action
+should dismiss chart UI or fall through to your own navigation:
+
+```ts
+chart.on('uiStateChange', ({ hasOpenUI }) => {
+    // hasOpenUI === true when at least one flyout/modal/dropdown is open
+});
+```
+
+**PWA — proper History API wiring** (back press dismisses flyout without
+navigating away from the page):
+
+```ts
+let pushedStateForUI = false;
+
+chart.on('uiStateChange', ({ hasOpenUI }) => {
+    if (hasOpenUI && !pushedStateForUI) {
+        history.pushState({ chartUI: true }, '');
+        pushedStateForUI = true;
+    } else if (!hasOpenUI) {
+        pushedStateForUI = false;
+    }
+});
+
+window.addEventListener('popstate', () => {
+    if (chart.dismissAllUI()) pushedStateForUI = false;
+});
+```
+
+**Minimum wiring** (back press closes flyout AND advances browser history —
+fine for single-screen apps without client routing):
+
+```ts
+window.addEventListener('popstate', () => chart.dismissAllUI());
+```
+
 ---
 
 ## Built-in Indicators
@@ -723,8 +794,10 @@ chart.on('stateChange',    ({ symbol, state }) => {
 chart.on('tradeLevelEdit',     ({ label, type, data, changes, isFullscreen }) => {});
 chart.on('tradeLevelClose',    ({ label, type, action, data, isFullscreen }) => {});
 chart.on('tradeLevelDrag',     ({ label, newPrice, data, bracketType, isFullscreen }) => {}); // fires on every mouse-move during drag
+chart.on('tradeLevelQtyChange', ({ label, type, newLots, previousLots, isFullscreen }) => {}); // live qty edit via QTY pill — use to refresh Estimated PNL on SL/TP brackets
 chart.on('tradeLevelEditOpen', ({ label, type, price, side, stopLossPrice, takeProfitPrice, data, isFullscreen }) => {});
 chart.on('tradeLevelConfirmed',({ label, type, isFullscreen }) => {});
+chart.on('tradeLevelEditCancelled', ({ label, type, isFullscreen }) => {}); // ESC / inline ✕ aborted an edit — reset external modify-order panel
 chart.on('draftInitiated',     ({ side, price, orderType, isFullscreen }) => {}); // new draft order shown — open buy/sell form
 chart.on('draftCancelled',     ({ label, isFullscreen }) => {}); // draft order dismissed without confirming
 chart.on('tfcToggle',         ({ enabled }) => {}); // TFC toggled on or off via top bar button or setTfcActive()

package/dist/{MACD-BbNppL1E.d.cts → MACD-DZxpf0eQ.d.cts}

@@ -865,6 +865,14 @@ interface ChartConfig {
      * Default: `false`.
      */
     hideLevelConfirmCancel?: boolean;
+    /**
+     * Multiplier applied to the Confirm (✓), Cancel (✗), Edit (✎), and Close (×)
+     * buttons on trade-level overlays (both main-level and SL/TP bracket boxes).
+     * Scales button radii and inter-button gaps so visual size AND hit/drag areas
+     * grow together — useful for touch targets.
+     * Clamped to `[1, 3]`. Default: `1`.
+     */
+    tradeLevelButtonScale?: number;
     /**
      * When `true`, a theme toggle (Dark / Light) is shown in the Settings dialog.
      * Default: `false` — the toggle is hidden.
@@ -1093,12 +1101,16 @@ type ChartEventMap = {
         isFullscreen: boolean;
     };
     /** Emitted on every mouse-move while dragging a trade level line (before confirm).
-     *  `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag. */
+     *  `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag.
+     *  `derivedSLPrice` / `derivedTPPrice` are present during a main-entry drag in follow-brackets mode
+     *  so external panels can mirror the SL/TP translation live (keeps validation from flickering). */
     tradeLevelDrag: {
         label: string;
         newPrice: number;
         data: unknown;
         bracketType?: 'stopLoss' | 'takeProfit';
+        derivedSLPrice?: number;
+        derivedTPPrice?: number;
         isFullscreen: boolean;
     };
     /** Emitted at the instant a bracket (SL/TP) drag begins — before any movement.
@@ -1114,6 +1126,14 @@ type ChartEventMap = {
         type: TradeLevelType | 'draft';
         isFullscreen: boolean;
     };
+    /** Emitted when an in-progress level edit is cancelled from the chart (ESC key or inline ✕ cancel button).
+     *  Mirrors `tradeLevelConfirmed` but for the revert path. Not fired for draft orders (those emit `draftCancelled`).
+     *  External panels listen to reset their modify-order form when the user aborts the edit from the chart side. */
+    tradeLevelEditCancelled: {
+        label: string;
+        type: TradeLevelType;
+        isFullscreen: boolean;
+    };
     /** Emitted when a draft order is cancelled (Escape, ✕ button, or external revert). */
     draftCancelled: {
         label: string;
@@ -1155,6 +1175,25 @@ type ChartEventMap = {
     tfcToggle: {
         enabled: boolean;
     };
+    /** Emitted whenever any dismissible UI (flyout, modal, dropdown, popover) opens or closes.
+     *  Hosts (native wrappers, PWAs) listen to track whether a back button / gesture should
+     *  dismiss chart UI vs. navigate. Pair with `dismissAllUI()` to wire platform back events. */
+    uiStateChange: {
+        hasOpenUI: boolean;
+    };
+    /** Emitted live while the user edits lot qty via the QTY pill flyout, before the
+     *  level edit is confirmed. Use this to recompute qty-derived UI (e.g. Estimated
+     *  PNL on SL/TP brackets) in real time. Final committed qty still arrives on
+     *  `tradeLevelEdit.newLots` at ✓ confirm (or immediately for draft orders).
+     *  `type` is `'draft'` for the in-progress draft order, otherwise the parent level's type.
+     *  `previousLots` is the qty at edit-session start (useful for revert-aware previews). */
+    tradeLevelQtyChange: {
+        label: string;
+        type: TradeLevelType | 'draft';
+        newLots: number;
+        previousLots: number;
+        isFullscreen: boolean;
+    };
     /** Emitted when the user confirms all edits to a level — replaces separate tradeLevelDragEnd / tradeLevelBracketDrag events. */
     tradeLevelEdit: {
         label: string;

package/dist/{MACD-BbNppL1E.d.ts → MACD-DZxpf0eQ.d.ts}

@@ -865,6 +865,14 @@ interface ChartConfig {
      * Default: `false`.
      */
     hideLevelConfirmCancel?: boolean;
+    /**
+     * Multiplier applied to the Confirm (✓), Cancel (✗), Edit (✎), and Close (×)
+     * buttons on trade-level overlays (both main-level and SL/TP bracket boxes).
+     * Scales button radii and inter-button gaps so visual size AND hit/drag areas
+     * grow together — useful for touch targets.
+     * Clamped to `[1, 3]`. Default: `1`.
+     */
+    tradeLevelButtonScale?: number;
     /**
      * When `true`, a theme toggle (Dark / Light) is shown in the Settings dialog.
      * Default: `false` — the toggle is hidden.
@@ -1093,12 +1101,16 @@ type ChartEventMap = {
         isFullscreen: boolean;
     };
     /** Emitted on every mouse-move while dragging a trade level line (before confirm).
-     *  `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag. */
+     *  `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag.
+     *  `derivedSLPrice` / `derivedTPPrice` are present during a main-entry drag in follow-brackets mode
+     *  so external panels can mirror the SL/TP translation live (keeps validation from flickering). */
     tradeLevelDrag: {
         label: string;
         newPrice: number;
         data: unknown;
         bracketType?: 'stopLoss' | 'takeProfit';
+        derivedSLPrice?: number;
+        derivedTPPrice?: number;
         isFullscreen: boolean;
     };
     /** Emitted at the instant a bracket (SL/TP) drag begins — before any movement.
@@ -1114,6 +1126,14 @@ type ChartEventMap = {
         type: TradeLevelType | 'draft';
         isFullscreen: boolean;
     };
+    /** Emitted when an in-progress level edit is cancelled from the chart (ESC key or inline ✕ cancel button).
+     *  Mirrors `tradeLevelConfirmed` but for the revert path. Not fired for draft orders (those emit `draftCancelled`).
+     *  External panels listen to reset their modify-order form when the user aborts the edit from the chart side. */
+    tradeLevelEditCancelled: {
+        label: string;
+        type: TradeLevelType;
+        isFullscreen: boolean;
+    };
     /** Emitted when a draft order is cancelled (Escape, ✕ button, or external revert). */
     draftCancelled: {
         label: string;
@@ -1155,6 +1175,25 @@ type ChartEventMap = {
     tfcToggle: {
         enabled: boolean;
     };
+    /** Emitted whenever any dismissible UI (flyout, modal, dropdown, popover) opens or closes.
+     *  Hosts (native wrappers, PWAs) listen to track whether a back button / gesture should
+     *  dismiss chart UI vs. navigate. Pair with `dismissAllUI()` to wire platform back events. */
+    uiStateChange: {
+        hasOpenUI: boolean;
+    };
+    /** Emitted live while the user edits lot qty via the QTY pill flyout, before the
+     *  level edit is confirmed. Use this to recompute qty-derived UI (e.g. Estimated
+     *  PNL on SL/TP brackets) in real time. Final committed qty still arrives on
+     *  `tradeLevelEdit.newLots` at ✓ confirm (or immediately for draft orders).
+     *  `type` is `'draft'` for the in-progress draft order, otherwise the parent level's type.
+     *  `previousLots` is the qty at edit-session start (useful for revert-aware previews). */
+    tradeLevelQtyChange: {
+        label: string;
+        type: TradeLevelType | 'draft';
+        newLots: number;
+        previousLots: number;
+        isFullscreen: boolean;
+    };
     /** Emitted when the user confirms all edits to a level — replaces separate tradeLevelDragEnd / tradeLevelBracketDrag events. */
     tradeLevelEdit: {
         label: string;