@visactor/vtable-gantt 1.22.13-alpha.10 → 1.22.13-alpha.11

package/dist/vtable-gantt.js

@@ -4633,6 +4633,7 @@
       backgroundScale: 1,
       backgroundOffsetX: 0,
       backgroundOffsetY: 0,
+      backgroundPosition: "top-left",
       blur: 0,
       filter: "",
       cursor: null,
@@ -4805,11 +4806,16 @@
     const DefaultImageAttribute = Object.assign(Object.assign({
       repeatX: "no-repeat",
       repeatY: "no-repeat",
+      imageMode: void 0,
       image: "",
       width: 0,
       height: 0,
       maxWidth: 500,
-      maxHeight: 500
+      maxHeight: 500,
+      imagePosition: "top-left",
+      imageScale: 1,
+      imageOffsetX: 0,
+      imageOffsetY: 0
     }, DefaultAttribute), {
       fill: !0,
       cornerRadius: 0,
@@ -9210,6 +9216,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,
@@ -9266,7 +9273,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;
@@ -9455,7 +9462,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);
@@ -9470,7 +9477,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++) {
@@ -9489,7 +9496,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;
@@ -9822,7 +9829,8 @@
         return isString$2(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
       }
       loadImage(image, background = !1) {
-        if (!image || background && backgroundNotImage(image)) return;
+        if (background && (null == image ? void 0 : image.background) && (image = image.background), background && (!image || backgroundNotImage(image))) return void (this.backgroundImg = !1);
+        if (!image) return;
         const url = image;
         this.resources || (this.resources = new Map());
         const cache = {
@@ -9877,7 +9885,10 @@
       }
     }
     function backgroundNotImage(image) {
-      return !(!image.fill && !image.stroke);
+      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));
+    }
+    function isExternalTexture(texture) {
+      return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || isValidUrl$1(texture) || texture.includes("/") || isBase64$1(texture)) : isObject$8(texture));
     }
     Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget$3);
 
@@ -11971,7 +11982,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", ...GRAPHIC_UPDATE_TAG_KEY];
+    const IMAGE_UPDATE_TAG_KEY = ["width", "height", "image", "imageMode", "imagePosition", "imageScale", "imageOffsetX", "imageOffsetY", ...GRAPHIC_UPDATE_TAG_KEY];
     let Image$2 = class Image extends Graphic {
       constructor(params) {
         super(params), this.type = "image", this.numberType = IMAGE_NUMBER_TYPE, this.loadImage(this.attribute.image);
@@ -12076,6 +12087,7 @@
     };
     Image$2.NOWORK_ANIMATE_ATTR = Object.assign({
       image: 1,
+      imageMode: 1,
       repeatX: 1,
       repeatY: 1
     }, NOWORK_ANIMATE_ATTR);
@@ -13150,11 +13162,12 @@
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
           backgroundOffsetY = graphicAttribute.backgroundOffsetY,
-          backgroundClip = graphicAttribute.backgroundClip
+          backgroundClip = graphicAttribute.backgroundClip,
+          backgroundPosition = graphicAttribute.backgroundPosition
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
-          const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
+          const res = graphic.resources.get(getBackgroundImage(background));
+          if (!res || "success" !== res.state || !res.data) return;
           if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
             const groupAttribute = getTheme(graphic.parent).group,
               {
@@ -13171,59 +13184,160 @@
             backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY
+            backgroundOffsetY: backgroundOffsetY,
+            backgroundPosition: backgroundPosition
           }), 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) {
-        const {
-            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);
-        }
+        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);
+      }
+      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);
+    }
     let DefaultBaseInteractiveRenderContribution = class {
       constructor(subRenderContribitions) {
         this.subRenderContribitions = subRenderContribitions, this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -13269,6 +13383,7 @@
     }
     const defaultBaseClipRenderAfterContribution = new DefaultBaseClipRenderAfterContribution();
 
+    const builtinProceduralTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid"]);
     function formatRatio(ratio) {
       return ratio <= .5 ? 4 * ratio - 1 : -4 * ratio + 3;
     }
@@ -13382,38 +13497,43 @@
         texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
       }
       drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f;
         const {
           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 textureRadius = null !== (_a = null == textureOptions ? void 0 : textureOptions.radius) && void 0 !== _a ? _a : 0,
+          patternKey = this.getPatternCacheKey(texture, textureSize, texturePadding, textureColor, context.dpr, textureRadius);
+        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, texturePadding, textureRadius)), pattern && null !== patternKey && this.textureMap.set(patternKey, pattern);
         }
-        if (textureOptions && textureOptions.dynamicTexture) {
+        if ("string" == typeof texture && textureOptions && textureOptions.dynamicTexture) {
           const {
               gridConfig = {},
               useNewCanvas: useNewCanvas
@@ -13458,10 +13578,24 @@
           for (let i = 0; i < gridRows; i++) for (let j = 0; j < gridColumns; j++) {
             const _x = x + cellSize / 2 + j * cellSize,
               _y = y + cellSize / 2 + i * cellSize;
-            null === (_a = textureOptions.beforeDynamicTexture) || void 0 === _a || _a.call(textureOptions, context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height()), context.beginPath(), !1 === parsedPath.draw(context, Math.min(sizeW - gutterColumn, sizeH - gutterRow), _x, _y, 0) && context.closePath(), context.fillStyle = textureColor, textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height());
+            null === (_b = textureOptions.beforeDynamicTexture) || void 0 === _b || _b.call(textureOptions, context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height()), context.beginPath(), !1 === parsedPath.draw(context, Math.min(sizeW - gutterColumn, sizeH - gutterRow), _x, _y, 0) && context.closePath(), context.fillStyle = textureColor, textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height());
           }
           useNewCanvas && (originalContext.globalAlpha = 1, originalContext.drawImage(newCanvas.nativeCanvas, 0, 0, newCanvas.nativeCanvas.width, newCanvas.nativeCanvas.height, b.x1, b.y1, b.width() * originalContext.dpr, b.height() * originalContext.dpr)), originalContext.restore();
-        } else if (pattern) context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore();else if ("wave" === texture) {
+        } else if (pattern) {
+          if (pattern.setTransform) {
+            const alignToGraphic = !!(null == textureOptions ? void 0 : textureOptions.alignToGraphic),
+              alignOffsetX = null !== (_c = null == textureOptions ? void 0 : textureOptions.alignOffsetX) && void 0 !== _c ? _c : 0,
+              alignOffsetY = null !== (_d = null == textureOptions ? void 0 : textureOptions.alignOffsetY) && void 0 !== _d ? _d : 0;
+            let translateX = 0,
+              translateY = 0;
+            if (alignToGraphic) {
+              const m = context.currentMatrix;
+              translateX = (null !== (_e = null == m ? void 0 : m.e) && void 0 !== _e ? _e : 0) + x + alignOffsetX, translateY = (null !== (_f = null == m ? void 0 : m.f) && void 0 !== _f ? _f : 0) + y + alignOffsetY;
+            } else (alignOffsetX || alignOffsetY) && (translateX = alignOffsetX, translateY = alignOffsetY);
+            pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, translateX, translateY]));
+          }
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore();
+        } else if ("wave" === texture) {
           context.save(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.clip();
           const b = graphic.AABBBounds;
           drawWave(context, textureRatio, b.width(), b.height(), Object.assign(Object.assign({}, textureOptions || {}), {
@@ -13469,6 +13603,45 @@
           }), x + b.x1 - x, y + b.y1 - y), context.restore();
         }
       }
+      getPatternCacheKey(texture, textureSize, texturePadding, textureColor, dpr, textureRadius) {
+        return "string" != typeof texture ? texturePadding > 0 || textureRadius > 0 ? null : texture : "wave" === texture ? null : builtinProceduralTextureTypes.has(texture) ? `builtin:${texture}|size:${textureSize}|padding:${texturePadding}|color:${textureColor}|dpr:${dpr}` : `resource:${texture}|padding:${texturePadding}|radius:${textureRadius}|dpr:${dpr}`;
+      }
+      createResourcePattern(texture, graphic, context, texturePadding, textureRadius) {
+        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;
+        if (texturePadding > 0 || textureRadius > 0) {
+          const w = data.naturalWidth || data.width,
+            h = data.naturalHeight || data.height;
+          if (w > 0 && h > 0) {
+            const tileW = w + 2 * texturePadding,
+              tileH = h + 2 * texturePadding,
+              canvas = canvasAllocate.allocate({
+                width: tileW,
+                height: tileH,
+                dpr: context.dpr
+              }),
+              ctx = canvas.getContext("2d");
+            if (ctx) {
+              if (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, tileW, tileH), textureRadius > 0) {
+                const r = Math.max(0, Math.min(textureRadius, Math.min(w, h) / 2)),
+                  x0 = texturePadding,
+                  y0 = texturePadding,
+                  x1 = x0 + w,
+                  y1 = y0 + h;
+                ctx.beginPath(), ctx.moveTo(x0 + r, y0), ctx.lineTo(x1 - r, y0), ctx.quadraticCurveTo(x1, y0, x1, y0 + r), ctx.lineTo(x1, y1 - r), ctx.quadraticCurveTo(x1, y1, x1 - r, y1), ctx.lineTo(x0 + r, y1), ctx.quadraticCurveTo(x0, y1, x0, y1 - r), ctx.lineTo(x0, y0 + r), ctx.quadraticCurveTo(x0, y0, x0 + r, y0), ctx.closePath(), ctx.clip();
+              }
+              ctx.drawImage(data, texturePadding, texturePadding, w, h);
+              const pattern = context.createPattern(canvas.nativeCanvas, "repeat");
+              return (null == pattern ? void 0 : pattern.setTransform) && pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, 0, 0])), canvasAllocate.free(canvas), pattern;
+            }
+            canvasAllocate.free(canvas);
+          }
+        }
+        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();
 
@@ -13580,27 +13753,32 @@
       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
+          backgroundOffsetY = graphicAttribute.backgroundOffsetY,
+          backgroundClip = graphicAttribute.backgroundClip,
+          backgroundPosition = graphicAttribute.backgroundPosition
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
-          const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
+          const res = graphic.resources.get(getBackgroundImage(background));
+          if (!res || "success" !== res.state || !res.data) return;
           context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
           const b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, {
+          context.globalAlpha = backgroundOpacity * opacity, backgroundClip && context.clip(), this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
             backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY
+            backgroundOffsetY: backgroundOffsetY,
+            backgroundPosition: backgroundPosition
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
+        } else context.highPerformanceSave(), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }
     const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
@@ -15082,9 +15260,17 @@
       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
+          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
+          backgroundScale = graphicAttribute.backgroundScale,
+          backgroundOffsetX = graphicAttribute.backgroundOffsetX,
+          backgroundOffsetY = graphicAttribute.backgroundOffsetY,
+          backgroundPosition = graphicAttribute.backgroundPosition,
+          backgroundClip = graphicAttribute.backgroundClip,
+          backgroundCornerRadius = graphicAttribute.backgroundCornerRadius
         } = graphic.attribute;
         let matrix,
           {
@@ -15096,18 +15282,18 @@
         };
         let b;
         "richtext" === graphic.type && (matrix = context.currentMatrix.clone(), context.restore(), context.save(), context.setTransformForCurrent());
-        const shouldReCalBounds = isObject$8(background) && background.background,
+        const backgroundConfig = isObject$8(background) && background.background ? background : null,
           onlyTranslate = graphic.transMatrix.onlyTranslate();
-        if (shouldReCalBounds) {
+        if (backgroundConfig) {
           const _b = graphic.AABBBounds,
-            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) {
+            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) {
             const w = b.width(),
               h = b.height();
-            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);
+            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);
           }
         } else b = graphic.AABBBounds, onlyTranslate || (b = getTextBounds(Object.assign(Object.assign({}, graphic.attribute), {
           angle: 0,
@@ -15120,19 +15306,18 @@
         })).clone());
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
-          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, {
+          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, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
-            backgroundKeepAspectRatio: backgroundKeepAspectRatio
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
+            backgroundScale: backgroundScale,
+            backgroundOffsetX: backgroundOffsetX,
+            backgroundOffsetY: backgroundOffsetY,
+            backgroundPosition: backgroundPosition
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else {
-          const {
-            backgroundCornerRadius: backgroundCornerRadius
-          } = graphic.attribute;
-          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), 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();
+        } 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();
       }
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
@@ -15559,6 +15744,92 @@
         };
       };
     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);
@@ -15573,6 +15844,11 @@
             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);
@@ -15589,22 +15865,33 @@
         const width = image.width,
           height = image.height;
         context.beginPath();
-        let needRestore = !1;
-        0 === cornerRadius || isArray$5(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);
+        let needCornerClip = !1;
+        0 === cornerRadius || isArray$5(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);
         const _runFill = () => {
-            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);
-            }
+            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
+            })));
           },
           _runStroke = () => {
             doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
-          };
-        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);
+          },
+          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);
       }
       draw(image, renderService, drawContext) {
         const {
@@ -16459,7 +16746,7 @@
         return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
             clear: clear,
             viewBox: viewBox
@@ -16469,9 +16756,20 @@
         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), 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);
+          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);
+            }
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
               x1: 0,
@@ -16974,7 +17272,7 @@
         return null !== (_a = this._background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND;
       }
       set background(b) {
-        this._background = b;
+        this._background = b, this.syncBackgroundImage(b);
       }
       get defaultLayer() {
         return this.at(0);
@@ -16988,6 +17286,18 @@
       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$8(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 => {
@@ -17026,9 +17336,7 @@
           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 && isString$2(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());
+        }), 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());
       }
       initAnimate(params) {
         var _a;
@@ -24503,6 +24811,7 @@
       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;
     }
@@ -31329,6 +31638,16 @@
         strokeBoundsBuffer: 0
       }
     };
+    const LAYOUT_LEVEL = {
+      background: 0,
+      preview: 1,
+      dragMask: 2,
+      selectedBackground: 3,
+      selectedPreview: 4,
+      handler: 5,
+      handlerText: 5,
+      handlerMask: 999
+    };
 
     const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
       if (!textBounds) return !1;
@@ -31459,12 +31778,14 @@
           x: position.x + start * width,
           y: position.y,
           width: (end - start) * width,
-          height: height
+          height: height,
+          zIndex: LAYOUT_LEVEL.dragMask
         }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
           x: position.x,
           y: position.y + start * height,
           width: width,
-          height: (end - start) * height
+          height: (end - start) * height,
+          zIndex: LAYOUT_LEVEL.dragMask
         }, dragMaskStyle), "rect"), {
           start: start,
           end: end
@@ -31488,7 +31809,8 @@
           y: position.y,
           width: width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "auto"
+          cursor: brushSelect ? "crosshair" : "auto",
+          zIndex: LAYOUT_LEVEL.background
         }, backgroundStyle), {
           pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
         }), "rect");
@@ -31521,7 +31843,8 @@
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
-              height: middleHandlerBackgroundSize
+              height: middleHandlerBackgroundSize,
+              zIndex: LAYOUT_LEVEL.handler
             }, null === (_d = middleHandlerStyle.background) || void 0 === _d ? void 0 : _d.style), {
               pickable: !zoomLock && (null === (_g = null === (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.pickable) || void 0 === _g || _g)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
@@ -31529,24 +31852,29 @@
               y: position.y - middleHandlerBackgroundSize / 2,
               strokeBoundsBuffer: 0,
               angle: 0,
-              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
+              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square",
+              zIndex: LAYOUT_LEVEL.handler
             }, middleHandlerStyle.icon), {
               pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
             }), "symbol");
           }
-          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
             symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+            zIndex: LAYOUT_LEVEL.handler
+          }), startHandlerStyle), {
             pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
+          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
             x: position.x + end * width,
             y: position.y + height / 2,
             size: height,
             symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+            zIndex: LAYOUT_LEVEL.handler
+          }), endHandlerStyle), {
             pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
@@ -31560,7 +31888,7 @@
             height: startHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -31570,7 +31898,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -31581,7 +31909,8 @@
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
-              height: (end - start) * height
+              height: (end - start) * height,
+              zIndex: LAYOUT_LEVEL.handler
             }, null === (_r = middleHandlerStyle.background) || void 0 === _r ? void 0 : _r.style), {
               pickable: !zoomLock && (null === (_u = null === (_t = null === (_s = middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.style) || void 0 === _t ? void 0 : _t.pickable) || void 0 === _u || _u)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
@@ -31589,23 +31918,27 @@
               y: position.y + (start + end) / 2 * height,
               angle: Math.PI / 180 * 90,
               symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
-              strokeBoundsBuffer: 0
+              strokeBoundsBuffer: 0,
+              zIndex: LAYOUT_LEVEL.handler
             }, middleHandlerStyle.icon), {
               pickable: !zoomLock && (null === (_y = null === (_x = middleHandlerStyle.icon) || void 0 === _x ? void 0 : _x.pickable) || void 0 === _y || _y)
             }), "symbol");
           }
-          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + start * height,
             size: width,
             symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+            zIndex: LAYOUT_LEVEL.handler
+          }), startHandlerStyle), {
             pickable: !zoomLock && (null === (_0 = startHandlerStyle.pickable) || void 0 === _0 || _0)
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + end * height,
             size: width,
-            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
+            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square",
+            zIndex: LAYOUT_LEVEL.handler
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
             pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
           }), "symbol");
@@ -31620,7 +31953,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -31630,7 +31963,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -31659,7 +31992,8 @@
           y: position.y,
           width: (end - start) * width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "move"
+          cursor: brushSelect ? "crosshair" : "move",
+          zIndex: LAYOUT_LEVEL.selectedBackground
         }, selectedBackgroundStyle), {
           pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
         }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
@@ -31667,14 +32001,16 @@
           y: position.y + start * height,
           width: width,
           height: (end - start) * height,
-          cursor: brushSelect ? "crosshair" : "move"
+          cursor: brushSelect ? "crosshair" : "move",
+          zIndex: LAYOUT_LEVEL.selectedBackground
         }, selectedBackgroundStyle), {
           pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
         }), "rect");
       }
       _setPreviewAttributes(type, group) {
         this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-          pickable: !1
+          pickable: !1,
+          zIndex: LAYOUT_LEVEL.preview
         }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
           curveType: "basis"
         }, "area");
@@ -31693,7 +32029,8 @@
       }
       _setSelectedPreviewClipAttributes(type, group) {
         this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-          pickable: !1
+          pickable: !1,
+          zIndex: LAYOUT_LEVEL.selectedPreview
         }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
         const {
             start: start,
@@ -31895,7 +32232,8 @@
           visible: this._showText,
           pickable: !1,
           childrenPickable: !1,
-          textStyle: startTextAlignStyle
+          textStyle: startTextAlignStyle,
+          zIndex: LAYOUT_LEVEL.handlerText
         }), "data-zoom-start-text"), this._endText = this._maybeAddLabel(this._getContainer(), merge({}, restEndTextStyle, {
           text: endTextValue,
           x: endTextPosition.x,
@@ -31903,7 +32241,8 @@
           visible: this._showText,
           pickable: !1,
           childrenPickable: !1,
-          textStyle: endTextAlignStyle
+          textStyle: endTextAlignStyle,
+          zIndex: LAYOUT_LEVEL.handlerText
         }), "data-zoom-end-text");
       }
       _maybeAddLabel(container, attributes, name) {
@@ -33747,7 +34086,31 @@
         return graphicCreator.symbol(style);
       }
       _renderHandlerText(value, position) {
-        var _a, _b, _c;
+        return graphicCreator.text(this._getHandlerTextAttributes(value, position));
+      }
+      _getHandlerPosition(isStart) {
+        return this.attribute.range && isStart ? "start" : "end";
+      }
+      _getHandlerTextStyle(value, position) {
+        const {
+          align: align,
+          handlerSize = 14,
+          handlerText = {},
+          railHeight: railHeight,
+          railWidth: railWidth,
+          slidable: slidable
+        } = this.attribute;
+        return isFunction$3(handlerText.style) ? handlerText.style(value, position, {
+          layout: this.attribute.layout,
+          align: align,
+          railWidth: railWidth,
+          railHeight: railHeight,
+          handlerSize: handlerSize,
+          slidable: slidable
+        }) : handlerText.style;
+      }
+      _getHandlerTextAttributes(value, position) {
+        var _a, _b;
         const {
             align: align,
             handlerSize = 14,
@@ -33759,13 +34122,13 @@
           isHorizontal = this._isHorizontal,
           pos = this.calculatePosByValue(value, position),
           textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
+          handlerTextStyle = this._getHandlerTextStyle(value, position),
           textStyle = {
             text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
-            lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+            lineHeight: null == handlerTextStyle ? void 0 : handlerTextStyle.lineHeight,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
-        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos), Object.assign(Object.assign({}, textStyle), handlerTextStyle);
       }
       _renderTooltip() {
         var _a;
@@ -33893,31 +34256,19 @@
         }
       }
       _updateHandler(handler, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal;
         handler.setAttribute(isHorizontal ? "x" : "y", position);
         const updateHandlerText = handler.name === SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
         if (updateHandlerText) {
-          const {
-            handlerText = {}
-          } = this.attribute;
-          updateHandlerText.setAttributes({
-            text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_a = handlerText.precision) && void 0 !== _a ? _a : 0),
-            [isHorizontal ? "x" : "y"]: position
-          });
+          const handlerPosition = this._getHandlerPosition(handler.name === SLIDER_ELEMENT_NAME.startHandler);
+          updateHandlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         }
         handler.name === SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
       }
       _updateHandlerText(handlerText, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal,
-          {
-            handlerText: handlerTextAttr = {}
-          } = this.attribute;
-        handlerText.setAttributes({
-          [isHorizontal ? "x" : "y"]: position,
-          text: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
-        });
+          handlerPosition = this._getHandlerPosition(handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText);
+        handlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         const updateHandler = handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
         updateHandler && updateHandler.setAttributes({
           [isHorizontal ? "x" : "y"]: position
@@ -60262,7 +60613,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.22.13-alpha.10", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.22.13-alpha.11", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager$1(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -76584,7 +76935,7 @@
         PluginManager: PluginManager
     });
 
-    const version = "1.22.13-alpha.10";
+    const version = "1.22.13-alpha.11";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$4;