使用 react-flow-renderer 拖放时复制节点

Question

我正在尝试实现： 原始节点应保持在其位置并对其进行拖放，必须在放置位置创建一个新节点。原件应保持在初始位置。

拖动重复节点应该只是改变它的位置。

import React, { Component, MouseEvent } from 'react'
import ReactFlow from 'react-flow-renderer'

export default class Platform extends Component {

    constructor(props) {
        super(props)
        
    
        this.state = {
             duplicates : [],
             original: [{id: "original", data: {label: 'original', duplicate: false }, position: {x:100, y:100}, style: this.style}]
        }
    }

    lastId = 0
    style = { background: '#ccc', width: 50, height: 50, borderRadius: 50}


    onNodeDragStart = (evt: MouseEvent, node: Node) => {
    }


    onNodeDragStop = (evt: MouseEvent, node: Node) => {
        if(!node.data.duplicate){
            node.id = (this.lastId++).toString(10)
            node.data.duplicate = true
            node.data.label = "duplicate"
            
            this.setState(prevState => ({
                duplicates: prevState.duplicates.concat(node)
            }))
        }
    }

    
    render() {
        console.log("state: ", this.state)
        const elements = this.state.original.concat(this.state.duplicates)
        const graphStyles = { width: '100%', height: '800px' };

        return (
            <div>
                <ReactFlow  onNodeDragStart={this.onNodeDragStart} onNodeDragStop={this.onNodeDragStop}  style={graphStyles} elements={elements}></ReactFlow>
            </div>
        )
    }
}

原始节点

拖放后在放置位置创建一个重复节点。 当我看到组件的状态时，它仍然显示原始位置为position:{x:100, y:100}。但它不在那个位置。

如何在创建重复节点时使原始完整？

Answer 1

您必须添加将更新状态中的位置的代码。默认情况下，此位置仅在创建新元素时使用，但不会更新。您可以通过将 onNodeDragStop 处理程序更改为以下内容来解决此问题：

onNodeDragStop = (evt: MouseEvent, node: Node) => {
    if (!node.data.duplicate) {
        this.setState(prevState => ({
            original: prevState.original.map((n) => {
                if (n.id !== node.id) return node;

                return {
                    ...node,
                    position: {
                        x: node.position.x,
                        y: node.position.y
                    }
                }
            }),
            duplicates: [
                ...prevState.duplicates,
                {
                    ...node,
                    id: (this.lastId++).toString(10),
                    data: {
                        ...node.data,
                        duplicate: true,
                        label: "duplicate"
                    },
                }
            ]
        }))
    }
}

另外，我将您的代码更改为不改变原始节点，而是返回一个更改了一些属性的新节点。