acttrader-charts 1.0.11 → 1.0.12

package/dist/index.cjs

@@ -2100,7 +2100,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   ctx.restore();
   if (draggable) {
     drawGripHandle(ctx, gripX, boxY, boxH, colors, hovered);
-    const BTN_ZONE_W = EDIT_R * 2 + EDIT_GAP + CLOSE_R * 2 + BOX_PAD_X / 2;
+    const BTN_ZONE_W = hideConfirmCancel ? 0 : EDIT_R * 2 + EDIT_GAP + CLOSE_R * 2 + BOX_PAD_X / 2;
     dragAreas.push({
       label: level.label,
       type: level.type,
@@ -2110,7 +2110,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
       y: boxY,
       w: GRIP_W + 2 + boxW - BTN_ZONE_W,
       h: boxH,
-      isBracket: false
+      isBracket: false,
+      isBox: true
     });
     dragAreas.push({
       label: level.label,
@@ -2123,6 +2124,19 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
       h: 8,
       isBracket: false
     });
+  } else if (hideConfirmCancel && boxW > 0) {
+    dragAreas.push({
+      label: level.label,
+      type: level.type,
+      data: level.data,
+      price: level.price,
+      x: boxX,
+      y: boxY,
+      w: boxW,
+      h: boxH,
+      isBracket: false,
+      isBox: true
+    });
   }
   hoverAreas.push({
     label: level.label,
@@ -16811,8 +16825,9 @@ var _ChartEngine = class _ChartEngine {
           e.preventDefault();
           const level = this.levels.find((l) => l.label === dragHit.label);
           if (level) {
-            const isLimitStopDraftLevel = level.data?._isDraft === true && level.orderType !== "market";
-            if (this.hideLevelConfirmCancel && !dragHit.isBracket && !isLimitStopDraftLevel) {
+            const isAlreadySelected = this.selectedTradeLabel === level.label;
+            const isMobileDraggable = dragHit.isBracket || level.type === "pending" && level.orderType !== "market" && (isAlreadySelected || !dragHit.isBox);
+            if (this.hideLevelConfirmCancel && !isMobileDraggable) {
               const hasPending = this.pendingLevelDrags.has(level.label);
               if (this.selectedTradeLabel === level.label && !hasPending) {
                 this.selectedTradeLabel = null;
@@ -18883,8 +18898,10 @@ var _ChartEngine = class _ChartEngine {
   addLevelBracket(label, type) {
     const level = this.levels.find((l) => l.label === label);
     if (!level) return this;
-    const alreadyHas = type === "sl" ? level.stopLossPrice !== void 0 : level.takeProfitPrice !== void 0;
-    if (alreadyHas) return this;
+    const dragField = type === "sl" ? "stopLoss" : "takeProfit";
+    const alreadyHasInLevel = type === "sl" ? level.stopLossPrice !== void 0 : level.takeProfitPrice !== void 0;
+    const alreadyHasPending = this.pendingLevelDrags.get(label)?.some((c) => c.field === dragField && !c.isRemoval) ?? false;
+    if (alreadyHasInLevel || alreadyHasPending) return this;
     const { priceH } = this.getChartLayout();
     const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
     const entryY = this.scaleManager.yToPixel(level.price, priceRange, priceH);
@@ -18893,6 +18910,10 @@ var _ChartEngine = class _ChartEngine {
     const bracketY = entryY + (isBelowEntry ? 30 : -30);
     const defaultPrice = this.scaleManager.pixelToPrice(bracketY, priceRange, priceH);
     this.updateLevelBracket(label, type, defaultPrice);
+    const existingDrags = this.pendingLevelDrags.get(label) ?? [];
+    const filteredDrags = existingDrags.filter((c) => c.field !== dragField);
+    filteredDrags.push({ field: dragField, newPrice: defaultPrice, oldPrice: defaultPrice, isNew: true });
+    this.pendingLevelDrags.set(label, filteredDrags);
     this.emitter.emit("tradeLevelBracketActivated", {
       label,
       bracketType: type,
@@ -18955,7 +18976,20 @@ var _ChartEngine = class _ChartEngine {
    * No-op if the target doesn't exist or doesn't have the bracket type.
    */
   removeBracket(type, label) {
-    if (label) return this.updateLevelBracket(label, type, null);
+    if (label) {
+      const field = type === "sl" ? "stopLoss" : "takeProfit";
+      const level = this.levels.find((l) => l.label === label);
+      if (!level) return this;
+      const existingChange = this.pendingLevelDrags.get(label)?.find((c) => c.field === field);
+      const effectivePrice = existingChange && !existingChange.isRemoval ? existingChange.newPrice : type === "sl" ? level.stopLossPrice : level.takeProfitPrice;
+      if (effectivePrice === void 0) return this;
+      const existingDrags = this.pendingLevelDrags.get(label) ?? [];
+      const filteredDrags = existingDrags.filter((c) => c.field !== field);
+      filteredDrags.push({ field, newPrice: effectivePrice, oldPrice: effectivePrice, isRemoval: true });
+      this.pendingLevelDrags.set(label, filteredDrags);
+      this.renderTradeLayer();
+      return this;
+    }
     if (type === "sl") {
       this.draftBracketPnl = { ...this.draftBracketPnl, sl: void 0 };
     } else {
@@ -19367,25 +19401,31 @@ var _ChartEngine = class _ChartEngine {
     );
     const processedLevels = this.levels.filter((l) => !(l.type === "pending" && l.ToClose != null)).map((l) => {
       const draftChanges = this.pendingLevelDrags.get(l.label) ?? [];
-      const slDraft = draftChanges.find((c) => c.field === "stopLoss")?.newPrice;
-      const tpDraft = draftChanges.find((c) => c.field === "takeProfit")?.newPrice;
+      const slChange = draftChanges.find((c) => c.field === "stopLoss");
+      const tpChange = draftChanges.find((c) => c.field === "takeProfit");
+      const slDraft = slChange && !slChange.isRemoval ? slChange.newPrice : void 0;
+      const tpDraft = tpChange && !tpChange.isRemoval ? tpChange.newPrice : void 0;
+      const slIsRemoval = slChange?.isRemoval ?? false;
+      const tpIsRemoval = tpChange?.isRemoval ?? false;
       const mainDraft = draftChanges.find((c) => c.field === "main")?.newPrice;
       const linked = bracketOrders.filter((b) => b.ToClose === l.label);
-      if (linked.length === 0 && slDraft === void 0 && tpDraft === void 0 && mainDraft === void 0)
+      if (linked.length === 0 && slDraft === void 0 && tpDraft === void 0 && mainDraft === void 0 && !slIsRemoval && !tpIsRemoval)
         return l;
       const clone = { ...l };
       if (mainDraft !== void 0) clone.price = mainDraft;
       if (slDraft !== void 0) clone.stopLossPrice = slDraft;
+      else if (slIsRemoval) clone.stopLossPrice = void 0;
       if (tpDraft !== void 0) clone.takeProfitPrice = tpDraft;
+      else if (tpIsRemoval) clone.takeProfitPrice = void 0;
       if (linked.length > 0) {
         const parentSide = l.side ?? "buy";
         for (const b of linked) {
           const isSL = parentSide === "buy" ? b.price < l.price : b.price > l.price;
           if (isSL) {
-            clone.stopLossPrice = slDraft ?? clone.stopLossPrice ?? b.price;
+            clone.stopLossPrice = slIsRemoval ? void 0 : slDraft ?? clone.stopLossPrice ?? b.price;
             clone._slOrderLabel = b.label;
           } else {
-            clone.takeProfitPrice = tpDraft ?? clone.takeProfitPrice ?? b.price;
+            clone.takeProfitPrice = tpIsRemoval ? void 0 : tpDraft ?? clone.takeProfitPrice ?? b.price;
             clone._tpOrderLabel = b.label;
           }
         }
@@ -19447,8 +19487,9 @@ var _ChartEngine = class _ChartEngine {
       const parentPrice = this._effectiveEntryPrice(result.label, level?.price ?? oldPrice);
       const isEntryOrder = level?.entryPriceEditable === true;
       const isDraft = level?.data?._isDraft === true;
+      const isMobilePendingOrder = this.hideLevelConfirmCancel && result.type === "pending" && !isDraft;
       const all = this.dataStore.all;
-      const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
+      const marketPrice = isEntryOrder || isDraft || isMobilePendingOrder ? 0 : all[all.length - 1]?.close ?? 0;
       if (!TradeDragHandler.isBracketPriceValid(
         result.newPrice,
         result.bracketType,
@@ -20259,24 +20300,20 @@ var _ChartEngine = class _ChartEngine {
       const isDraftBracket = parentLevel?.data?._isDraft === true;
       if (isDraftBracket && parentLevel) {
         const bracketKey = closedLevel.bracketType === "stopLoss" ? "sl" : "tp";
-        const { priceH } = this.getChartLayout();
-        const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
-        const entryY = this.scaleManager.yToPixel(
-          parentLevel.price,
-          priceRange,
-          priceH
-        );
-        const side = parentLevel.side ?? "buy";
-        const isBelowEntry = side === "buy" && bracketKey === "sl" || side === "sell" && bracketKey === "tp";
-        const bracketY = entryY + (isBelowEntry ? 30 : -30);
-        const defaultPrice = this.scaleManager.pixelToPrice(bracketY, priceRange, priceH);
-        this.updateDraftOrderBracket(bracketKey, defaultPrice);
-        this.emitter.emit("tradeLevelDrag", {
+        this.updateDraftOrderBracket(bracketKey, null);
+        this.emitter.emit("tradeLevelEdit", {
           label: closedLevel.label,
-          newPrice: defaultPrice,
-          data: parentLevel?.data,
-          bracketType: closedLevel.bracketType,
-          isFullscreen: this.isFullscreen
+          type: "pending",
+          data: parentLevel.data,
+          isFullscreen: this.isFullscreen,
+          changes: [
+            {
+              field: closedLevel.bracketType === "stopLoss" ? "REMOVE_SL" : "REMOVE_TP",
+              newPrice: 0,
+              data: parentLevel.data,
+              bracketOrderLabel: void 0
+            }
+          ]
         });
         return;
       }
@@ -20349,8 +20386,9 @@ var _ChartEngine = class _ChartEngine {
       this._isBracketNew = false;
       const isEntryOrder = level.entryPriceEditable === true;
       const isDraft = level.data?._isDraft === true;
+      const isMobilePendingOrder = this.hideLevelConfirmCancel && level.type === "pending" && !isDraft;
       const all = this.dataStore.all;
-      const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
+      const marketPrice = isEntryOrder || isDraft || isMobilePendingOrder ? 0 : all[all.length - 1]?.close ?? 0;
       this.tradeDragHandler.startBracketDrag(
         level,
         dragHit.bracketType,
@@ -20408,20 +20446,9 @@ var _ChartEngine = class _ChartEngine {
     const initialPrice = this.scaleManager.pixelToPrice(btnCenterY, priceRange, priceH);
     const isEntryOrder = level.entryPriceEditable === true;
     const isDraft = level.data?._isDraft === true;
+    const isMobilePendingOrder = this.hideLevelConfirmCancel && level.type === "pending" && !isDraft;
     const all = this.dataStore.all;
-    const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
-    if (!isDraft) {
-      this.emitter.emit("tradeLevelEditOpen", {
-        label: level.label,
-        type: level.type,
-        data: level.data,
-        price: level.price,
-        side: level.side,
-        stopLossPrice: level.stopLossPrice,
-        takeProfitPrice: level.takeProfitPrice,
-        isFullscreen: this.isFullscreen
-      });
-    }
+    const marketPrice = isEntryOrder || isDraft || isMobilePendingOrder ? 0 : all[all.length - 1]?.close ?? 0;
     this._pendingBracketOrderLabel = null;
     this._isBracketNew = true;
     this.tradeDragHandler.startBracketDrag(