@markdy/renderer-dom 0.8.15 → 0.8.16

package/dist/index.js

@@ -1930,15 +1930,6 @@ function createDiagram(opts) {
   }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
-  const viewportTransform = document.createElement("div");
-  viewportTransform.className = "markdy-viewport-transform";
-  Object.assign(viewportTransform.style, {
-    position: "absolute",
-    inset: "0",
-    transformOrigin: "0 0",
-    willChange: interactiveViewport ? "transform" : "auto"
-  });
-  viewport.appendChild(viewportTransform);
   const scene = document.createElement("div");
   scene.className = "markdy-scene-root";
   Object.assign(scene.style, {
@@ -1952,11 +1943,20 @@ function createDiagram(opts) {
     transformOrigin: "0 0"
   });
   applyThemeToScene(scene, plan.theme);
-  viewportTransform.appendChild(scene);
+  viewport.appendChild(scene);
+  const viewportTransform = document.createElement("div");
+  viewportTransform.className = "markdy-viewport-transform";
+  Object.assign(viewportTransform.style, {
+    position: "absolute",
+    inset: "0",
+    transformOrigin: "0 0",
+    willChange: interactiveViewport ? "transform" : "auto"
+  });
+  scene.appendChild(viewportTransform);
   const sceneContent = document.createElement("div");
   sceneContent.className = "markdy-scene-content";
   Object.assign(sceneContent.style, { position: "absolute", inset: "0" });
-  scene.appendChild(sceneContent);
+  viewportTransform.appendChild(sceneContent);
   const titleEl = createTitleEl(plan.title);
   sceneContent.appendChild(titleEl);
   const cameraLayer = document.createElement("div");
@@ -2014,9 +2014,11 @@ function createDiagram(opts) {
     nodeLayer.appendChild(el);
     nodeEls.set(node.id, el);
   }
+  let fitScale = 1;
   function scaleScene() {
-    const s = viewport.clientWidth / plan.meta.width;
-    scene.style.transform = `scale(${s})`;
+    const width = viewport.clientWidth || plan.meta.width;
+    fitScale = width / plan.meta.width;
+    scene.style.transform = `scale(${fitScale})`;
   }
   scaleScene();
   const resizeObserver = new ResizeObserver(scaleScene);
@@ -2078,8 +2080,8 @@ function createDiagram(opts) {
   function handleViewportWheel(event) {
     event.preventDefault();
     const rect = viewport.getBoundingClientRect();
-    const pointerX = event.clientX - rect.left;
-    const pointerY = event.clientY - rect.top;
+    const pointerX = (event.clientX - rect.left) / fitScale;
+    const pointerY = (event.clientY - rect.top) / 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;
@@ -2102,8 +2104,8 @@ function createDiagram(opts) {
   }
   function handleViewportPointerMove(event) {
     if (event.pointerId !== activePointerId) return;
-    const deltaX = event.clientX - dragLastX;
-    const deltaY = event.clientY - dragLastY;
+    const deltaX = (event.clientX - dragLastX) / fitScale;
+    const deltaY = (event.clientY - dragLastY) / fitScale;
     const totalX = event.clientX - dragStartX;
     const totalY = event.clientY - dragStartY;
     if (!dragMoved && Math.hypot(totalX, totalY) >= DRAG_CLICK_THRESHOLD_PX) dragMoved = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "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.15"
+    "@markdy/core": "0.8.16"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.15"
+    "@markdy/stdlib-systems": "0.8.16"
   },
   "scripts": {
     "build": "tsup",