@visactor/vrender 0.23.0-alpha.2 → 0.23.0-alpha.3

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.23.0-alpha.2";
+export declare const version = "0.23.0-alpha.3";
 export * from '@visactor/vrender-core';
 export * from '@visactor/vrender-kits';

package/cjs/index.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 
 const vrender_core_1 = require("@visactor/vrender-core"), vrender_kits_1 = require("@visactor/vrender-kits"), vrender_kits_2 = require("@visactor/vrender-kits");
 
-exports.version = "0.23.0-alpha.2", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.23.0-alpha.3", (0, vrender_core_1.preLoadAllModule)(), (0, 
 vrender_core_1.isBrowserEnv)() ? (0, vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, 
 vrender_core_1.isNodeEnv)() && (0, vrender_kits_1.loadNodeEnv)(vrender_core_1.container), 
 (0, vrender_kits_2.registerArc)(), (0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.23.0-alpha.2\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.23.0-alpha.3\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

package/dist/index.es.js

@@ -574,6 +574,25 @@ const EnvContribution = Symbol.for("EnvContribution");
 const VGlobal = Symbol.for("VGlobal");
 const DEFAULT_TEXT_FONT_FAMILY = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
+class PerformanceRAF {
+  constructor() {
+    this.nextAnimationFrameCbs = [], this._rafHandle = null, this.runAnimationFrame = time => {
+      this._rafHandle = null;
+      const cbs = this.nextAnimationFrameCbs;
+      this.nextAnimationFrameCbs = [];
+      for (let i = 0; i < cbs.length; i++) cbs[i] && cbs[i](time);
+    }, this.tryRunAnimationFrameNextFrame = () => {
+      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.length && (this._rafHandle = vglobal.getRequestAnimationFrame()(this.runAnimationFrame));
+    };
+  }
+  addAnimationFrameCb(callback) {
+    return this.nextAnimationFrameCbs.push(callback), this.tryRunAnimationFrameNextFrame(), this.nextAnimationFrameCbs.length - 1;
+  }
+  removeAnimationFrameCb(index) {
+    return index >= 0 && index < this.nextAnimationFrameCbs.length && (this.nextAnimationFrameCbs[index] = null, !0);
+  }
+}
+
 var __decorate$1L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -658,7 +677,7 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
@@ -714,6 +733,16 @@ let DefaultGlobal = class {
   getRequestAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
   }
+  getSpecifiedRequestAnimationFrame(id) {
+    this._env || this.setEnv("browser"), this._performanceRAFList[id] || (this._performanceRAFList[id] = new PerformanceRAF());
+    const performanceRAF = this._performanceRAFList[id];
+    return callback => performanceRAF.addAnimationFrameCb(callback);
+  }
+  getSpecifiedCancelAnimationFrame(id) {
+    if (this._env || this.setEnv("browser"), !this._performanceRAFList[id]) return () => !1;
+    const performanceRAF = this._performanceRAFList[id];
+    return handle => performanceRAF.removeAnimationFrameCb(handle);
+  }
   getCancelAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getCancelAnimationFrame();
   }
@@ -13816,7 +13845,7 @@ class BaseRender {
     const p = context.project(x, y, z);
     context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
   }
-  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params, themeAttribute) {
     const {
       context: context
     } = drawContext;
@@ -13833,7 +13862,7 @@ class BaseRender {
         z: z,
         lastModelMatrix: lastModelMatrix
       } = data;
-    this.z = z, this.drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
+    this.z = z, this.drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params, null, null, themeAttribute), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
   }
 }
 
@@ -13917,9 +13946,9 @@ let DefaultCanvasArcRender = class extends BaseRender {
     } else context.lineTo(cx + innerRadius * cos(innerStartAngle), cy + innerRadius * sin(innerStartAngle));
     return collapsedToLine;
   }
-  drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-    const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc,
-      {
+  drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb, arcAttribute) {
+    arcAttribute = null != arcAttribute ? arcAttribute : getTheme(arc, null == params ? void 0 : params.theme).arc;
+    const {
         fill = arcAttribute.fill,
         stroke = arcAttribute.stroke,
         x: originX = arcAttribute.x,
@@ -13960,17 +13989,7 @@ let DefaultCanvasArcRender = class extends BaseRender {
       isFullStroke: isFullStroke,
       stroke: arrayStroke
     } = parseStroke(stroke);
-    if (doFill || isFullStroke) {
-      context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-      const _runFill = () => {
-          doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
-        },
-        _runStroke = () => {
-          doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
-        };
-      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
-    }
-    if (!isFullStroke && doStroke) {
+    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), fillStrokeOrder ? (this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb), this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb)) : (this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb), this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb))), !isFullStroke && doStroke) {
       context.beginPath();
       drawArcPath$1(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
       beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -14006,9 +14025,15 @@ let DefaultCanvasArcRender = class extends BaseRender {
     }
     this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
   }
+  _runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb) {
+    doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+  }
+  _runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb) {
+    doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+  }
   draw(arc, renderService, drawContext, params) {
     const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc;
-    this._draw(arc, arcAttribute, !1, drawContext, params);
+    this._draw(arc, arcAttribute, !1, drawContext, params, arcAttribute);
   }
 };
 DefaultCanvasArcRender = __decorate$1C([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(ArcRenderContribution)), __metadata$1e("design:paramtypes", [Object])], DefaultCanvasArcRender);
@@ -14719,26 +14744,25 @@ let DefaultCanvasRectRender = class extends BaseRender {
   constructor(rectRenderContribitions) {
     super(), this.rectRenderContribitions = rectRenderContribitions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(rectRenderContribitions);
   }
-  drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-    var _a;
-    const rectAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(rect, null == params ? void 0 : params.theme).rect,
-      {
-        fill = rectAttribute.fill,
-        background: background,
-        stroke = rectAttribute.stroke,
-        cornerRadius = rectAttribute.cornerRadius,
-        cornerType = rectAttribute.cornerType,
-        opacity = rectAttribute.opacity,
-        fillOpacity = rectAttribute.fillOpacity,
-        lineWidth = rectAttribute.lineWidth,
-        strokeOpacity = rectAttribute.strokeOpacity,
-        visible = rectAttribute.visible,
-        x1: x1,
-        y1: y1,
-        x: originX = rectAttribute.x,
-        y: originY = rectAttribute.y,
-        fillStrokeOrder = rectAttribute.fillStrokeOrder
-      } = rect.attribute;
+  drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb, rectAttribute) {
+    rectAttribute = null != rectAttribute ? rectAttribute : getTheme(rect, null == params ? void 0 : params.theme).rect;
+    const {
+      fill = rectAttribute.fill,
+      background: background,
+      stroke = rectAttribute.stroke,
+      cornerRadius = rectAttribute.cornerRadius,
+      cornerType = rectAttribute.cornerType,
+      opacity = rectAttribute.opacity,
+      fillOpacity = rectAttribute.fillOpacity,
+      lineWidth = rectAttribute.lineWidth,
+      strokeOpacity = rectAttribute.strokeOpacity,
+      visible = rectAttribute.visible,
+      x1: x1,
+      y1: y1,
+      x: originX = rectAttribute.x,
+      y: originY = rectAttribute.y,
+      fillStrokeOrder = rectAttribute.fillStrokeOrder
+    } = rect.attribute;
     let {
       width: width,
       height: height
@@ -14756,18 +14780,17 @@ let DefaultCanvasRectRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     };
-    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-    const _runFill = () => {
-        doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
-      },
-      _runStroke = () => {
-        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
-      };
-    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), fillStrokeOrder ? (this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb), this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb)) : (this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb), this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb)), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+  }
+  _runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb) {
+    doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+  }
+  _runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb) {
+    doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
   }
   draw(rect, renderService, drawContext, params) {
     const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
-    this.tempTheme = rectAttribute, this._draw(rect, rectAttribute, !1, drawContext, params), this.tempTheme = null;
+    this._draw(rect, rectAttribute, !1, drawContext, params, rectAttribute);
   }
 };
 DefaultCanvasRectRender = __decorate$1x([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(RectRenderContribution)), __metadata$1a("design:paramtypes", [Object])], DefaultCanvasRectRender);
@@ -14791,10 +14814,10 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
   constructor(symbolRenderContribitions) {
     super(), this.symbolRenderContribitions = symbolRenderContribitions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(symbolRenderContribitions);
   }
-  drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb) {
+  drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb, symbolAttribute) {
     var _a;
-    const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol,
-      {
+    symbolAttribute = null != symbolAttribute ? symbolAttribute : getTheme(symbol, null == params ? void 0 : params.theme).symbol;
+    const {
         size = symbolAttribute.size,
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
@@ -14839,14 +14862,13 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
           a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && clipRange >= 1 && (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
         };
       fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
-    }) && context.closePath(), context.camera = camera, context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
-    const _runFill = () => {
-        doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
-      },
-      _runStroke = () => {
-        doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && clipRange >= 1 && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
-      };
-    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    }) && context.closePath(), context.camera = camera, context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), fillStrokeOrder ? (this._runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb), this._runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb)) : (this._runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb), this._runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb)), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+  }
+  _runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb) {
+    doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+  }
+  _runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb) {
+    doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && clipRange >= 1 && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
   }
   draw(symbol, renderService, drawContext, params) {
     const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -15231,16 +15253,19 @@ let DefaultCanvasGroupRender = class {
   constructor(groupRenderContribitions) {
     this.groupRenderContribitions = groupRenderContribitions, this.numberType = GROUP_NUMBER_TYPE;
   }
-  drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
-    const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
-      {
-        fill = groupAttribute.fill,
-        background: background,
-        stroke = groupAttribute.stroke,
+  drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb, groupAttribute) {
+    const {
+      clip: clip,
+      fill: fill,
+      stroke: stroke,
+      background: background
+    } = group.attribute;
+    if (!(clip || fill || stroke || background)) return;
+    groupAttribute = null != groupAttribute ? groupAttribute : getTheme(group, null == params ? void 0 : params.theme).group;
+    const {
         opacity = groupAttribute.opacity,
         width = groupAttribute.width,
         height = groupAttribute.height,
-        clip = groupAttribute.clip,
         fillOpacity = groupAttribute.fillOpacity,
         strokeOpacity = groupAttribute.strokeOpacity,
         cornerRadius = groupAttribute.cornerRadius,
@@ -15288,6 +15313,7 @@ let DefaultCanvasGroupRender = class {
     });
   }
   draw(group, renderService, drawContext, params) {
+    var _a;
     const {
       context: context
     } = drawContext;
@@ -15295,16 +15321,18 @@ let DefaultCanvasGroupRender = class {
     const {
         clip: clip,
         baseOpacity = 1,
-        drawMode: drawMode,
-        x: x,
-        y: y,
-        width: width,
-        height: height
+        drawMode: drawMode
       } = group.attribute,
       lastNativeContext = context.nativeContext,
       lastNativeCanvas = context.canvas.nativeCanvas;
     if (drawMode > 0) {
-      const canvas = context.canvas,
+      const {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        } = group.attribute,
+        canvas = context.canvas,
         newCanvas = vglobal.createCanvas({
           width: canvas.width,
           height: canvas.height,
@@ -15317,21 +15345,27 @@ let DefaultCanvasGroupRender = class {
     clip ? context.save() : context.highPerformanceSave();
     const baseGlobalAlpha = context.baseGlobalAlpha;
     context.baseGlobalAlpha *= baseOpacity;
-    const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
-      lastModelMatrix = context.modelMatrix;
+    const lastModelMatrix = context.modelMatrix;
     if (context.camera) {
-      const nextModelMatrix = mat4Allocate.allocate(),
+      const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
+        nextModelMatrix = mat4Allocate.allocate(),
         modelMatrix = mat4Allocate.allocate();
       getModelMatrix(modelMatrix, group, groupAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), context.modelMatrix = nextModelMatrix, mat4Allocate.free(modelMatrix), context.setTransform(1, 0, 0, 1, 0, 0, !0);
     } else context.transformFromMatrix(group.transMatrix, !0);
-    context.beginPath(), params.skipDraw ? this.drawShape(group, context, 0, 0, drawContext, params, () => !1, () => !1) : this.drawShape(group, context, 0, 0, drawContext);
+    context.beginPath(), params.skipDraw ? this.drawShape(group, context, 0, 0, drawContext, params, () => !1, () => !1) : this.drawShape(group, context, 0, 0, drawContext, null, null, null);
     const {
-      scrollX = groupAttribute.scrollX,
-      scrollY = groupAttribute.scrollY
+      scrollX: scrollX,
+      scrollY: scrollY
     } = group.attribute;
     let p;
-    if ((scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.drawingCb && (p = params.drawingCb()), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha = baseGlobalAlpha, drawMode > 0) {
-      const newContext = context.nativeContext,
+    if ((scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.renderInGroup && (p = params.renderInGroup(params.skipDraw, group, drawContext, null === (_a = params.renderInGroupParams) || void 0 === _a ? void 0 : _a.nextM)), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha = baseGlobalAlpha, drawMode > 0) {
+      const {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        } = group.attribute,
+        newContext = context.nativeContext,
         newCanvas = context.canvas.nativeCanvas;
       lastNativeContext.save(), lastNativeContext.setTransform(context.dpr, 0, 0, context.dpr, 0, 0, !0), 1 === drawMode && newContext.rect(x, y, width, height), lastNativeContext.drawImage(newCanvas, 0, 0, newCanvas.width, newCanvas.height, 0, 0, context.canvas.displayWidth, context.canvas.displayHeight);
       const transform = newContext.getTransform();
@@ -15549,6 +15583,7 @@ let CommonDrawItemInterceptorContribution = class {
     this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
   }
   afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+    if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
     for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
     return !1;
   }
@@ -16092,7 +16127,14 @@ var __decorate$1l = undefined && undefined.__decorate || function (decorators, t
   };
 let DefaultDrawContribution = class {
   constructor(contributions, drawItemInterceptorContributions) {
-    this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray$1(this.contributions) || (this.contributions = [this.contributions]), this.init();
+    this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this._renderInGroup = (skipSort, group, drawContext, nextM) => {
+      var _a;
+      skipSort ? group.forEachChildren(item => {
+        drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
+      }) : foreach(group, DefaultAttribute.zIndex, item => {
+        drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
+      }, !1, !!(null === (_a = drawContext.context) || void 0 === _a ? void 0 : _a.camera));
+    }, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray$1(this.contributions) || (this.contributions = [this.contributions]), this.init();
   }
   init() {
     this.contributions.forEach(item => {
@@ -16120,12 +16162,12 @@ let DefaultDrawContribution = class {
       dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
     }
     const d = context.dpr % 1;
-    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.save(), context.reset(!1), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
       var _a, _b;
       return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
     }).forEach(group => {
       group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-    }), context.restore(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1, context.draw();
+    }), context.restore(), context.draw();
   }
   doRegister() {
     throw new Error("暂不支持");
@@ -16151,15 +16193,12 @@ let DefaultDrawContribution = class {
       const gm = group.transMatrix;
       nextM = matrixAllocate.allocateByObj(parentMatrix).multiply(gm.a, gm.b, gm.c, gm.d, gm.e, gm.f), this.dirtyBounds.copy(this.backupDirtyBounds).transformWithMatrix(nextM.getInverse());
     }
-    this.renderItem(group, drawContext, {
-      drawingCb: () => {
-        var _a;
-        skipSort ? group.forEachChildren(item => {
-          drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
-        }) : foreach(group, DefaultAttribute.zIndex, item => {
-          drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
-        }, !1, !!(null === (_a = drawContext.context) || void 0 === _a ? void 0 : _a.camera));
-      }
+    drawContext.isGroupScroll = !(!group.attribute.scrollX && !group.attribute.scrollY), this.renderItem(group, drawContext, {
+      renderInGroupParams: {
+        skipSort: skipSort,
+        nextM: nextM
+      },
+      renderInGroup: this._renderInGroup
     }), this.useDirtyBounds && (this.dirtyBounds.copy(tempBounds), boundsAllocate.free(tempBounds), matrixAllocate.free(nextM));
   }
   _increaseRender(group, drawContext) {
@@ -16216,13 +16255,13 @@ let DefaultDrawContribution = class {
     const renderer = this.getRenderContribution(graphic);
     if (!renderer) return;
     let tempBounds,
-      retrans = this.scrollMatrix && (0 !== this.scrollMatrix.e || 0 !== this.scrollMatrix.f);
-    if (graphic.parent) {
+      retrans = !1;
+    if (drawContext.isGroupScroll) {
       const {
         scrollX = 0,
         scrollY = 0
       } = graphic.parent.attribute;
-      (scrollX || scrollY) && (retrans = !0, this.scrollMatrix || (this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0)), this.scrollMatrix.translate(-scrollX, -scrollY));
+      retrans = !0, this.scrollMatrix || (this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0)), this.scrollMatrix.translate(-scrollX, -scrollY);
     }
     if (retrans && (tempBounds = this.dirtyBounds.clone().transformWithMatrix(this.scrollMatrix)), this.useDirtyBounds && !graphic.isContainer && "empty" !== graphic.attribute.boundsMode && !isRectIntersect(graphic.AABBBounds, null != tempBounds ? tempBounds : this.dirtyBounds, !1)) {
       if (retrans && graphic.parent) {
@@ -16778,7 +16817,7 @@ class Stage extends Group {
   }
   constructor() {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _a;
+    var _a, _b;
     super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
       if (!(this._skipRender < 0)) if (visible) {
         if (this.dirtyBounds) {
@@ -16792,8 +16831,7 @@ class Stage extends Group {
     }, this.afterRender = stage => {
       this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
     }, this.afterTickCb = () => {
-      var _a;
-      this.tickedBeforeRender = !0, "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) || "rendering" !== this.state && this.render();
+      this.tickedBeforeRender = !0, "rendering" !== this.state && this.render();
     }, this.params = params, this.theme = new Theme(), this.hooks = {
       beforeRender: new SyncHook(["stage"]),
       afterRender: new SyncHook(["stage"])
@@ -16809,13 +16847,14 @@ class Stage extends Group {
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
       main: !0
     })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
-      animateMode: "performance"
+      tickRenderMode: "performance"
     }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
-    }), this.initAnimate(params);
+    }), this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());
   }
   initAnimate(params) {
-    this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
+    var _a;
+    this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), "effect" !== (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this.ticker.setFPS(30), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
   }
   startAnimate() {
     this.ticker && this.timeline && (this.ticker.start(), this.timeline.resume());
@@ -17063,7 +17102,7 @@ class Stage extends Group {
   renderNextFrame(layers, force) {
     this.nextFrameRenderLayerSet.size !== this.childrenCount && (layers || this).forEach(layer => {
       this.nextFrameRenderLayerSet.add(layer);
-    }), this.willNextFrameRender || (this.willNextFrameRender = !0, this.global.getRequestAnimationFrame()(() => {
+    }), this.willNextFrameRender || (this.willNextFrameRender = !0, this.global.getSpecifiedRequestAnimationFrame(this.rafId)(() => {
       this._doRenderInThisFrame(), this.willNextFrameRender = !1;
     }));
   }
@@ -17270,6 +17309,9 @@ let EmptyContext2d = class {
   clear() {
     this.save(), this.resetTransform(), this.restore();
   }
+  reset() {
+    this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0;
+  }
   restore() {
     this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop(), this.setTransformForCurrent());
   }
@@ -18608,21 +18650,6 @@ const splitPath = (path, count) => {
   return res;
 };
 
-class PerformanceRAF {
-  constructor() {
-    this.nextAnimationFrameCbs = [], this.runAnimationFrame = time => {
-      const cbs = this.nextAnimationFrameCbs;
-      this.nextAnimationFrameCbs = [];
-      for (let i = 0; i < cbs.length; i++) cbs[i](time);
-    }, this.tryRunAnimationFrameNextFrame = () => {
-      this.nextAnimationFrameCbs && 1 === this.nextAnimationFrameCbs.length && vglobal.getRequestAnimationFrame()(this.runAnimationFrame);
-    };
-  }
-  addAnimationFrameCb(callback) {
-    return this.nextAnimationFrameCbs.push(callback), this.tryRunAnimationFrameNextFrame(), this.nextAnimationFrameCbs.length - 1;
-  }
-}
-
 var __rest$1 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -23453,10 +23480,11 @@ let BrowserContext2d = class {
     return this.nativeContext.fillStyle;
   }
   set font(d) {
-    this.nativeContext.font = d;
+    d !== this._font && (this._font = d, this.nativeContext.font = d);
   }
   get font() {
-    return this.nativeContext.font;
+    var _a;
+    return null !== (_a = this._font) && void 0 !== _a ? _a : this.nativeContext.font;
   }
   set globalAlpha(d) {
     this.nativeContext.globalAlpha = d * this.baseGlobalAlpha;
@@ -23555,7 +23583,8 @@ let BrowserContext2d = class {
     this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.baseGlobalAlpha = 1;
   }
   reset() {
-    this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
+    let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+    this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, setTransform && this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
   }
   getCanvas() {
     return this.canvas;
@@ -23577,7 +23606,7 @@ let BrowserContext2d = class {
     this.save(), this.resetTransform(), this.nativeContext.clearRect(0, 0, this.canvas.width, this.canvas.height), this.restore();
   }
   restore() {
-    this.nativeContext.restore(), this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop(), this.setTransformForCurrent(!0));
+    this.nativeContext.restore(), this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop(), this.setTransformForCurrent(!0)), this.font = "", this._clearFilterStyle = !1, this._clearShadowStyle = !1;
   }
   highPerformanceRestore() {
     this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop());
@@ -23850,14 +23879,20 @@ let BrowserContext2d = class {
     const {
       opacity = defaultParams.opacity,
       shadowBlur = defaultParams.shadowBlur,
-      shadowColor = defaultParams.shadowColor,
-      shadowOffsetX = defaultParams.shadowOffsetX,
-      shadowOffsetY = defaultParams.shadowOffsetY,
       blur = defaultParams.blur,
-      filter = defaultParams.filter,
       globalCompositeOperation = defaultParams.globalCompositeOperation
     } = attribute;
-    opacity <= 1e-12 || (shadowBlur || shadowOffsetX || shadowOffsetY ? (_context.shadowBlur = shadowBlur * this.dpr, _context.shadowColor = shadowColor, _context.shadowOffsetX = shadowOffsetX * this.dpr, _context.shadowOffsetY = shadowOffsetY * this.dpr, this._clearShadowStyle = !0) : this._clearShadowStyle && (_context.shadowBlur = 0, _context.shadowOffsetX = 0, _context.shadowOffsetY = 0), blur ? (_context.filter = `blur(${blur}px)`, this._clearFilterStyle = !0) : filter ? (_context.filter = filter, this._clearFilterStyle = !0) : this._clearFilterStyle && (_context.filter = "blur(0px)", this._clearFilterStyle = !1), globalCompositeOperation ? (_context.globalCompositeOperation = globalCompositeOperation, this._clearGlobalCompositeOperationStyle = !0) : this._clearGlobalCompositeOperationStyle && (_context.globalCompositeOperation = "source-over", this._clearGlobalCompositeOperationStyle = !1));
+    if (!(opacity <= 1e-12)) {
+      if (shadowBlur) {
+        const {
+          shadowColor = defaultParams.shadowColor,
+          shadowOffsetX = defaultParams.shadowOffsetX,
+          shadowOffsetY = defaultParams.shadowOffsetY
+        } = attribute;
+        _context.shadowBlur = shadowBlur * this.dpr, _context.shadowColor = shadowColor, _context.shadowOffsetX = shadowOffsetX * this.dpr, _context.shadowOffsetY = shadowOffsetY * this.dpr, this._clearShadowStyle = !0;
+      } else this._clearShadowStyle && (_context.shadowBlur = 0, _context.shadowOffsetX = 0, _context.shadowOffsetY = 0);
+      blur ? (_context.filter = `blur(${blur}px)`, this._clearFilterStyle = !0) : this._clearFilterStyle && (_context.filter = "blur(0px)", this._clearFilterStyle = !1), globalCompositeOperation ? (_context.globalCompositeOperation = globalCompositeOperation, this._clearGlobalCompositeOperationStyle = !0) : this._clearGlobalCompositeOperationStyle && (_context.globalCompositeOperation = "source-over", this._clearGlobalCompositeOperationStyle = !1);
+    }
   }
   setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
     if (Array.isArray(defaultParams)) {
@@ -23896,7 +23931,7 @@ let BrowserContext2d = class {
     const {
       scaleIn3d = defaultParams.scaleIn3d
     } = params;
-    params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
+    params.font ? this.font = params.font : this.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
     const {
       fontFamily = defaultParams.fontFamily,
       fontSize = defaultParams.fontSize
@@ -23906,7 +23941,7 @@ let BrowserContext2d = class {
   setTextStyle(params, defaultParams, z) {
     var _a, _b;
     const _context = this.nativeContext;
-    defaultParams || (defaultParams = this.textAttributes), params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
+    defaultParams || (defaultParams = this.textAttributes), params.font ? this.font = params.font : this.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
     const {
       fontFamily = defaultParams.fontFamily,
       fontSize = defaultParams.fontSize
@@ -29810,7 +29845,7 @@ function particleEffect(ctx, row, column, rowCount, columnCount, ratio, graphic)
 
 const roughModule = _roughModule;
 
-const version = "0.23.0-alpha.2";
+const version = "0.23.0-alpha.3";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);