@visactor/vrender 0.11.1 → 0.12.0

package/dist/index.js

@@ -1243,21 +1243,6 @@
     });
   })(Reflect$1 || (Reflect$1 = {}));
 
-  const EnvContribution = Symbol.for('EnvContribution');
-  const Global = Symbol.for('Global');
-
-  const strCommandMap = [
-      'arc',
-      'arcTo',
-      'bezierCurveTo',
-      'closePath',
-      'ellipse',
-      'lineTo',
-      'moveTo',
-      'quadraticCurveTo',
-      'rect'
-  ];
-
   var NAMED_TAG = "named";
   var NAME_TAG = "name";
   var UNMANAGED_TAG = "unmanaged";
@@ -4221,6 +4206,34 @@
   function __metadata(metadataKey, metadataValue) {
     if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
   }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  const ContributionProvider = Symbol('ContributionProvider');
+  class ContributionProviderCache {
+      caches;
+      serviceIdentifier;
+      container;
+      constructor(serviceIdentifier, container) {
+          this.serviceIdentifier = serviceIdentifier;
+          this.container = container;
+      }
+      getContributions() {
+          if (!this.caches) {
+              this.caches = [];
+              this.container && this.caches.push(...this.container.getAll(this.serviceIdentifier));
+          }
+          return this.caches;
+      }
+  }
+  function bindContributionProvider(bind, id) {
+      bind(ContributionProvider)
+          .toDynamicValue(({ container }) => new ContributionProviderCache(id, container))
+          .inSingletonScope()
+          .whenTargetNamed(id);
+  }
 
   class Hook {
       _args;
@@ -4304,29 +4317,8 @@
       }
   }
 
-  const ContributionProvider = Symbol('ContributionProvider');
-  class ContributionProviderCache {
-      caches;
-      serviceIdentifier;
-      container;
-      constructor(serviceIdentifier, container) {
-          this.serviceIdentifier = serviceIdentifier;
-          this.container = container;
-      }
-      getContributions() {
-          if (!this.caches) {
-              this.caches = [];
-              this.container && this.caches.push(...this.container.getAll(this.serviceIdentifier));
-          }
-          return this.caches;
-      }
-  }
-  function bindContributionProvider(bind, id) {
-      bind(ContributionProvider)
-          .toDynamicValue(({ container }) => new ContributionProviderCache(id, container))
-          .inSingletonScope()
-          .whenTargetNamed(id);
-  }
+  const EnvContribution = Symbol.for('EnvContribution');
+  const Global = Symbol.for('Global');
 
   const defaultEnv = 'browser';
   exports.DefaultGlobal = class DefaultGlobal {
@@ -6082,6 +6074,11 @@
       CurveTypeEnum[CurveTypeEnum["EllipseCurve"] = 4] = "EllipseCurve";
       CurveTypeEnum[CurveTypeEnum["MoveCurve"] = 5] = "MoveCurve";
   })(exports.CurveTypeEnum || (exports.CurveTypeEnum = {}));
+  exports.BaseRenderContributionTime = void 0;
+  (function (BaseRenderContributionTime) {
+      BaseRenderContributionTime[BaseRenderContributionTime["beforeFillStroke"] = 0] = "beforeFillStroke";
+      BaseRenderContributionTime[BaseRenderContributionTime["afterFillStroke"] = 1] = "afterFillStroke";
+  })(exports.BaseRenderContributionTime || (exports.BaseRenderContributionTime = {}));
 
   function segments(x, y, rx, ry, large, sweep, rotateX, ox, oy) {
       const th = degreeToRadian(rotateX);
@@ -7659,6 +7656,7 @@
       ...DefaultAttribute,
       width: 0,
       height: 0,
+      strokeBoundsBuffer: 0,
       cornerRadius: 0
   };
   const DefaultRect3dAttribute = {
@@ -7696,8 +7694,8 @@
       singleLine: false
   };
   const DefaultImageAttribute = {
-      repeatX: 'stretch',
-      repeatY: 'stretch',
+      repeatX: 'no-repeat',
+      repeatY: 'no-repeat',
       image: '',
       width: 0,
       height: 0,
@@ -7725,6 +7723,7 @@
   };
 
   let ATextMeasure = class ATextMeasure {
+      release;
       canvas;
       context;
       configure(service, env) {
@@ -9147,6 +9146,9 @@
           return newNode;
       }
       insertInto(newNode, idx) {
+          if (this._nodeList) {
+              console.warn('insertIntoKeepIdx和insertInto混用可能会存在错误');
+          }
           if (idx >= this.childrenCount) {
               return this.appendChild(newNode);
           }
@@ -11487,6 +11489,24 @@
       static backIn = Easing.getBackIn(1.7);
       static backOut = Easing.getBackOut(1.7);
       static backInOut = Easing.getBackInOut(1.7);
+      static sineIn(t) {
+          return 1 - Math.cos((t * Math.PI) / 2);
+      }
+      static sineOut(t) {
+          return Math.sin((t * Math.PI) / 2);
+      }
+      static sineInOut(t) {
+          return -(Math.cos(Math.PI * t) - 1) / 2;
+      }
+      static expoIn(t) {
+          return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+      }
+      static expoOut(t) {
+          return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+      }
+      static expoInOut(t) {
+          return t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+      }
       static circIn(t) {
           return -(Math.sqrt(1 - t * t) - 1);
       }
@@ -12586,6 +12606,12 @@
           return;
       }
       onUpdate(end, ratio, out) {
+          if (!this.toFill) {
+              return;
+          }
+          if (!this.toStroke) {
+              return;
+          }
           switch (this.direction) {
               case Direction.RIGHT_TO_LEFT:
                   this.rightToLeft(end, ratio, out);
@@ -15261,7 +15287,7 @@
       }
       tryUpdateGlobalAABBBounds() {
           if (!this._globalAABBBounds) {
-              this._globalAABBBounds = this._AABBBounds.clone();
+              this._globalAABBBounds = this.AABBBounds.clone();
           }
           else {
               this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2);
@@ -16075,8 +16101,8 @@
       });
       await Promise.all(promiseList);
   }
-  function boundStroke(bounds, length, miter, pad = 0) {
-      bounds.expand(length + pad + (miter ? miterAdjustment(miter, length) : 0));
+  function boundStroke(bounds, halfW, miter, pad = 0) {
+      bounds.expand(halfW + (pad / 2 + (miter ? miterAdjustment(miter, halfW) : 0)));
       return bounds;
   }
   function miterAdjustment(miter, strokeWidth) {
@@ -17048,46 +17074,46 @@
           return ColorInterpolate.dataMap.get(stops);
       }
   }
-  class ConicalImageDataStore {
+  class ConicalPatternStore {
       static cache = {};
       static ImageSize = [20, 40, 80, 160, 320, 640, 1280, 2560];
       static GetSize(minSize) {
-          for (let i = 0; i < ConicalImageDataStore.ImageSize.length; i++) {
-              if (ConicalImageDataStore.ImageSize[i] >= minSize) {
-                  return ConicalImageDataStore.ImageSize[i];
+          for (let i = 0; i < ConicalPatternStore.ImageSize.length; i++) {
+              if (ConicalPatternStore.ImageSize[i] >= minSize) {
+                  return ConicalPatternStore.ImageSize[i];
               }
           }
           return minSize;
       }
       static Get(stops, x, y, startAngle, endAngle, w, h) {
-          const key = ConicalImageDataStore.GenKey(stops, x, y, startAngle, endAngle);
-          const data = ConicalImageDataStore.cache[key];
+          const key = ConicalPatternStore.GenKey(stops, x, y, startAngle, endAngle);
+          const data = ConicalPatternStore.cache[key];
           if (!data || data.length === 0) {
               return null;
           }
           for (let i = 0; i < data.length; i++) {
               if (data[i].width >= w && data[i].height >= h) {
-                  return data[i].imageData;
+                  return data[i].pattern;
               }
           }
           return null;
       }
-      static Set(stops, x, y, startAngle, endAngle, imageData, w, h) {
-          const key = ConicalImageDataStore.GenKey(stops, x, y, startAngle, endAngle);
-          if (!ConicalImageDataStore.cache[key]) {
-              ConicalImageDataStore.cache[key] = [
+      static Set(stops, x, y, startAngle, endAngle, pattern, w, h) {
+          const key = ConicalPatternStore.GenKey(stops, x, y, startAngle, endAngle);
+          if (!ConicalPatternStore.cache[key]) {
+              ConicalPatternStore.cache[key] = [
                   {
                       width: w,
                       height: h,
-                      imageData
+                      pattern
                   }
               ];
           }
           else {
-              ConicalImageDataStore.cache[key].push({
+              ConicalPatternStore.cache[key].push({
                   width: w,
                   height: h,
-                  imageData
+                  pattern
               });
           }
       }
@@ -17129,14 +17155,11 @@
       if (!conicalCtx) {
           return null;
       }
-      const width = ConicalImageDataStore.GetSize(minW);
-      const height = ConicalImageDataStore.GetSize(minH);
-      let imageData = ConicalImageDataStore.Get(stops, x, y, startAngle, endAngle, width, height);
-      if (imageData) {
-          conicalCanvas.width = imageData.width;
-          conicalCanvas.height = imageData.height;
-          conicalCtx.putImageData(imageData, 0, 0);
-          return context.createPattern(conicalCanvas, 'no-repeat');
+      const width = ConicalPatternStore.GetSize(minW);
+      const height = ConicalPatternStore.GetSize(minH);
+      let pattern = ConicalPatternStore.Get(stops, x, y, startAngle, endAngle, width, height);
+      if (pattern) {
+          return pattern;
       }
       const r = Math.sqrt(Math.max(Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)), Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2))));
       const stepNum = deltaDeg + 1;
@@ -17163,12 +17186,13 @@
           conicalCtx.closePath();
           conicalCtx.fill();
       }
-      imageData = conicalCtx.getImageData(0, 0, width, height);
-      ConicalImageDataStore.Set(stops, x, y, startAngle, endAngle, imageData, width, height);
+      const imageData = conicalCtx.getImageData(0, 0, width, height);
       conicalCanvas.width = imageData.width;
       conicalCanvas.height = imageData.height;
       conicalCtx.putImageData(imageData, 0, 0);
-      return context.createPattern(conicalCanvas, 'no-repeat');
+      pattern = context.createPattern(conicalCanvas, 'no-repeat');
+      ConicalPatternStore.Set(stops, x, y, startAngle, endAngle, pattern, width, height);
+      return pattern;
   }
 
   function getScaledStroke(context, width, dpr) {
@@ -19515,7 +19539,7 @@
           }
       }
       get repeatX() {
-          return this.attribute.repeatX ?? 'stretch';
+          return this.attribute.repeatX ?? 'no-repeat';
       }
       set repeatX(repeatX) {
           if (this.attribute.repeatX === repeatX) {
@@ -19523,7 +19547,7 @@
           }
       }
       get repeatY() {
-          return this.attribute.repeatY ?? 'stretch';
+          return this.attribute.repeatY ?? 'no-repeat';
       }
       set repeatY(repeatY) {
           if (this.attribute.repeatY === repeatY) {
@@ -19909,6 +19933,10 @@
                   if (this.lineWidth + paragraph[this.directionKey.width] <= this[this.directionKey.width]) {
                       this.store(paragraph);
                   }
+                  else if (this.lineBuffer.length === 0) {
+                      this.store(paragraph);
+                      this.send();
+                  }
                   else {
                       this.send();
                       this.deal(paragraph);
@@ -21491,7 +21519,7 @@
                   aabbBounds.union(tb1);
                   tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
               });
-          this.transformAABBBounds(attribute, aabbBounds, rectTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, rectTheme, false, graphic);
           return aabbBounds;
       }
       updateGroupAABBBounds(attribute, groupTheme, aabbBounds, graphic) {
@@ -21513,7 +21541,7 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, groupTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, groupTheme, false, graphic);
           return aabbBounds;
       }
       updateGlyphAABBBounds(attribute, theme, aabbBounds, graphic) {
@@ -21568,7 +21596,7 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, richtextTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, richtextTheme, false, graphic);
           return aabbBounds;
       }
       updateTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
@@ -21606,7 +21634,8 @@
                   aabbBounds.union(tb1);
                   tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
               });
-          this.transformAABBBounds(attribute, aabbBounds, pathTheme, graphic);
+          const { lineJoin = pathTheme.lineJoin } = attribute;
+          this.transformAABBBounds(attribute, aabbBounds, pathTheme, lineJoin === 'miter', graphic);
           return aabbBounds;
       }
       updatePathAABBBoundsImprecise(attribute, pathTheme, aabbBounds, graphic) {
@@ -21635,7 +21664,7 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, polygonTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, polygonTheme, false, graphic);
           return aabbBounds;
       }
       updateArc3dAABBBounds(attribute, arcTheme, aabbBounds, graphic) {
@@ -21653,7 +21682,7 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, arcTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, arcTheme, false, graphic);
           return aabbBounds;
       }
       updatePolygonAABBBounds(attribute, polygonTheme, aabbBounds, graphic) {
@@ -21664,7 +21693,8 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, polygonTheme, graphic);
+          const { lineJoin = polygonTheme.lineJoin } = attribute;
+          this.transformAABBBounds(attribute, aabbBounds, polygonTheme, lineJoin === 'miter', graphic);
           return aabbBounds;
       }
       updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds, graphic) {
@@ -21684,7 +21714,8 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, lineTheme, graphic);
+          const { lineJoin = lineTheme.lineJoin } = attribute;
+          this.transformAABBBounds(attribute, aabbBounds, lineTheme, lineJoin === 'miter', graphic);
           return aabbBounds;
       }
       updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds, graphic) {
@@ -21715,7 +21746,8 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, areaTheme, graphic);
+          const { lineJoin = areaTheme.lineJoin } = attribute;
+          this.transformAABBBounds(attribute, aabbBounds, areaTheme, lineJoin === 'miter', graphic);
           return aabbBounds;
       }
       updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds, graphic) {
@@ -21757,7 +21789,7 @@
                   aabbBounds.union(tb1);
                   tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
               });
-          this.transformAABBBounds(attribute, aabbBounds, circleTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, circleTheme, false, graphic);
           return aabbBounds;
       }
       updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds, graphic) {
@@ -21794,7 +21826,8 @@
                   aabbBounds.union(tb1);
                   tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
               });
-          this.transformAABBBounds(attribute, aabbBounds, arcTheme, graphic);
+          const { lineJoin = arcTheme.lineJoin } = attribute;
+          this.transformAABBBounds(attribute, aabbBounds, arcTheme, lineJoin === 'miter', graphic);
           return aabbBounds;
       }
       updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds, graphic) {
@@ -21803,7 +21836,13 @@
           return aabbBounds;
       }
       updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds, graphic) {
-          const { outerRadius = arcTheme.outerRadius, innerRadius = arcTheme.innerRadius, endAngle = arcTheme.endAngle, startAngle = arcTheme.startAngle } = attribute;
+          const { outerRadius = arcTheme.outerRadius, innerRadius = arcTheme.innerRadius } = attribute;
+          let { endAngle = arcTheme.endAngle, startAngle = arcTheme.startAngle } = attribute;
+          if (startAngle > endAngle) {
+              const temp = startAngle;
+              startAngle = endAngle;
+              endAngle = temp;
+          }
           if (outerRadius <= epsilon) {
               aabbBounds.set(0, 0, 0, 0);
           }
@@ -21835,7 +21874,8 @@
                   aabbBounds.union(tb1);
                   tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
               });
-          this.transformAABBBounds(attribute, aabbBounds, symbolTheme, graphic);
+          const { lineJoin = symbolTheme.lineJoin } = attribute;
+          this.transformAABBBounds(attribute, aabbBounds, symbolTheme, lineJoin === 'miter', graphic);
           return aabbBounds;
       }
       updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds, graphic) {
@@ -21867,7 +21907,7 @@
           const tb2 = this.tempAABBBounds2;
           tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
           tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-          this.transformAABBBounds(attribute, aabbBounds, imageTheme, graphic);
+          this.transformAABBBounds(attribute, aabbBounds, imageTheme, false, graphic);
           return aabbBounds;
       }
       combindShadowAABBBounds(bounds, graphic) {
@@ -21876,19 +21916,19 @@
               bounds.union(b);
           }
       }
-      transformAABBBounds(attribute, aabbBounds, theme, graphic) {
-          const { scaleX = theme.scaleX, scaleY = theme.scaleY, stroke = theme.stroke, shadowBlur = theme.shadowBlur, lineWidth = theme.lineWidth, lineJoin = theme.lineJoin, strokeBoundsBuffer = theme.strokeBoundsBuffer } = attribute;
+      transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
+          const { scaleX = theme.scaleX, scaleY = theme.scaleY, stroke = theme.stroke, shadowBlur = theme.shadowBlur, lineWidth = theme.lineWidth, strokeBoundsBuffer = theme.strokeBoundsBuffer } = attribute;
           const tb1 = this.tempAABBBounds1;
           const tb2 = this.tempAABBBounds2;
           if (stroke) {
               const scaledHalfLineWidth = lineWidth / Math.abs(scaleX + scaleY);
-              boundStroke(tb1, scaledHalfLineWidth, lineJoin === 'miter', strokeBoundsBuffer);
+              boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer);
               aabbBounds.union(tb1);
               tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
           }
           if (shadowBlur) {
               const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
-              boundStroke(tb1, shadowBlurHalfWidth, lineJoin === 'miter', strokeBoundsBuffer);
+              boundStroke(tb1, shadowBlurHalfWidth, miter, strokeBoundsBuffer);
               aabbBounds.union(tb1);
           }
           this.combindShadowAABBBounds(aabbBounds, graphic);
@@ -22207,11 +22247,6 @@
   }
   const canvasAllocate = new DefaultCanvasAllocate();
 
-  exports.BaseRenderContributionTime = void 0;
-  (function (BaseRenderContributionTime) {
-      BaseRenderContributionTime[BaseRenderContributionTime["beforeFillStroke"] = 0] = "beforeFillStroke";
-      BaseRenderContributionTime[BaseRenderContributionTime["afterFillStroke"] = 1] = "afterFillStroke";
-  })(exports.BaseRenderContributionTime || (exports.BaseRenderContributionTime = {}));
   exports.DefaultBaseBackgroundRenderContribution = class DefaultBaseBackgroundRenderContribution {
       time = exports.BaseRenderContributionTime.beforeFillStroke;
       useStyle = true;
@@ -22885,8 +22920,8 @@
       camera;
       transform(graphic, graphicAttribute, context, use3dMatrixIn3dMode = false) {
           const transMatrix = graphic.transMatrix;
-          const onlyTranslate = transMatrix.onlyTranslate();
-          const { x = graphicAttribute.x, y = graphicAttribute.y, z = graphicAttribute.z, scaleX = graphicAttribute.scaleX, scaleY = graphicAttribute.scaleY, angle = graphicAttribute.angle } = graphic.attribute;
+          const { x = graphicAttribute.x, y = graphicAttribute.y, z = graphicAttribute.z, scaleX = graphicAttribute.scaleX, scaleY = graphicAttribute.scaleY, angle = graphicAttribute.angle, postMatrix } = graphic.attribute;
+          const onlyTranslate = transMatrix.onlyTranslate() && !postMatrix;
           const lastModelMatrix = context.modelMatrix;
           const camera = context.camera;
           const result = { x, y, z, lastModelMatrix };
@@ -23308,462 +23343,107 @@
       injectable()
   ], DefaultAreaTextureRenderContribution);
 
-  const GroupRenderContribution = Symbol.for('GroupRenderContribution');
-  exports.DefaultGroupBackgroundRenderContribution = class DefaultGroupBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
-      time = exports.BaseRenderContributionTime.beforeFillStroke;
-      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, fillCb, strokeCb) {
-          const { background } = graphic.attribute;
-          if (!background) {
-              return;
-          }
-          if (graphic.backgroundImg && graphic.resources) {
-              const res = graphic.resources.get(background);
-              if (res.state !== 'success' || !res.data) {
-                  return;
+  function drawAreaSegments(path, segPath, percent, params) {
+      const { top, bottom } = segPath;
+      if (percent >= 1) {
+          const topList = [];
+          const bottomList = [];
+          let lastDefined = true;
+          for (let i = 0, n = top.curves.length; i < n; i++) {
+              const topCurve = top.curves[i];
+              if (lastDefined !== topCurve.defined) {
+                  if (lastDefined) {
+                      drawAreaBlock(path, topList, bottomList, params);
+                      topList.length = 0;
+                      bottomList.length = 0;
+                  }
+                  else {
+                      topList.push(topCurve);
+                      bottomList.push(bottom.curves[n - i - 1]);
+                  }
+                  lastDefined = !lastDefined;
+              }
+              else {
+                  if (lastDefined) {
+                      topList.push(topCurve);
+                      bottomList.push(bottom.curves[n - i - 1]);
+                  }
               }
-              context.highPerformanceSave();
-              context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
-              const b = graphic.AABBBounds;
-              context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
-              context.highPerformanceRestore();
-              context.setTransformForCurrent();
-          }
-          else {
-              context.highPerformanceSave();
-              context.fillStyle = background;
-              context.fill();
-              context.highPerformanceRestore();
           }
+          drawAreaBlock(path, topList, bottomList, params);
+          return;
       }
-  };
-  exports.DefaultGroupBackgroundRenderContribution = __decorate([
-      injectable()
-  ], exports.DefaultGroupBackgroundRenderContribution);
-
-  const ImageRenderContribution = Symbol.for('ImageRenderContribution');
-  exports.DefaultImageBackgroundRenderContribution = class DefaultImageBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
-      time = exports.BaseRenderContributionTime.beforeFillStroke;
-      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, fillCb, strokeCb) {
-          const { background, width, height } = graphic.attribute;
-          if (!background) {
-              return;
+      if (percent <= 0) {
+          return;
+      }
+      let { direction } = params || {};
+      const { curves: topCurves } = top;
+      const endP = topCurves[topCurves.length - 1].p3 ?? topCurves[topCurves.length - 1].p1;
+      const xTotalLength = abs(endP.x - topCurves[0].p0.x);
+      const yTotalLength = abs(endP.y - topCurves[0].p0.y);
+      direction = direction ?? (xTotalLength > yTotalLength ? exports.Direction.ROW : exports.Direction.COLUMN);
+      if (!Number.isFinite(xTotalLength)) {
+          direction = exports.Direction.COLUMN;
+      }
+      if (!Number.isFinite(yTotalLength)) {
+          direction = exports.Direction.ROW;
+      }
+      const totalLength = direction === exports.Direction.ROW ? xTotalLength : yTotalLength;
+      const totalDrawLength = percent * totalLength;
+      let drawedLengthUntilLast = 0;
+      let lastDefined = true;
+      const topList = [];
+      const bottomList = [];
+      for (let i = 0, n = top.curves.length; i < n; i++) {
+          const topCurve = top.curves[i];
+          const curCurveLength = topCurve.getLength(direction);
+          const percent = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
+          if (percent < 0) {
+              break;
           }
-          if (!graphic.backgroundImg) {
-              context.beginPath();
-              const b = graphic.AABBBounds;
-              context.rect(x, y, b.width(), b.height());
-              context.fillStyle = background;
-              context.globalAlpha = 1;
-              context.fill();
+          drawedLengthUntilLast += curCurveLength;
+          let tc = null;
+          let bc = null;
+          if (lastDefined !== topCurve.defined) {
+              if (lastDefined) {
+                  drawAreaBlock(path, topList, bottomList, params);
+                  topList.length = 0;
+                  bottomList.length = 0;
+              }
+              else {
+                  tc = topCurve;
+                  bc = bottom.curves[n - i - 1];
+              }
+              lastDefined = !lastDefined;
           }
           else {
-              const res = graphic.resources.get(background);
-              if (res.state !== 'success' || !res.data) {
-                  return;
-              }
-              context.save();
-              if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {
-                  const groupAttribute = getTheme(graphic.parent).group;
-                  const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;
-                  context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
-                  context.translate(scrollX, scrollY);
+              if (lastDefined) {
+                  tc = topCurve;
+                  bc = bottom.curves[n - i - 1];
               }
-              const b = graphic.AABBBounds;
-              context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
-              context.restore();
-              if (!graphic.transMatrix.onlyTranslate()) {
-                  context.setTransformForCurrent();
+          }
+          if (tc && bc) {
+              if (percent < 1) {
+                  if (tc.p2 && tc.p3) {
+                      tc = divideCubic(tc, percent)[0];
+                  }
+                  else {
+                      tc = divideLinear(tc, percent)[0];
+                  }
+                  if (bc.p2 && bc.p3) {
+                      bc = divideCubic(bc, 1 - percent)[1];
+                  }
+                  else {
+                      bc = divideLinear(bc, 1 - percent)[1];
+                  }
               }
+              tc.defined = lastDefined;
+              bc.defined = lastDefined;
+              topList.push(tc);
+              bottomList.push(bc);
           }
-      }
-  };
-  exports.DefaultImageBackgroundRenderContribution = __decorate([
-      injectable()
-  ], exports.DefaultImageBackgroundRenderContribution);
-
-  const halfPi = pi / 2;
-  function createRectPath(path, x, y, width, height, rectCornerRadius) {
-      let cornerRadius;
-      if (isNumber(rectCornerRadius, true)) {
-          cornerRadius = [
-              rectCornerRadius,
-              rectCornerRadius,
-              rectCornerRadius,
-              rectCornerRadius
-          ];
-      }
-      else if (Array.isArray(rectCornerRadius)) {
-          const cornerRadiusArr = rectCornerRadius;
-          switch (cornerRadiusArr.length) {
-              case 0:
-                  cornerRadius = [0, 0, 0, 0];
-                  break;
-              case 1:
-                  cornerRadius = [cornerRadiusArr[0], cornerRadiusArr[0], cornerRadiusArr[0], cornerRadiusArr[0]];
-                  break;
-              case 2:
-              case 3:
-                  cornerRadius = [cornerRadiusArr[0], cornerRadiusArr[1], cornerRadiusArr[0], cornerRadiusArr[1]];
-                  break;
-              default:
-                  cornerRadius = cornerRadiusArr.slice(0, 5);
-                  break;
-          }
-      }
-      else {
-          cornerRadius = [0, 0, 0, 0];
-      }
-      if (width < 0 ||
-          Math.abs(cornerRadius[0]) + Math.abs(cornerRadius[1]) + Math.abs(cornerRadius[2]) + Math.abs(cornerRadius[3]) <
-              1e-12) {
-          return path.rect(x, y, width, height);
-      }
-      const [leftTop, rightTop, rightBottom, leftBottom] = [
-          [x, y],
-          [x + width, y],
-          [x + width, y + height],
-          [x, y + height]
-      ];
-      const maxCornerRadius = Math.min(width / 2, height / 2);
-      const _cornerRadius = [
-          Math.min(maxCornerRadius, cornerRadius[0]),
-          Math.min(maxCornerRadius, cornerRadius[1]),
-          Math.min(maxCornerRadius, cornerRadius[2]),
-          Math.min(maxCornerRadius, cornerRadius[3])
-      ];
-      const leftTopPoint1 = [leftTop[0] + _cornerRadius[0], leftTop[1]];
-      const leftTopPoint2 = [leftTop[0], leftTop[1] + _cornerRadius[0]];
-      const rightTopPoint1 = [rightTop[0] - _cornerRadius[1], rightTop[1]];
-      const rightTopPoint2 = [rightTop[0], rightTop[1] + _cornerRadius[1]];
-      const rightBottomPoint1 = [rightBottom[0] - _cornerRadius[2], rightBottom[1]];
-      const rightBottomPoint2 = [rightBottom[0], rightBottom[1] - _cornerRadius[2]];
-      const leftBottomPoint1 = [leftBottom[0] + _cornerRadius[3], leftBottom[1]];
-      const leftBottomPoint2 = [leftBottom[0], leftBottom[1] - _cornerRadius[3]];
-      path.moveTo(leftTopPoint1[0], leftTopPoint1[1]);
-      path.lineTo(rightTopPoint1[0], rightTopPoint1[1]);
-      if (!arrayEqual(rightTopPoint1, rightTopPoint2)) {
-          const centerX = rightTopPoint1[0];
-          const centerY = rightTopPoint1[1] + _cornerRadius[1];
-          path.arc(centerX, centerY, _cornerRadius[1], -halfPi, 0, false);
-      }
-      path.lineTo(rightBottomPoint2[0], rightBottomPoint2[1]);
-      if (!arrayEqual(rightBottomPoint1, rightBottomPoint2)) {
-          const centerX = rightBottomPoint2[0] - _cornerRadius[2];
-          const centerY = rightBottomPoint2[1];
-          path.arc(centerX, centerY, _cornerRadius[2], 0, halfPi, false);
-      }
-      path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]);
-      if (!arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
-          const centerX = leftBottomPoint1[0];
-          const centerY = leftBottomPoint1[1] - _cornerRadius[3];
-          path.arc(centerX, centerY, _cornerRadius[3], halfPi, pi, false);
-      }
-      path.lineTo(leftTopPoint2[0], leftTopPoint2[1]);
-      if (!arrayEqual(leftTopPoint1, leftTopPoint2)) {
-          const centerX = leftTopPoint1[0];
-          const centerY = leftTopPoint1[1] + _cornerRadius[0];
-          path.arc(centerX, centerY, _cornerRadius[0], pi, pi + halfPi, false);
-      }
-      path.closePath();
-      return path;
-  }
-
-  const RectRenderContribution = Symbol.for('RectRenderContribution');
-  exports.DefaultRectRenderContribution = class DefaultRectRenderContribution {
-      time = exports.BaseRenderContributionTime.afterFillStroke;
-      useStyle = true;
-      order = 0;
-      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, fillCb, strokeCb) {
-          const { width = rectAttribute.width, height = rectAttribute.height, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, outerBorder, innerBorder } = rect.attribute;
-          if (outerBorder) {
-              const { distance = rectAttribute.outerBorder.distance } = outerBorder;
-              const d = getScaledStroke(context, distance, context.dpr);
-              const nextX = x - d;
-              const nextY = y - d;
-              const dw = d * 2;
-              if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
-                  context.beginPath();
-                  context.rect(nextX, nextY, width + dw, height + dw);
-              }
-              else {
-                  context.beginPath();
-                  createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius);
-              }
-              context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
-              if (strokeCb) {
-                  strokeCb(context, outerBorder, rectAttribute.outerBorder);
-              }
-              else if (sVisible) {
-                  const lastOpacity = rectAttribute.outerBorder.opacity;
-                  rectAttribute.outerBorder.opacity = opacity;
-                  context.setStrokeStyle(rect, outerBorder, x, y, rectAttribute.outerBorder);
-                  rectAttribute.outerBorder.opacity = lastOpacity;
-                  context.stroke();
-              }
-          }
-          if (innerBorder) {
-              const { distance = rectAttribute.innerBorder.distance } = innerBorder;
-              const d = getScaledStroke(context, distance, context.dpr);
-              const nextX = x + d;
-              const nextY = y + d;
-              const dw = d * 2;
-              if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
-                  context.beginPath();
-                  context.rect(nextX, nextY, width - dw, height - dw);
-              }
-              else {
-                  context.beginPath();
-                  createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius);
-              }
-              context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
-              if (strokeCb) {
-                  strokeCb(context, innerBorder, rectAttribute.innerBorder);
-              }
-              else if (sVisible) {
-                  const lastOpacity = rectAttribute.innerBorder.opacity;
-                  rectAttribute.innerBorder.opacity = opacity;
-                  context.setStrokeStyle(rect, innerBorder, x, y, rectAttribute.innerBorder);
-                  rectAttribute.innerBorder.opacity = lastOpacity;
-                  context.stroke();
-              }
-          }
-      }
-  };
-  exports.DefaultRectRenderContribution = __decorate([
-      injectable()
-  ], exports.DefaultRectRenderContribution);
-  exports.DefaultRectBackgroundRenderContribution = class DefaultRectBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
-      time = exports.BaseRenderContributionTime.beforeFillStroke;
-  };
-  exports.DefaultRectBackgroundRenderContribution = __decorate([
-      injectable()
-  ], exports.DefaultRectBackgroundRenderContribution);
-  exports.DefaultRectTextureRenderContribution = class DefaultRectTextureRenderContribution extends exports.DefaultBaseTextureRenderContribution {
-      time = exports.BaseRenderContributionTime.afterFillStroke;
-  };
-  exports.DefaultRectTextureRenderContribution = __decorate([
-      injectable()
-  ], exports.DefaultRectTextureRenderContribution);
-  exports.SplitRectBeforeRenderContribution = class SplitRectBeforeRenderContribution {
-      time = exports.BaseRenderContributionTime.beforeFillStroke;
-      useStyle = true;
-      order = 0;
-      drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, fillCb, strokeCb, doFillOrStroke) {
-          const { stroke = groupAttribute.stroke } = group.attribute;
-          if (Array.isArray(stroke) && stroke.some(s => s === false)) {
-              doFillOrStroke.doStroke = false;
-          }
-      }
-  };
-  exports.SplitRectBeforeRenderContribution = __decorate([
-      injectable()
-  ], exports.SplitRectBeforeRenderContribution);
-  exports.SplitRectAfterRenderContribution = class SplitRectAfterRenderContribution {
-      time = exports.BaseRenderContributionTime.afterFillStroke;
-      useStyle = true;
-      order = 0;
-      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, fillCb, strokeCb) {
-          const { width = groupAttribute.width, height = groupAttribute.height, stroke = groupAttribute.stroke } = rect.attribute;
-          if (!(Array.isArray(stroke) && stroke.some(s => s === false))) {
-              return;
-          }
-          context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute);
-          context.beginPath();
-          context.moveTo(x, y);
-          if (stroke[0]) {
-              context.lineTo(x + width, y);
-          }
-          else {
-              context.moveTo(x + width, y);
-          }
-          if (stroke[1]) {
-              context.lineTo(x + width, y + height);
-          }
-          else {
-              context.moveTo(x + width, y + height);
-          }
-          if (stroke[2]) {
-              context.lineTo(x, y + height);
-          }
-          else {
-              context.moveTo(x, y + height);
-          }
-          if (stroke[3]) {
-              const adjustY = stroke[0] ? y - context.lineWidth / 2 : y;
-              context.lineTo(x, adjustY);
-          }
-          else {
-              context.moveTo(x, y);
-          }
-          context.stroke();
-      }
-  };
-  exports.SplitRectAfterRenderContribution = __decorate([
-      injectable()
-  ], exports.SplitRectAfterRenderContribution);
-
-  const SymbolRenderContribution = Symbol.for('SymbolRenderContribution');
-  exports.DefaultSymbolRenderContribution = class DefaultSymbolRenderContribution {
-      time = exports.BaseRenderContributionTime.afterFillStroke;
-      useStyle = true;
-      order = 0;
-      drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, fillCb, strokeCb) {
-          const { size = symbolAttribute.size, opacity = symbolAttribute.opacity, outerBorder, innerBorder } = symbol.attribute;
-          const parsedPath = symbol.getParsedPath();
-          if (!parsedPath) {
-              return;
-          }
-          if (outerBorder) {
-              const { distance = symbolAttribute.outerBorder.distance } = outerBorder;
-              const d = getScaledStroke(context, distance, context.dpr);
-              context.beginPath();
-              if (parsedPath.drawOffset(context, size, x, y, d) === false) {
-                  context.closePath();
-              }
-              context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
-              if (strokeCb) {
-                  strokeCb(context, outerBorder, symbolAttribute.outerBorder);
-              }
-              else if (sVisible) {
-                  const lastOpacity = symbolAttribute.outerBorder.opacity;
-                  symbolAttribute.outerBorder.opacity = opacity;
-                  context.setStrokeStyle(symbol, outerBorder, x, y, symbolAttribute.outerBorder);
-                  symbolAttribute.outerBorder.opacity = lastOpacity;
-                  context.stroke();
-              }
-          }
-          if (innerBorder) {
-              const { distance = symbolAttribute.innerBorder.distance } = innerBorder;
-              const d = getScaledStroke(context, distance, context.dpr);
-              context.beginPath();
-              if (parsedPath.drawOffset(context, size, x, y, -d) === false) {
-                  context.closePath();
-              }
-              context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
-              if (strokeCb) {
-                  strokeCb(context, innerBorder, symbolAttribute.innerBorder);
-              }
-              else if (sVisible) {
-                  const lastOpacity = symbolAttribute.innerBorder.opacity;
-                  symbolAttribute.innerBorder.opacity = opacity;
-                  context.setStrokeStyle(symbol, innerBorder, x, y, symbolAttribute.innerBorder);
-                  symbolAttribute.innerBorder.opacity = lastOpacity;
-                  context.stroke();
-              }
-          }
-      }
-  };
-  exports.DefaultSymbolRenderContribution = __decorate([
-      injectable()
-  ], exports.DefaultSymbolRenderContribution);
-  class DefaultSymbolBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
-      time = exports.BaseRenderContributionTime.beforeFillStroke;
-  }
-  class DefaultSymbolTextureRenderContribution extends exports.DefaultBaseTextureRenderContribution {
-      time = exports.BaseRenderContributionTime.afterFillStroke;
-  }
-
-  function drawAreaSegments(path, segPath, percent, params) {
-      const { top, bottom } = segPath;
-      if (percent >= 1) {
-          const topList = [];
-          const bottomList = [];
-          let lastDefined = true;
-          for (let i = 0, n = top.curves.length; i < n; i++) {
-              const topCurve = top.curves[i];
-              if (lastDefined !== topCurve.defined) {
-                  if (lastDefined) {
-                      drawAreaBlock(path, topList, bottomList, params);
-                      topList.length = 0;
-                      bottomList.length = 0;
-                  }
-                  else {
-                      topList.push(topCurve);
-                      bottomList.push(bottom.curves[n - i - 1]);
-                  }
-                  lastDefined = !lastDefined;
-              }
-              else {
-                  if (lastDefined) {
-                      topList.push(topCurve);
-                      bottomList.push(bottom.curves[n - i - 1]);
-                  }
-              }
-          }
-          drawAreaBlock(path, topList, bottomList, params);
-          return;
-      }
-      if (percent <= 0) {
-          return;
-      }
-      let { direction } = params || {};
-      const { curves: topCurves } = top;
-      const endP = topCurves[topCurves.length - 1].p3 ?? topCurves[topCurves.length - 1].p1;
-      const xTotalLength = abs(endP.x - topCurves[0].p0.x);
-      const yTotalLength = abs(endP.y - topCurves[0].p0.y);
-      direction = direction ?? (xTotalLength > yTotalLength ? exports.Direction.ROW : exports.Direction.COLUMN);
-      if (!Number.isFinite(xTotalLength)) {
-          direction = exports.Direction.COLUMN;
-      }
-      if (!Number.isFinite(yTotalLength)) {
-          direction = exports.Direction.ROW;
-      }
-      const totalLength = direction === exports.Direction.ROW ? xTotalLength : yTotalLength;
-      const totalDrawLength = percent * totalLength;
-      let drawedLengthUntilLast = 0;
-      let lastDefined = true;
-      const topList = [];
-      const bottomList = [];
-      for (let i = 0, n = top.curves.length; i < n; i++) {
-          const topCurve = top.curves[i];
-          const curCurveLength = topCurve.getLength(direction);
-          const percent = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
-          if (percent < 0) {
-              break;
-          }
-          drawedLengthUntilLast += curCurveLength;
-          let tc = null;
-          let bc = null;
-          if (lastDefined !== topCurve.defined) {
-              if (lastDefined) {
-                  drawAreaBlock(path, topList, bottomList, params);
-                  topList.length = 0;
-                  bottomList.length = 0;
-              }
-              else {
-                  tc = topCurve;
-                  bc = bottom.curves[n - i - 1];
-              }
-              lastDefined = !lastDefined;
-          }
-          else {
-              if (lastDefined) {
-                  tc = topCurve;
-                  bc = bottom.curves[n - i - 1];
-              }
-          }
-          if (tc && bc) {
-              if (percent < 1) {
-                  if (tc.p2 && tc.p3) {
-                      tc = divideCubic(tc, percent)[0];
-                  }
-                  else {
-                      tc = divideLinear(tc, percent)[0];
-                  }
-                  if (bc.p2 && bc.p3) {
-                      bc = divideCubic(bc, 1 - percent)[1];
-                  }
-                  else {
-                      bc = divideLinear(bc, 1 - percent)[1];
-                  }
-              }
-              tc.defined = lastDefined;
-              bc.defined = lastDefined;
-              topList.push(tc);
-              bottomList.push(bc);
-          }
-          tc = null;
-          bc = null;
+          tc = null;
+          bc = null;
       }
       drawAreaBlock(path, topList, bottomList, params);
   }
@@ -24116,35 +23796,256 @@
               }
           });
       }
-      draw(path, renderService, drawContext, params) {
-          const { context } = drawContext;
-          if (!context) {
+      draw(path, renderService, drawContext, params) {
+          const { context } = drawContext;
+          if (!context) {
+              return;
+          }
+          context.highPerformanceSave();
+          const pathAttribute = getTheme(path, params?.theme).path;
+          const data = this.transform(path, pathAttribute, context);
+          const { x, y, z, lastModelMatrix } = data;
+          this.z = z;
+          if (drawPathProxy(path, context, x, y, drawContext, params)) {
+              context.highPerformanceRestore();
+              return;
+          }
+          this.drawShape(path, context, x, y, drawContext, params);
+          this.z = 0;
+          if (context.modelMatrix !== lastModelMatrix) {
+              mat4Allocate.free(context.modelMatrix);
+          }
+          context.modelMatrix = lastModelMatrix;
+          context.highPerformanceRestore();
+      }
+  };
+  exports.DefaultCanvasPathRender = __decorate([
+      injectable(),
+      __param(0, inject(ContributionProvider)),
+      __param(0, named(PathRenderContribution)),
+      __metadata("design:paramtypes", [Object])
+  ], exports.DefaultCanvasPathRender);
+
+  const halfPi = pi / 2;
+  function createRectPath(path, x, y, width, height, rectCornerRadius) {
+      let cornerRadius;
+      if (isNumber(rectCornerRadius, true)) {
+          cornerRadius = [
+              rectCornerRadius,
+              rectCornerRadius,
+              rectCornerRadius,
+              rectCornerRadius
+          ];
+      }
+      else if (Array.isArray(rectCornerRadius)) {
+          const cornerRadiusArr = rectCornerRadius;
+          switch (cornerRadiusArr.length) {
+              case 0:
+                  cornerRadius = [0, 0, 0, 0];
+                  break;
+              case 1:
+                  cornerRadius = [cornerRadiusArr[0], cornerRadiusArr[0], cornerRadiusArr[0], cornerRadiusArr[0]];
+                  break;
+              case 2:
+              case 3:
+                  cornerRadius = [cornerRadiusArr[0], cornerRadiusArr[1], cornerRadiusArr[0], cornerRadiusArr[1]];
+                  break;
+              default:
+                  cornerRadius = cornerRadiusArr.slice(0, 5);
+                  break;
+          }
+      }
+      else {
+          cornerRadius = [0, 0, 0, 0];
+      }
+      if (width < 0 ||
+          Math.abs(cornerRadius[0]) + Math.abs(cornerRadius[1]) + Math.abs(cornerRadius[2]) + Math.abs(cornerRadius[3]) <
+              1e-12) {
+          return path.rect(x, y, width, height);
+      }
+      const [leftTop, rightTop, rightBottom, leftBottom] = [
+          [x, y],
+          [x + width, y],
+          [x + width, y + height],
+          [x, y + height]
+      ];
+      const maxCornerRadius = Math.min(width / 2, height / 2);
+      const _cornerRadius = [
+          Math.min(maxCornerRadius, cornerRadius[0]),
+          Math.min(maxCornerRadius, cornerRadius[1]),
+          Math.min(maxCornerRadius, cornerRadius[2]),
+          Math.min(maxCornerRadius, cornerRadius[3])
+      ];
+      const leftTopPoint1 = [leftTop[0] + _cornerRadius[0], leftTop[1]];
+      const leftTopPoint2 = [leftTop[0], leftTop[1] + _cornerRadius[0]];
+      const rightTopPoint1 = [rightTop[0] - _cornerRadius[1], rightTop[1]];
+      const rightTopPoint2 = [rightTop[0], rightTop[1] + _cornerRadius[1]];
+      const rightBottomPoint1 = [rightBottom[0] - _cornerRadius[2], rightBottom[1]];
+      const rightBottomPoint2 = [rightBottom[0], rightBottom[1] - _cornerRadius[2]];
+      const leftBottomPoint1 = [leftBottom[0] + _cornerRadius[3], leftBottom[1]];
+      const leftBottomPoint2 = [leftBottom[0], leftBottom[1] - _cornerRadius[3]];
+      path.moveTo(leftTopPoint1[0], leftTopPoint1[1]);
+      path.lineTo(rightTopPoint1[0], rightTopPoint1[1]);
+      if (!arrayEqual(rightTopPoint1, rightTopPoint2)) {
+          const centerX = rightTopPoint1[0];
+          const centerY = rightTopPoint1[1] + _cornerRadius[1];
+          path.arc(centerX, centerY, _cornerRadius[1], -halfPi, 0, false);
+      }
+      path.lineTo(rightBottomPoint2[0], rightBottomPoint2[1]);
+      if (!arrayEqual(rightBottomPoint1, rightBottomPoint2)) {
+          const centerX = rightBottomPoint2[0] - _cornerRadius[2];
+          const centerY = rightBottomPoint2[1];
+          path.arc(centerX, centerY, _cornerRadius[2], 0, halfPi, false);
+      }
+      path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]);
+      if (!arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
+          const centerX = leftBottomPoint1[0];
+          const centerY = leftBottomPoint1[1] - _cornerRadius[3];
+          path.arc(centerX, centerY, _cornerRadius[3], halfPi, pi, false);
+      }
+      path.lineTo(leftTopPoint2[0], leftTopPoint2[1]);
+      if (!arrayEqual(leftTopPoint1, leftTopPoint2)) {
+          const centerX = leftTopPoint1[0];
+          const centerY = leftTopPoint1[1] + _cornerRadius[0];
+          path.arc(centerX, centerY, _cornerRadius[0], pi, pi + halfPi, false);
+      }
+      path.closePath();
+      return path;
+  }
+
+  const RectRenderContribution = Symbol.for('RectRenderContribution');
+  exports.DefaultRectRenderContribution = class DefaultRectRenderContribution {
+      time = exports.BaseRenderContributionTime.afterFillStroke;
+      useStyle = true;
+      order = 0;
+      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, fillCb, strokeCb) {
+          const { width = rectAttribute.width, height = rectAttribute.height, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, outerBorder, innerBorder } = rect.attribute;
+          if (outerBorder) {
+              const { distance = rectAttribute.outerBorder.distance } = outerBorder;
+              const d = getScaledStroke(context, distance, context.dpr);
+              const nextX = x - d;
+              const nextY = y - d;
+              const dw = d * 2;
+              if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+                  context.beginPath();
+                  context.rect(nextX, nextY, width + dw, height + dw);
+              }
+              else {
+                  context.beginPath();
+                  createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius);
+              }
+              context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
+              if (strokeCb) {
+                  strokeCb(context, outerBorder, rectAttribute.outerBorder);
+              }
+              else if (sVisible) {
+                  const lastOpacity = rectAttribute.outerBorder.opacity;
+                  rectAttribute.outerBorder.opacity = opacity;
+                  context.setStrokeStyle(rect, outerBorder, x, y, rectAttribute.outerBorder);
+                  rectAttribute.outerBorder.opacity = lastOpacity;
+                  context.stroke();
+              }
+          }
+          if (innerBorder) {
+              const { distance = rectAttribute.innerBorder.distance } = innerBorder;
+              const d = getScaledStroke(context, distance, context.dpr);
+              const nextX = x + d;
+              const nextY = y + d;
+              const dw = d * 2;
+              if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+                  context.beginPath();
+                  context.rect(nextX, nextY, width - dw, height - dw);
+              }
+              else {
+                  context.beginPath();
+                  createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius);
+              }
+              context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
+              if (strokeCb) {
+                  strokeCb(context, innerBorder, rectAttribute.innerBorder);
+              }
+              else if (sVisible) {
+                  const lastOpacity = rectAttribute.innerBorder.opacity;
+                  rectAttribute.innerBorder.opacity = opacity;
+                  context.setStrokeStyle(rect, innerBorder, x, y, rectAttribute.innerBorder);
+                  rectAttribute.innerBorder.opacity = lastOpacity;
+                  context.stroke();
+              }
+          }
+      }
+  };
+  exports.DefaultRectRenderContribution = __decorate([
+      injectable()
+  ], exports.DefaultRectRenderContribution);
+  exports.DefaultRectBackgroundRenderContribution = class DefaultRectBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
+      time = exports.BaseRenderContributionTime.beforeFillStroke;
+  };
+  exports.DefaultRectBackgroundRenderContribution = __decorate([
+      injectable()
+  ], exports.DefaultRectBackgroundRenderContribution);
+  exports.DefaultRectTextureRenderContribution = class DefaultRectTextureRenderContribution extends exports.DefaultBaseTextureRenderContribution {
+      time = exports.BaseRenderContributionTime.afterFillStroke;
+  };
+  exports.DefaultRectTextureRenderContribution = __decorate([
+      injectable()
+  ], exports.DefaultRectTextureRenderContribution);
+  exports.SplitRectBeforeRenderContribution = class SplitRectBeforeRenderContribution {
+      time = exports.BaseRenderContributionTime.beforeFillStroke;
+      useStyle = true;
+      order = 0;
+      drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, fillCb, strokeCb, doFillOrStroke) {
+          const { stroke = groupAttribute.stroke } = group.attribute;
+          if (Array.isArray(stroke) && stroke.some(s => s === false)) {
+              doFillOrStroke.doStroke = false;
+          }
+      }
+  };
+  exports.SplitRectBeforeRenderContribution = __decorate([
+      injectable()
+  ], exports.SplitRectBeforeRenderContribution);
+  exports.SplitRectAfterRenderContribution = class SplitRectAfterRenderContribution {
+      time = exports.BaseRenderContributionTime.afterFillStroke;
+      useStyle = true;
+      order = 0;
+      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, fillCb, strokeCb) {
+          const { width = groupAttribute.width, height = groupAttribute.height, stroke = groupAttribute.stroke } = rect.attribute;
+          if (!(Array.isArray(stroke) && stroke.some(s => s === false))) {
               return;
           }
-          context.highPerformanceSave();
-          const pathAttribute = getTheme(path, params?.theme).path;
-          const data = this.transform(path, pathAttribute, context);
-          const { x, y, z, lastModelMatrix } = data;
-          this.z = z;
-          if (drawPathProxy(path, context, x, y, drawContext, params)) {
-              context.highPerformanceRestore();
-              return;
+          context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute);
+          context.beginPath();
+          context.moveTo(x, y);
+          if (stroke[0]) {
+              context.lineTo(x + width, y);
           }
-          this.drawShape(path, context, x, y, drawContext, params);
-          this.z = 0;
-          if (context.modelMatrix !== lastModelMatrix) {
-              mat4Allocate.free(context.modelMatrix);
+          else {
+              context.moveTo(x + width, y);
           }
-          context.modelMatrix = lastModelMatrix;
-          context.highPerformanceRestore();
+          if (stroke[1]) {
+              context.lineTo(x + width, y + height);
+          }
+          else {
+              context.moveTo(x + width, y + height);
+          }
+          if (stroke[2]) {
+              context.lineTo(x, y + height);
+          }
+          else {
+              context.moveTo(x, y + height);
+          }
+          if (stroke[3]) {
+              const adjustY = stroke[0] ? y - context.lineWidth / 2 : y;
+              context.lineTo(x, adjustY);
+          }
+          else {
+              context.moveTo(x, y);
+          }
+          context.stroke();
       }
   };
-  exports.DefaultCanvasPathRender = __decorate([
-      injectable(),
-      __param(0, inject(ContributionProvider)),
-      __param(0, named(PathRenderContribution)),
-      __metadata("design:paramtypes", [Object])
-  ], exports.DefaultCanvasPathRender);
+  exports.SplitRectAfterRenderContribution = __decorate([
+      injectable()
+  ], exports.SplitRectAfterRenderContribution);
 
   exports.DefaultCanvasRectRender = class DefaultCanvasRectRender {
       rectRenderContribitions;
@@ -24250,6 +24151,67 @@
       __metadata("design:paramtypes", [Object])
   ], exports.DefaultCanvasRectRender);
 
+  const SymbolRenderContribution = Symbol.for('SymbolRenderContribution');
+  exports.DefaultSymbolRenderContribution = class DefaultSymbolRenderContribution {
+      time = exports.BaseRenderContributionTime.afterFillStroke;
+      useStyle = true;
+      order = 0;
+      drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, fillCb, strokeCb) {
+          const { size = symbolAttribute.size, opacity = symbolAttribute.opacity, outerBorder, innerBorder } = symbol.attribute;
+          const parsedPath = symbol.getParsedPath();
+          if (!parsedPath) {
+              return;
+          }
+          if (outerBorder) {
+              const { distance = symbolAttribute.outerBorder.distance } = outerBorder;
+              const d = getScaledStroke(context, distance, context.dpr);
+              context.beginPath();
+              if (parsedPath.drawOffset(context, size, x, y, d) === false) {
+                  context.closePath();
+              }
+              context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
+              if (strokeCb) {
+                  strokeCb(context, outerBorder, symbolAttribute.outerBorder);
+              }
+              else if (sVisible) {
+                  const lastOpacity = symbolAttribute.outerBorder.opacity;
+                  symbolAttribute.outerBorder.opacity = opacity;
+                  context.setStrokeStyle(symbol, outerBorder, x, y, symbolAttribute.outerBorder);
+                  symbolAttribute.outerBorder.opacity = lastOpacity;
+                  context.stroke();
+              }
+          }
+          if (innerBorder) {
+              const { distance = symbolAttribute.innerBorder.distance } = innerBorder;
+              const d = getScaledStroke(context, distance, context.dpr);
+              context.beginPath();
+              if (parsedPath.drawOffset(context, size, x, y, -d) === false) {
+                  context.closePath();
+              }
+              context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
+              if (strokeCb) {
+                  strokeCb(context, innerBorder, symbolAttribute.innerBorder);
+              }
+              else if (sVisible) {
+                  const lastOpacity = symbolAttribute.innerBorder.opacity;
+                  symbolAttribute.innerBorder.opacity = opacity;
+                  context.setStrokeStyle(symbol, innerBorder, x, y, symbolAttribute.innerBorder);
+                  symbolAttribute.innerBorder.opacity = lastOpacity;
+                  context.stroke();
+              }
+          }
+      }
+  };
+  exports.DefaultSymbolRenderContribution = __decorate([
+      injectable()
+  ], exports.DefaultSymbolRenderContribution);
+  class DefaultSymbolBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
+      time = exports.BaseRenderContributionTime.beforeFillStroke;
+  }
+  class DefaultSymbolTextureRenderContribution extends exports.DefaultBaseTextureRenderContribution {
+      time = exports.BaseRenderContributionTime.afterFillStroke;
+  }
+
   exports.DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRender {
       symbolRenderContribitions;
       type;
@@ -24722,6 +24684,48 @@
       __metadata("design:paramtypes", [Object])
   ], exports.DefaultCanvasPolygonRender);
 
+  const ImageRenderContribution = Symbol.for('ImageRenderContribution');
+  exports.DefaultImageBackgroundRenderContribution = class DefaultImageBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
+      time = exports.BaseRenderContributionTime.beforeFillStroke;
+      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, fillCb, strokeCb) {
+          const { background, width, height } = graphic.attribute;
+          if (!background) {
+              return;
+          }
+          if (!graphic.backgroundImg) {
+              context.beginPath();
+              const b = graphic.AABBBounds;
+              context.rect(x, y, b.width(), b.height());
+              context.fillStyle = background;
+              context.globalAlpha = 1;
+              context.fill();
+          }
+          else {
+              const res = graphic.resources.get(background);
+              if (res.state !== 'success' || !res.data) {
+                  return;
+              }
+              context.save();
+              if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {
+                  const groupAttribute = getTheme(graphic.parent).group;
+                  const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;
+                  context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
+                  context.translate(scrollX, scrollY);
+              }
+              const b = graphic.AABBBounds;
+              context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
+              context.restore();
+              if (!graphic.transMatrix.onlyTranslate()) {
+                  context.setTransformForCurrent();
+              }
+          }
+      }
+  };
+  exports.DefaultImageBackgroundRenderContribution = __decorate([
+      injectable()
+  ], exports.DefaultImageBackgroundRenderContribution);
+
+  const repeatStr = ['', 'repeat-x', 'repeat-y', 'repeat'];
   exports.DefaultCanvasImageRender = class DefaultCanvasImageRender {
       imageRenderContribitions;
       type;
@@ -24732,7 +24736,7 @@
       }
       drawShape(image, context, x, y, drawContext, params, fillCb) {
           const imageAttribute = getTheme(image).image;
-          const { fill = imageAttribute.fill, width = imageAttribute.width, height = imageAttribute.height, opacity = imageAttribute.opacity, fillOpacity = imageAttribute.fillOpacity, visible = imageAttribute.visible, image: url } = image.attribute;
+          const { fill = imageAttribute.fill, width = imageAttribute.width, height = imageAttribute.height, opacity = imageAttribute.opacity, fillOpacity = imageAttribute.fillOpacity, visible = imageAttribute.visible, repeatX = imageAttribute.repeatX, repeatY = imageAttribute.repeatY, image: url } = image.attribute;
           const fVisible = fillVisible(opacity, fillOpacity);
           const doFill = runFill(fill);
           if (!(image.valid && visible)) {
@@ -24766,7 +24770,21 @@
                       return;
                   }
                   context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-                  context.drawImage(res.data, x, y, width, height);
+                  let repeat = 0;
+                  if (repeatX === 'repeat') {
+                      repeat |= 0b0001;
+                  }
+                  if (repeatY === 'repeat') {
+                      repeat |= 0b0010;
+                  }
+                  if (repeat) {
+                      const pattern = context.createPattern(res.data, repeatStr[repeat]);
+                      context.fillStyle = pattern;
+                      context.fillRect(x, y, width, height);
+                  }
+                  else {
+                      context.drawImage(res.data, x, y, width, height);
+                  }
               }
           }
           this._imageRenderContribitions.forEach(c => {
@@ -24834,6 +24852,38 @@
   const RenderSelector = Symbol.for('RenderSelector');
   const DrawContribution = Symbol.for('DrawContribution');
 
+  const GroupRenderContribution = Symbol.for('GroupRenderContribution');
+  exports.DefaultGroupBackgroundRenderContribution = class DefaultGroupBackgroundRenderContribution extends exports.DefaultBaseBackgroundRenderContribution {
+      time = exports.BaseRenderContributionTime.beforeFillStroke;
+      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, fillCb, strokeCb) {
+          const { background } = graphic.attribute;
+          if (!background) {
+              return;
+          }
+          if (graphic.backgroundImg && graphic.resources) {
+              const res = graphic.resources.get(background);
+              if (res.state !== 'success' || !res.data) {
+                  return;
+              }
+              context.highPerformanceSave();
+              context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
+              const b = graphic.AABBBounds;
+              context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
+              context.highPerformanceRestore();
+              context.setTransformForCurrent();
+          }
+          else {
+              context.highPerformanceSave();
+              context.fillStyle = background;
+              context.fill();
+              context.highPerformanceRestore();
+          }
+      }
+  };
+  exports.DefaultGroupBackgroundRenderContribution = __decorate([
+      injectable()
+  ], exports.DefaultGroupBackgroundRenderContribution);
+
   const RenderService = Symbol.for('RenderService');
   const BeforeRenderConstribution = Symbol.for('BeforeRenderConstribution');
   exports.DefaultRenderService = class DefaultRenderService {
@@ -27911,6 +27961,9 @@
               window.setWindowHandler(this);
           }
       }
+      release(...params) {
+          this.releaseWindow();
+      }
   };
   exports.BaseWindowHandlerContribution = __decorate([
       injectable(),
@@ -28864,6 +28917,17 @@
           this.nativeContext.globalAlpha = ga;
           this._globalAlpha = ga;
       }
+      setLineDash(segments) {
+          const a = arguments;
+          const _context = this.nativeContext;
+          if (!!this.nativeContext.setLineDash) {
+              const lineDash = a[0];
+              if (lineDash[0] === 0 && lineDash[1] === 0) {
+                  return;
+              }
+              _context.setLineDash(lineDash);
+          }
+      }
       draw() {
           const _context = this.nativeContext;
           this.drawPromise = new Promise(resolve => {
@@ -29335,7 +29399,9 @@
           throw new Error('暂未实现');
       }
       release(...params) {
-          throw new Error('暂不支持release');
+          if (this._nativeCanvas.release && isFunction(this._nativeCanvas.release)) {
+              this._nativeCanvas.release();
+          }
       }
   };
   NodeCanvas = __decorate([
@@ -29793,7 +29859,7 @@
                   zChildren.forEach(i => {
                       graphic.add(i.g);
                   });
-                  drawContribution.renderGroup(graphic, drawContext);
+                  drawContribution.renderGroup(graphic, drawContext, true);
                   graphic.removeAllChild();
                   children.forEach(g => {
                       g._next = null;
@@ -29922,7 +29988,7 @@
           }
           return null;
       }
-      renderGroup(group, drawContext) {
+      renderGroup(group, drawContext, skipSort) {
           if (drawContext.break || group.attribute.visibleAll === false) {
               return;
           }
@@ -29939,17 +30005,29 @@
           this.dirtyBounds.copy(this.backupDirtyBounds).transformWithMatrix(m);
           this.renderItem(group, drawContext, {
               drawingCb: () => {
-                  foreach(group, DefaultAttribute.zIndex, (item) => {
-                      if (drawContext.break) {
-                          return;
-                      }
-                      if (item.isContainer) {
-                          this.renderGroup(item, drawContext);
-                      }
-                      else {
-                          this.renderItem(item, drawContext);
-                      }
-                  }, false, !!drawContext.context?.camera);
+                  skipSort
+                      ? group.forEachChildren((item) => {
+                          if (drawContext.break) {
+                              return;
+                          }
+                          if (item.isContainer) {
+                              this.renderGroup(item, drawContext);
+                          }
+                          else {
+                              this.renderItem(item, drawContext);
+                          }
+                      })
+                      : foreach(group, DefaultAttribute.zIndex, (item) => {
+                          if (drawContext.break) {
+                              return;
+                          }
+                          if (item.isContainer) {
+                              this.renderGroup(item, drawContext);
+                          }
+                          else {
+                              this.renderItem(item, drawContext);
+                          }
+                      }, false, !!drawContext.context?.camera);
               }
           });
           this.dirtyBounds.copy(tempBounds);
@@ -31667,6 +31745,7 @@
               return false;
           }
           const pathAttribute = getTheme(path).path;
+          pickContext.highPerformanceSave();
           const data = this.transform(path, pathAttribute, pickContext);
           const { x, y, z, lastModelMatrix } = data;
           let pickPoint = point;
@@ -33260,9 +33339,9 @@
           this._afterRender = params.afterRender;
           this.ticker = params.ticker || defaultTicker;
       }
-      set3dOptions(options) {
-          const { center = { x: this.width / 2, y: this.height / 2 }, light = {}, alpha = 0, beta = 0, camera, fieldRatio = 1, fieldDepth } = options;
-          this.option3d = {
+      get3dOptions(options) {
+          const { center = { x: this.width / 2, y: this.height / 2, z: 0, dx: 0, dy: 0, dz: 0 }, light = {}, alpha = 0, beta = 0, camera, fieldRatio = 1, fieldDepth } = options;
+          return {
               ...options,
               center,
               light,
@@ -33272,15 +33351,23 @@
               fieldRatio,
               fieldDepth
           };
+      }
+      set3dOptions(options) {
+          this.option3d = options;
+          const options3d = this.get3dOptions(options);
+          const { light, center, camera, alpha, beta, fieldRatio, fieldDepth } = options3d;
           const { dir = [1, 1, -1], color = 'white', ambient } = light;
-          const centerVec3 = [center.x, center.y, 0];
+          const centerX = (center.x ?? this.width / 2) + (center.dx ?? 0);
+          const centerY = (center.y ?? this.height / 2) + (center.dy ?? 0);
+          const centerZ = (center.z ?? 0) + (center.dz ?? 0);
+          const centerVec3 = [centerX, centerY, centerZ];
           const z = 1;
           let cameraX = 0;
           let cameraY = 0;
           let cameraZ = 0;
           if (!camera) {
-              cameraX = Math.sin(alpha) + center.x;
-              cameraY = Math.sin(beta) + center.y;
+              cameraX = Math.sin(alpha) + centerX;
+              cameraY = Math.sin(beta) + centerY;
               cameraZ = Math.cos(alpha) * Math.cos(beta) * z;
           }
           this.light = new DirectionalLight(dir, color, ambient);
@@ -33494,7 +33581,7 @@
           if (!this._subView) {
               this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h);
           }
-          this.camera && (this.camera.params = { ...this.camera.params, right: this.width, bottom: this.height });
+          this.camera && this.option3d && this.set3dOptions(this.option3d);
           rerender && this.render();
       }
       resizeView(w, h, rerender = true) {
@@ -33552,7 +33639,7 @@
       }
       release() {
           super.release();
-          this.eventSystem.release();
+          this.eventSystem && this.eventSystem.release();
           this.pluginService.release();
           this.forEach(layer => {
               layer.release();
@@ -33633,7 +33720,26 @@
       return new Stage(params);
   }
 
-  const version = "0.11.1";
+  var params;
+  (function (params) {
+      params[params["W"] = 1] = "W";
+      params[params["H"] = 2] = "H";
+      params[params["WH"] = 3] = "WH";
+  })(params || (params = {}));
+
+  const strCommandMap = [
+      'arc',
+      'arcTo',
+      'bezierCurveTo',
+      'closePath',
+      'ellipse',
+      'lineTo',
+      'moveTo',
+      'quadraticCurveTo',
+      'rect'
+  ];
+
+  const version = "0.12.0";
 
   exports.ACustomAnimate = ACustomAnimate;
   exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;
@@ -33701,7 +33807,6 @@
   exports.DefaultTransform = DefaultTransform;
   exports.DragNDrop = DragNDrop;
   exports.DrawContribution = DrawContribution;
-  exports.EnvContribution = EnvContribution;
   exports.EventManager = EventManager;
   exports.EventSystem = EventSystem;
   exports.EventTarget = EventTarget;
@@ -33715,7 +33820,6 @@
   exports.GROUP_NUMBER_TYPE = GROUP_NUMBER_TYPE;
   exports.Generator = Generator;
   exports.Gesture = Gesture;
-  exports.Global = Global;
   exports.GlobalPickerService = GlobalPickerService;
   exports.Glyph = Glyph;
   exports.GlyphRender = GlyphRender;