@visactor/vchart 2.0.21 → 2.0.22-alpha.1

package/build/index.es.js

@@ -11430,7 +11430,9 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   background: null,
   autoAnimateTexture: !1,
   textureRatio: 1,
-  textureOptions: null,
+  textureOptions: {
+    alignToGraphic: !0
+  },
   backgroundOpacity: 1,
   backgroundCornerRadius: 0,
   texture: null,
@@ -16065,6 +16067,7 @@ const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "ancho
 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,
@@ -16121,7 +16124,7 @@ class Graphic extends Node {
   }
   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;
@@ -16310,7 +16313,7 @@ class Graphic extends Node {
     });
   }
   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);
@@ -16325,7 +16328,7 @@ class Graphic extends Node {
     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++) {
@@ -16344,7 +16347,7 @@ class Graphic extends Node {
     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;
@@ -16735,6 +16738,9 @@ class Graphic extends Node {
 function backgroundNotImage(image) {
   return "string" == typeof image ? !(image.startsWith("<svg") || isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
 }
+function isExternalTexture(texture) {
+  return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || isValidUrl$1(texture) || texture.includes("/") || isBase64$1(texture)) : isObject$2(texture));
+}
 Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget);
 
 var GroupUpdateAABBBoundsMode;
@@ -20499,38 +20505,42 @@ class DefaultBaseTextureRenderContribution {
     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;
     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 patternKey = this.getPatternCacheKey(texture, textureSize, texturePadding, textureColor, context.dpr);
+    if (null !== patternKey && (pattern = this.textureMap.get(patternKey)), !pattern) {
+      if ("string" == typeof texture) switch (texture) {
+        case "circle":
+          pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "diamond":
+          pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "rect":
+          pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "vertical-line":
+          pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "horizontal-line":
+          pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "bias-lr":
+          pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "bias-rl":
+          pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
+          break;
+        case "grid":
+          pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
+      }
+      pattern || (pattern = this.createResourcePattern(texture, graphic, context)), pattern && null !== patternKey && this.textureMap.set(patternKey, pattern);
     }
-    if (textureOptions && textureOptions.dynamicTexture) {
+    if ("string" == typeof texture && textureOptions && textureOptions.dynamicTexture) {
       const {
           gridConfig = {},
           useNewCanvas: useNewCanvas
@@ -20578,7 +20588,21 @@ class DefaultBaseTextureRenderContribution {
         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());
       }
       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 !== (_b = null == textureOptions ? void 0 : textureOptions.alignOffsetX) && void 0 !== _b ? _b : 0,
+          alignOffsetY = null !== (_c = null == textureOptions ? void 0 : textureOptions.alignOffsetY) && void 0 !== _c ? _c : 0;
+        let translateX = 0,
+          translateY = 0;
+        if (alignToGraphic) {
+          const m = context.currentMatrix;
+          translateX = (null !== (_d = null == m ? void 0 : m.e) && void 0 !== _d ? _d : 0) + x + alignOffsetX, translateY = (null !== (_e = null == m ? void 0 : m.f) && void 0 !== _e ? _e : 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 || {}), {
@@ -20586,6 +20610,17 @@ class DefaultBaseTextureRenderContribution {
       }), x + b.x1 - x, y + b.y1 - y), context.restore();
     }
   }
+  getPatternCacheKey(texture, textureSize, texturePadding, textureColor, dpr) {
+    return "string" != typeof texture ? texture : "wave" === texture ? null : `${texture}-${textureSize}-${texturePadding}-${textureColor}-${dpr}`;
+  }
+  createResourcePattern(texture, graphic, context) {
+    var _a;
+    const resource = null === (_a = graphic.resources) || void 0 === _a ? void 0 : _a.get(texture),
+      data = "success" === (null == resource ? void 0 : resource.state) ? resource.data : "object" == typeof texture ? texture : null;
+    if (!data) return null;
+    const pattern = context.createPattern(data, "repeat");
+    return (null == pattern ? void 0 : pattern.setTransform) && pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, 0, 0])), pattern;
+  }
 }
 const defaultBaseTextureRenderContribution = new DefaultBaseTextureRenderContribution();
 

package/build/index.js

@@ -11436,7 +11436,9 @@
       background: null,
       autoAnimateTexture: !1,
       textureRatio: 1,
-      textureOptions: null,
+      textureOptions: {
+        alignToGraphic: !0
+      },
       backgroundOpacity: 1,
       backgroundCornerRadius: 0,
       texture: null,
@@ -16071,6 +16073,7 @@
     const tempConstantXYKey = ["x", "y"],
       tempConstantScaleXYKey = ["scaleX", "scaleY"],
       tempConstantAngleKey = ["angle"],
+      builtinTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave"]),
       point = new Point();
     const NOWORK_ANIMATE_ATTR = {
       strokeSeg: 1,
@@ -16127,7 +16130,7 @@
       }
       constructor(params = {}) {
         var _a;
-        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), isExternalTexture(params.texture) ? this.loadImage(params.texture, !1) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
       }
       getGraphicService() {
         var _a, _b;
@@ -16316,7 +16319,7 @@
         });
       }
       setAttributes(params, forceUpdateTag = !1, context) {
-        params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
+        params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), isExternalTexture(params.texture) ? this.loadImage(params.texture, !1) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
       }
       _setAttributes(params, forceUpdateTag = !1, context) {
         const keys = Object.keys(params);
@@ -16331,7 +16334,7 @@
         const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
           [key]: value
         }, this.attribute, key, context);
-        params ? this._setAttributes(params, forceUpdateTag, context) : isNil$1(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "shadowGraphic" === key && this.setShadowGraphic(value);
+        params ? this._setAttributes(params, forceUpdateTag, context) : isNil$1(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
       }
       needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
         for (let i = 0; i < k.length; i++) {
@@ -16350,7 +16353,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;
@@ -16741,6 +16744,9 @@
     function backgroundNotImage(image) {
       return "string" == typeof image ? !(image.startsWith("<svg") || isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
     }
+    function isExternalTexture(texture) {
+      return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || isValidUrl$1(texture) || texture.includes("/") || isBase64$1(texture)) : isObject$2(texture));
+    }
     Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget);
 
     var GroupUpdateAABBBoundsMode;
@@ -20505,38 +20511,42 @@
         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;
         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 patternKey = this.getPatternCacheKey(texture, textureSize, texturePadding, textureColor, context.dpr);
+        if (null !== patternKey && (pattern = this.textureMap.get(patternKey)), !pattern) {
+          if ("string" == typeof texture) switch (texture) {
+            case "circle":
+              pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "diamond":
+              pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "rect":
+              pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "vertical-line":
+              pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "horizontal-line":
+              pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "bias-lr":
+              pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "bias-rl":
+              pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
+              break;
+            case "grid":
+              pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
+          }
+          pattern || (pattern = this.createResourcePattern(texture, graphic, context)), pattern && null !== patternKey && this.textureMap.set(patternKey, pattern);
         }
-        if (textureOptions && textureOptions.dynamicTexture) {
+        if ("string" == typeof texture && textureOptions && textureOptions.dynamicTexture) {
           const {
               gridConfig = {},
               useNewCanvas: useNewCanvas
@@ -20584,7 +20594,21 @@
             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());
           }
           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 !== (_b = null == textureOptions ? void 0 : textureOptions.alignOffsetX) && void 0 !== _b ? _b : 0,
+              alignOffsetY = null !== (_c = null == textureOptions ? void 0 : textureOptions.alignOffsetY) && void 0 !== _c ? _c : 0;
+            let translateX = 0,
+              translateY = 0;
+            if (alignToGraphic) {
+              const m = context.currentMatrix;
+              translateX = (null !== (_d = null == m ? void 0 : m.e) && void 0 !== _d ? _d : 0) + x + alignOffsetX, translateY = (null !== (_e = null == m ? void 0 : m.f) && void 0 !== _e ? _e : 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 || {}), {
@@ -20592,6 +20616,17 @@
           }), x + b.x1 - x, y + b.y1 - y), context.restore();
         }
       }
+      getPatternCacheKey(texture, textureSize, texturePadding, textureColor, dpr) {
+        return "string" != typeof texture ? texture : "wave" === texture ? null : `${texture}-${textureSize}-${texturePadding}-${textureColor}-${dpr}`;
+      }
+      createResourcePattern(texture, graphic, context) {
+        var _a;
+        const resource = null === (_a = graphic.resources) || void 0 === _a ? void 0 : _a.get(texture),
+          data = "success" === (null == resource ? void 0 : resource.state) ? resource.data : "object" == typeof texture ? texture : null;
+        if (!data) return null;
+        const pattern = context.createPattern(data, "repeat");
+        return (null == pattern ? void 0 : pattern.setTransform) && pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, 0, 0])), pattern;
+      }
     }
     const defaultBaseTextureRenderContribution = new DefaultBaseTextureRenderContribution();