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

package/dist/index.js

@@ -580,6 +580,25 @@
     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,
@@ -664,7 +683,7 @@
         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;
       }
@@ -720,6 +739,16 @@
       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();
       }
@@ -13822,7 +13851,7 @@
         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;
@@ -13839,7 +13868,7 @@
             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();
       }
     }
 
@@ -13923,9 +13952,9 @@
         } 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,
@@ -13966,17 +13995,7 @@
           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());
@@ -14012,9 +14031,15 @@
         }
         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);
       }
     };
     exports.DefaultCanvasArcRender = __decorate$1C([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(ArcRenderContribution)), __metadata$1e("design:paramtypes", [Object])], exports.DefaultCanvasArcRender);
@@ -14725,26 +14750,25 @@
       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
@@ -14762,18 +14786,17 @@
           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);
       }
     };
     exports.DefaultCanvasRectRender = __decorate$1x([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(RectRenderContribution)), __metadata$1a("design:paramtypes", [Object])], exports.DefaultCanvasRectRender);
@@ -14797,10 +14820,10 @@
       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,
@@ -14845,14 +14868,13 @@
               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;
@@ -15237,16 +15259,19 @@
       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,
@@ -15294,6 +15319,7 @@
         });
       }
       draw(group, renderService, drawContext, params) {
+        var _a;
         const {
           context: context
         } = drawContext;
@@ -15301,16 +15327,18 @@
         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,
@@ -15323,21 +15351,27 @@
         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();
@@ -15555,6 +15589,7 @@
         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;
       }
@@ -16098,7 +16133,14 @@
       };
     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 => {
@@ -16126,12 +16168,12 @@
           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("暂不支持");
@@ -16157,15 +16199,12 @@
           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) {
@@ -16222,13 +16261,13 @@
         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) {
@@ -16784,7 +16823,7 @@
       }
       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) {
@@ -16798,8 +16837,7 @@
         }, 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"])
@@ -16815,13 +16853,14 @@
         }), 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());
@@ -17069,7 +17108,7 @@
       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;
         }));
       }
@@ -17276,6 +17315,9 @@
       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());
       }
@@ -18614,21 +18656,6 @@
       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]);
@@ -23459,10 +23486,11 @@
         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;
@@ -23561,7 +23589,8 @@
         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;
@@ -23583,7 +23612,7 @@
         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());
@@ -23856,14 +23885,20 @@
         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)) {
@@ -23902,7 +23937,7 @@
         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
@@ -23912,7 +23947,7 @@
       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
@@ -29816,7 +29851,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.23.0-alpha.2";
+    const version = "0.23.0-alpha.3";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);