acttrader-charts 1.0.19 → 1.0.20

package/dist/{MACD-DZxpf0eQ.d.cts → MACD-BDbBplVs.d.cts}

@@ -257,6 +257,8 @@ interface TradeLabels {
     stop: string;
     /** Market order type label. */
     market: string;
+    /** Separator word between order descriptor and price (e.g. "at"). */
+    at: string;
     /** Quantity input label in the draft-order input. */
     qty: string;
     /** Tooltip on the floating trade button (⊕). */
@@ -397,6 +399,10 @@ interface IndicatorOverlayColors {
 }
 /** Colors for trade/position horizontal level lines. */
 interface TradeLevelColors {
+    /** Solid accent color for buy-side UI elements (popover text, button, icon). */
+    buySide: string;
+    /** Solid accent color for sell-side UI elements (popover text, button, icon). */
+    sellSide: string;
     /** Line + box border color for open executed trades. */
     tradeLine: string;
     /** Line + box border color for open positions. */

package/dist/{MACD-DZxpf0eQ.d.ts → MACD-BDbBplVs.d.ts}

@@ -257,6 +257,8 @@ interface TradeLabels {
     stop: string;
     /** Market order type label. */
     market: string;
+    /** Separator word between order descriptor and price (e.g. "at"). */
+    at: string;
     /** Quantity input label in the draft-order input. */
     qty: string;
     /** Tooltip on the floating trade button (⊕). */
@@ -397,6 +399,10 @@ interface IndicatorOverlayColors {
 }
 /** Colors for trade/position horizontal level lines. */
 interface TradeLevelColors {
+    /** Solid accent color for buy-side UI elements (popover text, button, icon). */
+    buySide: string;
+    /** Solid accent color for sell-side UI elements (popover text, button, icon). */
+    sellSide: string;
     /** Line + box border color for open executed trades. */
     tradeLine: string;
     /** Line + box border color for open positions. */

package/dist/index.cjs

@@ -264,6 +264,8 @@ function resolveCssVarsInTheme(theme, container) {
       dropdownHoverBg: resolve(theme.indicatorOverlay.dropdownHoverBg)
     },
     tradeLevels: {
+      buySide: resolve(theme.tradeLevels.buySide),
+      sellSide: resolve(theme.tradeLevels.sellSide),
       tradeLine: resolve(theme.tradeLevels.tradeLine),
       positionLine: resolve(theme.tradeLevels.positionLine),
       pendingBuyLine: resolve(theme.tradeLevels.pendingBuyLine),
@@ -340,6 +342,8 @@ var DARK_THEME = {
     dropdownHoverBg: "#1c2a35"
   },
   tradeLevels: {
+    buySide: "#26a69a",
+    sellSide: "#ef5350",
     tradeLine: "#5caf79",
     positionLine: "#7b61ff",
     pendingBuyLine: "rgba(92,175,121,0.75)",
@@ -412,6 +416,8 @@ var LIGHT_THEME = {
     dropdownHoverBg: "#f0f0f0"
   },
   tradeLevels: {
+    buySide: "#26a69a",
+    sellSide: "#ef5350",
     tradeLine: "#5caf79",
     positionLine: "#6d28d9",
     pendingBuyLine: "rgba(92,175,121,0.75)",
@@ -697,6 +703,7 @@ var DEFAULT_LABELS = {
     limit: "Limit",
     stop: "Stop",
     market: "Market",
+    at: "at",
     qty: "Qty",
     placeOrderTitle: "Place order at this price"
   },
@@ -1672,16 +1679,18 @@ function computeFanOutLayout(cluster, boxH, gapPx = 4) {
   return result;
 }
 function buildClusterBadgeLayout(cluster, chartW, ctx) {
-  const n = cluster.members.length;
-  const types = new Set(cluster.members.map((m) => m.level.type));
-  let noun;
-  if (types.size === 1) {
-    const t = types.values().next().value;
-    noun = t === "position" ? "Position" : t === "pending" ? "Order" : "Trade";
-  } else {
-    noun = "Level";
-  }
-  const text = `${n} ${noun}${n > 1 ? "s" : ""}`;
+  const posCount = cluster.members.filter(
+    (m) => m.level.type === "position" && !m.level.entryPriceEditable
+  ).length;
+  const orderCount = cluster.members.filter(
+    (m) => m.level.type === "pending" || m.level.entryPriceEditable === true
+  ).length;
+  const tradeCount = cluster.members.filter((m) => m.level.type === "trade").length;
+  const parts = [];
+  if (posCount > 0) parts.push(`${posCount} Position${posCount > 1 ? "s" : ""}`);
+  if (orderCount > 0) parts.push(`${orderCount} Order${orderCount > 1 ? "s" : ""}`);
+  if (tradeCount > 0) parts.push(`${tradeCount} Trade${tradeCount > 1 ? "s" : ""}`);
+  const text = parts.join(" / ");
   const PAD_X = 12;
   const textW = ctx.measureText(text).width;
   const EXPAND_ICON_W = 16;
@@ -2089,6 +2098,22 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       const offMainDragActive = draggingLabel === offLevel.label;
       const offSlPrice = offMainDragActive && dragNewSLPrice !== null ? dragNewSLPrice : bh.stopLossPrice;
       const offTpPrice = offMainDragActive && dragNewTPPrice !== null ? dragNewTPPrice : bh.takeProfitPrice;
+      if (offSlPrice !== void 0 && offTpPrice !== void 0) {
+        const slY = scale.yToPixel(offSlPrice, priceRange, priceH);
+        const tpY = scale.yToPixel(offTpPrice, priceRange, priceH);
+        const bracketBH = Math.max(BRACKET_BOX_H, CLOSE_R * 2 + BRACKET_BOX_PAD_Y * 2);
+        ctx.save();
+        ctx.font = FONT_BRACKET;
+        const closeSlot = CLOSE_R * 2 + BRACKET_BOX_PAD_X / 2;
+        const slBW = BRACKET_BOX_PAD_X + ctx.measureText(`SL ${offSlPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+        const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(`TP ${offTpPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+        ctx.restore();
+        const connX = ((bracketLineXMap.get(slDragKey) ?? fallbackX) - slBW / 2 - 2 + ((bracketLineXMap.get(tpDragKey) ?? fallbackX) - tpBW / 2 - 2)) / 2;
+        const slPillY = bracketBoxYMap.get(slDragKey) ?? slY - bracketBH / 2;
+        const tpPillY = bracketBoxYMap.get(tpDragKey) ?? tpY - bracketBH / 2;
+        const [upperY, lowerY] = tpPillY < slPillY ? [tpPillY, slPillY] : [slPillY, tpPillY];
+        drawSLTPConnector(ctx, connX, upperY + bracketBH, lowerY, theme);
+      }
       if (offSlPrice !== void 0) {
         drawBracketLine(
           ctx,
@@ -2222,6 +2247,20 @@ function drawFanConnector(ctx, fanCenterY, realY, chartW, theme) {
   ctx.stroke();
   ctx.restore();
 }
+function drawSLTPConnector(ctx, x, yTop, yBottom, theme) {
+  if (yBottom - yTop < 2) return;
+  ctx.save();
+  ctx.strokeStyle = monoColor(theme);
+  ctx.globalAlpha = 0.5;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([3, 4]);
+  ctx.beginPath();
+  ctx.moveTo(x, yTop);
+  ctx.lineTo(x, yBottom);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.restore();
+}
 function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   const pl = level;
   const rows = [];
@@ -2333,6 +2372,24 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
     const mainDragActive = draggingLabel === level.label;
     const slRenderPrice = mainDragActive && dragNewSLPrice !== null ? dragNewSLPrice : bracketHost.stopLossPrice;
     const tpRenderPrice = mainDragActive && dragNewTPPrice !== null ? dragNewTPPrice : bracketHost.takeProfitPrice;
+    if (selected && slRenderPrice !== void 0 && tpRenderPrice !== void 0) {
+      const slY = scale.yToPixel(slRenderPrice, priceRange, priceH);
+      const tpY = scale.yToPixel(tpRenderPrice, priceRange, priceH);
+      const bracketBH = hideConfirmCancel ? BRACKET_BOX_H : Math.max(BRACKET_BOX_H, closeR * 2 + BRACKET_BOX_PAD_Y * 2);
+      ctx.save();
+      ctx.font = FONT_BRACKET;
+      const closeSlot = hideConfirmCancel ? 0 : closeR * 2 + BRACKET_BOX_PAD_X / 2;
+      const slBW = BRACKET_BOX_PAD_X + ctx.measureText(`SL ${slRenderPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+      const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(`TP ${tpRenderPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+      ctx.restore();
+      const slBLineX = bracketLineXMap.get(slDragKey) ?? chartW * BRACKET_BASE_RATIO;
+      const tpBLineX = bracketLineXMap.get(tpDragKey) ?? chartW * BRACKET_BASE_RATIO;
+      const connX = (slBLineX - slBW / 2 - 2 + (tpBLineX - tpBW / 2 - 2)) / 2;
+      const slPillY = bracketBoxYMap?.get(slDragKey) ?? slY - bracketBH / 2;
+      const tpPillY = bracketBoxYMap?.get(tpDragKey) ?? tpY - bracketBH / 2;
+      const [upperY, lowerY] = tpPillY < slPillY ? [tpPillY, slPillY] : [slPillY, tpPillY];
+      drawSLTPConnector(ctx, connX, upperY + bracketBH, lowerY, theme);
+    }
     if (slRenderPrice !== void 0) {
       const bLineX = bracketLineXMap.get(slDragKey) ?? chartW * BRACKET_BASE_RATIO;
       drawBracketLine(
@@ -13189,8 +13246,8 @@ var TradeButton = class {
       this.el.style.opacity = "1";
       Object.assign(this.el.style, {
         background: theme.tooltip.background,
-        color: "#26a69a",
-        border: "1px solid #26a69a"
+        color: theme.tradeLevels.buySide,
+        border: `1px solid ${theme.tradeLevels.buySide}`
       });
     });
     this.el.addEventListener("mouseleave", (e) => {
@@ -13253,11 +13310,12 @@ var TradeButton = class {
 
 // src/ui/TradePopover.ts
 var TradePopover = class {
-  constructor(theme, lots, onDraftCreate, labels = DEFAULT_LABELS.trade, onVisibilityChange) {
+  constructor(theme, lots, symbol, onDraftCreate, labels = DEFAULT_LABELS.trade, onVisibilityChange) {
     this._price = 0;
     this._pricePrecision = 2;
     this._buyOrderType = "limit";
     this._sellOrderType = "limit";
+    this._compact = false;
     this.onDocMouseDown = (e) => {
       if (this.isVisible && !this.el.contains(e.target)) {
         this.hide();
@@ -13265,6 +13323,7 @@ var TradePopover = class {
     };
     this.theme = theme;
     this.lots = lots;
+    this.symbol = symbol;
     this.onDraftCreate = onDraftCreate;
     this.labels = labels;
     this.onVisibilityChange = onVisibilityChange;
@@ -13273,7 +13332,6 @@ var TradePopover = class {
       position: "absolute",
       display: "none",
       flexDirection: "column",
-      gap: "1px",
       background: theme.tooltip.background,
       border: `1px solid ${theme.axisBorder}`,
       borderRadius: "5px",
@@ -13282,7 +13340,7 @@ var TradePopover = class {
       boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
       fontFamily: "'Inter', system-ui, sans-serif",
       fontSize: "12px",
-      minWidth: "140px",
+      width: "max-content",
       pointerEvents: "auto"
     });
     document.addEventListener("mousedown", this.onDocMouseDown);
@@ -13296,10 +13354,8 @@ var TradePopover = class {
     this._sellOrderType = sellOrderType;
     this.rebuild();
     this.el.style.display = "flex";
-    const popW = 145;
     this.el.style.right = `${buttonRight}px`;
     this.el.style.top = `${buttonY - 16}px`;
-    this.el.style.width = `${popW}px`;
     if (!wasVisible) this.onVisibilityChange?.();
   }
   hide() {
@@ -13313,6 +13369,12 @@ var TradePopover = class {
   setLots(lots) {
     this.lots = lots;
   }
+  setSymbol(symbol) {
+    this.symbol = symbol;
+  }
+  setCompact(compact) {
+    this._compact = compact;
+  }
   setTheme(theme) {
     this.theme = theme;
     Object.assign(this.el.style, {
@@ -13326,31 +13388,46 @@ var TradePopover = class {
   // ── Private ───────────────────────────────────────────────────────────────
   rebuild() {
     this.el.innerHTML = "";
+    const divider = document.createElement("div");
+    Object.assign(divider.style, {
+      height: "1px",
+      background: this.theme.axisBorder,
+      margin: "0 8px"
+    });
     this.el.append(
-      this.makeRow(this.labels.buy, "#26a69a", "buy", this._buyOrderType),
-      this.makeRow(this.labels.sell, "#ef5350", "sell", this._sellOrderType)
+      this.makeRow(this.theme.tradeLevels.sellSide, "sell", this._sellOrderType),
+      divider,
+      this.makeRow(this.theme.tradeLevels.buySide, "buy", this._buyOrderType)
     );
   }
-  makeRow(label, color, side, orderType) {
+  makeRow(color, side, orderType) {
     const btn = document.createElement("button");
-    const priceStr = this._price.toFixed(this._pricePrecision);
-    btn.textContent = `${label} ${orderType === "limit" ? this.labels.limit : this.labels.stop}  ${priceStr}`;
     Object.assign(btn.style, {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
       width: "100%",
       background: "transparent",
-      color,
       border: "none",
       borderRadius: "3px",
-      padding: "7px 10px",
-      textAlign: "left",
+      padding: this._compact ? "5px 8px" : "8px 10px",
       cursor: "pointer",
-      fontSize: "12px",
       fontFamily: "'Inter', system-ui, sans-serif",
-      fontWeight: "600"
+      fontSize: this._compact ? "11px" : "12px"
     });
+    btn.appendChild(this.makeChevron(color, side));
+    const sideLabel = side === "sell" ? this.labels.sell : this.labels.buy;
+    const orderTypeLabel = orderType === "limit" ? this.labels.limit : this.labels.stop;
+    const priceStr = this._price.toFixed(this._pricePrecision);
+    const colored = document.createElement("span");
+    colored.textContent = `${sideLabel} ${orderTypeLabel}`;
+    Object.assign(colored.style, { color, fontWeight: "600" });
+    const plain = document.createElement("span");
+    plain.textContent = ` ${this.lots} ${this.symbol} ${this.labels.at} ${priceStr}`;
+    Object.assign(plain.style, { color: "#ffffff", fontWeight: "400" });
+    btn.append(colored, plain);
     btn.addEventListener("mouseenter", () => {
-      btn.style.background = color + "22";
+      btn.style.background = "rgba(255,255,255,0.06)";
     });
     btn.addEventListener("mouseleave", () => {
       btn.style.background = "transparent";
@@ -13362,6 +13439,23 @@ var TradePopover = class {
     });
     return btn;
   }
+  makeChevron(color, side) {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("width", "10");
+    svg.setAttribute("height", "8");
+    svg.setAttribute("viewBox", "0 0 10 8");
+    svg.style.flexShrink = "0";
+    const path = document.createElementNS(ns, "path");
+    path.setAttribute("d", side === "sell" ? "M1 1 L5 7 L9 1" : "M1 7 L5 1 L9 7");
+    path.setAttribute("stroke", color);
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke-width", "1.5");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    svg.appendChild(path);
+    return svg;
+  }
 };
 
 // src/ui/DraftQtyFlyout.ts
@@ -19195,6 +19289,7 @@ var _ChartEngine = class _ChartEngine {
       this.tradePopover = new TradePopover(
         this.theme,
         0.01,
+        this.symbol,
         (side, price, orderType) => {
           this.createDraftOrder(side, price, orderType);
         },
@@ -19312,6 +19407,7 @@ var _ChartEngine = class _ChartEngine {
       () => this.scheduleRender(),
       () => this.drawingManager.getActiveTool() !== null || this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing() || this.separatorDrag !== null || this.axisDrag !== null || (this.tradeDragHandler?.active ?? false) || this._mobileCrosshairActive,
       (deltaY) => {
+        if (this.priceScaleFactor === 1) return;
         const { priceH } = this.getChartLayout();
         const currentRange = this._displayedPriceRange ?? this.getScaledPriceRange(this._targetViewport);
         const pricePerPixel = (currentRange.max - currentRange.min) / priceH;
@@ -20168,6 +20264,7 @@ var _ChartEngine = class _ChartEngine {
   }
   setSymbol(symbol) {
     this.symbol = symbol;
+    this.tradePopover?.setSymbol(symbol);
     if (this.siSymbolSpan) {
       this.siSymbolSpan.textContent = symbol;
       this.siSymbolSpan.style.display = symbol ? "inline" : "none";
@@ -22199,6 +22296,7 @@ var _ChartEngine = class _ChartEngine {
       this.leftBar?.setMobileMode(isMobile);
       this.topBar?.setMobileLayout(isMobile);
       this.tradeButton?.setMobileMode(isMobile);
+      this.tradePopover?.setCompact(isMobile);
       if (this.siEl) {
         this.siEl.style.flexDirection = isMobile ? "column" : "row";
         this.siEl.style.alignItems = isMobile ? "flex-start" : "center";