import { register } from '@antv/x6-vue-shape';
register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: markRaw(
        renderFn({
            setup(props: any, context: any) {
                const divEl = ref();
                return () => h('div', { ref: divEl, style: 'background: red;margin: 10px;' }, '=====test=====');
            },
        }),
    ),
});

 dnd.value = new Dnd({
        target: graph.value,
        dndContainer: dndBox.value,
        getDropNode(node: any, _options: any) {
            nodeIndex.value = nodeIndex.value + 1;
            const { x, y } = node.position();
            const { width, height } = node.size();
            return graph.value.createNode({
                id: `node-${node.data.data.tableName}`,
                x,
                y,
                width: width,
                height: height,
                ports: ports.value,
                data: {
                    ...node.data,
                    nodeIndex: nodeIndex.value,
                },
                shape: 'custom-vue-node',
            });
        },
    });