modern-canvas 0.7.15 → 0.8.1

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) {
@@ -2576,6 +2575,8 @@ attribute vec4 aDisableWrapMode;
 uniform mat3 projectionMatrix;
 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 * viewMatrix * 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);
@@ -10344,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) {
@@ -10404,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();
@@ -10450,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(
@@ -10505,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);
@@ -10542,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(
@@ -10647,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;
@@ -13430,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');
@@ -13456,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());
@@ -13788,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) => {
@@ -14233,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.15",
+  "version": "0.8.1",
   "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"