Function Flow

with-react-flow/src/components/flow-chart.tsx:267–331

({
  style = {
    height: "100vh",
    width: "100%",
  },
}: {
  style?: React.CSSProperties;
  dom?: import("expo/dom").DOMProps;
})

};

const Flow = ({
  style = {
    height: "100vh",
    width: "100%",
  },
}: {
  style?: React.CSSProperties;
  dom?: import("expo/dom").DOMProps;
}) => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((els) => addEdge(params, els)),
    []
  );

  return (
    <div style={style}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={(props) => {
          // console.log(props[0]);
          onNodesChange(props);
        }}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        defaultEdgeOptions={defaultEdgeOptions}
      >
        <Background />
        <svg>
          <defs>
            <linearGradient id="edge-gradient">
              <stop offset="0%" stopColor="#9394a0" />
              <stop offset="100%" stopColor="#9394a0" />
            </linearGradient>

            <marker
              id="edge-circle"
              viewBox="-5 -5 10 10"
              refX="0"
              refY="0"
              markerUnits="strokeWidth"
              markerWidth="10"
              markerHeight="10"
              orient="auto"
            >
              <circle
                stroke="#9394a0"
                strokeOpacity="0.75"
                r="2"
                cx="0"
                cy="0"
              />