modern-canvas 0.12.8 → 0.12.10

package/dist/index.cjs

@@ -7152,7 +7152,7 @@ exports.Timeline = class Timeline extends exports.Node {
   }
   _process(delta) {
     super._process(delta);
-    if (!this.stoped) {
+    if (!this.paused) {
       this.addTime(delta);
     }
   }
@@ -7171,7 +7171,7 @@ __decorateClass$H([
 ], exports.Timeline.prototype, "loop", 2);
 __decorateClass$H([
   modernIdoc.property({ fallback: false })
-], exports.Timeline.prototype, "stoped", 2);
+], exports.Timeline.prototype, "paused", 2);
 exports.Timeline = __decorateClass$H([
   customNode("Timeline")
 ], exports.Timeline);
@@ -10335,7 +10335,7 @@ __decorateClass$f([
   modernIdoc.property({ alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 __decorateClass$f([
-  modernIdoc.property({ internal: true, fallback: "auto" })
+  modernIdoc.property({ fallback: "auto" })
 ], BaseElement2DText.prototype, "drawMode");
 
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
@@ -14095,7 +14095,16 @@ async function start(sleep = 100) {
   starting = false;
 }
 async function task(options) {
-  const { debug = false, fonts, width, height, time = 0, data } = options;
+  const {
+    debug = false,
+    fonts,
+    width,
+    height,
+    data,
+    keyframes = [],
+    onBefore,
+    onFrame
+  } = options;
   engine ??= new Engine({
     pixelRatio: 1,
     width: 1,
@@ -14104,8 +14113,8 @@ async function task(options) {
   });
   engine.debug = debug;
   engine.fonts = fonts;
+  engine.timeline.currentTime = 0;
   engine.root.removeChildren();
-  engine.timeline.currentTime = time;
   engine.resize(width, height, true);
   (Array.isArray(data) ? data : [data]).forEach((v) => {
     if (v instanceof exports.Node) {
@@ -14115,8 +14124,29 @@ async function task(options) {
       engine.root.appendChild(exports.Node.parse(v));
     }
   });
-  await options.onBeforeRender?.(engine);
+  await onBefore?.(engine);
   await engine.waitAndRender();
+  await new Promise((resolve) => {
+    let i = 0;
+    const len = keyframes.length;
+    const last = keyframes[len - 1];
+    async function handle() {
+      if (i === len)
+        return resolve();
+      const currentTime = keyframes[i++];
+      const next = keyframes[i] || currentTime;
+      const duration = next - currentTime;
+      engine.timeline.currentTime = currentTime;
+      engine.render();
+      await onFrame?.(engine.toPixels(), {
+        currentTime,
+        duration,
+        progress: currentTime / last
+      });
+      requestAnimationFrame(handle);
+    }
+    handle();
+  });
   return engine.toCanvas2D();
 }
 async function render(options) {

package/dist/index.d.cts

@@ -1554,7 +1554,7 @@ interface TimelineProperties extends NodeProperties {
     currentTime: number;
     endTime: number;
     loop: boolean;
-    stoped: boolean;
+    paused: boolean;
 }
 interface Timeline {
     on: <K extends keyof TimelineEvents & string>(event: K, listener: (...args: TimelineEvents[K]) => void) => this;
@@ -1567,7 +1567,7 @@ declare class Timeline extends Node {
     currentTime: number;
     endTime: number;
     loop: boolean;
-    stoped: boolean;
+    paused: boolean;
     static from(range: number | number[], loop?: boolean): Timeline;
     constructor(properties?: Partial<TimelineProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
@@ -3256,9 +3256,14 @@ interface RenderOptions {
     width: number;
     height: number;
     debug?: boolean;
-    time?: number;
     fonts?: Fonts;
-    onBeforeRender?: (engine: Engine) => void | Promise<void>;
+    keyframes?: number[];
+    onBefore?: (engine: Engine) => void | Promise<void>;
+    onFrame?: (frame: Uint8ClampedArray, ctx: {
+        currentTime: number;
+        duration: number;
+        progress: number;
+    }) => Promise<void>;
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 

package/dist/index.d.mts

@@ -1554,7 +1554,7 @@ interface TimelineProperties extends NodeProperties {
     currentTime: number;
     endTime: number;
     loop: boolean;
-    stoped: boolean;
+    paused: boolean;
 }
 interface Timeline {
     on: <K extends keyof TimelineEvents & string>(event: K, listener: (...args: TimelineEvents[K]) => void) => this;
@@ -1567,7 +1567,7 @@ declare class Timeline extends Node {
     currentTime: number;
     endTime: number;
     loop: boolean;
-    stoped: boolean;
+    paused: boolean;
     static from(range: number | number[], loop?: boolean): Timeline;
     constructor(properties?: Partial<TimelineProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
@@ -3256,9 +3256,14 @@ interface RenderOptions {
     width: number;
     height: number;
     debug?: boolean;
-    time?: number;
     fonts?: Fonts;
-    onBeforeRender?: (engine: Engine) => void | Promise<void>;
+    keyframes?: number[];
+    onBefore?: (engine: Engine) => void | Promise<void>;
+    onFrame?: (frame: Uint8ClampedArray, ctx: {
+        currentTime: number;
+        duration: number;
+        progress: number;
+    }) => Promise<void>;
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 

package/dist/index.d.ts

@@ -1554,7 +1554,7 @@ interface TimelineProperties extends NodeProperties {
     currentTime: number;
     endTime: number;
     loop: boolean;
-    stoped: boolean;
+    paused: boolean;
 }
 interface Timeline {
     on: <K extends keyof TimelineEvents & string>(event: K, listener: (...args: TimelineEvents[K]) => void) => this;
@@ -1567,7 +1567,7 @@ declare class Timeline extends Node {
     currentTime: number;
     endTime: number;
     loop: boolean;
-    stoped: boolean;
+    paused: boolean;
     static from(range: number | number[], loop?: boolean): Timeline;
     constructor(properties?: Partial<TimelineProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
@@ -3256,9 +3256,14 @@ interface RenderOptions {
     width: number;
     height: number;
     debug?: boolean;
-    time?: number;
     fonts?: Fonts;
-    onBeforeRender?: (engine: Engine) => void | Promise<void>;
+    keyframes?: number[];
+    onBefore?: (engine: Engine) => void | Promise<void>;
+    onFrame?: (frame: Uint8ClampedArray, ctx: {
+        currentTime: number;
+        duration: number;
+        progress: number;
+    }) => Promise<void>;
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;