How to place a new node inside viewing are of the flow.

[tpoxa]

Sometimes my users pan to some area, and adding a node makes it appear in a non-visible location.
I thought dimensions objects might help me to understand the position of a pan, but it looks like only dimensions.
I might be missing it in the documentation...
Thanks.

[bcakmakoglu]

Without some code example I can't really tell what you're asking of me.
If you want to know what the currently visible viewport is, you can check the viewport prop on the store.
It will give you an x, y and zoom value.

So your visible area is something like x + the width of your container, y + the height of your container.

[bcakmakoglu]

Maybe you're looking for a projection instead (translating mouse event x + y positions to graph coordinates).

Check the DnD example for that.

const onDrop = (event) => {
  const type = event.dataTransfer?.getData('application/vueflow')

  // using a projection to translate coordinates
  const position = project({ x: event.clientX - 40, y: event.clientY - 18 })

  const newNode = {
    id: getId(),
    type,
    position,
    label: `${type} node`,
  }
  addNodes([newNode])
}

[tpoxa]

Thank you. viewport is it.