acttrader-charts 1.1.0 → 1.1.2

package/README.md

@@ -287,6 +287,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 |
+| `deselectActiveOnOutsideClick` | | `false` | When `true`, clicking/tapping anywhere outside a selected trade level dismisses it (reverting any pending edits, mirroring ✗ Cancel). Default `false` keeps the level active so incidental clicks — price-axis resize, taps outside the QTY input — don't drop an in-progress edit. The level can still be dismissed via ✓/✗, tapping the level again, or `setLevels()` removing it |
 | `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 |

package/dist/{MACD-BgCuLbX_.d.cts → MACD-Dqi682ei.d.cts}

@@ -879,6 +879,17 @@ interface ChartConfig {
      * Default: `false`.
      */
     hideLevelConfirmCancel?: boolean;
+    /**
+     * When `true`, clicking or tapping anywhere outside a selected/active trade
+     * level dismisses it (reverting any pending edits, mirroring ✗ Cancel).
+     * When `false` (default), the active level is preserved across outside
+     * clicks — only explicit ✓ / ✗ buttons, tapping the level itself, or
+     * `setLevels()` removing it will dismiss it. Recommended `false` so
+     * incidental clicks (e.g. price-axis resize, tapping outside the QTY input)
+     * don't drop the user's in-progress edit.
+     * Default: `false`.
+     */
+    deselectActiveOnOutsideClick?: boolean;
     /**
      * Always render SL/TP bracket lines + price pills, even when the parent
      * trade level is not hovered or selected. Close (×) buttons remain

package/dist/{MACD-BgCuLbX_.d.ts → MACD-Dqi682ei.d.ts}

@@ -879,6 +879,17 @@ interface ChartConfig {
      * Default: `false`.
      */
     hideLevelConfirmCancel?: boolean;
+    /**
+     * When `true`, clicking or tapping anywhere outside a selected/active trade
+     * level dismisses it (reverting any pending edits, mirroring ✗ Cancel).
+     * When `false` (default), the active level is preserved across outside
+     * clicks — only explicit ✓ / ✗ buttons, tapping the level itself, or
+     * `setLevels()` removing it will dismiss it. Recommended `false` so
+     * incidental clicks (e.g. price-axis resize, tapping outside the QTY input)
+     * don't drop the user's in-progress edit.
+     * Default: `false`.
+     */
+    deselectActiveOnOutsideClick?: boolean;
     /**
      * Always render SL/TP bracket lines + price pills, even when the parent
      * trade level is not hovered or selected. Close (×) buttons remain

package/dist/index.cjs

@@ -3371,6 +3371,7 @@ function formatTimestamp(ts, visibleBars, timeframe, spansMultipleDays, timezone
   return d.toLocaleDateString("en-US", { month: "short", year: "2-digit", timeZone: timezone });
 }
 function renderTimeAxis(ctx, bars, viewport, scale, theme, chartWidth, axisY, maxLabels = 8, cfg = DEFAULT_TIME_AXIS_CONFIG, timeframe, countdownBarIndex, timezone = "UTC") {
+  if (bars.length === 0) return;
   const visibleBars = viewport.endIndex - viewport.startIndex;
   const firstBar = bars[0];
   const lastBar = bars[bars.length - 1];
@@ -3379,7 +3380,8 @@ function renderTimeAxis(ctx, bars, viewport, scale, theme, chartWidth, axisY, ma
   ctx.font = `${cfg.fontSize} ${cfg.fontFamily}`;
   ctx.textAlign = "center";
   const MIN_GAP = 12;
-  const sampleLabel = formatTimestamp(bars[Math.floor(bars.length / 2)]?.time ?? bars[0].time, visibleBars, timeframe, spansMultipleDays, timezone);
+  const sampleBar = bars[Math.floor(bars.length / 2)] ?? bars[0];
+  const sampleLabel = formatTimestamp(sampleBar.time, visibleBars, timeframe, spansMultipleDays, timezone);
   const labelW = ctx.measureText(sampleLabel).width;
   const minStep = Math.max(1, Math.floor(bars.length / maxLabels));
   let step = minStep;
@@ -18661,6 +18663,9 @@ var _ChartEngine = class _ChartEngine {
     this.tickActivityTimer = null;
     this.tickActivityMs = 3e4;
     this.streamStatus = "disconnected";
+    // Set by destroy() so late-firing callbacks (ResizeObserver entries queued
+    // before disconnect, in-flight promises, sockets) bail before touching state.
+    this._isDestroyed = false;
     this.indicatorSettingsDialog = null;
     this.chartSettingsDialog = null;
     this.tradeButton = null;
@@ -18693,6 +18698,7 @@ var _ChartEngine = class _ChartEngine {
     this.showBidAskLines = false;
     this.showActLogo = false;
     this.hideLevelConfirmCancel = false;
+    this.deselectActiveOnOutsideClick = false;
     this.tradeLevelButtonScale = 1;
     this.levelClusteringEnabled = true;
     this.clusterThresholdDistance = 20;
@@ -19662,7 +19668,7 @@ var _ChartEngine = class _ChartEngine {
         }
         return;
       } else if (this.selectedTradeLabel !== null) {
-        if (!this.hideLevelConfirmCancel) {
+        if (!this.hideLevelConfirmCancel && this.deselectActiveOnOutsideClick) {
           const lbl = this.selectedTradeLabel;
           const pending = this.pendingLevelDrags.get(lbl);
           if (!pending || pending.length === 0) {
@@ -19813,6 +19819,7 @@ var _ChartEngine = class _ChartEngine {
       }
     };
     this.onTick = (tick) => {
+      if (this._isDestroyed) return;
       const all = this.dataStore.all;
       if (all.length === 0) return;
       if (this._suppressTicks) return;
@@ -19952,6 +19959,7 @@ var _ChartEngine = class _ChartEngine {
     this.showBidAskLines = config.showBidAskLines ?? false;
     this.showActLogo = config.showActLogo ?? false;
     this.hideLevelConfirmCancel = config.hideLevelConfirmCancel ?? false;
+    this.deselectActiveOnOutsideClick = config.deselectActiveOnOutsideClick ?? false;
     this.tradeLevelButtonScale = Math.min(Math.max(config.tradeLevelButtonScale ?? 1, 1), 3);
     this.levelClusteringEnabled = config.levelClusteringEnabled ?? true;
     this.clusterThresholdDistance = config.clusterThresholdDistance ?? 20;
@@ -22221,6 +22229,7 @@ var _ChartEngine = class _ChartEngine {
     return this;
   }
   destroy() {
+    this._isDestroyed = true;
     this.panHandler.destroy();
     this.zoomHandler.destroy();
     this.resizeObserver.disconnect();
@@ -22353,6 +22362,7 @@ var _ChartEngine = class _ChartEngine {
   }
   // ── Rendering ─────────────────────────────────────────────────────────────
   scheduleRender() {
+    if (this._isDestroyed) return;
     if (this.rafId !== null) return;
     this.rafId = requestAnimationFrame(() => {
       this.rafId = null;
@@ -22542,6 +22552,7 @@ var _ChartEngine = class _ChartEngine {
     this.positionRenderStyle = activeCount > this.tradesThresholdForHorizontalLine ? "dot" : "line";
   }
   renderTradeLayer() {
+    if (this._isDestroyed) return;
     const dpr = window.devicePixelRatio || 1;
     const { tradeCtx: ctx, tradeCanvas: canvas, theme, viewport } = this;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -23087,6 +23098,7 @@ var _ChartEngine = class _ChartEngine {
     });
   }
   render() {
+    if (this._isDestroyed) return;
     const { ctx, canvas, theme, viewport } = this;
     const dpr = window.devicePixelRatio || 1;
     const totalW = canvas.width;
@@ -23534,19 +23546,21 @@ var _ChartEngine = class _ChartEngine {
       );
       if (showCountdown) {
         const lastBar2 = this.dataStore.all[this.dataStore.length - 1];
-        const intervalMs = this.timeframeToMs(this.timeframe);
-        renderCandleCountdown(
-          ctx,
-          lastBar2.time,
-          intervalMs,
-          this.dataStore.length - 1,
-          viewport,
-          this.scaleManager,
-          theme,
-          chartW,
-          subPaneY,
-          this.uiConfig.timeAxis
-        );
+        if (lastBar2) {
+          const intervalMs = this.timeframeToMs(this.timeframe);
+          renderCandleCountdown(
+            ctx,
+            lastBar2.time,
+            intervalMs,
+            this.dataStore.length - 1,
+            viewport,
+            this.scaleManager,
+            theme,
+            chartW,
+            subPaneY,
+            this.uiConfig.timeAxis
+          );
+        }
       }
     }
     if (this.crosshair) {
@@ -23635,8 +23649,10 @@ var _ChartEngine = class _ChartEngine {
     }
   }
   onResize() {
+    if (this._isDestroyed) return;
     const dpr = window.devicePixelRatio || 1;
     const rect = this.canvasWrap.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
     this._cachedWrapRect = rect;
     this._cachedDrawRect = this.drawCanvas.getBoundingClientRect();
     for (const c of [this.canvas, this.tradeCanvas, this.drawCanvas]) {