@markdy/renderer-dom 0.2.0 → 0.5.0

package/dist/index.d.ts

@@ -24,6 +24,8 @@ interface PlayerOptions {
     code: string;
     assets?: Record<string, string>;
     autoplay?: boolean;
+    /** Loop the animation when it reaches the end. Defaults to true. */
+    loop?: boolean;
 }
 interface Player {
     play(): void;

package/dist/index.js

@@ -637,18 +637,36 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
 
 // src/player.ts
 function createPlayer(opts) {
-  const { container, code, assets: assetOverrides = {}, autoplay = false } = opts;
+  const { container, code, assets: assetOverrides = {}, autoplay = true, loop = true } = opts;
   const ast = parse(code);
+  const viewport = document.createElement("div");
+  Object.assign(viewport.style, {
+    position: "relative",
+    width: "100%",
+    aspectRatio: `${ast.meta.width} / ${ast.meta.height}`,
+    overflow: "hidden"
+  });
+  container.appendChild(viewport);
   const scene = document.createElement("div");
   Object.assign(scene.style, {
-    position: "relative",
+    position: "absolute",
+    top: "0",
+    left: "0",
     width: `${ast.meta.width}px`,
     height: `${ast.meta.height}px`,
     background: ast.meta.bg,
     overflow: "hidden",
-    userSelect: "none"
+    userSelect: "none",
+    transformOrigin: "0 0"
   });
-  container.appendChild(scene);
+  viewport.appendChild(scene);
+  function scaleScene() {
+    const s = viewport.clientWidth / ast.meta.width;
+    scene.style.transform = `scale(${s})`;
+  }
+  scaleScene();
+  const resizeObserver = new ResizeObserver(scaleScene);
+  resizeObserver.observe(viewport);
   const actorEls = /* @__PURE__ */ new Map();
   for (const [name, def] of Object.entries(ast.actors)) {
     const el = createActorEl(name, def, ast.assets, assetOverrides);
@@ -704,12 +722,16 @@ function createPlayer(opts) {
     lastRafTs = timestamp;
     const totalMs = (ast.meta.duration ?? 0) * 1e3;
     if (totalMs > 0 && sceneMs >= totalMs) {
-      sceneMs = totalMs;
-      applyCurrentTime();
-      isPlaying = false;
-      lastRafTs = null;
-      rafId = null;
-      return;
+      if (loop) {
+        sceneMs = sceneMs % totalMs;
+      } else {
+        sceneMs = totalMs;
+        applyCurrentTime();
+        isPlaying = false;
+        lastRafTs = null;
+        rafId = null;
+        return;
+      }
     }
     applyCurrentTime();
     rafId = requestAnimationFrame(rafTick);
@@ -737,7 +759,8 @@ function createPlayer(opts) {
     destroy() {
       player.pause();
       for (const anim of allAnims) anim.cancel();
-      if (scene.parentNode === container) container.removeChild(scene);
+      resizeObserver.disconnect();
+      if (viewport.parentNode === container) container.removeChild(viewport);
     }
   };
   if (autoplay) player.play();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.2.0"
+    "@markdy/core": "0.5.0"
   },
   "devDependencies": {
     "tsup": "^8.5.1",