You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.8 KiB
88 lines
1.8 KiB
import * as React from 'react';
|
|
import * as ReactDom from 'react-dom';
|
|
import { Graph } from '@antv/x6';
|
|
|
|
export default function createGraph(container: HTMLDivElement): Graph {
|
|
return new Graph(container, {
|
|
rotate: false,
|
|
resize: false,
|
|
infinite: true,
|
|
rubberband: true,
|
|
backgroundColor: '#f8f9fa',
|
|
grid: {
|
|
type: 'dot',
|
|
color: '#bcbcbc',
|
|
},
|
|
guide: {
|
|
enabled: true,
|
|
dashed: true,
|
|
stroke: '#ff5500',
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
global: false,
|
|
escape: true,
|
|
},
|
|
selectionPreview: {
|
|
dashed: false,
|
|
strokeWidth: 2,
|
|
},
|
|
nodeStyle: {
|
|
fill: 'rgba(0, 0, 0, 0)',
|
|
stroke: 'none',
|
|
label: false,
|
|
editable: false,
|
|
},
|
|
edgeStyle: {
|
|
edge: 'elbow',
|
|
elbow: 'vertical',
|
|
labelBackgroundColor: '#f8f9fa',
|
|
rounded: true,
|
|
movable: false,
|
|
},
|
|
connection: {
|
|
enabled: true,
|
|
hotspotable: false,
|
|
livePreview: true,
|
|
},
|
|
connectionPreview: {
|
|
stroke: '#1890ff',
|
|
},
|
|
anchor: {
|
|
inductiveSize: 10,
|
|
},
|
|
anchorHighlight: {
|
|
strokeWidth: 16,
|
|
},
|
|
shouldRedrawOnDataChange(): boolean {
|
|
return true;
|
|
},
|
|
getAnchors(cell): [number, number][] | null {
|
|
if (cell === null || cell.data === null) return null;
|
|
|
|
if (cell.data.type === 'start') {
|
|
return [[0.5, 1]];
|
|
}
|
|
|
|
if (cell.data.type === 'end') {
|
|
return [[0.5, 0]];
|
|
}
|
|
|
|
return [
|
|
[0.5, 0],
|
|
[0, 0.5],
|
|
|
|
[1, 0.5],
|
|
[0.5, 1],
|
|
];
|
|
},
|
|
getLabel: (cell): HTMLElement | string => {
|
|
if (cell.isEdge()) {
|
|
const div = document.createElement('div');
|
|
ReactDom.render(<div>{cell.data.label}</div>, div);
|
|
return div;
|
|
}
|
|
return '';
|
|
},
|
|
});
|
|
}
|
|
|