@visactor/vrender-core 1.0.0-alpha.6 → 1.0.0-alpha.7

package/cjs/plugins/builtin-plugin/incremental-auto-render-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugins/builtin-plugin/incremental-auto-render-plugin.ts"],"names":[],"mappings":"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","file":"incremental-auto-render-plugin.js","sourcesContent":["import type { IGroup, IPlugin, IPluginService, IDrawContext } from '../../interface';\nimport { application } from '../../application';\nimport { Generator } from '../../common/generator';\n\nexport class IncrementalAutoRenderPlugin implements IPlugin {\n  name: 'IncrementalAutoRenderPlugin' = 'IncrementalAutoRenderPlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  protected nextFrameRenderGroupSet: Set<IGroup> = new Set();\n  protected willNextFrameRender: boolean = false;\n  nextUserParams: Partial<IDrawContext> = {};\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    application.graphicService.hooks.onAddIncremental.tap(this.key, (graphic, group, stage) => {\n      if (graphic.glyphHost) {\n        graphic = graphic.glyphHost;\n      }\n      if (graphic.stage === context.stage && graphic.stage != null) {\n        this.nextUserParams.startAtId = group._uid;\n        this.renderNextFrame(group);\n      }\n    });\n    application.graphicService.hooks.onClearIncremental.tap(this.key, (group, stage) => {\n      if (group.stage === context.stage && group.stage != null) {\n        this.nextUserParams.startAtId = group._uid;\n        this.nextUserParams.restartIncremental = true;\n        this.renderNextFrame(group);\n      }\n    });\n  }\n  deactivate(context: IPluginService): void {\n    application.graphicService.hooks.onAddIncremental.taps =\n      application.graphicService.hooks.onAddIncremental.taps.filter(item => {\n        return item.name !== this.key;\n      });\n    application.graphicService.hooks.onClearIncremental.taps =\n      application.graphicService.hooks.onClearIncremental.taps.filter(item => {\n        return item.name !== this.key;\n      });\n  }\n\n  renderNextFrame(group: IGroup): void {\n    this.nextFrameRenderGroupSet.add(group);\n    if (!this.willNextFrameRender) {\n      this.willNextFrameRender = true;\n      application.global.getRequestAnimationFrame()(() => {\n        this._doRenderInThisFrame();\n        this.willNextFrameRender = false;\n      });\n    }\n  }\n\n  _doRenderInThisFrame() {\n    const stage = this.pluginService.stage;\n    if (this.nextFrameRenderGroupSet.size) {\n      this.nextFrameRenderGroupSet.forEach(group => {\n        const layer = group.layer;\n        if (!layer || !group.layer.subLayers) {\n          return;\n        }\n        const subLayer = group.layer.subLayers.get(group._uid);\n        if (!subLayer || !subLayer.drawContribution) {\n          return;\n        }\n        subLayer.drawContribution.draw(stage.renderService, {\n          stage,\n          layer,\n          viewBox: stage.window.getViewBox(),\n          transMatrix: stage.window.getViewBoxTransform(),\n          // TODO: 多图层时不应该再用默认background\n          clear: 'transparent',\n          renderService: stage.renderService,\n          updateBounds: false,\n          startAtId: group._uid,\n          context: subLayer.layer.getNativeHandler().getContext(),\n          ...this.nextUserParams\n        });\n      });\n      this.nextUserParams = {};\n      this.nextFrameRenderGroupSet.clear();\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../src/plugins/builtin-plugin/incremental-auto-render-plugin.ts"],"names":[],"mappings":"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","file":"incremental-auto-render-plugin.js","sourcesContent":["import type { IGroup, IPlugin, IPluginService, IDrawContext } from '../../interface';\nimport { application } from '../../application';\nimport { Generator } from '../../common/generator';\n\nexport class IncrementalAutoRenderPlugin implements IPlugin {\n  name: 'IncrementalAutoRenderPlugin' = 'IncrementalAutoRenderPlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  protected nextFrameRenderGroupSet: Set<IGroup> = new Set();\n  protected willNextFrameRender: boolean = false;\n  nextUserParams: Partial<IDrawContext> = {};\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    const stage = this.pluginService.stage;\n    if (!stage) {\n      return;\n    }\n    stage.graphicService.hooks.onAddIncremental.tap(this.key, (graphic, group, stage) => {\n      if (graphic.glyphHost) {\n        graphic = graphic.glyphHost;\n      }\n      if (graphic.stage === context.stage && graphic.stage != null) {\n        this.nextUserParams.startAtId = group._uid;\n        this.renderNextFrame(group);\n      }\n    });\n    stage.graphicService.hooks.onClearIncremental.tap(this.key, (group, stage) => {\n      if (group.stage === context.stage && group.stage != null) {\n        this.nextUserParams.startAtId = group._uid;\n        this.nextUserParams.restartIncremental = true;\n        this.renderNextFrame(group);\n      }\n    });\n  }\n  deactivate(context: IPluginService): void {\n    const stage = this.pluginService.stage;\n    if (!stage) {\n      return;\n    }\n    stage.graphicService.hooks.onAddIncremental.taps = stage.graphicService.hooks.onAddIncremental.taps.filter(item => {\n      return item.name !== this.key;\n    });\n    stage.graphicService.hooks.onClearIncremental.taps = stage.graphicService.hooks.onClearIncremental.taps.filter(\n      item => {\n        return item.name !== this.key;\n      }\n    );\n  }\n\n  renderNextFrame(group: IGroup): void {\n    this.nextFrameRenderGroupSet.add(group);\n    if (!this.willNextFrameRender) {\n      this.willNextFrameRender = true;\n      application.global.getRequestAnimationFrame()(() => {\n        this._doRenderInThisFrame();\n        this.willNextFrameRender = false;\n      });\n    }\n  }\n\n  _doRenderInThisFrame() {\n    const stage = this.pluginService.stage;\n    if (this.nextFrameRenderGroupSet.size) {\n      this.nextFrameRenderGroupSet.forEach(group => {\n        const layer = group.layer;\n        if (!layer || !group.layer.subLayers) {\n          return;\n        }\n        const subLayer = group.layer.subLayers.get(group._uid);\n        if (!subLayer || !subLayer.drawContribution) {\n          return;\n        }\n        subLayer.drawContribution.draw(stage.renderService, {\n          stage,\n          layer,\n          viewBox: stage.window.getViewBox(),\n          transMatrix: stage.window.getViewBoxTransform(),\n          // TODO: 多图层时不应该再用默认background\n          clear: 'transparent',\n          renderService: stage.renderService,\n          updateBounds: false,\n          startAtId: group._uid,\n          context: subLayer.layer.getNativeHandler().getContext(),\n          ...this.nextUserParams\n        });\n      });\n      this.nextUserParams = {};\n      this.nextFrameRenderGroupSet.clear();\n    }\n  }\n}\n"]}

package/dist/index.es.js

@@ -10949,6 +10949,7 @@ class Graphic extends Node {
         this._emitCustomEvent('animate-bind', animate);
     }
     tryUpdateAABBBounds() {
+        var _a, _b;
         const full = this.attribute.boundsMode === 'imprecise';
         if (!this.shouldUpdateAABBBounds()) {
             return this._AABBBounds;
@@ -10957,9 +10958,9 @@ class Graphic extends Node {
             this._AABBBounds.clear();
             return this._AABBBounds;
         }
-        application.graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
+        (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
         const bounds = this.doUpdateAABBBounds(full);
-        application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, true);
+        (_b = this.stage) === null || _b === void 0 ? void 0 : _b.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, true);
         if (this.attribute.boundsMode === 'empty') {
             bounds.clear();
         }
@@ -11450,10 +11451,11 @@ class Graphic extends Node {
         return this;
     }
     onAttributeUpdate(context) {
+        var _a;
         if (context && context.skipUpdateCallback) {
             return;
         }
-        application.graphicService.onAttributeUpdate(this);
+        (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onAttributeUpdate(this);
         this._emitCustomEvent('afterAttributeUpdate', context);
     }
     update(d) {
@@ -11745,6 +11747,7 @@ class Graphic extends Node {
         }
     }
     setStage(stage, layer) {
+        var _a;
         if (this.stage !== stage) {
             this.stage = stage;
             this.layer = layer;
@@ -11759,7 +11762,7 @@ class Graphic extends Node {
                 });
             }
             this._onSetStage && this._onSetStage(this, stage, layer);
-            application.graphicService.onSetStage(this, stage);
+            (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onSetStage(this, stage);
         }
     }
     setStageToShadowRoot(stage, layer) {
@@ -12011,14 +12014,15 @@ class Group extends Graphic {
         return false;
     }
     tryUpdateAABBBounds() {
+        var _a, _b;
         if (!this.shouldUpdateAABBBounds()) {
             return this._AABBBounds;
         }
-        application.graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
+        (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
         const selfChange = this.shouldSelfChangeUpdateAABBBounds();
         const bounds = this.doUpdateAABBBounds();
         this.addUpdateLayoutTag();
-        application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange);
+        (_b = this.stage) === null || _b === void 0 ? void 0 : _b.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange);
         if (this.attribute.boundsMode === 'empty') {
             bounds.clear();
         }
@@ -12087,19 +12091,21 @@ class Group extends Graphic {
         return this.theme.getTheme(this);
     }
     incrementalAppendChild(node) {
+        var _a;
         const data = super.appendChild(node);
         if (this.stage && data) {
             data.stage = this.stage;
             data.layer = this.layer;
         }
         this.addUpdateBoundTag();
-        application.graphicService.onAddIncremental(node, this, this.stage);
+        (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onAddIncremental(node, this, this.stage);
         return data;
     }
     incrementalClearChild() {
+        var _a;
         super.removeAllChild();
         this.addUpdateBoundTag();
-        application.graphicService.onClearIncremental(this, this.stage);
+        (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onClearIncremental(this, this.stage);
         return;
     }
     _updateChildToStage(child) {
@@ -12127,15 +12133,17 @@ class Group extends Graphic {
         return this._updateChildToStage(super.insertInto(newNode, idx));
     }
     removeChild(child) {
+        var _a;
         const data = super.removeChild(child);
         child.stage = null;
-        application.graphicService.onRemove(child);
+        (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onRemove(child);
         this.addUpdateBoundTag();
         return data;
     }
     removeAllChild(deep = false) {
         this.forEachChildren((child) => {
-            application.graphicService.onRemove(child);
+            var _a;
+            (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onRemove(child);
             if (deep && child.isContainer) {
                 child.removeAllChild(deep);
             }
@@ -12144,12 +12152,13 @@ class Group extends Graphic {
         this.addUpdateBoundTag();
     }
     setStage(stage, layer) {
+        var _a;
         if (this.stage !== stage) {
             this.stage = stage;
             this.layer = layer;
             this.setStageToShadowRoot(stage, layer);
             this._onSetStage && this._onSetStage(this, stage, layer);
-            application.graphicService.onSetStage(this, stage);
+            (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService.onSetStage(this, stage);
             this.forEachChildren(item => {
                 item.setStage(stage, this.layer);
             });
@@ -21100,7 +21109,7 @@ var pickModule = new ContainerModule((bind, unbind, isBound) => {
 });
 
 var graphicModule = new ContainerModule(bind => {
-    bind(GraphicService).to(DefaultGraphicService).inSingletonScope();
+    bind(GraphicService).to(DefaultGraphicService);
     bind(GraphicCreator$1).toConstantValue(graphicCreator);
 });
 
@@ -22121,9 +22130,13 @@ class AutoRenderPlugin {
     }
     activate(context) {
         this.pluginService = context;
-        application.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handleChange);
-        application.graphicService.hooks.onSetStage.tap(this.key, this.handleChange);
-        application.graphicService.hooks.onRemove.tap(this.key, this.handleChange);
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handleChange);
+        stage.graphicService.hooks.onSetStage.tap(this.key, this.handleChange);
+        stage.graphicService.hooks.onRemove.tap(this.key, this.handleChange);
     }
     deactivate(context) {
         const filterByName = (taps) => {
@@ -22131,9 +22144,13 @@ class AutoRenderPlugin {
                 return item.name !== this.key;
             });
         };
-        application.graphicService.hooks.onAttributeUpdate.taps = filterByName(application.graphicService.hooks.onAttributeUpdate.taps);
-        application.graphicService.hooks.onSetStage.taps = filterByName(application.graphicService.hooks.onSetStage.taps);
-        application.graphicService.hooks.onRemove.taps = filterByName(application.graphicService.hooks.onRemove.taps);
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.onAttributeUpdate.taps = filterByName(stage.graphicService.hooks.onAttributeUpdate.taps);
+        stage.graphicService.hooks.onSetStage.taps = filterByName(stage.graphicService.hooks.onSetStage.taps);
+        stage.graphicService.hooks.onRemove.taps = filterByName(stage.graphicService.hooks.onRemove.taps);
     }
 }
 
@@ -22218,7 +22235,11 @@ class IncrementalAutoRenderPlugin {
     }
     activate(context) {
         this.pluginService = context;
-        application.graphicService.hooks.onAddIncremental.tap(this.key, (graphic, group, stage) => {
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.onAddIncremental.tap(this.key, (graphic, group, stage) => {
             if (graphic.glyphHost) {
                 graphic = graphic.glyphHost;
             }
@@ -22227,7 +22248,7 @@ class IncrementalAutoRenderPlugin {
                 this.renderNextFrame(group);
             }
         });
-        application.graphicService.hooks.onClearIncremental.tap(this.key, (group, stage) => {
+        stage.graphicService.hooks.onClearIncremental.tap(this.key, (group, stage) => {
             if (group.stage === context.stage && group.stage != null) {
                 this.nextUserParams.startAtId = group._uid;
                 this.nextUserParams.restartIncremental = true;
@@ -22236,14 +22257,16 @@ class IncrementalAutoRenderPlugin {
         });
     }
     deactivate(context) {
-        application.graphicService.hooks.onAddIncremental.taps =
-            application.graphicService.hooks.onAddIncremental.taps.filter(item => {
-                return item.name !== this.key;
-            });
-        application.graphicService.hooks.onClearIncremental.taps =
-            application.graphicService.hooks.onClearIncremental.taps.filter(item => {
-                return item.name !== this.key;
-            });
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.onAddIncremental.taps = stage.graphicService.hooks.onAddIncremental.taps.filter(item => {
+            return item.name !== this.key;
+        });
+        stage.graphicService.hooks.onClearIncremental.taps = stage.graphicService.hooks.onClearIncremental.taps.filter(item => {
+            return item.name !== this.key;
+        });
     }
     renderNextFrame(group) {
         this.nextFrameRenderGroupSet.add(group);
@@ -22292,7 +22315,11 @@ class DirtyBoundsPlugin {
             }
             stage.dirtyBounds.clear();
         });
-        application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
             if (graphic.glyphHost) {
                 graphic = graphic.glyphHost;
             }
@@ -22307,7 +22334,7 @@ class DirtyBoundsPlugin {
                 stage.dirty(globalBounds, graphic.parent && graphic.parent.globalTransMatrix);
             }
         });
-        application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
+        stage.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
             if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
                 return;
             }
@@ -22316,7 +22343,7 @@ class DirtyBoundsPlugin {
             }
             stage.dirty(params.globalAABBBounds);
         });
-        application.graphicService.hooks.clearAABBBounds.tap(this.key, (graphic, stage, bounds) => {
+        stage.graphicService.hooks.clearAABBBounds.tap(this.key, (graphic, stage, bounds) => {
             if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
                 return;
             }
@@ -22324,7 +22351,7 @@ class DirtyBoundsPlugin {
                 stage.dirty(bounds);
             }
         });
-        application.graphicService.hooks.onRemove.tap(this.key, (graphic) => {
+        stage.graphicService.hooks.onRemove.tap(this.key, (graphic) => {
             const stage = graphic.stage;
             if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
                 return;
@@ -22335,22 +22362,25 @@ class DirtyBoundsPlugin {
         });
     }
     deactivate(context) {
-        application.graphicService.hooks.beforeUpdateAABBBounds.taps =
-            application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
-                return item.name !== this.key;
-            });
-        application.graphicService.hooks.afterUpdateAABBBounds.taps =
-            application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => {
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.beforeUpdateAABBBounds.taps =
+            stage.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
                 return item.name !== this.key;
             });
-        application.graphicService.hooks.clearAABBBounds.taps =
-            application.graphicService.hooks.clearAABBBounds.taps.filter(item => {
+        stage.graphicService.hooks.afterUpdateAABBBounds.taps =
+            stage.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => {
                 return item.name !== this.key;
             });
-        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
+        stage.graphicService.hooks.clearAABBBounds.taps = stage.graphicService.hooks.clearAABBBounds.taps.filter(item => {
             return item.name !== this.key;
         });
-        application.graphicService.hooks.onRemove.taps = application.graphicService.hooks.onRemove.taps.filter(item => {
+        stage.hooks.afterRender.taps = stage.hooks.afterRender.taps.filter(item => {
+            return item.name !== this.key;
+        });
+        stage.graphicService.hooks.onRemove.taps = stage.graphicService.hooks.onRemove.taps.filter(item => {
             return item.name !== this.key;
         });
     }
@@ -22538,6 +22568,7 @@ class Stage extends Group {
         this.renderService = container.get(RenderService);
         this.pluginService = container.get(PluginService);
         this.layerService = container.get(LayerService);
+        this.graphicService = container.get(GraphicService);
         this.pluginService.active(this, params);
         this.window.create({
             width: params.width,
@@ -22581,7 +22612,7 @@ class Stage extends Group {
         this.supportInteractiveLayer = params.interactiveLayer !== false;
         if (!params.optimize) {
             params.optimize = {
-                tickRenderMode: 'performance'
+                tickRenderMode: 'effect'
             };
         }
         this.optmize(params.optimize);
@@ -26845,8 +26876,6 @@ class HtmlAttributePlugin {
         context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
             return item.name !== this.key;
         });
-        application.graphicService.hooks.onRemove.unTap(this.key);
-        application.graphicService.hooks.onRelease.unTap(this.key);
         this.release();
     }
     getWrapContainer(stage, userContainer, domParams) {
@@ -27590,7 +27619,11 @@ class FlexLayoutPlugin {
     }
     activate(context) {
         this.pluginService = context;
-        application.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
             if (graphic.glyphHost) {
                 graphic = graphic.glyphHost;
             }
@@ -27599,7 +27632,7 @@ class FlexLayoutPlugin {
             }
             this.tryLayout(graphic, false);
         });
-        application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
+        stage.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
             if (graphic.glyphHost) {
                 graphic = graphic.glyphHost;
             }
@@ -27611,7 +27644,7 @@ class FlexLayoutPlugin {
             }
             _tempBounds.copy(bounds);
         });
-        application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
+        stage.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
             if (!(stage && stage === this.pluginService.stage)) {
                 return;
             }
@@ -27622,7 +27655,7 @@ class FlexLayoutPlugin {
                 this.tryLayout(graphic, false);
             }
         });
-        application.graphicService.hooks.onSetStage.tap(this.key, graphic => {
+        stage.graphicService.hooks.onSetStage.tap(this.key, graphic => {
             if (graphic.glyphHost) {
                 graphic = graphic.glyphHost;
             }
@@ -27630,19 +27663,22 @@ class FlexLayoutPlugin {
         });
     }
     deactivate(context) {
-        application.graphicService.hooks.onAttributeUpdate.taps =
-            application.graphicService.hooks.onAttributeUpdate.taps.filter(item => {
-                return item.name !== this.key;
-            });
-        application.graphicService.hooks.beforeUpdateAABBBounds.taps =
-            application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        stage.graphicService.hooks.onAttributeUpdate.taps = stage.graphicService.hooks.onAttributeUpdate.taps.filter(item => {
+            return item.name !== this.key;
+        });
+        stage.graphicService.hooks.beforeUpdateAABBBounds.taps =
+            stage.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
                 return item.name !== this.key;
             });
-        application.graphicService.hooks.afterUpdateAABBBounds.taps =
-            application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => {
+        stage.graphicService.hooks.afterUpdateAABBBounds.taps =
+            stage.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => {
                 return item.name !== this.key;
             });
-        application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(item => {
+        stage.graphicService.hooks.onSetStage.taps = stage.graphicService.hooks.onSetStage.taps.filter(item => {
             return item.name !== this.key;
         });
     }

package/es/core/stage.d.ts

@@ -1,5 +1,5 @@
 import type { IAABBBounds, IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';
-import type { IExportType, IStage, IStageParams, ILayer, IColor, IOption3D, ICamera, vec3, IDirectionLight, ITicker, IRenderService, IPickerService, IPluginService, ISyncHook, IDrawContext, IWindow, ILayerService, ITimeline, IOptimizeType, LayerMode, PickResult, IPlugin } from '../interface';
+import type { IExportType, IStage, IStageParams, ILayer, IColor, IOption3D, ICamera, vec3, IDirectionLight, ITicker, IRenderService, IPickerService, IPluginService, ISyncHook, IDrawContext, IWindow, ILayerService, ITimeline, IOptimizeType, LayerMode, PickResult, IPlugin, IGraphicService } from '../interface';
 import type { Layer } from './layer';
 import { Group } from '../graphic/group';
 type IStageState = 'rendering' | 'normal';
@@ -53,6 +53,7 @@ export declare class Stage extends Group implements IStage {
     protected pickerService?: IPickerService;
     readonly pluginService: IPluginService;
     readonly layerService: ILayerService;
+    readonly graphicService: IGraphicService;
     private _eventSystem?;
     private get eventSystem();
     protected _beforeRender?: (stage: IStage) => void;

package/es/core/stage.js

@@ -34,6 +34,8 @@ import { isBrowserEnv } from "../env-check";
 
 import { Factory } from "../factory";
 
+import { GraphicService } from "../graphic";
+
 const DefaultConfig = {
     WIDTH: 500,
     HEIGHT: 500,
@@ -136,7 +138,8 @@ export class Stage extends Group {
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), 
         this.window = container.get(VWindow), this.renderService = container.get(RenderService), 
         this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), 
-        this.pluginService.active(this, params), this.window.create({
+        this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), 
+        this.window.create({
             width: params.width,
             height: params.height,
             viewBox: params.viewBox,
@@ -156,7 +159,7 @@ export class Stage extends Group {
         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 = {
-            tickRenderMode: "performance"
+            tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString(this._background) && this._background.includes("/") && this.setAttributes({
             background: this._background
         }), this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());