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.
69 lines
2.1 KiB
69 lines
2.1 KiB
import * as React from 'react';
|
|
import { Graph, Dnd } from '@antv/x6';
|
|
import CellMap from '../components/cells';
|
|
import { DataItem } from '../data/cells';
|
|
|
|
export default function patchDnd(
|
|
container: HTMLDivElement | null,
|
|
graph: Graph,
|
|
cellData: DataItem[]
|
|
): void {
|
|
if (!container) return;
|
|
|
|
(container.childNodes as NodeListOf<HTMLElement>).forEach((node, index) => {
|
|
const itemData = cellData[index];
|
|
const dnd = new Dnd<DataItem>(node, {
|
|
data: itemData,
|
|
getGraph: (): Graph => graph,
|
|
createDragElement: ({ data }): HTMLDivElement => {
|
|
const elem = document.createElement('div');
|
|
if (typeof data === 'undefined') return elem;
|
|
|
|
const { width, height, scale } = data.style;
|
|
elem.style.width = `${width * scale}px`;
|
|
elem.style.height = `${height * scale}px`;
|
|
elem.style.border = '1px dashed #000';
|
|
elem.style.cursor = 'move';
|
|
return elem;
|
|
},
|
|
createPreviewElement: ({ data }): HTMLDivElement => {
|
|
const elem = document.createElement('div');
|
|
if (typeof data === 'undefined') return elem;
|
|
|
|
const { width, height, scale } = data.style;
|
|
elem.style.width = `${width * scale}px`;
|
|
elem.style.height = `${height * scale}px`;
|
|
elem.style.border = '1px dashed #000';
|
|
elem.style.cursor = 'move';
|
|
return elem;
|
|
},
|
|
});
|
|
|
|
dnd.on('dragPrepare', ({ dragElement }) => {
|
|
dragElement.style.margin = '0';
|
|
});
|
|
|
|
dnd.on('drop', ({ data, targetPosition }) => {
|
|
if (typeof data === 'undefined') return;
|
|
|
|
const { width, height, scale } = data.style;
|
|
const { x, y } = targetPosition;
|
|
const Cell = CellMap[data.type];
|
|
const cell = graph.addNode({
|
|
x,
|
|
y,
|
|
data,
|
|
width: width * scale,
|
|
height: height * scale,
|
|
shape: 'react',
|
|
component: (newData) => {
|
|
if (!cell) return null;
|
|
const { label } = newData.data;
|
|
return <Cell label={label} scale={scale} />;
|
|
},
|
|
});
|
|
|
|
graph.unSelectCells(graph.getSelectedCells()).selectCell(cell);
|
|
});
|
|
});
|
|
}
|
|
|