refactor: simplify tree data conversion to graph data and adjust orga…

…nizational chart node styles (#2716) * refactor: treeToGraphData * fix: modify font size * fix: adjust node styles * chore: update version
ant-design · Sep 27, 2024 · 767bfa3 · 767bfa3
1 parent 086b96e
commit 767bfa3
Show file tree

Hide file tree

Showing 29 changed files with 51 additions and 250 deletions.
diff --git a/packages/graphs/package.json b/packages/graphs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/graphs",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "A React graph library based on Graphin",
   "keywords": [
     "antv",
@@ -41,16 +41,16 @@
     "dev": "vite",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx  --fix --format=pretty ./src && npm run lint:prettier",
     "lint:prettier": "npm run prettier && git diff && prettier --version && prettier --check \"src/**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
+    "prepublishOnly": "pnpm run build",
     "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
     "profile": "webpack --config webpack.config.js --mode production --profile --json > stats.json",
     "start": "npm run build:esm --w",
-    "test": "jest",
-    "prepublishOnly": "pnpm run build"
+    "test": "jest"
   },
   "dependencies": {
     "@ant-design/charts-util": "workspace:*",
-    "@antv/g6": "^5.0.23",
-    "@antv/g6-extension-react": "^0.1.6",
+    "@antv/g6": "^5.0.24",
+    "@antv/g6-extension-react": "^0.1.7",
     "@antv/graphin": "^3.0.2",
     "lodash": "^4.17.21",
     "styled-components": "^6.1.13"

diff --git a/packages/graphs/src/components/indented-tree/options.tsx b/packages/graphs/src/components/indented-tree/options.tsx
@@ -92,17 +92,16 @@ export const getIndentedTreeOptions = ({
     };
 
     const measureNodeSize = (data: NodeData) => {
-      const depth = data.data?.depth as number;
-      const offset = depth === 0 ? [24, 36] : [12, 24];
-      const font = getNodeFont(depth);
+      const offset = data.depth === 0 ? [24, 36] : [12, 24];
+      const font = getNodeFont(data.depth!);
       return measureTextSize(idOf(data), offset, font, minWidth, maxWidth);
     };
 
     options = {
       node: {
         style: {
           component: function (data: NodeData) {
-            const depth = data.data?.depth as number;
+            const depth = data.depth as number;
             const color = data.style?.color as string;
             const props: TextNodeProps = {
               type: depth === 0 || depth === 1 ? 'filled' : 'outlined',
@@ -160,7 +159,7 @@ export const getIndentedTreeOptions = ({
       node: {
         style: {
           component: function (data: NodeData) {
-            const depth = data.data?.depth as number;
+            const depth = data.depth as number;
             const color = data.style?.color as string;
             const props = { text: idOf(data), color, maxWidth, font: getNodeFont(depth) } as TextNodeProps;
             Object.assign(

diff --git a/packages/graphs/src/components/index.ts b/packages/graphs/src/components/index.ts
@@ -1,6 +1,6 @@
-export { FlowGraph, type FlowGraphOptions } from './flow-graph';
 export { Dendrogram, type DendrogramOptions } from './dendrogram';
 export { FlowDirectionGraph, type FlowDirectionGraphOptions } from './flow-direction-graph';
+export { FlowGraph, type FlowGraphOptions } from './flow-graph';
 export { IndentedTree, type IndentedTreeOptions } from './indented-tree';
 export { MindMap, type MindMapOptions } from './mind-map';
 export { NetworkGraph, type NetworkGraphOptions } from './network-graph';

diff --git a/packages/graphs/src/components/mind-map/options.tsx b/packages/graphs/src/components/mind-map/options.tsx
@@ -91,7 +91,7 @@ export function getMindMapOptions({
     };
 
     const measureNodeSize = (data: NodeData) => {
-      const depth = data.data?.depth as number;
+      const depth = data.depth as number;
       const offset = depth === 0 ? [24, 36] : [12, 24];
       const font = getNodeFont(depth);
       return measureTextSize(idOf(data), offset, font, minWidth, maxWidth);
@@ -101,7 +101,7 @@ export function getMindMapOptions({
       node: {
         style: {
           component: (data: NodeData) => {
-            const depth = data.data?.depth as number;
+            const depth = data.depth as number;
             const color = data.style?.color as string;
             const props = { text: idOf(data), color, maxWidth, font: getNodeFont(depth) } as TextNodeProps;
             Object.assign(
@@ -164,7 +164,7 @@ export function getMindMapOptions({
         style: {
           component: function (data: NodeData) {
             const side = getNodeSide(this as unknown as Graph, data);
-            const depth = data.data?.depth as number;
+            const depth = data.depth as number;
             const color = data.style?.color as string;
             const props = { text: idOf(data), color, maxWidth, font: getNodeFont(depth) } as TextNodeProps;
             Object.assign(
@@ -213,7 +213,7 @@ export function getMindMapOptions({
         {
           ...(prev.find((t) => (t as any).key === 'collapse-expand-react-node') as any),
           iconOffsetY: (data) => {
-            if (data.data?.depth === 0) return 0;
+            if (data.depth === 0) return 0;
             return measureNodeSize(data)[1] / 2;
           },
         },

diff --git a/packages/graphs/src/core/base/node/organization-chart-node.tsx b/packages/graphs/src/core/base/node/organization-chart-node.tsx
@@ -13,7 +13,7 @@ export interface OrganizationChartNodeProps extends Pick<React.HTMLAttributes<HT
   /**
    * Working status of the person
    */
-  status: string;
+  status?: string;
   /**
    * Whether the node is hovered
    */
@@ -33,8 +33,7 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
   ${(props) =>
     props.$isActive &&
     css`
-      height: calc(100% - 6px);
-      width: calc(100% - 6px);
+      transform: translate(-3px, -3px);
       border: 3px solid #1783ff;
     `}
 
@@ -65,25 +64,31 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
     }
 
     &-detail {
-      flex: 1;
+      width: calc(100% - 56px);
     }
 
     &-name {
       color: #242424;
       font-weight: 600;
       font-size: 18px;
       margin-bottom: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     &-post {
       color: #616161;
       font-size: 14px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 `;
 
 export const OrganizationChartNode: React.FC<OrganizationChartNodeProps> = (props) => {
-  const { name, position, status, isActive, className, style } = props;
+  const { name, position, status = 'online', isActive, className, style } = props;
 
   const colorMap = {
     online: '#1783FF',
@@ -98,7 +103,7 @@ export const OrganizationChartNode: React.FC<OrganizationChartNodeProps> = (prop
         <div className="org-chart-node-content-avatar">{name.slice(0, 1)}</div>
         <div className="org-chart-node-content-detail">
           <div className="org-chart-node-content-name">{name}</div>
-          <div className="org-chart-node-content-post">{position}</div>
+          {position && <div className="org-chart-node-content-post">{position}</div>}
         </div>
       </div>
     </StyledWrapper>

diff --git a/packages/graphs/src/core/base/node/text-node.tsx b/packages/graphs/src/core/base/node/text-node.tsx
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div<{
   height: inherit;
   width: inherit;
   box-sizing: content-box;
+  font-size: 14px;
 
   ${({ $type, $color, $borderWidth }) => {
     switch ($type) {
@@ -132,7 +133,7 @@ export const TextNode: FC<TextNodeProps> = (props) => {
       $borderWidth={borderWidth}
       $isActive={isActive}
       $isSelected={isSelected}
-      className={className}
+      className={`text-node ${className}`}
       style={{ ...style, ...font }}
     >
       <div style={isMultiLine ? { width: 'calc(100% - 12px)' } : {}}>{text}</div>

diff --git a/packages/graphs/src/core/transform/arrange-edge-z-index.ts b/packages/graphs/src/core/transform/arrange-edge-z-index.ts
@@ -9,7 +9,7 @@ export class ArrangeEdgeZIndex extends BaseTransform {
     const { model } = this.context;
     const { nodes, edges } = model.getData();
 
-    const oneLevelNodes = nodes.filter((node) => node.data?.depth === 1);
+    const oneLevelNodes = nodes.filter((node) => node.depth === 1);
     const oneLevelNodeIds = oneLevelNodes.map((node) => node.id);
 
     edges.forEach((edge) => {

diff --git a/packages/graphs/src/core/transform/assign-color-by-branch.ts b/packages/graphs/src/core/transform/assign-color-by-branch.ts
@@ -40,7 +40,7 @@ export class AssignColorByBranch extends BaseTransform {
       node.children?.forEach((childId) => dfs(childId, node.style?.color as string));
     };
 
-    nodes.filter((node) => node.data?.depth === 1).forEach((rootNode) => dfs(rootNode.id));
+    nodes.filter((node) => node.depth === 1).forEach((rootNode) => dfs(rootNode.id));
 
     return input;
   }

diff --git a/packages/graphs/tests/demos/indented-tree-boxed.tsx b/packages/graphs/tests/demos/indented-tree-boxed.tsx
@@ -1,6 +1,5 @@
 import type { IndentedTreeOptions } from '@ant-design/graphs';
 import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs';
-import type { NodeData, TreeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
@@ -9,15 +8,7 @@ const { treeToGraphData } = G6;
 export const IndentedTreeBoxed = () => {
   const options: IndentedTreeOptions = {
     type: 'boxed',
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
   };
 
   return <IndentedTreeComponent {...options} />;

diff --git a/packages/graphs/tests/demos/indented-tree-default.tsx b/packages/graphs/tests/demos/indented-tree-default.tsx
@@ -1,6 +1,5 @@
 import type { IndentedTreeOptions } from '@ant-design/graphs';
 import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs';
-import type { NodeData, TreeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
@@ -9,15 +8,7 @@ const { treeToGraphData } = G6;
 export const IndentedTree = () => {
   const options: IndentedTreeOptions = {
     type: 'default',
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
     // transforms: (prev) => [
     //   ...prev.filter((transform) => (transform as any).type !== 'collapse-expand-react-node'),
     //   {

diff --git a/packages/graphs/tests/demos/indented-tree-linear.tsx b/packages/graphs/tests/demos/indented-tree-linear.tsx
@@ -1,6 +1,5 @@
 import type { IndentedTreeOptions } from '@ant-design/graphs';
 import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs';
-import type { NodeData, TreeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
@@ -9,15 +8,7 @@ const { treeToGraphData } = G6;
 export const IndentedTreeLinear = () => {
   const options: IndentedTreeOptions = {
     type: 'linear',
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
   };
 
   return <IndentedTreeComponent {...options} />;

diff --git a/packages/graphs/tests/demos/mind-map-boxed.tsx b/packages/graphs/tests/demos/mind-map-boxed.tsx
@@ -1,6 +1,5 @@
 import type { MindMapOptions } from '@ant-design/graphs';
 import { G6, MindMap as MindMapComponent } from '@ant-design/graphs';
-import type { NodeData, TreeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
@@ -9,15 +8,7 @@ const { treeToGraphData } = G6;
 export const MindMapBoxed = () => {
   const options: MindMapOptions = {
     type: 'boxed',
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
   };
 
   return <MindMapComponent {...options} />;

diff --git a/packages/graphs/tests/demos/mind-map-custom.tsx b/packages/graphs/tests/demos/mind-map-custom.tsx
@@ -1,6 +1,6 @@
 import type { MindMapOptions } from '@ant-design/graphs';
 import { G6, getNodeSide, measureTextSize, MindMap as MindMapComponent, RCNode } from '@ant-design/graphs';
-import { Graph, type NodeData, type TreeData } from '@antv/g6';
+import { Graph, type NodeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
@@ -9,15 +9,7 @@ const { TextNode } = RCNode;
 
 export const MindMapCustom = () => {
   const options: MindMapOptions = {
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
     node: {
       style: {
         component: (data) => {

diff --git a/packages/graphs/tests/demos/mind-map-default.tsx b/packages/graphs/tests/demos/mind-map-default.tsx
@@ -1,22 +1,13 @@
 import type { MindMapOptions } from '@ant-design/graphs';
 import { G6, MindMap as MindMapComponent } from '@ant-design/graphs';
-import type { NodeData, TreeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
 const { treeToGraphData } = G6;
 
 export const MindMap = () => {
   const options: MindMapOptions = {
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
     transforms: (prev) => [
       ...prev.filter((transform) => (transform as any).type !== 'collapse-expand-react-node'),
       {

diff --git a/packages/graphs/tests/demos/mind-map-linear.tsx b/packages/graphs/tests/demos/mind-map-linear.tsx
@@ -1,6 +1,5 @@
 import type { MindMapOptions } from '@ant-design/graphs';
 import { G6, MindMap as MindMapComponent } from '@ant-design/graphs';
-import type { NodeData, TreeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
@@ -9,15 +8,7 @@ const { treeToGraphData } = G6;
 export const MindMapLinear = () => {
   const options: MindMapOptions = {
     type: 'linear',
-    data: treeToGraphData(data, {
-      getNodeData: (datum: TreeData, depth: number) => {
-        datum.data ||= {};
-        datum.data.depth = depth;
-        if (!datum.children) return datum as NodeData;
-        const { children, ...restDatum } = datum;
-        return { ...restDatum, children: children.map((child) => child.id) } as NodeData;
-      },
-    }),
+    data: treeToGraphData(data),
   };
 
   return <MindMapComponent {...options} />;

diff --git a/packages/graphs/tests/demos/organization-chart2.tsx b/packages/graphs/tests/demos/organization-chart2.tsx
@@ -42,6 +42,7 @@ export const OrganizationChart2 = () => {
         endArrow: true,
       },
     },
+    behaviors: (prev) => [...prev, 'hover-activate-neighbors'],
     transforms: (prev) => [
       ...prev.filter((t) => (t as any).type !== 'collapse-expand-react-node'),
       {

diff --git a/site/examples/relations/indented-tree/demo/auto-children.js b/site/examples/relations/indented-tree/demo/auto-children.js
@@ -10,18 +10,7 @@ const DemoIndentedTree = () => {
   useEffect(() => {
     fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
       .then((res) => res.json())
-      .then((res) => {
-        const graphData = treeToGraphData(res, {
-          getNodeData: (datum, depth) => {
-            datum.data ||= {};
-            datum.data.depth = depth;
-            if (!datum.children) return datum;
-            const { children, ...restDatum } = datum;
-            return { ...restDatum, children: children.map((child) => child.id) };
-          },
-        });
-        setData(graphData);
-      });
+      .then((res) => setData(treeToGraphData(res)));
   }, []);
 
   const options = {