@visactor/vrender-core 0.16.0-alpha.0 → 0.16.0-alpha.2

package/dist/index.js

@@ -6153,7 +6153,8 @@
         scaleIn3d: false,
         direction: 'horizontal',
         wordBreak: 'break-all',
-        ignoreBuf: false
+        ignoreBuf: false,
+        verticalMode: 0
     };
     const DefaultStyle = Object.assign(Object.assign(Object.assign({ opacity: 1, background: null, texture: null, textureColor: 'black', textureSize: 10, texturePadding: 2, backgroundMode: 0, blur: 0, cursor: null, html: null }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout);
     const DefaultConnectAttribute = {
@@ -6162,7 +6163,10 @@
         connectedX: NaN,
         connectedY: NaN
     };
-    const DefaultAttribute = Object.assign(Object.assign({ strokeSeg: null, pickable: true, childrenPickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1 }, DefaultStyle), DefaultTransform);
+    const DefaultDebugAttribute = {
+        _debug_bounds: false
+    };
+    const DefaultAttribute = Object.assign(Object.assign(Object.assign({ strokeSeg: null, pickable: true, childrenPickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1, interactive: false }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
     function addAttributeToPrototype(obj, c, keys) {
         keys.forEach(key => {
             c.prototype[key] = obj[key];
@@ -7762,11 +7766,11 @@
         forEach(cb) {
             return this.forEachChildren(cb);
         }
-        appendChild(node) {
+        appendChild(node, highPerformance = true) {
             if (this._uid === node._uid) {
                 return null;
             }
-            if (node.isAncestorsOf(this)) {
+            if (!highPerformance && node.isAncestorsOf(this)) {
                 throw new Error('【Node::appendChild】不能将父辈元素append为子元素');
             }
             node.parent && node.parent.removeChild(node);
@@ -9997,9 +10001,14 @@
         update(end, ratio, out) {
             if (this.updateCount === 0) {
                 this.onFirstRun();
+                const props = this.step.getLastProps();
+                Object.keys(props).forEach(k => {
+                    if (this.subAnimate.animate.validAttr(k)) {
+                        out[k] = props[k];
+                    }
+                });
             }
             this.updateCount += 1;
-            Object.assign(out, this.step.getLastProps());
             this.onUpdate(end, ratio, out);
             if (end) {
                 this.onEnd();
@@ -13666,6 +13675,9 @@
             return animate;
         }
         onAttributeUpdate(context) {
+            if (context && context.skipUpdateCallback) {
+                return;
+            }
             application.graphicService.onAttributeUpdate(this);
             this._emitCustomEvent('afterAttributeUpdate', context);
         }
@@ -14164,6 +14176,7 @@
         }
         release() {
             this.releaseStatus = 'released';
+            application.graphicService.onRelease(this);
         }
         _emitCustomEvent(type, context) {
             var _a, _b;
@@ -14959,11 +14972,13 @@
     }
     Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
 
-    const LayerHandlerContribution = Symbol.for('LayerHandlerContribution');
     class Layer extends Group {
         get offscreen() {
             return this.layerHandler.offscreen;
         }
+        get layerMode() {
+            return this.layerHandler.type;
+        }
         get width() {
             if (!this.stage) {
                 return 0;
@@ -15001,7 +15016,7 @@
             this.global = global;
             this.window = window;
             this.main = params.main;
-            this.layerHandler = container.get(LayerHandlerContribution);
+            this.layerHandler = params.layerHandler;
             this.layerHandler.init(this, window, {
                 main: params.main,
                 canvasId: params.canvasId,
@@ -15013,7 +15028,6 @@
             this.subLayers = new Map();
             this.theme = new Theme();
             this.background = 'rgba(0, 0, 0, 0)';
-            this.virtual = !!params.virtual;
             this.afterDrawCbs = [];
         }
         combineSubLayer(removeIncrementalKey = true) {
@@ -15045,6 +15059,14 @@
         pick(x, y) {
             throw new Error('暂不支持');
         }
+        tryRenderSecondaryLayer(params, userParams) {
+            if (this.layerHandler.secondaryHandlers && this.layerHandler.secondaryHandlers.length) {
+                this.layerHandler.secondaryHandlers.forEach(h => {
+                    h.layer.renderCount = this.renderCount;
+                    h.layer.render(params, userParams);
+                });
+            }
+        }
         render(params, userParams) {
             var _a;
             const stage = this.stage;
@@ -15060,6 +15082,7 @@
                 updateBounds: params.updateBounds
             }, userParams);
             this.afterDrawCbs.forEach(c => c(this));
+            this.tryRenderSecondaryLayer(params, userParams);
         }
         resize(w, h) {
             this.layerHandler.resize(w, h);
@@ -15105,6 +15128,13 @@
         }
     }
 
+    const TransformUtil = Symbol.for('TransformUtil');
+    const GraphicUtil = Symbol.for('GraphicUtil');
+    const LayerService = Symbol.for('LayerService');
+    const StaticLayerHandlerContribution = Symbol.for('StaticLayerHandlerContribution');
+    const DynamicLayerHandlerContribution = Symbol.for('DynamicLayerHandlerContribution');
+    const VirtualLayerHandlerContribution = Symbol.for('VirtualLayerHandlerContribution');
+
     exports.DefaultLayerService = class DefaultLayerService {
         constructor(global) {
             this.global = global;
@@ -15120,15 +15150,57 @@
         getStageLayer(stage) {
             return this.layerMap.get(stage);
         }
+        getRecommendedLayerType(layerMode) {
+            if (layerMode) {
+                return layerMode;
+            }
+            if (this.staticLayerCountInEnv !== 0) {
+                return 'static';
+            }
+            else if (this.dynamicLayerCountInEnv !== 0) {
+                return 'dynamic';
+            }
+            return 'virtual';
+        }
+        getLayerHandler(layerMode) {
+            let layerHandler;
+            if (layerMode === 'static') {
+                layerHandler = container.get(StaticLayerHandlerContribution);
+            }
+            else if (layerMode === 'dynamic') {
+                layerHandler = container.get(DynamicLayerHandlerContribution);
+            }
+            else {
+                layerHandler = container.get(VirtualLayerHandlerContribution);
+            }
+            return layerHandler;
+        }
         createLayer(stage, options = { main: false }) {
             this.tryInit();
-            const layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({}, options), { virtual: this.staticLayerCountInEnv === 0 }));
+            const layerMode = this.getRecommendedLayerType(options.layerMode);
+            const layerHandler = this.getLayerHandler(layerMode);
+            const layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({ main: false }, options), { layerMode,
+                layerHandler }));
             const stageLayers = this.layerMap.get(stage) || [];
             stageLayers.push(layer);
             this.layerMap.set(stage, stageLayers);
             this.staticLayerCountInEnv--;
             return layer;
         }
+        prepareStageLayer(stage) {
+            let mainHandler;
+            stage.forEachChildren((l) => {
+                const handler = l.getNativeHandler();
+                if (handler.type === 'virtual') {
+                    handler.mainHandler = mainHandler;
+                    mainHandler.secondaryHandlers.push(handler);
+                }
+                else {
+                    mainHandler = handler;
+                    mainHandler.secondaryHandlers = [];
+                }
+            });
+        }
         releaseLayer(stage, layer) {
             layer.release();
             const stageLayers = this.layerMap.get(stage) || [];
@@ -15274,10 +15346,6 @@
         __metadata("design:paramtypes", [Object])
     ], exports.DefaultWindow);
 
-    const TransformUtil = Symbol.for('TransformUtil');
-    const GraphicUtil = Symbol.for('GraphicUtil');
-    const LayerService = Symbol.for('LayerService');
-
     var coreModule = new ContainerModule(bind => {
         bind(exports.DefaultGlobal).toSelf().inSingletonScope();
         bind(VGlobal).toService(exports.DefaultGlobal);
@@ -15513,7 +15581,7 @@
                     context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise);
                 }
                 else {
-                    context.moveTo(cx + outerRadius * cos(outerEndAngle), cy + (yore !== null && yore !== void 0 ? yore : 0));
+                    context.moveTo(cx + outerRadius * cos(outerEndAngle), cy + outerRadius * sin(outerEndAngle));
                 }
             }
             if (!(innerRadius > epsilon) || innerDeltaAngle < 0.001) {
@@ -16195,15 +16263,27 @@
             }
             return this._AABBBounds;
         }
+        getBaselineMapAlign() {
+            return Text.baselineMapAlign;
+        }
+        getAlignMapBaseline() {
+            return Text.alignMapBaseline;
+        }
         updateVerticalSinglelineAABBBounds(text) {
-            var _a;
+            var _a, _b, _c;
             const textTheme = getTheme(this).text;
             const textMeasure = application.graphicUtil.textMeasure;
             let width;
             const attribute = this.attribute;
             const { ignoreBuf = textTheme.ignoreBuf } = attribute;
             const buf = ignoreBuf ? 0 : 2;
-            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontFamily = textTheme.fontFamily, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
+            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontFamily = textTheme.fontFamily, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode } = attribute;
+            let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
+            if (!verticalMode) {
+                const t = textAlign;
+                textAlign = (_b = Text.baselineMapAlign[textBaseline]) !== null && _b !== void 0 ? _b : 'left';
+                textBaseline = (_c = Text.alignMapBaseline[t]) !== null && _c !== void 0 ? _c : 'top';
+            }
             if (!this.shouldUpdateShape() && this.cache) {
                 width = this.cache.clipedWidth;
                 const dx = textDrawOffsetX(textAlign, width);
@@ -16279,14 +16359,20 @@
             return this._AABBBounds;
         }
         updateVerticalMultilineAABBBounds(text) {
-            var _a;
+            var _a, _b, _c;
             const textTheme = getTheme(this).text;
             const textMeasure = application.graphicUtil.textMeasure;
             let width;
             const attribute = this.attribute;
             const { ignoreBuf = textTheme.ignoreBuf } = attribute;
             const buf = ignoreBuf ? 0 : 2;
-            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
+            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode } = attribute;
+            let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
+            if (!verticalMode) {
+                const t = textAlign;
+                textAlign = (_b = Text.baselineMapAlign[textBaseline]) !== null && _b !== void 0 ? _b : 'left';
+                textBaseline = (_c = Text.alignMapBaseline[t]) !== null && _c !== void 0 ? _c : 'top';
+            }
             width = 0;
             if (!this.shouldUpdateShape() && this.cache) {
                 this.cache.verticalList.forEach(item => {
@@ -16366,6 +16452,16 @@
         }
     }
     Text.NOWORK_ANIMATE_ATTR = Object.assign({ ellipsis: 1, wordBreak: 1, direction: 1, textAlign: 1, textBaseline: 1, fontFamily: 1, fontWeight: 1 }, NOWORK_ANIMATE_ATTR);
+    Text.baselineMapAlign = {
+        top: 'left',
+        bottom: 'right',
+        middle: 'center'
+    };
+    Text.alignMapBaseline = {
+        left: 'top',
+        right: 'bottom',
+        center: 'middle'
+    };
 
     const WRAP_TEXT_UPDATE_TAG_KEY = ['heightLimit', 'lineClamp'];
     class WrapText extends Text {
@@ -20075,6 +20171,7 @@
                 onAttributeUpdate: new SyncHook(['graphic']),
                 onSetStage: new SyncHook(['graphic', 'stage']),
                 onRemove: new SyncHook(['graphic']),
+                onRelease: new SyncHook(['graphic']),
                 onAddIncremental: new SyncHook(['graphic', 'group', 'stage']),
                 onClearIncremental: new SyncHook(['graphic', 'group', 'stage']),
                 beforeUpdateAABBBounds: new SyncHook([
@@ -20109,6 +20206,11 @@
                 this.hooks.onRemove.call(graphic);
             }
         }
+        onRelease(graphic) {
+            if (this.hooks.onRelease.taps.length) {
+                this.hooks.onRelease.call(graphic);
+            }
+        }
         onAddIncremental(graphic, group, stage) {
             if (this.hooks.onAddIncremental.taps.length) {
                 this.hooks.onAddIncremental.call(graphic, group, stage);
@@ -22527,10 +22629,16 @@
             this.init(textRenderContribitions);
         }
         drawShape(text, context, x, y, drawContext, params, fillCb, strokeCb) {
-            var _a;
+            var _a, _b, _c;
             const textAttribute = getTheme(text, params === null || params === void 0 ? void 0 : params.theme).text;
-            const { text: str, fill = textAttribute.fill, stroke = textAttribute.stroke, fillOpacity = textAttribute.fillOpacity, strokeOpacity = textAttribute.strokeOpacity, opacity = textAttribute.opacity, lineWidth = textAttribute.lineWidth, visible = textAttribute.visible, underline = textAttribute.underline, lineThrough = textAttribute.lineThrough, keepDirIn3d = textAttribute.keepDirIn3d, direction = textAttribute.direction, fontSize = textAttribute.fontSize, textBaseline = textAttribute.textBaseline, textAlign = textAttribute.textAlign, x: originX = textAttribute.x, y: originY = textAttribute.y } = text.attribute;
-            const lineHeight = (_a = text.attribute.lineHeight) !== null && _a !== void 0 ? _a : fontSize;
+            const { text: str, fill = textAttribute.fill, stroke = textAttribute.stroke, fillOpacity = textAttribute.fillOpacity, strokeOpacity = textAttribute.strokeOpacity, opacity = textAttribute.opacity, lineWidth = textAttribute.lineWidth, visible = textAttribute.visible, underline = textAttribute.underline, lineThrough = textAttribute.lineThrough, keepDirIn3d = textAttribute.keepDirIn3d, direction = textAttribute.direction, fontSize = textAttribute.fontSize, verticalMode = textAttribute.verticalMode, x: originX = textAttribute.x, y: originY = textAttribute.y } = text.attribute;
+            let { textAlign = textAttribute.textAlign, textBaseline = textAttribute.textBaseline } = text.attribute;
+            if (!verticalMode && direction === 'vertical') {
+                const t = textAlign;
+                textAlign = (_a = text.getBaselineMapAlign()[textBaseline]) !== null && _a !== void 0 ? _a : 'left';
+                textBaseline = (_b = text.getAlignMapBaseline()[t]) !== null && _b !== void 0 ? _b : 'top';
+            }
+            const lineHeight = (_c = text.attribute.lineHeight) !== null && _c !== void 0 ? _c : fontSize;
             const data = this.valid(text, textAttribute, fillCb, strokeCb);
             if (!data) {
                 return;
@@ -24010,7 +24118,11 @@
                     result = this.pickGroup(graphics[i], point, parentMatrix, params);
                 }
                 else {
-                    result.graphic = this.pickItem(graphics[i], point, parentMatrix, params);
+                    const data = this.pickItem(graphics[i], point, parentMatrix, params);
+                    if (data) {
+                        result.graphic = data.graphic;
+                        result.params = data.params;
+                    }
                 }
                 if (result.graphic) {
                     break;
@@ -24064,7 +24176,11 @@
                     else {
                         const newPoint = new Point(point.x, point.y);
                         parentMatrix.transformPoint(newPoint, newPoint);
-                        result.graphic = this.pickItem(graphic, newPoint, parentMatrix, params);
+                        const data = this.pickItem(graphic, newPoint, parentMatrix, params);
+                        if (data) {
+                            result.graphic = data.graphic;
+                            result.params = data.params;
+                        }
                     }
                     return !!result.graphic || !!result.group;
                 });
@@ -24079,7 +24195,9 @@
                 return null;
             }
             if (graphic.AABBBounds.containsPoint(point)) {
-                return graphic;
+                return {
+                    graphic: graphic
+                };
             }
             return null;
         }
@@ -24099,21 +24217,21 @@
             if (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) {
                 return this._pickItem(graphic, pickerService, point, pickParams, params);
             }
-            return false;
+            return null;
         }
         beforePickItem(graphic, pickerService, point, pickParams, params) {
             if (graphic.attribute.shadowRootIdx < 0) {
                 return this._pickItem(graphic, pickerService, point, pickParams, params);
             }
-            return false;
+            return null;
         }
         _pickItem(graphic, pickerService, point, pickParams, params) {
             if (!graphic.shadowRoot) {
-                return false;
+                return null;
             }
             const { parentMatrix } = params || {};
             if (!parentMatrix) {
-                return false;
+                return null;
             }
             const context = pickerService.pickContext;
             context.highPerformanceSave();
@@ -24371,6 +24489,7 @@
     let CanvasLayerHandlerContribution = class CanvasLayerHandlerContribution {
         constructor(global) {
             this.global = global;
+            this.type = 'static';
             this.offscreen = false;
         }
         setDpr(dpr) {
@@ -24466,9 +24585,64 @@
         __metadata("design:paramtypes", [Object])
     ], CanvasLayerHandlerContribution);
 
+    let EmptyLayerHandlerContribution = class EmptyLayerHandlerContribution {
+        constructor(global) {
+            this.global = global;
+            this.type = 'virtual';
+            this.offscreen = false;
+        }
+        setDpr(dpr) {
+            return;
+        }
+        init(layer, window, params) {
+            this.layer = layer;
+            this.window = window;
+            if (params.main) {
+                throw new Error('virtual layer不能作为main layer');
+            }
+            this.main = false;
+            this.canvas = null;
+            this.context = null;
+        }
+        resize(w, h) {
+            return;
+        }
+        resizeView(w, h) {
+            return;
+        }
+        render(group, params, userParams) {
+            this.mainHandler.render(group, params, Object.assign(Object.assign({}, userParams), { clear: false }));
+            return;
+        }
+        merge(layerHandlers) {
+            return;
+        }
+        prepare(dirtyBounds, params) {
+            return;
+        }
+        drawTo(target, group, params) {
+            var _a;
+            const context = target.getContext();
+            params.renderService.render(group, Object.assign(Object.assign({ context }, params), { clear: params.clear ? (_a = params.background) !== null && _a !== void 0 ? _a : '#fff' : undefined }));
+            return;
+        }
+        getContext() {
+            return null;
+        }
+        release() {
+            return;
+        }
+    };
+    EmptyLayerHandlerContribution = __decorate([
+        injectable(),
+        __param(0, inject(VGlobal)),
+        __metadata("design:paramtypes", [Object])
+    ], EmptyLayerHandlerContribution);
+
     let OffscreenLayerHandlerContribution = class OffscreenLayerHandlerContribution {
         constructor(global) {
             this.global = global;
+            this.type = 'dynamic';
             this.offscreen = true;
         }
         setDpr(dpr) {
@@ -24538,7 +24712,10 @@
     var layerHandlerModules = new ContainerModule(bind => {
         bind(CanvasLayerHandlerContribution).toSelf();
         bind(OffscreenLayerHandlerContribution).toSelf();
-        bind(LayerHandlerContribution).toService(CanvasLayerHandlerContribution);
+        bind(EmptyLayerHandlerContribution).toSelf();
+        bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution);
+        bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution);
+        bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
     });
 
     function load$1(container) {
@@ -24714,6 +24891,82 @@
     ShadowRootDrawItemInterceptorContribution = __decorate([
         injectable()
     ], ShadowRootDrawItemInterceptorContribution);
+    let CommonDrawItemInterceptorContribution = class CommonDrawItemInterceptorContribution {
+        constructor() {
+            this.order = 1;
+        }
+        afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) {
+                this.drawItem(graphic, renderService, drawContext, drawContribution, params);
+            }
+            return false;
+        }
+        beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if (graphic.attribute.shadowRootIdx < 0) {
+                this.drawItem(graphic, renderService, drawContext, drawContribution, params);
+            }
+            return false;
+        }
+        drawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if (!graphic.attribute._debug_bounds) {
+                return false;
+            }
+            const { context } = drawContext;
+            context.highPerformanceSave();
+            const b = graphic.AABBBounds;
+            if (graphic.attribute._debug_bounds !== true) {
+                graphic.attribute._debug_bounds(context, graphic);
+            }
+            context.strokeRect(b.x1, b.y1, b.width(), b.height());
+            context.highPerformanceRestore();
+            return true;
+        }
+    };
+    CommonDrawItemInterceptorContribution = __decorate([
+        injectable()
+    ], CommonDrawItemInterceptorContribution);
+    let InteractiveDrawItemInterceptorContribution = class InteractiveDrawItemInterceptorContribution {
+        constructor() {
+            this.order = 1;
+        }
+        beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            let interactiveGraphic;
+            if (graphic.attribute.interactive) {
+                interactiveGraphic = graphic.interactiveGraphic;
+                if (!interactiveGraphic) {
+                    interactiveGraphic = graphic.clone();
+                    graphic.interactiveGraphic = interactiveGraphic;
+                }
+                const m = graphic.globalTransMatrix;
+                interactiveGraphic.setAttributes({
+                    x: 0,
+                    y: 0,
+                    scaleX: 1,
+                    scaleY: 1,
+                    angle: 0,
+                    postMatrix: m,
+                    interactive: false
+                }, false, { skipUpdateCallback: true });
+                drawContext.stage.tryInitInteractiveLayer();
+                const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
+                if (interactiveLayer) {
+                    interactiveLayer.add(interactiveGraphic);
+                }
+                return true;
+            }
+            else if (interactiveGraphic) {
+                drawContext.stage.tryInitInteractiveLayer();
+                const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
+                if (interactiveLayer) {
+                    interactiveLayer.removeChild(interactiveGraphic);
+                }
+            }
+            return false;
+        }
+    };
+    InteractiveDrawItemInterceptorContribution = __decorate([
+        injectable()
+    ], InteractiveDrawItemInterceptorContribution);
     let Canvas3DDrawItemInterceptor = class Canvas3DDrawItemInterceptor {
         constructor() {
             this.order = 1;
@@ -26381,8 +26634,12 @@
         bindContributionProvider(bind, GraphicRender);
         bind(ShadowRootDrawItemInterceptorContribution).toSelf().inSingletonScope();
         bind(DrawItemInterceptor).toService(ShadowRootDrawItemInterceptorContribution);
+        bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope();
+        bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution);
         bind(Canvas3DDrawItemInterceptor).toSelf().inSingletonScope();
         bind(DrawItemInterceptor).toService(Canvas3DDrawItemInterceptor);
+        bind(InteractiveDrawItemInterceptorContribution).toSelf().inSingletonScope();
+        bind(DrawItemInterceptor).toService(InteractiveDrawItemInterceptorContribution);
         bindContributionProvider(bind, DrawItemInterceptor);
     });
 
@@ -26602,6 +26859,9 @@
                 }
                 this.drawHTML(context.stage.renderService);
             });
+            application.graphicService.hooks.onRelease.tap(this.key, graphic => {
+                this.removeDom(graphic);
+            });
         }
         deactivate(context) {
             context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
@@ -26631,6 +26891,14 @@
                 }
             });
         }
+        removeDom(graphic) {
+            if (graphic.bindDom && graphic.bindDom.size) {
+                graphic.bindDom.forEach(item => {
+                    item.dom && item.dom.parentElement.removeChild(item.dom);
+                });
+                graphic.bindDom.clear();
+            }
+        }
         renderGraphicHTML(graphic) {
             const { html } = graphic.attribute;
             if (!html) {
@@ -27451,6 +27719,7 @@
             else {
                 this._viewBox.setValue(0, 0, this.width, this.height);
             }
+            this.state = 'normal';
             this.renderCount = 0;
             this._subView = !(this._viewBox.width() === this.width && this._viewBox.height() === this.height);
             this._background = (_a = params.background) !== null && _a !== void 0 ? _a : DefaultConfig$1.BACKGROUND;
@@ -27703,10 +27972,10 @@
         combineLayer(ILayer1, ILayer2) {
             throw new Error('暂不支持');
         }
-        createLayer(canvasId) {
+        createLayer(layerMode) {
             const layer = this.layerService.createLayer(this, {
                 main: false,
-                canvasId
+                layerMode
             });
             this.appendChild(layer);
             return layer;
@@ -27735,37 +28004,27 @@
         render(layers, params) {
             this.ticker.start();
             this.timeline.resume();
+            const state = this.state;
+            this.state = 'rendering';
+            this.layerService.prepareStageLayer(this);
             if (!this._skipRender) {
                 this.lastRenderparams = params;
                 this.hooks.beforeRender.call(this);
-                (layers || this).forEach((layer, i) => {
-                    layer.render({
-                        renderService: this.renderService,
-                        background: layer === this.defaultLayer ? this.background : undefined,
-                        updateBounds: !!this.dirtyBounds
-                    }, Object.assign({ renderStyle: this.renderStyle }, params));
-                });
+                this.renderLayerList(this.children);
                 this.combineLayersToWindow();
                 this.nextFrameRenderLayerSet.clear();
                 this.hooks.afterRender.call(this);
             }
+            this.state = state;
             this._skipRender && this._skipRender++;
         }
         combineLayersToWindow() {
-            this.forEach((layer, i) => {
-                layer.combineTo(this.window, {
-                    clear: i === 0,
-                    x: this.x,
-                    y: this.y,
-                    width: this.viewWidth,
-                    height: this.viewHeight,
-                    renderService: this.renderService,
-                    background: layer === this.defaultLayer ? this.background : undefined,
-                    updateBounds: !!this.dirtyBounds
-                });
-            });
+            return;
         }
-        renderNextFrame(layers) {
+        renderNextFrame(layers, force) {
+            if (this.state === 'rendering' && !force) {
+                return;
+            }
             if (this.nextFrameRenderLayerSet.size !== this.childrenCount) {
                 (layers || this).forEach((layer) => {
                     this.nextFrameRenderLayerSet.add(layer);
@@ -27781,23 +28040,42 @@
         _doRenderInThisFrame() {
             this.timeline.resume();
             this.ticker.start();
+            const state = this.state;
+            this.state = 'rendering';
+            this.layerService.prepareStageLayer(this);
             if (this.nextFrameRenderLayerSet.size && !this._skipRender) {
                 this.hooks.beforeRender.call(this);
-                this.forEach((layer) => {
-                    if (this.nextFrameRenderLayerSet.has(layer)) {
-                        layer.render({
-                            renderService: this.renderService,
-                            background: layer === this.defaultLayer ? this.background : undefined,
-                            updateBounds: !!this.dirtyBounds
-                        }, Object.assign({ renderStyle: this.renderStyle }, (this.lastRenderparams || {})));
-                    }
-                });
+                this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {});
                 this.combineLayersToWindow();
                 this.hooks.afterRender.call(this);
                 this.nextFrameRenderLayerSet.clear();
             }
+            this.state = state;
             this._skipRender && this._skipRender++;
         }
+        renderLayerList(layerList, params) {
+            const list = [];
+            for (let i = 0; i < layerList.length; i++) {
+                let l = layerList[i];
+                if (l.layerMode === 'virtual') {
+                    l = l.getNativeHandler().mainHandler.layer;
+                }
+                if (!list.includes(l)) {
+                    list.push(l);
+                }
+            }
+            list.forEach(layer => {
+                if (layer.renderCount > this.renderCount) {
+                    return;
+                }
+                layer.renderCount = this.renderCount + 1;
+                layer.render({
+                    renderService: this.renderService,
+                    background: layer === this.defaultLayer ? this.background : undefined,
+                    updateBounds: !!this.dirtyBounds
+                }, Object.assign({ renderStyle: this.renderStyle }, params));
+            });
+        }
         resizeWindow(w, h, rerender = true) {
             this.window.resize(w, h);
             rerender && this.render();
@@ -28506,7 +28784,7 @@
                     result = this.pickGroup(graphics[i], point, parentMatrix, params);
                 }
                 else {
-                    result.graphic = this.pickItem(graphics[i], point, parentMatrix, params);
+                    result = this.pickItem(graphics[i], point, parentMatrix, params);
                 }
                 if (result.graphic) {
                     break;
@@ -28588,12 +28866,13 @@
                 return result;
             }
             const pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
-            if (pickedItem) {
-                result.graphic = pickedItem;
+            if (pickedItem && pickedItem.graphic) {
+                result.graphic = pickedItem.graphic;
+                result.params = pickedItem.params;
             }
             const groupPicked = group.attribute.pickable !== false && insideGroup;
             currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-            if (group.attribute.childrenPickable !== false && !pickedItem) {
+            if (group.attribute.childrenPickable !== false && !(pickedItem && pickedItem.graphic)) {
                 foreach(group, DefaultAttribute.zIndex, (graphic) => {
                     if (graphic.isContainer) {
                         const newPoint = new Point(point.x, point.y);
@@ -28611,7 +28890,10 @@
                         newPoint.x -= scrollX;
                         newPoint.y -= scrollY;
                         const pickedItem = this.pickItem(graphic, newPoint, parentMatrix, params);
-                        result.graphic = pickedItem;
+                        if (pickedItem && pickedItem.graphic) {
+                            result.graphic = pickedItem.graphic;
+                            result.params = pickedItem.params;
+                        }
                     }
                     return !!result.graphic || !!result.group;
                 }, true, !!context.camera);
@@ -28690,6 +28972,7 @@
     exports.DefaultAttribute = DefaultAttribute;
     exports.DefaultCircleAttribute = DefaultCircleAttribute;
     exports.DefaultConnectAttribute = DefaultConnectAttribute;
+    exports.DefaultDebugAttribute = DefaultDebugAttribute;
     exports.DefaultFillStyle = DefaultFillStyle;
     exports.DefaultGlyphAttribute = DefaultGlyphAttribute;
     exports.DefaultGroupAttribute = DefaultGroupAttribute;
@@ -28717,6 +29000,7 @@
     exports.DefaultTimeline = DefaultTimeline;
     exports.DefaultTransform = DefaultTransform;
     exports.DrawContribution = DrawContribution;
+    exports.DynamicLayerHandlerContribution = DynamicLayerHandlerContribution;
     exports.EnvContribution = EnvContribution;
     exports.EventManager = EventManager;
     exports.EventSystem = EventSystem;
@@ -28755,7 +29039,6 @@
     exports.InteractiveSubRenderContribution = InteractiveSubRenderContribution;
     exports.LINE_NUMBER_TYPE = LINE_NUMBER_TYPE;
     exports.Layer = Layer;
-    exports.LayerHandlerContribution = LayerHandlerContribution;
     exports.LayerService = LayerService;
     exports.Line = Line$1;
     exports.LineRender = LineRender;
@@ -28812,6 +29095,7 @@
     exports.SYMBOL_NUMBER_TYPE = SYMBOL_NUMBER_TYPE;
     exports.SegContext = SegContext;
     exports.Stage = Stage;
+    exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
     exports.Step = Step$1;
     exports.StreamLight = StreamLight;
     exports.SubAnimate = SubAnimate;
@@ -28829,6 +29113,7 @@
     exports.TransformUtil = TransformUtil;
     exports.VGlobal = VGlobal;
     exports.VWindow = VWindow;
+    exports.VirtualLayerHandlerContribution = VirtualLayerHandlerContribution;
     exports.WILDCARD = WILDCARD;
     exports.WindowHandlerContribution = WindowHandlerContribution;
     exports.WrapText = WrapText;