modern-canvas 0.4.34 → 0.4.35

package/dist/index.cjs

@@ -1112,6 +1112,24 @@ class Color {
   constructor(value = 0) {
     this.value = value;
   }
+  toHex() {
+    return this._colord.toHex();
+  }
+  toRgb() {
+    return this._colord.toRgb();
+  }
+  toRgbString() {
+    return this._colord.toRgbString();
+  }
+  toHsl() {
+    return this._colord.toHsl();
+  }
+  toHslString() {
+    return this._colord.toHslString();
+  }
+  toHsv() {
+    return this._colord.toHsv();
+  }
   toArgb(alpha = this.a, applyToRGB = true) {
     if (alpha === 1) {
       return (255 << 24) + this.rgb;
@@ -1129,9 +1147,6 @@ class Color {
     }
     return (alpha * 255 << 24) + (r << 16) + (g << 8) + b;
   }
-  toHex() {
-    return this._colord.toHex();
-  }
   toArray() {
     return [this.r, this.g, this.b, this.a];
   }
@@ -1728,6 +1743,468 @@ 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);
@@ -1832,6 +2309,47 @@ 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];
@@ -5136,6 +5654,19 @@ class ColorTexture extends Texture2D {
   }
 }
 
+class GradientTexture extends Texture2D {
+  // |(radial-gradient)
+  static regExp = /(linear-gradient)/;
+  static test(value) {
+    return this.regExp.test(value);
+  }
+  constructor(value, width, height) {
+    super(
+      LinearGradient.from(value).parse(width, height)
+    );
+  }
+}
+
 function resolveOptions$1(options) {
   return {
     autoLoad: Boolean(options?.autoLoad ?? true),
@@ -5578,6 +6109,21 @@ exports.Node = class Node extends CoreObject {
     }).append(nodes);
     this.on("treeEnter", this._onTreeEnter).on("treeExit", this._onTreeExit).on("parented", this._onParented).on("unparented", this._onUnparented).on("ready", this._onReady).on("process", this._onProcess);
   }
+  setProperties(properties) {
+    if (properties) {
+      const {
+        meta,
+        ...restProperties
+      } = properties;
+      if (meta) {
+        for (const key in meta) {
+          this.setMeta(key, meta[key]);
+        }
+      }
+      super.setProperties(restProperties);
+    }
+    return this;
+  }
   /** Name */
   getName() {
     return this.name;
@@ -7072,20 +7618,27 @@ 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);
+    } else {
+      return new ColorTexture(color);
+    }
+  }
   stroke(options) {
+    const path = new modernPath2d.Path2D(this);
     let texture = this._defaultStyle;
     if (this.strokeStyle) {
-      if (this.strokeStyle instanceof Texture2D) {
-        texture = this.strokeStyle;
-      } else {
-        texture = new ColorTexture(this.strokeStyle);
-      }
+      const { width, height } = path.getBoundingBox();
+      texture = this._colorToTexture(this.strokeStyle, width, height);
     }
     if (this.curves.length) {
       this._draws.push({
         ...options,
         type: "stroke",
-        path: new modernPath2d.Path2D(this),
+        path,
         texture,
         textureTransform: this.textureTransform,
         style: {
@@ -7106,18 +7659,16 @@ class CanvasContext extends modernPath2d.Path2D {
     this.rect(x, y, width, height).stroke();
   }
   fill(options) {
+    const path = new modernPath2d.Path2D(this);
     let texture = this._defaultStyle;
     if (this.fillStyle) {
-      if (this.fillStyle instanceof Texture2D) {
-        texture = this.fillStyle;
-      } else {
-        texture = new ColorTexture(this.fillStyle);
-      }
+      const { width, height } = path.getBoundingBox();
+      texture = this._colorToTexture(this.fillStyle, width, height);
     }
     this._draws.push({
       ...options,
       type: "fill",
-      path: new modernPath2d.Path2D(this),
+      path,
       texture,
       textureTransform: this.textureTransform
     });
@@ -14056,6 +14607,7 @@ exports.FlexLayout = FlexLayout;
 exports.FontLoader = FontLoader;
 exports.GIFLoader = GIFLoader;
 exports.Geometry = Geometry;
+exports.GradientTexture = GradientTexture;
 exports.HTMLAudio = HTMLAudio;
 exports.HTMLAudioContext = HTMLAudioContext;
 exports.HTMLSound = HTMLSound;
@@ -14065,6 +14617,7 @@ exports.IndexBuffer = IndexBuffer;
 exports.Input = Input;
 exports.InputEvent = InputEvent;
 exports.JSONLoader = JSONLoader;
+exports.LinearGradient = LinearGradient;
 exports.Loader = Loader;
 exports.LottieLoader = LottieLoader;
 exports.MainLoop = MainLoop;
@@ -14082,6 +14635,7 @@ 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;