@visactor/vrender-core 0.17.0-alpha.3 → 0.17.0-alpha.5

package/dist/index.js

@@ -1214,7 +1214,6 @@
             };
             this.measureTextMethod = 'native';
             this.optimizeVisible = false;
-            this.optmizeSkipCheckBoundariesThreshold = 0;
         }
         bindContribution(params) {
             const promiseArr = [];
@@ -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;
@@ -14451,28 +14450,36 @@
     }
     var close$1 = new CloseSymbol();
 
-    function rect(ctx, size, x, y) {
+    function rectSizeArray(ctx, size, x, y) {
         ctx.rect(x - size[0] / 2, y - size[1] / 2, size[0], size[1]);
         return false;
     }
+    function rectSize(ctx, size, x, y) {
+        const w = size;
+        const h = size / 2;
+        ctx.rect(x - w / 2, y - h / 2, w, h);
+        return false;
+    }
     class RectSymbol extends BaseSymbol {
         constructor() {
             super(...arguments);
             this.type = 'rect';
-            this.pathStr = 'M-0.5,-0.5h1v1h-1Z';
+            this.pathStr = 'M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z';
         }
         draw(ctx, size, x, y) {
-            const rectSize = vutils.isNumber(size) ? [size, size] : size;
-            return rect(ctx, rectSize, x, y);
+            if (vutils.isNumber(size)) {
+                return rectSize(ctx, size, x, y);
+            }
+            return rectSizeArray(ctx, size, x, y);
         }
         drawOffset(ctx, size, x, y, offset) {
-            const rectSize = vutils.isNumber(size)
-                ? [size + 2 * offset, size + 2 * offset]
-                : [size[0] + 2 * offset, size[1] + 2 * offset];
-            return rect(ctx, rectSize, x, y);
+            if (vutils.isNumber(size)) {
+                return rectSize(ctx, size + 2 * offset, x, y);
+            }
+            return rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
         }
     }
-    var rect$1 = new RectSymbol();
+    var rect = new RectSymbol();
 
     const tempBounds = new vutils.AABBBounds();
     class CustomSymbolClass {
@@ -14562,7 +14569,7 @@
         arrow2Right$1,
         arrow2Up$1,
         arrow2Down$1,
-        rect$1,
+        rect,
         lineV$1,
         lineH$1,
         close$1
@@ -14574,7 +14581,6 @@
     const builtInSymbolStrMap = {
         arrowLeft: 'M 0.25 -0.5 L -0.25 0 l 0.5 0.5',
         arrowRight: 'M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5',
-        rect: 'M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z',
         rectRound: 'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
         roundLine: 'M 1.2392 -0.258 L -1.3432 -0.258 C -1.4784 -0.258 -1.588 -0.1436 -1.588 -0.002 c 0 0.1416 0.1096 0.256 0.2448 0.256 l 2.5824 0 c 0.1352 0 0.2448 -0.1144 0.2448 -0.256 C 1.484 -0.1436 1.3744 -0.258 1.2392 -0.258 z'
     };
@@ -16132,7 +16138,7 @@
         }
         doUpdateFrameCache() {
             var _a;
-            const { textConfig, maxWidth, maxHeight, width, height, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection, singleLine } = this.attribute;
+            const { textConfig = [], maxWidth, maxHeight, width, height, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection, singleLine } = this.attribute;
             const paragraphs = [];
             for (let i = 0; i < textConfig.length; i++) {
                 if ('image' in textConfig[i]) {
@@ -18032,6 +18038,7 @@
         return richText.AABBBounds;
     }
 
+    const result = { x: 0, y: 0, z: 0, lastModelMatrix: null };
     class BaseRender {
         init(contributions) {
             if (contributions) {
@@ -18082,13 +18089,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();
@@ -20536,10 +20547,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;
@@ -20550,7 +20561,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);
@@ -20577,7 +20588,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([
@@ -20603,7 +20616,8 @@
             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;
+            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, 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;
             const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
             const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
@@ -20654,7 +20668,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([
@@ -21304,6 +21320,9 @@
             this.drawContribution = drawContribution;
         }
         prepare(updateBounds) {
+            if (!updateBounds) {
+                return;
+            }
             this.renderTreeRoots.forEach(g => {
                 this._prepare(g, updateBounds);
             });
@@ -22001,7 +22020,7 @@
 
     const DrawItemInterceptor = Symbol.for('DrawItemInterceptor');
     const tempDirtyBounds = new vutils.AABBBounds();
-    let ShadowRootDrawItemInterceptorContribution = class ShadowRootDrawItemInterceptorContribution {
+    class ShadowRootDrawItemInterceptorContribution {
         constructor() {
             this.order = 1;
         }
@@ -22036,22 +22055,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;
@@ -22074,11 +22089,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;
         }
@@ -22149,11 +22199,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;
         }
@@ -22293,10 +22340,7 @@
         initCanvasCtx(context) {
             context.setTransformForCurrent();
         }
-    };
-    Canvas3DDrawItemInterceptor = __decorate([
-        injectable()
-    ], Canvas3DDrawItemInterceptor);
+    }
 
     class DefaultBoundsAllocate {
         constructor() {
@@ -22368,12 +22412,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) {
@@ -22453,7 +22496,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);
@@ -22546,10 +22589,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;
                     }
                 }
             }
@@ -23732,14 +23774,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);
     });
 
@@ -24810,9 +24846,26 @@
             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);
             };
@@ -24881,7 +24934,13 @@
             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 });
+            }
         }
         tryInitEventSystem() {
             if (this.global.supportEvent && !this._eventSystem) {
@@ -24913,7 +24972,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 {
@@ -24922,30 +24981,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;