modern-canvas 0.12.6 → 0.12.8

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.stoped) {
+      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, "stoped", 2);
 exports.Timeline = __decorateClass$H([
   customNode("Timeline")
 ], exports.Timeline);
@@ -10205,9 +10210,17 @@ class BaseElement2DText extends CoreObject {
     return new Transform2D().translate(-origin.x, -origin.y).scale(scale > 0 ? 1 : -1, 1).translate(origin.x, origin.y);
   }
   useTextureDraw() {
-    return !!this.effects?.length || this.content.some((p) => {
-      return p.fragments.some((f) => !!f.highlightImage);
-    });
+    let drawMode = this.drawMode;
+    if (drawMode === "auto") {
+      if (!!this.effects?.length || this.content.some((p) => {
+        return p.fragments.some((f) => !!f.highlightImage);
+      })) {
+        drawMode = "texture";
+      } else {
+        drawMode = "path";
+      }
+    }
+    return drawMode === "texture";
   }
   _pathDraw(ctx) {
     this.base.pathSets.forEach((pathSet) => {
@@ -10290,25 +10303,10 @@ class BaseElement2DText extends CoreObject {
   }
   draw() {
     const ctx = this.parent.context;
-    let drawMode;
-    if (this.drawMode === "auto") {
-      if (!!this.effects?.length || this.content.some((p) => {
-        return p.fragments.some((f) => !!f.highlightImage);
-      })) {
-        drawMode = "texture";
-      } else {
-        drawMode = "path";
-      }
+    if (this.useTextureDraw()) {
+      this._textureDraw(ctx);
     } else {
-      drawMode = this.drawMode;
-    }
-    switch (drawMode) {
-      case "texture":
-        this._textureDraw(ctx);
-        break;
-      case "path":
-        this._pathDraw(ctx);
-        break;
+      this._pathDraw(ctx);
     }
   }
 }
@@ -10337,7 +10335,7 @@ __decorateClass$f([
   modernIdoc.property({ alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 __decorateClass$f([
-  modernIdoc.property({ internal: true, default: "auto" })
+  modernIdoc.property({ internal: true, fallback: "auto" })
 ], BaseElement2DText.prototype, "drawMode");
 
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
@@ -11901,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;
@@ -13725,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();
@@ -13738,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 });
     }
@@ -13827,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);

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;
+    stoped: 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;
+    stoped: 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>>;
@@ -3258,4 +3263,4 @@ interface RenderOptions {
 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;
+    stoped: 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;
+    stoped: 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>>;
@@ -3258,4 +3263,4 @@ interface RenderOptions {
 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;
+    stoped: 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;
+    stoped: 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>>;
@@ -3258,4 +3263,4 @@ interface RenderOptions {
 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 };