modern-canvas 0.7.14 → 0.8.0

package/dist/index.mjs

@@ -3,7 +3,6 @@ import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
 import { Text } from 'modern-text';
-import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
 
 const customNodes = /* @__PURE__ */ new Map();
 function customNode(name, defaultProperties) {
@@ -1740,7 +1739,7 @@ class Matrix3 extends Matrix {
   constructor(array) {
     super(3, 3, array);
   }
-  invert() {
+  affineInvert() {
     const [
       n11,
       n21,
@@ -2192,10 +2191,10 @@ class Transform2D extends Matrix3 {
     newPos.y = b * x + d * y + ty;
     return newPos;
   }
-  inverse() {
-    return this.clone().invert();
+  affineInverse() {
+    return this.clone().affineInvert();
   }
-  applyInverse(pos, newPos) {
+  applyAffineInverse(pos, newPos) {
     newPos = newPos || new Vector2();
     const { a, b, c, d, tx, ty } = this.toObject();
     const id = 1 / (a * d + c * -b);
@@ -2574,8 +2573,10 @@ attribute vec4 aBackgroundColor;
 attribute vec4 aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
-uniform mat3 worldTransformMatrix;
+uniform mat3 viewMatrix;
 uniform vec4 modulate;
+uniform float canvasWidth;
+uniform float canvasHeight;
 
 varying float vTextureId;
 varying vec2 vUv;
@@ -2583,6 +2584,10 @@ varying vec4 vModulate;
 varying vec4 vBackgroundColor;
 varying vec4 vDisableWrapMode;
 
+vec2 roundPixels(vec2 position, vec2 targetSize) {
+  return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
+}
+
 void main(void) {
   mat3 modelMatrix = mat3(
     1.0, 0.0, 0.0,
@@ -2590,8 +2595,9 @@ void main(void) {
     0.0, 0.0, 1.0
   );
   vTextureId = aTextureId;
-  mat3 modelViewProjectionMatrix = projectionMatrix * worldTransformMatrix * modelMatrix;
-  gl_Position = vec4((modelViewProjectionMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
+  vec3 pos = projectionMatrix * viewMatrix * modelMatrix * vec3(aPosition, 1.0);
+  gl_Position = vec4(roundPixels(pos.xy, vec2(canvasWidth, canvasHeight)), 0.0, 1.0);
+
   vUv = aUv;
   vModulate = aModulate * modulate;
   vBackgroundColor = aBackgroundColor;
@@ -2676,6 +2682,8 @@ void main(void) {
         renderer2.program.updateUniforms(program, {
           samplers,
           modulate: [1, 1, 1, 1],
+          canvasWidth: renderer2.gl.drawingBufferWidth,
+          canvasHeight: renderer2.gl.drawingBufferHeight,
           ...renderer2.program.uniforms
         });
         renderer2.vertexArray.bind(vao ?? vertexArray);
@@ -3321,7 +3329,7 @@ class WebGLProgramModule extends WebGLModule {
   boundProgram = null;
   uniforms = {
     projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
-    worldTransformMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
+    viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
   };
   create(options) {
     const program = this.gl.createProgram();
@@ -3525,7 +3533,7 @@ ${gl.getShaderInfoLog(shader)}`);
     this.boundProgram = null;
     this.uniforms = {
       projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
-      worldTransformMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
+      viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
     };
   }
   free() {
@@ -3619,8 +3627,8 @@ class WebGLScissorModule extends WebGLModule {
   use() {
     const renderer = this._renderer;
     const { pixelRatio, mask, viewport, screen, gl, program } = renderer;
-    const { worldTransformMatrix } = program.uniforms;
-    const rect = transformRectToAABB(worldTransformMatrix, mask.last.mask);
+    const { viewMatrix } = program.uniforms;
+    const rect = transformRectToAABB(viewMatrix, mask.last.mask);
     const { x, y, width, height } = rect;
     let scissorY;
     if (viewport.boundViewport) {
@@ -6559,7 +6567,7 @@ let Viewport = class extends Node {
     this.projection.flipY(flipY);
   }
   projection = new Projection2D();
-  worldTransform = new Transform2D();
+  canvasTransform = new Transform2D();
   _framebufferIndex = 0;
   _framebuffers = [
     { texture: new ViewportTexture(), needsUpload: false },
@@ -6674,7 +6682,7 @@ let Viewport = class extends Node {
   render(renderer, next) {
     const oldViewport = this._tree?.getCurrentViewport();
     renderer.program.uniforms.projectionMatrix = this.projection.toArray(true);
-    renderer.program.uniforms.worldTransformMatrix = this.worldTransform.toArray(true);
+    renderer.program.uniforms.viewMatrix = this.canvasTransform.toArray(true);
     this.activate(renderer);
     renderer.clear();
     super.render(renderer, next);
@@ -6689,11 +6697,11 @@ let Viewport = class extends Node {
   getRect() {
     return new Rect2(this.x, this.y, this.width, this.height);
   }
-  toGlobal(worldPos, newPos) {
-    return this.worldTransform.applyInverse(worldPos, newPos);
+  toCanvasGlobal(screenPos, newPos) {
+    return this.canvasTransform.applyAffineInverse(screenPos, newPos);
   }
-  toWorld(globalPos, newPos) {
-    return this.worldTransform.apply(globalPos, newPos);
+  toCanvasScreen(globalPos, newPos) {
+    return this.canvasTransform.apply(globalPos, newPos);
   }
 };
 __decorateClass$P([
@@ -7231,35 +7239,28 @@ let Node2D = class extends CanvasItem {
   getTransformOrigin() {
     return new Vector2(0, 0);
   }
-  getTransform(cb) {
+  updateTransform(cb) {
     const origin = this.getTransformOrigin();
-    const transform = new Transform2D();
-    transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
+    const transform = this.transform.identity().translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
     cb?.(transform);
     transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
-    return transform;
-  }
-  updateTransform() {
-    this.transform.copy(this.getTransform());
   }
   updateGlobalTransform() {
     this.updateTransform();
     const parent = this.getParent();
     if (parent?.globalTransform) {
-      this._parentTransformDirtyId = parent.globalTransform.dirtyId;
-      this.globalPosition.set(
-        parent.globalPosition.x + this.position.x,
-        parent.globalPosition.y + this.position.y
-      );
-      this.globalScale.set(
-        parent.globalScale.x * this.scale.x,
-        parent.globalScale.y * this.scale.y
-      );
-      this.globalSkew.set(
-        parent.globalSkew.x * this.skew.x,
-        parent.globalSkew.y * this.skew.y
-      );
-      this.globalRotation = parent.globalRotation + this.rotation;
+      const {
+        globalPosition,
+        globalScale,
+        globalSkew,
+        globalTransform,
+        globalRotation
+      } = parent;
+      this._parentTransformDirtyId = globalTransform.dirtyId;
+      this.globalPosition.set(globalPosition.x + this.position.x, globalPosition.y + this.position.y);
+      this.globalScale.set(globalScale.x * this.scale.x, globalScale.y * this.scale.y);
+      this.globalSkew.set(globalSkew.x * this.skew.x, globalSkew.y * this.skew.y);
+      this.globalRotation = globalRotation + this.rotation;
       parent.globalTransform.multiply(this.transform, this.globalTransform);
     } else {
       this.globalPosition.copy(this.position);
@@ -7308,7 +7309,7 @@ let Node2D = class extends CanvasItem {
     }
   }
   toLocal(globalPos, newPos) {
-    return this.globalTransform.applyInverse(globalPos, newPos);
+    return this.globalTransform.applyAffineInverse(globalPos, newPos);
   }
   toGlobal(localPos, newPos) {
     return this.globalTransform.apply(localPos, newPos);
@@ -7335,7 +7336,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
   return result;
 };
 let Camera2D = class extends Node2D {
-  zoom = new Vector2(1, 1).on("update", () => this.updateWorldTransform());
+  zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
   maxZoom = new Vector2(6, 6);
   minZoom = new Vector2(0.1, 0.1);
   _screenOffset = { x: 0, y: 0 };
@@ -7422,14 +7423,26 @@ let Camera2D = class extends Node2D {
   }
   updateTransform() {
     super.updateTransform();
-    this.updateWorldTransform();
+    this.updateCanvasTransform();
   }
-  updateWorldTransform() {
+  updateCanvasTransform() {
     const viewport = this.getViewport();
     if (!viewport)
       return;
-    viewport.worldTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
-    this.emit("updateWorldTransform");
+    viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
+    this.emit("updateCanvasTransform");
+  }
+  toGlobal(screenPos, newPos) {
+    const viewport = this.getViewport();
+    if (!viewport)
+      throw new Error("Failed to toGlobal, viewport is empty");
+    return viewport.toCanvasGlobal(screenPos, newPos);
+  }
+  toScreen(globalPos, newPos) {
+    const viewport = this.getViewport();
+    if (!viewport)
+      throw new Error("Failed to toScreen, viewport is empty");
+    return viewport.toCanvasScreen(globalPos, newPos);
   }
 };
 __decorateClass$I([
@@ -10032,9 +10045,9 @@ let BaseElement2D = class extends Node2D {
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
     return new Vector2(originX * width, originY * height);
   }
-  getTransform(cb) {
+  updateTransform(cb) {
     const { width, height } = this.size;
-    return super.getTransform((transform) => {
+    super.updateTransform((transform) => {
       parseCSSTransform(this.style.transform ?? "", width, height, transform);
       cb?.(transform);
     });
@@ -10223,7 +10236,7 @@ let BaseElement2D = class extends Node2D {
             const pos = new Vector2(screenX, screenY);
             const viewport = this.getViewport();
             if (viewport) {
-              viewport.toGlobal(pos, pos);
+              viewport.toCanvasGlobal(pos, pos);
             }
             this.toLocal(pos, pos);
             if (this._positionInput(pos, key)) {
@@ -10339,59 +10352,123 @@ Element2D = __decorateClass$k([
   customNode("Element2D")
 ], Element2D);
 
+const edgeMap = {
+  left: 0,
+  // Edge.Left
+  top: 1,
+  // Edge.Top
+  right: 2,
+  // Edge.Right
+  bottom: 3,
+  // Edge.Bottom
+  start: 4,
+  // Edge.Start
+  end: 5,
+  // Edge.End
+  horizontal: 6,
+  // Edge.Horizontal
+  vertical: 7,
+  // Edge.Vertical
+  all: 8
+  // Edge.All
+};
+const gutterMap = {
+  column: 0,
+  // Gutter.Column
+  row: 1,
+  // Gutter.Row
+  all: 2
+  // Gutter.All
+};
 const alignMap = {
-  "auto": Align.Auto,
-  "flex-start": Align.FlexStart,
-  "center": Align.Center,
-  "flex-end": Align.FlexEnd,
-  "stretch": Align.Stretch,
-  "baseline": Align.Baseline,
-  "space-between": Align.SpaceBetween,
-  "space-around": Align.SpaceAround,
-  "space-evenly": Align.SpaceEvenly
+  "auto": 0,
+  // Align.Auto
+  "flex-start": 1,
+  // Align.FlexStart
+  "center": 2,
+  // Align.Center
+  "flex-end": 3,
+  // Align.FlexEnd
+  "stretch": 4,
+  // Align.Stretch
+  "baseline": 5,
+  // Align.Baseline
+  "space-between": 6,
+  // Align.SpaceBetween
+  "space-around": 7,
+  // Align.SpaceAround
+  "space-evenly": 8
+  // Align.SpaceEvenly
 };
 const displayMap = {
-  none: Display.None,
-  flex: Display.Flex,
-  contents: Display.Contents
+  flex: 0,
+  // Display.Flex
+  none: 1,
+  // Display.None
+  contents: 2
+  // Display.Contents
 };
 const directionMap = {
-  inherit: Direction.Inherit,
-  ltr: Direction.LTR,
-  rtl: Direction.RTL
+  inherit: 0,
+  // Direction.Inherit
+  ltr: 1,
+  // Direction.LTR
+  rtl: 2
+  // Direction.RTL
 };
 const flexDirectionMap = {
-  "column": FlexDirection.Column,
-  "column-reverse": FlexDirection.ColumnReverse,
-  "row": FlexDirection.Row,
-  "row-reverse": FlexDirection.RowReverse
+  "column": 0,
+  // FlexDirection.Column
+  "column-reverse": 1,
+  // FlexDirection.ColumnReverse
+  "row": 2,
+  // FlexDirection.Row
+  "row-reverse": 3
+  // FlexDirection.RowReverse
 };
 const flexWrapMap = {
-  "no-wrap": Wrap.NoWrap,
-  "wrap": Wrap.Wrap,
-  "Wrap-reverse": Wrap.WrapReverse
+  "no-wrap": 0,
+  // Wrap.NoWrap
+  "wrap": 1,
+  // Wrap.Wrap
+  "Wrap-reverse": 2
+  // Wrap.WrapReverse
 };
 const justifyMap = {
-  "flex-start": Justify.FlexStart,
-  "center": Justify.Center,
-  "flex-end": Justify.FlexEnd,
-  "space-between": Justify.SpaceBetween,
-  "space-around": Justify.SpaceAround,
-  "space-evenly": Justify.SpaceEvenly
+  "flex-start": 0,
+  // Justify.FlexStart
+  "center": 1,
+  // Justify.Center
+  "flex-end": 2,
+  // Justify.FlexEnd
+  "space-between": 3,
+  // Justify.SpaceBetween
+  "space-around": 4,
+  // Justify.SpaceAround
+  "space-evenly": 5
+  // Justify.SpaceEvenly
 };
 const overflowMap = {
-  visible: Overflow.Visible,
-  hidden: Overflow.Hidden,
-  scroll: Overflow.Scroll
+  visible: 0,
+  // Overflow.Visible
+  hidden: 1,
+  // Overflow.Hidden
+  scroll: 2
+  // Overflow.Scroll
 };
 const positionTypeMap = {
-  static: PositionType.Static,
-  relative: PositionType.Relative,
-  absolute: PositionType.Absolute
+  static: 0,
+  // PositionType.Static
+  relative: 1,
+  // PositionType.Relative
+  absolute: 2
+  // PositionType.Absolute
 };
 const boxSizingMap = {
-  "border-box": BoxSizing.BorderBox,
-  "content-box": BoxSizing.ContentBox
+  "border-box": 0,
+  // BoxSizing.BorderBox
+  "content-box": 1
+  // BoxSizing.ContentBox
 };
 class FlexLayout {
   constructor(_element) {
@@ -10399,6 +10476,7 @@ class FlexLayout {
   }
   static _yoga;
   static async load() {
+    const { loadYoga } = await import('yoga-layout/load');
     this._yoga = await loadYoga();
   }
   _node = FlexLayout._yoga.Node.create();
@@ -10445,19 +10523,19 @@ class FlexLayout {
         this._node.setAspectRatio(value);
         break;
       case "borderTop":
-        this._node.setBorder(Edge.Top, this._style.borderWidth);
+        this._node.setBorder(edgeMap.top, this._style.borderWidth);
         break;
       case "borderBottom":
-        this._node.setBorder(Edge.Bottom, this._style.borderWidth);
+        this._node.setBorder(edgeMap.bottom, this._style.borderWidth);
         break;
       case "borderLeft":
-        this._node.setBorder(Edge.Left, this._style.borderWidth);
+        this._node.setBorder(edgeMap.left, this._style.borderWidth);
         break;
       case "borderRight":
-        this._node.setBorder(Edge.Right, this._style.borderWidth);
+        this._node.setBorder(edgeMap.right, this._style.borderWidth);
         break;
       case "border":
-        this._node.setBorder(Edge.All, this._style.borderWidth);
+        this._node.setBorder(edgeMap.all, this._style.borderWidth);
         break;
       case "direction":
         this._node.setDirection(
@@ -10500,22 +10578,22 @@ class FlexLayout {
         );
         break;
       case "gap":
-        value !== void 0 && this._node.setGap(Gutter.All, value);
+        value !== void 0 && this._node.setGap(gutterMap.all, value);
         break;
       case "marginTop":
-        this._node.setMargin(Edge.Top, value);
+        this._node.setMargin(edgeMap.top, value);
         break;
       case "marginBottom":
-        this._node.setMargin(Edge.Top, value);
+        this._node.setMargin(edgeMap.bottom, value);
         break;
       case "marginLeft":
-        this._node.setMargin(Edge.Left, value);
+        this._node.setMargin(edgeMap.left, value);
         break;
       case "marginRight":
-        this._node.setMargin(Edge.Top, value);
+        this._node.setMargin(edgeMap.right, value);
         break;
       case "margin":
-        this._node.setMargin(Edge.All, value);
+        this._node.setMargin(edgeMap.all, value);
         break;
       case "maxHeight":
         this._node.setMaxHeight(value);
@@ -10537,31 +10615,31 @@ class FlexLayout {
         );
         break;
       case "paddingTop":
-        this._node.setPadding(Edge.Top, this._style.paddingTop);
+        this._node.setPadding(edgeMap.top, this._style.paddingTop);
         break;
       case "paddingBottom":
-        this._node.setPadding(Edge.Bottom, this._style.paddingBottom);
+        this._node.setPadding(edgeMap.bottom, this._style.paddingBottom);
         break;
       case "paddingLeft":
-        this._node.setPadding(Edge.Left, this._style.paddingLeft);
+        this._node.setPadding(edgeMap.left, this._style.paddingLeft);
         break;
       case "paddingRight":
-        this._node.setPadding(Edge.Right, this._style.paddingRight);
+        this._node.setPadding(edgeMap.right, this._style.paddingRight);
         break;
       case "padding":
-        this._node.setPadding(Edge.All, this._style.padding);
+        this._node.setPadding(edgeMap.all, this._style.padding);
         break;
       case "top":
-        this._node.setPosition(Edge.Top, this._style.top);
+        this._node.setPosition(edgeMap.top, this._style.top);
         break;
       case "bottom":
-        this._node.setPosition(Edge.Bottom, this._style.bottom);
+        this._node.setPosition(edgeMap.bottom, this._style.bottom);
         break;
       case "left":
-        this._node.setPosition(Edge.Left, this._style.left);
+        this._node.setPosition(edgeMap.left, this._style.left);
         break;
       case "right":
-        this._node.setPosition(Edge.Right, this._style.right);
+        this._node.setPosition(edgeMap.right, this._style.right);
         break;
       case "position":
         this._node.setPositionType(
@@ -10642,7 +10720,7 @@ let FlexElement2D = class extends BaseElement2D {
     }
   }
   updateTransform() {
-    this.calculateLayout(void 0, void 0, Direction.LTR);
+    this.calculateLayout(void 0, void 0, directionMap.ltr);
     const { left, top, width, height } = this._layout.getComputedLayout();
     this.position.x = left;
     this.position.y = top;
@@ -13425,7 +13503,7 @@ TwistTransition = __decorateClass$1([
   customNode("TwistTransition")
 ], TwistTransition);
 
-class GIFLoader extends Loader {
+class GifLoader extends Loader {
   install(assets) {
     const handler = async (url) => {
       const { decodeFrames } = await import('modern-gif');
@@ -13451,7 +13529,7 @@ class GIFLoader extends Loader {
   }
 }
 
-class JSONLoader extends Loader {
+class JsonLoader extends Loader {
   install(assets) {
     const handler = (url) => {
       return assets.fetch(url).then((rep) => rep.json());
@@ -13783,7 +13861,7 @@ class Assets {
     this._handled.clear();
   }
 }
-const assets = new Assets().use(new FontLoader()).use(new GIFLoader()).use(new JSONLoader()).use(new LottieLoader()).use(new TextLoader()).use(new TextureLoader()).use(new VideoLoader());
+const assets = new Assets().use(new FontLoader()).use(new GifLoader()).use(new JsonLoader()).use(new LottieLoader()).use(new TextLoader()).use(new TextureLoader()).use(new VideoLoader());
 
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14228,4 +14306,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, 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, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, 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, Scaler, SceneTree, ScrollBar, 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, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, render, timingFunctions, uid };
+export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, 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, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, 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, Scaler, SceneTree, ScrollBar, 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, XScrollBar, YScrollBar, 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$1 as 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.7.14",
+  "version": "0.8.0",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -56,7 +56,8 @@
   },
   "peerDependencies": {
     "lottie-web": "^5",
-    "modern-gif": "^2"
+    "modern-gif": "^2",
+    "yoga-layout": "^3"
   },
   "peerDependenciesMeta": {
     "lottie-web": {
@@ -64,32 +65,35 @@
     },
     "modern-gif": {
       "optional": true
+    },
+    "yoga-layout": {
+      "optional": true
     }
   },
   "dependencies": {
     "colord": "^2.9.3",
     "earcut": "^3.0.2",
     "modern-font": "^0.4.1",
-    "modern-idoc": "^0.8.7",
+    "modern-idoc": "^0.8.9",
     "modern-path2d": "^1.4.8",
-    "modern-text": "^1.7.4",
-    "yoga-layout": "^3.2.1"
+    "modern-text": "^1.7.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^5.0.0",
+    "@antfu/eslint-config": "^5.2.1",
     "@types/earcut": "^3.0.0",
-    "@types/node": "^24.1.0",
-    "bumpp": "^10.2.1",
+    "@types/node": "^24.3.0",
+    "bumpp": "^10.2.3",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.32.0",
-    "lint-staged": "^16.1.2",
+    "eslint": "^9.33.0",
+    "lint-staged": "^16.1.5",
     "lottie-web": "^5.13.0",
     "modern-gif": "^2.0.4",
-    "simple-git-hooks": "^2.13.0",
-    "typescript": "^5.8.3",
-    "unbuild": "^3.6.0",
-    "vite": "^7.0.6",
-    "vitest": "^3.2.4"
+    "simple-git-hooks": "^2.13.1",
+    "typescript": "^5.9.2",
+    "unbuild": "^3.6.1",
+    "vite": "^7.1.3",
+    "vitest": "^3.2.4",
+    "yoga-layout": "^3.2.1"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"