jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: adjust edge position to not overlay handles on select (#6666)

Browse source 
* Fixed edge to start at left and right sides of handle

* Fixed neon to be the same size of default handle

* Fixed source and targets Y to work on loop edges as well
This commit is contained in:
Lucas Oliveira 2025-02-17 16:26:03 -03:00 • committed by GitHub
commit 3bb27bb51b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/frontend/src/CustomEdges/index.tsx
View file

@ -21,8 +21,8 @@ export function DefaultEdge({
const targetHandleObject = scapeJSONParse(targetHandleId!); const targetHandleObject = scapeJSONParse(targetHandleId!);
const sourceXNew = const sourceXNew =
(sourceNode?.position.x ?? 0) + (sourceNode?.measured?.width ?? 0); (sourceNode?.position.x ?? 0) + (sourceNode?.measured?.width ?? 0) + 7;
const targetXNew = targetNode?.position.x ?? 0; const targetXNew = (targetNode?.position.x ?? 0) - 7;
const distance = 200 + 0.1 * ((sourceXNew - targetXNew) / 2); const distance = 200 + 0.1 * ((sourceXNew - targetXNew) / 2);
@ -42,15 +42,18 @@ export function DefaultEdge({
200 * (1 - zeroOnNegative) + 200 * (1 - zeroOnNegative) +
0.3 * Math.abs(sourceY - targetY) * zeroOnNegative; 0.3 * Math.abs(sourceY - targetY) * zeroOnNegative;
const edgePathLoop = `M ${sourceXNew} ${sourceY} C ${sourceXNew + distance} ${sourceY + sourceDistanceY}, ${targetXNew - distance} ${targetY + distanceY}, ${targetXNew} ${targetY}`; const targetYNew = targetY + 1;
const sourceYNew = sourceY + 1;
const edgePathLoop = `M ${sourceXNew} ${sourceYNew} C ${sourceXNew + distance} ${sourceYNew + sourceDistanceY}, ${targetXNew - distance} ${targetYNew + distanceY}, ${targetXNew} ${targetYNew}`;
const [edgePath] = getBezierPath({ const [edgePath] = getBezierPath({
sourceX: sourceXNew, sourceX: sourceXNew,
sourceY, sourceY: sourceYNew,
sourcePosition: Position.Right, sourcePosition: Position.Right,
targetPosition: Position.Left, targetPosition: Position.Left,
targetX: targetXNew, targetX: targetXNew,
targetY, targetY: targetYNew,
}); });
return ( return (

6
src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
View file

@ -52,7 +52,7 @@ const HandleContent = memo(function HandleContent({
styleSheet.textContent = ` styleSheet.textContent = `
@keyframes pulseNeon-${nodeId} { @keyframes pulseNeon-${nodeId} {
0% { 0% {
box-shadow: 0 0 0 2px hsl(var(--node-ring)), box-shadow: 0 0 0 3px hsl(var(--node-ring)),
0 0 2px ${handleColor}, 0 0 2px ${handleColor},
0 0 4px ${handleColor}, 0 0 4px ${handleColor},
0 0 6px ${handleColor}, 0 0 6px ${handleColor},
@ -62,7 +62,7 @@ const HandleContent = memo(function HandleContent({
0 0 20px ${handleColor}; 0 0 20px ${handleColor};
} }
50% { 50% {
box-shadow: 0 0 0 2px hsl(var(--node-ring)), box-shadow: 0 0 0 3px hsl(var(--node-ring)),
0 0 4px ${handleColor}, 0 0 4px ${handleColor},
0 0 8px ${handleColor}, 0 0 8px ${handleColor},
0 0 12px ${handleColor}, 0 0 12px ${handleColor},
@ -72,7 +72,7 @@ const HandleContent = memo(function HandleContent({
0 0 30px ${handleColor}; 0 0 30px ${handleColor};
} }
100% { 100% {
box-shadow: 0 0 0 2px hsl(var(--node-ring)), box-shadow: 0 0 0 3px hsl(var(--node-ring)),
0 0 2px ${handleColor}, 0 0 2px ${handleColor},
0 0 4px ${handleColor}, 0 0 4px ${handleColor},
0 0 6px ${handleColor}, 0 0 6px ${handleColor},