modern-canvas 0.14.3 → 0.14.4

package/README.md

@@ -39,7 +39,7 @@ npm i modern-canvas
 ## 🦄 Usage
 
 ```javascript
-import { Animation, Element2D, Engine, Image2D, Video2D } from 'modern-canvas'
+import { Animation, Element2D, Engine } from 'modern-canvas'
 import { fonts } from 'modern-font'
 
 async function loadFallbackFont() {
@@ -50,7 +50,7 @@ loadFallbackFont().then(() => {
   const engine = new Engine({ width: 500, height: 500 }).start()
 
   engine.root.appendChild(
-    new Image2D({
+    new Element2D({
       style: {
         left: 100,
         top: 100,
@@ -61,7 +61,7 @@ loadFallbackFont().then(() => {
         backgroundColor: '#00FF00',
         filter: 'brightness(102%) contrast(90%) saturate(128%) sepia(18%)',
       },
-      src: '/example.png',
+      foreground: { image: '/example.png' },
     }, [
       new Animation({
         duration: 3000,
@@ -79,16 +79,6 @@ loadFallbackFont().then(() => {
           content: '/example.png',
         },
       }),
-      new Video2D({
-        style: {
-          left: 200,
-          top: 200,
-          width: 100,
-          height: 100,
-          maskImage: '/example.png',
-        },
-        src: '/example.mp4',
-      }),
     ])
   )
 
@@ -103,11 +93,11 @@ loadFallbackFont().then(() => {
 See all [preset special effects](./src/scene/effects)
 
 ```typescript
-import { EmbossEffect, Image2D } from 'modern-canvas'
+import { EmbossEffect, Element2D } from 'modern-canvas'
 
 engine.root.appendChild(
-  new Image2D({
-    src: '/example.png',
+  new Element2D({
+    foreground: { image: '/example.png' },
   }, [
     new EmbossEffect(),
   ])
@@ -119,15 +109,15 @@ engine.root.appendChild(
 See all [preset transitions](./src/scene/transitions)
 
 ```typescript
-import { Image2D, TiltShiftTransition } from 'modern-canvas'
+import { Element2D, TiltShiftTransition } from 'modern-canvas'
 
 engine.root.appendChild(
-  new Image2D({
-    src: '/example.png',
+  new Element2D({
+    foreground: { image: '/example.png' },
   }),
   new TiltShiftTransition(),
-  new Image2D({
-    src: '/example.gif',
+  new Element2D({
+    foreground: { image: '/example.gif' },
   }),
 )
 ```
@@ -136,15 +126,15 @@ Use https://github.com/gl-transitions/gl-transitions with `vite`
 
 ```ts
 import bounceGLSL from 'gl-transitions/transitions/Bounce.glsl?raw'
-import { Image2D, Transition } from 'modern-canvas'
+import { Element2D, Transition } from 'modern-canvas'
 
 engine.root.appendChild(
-  new Image2D({
-    src: '/example.png',
+  new Element2D({
+    foreground: { image: '/example.png' },
   }),
   new Transition({ glsl: bounceGLSL }),
-  new Image2D({
-    src: '/example.gif',
+  new Element2D({
+    foreground: { image: '/example.gif' },
   }),
 )
 ```

package/dist/core/renderers/gl/GlScissorSystem.d.ts

@@ -1,10 +1,15 @@
 import type { RectangleLike } from '../../math';
+import type { RenderTargetLike } from '../shared';
 import type { GlRenderer } from './GlRenderer';
 import { GlSystem } from './system';
 export declare class GlScissorSystem extends GlSystem {
-    scissorCounter: number;
     install(renderer: GlRenderer): void;
+    current: Record<number, {
+        refCount: number;
+        rect?: RectangleLike;
+    }>;
+    onRenderTargetChange(renderTarget: RenderTargetLike | null): void;
     push(rect: RectangleLike): void;
     pop(): void;
-    bind(rect: RectangleLike): void;
+    bind(rect?: RectangleLike | null): void;
 }

package/dist/core/renderers/gl/GlStencilSystem.d.ts

@@ -50,7 +50,6 @@ export declare class GlStencilSystem extends GlSystem {
     };
     onUpdateContext(gl: GlRenderingContext): void;
     reset(): void;
-    protected _activeRenderTarget: RenderTargetLike | null;
     onRenderTargetChange(renderTarget: RenderTargetLike | null): void;
     bind(stencilMode: StencilMode, refCount: number): void;
 }

package/dist/index.js

@@ -3154,28 +3154,44 @@ function Go(r, e) {
   };
 }
 class Vo extends q {
-  scissorCounter = 0;
   install(e) {
     super.install(e), e.scissor = this;
   }
+  current = {
+    [-1]: {
+      refCount: 0
+    }
+  };
+  onRenderTargetChange(e) {
+    if (e) {
+      let t = this.current[e.instanceId];
+      t || (t = this.current[e.instanceId] = {
+        refCount: 0
+      }), t.rect && t.refCount > 0 ? this.bind(t.rect) : this.bind(null);
+    }
+  }
   push(e) {
     const t = this._gl;
-    t.enable(t.SCISSOR_TEST), this.scissorCounter++, this.bind(e);
+    t.enable(t.SCISSOR_TEST);
+    const s = this.current[this._renderer.renderTarget.current?.instanceId ?? -1];
+    s.refCount++, s.rect = e, this.bind(e);
   }
   pop() {
-    if (this.scissorCounter > 0 && this.scissorCounter--, this.scissorCounter <= 0) {
-      const e = this._gl;
-      e.disable(e.SCISSOR_TEST);
-    }
+    const e = this.current[this._renderer.renderTarget.current?.instanceId ?? -1];
+    e.refCount > 0 && e.refCount--, e.refCount <= 0 && this.bind(null);
   }
   bind(e) {
-    const { pixelRatio: t, viewport: s } = this._renderer, { viewMatrix: i } = this._renderer.shader.uniforms, { x: o, y: a, width: n, height: l } = Go(i, e), c = s.current.height / t - (a + l);
-    this._renderer.gl.scissor(
-      o * t,
-      c * t,
-      n * t,
-      l * t
-    );
+    const t = this._gl;
+    if (e) {
+      const { pixelRatio: s, viewport: i } = this._renderer, { viewMatrix: o } = this._renderer.shader.uniforms, { x: a, y: n, width: l, height: c } = Go(o, e), u = i.current.height / s - (n + c);
+      t.scissor(
+        a * s,
+        u * s,
+        l * s,
+        c * s
+      );
+    } else
+      t.disable(t.SCISSOR_TEST);
   }
 }
 const Ie = [];
@@ -3235,7 +3251,12 @@ class $o extends q {
     stencilMode: D.none,
     refCount: 0
   };
-  current = /* @__PURE__ */ Object.create(null);
+  current = {
+    [-1]: {
+      stencilMode: D.disabled,
+      refCount: 0
+    }
+  };
   _passOpMap;
   _compareMap;
   onUpdateContext(e) {
@@ -3262,9 +3283,8 @@ class $o extends q {
   reset() {
     this._cache.enabled = !1, this._cache.stencilMode = D.none, this._cache.refCount = 0;
   }
-  _activeRenderTarget = null;
   onRenderTargetChange(e) {
-    if (this._activeRenderTarget !== e && (this._activeRenderTarget = e, e)) {
+    if (e) {
       let t = this.current[e.instanceId];
       t || (t = this.current[e.instanceId] = {
         stencilMode: D.disabled,
@@ -3273,10 +3293,7 @@ class $o extends q {
     }
   }
   bind(e, t) {
-    const s = this._activeRenderTarget ? this.current[this._activeRenderTarget.instanceId] : {
-      stencilMode: D.disabled,
-      refCount: 0
-    }, i = this._gl, o = Ie[e], a = this._cache;
+    const s = this.current[this._renderer.renderTarget.current?.instanceId ?? -1], i = this._gl, o = Ie[e], a = this._cache;
     if (s.stencilMode = e, s.refCount = t, e === D.disabled) {
       this._cache.enabled && (this._cache.enabled = !1, i.disable(i.STENCIL_TEST));
       return;
@@ -3345,7 +3362,7 @@ class jo extends q {
         width: this._renderer.screen.width * this._renderer.pixelRatio,
         height: this._renderer.screen.height * this._renderer.pixelRatio
       });
-    i && this._renderer.stencil.onRenderTargetChange(this.current);
+    i && (this._renderer.scissor.onRenderTargetChange(this.current), this._renderer.stencil.onRenderTargetChange(this.current));
   }
   unbind() {
     return this.bind(null);
@@ -8496,7 +8513,6 @@ let nr = class extends Oe {
         this._allowPointerEvents = !V(e);
         break;
       case "borderRadius":
-      default:
         this.requestRender();
         break;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",
@@ -65,7 +65,7 @@
     "earcut": "^3.0.2",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.6",
-    "modern-path2d": "^1.4.11",
+    "modern-path2d": "^1.4.14",
     "modern-text": "^1.10.4"
   },
   "peerDependencies": {
@@ -85,7 +85,7 @@
     }
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^6.4.2",
+    "@antfu/eslint-config": "^6.5.1",
     "@types/earcut": "^3.0.0",
     "@types/node": "^24.10.1",
     "bumpp": "^10.3.2",
@@ -97,7 +97,7 @@
     "simple-git-hooks": "^2.13.1",
     "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
-    "vite": "^7.2.6",
+    "vite": "^7.2.7",
     "vitest": "^4.0.15",
     "yoga-layout": "^3.2.1"
   },