refactor: adjust exports and api (#5665)

* refactor: adjust exports

* refactor: adjust collapse and expand api

* refactor: adapt export adjust

packages/g6-extension-3d/src/elements/base-node-3d.ts

@@ -3,7 +3,7 @@ import type { ProceduralGeometry as GGeometry, Material as GMaterial } from '@an
 import { Mesh } from '@antv/g-plugin-3d';
 import type { IMaterial, Plugin } from '@antv/g-plugin-device-renderer';
 import type { BaseNodeStyleProps } from '@antv/g6';
-import { BaseNode, Utils } from '@antv/g6';
+import { BaseNode, omitStyleProps, subStyleProps } from '@antv/g6';
 import { PrefixObject } from '@antv/g6/lib/types';
 import { deepMix } from '@antv/util';
 import { Material } from '../types';
@@ -44,7 +44,7 @@ export abstract class BaseNode3D<S extends BaseNode3DStyleProps> extends BaseNod
   }
 
   protected getKeyStyle(attributes: Required<S>): MeshStyleProps {
-    const style = Utils.omitStyleProps(super.getKeyStyle(attributes), 'material');
+    const style = omitStyleProps(super.getKeyStyle(attributes), 'material');
     const geometry = this.getGeometry(attributes);
     const material = this.getMaterial(attributes);
     return { x: 0, y: 0, z: 0, ...style, geometry, material };
@@ -58,7 +58,7 @@ export abstract class BaseNode3D<S extends BaseNode3DStyleProps> extends BaseNod
 
   protected getMaterial(attributes: Required<S>): GMaterial<any> | undefined {
     const { texture } = attributes;
-    const materialStyle = Utils.subStyleProps<Material>(attributes, 'material');
+    const materialStyle = subStyleProps<Material>(attributes, 'material');
     return createMaterial(this.plugin, materialStyle, texture);
   }
 }

packages/g6/__tests__/demos/combo-expand-collapse.ts

@@ -47,8 +47,8 @@ export const comboExpandCollapse: TestCase = async (context) => {
     const config = {
       element: 'combo-1',
       dropEffect: 'move',
-      collapse: () => graph.collapse(config.element),
-      expand: () => graph.expand(config.element),
+      collapse: () => graph.collapseElement(config.element),
+      expand: () => graph.expandElement(config.element),
     };
 
     return [

packages/g6/__tests__/demos/layout-compact-box-basic.ts

@@ -1,11 +1,11 @@
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutCompactBoxBasic: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     autoFit: 'view',
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     node: {
       style: {

packages/g6/__tests__/demos/layout-compact-box-left-align.ts

@@ -1,12 +1,12 @@
 import type { NodeData } from '@/src';
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutCompactBoxTopToBottom: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     autoFit: 'view',
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     node: {
       style: {

packages/g6/__tests__/demos/layout-compact-box-top-to-bottom.ts

@@ -1,12 +1,12 @@
 import type { NodeData } from '@/src';
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutCompactBoxLeftAlign: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     autoFit: 'view',
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     node: {
       style: {
         labelText: (data) => data.id,

packages/g6/__tests__/demos/layout-dendrogram-basic.ts

@@ -1,11 +1,11 @@
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutDendrogramBasic: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     autoFit: 'view',
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     node: {
       style: {
         labelText: (d) => d.id,

packages/g6/__tests__/demos/layout-dendrogram-tb.ts

@@ -1,11 +1,11 @@
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutDendrogramTb: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     autoFit: 'view',
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     node: {
       style: (model) => {
         const hasChildren = !!model.style!.children?.length;

packages/g6/__tests__/demos/layout-indented.ts

@@ -1,13 +1,13 @@
 import type { G6Spec } from '@/src';
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import tree from '@@/dataset/file-system.json';
 
 export const layoutIndented: TestCase = async (context) => {
   const options: G6Spec = {
     ...context,
     y: -200,
     zoom: 0.5,
-    data: Utils.treeToGraphData(tree),
+    data: treeToGraphData(tree),
     theme: 'light',
     layout: {
       type: 'indented',

packages/g6/__tests__/demos/layout-mindmap-h-custom-side.ts

@@ -1,11 +1,11 @@
 import type { NodeData } from '@/src';
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutMindmapHCustomSide: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     autoFit: 'view',
     node: {
       style: (model) => {

packages/g6/__tests__/demos/layout-mindmap-h-left.ts

@@ -1,10 +1,10 @@
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutMindmapHLeft: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     autoFit: 'view',
     node: {
       style: (model) => {

packages/g6/__tests__/demos/layout-mindmap-h-right.ts

@@ -1,10 +1,10 @@
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutMindmapHRight: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     autoFit: 'view',
     node: {
       style: (model) => {

packages/g6/__tests__/demos/layout-mindmap-h.ts

@@ -1,10 +1,10 @@
-import { Graph, Utils } from '@/src';
+import { Graph, treeToGraphData } from '@/src';
 import data from '@@/dataset/algorithm-category.json';
 
 export const layoutMindmapH: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
-    data: Utils.treeToGraphData(data),
+    data: treeToGraphData(data),
     autoFit: 'view',
     node: {
       style: (model) => {

packages/g6/__tests__/demos/plugin-history.ts

@@ -68,8 +68,8 @@ export const pluginHistory: TestCase = async (context) => {
         });
         graph.draw();
       },
-      collapse: () => graph.collapse('combo-2'),
-      expand: () => graph.expand('combo-1'),
+      collapse: () => graph.collapseElement('combo-2'),
+      expand: () => graph.expandElement('combo-1'),
       state: () => graph.setElementState('node-1', 'selected', true),
       zIndex: () => graph.setElementZIndex('combo-2', 100),
       undo: () => history.undo(),

packages/g6/__tests__/unit/behaviors/drag-element-combo.spec.ts

@@ -15,7 +15,7 @@ describe('behavior drag combo', () => {
 
   it('default status', async () => {
     graph.setBehaviors([{ type: 'drag-element', dropEffect: 'link' }]);
-    graph.expand('combo-1');
+    graph.expandElement('combo-1');
     await expect(graph).toMatchSnapshot(__filename);
   });
 

packages/g6/__tests__/unit/plugins/history/plugin-history.spec.ts

@@ -59,15 +59,15 @@ describe('history plugin', () => {
   });
 
   it('collapse/expand', async () => {
-    graph.collapse('combo-2');
+    graph.collapseElement('combo-2');
     await expect(graph).toMatchSnapshot(__filename, 'collapse');
     history.undo();
     await expect(graph).toMatchSnapshot(__filename, 'collapse-undo');
     history.redo();
     await expect(graph).toMatchSnapshot(__filename, 'collapse-redo');
     history.undo();
 
-    graph.expand('combo-1');
+    graph.expandElement('combo-1');
     await expect(graph).toMatchSnapshot(__filename, 'expand');
     history.undo();
     await expect(graph).toMatchSnapshot(__filename, 'expand-undo');

packages/g6/__tests__/unit/runtime/data.spec.ts

@@ -1,4 +1,4 @@
-import { Utils } from '@/src';
+import { treeToGraphData } from '@/src';
 import { DataController } from '@/src/runtime/data';
 import { reduceDataChanges } from '@/src/utils/change';
 import { idOf } from '@/src/utils/id';
@@ -593,7 +593,7 @@ describe('DataController', () => {
   it('getAncestorsData getParentData getChildrenData', () => {
     const controller = new DataController();
 
-    controller.addData(Utils.treeToGraphData(tree));
+    controller.addData(treeToGraphData(tree));
 
     expect(controller.getAncestorsData('Logistic regression', 'tree').map(idOf)).toEqual([
       'Classification',

packages/g6/src/behaviors/collapse-expand.ts

@@ -70,10 +70,10 @@ export class CollapseExpand extends BaseBehavior<CollapseExpandOptions> {
     const { onCollapse, onExpand, animation } = this.options;
     const isCollapse = data.style?.collapsed;
     if (isCollapse) {
-      await graph.expand(id, animation);
+      await graph.expandElement(id, animation);
       onExpand?.(id);
     } else {
-      await graph.collapse(id, animation);
+      await graph.collapseElement(id, animation);
       onCollapse?.(id);
     }
   };

packages/g6/src/exports.ts

@@ -1,8 +1,3 @@
-import { dark, light } from './themes';
-import { idOf } from './utils/id';
-import { omitStyleProps, subStyleProps } from './utils/prefix';
-import { treeToGraphData } from './utils/tree';
-
 export { BaseBehavior, DragCanvas, ZoomCanvas } from './behaviors';
 export {
   CanvasEvent,
@@ -34,8 +29,11 @@ export { BasePlugin, CameraSetting, History } from './plugins';
 export { getExtension, getExtensions, register } from './registry';
 export { Graph } from './runtime/graph';
 export { BaseTransform } from './transforms';
+export { idOf } from './utils/id';
+export { omitStyleProps, subStyleProps } from './utils/prefix';
 export { Shortcut } from './utils/shortcut';
 export { parseSize } from './utils/size';
+export { treeToGraphData } from './utils/tree';
 
 export type { BaseBehaviorOptions, DragCanvasOptions, ZoomCanvasOptions } from './behaviors';
 export type { BaseComboStyleProps, CircleComboStyleProps, RectComboStyleProps } from './elements/combos';
@@ -102,16 +100,5 @@ export type {
 } from './types';
 export type { ShortcutKey } from './utils/shortcut';
 
-const Utils = {
-  idOf,
-  treeToGraphData,
-  subStyleProps,
-  omitStyleProps,
-};
-
-const Theme = {
-  dark,
-  light,
-};
-
-export { Theme, Utils };
+import { dark, light } from './themes';
+export const Theme = { dark, light };

packages/g6/src/runtime/graph.ts

@@ -1039,12 +1039,12 @@ export class Graph extends EventEmitter {
     return this.context.element!.getElement(id)!.getRenderBounds();
   }
 
-  public async collapse(id: ID, animation: boolean = true): Promise<void> {
+  public async collapseElement(id: ID, animation: boolean = true): Promise<void> {
     this.setElementCollapsibility(id, true);
     await this.context.element!.draw({ animation, stage: 'collapse' });
   }
 
-  public async expand(id: ID, animation: boolean = true): Promise<void> {
+  public async expandElement(id: ID, animation: boolean = true): Promise<void> {
     this.setElementCollapsibility(id, false);
     await this.context.element!.draw({ animation, stage: 'expand' });
   }