@visactor/vchart 2.0.21 → 2.0.22-alpha.0

package/build/index.js

@@ -11450,7 +11450,6 @@
       backgroundScale: 1,
       backgroundOffsetX: 0,
       backgroundOffsetY: 0,
-      backgroundPosition: "top-left",
       blur: 0,
       filter: "",
       cursor: null,
@@ -11623,16 +11622,11 @@
     const DefaultImageAttribute = Object.assign(Object.assign({
       repeatX: "no-repeat",
       repeatY: "no-repeat",
-      imageMode: void 0,
       image: "",
       width: 0,
       height: 0,
       maxWidth: 500,
-      maxHeight: 500,
-      imagePosition: "top-left",
-      imageScale: 1,
-      imageOffsetX: 0,
-      imageOffsetY: 0
+      maxHeight: 500
     }, DefaultAttribute), {
       fill: !0,
       cornerRadius: 0,
@@ -16071,6 +16065,7 @@
     const tempConstantXYKey = ["x", "y"],
       tempConstantScaleXYKey = ["scaleX", "scaleY"],
       tempConstantAngleKey = ["angle"],
+      builtinTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave"]),
       point = new Point();
     const NOWORK_ANIMATE_ATTR = {
       strokeSeg: 1,
@@ -16127,7 +16122,7 @@
       }
       constructor(params = {}) {
         var _a;
-        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), isExternalTexture(params.texture) ? this.loadImage(params.texture, !1) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
       }
       getGraphicService() {
         var _a, _b;
@@ -16316,7 +16311,7 @@
         });
       }
       setAttributes(params, forceUpdateTag = !1, context) {
-        params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
+        params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), isExternalTexture(params.texture) ? this.loadImage(params.texture, !1) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
       }
       _setAttributes(params, forceUpdateTag = !1, context) {
         const keys = Object.keys(params);
@@ -16331,7 +16326,7 @@
         const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
           [key]: value
         }, this.attribute, key, context);
-        params ? this._setAttributes(params, forceUpdateTag, context) : isNil$1(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "shadowGraphic" === key && this.setShadowGraphic(value);
+        params ? this._setAttributes(params, forceUpdateTag, context) : isNil$1(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
       }
       needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
         for (let i = 0; i < k.length; i++) {
@@ -16350,7 +16345,7 @@
         const context = {
           type: AttributeUpdateType.INIT
         };
-        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), isExternalTexture(params.texture) ? this.loadImage(params.texture, !1) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
       }
       translate(x, y) {
         var _a, _b;
@@ -16683,8 +16678,7 @@
         return isString$1(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
       }
       loadImage(image, background = !1) {
-        if (background && (null == image ? void 0 : image.background) && (image = image.background), background && (!image || backgroundNotImage(image))) return void (this.backgroundImg = !1);
-        if (!image) return;
+        if (!image || background && backgroundNotImage(image)) return;
         const url = image;
         this.resources || (this.resources = new Map());
         const cache = {
@@ -16739,7 +16733,10 @@
       }
     }
     function backgroundNotImage(image) {
-      return "string" == typeof image ? !(image.startsWith("<svg") || isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
+      return !(!image.fill && !image.stroke);
+    }
+    function isExternalTexture(texture) {
+      return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || isValidUrl$1(texture) || texture.includes("/") || isBase64$1(texture)) : isObject$2(texture));
     }
     Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget);
 
@@ -18872,7 +18869,7 @@
       return [new Paragraph(text1, paragraph.newLine, paragraph.character, paragraph.ascentDescentMode), new Paragraph(text2, !0, paragraph.character, paragraph.ascentDescentMode)];
     }
 
-    const IMAGE_UPDATE_TAG_KEY = ["width", "height", "image", "imageMode", "imagePosition", "imageScale", "imageOffsetX", "imageOffsetY", ...GRAPHIC_UPDATE_TAG_KEY];
+    const IMAGE_UPDATE_TAG_KEY = ["width", "height", "image", ...GRAPHIC_UPDATE_TAG_KEY];
     class Image extends Graphic {
       constructor(params) {
         super(params), this.type = "image", this.numberType = IMAGE_NUMBER_TYPE, this.loadImage(this.attribute.image);
@@ -18977,7 +18974,6 @@
     }
     Image.NOWORK_ANIMATE_ATTR = Object.assign({
       image: 1,
-      imageMode: 1,
       repeatX: 1,
       repeatY: 1
     }, NOWORK_ANIMATE_ATTR);
@@ -20171,12 +20167,11 @@
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
           backgroundOffsetY = graphicAttribute.backgroundOffsetY,
-          backgroundClip = graphicAttribute.backgroundClip,
-          backgroundPosition = graphicAttribute.backgroundPosition
+          backgroundClip = graphicAttribute.backgroundClip
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
-          const res = graphic.resources.get(getBackgroundImage(background));
-          if (!res || "success" !== res.state || !res.data) return;
+          const res = graphic.resources.get(background);
+          if ("success" !== res.state || !res.data) return;
           if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
             const groupAttribute = getTheme$1(graphic.parent).group,
               {
@@ -20193,160 +20188,59 @@
             backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY,
-            backgroundPosition: backgroundPosition
+            backgroundOffsetY: backgroundOffsetY
           }), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
       doDrawImage(context, data, b, params) {
-        drawBackgroundImage(context, data, b, params);
-      }
-    }
-    const defaultBaseBackgroundRenderContribution = new DefaultBaseBackgroundRenderContribution();
-    const verticalPositionKeywords = new Set(["top", "center", "bottom"]);
-    function getBackgroundImage(background) {
-      var _a;
-      return null !== (_a = null == background ? void 0 : background.background) && void 0 !== _a ? _a : background;
-    }
-    function resolveBackgroundSizing({
-      backgroundFit: backgroundFit,
-      backgroundKeepAspectRatio: backgroundKeepAspectRatio
-    }) {
-      return backgroundFit ? backgroundKeepAspectRatio ? "cover" : "fill" : "auto";
-    }
-    const NO_REPEAT_SIZING_MAP = {
-      "no-repeat-cover": "cover",
-      "no-repeat-contain": "contain",
-      "no-repeat-fill": "fill",
-      "no-repeat-auto": "auto"
-    };
-    function resolveBackgroundDrawMode({
-      backgroundMode: backgroundMode,
-      backgroundFit: backgroundFit,
-      backgroundKeepAspectRatio: backgroundKeepAspectRatio
-    }) {
-      const sizing = NO_REPEAT_SIZING_MAP[backgroundMode];
-      return sizing ? {
-        backgroundRepeatMode: "no-repeat",
-        backgroundSizing: sizing
-      } : {
-        backgroundRepeatMode: backgroundMode,
-        backgroundSizing: resolveBackgroundSizing({
-          backgroundFit: backgroundFit,
-          backgroundKeepAspectRatio: backgroundKeepAspectRatio
-        })
-      };
-    }
-    function isPercentageValue(value) {
-      return /^-?\d+(\.\d+)?%$/.test(value);
-    }
-    function parsePositionToken(value, remainSpace, startKeyword, centerKeyword, endKeyword) {
-      if ("number" == typeof value && Number.isFinite(value)) return value;
-      const normalizedValue = `${null != value ? value : ""}`.trim().toLowerCase();
-      if (!normalizedValue || normalizedValue === startKeyword) return 0;
-      if (normalizedValue === centerKeyword) return remainSpace / 2;
-      if (normalizedValue === endKeyword) return remainSpace;
-      if (isPercentageValue(normalizedValue)) return remainSpace * parseFloat(normalizedValue) / 100;
-      const parsedValue = Number(normalizedValue);
-      return Number.isFinite(parsedValue) ? parsedValue : 0;
-    }
-    function normalizeBackgroundPosition(position) {
-      var _a, _b;
-      if (Array.isArray(position)) return [null !== (_a = position[0]) && void 0 !== _a ? _a : "left", null !== (_b = position[1]) && void 0 !== _b ? _b : "top"];
-      const tokens = `${null != position ? position : "top-left"}`.trim().toLowerCase().replace(/-/g, " ").split(/\s+/).filter(Boolean);
-      if (0 === tokens.length) return ["left", "top"];
-      if (1 === tokens.length) {
-        const token = tokens[0];
-        return "center" === token ? ["center", "center"] : verticalPositionKeywords.has(token) ? ["center", token] : [token, "center"];
-      }
-      let horizontal, vertical;
-      const genericTokens = [];
-      for (let i = 0; i < 2; i++) {
-        const token = tokens[i];
-        "left" !== token && "right" !== token ? "top" !== token && "bottom" !== token ? genericTokens.push(token) : vertical = token : horizontal = token;
-      }
-      return null == horizontal && genericTokens.length && (horizontal = genericTokens.shift()), null == vertical && genericTokens.length && (vertical = genericTokens.shift()), [null != horizontal ? horizontal : "left", null != vertical ? vertical : "top"];
-    }
-    function resolveBackgroundPosition(position, remainWidth, remainHeight) {
-      const [horizontalPosition, verticalPosition] = normalizeBackgroundPosition(position);
-      return {
-        x: parsePositionToken(horizontalPosition, remainWidth, "left", "center", "right"),
-        y: parsePositionToken(verticalPosition, remainHeight, "top", "center", "bottom")
-      };
-    }
-    function pickRenderableDimension(...values) {
-      for (const value of values) if ("number" == typeof value && Number.isFinite(value) && value > 0) return value;
-      return null;
-    }
-    function resolveRenderableImageSize(data) {
-      if (!data) return null;
-      const width = pickRenderableDimension(data.naturalWidth, data.videoWidth, data.width),
-        height = pickRenderableDimension(data.naturalHeight, data.videoHeight, data.height);
-      return null == width || null == height ? null : {
-        width: width,
-        height: height
-      };
-    }
-    function drawBackgroundImage(context, data, b, params) {
-      var _a, _b;
-      const {
-          backgroundMode: backgroundMode,
-          backgroundFit: backgroundFit,
-          backgroundKeepAspectRatio: backgroundKeepAspectRatio,
-          backgroundScale = 1,
-          backgroundOffsetX = 0,
-          backgroundOffsetY = 0,
-          backgroundPosition = "top-left"
-        } = params,
-        targetW = b.width(),
-        targetH = b.height(),
-        sourceSize = resolveRenderableImageSize(data),
-        {
-          backgroundRepeatMode: backgroundRepeatMode,
-          backgroundSizing: resolvedBackgroundSizing
-        } = resolveBackgroundDrawMode({
-          backgroundMode: backgroundMode,
-          backgroundFit: backgroundFit,
-          backgroundKeepAspectRatio: backgroundKeepAspectRatio
-        });
-      let w = targetW,
-        h = targetH;
-      if (targetW <= 0 || targetH <= 0) return;
-      if ("no-repeat" === backgroundRepeatMode) {
-        let drawWidth = null !== (_a = null == sourceSize ? void 0 : sourceSize.width) && void 0 !== _a ? _a : targetW,
-          drawHeight = null !== (_b = null == sourceSize ? void 0 : sourceSize.height) && void 0 !== _b ? _b : targetH;
-        if ("cover" !== resolvedBackgroundSizing && "contain" !== resolvedBackgroundSizing || !sourceSize) "fill" === resolvedBackgroundSizing && (drawWidth = targetW, drawHeight = targetH);else {
-          const scale = "cover" === resolvedBackgroundSizing ? Math.max(targetW / sourceSize.width, targetH / sourceSize.height) : Math.min(targetW / sourceSize.width, targetH / sourceSize.height);
-          drawWidth = sourceSize.width * scale, drawHeight = sourceSize.height * scale;
-        }
-        drawWidth *= backgroundScale, drawHeight *= backgroundScale;
         const {
-          x: x,
-          y: y
-        } = resolveBackgroundPosition(backgroundPosition, targetW - drawWidth, targetH - drawHeight);
-        return void context.drawImage(data, b.x1 + x + backgroundOffsetX, b.y1 + y + backgroundOffsetY, drawWidth, drawHeight);
-      }
-      if (backgroundFit && "repeat" !== backgroundRepeatMode && sourceSize) {
-        const resW = sourceSize.width,
-          resH = sourceSize.height;
-        if ("repeat-x" === backgroundRepeatMode) {
-          w = resW * (targetH / resH), h = targetH;
-        } else if ("repeat-y" === backgroundRepeatMode) {
-          h = resH * (targetW / resW), w = targetW;
-        }
-        const dpr = context.dpr,
-          canvas = canvasAllocate.allocate({
-            width: w,
-            height: h,
-            dpr: dpr
-          }),
-          ctx = canvas.getContext("2d");
-        ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
+            backgroundMode: backgroundMode,
+            backgroundFit: backgroundFit,
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
+            backgroundScale = 1,
+            backgroundOffsetX = 0,
+            backgroundOffsetY = 0
+          } = params,
+          targetW = b.width(),
+          targetH = b.height();
+        let w = targetW,
+          h = targetH;
+        if ("no-repeat" === backgroundMode) {
+          if (backgroundFit) {
+            if (backgroundKeepAspectRatio) {
+              const maxScale = Math.max(targetW / data.width, targetH / data.height);
+              context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, data.width * maxScale * backgroundScale, data.height * maxScale * backgroundScale);
+            } else context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+          } else {
+            const resW = data.width * backgroundScale,
+              resH = data.height * backgroundScale;
+            context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, resW, resH);
+          }
+        } else {
+          if (backgroundFit && "repeat" !== backgroundMode && (data.width || data.height)) {
+            const resW = data.width,
+              resH = data.height;
+            if ("repeat-x" === backgroundMode) {
+              w = resW * (targetH / resH), h = targetH;
+            } else if ("repeat-y" === backgroundMode) {
+              h = resH * (targetW / resW), w = targetW;
+            }
+            const dpr = context.dpr,
+              canvas = canvasAllocate.allocate({
+                width: w,
+                height: h,
+                dpr: dpr
+              }),
+              ctx = canvas.getContext("2d");
+            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
+          }
+          const dpr = context.dpr,
+            pattern = context.createPattern(data, backgroundMode);
+          pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
+        }
       }
-      const dpr = context.dpr,
-        pattern = context.createPattern(data, backgroundRepeatMode);
-      pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
     }
+    const defaultBaseBackgroundRenderContribution = new DefaultBaseBackgroundRenderContribution();
     let DefaultBaseInteractiveRenderContribution = class {
       constructor(subRenderContribitions) {
         this.subRenderContribitions = subRenderContribitions, this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -20510,33 +20404,37 @@
           textureRatio = graphicAttribute.textureRatio,
           textureOptions = null
         } = graphic.attribute;
-        let pattern = this.textureMap.get(texture);
-        if (!pattern) switch (texture) {
-          case "circle":
-            pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "diamond":
-            pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "rect":
-            pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "vertical-line":
-            pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "horizontal-line":
-            pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-lr":
-            pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-rl":
-            pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "grid":
-            pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
+        let pattern = null;
+        const patternKey = this.getPatternCacheKey(texture, textureSize, texturePadding, textureColor, context.dpr);
+        if (null !== patternKey && (pattern = this.textureMap.get(patternKey)), !pattern) {
+          if ("string" == typeof texture) switch (texture) {
+            case "circle":
+              pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "diamond":
+              pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "rect":
+              pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "vertical-line":
+              pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "horizontal-line":
+              pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "bias-lr":
+              pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "bias-rl":
+              pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "grid":
+              pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
+          }
+          pattern || (pattern = this.createResourcePattern(texture, graphic, context)), pattern && null !== patternKey && this.textureMap.set(patternKey, pattern);
         }
-        if (textureOptions && textureOptions.dynamicTexture) {
+        if ("string" == typeof texture && textureOptions && textureOptions.dynamicTexture) {
           const {
               gridConfig = {},
               useNewCanvas: useNewCanvas
@@ -20592,6 +20490,17 @@
           }), x + b.x1 - x, y + b.y1 - y), context.restore();
         }
       }
+      getPatternCacheKey(texture, textureSize, texturePadding, textureColor, dpr) {
+        return "string" != typeof texture ? texture : "wave" === texture ? null : `${texture}-${textureSize}-${texturePadding}-${textureColor}-${dpr}`;
+      }
+      createResourcePattern(texture, graphic, context) {
+        var _a;
+        const resource = null === (_a = graphic.resources) || void 0 === _a ? void 0 : _a.get(texture),
+          data = "success" === (null == resource ? void 0 : resource.state) ? resource.data : "object" == typeof texture ? texture : null;
+        if (!data) return null;
+        const pattern = context.createPattern(data, "repeat");
+        return (null == pattern ? void 0 : pattern.setTransform) && pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, 0, 0])), pattern;
+      }
     }
     const defaultBaseTextureRenderContribution = new DefaultBaseTextureRenderContribution();
 
@@ -20703,32 +20612,27 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         const {
           background: background,
-          backgroundOpacity = graphicAttribute.backgroundOpacity,
-          opacity = graphicAttribute.opacity,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit,
           backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
-          backgroundOffsetY = graphicAttribute.backgroundOffsetY,
-          backgroundClip = graphicAttribute.backgroundClip,
-          backgroundPosition = graphicAttribute.backgroundPosition
+          backgroundOffsetY = graphicAttribute.backgroundOffsetY
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
-          const res = graphic.resources.get(getBackgroundImage(background));
-          if (!res || "success" !== res.state || !res.data) return;
+          const res = graphic.resources.get(background);
+          if ("success" !== res.state || !res.data) return;
           context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
           const b = graphic.AABBBounds;
-          context.globalAlpha = backgroundOpacity * opacity, backgroundClip && context.clip(), this.doDrawImage(context, res.data, b, {
+          this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
             backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY,
-            backgroundPosition: backgroundPosition
+            backgroundOffsetY: backgroundOffsetY
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, context.fill(), context.highPerformanceRestore();
+        } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }
     const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
@@ -22210,17 +22114,9 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
-          backgroundOpacity = graphicAttribute.backgroundOpacity,
-          opacity = graphicAttribute.opacity,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit,
-          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
-          backgroundScale = graphicAttribute.backgroundScale,
-          backgroundOffsetX = graphicAttribute.backgroundOffsetX,
-          backgroundOffsetY = graphicAttribute.backgroundOffsetY,
-          backgroundPosition = graphicAttribute.backgroundPosition,
-          backgroundClip = graphicAttribute.backgroundClip,
-          backgroundCornerRadius = graphicAttribute.backgroundCornerRadius
+          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio
         } = graphic.attribute;
         let matrix,
           {
@@ -22232,18 +22128,18 @@
         };
         let b;
         "richtext" === graphic.type && (matrix = context.currentMatrix.clone(), context.restore(), context.save(), context.setTransformForCurrent());
-        const backgroundConfig = isObject$2(background) && background.background ? background : null,
+        const shouldReCalBounds = isObject$2(background) && background.background,
           onlyTranslate = graphic.transMatrix.onlyTranslate();
-        if (backgroundConfig) {
+        if (shouldReCalBounds) {
           const _b = graphic.AABBBounds,
-            x = (null !== (_a = backgroundConfig.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = backgroundConfig.dx) && void 0 !== _c ? _c : 0),
-            y = (null !== (_d = backgroundConfig.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = backgroundConfig.dy) && void 0 !== _e ? _e : 0),
-            w = null !== (_f = backgroundConfig.width) && void 0 !== _f ? _f : _b.width(),
-            h = null !== (_g = backgroundConfig.height) && void 0 !== _g ? _g : _b.height();
-          if (b = boundsAllocate.allocate(x, y, x + w, y + h), background = backgroundConfig.background, !onlyTranslate) {
+            x = (null !== (_a = background.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = background.dx) && void 0 !== _c ? _c : 0),
+            y = (null !== (_d = background.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = background.dy) && void 0 !== _e ? _e : 0),
+            w = null !== (_f = background.width) && void 0 !== _f ? _f : _b.width(),
+            h = null !== (_g = background.height) && void 0 !== _g ? _g : _b.height();
+          if (b = boundsAllocate.allocate(x, y, x + w, y + h), background = background.background, !onlyTranslate) {
             const w = b.width(),
               h = b.height();
-            b.set((null !== (_h = backgroundConfig.x) && void 0 !== _h ? _h : 0) + (null !== (_j = backgroundConfig.dx) && void 0 !== _j ? _j : 0), (null !== (_k = backgroundConfig.y) && void 0 !== _k ? _k : 0) + (null !== (_l = backgroundConfig.dy) && void 0 !== _l ? _l : 0), w, h);
+            b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), w, h);
           }
         } else b = graphic.AABBBounds, onlyTranslate || (b = getTextBounds(Object.assign(Object.assign({}, graphic.attribute), {
           angle: 0,
@@ -22256,18 +22152,20 @@
         })).clone());
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
-          if (!res || "success" !== res.state || !res.data) return void restore();
-          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.globalAlpha = backgroundOpacity * opacity, backgroundClip && (context.beginPath(), backgroundCornerRadius ? createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0) : context.rect(b.x1, b.y1, b.width(), b.height()), context.clip()), this.doDrawImage(context, res.data, b, {
+          if ("success" !== res.state || !res.data) return void restore();
+          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
-            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
-            backgroundScale: backgroundScale,
-            backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY,
-            backgroundPosition: backgroundPosition
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
-        backgroundConfig && boundsAllocate.free(b), restore();
+        } else {
+          const {
+            backgroundCornerRadius: backgroundCornerRadius,
+            backgroundOpacity = 1
+          } = graphic.attribute;
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        }
+        shouldReCalBounds && boundsAllocate.free(b), restore();
       }
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
@@ -22694,92 +22592,6 @@
         };
       };
     const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
-    function resolveImageMode({
-      repeatX = "no-repeat",
-      repeatY = "no-repeat",
-      imageMode: imageMode
-    }) {
-      const repeatMode = resolveImageRepeatMode(repeatX, repeatY);
-      return {
-        repeatMode: repeatMode,
-        sizingMode: "no-repeat" === repeatMode && null != imageMode ? imageMode : "fill"
-      };
-    }
-    const IMAGE_MODE_TO_BACKGROUND_MODE = {
-      cover: "no-repeat-cover",
-      contain: "no-repeat-contain",
-      fill: "no-repeat-fill",
-      auto: "no-repeat-auto"
-    };
-    function resolveBackgroundParamsByImageSizing(sizingMode) {
-      return {
-        backgroundMode: IMAGE_MODE_TO_BACKGROUND_MODE[sizingMode],
-        backgroundFit: !1,
-        backgroundKeepAspectRatio: !1
-      };
-    }
-    function resolveImageRepeatMode(repeatX, repeatY) {
-      let repeat = 0;
-      return "repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat ? repeatStr[repeat] : "no-repeat";
-    }
-    function shouldClipImageByLayout({
-      repeatX = "no-repeat",
-      repeatY = "no-repeat",
-      imageMode: imageMode,
-      imageScale = 1,
-      imageOffsetX = 0,
-      imageOffsetY = 0,
-      imagePosition = "top-left"
-    }) {
-      const {
-        repeatMode: repeatMode,
-        sizingMode: sizingMode
-      } = resolveImageMode({
-        repeatX: repeatX,
-        repeatY: repeatY,
-        imageMode: imageMode
-      });
-      return "no-repeat" === repeatMode && ("cover" === sizingMode || "auto" === sizingMode || 1 !== imageScale || 0 !== imageOffsetX || 0 !== imageOffsetY);
-    }
-    function drawImageWithLayout(context, data, x, y, width, height, {
-      repeatX = "no-repeat",
-      repeatY = "no-repeat",
-      imageMode: imageMode,
-      imageScale = 1,
-      imageOffsetX = 0,
-      imageOffsetY = 0,
-      imagePosition = "top-left"
-    }) {
-      const {
-          repeatMode: repeatMode,
-          sizingMode: sizingMode
-        } = resolveImageMode({
-          repeatX: repeatX,
-          repeatY: repeatY,
-          imageMode: imageMode
-        }),
-        imageBackgroundParams = "no-repeat" === repeatMode ? resolveBackgroundParamsByImageSizing(sizingMode) : {
-          backgroundMode: repeatMode,
-          backgroundFit: !1,
-          backgroundKeepAspectRatio: !1
-        };
-      drawBackgroundImage(context, data, {
-        x1: x,
-        y1: y,
-        x2: x + width,
-        y2: y + height,
-        width: () => width,
-        height: () => height
-      }, {
-        backgroundMode: imageBackgroundParams.backgroundMode,
-        backgroundFit: imageBackgroundParams.backgroundFit,
-        backgroundKeepAspectRatio: imageBackgroundParams.backgroundKeepAspectRatio,
-        backgroundScale: imageScale,
-        backgroundOffsetX: imageOffsetX,
-        backgroundOffsetY: imageOffsetY,
-        backgroundPosition: imagePosition
-      });
-    }
     let DefaultCanvasImageRender = class extends BaseRender {
       constructor(graphicRenderContributions) {
         super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(graphicRenderContributions);
@@ -22794,11 +22606,6 @@
             cornerRadius = imageAttribute.cornerRadius,
             fillStrokeOrder = imageAttribute.fillStrokeOrder,
             cornerType = imageAttribute.cornerType,
-            imageMode = imageAttribute.imageMode,
-            imageScale = imageAttribute.imageScale,
-            imageOffsetX = imageAttribute.imageOffsetX,
-            imageOffsetY = imageAttribute.imageOffsetY,
-            imagePosition = imageAttribute.imagePosition,
             image: url
           } = image.attribute,
           data = this.valid(image, imageAttribute, fillCb);
@@ -22815,33 +22622,22 @@
         const width = image.width,
           height = image.height;
         context.beginPath();
-        let needCornerClip = !1;
-        0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? context.rect(x, y, width, height) : (createRectPath(context, x, y, width, height, cornerRadius, "bevel" !== cornerType), needCornerClip = !0), context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);
+        let needRestore = !1;
+        0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? context.rect(x, y, width, height) : (createRectPath(context, x, y, width, height, cornerRadius, "bevel" !== cornerType), needRestore = !0), context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);
         const _runFill = () => {
-            doFill && (fillCb ? fillCb(context, image.attribute, imageAttribute) : fVisible && (context.setCommonStyle(image, image.attribute, x, y, imageAttribute), drawImageWithLayout(context, res.data, x, y, width, height, {
-              repeatX: repeatX,
-              repeatY: repeatY,
-              imageMode: imageMode,
-              imageScale: imageScale,
-              imageOffsetX: imageOffsetX,
-              imageOffsetY: imageOffsetY,
-              imagePosition: imagePosition
-            })));
+            if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
+              context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+              let repeat = 0;
+              if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
+                const pattern = context.createPattern(res.data, repeatStr[repeat]);
+                context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
+              } else context.drawImage(res.data, x, y, width, height);
+            }
           },
           _runStroke = () => {
             doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
-          },
-          needLayoutClip = shouldClipImageByLayout({
-            repeatX: repeatX,
-            repeatY: repeatY,
-            imageMode: imageMode,
-            imageScale: imageScale,
-            imageOffsetX: imageOffsetX,
-            imageOffsetY: imageOffsetY,
-            imagePosition: imagePosition
-          }),
-          needClip = needCornerClip || needLayoutClip;
-        fillStrokeOrder ? (_runStroke(), needClip && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needClip && context.restore()) : (needClip && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needClip && context.restore(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+          };
+        fillStrokeOrder ? (_runStroke(), needRestore && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needRestore && context.restore()) : (needRestore && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needRestore && context.restore(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
       }
       draw(image, renderService, drawContext) {
         const {
@@ -23700,7 +23496,7 @@
         return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c;
         const {
             clear: clear,
             viewBox: viewBox
@@ -23710,20 +23506,9 @@
         if (clear) {
           context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearRect.call(renderService.drawParams);
           const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
-          if (stage && (context.globalAlpha = (null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1) * (null !== (_d = stage.attribute.backgroundOpacity) && void 0 !== _d ? _d : 1)), stage && stage.backgroundImg && stage.resources) {
-            const res = stage.resources.get(getBackgroundImage(clear));
-            if (res && "success" === res.state && res.data) {
-              const backgroundBounds = boundsAllocate.allocate(0, 0, 0 + width, 0 + height);
-              drawBackgroundImage(context, res.data, backgroundBounds, {
-                backgroundMode: null !== (_e = stage.attribute.backgroundMode) && void 0 !== _e ? _e : DefaultAttribute.backgroundMode,
-                backgroundFit: null !== (_f = stage.attribute.backgroundFit) && void 0 !== _f ? _f : DefaultAttribute.backgroundFit,
-                backgroundKeepAspectRatio: null !== (_g = stage.attribute.backgroundKeepAspectRatio) && void 0 !== _g ? _g : DefaultAttribute.backgroundKeepAspectRatio,
-                backgroundScale: null !== (_h = stage.attribute.backgroundScale) && void 0 !== _h ? _h : DefaultAttribute.backgroundScale,
-                backgroundOffsetX: null !== (_j = stage.attribute.backgroundOffsetX) && void 0 !== _j ? _j : DefaultAttribute.backgroundOffsetX,
-                backgroundOffsetY: null !== (_k = stage.attribute.backgroundOffsetY) && void 0 !== _k ? _k : DefaultAttribute.backgroundOffsetY,
-                backgroundPosition: null !== (_l = stage.attribute.backgroundPosition) && void 0 !== _l ? _l : DefaultAttribute.backgroundPosition
-              }), boundsAllocate.free(backgroundBounds);
-            }
+          if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
+            const res = stage.resources.get(clear);
+            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
               x1: 0,
@@ -24221,7 +24006,7 @@
         return null !== (_a = this._background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND;
       }
       set background(b) {
-        this._background = b, this.syncBackgroundImage(b);
+        this._background = b;
       }
       get defaultLayer() {
         return this.at(0);
@@ -24235,18 +24020,6 @@
       set ticker(ticker) {
         ticker.bindStage(this), this._ticker && this._ticker.removeListener("tick", this.afterTickCb), ticker.addTimeline(this.timeline), this._ticker = ticker, this._ticker.on("tick", this.afterTickCb);
       }
-      syncBackgroundImage(background) {
-        var _a;
-        const source = null !== (_a = null == background ? void 0 : background.background) && void 0 !== _a ? _a : background;
-        this.backgroundImg = !1, this.isImageBackgroundSource(source) && this.loadImage(source, !0);
-      }
-      isImageBackgroundSource(source) {
-        if (!source) return !1;
-        if ("string" == typeof source) return source.startsWith("<svg") || isValidUrl$1(source) || source.includes("/") || isBase64$1(source);
-        if (!isObject$2(source)) return !1;
-        const gradientSource = source;
-        return "string" != typeof gradientSource.gradient || !Array.isArray(gradientSource.stops);
-      }
       constructor(params = {}) {
         var _a, _b;
         super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
@@ -24285,7 +24058,9 @@
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), params.beforeRender && this._beforeRenderList.push(params.beforeRender), params.afterRender && this._afterRenderList.push(params.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
-        }), this.optmize(params.optimize), params.background && this.syncBackgroundImage(this._background), this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());
+        }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
+          background: this._background
+        }), this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());
       }
       initAnimate(params) {
         var _a;
@@ -35443,7 +35218,6 @@
       if (custom.prototype.constructor === custom) {
         const descriptor = Object.getOwnPropertyDescriptor(custom, "prototype");
         if (descriptor && !descriptor.writable) return 1;
-        if (Object.getOwnPropertyNames(custom.prototype).length > 1) return 1;
       }
       return 2;
     }