modern-canvas 0.14.2 → 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/GlMaskSystem.d.ts

@@ -1,7 +1,8 @@
+import type { RectangleLike } from '../../math';
 import type { GlRenderer } from './GlRenderer';
 import type { GlRenderable } from './types';
 import { GlSystem } from './system';
-export type MaskLike = GlRenderable;
+export type MaskLike = GlRenderable | RectangleLike;
 export interface MaskStackItem {
     source: GlRenderable;
     mask: MaskLike;

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

@@ -6,6 +6,7 @@ import { GlGeometrySystem } from './geometry';
 import { GlBatch2DSystem } from './GlBatch2DSystem';
 import { GlColorMaskSystem } from './GlColorMaskSystem';
 import { GlMaskSystem } from './GlMaskSystem';
+import { GlScissorSystem } from './GlScissorSystem';
 import { GlStencilSystem } from './GlStencilSystem';
 import { GlViewportSystem } from './GlViewportSystem';
 import { GlRenderTargetSystem } from './renderTarget';
@@ -22,6 +23,7 @@ export interface GlRenderer {
     mask: GlMaskSystem;
     colorMask: GlColorMaskSystem;
     stencil: GlStencilSystem;
+    scissor: GlScissorSystem;
     batch2D: GlBatch2DSystem;
     viewport: GlViewportSystem;
 }
@@ -30,7 +32,7 @@ export declare class GlRenderer extends Renderer {
     gl: GlRenderingContext;
     version: 1 | 2;
     extensions: GlExtensions;
-    protected _systems: (GlShaderSystem | GlTextureSystem | GlGeometrySystem | GlBufferSystem | GlStateSystem | GlBatch2DSystem | GlColorMaskSystem | GlMaskSystem | GlRenderTargetSystem | GlStencilSystem | GlViewportSystem)[];
+    protected _systems: (GlShaderSystem | GlTextureSystem | GlGeometrySystem | GlBufferSystem | GlStateSystem | GlBatch2DSystem | GlColorMaskSystem | GlMaskSystem | GlRenderTargetSystem | GlScissorSystem | GlStencilSystem | GlViewportSystem)[];
     readonly bindPoints: Map<number, GlTarget>;
     readonly supports: {
         uint32Indices: boolean;

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

@@ -0,0 +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 {
+    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 | 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;
 }