jerosoler / Drawflow

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

Dynamic addNodeToDrawFlow #489

Closed maxkaoppp closed 2 years ago

maxkaoppp commented 2 years ago

Hi, been using this for a project and it's been good. But a requirement was added on our side of the project. Is there a way to add the drawflow-node dynamically? In our case, we get data from database and create drag-drawflow div according to data. But now have stuck with adding the drawflow-node by drag-drawflow div that we created dynamically.

jerosoler commented 2 years ago

addNodeToDrawFlow not native function is the demo function.

You can use addNode. To add anything dynamically.

maxkaoppp commented 2 years ago

Thanks a lot for your quick response.But I am wondering how to add pos_x and pos_y. Can you please let me know how to add pos_x and pos_y dynamically? image (1)

jerosoler commented 2 years ago

pos_x and pos_y is based on event (ev.clientX, ev.clientY)

The code:

  function drop(ev) {
      if (ev.type === "touchend") {
        var parentdrawflow = document.elementFromPoint( mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow");
        if(parentdrawflow != null) {
          addNodeToDrawFlow(mobile_item_selec, mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY);
        }
        mobile_item_selec = '';
      } else {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("node");
        addNodeToDrawFlow(data, ev.clientX, ev.clientY);
      }

    }

    function addNodeToDrawFlow(name, pos_x, pos_y) {
      if(editor.editor_mode === 'fixed') {
        return false;
      }
      pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
      pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
...

I think you are not understanding how it works.

For what you want to do, I think you could add the "default" in the "switch" to add the new nodes dynamically.

maxkaoppp commented 2 years ago

Thanks a lot this is working as expected.