modern-canvas 0.14.3 → 0.14.5

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,17 @@
 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;
+    }>;
+    protected _setup(): void;
+    protected _updateRenderTarget: (renderTarget: RenderTargetLike | null) => void;
     push(rect: RectangleLike): void;
     pop(): void;
-    bind(rect: RectangleLike): void;
+    bind(rect?: RectangleLike | null): void;
+    destroy(): void;
 }

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

@@ -48,9 +48,10 @@ export declare class GlStencilSystem extends GlSystem {
         'greater': number;
         'greater-equal': number;
     };
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
+    protected _setup(): void;
     reset(): void;
-    protected _activeRenderTarget: RenderTargetLike | null;
-    onRenderTargetChange(renderTarget: RenderTargetLike | null): void;
+    protected _updateRenderTarget: (renderTarget: RenderTargetLike | null) => void;
     bind(stencilMode: StencilMode, refCount: number): void;
+    destroy(): void;
 }

package/dist/core/renderers/gl/renderTarget/GlRenderTargetSystem.d.ts

@@ -1,9 +1,20 @@
 import type { RectangleLike } from '../../../math';
 import type { RenderTargetLike, TextureLike } from '../../shared';
 import type { GlRenderer } from '../GlRenderer';
+import type { GlSystemEvents } from '../system';
+import type { GlRenderingContext } from '../types';
 import { Projection2D } from '../../../math';
 import { GlSystem } from '../system';
 import { GlRenderTarget } from './GlRenderTarget';
+export interface GlRenderTargetSystemEvents extends GlSystemEvents {
+    updateRenderTarget: [renderTarget: RenderTargetLike | null];
+}
+export interface GlRenderTargetSystem {
+    on: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, listener: (...args: GlRenderTargetSystemEvents[K]) => void) => this;
+    once: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, listener: (...args: GlRenderTargetSystemEvents[K]) => void) => this;
+    off: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, listener: (...args: GlRenderTargetSystemEvents[K]) => void) => this;
+    emit: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, ...args: GlRenderTargetSystemEvents[K]) => this;
+}
 export declare class GlRenderTargetSystem extends GlSystem {
     install(renderer: GlRenderer): void;
     readonly renderTargets: Map<number, RenderTargetLike>;
@@ -13,7 +24,7 @@ export declare class GlRenderTargetSystem extends GlSystem {
     protected _hasMRT: boolean;
     protected _writeDepthTexture: boolean;
     projectionMatrix: Projection2D;
-    onUpdateContext(): void;
+    protected _updateContext(gl: GlRenderingContext): void;
     bind(renderTarget: RenderTargetLike | null, frame?: RectangleLike): void;
     unbind(): void;
     getGlRenderTarget(renderTarget: RenderTargetLike): GlRenderTarget;

package/dist/core/renderers/gl/state/GlStateSystem.d.ts

@@ -31,7 +31,7 @@ export declare class GlStateSystem extends GlSystem {
     boundBlendMode?: string;
     blendModes: Record<GlBlendMode, any>;
     defaultState: GlState;
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
     toggle(boundPoint: number, enable: boolean): void;
     setBlend(value: boolean): void;
     setOffsets(value: boolean): void;

package/dist/core/renderers/gl/system/GlSystem.d.ts

@@ -1,12 +1,24 @@
+import type { ObservableEvents } from 'modern-idoc';
 import type { GlRenderer } from '../GlRenderer';
 import type { GlRenderingContext } from '../types';
-export declare abstract class GlSystem {
+import { Observable } from 'modern-idoc';
+export interface GlSystemEvents extends ObservableEvents {
+    updateContext: [gl: GlRenderingContext];
+    setup: [];
+}
+export interface GlSystem {
+    on: <K extends keyof GlSystemEvents & string>(event: K, listener: (...args: GlSystemEvents[K]) => void) => this;
+    once: <K extends keyof GlSystemEvents & string>(event: K, listener: (...args: GlSystemEvents[K]) => void) => this;
+    off: <K extends keyof GlSystemEvents & string>(event: K, listener: (...args: GlSystemEvents[K]) => void) => this;
+    emit: <K extends keyof GlSystemEvents & string>(event: K, ...args: GlSystemEvents[K]) => this;
+}
+export declare abstract class GlSystem extends Observable {
     protected _renderer: GlRenderer;
     protected get _gl(): GlRenderingContext;
-    get gl(): GlRenderingContext;
+    constructor();
     install(renderer: GlRenderer): void;
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
+    protected _setup(): void;
     flush(): void;
     reset(): void;
-    destroy(): void;
 }

package/dist/core/renderers/gl/texture/GlTextureSystem.d.ts

@@ -17,7 +17,7 @@ export declare class GlTextureSystem extends GlSystem {
     protected _location: GlTextureLocation;
     current: (TextureLike | null)[];
     install(renderer: GlRenderer): void;
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
     getGlTexture(texture: TextureLike): GlTexture;
     protected _createGlTexture(texture: TextureLike): GlTexture;
     bind(texture?: TextureLike | null, location?: number): void;