@markdy/renderer-dom 0.8.26 → 0.8.28

package/dist/index.d.ts

@@ -33,6 +33,7 @@ interface DiagramOptions {
     onWarning?: (warning: Diagnostic) => void;
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;
     onPlayStateChange?: (playing: boolean) => void;
+    onEnded?: () => void;
 }
 interface Diagram {
     play(): void;
@@ -81,6 +82,21 @@ interface SvgExportOptions {
 }
 declare function exportDiagramAsVectorSvg(containerEl: HTMLElement, options?: SvgExportOptions): string;
 
+interface TimelineController {
+    seek(seconds: number): void;
+    currentTime(): number;
+    duration(): number;
+    isPlaying(): boolean;
+    play(): void;
+    pause(): void;
+}
+interface GifDiagramExportOptions extends SvgExportOptions {
+    fps?: number;
+    pixelRatio?: number;
+    loop?: boolean;
+}
+declare function exportDiagramAsGif(container: HTMLElement, timeline: TimelineController, options?: GifDiagramExportOptions): Promise<Blob>;
+
 /**
  * packages/renderer-dom/src/export/png-exporter.ts
  * High-DPI raster PNG export with 2x retina scaling.
@@ -119,4 +135,4 @@ declare class DiagramPresentationController {
     destroy(): void;
 }
 
-export { type AnimationRecordFrame, type ControllerOptions, type Diagram, type DiagramOptions, DiagramPresentationController, type GifExportOptions, ICON_REGISTRY, type IconSpec, type PngExportOptions, type SvgExportOptions, createDiagram, encodeGifSequence, exportDiagramAsPng, exportDiagramAsVectorSvg };
+export { type AnimationRecordFrame, type ControllerOptions, type Diagram, type DiagramOptions, DiagramPresentationController, type GifDiagramExportOptions, type GifExportOptions, ICON_REGISTRY, type IconSpec, type PngExportOptions, type SvgExportOptions, type TimelineController, createDiagram, encodeGifSequence, exportDiagramAsGif, exportDiagramAsPng, exportDiagramAsVectorSvg };

package/dist/index.js

@@ -808,13 +808,14 @@ function ensureAnnotationStyles(doc) {
   doc.head.appendChild(style);
 }
 function positionForAnnotation(position, bounds, index) {
-  const pad = 24;
+  const pad = 28;
+  const topPad = 68;
   const p = (position ?? "").toLowerCase();
-  if (p.includes("top") && p.includes("right")) return { x: bounds.width - pad - 200, y: pad + index * 48 };
-  if (p.includes("top") && p.includes("left")) return { x: pad, y: pad + index * 48 };
+  if (p.includes("top") && p.includes("right")) return { x: bounds.width - pad - 200, y: topPad + index * 48 };
+  if (p.includes("top") && p.includes("left")) return { x: pad, y: topPad + index * 48 };
   if (p.includes("bottom") && p.includes("right")) return { x: bounds.width - pad - 200, y: bounds.height - pad - 40 };
   if (p.includes("bottom") && p.includes("left")) return { x: pad, y: bounds.height - pad - 40 };
-  return { x: bounds.width - pad - 200, y: pad + index * 48 };
+  return { x: bounds.width - pad - 200, y: topPad + index * 48 };
 }
 function mountAnnotations(layer, annotations, nodes, theme, bounds) {
   if (annotations.length === 0) return;
@@ -2090,7 +2091,8 @@ function createDiagram(opts) {
     copyright: explicitCopyright,
     onWarning = (w) => console.warn(`[markdy] line ${w.line}: ${w.message}`),
     onTimeUpdate,
-    onPlayStateChange
+    onPlayStateChange,
+    onEnded
   } = opts;
   const { ast, plan } = parseAndCompile(code);
   for (const w of ast.diagnostics) {
@@ -2110,11 +2112,16 @@ function createDiagram(opts) {
   const totalDurationMs = plan.duration * 1e3;
   const durationSeconds = plan.duration;
   const viewport = document.createElement("div");
+  viewport.className = "markdy-viewport";
   Object.assign(viewport.style, {
     position: "relative",
     width: "100%",
+    height: "100%",
+    maxWidth: "100%",
+    maxHeight: "100%",
     aspectRatio: `${plan.meta.width} / ${plan.meta.height}`,
-    overflow: "hidden"
+    overflow: "hidden",
+    boxSizing: "border-box"
   });
   container.appendChild(viewport);
   let progressEl = null;
@@ -2269,14 +2276,85 @@ function createDiagram(opts) {
     nodeEls.set(node.id, el);
   }
   let fitScale = 1;
+  let sceneOffsetX = 0;
+  let sceneOffsetY = 0;
+  function computeContentBounds() {
+    if (!plan.nodes || plan.nodes.length === 0) {
+      return { minX: 0, minY: 0, maxX: plan.meta.width, maxY: plan.meta.height, width: plan.meta.width, height: plan.meta.height };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of plan.nodes) {
+      minX = Math.min(minX, node.x);
+      minY = Math.min(minY, node.y);
+      maxX = Math.max(maxX, node.x + node.width);
+      maxY = Math.max(maxY, node.y + node.height);
+    }
+    for (const gb of plan.groupBoundaries ?? []) {
+      minX = Math.min(minX, gb.x);
+      minY = Math.min(minY, gb.y);
+      maxX = Math.max(maxX, gb.x + gb.width);
+      maxY = Math.max(maxY, gb.y + gb.height);
+    }
+    for (const bus of plan.treeBuses ?? []) {
+      minX = Math.min(minX, bus.parentX, ...bus.childXs.length ? bus.childXs : [bus.parentX]);
+      minY = Math.min(minY, bus.parentY, bus.branchY, bus.childY);
+      maxX = Math.max(maxX, bus.parentX, ...bus.childXs.length ? bus.childXs : [bus.parentX]);
+      maxY = Math.max(maxY, bus.parentY, bus.branchY, bus.childY);
+    }
+    if (plan.title) {
+      minY = Math.min(minY, 20);
+    }
+    const pad = 36;
+    minX = Math.max(0, minX - pad);
+    minY = Math.max(0, minY - pad);
+    maxX = Math.min(plan.meta.width, maxX + pad);
+    maxY = Math.min(plan.meta.height, maxY + pad);
+    const width = Math.max(maxX - minX, 200);
+    const height = Math.max(maxY - minY, 140);
+    return { minX, minY, maxX, maxY, width, height };
+  }
   function scaleScene() {
-    const width = viewport.clientWidth || plan.meta.width;
-    fitScale = width / plan.meta.width;
+    const isBrowserLayout = (viewport.clientWidth || container.clientWidth || 0) > 0;
+    if (!isBrowserLayout) {
+      fitScale = 1;
+      sceneOffsetX = 0;
+      sceneOffsetY = 0;
+      scene.style.left = "0px";
+      scene.style.top = "0px";
+      scene.style.transformOrigin = "0 0";
+      scene.style.transform = "scale(1)";
+      return;
+    }
+    const vWidth = viewport.clientWidth || container.clientWidth || plan.meta.width;
+    const vHeight = viewport.clientHeight || container.clientHeight || vWidth * plan.meta.height / plan.meta.width;
+    const canvasScaleX = vWidth / plan.meta.width;
+    const canvasScaleY = vHeight / plan.meta.height;
+    const baseCanvasScale = Math.min(canvasScaleX, canvasScaleY);
+    const bounds = computeContentBounds();
+    const contentScaleX = vWidth * 0.94 / bounds.width;
+    const contentScaleY = vHeight * 0.94 / bounds.height;
+    const optimalContentScale = Math.min(contentScaleX, contentScaleY);
+    const chosenScale = Math.max(
+      baseCanvasScale,
+      Math.min(optimalContentScale, baseCanvasScale * 1.45)
+    );
+    fitScale = Number.isFinite(chosenScale) && chosenScale > 0 ? chosenScale : 1;
+    const scaledWidth = plan.meta.width * fitScale;
+    const scaledHeight = plan.meta.height * fitScale;
+    sceneOffsetX = (vWidth - scaledWidth) / 2;
+    sceneOffsetY = (vHeight - scaledHeight) / 2;
+    scene.style.left = `${sceneOffsetX}px`;
+    scene.style.top = `${sceneOffsetY}px`;
+    scene.style.transformOrigin = "0 0";
     scene.style.transform = `scale(${fitScale})`;
   }
   scaleScene();
   const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(scaleScene) : null;
   resizeObserver?.observe(viewport);
+  if (container !== viewport) resizeObserver?.observe(container);
   const edgeRuntimes = /* @__PURE__ */ new Map();
   const edgeSceneId = createEdgeSceneId();
   const sequenceAnims = plan.diagramType === "sequence" ? mountSequenceLayer(
@@ -2341,8 +2419,8 @@ function createDiagram(opts) {
   function handleViewportWheel(event) {
     event.preventDefault();
     const rect = viewport.getBoundingClientRect();
-    const pointerX = (event.clientX - rect.left) / fitScale;
-    const pointerY = (event.clientY - rect.top) / fitScale;
+    const pointerX = (event.clientX - rect.left - sceneOffsetX) / fitScale;
+    const pointerY = (event.clientY - rect.top - sceneOffsetY) / fitScale;
     const nextScale = Math.min(MAX_VIEWPORT_ZOOM, Math.max(MIN_VIEWPORT_ZOOM, viewportScale * Math.exp(-event.deltaY * VIEWPORT_ZOOM_STEP)));
     if (nextScale === viewportScale) return;
     const sceneX = (pointerX - viewportPanX) / viewportScale;
@@ -2426,6 +2504,7 @@ function createDiagram(opts) {
         emitPlayStateChange(false);
         lastRafTs = null;
         rafId = null;
+        onEnded?.();
         return;
       }
     }
@@ -2784,6 +2863,19 @@ function encodeGifSequence(frames, options = {}) {
 }
 
 // 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 exportDiagramAsVectorSvg(containerEl, options = {}) {
   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");
@@ -2797,6 +2889,7 @@ function exportDiagramAsVectorSvg(containerEl, options = {}) {
 ${serializer2.serializeToString(clonedSvg)}`;
   }
   const clonedScene = sceneEl.cloneNode(true);
+  copyRenderedStyles(sceneEl, clonedScene);
   const widthStr = clonedScene.style.width || String(sceneEl.clientWidth || 800);
   const heightStr = clonedScene.style.height || String(sceneEl.clientHeight || 400);
   let width = parseFloat(widthStr);
@@ -2809,6 +2902,8 @@ ${serializer2.serializeToString(clonedSvg)}`;
   clonedScene.style.transform = `scale(${scale})`;
   clonedScene.style.transformOrigin = "0 0";
   clonedScene.style.position = "relative";
+  clonedScene.style.left = "0px";
+  clonedScene.style.top = "0px";
   clonedScene.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
   if (options.transparentBackground) {
     clonedScene.style.background = "transparent";
@@ -2844,6 +2939,60 @@ ${serializer2.serializeToString(clonedSvg)}`;
 ` + serializer.serializeToString(svg);
 }
 
+// src/export/gif-exporter.ts
+var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+async function rasterizeFrame(container, pixelRatio, options) {
+  const svg = exportDiagramAsVectorSvg(container, options);
+  const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml;charset=utf-8" }));
+  try {
+    const image = new Image();
+    await new Promise((resolve, reject) => {
+      image.onload = () => resolve();
+      image.onerror = () => reject(new Error("Failed to rasterize GIF frame"));
+      image.src = url;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth * pixelRatio;
+    canvas.height = image.naturalHeight * pixelRatio;
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("Could not create GIF canvas context");
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return context.getImageData(0, 0, canvas.width, canvas.height);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+async function exportDiagramAsGif(container, timeline, options = {}) {
+  const fps = Math.min(24, Math.max(1, Math.round(options.fps ?? 12)));
+  const duration = timeline.duration();
+  const frameCount = Math.max(1, Math.ceil(duration * fps));
+  const delayMs = Math.max(20, Math.round(1e3 / fps));
+  const priorTime = timeline.currentTime();
+  const wasPlaying = timeline.isPlaying();
+  timeline.pause();
+  try {
+    const frames = [];
+    for (let frame = 0; frame < frameCount; frame++) {
+      timeline.seek(Math.min(duration, frame / fps));
+      await nextFrame();
+      frames.push({
+        imageData: await rasterizeFrame(container, options.pixelRatio ?? 1, options),
+        delayMs
+      });
+    }
+    timeline.seek(duration);
+    await nextFrame();
+    frames.push({ imageData: await rasterizeFrame(container, options.pixelRatio ?? 1, options), delayMs: Math.max(delayMs, 800) });
+    const encoded = encodeGifSequence(frames, { dither: true, loop: options.loop ?? true });
+    const bytes = new Uint8Array(encoded.byteLength);
+    bytes.set(encoded);
+    return new Blob([bytes.buffer], { type: "image/gif" });
+  } finally {
+    timeline.seek(priorTime);
+    if (wasPlaying) timeline.play();
+  }
+}
+
 // src/export/png-exporter.ts
 async function exportDiagramAsPng(containerEl, options = {}) {
   const svgXml = exportDiagramAsVectorSvg(containerEl, options);
@@ -2853,7 +3002,10 @@ async function exportDiagramAsPng(containerEl, options = {}) {
   const img = new Image();
   await new Promise((resolve, reject) => {
     img.onload = () => resolve();
-    img.onerror = () => reject(new Error("Failed to rasterize SVG into Image for PNG export"));
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to rasterize SVG into Image for PNG export"));
+    };
     img.src = url;
   });
   const width = img.naturalWidth || 800;
@@ -2925,7 +3077,9 @@ var DiagramPresentationController = class {
     this.diagram.setPlaybackRate(rate);
   }
   onKeyDown = (e) => {
-    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement || e.target?.isContentEditable) {
+      return;
+    }
     switch (e.key) {
       case "ArrowRight":
       case "PageDown":
@@ -2960,6 +3114,7 @@ export {
   ICON_REGISTRY,
   createDiagram,
   encodeGifSequence,
+  exportDiagramAsGif,
   exportDiagramAsPng,
   exportDiagramAsVectorSvg
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.26",
+  "version": "0.8.28",
   "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -44,14 +44,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.26"
+    "@markdy/core": "0.8.28"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.26"
+    "@markdy/stdlib-systems": "0.8.28"
   },
   "scripts": {
     "build": "tsup",