chore(react): cleanup connection line example

This commit is contained in:
moklick
2024-07-10 12:06:25 +02:00
parent b41b111af6
commit 3744ed9f62
3 changed files with 8 additions and 9 deletions
@@ -1,9 +1,8 @@
import { FC } from 'react'; import { getBezierPath, ConnectionLineComponentProps, InternalNode } from '@xyflow/react';
import { getBezierPath, ConnectionLineComponentProps, Node, InternalNode } from '@xyflow/react';
import { getEdgeParams } from './utils'; import { getEdgeParams } from './utils';
const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fromPosition, toPosition, fromNode }) => { function FloatingConnectionLine({ toX, toY, fromPosition, toPosition, fromNode }: ConnectionLineComponentProps) {
if (!fromNode) { if (!fromNode) {
return null; return null;
} }
@@ -32,6 +31,6 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fr
<circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} /> <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
</g> </g>
); );
}; }
export default FloatingConnectionLine; export default FloatingConnectionLine;
@@ -1,9 +1,9 @@
import { FC, CSSProperties } from 'react'; import { CSSProperties } from 'react';
import { EdgeProps, useStore, getBezierPath } from '@xyflow/react'; import { EdgeProps, useStore, getBezierPath } from '@xyflow/react';
import { getEdgeParams } from './utils'; import { getEdgeParams } from './utils';
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => { function FloatingEdge({ id, source, target, style }: EdgeProps) {
const { sourceNode, targetNode } = useStore((s) => { const { sourceNode, targetNode } = useStore((s) => {
const sourceNode = s.nodeLookup.get(source); const sourceNode = s.nodeLookup.get(source);
const targetNode = s.nodeLookup.get(target); const targetNode = s.nodeLookup.get(target);
@@ -31,6 +31,6 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
<path id={id} className="react-flow__edge-path" d={path} style={style as CSSProperties} /> <path id={id} className="react-flow__edge-path" d={path} style={style as CSSProperties} />
</g> </g>
); );
}; }
export default FloatingEdge; export default FloatingEdge;
@@ -25,7 +25,7 @@ const edgeTypes: EdgeTypes = {
floating: FloatingEdge, floating: FloatingEdge,
}; };
const FloatingEdges = () => { function FloatingEdges() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -49,6 +49,6 @@ const FloatingEdges = () => {
</ReactFlow> </ReactFlow>
</div> </div>
); );
}; }
export default FloatingEdges; export default FloatingEdges;