@markdy/renderer-dom 1.0.9 → 1.0.11

package/README.md

@@ -45,7 +45,7 @@ import { createDiagram } from "@markdy/renderer-dom";
 const diagram = createDiagram({
   container: document.getElementById("scene")!,
   code: `
-    scene "Request" theme=paper
+    scene theme=paper
     browser Web
     service API
     beat main:
@@ -77,8 +77,9 @@ diagram.destroy();    // clean up DOM + cancel animations
 | `sceneBoundaryProgress` | `boolean \| string` | `true` | Show boundary progress bar, or pass a custom color/gradient string |
 | `progressColor` | `string` | `plan.meta.progressColor ?? "rainbow"` | Custom progress bar color (e.g. `"#3b82f6"`) or gradient (e.g. `"#ec4899, #8b5cf6"`) |
 | `playbackRate` | `number` | `plan.meta.playbackRate ?? 1` | Normalized timeline speed multiplier; `1` is Markdy's normal pace |
-| `interactiveViewport` | `boolean` | `controls \|\| plan.meta.interactiveViewport` | Enable wheel zoom and drag pan on the rendered viewport |
-| `controls` | `boolean` | `plan.meta.controls ?? false` | Show left-aligned footer controls toolbar (play/pause, restart, speed, reset view); also enables viewport interaction |
+| `interactiveViewport` | `boolean` | `controls \|\| player.interaction` | Enable wheel zoom and drag pan on the rendered viewport |
+| `controls` | `boolean` | `player.controls` | Show the footer toolbar (play, prev/next beat, restart, seek, speed, fit, reset view, SVG, share); also enables viewport interaction |
+| `shareUrl` | `string` | Markdy playground | Base URL used by the Share control when building `#code=` links |
 | `onWarning` | `(warning: Diagnostic) => void` | `console.warn` | Called for each soft parse warning |
 | `onTimeUpdate` | `(seconds: number, durationSeconds: number) => void` | — | Called whenever playback or seek changes the current time |
 | `onPlayStateChange` | `(playing: boolean) => void` | — | Called when playback starts or pauses |

package/dist/chunk-VIZHA7GI.js

@@ -0,0 +1,99 @@
+// src/export/svg-exporter.ts
+function copyRenderedStyles(source, clone) {
+  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return;
+  const sourceElements = [source, ...Array.from(source.querySelectorAll("*"))];
+  const cloneElements = [clone, ...Array.from(clone.querySelectorAll("*"))];
+  for (let index = 0; index < Math.min(sourceElements.length, cloneElements.length); index++) {
+    const computed = window.getComputedStyle(sourceElements[index]);
+    const target = cloneElements[index].style;
+    for (let propertyIndex = 0; propertyIndex < computed.length; propertyIndex++) {
+      const property = computed.item(propertyIndex);
+      target.setProperty(property, computed.getPropertyValue(property), computed.getPropertyPriority(property));
+    }
+  }
+}
+function normalizeExportViewport(scene) {
+  scene.querySelectorAll(".markdy-viewport-transform").forEach((viewportTransform) => {
+    viewportTransform.style.transform = "translate(0px, 0px) scale(1)";
+    viewportTransform.style.transformOrigin = "0 0";
+    viewportTransform.style.willChange = "auto";
+  });
+}
+function getDiagramSceneElement(containerEl) {
+  const sceneEl = containerEl.classList?.contains("markdy-scene-root") ? containerEl : containerEl.querySelector(".markdy-scene-root") || containerEl.querySelector("svg") || (containerEl.tagName?.toLowerCase() === "svg" ? containerEl : null);
+  if (!sceneEl) throw new Error("No Markdy scene element found in container");
+  return sceneEl;
+}
+function prepareHtmlSceneForExport(sceneEl, options = {}) {
+  const clonedScene = sceneEl.cloneNode(true);
+  copyRenderedStyles(sceneEl, clonedScene);
+  normalizeExportViewport(clonedScene);
+  const widthStr = clonedScene.style.width || String(sceneEl.clientWidth || 800);
+  const heightStr = clonedScene.style.height || String(sceneEl.clientHeight || 400);
+  let width = parseFloat(widthStr);
+  let height = parseFloat(heightStr);
+  if (isNaN(width)) width = 800;
+  if (isNaN(height)) height = 400;
+  const scale = options.scale || 1;
+  const scaledWidth = width * scale;
+  const scaledHeight = height * scale;
+  clonedScene.style.transform = `scale(${scale})`;
+  clonedScene.style.transformOrigin = "0 0";
+  clonedScene.style.position = "relative";
+  clonedScene.style.left = "0px";
+  clonedScene.style.top = "0px";
+  clonedScene.style.margin = "0";
+  clonedScene.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+  if (options.transparentBackground) {
+    clonedScene.style.background = "transparent";
+  }
+  return { sceneEl, clonedScene, width, height, scaledWidth, scaledHeight };
+}
+function exportDiagramAsVectorSvg(containerEl, options = {}) {
+  const sceneEl = getDiagramSceneElement(containerEl);
+  if (sceneEl.tagName?.toLowerCase() === "svg") {
+    const clonedSvg = sceneEl.cloneNode(true);
+    if (!clonedSvg.getAttribute("xmlns")) {
+      clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    }
+    const serializer2 = new XMLSerializer();
+    return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+${serializer2.serializeToString(clonedSvg)}`;
+  }
+  const { clonedScene, scaledWidth, scaledHeight } = prepareHtmlSceneForExport(sceneEl, options);
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+  svg.setAttribute("width", String(scaledWidth));
+  svg.setAttribute("height", String(scaledHeight));
+  svg.setAttribute("viewBox", `0 0 ${scaledWidth} ${scaledHeight}`);
+  if (options.includeThemeStyles !== false) {
+    const styleEl = document.createElementNS("http://www.w3.org/2000/svg", "style");
+    let combinedStyles = `
+      foreignObject { width: 100%; height: 100%; }
+      .markdy-node { transition: opacity 0.3s ease; }
+    `;
+    if (typeof document !== "undefined") {
+      const styles = document.querySelectorAll("style[id^='markdy-']");
+      for (let i = 0; i < styles.length; i++) {
+        combinedStyles += styles[i].textContent + "\n";
+      }
+    }
+    styleEl.textContent = combinedStyles;
+    svg.appendChild(styleEl);
+  }
+  const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+  foreignObject.setAttribute("width", "100%");
+  foreignObject.setAttribute("height", "100%");
+  foreignObject.appendChild(clonedScene);
+  svg.appendChild(foreignObject);
+  const serializer = new XMLSerializer();
+  return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+` + serializer.serializeToString(svg);
+}
+
+export {
+  getDiagramSceneElement,
+  prepareHtmlSceneForExport,
+  exportDiagramAsVectorSvg
+};

package/dist/index.d.ts

@@ -28,6 +28,8 @@ interface DiagramOptions {
     playbackRate?: number;
     /** Enable wheel zoom and drag pan on the rendered viewport. Defaults to false. */
     interactiveViewport?: boolean;
+    /** Base URL for the Share control. Defaults to the Markdy playground. */
+    shareUrl?: string;
     /** Show built-in playback and viewport controls. Also enables viewport interaction. Defaults to false. */
     controls?: boolean;
     onWarning?: (warning: Diagnostic) => void;
@@ -46,6 +48,8 @@ interface Diagram {
     isPlaying(): boolean;
     beats(): BeatRange[];
     seekToBeat(name: string): void;
+    nextBeat(): void;
+    prevBeat(): void;
     destroy(): void;
 }
 declare function createDiagram(opts: DiagramOptions): Diagram;