Prevent the Node position (x and y) to become negative

[peterstahl]

Hi
Is there an option/way to prevent the position of nodes from becoming negative. So that nodes can not cause parent-drawflow overflow on top and left.

[jerosoler]

• Check this solution:

• this solution possible to limit the area? #317

• Other solution is this event mouseMove:

<div id="drawflow"></div>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.on("mouseMove",function(position) {
      if(editor.drag) {
        if(editor.drawflow.drawflow[editor.module].data[editor.ele_selected.id.slice(5)].pos_x <= 0) {
          editor.drawflow.drawflow[editor.module].data[editor.ele_selected.id.slice(5)].pos_x = 0;
          editor.ele_selected.style.left = '0px';
        }
        if(editor.drawflow.drawflow[editor.module].data[editor.ele_selected.id.slice(5)].pos_y <= 0) {
          editor.drawflow.drawflow[editor.module].data[editor.ele_selected.id.slice(5)].pos_y = 0;
          editor.ele_selected.style.top = '0px';
        }
      }
	  })
    editor.start();
    editor.addNode("item", 1, 1, 700, 400, "", {}, '<input type="text"></input>');
    editor.addNode("item", 1, 1, 900, 700, "", {}, '<textarea></textarea>');
    editor.addNode("item", 1, 1, 500, 550, "", {}, 'C');
</script>

[peterstahl]

Hi jerosoler
That was quick, thanks a lot. It works perfect when one single node is dragged around. Can you show me a way to have the same restriction when I move the whole chart?
Thank you

[jerosoler]

It would be something like this:

editor.on("mouseMove", function(pos) {
      if(editor.editor_selected) {
        const actualX =  editor.canvas_x + (-(editor.pos_x - pos.x))
        const actualY = editor.canvas_y + (-(editor.pos_y - pos.y))
        if(actualX >= 0 || actualY >= 0) {
          let x = 0;
          let y = 0;
          if(actualX < 0) {
            x = actualX;
          }
          if(actualY < 0) {
            y = actualY;
          }
          
          editor.precanvas.style.transform = "translate("+x+"px, "+y+"px) scale("+editor.zoom+")";
        }
      }
    })