modern-canvas 0.4.11 → 0.4.13

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-import { getDefaultTextStyle, getDefaultTransformStyle } from 'modern-idoc';
+import { getDefaultStyle } from 'modern-idoc';
 import { Path2D } from 'modern-path2d';
 import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
 import { Text, textDefaultStyle } from 'modern-text';
@@ -3213,8 +3213,8 @@ class WebGLFramebufferModule extends WebGLModule {
       this._renderer.viewport.bind({
         x: 0,
         y: 0,
-        width: this._renderer.screen.width,
-        height: this._renderer.screen.height
+        width: this._renderer.screen.width * this._renderer.pixelRatio,
+        height: this._renderer.screen.height * this._renderer.pixelRatio
       });
     }
   }
@@ -5788,6 +5788,14 @@ let Node = class extends CoreObject {
         return false;
     }
   }
+  _update(changed) {
+    this._tree?.log(this.name, "updating");
+    super._update(changed);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    this._tree?.log(this.name, `updating [${String(key)}]`);
+    super._updateProperty(key, value, oldValue, declaration);
+  }
   _onTreeEnter(tree) {
     this._treeEnter(tree);
     this.emit("treeEntered", tree);
@@ -6291,8 +6299,8 @@ let Viewport = class extends Node {
     if (this.valid) {
       renderer.flush();
       this._tree?.setCurrentViewport(this);
-      renderer.framebuffer.bind(this._glFramebuffer(renderer));
       this.upload(renderer);
+      renderer.framebuffer.bind(this._glFramebuffer(renderer));
       return true;
     }
     return false;
@@ -8359,14 +8367,12 @@ class SceneTree extends MainLoop {
   }
   _renderScreen(renderer) {
     renderer.state.reset();
-    const { pixelRatio } = renderer;
-    const { width, height } = this.root;
     renderer.framebuffer.bind(null);
     renderer.viewport.bind({
       x: 0,
       y: 0,
-      width: width * pixelRatio,
-      height: height * pixelRatio
+      width: this.root.width * renderer.pixelRatio,
+      height: this.root.height * renderer.pixelRatio
     });
     if (this.backgroundColor) {
       renderer.gl.clearColor(...this._backgroundColor.toArray());
@@ -8630,38 +8636,20 @@ class BaseElement2DStyle extends Resource {
     return this._backgroundColor;
   }
   async loadBackgroundImage() {
-    if (this.backgroundImage !== "none") {
+    if (this.backgroundImage && this.backgroundImage !== "none") {
       return await assets.texture.load(this.backgroundImage);
     }
   }
 }
-const defaultStyles$2 = {
-  ...getDefaultTransformStyle(),
-  ...getDefaultTextStyle(),
-  backgroundColor: "none",
-  backgroundImage: "none",
-  filter: "none",
-  boxShadow: "none",
-  maskImage: "none",
-  opacity: 1,
-  borderWidth: 0,
-  borderRadius: 0,
-  borderColor: "#000000",
-  borderStyle: "none",
-  outlineWidth: 0,
-  outlineOffset: 0,
-  outlineColor: "#000000",
-  outlineStyle: "none",
-  visibility: "visible",
-  overflow: "visible",
-  pointerEvents: "auto"
-};
-delete defaultStyles$2.top;
-delete defaultStyles$2.left;
-delete defaultStyles$2.width;
-delete defaultStyles$2.height;
-for (const key in defaultStyles$2) {
-  defineProperty(BaseElement2DStyle, key, { default: defaultStyles$2[key] });
+const defaultStyles$1 = getDefaultStyle();
+delete defaultStyles$1.top;
+delete defaultStyles$1.left;
+delete defaultStyles$1.width;
+delete defaultStyles$1.height;
+for (const key in defaultStyles$1) {
+  defineProperty(BaseElement2DStyle, key, {
+    default: defaultStyles$1[key]
+  });
 }
 
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
@@ -9083,14 +9071,14 @@ class Element2DStyle extends BaseElement2DStyle {
     this.setProperties(properties);
   }
 }
-const defaultStyles$1 = {
+const defaultStyles = {
   left: 0,
   top: 0,
   width: 0,
   height: 0
 };
-for (const key in defaultStyles$1) {
-  defineProperty(Element2DStyle, key, { default: defaultStyles$1[key] });
+for (const key in defaultStyles) {
+  defineProperty(Element2DStyle, key, { default: defaultStyles[key] });
 }
 
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -9123,19 +9111,19 @@ let Element2D = class extends BaseElement2D {
     super._updateStyleProperty(key, value, oldValue, declaration);
     switch (key) {
       case "left":
-        this.position.x = this.style.left;
+        this.position.x = Number(value);
         this.requestRelayout();
         break;
       case "top":
-        this.position.y = this.style.top;
+        this.position.y = Number(value);
         this.requestRelayout();
         break;
       case "width":
-        this.size.width = this.style.width;
+        this.size.width = Number(value);
         this.requestRelayout();
         break;
       case "height":
-        this.size.height = this.style.height;
+        this.size.height = Number(value);
         this.requestRelayout();
         break;
     }
@@ -9151,52 +9139,6 @@ class FlexElement2DStyle extends BaseElement2DStyle {
     this.setProperties(properties);
   }
 }
-const defaultStyles = {
-  alignContent: "stretch",
-  alignItems: "stretch",
-  alignSelf: "auto",
-  borderTop: "none",
-  borderLeft: "none",
-  borderRight: "none",
-  borderBottom: "none",
-  borderWidth: 0,
-  border: "none",
-  direction: "inherit",
-  display: "flex",
-  flex: 0,
-  flexBasis: "auto",
-  flexDirection: "row",
-  flexGrow: 0,
-  flexShrink: 1,
-  flexWrap: "nowrap",
-  height: "auto",
-  justifyContent: "flex-start",
-  gap: 0,
-  marginTop: 0,
-  marginLeft: 0,
-  marginRight: 0,
-  marginBottom: 0,
-  margin: 0,
-  maxHeight: 0,
-  maxWidth: 0,
-  minHeight: 0,
-  minWidth: 0,
-  paddingTop: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  paddingBottom: 0,
-  padding: 0,
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  position: "static",
-  boxSizing: "content-box",
-  width: "auto"
-};
-for (const key in defaultStyles) {
-  defineProperty(FlexElement2DStyle, key, { default: defaultStyles[key] });
-}
 
 const alignMap = {
   "auto": Align.Auto,
@@ -9286,13 +9228,19 @@ class FlexLayout {
   updateStyleProperty(key, value, oldValue, declaration) {
     switch (key) {
       case "alignContent":
-        this._node.setAlignContent(alignMap[this._style.alignContent]);
+        this._node.setAlignContent(
+          value ? alignMap[value] : alignMap["flex-start"]
+        );
         break;
       case "alignItems":
-        this._node.setAlignItems(alignMap[this._style.alignItems]);
+        this._node.setAlignItems(
+          value ? alignMap[value] : alignMap["flex-start"]
+        );
         break;
       case "alignSelf":
-        this._node.setAlignSelf(alignMap[this._style.alignSelf]);
+        this._node.setAlignSelf(
+          value ? alignMap[value] : alignMap["flex-start"]
+        );
         break;
       case "aspectRatio":
         this._node.setAspectRatio(value);
@@ -9313,10 +9261,14 @@ class FlexLayout {
         this._node.setBorder(Edge.All, this._style.borderWidth);
         break;
       case "direction":
-        this._node.setDirection(directionMap[this._style.direction]);
+        this._node.setDirection(
+          value ? directionMap[value] : directionMap.inherit
+        );
         break;
       case "display":
-        this._node.setDisplay(displayMap[this._style.display]);
+        this._node.setDisplay(
+          value ? displayMap[value] : displayMap.flex
+        );
         break;
       case "flex":
         this._node.setFlex(this._style.flex);
@@ -9325,7 +9277,9 @@ class FlexLayout {
         this._node.setFlexBasis(this._style.flexBasis);
         break;
       case "flexDirection":
-        this._node.setFlexDirection(flexDirectionMap[this._style.flexDirection]);
+        this._node.setFlexDirection(
+          value ? flexDirectionMap[value] : flexDirectionMap.row
+        );
         break;
       case "flexGrow":
         this._node.setFlexGrow(this._style.flexGrow);
@@ -9334,37 +9288,41 @@ class FlexLayout {
         this._node.setFlexShrink(this._style.flexShrink);
         break;
       case "flexWrap":
-        this._node.setFlexWrap(flexWrapMap[this._style.flexWrap]);
+        this._node.setFlexWrap(
+          value ? flexWrapMap[value] : flexWrapMap.wrap
+        );
         break;
       case "height":
         this._node.setHeight(this._style.height);
         break;
       case "justifyContent":
-        this._node.setJustifyContent(justifyMap[this._style.justifyContent]);
+        this._node.setJustifyContent(
+          value ? justifyMap[value] : justifyMap["flex-start"]
+        );
         break;
       case "gap":
-        this._node.setGap(Gutter.All, this._style.gap);
+        value !== void 0 && this._node.setGap(Gutter.All, value);
         break;
       case "marginTop":
-        this._node.setMargin(Edge.Top, this._style.marginTop);
+        this._node.setMargin(Edge.Top, value);
         break;
       case "marginBottom":
-        this._node.setMargin(Edge.Top, this._style.marginBottom);
+        this._node.setMargin(Edge.Top, value);
         break;
       case "marginLeft":
-        this._node.setMargin(Edge.Left, this._style.marginLeft);
+        this._node.setMargin(Edge.Left, value);
         break;
       case "marginRight":
-        this._node.setMargin(Edge.Top, this._style.marginRight);
+        this._node.setMargin(Edge.Top, value);
         break;
       case "margin":
-        this._node.setMargin(Edge.All, this._style.margin);
+        this._node.setMargin(Edge.All, value);
         break;
       case "maxHeight":
-        this._node.setMaxHeight(this._style.maxHeight);
+        this._node.setMaxHeight(value);
         break;
       case "maxWidth":
-        this._node.setMaxWidth(this._style.maxWidth);
+        this._node.setMaxWidth(value);
         break;
       //   setDirtiedFunc(dirtiedFunc: DirtiedFunction | null): void;
       //   setMeasureFunc(measureFunc: MeasureFunction | null): void;
@@ -9375,7 +9333,9 @@ class FlexLayout {
         this._node.setMinWidth(this._style.minWidth);
         break;
       case "overflow":
-        this._node.setOverflow(overflowMap[this._style.overflow]);
+        this._node.setOverflow(
+          value ? overflowMap[value] : overflowMap.visible
+        );
         break;
       case "paddingTop":
         this._node.setPadding(Edge.Top, this._style.paddingTop);
@@ -9405,10 +9365,14 @@ class FlexLayout {
         this._node.setPosition(Edge.Right, this._style.right);
         break;
       case "position":
-        this._node.setPositionType(positionTypeMap[this._style.position]);
+        this._node.setPositionType(
+          value ? positionTypeMap[value] : positionTypeMap.static
+        );
         break;
       case "boxSizing":
-        this._node.setBoxSizing(boxSizingMap[this._style.boxSizing]);
+        this._node.setBoxSizing(
+          value ? boxSizingMap[value] : boxSizingMap["content-box"]
+        );
         break;
       case "width":
         this._node.setWidth(this._style.width);
@@ -13187,8 +13151,9 @@ class Engine extends SceneTree {
     await this.nextTick();
   }
   async waitAndRender(delta = 0) {
+    await assets.waitUntilLoad();
     this._process(delta);
-    await this.waitUntilLoad();
+    await this.nextTick();
     this._render(this.renderer);
   }
   render(delta = 0) {
@@ -13260,11 +13225,16 @@ async function start(sleep = 100) {
   starting = false;
 }
 async function task(options) {
-  const { data, width, height, time = 0 } = options;
-  engine ??= new Engine({ width: 1, height: 1 });
+  const { data, width, height, debug = false, time = 0 } = options;
+  engine ??= new Engine({
+    width: 1,
+    height: 1,
+    preserveDrawingBuffer: true
+  });
+  engine.debug = debug;
   engine.root.removeChildren();
   engine.timeline.currentTime = time;
-  engine.resize(width, height);
+  engine.resize(width, height, true);
   (Array.isArray(data) ? data : [data]).forEach((v) => {
     if (v instanceof Node) {
       engine.root.appendChild(v);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -70,26 +70,26 @@
     "colord": "^2.9.3",
     "earcut": "^3.0.1",
     "modern-font": "^0.4.0",
-    "modern-idoc": "^0.2.8",
+    "modern-idoc": "^0.2.12",
     "modern-path2d": "^1.2.10",
-    "modern-text": "^1.2.3",
+    "modern-text": "^1.3.1",
     "yoga-layout": "^3.2.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.3.0",
+    "@antfu/eslint-config": "^4.8.1",
     "@types/earcut": "^3.0.0",
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.13.10",
     "bumpp": "^10.0.3",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.21.0",
+    "eslint": "^9.22.0",
     "lint-staged": "^15.4.3",
     "lottie-web": "^5.12.2",
     "modern-gif": "^2.0.4",
     "simple-git-hooks": "^2.11.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "unbuild": "^3.5.0",
-    "vite": "^6.2.0",
-    "vitest": "^3.0.7"
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"