refactor(graph-collection-manager): update antv-x6 to 2.x (#2466)

* refactor: update antv-x6  to 2.x

* refactor: code improve

* refactor: code improve

* refactor: code improve

* refactor: code improve

* refactor: code improve

* refactor: code improve

packages/core/client/src/collection-manager/Configuration/EditFieldAction.tsx

@@ -55,6 +55,9 @@ const getSchema = (schema: IField, record: any, compile, getContainer): ISchema
       [uid()]: {
         type: 'void',
         'x-component': 'Action.Drawer',
+        'x-component-props': {
+          getContainer: '{{ getContainer }}',
+        },
         'x-decorator': 'Form',
         'x-decorator-props': {
           useValues(options) {

packages/core/client/src/collection-manager/Configuration/ViewInheritedField.tsx

@@ -29,6 +29,9 @@ const getSchema = (schema: IField, record: any, compile, getContainer): ISchema
       [uid()]: {
         type: 'void',
         'x-component': 'Action.Drawer',
+        'x-component-props': {
+          getContainer: '{{ getContainer }}',
+        },
         'x-decorator': 'Form',
         'x-decorator-props': {
           useValues(options) {

packages/core/client/src/collection-manager/Configuration/components/CollectionCategory.tsx

@@ -10,7 +10,11 @@ export const CollectionCategory = observer(
     return (
       <>
         {value.map((item) => {
-          return <Tag color={item.color}>{compile(item?.name)}</Tag>;
+          return (
+            <Tag key={item.name} color={item.color}>
+              {compile(item?.name)}
+            </Tag>
+          );
         })}
       </>
     );

packages/plugins/graph-collection-manager/package.json

@@ -9,8 +9,14 @@
   "main": "./dist/server/index.js",
   "devDependencies": {
     "@ant-design/icons": "5.x",
-    "@antv/x6": "^1.9.0",
-    "@antv/x6-react-shape": "^1.6.2",
+    "@antv/x6": "^2.0.0",
+    "@antv/x6-plugin-minimap": "^2.0.0",
+    "@antv/x6-plugin-scroller": "^2.0.0",
+    "@antv/x6-plugin-selection": "^2.0.0",
+    "@antv/x6-plugin-snapline": "^2.0.0",
+    "@antv/x6-plugin-dnd": "^2.0.0", 
+    "@antv/x6-plugin-export": "^2.0.0", 
+    "@antv/x6-react-shape": "^2.0.0", 
     "@formily/react": "2.x",
     "@formily/reactive": "2.x",
     "@formily/shared": "2.x",

packages/plugins/graph-collection-manager/src/client/GraphCollectionProvider.tsx

@@ -5,9 +5,6 @@ import { useGCMTranslation } from './utils';
 
 export const GraphCollectionProvider = React.memo((props) => {
   const ctx = useContext(PluginManagerContext);
-  // i18n.addResources('en-US', 'graphPositions', enUS);
-  // i18n.addResources('ja-JP', 'graphPositions', jaJP);
-  // i18n.addResources('zh-CN', 'graphPositions', zhCN);
   const { t } = useGCMTranslation();
   const items = useContext(SettingsCenterContext);
 

packages/plugins/graph-collection-manager/src/client/action-hooks.tsx

@@ -10,7 +10,7 @@ import {
 } from '@nocobase/client';
 import { error } from '@nocobase/utils/client';
 import { Select, message } from 'antd';
-import { lodash } from '@nocobase/utils/client'
+import { lodash } from '@nocobase/utils/client';
 import React, { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GraphCollectionContext } from './components/CollectionNodeProvder';

packages/plugins/graph-collection-manager/src/client/components/Entity.tsx

@@ -1,32 +1,21 @@
 import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
-import '@antv/x6-react-shape';
 import { uid } from '@formily/shared';
+import { css } from '@emotion/css';
 import {
-  Action,
-  Checkbox,
   CollectionCategroriesContext,
-  CollectionField,
   CollectionProvider,
-  Form,
-  FormItem,
-  Formula,
-  Grid,
-  Input,
-  InputNumber,
-  Radio,
-  ResourceActionProvider,
   SchemaComponent,
   SchemaComponentProvider,
   Select,
   collection,
-  css,
   useCollectionManager,
   useCompile,
   useCurrentAppInfo,
   useRecord,
 } from '@nocobase/client';
 import lodash from 'lodash';
-import { Badge, Dropdown, Popover, Tag } from 'antd';
+import { SchemaOptionsContext } from '@formily/react';
+import { Badge, Popover, Tag } from 'antd';
 import React, { useContext, useRef, useState } from 'react';
 import {
   useAsyncDataSource,
@@ -46,12 +35,306 @@ import { FieldSummary } from './FieldSummary';
 import { OverrideFieldAction } from './OverrideFieldAction';
 import { ViewFieldAction } from './ViewFieldAction';
 
+const OperationButton: any = React.memo((props: any) => {
+  const { property, loadCollections, collectionData, setTargetNode, node, handelOpenPorts, title, name } = props;
+  const isInheritField = !(property.collectionName !== name);
+  const options = useContext(SchemaOptionsContext);
+  const {
+    data: { database },
+  } = useCurrentAppInfo();
+  const useNewId = (prefix) => {
+    return `${prefix || ''}${uid()}`;
+  };
+  // 获取当前字段列表
+  const useCurrentFields = () => {
+    const record = useRecord();
+    const { getCollectionFields } = useCollectionManager();
+    const fields = getCollectionFields(record.collectionName || record.name) as any[];
+    return fields;
+  };
+  return (
+    <div className="field-operator">
+      <SchemaComponentProvider
+        components={{
+          Select: (props) => <Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />,
+          FieldSummary,
+          AddFieldAction,
+          OverrideFieldAction,
+          ViewFieldAction,
+          EditFieldAction,
+          ...options.components,
+        }}
+        scope={{
+          useAsyncDataSource,
+          loadCollections,
+          useCancelAction,
+          useNewId,
+          useCurrentFields,
+          useValuesFromRecord,
+          useUpdateCollectionActionAndRefreshCM,
+          isInheritField,
+          ...options.scope,
+        }}
+      >
+        <CollectionNodeProvder
+          record={collectionData.current}
+          setTargetNode={setTargetNode}
+          node={node}
+          handelOpenPorts={() => handelOpenPorts(true)}
+        >
+          <SchemaComponent
+            scope={useCancelAction}
+            schema={{
+              type: 'object',
+              properties: {
+                create: {
+                  type: 'void',
+                  'x-action': 'create',
+                  'x-component': 'AddFieldAction',
+                  'x-visible': '{{isInheritField}}',
+                  'x-component-props': {
+                    item: {
+                      ...property,
+                      title,
+                    },
+                    database,
+                  },
+                },
+                update: {
+                  type: 'void',
+                  'x-action': 'update',
+                  'x-component': 'EditFieldAction',
+                  'x-visible': '{{isInheritField}}',
+                  'x-component-props': {
+                    item: {
+                      ...property,
+                      title,
+                      __parent: collectionData.current,
+                    },
+                  },
+                },
+                delete: {
+                  type: 'void',
+                  'x-action': 'destroy',
+                  'x-component': 'Action',
+                  'x-visible': '{{isInheritField}}',
+                  'x-component-props': {
+                    component: DeleteOutlined,
+                    icon: 'DeleteOutlined',
+                    className: 'btn-del',
+                    confirm: {
+                      title: "{{t('Delete record')}}",
+                      getContainer: getPopupContainer,
+                      collectionConten: "{{t('Are you sure you want to delete it?')}}",
+                    },
+                    useAction: () =>
+                      useDestroyFieldActionAndRefreshCM({
+                        collectionName: property.collectionName,
+                        name: property.name,
+                      }),
+                  },
+                },
+                override: {
+                  type: 'void',
+                  'x-action': 'create',
+                  'x-visible': '{{!isInheritField}}',
+                  'x-component': 'OverrideFieldAction',
+                  'x-component-props': {
+                    icon: 'ReconciliationOutlined',
+                    item: {
+                      ...property,
+                      title,
+                      __parent: collectionData.current,
+                      targetCollection: name,
+                    },
+                  },
+                },
+                view: {
+                  type: 'void',
+                  'x-action': 'view',
+                  'x-visible': '{{!isInheritField}}',
+                  'x-component': 'ViewFieldAction',
+                  'x-component-props': {
+                    icon: 'ReconciliationOutlined',
+                    item: {
+                      ...property,
+                      title,
+                      __parent: collectionData.current,
+                    },
+                  },
+                },
+              },
+            }}
+          />
+        </CollectionNodeProvder>
+      </SchemaComponentProvider>
+    </div>
+  );
+});
+
+const PopoverContent = React.memo((props: any) => {
+  const { property, node, ...other } = props;
+  const {
+    store: {
+      data: { title, name, sourcePort, associated, targetPort },
+    },
+  } = node;
+  const compile = useCompile();
+  const { styles } = useStyles();
+  const { getInterface } = useCollectionManager();
+  const [isHovered, setIsHovered] = useState(false);
+  const CollectionConten = React.useCallback((data) => {
+    const { type, name, primaryKey, allowNull, autoIncrement } = data;
+    return (
+      <div className={styles.collectionPopoverClass}>
+        <div className="field-content">
+          <div>
+            <span>name</span>: <span className="field-type">{name}</span>
+          </div>
+          <div>
+            <span>type</span>: <span className="field-type">{type}</span>
+          </div>
+        </div>
+        <p>
+          {primaryKey && <Tag color="green">PRIMARY</Tag>}
+          {allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
+          {autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
+        </p>
+      </div>
+    );
+  }, []);
+  const operatioBtnProps = {
+    title,
+    name,
+    node,
+    ...other,
+  };
+  const typeColor = (v) => {
+    if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
+      return 'red';
+    } else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
+      return 'orange';
+    }
+  };
+  return (
+    <Popover
+      content={CollectionConten(property)}
+      getPopupContainer={getPopupContainer}
+      mouseLeaveDelay={0}
+      zIndex={100}
+      title={
+        <div>
+          {compile(property.uiSchema?.title)}
+          <span style={{ color: '#ffa940', float: 'right' }}>{compile(getInterface(property.interface)?.title)}</span>
+        </div>
+      }
+      key={property.id}
+      placement="right"
+    >
+      <div
+        className="body-item"
+        key={property.id}
+        id={property.id}
+        style={{
+          background:
+            targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
+        }}
+        onMouseEnter={() => {
+          setIsHovered(true);
+        }}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div className="name">
+          <Badge color={typeColor(property)} />
+          {compile(property.uiSchema?.title)}
+        </div>
+        <div className={`type  field_type`}>{compile(getInterface(property.interface)?.title)}</div>
+        {isHovered && <OperationButton property={property} {...operatioBtnProps} />}
+      </div>
+    </Popover>
+  );
+});
+
+const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
+  const {
+    store: {
+      data: { item, ports, data },
+    },
+  } = node;
+  const [collapse, setCollapse] = useState(false);
+  const { t } = useGCMTranslation();
+  const portsData = lodash.groupBy(ports.items, (v) => {
+    if (
+      v.isForeignKey ||
+      v.primaryKey ||
+      ['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
+    ) {
+      return 'initPorts';
+    } else {
+      return 'morePorts';
+    }
+  });
+  const handelOpenPorts = (isCollapse?) => {
+    targetGraph.getCellById(item.name)?.toFront();
+    setCollapse(isCollapse);
+    const collapseNodes = targetGraph.collapseNodes || [];
+    collapseNodes.push({
+      [item.name]: isCollapse,
+    });
+    targetGraph.collapseNodes = collapseNodes;
+    targetGraph.getCellById(item.name).setData({ collapse: true });
+  };
+  const isCollapse = collapse && data?.collapse;
+  const popoverProps = {
+    collectionData,
+    setTargetNode,
+    loadCollections,
+    handelOpenPorts,
+    node,
+  };
+  return (
+    <div className="body">
+      {portsData['initPorts']?.map((property) => {
+        return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
+      })}
+      <div className="morePorts">
+        {isCollapse &&
+          portsData['morePorts']?.map((property) => {
+            return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
+          })}
+      </div>
+      <a
+        className={css`
+          display: block;
+          color: #958f8f;
+          padding: 10px 5px;
+          &:hover {
+            color: rgb(99 90 88);
+          }
+        `}
+        onClick={() => handelOpenPorts(!isCollapse)}
+      >
+        {isCollapse
+          ? [
+              <UpOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
+              <span key="associate">{t('Association Fields')}</span>,
+            ]
+          : [
+              <DownOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
+              <span key="all">{t('All Fields')}</span>,
+            ]}
+      </a>
+    </div>
+  );
+});
+
 const Entity: React.FC<{
   node?: Node | any;
   setTargetNode: Function | any;
   targetGraph: any;
 }> = (props) => {
   const { styles } = useStyles();
+  const options = useContext(SchemaOptionsContext);
   const { node, setTargetNode, targetGraph } = props;
   const {
     store: {
@@ -118,20 +401,12 @@ const Entity: React.FC<{
                     loadCollections,
                     loadCategories,
                     useAsyncDataSource,
-                    Action,
-                    DeleteOutlined,
                     enableInherits: database?.dialect === 'postgres',
                   }}
                   components={{
-                    Action,
                     EditOutlined,
-                    FormItem,
-                    CollectionField,
-                    Input,
-                    Form,
-                    Select,
                     EditCollectionAction,
-                    Checkbox,
+                    ...options.components,
                   }}
                   schema={{
                     type: 'object',
@@ -171,328 +446,9 @@ const Entity: React.FC<{
           </SchemaComponentProvider>
         </div>
       </div>
-
       <PortsCom {...portsProps} />
     </div>
   );
 };
 
-const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
-  const {
-    store: {
-      data: { title, name, item, ports, data, sourcePort, associated, targetPort },
-    },
-  } = node;
-  const [collapse, setCollapse] = useState(false);
-  const { t } = useGCMTranslation();
-  const compile = useCompile();
-  const { styles } = useStyles();
-  const {
-    data: { database },
-  } = useCurrentAppInfo();
-  const portsData = lodash.groupBy(ports.items, (v) => {
-    if (
-      v.isForeignKey ||
-      v.primaryKey ||
-      ['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
-    ) {
-      return 'initPorts';
-    } else {
-      return 'morePorts';
-    }
-  });
-  const useNewId = (prefix) => {
-    return `${prefix || ''}${uid()}`;
-  };
-  const CollectionConten = (data) => {
-    const { type, name, primaryKey, allowNull, autoIncrement } = data;
-    return (
-      <div className={styles.collectionPopoverClass}>
-        <div className="field-content">
-          <div>
-            <span>name</span>: <span className="field-type">{name}</span>
-          </div>
-          <div>
-            <span>type</span>: <span className="field-type">{type}</span>
-          </div>
-        </div>
-        <p>
-          {primaryKey && <Tag color="green">PRIMARY</Tag>}
-          {allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
-          {autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
-        </p>
-      </div>
-    );
-  };
-  const typeColor = (v) => {
-    if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
-      return 'red';
-    } else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
-      return 'orange';
-    }
-  };
-
-  const OperationButton = ({ property }) => {
-    const isInheritField = !(property.collectionName !== name);
-    return (
-      <div className="field-operator">
-        <SchemaComponentProvider
-          components={{
-            FormItem,
-            CollectionField,
-            Input,
-            Form,
-            ResourceActionProvider,
-            Select: (props) => (
-              <Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
-            ),
-            Checkbox,
-            Radio,
-            InputNumber,
-            Grid,
-            FieldSummary,
-            Action,
-            EditOutlined,
-            DeleteOutlined,
-            AddFieldAction,
-            OverrideFieldAction,
-            ViewFieldAction,
-            Dropdown,
-            Formula,
-          }}
-          scope={{
-            useAsyncDataSource,
-            loadCollections,
-            useCancelAction,
-            useNewId,
-            useCurrentFields,
-            useValuesFromRecord,
-            useUpdateCollectionActionAndRefreshCM,
-            isInheritField,
-          }}
-        >
-          <CollectionNodeProvder
-            record={collectionData.current}
-            setTargetNode={setTargetNode}
-            node={node}
-            handelOpenPorts={() => handelOpenPorts(true)}
-          >
-            <SchemaComponent
-              scope={useCancelAction}
-              schema={{
-                type: 'object',
-                properties: {
-                  create: {
-                    type: 'void',
-                    'x-action': 'create',
-                    'x-component': 'AddFieldAction',
-                    'x-visible': '{{isInheritField}}',
-                    'x-component-props': {
-                      item: {
-                        ...property,
-                        title,
-                      },
-                      database,
-                    },
-                  },
-                  update: {
-                    type: 'void',
-                    'x-action': 'update',
-                    'x-component': EditFieldAction,
-                    'x-visible': '{{isInheritField}}',
-                    'x-component-props': {
-                      item: {
-                        ...property,
-                        title,
-                        __parent: collectionData.current,
-                      },
-                    },
-                  },
-                  delete: {
-                    type: 'void',
-                    'x-action': 'destroy',
-                    'x-component': 'Action',
-                    'x-visible': '{{isInheritField}}',
-                    'x-component-props': {
-                      component: DeleteOutlined,
-                      icon: 'DeleteOutlined',
-                      className: 'btn-del',
-                      confirm: {
-                        title: "{{t('Delete record')}}",
-                        getContainer: getPopupContainer,
-                        collectionConten: "{{t('Are you sure you want to delete it?')}}",
-                      },
-                      useAction: () =>
-                        useDestroyFieldActionAndRefreshCM({
-                          collectionName: property.collectionName,
-                          name: property.name,
-                        }),
-                    },
-                  },
-                  override: {
-                    type: 'void',
-                    'x-action': 'create',
-                    'x-visible': '{{!isInheritField}}',
-                    'x-component': 'OverrideFieldAction',
-                    'x-component-props': {
-                      icon: 'ReconciliationOutlined',
-                      item: {
-                        ...property,
-                        title,
-                        __parent: collectionData.current,
-                        targetCollection: name,
-                      },
-                    },
-                  },
-                  view: {
-                    type: 'void',
-                    'x-action': 'view',
-                    'x-visible': '{{!isInheritField}}',
-                    'x-component': 'ViewFieldAction',
-                    'x-component-props': {
-                      icon: 'ReconciliationOutlined',
-                      item: {
-                        ...property,
-                        title,
-                        __parent: collectionData.current,
-                      },
-                    },
-                  },
-                },
-              }}
-            />
-          </CollectionNodeProvder>
-        </SchemaComponentProvider>
-      </div>
-    );
-  };
-  const { getInterface } = useCollectionManager();
-  // 获取当前字段列表
-  const useCurrentFields = () => {
-    const record = useRecord();
-    const { getCollectionFields } = useCollectionManager();
-    const fields = getCollectionFields(record.collectionName || record.name) as any[];
-    return fields;
-  };
-  const handelOpenPorts = (isCollapse?) => {
-    targetGraph.getCellById(item.name)?.toFront();
-    setCollapse(isCollapse);
-    const collapseNodes = targetGraph.collapseNodes || [];
-    collapseNodes.push({
-      [item.name]: isCollapse,
-    });
-    targetGraph.collapseNodes = collapseNodes;
-    targetGraph.getCellById(item.name).setData({ collapse: true });
-  };
-  const isCollapse = collapse && data?.collapse;
-  return (
-    <div className="body">
-      {portsData['initPorts']?.map((property) => {
-        return (
-          property.uiSchema && (
-            <Popover
-              content={CollectionConten(property)}
-              getPopupContainer={getPopupContainer}
-              mouseLeaveDelay={0}
-              zIndex={100}
-              title={
-                <div>
-                  {compile(property.uiSchema?.title)}
-                  <span style={{ color: '#ffa940', float: 'right' }}>
-                    {compile(getInterface(property.interface)?.title)}
-                  </span>
-                </div>
-              }
-              key={property.id}
-              placement="right"
-            >
-              <div
-                className="body-item"
-                key={property.id}
-                id={property.id}
-                style={{
-                  background:
-                    targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
-                }}
-              >
-                <div className="name">
-                  <Badge color={typeColor(property)} />
-                  {compile(property.uiSchema?.title)}
-                </div>
-                <div className={`type  field_type`}>{compile(getInterface(property.interface)?.title)}</div>
-                <OperationButton property={property} />
-              </div>
-            </Popover>
-          )
-        );
-      })}
-      <div className="morePorts">
-        {isCollapse &&
-          portsData['morePorts']?.map((property) => {
-            return (
-              property.uiSchema && (
-                <Popover
-                  content={CollectionConten(property)}
-                  getPopupContainer={getPopupContainer}
-                  mouseLeaveDelay={0}
-                  zIndex={100}
-                  title={
-                    <div>
-                      {compile(property.uiSchema?.title)}
-                      <span style={{ color: '#ffa940', float: 'right' }}>
-                        {compile(getInterface(property.interface)?.title)}
-                      </span>
-                    </div>
-                  }
-                  key={property.id}
-                  placement="right"
-                >
-                  <div
-                    className="body-item"
-                    key={property.id}
-                    id={property.id}
-                    style={{
-                      background:
-                        targetPort || sourcePort === property.id || associated?.includes(property.name)
-                          ? '#e6f7ff'
-                          : null,
-                    }}
-                  >
-                    <div className="name">
-                      <Badge color="green" />
-                      {compile(property.uiSchema?.title)}
-                    </div>
-                    <div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
-                    <OperationButton property={property} />
-                  </div>
-                </Popover>
-              )
-            );
-          })}
-      </div>
-      <a
-        className={css`
-          display: block;
-          color: #958f8f;
-          padding: 10px 5px;
-          &:hover {
-            color: rgb(99 90 88);
-          }
-        `}
-        onClick={() => handelOpenPorts(!isCollapse)}
-      >
-        {isCollapse
-          ? [
-              <UpOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
-              <span key="associate">{t('Association Fields')}</span>,
-            ]
-          : [
-              <DownOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
-              <span key="all">{t('All Fields')}</span>,
-            ]}
-      </a>
-    </div>
-  );
-});
-
 export default Entity;

packages/plugins/graph-collection-manager/src/client/utils.tsx

@@ -85,12 +85,12 @@ export const formatData = (data) => {
       name: item.name,
       title: item.title,
       width: 250,
-      // height: 40 * portsData.initPorts?.length||40,
+      // height: 40 * portsData.initPorts?.length || 40,
       ports: [...(portsData.initPorts || []), ...(portsData.morePorts || [])],
       item: item,
     };
   });
-  const edges = formatEdgeData(edgeData, targetTablekeys, tableData);
+  const edges = formatRelationEdgeData(edgeData, targetTablekeys, tableData);
   const inheritEdges = formatInheritEdgeData(data);
   return { nodesData: tableData, edgesData: edges, inheritEdges };
 };
@@ -119,7 +119,6 @@ export const formatInheritEdgeData = (collections) => {
         textVerticalAnchor: 'middle',
         stroke: '#ddd',
         sourceMarker: null,
-        // targetMarker: null,
       },
     },
     router: {
@@ -185,7 +184,10 @@ export const formatInheritEdgeData = (collections) => {
             cell: k,
             connectionPoint: 'rect',
           },
-          connector: 'rounded',
+          connector: {
+            name: 'normal',
+            zIndex: 1000,
+          },
           connectionType: 'inherited',
           ...commonAttrs,
         });
@@ -195,7 +197,7 @@ export const formatInheritEdgeData = (collections) => {
   return inheritEdges;
 };
 
-const formatEdgeData = (data, targetTables, tableData) => {
+const formatRelationEdgeData = (data, targetTables, tableData) => {
   const edges = [];
   for (let i = 0; i < data.length; i++) {
     if (targetTables.includes(data[i].target)) {
@@ -314,6 +316,10 @@ const formatEdgeData = (data, targetTables, tableData) => {
             },
           },
         ],
+        connector: {
+          name: 'normal',
+          zIndex: 1000,
+        },
       };
       const isuniq = (id) => {
         const targetEdge = edges.find((v) => v.id === id);