modern-canvas 0.12.7 → 0.12.9

package/dist/index.cjs

@@ -6383,38 +6383,38 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
     this.setProperties(properties).append(nodes);
   }
   /** Timeline */
-  computedDuration = 0;
   _currentTime = 0;
-  _startTime = 0;
+  _duration = 0;
+  _globalStartTime = 0;
   get timeline() {
     return this._tree?.timeline;
   }
-  get timelineCurrentTime() {
+  get globalCurrentTime() {
     return this.timeline?.currentTime ?? 0;
   }
-  get parentStartTime() {
-    return this._parent?.startTime ?? 0;
+  get parentGlobalStartTime() {
+    return this._parent?.globalStartTime ?? 0;
   }
   get currentTime() {
-    return clamp(this._currentTime, 0, this.computedDuration);
+    return clamp(this._currentTime, 0, this._duration);
   }
-  get startTime() {
-    return this._startTime;
+  get globalStartTime() {
+    return this._globalStartTime;
   }
-  set startTime(val) {
-    this.delay = val - this.parentStartTime;
+  set globalStartTime(val) {
+    this.delay = val - this.parentGlobalStartTime;
     this._updateCurrentTime(true);
   }
-  get endTime() {
-    return this._startTime + this.computedDuration;
+  get globalEndTime() {
+    return this._globalStartTime + this._duration;
   }
   get currentTimeProgress() {
-    return this.computedDuration ? clamp(this._currentTime / this.computedDuration, 0, 1) : 0;
+    return this._duration ? clamp(this._currentTime / this._duration, 0, 1) : 0;
   }
   isInsideTimeRange() {
     const current = this._currentTime;
-    if (this.computedDuration) {
-      return current >= 0 && current <= this.computedDuration;
+    if (this._duration) {
+      return current >= 0 && current <= this._duration;
     } else {
       return current >= 0;
     }
@@ -6422,15 +6422,15 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
   _updateCurrentTime(force = false) {
     if (force || !this.paused) {
       const parent = this._parent;
-      const startTime = this.delay + this.parentStartTime;
-      const endTime = parent?.computedDuration ? Math.min(startTime + this.duration, parent.endTime) - startTime : this.duration;
-      let currentTime = this.timelineCurrentTime - startTime;
+      const globalStartTime = this.parentGlobalStartTime + this.delay;
+      const duration = parent?._duration ? Math.min(globalStartTime + this.duration, parent.globalEndTime) - globalStartTime : this.duration;
+      let currentTime = this.globalCurrentTime - globalStartTime;
       if (this.loop) {
-        currentTime = currentTime % endTime;
+        currentTime = currentTime % duration;
       }
-      this._startTime = startTime;
+      this._globalStartTime = globalStartTime;
       this._currentTime = currentTime;
-      this.computedDuration = endTime;
+      this._duration = duration;
       this.emit("updateCurrentTime", this._currentTime);
       this.insideTimeRange = this.isInsideTimeRange();
     }
@@ -7152,7 +7152,9 @@ exports.Timeline = class Timeline extends exports.Node {
   }
   _process(delta) {
     super._process(delta);
-    this.addTime(delta);
+    if (!this.paused) {
+      this.addTime(delta);
+    }
   }
 };
 __decorateClass$H([
@@ -7167,6 +7169,9 @@ __decorateClass$H([
 __decorateClass$H([
   modernIdoc.property({ fallback: false })
 ], exports.Timeline.prototype, "loop", 2);
+__decorateClass$H([
+  modernIdoc.property({ fallback: false })
+], exports.Timeline.prototype, "paused", 2);
 exports.Timeline = __decorateClass$H([
   customNode("Timeline")
 ], exports.Timeline);
@@ -11894,9 +11899,9 @@ exports.Animation = class Animation extends exports.TimelineNode {
   play() {
     if (this._stoped) {
       this._stoped = false;
-      this.startTime = this.timelineCurrentTime;
+      this.globalStartTime = this.globalCurrentTime;
     } else {
-      this.startTime = this.timelineCurrentTime - this.currentTime;
+      this.globalStartTime = this.globalCurrentTime - this.currentTime;
     }
     this.paused = false;
     return true;
@@ -13718,7 +13723,7 @@ async function parseMimeType(url) {
 }
 
 const SUPPORTS_WEAK_REF = "WeakRef" in globalThis;
-class Assets {
+class Assets extends modernIdoc.Observable {
   defaultHandler = (url) => this.fetch(url);
   _handlers = /* @__PURE__ */ new Map();
   _handleing = /* @__PURE__ */ new Map();
@@ -13731,6 +13736,7 @@ class Assets {
     this._handled.delete(id);
   }) : void 0;
   constructor() {
+    super();
     if (!SUPPORTS_WEAK_REF) {
       Ticker.on(this.gc.bind(this), { sort: 2 });
     }
@@ -13820,6 +13826,7 @@ class Assets {
       return result;
     const promise = handler().then((result2) => {
       this.set(id, result2);
+      this.emit("loaded", id, result2);
       return result2;
     }).finally(() => {
       this._handleing.delete(id);
@@ -14088,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,
@@ -14097,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) {
@@ -14108,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

@@ -1,6 +1,6 @@
-import { Font, Fonts } from 'modern-font';
 import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, Hex8Color, PropertyDeclaration, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
+import { Font, Fonts } from 'modern-font';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
 import { Path2D, LineCap, LineJoin, LineStyle, Path2DSet } from 'modern-path2d';
@@ -1554,6 +1554,7 @@ interface TimelineProperties extends NodeProperties {
     currentTime: number;
     endTime: number;
     loop: boolean;
+    paused: boolean;
 }
 interface Timeline {
     on: <K extends keyof TimelineEvents & string>(event: K, listener: (...args: TimelineEvents[K]) => void) => this;
@@ -1566,6 +1567,7 @@ declare class Timeline extends Node {
     currentTime: number;
     endTime: number;
     loop: boolean;
+    paused: boolean;
     static from(range: number | number[], loop?: boolean): Timeline;
     constructor(properties?: Partial<TimelineProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
@@ -1796,16 +1798,16 @@ declare class TimelineNode extends Node {
     insideTimeRange: boolean;
     constructor(properties?: Partial<TimelineNodeProperties>, nodes?: Node[]);
     /** Timeline */
-    computedDuration: number;
     _currentTime: number;
-    _startTime: number;
+    _duration: number;
+    _globalStartTime: number;
     get timeline(): Timeline | undefined;
-    get timelineCurrentTime(): number;
-    get parentStartTime(): number;
+    get globalCurrentTime(): number;
+    get parentGlobalStartTime(): number;
     get currentTime(): number;
-    get startTime(): number;
-    set startTime(val: number);
-    get endTime(): number;
+    get globalStartTime(): number;
+    set globalStartTime(val: number);
+    get globalEndTime(): number;
     get currentTimeProgress(): number;
     isInsideTimeRange(): boolean;
     protected _updateCurrentTime(force?: boolean): void;
@@ -3150,6 +3152,9 @@ declare class VideoLoader extends Loader {
 }
 
 type AssetHandler = (url: string, options?: any) => any | Promise<any>;
+interface AssetsEvents extends ObservableEvents {
+    loaded: [id: string, value: any];
+}
 interface Assets {
     font: FontLoader;
     gif: GifLoader;
@@ -3159,7 +3164,7 @@ interface Assets {
     texture: TextureLoader;
     video: VideoLoader;
 }
-declare class Assets {
+declare class Assets extends Observable<AssetsEvents> {
     defaultHandler: AssetHandler;
     protected _handlers: Map<string, AssetHandler>;
     protected _handleing: Map<string, Promise<any>>;
@@ -3251,11 +3256,16 @@ 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>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DrawboardEffect, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, Meta, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, Renderer, Resource, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SceneTree, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DrawboardEffectProperties, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, SceneTreeEvents, SceneTreeProperties, StrokeDraw, TextDrawMode, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, Vector2Data, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AssetsEvents, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DrawboardEffectProperties, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, SceneTreeEvents, SceneTreeProperties, StrokeDraw, TextDrawMode, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, Vector2Data, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, ZoomBlurEffectProperties };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import { Font, Fonts } from 'modern-font';
 import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, Hex8Color, PropertyDeclaration, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
+import { Font, Fonts } from 'modern-font';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
 import { Path2D, LineCap, LineJoin, LineStyle, Path2DSet } from 'modern-path2d';
@@ -1554,6 +1554,7 @@ interface TimelineProperties extends NodeProperties {
     currentTime: number;
     endTime: number;
     loop: boolean;
+    paused: boolean;
 }
 interface Timeline {
     on: <K extends keyof TimelineEvents & string>(event: K, listener: (...args: TimelineEvents[K]) => void) => this;
@@ -1566,6 +1567,7 @@ declare class Timeline extends Node {
     currentTime: number;
     endTime: number;
     loop: boolean;
+    paused: boolean;
     static from(range: number | number[], loop?: boolean): Timeline;
     constructor(properties?: Partial<TimelineProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
@@ -1796,16 +1798,16 @@ declare class TimelineNode extends Node {
     insideTimeRange: boolean;
     constructor(properties?: Partial<TimelineNodeProperties>, nodes?: Node[]);
     /** Timeline */
-    computedDuration: number;
     _currentTime: number;
-    _startTime: number;
+    _duration: number;
+    _globalStartTime: number;
     get timeline(): Timeline | undefined;
-    get timelineCurrentTime(): number;
-    get parentStartTime(): number;
+    get globalCurrentTime(): number;
+    get parentGlobalStartTime(): number;
     get currentTime(): number;
-    get startTime(): number;
-    set startTime(val: number);
-    get endTime(): number;
+    get globalStartTime(): number;
+    set globalStartTime(val: number);
+    get globalEndTime(): number;
     get currentTimeProgress(): number;
     isInsideTimeRange(): boolean;
     protected _updateCurrentTime(force?: boolean): void;
@@ -3150,6 +3152,9 @@ declare class VideoLoader extends Loader {
 }
 
 type AssetHandler = (url: string, options?: any) => any | Promise<any>;
+interface AssetsEvents extends ObservableEvents {
+    loaded: [id: string, value: any];
+}
 interface Assets {
     font: FontLoader;
     gif: GifLoader;
@@ -3159,7 +3164,7 @@ interface Assets {
     texture: TextureLoader;
     video: VideoLoader;
 }
-declare class Assets {
+declare class Assets extends Observable<AssetsEvents> {
     defaultHandler: AssetHandler;
     protected _handlers: Map<string, AssetHandler>;
     protected _handleing: Map<string, Promise<any>>;
@@ -3251,11 +3256,16 @@ 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>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DrawboardEffect, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, Meta, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, Renderer, Resource, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SceneTree, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DrawboardEffectProperties, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, SceneTreeEvents, SceneTreeProperties, StrokeDraw, TextDrawMode, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, Vector2Data, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AssetsEvents, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DrawboardEffectProperties, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, SceneTreeEvents, SceneTreeProperties, StrokeDraw, TextDrawMode, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, Vector2Data, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, ZoomBlurEffectProperties };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { Font, Fonts } from 'modern-font';
 import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, Hex8Color, PropertyDeclaration, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
+import { Font, Fonts } from 'modern-font';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
 import { Path2D, LineCap, LineJoin, LineStyle, Path2DSet } from 'modern-path2d';
@@ -1554,6 +1554,7 @@ interface TimelineProperties extends NodeProperties {
     currentTime: number;
     endTime: number;
     loop: boolean;
+    paused: boolean;
 }
 interface Timeline {
     on: <K extends keyof TimelineEvents & string>(event: K, listener: (...args: TimelineEvents[K]) => void) => this;
@@ -1566,6 +1567,7 @@ declare class Timeline extends Node {
     currentTime: number;
     endTime: number;
     loop: boolean;
+    paused: boolean;
     static from(range: number | number[], loop?: boolean): Timeline;
     constructor(properties?: Partial<TimelineProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
@@ -1796,16 +1798,16 @@ declare class TimelineNode extends Node {
     insideTimeRange: boolean;
     constructor(properties?: Partial<TimelineNodeProperties>, nodes?: Node[]);
     /** Timeline */
-    computedDuration: number;
     _currentTime: number;
-    _startTime: number;
+    _duration: number;
+    _globalStartTime: number;
     get timeline(): Timeline | undefined;
-    get timelineCurrentTime(): number;
-    get parentStartTime(): number;
+    get globalCurrentTime(): number;
+    get parentGlobalStartTime(): number;
     get currentTime(): number;
-    get startTime(): number;
-    set startTime(val: number);
-    get endTime(): number;
+    get globalStartTime(): number;
+    set globalStartTime(val: number);
+    get globalEndTime(): number;
     get currentTimeProgress(): number;
     isInsideTimeRange(): boolean;
     protected _updateCurrentTime(force?: boolean): void;
@@ -3150,6 +3152,9 @@ declare class VideoLoader extends Loader {
 }
 
 type AssetHandler = (url: string, options?: any) => any | Promise<any>;
+interface AssetsEvents extends ObservableEvents {
+    loaded: [id: string, value: any];
+}
 interface Assets {
     font: FontLoader;
     gif: GifLoader;
@@ -3159,7 +3164,7 @@ interface Assets {
     texture: TextureLoader;
     video: VideoLoader;
 }
-declare class Assets {
+declare class Assets extends Observable<AssetsEvents> {
     defaultHandler: AssetHandler;
     protected _handlers: Map<string, AssetHandler>;
     protected _handleing: Map<string, Promise<any>>;
@@ -3251,11 +3256,16 @@ 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>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DrawboardEffect, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, Meta, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, Renderer, Resource, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SceneTree, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DrawboardEffectProperties, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, SceneTreeEvents, SceneTreeProperties, StrokeDraw, TextDrawMode, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, Vector2Data, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AssetsEvents, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DrawboardEffectProperties, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, SceneTreeEvents, SceneTreeProperties, StrokeDraw, TextDrawMode, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, Vector2Data, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, ZoomBlurEffectProperties };