edododraw 0.1.2 → 0.1.4

package/dist-lib/chunks/{EdodoDraw-C3Yd1I9B.js → EdodoDraw-BdJowisU.js}

@@ -252,6 +252,17 @@ const FILL_PALETTE = {
   brown: "#e5dbd4",
   white: "#ffffff"
 };
+function isLightColor(color) {
+  if (!color) return false;
+  const c = color.trim().toLowerCase();
+  let hex = c.startsWith("#") ? c.slice(1) : "";
+  if (hex.length === 3) hex = hex.replace(/./g, (ch) => ch + ch);
+  if (hex.length !== 6 || /[^0-9a-f]/.test(hex)) return true;
+  const r2 = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return 0.299 * r2 + 0.587 * g + 0.114 * b > 150;
+}
 function resolveStroke(token, fallback) {
   if (!token) return fallback;
   const t = token.trim().toLowerCase();
@@ -3067,9 +3078,7 @@ class CameraController {
   };
   /** Duration heuristic: further travel + bigger zoom change => longer. */
   autoDuration(from, to) {
-    const dist2 = Math.hypot(to.cx - from.cx, to.cy - from.cy) * Math.min(from.zoom, to.zoom);
-    const zoomRatio = Math.abs(Math.log(to.zoom / from.zoom));
-    return clamp(420 + dist2 * 0.12 + zoomRatio * 320, 420, 1300);
+    return autoDuration(from, to);
   }
   // ---- high-level ops -----------------------------------------------------
   fitAll(scene, opts = {}) {
@@ -3109,6 +3118,11 @@ class CameraController {
     this.setImmediate({ cx: cam.cx - dx / cam.zoom, cy: cam.cy - dy / cam.zoom, zoom: cam.zoom });
   }
 }
+function autoDuration(from, to) {
+  const dist2 = Math.hypot(to.cx - from.cx, to.cy - from.cy) * Math.min(from.zoom, to.zoom);
+  const zoomRatio = Math.abs(Math.log(to.zoom / from.zoom));
+  return clamp(420 + dist2 * 0.12 + zoomRatio * 320, 420, 1300);
+}
 function lerp(a, b, t) {
   return a + (b - a) * t;
 }
@@ -3352,7 +3366,7 @@ const LIGHT_THEME = {
   background: "#ffffff",
   defaultStroke: STROKE_PALETTE.black,
   defaultText: STROKE_PALETTE.black,
-  gridColor: "#eceff3",
+  gridColor: "#d5d9e0",
   mode: "light"
 };
 const DARK_THEME = {
@@ -3360,7 +3374,7 @@ const DARK_THEME = {
   background: "#121212",
   defaultStroke: "#e3e3e3",
   defaultText: "#e3e3e3",
-  gridColor: "#22262c",
+  gridColor: "#2c313a",
   mode: "dark"
 };
 function defaultNodeStyle(seed, mode = "light") {
@@ -3766,7 +3780,8 @@ function compileProgram(program, opts = {}) {
       for (const t of themes.get(name).tokens) tokenMap.set(t.name, t.value);
     }
   }
-  const mode = themeName?.toLowerCase().includes("dark") ? "dark" : "light";
+  const derivedMode = themeName?.toLowerCase().includes("dark") ? "dark" : "light";
+  const mode = opts.mode ?? derivedMode;
   const classAttrs = (name, seen = /* @__PURE__ */ new Set()) => {
     if (seen.has(name) || !styles.has(name)) return { attrs: [] };
     seen.add(name);
@@ -3792,6 +3807,7 @@ function compileProgram(program, opts = {}) {
     const classes = collectClasses(nd);
     const layered = styleFor("node", classes, nd.attrs);
     const built = buildNodeStyle(layered, tokenMap);
+    applyDarkInk(built.style, mode);
     const shape = mapShape(built.shape ?? nd.shape);
     const label = built.label ?? nd.label ?? prettyId(id);
     const node = makeNode({
@@ -3907,6 +3923,15 @@ function collectTags(nd) {
   }
   return tags;
 }
+const DARK_INK = "#1e1e1e";
+const LIGHT_INK = "#e3e3e3";
+function applyDarkInk(style, mode) {
+  if (mode !== "dark") return;
+  const solidLightFill = style.fillStyle === "solid" && isLightColor(style.fill ?? null);
+  const ink = solidLightFill ? DARK_INK : LIGHT_INK;
+  if (style.textColor === void 0) style.textColor = ink;
+  if (style.stroke === void 0 && solidLightFill) style.stroke = DARK_INK;
+}
 function buildNodeStyle(attrs, tokens, _mode) {
   const style = {};
   const out = { style };
@@ -4104,6 +4129,7 @@ function ensureInline(scene, nd, tokens, mode, styleFor) {
   if (scene.nodes.some((n) => n.id === nd.id)) return;
   const layered = styleFor("node", nd.classes, nd.attrs);
   const built = buildNodeStyle(layered, tokens);
+  applyDarkInk(built.style, mode);
   scene.nodes.push(
     makeNode({
       id: nd.id,
@@ -4276,8 +4302,30 @@ function applyRevealToStep(c, scene, step) {
   const ids = c.targets.flatMap((t) => resolveTargetIds(t, scene));
   if (c.verb === "hide" || c.verb === "fade-out" || c.verb === "remove") {
     step.hide.push(...ids);
-  } else {
-    step.reveal.push(...ids);
+    return;
+  }
+  step.reveal.push(...ids);
+  const effect = revealEffect(c.with ?? (c.verb !== "show" ? c.verb : void 0));
+  if (effect) {
+    step.revealFx = step.revealFx ?? {};
+    for (const id of ids) step.revealFx[id] = effect;
+  }
+}
+function revealEffect(raw) {
+  switch (raw) {
+    case "fade-in":
+    case "fade":
+      return "fade";
+    case "pop":
+    case "pop-in":
+    case "emphasize":
+      return "pop";
+    case "draw-on":
+    case "draw":
+    case "sweep":
+      return "sweep";
+    default:
+      return void 0;
   }
 }
 function cameraDirective(cam, scene, _tokens, timelineProps) {
@@ -4314,9 +4362,9 @@ function normalizeCamOp(op) {
       return "focus";
   }
 }
-function compileEdd(source) {
+function compileEdd(source, opts = {}) {
   const { program, diagnostics } = parse(source);
-  const { scene } = compileProgram(program, { diagnostics });
+  const { scene } = compileProgram(program, { diagnostics, mode: opts.mode });
   const report = diagnostics.items.map((d) => formatDiagnostic(d, source));
   return { scene, diagnostics, report };
 }
@@ -5149,6 +5197,11 @@ function ensureEngineStyles(doc = document) {
   injected = true;
 }
 const SVG_NS = "http://www.w3.org/2000/svg";
+const REVEAL_EFFECT_CLASS = {
+  fade: "edd-reveal-fade",
+  pop: "edd-reveal-pop",
+  sweep: "edd-reveal-sweep"
+};
 class SvgRenderer {
   container;
   svg;
@@ -5268,9 +5321,28 @@ class SvgRenderer {
       else el.classList.remove("edd-hidden");
     });
   }
+  /**
+   * Play a per-beat reveal animation (`fade` | `pop` | `sweep`) on the named
+   * element groups. Clears any prior reveal classes first and forces a reflow so
+   * re-entering the same beat restarts the animation. `fx` = id -> effect.
+   */
+  playReveal(fx) {
+    const classes = ["edd-reveal-fade", "edd-reveal-pop", "edd-reveal-sweep"];
+    const els = this.svg.querySelectorAll("[data-node],[data-edge]");
+    els.forEach((el) => el.classList.remove(...classes));
+    if (!fx || !Object.keys(fx).length) return;
+    void this.svg.getBoundingClientRect();
+    els.forEach((el) => {
+      const id = el.getAttribute("data-node") ?? el.getAttribute("data-edge");
+      const cls = id ? REVEAL_EFFECT_CLASS[fx[id]] : void 0;
+      if (cls) el.classList.add(cls);
+    });
+  }
   render(scene) {
     this.scene = scene;
-    this.bg.setAttribute("fill", scene.meta.background || scene.theme.background);
+    const bgColor = scene.meta.background || scene.theme.background;
+    this.bg.setAttribute("fill", "transparent");
+    this.container.style.backgroundColor = bgColor;
     for (const name of ["groups", "edges", "nodes"]) this.layers[name].replaceChildren();
     for (const group of scene.groups) {
       if (!group.frame) continue;
@@ -5435,6 +5507,7 @@ class TimelinePlayer {
     const step = this.steps[i];
     const scene = this.scene;
     this.renderer.applyVisibility(this.computeHidden(i));
+    if (animate) this.renderer.playReveal(step.revealFx);
     this.annotations.render(scene, [...scene.annotations, ...step.annotations], animate);
     this.emit();
     if (step.camera) {
@@ -5650,6 +5723,8 @@ class EdodoDraw {
   listeners = /* @__PURE__ */ new Map();
   textInput = null;
   closeInput = null;
+  colorScheme = null;
+  hasRendered = false;
   cleanup = [];
   constructor(container, options = {}) {
     this.container = container;
@@ -5708,7 +5783,7 @@ class EdodoDraw {
   async render(source) {
     this.source = source;
     const seq = ++this.renderSeq;
-    const { scene, diagnostics } = compileEdd(source);
+    const { scene, diagnostics } = compileEdd(source, { mode: this.colorScheme ?? void 0 });
     let diags = diagnostics.items;
     const blocks = extractMermaidBlocks(source);
     if (blocks.length) {
@@ -5725,6 +5800,7 @@ class EdodoDraw {
     }
     if (seq !== this.renderSeq) return { scene, diagnostics: diags };
     this.scene = scene;
+    this.hasRendered = true;
     this.renderer.render(scene);
     this.player.load(scene);
     this.renderer.measure();
@@ -5744,6 +5820,21 @@ class EdodoDraw {
   getSource() {
     return this.source;
   }
+  /**
+   * Force light/dark rendering, overriding the diagram's declared theme. Affects
+   * the canvas background, the dotted grid, and the diagram's default ink
+   * (strokes/text adapt for contrast on the dark canvas; explicit colors are
+   * kept). Pass `null` to fall back to the DSL's own theme. Re-renders the
+   * current source. Cheap and idempotent — no-ops if the scheme is unchanged.
+   */
+  setColorScheme(mode) {
+    if (this.colorScheme === mode) return;
+    this.colorScheme = mode;
+    if (this.hasRendered) void this.render(this.source);
+  }
+  getColorScheme() {
+    return this.colorScheme;
+  }
   // ---- camera -------------------------------------------------------------
   fit(animate = true) {
     this.renderer.measure();
@@ -5881,7 +5972,8 @@ class EdodoDraw {
       c.style.backgroundImage = "none";
       return;
     }
-    c.style.backgroundImage = "radial-gradient(circle, #d5d9e0 1px, transparent 1px)";
+    const dot = this.scene.theme.gridColor;
+    c.style.backgroundImage = `radial-gradient(circle, ${dot} 1px, transparent 1px)`;
     c.style.backgroundSize = `${cell}px ${cell}px`;
     c.style.backgroundPosition = `${-cam.cx * cam.zoom + w / 2}px ${-cam.cy * cam.zoom + h / 2}px`;
   }
@@ -5965,11 +6057,18 @@ class EdodoDraw {
   }
   /** Inline text editor for renaming a node (double-click / new node). */
   showRenameInput(id, current, screen) {
+    const dark = this.scene.theme.mode === "dark";
     this.openInlineInput({
       value: current,
       placeholder: "label…",
       screen,
-      style: { background: "#ffffff", color: "#1e1e1e", textAlign: "center", zIndex: "30", minWidth: "80px" },
+      style: {
+        background: dark ? "#23262d" : "#ffffff",
+        color: dark ? "#e6e7ea" : "#1e1e1e",
+        textAlign: "center",
+        zIndex: "30",
+        minWidth: "80px"
+      },
       onCommit: (v) => this.edit.applyRename(id, v)
     });
   }
@@ -6073,26 +6172,27 @@ export {
   hitTestNode as a3,
   injectMermaid as a4,
   isEmptyBBox as a5,
-  lerp$1 as a6,
-  listShapePlugins as a7,
-  makeEdge as a8,
-  makeNode as a9,
-  nodeBBox as aa,
-  nodeRect as ab,
-  nodeRectOf as ac,
-  pairedStrokeForFill as ad,
-  pointInRect as ae,
-  rectCenter as af,
-  rectToBBox as ag,
-  registerShape as ah,
-  renameNode as ai,
-  resolveAnchor as aj,
-  resolveFill as ak,
-  resolveMarker as al,
-  resolveStroke as am,
-  sceneBBox as an,
-  styleNode as ao,
-  writeOverrides as ap,
+  isLightColor as a6,
+  lerp$1 as a7,
+  listShapePlugins as a8,
+  makeEdge as a9,
+  makeNode as aa,
+  nodeBBox as ab,
+  nodeRect as ac,
+  nodeRectOf as ad,
+  pairedStrokeForFill as ae,
+  pointInRect as af,
+  rectCenter as ag,
+  rectToBBox as ah,
+  registerShape as ai,
+  renameNode as aj,
+  resolveAnchor as ak,
+  resolveFill as al,
+  resolveMarker as am,
+  resolveStroke as an,
+  sceneBBox as ao,
+  styleNode as ap,
+  writeOverrides as aq,
   EditController as b,
   EdodoDraw as c,
   FONT_FAMILY as d,
@@ -6119,4 +6219,4 @@ export {
   deleteElements as y,
   dist as z
 };
-//# sourceMappingURL=EdodoDraw-C3Yd1I9B.js.map
+//# sourceMappingURL=EdodoDraw-BdJowisU.js.map