@visactor/vrender-core 0.16.0-alpha.3 → 0.16.0-alpha.9

package/dist/index.js

@@ -4276,7 +4276,7 @@
     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);
+    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, globalZIndex: 1, globalCompositeOperation: '', overflow: 'hidden' }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
     function addAttributeToPrototype(obj, c, keys) {
         keys.forEach(key => {
             c.prototype[key] = obj[key];
@@ -11300,6 +11300,7 @@
     ResourceLoader.cache = new Map();
 
     const tempMatrix = new vutils.Matrix();
+    const tempBounds$1 = new vutils.AABBBounds();
     const PURE_STYLE_KEY = [
         'stroke',
         'opacity',
@@ -11818,15 +11819,39 @@
             var _a, _b, _c, _d;
             if (hasAnimation) {
                 const keys = Object.keys(attrs);
-                const animateAttrs = isClear
-                    ? keys.reduce((res, key) => {
-                        res[key] = attrs[key] === undefined ? this.getDefaultAttribute(key) : attrs[key];
-                        return res;
-                    }, {})
-                    : attrs;
+                const noWorkAAttr = this.getNoWorkAnimateAttr();
+                const animateAttrs = {};
+                let noAnimateAttrs;
+                if (isClear) {
+                    keys.forEach(key => {
+                        if (!noWorkAAttr[key]) {
+                            animateAttrs[key] = attrs[key] === undefined ? this.getDefaultAttribute(key) : attrs[key];
+                        }
+                        else {
+                            if (!noAnimateAttrs) {
+                                noAnimateAttrs = {};
+                            }
+                            noAnimateAttrs[key] = attrs[key];
+                        }
+                    });
+                }
+                else {
+                    keys.forEach(key => {
+                        if (!noWorkAAttr[key]) {
+                            animateAttrs[key] = attrs[key];
+                        }
+                        else {
+                            if (!noAnimateAttrs) {
+                                noAnimateAttrs = {};
+                            }
+                            noAnimateAttrs[key] = attrs[key];
+                        }
+                    });
+                }
                 const animate = this.animate();
                 animate.stateNames = stateNames;
                 animate.to(animateAttrs, (_b = (_a = this.stateAnimateConfig) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : DefaultStateAnimateConfig.duration, (_d = (_c = this.stateAnimateConfig) === null || _c === void 0 ? void 0 : _c.easing) !== null && _d !== void 0 ? _d : DefaultStateAnimateConfig.easing);
+                noAnimateAttrs && this.setAttributes(noAnimateAttrs, false, { type: exports.AttributeUpdateType.STATE });
             }
             else {
                 this.setAttributes(attrs, false, { type: exports.AttributeUpdateType.STATE });
@@ -11979,26 +12004,44 @@
         needUpdateLayout() {
             return !!(this._updateTag & exports.UpdateTag.UPDATE_LAYOUT);
         }
+        getAnchor(anchor, params) {
+            const _anchor = [0, 0];
+            const getBounds = () => {
+                if (params.b) {
+                    return params.b;
+                }
+                const { scaleX, scaleY, angle } = this.attribute;
+                tempBounds$1.copy(this._AABBBounds);
+                this.setAttributes({ scaleX: 1, scaleY: 1, angle: 0 });
+                params.b = this.AABBBounds.clone();
+                this._AABBBounds.copy(tempBounds$1);
+                this.setAttributes({ scaleX, scaleY, angle });
+                return params.b;
+            };
+            if (typeof anchor[0] === 'string') {
+                const ratio = parseFloat(anchor[0]) / 100;
+                const bounds = getBounds();
+                _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+            }
+            else {
+                _anchor[0] = anchor[0];
+            }
+            if (typeof anchor[1] === 'string') {
+                const ratio = parseFloat(anchor[1]) / 100;
+                const bounds = getBounds();
+                _anchor[1] = bounds.y1 + (bounds.y2 - bounds.y1) * ratio;
+            }
+            else {
+                _anchor[1] = anchor[1];
+            }
+            return _anchor;
+        }
         doUpdateLocalMatrix() {
             const { x = DefaultTransform.x, y = DefaultTransform.y, scaleX = DefaultTransform.scaleX, scaleY = DefaultTransform.scaleY, angle = DefaultTransform.angle, scaleCenter, anchor, postMatrix } = this.attribute;
-            const _anchor = [0, 0];
+            let _anchor = [0, 0];
+            const params = {};
             if (anchor) {
-                if (typeof anchor[0] === 'string') {
-                    const ratio = parseFloat(anchor[0]) / 100;
-                    const bounds = this.AABBBounds;
-                    _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-                }
-                else {
-                    _anchor[0] = anchor[0];
-                }
-                if (typeof anchor[1] === 'string') {
-                    const ratio = parseFloat(anchor[1]) / 100;
-                    const bounds = this.AABBBounds;
-                    _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-                }
-                else {
-                    _anchor[1] = anchor[1];
-                }
+                _anchor = this.getAnchor(anchor, params);
             }
             if (scaleCenter && (scaleX !== 1 || scaleY !== 1)) {
                 const m = this._transMatrix;
@@ -12007,7 +12050,8 @@
                 m.rotate(angle);
                 m.translate(-_anchor[0], -_anchor[1]);
                 m.translate(x, y);
-                application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, { x: scaleCenter[0], y: scaleCenter[1] });
+                _anchor = this.getAnchor(scaleCenter, params);
+                application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, { x: _anchor[0], y: _anchor[1] });
             }
             else {
                 vutils.normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);
@@ -13289,8 +13333,7 @@
             this.tryInit();
             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 layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({ main: false }, options), { layerMode: options.canvasId ? 'static' : layerMode, canvasId: options.canvasId, layerHandler }));
             const stageLayers = this.layerMap.get(stage) || [];
             stageLayers.push(layer);
             this.layerMap.set(stage, stageLayers);
@@ -13516,7 +13559,7 @@
         context.beginPath();
         const path = typeof graphic.pathProxy === 'function' ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
         renderCommandList(path.commandList, context, x, y);
-        context.setShadowStyle && context.setShadowStyle(graphic, graphic.attribute, themeAttributes);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes);
         if (doStroke) {
             if (strokeCb) {
                 strokeCb(context, graphic.attribute, themeAttributes);
@@ -17703,7 +17746,7 @@
             if (outerBorder) {
                 const defaultOuterBorder = theme.outerBorder;
                 const { distance = defaultOuterBorder.distance, lineWidth = defaultOuterBorder.lineWidth } = outerBorder;
-                aabbBounds.expand(distance + shadowBlur + lineWidth / 2);
+                aabbBounds.expand(distance + (shadowBlur + lineWidth) / 2);
             }
             return aabbBounds;
         }
@@ -17726,7 +17769,7 @@
             if (outerBorder) {
                 const defaultOuterBorder = symbolTheme.outerBorder;
                 const { distance = defaultOuterBorder.distance, lineWidth = defaultOuterBorder.lineWidth } = outerBorder;
-                boundStroke(aabbBounds, distance + shadowBlur + lineWidth / 2, true, strokeBoundsBuffer);
+                boundStroke(aabbBounds, distance + (shadowBlur + lineWidth) / 2, true, strokeBoundsBuffer);
             }
             return aabbBounds;
         }
@@ -19250,8 +19293,8 @@
                 context.beginPath();
                 drawArcPath$1(arc, context, x, y, outerRadius, innerRadius);
                 beforeRenderContribitionsRuned = true;
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
                 this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-                context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute);
                 if (doFill) {
                     if (fillCb) {
                         fillCb(context, arc.attribute, arcAttribute);
@@ -19355,8 +19398,8 @@
             context.beginPath();
             context.arc(x, y, radius, startAngle, endAngle);
             context.closePath();
+            context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute);
             this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
-            context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute);
             if (doFill) {
                 if (fillCb) {
                     fillCb(context, circle.attribute, circleAttribute);
@@ -19630,7 +19673,7 @@
                 line.attribute.curveType.includes('Closed')) {
                 context.closePath();
             }
-            context.setShadowStyle && context.setShadowStyle(line, attribute, defaultAttribute);
+            context.setShadowBlendStyle && context.setShadowBlendStyle(line, attribute, defaultAttribute);
             const { x: originX = 0, x: originY = 0 } = attribute;
             const ret = false;
             if (fill !== false) {
@@ -20362,7 +20405,7 @@
                 zeroY: connectedY
             });
             this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, defaultAttribute, drawContext, fillCb, null, { attribute });
-            context.setShadowStyle && context.setShadowStyle(area, attribute, defaultAttribute);
+            context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
             const { x: originX = 0, x: originY = 0 } = attribute;
             if (fill !== false) {
                 if (fillCb) {
@@ -20431,8 +20474,8 @@
                 const path2D = (_b = path.attribute.path) !== null && _b !== void 0 ? _b : pathAttribute.path;
                 renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
             }
+            context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute);
             this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
-            context.setShadowStyle && context.setShadowStyle(path, path.attribute, pathAttribute);
             if (doStroke) {
                 if (strokeCb) {
                     strokeCb(context, path.attribute, pathAttribute);
@@ -20588,8 +20631,8 @@
                 doFill,
                 doStroke
             };
+            context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);
             this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-            context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
             if (doFillOrStroke.doFill) {
                 if (fillCb) {
                     fillCb(context, rect.attribute, rectAttribute);
@@ -20697,8 +20740,8 @@
                     context.closePath();
                 }
             }
+            context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute);
             this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
-            context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
             if (doFill && !parsedPath.isSvg) {
                 if (fillCb) {
                     fillCb(context, symbol.attribute, symbolAttribute);
@@ -20757,8 +20800,8 @@
             const transform3dMatrixToContextMatrix = !keepDirIn3d;
             const z = this.z || 0;
             context.beginPath();
+            context.setShadowBlendStyle && context.setShadowBlendStyle(text, text.attribute, textAttribute);
             this.beforeRenderStep(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
-            context.setShadowStyle && context.setShadowStyle(text, text.attribute, textAttribute);
             transform3dMatrixToContextMatrix && this.transformUseContext2d(text, textAttribute, z, context);
             const drawText = (t, offsetX, offsetY, direction) => {
                 let _x = x + offsetX;
@@ -21100,8 +21143,8 @@
                 drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath);
             }
             closePath && context.closePath();
+            context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute);
             this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
-            context.setShadowStyle && context.setShadowStyle(polygon, polygon.attribute, polygonAttribute);
             if (doFill) {
                 if (fillCb) {
                     fillCb(context, polygon.attribute, polygonAttribute);
@@ -21150,8 +21193,8 @@
                 return;
             }
             const { fVisible, sVisible, doFill, doStroke } = data;
+            context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute);
             this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
-            context.setShadowStyle && context.setShadowStyle(image, imageAttribute);
             if (doFill) {
                 if (fillCb) {
                     fillCb(context, image.attribute, imageAttribute);
@@ -21651,7 +21694,7 @@
                 });
                 context.beginPath();
                 drawArcPath$1(arc, context, x, y, outerRadius + d, innerRadius - d);
-                context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
                 if (strokeCb) {
                     strokeCb(context, outerBorder, arcAttribute.outerBorder);
                 }
@@ -21675,7 +21718,7 @@
                 });
                 context.beginPath();
                 drawArcPath$1(arc, context, x, y, outerRadius - d, innerRadius + d);
-                context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
                 if (strokeCb) {
                     strokeCb(context, innerBorder, arcAttribute.innerBorder);
                 }
@@ -21735,7 +21778,7 @@
                 context.beginPath();
                 context.arc(x, y, radius + dw, startAngle, endAngle);
                 context.closePath();
-                context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute);
                 if (strokeCb) {
                     strokeCb(context, outerBorder, circleAttribute.outerBorder);
                 }
@@ -21754,7 +21797,7 @@
                 context.beginPath();
                 context.arc(x, y, radius - dw, startAngle, endAngle);
                 context.closePath();
-                context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute);
                 if (strokeCb) {
                     strokeCb(context, innerBorder, circleAttribute.innerBorder);
                 }
@@ -21949,7 +21992,7 @@
                     context.beginPath();
                     createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius);
                 }
-                context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);
                 if (strokeCb) {
                     strokeCb(context, outerBorder, rectAttribute.outerBorder);
                 }
@@ -21975,7 +22018,7 @@
                     context.beginPath();
                     createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius);
                 }
-                context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);
                 if (strokeCb) {
                     strokeCb(context, innerBorder, rectAttribute.innerBorder);
                 }
@@ -22099,7 +22142,7 @@
                 if (parsedPath.drawOffset(context, size, x, y, d) === false) {
                     context.closePath();
                 }
-                context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute);
                 if (strokeCb) {
                     strokeCb(context, outerBorder, symbolAttribute.outerBorder);
                 }
@@ -22118,7 +22161,7 @@
                 if (parsedPath.drawOffset(context, size, x, y, -d) === false) {
                     context.closePath();
                 }
-                context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute);
                 if (strokeCb) {
                     strokeCb(context, innerBorder, symbolAttribute.innerBorder);
                 }
@@ -22359,6 +22402,30 @@
     exports.ShadowRootPickItemInterceptorContribution = __decorate([
         injectable()
     ], exports.ShadowRootPickItemInterceptorContribution);
+    exports.InteractivePickItemInterceptorContribution = class InteractivePickItemInterceptorContribution {
+        constructor() {
+            this.order = 1;
+        }
+        beforePickItem(graphic, pickerService, point, pickParams, params) {
+            const originGraphic = graphic.baseGraphic;
+            if (originGraphic && originGraphic.parent) {
+                const newPoint = new vutils.Point(point.x, point.y);
+                const context = pickerService.pickContext;
+                context.highPerformanceSave();
+                const parentMatrix = originGraphic.parent.globalTransMatrix;
+                parentMatrix.transformPoint(newPoint, newPoint);
+                const result = originGraphic.isContainer
+                    ? pickerService.pickGroup(originGraphic, newPoint.clone(), parentMatrix, pickParams)
+                    : pickerService.pickItem(originGraphic, newPoint.clone(), parentMatrix, pickParams);
+                context.highPerformanceRestore();
+                return result;
+            }
+            return null;
+        }
+    };
+    exports.InteractivePickItemInterceptorContribution = __decorate([
+        injectable()
+    ], exports.InteractivePickItemInterceptorContribution);
     exports.Canvas3DPickItemInterceptor = class Canvas3DPickItemInterceptor {
         constructor() {
             this.order = 1;
@@ -22493,6 +22560,8 @@
         bind(PickItemInterceptor).toService(exports.Canvas3DPickItemInterceptor);
         bind(exports.ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope();
         bind(PickItemInterceptor).toService(exports.ShadowRootPickItemInterceptorContribution);
+        bind(exports.InteractivePickItemInterceptorContribution).toSelf().inSingletonScope();
+        bind(PickItemInterceptor).toService(exports.InteractivePickItemInterceptorContribution);
         bindContributionProvider(bind, PickItemInterceptor);
     });
 
@@ -23023,6 +23092,7 @@
             }
             const { context } = drawContext;
             context.highPerformanceSave();
+            context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
             const b = graphic.AABBBounds;
             if (graphic.attribute._debug_bounds !== true) {
                 graphic.attribute._debug_bounds(context, graphic);
@@ -23040,27 +23110,31 @@
             this.order = 1;
         }
         beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-            let interactiveGraphic;
-            if (graphic.attribute.interactive) {
-                interactiveGraphic = graphic.interactiveGraphic;
+            if (this.processing) {
+                return false;
+            }
+            if (graphic.baseGraphic) {
+                return this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params);
+            }
+            return this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params);
+        }
+        beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+            let interactiveGraphic = graphic.interactiveGraphic;
+            if (graphic.attribute.globalZIndex) {
                 if (!interactiveGraphic) {
                     interactiveGraphic = graphic.clone();
                     graphic.interactiveGraphic = interactiveGraphic;
+                    interactiveGraphic.baseGraphic = graphic;
                 }
-                const m = graphic.globalTransMatrix;
                 interactiveGraphic.setAttributes({
-                    x: 0,
-                    y: 0,
-                    scaleX: 1,
-                    scaleY: 1,
-                    angle: 0,
-                    postMatrix: m,
-                    interactive: false
+                    globalZIndex: 0,
+                    zIndex: graphic.attribute.globalZIndex
                 }, false, { skipUpdateCallback: true });
                 drawContext.stage.tryInitInteractiveLayer();
                 const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
                 if (interactiveLayer) {
-                    interactiveLayer.add(interactiveGraphic);
+                    const shadowRoot = this.getShadowRoot(interactiveLayer);
+                    shadowRoot.add(interactiveGraphic);
                 }
                 return true;
             }
@@ -23068,11 +23142,40 @@
                 drawContext.stage.tryInitInteractiveLayer();
                 const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
                 if (interactiveLayer) {
-                    interactiveLayer.removeChild(interactiveGraphic);
+                    const shadowRoot = this.getShadowRoot(interactiveLayer);
+                    shadowRoot.removeChild(interactiveGraphic);
                 }
+                graphic.interactiveGraphic = null;
+                interactiveGraphic.baseGraphic = null;
+            }
+            return false;
+        }
+        beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
+            const baseGraphic = graphic.baseGraphic;
+            if (baseGraphic) {
+                this.processing = true;
+                const { context } = drawContext;
+                context.highPerformanceSave();
+                context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, true);
+                baseGraphic.isContainer
+                    ? drawContribution.renderGroup(baseGraphic, drawContext)
+                    : drawContribution.renderItem(baseGraphic, drawContext);
+                context.highPerformanceRestore();
+                this.processing = false;
+                return true;
             }
             return false;
         }
+        getShadowRoot(interactiveLayer) {
+            var _a;
+            let group = interactiveLayer.getElementById('_interactive_group');
+            if (!group) {
+                group = createGroup({});
+                group.id = '_interactive_group';
+                interactiveLayer.add(group);
+            }
+            return (_a = group.shadowRoot) !== null && _a !== void 0 ? _a : group.attachShadow();
+        }
     };
     InteractiveDrawItemInterceptorContribution = __decorate([
         injectable()
@@ -23419,7 +23522,20 @@
             if (!renderer) {
                 return;
             }
+            let retrans = false;
+            let tempBounds;
+            if (graphic.parent) {
+                const { scrollX = 0, scrollY = 0 } = graphic.parent.attribute;
+                retrans = !!(scrollX || scrollY);
+                if (retrans) {
+                    tempBounds = this.dirtyBounds.clone();
+                    const m = graphic.globalTransMatrix.getInverse();
+                    this.dirtyBounds.copy(this.backupDirtyBounds).transformWithMatrix(m);
+                    this.dirtyBounds.translate(-scrollX, -scrollY);
+                }
+            }
             if (!(graphic.isContainer || vutils.isRectIntersect(graphic.AABBBounds, this.dirtyBounds, false))) {
+                retrans && this.dirtyBounds.copy(tempBounds);
                 return;
             }
             const skipDraw = drawContext.startAtId != null && graphic._uid !== drawContext.startAtId;
@@ -23433,6 +23549,7 @@
             else {
                 renderer.draw(graphic, this.currentRenderService, drawContext, params);
             }
+            retrans && this.dirtyBounds.copy(tempBounds);
             if (this.InterceptorContributions.length) {
                 for (let i = 0; i < this.InterceptorContributions.length; i++) {
                     const drawContribution = this.InterceptorContributions[i];
@@ -23559,7 +23676,7 @@
             if (clip) {
                 context.clip();
             }
-            context.setShadowStyle && context.setShadowStyle(group, group.attribute, groupAttribute);
+            context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
             if (doFillOrStroke.doFill) {
                 if (fillCb) {
                     fillCb(context, group.attribute, groupAttribute);
@@ -23704,7 +23821,7 @@
             }
             context.beginPath();
             drawIncrementalSegments(context.nativeContext, lastSeg, seg, { offsetX, offsetY });
-            context.setShadowStyle && context.setShadowStyle(line, attribute, defaultAttribute);
+            context.setShadowBlendStyle && context.setShadowBlendStyle(line, attribute, defaultAttribute);
             context.setStrokeStyle(line, attribute, offsetX, offsetY, defaultAttribute);
             context.stroke();
         }
@@ -23755,7 +23872,7 @@
                 offsetX,
                 offsetY
             });
-            context.setShadowStyle && context.setShadowStyle(area, attribute, defaultAttribute);
+            context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
             context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute);
             context.fill();
         }
@@ -24313,7 +24430,7 @@
             if (face === 'bottom' || face === 'top') {
                 context.beginPath();
                 drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius);
-                context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
                 if (doFill) {
                     if (fillCb) {
                         fillCb(context, arc.attribute, arcAttribute);
@@ -24357,7 +24474,7 @@
                         innerouterStartAngle: innerStartAngle
                     };
                 });
-                context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
                 if (doFill) {
                     if (fillCb) {
                         fillCb(context, arc.attribute, arcAttribute);
@@ -26082,7 +26199,7 @@
         combineLayer(ILayer1, ILayer2) {
             throw new Error('暂不支持');
         }
-        createLayer(layerMode) {
+        createLayer(canvasId, layerMode) {
             const layer = this.layerService.createLayer(this, {
                 main: false,
                 layerMode
@@ -26132,9 +26249,6 @@
             return;
         }
         renderNextFrame(layers, force) {
-            if (this.state === 'rendering' && !force) {
-                return;
-            }
             if (this.nextFrameRenderLayerSet.size !== this.childrenCount) {
                 (layers || this).forEach((layer) => {
                     this.nextFrameRenderLayerSet.add(layer);
@@ -26185,6 +26299,12 @@
                     updateBounds: !!this.dirtyBounds
                 }, Object.assign({ renderStyle: this.renderStyle }, params));
             });
+            if (this.interactiveLayer && !layerList.includes(this.interactiveLayer)) {
+                this.interactiveLayer.render({
+                    renderService: this.renderService,
+                    updateBounds: !!this.dirtyBounds
+                }, Object.assign({ renderStyle: this.renderStyle }, params));
+            }
         }
         resizeWindow(w, h, rerender = true) {
             this.window.resize(w, h);