how to handle node selected and dragging in editor .

Co-Maheshh commented 1 year ago

i am trying to opening a model when selecting a node. model is opened but when i am trying to drag node that time also node is selected so again model is opened. so how we can handle node selected and dragging on editor.

jerosoler commented 1 year ago

Detec with node is drag:

    editor.on("mouseMove", () => {
        if(editor.drag) {
            console.log("NODE DRAG");
        }
    });

Co-Maheshh commented 1 year ago

can we drag a particuler node without selecting becouse when we try to drag node that time we need to select that node then that time model is opened. but i need to open only when we select node, how we can achieve this using if else condition ?

jerosoler commented 1 year ago

Try:

    let x_click = 0;
    let y_click = 0;
    editor.on("clickEnd", (e) => {
        x_click = editor.pos_x;
        y_click = editor.pos_y;
    })
    editor.on("mouseUp", (e) => {
        if(x_click === editor.pos_x && y_click === editor.pos_y && editor.node_selected !== null) {
            console.log("Open Modal");
        }
    });

Co-Maheshh commented 1 year ago

I tried like this

let x_click = 0; let y_click = 0; mythis.editor.on("clickEnd", (e) => { x_click = mythis.editor.pos_x; y_click = mythis.editor.pos_y; }) debugger mythis.editor.on("mouseUp", (e) => { if (x_click === mythis.editor.pos_x && y_click === mythis.editor.pos_y && mythis.editor.node_selected !== null) { console.log("Open Modal"); mythis.openModal("Email");

});

but still its not working.

jerosoler commented 1 year ago

View complete code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
  <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>

<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }

</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();    

    editor.addNode('aaa', 1, 3, 300, 200, 'aaa', {}, `aaa` );
    editor.addNode('bbb', 1, 0, 850, 200, 'bbb', {}, `bbb` );
    editor.addNode('ccc', 1, 1, 850, 370, 'ccc', {}, `ccc `);
    editor.addConnection(1, 2, 'output_1', 'input_1');

    let x_click = 0;
    let y_click = 0;
    editor.on("clickEnd", (e) => {
        x_click = editor.pos_x;
        y_click = editor.pos_y;
    })
    editor.on("mouseUp", (e) => {
        if(x_click === editor.pos_x && y_click === editor.pos_y && editor.node_selected !== null) {
            alert("OPEN");
        }
    });
</script>
</body>
</html>

Does your code return any errors?

Co-Maheshh commented 1 year ago

No i am not getting any error. but when trying to drag node in editor that time mouseUp is not detected. is it work on angular ?

jerosoler commented 1 year ago

It has to work is vanilla javascript. Maybe it depends on your implementation in angular.

View other themes with angular: https://github.com/jerosoler/Drawflow/issues?q=is%3Aissue+label%3AAngular+

Co-Maheshh commented 1 year ago

ok.this is what i am added like

    this.editor = new Drawflow(this.drawflowDiv.nativeElement);
    this.editor.reroute = true;
    this.editor.reroute_fix_curvature = true;
    this.editor.force_first_input = false;       
this.editor.start();
    this.editor.addNode('Start', 0,1
       ,120, 150, "",{},` <div class="row" >

play_arrow

Start

`);

so here i have added one start node in editor. when i am try to dragging that time clickEnd event is detected but not after mouseUp is not detected.

jerosoler commented 1 year ago

I have not worked with angular. Let's see if someone can help you.

jerosoler / Drawflow

how to handle node selected and dragging in editor . #564