Examples are not beginner friendly

[Microwave-WYB]

Describe the Bug

The demo code on https://reactflow.dev/docs/examples/overview/ does not run correctly on the latest version because of the missing width and height

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Initialize project with npm init react-app <app_name>
2. Copy the code for App.js and initial-elements.js from https://reactflow.dev/docs/examples/overview/
3. npm start

Expected behavior

What's shown in the feature overview

Screenshots or Videos

The app worked after adding the height

Platform

• OS: Linux
• Browser: Chrome/Firefox
• Version: Chrome 103.0.5060.53 , Firefox 103.0.2

Additional context

No response

[moklick]

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.

[raarts]

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.

[bcakmakoglu]

@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;
}

[raarts]

@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.