acttrader-charts 1.0.4 → 1.0.6

package/README.md

@@ -232,6 +232,8 @@ chart.on('tradeLevelDrag', ({ label, newPrice, bracketType, isFullscreen }) => {
 | `maxSubPanes` | | `3` | Max simultaneous oscillator sub-panes |
 | `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 |
+| `hideQtyButton` | | `false` | Hide the floating Qty input overlay on draft orders |
 | `tradesThresholdForHorizontalLine` | | `2` | Level count above which render auto-switches to `"dot"` mode |
 | `canvasColors` | | — | Per-theme canvas background color overrides (persisted from Settings dialog) |
 | `aggregateFrom` | | — | Fetch finer-grained data and aggregate client-side per timeframe |
@@ -655,6 +657,7 @@ 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('tradeLevelEditOpen', ({ label, type, price, side, stopLossPrice, takeProfitPrice, data, isFullscreen }) => {});
 chart.on('tradeLevelConfirmed',({ label, type, isFullscreen }) => {});
+chart.on('draftCancelled',     ({ label, isFullscreen }) => {}); // draft order dismissed without confirming
 chart.on('tradeLevelDragEnd',  ({ label, type, newPrice, data }) => {}); // deprecated — use tradeLevelEdit
 chart.on('tradeLevelBracketDrag', ({ label, bracketType, newPrice, data }) => {}); // deprecated
 ```

package/dist/{MACD-Dz-5Uw_s.d.cts → MACD-CHD5mG7r.d.cts}

@@ -525,6 +525,12 @@ interface ChartConfig {
     isins?: string[];
     /** Called when the user picks a symbol from the picker modal. Parent should call setSymbol() + setData(). */
     onIsinSelect?: (isin: string) => void;
+    /**
+     * Called when the user clicks the symbol name in the top-left strip.
+     * When set, suppresses the built-in ISIN picker modal and fires this callback instead.
+     * Intended for native WebView hosts that handle symbol navigation natively.
+     */
+    onSymbolClick?: (symbol: string) => void;
     padding?: Partial<Padding>;
     /** Minimum (and default) lot size shown in the trade popover and pre-filled in the draft order qty input (default: 1) */
     minLots?: number;
@@ -727,6 +733,18 @@ interface ChartConfig {
      * }
      */
     aggregateFrom?: Partial<Record<Timeframe, Timeframe>>;
+    /**
+     * Hide the ✓ / ✗ confirm-cancel buttons on trade levels that have pending changes.
+     * Use when the host app provides its own native confirm/cancel controls.
+     * Default: `false`.
+     */
+    hideLevelConfirmCancel?: boolean;
+    /**
+     * Hide the floating Qty input overlay shown on draft orders.
+     * Use when the host app manages lot-size entry natively.
+     * Default: `false`.
+     */
+    hideQtyButton?: boolean;
 }
 interface IndicatorResult {
     index: number;
@@ -938,6 +956,19 @@ type ChartEventMap = {
         type: TradeLevelType | 'draft';
         isFullscreen: boolean;
     };
+    /** Emitted when a draft order is cancelled (Escape, ✕ button, or external revert). */
+    draftCancelled: {
+        label: string;
+        isFullscreen: boolean;
+    };
+    /** Emitted when a new draft order is shown on the chart (market or limit/stop).
+     *  Native layer listens to open the buy/sell form. */
+    draftInitiated: {
+        side: 'buy' | 'sell';
+        price: number;
+        orderType: 'limit' | 'stop' | 'market';
+        isFullscreen: boolean;
+    };
     /** Emitted after any user-driven change to chart configuration (timeframe, series, indicators, drawings, etc.).
      *  The payload is a full serializable snapshot — consumers can persist it keyed by symbol. */
     stateChange: {

package/dist/{MACD-Dz-5Uw_s.d.ts → MACD-CHD5mG7r.d.ts}

@@ -525,6 +525,12 @@ interface ChartConfig {
     isins?: string[];
     /** Called when the user picks a symbol from the picker modal. Parent should call setSymbol() + setData(). */
     onIsinSelect?: (isin: string) => void;
+    /**
+     * Called when the user clicks the symbol name in the top-left strip.
+     * When set, suppresses the built-in ISIN picker modal and fires this callback instead.
+     * Intended for native WebView hosts that handle symbol navigation natively.
+     */
+    onSymbolClick?: (symbol: string) => void;
     padding?: Partial<Padding>;
     /** Minimum (and default) lot size shown in the trade popover and pre-filled in the draft order qty input (default: 1) */
     minLots?: number;
@@ -727,6 +733,18 @@ interface ChartConfig {
      * }
      */
     aggregateFrom?: Partial<Record<Timeframe, Timeframe>>;
+    /**
+     * Hide the ✓ / ✗ confirm-cancel buttons on trade levels that have pending changes.
+     * Use when the host app provides its own native confirm/cancel controls.
+     * Default: `false`.
+     */
+    hideLevelConfirmCancel?: boolean;
+    /**
+     * Hide the floating Qty input overlay shown on draft orders.
+     * Use when the host app manages lot-size entry natively.
+     * Default: `false`.
+     */
+    hideQtyButton?: boolean;
 }
 interface IndicatorResult {
     index: number;
@@ -938,6 +956,19 @@ type ChartEventMap = {
         type: TradeLevelType | 'draft';
         isFullscreen: boolean;
     };
+    /** Emitted when a draft order is cancelled (Escape, ✕ button, or external revert). */
+    draftCancelled: {
+        label: string;
+        isFullscreen: boolean;
+    };
+    /** Emitted when a new draft order is shown on the chart (market or limit/stop).
+     *  Native layer listens to open the buy/sell form. */
+    draftInitiated: {
+        side: 'buy' | 'sell';
+        price: number;
+        orderType: 'limit' | 'stop' | 'market';
+        isFullscreen: boolean;
+    };
     /** Emitted after any user-driven change to chart configuration (timeframe, series, indicators, drawings, etc.).
      *  The payload is a full serializable snapshot — consumers can persist it keyed by symbol. */
     stateChange: {

package/dist/index.cjs

@@ -1607,7 +1607,7 @@ function isDraggable(level) {
     return !!level.entryPriceEditable;
   return false;
 }
-function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line") {
+function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false) {
   if (levels.length === 0)
     return {
       hitAreas: [],
@@ -1703,7 +1703,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       hoverAreas,
       dragAreas,
       confirmAreas,
-      addBracketAreas
+      addBracketAreas,
+      hideConfirmCancel
     );
   }
   ctx.restore();
@@ -1767,7 +1768,7 @@ function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   });
   ctx.restore();
 }
-function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas) {
+function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false) {
   const { y, boxY, boxW, boxH } = layout;
   const color = levelColor(level, colors, theme);
   const active = hovered || selected;
@@ -1964,7 +1965,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   ctx.fillText(displayText, textX, midY);
   const btnY = midY;
   const d = 3.5;
-  if (hasPendingChanges) {
+  if (!hideConfirmCancel && hasPendingChanges) {
     const cancelX = boxX + boxW - BOX_PAD_X / 2 - CONFIRM_R;
     const confirmX = cancelX - CONFIRM_R - CONFIRM_GAP - CONFIRM_R;
     ctx.fillStyle = theme.candle.up;
@@ -2014,7 +2015,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
       w: CONFIRM_R * 2,
       h: CONFIRM_R * 2
     });
-  } else {
+  } else if (!hideConfirmCancel) {
     const closeX = boxX + boxW - BOX_PAD_X / 2 - CLOSE_R;
     const editX = closeX - CLOSE_R - EDIT_GAP - EDIT_R;
     ctx.fillStyle = monoColor(theme);
@@ -16414,6 +16415,8 @@ var _ChartEngine = class _ChartEngine {
     this.symbol = "";
     this.showBidAskLines = false;
     this.showActLogo = false;
+    this.hideLevelConfirmCancel = false;
+    this.hideQtyButton = false;
     this.activeIndicators = [];
     this.indicatorResults = /* @__PURE__ */ new Map();
     this.viewport = {
@@ -17371,6 +17374,7 @@ var _ChartEngine = class _ChartEngine {
       symbol = "",
       isins,
       onIsinSelect,
+      onSymbolClick,
       onOrderSubmit,
       dataLoader,
       durationTimeframeMap,
@@ -17417,6 +17421,8 @@ var _ChartEngine = class _ChartEngine {
     this.recomputeRenderStyle();
     this.showBidAskLines = config.showBidAskLines ?? false;
     this.showActLogo = config.showActLogo ?? false;
+    this.hideLevelConfirmCancel = config.hideLevelConfirmCancel ?? false;
+    this.hideQtyButton = config.hideQtyButton ?? false;
     this.showCandleCountdown = config.showCandleCountdown ?? true;
     this.candleCountdownTimeframes = config.candleCountdownTimeframes;
     this._onOrderSubmit = onOrderSubmit;
@@ -17486,6 +17492,7 @@ var _ChartEngine = class _ChartEngine {
         }))
       );
       this.wrapper.appendChild(this.topBar.el);
+      this.topBar.setFullscreen(this.isFullscreen);
     }
     const middleRow = document.createElement("div");
     Object.assign(middleRow.style, {
@@ -17639,7 +17646,16 @@ var _ChartEngine = class _ChartEngine {
         display: symbol ? "inline" : "none"
       });
       this.siSymbolSpan.textContent = symbol ?? "";
-      if (onIsinSelect) {
+      if (onSymbolClick) {
+        Object.assign(this.siSymbolSpan.style, {
+          cursor: "pointer",
+          textDecoration: "underline",
+          pointerEvents: "auto"
+        });
+        this.siSymbolSpan.addEventListener("click", () => {
+          onSymbolClick(this.siSymbolSpan?.textContent ?? "");
+        });
+      } else if (onIsinSelect) {
         if (isins) this.isins = isins;
         this.isinPickerModal = new IsinPickerModal(this.theme, onIsinSelect);
         this.getFloatingRoot().appendChild(this.isinPickerModal.el);
@@ -18756,6 +18772,7 @@ var _ChartEngine = class _ChartEngine {
     this.levels = [...this.levels, draftLevel];
     this.draftOrderLabel = label;
     this.renderTradeLayer();
+    this.emitter.emit("draftInitiated", { side, price, orderType: "market", isFullscreen: this.isFullscreen });
     return this;
   }
   /**
@@ -19125,7 +19142,9 @@ var _ChartEngine = class _ChartEngine {
     const isNativeFs = !!document.fullscreenElement;
     if (!isNativeFs && !this._isCssFullscreen) {
       if (this.wrapper.requestFullscreen) {
-        this.wrapper.requestFullscreen().catch(() => {
+        this.wrapper.requestFullscreen().then(() => {
+          this.topBar?.setFullscreen(true);
+        }).catch(() => {
           this._applyCssFullscreen(true);
         });
       } else {
@@ -19231,7 +19250,8 @@ var _ChartEngine = class _ChartEngine {
       this.tradeDragNewPrice,
       this.selectedTradeLabel,
       new Set(this.pendingLevelDrags.keys()),
-      this.positionRenderStyle
+      this.positionRenderStyle,
+      this.hideLevelConfirmCancel
     );
     ctx.restore();
     ctx.restore();
@@ -19334,17 +19354,20 @@ var _ChartEngine = class _ChartEngine {
       priceH
     );
     this.crosshair = null;
-    this.draftOrderQtyInput?.show(yPx, this._minLots, this.theme, priceH);
+    if (!this.hideQtyButton) this.draftOrderQtyInput?.show(yPx, this._minLots, this.theme, priceH);
     this.renderTradeLayer();
+    this.emitter.emit("draftInitiated", { side, price, orderType, isFullscreen: this.isFullscreen });
   }
   removeDraftOrder() {
     if (!this.draftOrderLabel) return;
-    this.levels = this.levels.filter((l) => l.label !== this.draftOrderLabel);
-    this.pendingLevelDrags.delete(this.draftOrderLabel);
+    const label = this.draftOrderLabel;
+    this.levels = this.levels.filter((l) => l.label !== label);
+    this.pendingLevelDrags.delete(label);
     this.selectedTradeLabel = null;
     this.draftOrderLabel = null;
     this.draftOrderQtyInput?.hide();
     this.renderTradeLayer();
+    this.emitter.emit("draftCancelled", { label, isFullscreen: this.isFullscreen });
   }
   applyPendingChanges(label) {
     const changes = this.pendingLevelDrags.get(label);