modern-canvas 0.27.10 → 0.27.12

package/dist/index.js

@@ -4081,7 +4081,8 @@ var wr = class e extends z {
 		});
 	}
 	_setupAutoUpdate() {
-		this.autoUpdate && this.isPlaying ? !this.fps && this.source.requestVideoFrameCallback ? (this._connected && (S.off(this.requestUpload), this._connected = !1, this._nextTime = 0), this._requestId === void 0 && (this._requestId = this.source.requestVideoFrameCallback(this._videoFrameRequestCallback))) : (this._requestId !== void 0 && (this.source.cancelVideoFrameCallback(this._requestId), this._requestId = void 0), this._connected || (S.on(this.requestUpload), this._connected = !0, this._nextTime = 0)) : (this._requestId !== void 0 && (this.source.cancelVideoFrameCallback(this._requestId), this._requestId = void 0), this._connected && (S.off(this.requestUpload), this._connected = !1, this._nextTime = 0));
+		let e = !this.source.paused && !this.source.ended;
+		this.autoUpdate && e ? !this.fps && this.source.requestVideoFrameCallback ? (this._connected && (S.off(this.requestUpload), this._connected = !1, this._nextTime = 0), this._requestId === void 0 && (this._requestId = this.source.requestVideoFrameCallback(this._videoFrameRequestCallback))) : (this._requestId !== void 0 && (this.source.cancelVideoFrameCallback(this._requestId), this._requestId = void 0), this._connected || (S.on(this.requestUpload), this._connected = !0, this._nextTime = 0)) : (this._requestId !== void 0 && (this.source.cancelVideoFrameCallback(this._requestId), this._requestId = void 0), this._connected && (S.off(this.requestUpload), this._connected = !1, this._nextTime = 0));
 	}
 	_videoFrameRequestCallback = () => {
 		this.requestUpload(), this._requestId = this.source.requestVideoFrameCallback(this._videoFrameRequestCallback);
@@ -4093,7 +4094,7 @@ var wr = class e extends z {
 	async load() {
 		if (!this._sourceLoad) {
 			let e = this.source;
-			(e.readyState === e.HAVE_ENOUGH_DATA || e.readyState === e.HAVE_FUTURE_DATA) && e.width && e.height && (e.complete = !0), e.addEventListener("play", this._onPlayStart), e.addEventListener("pause", this._onPlayStop), e.addEventListener("seeked", this._onSeeked), this.isReady ? this._onCanPlay() : (e.addEventListener("canplay", this._onCanPlay), e.addEventListener("canplaythrough", this._onCanPlay), e.addEventListener("error", this._onError, !0)), this._sourceLoad = new Promise((t, n) => {
+			(e.readyState === e.HAVE_ENOUGH_DATA || e.readyState === e.HAVE_FUTURE_DATA) && e.width && e.height && (e.complete = !0), e.addEventListener("play", this._onPlayStart), e.addEventListener("playing", this._onPlayStart), e.addEventListener("pause", this._onPlayStop), e.addEventListener("seeked", this._onSeeked), this.isReady ? this._onCanPlay() : (e.addEventListener("canplay", this._onCanPlay), e.addEventListener("canplaythrough", this._onCanPlay), e.addEventListener("error", this._onError, !0)), this._sourceLoad = new Promise((t, n) => {
 				this.isValid() ? (this._sourceLoad = void 0, t(this)) : (this._resolve = t, this._reject = n, e.load());
 			});
 		}
@@ -4102,7 +4103,7 @@ var wr = class e extends z {
 	_destroy() {
 		this._setupAutoUpdate(), this._flushSeekResolves();
 		let e = this.source;
-		e && (e.removeEventListener("play", this._onPlayStart), e.removeEventListener("pause", this._onPlayStop), e.removeEventListener("seeked", this._onSeeked), e.removeEventListener("canplay", this._onCanPlay), e.removeEventListener("canplaythrough", this._onCanPlay), e.removeEventListener("error", this._onError, !0), e.pause(), e.src = "", e.load());
+		e && (e.removeEventListener("play", this._onPlayStart), e.removeEventListener("playing", this._onPlayStart), e.removeEventListener("pause", this._onPlayStop), e.removeEventListener("seeked", this._onSeeked), e.removeEventListener("canplay", this._onCanPlay), e.removeEventListener("canplaythrough", this._onCanPlay), e.removeEventListener("error", this._onError, !0), e.pause(), e.src = "", e.load());
 	}
 };
 k([_({
@@ -6783,6 +6784,9 @@ var Y = class extends w {
 	isValid() {
 		return !!(this.enabled && (this.texture || this.animatedTexture || this.color || this.image === "viewport"));
 	}
+	_resolveThemeColor(e) {
+		return this._parent.tree?.resolveThemeColor(e) ?? e;
+	}
 	draw() {
 		let { width: e, height: t } = this._parent.size, n = this._parent.context, r = { size: {
 			width: e,
@@ -6804,7 +6808,7 @@ var Y = class extends w {
 					width: e,
 					height: t
 				})
-			}, n.fillStyle = i ?? this.color ?? "#000000FF";
+			}, n.fillStyle = i ?? this._resolveThemeColor(this.color) ?? "#000000FF";
 		}
 		n.fill(r);
 	}
@@ -8819,7 +8823,7 @@ var Ma = class extends Oa {
 		super._process(e), this._updateVideoCurrentTime();
 	}
 };
-k([_({ fallback: "" }), O("design:type", String)], Ma.prototype, "src", void 0), Ma = k([x("Video2D"), O("design:paramtypes", [typeof Partial > "u" ? Object : Partial, Array])], Ma);
+k([_({ fallback: "" }), O("design:type", String)], Ma.prototype, "src", void 0), k([_({ fallback: !0 }), O("design:type", Boolean)], Ma.prototype, "loop", void 0), Ma = k([x("Video2D"), O("design:paramtypes", [typeof Partial > "u" ? Object : Partial, Array])], Ma);
 //#endregion
 //#region src/scene/animation/Animation.ts
 function Na(e) {

package/dist/scene/2d/Video2D.d.ts

@@ -4,9 +4,22 @@ import type { TextureRect2DProperties } from './TextureRect2D';
 import { TextureRect2D } from './TextureRect2D';
 export interface Video2DProperties extends TextureRect2DProperties {
     src: string;
+    loop: boolean;
 }
 export declare class Video2D extends TextureRect2D<VideoTexture> {
     src: string;
+    /**
+     * Loop playback, on by default.
+     *
+     * `_updateVideoCurrentTime` has always forwarded this to the underlying `<video>`, but the
+     * property itself was never declared — it read as `undefined`, so native looping stayed off and
+     * a finished video only restarted via the fallbacks below (re-`play()` once `paused` flips, plus
+     * drift correction). Those are fragile: when the drift stays under the threshold, or the element
+     * is momentarily culled/invisible (which pauses and returns early), playback sticks on the last
+     * frame while the timeline keeps looping. Declaring it — defaulting to on — lets the browser
+     * loop natively and keeps the fallbacks as a safety net rather than the mechanism.
+     */
+    loop: boolean;
     get videoDuration(): number;
     protected _wait: Promise<void>;
     protected _loadAbort?: AbortController;

package/dist/scene/2d/element/Element2DFill.d.ts

@@ -39,6 +39,8 @@ export declare class Element2DFill extends CoreObject implements NormalizedFill
     protected _pipelineImageToCanvas(image: PipelineImage): HTMLCanvasElement | undefined;
     protected _updateTexture(): Promise<void>;
     isValid(): boolean;
+    /** Resolve `@token` theme colors lazily on draw, same as outline / text do. */
+    protected _resolveThemeColor<T = any>(value: T): T | string;
     draw(): void;
     protected _getFrameCurrentTime(): number;
     updateFrameIndex(): this;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.27.10",
+  "version": "0.27.12",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",