fb24205da0
- Added a custom connection line component with animation for improved visual feedback during node interactions. - Implemented CSS animations for temporary connection lines, enhancing the user experience in the canvas. - Refactored edge creation and removal logic to support optimistic updates, improving performance during node manipulations. - Introduced a utility function to compute edge reconnections after node deletions, streamlining edge management.
73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ConnectionLineType,
|
|
getBezierPath,
|
|
getSimpleBezierPath,
|
|
getSmoothStepPath,
|
|
getStraightPath,
|
|
type ConnectionLineComponentProps,
|
|
} from "@xyflow/react";
|
|
import { connectionLineAccentRgb } from "@/lib/canvas-utils";
|
|
|
|
export default function CustomConnectionLine({
|
|
connectionLineType,
|
|
fromNode,
|
|
fromHandle,
|
|
fromX,
|
|
fromY,
|
|
toX,
|
|
toY,
|
|
fromPosition,
|
|
toPosition,
|
|
connectionStatus,
|
|
}: ConnectionLineComponentProps) {
|
|
const pathParams = {
|
|
sourceX: fromX,
|
|
sourceY: fromY,
|
|
sourcePosition: fromPosition,
|
|
targetX: toX,
|
|
targetY: toY,
|
|
targetPosition: toPosition,
|
|
};
|
|
|
|
let path = "";
|
|
switch (connectionLineType) {
|
|
case ConnectionLineType.Bezier:
|
|
[path] = getBezierPath(pathParams);
|
|
break;
|
|
case ConnectionLineType.SimpleBezier:
|
|
[path] = getSimpleBezierPath(pathParams);
|
|
break;
|
|
case ConnectionLineType.Step:
|
|
[path] = getSmoothStepPath({
|
|
...pathParams,
|
|
borderRadius: 0,
|
|
});
|
|
break;
|
|
case ConnectionLineType.SmoothStep:
|
|
[path] = getSmoothStepPath(pathParams);
|
|
break;
|
|
default:
|
|
[path] = getStraightPath(pathParams);
|
|
}
|
|
|
|
const [r, g, b] = connectionLineAccentRgb(fromNode.type, fromHandle.id);
|
|
const opacity = connectionStatus === "invalid" ? 0.45 : 1;
|
|
|
|
return (
|
|
<path
|
|
d={path}
|
|
fill="none"
|
|
className="ls-connection-line-marching"
|
|
style={{
|
|
stroke: `rgb(${r}, ${g}, ${b})`,
|
|
strokeWidth: 2.5,
|
|
strokeLinecap: "round",
|
|
strokeDasharray: "10 8",
|
|
opacity,
|
|
}}
|
|
/>
|
|
);
|
|
}
|