acttrader-charts 1.0.20 → 1.0.21

package/dist/index.cjs

@@ -11388,6 +11388,14 @@ var DrawingManager = class {
     this.onDrawingsChange = null;
     /** Called when a text-type drawing is first completed — ChartEngine shows the text input. */
     this.onStartTextEdit = null;
+    /**
+     * Called after drag/resize mutates a drawing's points so ChartEngine can
+     * refresh each point's `timestamp` from the current dataStore. Required
+     * because DrawingManager has no access to the data layer, and drag
+     * reconstructs points from raw (barIndex, price) deltas that strip the
+     * original point's timestamp.
+     */
+    this.onPointsMutated = null;
     /** Set to true by ChartEngine while the text input is focused — prevents Delete/Backspace from deleting the drawing. */
     this.editingText = false;
     // Drag state (move whole drawing)
@@ -11482,14 +11490,18 @@ var DrawingManager = class {
       const dBar = point.barIndex - this.dragStartMouse.barIndex;
       const dPrice = point.price - this.dragStartMouse.price;
       for (let i = 0; i < this.dragDrawing.points.length; i++) {
+        const start = this.dragStartPoints[i];
+        if (!start) continue;
         this.dragDrawing.points[i] = {
-          barIndex: this.dragStartPoints[i].barIndex + dBar,
-          price: this.dragStartPoints[i].price + dPrice
+          barIndex: start.barIndex + dBar,
+          price: start.price + dPrice
         };
       }
+      this.onPointsMutated?.(this.dragDrawing);
     }
     if (this.resizeDrawing && this.resizePointIndex >= 0) {
       this.resizeDrawing.points[this.resizePointIndex] = { ...point };
+      this.onPointsMutated?.(this.resizeDrawing);
     }
   }
   /**
@@ -17666,6 +17678,13 @@ var _ChartEngine = class _ChartEngine {
     /** Pending resize — committed only after mouse moves past DRAW_GESTURE_THRESHOLD. */
     this._pendingDrawResize = null;
     // px
+    /**
+     * Pending trade-level drag — committed only after mouse moves past TRADE_DRAG_PIXEL_THRESHOLD.
+     * A mouseup before the threshold means it was a click: route to _openTradeLevelEditForm instead
+     * of finishing a zero-delta drag (which would otherwise stage a spurious pending change).
+     */
+    this._pendingTradeDrag = null;
+    // px
     // Pane resize
     this.paneHeightOverrides = /* @__PURE__ */ new Map();
     this.separatorDrag = null;
@@ -17681,6 +17700,21 @@ var _ChartEngine = class _ChartEngine {
     // lerp target; null = snap on next render
     this._lockedAutoFitBase = null;
     // non-null = user has manually adjusted Y-axis
+    /**
+     * When setState() restores a persisted viewport but data isn't loaded yet,
+     * we stash the desired time window here and apply it from loadData() once
+     * bars are available. Cleared after one application.
+     */
+    this._pendingViewportRestore = null;
+    /**
+     * Debounces viewport/priceScale stateChange emissions during continuous
+     * gestures (pan, wheel-zoom, price-scale drag). Pan/zoom don't emit
+     * stateChange directly because doing so per-frame would be wasteful; this
+     * timer coalesces bursts so the persisted viewport catches up a few ms
+     * after the user stops interacting. Paired with the consumer's own
+     * debounce (e.g. CRM's 800ms save) for minimal traffic.
+     */
+    this._viewportPersistTimer = null;
     this.axisDrag = null;
     this.subPaneScaleFactors = /* @__PURE__ */ new Map();
     this._mobileCrosshairActive = false;
@@ -17841,14 +17875,14 @@ var _ChartEngine = class _ChartEngine {
         const dx = x - this._pendingDrawDrag.startX;
         const dy = y - this._pendingDrawDrag.startY;
         if (Math.sqrt(dx * dx + dy * dy) > _ChartEngine.DRAW_GESTURE_THRESHOLD) {
-          this.drawingManager.startDrag(this._pendingDrawDrag.drawing, {
-            barIndex: rawBarIndex,
-            price
-          });
+          this.drawingManager.startDrag(
+            this._pendingDrawDrag.drawing,
+            this.makeDrawingPoint(rawBarIndex, price)
+          );
           this._pendingDrawDrag = null;
         }
       }
-      this.drawingManager.onMouseMove({ barIndex: rawBarIndex, price });
+      this.drawingManager.onMouseMove(this.makeDrawingPoint(rawBarIndex, price));
       if (this.axisDrag) {
         if (this.axisDrag.axis === "price") {
           const delta = y - this.axisDrag.startPos;
@@ -17890,6 +17924,18 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleRender();
         return;
       }
+      if (this._pendingTradeDrag) {
+        const dx = x - this._pendingTradeDrag.startX;
+        const dy = y - this._pendingTradeDrag.startY;
+        if (Math.sqrt(dx * dx + dy * dy) > _ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD) {
+          const { dragHit, level, hitY } = this._pendingTradeDrag;
+          this._pendingTradeDrag = null;
+          this._startTradeDragFromHit(dragHit, level, hitY);
+          this.drawCanvas.style.cursor = "ns-resize";
+        } else {
+          return;
+        }
+      }
       if (this.tradeDragHandler?.active) {
         const moveResult = this.tradeDragHandler.onMouseMove(
           y,
@@ -17930,6 +17976,10 @@ var _ChartEngine = class _ChartEngine {
         const dragHover = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
         if (dragHover) {
           this.drawCanvas.style.cursor = "ns-resize";
+          if (dragHover.label !== this.hoveredTradeLabel) {
+            this.hoveredTradeLabel = dragHover.label;
+            this.renderTradeLayer();
+          }
           this.scheduleRender();
           return;
         }
@@ -17999,6 +18049,16 @@ var _ChartEngine = class _ChartEngine {
       this.scheduleRender();
     };
     this.onMouseUp = () => {
+      if (this._pendingTradeDrag) {
+        const { level } = this._pendingTradeDrag;
+        this._pendingTradeDrag = null;
+        if (this._editOpenLabel === level.label && !this.pendingLevelDrags.has(level.label)) {
+          this._cancelEditAndDeselect(level.label);
+          return;
+        }
+        this._openTradeLevelEditForm(level);
+        return;
+      }
       if (this.tradeDragHandler?.active) {
         const result = this.tradeDragHandler.endDrag();
         if (result) {
@@ -18015,9 +18075,11 @@ var _ChartEngine = class _ChartEngine {
         return;
       }
       if (this.axisDrag) {
+        const wasPriceAxis = this.axisDrag.axis === "price" || this.axisDrag.axis === "time";
         this.axisDrag = null;
         this.drawCanvas.style.cursor = "default";
         this.scheduleRender();
+        if (wasPriceAxis) this.scheduleViewportPersist();
       }
       if (this.separatorDrag) {
         this.separatorDrag = null;
@@ -18179,22 +18241,7 @@ var _ChartEngine = class _ChartEngine {
         if (editHit) {
           e.preventDefault();
           const level = this.levels.find((l) => l.label === editHit.label);
-          if (level) {
-            this.selectedTradeLabel = level.label;
-            this.renderTradeLayer();
-            const { slPrice: _slE, tpPrice: _tpE } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _slE,
-              takeProfitPrice: _tpE,
-              isFullscreen: this.isFullscreen
-            });
-          }
+          if (level) this._openTradeLevelEditForm(level);
           return;
         }
       }
@@ -18209,23 +18256,10 @@ var _ChartEngine = class _ChartEngine {
             if (this.hideLevelConfirmCancel && !isMobileDraggable) {
               const hasPending = this.pendingLevelDrags.has(level.label);
               if (this.selectedTradeLabel === level.label && !hasPending) {
-                this.selectedTradeLabel = null;
-              } else {
-                this.selectedTradeLabel = level.label;
+                this._cancelEditAndDeselect(level.label);
+                return;
               }
-              this.renderTradeLayer();
-              const { slPrice: _sl1, tpPrice: _tp1 } = this._resolveBracketPrices(level);
-              this._editOpenLabel = level.label;
-              this.emitter.emit("tradeLevelEditOpen", {
-                label: level.label,
-                type: level.type,
-                data: level.data,
-                price: level.price,
-                side: level.side,
-                stopLossPrice: _sl1,
-                takeProfitPrice: _tp1,
-                isFullscreen: this.isFullscreen
-              });
+              this._openTradeLevelEditForm(level);
               return;
             }
             this._startTradeDragFromHit(dragHit, level, y);
@@ -18249,23 +18283,10 @@ var _ChartEngine = class _ChartEngine {
           if (level) {
             const hasPending = this.pendingLevelDrags.has(hoverHit.label);
             if (this.selectedTradeLabel === hoverHit.label && !hasPending) {
-              this.selectedTradeLabel = null;
-            } else {
-              this.selectedTradeLabel = hoverHit.label;
+              this._cancelEditAndDeselect(hoverHit.label);
+              return;
             }
-            const { slPrice: _slH, tpPrice: _tpH } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.renderTradeLayer();
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _slH,
-              takeProfitPrice: _tpH,
-              isFullscreen: this.isFullscreen
-            });
+            this._openTradeLevelEditForm(level);
             return;
           }
         }
@@ -18464,8 +18485,10 @@ var _ChartEngine = class _ChartEngine {
         return;
       }
       if (this.axisDrag) {
+        const wasPriceAxis = this.axisDrag.axis === "price" || this.axisDrag.axis === "time";
         this.axisDrag = null;
         this.scheduleRender();
+        if (wasPriceAxis) this.scheduleViewportPersist();
         return;
       }
       const wasAnchorTouch = this._drawTouchAnchorActive;
@@ -18550,22 +18573,7 @@ var _ChartEngine = class _ChartEngine {
         const editHit = hitTestTradeLevelEdit(x, y, this.tradeLevelEditAreas);
         if (editHit) {
           const level = this.levels.find((l) => l.label === editHit.label);
-          if (level) {
-            this.selectedTradeLabel = level.label;
-            this.renderTradeLayer();
-            const { slPrice: _sl2, tpPrice: _tp2 } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _sl2,
-              takeProfitPrice: _tp2,
-              isFullscreen: this.isFullscreen
-            });
-          }
+          if (level) this._openTradeLevelEditForm(level);
           return;
         }
       }
@@ -18583,8 +18591,7 @@ var _ChartEngine = class _ChartEngine {
           const level = this.levels.find((l) => l.label === dragHit.label);
           if (level) {
             if (!(this.hideLevelConfirmCancel && !dragHit.isBracket)) {
-              this._startTradeDragFromHit(dragHit, level, y);
-              this.drawCanvas.style.cursor = "ns-resize";
+              this._pendingTradeDrag = { dragHit, level, hitY: y, startX: x, startY: y };
               return;
             }
           }
@@ -18594,49 +18601,24 @@ var _ChartEngine = class _ChartEngine {
       if (hoverHit) {
         const hasPending = this.pendingLevelDrags.has(hoverHit.label);
         if (this.selectedTradeLabel === hoverHit.label && !hasPending) {
-          this.selectedTradeLabel = null;
+          this._cancelEditAndDeselect(hoverHit.label);
+          return;
+        }
+        const level = this.levels.find((l) => l.label === hoverHit.label);
+        if (level) {
+          this._openTradeLevelEditForm(level);
         } else {
           this.selectedTradeLabel = hoverHit.label;
-        }
-        this.renderTradeLayer();
-        if (this.hideLevelConfirmCancel) {
-          const level = this.levels.find((l) => l.label === hoverHit.label);
-          if (level) {
-            const { slPrice: _sl3, tpPrice: _tp3 } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _sl3,
-              takeProfitPrice: _tp3,
-              isFullscreen: this.isFullscreen
-            });
-          }
+          this.renderTradeLayer();
         }
         return;
       } else if (this.selectedTradeLabel !== null) {
         if (!this.hideLevelConfirmCancel) {
           const lbl = this.selectedTradeLabel;
           const pending = this.pendingLevelDrags.get(lbl);
-          const isEditFormOpen = this._editOpenLabel === lbl;
           if (!pending || pending.length === 0) {
-            if (isEditFormOpen) {
-              const lvl = this.levels.find((l) => l.label === lbl);
-              this._editOpenLabel = null;
-              if (lvl) {
-                this.emitter.emit("tradeLevelEditCancelled", {
-                  label: lbl,
-                  type: lvl.type,
-                  isFullscreen: this.isFullscreen
-                });
-              }
-            }
-            this.selectedTradeLabel = null;
-            this.renderTradeLayer();
-          } else if (pending.every((c) => c.isNew)) {
+            this._cancelEditAndDeselect(lbl);
+          } else {
             this.revertPendingChanges(lbl);
           }
         }
@@ -18691,10 +18673,9 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleRender();
         return;
       }
-      const consumed = this.drawingManager.onMouseDown({
-        barIndex: rawBarIndex,
-        price
-      });
+      const consumed = this.drawingManager.onMouseDown(
+        this.makeDrawingPoint(rawBarIndex, price)
+      );
       if (!consumed) {
         const handleHit = this.drawingManager.getHandleAtPoint(
           x,
@@ -19393,6 +19374,12 @@ var _ChartEngine = class _ChartEngine {
       this.drawCanvas.style.cursor = "default";
     });
     this.drawingManager.onDrawingsChange = () => this.emitStateChange();
+    this.drawingManager.onPointsMutated = (drawing) => {
+      for (const pt of drawing.points) {
+        const t = this.barIndexToTimestamp(pt.barIndex);
+        if (t != null) pt.timestamp = t;
+      }
+    };
     this.drawingManager.onStartTextEdit = (drawing) => this.showTextInput(drawing);
     this.panHandler = new PanHandler(
       this.drawCanvas,
@@ -19402,6 +19389,7 @@ var _ChartEngine = class _ChartEngine {
         this.clearDuration();
         this.checkNeedMoreData();
         this.scheduleRender();
+        this.scheduleViewportPersist();
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
@@ -19413,6 +19401,7 @@ var _ChartEngine = class _ChartEngine {
         const pricePerPixel = (currentRange.max - currentRange.min) / priceH;
         this.pricePanOffset += deltaY * pricePerPixel;
         this.scheduleRender();
+        this.scheduleViewportPersist();
       },
       () => {
         this._isPanning = true;
@@ -19435,6 +19424,7 @@ var _ChartEngine = class _ChartEngine {
         this.clearDuration();
         this.checkNeedMoreData();
         this.scheduleRender();
+        this.scheduleViewportPersist();
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
@@ -19455,6 +19445,7 @@ var _ChartEngine = class _ChartEngine {
         this.clearDuration();
         this.checkNeedMoreData();
         this.scheduleRender();
+        this.scheduleViewportPersist();
       }
     );
     this.drawCanvas.addEventListener("mousemove", this.onMouseMove);
@@ -19492,6 +19483,15 @@ var _ChartEngine = class _ChartEngine {
       return true;
     }).map((s) => s.indicator);
   }
+  /** Schedules a stateChange emission so viewport/priceScale changes made by
+   *  pan/zoom/price-scale drag reach persistence. Coalesces rapid calls. */
+  scheduleViewportPersist() {
+    if (this._viewportPersistTimer) clearTimeout(this._viewportPersistTimer);
+    this._viewportPersistTimer = setTimeout(() => {
+      this._viewportPersistTimer = null;
+      this.emitStateChange();
+    }, 500);
+  }
   get isFullscreen() {
     return this._isCssFullscreen || !!document.fullscreenElement;
   }
@@ -19583,6 +19583,22 @@ var _ChartEngine = class _ChartEngine {
     }
     this.recomputeIndicators();
     this.reanchorDrawingsByTimestamp();
+    if (this._pendingViewportRestore) {
+      const pending = this._pendingViewportRestore;
+      this._pendingViewportRestore = null;
+      if (pending.priceScale) {
+        this.priceScaleFactor = pending.priceScale.factor;
+        this.pricePanOffset = pending.priceScale.panOffset;
+        this._displayedPriceRange = null;
+        this._lockedAutoFitBase = null;
+      }
+      if (pending.viewport) {
+        this.applyViewportFromTimestamps(
+          pending.viewport.startTime,
+          pending.viewport.endTime
+        );
+      }
+    }
     this.updateCountdownState();
     this.scheduleRender();
     return this;
@@ -19603,6 +19619,7 @@ var _ChartEngine = class _ChartEngine {
       };
       this._targetViewport = { ...this.viewport };
       this.drawingManager.shiftBarIndices(n);
+      this.reanchorDrawingsByTimestamp();
       this.recomputeIndicators();
       this.scheduleRender();
     }
@@ -20126,15 +20143,44 @@ var _ChartEngine = class _ChartEngine {
         ...d,
         points: d.points.map((p) => ({
           ...p,
-          timestamp: this.dataStore.all[Math.floor(p.barIndex)]?.time
+          // Prefer the point's own timestamp (captured at placement / drag /
+          // resize); only derive from current bars as a fallback for legacy
+          // points. Re-deriving on every export would otherwise corrupt the
+          // anchor after a timeframe change has staled the cached barIndex.
+          timestamp: p.timestamp ?? this.barIndexToTimestamp(p.barIndex)
         }))
       })),
       positionRenderStyle: this.positionRenderStyle,
       tradeDisplayFilter: this.tradeDisplayFilter,
       canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? { ...this.settingsCanvasColors } : void 0,
-      tfcEnabled: this.tfcActive
+      tfcEnabled: this.tfcActive,
+      viewport: this.getViewportTimestamps(),
+      priceScale: this.priceScaleFactor !== 1 || this.pricePanOffset !== 0 ? { factor: this.priceScaleFactor, panOffset: this.pricePanOffset } : void 0
     };
   }
+  /**
+   * Captures the current viewport as a {startTime, endTime} timestamp pair,
+   * preserving sub-bar fractional position. Returns undefined only when no
+   * bars are loaded (viewport has no meaningful time anchor).
+   */
+  getViewportTimestamps() {
+    if (this.dataStore.all.length === 0) return void 0;
+    const startTime = this.barIndexToTimestamp(this.viewport.startIndex);
+    const endTime = this.barIndexToTimestamp(this.viewport.endIndex);
+    if (startTime == null || endTime == null) return void 0;
+    return { startTime, endTime };
+  }
+  /**
+   * Restores the viewport from a timestamp pair, converting each edge back
+   * into a fractional bar index relative to the current dataStore. Callers
+   * must ensure bars are loaded before invoking.
+   */
+  applyViewportFromTimestamps(startTime, endTime) {
+    const startIndex = this.timestampToBarIndex(startTime);
+    const endIndex = this.timestampToBarIndex(endTime);
+    this.viewport = { ...this.viewport, startIndex, endIndex };
+    this._targetViewport = { ...this.viewport };
+  }
   /**
    * Restores chart configuration from a previously captured `ChartState`.
    * Call this after construction to hydrate a chart from persisted state.
@@ -20181,18 +20227,11 @@ var _ChartEngine = class _ChartEngine {
           }
         }
       }
-      const bars = this.dataStore.all;
       const resolvedDrawings = state.drawings.map((d) => ({
         ...d,
         points: d.points.map((p) => {
-          if (!p.timestamp || bars.length === 0) return p;
-          let lo = 0, hi = bars.length - 1;
-          while (lo < hi) {
-            const mid = lo + hi >> 1;
-            if ((bars[mid]?.time ?? 0) < p.timestamp) lo = mid + 1;
-            else hi = mid;
-          }
-          return { ...p, barIndex: lo + (p.barIndex - Math.floor(p.barIndex)) };
+          if (p.timestamp == null || this.dataStore.all.length === 0) return p;
+          return { ...p, barIndex: this.timestampToBarIndex(p.timestamp) };
         })
       }));
       this.drawingManager.loadDrawings(resolvedDrawings);
@@ -20210,6 +20249,25 @@ var _ChartEngine = class _ChartEngine {
         this.tfcActive = state.tfcEnabled;
         this.topBar?.setTfcActive(state.tfcEnabled);
       }
+      if (state.priceScale) {
+        this.priceScaleFactor = state.priceScale.factor;
+        this.pricePanOffset = state.priceScale.panOffset;
+        this._displayedPriceRange = null;
+        this._lockedAutoFitBase = null;
+      }
+      if (state.viewport) {
+        if (this.dataStore.all.length > 0) {
+          this.applyViewportFromTimestamps(
+            state.viewport.startTime,
+            state.viewport.endTime
+          );
+        } else {
+          this._pendingViewportRestore = {
+            viewport: state.viewport,
+            priceScale: state.priceScale
+          };
+        }
+      }
     } finally {
       this.isRestoringState = false;
     }
@@ -20218,23 +20276,120 @@ var _ChartEngine = class _ChartEngine {
     return this;
   }
   /**
-   * Re-anchors all loaded drawings to the current dataset using their stored timestamps.
-   * Called after loadData() to fix drawings restored via setState() before data was
-   * available (bars.length === 0 at restore time causes the raw barIndex fallback).
+   * Converts a fractional barIndex into an absolute unix-ms timestamp by
+   * interpolating across the containing bar. Extrapolates linearly for indexes
+   * outside [0, bars.length-1] using the adjacent bar's width.
+   *
+   * This is the inverse of `timestampToBarIndex` and the authoritative way to
+   * capture "where in time" a drawing point sits at placement, drag, or resize.
+   * Returns undefined only when no bars are loaded.
+   */
+  barIndexToTimestamp(idx) {
+    const bars = this.dataStore.all;
+    const n = bars.length;
+    if (n === 0) return void 0;
+    const first = bars[0];
+    if (!first) return void 0;
+    if (n === 1) return first.time;
+    const floorIdx = Math.floor(idx);
+    const frac = idx - floorIdx;
+    if (floorIdx < 0) {
+      const second = bars[1];
+      if (!second) return first.time;
+      return first.time + idx * (second.time - first.time);
+    }
+    if (floorIdx >= n - 1) {
+      const last = bars[n - 1];
+      const prev = bars[n - 2];
+      if (!last || !prev) return first.time;
+      return last.time + (idx - (n - 1)) * (last.time - prev.time);
+    }
+    const lo = bars[floorIdx];
+    const hi = bars[floorIdx + 1];
+    if (!lo || !hi) return first.time;
+    return lo.time + frac * (hi.time - lo.time);
+  }
+  /**
+   * Converts a unix-ms timestamp into a fractional barIndex using floor-bar
+   * containment: the result is `floorBar + (ts - floorBar.time) / (nextBar.time - floorBar.time)`.
+   * Extrapolates linearly for timestamps outside the loaded range using the edge
+   * bar width, so drawings outside the visible data still render at the correct
+   * relative offset rather than snapping to an edge.
+   *
+   * Matches TradingView's floor-bar semantics and preserves sub-bar time
+   * precision across timeframe changes.
+   */
+  timestampToBarIndex(ts) {
+    const bars = this.dataStore.all;
+    const n = bars.length;
+    if (n === 0) return 0;
+    const first = bars[0];
+    if (!first) return 0;
+    if (n === 1) return 0;
+    if (ts <= first.time) {
+      const second = bars[1];
+      if (!second) return 0;
+      const barMs2 = second.time - first.time;
+      return barMs2 > 0 ? (ts - first.time) / barMs2 : 0;
+    }
+    const lastIdx = n - 1;
+    const lastBar = bars[lastIdx];
+    const prevBar = bars[lastIdx - 1];
+    if (!lastBar || !prevBar) return 0;
+    if (ts >= lastBar.time) {
+      const barMs2 = lastBar.time - prevBar.time;
+      return lastIdx + (barMs2 > 0 ? (ts - lastBar.time) / barMs2 : 0);
+    }
+    let lo = 0, hi = lastIdx;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if ((bars[mid]?.time ?? 0) <= ts) lo = mid;
+      else hi = mid - 1;
+    }
+    const loBar = bars[lo];
+    const hiBar = bars[lo + 1];
+    if (!loBar || !hiBar) return lo;
+    const barMs = hiBar.time - loBar.time;
+    return lo + (barMs > 0 ? (ts - loBar.time) / barMs : 0);
+  }
+  /**
+   * Re-anchors all loaded drawings to the current dataset. For points with a
+   * stored timestamp, barIndex is recomputed via `timestampToBarIndex`; for
+   * points missing a timestamp (legacy saves or freshly placed points whose
+   * timestamp capture was skipped), the timestamp is backfilled from the
+   * current barIndex so subsequent data reloads remain accurate.
+   *
+   * Called after loadData(), prependData(), and whenever the underlying bars
+   * change such that cached barIndex values would otherwise drift.
    */
   reanchorDrawingsByTimestamp() {
     const bars = this.dataStore.all;
     if (bars.length === 0) return;
     for (const drawing of this.drawingManager.getDrawings()) {
       for (const pt of drawing.points) {
-        if (!pt.timestamp) continue;
-        let lo = 0, hi = bars.length - 1;
-        while (lo < hi) {
-          const mid = lo + hi >> 1;
-          if ((bars[mid]?.time ?? 0) < pt.timestamp) lo = mid + 1;
-          else hi = mid;
+        if (pt.timestamp == null) {
+          const t = this.barIndexToTimestamp(pt.barIndex);
+          if (t != null) pt.timestamp = t;
+          continue;
         }
-        pt.barIndex = lo + (pt.barIndex - Math.floor(pt.barIndex));
+        pt.barIndex = this.timestampToBarIndex(pt.timestamp);
+      }
+    }
+  }
+  /**
+   * Captures a timestamp on any drawing point that is missing one, using the
+   * current bars. Call this BEFORE mutating `dataStore.all` (insert/splice)
+   * so that points still pointing at a stale barIndex get frozen to the
+   * correct time before the mutation invalidates the index. Safe no-op for
+   * points that already have a timestamp.
+   */
+  backfillDrawingTimestamps() {
+    if (this.dataStore.all.length === 0) return;
+    for (const drawing of this.drawingManager.getDrawings()) {
+      for (const pt of drawing.points) {
+        if (pt.timestamp != null) continue;
+        const t = this.barIndexToTimestamp(pt.barIndex);
+        if (t != null) pt.timestamp = t;
       }
     }
   }
@@ -21272,7 +21427,7 @@ var _ChartEngine = class _ChartEngine {
       return;
     }
     const { chartW, priceH } = this.getChartLayout();
-    const priceRange = this.getScaledPriceRange(viewport);
+    const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(viewport);
     const bracketOrders = this.levels.filter(
       (l) => l.type === "pending" && l.ToClose != null
     );
@@ -21337,7 +21492,12 @@ var _ChartEngine = class _ChartEngine {
       this.tradeDragHandler?.dragLabel ?? null,
       this.tradeDragNewPrice,
       this.selectedTradeLabel,
-      new Set(this.pendingLevelDrags.keys()),
+      // Include _editOpenLabel so confirm/cancel buttons appear while the edit form is open
+      // even before any change is staged — e.g. editing a position with no SL/TP.
+      /* @__PURE__ */ new Set([
+        ...this.pendingLevelDrags.keys(),
+        ...this._editOpenLabel !== null ? [this._editOpenLabel] : []
+      ]),
       this.positionRenderStyle,
       this.hideLevelConfirmCancel,
       this.draftOrderLabel,
@@ -21540,6 +21700,11 @@ var _ChartEngine = class _ChartEngine {
         }
       }
     }
+    if (result.newPrice === oldPrice) {
+      this.tradeDragNewPrice = null;
+      this.renderTradeLayer();
+      return;
+    }
     const field = result.bracketType ?? "main";
     const isNew = this._isBracketNew;
     this._isBracketNew = false;
@@ -21645,7 +21810,22 @@ var _ChartEngine = class _ChartEngine {
   }
   applyPendingChanges(label) {
     const changes = this.pendingLevelDrags.get(label);
-    if (!changes) return;
+    if (!changes) {
+      if (this._editOpenLabel === label) {
+        const level2 = this.levels.find((l) => l.label === label);
+        this._editOpenLabel = null;
+        this.selectedTradeLabel = null;
+        this.renderTradeLayer();
+        if (level2) {
+          this.emitter.emit("tradeLevelConfirmed", {
+            label,
+            type: level2.type,
+            isFullscreen: this.isFullscreen
+          });
+        }
+      }
+      return;
+    }
     const level = this.levels.find((l) => l.label === label);
     if (!level) return;
     if (this._editOpenLabel === label) this._editOpenLabel = null;
@@ -21724,6 +21904,10 @@ var _ChartEngine = class _ChartEngine {
     if (!label && this.draftOrderLabel) {
       this.removeDraftOrder();
     }
+    if (label && !this.pendingLevelDrags.has(label) && this._editOpenLabel === label) {
+      this._cancelEditAndDeselect(label);
+      return;
+    }
     const toRevert = label ? this.pendingLevelDrags.has(label) ? [[label, this.pendingLevelDrags.get(label) ?? []]] : [] : [...this.pendingLevelDrags.entries()];
     for (const [lbl] of toRevert) {
       this.undoIsNewBracketMutations(lbl);
@@ -22387,10 +22571,21 @@ var _ChartEngine = class _ChartEngine {
     const y = touch.clientY - rect.top;
     const { chartW, priceH } = this.getChartLayout();
     const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
-    return {
-      barIndex: this.scaleManager.pixelToBarIndex(x, this.viewport, chartW),
-      price: this.scaleManager.pixelToPrice(y, priceRange, priceH)
-    };
+    return this.makeDrawingPoint(
+      this.scaleManager.pixelToBarIndex(x, this.viewport, chartW),
+      this.scaleManager.pixelToPrice(y, priceRange, priceH)
+    );
+  }
+  /**
+   * Builds a fully-populated DrawingPoint from raw float coordinates. Captures
+   * the absolute timestamp at this fractional barIndex so the anchor survives
+   * timeframe changes, data reloads, and serialization round-trips.
+   */
+  makeDrawingPoint(barIndex, price) {
+    const point = { barIndex, price };
+    const t = this.barIndexToTimestamp(barIndex);
+    if (t != null) point.timestamp = t;
+    return point;
   }
   /** Shared close-button handler used by both mouse click and touch tap. */
   _handleTradeLevelClose(closedLevel) {
@@ -22500,6 +22695,49 @@ var _ChartEngine = class _ChartEngine {
     }
     this.scheduleRender();
   }
+  /**
+   * Closes the edit form, clears selection, and emits `tradeLevelEditCancelled` when
+   * the edit form was actually open for this label. Shared between click-outside,
+   * repeat-click toggle, and the ✗ button so all exit paths produce the same payload.
+   */
+  _cancelEditAndDeselect(label) {
+    const wasEditFormOpen = this._editOpenLabel === label;
+    const level = this.levels.find((l) => l.label === label);
+    this._editOpenLabel = null;
+    this.selectedTradeLabel = null;
+    this.draftBracketPnl = {};
+    this.renderTradeLayer();
+    if (wasEditFormOpen && level) {
+      this.emitter.emit("tradeLevelEditCancelled", {
+        label,
+        type: level.type,
+        isFullscreen: this.isFullscreen
+      });
+    }
+  }
+  /**
+   * Opens the external edit form for a trade level by emitting `tradeLevelEditOpen`.
+   * Shared between pencil click, bare box click, and drag start so every entry
+   * point fires the same payload. No-op when the form is already open for this
+   * label, so repeat opens (e.g. pencil click followed by drag) don't spam the event.
+   */
+  _openTradeLevelEditForm(level) {
+    if (this._editOpenLabel === level.label) return;
+    this.selectedTradeLabel = level.label;
+    this._editOpenLabel = level.label;
+    const { slPrice, tpPrice } = this._resolveBracketPrices(level);
+    this.renderTradeLayer();
+    this.emitter.emit("tradeLevelEditOpen", {
+      label: level.label,
+      type: level.type,
+      data: level.data,
+      price: level.price,
+      side: level.side,
+      stopLossPrice: slPrice,
+      takeProfitPrice: tpPrice,
+      isFullscreen: this.isFullscreen
+    });
+  }
   /** Shared helper: initiate a trade level main-line drag from a hit area. */
   _startTradeDragFromHit(dragHit, level, hitY) {
     if (!this.tradeDragHandler) return;
@@ -22575,6 +22813,7 @@ var _ChartEngine = class _ChartEngine {
         );
       }
     }
+    this._openTradeLevelEditForm(level);
   }
   /** Shared helper: initiate a +SL/+TP add-bracket drag from a hit area. */
   _startAddBracketFromHit(addHit, hitY) {
@@ -22688,6 +22927,7 @@ var _ChartEngine = class _ChartEngine {
     this.dataLoader({ start: new Date(fromTime), end: new Date(toTime), interval }).then((rawBars) => {
       const bars = this.maybeAggregate(rawBars);
       if (bars.length === 0) return;
+      this.backfillDrawingTimestamps();
       const all = this.dataStore.all;
       const liveBar = all[all.length - 1];
       let insertCount = 0;
@@ -22708,6 +22948,7 @@ var _ChartEngine = class _ChartEngine {
           startIndex: this.viewport.startIndex + insertCount,
           endIndex: this.viewport.endIndex + insertCount
         };
+        this.reanchorDrawingsByTimestamp();
         this.recomputeIndicators();
         this.scheduleRender();
       }
@@ -22902,6 +23143,7 @@ var _ChartEngine = class _ChartEngine {
   }
 };
 _ChartEngine.DRAW_GESTURE_THRESHOLD = 4;
+_ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD = 3;
 var ChartEngine = _ChartEngine;
 
 // src/data/WebSocketAdapter.ts