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

package/dist/index.cjs

@@ -6574,6 +6574,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 +6633,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 +6658,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 +6716,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 +6851,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 +6997,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 +7018,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 +23925,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
           );