@visactor/vtable 1.23.0 → 1.23.1-alpha.1

package/dist/vtable.js

@@ -70714,6 +70714,10 @@
         tableNoFrameHeight;
         tableX;
         tableY;
+        _tableBorderWidth_left = 0;
+        _tableBorderWidth_right = 0;
+        _tableBorderWidth_top = 0;
+        _tableBorderWidth_bottom = 0;
         _widthMode;
         _heightMode;
         _autoFillWidth;
@@ -70738,7 +70742,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.23.0";
+        version = "1.23.1-alpha.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -71071,12 +71075,17 @@
         }
         resize() {
             this._updateSize();
-            this.internalProps.legends?.forEach(legend => {
-                legend?.resize();
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
             });
-            if (this.internalProps.title) {
-                this.internalProps.title.resize();
-            }
             if (this.internalProps.emptyTip) {
                 this.internalProps.emptyTip.resize();
             }
@@ -71462,6 +71471,10 @@
             if (this.internalProps.theme?.frameStyle) {
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
+                this._tableBorderWidth_left = (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
+                this._tableBorderWidth_right = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
+                this._tableBorderWidth_top = (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
+                this._tableBorderWidth_bottom = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
                 if (this.theme.frameStyle?.innerBorder) {
                     this.tableX += this.contentOffsetX;
                     this.tableY += this.contentOffsetY;
@@ -71469,19 +71482,19 @@
                     this.tableNoFrameHeight = height - (shadowWidths[2] ?? 0) - this.contentOffsetY;
                 }
                 else {
-                    this.tableX += (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
-                    this.tableY += (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
-                    const rightBorder = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
+                    this.tableX += this._tableBorderWidth_left;
+                    this.tableY += this._tableBorderWidth_top;
+                    const rightBorder = this._tableBorderWidth_right;
                     this.tableNoFrameWidth =
                         width -
                             (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) -
-                            ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0)) -
+                            this._tableBorderWidth_left -
                             this.contentOffsetX;
-                    const bottomBorder = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
+                    const bottomBorder = this._tableBorderWidth_bottom;
                     this.tableNoFrameHeight =
                         height -
                             (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) -
-                            ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) -
+                            this._tableBorderWidth_top -
                             this.contentOffsetY;
                 }
             }
@@ -78262,7 +78275,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -78276,6 +78288,7 @@
             }
             this.pluginManager.updatePlugins(options.plugins);
             setTimeout(() => {
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
             }, 0);
             return new Promise(resolve => {
@@ -78794,9 +78807,17 @@
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this._updateSize();
-            if (this.internalProps.title && !this.internalProps.title.isReleased) {
-                this.internalProps.title.resize();
-            }
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
             this.scenegraph.resize();
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -80350,22 +80371,22 @@
             let x = 0;
             let y = 0;
             if (this.orient === 'left') {
-                x = padding[3];
-                y = 0;
+                x = padding[3] + this.table.tableX - this.table._tableBorderWidth_left;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'top') {
-                x = 0;
-                y = padding[0];
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
+                y = padding[0] + this.table.tableY - this.table._tableBorderWidth_top;
                 height += padding[0] + padding[2];
             }
             else if (this.orient === 'right') {
                 x = rectWidth - width - padding[1];
-                y = 0;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'bottom') {
-                x = 0;
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
                 y = rectHeight - height - padding[2];
                 height += padding[0] + padding[2];
             }
@@ -80672,22 +80693,22 @@
             let x = 0;
             let y = 0;
             if (this.orient === 'left') {
-                x = padding[3];
-                y = 0;
+                x = padding[3] + this.table.tableX - this.table._tableBorderWidth_left;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'top') {
-                x = 0;
-                y = padding[0];
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
+                y = padding[0] + this.table.tableY - this.table._tableBorderWidth_top;
                 height += padding[0] + padding[2];
             }
             else if (this.orient === 'right') {
                 x = rectWidth - width - padding[1];
-                y = 0;
+                y = 0 + this.table.tableY - this.table._tableBorderWidth_top;
                 width += padding[1] + padding[3];
             }
             else if (this.orient === 'bottom') {
-                x = 0;
+                x = 0 + this.table.tableX - this.table._tableBorderWidth_left;
                 y = rectHeight - height - padding[2];
                 height += padding[0] + padding[2];
             }
@@ -81270,11 +81291,13 @@
                     padding[2];
             this._titleComponent.setAttributes({
                 x: this._titleOption.x ?? this._titleOption.orient === 'right'
-                    ? this.table.tableX + Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width)
-                    : this.table.tableX,
+                    ? this.table.tableX +
+                        Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width) -
+                        this.table._tableBorderWidth_left
+                    : this.table.tableX - this.table._tableBorderWidth_left,
                 y: this._titleOption.y ?? this._titleOption.orient === 'bottom'
-                    ? this.table.tableY + this.table.tableNoFrameHeight
-                    : this.table.tableY,
+                    ? this.table.tableY + this.table.tableNoFrameHeight - this.table._tableBorderWidth_top
+                    : this.table.tableY - this.table._tableBorderWidth_top,
                 width: this._titleOption.orient === 'top' || this._titleOption.orient === 'bottom'
                     ? realWidth
                     : this._titleOption.width,
@@ -81337,11 +81360,13 @@
                 text: this._titleOption.text ?? '',
                 subtext: this._titleOption.subtext ?? '',
                 x: this._titleOption.x ?? this._titleOption.orient === 'right'
-                    ? this.table.tableX + Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width)
-                    : this.table.tableX,
+                    ? this.table.tableX +
+                        Math.min(this.table.tableNoFrameWidth, this.table.getDrawRange().width) -
+                        this.table._tableBorderWidth_left
+                    : this.table.tableX - this.table._tableBorderWidth_left,
                 y: this._titleOption.y ?? this._titleOption.orient === 'bottom'
-                    ? this.table.tableY + this.table.tableNoFrameHeight
-                    : this.table.tableY,
+                    ? this.table.tableY + this.table.tableNoFrameHeight - this.table._tableBorderWidth_top
+                    : this.table.tableY - this.table._tableBorderWidth_top,
                 width: this._titleOption.orient === 'top' || this._titleOption.orient === 'bottom'
                     ? realWidth
                     : this._titleOption.width,
@@ -90891,7 +90916,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 this.internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -90904,6 +90928,7 @@
                 }
             }
             setTimeout(() => {
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
             }, 0);
             return new Promise(resolve => {
@@ -91777,9 +91802,23 @@
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
-            if (this.internalProps.title && !this.internalProps.title.isReleased) {
+            let isHasComponent = false;
+            if (this.internalProps.title || this.internalProps.legends) {
                 this._updateSize();
-                this.internalProps.title.resize();
+                isHasComponent = true;
+            }
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
+            if (isHasComponent) {
                 this.scenegraph.resize();
             }
             this.eventManager.updateEventBinder();
@@ -92623,7 +92662,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 this.internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -92636,6 +92674,7 @@
                 }
             }
             setTimeout(() => {
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
             }, 0);
             return new Promise(resolve => {
@@ -93462,9 +93501,23 @@
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
-            if (this.internalProps.title && !this.internalProps.title.isReleased) {
+            let isHasComponent = false;
+            if (this.internalProps.title || this.internalProps.legends) {
                 this._updateSize();
-                this.internalProps.title.resize();
+                isHasComponent = true;
+            }
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
+            if (isHasComponent) {
                 this.scenegraph.resize();
             }
             this.eventManager.updateEventBinder();
@@ -94100,7 +94153,7 @@
     }
 
     registerForVrender();
-    const version = "1.23.0";
+    const version = "1.23.1-alpha.1";
     function getIcons() {
         return get$2();
     }