acttrader-charts 1.2.0-beta.9 → 1.3.0-beta.2

package/dist/index.cjs

@@ -1890,6 +1890,8 @@ var FONT_BRACKET = "12px 'Inter', system-ui, sans-serif";
 var BRACKET_BASE_RATIO = 0.68;
 var BRACKET_COL_OFFSETS = [0, -0.08, 0.08];
 var ADD_BRACKET_BTN_OFFSET_PX = 30;
+var __bracketDraws = [];
+var __lastDupeSignature = "";
 function hasPnl(level) {
   return level.type === "position" && !!level.pnlText;
 }
@@ -1934,8 +1936,9 @@ function getLevelDisplayText(level, price, precision, omitLots = false) {
 }
 function computeBracketLineX(levels, scale, priceRange, priceH, chartW, draggingLabel, dragNewPrice, hoveredLabel, selectedLabel, bracketBoxH = BRACKET_BOX_H) {
   const items = [];
+  const lineXOwner = hoveredLabel ?? selectedLabel;
   for (const level of levels) {
-    if (level.label !== hoveredLabel && level.label !== selectedLabel) continue;
+    if (level.label !== lineXOwner) continue;
     const bh = level;
     if (bh.stopLossPrice !== void 0) {
       const key = `${level.label}:stopLoss`;
@@ -2031,6 +2034,9 @@ function isDraggable(level) {
     return !!level.entryPriceEditable;
   return false;
 }
+function passiveBracketsVisible(alwaysShowBrackets, activeLabel) {
+  return alwaysShowBrackets && activeLabel === null;
+}
 function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}, expandedClusters = /* @__PURE__ */ new Set(), clusterThresholdPx = 0, showQuantityField = false, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, alwaysShowBrackets = false, anchorXResolver = null, timeDragEnabled = false) {
   if (levels.length === 0)
     return {
@@ -2044,6 +2050,7 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       clusters: []
     };
   const colors = theme.tradeLevels;
+  __bracketDraws = [];
   const s = Math.min(Math.max(buttonScale, 1), 3);
   const closeR = CLOSE_R * s;
   const editR = EDIT_R * s;
@@ -2144,8 +2151,9 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
   );
   const bracketItems = [];
   const fallbackX = chartW * BRACKET_BASE_RATIO;
+  const cascadeOwner = hoveredLabel ?? selectedLabel;
   for (const level of levels) {
-    if (level.label !== hoveredLabel && level.label !== selectedLabel) continue;
+    if (level.label !== cascadeOwner) continue;
     const bh = level;
     const mainDrag = draggingLabel === level.label;
     if (bh.stopLossPrice !== void 0) {
@@ -2192,6 +2200,10 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
   }
   const activeLabel = hoveredLabel ?? selectedLabel;
   const bracketPnlHostLabel = draftOrderLabel ?? selectedLabel;
+  const effectiveAlwaysShowBrackets = passiveBracketsVisible(
+    alwaysShowBrackets,
+    activeLabel
+  );
   const visibleMeasured = measured.filter((m) => !collapsedLabels.has(m.level.label));
   const drawOrder = [
     ...visibleMeasured.filter((m) => m.level.label !== activeLabel),
@@ -2243,9 +2255,10 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       dragNewTPPrice,
       buttonScale,
       bracketBoxYMap,
-      alwaysShowBrackets,
+      effectiveAlwaysShowBrackets,
       timeDragEnabled && anchorXResolver ? anchorXResolver(level) : null,
-      timeDragEnabled
+      timeDragEnabled,
+      level.label === activeLabel
     );
     const ec = labelToExpandedCluster.get(level.label);
     if (ec && layout.boxY !== layout.y - boxH / 2) {
@@ -2327,6 +2340,50 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       }
     }
   }
+  {
+    globalThis.__bracketDrawsLast = __bracketDraws.slice();
+    const counts = /* @__PURE__ */ new Map();
+    for (const d of __bracketDraws) {
+      const k = `${d.bracketType}@${d.price}`;
+      counts.set(k, (counts.get(k) ?? 0) + 1);
+    }
+    const dupeKeys = [...counts.entries()].filter(([, n]) => n > 1).map(([k]) => k);
+    if (dupeKeys.length > 0) {
+      const signature = dupeKeys.join(",") + "|" + __bracketDraws.map((d) => `${d.label}/${d.levelType}/${d.bW}`).join(",");
+      if (signature !== __lastDupeSignature) {
+        __lastDupeSignature = signature;
+        const frame = {
+          hoveredLabel,
+          selectedLabel,
+          draftOrderLabel,
+          draftBracketPnl,
+          levels: levels.map((l) => ({
+            label: l.label,
+            type: l.type,
+            price: l.price,
+            sl: l.stopLossPrice,
+            tp: l.takeProfitPrice,
+            isDraft: !!l.data?._isDraft
+          }))
+        };
+        console.warn(
+          `[ActCharts] DUPLICATE BRACKET BOX \u2192 ${dupeKeys.join(", ")}
+  hovered=${hoveredLabel ?? "null"}  selected=${selectedLabel ?? "null"}  draft=${draftOrderLabel ?? "null"}
+` + __bracketDraws.map(
+            (d, i) => `  box#${i + 1} label=${d.label} type=${d.levelType} draft=${d.isDraft} ${d.bracketType}@${d.price} bX=${d.bX} bW=${d.bW} right=${d.rightEdge} boxY=${d.boxY} pnl=${d.pnlText === null ? "none" : JSON.stringify(d.pnlText)} hideCC=${d.hideConfirmCancel}`
+          ).join("\n") + `
+  levels this frame: ` + frame.levels.map((l) => `${l.label}/${l.type}${l.isDraft ? "/DRAFT" : ""} price=${l.price} sl=${l.sl} tp=${l.tp}`).join(" | ")
+        );
+        if (typeof window !== "undefined") {
+          window.__bracketDupe = {
+            dupeKeys,
+            frame,
+            draws: __bracketDraws.slice()
+          };
+        }
+      }
+    }
+  }
   ctx.restore();
   return {
     hitAreas,
@@ -2482,7 +2539,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, bracketBoxYMap, alwaysShowBrackets = false, anchorX = null, timeDragEnabled = false) {
+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, alwaysShowBrackets = false, anchorX = null, timeDragEnabled = false, isBracketOwner) {
   const { y, boxY, boxW, boxH } = layout;
   const color = levelColor(level, colors, theme);
   const active = hovered || selected;
@@ -2532,7 +2589,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   const boxX = draggable ? groupX + GRIP_W + 2 : groupX;
   const badgeTimeDrag = timeDragEnabled && level.timeDraggable === true;
   const bracketHost = level;
-  if (active || isMarketDraft || passiveBracketShow) {
+  const bracketOwner = isBracketOwner ?? active;
+  if (bracketOwner || isMarketDraft || passiveBracketShow) {
     const slDragKey = `${level.label}:stopLoss`;
     const tpDragKey = `${level.label}:takeProfit`;
     const mainDragActive = draggingLabel === level.label;
@@ -2994,6 +3052,19 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
   const bY = boxYOverride ?? naturalBoxY;
   const boxCenterY = bY + bH / 2;
   const displaced = Math.abs(bY - naturalBoxY) >= 2;
+  __bracketDraws.push({
+    label: level.label,
+    levelType: level.type,
+    isDraft: !!level.data?._isDraft,
+    bracketType,
+    price,
+    bX: Math.round(bX),
+    bW: Math.round(bW),
+    rightEdge: Math.round(bX + bW),
+    boxY: Math.round(bY),
+    pnlText: pnlText ?? null,
+    hideConfirmCancel
+  });
   if (displaced) {
     drawBracketLeader(ctx, bX + bW / 2, boxCenterY, y, theme);
   }
@@ -6574,6 +6645,21 @@ var MobileToolsSheet = class {
 };
 
 // src/ui/MobileHeader.ts
+var SERIES_OPTIONS = [
+  { value: "candlestick", label: "Candlestick" },
+  { value: "hollow", label: "Hollow Candles" },
+  { value: "ohlc", label: "OHLC Bars" },
+  { value: "line", label: "Line" },
+  { value: "area", label: "Area" },
+  { value: "heikinashi", label: "Heikin Ashi" },
+  { value: "volumecandles", label: "Volume Candles" },
+  { value: "linemarkers", label: "Line with Markers" },
+  { value: "step", label: "Step Line" },
+  { value: "hlcarea", label: "HLC Area" },
+  { value: "baseline", label: "Baseline" },
+  { value: "columns", label: "Columns" },
+  { value: "highlow", label: "High Low" }
+];
 var TF_PILLS3 = ["1m", "5m", "15m", "1h", "4h", "1D", "1W"];
 var TF_LABEL3 = {
   "1m": "1m",
@@ -6618,14 +6704,21 @@ var IC_SETTINGS2 = (sz = 16) => lucide4(
   1.75
 );
 var MobileHeader = class {
-  constructor(onTimeframeChange, toolsController, onAskAiClick, onSettingsClick, currentTf, theme, fontFamily) {
+  constructor(onTimeframeChange, toolsController, onAskAiClick, onSettingsClick, onSeriesChange, currentTf, currentSeries, theme, fontFamily) {
     this.toolsBtn = null;
     this.tfBtns = /* @__PURE__ */ new Map();
     this.toolsActive = false;
+    this.seriesBtn = null;
+    this.seriesMenu = null;
+    this.seriesMenuOpen = false;
+    this.onDocPointerDown = null;
+    this.onWinReposition = null;
     this.onTimeframeChange = onTimeframeChange;
     this.onAskAiClick = onAskAiClick;
     this.onSettingsClick = onSettingsClick;
+    this.onSeriesChange = onSeriesChange;
     this.currentTf = currentTf;
+    this.currentSeries = currentSeries;
     this.theme = theme;
     this.fontFamily = fontFamily ?? MONO_FONT2;
     this.sheet = toolsController ? new MobileToolsSheet(theme, toolsController, this.fontFamily) : null;
@@ -6636,9 +6729,11 @@ var MobileHeader = class {
   }
   // ── Build ──────────────────────────────────────────────────────────────────
   build() {
+    this.closeSeriesMenu();
     this.el.innerHTML = "";
     this.tfBtns.clear();
     this.toolsBtn = null;
+    this.seriesBtn = null;
     Object.assign(this.el.style, {
       display: "flex",
       alignItems: "center",
@@ -6692,6 +6787,41 @@ var MobileHeader = class {
       });
       this.el.appendChild(divider);
     }
+    if (this.onSeriesChange) {
+      const btn = document.createElement("button");
+      btn.setAttribute("data-testid", "m-chart-type-btn");
+      btn.title = "Chart type";
+      btn.innerHTML = this.seriesIconHtml(this.currentSeries);
+      Object.assign(btn.style, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "6px",
+        borderRadius: "4px",
+        border: "none",
+        whiteSpace: "nowrap",
+        flexShrink: "0",
+        cursor: "pointer",
+        outline: "none",
+        background: "transparent",
+        color: this.theme.axisText,
+        transition: "color 0.15s, background 0.15s"
+      });
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleSeriesMenu();
+      });
+      this.seriesBtn = btn;
+      this.el.appendChild(btn);
+      const d2 = document.createElement("div");
+      Object.assign(d2.style, {
+        width: "1px",
+        height: "20px",
+        background: this.theme.axisBorder,
+        flexShrink: "0"
+      });
+      this.el.appendChild(d2);
+    }
     for (const tf of TF_PILLS3) {
       const btn = document.createElement("button");
       btn.setAttribute("data-testid", `m-tf-${TF_LABEL3[tf] ?? tf}`);
@@ -6792,6 +6922,135 @@ var MobileHeader = class {
       btn.style.color = active ? t.ui.accent : t.topBar.btnColor;
     }
   }
+  // ── Chart-type (series) picker ───────────────────────────────────────────────
+  /** Current-series icon, sized for the header button (mirrors AdvancedToolbar). */
+  seriesIconHtml(series) {
+    const raw = ICON_SERIES[series] ?? ICON_SERIES.candlestick;
+    return raw.replace(/width="\d+" height="\d+"/, 'width="18" height="18"');
+  }
+  toggleSeriesMenu() {
+    if (this.seriesMenuOpen) this.closeSeriesMenu();
+    else this.openSeriesMenu();
+  }
+  openSeriesMenu() {
+    if (this.seriesMenuOpen || !this.seriesBtn || typeof document === "undefined") return;
+    this.seriesMenu = this.buildSeriesMenu();
+    document.body.appendChild(this.seriesMenu);
+    this.seriesMenuOpen = true;
+    this.positionSeriesMenu();
+    this.styleSeriesBtnActive(true);
+    this.onDocPointerDown = (e) => {
+      const t = e.target;
+      if (this.seriesMenu?.contains(t) || this.seriesBtn?.contains(t)) return;
+      this.closeSeriesMenu();
+    };
+    this.onWinReposition = () => this.closeSeriesMenu();
+    setTimeout(() => {
+      if (!this.seriesMenuOpen) return;
+      document.addEventListener("pointerdown", this.onDocPointerDown, true);
+      window.addEventListener("resize", this.onWinReposition, true);
+      window.addEventListener("scroll", this.onWinReposition, true);
+      this.el.addEventListener("scroll", this.onWinReposition, true);
+    }, 0);
+  }
+  closeSeriesMenu() {
+    if (this.onDocPointerDown) {
+      document.removeEventListener("pointerdown", this.onDocPointerDown, true);
+      this.onDocPointerDown = null;
+    }
+    if (this.onWinReposition) {
+      window.removeEventListener("resize", this.onWinReposition, true);
+      window.removeEventListener("scroll", this.onWinReposition, true);
+      this.el.removeEventListener("scroll", this.onWinReposition, true);
+      this.onWinReposition = null;
+    }
+    this.seriesMenu?.remove();
+    this.seriesMenu = null;
+    this.seriesMenuOpen = false;
+    this.styleSeriesBtnActive(false);
+  }
+  buildSeriesMenu() {
+    const t = this.theme;
+    const menu = document.createElement("div");
+    menu.setAttribute("data-testid", "m-chart-type-menu");
+    Object.assign(menu.style, {
+      position: "fixed",
+      zIndex: "2147483000",
+      minWidth: "184px",
+      maxHeight: "60vh",
+      overflowY: "auto",
+      padding: "4px",
+      borderRadius: "8px",
+      border: `1px solid ${t.axisBorder}`,
+      background: t.background,
+      boxShadow: "0 8px 28px rgba(0,0,0,0.35)",
+      fontFamily: this.fontFamily,
+      WebkitOverflowScrolling: "touch"
+    });
+    for (const opt of SERIES_OPTIONS) {
+      const active = opt.value === this.currentSeries;
+      const row = document.createElement("button");
+      row.type = "button";
+      row.setAttribute("data-testid", `m-chart-type-${opt.value}`);
+      Object.assign(row.style, {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        width: "100%",
+        padding: "9px 10px",
+        borderRadius: "6px",
+        border: "none",
+        cursor: "pointer",
+        outline: "none",
+        textAlign: "left",
+        fontSize: "13px",
+        fontFamily: this.fontFamily,
+        background: active ? t.ui.accentBg : "transparent",
+        color: active ? t.ui.accent : t.axisText
+      });
+      const icon = (ICON_SERIES[opt.value] ?? "").replace(/width="\d+" height="\d+"/, 'width="16" height="16"');
+      const check = active ? ICON_CHECKMARK.replace(/width="\d+" height="\d+"/, 'width="16" height="16"') : "";
+      row.innerHTML = `<span style="display:flex;flex-shrink:0;">${icon}</span><span style="flex:1;">${opt.label}</span><span style="display:flex;flex-shrink:0;width:16px;">${check}</span>`;
+      row.addEventListener("mouseenter", () => {
+        if (opt.value !== this.currentSeries) row.style.background = t.ui.accentBg;
+      });
+      row.addEventListener("mouseleave", () => {
+        if (opt.value !== this.currentSeries) row.style.background = "transparent";
+      });
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.selectSeries(opt.value);
+      });
+      menu.appendChild(row);
+    }
+    return menu;
+  }
+  positionSeriesMenu() {
+    if (!this.seriesMenu || !this.seriesBtn) return;
+    const r = this.seriesBtn.getBoundingClientRect();
+    const m = this.seriesMenu;
+    m.style.top = `${r.bottom + 6}px`;
+    m.style.left = `${r.left}px`;
+    const mr = m.getBoundingClientRect();
+    if (mr.right > window.innerWidth - 8) {
+      m.style.left = `${Math.max(8, window.innerWidth - 8 - mr.width)}px`;
+    }
+    if (mr.bottom > window.innerHeight - 8) {
+      m.style.top = `${Math.max(8, r.top - 6 - mr.height)}px`;
+    }
+  }
+  selectSeries(series) {
+    this.closeSeriesMenu();
+    if (series === this.currentSeries) return;
+    this.currentSeries = series;
+    if (this.seriesBtn) this.seriesBtn.innerHTML = this.seriesIconHtml(series);
+    this.onSeriesChange?.(series);
+  }
+  styleSeriesBtnActive(active) {
+    if (!this.seriesBtn) return;
+    this.seriesBtn.style.color = active ? this.theme.ui.accent : this.theme.axisText;
+    this.seriesBtn.style.background = active ? this.theme.ui.accentBg : "transparent";
+  }
   // ── Public surface (drop-in parity with CompactToolbar) ──────────────────────
   setTimeframe(tf) {
     this.currentTf = tf;
@@ -6809,10 +7068,12 @@ var MobileHeader = class {
     this.sheet?.setTheme(theme);
   }
   destroy() {
+    this.closeSeriesMenu();
     this.sheet?.destroy();
     this.el.remove();
     this.tfBtns.clear();
     this.toolsBtn = null;
+    this.seriesBtn = null;
   }
   // ── Forwarded to the "Draw & Indicators" sheet so its toggles stay in sync ───
   /**
@@ -6828,15 +7089,24 @@ var MobileHeader = class {
     this.sheet?.syncVolume(show);
   }
   // ── No-op stubs — controls this variant intentionally does not render ────────
-  setSeries(_series) {
+  /** Engine → header sync: reflect an external series change (restored layout
+   *  state, keyboard shortcut, etc.) on the chart-type button. */
+  setSeries(series) {
+    this.currentSeries = series;
+    if (this.seriesBtn) this.seriesBtn.innerHTML = this.seriesIconHtml(series);
+    if (this.seriesMenuOpen) {
+      this.closeSeriesMenu();
+      this.openSeriesMenu();
+    }
   }
   setIndicatorOptions(_options) {
   }
   closeDropdown() {
     this.sheet?.close();
+    this.closeSeriesMenu();
   }
   get hasOpenDropdown() {
-    return this.sheet?.isOpen ?? false;
+    return (this.sheet?.isOpen ?? false) || this.seriesMenuOpen;
   }
   setFullscreen(_active) {
   }
@@ -23726,7 +23996,9 @@ var _ChartEngine = class _ChartEngine {
             toolsController,
             config.onAskAiClick ?? null,
             this.settingsEnabled ? () => this.openChartSettings() : null,
+            (s) => this.setSeries(s),
             this.timeframe,
+            this.series,
             this.theme,
             this.uiConfig.topBar?.dropBtnFontFamily
           );