chore(react): cleanup connection line example
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user