Node creation by click and draw / drag about xyflow HOT 5 CLOSED

Interesting, how would we go about rendering the node on the canvas like this while cursor down? Just concat into the nodes list?

Seems potentially quite render intensive to have reactflow re-render the entire list of nodes for every frame of the drag?

I will definitely have a try and report back here, just couldn't find any references to a solution to this so best case we just document a solution in this issue!

from xyflow.

Okay yep you're right @peterkogo this is possible in userland.

there are some weird visual glitches, not sure what that's about but seemingly canvas related? (see the persistent red lines that stick around sometimes)

Not sure how well it would respond to a more expensive nodes list given this may force ReactFlow to do quite a bit of rendering internally, but it definitely works :)

Key gubbins from my prototyping:

const reactFlowInstance = useReactFlow() // obviously need to wrap the component in ReactFlowProvider to hoist this value upward
const [drawing, setDrawing] = useState<false | { x: number; y: number }>(
  false,
)
const [drawingPosition, setDrawingPosition] = useState<
  false | { x: number; y: number }
>(false)

return <ReactFlow
  nodes={
    drawing && drawingPosition
      ? nodes.concat({
          id: 'DRAWING',
          type: 'box',
          position: {
            x: Math.min(drawingPosition.x, drawing.x),
            y: Math.min(drawingPosition.y, drawing.y),
          },
          data: { },
          style: {
            width: Math.abs(drawingPosition.x - drawing.x),
            height: Math.abs(drawingPosition.y - drawing.y),
          },
        })
      : nodes
  }
  selectionOnDrag={false}
  onPointerDown={(e) => {
    const element = e.target as HTMLElement | undefined
    if (element?.className.includes('react-flow__pane')) {
      const x = e.clientX
      const y = e.clientY

      const position = reactFlowInstance.screenToFlowPosition({
        x,
        y,
      })

      setDrawing(position)
      setDrawingPosition(position)

      console.log('DOWN', e.target, e.clientX, e.clientY)
    }
  }}
  onPointerLeave={() => {
    setDrawing(false)
    setDrawingPosition(false)
  }}
  onPointerMove={(e) => {
    if (drawing) {
      const x = e.clientX
      const y = e.clientY

      const position = reactFlowInstance.screenToFlowPosition({
        x,
        y,
      })

      setDrawingPosition(position)
    }
  }}
  onPointerUp={(e) => {
    console.log('UP', e.target, e.clientX, e.clientY)
    setDrawing(false)
    setDrawingPosition(false)
  }}
/>

from xyflow.

As an addition you can also just add a CustomNode onPointerDown, and have an absolutely positioned child of the CustomNode that you resize. This should not trigger dimension updates inside ReactFlow and might be a bit more efficient.

You can also render a custom component inside the viewport through the portal. (there is an extra ViewportPortal you can use in v12 for this, but it is essentially the same thing)
With this approach you can bail out of react flows logic while resizing.

from xyflow.

Why is this currently not achievable in user-land?
If you set panOnDrag to false whenever your node creation is happening and start listening to pointerdown & pointermove events on the React Flow dom node you should be able to achieve this

from xyflow.

Thanks for the extra details! Those do both sound like better options. Looking forward to v12 as there are so many great improvements there! 🙂

from xyflow.