acttrader-charts 1.2.0-beta.7 → 1.2.0-beta.9

package/README.md

@@ -892,6 +892,30 @@ Sub-pane heights are user-resizable by dragging the separator between panes.
 
 `fibRetracement` · `fibExtension` · `fibChannel` · `fibTimezone` · `fibCircles` · `fibSpiral` · `fibFan` · `fibProjection` · `gannFan` · `gannSquare` · `gannBox`
 
+**Editable Fib Retracement ratios.** Select a Fib Retracement and open **LEVELS → Configure ▾** in the style popover: each row's ratio is an editable field alongside its visibility checkbox and color swatch. Type a new ratio and press Enter (or click away) and the line moves to it, keeping that row's color and visibility. The number of levels never changes — a value that isn't a finite number, or that another row already uses, reverts to the previous one.
+
+Defaults come from the theme (`0` · `0.236` · `0.382` · `0.5` · `0.618` · `0.786` · `1`) and can be changed per theme without touching a drawing:
+
+```ts
+new ChartEngine({
+  container,
+  themeOverrides: {
+    dark: {
+      drawing: {
+        fibRetracement: {
+          levels: {
+            '0.786': { visible: false, color: '#e8b84b' }, // hide a default ratio
+            '0.886': { visible: true,  color: '#e8b84b' }, // and draw this one instead
+          },
+        },
+      },
+    },
+  },
+});
+```
+
+In a **per-drawing** style (`SerializedDrawing.style.levels`), a level may also be set to `null` — that removes a theme-supplied ratio for that one drawing, which is how a retyped ratio replaces its original rather than adding to it. Ratios are map keys, so they are written in canonical number form (`'0.5'`, not `'0.50'`).
+
 ### Shapes
 
 `rectangle` · `rotatedRectangle` · `ellipse` · `triangle` · `circle` · `arc` · `polyline` · `path` · `brush` · `highlighter`

package/dist/{MACD-wDy-dPD_.d.cts → MACD-D1i-sEFR.d.cts}

@@ -1254,8 +1254,15 @@ interface DrawingLevelStyle {
 }
 /** Extends DrawingStyle for fib/multi-level drawings. */
 interface DrawingFibStyle extends DrawingStyle {
-    /** Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style. */
-    levels?: Record<string, DrawingLevelStyle>;
+    /**
+     * Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style.
+     *
+     * In a **per-instance** style, `null` marks a level supplied by the theme as
+     * removed for this drawing — used when the user retypes a level's ratio in
+     * the LEVELS → Configure panel, so the old ratio does not come back through
+     * the theme merge. Resolved styles (from `resolveStyle`) never contain null.
+     */
+    levels?: Record<string, DrawingLevelStyle | null>;
 }
 /** Union of all drawing style shapes. */
 type AnyDrawingStyle = DrawingStyle | DrawingTextStyle | DrawingFibStyle;

package/dist/{MACD-wDy-dPD_.d.ts → MACD-D1i-sEFR.d.ts}

@@ -1254,8 +1254,15 @@ interface DrawingLevelStyle {
 }
 /** Extends DrawingStyle for fib/multi-level drawings. */
 interface DrawingFibStyle extends DrawingStyle {
-    /** Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style. */
-    levels?: Record<string, DrawingLevelStyle>;
+    /**
+     * Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style.
+     *
+     * In a **per-instance** style, `null` marks a level supplied by the theme as
+     * removed for this drawing — used when the user retypes a level's ratio in
+     * the LEVELS → Configure panel, so the old ratio does not come back through
+     * the theme merge. Resolved styles (from `resolveStyle`) never contain null.
+     */
+    levels?: Record<string, DrawingLevelStyle | null>;
 }
 /** Union of all drawing style shapes. */
 type AnyDrawingStyle = DrawingStyle | DrawingTextStyle | DrawingFibStyle;

package/dist/index.cjs

@@ -318,6 +318,7 @@ function resolveDrawingThemeVars(drawing, resolve) {
       const levels = {};
       for (const lk of Object.keys(resolved.levels)) {
         const lv = resolved.levels[lk];
+        if (!lv) continue;
         levels[lk] = { ...lv, color: resolve(lv.color) };
       }
       resolved.levels = levels;
@@ -8531,10 +8532,19 @@ function resolveStyle(type, instanceStyle, theme) {
   const themeLevels = themeEntry.levels;
   const instLevels = instanceStyle?.levels;
   if (themeLevels || instLevels) {
-    const out = { ...themeLevels ?? {} };
+    const out = {};
+    for (const k of Object.keys(themeLevels ?? {})) {
+      const lvl = themeLevels?.[k];
+      if (lvl) out[k] = lvl;
+    }
     if (instLevels) {
       for (const k of Object.keys(instLevels)) {
-        out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...instLevels[k] };
+        const inst = instLevels[k];
+        if (inst === null) {
+          delete out[k];
+          continue;
+        }
+        out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...inst };
       }
     }
     merged.levels = out;
@@ -9155,6 +9165,12 @@ var DisjointChannel = class {
 var FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
 var FIB_FALLBACK_COLORS = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350"];
 var HIT_TOLERANCE9 = 6;
+function fibLevelEntries(levels) {
+  const fallback = () => FIB_LEVELS.map((value) => ({ key: String(value), value }));
+  if (!levels) return fallback();
+  const entries = Object.keys(levels).filter((key) => levels[key] !== null).map((key) => ({ key, value: Number(key) })).filter((e) => Number.isFinite(e.value));
+  return entries.length ? entries.sort((a, b) => a.value - b.value) : fallback();
+}
 var FibRetracement = class {
   constructor(first) {
     this.type = "fibRetracement";
@@ -9180,14 +9196,16 @@ var FibRetracement = class {
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
     ctx.lineWidth = baseLineWidth;
-    for (let i = 0; i < FIB_LEVELS.length; i++) {
-      const level = FIB_LEVELS[i];
-      const key = String(level);
+    const entries = fibLevelEntries(s.levels);
+    const drawn = [];
+    for (let i = 0; i < entries.length; i++) {
+      const { key, value: level } = entries[i];
       const lvl = s.levels?.[key];
       if (lvl?.visible === false) continue;
+      drawn.push(level);
       const price = highPrice - range * level;
       const y = scale.yToPixel(price, priceRange, chartH);
-      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_FALLBACK_COLORS[i];
+      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_FALLBACK_COLORS[i % FIB_FALLBACK_COLORS.length];
       const color = hexWithAlpha(baseColor, isSelected ? 0.8 : 0.6);
       ctx.strokeStyle = color;
       applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
@@ -9201,6 +9219,7 @@ var FibRetracement = class {
       ctx.fillStyle = color;
       ctx.fillText(lbl, xMin + 4, y - 3);
     }
+    this.visibleLevels = drawn;
     for (const [ax, ay] of [[x1, y1], [x22, y22]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9214,7 +9233,7 @@ var FibRetracement = class {
     const highPrice = Math.max(this.points[0].price, this.points[1].price);
     const lowPrice = Math.min(this.points[0].price, this.points[1].price);
     const range = highPrice - lowPrice;
-    for (const level of FIB_LEVELS) {
+    for (const level of this.visibleLevels ?? FIB_LEVELS) {
       const price = highPrice - range * level;
       const lineY = scale.yToPixel(price, priceRange, chartH);
       if (Math.abs(y - lineY) <= HIT_TOLERANCE9) return true;
@@ -14800,9 +14819,9 @@ var DrawingManager = class {
   updateDrawingStyle(id, patch) {
     const drawing = this.getDrawingById(id);
     if (!drawing) return null;
+    const existingLevels = drawing.style?.levels;
     drawing.style = { ...drawing.style ?? {}, ...patch };
     const patchLevels = patch.levels;
-    const existingLevels = drawing.style.levels;
     if (patchLevels && existingLevels) {
       drawing.style.levels = {
         ...existingLevels,
@@ -16854,6 +16873,23 @@ var POPOVER_CONTROLS = {
 var LINE_WIDTHS = [1, 2, 3, 4];
 var FONT_SIZES = [10, 11, 12, 13, 14, 16, 18, 20, 24];
 var SWATCH_PX = 24;
+var EDITABLE_LEVEL_TYPES = /* @__PURE__ */ new Set(["fibRetracement"]);
+function mergeLevels(themeLevels, instLevels) {
+  const out = {};
+  for (const k of Object.keys(themeLevels ?? {})) {
+    const lvl = themeLevels?.[k];
+    if (lvl) out[k] = lvl;
+  }
+  for (const k of Object.keys(instLevels ?? {})) {
+    const lvl = instLevels?.[k];
+    if (lvl === null) delete out[k];
+    else if (lvl) out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...lvl };
+  }
+  return out;
+}
+function levelKey(value) {
+  return String(value);
+}
 var DrawingStylePopover = class {
   constructor(container, theme, onChange) {
     this.currentDrawing = null;
@@ -16998,7 +17034,9 @@ var DrawingStylePopover = class {
         case "fibLevels":
           groups.push(this.group(
             "Levels",
-            this.buildFibLevelsButton({ ...themeEntry.levels ?? {}, ...style.levels ?? {} })
+            this.buildFibLevelsButton(
+              mergeLevels(themeEntry.levels, style.levels)
+            )
           ));
           break;
       }
@@ -17198,6 +17236,65 @@ var DrawingStylePopover = class {
     });
     return wrap;
   }
+  /** Static ratio text — used for level sets whose ratios are fixed. */
+  buildLevelRatioLabel(key) {
+    const label = document.createElement("span");
+    label.textContent = key;
+    Object.assign(label.style, { fontSize: "11px", color: this.theme.tooltip.text });
+    return label;
+  }
+  /**
+   * Editable ratio field (TradingView-style): the user retypes a level's ratio
+   * and the line moves, keeping its color and visibility. Commits on Enter or
+   * blur; reverts when the value isn't a finite number or already belongs to
+   * another row, so the level count never changes.
+   */
+  buildLevelRatioInput(initialKey, taken, onCommit) {
+    let current = initialKey;
+    const input = document.createElement("input");
+    input.type = "number";
+    input.step = "0.001";
+    input.value = current;
+    input.title = "Level ratio \u2014 press Enter to apply";
+    Object.assign(input.style, {
+      width: "58px",
+      padding: "2px 4px",
+      fontSize: "11px",
+      fontFamily: "inherit",
+      color: this.theme.tooltip.text,
+      background: this.theme.background,
+      border: `1px solid ${this.theme.axisBorder}`,
+      borderRadius: "3px",
+      outline: "none"
+    });
+    input.addEventListener("focus", () => {
+      input.style.borderColor = this.theme.ui.accent;
+    });
+    input.addEventListener("blur", () => {
+      input.style.borderColor = this.theme.axisBorder;
+    });
+    input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") input.blur();
+    });
+    const commit = () => {
+      const raw = Number(input.value);
+      const next = Number.isFinite(raw) ? levelKey(raw) : null;
+      if (next === null || next !== current && taken.has(next)) {
+        input.value = current;
+        return;
+      }
+      if (next === current) {
+        input.value = current;
+        return;
+      }
+      current = next;
+      input.value = next;
+      onCommit(next);
+    };
+    input.addEventListener("change", commit);
+    return input;
+  }
   openFibPanel(anchor, levels) {
     this.closeFibPanel();
     const panel = document.createElement("div");
@@ -17219,23 +17316,37 @@ var DrawingStylePopover = class {
       alignItems: "center"
     });
     const keys = Object.keys(levels).sort((a, b) => Number(a) - Number(b));
+    const editable = this.currentDrawing !== null && EDITABLE_LEVEL_TYPES.has(this.currentDrawing.type);
+    const taken = new Set(keys);
     for (const k of keys) {
       const level = levels[k];
+      let key = k;
+      let color = level.color;
       const cb = document.createElement("input");
       cb.type = "checkbox";
       cb.checked = level.visible !== false;
       cb.style.accentColor = this.theme.ui.accent;
       cb.style.cursor = "pointer";
-      const label = document.createElement("span");
-      label.textContent = k;
-      Object.assign(label.style, { fontSize: "11px", color: this.theme.tooltip.text });
-      const swatch = this.makeColorSwatch(level.color, (hex) => {
-        this.emit({ levels: { [k]: { visible: cb.checked, color: hex } } });
+      const swatch = this.makeColorSwatch(color, (hex) => {
+        color = hex;
+        this.emit({ levels: { [key]: { visible: cb.checked, color: hex } } });
       });
       cb.addEventListener("change", () => {
-        this.emit({ levels: { [k]: { visible: cb.checked, color: level.color } } });
+        this.emit({ levels: { [key]: { visible: cb.checked, color } } });
       });
-      panel.append(cb, label, swatch);
+      panel.append(cb, editable ? this.buildLevelRatioInput(
+        k,
+        taken,
+        (nextKey) => {
+          this.emit({ levels: {
+            [key]: null,
+            [nextKey]: { visible: cb.checked, color }
+          } });
+          taken.delete(key);
+          taken.add(nextKey);
+          key = nextKey;
+        }
+      ) : this.buildLevelRatioLabel(k), swatch);
     }
     const anchorRect = anchor.getBoundingClientRect();
     const cRect = this.container.getBoundingClientRect();