81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { BaseEdge, type EdgeProps } from "@xyflow/react";
|
|
import { memo, useMemo } from "react";
|
|
|
|
export type RfChainEdgeData = {
|
|
/** When true, the chain is "dynamic" — static analysis could not fully prove the re-entry path. */
|
|
chainWeak?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Builds a cubic Bézier path for a chain-back edge.
|
|
*
|
|
* Because the source handle exits to the RIGHT and the target is often to the
|
|
* LEFT (the edge loops back), the standard `getSimpleBezierPath` control-point
|
|
* formula places both control points between source and target, causing the
|
|
* edge to immediately swing left from a right-facing handle.
|
|
*
|
|
* Instead we always push cp1 rightward past the source and cp2 leftward past
|
|
* the target, creating a clear outward loop before the edge arrives at the
|
|
* condition node's left handle.
|
|
*/
|
|
function buildChainPath(
|
|
sx: number,
|
|
sy: number,
|
|
tx: number,
|
|
ty: number,
|
|
): { path: string; labelX: number; labelY: number; angleDeg: number } {
|
|
// Offset scales with horizontal distance so the loop expands when nodes
|
|
// are far apart, but stays legible when they are close.
|
|
const hDist = Math.abs(sx - tx);
|
|
const offset = Math.max(80, hDist * 0.25);
|
|
|
|
const cp1x = sx + offset; // always to the right of the source
|
|
const cp1y = sy;
|
|
const cp2x = tx - offset; // always to the left of the target
|
|
const cp2y = ty;
|
|
|
|
const path = `M${sx},${sy} C${cp1x},${cp1y} ${cp2x},${cp2y} ${tx},${ty}`;
|
|
|
|
// Midpoint of cubic Bézier at t = 0.5
|
|
const labelX = sx / 8 + (3 * cp1x) / 8 + (3 * cp2x) / 8 + tx / 8;
|
|
const labelY = sy / 8 + (3 * cp1y) / 8 + (3 * cp2y) / 8 + ty / 8;
|
|
|
|
// Tangent direction at t = 0.5 for the mid-edge arrow orientation
|
|
const dx = 0.75 * (cp1x - sx) + 1.5 * (cp2x - cp1x) + 0.75 * (tx - cp2x);
|
|
const dy = 0.75 * (cp1y - sy) + 1.5 * (cp2y - cp1y) + 0.75 * (ty - cp2y);
|
|
const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;
|
|
|
|
return { path, labelX, labelY, angleDeg };
|
|
}
|
|
|
|
function RfChainEdgeImpl({ id, sourceX, sourceY, targetX, targetY, style, interactionWidth, data }: EdgeProps) {
|
|
const weak = (data as RfChainEdgeData | undefined)?.chainWeak === true;
|
|
const strokeColor = typeof style?.stroke === "string" && style.stroke.length > 0 ? style.stroke : "var(--foreground)";
|
|
|
|
const { path, labelX, labelY, angleDeg } = useMemo(
|
|
() => buildChainPath(sourceX, sourceY, targetX, targetY),
|
|
[sourceX, sourceY, targetX, targetY],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<BaseEdge id={id} path={path} style={style} interactionWidth={interactionWidth ?? 12} />
|
|
<g transform={`translate(${labelX}, ${labelY}) rotate(${angleDeg})`} className="pointer-events-none" aria-hidden>
|
|
{weak ? (
|
|
<polyline
|
|
points="-6,-4 6,0 -6,4"
|
|
fill="none"
|
|
stroke={strokeColor}
|
|
strokeWidth={1.75}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
) : (
|
|
<polygon points="8,0 -6,-5 -6,5" fill={strokeColor} />
|
|
)}
|
|
</g>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export const RfChainEdge = memo(RfChainEdgeImpl); |