@visactor/vrender-core 0.17.0-alpha.4 → 0.17.0-alpha.6

package/cjs/render/render-service.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/render-service.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,6DAA8D;AAG9D,mDAA0D;AAE7C,QAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC5C,QAAA,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;AAO1E,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IAO/B,YAEmB,gBAAmC;QAAnC,qBAAgB,GAAhB,gBAAgB,CAAmB;IACnD,CAAC;IAGJ,OAAO,CAAC,YAAqB;QAC3B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,OAAO;IACT,CAAC;IACS,QAAQ,CAAC,CAAW,EAAE,YAAqB;QACnD,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;YACpB,IAAI,CAAC,QAAQ,CAAC,CAAa,EAAE,YAAY,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB;QACf,OAAO;IACT,CAAC;IAED,UAAU,CAAC,MAAgC;QACzC,OAAO;IACT,CAAC;IAED,IAAI,CAAC,MAAgC;QACnC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,oBAAO,IAAI,CAAC,UAAU,EAAG,CAAC;IAC3D,CAAC;IAED,SAAS,CAAC,MAAgC;QACxC,IAAI,CAAC,gBAAgB,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,oBAAO,IAAI,CAAC,UAAU,EAAG,CAAC;QACjG,OAAO;IACT,CAAC;IAED,MAAM,CAAC,MAAgB,EAAE,MAAgC;QACvD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;QACzB,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC;CACF,CAAA;AArDY,oBAAoB;IADhC,IAAA,2BAAU,GAAE;IASR,WAAA,IAAA,uBAAM,EAAC,yBAAgB,CAAC,CAAA;;GARhB,oBAAoB,CAqDhC;AArDY,oDAAoB","file":"render-service.js","sourcesContent":["import { injectable, inject } from '../common/inversify-lite';\nimport type { IAABBBounds, IBounds } from '@visactor/vutils';\nimport type { IGroup, IGraphic, IRenderService, IRenderServiceDrawParams, IDrawContribution } from '../interface';\nimport { DrawContribution } from './contributions/render';\n\nexport const RenderService = Symbol.for('RenderService');\nexport const BeforeRenderConstribution = Symbol.for('BeforeRenderConstribution');\n\n/**\n * 渲染用的service，通常和stage一一绑定，\n * 并不是单例模式，所以会绑定此次渲染的一些数据\n */\n@injectable()\nexport class DefaultRenderService implements IRenderService {\n  // 每次render都会变的数据\n  dirtyBounds: IBounds;\n  renderTreeRoots: IGraphic[]; // 此次render的数组\n  renderLists: IGraphic[];\n  drawParams: IRenderServiceDrawParams;\n\n  constructor(\n    @inject(DrawContribution)\n    private readonly drawContribution: IDrawContribution\n  ) {}\n\n  // 渲染前准备工作，计算bounds等逻辑\n  prepare(updateBounds: boolean): void {\n    this.renderTreeRoots.forEach(g => {\n      this._prepare(g, updateBounds);\n    });\n    return;\n  }\n  protected _prepare(g: IGraphic, updateBounds: boolean) {\n    g.forEachChildren(g => {\n      this._prepare(g as IGraphic, updateBounds);\n    });\n    g.update({ bounds: updateBounds, trans: true });\n  }\n  // 获取要渲染的list，可能存在一些不用渲染的内容，以及外描边\n  prepareRenderList(): void {\n    return;\n  }\n  // 渲染前流程\n  beforeDraw(params: IRenderServiceDrawParams): void {\n    return;\n  }\n  // 具体渲染\n  draw(params: IRenderServiceDrawParams): void {\n    this.drawContribution.draw(this, { ...this.drawParams });\n  }\n  // 渲染后流程\n  afterDraw(params: IRenderServiceDrawParams): void {\n    this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, { ...this.drawParams });\n    return;\n  }\n  // 对外暴露的绘制方法\n  render(groups: IGroup[], params: IRenderServiceDrawParams): void {\n    this.renderTreeRoots = groups;\n    this.drawParams = params;\n    const updateBounds = params.updateBounds;\n    this.prepare(updateBounds);\n    this.prepareRenderList();\n    this.beforeDraw(params);\n    this.draw(params);\n    this.afterDraw(params);\n  }\n}\n"]}
+{"version":3,"sources":["../src/render/render-service.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,6DAA8D;AAG9D,mDAA0D;AAE7C,QAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC5C,QAAA,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;AAO1E,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IAO/B,YAEmB,gBAAmC;QAAnC,qBAAgB,GAAhB,gBAAgB,CAAmB;IACnD,CAAC;IAGJ,OAAO,CAAC,YAAqB;QAG3B,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,OAAO;IACT,CAAC;IACS,QAAQ,CAAC,CAAW,EAAE,YAAqB;QACnD,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;YACpB,IAAI,CAAC,QAAQ,CAAC,CAAa,EAAE,YAAY,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB;QACf,OAAO;IACT,CAAC;IAED,UAAU,CAAC,MAAgC;QACzC,OAAO;IACT,CAAC;IAED,IAAI,CAAC,MAAgC;QACnC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,oBAAO,IAAI,CAAC,UAAU,EAAG,CAAC;IAC3D,CAAC;IAED,SAAS,CAAC,MAAgC;QACxC,IAAI,CAAC,gBAAgB,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,oBAAO,IAAI,CAAC,UAAU,EAAG,CAAC;QACjG,OAAO;IACT,CAAC;IAED,MAAM,CAAC,MAAgB,EAAE,MAAgC;QACvD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;QACzB,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC;CACF,CAAA;AA1DY,oBAAoB;IADhC,IAAA,2BAAU,GAAE;IASR,WAAA,IAAA,uBAAM,EAAC,yBAAgB,CAAC,CAAA;;GARhB,oBAAoB,CA0DhC;AA1DY,oDAAoB","file":"render-service.js","sourcesContent":["import { injectable, inject } from '../common/inversify-lite';\nimport type { IAABBBounds, IBounds } from '@visactor/vutils';\nimport type { IGroup, IGraphic, IRenderService, IRenderServiceDrawParams, IDrawContribution } from '../interface';\nimport { DrawContribution } from './contributions/render';\n\nexport const RenderService = Symbol.for('RenderService');\nexport const BeforeRenderConstribution = Symbol.for('BeforeRenderConstribution');\n\n/**\n * 渲染用的service，通常和stage一一绑定，\n * 并不是单例模式，所以会绑定此次渲染的一些数据\n */\n@injectable()\nexport class DefaultRenderService implements IRenderService {\n  // 每次render都会变的数据\n  dirtyBounds: IBounds;\n  renderTreeRoots: IGraphic[]; // 此次render的数组\n  renderLists: IGraphic[];\n  drawParams: IRenderServiceDrawParams;\n\n  constructor(\n    @inject(DrawContribution)\n    private readonly drawContribution: IDrawContribution\n  ) {}\n\n  // 渲染前准备工作，计算bounds等逻辑\n  prepare(updateBounds: boolean): void {\n    // 如果不需要计算Bounds，那么transMatrix也不需要计算\n    // TODO 后期可能存在依赖transMatrix的插件，但目前不存在\n    if (!updateBounds) {\n      return;\n    }\n    this.renderTreeRoots.forEach(g => {\n      this._prepare(g, updateBounds);\n    });\n    return;\n  }\n  protected _prepare(g: IGraphic, updateBounds: boolean) {\n    g.forEachChildren(g => {\n      this._prepare(g as IGraphic, updateBounds);\n    });\n    g.update({ bounds: updateBounds, trans: true });\n  }\n  // 获取要渲染的list，可能存在一些不用渲染的内容，以及外描边\n  prepareRenderList(): void {\n    return;\n  }\n  // 渲染前流程\n  beforeDraw(params: IRenderServiceDrawParams): void {\n    return;\n  }\n  // 具体渲染\n  draw(params: IRenderServiceDrawParams): void {\n    this.drawContribution.draw(this, { ...this.drawParams });\n  }\n  // 渲染后流程\n  afterDraw(params: IRenderServiceDrawParams): void {\n    this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, { ...this.drawParams });\n    return;\n  }\n  // 对外暴露的绘制方法\n  render(groups: IGroup[], params: IRenderServiceDrawParams): void {\n    this.renderTreeRoots = groups;\n    this.drawParams = params;\n    const updateBounds = params.updateBounds;\n    this.prepare(updateBounds);\n    this.prepareRenderList();\n    this.beforeDraw(params);\n    this.draw(params);\n    this.afterDraw(params);\n  }\n}\n"]}

package/dist/index.js

@@ -1214,7 +1214,6 @@
             };
             this.measureTextMethod = 'native';
             this.optimizeVisible = false;
-            this.optmizeSkipCheckBoundariesThreshold = 0;
         }
         bindContribution(params) {
             const promiseArr = [];
@@ -3183,8 +3182,8 @@
             console.warn('空函数');
         } });
     const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute), { points: [], cornerRadius: 0, closePath: true });
-    const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, strokeBoundsBuffer: 0, cornerRadius: 0 });
-    const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, cornerRadius: 0, length: 0 });
+    const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, x1: 0, y1: 0, strokeBoundsBuffer: 0, cornerRadius: 0 });
+    const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, x1: 0, y1: 0, cornerRadius: 0, length: 0 });
     const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), { symbolType: 'circle', size: 10, keepDirIn3d: true });
     const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { strokeBoundsBuffer: 0, keepDirIn3d: true });
     const DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 300, height: 300, ellipsis: true, wordBreak: 'break-word', verticalDirection: 'top', textAlign: 'left', textBaseline: 'top', layoutDirection: 'horizontal', textConfig: [], maxHeight: undefined, maxWidth: undefined, singleLine: false });
@@ -10336,12 +10335,12 @@
             this.in3dMode = false;
         }
         getOffsetXY(attr, includeScroll = false) {
+            var _a, _b;
             const { dx = attr.dx, dy = attr.dy } = this.attribute;
             if (includeScroll && this.parent) {
-                const groupTheme = getTheme(this.parent).group;
-                const { scrollX = groupTheme.scrollX, scrollY = groupTheme.scrollY } = this.parent.attribute;
-                point.x = dx + scrollX;
-                point.y = dy + scrollY;
+                const attribute = this.parent.attribute;
+                point.x = dx + ((_a = attribute.scrollX) !== null && _a !== void 0 ? _a : 0);
+                point.y = dy + ((_b = attribute.scrollY) !== null && _b !== void 0 ? _b : 0);
             }
             else {
                 point.x = dx;
@@ -12469,13 +12468,13 @@
         return fill && opacity * fillOpacity > 0;
     }
     function rectFillVisible(opacity, fillOpacity, width, height, fill) {
-        return fill && opacity * fillOpacity > 0 && width > 0 && height > 0;
+        return fill && opacity * fillOpacity > 0 && width !== 0 && height !== 0;
     }
     function strokeVisible(opacity, strokeOpacity) {
         return opacity * strokeOpacity > 0;
     }
     function rectStrokeVisible(opacity, strokeOpacity, width, height) {
-        return opacity * strokeOpacity > 0 && width > 0 && height > 0;
+        return opacity * strokeOpacity > 0 && width !== 0 && height !== 0;
     }
     function drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, strokeCb) {
         if (!graphic.pathProxy) {
@@ -14811,7 +14810,7 @@
     };
     Line$1.NOWORK_ANIMATE_ATTR = Object.assign({ segments: 1, curveType: 1 }, NOWORK_ANIMATE_ATTR);
 
-    const RECT_UPDATE_TAG_KEY = ['width', 'height', 'cornerRadius', ...GRAPHIC_UPDATE_TAG_KEY];
+    const RECT_UPDATE_TAG_KEY = ['width', 'x1', 'y1', 'height', 'cornerRadius', ...GRAPHIC_UPDATE_TAG_KEY];
     class Rect extends Graphic {
         constructor(params) {
             super(params);
@@ -14822,8 +14821,7 @@
             return super.isValid() && this._isValid();
         }
         _isValid() {
-            const { width, height } = this.attribute;
-            return this._validNumber(width) && this._validNumber(height);
+            return true;
         }
         doUpdateAABBBounds() {
             const rectTheme = getTheme(this).rect;
@@ -14852,15 +14850,7 @@
             return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
         }
         toCustomPath() {
-            const attribute = this.attribute;
-            const width = attribute.width;
-            const height = attribute.height;
-            const x = 0;
-            const y = 0;
-            const path = new CustomPath2D();
-            path.moveTo(x, y);
-            path.rect(x, y, width, height);
-            return path;
+            throw new Error('暂不支持');
         }
         clone() {
             return new Rect(Object.assign({}, this.attribute));
@@ -17460,8 +17450,11 @@
         }
         updateRectAABBBounds(attribute, rectTheme, aabbBounds, graphic) {
             if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
-                const { width = rectTheme.width, height = rectTheme.height } = attribute;
-                aabbBounds.set(0, 0, width, height);
+                let { width, height } = attribute;
+                const { x1, y1, x, y } = attribute;
+                width = width !== null && width !== void 0 ? width : x1 - x;
+                height = height !== null && height !== void 0 ? height : y1 - y;
+                aabbBounds.set(0, 0, width || 0, height || 0);
             }
             const tb1 = this.tempAABBBounds1;
             const tb2 = this.tempAABBBounds2;
@@ -18039,6 +18032,7 @@
         return richText.AABBBounds;
     }
 
+    const result = { x: 0, y: 0, z: 0, lastModelMatrix: null };
     class BaseRender {
         init(contributions) {
             if (contributions) {
@@ -18089,13 +18083,17 @@
             };
         }
         transform(graphic, graphicAttribute, context, use3dMatrixIn3dMode = false) {
-            const transMatrix = graphic.transMatrix;
             const { x = graphicAttribute.x, y = graphicAttribute.y, z = graphicAttribute.z, scaleX = graphicAttribute.scaleX, scaleY = graphicAttribute.scaleY, angle = graphicAttribute.angle, postMatrix } = graphic.attribute;
-            const onlyTranslate = transMatrix.onlyTranslate() && !postMatrix;
             const lastModelMatrix = context.modelMatrix;
             const camera = context.camera;
-            const result = { x, y, z, lastModelMatrix };
+            result.x = x;
+            result.y = y;
+            result.z = z;
+            result.lastModelMatrix = lastModelMatrix;
             const shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic));
+            const onlyTranslate = shouldTransform3d
+                ? graphic.transMatrix.onlyTranslate() && !postMatrix
+                : scaleX === 1 && scaleY === 1 && angle === 0 && !postMatrix;
             if (shouldTransform3d) {
                 const nextModelMatrix = mat4Allocate.allocate();
                 const modelMatrix = mat4Allocate.allocate();
@@ -18717,6 +18715,14 @@
 
     const halfPi = vutils.pi / 2;
     function createRectPath(path, x, y, width, height, rectCornerRadius) {
+        if (width < 0) {
+            x += width;
+            width = -width;
+        }
+        if (height < 0) {
+            y += height;
+            height = -height;
+        }
         let cornerRadius;
         if (vutils.isNumber(rectCornerRadius, true)) {
             cornerRadius = [
@@ -18908,7 +18914,10 @@
             if (!(doOuterBorder || doInnerBorder)) {
                 return;
             }
-            const { width = rectAttribute.width, height = rectAttribute.height, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, x: originX = rectAttribute.x, y: originY = rectAttribute.y, scaleX = rectAttribute.scaleX, scaleY = rectAttribute.scaleY } = rect.attribute;
+            const { cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, x: originX = rectAttribute.x, y: originY = rectAttribute.y, scaleX = rectAttribute.scaleX, scaleY = rectAttribute.scaleY, x1, y1 } = rect.attribute;
+            let { width, height } = rect.attribute;
+            width = (width !== null && width !== void 0 ? width : x1 - x) || 0;
+            height = (height !== null && height !== void 0 ? height : y1 - y) || 0;
             const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
             const doStrokeInner = !!(innerBorder && innerBorder.stroke);
             if (doOuterBorder) {
@@ -20543,10 +20552,10 @@
             this.init(pathRenderContribitions);
         }
         drawShape(path, context, x, y, drawContext, params, fillCb, strokeCb) {
-            var _a, _b;
-            const pathAttribute = getTheme(path, params === null || params === void 0 ? void 0 : params.theme).path;
+            var _a, _b, _c;
+            const pathAttribute = (_a = this.tempTheme) !== null && _a !== void 0 ? _a : getTheme(path, params === null || params === void 0 ? void 0 : params.theme).path;
             const { x: originX = pathAttribute.x, y: originY = pathAttribute.y } = path.attribute;
-            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
+            const z = (_b = this.z) !== null && _b !== void 0 ? _b : 0;
             const data = this.valid(path, pathAttribute, fillCb, strokeCb);
             if (!data) {
                 return;
@@ -20557,7 +20566,7 @@
                 renderCommandList(path.pathShape.commandList, context, x, y, 1, 1, z);
             }
             else {
-                const path2D = (_b = path.attribute.path) !== null && _b !== void 0 ? _b : pathAttribute.path;
+                const path2D = (_c = path.attribute.path) !== null && _c !== void 0 ? _c : pathAttribute.path;
                 renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
             }
             context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute);
@@ -20584,7 +20593,9 @@
         }
         draw(path, renderService, drawContext, params) {
             const pathAttribute = getTheme(path, params === null || params === void 0 ? void 0 : params.theme).path;
+            this.tempTheme = pathAttribute;
             this._draw(path, pathAttribute, false, drawContext, params);
+            this.tempTheme = null;
         }
     };
     exports.DefaultCanvasPathRender = __decorate([
@@ -20610,8 +20621,12 @@
             this.init(rectRenderContribitions);
         }
         drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-            const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
-            const { fill = rectAttribute.fill, background, stroke = rectAttribute.stroke, width = rectAttribute.width, height = rectAttribute.height, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible, x: originX = rectAttribute.x, y: originY = rectAttribute.y } = rect.attribute;
+            var _a;
+            const rectAttribute = (_a = this.tempTheme) !== null && _a !== void 0 ? _a : getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
+            const { fill = rectAttribute.fill, background, stroke = rectAttribute.stroke, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible, x1, y1, x: originX = rectAttribute.x, y: originY = rectAttribute.y } = rect.attribute;
+            let { width, height } = rect.attribute;
+            width = (width !== null && width !== void 0 ? width : x1 - originX) || 0;
+            height = (height !== null && height !== void 0 ? height : y1 - originY) || 0;
             const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
             const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
             const doFill = runFill(fill, background);
@@ -20661,7 +20676,9 @@
         }
         draw(rect, renderService, drawContext, params) {
             const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
+            this.tempTheme = rectAttribute;
             this._draw(rect, rectAttribute, false, drawContext, params);
+            this.tempTheme = null;
         }
     };
     exports.DefaultCanvasRectRender = __decorate([
@@ -21311,6 +21328,9 @@
             this.drawContribution = drawContribution;
         }
         prepare(updateBounds) {
+            if (!updateBounds) {
+                return;
+            }
             this.renderTreeRoots.forEach(g => {
                 this._prepare(g, updateBounds);
             });
@@ -22008,7 +22028,7 @@
 
     const DrawItemInterceptor = Symbol.for('DrawItemInterceptor');
     const tempDirtyBounds = new vutils.AABBBounds();
-    let ShadowRootDrawItemInterceptorContribution = class ShadowRootDrawItemInterceptorContribution {
+    class ShadowRootDrawItemInterceptorContribution {
         constructor() {
             this.order = 1;
         }
@@ -22043,22 +22063,18 @@
             }
             return true;
         }
-    };
-    ShadowRootDrawItemInterceptorContribution = __decorate([
-        injectable()
-    ], ShadowRootDrawItemInterceptorContribution);
-    let CommonDrawItemInterceptorContribution = class CommonDrawItemInterceptorContribution {
+    }
+    class DebugDrawItemInterceptorContribution {
         constructor() {
             this.order = 1;
+            this.interceptors = [
+                new ShadowRootDrawItemInterceptorContribution(),
+                new Canvas3DDrawItemInterceptor(),
+                new InteractiveDrawItemInterceptorContribution()
+            ];
         }
         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) {
+            if (graphic.attribute._debug_bounds) {
                 this.drawItem(graphic, renderService, drawContext, drawContribution, params);
             }
             return false;
@@ -22081,11 +22097,46 @@
             context.highPerformanceRestore();
             return true;
         }
+    }
+    let CommonDrawItemInterceptorContribution = class CommonDrawItemInterceptorContribution {
+        constructor() {
+            this.order = 1;
+            this.interceptors = [
+                new ShadowRootDrawItemInterceptorContribution(),
+                new Canvas3DDrawItemInterceptor(),
+                new InteractiveDrawItemInterceptorContribution(),
+                new DebugDrawItemInterceptorContribution()
+            ];
+        }
+        afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            for (let i = 0; i < this.interceptors.length; i++) {
+                if (this.interceptors[i].afterDrawItem &&
+                    this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if ((!graphic.in3dMode || drawContext.in3dInterceptor) &&
+                !graphic.shadowRoot &&
+                !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) {
+                return false;
+            }
+            for (let i = 0; i < this.interceptors.length; i++) {
+                if (this.interceptors[i].beforeDrawItem &&
+                    this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
+                    return true;
+                }
+            }
+            return false;
+        }
     };
     CommonDrawItemInterceptorContribution = __decorate([
-        injectable()
+        injectable(),
+        __metadata("design:paramtypes", [])
     ], CommonDrawItemInterceptorContribution);
-    let InteractiveDrawItemInterceptorContribution = class InteractiveDrawItemInterceptorContribution {
+    class InteractiveDrawItemInterceptorContribution {
         constructor() {
             this.order = 1;
         }
@@ -22156,11 +22207,8 @@
             }
             return (_a = group.shadowRoot) !== null && _a !== void 0 ? _a : group.attachShadow();
         }
-    };
-    InteractiveDrawItemInterceptorContribution = __decorate([
-        injectable()
-    ], InteractiveDrawItemInterceptorContribution);
-    let Canvas3DDrawItemInterceptor = class Canvas3DDrawItemInterceptor {
+    }
+    class Canvas3DDrawItemInterceptor {
         constructor() {
             this.order = 1;
         }
@@ -22300,10 +22348,7 @@
         initCanvasCtx(context) {
             context.setTransformForCurrent();
         }
-    };
-    Canvas3DDrawItemInterceptor = __decorate([
-        injectable()
-    ], Canvas3DDrawItemInterceptor);
+    }
 
     class DefaultBoundsAllocate {
         constructor() {
@@ -22375,12 +22420,11 @@
                 .sort((a, b) => a.order - b.order);
         }
         prepareForDraw(renderService, drawContext) {
-            const count = renderService.renderTreeRoots.reduce((a, b) => a + b.count, 0);
-            if (count < this.global.optmizeSkipCheckBoundariesThreshold) {
-                this.useDirtyBounds = false;
+            if (drawContext.updateBounds) {
+                this.useDirtyBounds = true;
             }
             else {
-                this.useDirtyBounds = true;
+                this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
             }
         }
         draw(renderService, drawContext) {
@@ -22460,7 +22504,7 @@
             if (this.useDirtyBounds && !vutils.isRectIntersect(group.AABBBounds, this.dirtyBounds, false)) {
                 return;
             }
-            let nextM;
+            let nextM = parentMatrix;
             let tempBounds;
             if (this.useDirtyBounds) {
                 tempBounds = boundsAllocate.allocateByObj(this.dirtyBounds);
@@ -22553,10 +22597,9 @@
             if (this.InterceptorContributions.length) {
                 for (let i = 0; i < this.InterceptorContributions.length; i++) {
                     const drawContribution = this.InterceptorContributions[i];
-                    if (drawContribution.beforeDrawItem) {
-                        if (drawContribution.beforeDrawItem(graphic, this.currentRenderService, drawContext, this, params)) {
-                            return;
-                        }
+                    if (drawContribution.beforeDrawItem &&
+                        drawContribution.beforeDrawItem(graphic, this.currentRenderService, drawContext, this, params)) {
+                        return;
                     }
                 }
             }
@@ -23739,14 +23782,8 @@
         bind(PolygonRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
         bindContributionProvider(bind, InteractiveSubRenderContribution);
         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);
     });
 
@@ -24814,12 +24851,28 @@
             return this.at(0);
         }
         get eventSystem() {
-            this.tryInitEventSystem();
             return this._eventSystem;
         }
-        constructor(params) {
+        constructor(params = {}) {
             var _a;
             super({});
+            this._onVisibleChange = (visible) => {
+                if (this._skipRender < 0) {
+                    return;
+                }
+                if (visible) {
+                    if (this.dirtyBounds) {
+                        this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height());
+                    }
+                    if (this._skipRender > 1) {
+                        this.renderNextFrame();
+                    }
+                    this._skipRender = 0;
+                }
+                else {
+                    this._skipRender = 1;
+                }
+            };
             this.beforeRender = (stage) => {
                 this._beforeRender && this._beforeRender(stage);
             };
@@ -24862,6 +24915,7 @@
             }
             this.state = 'normal';
             this.renderCount = 0;
+            this.tryInitEventSystem();
             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;
             this.appendChild(this.layerService.createLayer(this, { main: true }));
@@ -24888,6 +24942,9 @@
             this.timeline = new DefaultTimeline();
             this.ticker.addTimeline(this.timeline);
             this.timeline.pause();
+            if (!params.optimize) {
+                params.optimize = {};
+            }
             this.optmize(params.optimize);
             if (params.background && vutils.isString(this._background) && this._background.includes('/')) {
                 this.setAttributes({ background: this._background });
@@ -24923,7 +24980,7 @@
                 this._skipRender = -Infinity;
             }
             else {
-                if (this.params && this.params.optimize && this.params.optimize.skipRenderWithOutRange !== false) {
+                if (this.params.optimize.skipRenderWithOutRange !== false) {
                     this._skipRender = this.window.isVisible() ? 0 : 1;
                 }
                 else {
@@ -24932,30 +24989,15 @@
             }
         }
         optmize(params) {
-            this.optmizeRender(params === null || params === void 0 ? void 0 : params.skipRenderWithOutRange);
+            this.optmizeRender(params.skipRenderWithOutRange);
+            this.params.optimize = params;
         }
         optmizeRender(skipRenderWithOutRange = false) {
             if (!skipRenderWithOutRange) {
                 return;
             }
             this._skipRender = this._skipRender < 0 ? this._skipRender : this.window.isVisible() ? 0 : 1;
-            this.window.onVisibleChange(visible => {
-                if (this._skipRender < 0) {
-                    return;
-                }
-                if (visible) {
-                    if (this.dirtyBounds) {
-                        this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height());
-                    }
-                    if (this._skipRender > 1) {
-                        this.renderNextFrame();
-                    }
-                    this._skipRender = 0;
-                }
-                else {
-                    this._skipRender = 1;
-                }
-            });
+            this.window.onVisibleChange(this._onVisibleChange);
         }
         getTimeline() {
             return this.timeline;