modern-canvas 0.4.12 → 0.4.14

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';
@@ -8636,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;
@@ -9089,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;
@@ -9129,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;
     }
@@ -9157,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,
@@ -9292,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);
@@ -9319,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);
@@ -9331,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);
@@ -9340,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;
@@ -9381,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);
@@ -9411,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);
@@ -10388,6 +10346,10 @@ let Animation = class extends TimelineNode {
   _getDiffValue(name, previous, current, weight, context) {
     let from;
     let to;
+    if (previous === "none")
+      previous = void 0;
+    if (current === "none")
+      current = void 0;
     if (previous === void 0 || current === void 0) {
       if (previous !== void 0) {
         from = parseCssProperty(name, String(previous), context);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "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"