test: layout dendrogram (#5539)

* test: layout dendrogram

* fix: resolve conversation

packages/g6/__tests__/demo/case/index.ts

@@ -19,6 +19,8 @@ export * from './layout-combo-combined';
 export * from './layout-concentric';
 export * from './layout-dagre-flow';
 export * from './layout-dagre-flow-combo';
+export * from './layout-dendrogram-basic';
+export * from './layout-dendrogram-tb';
 export * from './layout-force';
 export * from './layout-fruchterman-basic';
 export * from './layout-fruchterman-cluster';

packages/g6/__tests__/demo/case/layout-dendrogram-basic.ts

@@ -0,0 +1,34 @@
+import { Graph, Utils } from '@/src';
+import data from '@@/dataset/algorithm-category.json';
+import type { STDTestCase } from '../types';
+
+export const layoutDendrogramBasic: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    autoFit: 'view',
+    data: Utils.treeToGraphData(data),
+    node: {
+      style: {
+        labelText: (d) => d.id,
+        labelPlacement: (model) => (model.style!.children?.length ? 'left' : 'right'),
+        ports: [{ placement: 'right' }, { placement: 'left' }],
+      },
+    },
+    edge: {
+      style: {
+        type: 'cubic-horizontal',
+      },
+    },
+    layout: {
+      type: 'dendrogram',
+      direction: 'LR',
+      nodeSep: 36,
+      rankSep: 250,
+    },
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demo/case/layout-dendrogram-tb.ts

@@ -0,0 +1,41 @@
+import { Graph, Utils } from '@/src';
+import data from '@@/dataset/algorithm-category.json';
+import type { STDTestCase } from '../types';
+
+export const layoutDendrogramTb: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    autoFit: 'view',
+    data: Utils.treeToGraphData(data),
+    node: {
+      style: (model) => {
+        const hasChildren = !!model.style!.children?.length;
+        return {
+          labelMaxWidth: 200,
+          labelPlacement: hasChildren ? 'right' : 'bottom',
+          labelText: model.id,
+          labelTextAlign: 'start',
+          labelTextBaseline: hasChildren ? 'middle' : 'bottom',
+          transform: hasChildren ? '' : 'rotate(90)',
+          ports: [{ placement: 'bottom' }, { placement: 'top' }],
+        };
+      },
+    },
+    edge: {
+      style: {
+        type: 'cubic-vertical',
+      },
+    },
+    layout: {
+      type: 'dendrogram',
+      direction: 'TB',
+      nodeSep: 40,
+      rankSep: 100,
+    },
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
+  });
+
+  await graph.render();
+
+  return graph;
+};