Examples are not beginner friendly about web HOT 4 OPEN

There is a little button "Open in Codesandbox" in the bottom right corner that shows the whole code of that example: https://codesandbox.io/s/zbu68r?file=/App.js&from-sandpack=true. But you have a good point here. It's not very beginner friendly. We will keep this open for now.

from web.

Adding to this: a page on coordinates (both pixel as well as react-flow) and width/height and how to retrieve them.
Both when inside a custom node as well a in a ReactFlow handler. I have spent a lot of time already with react-flow, and this keeps stopping me in my tracks.

(latest hurdles for me:

• inside a custom node draghandler the mouse coordinates are easy to get, but getting the reactflow outer bounds is hard from there, even though width+height are in the store.
• getting the coordinates of the custom node or width/height in pixels is challenging too).

A page dedicated to this subject with code examples would be very helpful for beginners.

Another possible help page might be on strategies for handling dynamic re-layouting (for example while an textarea field inside a custom node is edited, growing and growing to overlap other nodes).

Both typescript and plain JS code for all examples would also be great I think.

from web.

@raarts FYI: Custom Nodes receive xPos and yPos as props so you should be able to fetch the coordinates from there pretty easily :)

// props that get passed to a custom node
export interface NodeProps<T = any> {
  id: string;
  type: string;
  data: T;
  selected: boolean;
  isConnectable: boolean;
  xPos: number;
  yPos: number;
  dragging: boolean;
  zIndex: number;
  targetPosition?: Position;
  sourcePosition?: Position;
  dragHandle?: string;
}

from web.

@bcakmakoglu Yes, I know, but I needed it in browser pixels so I gathered I needed something like a reverse project() function. There isn't one, so I ended up just copying it out of the reactflow sourcecode, and reverse it myself.

from web.