fix: fix resize and empty data mark

packages/vchart/src/compile/compiler.ts

@@ -25,9 +25,9 @@ import type { IVChart } from '../core/interface';
 import type { IMark, IMarkGraphic } from '../mark/interface';
 import { Factory } from '../core/factory';
 import type { Gesture } from '@visactor/vrender-kits';
-import { hasCommited } from './util';
 import { getDatumOfGraphic } from '../util/mark';
 import type { Datum } from '../typings';
+import { traverseGroupMark } from './util';
 
 type EventListener = {
   type: string;
@@ -275,8 +275,16 @@ export class Compiler implements ICompiler {
     }) as unknown as number;
   }
 
+  protected _commitedAll() {
+    return this._rootMarks.some(mark => {
+      return traverseGroupMark(mark, m => m.commit());
+    });
+  }
+
   protected _hasCommitedMark() {
-    return this._rootMarks.some(hasCommited);
+    return this._rootMarks.some(mark => {
+      return traverseGroupMark(mark, m => m.isCommited(), null, null, true);
+    });
   }
 
   renderMarks(morphConfig?: IMorphConfig) {
@@ -353,10 +361,12 @@ export class Compiler implements ICompiler {
 
     if (hasChange) {
       this._stage.resize(width, height);
-    }
-    // todo resize
-    if (reRender) {
-      this.render({ morph: false });
+      this._commitedAll();
+
+      // todo resize
+      if (reRender) {
+        this.render({ morph: false });
+      }
     }
   }
 

packages/vchart/src/compile/util.ts

@@ -29,32 +29,50 @@ export function toRenderMode(mode: RenderMode): any {
   return 'browser';
 }
 
-export function hasCommited(group: IMark) {
-  if (group.type === MarkTypeEnum.group) {
-    if (group.isCommited()) {
-      return true;
+export function traverseGroupMark<T>(
+  group: IMark,
+  apply: (mark: IMark) => T,
+  filter?: (mark: IMark) => boolean,
+  leafFirst?: boolean,
+  stop?: boolean
+): T | undefined {
+  const traverse = (mark: IMark): T | undefined => {
+    if (!leafFirst) {
+      if (mark && (!filter || filter(mark))) {
+        const res = apply.call(null, mark);
+
+        if (stop && res) {
+          return res;
+        }
+      }
     }
 
-    return (group as IGroupMark).getMarks().some(hasCommited);
-  }
+    if (mark.type === MarkTypeEnum.group) {
+      const children: IMark[] = (mark as IGroupMark).getMarks();
 
-  return group.isCommited();
-}
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const res = traverse(children[i]);
 
-export function traverseRemove(group: IMark, m: IMark) {
-  if (group.type === MarkTypeEnum.group) {
-    if ((group as IGroupMark).removeMark(m)) {
-      return true;
+          if (res && stop) {
+            return res;
+          }
+        }
+      }
     }
 
-    const subMarks = (group as IGroupMark).getMarks();
+    if (leafFirst) {
+      if (mark && (!filter || filter(mark))) {
+        const res = apply.call(null, mark);
 
-    for (let i = 0; i < subMarks.length; i++) {
-      if (traverseRemove(subMarks[i], m)) {
-        return true;
+        if (res && stop) {
+          return res;
+        }
       }
     }
-  }
 
-  return false;
+    return undefined;
+  };
+
+  return traverse(group);
 }

packages/vchart/src/component/axis/base-axis.ts

@@ -135,10 +135,7 @@ export abstract class AxisComponent<T extends ICommonAxisSpec & Record<string, a
   }
 
   getVRenderComponents() {
-    return [
-      this._axisMark?.getProduct()?.getGroupGraphicItem(),
-      this._gridMark?.getProduct()?.getGroupGraphicItem()
-    ].filter(isValid);
+    return [this._axisMark?.getProduct(), this._gridMark?.getProduct()].filter(isValid);
   }
 
   created() {
@@ -722,7 +719,7 @@ export abstract class AxisComponent<T extends ICommonAxisSpec & Record<string, a
     }
 
     if (this._axisMark) {
-      return this._axisMark.getProduct()?.getGroupGraphicItem()?.attribute.items;
+      return this._axisMark.getProduct()?.attribute.items;
     }
   }
 }

packages/vchart/src/component/axis/cartesian/axis.ts

@@ -901,12 +901,13 @@ export abstract class CartesianAxis<T extends ICartesianAxisCommonSpec = ICartes
           bindAxis = relativeAxes[0];
         }
         if (bindAxis) {
-          const axisMark = this._axisMark.getProduct();
+          const axisMark = this._axisMark;
           // 找到了绑定的 axis，获取基线的位置
           const position = bindAxis.valueToPosition(0);
           // 获取偏移量
           if (isX) {
-            axisMark.encode({
+            axisMark.stateStyle.normal = {
+              ...axisMark.stateStyle.normal,
               line: {
                 ...this._axisStyle.line,
                 dy:
@@ -917,9 +918,10 @@ export abstract class CartesianAxis<T extends ICartesianAxisCommonSpec = ICartes
                       )
                     : position
               }
-            });
+            };
           } else {
-            axisMark.encode({
+            axisMark.stateStyle.normal = {
+              ...axisMark.stateStyle.normal,
               line: {
                 ...this._axisStyle.line,
                 dx:
@@ -930,7 +932,7 @@ export abstract class CartesianAxis<T extends ICartesianAxisCommonSpec = ICartes
                         position
                       )
               }
-            });
+            };
           }
         }
       }

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

@@ -861,7 +861,7 @@ export class BaseMark<T extends ICommonSpec> extends CompilableMark implements I
       return;
     }
 
-    const data = this._data?.getProduct();
+    const data = this._data?.getProduct() ?? [{}];
 
     const transformData = array(
       this.runTransforms(

packages/vchart/src/mark/component.ts

@@ -63,7 +63,7 @@ export class ComponentMark extends BaseMark<ICommonSpec> implements IComponentMa
         mode: this._mode,
         skipDefault: this._markConfig.skipTheme
       });
-      this._product.appendChild(this._component);
+      this._component && this._product.appendChild(this._component);
     } else {
       this._component.setAttributes(attrs as any);
     }

packages/vchart/src/mark/interface/mark.ts

@@ -1,4 +1,4 @@
-import type { IGroup } from '@visactor/vrender-core';
+import type { IGraphic } from '@visactor/vrender-core';
 import type { IMarkSpec } from '../../typings';
 import type {
   IArc3dMarkSpec,
@@ -25,7 +25,7 @@ import type { IMark, IMarkRaw } from './common';
 import type { MarkType } from './type';
 
 export interface IComponentMark extends IMarkRaw<ICommonSpec> {
-  getComponent: () => IGroup;
+  getComponent: () => IGraphic;
   setAttributeTransform: (t: (attrs: any) => any) => any;
 }
 

packages/vchart/src/mark/text.ts

@@ -47,7 +47,7 @@ export class TextMark extends BaseMark<IComposedTextMarkSpec> implements ITextMa
 
     const { text } = textAttrs;
 
-    if ((isObject(text) && this._textType === 'rich', isValid((text as any).text))) {
+    if (isObject(text) && this._textType === 'rich' && isValid((text as any).text)) {
       textAttrs.textConfig = (text as any).text;
     }
 

packages/vchart/src/region/region.ts

@@ -112,9 +112,19 @@ export class Region<T extends IRegionSpec = IRegionSpec> extends LayoutModel<T>
 
     // hack: region 的样式不能设置在groupMark上，因为groupMark目前没有计算dirtyBound，会导致拖影问题
     if (!isEmpty(this._spec.style)) {
-      this._backgroundMark = this._createMark({ type: MarkTypeEnum.rect, name: 'regionBackground' }) as IRectMark;
+      this._backgroundMark = this._createMark(
+        { type: MarkTypeEnum.rect, name: 'regionBackground' },
+        {
+          parent: this._groupMark
+        }
+      ) as IRectMark;
       if (clip) {
-        this._foregroundMark = this._createMark({ type: MarkTypeEnum.rect, name: 'regionForeground' }) as IRectMark;
+        this._foregroundMark = this._createMark(
+          { type: MarkTypeEnum.rect, name: 'regionForeground' },
+          {
+            parent: this._groupMark
+          }
+        ) as IRectMark;
       }
       [this._backgroundMark, this._foregroundMark].forEach(mark => {
         if (mark) {