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

package/dist/vtable-gantt.js

@@ -685,28 +685,59 @@
       }
       addEventListener(type, listener, options) {
         if (!listener) return;
+        const capture = this._resolveCapture(options),
+          once = this._resolveOnce(options),
+          listenerTypeMap = this._getOrCreateListenerTypeMap(type),
+          wrappedMap = this._getOrCreateWrappedMap(listenerTypeMap, listener);
+        if (wrappedMap.has(capture)) return;
         const wrappedListener = event => {
           const transformedEvent = this._eventListenerTransformer(event);
-          "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
+          "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent), once && this._deleteListenerRecord(type, listener, capture);
         };
-        this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
+        wrappedMap.set(capture, {
+          wrappedListener: wrappedListener,
+          options: options
+        }), this._nativeAddEventListener(type, wrappedListener, options);
       }
       removeEventListener(type, listener, options) {
-        var _a;
+        var _a, _b;
         if (!listener) return;
-        const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
-        wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
+        const capture = this._resolveCapture(options),
+          wrappedRecord = null === (_b = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener)) || void 0 === _b ? void 0 : _b.get(capture);
+        wrappedRecord && (this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture), this._deleteListenerRecord(type, listener, capture));
       }
       dispatchEvent(event) {
         return this._nativeDispatchEvent(event);
       }
       clearAllEventListeners() {
-        this._listenerMap.forEach((listenersMap, type) => {
-          listenersMap.forEach((wrappedListener, originalListener) => {
-            this._nativeRemoveEventListener(type, wrappedListener, void 0);
+        this._listenerMap.forEach((listenerMap, type) => {
+          listenerMap.forEach(wrappedMap => {
+            wrappedMap.forEach((wrappedRecord, capture) => {
+              this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture);
+            });
           });
         }), this._listenerMap.clear();
       }
+      _resolveCapture(options) {
+        return "boolean" == typeof options ? options : !!(null == options ? void 0 : options.capture);
+      }
+      _resolveOnce(options) {
+        return "object" == typeof options && !!(null == options ? void 0 : options.once);
+      }
+      _getOrCreateListenerTypeMap(type) {
+        let listenerTypeMap = this._listenerMap.get(type);
+        return listenerTypeMap || (listenerTypeMap = new Map(), this._listenerMap.set(type, listenerTypeMap)), listenerTypeMap;
+      }
+      _getOrCreateWrappedMap(listenerTypeMap, listener) {
+        let wrappedMap = listenerTypeMap.get(listener);
+        return wrappedMap || (wrappedMap = new Map(), listenerTypeMap.set(listener, wrappedMap)), wrappedMap;
+      }
+      _deleteListenerRecord(type, listener, capture) {
+        const listenerTypeMap = this._listenerMap.get(type);
+        if (!listenerTypeMap) return;
+        const wrappedMap = listenerTypeMap.get(listener);
+        wrappedMap && (wrappedMap.delete(capture), 0 === wrappedMap.size && listenerTypeMap.delete(listener), 0 === listenerTypeMap.size && this._listenerMap.delete(type));
+      }
       _nativeAddEventListener(type, listener, options) {
         throw new Error("_nativeAddEventListener must be implemented by derived classes");
       }
@@ -4602,6 +4633,7 @@
       backgroundScale: 1,
       backgroundOffsetX: 0,
       backgroundOffsetY: 0,
+      backgroundPosition: "top-left",
       blur: 0,
       filter: "",
       cursor: null,
@@ -4774,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,
@@ -7220,7 +7257,9 @@
         var _a;
         if (event.manager !== this) throw new Error("It is illegal to free an event not managed by this EventManager!");
         const constructor = event.constructor;
-        this.eventPool.has(constructor) || this.eventPool.set(constructor, []), null === (_a = this.eventPool.get(constructor)) || void 0 === _a || _a.push(event);
+        this.eventPool.has(constructor) || (this.eventPool.get(constructor).forEach(e => {
+          e.eventPhase = event.NONE, e.currentTarget = null, e.path = [], e.detailPath = [], e.target = null;
+        }), this.eventPool.set(constructor, [])), null === (_a = this.eventPool.get(constructor)) || void 0 === _a || _a.push(event);
       }
       notifyListeners(e, type) {
         const listeners = e.currentTarget._events[type];
@@ -9177,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,
@@ -9233,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;
@@ -9422,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);
@@ -9437,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++) {
@@ -9456,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;
@@ -9789,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 = {
@@ -9824,7 +9865,7 @@
         });
       }
       release() {
-        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
+        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this), super.release();
       }
       _emitCustomEvent(type, context) {
         var _a, _b;
@@ -9844,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);
 
@@ -11938,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);
@@ -12043,6 +12087,7 @@
     };
     Image$2.NOWORK_ANIMATE_ATTR = Object.assign({
       image: 1,
+      imageMode: 1,
       repeatX: 1,
       repeatY: 1
     }, NOWORK_ANIMATE_ATTR);
@@ -13117,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,
               {
@@ -13138,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;
@@ -13236,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;
     }
@@ -13349,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
@@ -13425,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 || {}), {
@@ -13436,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();
 
@@ -13547,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();
@@ -15049,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,
           {
@@ -15063,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,
@@ -15087,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();
@@ -15526,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);
@@ -15540,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);
@@ -15556,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 {
@@ -16426,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
@@ -16436,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,
@@ -16941,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);
@@ -16955,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 => {
@@ -16993,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;
@@ -17330,12 +17671,12 @@
         throw new Error("暂不支持");
       }
       release() {
-        var _a, _b;
+        var _a, _b, _d;
         super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
           layer.release();
         }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
           item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.renderService.renderTreeRoots = [];
+        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.params.ticker || null === (_d = this._ticker) || void 0 === _d || _d.release(), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -21646,7 +21987,7 @@
         this._sliderRenderBounds = null, this._sliderLimitRange = null;
       }
       release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         }), this._clearDragEvents();
       }
@@ -23229,17 +23570,21 @@
         } = this.attribute.label;
         textStyle = isFunction$3(textStyle) ? merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
         const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
-        return textStyle = merge(labelAlign, textStyle), isFunction$3(textStyle.text) && (textStyle.text = textStyle.text({
+        textStyle = merge(labelAlign, textStyle), isFunction$3(textStyle.text) && (textStyle.text = textStyle.text({
           label: tickDatum.label,
           value: tickDatum.rawValue,
           index: tickDatum.index,
           layer: layer
-        })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
+        }));
+        let reactStyle = textStyle.react;
+        return isFunction$3(reactStyle) && (reactStyle = reactStyle(tickDatum, index, tickData, layer)), Object.assign(Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
           text: null != text ? text : textContent,
           _originText: tickDatum.label,
           lineHeight: null == textStyle ? void 0 : textStyle.fontSize,
           type: type
-        }), textStyle);
+        }), textStyle), {
+          react: reactStyle
+        });
       }
       getLabelPosition(point, vector, text, style) {
         return point;
@@ -24268,6 +24613,8 @@
           this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(timeline => {
             timeline.tick(delta);
           }), this.emit("tick", delta));
+        }, this._handleGraphTick = () => {
+          this.initHandler(!1);
         }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.stage = stage, this.autoStop = !0, this.interval = 16, this.computeTimeOffsetAndJitter();
       }
       bindStage(stage) {
@@ -24277,9 +24624,7 @@
         this.timeOffset = Math.floor(Math.random() * this.interval), this._jitter = Math.min(Math.max(.2 * this.interval, 6), .7 * this.interval);
       }
       init() {
-        this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-          this.initHandler(!1);
-        }), application.global.env && this.initHandler(!1);
+        this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", this._handleGraphTick), application.global.env && this.initHandler(!1);
       }
       addTimeline(timeline) {
         this.timelines.push(timeline);
@@ -24352,7 +24697,7 @@
       }
       release() {
         var _a;
-        this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
+        this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1, application.global.hooks.onSetEnv.unTap("graph-ticker", this._handleGraphTick);
       }
       checkSkip(delta) {
         var _a, _b, _c;
@@ -24466,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;
     }
@@ -24612,7 +24958,7 @@
         let parsedFromProps = null,
           props = params.to,
           from = params.from;
-        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
         let totalDelay = 0;
         oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
         const delayAfterValue = isFunction$3(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -24675,7 +25021,7 @@
           let parsedFromProps = null,
             props = effect.to,
             from = effect.from;
-          props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
+          props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
           const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
             customType = effect.custom ? effect.customType : getCustomType(custom);
           this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
@@ -24694,22 +25040,31 @@
         animate.play(customAnimate);
       }
       createPropsFromChannel(channel, graphic) {
+        var _a;
         const props = {};
         let from = null;
-        return channel ? (Array.isArray(channel) ? channel.forEach(key => {
-          var _a, _b;
-          const value = null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs) || void 0 === _b ? void 0 : _b[key];
-          void 0 !== value && (props[key] = value);
-        }) : Object.keys(channel).forEach(key => {
+        if (!channel) return {
+          from: from,
+          props: props,
+          attrOutChannel: null
+        };
+        const attrOutChannel = {};
+        let hasAttrs = !1;
+        const diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
+        if (Array.isArray(channel) && (channel = channel.reduce((res, key) => (void 0 === diffAttrs[key] || (res[key] = {
+          to: diffAttrs[key]
+        }), res), {})), Object.keys(channel).forEach(key => {
           var _a, _b, _c, _d;
           const config = channel[key];
           void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
-        }), {
-          from: from,
-          props: props
-        }) : {
+        }), diffAttrs) for (const key in diffAttrs) {
+          const value = diffAttrs[key];
+          void 0 !== value && (props.hasOwnProperty(key) || (attrOutChannel[key] = value, hasAttrs = !0));
+        }
+        return {
           from: from,
-          props: props
+          props: props,
+          attrOutChannel: hasAttrs ? attrOutChannel : null
         };
       }
       resolveValue(value, graphic, defaultValue) {
@@ -31283,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;
@@ -31413,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
@@ -31442,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");
@@ -31475,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({
@@ -31483,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),
@@ -31514,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({
@@ -31524,7 +31898,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -31535,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({
@@ -31543,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");
@@ -31574,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({
@@ -31584,7 +31963,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -31613,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({
@@ -31621,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");
@@ -31647,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,
@@ -31849,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,
@@ -31857,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) {
@@ -31981,7 +32366,7 @@
         });
       }
       clearVGlobalEvents() {
-        ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         });
       }
@@ -33701,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,
@@ -33713,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;
@@ -33847,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
@@ -33907,7 +34304,7 @@
         };
       }
       release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         }), this._clearAllDragEvents();
       }
@@ -60091,11 +60488,11 @@
       onUpdate(end, ratio, out) {
         if (this.from.x !== this.to.x) {
           const x = end ? this.to.x : this.from.x + Math.floor((this.to.x - this.from.x) * ratio);
-          this.params.table.scrollLeft = x;
+          this.params.table.scrollLeft = x, 1 === ratio && -1 !== this.to.targetCol && this.params.table.scrollToCol(this.to.targetCol, !1);
         }
         if (this.from.y !== this.to.y) {
           const y = end ? this.to.y : this.from.y + Math.floor((this.to.y - this.from.y) * ratio);
-          this.params.table.scrollTop = y;
+          this.params.table.scrollTop = y, 1 === ratio && -1 !== this.to.targetRow && this.params.table.scrollToRow(this.to.targetRow, !1);
         }
       }
     }
@@ -60127,7 +60524,9 @@
         colDecimal && (left += colDecimal * cellRect.width), rowDecimal && (top += rowDecimal * cellRect.height);
         const to = {
             x: isNumber$2(col) ? left - this.table.getFrozenColsWidth() : this.table.scrollLeft,
-            y: isNumber$2(row) ? top - this.table.getFrozenRowsHeight() : this.table.scrollTop
+            y: isNumber$2(row) ? top - this.table.getFrozenRowsHeight() : this.table.scrollTop,
+            targetCol: null != col ? col : -1,
+            targetRow: null != row ? row : -1
           },
           duration = isBoolean$2(animationOption) ? animationOption ? 3e3 : 0 : null !== (_a = null == animationOption ? void 0 : animationOption.duration) && void 0 !== _a ? _a : 3e3,
           easing = isBoolean$2(animationOption) ? animationOption ? "linear" : "" : null !== (_b = null == animationOption ? void 0 : animationOption.easing) && void 0 !== _b ? _b : "linear";
@@ -60214,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.1", 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
@@ -61143,17 +61542,18 @@
         this.release();
       }
       release() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        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, _0, _1;
+        null === (_c = null === (_b = null === (_a = this.scenegraph) || void 0 === _a ? void 0 : _a.component) || void 0 === _b ? void 0 : _b.vScrollBar) || void 0 === _c || _c.release(), null === (_f = null === (_e = null === (_d = this.scenegraph) || void 0 === _d ? void 0 : _d.component) || void 0 === _e ? void 0 : _e.hScrollBar) || void 0 === _f || _f.release(), this.animationManager.clear(), this.animationManager.ticker.release(), null === (_j = null === (_h = null === (_g = this.scenegraph) || void 0 === _g ? void 0 : _g.stage) || void 0 === _h ? void 0 : _h.ticker) || void 0 === _j || _j.release();
         const internalProps = this.internalProps;
         if (this.isReleased) return;
-        null === (_b = null === (_a = internalProps.tooltipHandler) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), null === (_d = null === (_c = internalProps.menuHandler) || void 0 === _c ? void 0 : _c.release) || void 0 === _d || _d.call(_c), null === (_e = super.release) || void 0 === _e || _e.call(this), this.pluginManager.release(), null === (_g = null === (_f = internalProps.handler) || void 0 === _f ? void 0 : _f.release) || void 0 === _g || _g.call(_f), this.eventManager.release(), null === (_j = null === (_h = internalProps.focusControl) || void 0 === _h ? void 0 : _h.release) || void 0 === _j || _j.call(_h), null === (_k = internalProps.legends) || void 0 === _k || _k.forEach(legend => {
+        null === (_l = null === (_k = internalProps.tooltipHandler) || void 0 === _k ? void 0 : _k.release) || void 0 === _l || _l.call(_k), null === (_o = null === (_m = internalProps.menuHandler) || void 0 === _m ? void 0 : _m.release) || void 0 === _o || _o.call(_m), null === (_p = super.release) || void 0 === _p || _p.call(this), this.pluginManager.release(), null === (_r = null === (_q = internalProps.handler) || void 0 === _q ? void 0 : _q.release) || void 0 === _r || _r.call(_q), this.eventManager.release(), null === (_t = null === (_s = internalProps.focusControl) || void 0 === _s ? void 0 : _s.release) || void 0 === _t || _t.call(_s), null === (_u = internalProps.legends) || void 0 === _u || _u.forEach(legend => {
           null == legend || legend.release();
-        }), null === (_l = internalProps.title) || void 0 === _l || _l.release(), internalProps.title = null, null === (_m = internalProps.emptyTip) || void 0 === _m || _m.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), internalProps.releaseList && (internalProps.releaseList.forEach(releaseObj => {
+        }), null === (_v = internalProps.title) || void 0 === _v || _v.release(), internalProps.title = null, null === (_w = internalProps.emptyTip) || void 0 === _w || _w.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), internalProps.releaseList && (internalProps.releaseList.forEach(releaseObj => {
           var _a;
           return null === (_a = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _a ? void 0 : _a.call(releaseObj);
         }), internalProps.releaseList = null), this.scenegraph.stage.release(), this.scenegraph.proxy.release();
-        const parentElement = null === (_o = internalProps.element) || void 0 === _o ? void 0 : _o.parentElement;
-        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), null === (_r = null === (_q = null === (_p = this.editorManager) || void 0 === _p ? void 0 : _p.editingEditor) || void 0 === _q ? void 0 : _q.onEnd) || void 0 === _r || _r.call(_q), this.isReleased = !0, this.scenegraph = null, this.internalProps = null, null === (_s = this.reactCustomLayout) || void 0 === _s || _s.clearCache(), clearChartRenderQueue();
+        const parentElement = null === (_x = internalProps.element) || void 0 === _x ? void 0 : _x.parentElement;
+        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), null === (_0 = null === (_z = null === (_y = this.editorManager) || void 0 === _y ? void 0 : _y.editingEditor) || void 0 === _z ? void 0 : _z.onEnd) || void 0 === _0 || _0.call(_z), this.isReleased = !0, this.scenegraph = null, this.internalProps = null, null === (_1 = this.reactCustomLayout) || void 0 === _1 || _1.clearCache(), clearChartRenderQueue();
       }
       fireListeners(type, event) {
         return super.fireListeners(type, event);
@@ -62322,6 +62722,7 @@
         });
       }
       scrollToCell(cellAddr, animationOption) {
+        var _a;
         if (animationOption) return void this.animationManager.scrollTo(cellAddr, animationOption);
         const drawRange = this.getDrawRange();
         if (isValid$1(cellAddr.col) && cellAddr.col >= this.frozenColCount) {
@@ -62331,8 +62732,10 @@
         }
         if (isValid$1(cellAddr.row) && cellAddr.row >= this.frozenRowCount) {
           const frozenHeight = this.getFrozenRowsHeight(),
-            top = this.getRowsHeight(0, cellAddr.row - 1);
-          this.scrollTop = Math.min(top - frozenHeight, this.getAllRowsHeight() - drawRange.height);
+            rowInt = Math.floor(cellAddr.row),
+            rowFloat = cellAddr.row - rowInt;
+          let top = this.internalProps._rowHeightsMap.getSumInRange(0, rowInt - 1);
+          rowFloat > 0 && (top += (null !== (_a = this.internalProps._rowHeightsMap.get(rowInt)) && void 0 !== _a ? _a : this.getRowHeight(rowInt)) * rowFloat), this.scrollTop = Math.min(top - frozenHeight, this.getAllRowsHeight() - drawRange.height);
         }
         this.render();
       }
@@ -76532,7 +76935,7 @@
         PluginManager: PluginManager
     });
 
-    const version = "1.22.13-alpha.1";
+    const version = "1.22.13-alpha.11";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$4;