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

package/dist/index.es.js

@@ -852,6 +852,41 @@ 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++) {
+                if (cbs[i]) {
+                    cbs[i](time);
+                }
+            }
+        };
+        this.tryRunAnimationFrameNextFrame = () => {
+            if (this._rafHandle !== null || this.nextAnimationFrameCbs.length === 0) {
+                return;
+            }
+            this._rafHandle = vglobal.getRequestAnimationFrame()(this.runAnimationFrame);
+        };
+    }
+    addAnimationFrameCb(callback) {
+        this.nextAnimationFrameCbs.push(callback);
+        this.tryRunAnimationFrameNextFrame();
+        return this.nextAnimationFrameCbs.length - 1;
+    }
+    removeAnimationFrameCb(index) {
+        if (index >= 0 && index < this.nextAnimationFrameCbs.length) {
+            this.nextAnimationFrameCbs[index] = null;
+            return true;
+        }
+        return false;
+    }
+}
+
 const defaultEnv = 'browser';
 let DefaultGlobal = class DefaultGlobal {
     get env() {
@@ -932,6 +967,7 @@ let DefaultGlobal = class DefaultGlobal {
     constructor(contributions) {
         this.contributions = contributions;
         this._isImageAnonymous = true;
+        this._performanceRAFList = [];
         this.id = Generator.GenAutoIncrementId();
         this.hooks = {
             onSetEnv: new SyncHook(['lastEnv', 'env', 'global'])
@@ -1031,6 +1067,30 @@ let DefaultGlobal = class DefaultGlobal {
         }
         return this.envContribution.getRequestAnimationFrame();
     }
+    getSpecifiedRequestAnimationFrame(id) {
+        if (!this._env) {
+            this.setEnv(defaultEnv);
+        }
+        if (!this._performanceRAFList[id]) {
+            this._performanceRAFList[id] = new PerformanceRAF();
+        }
+        const performanceRAF = this._performanceRAFList[id];
+        return (callback) => {
+            return performanceRAF.addAnimationFrameCb(callback);
+        };
+    }
+    getSpecifiedCancelAnimationFrame(id) {
+        if (!this._env) {
+            this.setEnv(defaultEnv);
+        }
+        if (!this._performanceRAFList[id]) {
+            return () => false;
+        }
+        const performanceRAF = this._performanceRAFList[id];
+        return (handle) => {
+            return performanceRAF.removeAnimationFrameCb(handle);
+        };
+    }
     getCancelAnimationFrame() {
         if (!this._env) {
             this.setEnv(defaultEnv);
@@ -17672,7 +17732,7 @@ class BaseRender {
         context.translate(-p.x, -p.y, false);
         context.setTransformForCurrent();
     }
-    _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+    _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params, themeAttribute) {
         const { context } = drawContext;
         if (!context) {
             return;
@@ -17689,7 +17749,7 @@ class BaseRender {
             context.highPerformanceRestore();
             return;
         }
-        this.drawShape(graphic, context, x, y, drawContext, params);
+        this.drawShape(graphic, context, x, y, drawContext, params, null, null, themeAttribute);
         this.z = 0;
         if (context.modelMatrix !== lastModelMatrix) {
             mat4Allocate.free(context.modelMatrix);
@@ -17773,8 +17833,8 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
         }
         return collapsedToLine;
     }
-    drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
+    drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb, arcAttribute) {
+        arcAttribute = arcAttribute !== null && arcAttribute !== void 0 ? arcAttribute : getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
         const { fill = arcAttribute.fill, stroke = arcAttribute.stroke, x: originX = arcAttribute.x, y: originY = arcAttribute.y, fillStrokeOrder = arcAttribute.fillStrokeOrder } = arc.attribute;
         const data = this.valid(arc, arcAttribute, fillCb, strokeCb);
         if (!data) {
@@ -17803,35 +17863,13 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
             beforeRenderContribitionsRuned = true;
             context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
             this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-            const _runFill = () => {
-                if (doFill) {
-                    if (fillCb) {
-                        fillCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (fVisible) {
-                        context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
-                        context.fill();
-                    }
-                }
-            };
-            const _runStroke = () => {
-                if (doStroke && isFullStroke) {
-                    if (strokeCb) {
-                        strokeCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (sVisible) {
-                        context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
-                        context.stroke();
-                    }
-                }
-            };
             if (!fillStrokeOrder) {
-                _runFill();
-                _runStroke();
+                this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb);
+                this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb);
             }
             else {
-                _runStroke();
-                _runFill();
+                this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb);
+                this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb);
             }
         }
         if (!isFullStroke && doStroke) {
@@ -17900,9 +17938,29 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
             fill.endAngle += conicalOffset;
         }
     }
+    _runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb) {
+        if (doFill) {
+            if (fillCb) {
+                fillCb(context, arc.attribute, arcAttribute);
+            }
+            else if (fVisible) {
+                context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
+                context.fill();
+            }
+        }
+    }
+    _runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb) {
+        if (doStroke) {
+            if (strokeCb) ;
+            else if (sVisible) {
+                context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
+                context.stroke();
+            }
+        }
+    }
     draw(arc, renderService, drawContext, params) {
         const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
-        this._draw(arc, arcAttribute, false, drawContext, params);
+        this._draw(arc, arcAttribute, false, drawContext, params, arcAttribute);
     }
 };
 DefaultCanvasArcRender = __decorate([
@@ -18923,9 +18981,8 @@ let DefaultCanvasRectRender = class DefaultCanvasRectRender extends BaseRender {
         ];
         this.init(rectRenderContribitions);
     }
-    drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a;
-        const rectAttribute = (_a = this.tempTheme) !== null && _a !== void 0 ? _a : getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
+    drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb, rectAttribute) {
+        rectAttribute = rectAttribute !== null && rectAttribute !== void 0 ? rectAttribute : getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
         const { fill = rectAttribute.fill, 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, y1, x: originX = rectAttribute.x, y: originY = rectAttribute.y, fillStrokeOrder = rectAttribute.fillStrokeOrder } = rect.attribute;
         let { width, height } = rect.attribute;
         width = (width !== null && width !== void 0 ? width : x1 - originX) || 0;
@@ -18957,43 +19014,41 @@ let DefaultCanvasRectRender = class DefaultCanvasRectRender extends BaseRender {
         };
         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 = () => {
-            if (doFillOrStroke.doFill) {
-                if (fillCb) {
-                    fillCb(context, rect.attribute, rectAttribute);
-                }
-                else if (fVisible) {
-                    context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
-                    context.fill();
-                }
-            }
-        };
-        const _runStroke = () => {
-            if (doFillOrStroke.doStroke) {
-                if (strokeCb) {
-                    strokeCb(context, rect.attribute, rectAttribute);
-                }
-                else if (sVisible) {
-                    context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
-                    context.stroke();
-                }
-            }
-        };
         if (!fillStrokeOrder) {
-            _runFill();
-            _runStroke();
+            this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb);
+            this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb);
         }
         else {
-            _runStroke();
-            _runFill();
+            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.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
     }
+    _runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb) {
+        if (doFillOrStroke.doFill) {
+            if (fillCb) {
+                fillCb(context, rect.attribute, rectAttribute);
+            }
+            else if (fVisible) {
+                context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
+                context.fill();
+            }
+        }
+    }
+    _runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb) {
+        if (doFillOrStroke.doStroke) {
+            if (strokeCb) {
+                strokeCb(context, rect.attribute, rectAttribute);
+            }
+            else if (sVisible) {
+                context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
+                context.stroke();
+            }
+        }
+    }
     draw(rect, renderService, drawContext, params) {
         const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
-        this.tempTheme = rectAttribute;
-        this._draw(rect, rectAttribute, false, drawContext, params);
-        this.tempTheme = null;
+        this._draw(rect, rectAttribute, false, drawContext, params, rectAttribute);
     }
 };
 DefaultCanvasRectRender = __decorate([
@@ -19016,9 +19071,9 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
         ];
         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, params === null || params === void 0 ? void 0 : params.theme).symbol;
+        symbolAttribute = symbolAttribute !== null && symbolAttribute !== void 0 ? symbolAttribute : getTheme(symbol, params === null || params === void 0 ? void 0 : params.theme).symbol;
         const { size = symbolAttribute.size, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX = symbolAttribute.scaleX, scaleY = symbolAttribute.scaleY, fillStrokeOrder = symbolAttribute.fillStrokeOrder, clipRange = symbolAttribute.clipRange } = symbol.attribute;
         const data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
         if (!data) {
@@ -19092,38 +19147,38 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
         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 = () => {
-            if (doFill && !parsedPath.isSvg) {
-                if (fillCb) {
-                    fillCb(context, symbol.attribute, symbolAttribute);
-                }
-                else if (fVisible) {
-                    context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute);
-                    context.fill();
-                }
-            }
-        };
-        const _runStroke = () => {
-            if (doStroke && !parsedPath.isSvg) {
-                if (strokeCb) {
-                    strokeCb(context, symbol.attribute, symbolAttribute);
-                }
-                else if (sVisible && clipRange >= 1) {
-                    context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
-                    context.stroke();
-                }
-            }
-        };
         if (!fillStrokeOrder) {
-            _runFill();
-            _runStroke();
+            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);
         }
         else {
-            _runStroke();
-            _runFill();
+            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.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) {
+        if (doFill && !parsedPath.isSvg) {
+            if (fillCb) {
+                fillCb(context, symbol.attribute, symbolAttribute);
+            }
+            else if (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) {
+        if (doStroke && !parsedPath.isSvg) {
+            if (strokeCb) {
+                strokeCb(context, symbol.attribute, symbolAttribute);
+            }
+            else if (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, params === null || params === void 0 ? void 0 : params.theme).symbol;
         this._draw(symbol, symbolAttribute, false, drawContext, params);
@@ -19619,9 +19674,13 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         this.groupRenderContribitions = groupRenderContribitions;
         this.numberType = GROUP_NUMBER_TYPE;
     }
-    drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
-        const { fill = groupAttribute.fill, background, stroke = groupAttribute.stroke, opacity = groupAttribute.opacity, width = groupAttribute.width, height = groupAttribute.height, clip = groupAttribute.clip, fillOpacity = groupAttribute.fillOpacity, strokeOpacity = groupAttribute.strokeOpacity, cornerRadius = groupAttribute.cornerRadius, path = groupAttribute.path, lineWidth = groupAttribute.lineWidth, visible = groupAttribute.visible, fillStrokeOrder = groupAttribute.fillStrokeOrder, cornerType = groupAttribute.cornerType, x: originX = groupAttribute.x, y: originY = groupAttribute.y } = group.attribute;
+    drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb, groupAttribute) {
+        const { clip, fill, stroke, background } = group.attribute;
+        if (!(clip || fill || stroke || background)) {
+            return;
+        }
+        groupAttribute = groupAttribute !== null && groupAttribute !== void 0 ? groupAttribute : getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
+        const { opacity = groupAttribute.opacity, width = groupAttribute.width, height = groupAttribute.height, fillOpacity = groupAttribute.fillOpacity, strokeOpacity = groupAttribute.strokeOpacity, cornerRadius = groupAttribute.cornerRadius, path = groupAttribute.path, lineWidth = groupAttribute.lineWidth, visible = groupAttribute.visible, fillStrokeOrder = groupAttribute.fillStrokeOrder, cornerType = groupAttribute.cornerType, x: originX = groupAttribute.x, y: originY = groupAttribute.y } = group.attribute;
         const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
         const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
         const doFill = runFill(fill, background);
@@ -19714,14 +19773,16 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         });
     }
     draw(group, renderService, drawContext, params) {
+        var _a;
         const { context } = drawContext;
         if (!context) {
             return;
         }
-        const { clip, baseOpacity = 1, drawMode, x, y, width, height } = group.attribute;
+        const { clip, baseOpacity = 1, drawMode } = group.attribute;
         const lastNativeContext = context.nativeContext;
         const lastNativeCanvas = context.canvas.nativeCanvas;
         if (drawMode > 0) {
+            const { x, y, width, height } = group.attribute;
             const canvas = context.canvas;
             const newCanvas = vglobal.createCanvas({ width: canvas.width, height: canvas.height, dpr: 1 });
             const newContext = newCanvas.getContext('2d');
@@ -19747,10 +19808,10 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         }
         const baseGlobalAlpha = context.baseGlobalAlpha;
         context.baseGlobalAlpha *= baseOpacity;
-        const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
         const lastModelMatrix = context.modelMatrix;
         const camera = context.camera;
         if (camera) {
+            const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
             const nextModelMatrix = mat4Allocate.allocate();
             const modelMatrix = mat4Allocate.allocate();
             getModelMatrix(modelMatrix, group, groupAttribute);
@@ -19772,15 +19833,15 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
             this.drawShape(group, context, 0, 0, drawContext, params, () => false, () => false);
         }
         else {
-            this.drawShape(group, context, 0, 0, drawContext);
+            this.drawShape(group, context, 0, 0, drawContext, null, null, null);
         }
-        const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = group.attribute;
+        const { scrollX, scrollY } = group.attribute;
         if (scrollX || scrollY) {
             context.translate(scrollX, scrollY);
         }
         let p;
-        if (params && params.drawingCb) {
-            p = params.drawingCb();
+        if (params && params.renderInGroup) {
+            p = params.renderInGroup(params.skipDraw, group, drawContext, (_a = params.renderInGroupParams) === null || _a === void 0 ? void 0 : _a.nextM);
         }
         if (context.modelMatrix !== lastModelMatrix) {
             mat4Allocate.free(context.modelMatrix);
@@ -19788,6 +19849,7 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         context.modelMatrix = lastModelMatrix;
         context.baseGlobalAlpha = baseGlobalAlpha;
         if (drawMode > 0) {
+            const { x, y, width, height } = group.attribute;
             const newContext = context.nativeContext;
             const newCanvas = context.canvas.nativeCanvas;
             lastNativeContext.save();
@@ -20169,6 +20231,11 @@ let CommonDrawItemInterceptorContribution = class CommonDrawItemInterceptorContr
         ];
     }
     afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) &&
+            !graphic.shadowRoot &&
+            !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) {
+            return false;
+        }
         for (let i = 0; i < this.interceptors.length; i++) {
             if (this.interceptors[i].afterDrawItem &&
                 this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
@@ -20871,6 +20938,32 @@ let DefaultDrawContribution = class DefaultDrawContribution {
     constructor(contributions, drawItemInterceptorContributions) {
         this.contributions = contributions;
         this.drawItemInterceptorContributions = drawItemInterceptorContributions;
+        this._renderInGroup = (skipSort, group, drawContext, nextM) => {
+            var _a;
+            skipSort
+                ? group.forEachChildren((item) => {
+                    if (drawContext.break) {
+                        return;
+                    }
+                    if (item.isContainer) {
+                        this.renderGroup(item, drawContext, nextM);
+                    }
+                    else {
+                        this.renderItem(item, drawContext);
+                    }
+                })
+                : foreach(group, DefaultAttribute.zIndex, (item) => {
+                    if (drawContext.break) {
+                        return;
+                    }
+                    if (item.isContainer) {
+                        this.renderGroup(item, drawContext, nextM);
+                    }
+                    else {
+                        this.renderItem(item, drawContext);
+                    }
+                }, false, !!((_a = drawContext.context) === null || _a === void 0 ? void 0 : _a.camera));
+        };
         this.currentRenderMap = new Map();
         this.defaultRenderMap = new Map();
         this.styleRenderMap = new Map();
@@ -20931,10 +21024,10 @@ let DefaultDrawContribution = class DefaultDrawContribution {
             dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr;
         }
         this.backupDirtyBounds.copy(dirtyBounds);
-        context.inuse = true;
+        context.save();
+        context.reset(false);
         context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-        context.clearMatrix();
-        context.setTransformForCurrent(true);
+        context.clearMatrix(false);
         context.translate(viewBox.x1, viewBox.y1, true);
         context.beginPath();
         context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height());
@@ -20944,7 +21037,6 @@ let DefaultDrawContribution = class DefaultDrawContribution {
             this.backupDirtyBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
         }
         this.clearScreen(renderService, context, drawContext);
-        context.save();
         renderService.renderTreeRoots
             .sort((a, b) => {
             var _a, _b;
@@ -20956,8 +21048,6 @@ let DefaultDrawContribution = class DefaultDrawContribution {
                 : this.renderItem(group, drawContext);
         });
         context.restore();
-        context.setClearMatrix(1, 0, 0, 1, 0, 0);
-        context.inuse = false;
         context.draw();
     }
     doRegister() {
@@ -20998,33 +21088,13 @@ let DefaultDrawContribution = class DefaultDrawContribution {
             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());
         }
+        drawContext.isGroupScroll = !!(group.attribute.scrollX || group.attribute.scrollY);
         this.renderItem(group, drawContext, {
-            drawingCb: () => {
-                var _a;
-                skipSort
-                    ? group.forEachChildren((item) => {
-                        if (drawContext.break) {
-                            return;
-                        }
-                        if (item.isContainer) {
-                            this.renderGroup(item, drawContext, nextM);
-                        }
-                        else {
-                            this.renderItem(item, drawContext);
-                        }
-                    })
-                    : foreach(group, DefaultAttribute.zIndex, (item) => {
-                        if (drawContext.break) {
-                            return;
-                        }
-                        if (item.isContainer) {
-                            this.renderGroup(item, drawContext, nextM);
-                        }
-                        else {
-                            this.renderItem(item, drawContext);
-                        }
-                    }, false, !!((_a = drawContext.context) === null || _a === void 0 ? void 0 : _a.camera));
-            }
+            renderInGroupParams: {
+                skipSort,
+                nextM
+            },
+            renderInGroup: this._renderInGroup
         });
         if (this.useDirtyBounds) {
             this.dirtyBounds.copy(tempBounds);
@@ -21093,17 +21163,15 @@ let DefaultDrawContribution = class DefaultDrawContribution {
         if (!renderer) {
             return;
         }
-        let retrans = this.scrollMatrix && (this.scrollMatrix.e !== 0 || this.scrollMatrix.f !== 0);
+        let retrans = false;
         let tempBounds;
-        if (graphic.parent) {
+        if (drawContext.isGroupScroll) {
             const { scrollX = 0, scrollY = 0 } = graphic.parent.attribute;
-            if (!!(scrollX || scrollY)) {
-                retrans = true;
-                if (!this.scrollMatrix) {
-                    this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
-                }
-                this.scrollMatrix.translate(-scrollX, -scrollY);
+            retrans = true;
+            if (!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);
@@ -21923,7 +21991,7 @@ class Stage extends Group {
         return this._eventSystem;
     }
     constructor(params = {}) {
-        var _a;
+        var _a, _b;
         super({});
         this.tickedBeforeRender = true;
         this._onVisibleChange = (visible) => {
@@ -21955,12 +22023,8 @@ class Stage extends Group {
             this.tickedBeforeRender = false;
         };
         this.afterTickCb = () => {
-            var _a;
             this.tickedBeforeRender = true;
-            if (((_a = this.params.optimize) === null || _a === void 0 ? void 0 : _a.tickRenderMode) === 'performance') ;
-            else {
-                this.state !== 'rendering' && this.render();
-            }
+            this.state !== 'rendering' && this.render();
         };
         this.params = params;
         this.theme = new Theme();
@@ -22019,7 +22083,7 @@ class Stage extends Group {
         this.supportInteractiveLayer = params.interactiveLayer !== false;
         if (!params.optimize) {
             params.optimize = {
-                animateMode: 'performance'
+                tickRenderMode: 'performance'
             };
         }
         this.optmize(params.optimize);
@@ -22027,10 +22091,15 @@ class Stage extends Group {
             this.setAttributes({ background: this._background });
         }
         this.initAnimate(params);
+        this.rafId = (_b = params.rafId) !== null && _b !== void 0 ? _b : Math.floor(Math.random() * 6);
     }
     initAnimate(params) {
+        var _a;
         if (this.createTicker && this.createTimeline) {
             this.ticker = params.ticker || this.createTicker(this);
+            if (((_a = this.params.optimize) === null || _a === void 0 ? void 0 : _a.tickRenderMode) !== 'effect') {
+                this.ticker.setFPS(30);
+            }
             this.timeline = this.createTimeline();
             this.ticker.addTimeline(this.timeline);
             this.ticker.on('tick', this.afterTickCb);
@@ -22390,7 +22459,7 @@ class Stage extends Group {
         }
         if (!this.willNextFrameRender) {
             this.willNextFrameRender = true;
-            this.global.getRequestAnimationFrame()(() => {
+            this.global.getSpecifiedRequestAnimationFrame(this.rafId)(() => {
                 this._doRenderInThisFrame(), (this.willNextFrameRender = false);
             });
         }
@@ -22698,6 +22767,11 @@ let EmptyContext2d = class EmptyContext2d {
         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() {
         if (this.stack.length > 0) {
             matrixAllocate.free(this.matrix);
@@ -24383,30 +24457,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 = () => {
-            if (!(this.nextAnimationFrameCbs && this.nextAnimationFrameCbs.length === 1)) {
-                return;
-            }
-            vglobal.getRequestAnimationFrame()(this.runAnimationFrame);
-        };
-    }
-    addAnimationFrameCb(callback) {
-        this.nextAnimationFrameCbs.push(callback);
-        this.tryRunAnimationFrameNextFrame();
-        return this.nextAnimationFrameCbs.length - 1;
-    }
-}
-
 function getDefaultCharacterConfig(attribute) {
     const { fill = 'black', stroke = false, fontWeight = 'normal', lineHeight, fontFamily = 'Arial', textAlign } = attribute;
     let { fontSize = 12 } = attribute;

package/es/canvas/empty-context.d.ts

@@ -33,6 +33,7 @@ export declare class EmptyContext2d implements IContext2d {
     get currentMatrix(): Matrix;
     cloneMatrix(m: Matrix): IMatrix;
     clear(): void;
+    reset(): void;
     restore(): void;
     highPerformanceRestore(): void;
     rotate(rad: number, setTransform?: boolean): void;

package/es/canvas/empty-context.js

@@ -49,6 +49,10 @@ 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());