@luxalgo/vela 0.7.4 → 0.7.5

package/dist/vela.global.js

@@ -7116,6 +7116,42 @@ var Vela = (function (exports) {
     }
   };
 
+  // src/core/marks/visibility.ts
+  function markGroupOwnVisible(choices, groupId, groups) {
+    const chosen = choices[groupId];
+    if (typeof chosen === "boolean") return chosen;
+    return groups.find((g) => g.id === groupId)?.visible !== false;
+  }
+  function markGroupVisible(choices, groupId, groups) {
+    if (groupId === void 0) return true;
+    const seen = /* @__PURE__ */ new Set();
+    let id = groupId;
+    while (id !== void 0 && !seen.has(id)) {
+      seen.add(id);
+      if (!markGroupOwnVisible(choices, id, groups)) return false;
+      const parent = groups.find((g) => g.id === id)?.parent;
+      id = parent !== void 0 && groups.some((g) => g.id === parent) ? parent : void 0;
+    }
+    return true;
+  }
+  function markGroupRows(groups) {
+    const ids = new Set(groups.map((g) => g.id));
+    const out = [];
+    const placed = /* @__PURE__ */ new Set();
+    const place = (group, depth) => {
+      if (placed.has(group.id)) return;
+      placed.add(group.id);
+      out.push({ group, depth });
+      for (const child of groups) if (child.parent === group.id && child.id !== group.id) place(child, depth + 1);
+    };
+    for (const g of groups) {
+      const parentKnown = g.parent !== void 0 && ids.has(g.parent) && g.parent !== g.id;
+      if (!parentKnown) place(g, 0);
+    }
+    for (const g of groups) place(g, 0);
+    return out;
+  }
+
   // src/core/marks/MarksController.ts
   var MarksController = class {
     constructor(renderer, events) {
@@ -7160,6 +7196,7 @@ var Vela = (function (exports) {
     defineGroup(group) {
       if (!group || typeof group.id !== "string" || group.id.length === 0) throw new Error("[vela] marks.defineGroup: `id` must be a non-empty string");
       if (typeof group.label !== "string") throw new Error(`[vela] marks.defineGroup: group "${group.id}" needs a string \`label\``);
+      if (group.parent !== void 0 && (typeof group.parent !== "string" || group.parent.length === 0)) throw new Error(`[vela] marks.defineGroup: group "${group.id}" has a \`parent\` that is not a group id`);
       this.groups.set(group.id, { ...group });
       this.sync();
     }
@@ -7179,12 +7216,16 @@ var Vela = (function (exports) {
       }
       this.renderer.applyFeature("marks", { groups: { [id]: visible } });
     }
-    /** A group's effective visibility: the user's (persisted) choice, else the group's declared default, else visible. */
+    /**
+     * A group's effective visibility: its own switch — the user's (persisted) choice, else
+     * the declared default, else visible — AND every ancestor's, so a child under a
+     * switched-off parent reads hidden whatever its own choice says.
+     */
     isGroupVisible(id) {
       const state = this.renderer.readFeature("marks");
-      const chosen = state?.groups?.[id];
-      if (typeof chosen === "boolean") return chosen;
-      return this.groups.get(id)?.visible !== false;
+      const groups = {};
+      for (const [gid, v] of Object.entries(state?.groups ?? {})) if (typeof v === "boolean") groups[gid] = v;
+      return markGroupVisible(groups, id, [...this.groups.values()]);
     }
     destroy() {
       for (const unsub of this.subs) unsub();
@@ -23374,6 +23415,17 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     for (const t of chartTypes()) if (t.id === style) return (t.basePainting ?? "candles") === "candles";
     return false;
   }
+  var CANDLE_OVERRIDE_KEYS = [
+    "candleUpColor",
+    "candleDownColor",
+    "candleBodyVisible",
+    "candleBorderVisible",
+    "candleBorderUpColor",
+    "candleBorderDownColor",
+    "candleWickVisible",
+    "candleWickUpColor",
+    "candleWickDownColor"
+  ];
   function candleOverrideFor(style, bags) {
     if (!hasOwnCandlePaint(style)) return null;
     const bag = bags[style] ?? {};
@@ -23445,7 +23497,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   function clampSpacing(v) {
     return v < 0.1 ? 0.1 : v > 10 ? 10 : v;
   }
-  function factoryResetConfig(factory) {
+  function factoryResetConfig(factory, priceStyle = factory.series.style) {
     const bag = {};
     for (const t of chartTypes()) {
       const section = t.settings;
@@ -23467,10 +23519,16 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       if (!section.instances) addRows(section.rows);
       bag[t.id] = defaults2;
     }
+    for (const t of chartTypes()) {
+      if (!hasOwnCandlePaint(t.id)) continue;
+      const defaults2 = bag[t.id] ?? {};
+      for (const key of CANDLE_OVERRIDE_KEYS) defaults2[key] = null;
+      bag[t.id] = defaults2;
+    }
     for (const [typeId, vals] of Object.entries(factory.chartTypes)) {
       bag[typeId] = { ...bag[typeId] ?? {}, ...vals };
     }
-    return { ...factory, chartTypes: bag };
+    return { ...factory, chartTypes: bag, series: { ...factory.series, style: priceStyle } };
   }
   function mergeConfig(base, patch) {
     const p = asObject(patch);
@@ -25849,11 +25907,8 @@ void main() {
     for (const [id, v] of Object.entries(g)) if (typeof v === "boolean") groups[id] = v;
     return { visible: typeof p.visible === "boolean" ? p.visible : base.visible, groups };
   }
-  function markGroupVisible(state, groupId, groups) {
-    if (groupId === void 0) return true;
-    const chosen = state.groups[groupId];
-    if (typeof chosen === "boolean") return chosen;
-    return groups.find((g) => g.id === groupId)?.visible !== false;
+  function markGroupVisible2(state, groupId, groups) {
+    return markGroupVisible(state.groups, groupId, groups);
   }
 
   // src/renderers/native/core/SceneGraph.ts
@@ -28029,13 +28084,29 @@ void main() {
         const img = deps.icons.get(mark.glyph.icon, ink, symbolPx, deps.dpr);
         if (img) ctx.drawImage(img, center.x - symbolPx / 2, center.y - symbolPx / 2, symbolPx, symbolPx);
       } else if (mark.glyph.letter) {
+        const letter = mark.glyph.letter.slice(0, 2);
         ctx.fillStyle = ink;
-        ctx.font = `600 ${Math.round(size3 * 0.58)}px ${deps.fontFamily}`;
-        ctx.fillText(mark.glyph.letter.slice(0, 2), center.x, center.y + 0.5);
+        let px = letterFontPx(size3, letter);
+        ctx.font = `600 ${px}px ${deps.fontFamily}`;
+        if (letter.length > 1) {
+          px = fitLetterPx(px, ctx.measureText(letter).width, symbolInnerWidth(shape, size3));
+          ctx.font = `600 ${px}px ${deps.fontFamily}`;
+        }
+        ctx.fillText(letter, center.x, center.y + 0.5);
       }
     }
     ctx.restore();
   }
+  function letterFontPx(size3, letter) {
+    return Math.round(size3 * (letter.length > 1 ? 0.38 : 0.58));
+  }
+  function symbolInnerWidth(shape, size3) {
+    return (shape === "pin" ? size3 * 0.82 : size3) - 3;
+  }
+  function fitLetterPx(px, width, inner) {
+    if (!(width > inner) || !(width > 0)) return px;
+    return Math.max(4, Math.floor(px * inner / width));
+  }
   function traceShape(ctx, shape, x, y, size3) {
     const r = size3 / 2;
     ctx.beginPath();
@@ -28237,7 +28308,7 @@ void main() {
       this.markLayout = layoutMarkLane({
         marks: scene.timelineMarks,
         groups: scene.markGroups,
-        hidden: (groupId) => !markGroupVisible(scene.marks, groupId, scene.markGroups),
+        hidden: (groupId) => !markGroupVisible2(scene.marks, groupId, scene.markGroups),
         barTimes: this.barTimes(scene),
         intervalMs: coords.barInterval,
         xOf: (bar) => coords.logicalToX(bar),
@@ -29004,6 +29075,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
    muted and non-interactive. Applied to each row's children so it survives display:contents;
    !important beats the inline opacity on labels. */
 .vela-sd-soft>*{opacity:0.4 !important;pointer-events:none !important;}
+/* A mark group nested under a parent group on the Events tab: indented one step per level
+   (--vela-sd-depth). The indent rides the first child (the switch) as a MARGIN \u2014 padding
+   would push the switch's own tick out of its box. */
+.vela-sd-nested>*:first-child{margin-left:calc(var(--vela-sd-depth,1)*24px);}
 /* \u2500\u2500 mobile presentation (.vela-sd-mobile on the scrim; structural sizes are inline in open()) \u2500\u2500
    The tab rail becomes a burger-opened overlay sidebar; the group TOC becomes a sticky
    row of horizontally scrollable tabs; the instance strip scrolls instead of wrapping;
@@ -29052,6 +29127,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.hostSections = [];
       /** The timeline-mark groups (defined + named by marks) — one checkbox each on the Events tab. */
       this.markGroups = [];
+      /** A group's OWN switch (what its checkbox shows) — a child under an off parent keeps its own state. */
+      this.markGroupOwnVisible = () => true;
       this.markGroupVisible = () => true;
       /** The Canvas → Theme row: current app theme + where a pick is raised. The row is a
        *  host callback, NOT a config patch — the app theme stays out of the persisted
@@ -29069,6 +29146,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.activeSection = null;
       /** Mobile chrome: fullscreen card, burger-opened section sidebar, TOC as top tabs. */
       this.mobileLayout = false;
+      /** Opens/closes the mobile section sidebar of the CURRENT build (the burger in the
+       *  shell header outlives pane rebuilds, so it reaches the rail through here). */
+      this.toggleRail = null;
       /** The visibility policy: setting ids hidden by the host (subtree semantics). */
       this.hiddenSettings = /* @__PURE__ */ new Set();
       if (getComputedStyle(container).position === "static") container.style.position = "relative";
@@ -29078,7 +29158,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.hostSections = sections;
     }
     /** The timeline-mark groups and their current visibility — the Events tab's rows on next open. */
-    setMarkGroups(groups, visible) {
+    setMarkGroups(groups, visible, ownVisible = visible) {
+      this.markGroupOwnVisible = ownVisible;
       this.markGroups = groups;
       this.markGroupVisible = visible;
     }
@@ -29144,7 +29225,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.onReset = onReset ?? null;
       ensureControlStyles();
       const mobile = this.mobileLayout;
-      let toggleRail = null;
       let burger;
       if (mobile) {
         burger = document.createElement("button");
@@ -29152,8 +29232,83 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         burger.className = "vela-sd-burger";
         burger.innerHTML = iconAt("burger", 16);
         burger.title = "Sections";
-        burger.addEventListener("click", () => toggleRail?.());
+        burger.addEventListener("click", () => this.toggleRail?.());
+      }
+      const ui = new Dialog({
+        host: this.container,
+        title: "Chart settings",
+        // Non-modal: a live-edit dialog must leave the page interactive — a modal
+        // machine locks pointer events on the whole body, killing the chart, the
+        // legend, and the body-portaled popovers (color picker, select lists).
+        modal: false,
+        contained: true,
+        align: "top",
+        draggable: !mobile,
+        flush: true,
+        className: "vela-dialog--settings",
+        headerStart: burger,
+        closeOnBackdrop: true,
+        footer: (foot) => {
+          foot.style.cssText = `padding:10px 14px;display:flex;align-items:center;justify-content:flex-start;gap:8px;`;
+          const resetBtn = document.createElement("button");
+          resetBtn.type = "button";
+          resetBtn.textContent = "Reset defaults";
+          resetBtn.className = "vela-sd-btn";
+          resetBtn.addEventListener("click", () => this.onReset?.());
+          foot.appendChild(resetBtn);
+        },
+        // A close signal may only close ITS OWN dialog: the machine reports the exit
+        // asynchronously, so a close-then-reopen in one tick would otherwise see the
+        // old instance's signal tear down the freshly opened one.
+        onOpenChange: (open2) => {
+          if (!open2 && this.ui === ui) this.close();
+        }
+      });
+      if (mobile) ui.positioner.classList.add("vela-sd-mobile");
+      ui.positioner.style.paddingTop = mobile ? "0" : "8vh";
+      this.root = ui.positioner;
+      this.ui = ui;
+      const panes = this.buildContent(ui, config, section, mobile);
+      ui.show();
+      this.layoutPanes(panes);
+    }
+    /**
+     * Re-seed every control of an OPEN dialog from `config`, in place: the shell stays
+     * (no close/open transition), only the tab rail and panes rebuild, landing back on
+     * the current tab. The reset path — the restored values must show without the
+     * dialog re-entering. No-op while closed.
+     */
+    refresh(config) {
+      const ui = this.ui;
+      if (!ui) return;
+      closeOpenPopovers();
+      closeWidthPopover();
+      for (const dispose of this.hintTips) dispose();
+      this.hintTips = [];
+      this.config = config;
+      ui.body.replaceChildren();
+      this.layoutPanes(this.buildContent(ui, config, this.activeSection ?? void 0, this.mobileLayout));
+    }
+    /** Structured chart-type panes (instance strip / group TOC) own their layout and
+     *  tag their rows hosts instead; each host gets its own field grid. Runs on a SHOWN
+     *  dialog — the grids measure their labels. */
+    layoutPanes(panes) {
+      for (const el of panes) {
+        const hosts = [...el.querySelectorAll("[data-sd-rows-host]")];
+        if (hosts.length === 0) {
+          this.layoutSettingsGrids(el);
+          continue;
+        }
+        for (const h of hosts) this.layoutSettingsGrids(h);
       }
+    }
+    /**
+     * Build the tab rail + one pane per section into `ui.body` (the linear `body` of
+     * section markers and rows is split afterwards), select `section` (the active
+     * style's own tab when none is asked for), and return the pane elements for
+     * {@link layoutPanes}.
+     */
+    buildContent(ui, config, section, mobile) {
       const body = document.createElement("div");
       body.style.cssText = "display:flex;flex-direction:column;gap:0;";
       const sid = (el, id) => {
@@ -29357,9 +29512,28 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (this.markGroups.length > 0) {
         body.append(sid(this.section("Events"), MARKS_SETTINGS_ID));
         body.append(sid(this.sectionTitle("Visible events"), MARKS_GROUPS_SETTINGS_ID));
-        for (const g of this.markGroups) {
-          body.append(sid(this.boolRow(g.label, this.markGroupVisible(g.id), (v) => this.emit({ marks: { groups: { [g.id]: v } } })), markGroupSettingsId(g.id)));
+        const rowsById = /* @__PURE__ */ new Map();
+        const rows = markGroupRows(this.markGroups);
+        const refreshDimming = () => {
+          for (const { group } of rows) {
+            const el = rowsById.get(group.id);
+            if (!el || group.parent === void 0) continue;
+            el.classList.toggle("vela-sd-soft", !this.markGroupVisible(group.parent));
+          }
+        };
+        for (const { group: g, depth } of rows) {
+          const row = this.boolRow(g.label, this.markGroupOwnVisible(g.id), (v) => {
+            this.emit({ marks: { groups: { [g.id]: v } } });
+            refreshDimming();
+          });
+          if (depth > 0) {
+            row.classList.add("vela-sd-nested");
+            row.style.setProperty("--vela-sd-depth", String(depth));
+          }
+          rowsById.set(g.id, row);
+          body.append(sid(row, markGroupSettingsId(g.id)));
         }
+        refreshDimming();
       }
       renderChartTypeSections("end");
       renderHostSections("end");
@@ -29387,8 +29561,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (mobile) {
         railScrim = document.createElement("div");
         railScrim.className = "vela-sd-railscrim";
-        railScrim.addEventListener("click", () => toggleRail?.());
-        toggleRail = (open2) => {
+        railScrim.addEventListener("click", () => this.toggleRail?.());
+        this.toggleRail = (open2) => {
           const on = open2 ?? !rail.classList.contains("open");
           rail.classList.toggle("open", on);
           railScrim?.classList.toggle("open", on);
@@ -29428,35 +29602,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         });
         if (hidActive) activate(0);
       };
-      const ui = new Dialog({
-        host: this.container,
-        title: "Chart settings",
-        // Non-modal: a live-edit dialog must leave the page interactive — a modal
-        // machine locks pointer events on the whole body, killing the chart, the
-        // legend, and the body-portaled popovers (color picker, select lists).
-        modal: false,
-        contained: true,
-        align: "top",
-        draggable: !mobile,
-        flush: true,
-        className: "vela-dialog--settings",
-        headerStart: burger,
-        closeOnBackdrop: true,
-        footer: (foot) => {
-          foot.style.cssText = `padding:10px 14px;display:flex;align-items:center;justify-content:flex-start;gap:8px;`;
-          const resetBtn = document.createElement("button");
-          resetBtn.type = "button";
-          resetBtn.textContent = "Reset defaults";
-          resetBtn.className = "vela-sd-btn";
-          resetBtn.addEventListener("click", () => this.onReset?.());
-          foot.appendChild(resetBtn);
-        },
-        onOpenChange: (open2) => {
-          if (!open2) this.close();
-        }
-      });
-      if (mobile) ui.positioner.classList.add("vela-sd-mobile");
-      ui.positioner.style.paddingTop = mobile ? "0" : "8vh";
       const activate = (idx) => {
         panes.forEach((p, i) => {
           p.el.style.display = i === idx ? "block" : "none";
@@ -29465,7 +29610,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.activeSection = panes[idx]?.title ?? null;
         if (mobile) {
           ui.titleEl.textContent = panes[idx]?.title ?? "Chart settings";
-          toggleRail?.(false);
+          this.toggleRail?.(false);
         }
       };
       panes.forEach((p, i) => {
@@ -29480,17 +29625,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       shell.append(rail, paneHost);
       if (railScrim) shell.append(railScrim);
       ui.body.appendChild(shell);
-      this.root = ui.positioner;
-      this.ui = ui;
-      ui.show();
-      for (const p of panes) {
-        const hosts = [...p.el.querySelectorAll("[data-sd-rows-host]")];
-        if (hosts.length === 0) {
-          this.layoutSettingsGrids(p.el);
-          continue;
-        }
-        for (const h of hosts) this.layoutSettingsGrids(h);
-      }
+      return panes.map((p) => p.el);
     }
     close() {
       closeOpenPopovers();
@@ -29498,6 +29633,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const ui = this.ui;
       this.ui = null;
       this.root = null;
+      this.toggleRail = null;
       this.tabs = [];
       for (const dispose of this.hintTips) dispose();
       this.hintTips = [];
@@ -37597,7 +37733,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       this.settingsDialog.setTheme(this.theme);
       this.settingsDialog.setHostSections(this.hostSettingsSections);
-      this.settingsDialog.setMarkGroups(this.markGroupsInUse(), (id) => markGroupVisible(this.scene.marks, id, this.scene.markGroups));
+      this.settingsDialog.setMarkGroups(
+        this.markGroupsForEventsTab(),
+        (id) => markGroupVisible2(this.scene.marks, id, this.scene.markGroups),
+        (id) => markGroupOwnVisible(this.scene.marks.groups, id, this.scene.markGroups)
+      );
       this.settingsDialog.setHiddenSettings(this.hiddenSettings);
       this.syncThemeControl();
       this.settingsDialog.toggle(
@@ -37605,13 +37745,24 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         (patch) => this.applyConfig(patch),
         (json) => this.applyConfig(json),
         () => {
-          if (this.factoryConfig) this.applyConfig(factoryResetConfig(this.factoryConfig));
-          this.settingsDialog?.close();
-          this.openSettingsDialog();
+          if (this.factoryConfig) this.applyConfig(this.factoryResetDocument(this.factoryConfig));
+          this.settingsDialog?.refresh(this.getConfig());
         },
         section
       );
     }
+    /**
+     * The document "Reset defaults" applies: every setting back to its first-run value,
+     * with two things that are NOT settings held or resolved here — the price style
+     * stays the one the user is looking at, and the timeline-mark groups (an additive
+     * merge, like the type bags) are named back to their host-declared visibility.
+     */
+    factoryResetDocument(factory) {
+      const doc = factoryResetConfig(factory, this.scene.priceStyle);
+      const groups = { ...doc.marks.groups };
+      for (const g of this.markGroupsInUse()) groups[g.id] = g.visible !== false;
+      return { ...doc, marks: { ...doc.marks, groups } };
+    }
     /** Close the in-chart dialogs (indicator settings + chart-settings gear). No-op when none are open. */
     closeDialogs() {
       this.inputsUI?.closeOpenDialog();
@@ -38674,6 +38825,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     markGroupsInUse() {
       return effectiveMarkGroups(this.scene.timelineMarks, this.scene.markGroups);
     }
+    /**
+     * The groups as the Events tab lists them: nested only under a DEFINED parent. The
+     * painter's visibility chain resolves parents against the defined groups alone, so a
+     * parent that marks merely name must not nest (and dim) a child the painter still shows.
+     */
+    markGroupsForEventsTab() {
+      const defined = new Set(this.scene.markGroups.map((g) => g.id));
+      return this.markGroupsInUse().map((g) => g.parent !== void 0 && !defined.has(g.parent) ? { ...g, parent: void 0 } : g);
+    }
     onViewportChange(cb) {
       this.viewportCbs.add(cb);
       return () => this.viewportCbs.delete(cb);