search

jerosoler / drawflow-vue3-example

Drawflow vue 3 example
https://jerosoler.github.io/drawflow-vue3-example/
MIT License
22 stars 15 forks source link

Calculation of posx and posy #1

Closed samucorea closed 2 years ago

samucorea commented 2 years ago

Hi @jerosoler,

I'd like to know, in the function addNodeToDrawFlow in drawflow.vue, where does the calculation of posx and posy come from?

 pos_x = pos_x * ( editor.value.precanvas.clientWidth / (editor.value.precanvas.clientWidth * editor.value.zoom)) - (editor.value.precanvas.getBoundingClientRect().x * ( editor.value.precanvas.clientWidth / (editor.value.precanvas.clientWidth * editor.value.zoom)));
pos_y = pos_y * ( editor.value.precanvas.clientHeight / (editor.value.precanvas.clientHeight * editor.value.zoom)) - (editor.value.precanvas.getBoundingClientRect().y * ( editor.value.precanvas.clientHeight / (editor.value.precanvas.clientHeight * editor.value.zoom)));

Thanks

jerosoler commented 2 years ago

Hi @samucorea

They come from the event caused in browser drop (dragAndDrop event on drop item in the canvas), here you can see the function.

    const 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);
      }
    }

It is called here:

<div id="drawflow" @drop="drop($event)" @dragover="allowDrop($event)"></div>

Helped you?

samucorea commented 2 years ago

What I mean is, when you pass the ev.clientX and ev.clientY to the addNodeToDrawFlow function, you re-assign the posx and posy values based on some sort of calculation:

  function addNodeToDrawFlow(name, pos_x, pos_y) {
      pos_x = pos_x * ( editor.value.precanvas.clientWidth / (editor.value.precanvas.clientWidth * editor.value.zoom)) - (editor.value.precanvas.getBoundingClientRect().x * ( editor.value.precanvas.clientWidth / (editor.value.precanvas.clientWidth * editor.value.zoom))); 
//where does this multiplication come from?
      pos_y = pos_y * ( editor.value.precanvas.clientHeight / (editor.value.precanvas.clientHeight * editor.value.zoom)) - (editor.value.precanvas.getBoundingClientRect().y * ( editor.value.precanvas.clientHeight / (editor.value.precanvas.clientHeight * editor.value.zoom)));
//and this one too

      const nodeSelected = listNodes.find(ele => ele.item == name);
      editor.value.addNode(name, nodeSelected.input,  nodeSelected.output, pos_x, pos_y, name, {}, name, 'vue');

    }
jerosoler commented 2 years ago

The re-assigned calculation is based on editor: