How to create the position of data port

[yahengqi]

Canvas.wrapper.tsx onDrop={ (e) => { const data = JSON.parse(e.dataTransfer.getData(REACT_FLOW_CHART)) if (data) { onCanvasDrop({ data, position: { x: e.clientX - (position.x + offsetX), y: e.clientY - (position.y + offsetY), }}) } } }

[yahengqi]

How does data create the positions of ports?

[ghost]

this issues can help you.

https://github.com/MrBlenny/react-flow-chart/issues/61 https://codesandbox.io/s/wandering-tree-x5gep

[yahengqi]

Port1, can I define position by myself

[yahengqi]

onDrop={(e) => { console.log(e.dataTransfer.getData(REACT_FLOW_CHART)) const data = JSON.parse(e.dataTransfer.getData(REACT_FLOW_CHART)) console.log(data) if (data) { let elementOffset; if (this.GraphicalCanvasRef.current) { const { x, y } = this.GraphicalCanvasRef.current.getBoundingClientRect() elementOffset = { x, y } } else { elementOffset = { x: 0, y: 0 } } onCanvasDrop({ data, position: { x: e.clientX - (position.x + elementOffset.x), y: e.clientY - (position.y + elementOffset.y), } }) } }}

There is no position in the above config, but there is a position in the following config ports. I want to know why