feat(graphin): add combo feature

antvis · May 31, 2020 · 3e7cec9 · 3e7cec9
1 parent 1c1958e
commit 3e7cec9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/packages/graphin/src/controller/init.ts b/packages/graphin/src/controller/init.ts
@@ -52,6 +52,8 @@ const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode:
     disableZoom: false, // 禁用画布缩放
     disableDrag: false, // 禁用节点拖拽
     wheelSensitivity: 1, // 缩放的敏感度，我们在内部有不同设备的最佳匹配
+    // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理:https://g6.antv.vision/zh/docs/manual/middle/combo
+    groupByTypes: false,
   };
 
   /** merged options */
@@ -116,6 +118,15 @@ const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode:
       disable: disableDrag,
       options: {},
     },
+    // combo
+    {
+      type: 'drag-combo',
+      options: {},
+    },
+    {
+      type: 'collapse-expand-combo',
+      options: {},
+    },
   ];
   const defaultModes = innerBehaviors
     .filter(c => {

diff --git a/packages/graphin/src/controller/layout/dataChecking.ts b/packages/graphin/src/controller/layout/dataChecking.ts
@@ -1,12 +1,12 @@
 import { Data } from '../../types';
 
 // Checking data, filter out invalid data and fill in optional field with default value
-const dataChecking = (data: Data = { nodes: [], edges: [] }): Data => {
-  const { edges = [], nodes = [] } = data;
+const dataChecking = (data: Data): Data => {
+  const { edges = [], nodes = [], combos } = data;
   // nodes
   const nodeIds: string[] = [];
   const graphinNodes = nodes
-    .filter((node) => {
+    .filter(node => {
       const { id } = node;
       // 如果节点不存在，则忽略该节点
       if (!id) {
@@ -25,7 +25,7 @@ const dataChecking = (data: Data = { nodes: [], edges: [] }): Data => {
       nodeIds.push(id);
       return true;
     })
-    .map((node) => {
+    .map(node => {
       return {
         type: node.type || 'CircleNode',
         shape: node.shape || 'CircleNode',
@@ -39,7 +39,7 @@ const dataChecking = (data: Data = { nodes: [], edges: [] }): Data => {
 
   // edges
   const graphinEdges = edges
-    .filter((edge) => {
+    .filter(edge => {
       const { source, target } = edge;
       if (!source || !target) {
         // eslint-disable-next-line no-console
@@ -56,7 +56,7 @@ const dataChecking = (data: Data = { nodes: [], edges: [] }): Data => {
       /** 边是可以重复的，因为properties可能不一样 */
       return true;
     })
-    .map((edge) => {
+    .map(edge => {
       const { source, target, shape, style, type } = edge;
       return {
         type: type || source === target ? 'loop' : 'LineEdge',
@@ -78,6 +78,7 @@ const dataChecking = (data: Data = { nodes: [], edges: [] }): Data => {
   return {
     nodes: graphinNodes,
     edges: graphinEdges,
+    combos,
   };
 };
 

diff --git a/packages/graphin/src/controller/layout/index.tsx b/packages/graphin/src/controller/layout/index.tsx
@@ -96,7 +96,14 @@ const layoutController = (
     },
   };
 
-  return matchLayout.layout(data, options as LayoutOption);
+  const layoutData = matchLayout.layout(data, options as LayoutOption);
+  return {
+    ...layoutData,
+    data: {
+      ...layoutData.data,
+      combos: data.combos,
+    },
+  };
 };
 
 export default layoutController;
diff --git a/packages/graphin/src/types.ts b/packages/graphin/src/types.ts
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import G6 from '@antv/g6';
+import { ComboConfig } from '@antv/g6/src/types';
 import ForceLayout from './layout/force/ForceLayout';
 import Graphin from './Graphin';
 import { LayoutOption } from './controller/layout/defaultLayouts';
@@ -121,6 +122,8 @@ export interface Node {
   data: {
     /** 唯一标示ID，必选 */
     id: string;
+    /** comboId */
+    comboId?: string;
     /** 节点数据类型 */
     type?: string;
     /** 节点文本 */
@@ -130,6 +133,8 @@ export interface Node {
   };
   /** 唯一标示ID，必选 */
   id: string;
+  /** comboId */
+  comboId?: string;
   /** 节点类型 */
   shape?: string;
   /** 节点类型 */
@@ -249,6 +254,8 @@ export interface Data {
   nodes: Node[];
   /** 边 */
   edges: Edge[];
+  /** combo */
+  combos?: ComboConfig[];
 }
 export interface Layout {
   /** 布局名称，必选 */