acttrader-charts 1.0.18 → 1.0.19

package/README.md

@@ -177,6 +177,8 @@ chart.setLevels([], 'label', 'price', 'pending'); // clear all of one type
 
 **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
@@ -204,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:**
@@ -784,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-CjgSMwdG.d.cts → MACD-DZxpf0eQ.d.cts}

@@ -1126,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;
@@ -1173,6 +1181,19 @@ type ChartEventMap = {
     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-CjgSMwdG.d.ts → MACD-DZxpf0eQ.d.ts}

@@ -1126,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;
@@ -1173,6 +1181,19 @@ type ChartEventMap = {
     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/index.cjs

@@ -1727,6 +1727,21 @@ function hasPnl(level) {
 function rectsOverlapY(ay, ah, by, bh) {
   return ay < by + bh && ay + ah > by;
 }
+function cascadeBracketAwayFromEntry(entry, preferredBoxY, boxH, direction, sameColumnObstacles) {
+  const obstacles = [];
+  if (entry) obstacles.push(entry);
+  for (const o of sameColumnObstacles) obstacles.push(o);
+  let boxY = preferredBoxY;
+  let attempts = 0;
+  const maxAttempts = obstacles.length + 2;
+  while (attempts < maxAttempts) {
+    const hit = obstacles.some((o) => rectsOverlapY(boxY, boxH, o.boxY, o.boxH));
+    if (!hit) break;
+    boxY += direction * (boxH + 2);
+    attempts++;
+  }
+  return boxY;
+}
 function getLevelDisplayText(level, price, precision) {
   if (level.data?._isDraft) {
     const p = level;
@@ -1958,6 +1973,54 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     selectedLabel,
     bracketBoxH
   );
+  const bracketItems = [];
+  const fallbackX = chartW * BRACKET_BASE_RATIO;
+  for (const level of levels) {
+    if (level.label !== hoveredLabel && level.label !== selectedLabel) continue;
+    const bh = level;
+    const mainDrag = draggingLabel === level.label;
+    if (bh.stopLossPrice !== void 0) {
+      const key = `${level.label}:stopLoss`;
+      const ownDrag = draggingLabel === key;
+      const price = ownDrag && dragNewPrice !== null ? dragNewPrice : mainDrag && dragNewSLPrice !== null ? dragNewSLPrice : bh.stopLossPrice;
+      bracketItems.push({
+        key,
+        label: level.label,
+        y: scale.yToPixel(price, priceRange, priceH),
+        columnX: bracketLineXMap.get(key) ?? fallbackX
+      });
+    }
+    if (bh.takeProfitPrice !== void 0) {
+      const key = `${level.label}:takeProfit`;
+      const ownDrag = draggingLabel === key;
+      const price = ownDrag && dragNewPrice !== null ? dragNewPrice : mainDrag && dragNewTPPrice !== null ? dragNewTPPrice : bh.takeProfitPrice;
+      bracketItems.push({
+        key,
+        label: level.label,
+        y: scale.yToPixel(price, priceRange, priceH),
+        columnX: bracketLineXMap.get(key) ?? fallbackX
+      });
+    }
+  }
+  bracketItems.sort((a, b) => a.y - b.y);
+  const bracketBoxYMap = /* @__PURE__ */ new Map();
+  const placedBrackets = [];
+  for (const item of bracketItems) {
+    const entry = layouts.get(item.label);
+    const preferredBoxY = item.y - bracketBoxH / 2;
+    const entryRect = entry ? { boxY: entry.boxY, boxH: entry.boxH } : null;
+    const dir = entry ? Math.sign(item.y - entry.y) || 1 : 1;
+    const sameColObstacles = placedBrackets.filter((p) => p.columnX === item.columnX);
+    const newBoxY = cascadeBracketAwayFromEntry(
+      entryRect,
+      preferredBoxY,
+      bracketBoxH,
+      dir,
+      sameColObstacles
+    );
+    bracketBoxYMap.set(item.key, newBoxY);
+    placedBrackets.push({ columnX: item.columnX, boxY: newBoxY, boxH: bracketBoxH });
+  }
   const activeLabel = hoveredLabel ?? selectedLabel;
   const bracketPnlHostLabel = draftOrderLabel ?? selectedLabel;
   const visibleMeasured = measured.filter((m) => !collapsedLabels.has(m.level.label));
@@ -2009,7 +2072,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       draftQtyPillAreas,
       dragNewSLPrice,
       dragNewTPPrice,
-      buttonScale
+      buttonScale,
+      bracketBoxYMap
     );
     const ec = labelToExpandedCluster.get(level.label);
     if (ec && layout.boxY !== layout.y - boxH / 2) {
@@ -2022,7 +2086,6 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       const bh = offLevel;
       const slDragKey = `${offLevel.label}:stopLoss`;
       const tpDragKey = `${offLevel.label}:takeProfit`;
-      const fallbackX = chartW * BRACKET_BASE_RATIO;
       const offMainDragActive = draggingLabel === offLevel.label;
       const offSlPrice = offMainDragActive && dragNewSLPrice !== null ? dragNewSLPrice : bh.stopLossPrice;
       const offTpPrice = offMainDragActive && dragNewTPPrice !== null ? dragNewTPPrice : bh.takeProfitPrice;
@@ -2046,7 +2109,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
           hideConfirmCancel,
           bh._slOrderLabel,
           void 0,
-          buttonScale
+          buttonScale,
+          bracketBoxYMap.get(slDragKey)
         );
       }
       if (offTpPrice !== void 0) {
@@ -2069,7 +2133,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
           hideConfirmCancel,
           bh._tpOrderLabel,
           void 0,
-          buttonScale
+          buttonScale,
+          bracketBoxYMap.get(tpDragKey)
         );
       }
     }
@@ -2215,7 +2280,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, hideConfirmCancel = false, draftBracketPnl, showQuantityField = false, draftQtyPillAreas, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1) {
+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, draftBracketPnl, showQuantityField = false, draftQtyPillAreas, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, bracketBoxYMap) {
   const { y, boxY, boxW, boxH } = layout;
   const color = levelColor(level, colors, theme);
   const active = hovered || selected;
@@ -2289,7 +2354,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         hideConfirmCancel,
         bracketHost._slOrderLabel,
         draftBracketPnl?.sl,
-        buttonScale
+        buttonScale,
+        bracketBoxYMap?.get(slDragKey)
       );
     } else if (draggingLabel === slDragKey && dragNewPrice !== null) {
       const bLineX = chartW * BRACKET_BASE_RATIO;
@@ -2336,7 +2402,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         hideConfirmCancel,
         bracketHost._tpOrderLabel,
         draftBracketPnl?.tp,
-        buttonScale
+        buttonScale,
+        bracketBoxYMap?.get(tpDragKey)
       );
     } else if (draggingLabel === tpDragKey && dragNewPrice !== null) {
       const bLineX = chartW * BRACKET_BASE_RATIO;
@@ -2670,7 +2737,7 @@ function drawAddBracketButton(ctx, level, bracketType, entryY, bracketLineX, cha
     h: bH
   });
 }
-function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRange, priceH, bracketLineX, chartW, theme, precision, draggingLabel, dragNewPrice, hitAreas, dragAreas, hideConfirmCancel, bracketOrderLabel, pnlText, buttonScale = 1) {
+function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRange, priceH, bracketLineX, chartW, theme, precision, draggingLabel, dragNewPrice, hitAreas, dragAreas, hideConfirmCancel, bracketOrderLabel, pnlText, buttonScale = 1, boxYOverride) {
   const closeR = CLOSE_R * Math.min(Math.max(buttonScale, 1), 3);
   const isDraggingThis = draggingLabel === `${level.label}:${bracketType}`;
   const price = isDraggingThis && dragNewPrice !== null ? dragNewPrice : bracketPrice;
@@ -2695,7 +2762,13 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
   const bW = BRACKET_BOX_PAD_X + textW + pnlW + BRACKET_BOX_PAD_X + closeSlot;
   const bH = hideConfirmCancel ? BRACKET_BOX_H : Math.max(BRACKET_BOX_H, closeR * 2 + BRACKET_BOX_PAD_Y * 2);
   const bX = bracketLineX - bW - 2;
-  const bY = y - bH / 2;
+  const naturalBoxY = y - bH / 2;
+  const bY = boxYOverride ?? naturalBoxY;
+  const boxCenterY = bY + bH / 2;
+  const displaced = Math.abs(bY - naturalBoxY) >= 2;
+  if (displaced) {
+    drawBracketLeader(ctx, bX + bW / 2, boxCenterY, y, theme);
+  }
   ctx.fillStyle = monoBoxBg(theme, false);
   ctx.strokeStyle = monoColor(theme);
   ctx.lineWidth = 0.8;
@@ -2705,15 +2778,15 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
   ctx.fillStyle = monoColor(theme);
   ctx.textAlign = "left";
   ctx.textBaseline = "middle";
-  ctx.fillText(boxLabel, bX + BRACKET_BOX_PAD_X, y);
+  ctx.fillText(boxLabel, bX + BRACKET_BOX_PAD_X, boxCenterY);
   if (pnlText) {
     const isLoss = pnlText.trim().startsWith("-");
     ctx.fillStyle = isLoss ? theme.candle.down : theme.candle.up;
-    ctx.fillText(pnlText, bX + BRACKET_BOX_PAD_X + textW + BRACKET_BOX_PAD_X, y);
+    ctx.fillText(pnlText, bX + BRACKET_BOX_PAD_X + textW + BRACKET_BOX_PAD_X, boxCenterY);
   }
   if (!hideConfirmCancel) {
     const btnX = bX + bW - BRACKET_BOX_PAD_X / 2 - closeR;
-    const btnY = y;
+    const btnY = boxCenterY;
     ctx.fillStyle = monoColor(theme);
     ctx.beginPath();
     ctx.arc(btnX, btnY, closeR, 0, Math.PI * 2);
@@ -2771,6 +2844,19 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
     isBracket: true
   });
 }
+function drawBracketLeader(ctx, leaderX, pillCenterY, realY, theme) {
+  if (Math.abs(pillCenterY - realY) < 2) return;
+  ctx.save();
+  ctx.strokeStyle = monoColor(theme);
+  ctx.globalAlpha = 0.35;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([2, 3]);
+  ctx.beginPath();
+  ctx.moveTo(leaderX, pillCenterY);
+  ctx.lineTo(leaderX, realY);
+  ctx.stroke();
+  ctx.restore();
+}
 function drawGripHandle(ctx, x, boxY, boxH, colors, hovered) {
   const dotColor = hovered ? colors.dragHandleHover : colors.dragHandle;
   const cols = 2;
@@ -17550,6 +17636,16 @@ var _ChartEngine = class _ChartEngine {
     this.expandedClusters = /* @__PURE__ */ new Set();
     this.hoveredTradeLabel = null;
     this.selectedTradeLabel = null;
+    /**
+     * Label of the level whose external edit form is currently open (i.e. the label for which
+     * `tradeLevelEditOpen` was most recently emitted and no matching cancel/confirm has fired yet).
+     * Distinct from `selectedTradeLabel`, which can also be set by a plain desktop hover-click
+     * that just shows brackets without opening the form. Used so outside-click / cross-button
+     * can issue a proper cancel (emit `tradeLevelEditCancelled`) even when no pending drag is
+     * staged — e.g. the user opened the form on a position that has no SL/TP yet and clicks
+     * elsewhere without adding anything.
+     */
+    this._editOpenLabel = null;
     /** Estimated PNL text for draft order SL/TP bracket lines, set by setDraftBracketPnl(). */
     this.draftBracketPnl = {};
     // TFC components
@@ -17984,6 +18080,30 @@ var _ChartEngine = class _ChartEngine {
         this._handleTradeLevelClose(closeHit);
         return;
       }
+      if (!this.drawingManager.getActiveTool()) {
+        const editHit = hitTestTradeLevelEdit(x, y, this.tradeLevelEditAreas);
+        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
+            });
+          }
+          return;
+        }
+      }
       if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
         const dragHit = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
         if (dragHit) {
@@ -18001,6 +18121,7 @@ var _ChartEngine = class _ChartEngine {
               }
               this.renderTradeLayer();
               const { slPrice: _sl1, tpPrice: _tp1 } = this._resolveBracketPrices(level);
+              this._editOpenLabel = level.label;
               this.emitter.emit("tradeLevelEditOpen", {
                 label: level.label,
                 type: level.type,
@@ -18026,6 +18147,35 @@ var _ChartEngine = class _ChartEngine {
           return;
         }
       }
+      if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
+        const hoverHit = hitTestTradeLevelHover(x, y, this.tradeHoverAreas);
+        if (hoverHit) {
+          e.preventDefault();
+          const level = this.levels.find((l) => l.label === hoverHit.label);
+          if (level) {
+            const hasPending = this.pendingLevelDrags.has(hoverHit.label);
+            if (this.selectedTradeLabel === hoverHit.label && !hasPending) {
+              this.selectedTradeLabel = null;
+            } else {
+              this.selectedTradeLabel = hoverHit.label;
+            }
+            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
+            });
+            return;
+          }
+        }
+      }
       this.drawingManager.selectDrawing(null);
       this.hideMobileDrawingFlyout();
       if (this.expandedClusters.size > 0) {
@@ -18302,27 +18452,6 @@ var _ChartEngine = class _ChartEngine {
         this._handleTradeLevelClose(closedLevel);
         return;
       }
-      if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
-        const dragHit = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
-        if (dragHit) {
-          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";
-              return;
-            }
-          }
-        }
-      }
-      if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
-        const addHit = hitTestTradeLevelAddBracket(x, y, this.tradeAddBracketAreas);
-        if (addHit) {
-          this._startAddBracketFromHit(addHit, y);
-          this.drawCanvas.style.cursor = "ns-resize";
-          return;
-        }
-      }
       if (!this.drawingManager.getActiveTool()) {
         const editHit = hitTestTradeLevelEdit(x, y, this.tradeLevelEditAreas);
         if (editHit) {
@@ -18331,6 +18460,7 @@ var _ChartEngine = class _ChartEngine {
             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,
@@ -18345,6 +18475,27 @@ var _ChartEngine = class _ChartEngine {
           return;
         }
       }
+      if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
+        const addHit = hitTestTradeLevelAddBracket(x, y, this.tradeAddBracketAreas);
+        if (addHit) {
+          this._startAddBracketFromHit(addHit, y);
+          this.drawCanvas.style.cursor = "ns-resize";
+          return;
+        }
+      }
+      if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
+        const dragHit = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
+        if (dragHit) {
+          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";
+              return;
+            }
+          }
+        }
+      }
       const hoverHit = hitTestTradeLevelHover(x, y, this.tradeHoverAreas);
       if (hoverHit) {
         const hasPending = this.pendingLevelDrags.has(hoverHit.label);
@@ -18358,6 +18509,7 @@ var _ChartEngine = class _ChartEngine {
           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,
@@ -18372,9 +18524,27 @@ var _ChartEngine = class _ChartEngine {
         }
         return;
       } else if (this.selectedTradeLabel !== null) {
-        if (!this.hideLevelConfirmCancel && !this.pendingLevelDrags.has(this.selectedTradeLabel)) {
-          this.selectedTradeLabel = null;
-          this.renderTradeLayer();
+        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.revertPendingChanges(lbl);
+          }
         }
       }
       if (this.expandedClusters.size > 0) {
@@ -20086,9 +20256,11 @@ var _ChartEngine = class _ChartEngine {
     const idx = this.levels.findIndex((l) => l.label === label);
     if (idx === -1) return;
     const lvl = this.levels[idx];
+    if (lvl.lots === qty) return;
     if (!this.originalQtyByLabel.has(label)) {
       this.originalQtyByLabel.set(label, lvl.lots);
     }
+    const previousLots = this.originalQtyByLabel.get(label) ?? lvl.lots ?? qty;
     this.levels = [
       ...this.levels.slice(0, idx),
       { ...lvl, lots: qty },
@@ -20097,6 +20269,13 @@ var _ChartEngine = class _ChartEngine {
     if (label !== this.draftOrderLabel) {
       this.pendingQtyChanges.set(label, qty);
     }
+    this.emitter.emit("tradeLevelQtyChange", {
+      label,
+      type: label === this.draftOrderLabel ? "draft" : lvl.type,
+      newLots: qty,
+      previousLots,
+      isFullscreen: this.isFullscreen
+    });
     this.renderTradeLayer();
   }
   openDraftQtyFlyout(pill) {
@@ -20305,7 +20484,17 @@ var _ChartEngine = class _ChartEngine {
         newLevels[i] = { ...ml, lots: pendingQty };
       }
     }
-    this.levels = [...this.levels.filter((l) => l.type !== type), ...newLevels];
+    const preservedDraft = this.draftOrderLabel !== null ? this.levels.find(
+      (l) => l.type === type && l.label === this.draftOrderLabel && !newLevels.some((n) => n.label === l.label)
+    ) : void 0;
+    this.levels = [
+      ...this.levels.filter((l) => l.type !== type),
+      ...newLevels,
+      ...preservedDraft ? [preservedDraft] : []
+    ];
+    if (this.selectedTradeLabel !== null && !this.levels.some((l) => l.label === this.selectedTradeLabel)) {
+      this.selectedTradeLabel = null;
+    }
     this.recomputeRenderStyle();
     this.renderTradeLayer();
     return this;
@@ -21362,6 +21551,7 @@ var _ChartEngine = class _ChartEngine {
     if (!changes) return;
     const level = this.levels.find((l) => l.label === label);
     if (!level) return;
+    if (this._editOpenLabel === label) this._editOpenLabel = null;
     if (label === this.draftOrderLabel) {
       const mainEntry = changes.find((c) => c.field === "main");
       const draft = level;
@@ -21455,6 +21645,15 @@ var _ChartEngine = class _ChartEngine {
         }
         this.originalQtyByLabel.delete(lbl);
       }
+      const revertedLvl = this.levels.find((l) => l.label === lbl);
+      if (revertedLvl) {
+        if (this._editOpenLabel === lbl) this._editOpenLabel = null;
+        this.emitter.emit("tradeLevelEditCancelled", {
+          label: lbl,
+          type: revertedLvl.type,
+          isFullscreen: this.isFullscreen
+        });
+      }
     }
     this.selectedTradeLabel = null;
     this.draftBracketPnl = {};
@@ -22135,9 +22334,31 @@ var _ChartEngine = class _ChartEngine {
       return;
     }
     const isDraftOrder = closedLevel.label === this.draftOrderLabel;
+    const pendingBeforeRevert = this.pendingLevelDrags.get(closedLevel.label);
+    const isEditFormOpen = this._editOpenLabel === closedLevel.label;
+    const onlyIsNewPending = !!pendingBeforeRevert && pendingBeforeRevert.length > 0 && pendingBeforeRevert.every((c) => c.isNew);
+    const noPending = !pendingBeforeRevert || pendingBeforeRevert.length === 0;
+    const isCancelUnsavedEdit = !isDraftOrder && isEditFormOpen && (onlyIsNewPending || noPending);
     this.revertPendingChanges(closedLevel.label);
     this.pendingLevelDrags.delete(closedLevel.label);
     if (isDraftOrder) return;
+    if (isCancelUnsavedEdit) {
+      if (noPending) {
+        const lvl = this.levels.find((l) => l.label === closedLevel.label);
+        this._editOpenLabel = null;
+        this.selectedTradeLabel = null;
+        this.renderTradeLayer();
+        if (lvl) {
+          this.emitter.emit("tradeLevelEditCancelled", {
+            label: closedLevel.label,
+            type: lvl.type,
+            isFullscreen: this.isFullscreen
+          });
+        }
+      }
+      return;
+    }
+    if (this._editOpenLabel === closedLevel.label) this._editOpenLabel = null;
     const originalLevel = this.levels.find((l) => l.label === closedLevel.label);
     const isEntryOrder = originalLevel?.type === "position" && !!originalLevel.entryPriceEditable;
     const closeAction = closedLevel.type === "position" && !isEntryOrder ? "CLOSED" : "CANCELLED";