jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.78k stars 741 forks source link

click event on node click #511

Closed Sri-5555 closed 2 years ago

Sri-5555 commented 2 years ago

Hi @jerosoler, I am trying get the click event on node click. Adding click event it triggers when ever we drag and drop the node. how to restrict the event trigger while drag & drop. trigger only on clicking the node

jerosoler commented 2 years ago

Hello!

Try:

    editor.on("clickEnd", (e) => {
        if(e.target.classList[0] === 'parent-node' || e.target.classList[0] === 'drawflow-node' || e.target.closest(".drawflow_content_node")) {
            console.log("Click on node");
            console.log(e);
        }
    })
Sri-5555 commented 2 years ago

@jerosoler, Thanks for the quick solution, this works on all the click event. For dragging the node and even for drop the node also this event triggers.

My scenario is need to open a model popup on clicking the node. but it should not open while dragging and dropping the node. Can you please help me with this.

jerosoler commented 2 years ago

Try:

    let isNodeDrag = false;
    let isNodeDrag_x = 0;
    let isNodeDrag_y = 0;
    editor.on("clickEnd", (e) => {
        isNodeDrag = false;
        isNodeDrag_x = editor.pos_x;
        isNodeDrag_y = editor.pos_y;
    })

    editor.on("mouseUp", (e) => {
        if(e.target.classList[0] === 'parent-node' || e.target.classList[0] === 'drawflow-node' || e.target.closest(".drawflow_content_node")) {    
            if(isNodeDrag_x === editor.pos_x && isNodeDrag_y === editor.pos_y) {
            isNodeDrag = true;
                console.log(isNodeDrag)
            }
        }
    })
Sri-5555 commented 2 years ago

Thanks @jerosoler, the above piece of code works.