Skip to main content

Floating edges

A smart equivalent of React Flow's floating edges example. Instead of fixed handle positions, a floating edge computes source/target connection points dynamically from node geometry, attaching to the nearest border facing the other node, then routes around obstacles.

SmartFloatingEdge​

import { SmartFloatingEdge } from "@tisoap/react-flow-smart-edge";

const edgeTypes = {
  smartFloating: SmartFloatingEdge,
};

With createSmartEdge​

The floating option works with any preset:

import { createSmartEdge } from "@tisoap/react-flow-smart-edge";

const edgeTypes = {
  floatingStep: createSmartEdge("step", { floating: true, gridRatio: 5 }),
};

See also: floating option.

Floating connection line​

Preview a smart floating line while dragging a new connection:

import {
  SmartFloatingEdge,
  SmartFloatingConnectionLine,
} from "@tisoap/react-flow-smart-edge";

const edgeTypes = { smartFloating: SmartFloatingEdge };

function Flow() {
  return (
    <ReactFlow
      edgeTypes={edgeTypes}
      connectionLineComponent={SmartFloatingConnectionLine}
    />
  );
}

getFloatingEdgeParams​

For fully custom edges, compute floating connection points with getFloatingEdgeParams.