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
This commit is contained in:
katherinehhh 2023-08-21 11:27:48 +08:00 committed by GitHub
parent f70d17c5cd
commit ccf8b651ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 772 additions and 809 deletions

View File

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

View File

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

View File

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

View File

@ -9,8 +9,14 @@
"main": "./dist/server/index.js", "main": "./dist/server/index.js",
"devDependencies": { "devDependencies": {
"@ant-design/icons": "5.x", "@ant-design/icons": "5.x",
"@antv/x6": "^1.9.0", "@antv/x6": "^2.0.0",
"@antv/x6-react-shape": "^1.6.2", "@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/react": "2.x",
"@formily/reactive": "2.x", "@formily/reactive": "2.x",
"@formily/shared": "2.x", "@formily/shared": "2.x",

View File

@ -5,9 +5,6 @@ import { useGCMTranslation } from './utils';
export const GraphCollectionProvider = React.memo((props) => { export const GraphCollectionProvider = React.memo((props) => {
const ctx = useContext(PluginManagerContext); 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 { t } = useGCMTranslation();
const items = useContext(SettingsCenterContext); const items = useContext(SettingsCenterContext);

View File

@ -7,7 +7,11 @@ import {
ShareAltOutlined, ShareAltOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import '@antv/x6-react-shape'; import { register } from '@antv/x6-react-shape';
import { Scroller } from '@antv/x6-plugin-scroller';
import { MiniMap } from '@antv/x6-plugin-minimap';
import { Selection } from '@antv/x6-plugin-selection';
import { Snapline } from '@antv/x6-plugin-snapline';
import { SchemaOptionsContext } from '@formily/react'; import { SchemaOptionsContext } from '@formily/react';
import { import {
APIClientProvider, APIClientProvider,
@ -20,17 +24,16 @@ import {
SchemaComponentOptions, SchemaComponentOptions,
Select, Select,
collection, collection,
css,
cx,
useAPIClient, useAPIClient,
useCollectionManager, useCollectionManager,
useCompile, useCompile,
useCurrentAppInfo, useCurrentAppInfo,
useGlobalTheme, useGlobalTheme,
} from '@nocobase/client'; } from '@nocobase/client';
import { css, cx } from '@emotion/css';
import lodash from 'lodash'; import lodash from 'lodash';
import { useFullscreen } from 'ahooks'; import { useFullscreen } from 'ahooks';
import { Button, ConfigProvider, Input, Layout, Menu, Popover, Switch, Tooltip } from 'antd'; import { Button, ConfigProvider, Input, Layout, Menu, Popover, Switch, Tooltip, App, Spin } from 'antd';
import dagre from 'dagre'; import dagre from 'dagre';
import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react'; import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks'; import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
@ -47,7 +50,6 @@ import {
getPopupContainer, getPopupContainer,
useGCMTranslation, useGCMTranslation,
} from './utils'; } from './utils';
const { drop, groupBy, last, maxBy, minBy, take } = lodash; const { drop, groupBy, last, maxBy, minBy, take } = lodash;
const LINE_HEIGHT = 40; const LINE_HEIGHT = 40;
@ -90,11 +92,10 @@ async function layout(createPositions) {
g.setNode(node.id, { width, height }); g.setNode(node.id, { width, height });
}); });
dagre.layout(g); dagre.layout(g);
targetGraph.freeze();
const dNodes = getGridData(15, g.nodes()); const dNodes = getGridData(15, g.nodes());
dNodes.forEach((arr, row) => { dNodes.forEach((arr, row) => {
arr.forEach((id, index) => { arr.forEach((id, index) => {
const node = targetGraph.getCell(id); const node = targetGraph.getCellById(id);
const col = index % 15; const col = index % 15;
if (node) { if (node) {
const targetPosition = const targetPosition =
@ -119,7 +120,6 @@ async function layout(createPositions) {
edges.forEach((edge) => { edges.forEach((edge) => {
optimizeEdge(edge); optimizeEdge(edge);
}); });
targetGraph.unfreeze();
if (targetNode) { if (targetNode) {
typeof targetNode === 'string' typeof targetNode === 'string'
? targetGraph.positionCell(last(nodes), 'top', { padding: 100 }) ? targetGraph.positionCell(last(nodes), 'top', { padding: 100 })
@ -141,13 +141,13 @@ function optimizeEdge(edge) {
} = edge; } = edge;
const source = edge.getSource(); const source = edge.getSource();
const target = edge.getTarget(); const target = edge.getTarget();
const sorceNodeX = targetGraph.getCell(source.cell).position().x; const sorceNodeX = targetGraph.getCellById(source.cell).position().x;
const targeNodeX = targetGraph.getCell(target.cell).position().x; const targeNodeX = targetGraph.getCellById(target.cell).position().x;
const leftAnchor = connectionType const leftAnchor = connectionType
? { ? {
name: 'topLeft', name: 'topLeft',
args: { args: {
dy: -20, dy: 20,
}, },
} }
: { : {
@ -157,7 +157,7 @@ function optimizeEdge(edge) {
? { ? {
name: 'topRight', name: 'topRight',
args: { args: {
dy: -20, dy: 20,
}, },
} }
: 'right'; : 'right';
@ -181,8 +181,8 @@ function optimizeEdge(edge) {
direction: 'H', direction: 'H',
}); });
} else if (Math.abs(sorceNodeX - targeNodeX) < 100) { } else if (Math.abs(sorceNodeX - targeNodeX) < 100) {
const sourceCell = targetGraph.getCell(source.cell); const sourceCell = targetGraph.getCellById(source.cell);
const targetCell = targetGraph.getCell(target.cell); const targetCell = targetGraph.getCellById(target.cell);
edge.setSource({ edge.setSource({
cell: source.cell, cell: source.cell,
port: source.port, port: source.port,
@ -219,24 +219,6 @@ function optimizeEdge(edge) {
} }
} }
function getNodes(nodes) {
targetGraph.addNodes(nodes);
}
function getEdges(edges) {
edges.forEach((item) => {
if (item.source && item.target) {
targetGraph.addEdge({
...item,
connector: {
name: 'normal',
zIndex: 1000,
},
});
}
});
}
const CollapsedContext = createContext<any>({}); const CollapsedContext = createContext<any>({});
const formatNodeData = () => { const formatNodeData = () => {
const layoutNodes = []; const layoutNodes = [];
@ -280,12 +262,11 @@ const handelResetLayout = () => {
g.setEdge(source.cell, target.cell, {}); g.setEdge(source.cell, target.cell, {});
}); });
dagre.layout(g); dagre.layout(g);
targetGraph.freeze();
const gNodes = g.nodes(); const gNodes = g.nodes();
const nodeWithEdges = take(gNodes, linkNodes.length); const nodeWithEdges = take(gNodes, linkNodes.length);
const nodeWithoutEdges = drop(gNodes, linkNodes.length); const nodeWithoutEdges = drop(gNodes, linkNodes.length);
nodeWithEdges.forEach((id) => { nodeWithEdges.forEach((id) => {
const node = targetGraph.getCell(id); const node = targetGraph.getCellById(id);
const positionId = positions.find((v) => v.collectionName === node.id)?.id; const positionId = positions.find((v) => v.collectionName === node.id)?.id;
if (node) { if (node) {
const pos = g.node(id); const pos = g.node(id);
@ -319,7 +300,7 @@ const handelResetLayout = () => {
return Math.abs(targetGraph.getCellById(v).position().y - maxY) < 50; return Math.abs(targetGraph.getCellById(v).position().y - maxY) < 50;
}); });
const referenceNode: any = targetGraph const referenceNode: any = targetGraph
.getCell(maxBy(yNodes, (k) => targetGraph.getCellById(k).position().x)) .getCellById(maxBy(yNodes, (k) => targetGraph.getCellById(k).position().x))
?.position(); ?.position();
num = Math.round(maxX / 320) || 1; num = Math.round(maxX / 320) || 1;
alternateNum = Math.floor((4500 - (maxX + 100 - referenceNode.x)) / 280); alternateNum = Math.floor((4500 - (maxX + 100 - referenceNode.x)) / 280);
@ -328,7 +309,7 @@ const handelResetLayout = () => {
const alternateNodes = take(nodeWithoutEdges, alternateNum); const alternateNodes = take(nodeWithoutEdges, alternateNum);
rawEntity = getGridData(num, drop(nodeWithoutEdges, alternateNum)); rawEntity = getGridData(num, drop(nodeWithoutEdges, alternateNum));
alternateNodes.forEach((id, index) => { alternateNodes.forEach((id, index) => {
const node = targetGraph.getCell(id); const node = targetGraph.getCellById(id);
if (node) { if (node) {
const calculatedPosition = { x: referenceNode.x + 320 * index + 280, y: referenceNode.y }; const calculatedPosition = { x: referenceNode.x + 320 * index + 280, y: referenceNode.y };
node.position(calculatedPosition.x, calculatedPosition.y); node.position(calculatedPosition.x, calculatedPosition.y);
@ -346,7 +327,7 @@ const handelResetLayout = () => {
} }
rawEntity.forEach((arr, row) => { rawEntity.forEach((arr, row) => {
arr.forEach((id, index) => { arr.forEach((id, index) => {
const node = targetGraph.getCell(id); const node = targetGraph.getCellById(id);
const col = index % num; const col = index % num;
if (node) { if (node) {
const calculatedPosition = { x: col * 325 + minX, y: row * 300 + maxY + 300 }; const calculatedPosition = { x: col * 325 + minX, y: row * 300 + maxY + 300 };
@ -359,7 +340,6 @@ const handelResetLayout = () => {
edges.forEach((edge) => { edges.forEach((edge) => {
optimizeEdge(edge); optimizeEdge(edge);
}); });
targetGraph.unfreeze();
targetGraph.positionCell(nodes[0], 'top-left', { padding: 100 }); targetGraph.positionCell(nodes[0], 'top-left', { padding: 100 });
targetGraph.updatePositionAction(updatePositionData, true); targetGraph.updatePositionAction(updatePositionData, true);
}; };
@ -374,7 +354,8 @@ export const GraphDrawPage = React.memo(() => {
const { t } = useGCMTranslation(); const { t } = useGCMTranslation();
const [collectionData, setCollectionData] = useState<any>([]); const [collectionData, setCollectionData] = useState<any>([]);
const [collectionList, setCollectionList] = useState<any>([]); const [collectionList, setCollectionList] = useState<any>([]);
const { refreshCM } = useCollectionManager(); const [loading, setLoading] = useState(false);
const { refreshCM, collections } = useCollectionManager();
const currentAppInfo = useCurrentAppInfo(); const currentAppInfo = useCurrentAppInfo();
const { const {
data: { database }, data: { database },
@ -410,8 +391,8 @@ export const GraphDrawPage = React.memo(() => {
refreshPositions(); refreshPositions();
} }
}; };
const refreshGM = async () => { const refreshGM = async (collections?) => {
const data = await refreshCM(); const data = collections?.length > 0 ? collections : await refreshCM();
targetGraph.collections = data; targetGraph.collections = data;
targetGraph.updatePositionAction = updatePositionAction; targetGraph.updatePositionAction = updatePositionAction;
const currentNodes = targetGraph.getNodes(); const currentNodes = targetGraph.getNodes();
@ -427,39 +408,8 @@ export const GraphDrawPage = React.memo(() => {
targetGraph = new Graph({ targetGraph = new Graph({
container: document.getElementById('container')!, container: document.getElementById('container')!,
moveThreshold: 0, moveThreshold: 0,
scroller: { virtual: false,
enabled: true,
pannable: true,
padding: { top: 0, left: 500, right: 300, bottom: 400 },
},
selecting: {
enabled: false,
multiple: true,
rubberband: true,
movable: true,
className: 'node-selecting',
modifiers: 'shift',
},
minimap: {
enabled: true,
container: document.getElementById('graph-minimap'),
width: 300,
height: 250,
padding: 10,
graphOptions: {
async: true, async: true,
getCellView(cell) {
if (cell.isNode()) {
return SimpleNodeView;
}
},
createCellView(cell) {
if (cell.isEdge()) {
return null;
}
},
},
},
connecting: { connecting: {
anchor: { anchor: {
name: 'midSide', name: 'midSide',
@ -469,19 +419,9 @@ export const GraphDrawPage = React.memo(() => {
enabled: true, enabled: true,
modifiers: ['ctrl', 'meta'], modifiers: ['ctrl', 'meta'],
}, },
snapline: {
enabled: !0,
},
keyboard: {
enabled: false,
},
clipboard: {
enabled: false,
},
interacting: { interacting: {
magnetConnectable: false, magnetConnectable: false,
}, },
async: true,
preventDefaultBlankAction: true, preventDefaultBlankAction: true,
}); });
targetGraph.connectionType = ConnectionType.Both; targetGraph.connectionType = ConnectionType.Both;
@ -502,32 +442,11 @@ export const GraphDrawPage = React.memo(() => {
}, },
true, true,
); );
Graph.registerNode(
'er-rect', register({
{ shape: 'er-rect',
inherit: 'react-shape', width: NODE_WIDTH,
component: (node) => ( height: LINE_HEIGHT,
<CurrentAppInfoContext.Provider value={currentAppInfo}>
<APIClientProvider apiClient={api}>
<SchemaComponentOptions inherit scope={scope} components={components}>
<CollectionCategroriesProvider {...categoryCtx}>
<CollectionManagerProvider
collections={targetGraph?.collections}
refreshCM={refreshGM}
interfaces={ctx.interfaces}
>
{/* TODO: 因为画布中的卡片是一次性注册进 Graph 的,这里的 theme 是存在闭包里的,因此当主题动态变更时,并不会触发卡片的重新渲染 */}
<ConfigProvider theme={theme}>
<div style={{ height: 'auto' }}>
<Entity node={node} setTargetNode={setTargetNode} targetGraph={targetGraph} />
</div>
</ConfigProvider>
</CollectionManagerProvider>
</CollectionCategroriesProvider>
</SchemaComponentOptions>
</APIClientProvider>
</CurrentAppInfoContext.Provider>
),
ports: { ports: {
groups: { groups: {
list: { list: {
@ -554,8 +473,73 @@ export const GraphDrawPage = React.memo(() => {
refWidth: 100, refWidth: 100,
refHeight: 100, refHeight: 100,
}, },
component: React.forwardRef((props, ref) => {
return (
<CurrentAppInfoContext.Provider value={currentAppInfo}>
<APIClientProvider apiClient={api}>
<SchemaComponentOptions inherit scope={scope} components={components}>
<CollectionCategroriesProvider {...categoryCtx}>
<CollectionManagerProvider
collections={targetGraph?.collections}
refreshCM={refreshGM}
interfaces={ctx.interfaces}
>
{/* TODO: 因为画布中的卡片是一次性注册进 Graph 的,这里的 theme 是存在闭包里的,因此当主题动态变更时,并不会触发卡片的重新渲染 */}
<ConfigProvider theme={theme}>
<div style={{ height: 'auto' }}>
<App>
<Entity {...props} setTargetNode={setTargetNode} targetGraph={targetGraph} />
</App>
</div>
</ConfigProvider>
</CollectionManagerProvider>
</CollectionCategroriesProvider>
</SchemaComponentOptions>
</APIClientProvider>
</CurrentAppInfoContext.Provider>
);
}),
});
targetGraph.use(
new Scroller({
enabled: true,
pannable: true,
padding: { top: 0, left: 500, right: 300, bottom: 400 },
}),
);
targetGraph.use(
new MiniMap({
container: document.getElementById('graph-minimap'),
width: 300,
height: 250,
padding: 10,
graphOptions: {
async: true,
createCellView(cell) {
if (cell.isEdge()) {
return null;
}
if (cell.isNode()) {
return SimpleNodeView;
}
}, },
true, },
}),
);
targetGraph.use(
new Selection({
enabled: false,
multiple: true,
rubberband: true,
movable: true,
className: 'node-selecting',
modifiers: 'shift',
}),
);
targetGraph.use(
new Snapline({
enabled: true,
}),
); );
targetGraph.on('edge:mouseleave', ({ e, edge: targetEdge }) => { targetGraph.on('edge:mouseleave', ({ e, edge: targetEdge }) => {
e.stopPropagation(); e.stopPropagation();
@ -594,7 +578,7 @@ export const GraphDrawPage = React.memo(() => {
handleEdgeUnActive(targetGraph?.activeEdge); handleEdgeUnActive(targetGraph?.activeEdge);
} }
targetGraph.collapseNodes?.map((v) => { targetGraph.collapseNodes?.map((v) => {
const node = targetGraph.getCell(Object.keys(v)[0]); const node = targetGraph.getCellById(Object.keys(v)[0]);
Object.values(v)[0] && node.setData({ collapse: false }); Object.values(v)[0] && node.setData({ collapse: false });
}); });
targetGraph.cleanSelection(); targetGraph.cleanSelection();
@ -699,9 +683,7 @@ export const GraphDrawPage = React.memo(() => {
const renderInitGraphCollection = (rawData) => { const renderInitGraphCollection = (rawData) => {
const { nodesData, edgesData, inheritEdges } = formatData(rawData); const { nodesData, edgesData, inheritEdges } = formatData(rawData);
targetGraph.data = { nodes: nodesData, edges: edgesData }; targetGraph.data = { nodes: nodesData, edges: edgesData };
getNodes(nodesData); targetGraph.fromJSON({ nodes: nodesData, edges: inheritEdges.concat(edgesData) });
getEdges(edgesData);
getEdges(inheritEdges);
layout(saveGraphPositionAction); layout(saveGraphPositionAction);
}; };
@ -784,7 +766,7 @@ export const GraphDrawPage = React.memo(() => {
}; };
setTimeout(() => { setTimeout(() => {
renderDiffEdges(diffEdges.concat(diffInheritEdge)); renderDiffEdges(diffEdges.concat(diffInheritEdge));
}); }, 300);
}; };
const handleSearchCollection = (e) => { const handleSearchCollection = (e) => {
@ -1012,14 +994,18 @@ export const GraphDrawPage = React.memo(() => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoading(true);
refreshPositions() refreshPositions()
.then(() => { .then(async () => {
refreshGM(); await refreshGM(collections);
setLoading(false);
}) })
.catch((err) => { .catch((err) => {
setLoading(false);
throw err; throw err;
}); });
}, []); }, []);
const loadCollections = async () => { const loadCollections = async () => {
return targetGraph.collections?.map((collection: any) => ({ return targetGraph.collections?.map((collection: any) => ({
label: compile(collection.title), label: compile(collection.title),
@ -1029,6 +1015,7 @@ export const GraphDrawPage = React.memo(() => {
return ( return (
<Layout> <Layout>
<div className={styles.graphCollectionContainerClass}> <div className={styles.graphCollectionContainerClass}>
<Spin spinning={loading}>
<CollectionManagerProvider collections={targetGraph?.collections} refreshCM={refreshGM}> <CollectionManagerProvider collections={targetGraph?.collections} refreshCM={refreshGM}>
<CollapsedContext.Provider value={{ collectionList, handleSearchCollection }}> <CollapsedContext.Provider value={{ collectionList, handleSearchCollection }}>
<div className={cx(styles.collectionListClass)}> <div className={cx(styles.collectionListClass)}>
@ -1382,6 +1369,7 @@ export const GraphDrawPage = React.memo(() => {
className={styles.graphMinimap} className={styles.graphMinimap}
style={{ width: '300px', height: '250px', right: '10px', bottom: '20px', position: 'fixed' }} style={{ width: '300px', height: '250px', right: '10px', bottom: '20px', position: 'fixed' }}
></div> ></div>
</Spin>
</div> </div>
</Layout> </Layout>
); );

View File

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

View File

@ -1,32 +1,21 @@
import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons'; import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
import '@antv/x6-react-shape';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { css } from '@emotion/css';
import { import {
Action,
Checkbox,
CollectionCategroriesContext, CollectionCategroriesContext,
CollectionField,
CollectionProvider, CollectionProvider,
Form,
FormItem,
Formula,
Grid,
Input,
InputNumber,
Radio,
ResourceActionProvider,
SchemaComponent, SchemaComponent,
SchemaComponentProvider, SchemaComponentProvider,
Select, Select,
collection, collection,
css,
useCollectionManager, useCollectionManager,
useCompile, useCompile,
useCurrentAppInfo, useCurrentAppInfo,
useRecord, useRecord,
} from '@nocobase/client'; } from '@nocobase/client';
import lodash from 'lodash'; 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 React, { useContext, useRef, useState } from 'react';
import { import {
useAsyncDataSource, useAsyncDataSource,
@ -46,219 +35,34 @@ import { FieldSummary } from './FieldSummary';
import { OverrideFieldAction } from './OverrideFieldAction'; import { OverrideFieldAction } from './OverrideFieldAction';
import { ViewFieldAction } from './ViewFieldAction'; import { ViewFieldAction } from './ViewFieldAction';
const Entity: React.FC<{ const OperationButton: any = React.memo((props: any) => {
node?: Node | any; const { property, loadCollections, collectionData, setTargetNode, node, handelOpenPorts, title, name } = props;
setTargetNode: Function | any; const isInheritField = !(property.collectionName !== name);
targetGraph: any; const options = useContext(SchemaOptionsContext);
}> = (props) => {
const { styles } = useStyles();
const { node, setTargetNode, targetGraph } = props;
const {
store: {
data: { title, name, item, attrs, select },
},
id,
} = node;
const { const {
data: { database }, data: { database },
} = useCurrentAppInfo(); } = useCurrentAppInfo();
const collectionData = useRef();
const categoryData = useContext(CollectionCategroriesContext);
collectionData.current = { ...item, title, inherits: item.inherits && new Proxy(item.inherits, {}) };
const { category } = item;
const compile = useCompile();
const loadCollections = async (field: any) => {
return targetGraph.collections?.map((collection: any) => ({
label: compile(collection.title),
value: collection.name,
}));
};
const loadCategories = async () => {
return categoryData?.data.map((item: any) => ({
label: compile(item.name),
value: item.id,
}));
};
const portsProps = {
targetGraph,
collectionData,
setTargetNode,
node,
loadCollections,
};
return (
<div
className={styles.entityContainer}
style={{ boxShadow: attrs?.boxShadow, border: select ? '2px dashed #f5a20a' : 0 }}
>
{category.map((v, index) => {
return (
<Badge.Ribbon
key={index}
color={v.color}
style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
placement="start"
/>
);
})}
<div
className={styles.headClass}
style={{ background: attrs?.hightLight ? '#1890ff' : null, paddingTop: category.length * 3 }}
>
<span className={styles.tableNameClass}>{compile(title)}</span>
<div className={styles.tableBtnClass}>
<SchemaComponentProvider>
<CollectionNodeProvder setTargetNode={setTargetNode} node={node}>
<CollectionProvider collection={collection}>
<SchemaComponent
scope={{
useUpdateCollectionActionAndRefreshCM,
useCancelAction,
loadCollections,
loadCategories,
useAsyncDataSource,
Action,
DeleteOutlined,
enableInherits: database?.dialect === 'postgres',
}}
components={{
Action,
EditOutlined,
FormItem,
CollectionField,
Input,
Form,
Select,
EditCollectionAction,
Checkbox,
}}
schema={{
type: 'object',
properties: {
update: {
type: 'void',
title: '{{ t("Edit") }}',
'x-component': 'EditCollectionAction',
'x-component-props': {
type: 'primary',
item: collectionData.current,
className: 'btn-edit-in-head',
},
},
delete: {
type: 'void',
'x-action': 'destroy',
'x-component': 'Action',
'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: () => useDestroyActionAndRefreshCM({ name, id }),
},
},
},
}}
/>
</CollectionProvider>
</CollectionNodeProvder>
</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) => { const useNewId = (prefix) => {
return `${prefix || ''}${uid()}`; return `${prefix || ''}${uid()}`;
}; };
const CollectionConten = (data) => { // 获取当前字段列表
const { type, name, primaryKey, allowNull, autoIncrement } = data; const useCurrentFields = () => {
return ( const record = useRecord();
<div className={styles.collectionPopoverClass}> const { getCollectionFields } = useCollectionManager();
<div className="field-content"> const fields = getCollectionFields(record.collectionName || record.name) as any[];
<div> return fields;
<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 ( return (
<div className="field-operator"> <div className="field-operator">
<SchemaComponentProvider <SchemaComponentProvider
components={{ components={{
FormItem, Select: (props) => <Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />,
CollectionField,
Input,
Form,
ResourceActionProvider,
Select: (props) => (
<Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
),
Checkbox,
Radio,
InputNumber,
Grid,
FieldSummary, FieldSummary,
Action,
EditOutlined,
DeleteOutlined,
AddFieldAction, AddFieldAction,
OverrideFieldAction, OverrideFieldAction,
ViewFieldAction, ViewFieldAction,
Dropdown, EditFieldAction,
Formula, ...options.components,
}} }}
scope={{ scope={{
useAsyncDataSource, useAsyncDataSource,
@ -269,6 +73,7 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
useValuesFromRecord, useValuesFromRecord,
useUpdateCollectionActionAndRefreshCM, useUpdateCollectionActionAndRefreshCM,
isInheritField, isInheritField,
...options.scope,
}} }}
> >
<CollectionNodeProvder <CollectionNodeProvder
@ -298,7 +103,7 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
update: { update: {
type: 'void', type: 'void',
'x-action': 'update', 'x-action': 'update',
'x-component': EditFieldAction, 'x-component': 'EditFieldAction',
'x-visible': '{{isInheritField}}', 'x-visible': '{{isInheritField}}',
'x-component-props': { 'x-component-props': {
item: { item: {
@ -365,31 +170,53 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
</SchemaComponentProvider> </SchemaComponentProvider>
</div> </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 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';
}
}; };
const isCollapse = collapse && data?.collapse;
return ( return (
<div className="body">
{portsData['initPorts']?.map((property) => {
return (
property.uiSchema && (
<Popover <Popover
content={CollectionConten(property)} content={CollectionConten(property)}
getPopupContainer={getPopupContainer} getPopupContainer={getPopupContainer}
@ -398,9 +225,7 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
title={ title={
<div> <div>
{compile(property.uiSchema?.title)} {compile(property.uiSchema?.title)}
<span style={{ color: '#ffa940', float: 'right' }}> <span style={{ color: '#ffa940', float: 'right' }}>{compile(getInterface(property.interface)?.title)}</span>
{compile(getInterface(property.interface)?.title)}
</span>
</div> </div>
} }
key={property.id} key={property.id}
@ -414,60 +239,68 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
background: background:
targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null, targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
}} }}
onMouseEnter={() => {
setIsHovered(true);
}}
onMouseLeave={() => setIsHovered(false)}
> >
<div className="name"> <div className="name">
<Badge color={typeColor(property)} /> <Badge color={typeColor(property)} />
{compile(property.uiSchema?.title)} {compile(property.uiSchema?.title)}
</div> </div>
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div> <div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
<OperationButton property={property} /> {isHovered && <OperationButton property={property} {...operatioBtnProps} />}
</div> </div>
</Popover> </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"> <div className="morePorts">
{isCollapse && {isCollapse &&
portsData['morePorts']?.map((property) => { portsData['morePorts']?.map((property) => {
return ( return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
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> </div>
<a <a
@ -495,4 +328,127 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
); );
}); });
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: {
data: { title, name, item, attrs, select },
},
id,
} = node;
const {
data: { database },
} = useCurrentAppInfo();
const collectionData = useRef();
const categoryData = useContext(CollectionCategroriesContext);
collectionData.current = { ...item, title, inherits: item.inherits && new Proxy(item.inherits, {}) };
const { category } = item;
const compile = useCompile();
const loadCollections = async (field: any) => {
return targetGraph.collections?.map((collection: any) => ({
label: compile(collection.title),
value: collection.name,
}));
};
const loadCategories = async () => {
return categoryData?.data.map((item: any) => ({
label: compile(item.name),
value: item.id,
}));
};
const portsProps = {
targetGraph,
collectionData,
setTargetNode,
node,
loadCollections,
};
return (
<div
className={styles.entityContainer}
style={{ boxShadow: attrs?.boxShadow, border: select ? '2px dashed #f5a20a' : 0 }}
>
{category.map((v, index) => {
return (
<Badge.Ribbon
key={index}
color={v.color}
style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
placement="start"
/>
);
})}
<div
className={styles.headClass}
style={{ background: attrs?.hightLight ? '#1890ff' : null, paddingTop: category.length * 3 }}
>
<span className={styles.tableNameClass}>{compile(title)}</span>
<div className={styles.tableBtnClass}>
<SchemaComponentProvider>
<CollectionNodeProvder setTargetNode={setTargetNode} node={node}>
<CollectionProvider collection={collection}>
<SchemaComponent
scope={{
useUpdateCollectionActionAndRefreshCM,
useCancelAction,
loadCollections,
loadCategories,
useAsyncDataSource,
enableInherits: database?.dialect === 'postgres',
}}
components={{
EditOutlined,
EditCollectionAction,
...options.components,
}}
schema={{
type: 'object',
properties: {
update: {
type: 'void',
title: '{{ t("Edit") }}',
'x-component': 'EditCollectionAction',
'x-component-props': {
type: 'primary',
item: collectionData.current,
className: 'btn-edit-in-head',
},
},
delete: {
type: 'void',
'x-action': 'destroy',
'x-component': 'Action',
'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: () => useDestroyActionAndRefreshCM({ name, id }),
},
},
},
}}
/>
</CollectionProvider>
</CollectionNodeProvder>
</SchemaComponentProvider>
</div>
</div>
<PortsCom {...portsProps} />
</div>
);
};
export default Entity; export default Entity;

View File

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