modern-canvas 0.4.40 → 0.4.43

package/dist/index.cjs

@@ -1743,468 +1743,6 @@ class ColorMatrix extends Matrix {
   }
 }
 
-var GradientParser = GradientParser || {};
-GradientParser.parse = /* @__PURE__ */ function() {
-  const tokens = {
-    linearGradient: /^(-(webkit|o|ms|moz)-)?(linear-gradient)/i,
-    repeatingLinearGradient: /^(-(webkit|o|ms|moz)-)?(repeating-linear-gradient)/i,
-    radialGradient: /^(-(webkit|o|ms|moz)-)?(radial-gradient)/i,
-    repeatingRadialGradient: /^(-(webkit|o|ms|moz)-)?(repeating-radial-gradient)/i,
-    sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
-    extentKeywords: /^(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)/,
-    positionKeywords: /^(left|center|right|top|bottom)/i,
-    pixelValue: /^(-?((\d*\.\d+)|(\d+\.?)))px/,
-    percentageValue: /^(-?((\d*\.\d+)|(\d+\.?)))%/,
-    emValue: /^(-?((\d*\.\d+)|(\d+\.?)))em/,
-    angleValue: /^(-?((\d*\.\d+)|(\d+\.?)))deg/,
-    radianValue: /^(-?((\d*\.\d+)|(\d+\.?)))rad/,
-    startCall: /^\(/,
-    endCall: /^\)/,
-    comma: /^,/,
-    hexColor: /^#([0-9a-f]+)/i,
-    literalColor: /^([a-z]+)/i,
-    rgbColor: /^rgb/i,
-    rgbaColor: /^rgba/i,
-    varColor: /^var/i,
-    calcValue: /^calc/i,
-    variableName: /^(--[a-z0-9-,\s#]+)/i,
-    number: /^((\d*\.\d+)|(\d+\.?))/,
-    hslColor: /^hsl/i,
-    hslaColor: /^hsla/i
-  };
-  let input = "";
-  function error(msg) {
-    const err = new Error(`${input}: ${msg}`);
-    err.source = input;
-    throw err;
-  }
-  function getAST() {
-    const ast = matchListDefinitions();
-    if (input.length > 0) {
-      error("Invalid input not EOF");
-    }
-    return ast;
-  }
-  function matchListDefinitions() {
-    return matchListing(matchDefinition);
-  }
-  function matchDefinition() {
-    return matchGradient(
-      "linear-gradient",
-      tokens.linearGradient,
-      matchLinearOrientation
-    ) || matchGradient(
-      "repeating-linear-gradient",
-      tokens.repeatingLinearGradient,
-      matchLinearOrientation
-    ) || matchGradient(
-      "radial-gradient",
-      tokens.radialGradient,
-      matchListRadialOrientations
-    ) || matchGradient(
-      "repeating-radial-gradient",
-      tokens.repeatingRadialGradient,
-      matchListRadialOrientations
-    );
-  }
-  function matchGradient(gradientType, pattern, orientationMatcher) {
-    return matchCall(pattern, (captures) => {
-      const orientation = orientationMatcher();
-      if (orientation) {
-        if (!scan(tokens.comma)) {
-          error("Missing comma before color stops");
-        }
-      }
-      return {
-        type: gradientType,
-        orientation,
-        colorStops: matchListing(matchColorStop)
-      };
-    });
-  }
-  function matchCall(pattern, callback) {
-    const captures = scan(pattern);
-    if (captures) {
-      if (!scan(tokens.startCall)) {
-        error("Missing (");
-      }
-      const result = callback(captures);
-      if (!scan(tokens.endCall)) {
-        error("Missing )");
-      }
-      return result;
-    }
-  }
-  function matchLinearOrientation() {
-    const sideOrCorner = matchSideOrCorner();
-    if (sideOrCorner) {
-      return sideOrCorner;
-    }
-    const legacyDirection = match("position-keyword", tokens.positionKeywords, 1);
-    if (legacyDirection) {
-      return {
-        type: "directional",
-        value: legacyDirection.value
-      };
-    }
-    return matchAngle();
-  }
-  function matchSideOrCorner() {
-    return match("directional", tokens.sideOrCorner, 1);
-  }
-  function matchAngle() {
-    return match("angular", tokens.angleValue, 1) || match("angular", tokens.radianValue, 1);
-  }
-  function matchListRadialOrientations() {
-    let radialOrientations;
-    let radialOrientation = matchRadialOrientation();
-    let lookaheadCache;
-    if (radialOrientation) {
-      radialOrientations = [];
-      radialOrientations.push(radialOrientation);
-      lookaheadCache = input;
-      if (scan(tokens.comma)) {
-        radialOrientation = matchRadialOrientation();
-        if (radialOrientation) {
-          radialOrientations.push(radialOrientation);
-        } else {
-          input = lookaheadCache;
-        }
-      }
-    }
-    return radialOrientations;
-  }
-  function matchRadialOrientation() {
-    let radialType = matchCircle() || matchEllipse();
-    if (radialType) {
-      radialType.at = matchAtPosition();
-    } else {
-      const extent = matchExtentKeyword();
-      if (extent) {
-        radialType = extent;
-        const positionAt = matchAtPosition();
-        if (positionAt) {
-          radialType.at = positionAt;
-        }
-      } else {
-        const atPosition = matchAtPosition();
-        if (atPosition) {
-          radialType = {
-            type: "default-radial",
-            at: atPosition
-          };
-        } else {
-          const defaultPosition = matchPositioning();
-          if (defaultPosition) {
-            radialType = {
-              type: "default-radial",
-              at: defaultPosition
-            };
-          }
-        }
-      }
-    }
-    return radialType;
-  }
-  function matchCircle() {
-    const circle = match("shape", /^(circle)/i, 0);
-    if (circle) {
-      circle.style = matchLength() || matchExtentKeyword();
-    }
-    return circle;
-  }
-  function matchEllipse() {
-    const ellipse = match("shape", /^(ellipse)/i, 0);
-    if (ellipse) {
-      ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
-    }
-    return ellipse;
-  }
-  function matchExtentKeyword() {
-    return match("extent-keyword", tokens.extentKeywords, 1);
-  }
-  function matchAtPosition() {
-    if (match("position", /^at/, 0)) {
-      const positioning = matchPositioning();
-      if (!positioning) {
-        error("Missing positioning value");
-      }
-      return positioning;
-    }
-  }
-  function matchPositioning() {
-    const location = matchCoordinates();
-    if (location.x || location.y) {
-      return {
-        type: "position",
-        value: location
-      };
-    }
-  }
-  function matchCoordinates() {
-    return {
-      x: matchDistance(),
-      y: matchDistance()
-    };
-  }
-  function matchListing(matcher) {
-    let captures = matcher();
-    const result = [];
-    if (captures) {
-      result.push(captures);
-      while (scan(tokens.comma)) {
-        captures = matcher();
-        if (captures) {
-          result.push(captures);
-        } else {
-          error("One extra comma");
-        }
-      }
-    }
-    return result;
-  }
-  function matchColorStop() {
-    const color = matchColor();
-    if (!color) {
-      error("Expected color definition");
-    }
-    color.length = matchDistance();
-    return color;
-  }
-  function matchColor() {
-    return matchHexColor() || matchHSLAColor() || matchHSLColor() || matchRGBAColor() || matchRGBColor() || matchVarColor() || matchLiteralColor();
-  }
-  function matchLiteralColor() {
-    return match("literal", tokens.literalColor, 0);
-  }
-  function matchHexColor() {
-    return match("hex", tokens.hexColor, 1);
-  }
-  function matchRGBColor() {
-    return matchCall(tokens.rgbColor, () => {
-      return {
-        type: "rgb",
-        value: matchListing(matchNumber)
-      };
-    });
-  }
-  function matchRGBAColor() {
-    return matchCall(tokens.rgbaColor, () => {
-      return {
-        type: "rgba",
-        value: matchListing(matchNumber)
-      };
-    });
-  }
-  function matchVarColor() {
-    return matchCall(tokens.varColor, () => {
-      return {
-        type: "var",
-        value: matchVariableName()
-      };
-    });
-  }
-  function matchHSLColor() {
-    return matchCall(tokens.hslColor, () => {
-      const lookahead = scan(tokens.percentageValue);
-      if (lookahead) {
-        error("HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage");
-      }
-      const hue = matchNumber();
-      scan(tokens.comma);
-      let captures = scan(tokens.percentageValue);
-      const sat = captures ? captures[1] : null;
-      scan(tokens.comma);
-      captures = scan(tokens.percentageValue);
-      const light = captures ? captures[1] : null;
-      if (!sat || !light) {
-        error("Expected percentage value for saturation and lightness in HSL");
-      }
-      return {
-        type: "hsl",
-        value: [hue, sat, light]
-      };
-    });
-  }
-  function matchHSLAColor() {
-    return matchCall(tokens.hslaColor, () => {
-      const hue = matchNumber();
-      scan(tokens.comma);
-      let captures = scan(tokens.percentageValue);
-      const sat = captures ? captures[1] : null;
-      scan(tokens.comma);
-      captures = scan(tokens.percentageValue);
-      const light = captures ? captures[1] : null;
-      scan(tokens.comma);
-      const alpha = matchNumber();
-      if (!sat || !light) {
-        error("Expected percentage value for saturation and lightness in HSLA");
-      }
-      return {
-        type: "hsla",
-        value: [hue, sat, light, alpha]
-      };
-    });
-  }
-  function matchVariableName() {
-    return scan(tokens.variableName)[1];
-  }
-  function matchNumber() {
-    return scan(tokens.number)[1];
-  }
-  function matchDistance() {
-    return match("%", tokens.percentageValue, 1) || matchPositionKeyword() || matchCalc() || matchLength();
-  }
-  function matchPositionKeyword() {
-    return match("position-keyword", tokens.positionKeywords, 1);
-  }
-  function matchCalc() {
-    return matchCall(tokens.calcValue, () => {
-      let openParenCount = 1;
-      let i = 0;
-      while (openParenCount > 0 && i < input.length) {
-        const char = input.charAt(i);
-        if (char === "(") {
-          openParenCount++;
-        } else if (char === ")") {
-          openParenCount--;
-        }
-        i++;
-      }
-      if (openParenCount > 0) {
-        error("Missing closing parenthesis in calc() expression");
-      }
-      const calcContent = input.substring(0, i - 1);
-      consume(i - 1);
-      return {
-        type: "calc",
-        value: calcContent
-      };
-    });
-  }
-  function matchLength() {
-    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
-  }
-  function match(type, pattern, captureIndex) {
-    const captures = scan(pattern);
-    if (captures) {
-      return {
-        type,
-        value: captures[captureIndex]
-      };
-    }
-  }
-  function scan(regexp) {
-    let captures, blankCaptures;
-    blankCaptures = /^\s+/.exec(input);
-    if (blankCaptures) {
-      consume(blankCaptures[0].length);
-    }
-    captures = regexp.exec(input);
-    if (captures) {
-      consume(captures[0].length);
-    }
-    return captures;
-  }
-  function consume(size) {
-    input = input.substr(size);
-  }
-  return function(code) {
-    input = code.toString().trim();
-    if (input.endsWith(";")) {
-      input = input.slice(0, -1);
-    }
-    return getAST();
-  };
-}();
-const parseGradient = GradientParser.parse.bind(GradientParser);
-
-class LinearGradient {
-  constructor(x0, y0, x1, y1, stops) {
-    this.x0 = x0;
-    this.y0 = y0;
-    this.x1 = x1;
-    this.y1 = y1;
-    this.stops = stops;
-  }
-  static from(css) {
-    let angleDeg = 0;
-    const stops = [];
-    const ast = parseGradient(css)[0];
-    if (ast.type === "linear-gradient") {
-      switch (ast?.orientation?.type) {
-        case "angular":
-          angleDeg = Number(ast.orientation.value);
-          break;
-      }
-      ast.colorStops.forEach((stop) => {
-        let offset = 0;
-        let color = "rgba(0, 0, 0, 0)";
-        switch (stop.type) {
-          case "rgb":
-            color = `rgb(${stop.value[0]}, ${stop.value[1]}, ${stop.value[2]})`;
-            break;
-          case "rgba":
-            color = `rgba(${stop.value[0]}, ${stop.value[1]}, ${stop.value[2]}, ${stop.value[3]})`;
-            break;
-          case "literal":
-            color = stop.value;
-            break;
-          case "hex":
-            color = stop.value;
-            break;
-        }
-        switch (stop.length?.type) {
-          case "%":
-            offset = Number(stop.length.value) / 100;
-            break;
-        }
-        stops.push({ offset, color });
-      });
-    }
-    const angleRad = (angleDeg + 90) * Math.PI / 180;
-    const width = 1;
-    const height = 1;
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const length = Math.sqrt(width * width + height * height) / 2;
-    const x0 = halfWidth + length * Math.cos(angleRad + Math.PI);
-    const y0 = halfHeight + length * Math.sin(angleRad + Math.PI);
-    const x1 = halfWidth + length * Math.cos(angleRad);
-    const y1 = halfHeight + length * Math.sin(angleRad);
-    return new LinearGradient(x0, y0, x1, y1, stops);
-  }
-  parse(width, height) {
-    return this._parseByCanvas(width, height);
-  }
-  _parseByCanvas(width, height) {
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to parse linear gradient, get canvas context is null.");
-    }
-    const gradient = ctx.createLinearGradient(
-      this.x0 * width,
-      this.y0 * height,
-      this.x1 * width,
-      this.y1 * height
-    );
-    this.stops.forEach((stop) => {
-      gradient.addColorStop(stop.offset, stop.color);
-    });
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    return {
-      width: imageData.width,
-      height: imageData.height,
-      pixels: new Uint8Array(imageData.data.buffer)
-    };
-  }
-}
-
 class Matrix2 extends Matrix {
   constructor(array) {
     super(2, 2, array);
@@ -2309,47 +1847,6 @@ class Projection2D extends Matrix3 {
   }
 }
 
-class RadialGradient {
-  constructor(x0, y0, r0, x1, y1, r1, stops) {
-    this.x0 = x0;
-    this.y0 = y0;
-    this.r0 = r0;
-    this.x1 = x1;
-    this.y1 = y1;
-    this.r1 = r1;
-    this.stops = stops;
-  }
-  parse(width, height) {
-    return this._parseByCanvas(width, height);
-  }
-  _parseByCanvas(width, height) {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to parse radial gradient, get canvas context is null.");
-    }
-    const gradient = ctx.createRadialGradient(
-      this.x0 * width,
-      this.y0 * height,
-      this.r0,
-      this.x1 * width,
-      this.y1 * height,
-      this.r1
-    );
-    this.stops.forEach((stop) => {
-      gradient.addColorStop(stop.offset, stop.color);
-    });
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    return {
-      width: imageData.width,
-      height: imageData.height,
-      pixels: new Uint8Array(imageData.data.buffer)
-    };
-  }
-}
-
 class Vector2 extends Vector {
   get x() {
     return this._array[0];
@@ -5653,14 +5150,41 @@ class ColorTexture extends Texture2D {
 }
 
 class GradientTexture extends Texture2D {
-  // |(radial-gradient)
-  static regExp = /(linear-gradient)/;
   static test(value) {
-    return this.regExp.test(value);
+    return modernIdoc.isGradient(value);
+  }
+  static linearGradient(linearGradient, width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to parse linear gradient, get canvas context is null.");
+    }
+    const { angle, stops } = linearGradient;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const length = Math.sqrt(width * width + height * height) / 2;
+    const x0 = halfWidth + length * Math.cos(angle + Math.PI);
+    const y0 = halfHeight + length * Math.sin(angle + Math.PI);
+    const x1 = halfWidth + length * Math.cos(angle);
+    const y1 = halfHeight + length * Math.sin(angle);
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    stops.forEach((stop) => {
+      gradient.addColorStop(stop.offset, stop.color);
+    });
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    return {
+      width: imageData.width,
+      height: imageData.height,
+      pixels: new Uint8Array(imageData.data.buffer)
+    };
   }
-  constructor(value, width, height) {
+  constructor(gradient, width, height) {
     super(
-      LinearGradient.from(value).parse(width, height)
+      GradientTexture.linearGradient(gradient, width, height)
     );
   }
 }
@@ -7633,21 +7157,18 @@ class CanvasContext extends modernPath2d.Path2D {
   miterLimit;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
-  _colorToTexture(color, width, height) {
-    if (color instanceof Texture2D) {
-      return color;
-    } else if (typeof color === "string" && GradientTexture.test(color)) {
-      return new GradientTexture(color, width, height);
+  _toTexture(source) {
+    if (source instanceof Texture2D) {
+      return source;
     } else {
-      return new ColorTexture(color);
+      return new ColorTexture(source);
     }
   }
   stroke(options) {
     const path = new modernPath2d.Path2D(this);
     let texture = this._defaultStyle;
     if (this.strokeStyle) {
-      const { width, height } = path.getBoundingBox();
-      texture = this._colorToTexture(this.strokeStyle, width, height);
+      texture = this._toTexture(this.strokeStyle);
     }
     if (this.curves.length) {
       this._draws.push({
@@ -7677,8 +7198,7 @@ class CanvasContext extends modernPath2d.Path2D {
     const path = new modernPath2d.Path2D(this);
     let texture = this._defaultStyle;
     if (this.fillStyle) {
-      const { width, height } = path.getBoundingBox();
-      texture = this._colorToTexture(this.fillStyle, width, height);
+      texture = this._toTexture(this.fillStyle);
     }
     this._draws.push({
       ...options,
@@ -9449,93 +8969,98 @@ class BaseElement2DFill extends CoreObject {
     super();
     this.parent = parent;
   }
-  _src;
+  _texture;
+  _setProperties(properties) {
+    return super.setProperties(properties);
+  }
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeFill(properties));
+    return this._setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeFill(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "color":
+      case "cropRect":
+      case "stretchRect":
       case "dpi":
       case "rotateWithShape":
       case "tile":
+      case "opacity":
         this.parent.requestRedraw();
         break;
-      case "src":
-        this._updateSource();
+      case "image":
+      case "linearGradient":
+      case "radialGradient":
+        this._updateTexture();
         break;
     }
   }
-  async loadSource() {
-    if (this.src && this.src !== "none") {
-      return await assets.texture.load(this.src);
+  async loadTexture() {
+    if (this.linearGradient || this.radialGradient) {
+      return new GradientTexture(
+        this.linearGradient ?? this.radialGradient,
+        this.parent.size.width,
+        this.parent.size.height
+      );
+    } else if (!modernIdoc.isNone(this.image)) {
+      return await assets.texture.load(this.image);
+    } else {
+      return void 0;
     }
   }
-  async _updateSource() {
-    this._src = await this.loadSource();
+  async _updateTexture() {
+    this._texture = await this.loadTexture();
     this.parent.requestRedraw();
   }
   canDraw() {
     return Boolean(
-      this._src || this.color
+      this._texture || this.color
     );
   }
+  _getDrawOptions() {
+    let disableWrapMode = false;
+    const { width, height } = this.parent.size;
+    const textureTransform = new Transform2D().scale(1 / width, 1 / height);
+    if (this.cropRect) {
+      const {
+        left = 0,
+        top = 0,
+        right = 0,
+        bottom = 0
+      } = this.cropRect;
+      textureTransform.scale(
+        Math.abs(1 - (left + right)),
+        Math.abs(1 - (top + bottom))
+      ).translate(left, top);
+      disableWrapMode = true;
+    }
+    if (this.tile) {
+      const {
+        translateX = 0,
+        translateY = 0,
+        scaleX = 1,
+        scaleY = 1
+        // flip, TODO
+        // alignment, TODO
+      } = this.tile;
+      textureTransform.translate(-translateX / width, -translateY / height).scale(1 / scaleX, 1 / scaleY);
+      disableWrapMode = true;
+    } else if (this.stretchRect) {
+      const { left = 0, top = 0, right = 0, bottom = 0 } = this.stretchRect;
+      textureTransform.scale(
+        Math.abs(1 - (-left + -right)),
+        Math.abs(1 - (-top + -bottom))
+      ).translate(-left, -top);
+      disableWrapMode = true;
+    }
+    return { disableWrapMode, textureTransform };
+  }
   draw() {
     const ctx = this.parent.context;
-    if (this._src) {
-      const { width: imageWidth, height: imageHeight } = this._src;
-      const { width, height } = this.parent.size;
-      const transform = new Transform2D();
-      let disableWrapMode = false;
-      if (this.srcRect) {
-        const {
-          left = 0,
-          top = 0,
-          right = 0,
-          bottom = 0
-        } = this.srcRect;
-        const w = Math.abs(1 + (left + right)) * width;
-        const h = Math.abs(1 + (top + bottom)) * height;
-        const sx = 1 / w;
-        const sy = 1 / h;
-        const tx = left * width * sx;
-        const ty = top * height * sy;
-        transform.scale(sx, sy).translate(tx, ty);
-      }
-      if (this.tile) {
-        const {
-          translateX = 0,
-          translateY = 0,
-          scaleX = 1,
-          scaleY = 1
-          // flip, TODO
-          // alignment, TODO
-        } = this.tile;
-        transform.scale(1 / imageWidth, 1 / imageHeight).scale(1 / scaleX, 1 / scaleY).translate(-translateX / imageWidth, -translateY / imageHeight);
-        disableWrapMode = true;
-      } else if (this.stretch) {
-        const { left = 0, top = 0, right = 0, bottom = 0 } = this.stretch.rect ?? {};
-        const w = Math.abs(1 + (-left + -right)) * width;
-        const h = Math.abs(1 + (-top + -bottom)) * height;
-        const scaleX = 1 / w;
-        const scaleY = 1 / h;
-        const translateX = -left * width * scaleX;
-        const translateY = -top * height * scaleY;
-        transform.scale(scaleX, scaleY).translate(translateX, translateY);
-        disableWrapMode = true;
-      } else {
-        transform.scale(1 / width, 1 / height);
-      }
-      ctx.textureTransform = transform;
-      ctx.fillStyle = this._src;
-      ctx.fill({
-        disableWrapMode
-      });
-    } else {
-      ctx.fillStyle = this.color;
-      ctx.fill();
-    }
+    const { textureTransform, disableWrapMode } = this._getDrawOptions();
+    ctx.textureTransform = textureTransform;
+    ctx.fillStyle = this._texture ?? this.color;
+    ctx.fill({ disableWrapMode });
   }
 }
 __decorateClass$u([
@@ -9543,7 +9068,19 @@ __decorateClass$u([
 ], BaseElement2DFill.prototype, "color");
 __decorateClass$u([
   property()
-], BaseElement2DFill.prototype, "src");
+], BaseElement2DFill.prototype, "image");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "linearGradient");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "radialGradient");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "cropRect");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "stretchRect");
 __decorateClass$u([
   property()
 ], BaseElement2DFill.prototype, "dpi");
@@ -9553,9 +9090,6 @@ __decorateClass$u([
 __decorateClass$u([
   property()
 ], BaseElement2DFill.prototype, "tile");
-__decorateClass$u([
-  property()
-], BaseElement2DFill.prototype, "stretch");
 __decorateClass$u([
   property()
 ], BaseElement2DFill.prototype, "opacity");
@@ -9571,30 +9105,12 @@ var __decorateClass$t = (decorators, target, key, kind) => {
 };
 class BaseElement2DBackground extends BaseElement2DFill {
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeBackground(properties));
+    return super._setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeBackground(properties));
   }
 }
 __decorateClass$t([
   property()
-], BaseElement2DBackground.prototype, "color");
-__decorateClass$t([
-  property()
-], BaseElement2DBackground.prototype, "src");
-__decorateClass$t([
-  property()
-], BaseElement2DBackground.prototype, "dpi");
-__decorateClass$t([
-  property()
-], BaseElement2DBackground.prototype, "rotateWithShape");
-__decorateClass$t([
-  property()
-], BaseElement2DBackground.prototype, "tile");
-__decorateClass$t([
-  property()
-], BaseElement2DBackground.prototype, "stretch");
-__decorateClass$t([
-  property()
-], BaseElement2DBackground.prototype, "opacity");
+], BaseElement2DBackground.prototype, "fillWithShape");
 
 var __defProp$l = Object.defineProperty;
 var __decorateClass$s = (decorators, target, key, kind) => {
@@ -9607,30 +9123,12 @@ var __decorateClass$s = (decorators, target, key, kind) => {
 };
 class BaseElement2DForeground extends BaseElement2DFill {
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeForeground(properties));
+    return super._setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeForeground(properties));
   }
 }
 __decorateClass$s([
   property()
-], BaseElement2DForeground.prototype, "color");
-__decorateClass$s([
-  property()
-], BaseElement2DForeground.prototype, "src");
-__decorateClass$s([
-  property()
-], BaseElement2DForeground.prototype, "dpi");
-__decorateClass$s([
-  property()
-], BaseElement2DForeground.prototype, "rotateWithShape");
-__decorateClass$s([
-  property()
-], BaseElement2DForeground.prototype, "tile");
-__decorateClass$s([
-  property()
-], BaseElement2DForeground.prototype, "stretch");
-__decorateClass$s([
-  property()
-], BaseElement2DForeground.prototype, "opacity");
+], BaseElement2DForeground.prototype, "fillWithShape");
 
 var __defProp$k = Object.defineProperty;
 var __decorateClass$r = (decorators, target, key, kind) => {
@@ -9641,84 +9139,42 @@ var __decorateClass$r = (decorators, target, key, kind) => {
   if (result) __defProp$k(target, key, result);
   return result;
 };
-class BaseElement2DGeometry extends CoreObject {
-  constructor(parent) {
-    super();
-    this.parent = parent;
-    this._updatePath2DSet();
-  }
-  _path2DSet = new modernPath2d.Path2DSet();
+class BaseElement2DOutline extends BaseElement2DFill {
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeGeometry(properties));
+    return super._setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeOutline(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "svg":
-      case "data":
-      case "viewBox":
-        this._updatePath2DSet();
+      case "width":
+      case "style":
         this.parent.requestRedraw();
         break;
     }
   }
-  _updatePath2DSet() {
-    let viewBox;
-    if (this.svg) {
-      const dom = modernPath2d.svgToDOM(this.svg);
-      this._path2DSet = modernPath2d.svgToPath2DSet(dom);
-      viewBox = this._path2DSet.viewBox ?? this.viewBox;
-    } else {
-      viewBox = this.viewBox;
-      this.data.forEach((path, i) => {
-        const { data, ...style } = path;
-        const path2D = new modernPath2d.Path2D();
-        path2D.style = style;
-        path2D.addData(data);
-        this._path2DSet.paths[i] = path2D;
-      });
-    }
-    const [x, y, w, h] = viewBox;
-    this._path2DSet.paths.forEach((path) => {
-      path.applyTransform(new modernPath2d.Matrix3().translate(-x, -y).scale(1 / w, 1 / h));
-    });
+  canDraw() {
+    return Boolean(
+      this.width || super.canDraw()
+    );
   }
   draw() {
-    if (this._path2DSet.paths.length) {
-      const ctx = this.parent.context;
-      const { width, height } = this.parent.size;
-      this._path2DSet.paths.forEach((path) => {
-        ctx.addPath(path.clone().applyTransform(new modernPath2d.Matrix3().scale(width, height)));
-      });
-    } else {
-      this.drawRect();
-    }
-  }
-  drawRect() {
     const ctx = this.parent.context;
-    const { width, height } = this.parent.size;
-    const { borderRadius } = this.parent.style;
-    if (width && height) {
-      if (borderRadius) {
-        ctx.roundRect(0, 0, width, height, borderRadius);
-      } else {
-        ctx.rect(0, 0, width, height);
-      }
-    }
+    const { textureTransform, disableWrapMode } = this._getDrawOptions();
+    ctx.lineWidth = this.width;
+    ctx.textureTransform = textureTransform;
+    ctx.strokeStyle = this._texture ?? this.color;
+    ctx.stroke({ disableWrapMode });
   }
 }
 __decorateClass$r([
-  property()
-], BaseElement2DGeometry.prototype, "name");
-__decorateClass$r([
-  property()
-], BaseElement2DGeometry.prototype, "svg");
+  property({ default: 0 })
+], BaseElement2DOutline.prototype, "color");
 __decorateClass$r([
-  property({ default: [0, 0, 1, 1] })
-], BaseElement2DGeometry.prototype, "viewBox");
+  property({ default: 0 })
+], BaseElement2DOutline.prototype, "width");
 __decorateClass$r([
-  property({ default: [] })
-], BaseElement2DGeometry.prototype, "data");
+  property({ default: "solid" })
+], BaseElement2DOutline.prototype, "style");
 
 var __defProp$j = Object.defineProperty;
 var __decorateClass$q = (decorators, target, key, kind) => {
@@ -9729,47 +9185,53 @@ var __decorateClass$q = (decorators, target, key, kind) => {
   if (result) __defProp$j(target, key, result);
   return result;
 };
-class BaseElement2DOutline extends CoreObject {
+class BaseElement2DShadow extends CoreObject {
   constructor(parent) {
     super();
     this.parent = parent;
   }
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeOutline(properties));
+    return super.setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeShadow(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "color":
-      case "width":
-      case "style":
-      case "src":
-      case "opacity":
-        this.parent.requestRedraw();
+      case "blur":
+      case "offsetX":
+      case "offsetY":
+        this.updateEffect();
         break;
     }
   }
-  canDraw() {
-    return Boolean(
-      this.width || this.color
-    );
-  }
-  draw() {
-    const ctx = this.parent.context;
-    ctx.lineWidth = this.width;
-    ctx.strokeStyle = this.color;
-    ctx.stroke();
+  updateEffect() {
+    const name = "__$shadow";
+    let effect = this.parent.getNode(name);
+    if (this.blur || this.offsetX || this.offsetY) {
+      if (!effect) {
+        effect = new exports.DropShadowEffect({ name });
+        this.parent.appendChild(effect, "back");
+      }
+      effect.setProperties(this.getProperties());
+    } else {
+      if (effect) {
+        this.parent.removeChild(effect);
+      }
+    }
   }
 }
+__decorateClass$q([
+  property({ default: "#000000" })
+], BaseElement2DShadow.prototype, "color");
 __decorateClass$q([
   property({ default: 0 })
-], BaseElement2DOutline.prototype, "color");
+], BaseElement2DShadow.prototype, "blur");
 __decorateClass$q([
   property({ default: 0 })
-], BaseElement2DOutline.prototype, "width");
+], BaseElement2DShadow.prototype, "offsetY");
 __decorateClass$q([
-  property({ default: "solid" })
-], BaseElement2DOutline.prototype, "style");
+  property({ default: 0 })
+], BaseElement2DShadow.prototype, "offsetX");
 
 var __defProp$i = Object.defineProperty;
 var __decorateClass$p = (decorators, target, key, kind) => {
@@ -9780,53 +9242,84 @@ var __decorateClass$p = (decorators, target, key, kind) => {
   if (result) __defProp$i(target, key, result);
   return result;
 };
-class BaseElement2DShadow extends CoreObject {
+class BaseElement2DShape extends CoreObject {
   constructor(parent) {
     super();
     this.parent = parent;
+    this._updatePath2DSet();
   }
+  _path2DSet = new modernPath2d.Path2DSet();
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeShadow(properties));
+    return super.setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeShape(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "color":
-      case "blur":
-      case "offsetX":
-      case "offsetY":
-        this.updateEffect();
+      case "svg":
+      case "data":
+      case "viewBox":
+        this._updatePath2DSet();
+        this.parent.requestRedraw();
         break;
     }
   }
-  updateEffect() {
-    const name = "__$shadow";
-    let effect = this.parent.getNode(name);
-    if (this.blur || this.offsetX || this.offsetY) {
-      if (!effect) {
-        effect = new exports.DropShadowEffect({ name });
-        this.parent.appendChild(effect, "back");
-      }
-      effect.setProperties(this.getProperties());
+  _updatePath2DSet() {
+    let viewBox;
+    if (this.svg) {
+      const dom = modernPath2d.svgToDOM(this.svg);
+      this._path2DSet = modernPath2d.svgToPath2DSet(dom);
+      viewBox = this._path2DSet.viewBox ?? this.viewBox;
     } else {
-      if (effect) {
-        this.parent.removeChild(effect);
+      viewBox = this.viewBox;
+      this.data?.forEach((path, i) => {
+        const { data, ...style } = path;
+        const path2D = new modernPath2d.Path2D();
+        path2D.style = style;
+        path2D.addData(data);
+        this._path2DSet.paths[i] = path2D;
+      });
+    }
+    const [x, y, w, h] = viewBox;
+    this._path2DSet.paths.forEach((path) => {
+      path.applyTransform(new modernPath2d.Matrix3().translate(-x, -y).scale(1 / w, 1 / h));
+    });
+  }
+  draw() {
+    if (this._path2DSet.paths.length) {
+      const ctx = this.parent.context;
+      const { width, height } = this.parent.size;
+      this._path2DSet.paths.forEach((path) => {
+        ctx.addPath(path.clone().applyTransform(new modernPath2d.Matrix3().scale(width, height)));
+      });
+    } else {
+      this.drawRect();
+    }
+  }
+  drawRect() {
+    const ctx = this.parent.context;
+    const { width, height } = this.parent.size;
+    const { borderRadius } = this.parent.style;
+    if (width && height) {
+      if (borderRadius) {
+        ctx.roundRect(0, 0, width, height, borderRadius);
+      } else {
+        ctx.rect(0, 0, width, height);
       }
     }
   }
 }
 __decorateClass$p([
-  property({ default: "#000000" })
-], BaseElement2DShadow.prototype, "color");
+  property()
+], BaseElement2DShape.prototype, "preset");
 __decorateClass$p([
-  property({ default: 0 })
-], BaseElement2DShadow.prototype, "blur");
+  property()
+], BaseElement2DShape.prototype, "svg");
 __decorateClass$p([
-  property({ default: 0 })
-], BaseElement2DShadow.prototype, "offsetY");
+  property({ default: [0, 0, 1, 1] })
+], BaseElement2DShape.prototype, "viewBox");
 __decorateClass$p([
-  property({ default: 0 })
-], BaseElement2DShadow.prototype, "offsetX");
+  property({ default: [] })
+], BaseElement2DShape.prototype, "data");
 
 class BaseElement2DStyle extends Resource {
   constructor(properties) {
@@ -9866,7 +9359,7 @@ class BaseElement2DText extends CoreObject {
   baseText = new modernText.Text();
   measureResult;
   setProperties(properties) {
-    return super.setProperties(modernIdoc.normalizeText(properties));
+    return super.setProperties(modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeText(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -10053,12 +9546,12 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
   set background(value) {
     this._background.setProperties(value);
   }
-  _geometry = new BaseElement2DGeometry(this);
-  get geometry() {
-    return this._geometry;
+  _shape = new BaseElement2DShape(this);
+  get shape() {
+    return this._shape;
   }
-  set geometry(value) {
-    this._geometry.setProperties(value);
+  set shape(value) {
+    this._shape.setProperties(value);
   }
   _fill = new BaseElement2DFill(this);
   get fill() {
@@ -10106,7 +9599,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       const {
         style,
         text,
-        geometry,
+        shape,
         background,
         fill,
         outline,
@@ -10116,7 +9609,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       } = properties;
       style && this.style.setProperties(style);
       background && this.background.setProperties(background);
-      geometry && this.geometry.setProperties(geometry);
+      shape && this.shape.setProperties(shape);
       fill && this.fill.setProperties(fill);
       outline && this.outline.setProperties(outline);
       text && this.text.setProperties(text);
@@ -10182,7 +9675,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
         this.background.color = this.style.backgroundColor;
         break;
       case "backgroundImage":
-        this.background.src = this.style.backgroundImage;
+        this.background.image = this.style.backgroundImage;
         break;
       case "borderStyle":
       case "outlineStyle":
@@ -10221,7 +9714,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     const offsetX = originX * width;
     const offsetY = originY * height;
     this.transform.identity().translate(-offsetX, -offsetY).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
-    parseCSSTransform(this.style.transform, width, height, this.transform);
+    parseCSSTransform(this.style.transform ?? "", width, height, this.transform);
     this.transform.translate(this.position.x, this.position.y).translate(offsetX, offsetY);
   }
   _updateGlobalTransform() {
@@ -10274,33 +9767,33 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
   }
   _draw() {
     super._draw();
-    if (this.text.canDraw()) {
-      this.text.updateMeasure();
+    if (this._text.canDraw()) {
+      this._text.updateMeasure();
     }
-    if (this.background.canDraw()) {
+    if (this._background.canDraw()) {
       this._tree?.log(this.name, "draw background");
-      this.geometry.drawRect();
-      this.background.draw();
+      this._shape.drawRect();
+      this._background.draw();
     }
-    if (this.fill.canDraw()) {
+    if (this._fill.canDraw()) {
       this._tree?.log(this.name, "draw fill");
-      this.geometry.draw();
-      this.fill.draw();
+      this._shape.draw();
+      this._fill.draw();
     }
-    if (this.outline.canDraw()) {
+    if (this._outline.canDraw()) {
       this._tree?.log(this.name, "draw outline");
-      this.geometry.draw();
-      this.outline.draw();
+      this._shape.draw();
+      this._outline.draw();
     }
-    if (this.foreground.canDraw()) {
+    if (this._foreground.canDraw()) {
       this._tree?.log(this.name, "draw foreground");
-      this.geometry.drawRect();
-      this.foreground.draw();
+      this._shape.drawRect();
+      this._foreground.draw();
     }
-    if (this.text.canDraw()) {
+    if (this._text.canDraw()) {
       this._tree?.log(this.name, "draw text");
-      this.geometry.drawRect();
-      this.text.draw();
+      this._shape.drawRect();
+      this._text.draw();
     }
     this._drawContent();
   }
@@ -10361,7 +9854,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
         ...json.props,
         style: this.style.toJSON(),
         background: this.background.toJSON(),
-        geometry: this.geometry.toJSON(),
+        shape: this.shape.toJSON(),
         fill: this.fill.toJSON(),
         outline: this.outline.toJSON(),
         text: this.text.toJSON(),
@@ -11015,7 +10508,7 @@ exports.Image2D = class Image2D extends exports.Element2D {
       const tx = left * width * sx;
       const ty = top * height * sy;
       this.context.textureTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
-      this.geometry.draw();
+      this.shape.draw();
       this.context.fill();
     }
   }
@@ -11058,7 +10551,7 @@ class TextureRect2D extends exports.Element2D {
         1 / width,
         1 / height
       );
-      this.geometry.drawRect();
+      this.shape.drawRect();
       this.context.fill();
     }
   }
@@ -14597,9 +14090,9 @@ exports.AudioSpectrum = AudioSpectrum;
 exports.BaseElement2DBackground = BaseElement2DBackground;
 exports.BaseElement2DFill = BaseElement2DFill;
 exports.BaseElement2DForeground = BaseElement2DForeground;
-exports.BaseElement2DGeometry = BaseElement2DGeometry;
 exports.BaseElement2DOutline = BaseElement2DOutline;
 exports.BaseElement2DShadow = BaseElement2DShadow;
+exports.BaseElement2DShape = BaseElement2DShape;
 exports.BaseElement2DStyle = BaseElement2DStyle;
 exports.BaseElement2DText = BaseElement2DText;
 exports.CanvasContext = CanvasContext;
@@ -14630,7 +14123,6 @@ exports.IndexBuffer = IndexBuffer;
 exports.Input = Input;
 exports.InputEvent = InputEvent;
 exports.JSONLoader = JSONLoader;
-exports.LinearGradient = LinearGradient;
 exports.Loader = Loader;
 exports.LottieLoader = LottieLoader;
 exports.MainLoop = MainLoop;
@@ -14648,7 +14140,6 @@ exports.Projection2D = Projection2D;
 exports.QuadGeometry = QuadGeometry;
 exports.QuadUvGeometry = QuadUvGeometry;
 exports.RAD_TO_DEG = RAD_TO_DEG;
-exports.RadialGradient = RadialGradient;
 exports.RawWeakMap = RawWeakMap;
 exports.Rect2 = Rect2;
 exports.RefCounted = RefCounted;