fix: fix issue of layout

packages/vchart/src/component/legend/discrete/util.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { isEmpty, isValid } from '@visactor/vutils';
+import { cloneDeep, isEmpty, isValid } from '@visactor/vutils';
 import { isPercent } from '../../../util/space';
 import { mergeSpec } from '@visactor/vutils-extension';
 import { transformComponentStyle, transformToGraphic } from '../../../util/style';
@@ -9,12 +9,10 @@ import type { ILayoutRect } from '../../../typings/layout';
 
 export function getLegendAttributes(spec: IDiscreteLegendSpec, rect: ILayoutRect) {
   const {
-    // 需要进行样式转换的属性
-    title = {},
-    item = {},
-    pager = {},
-    background = {},
-
+    title: titleSpec = {},
+    item: itemSpec = {},
+    pager: pagerSpec = {},
+    background: backgroundSpec = {},
     // 以下不属于 legend 需要的属性，单独拿出来以免污染传递给组件的属性
     type,
     id,
@@ -32,6 +30,19 @@ export function getLegendAttributes(spec: IDiscreteLegendSpec, rect: ILayoutRect
     ...restSpec
   } = spec;
 
+  let {
+    // 需要进行样式转换的属性
+    title = {},
+    item = {},
+    pager = {},
+    background = {}
+  } = spec;
+  // 需要进行深拷贝，否则会影响到 spec 中的原始数据
+  title = cloneDeep(title);
+  item = cloneDeep(item);
+  pager = cloneDeep(pager);
+  background = cloneDeep(background);
+
   const attrs: any = restSpec;
 
   // transform title

packages/vchart/src/layout/base-layout.ts

@@ -113,6 +113,7 @@ export class Layout implements IBaseLayout {
       recomputeWidth: this.recomputeWidth,
       recomputeHeight: this.recomputeHeight
     };
+    const secondLayoutLeftRight = _chart?.getSpec()?.layout?.secondLayoutLeftRight ?? false;
     // 先布局 normal 类型的元素
     this._layoutNormalItems(items, recompute);
     // 开始布局 region 相关元素
@@ -127,7 +128,14 @@ export class Layout implements IBaseLayout {
     // 有元素开启了自动缩进
     // TODO:目前只有普通占位布局下的 region-relative 元素支持
     // 主要考虑常规元素超出画布一般为用户个性设置，而且可以设置padding规避裁剪,不需要使用自动缩进
-    this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute);
+    this.layoutRegionItems(
+      regionItems,
+      relativeItems,
+      relativeOverlapItems,
+      overlapItems,
+      recompute,
+      secondLayoutLeftRight
+    );
     // 缩进
     this._processAutoIndent(
       regionItems,
@@ -136,7 +144,8 @@ export class Layout implements IBaseLayout {
       overlapItems,
       allRelatives,
       layoutTemp,
-      recompute
+      recompute,
+      secondLayoutLeftRight
     );
 
     this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
@@ -162,7 +171,8 @@ export class Layout implements IBaseLayout {
     },
     allRelatives: ILayoutItem[],
     layoutTemp: LayoutSideType,
-    recompute: IRecompute
+    recompute: IRecompute,
+    secondLayoutLeftRight: boolean = false
   ): void {
     // 如果有缩进
     if (allRelatives.some(i => i.autoIndent)) {
@@ -176,7 +186,14 @@ export class Layout implements IBaseLayout {
         this.leftCurrent = layoutTemp.left + left;
         this.rightCurrent = layoutTemp.right - right;
         // reLayout
-        this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute);
+        this.layoutRegionItems(
+          regionItems,
+          relativeItems,
+          relativeOverlapItems,
+          overlapItems,
+          recompute,
+          secondLayoutLeftRight
+        );
       }
     }
   }
@@ -362,8 +379,12 @@ export class Layout implements IBaseLayout {
       bottom: { items: [], rect: { width: 0, height: 0 } },
       z: { items: [], rect: { width: 0, height: 0 } }
     },
-    recompute: IRecompute
+    recompute: IRecompute,
+    secondLayoutLeftRight: boolean = false
   ): void {
+    const leftBeforeLayout = this.leftCurrent;
+    const rightBeforeLayout = this.rightCurrent;
+
     let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
     let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
 
@@ -376,6 +397,7 @@ export class Layout implements IBaseLayout {
     this._layoutRelativeOverlap('left', overlapItems.left, recompute);
     this._layoutRelativeOverlap('right', overlapItems.right, recompute);
 
+    // 此时得到宽度
     regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
 
     regionRelativeItems
@@ -390,6 +412,21 @@ export class Layout implements IBaseLayout {
     // 此时得到height
     regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
 
+    if (secondLayoutLeftRight) {
+      /** 多次布局保证不被裁减 */
+      // 使用高度再次布局一次
+      this.leftCurrent = leftBeforeLayout;
+      this.rightCurrent = rightBeforeLayout;
+      regionRelativeItems
+        .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
+        .forEach(item => {
+          this._layoutRelativeItem(item, recompute);
+        });
+
+      // 此时得到宽度
+      regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+    }
+
     // region 处理
     const { regionWidth, regionHeight } = this._layoutRegionItem(
       regionItems,

packages/vchart/src/layout/interface.ts

@@ -119,6 +119,10 @@ export interface IBaseLayoutSpec extends ILayoutSpecBase {
    * 设置布局类型为默认布局
    */
   type: 'base';
+  /**
+   * 是否在第一次布局完成后，再次布局一次，用于解决第一次布局时，元素宽度或高度为0的问题
+   */
+  secondLayoutLeftRight?: boolean;
 }
 
 export type ILayoutSpec = IBaseLayoutSpec | IGridLayoutSpec;