From ccb7cec55fdf40754c2ef526ed0ff7624d2a121f Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Wed, 27 May 2026 10:43:46 +0200 Subject: [PATCH 1/4] Update flow configuration and adjust handle positioning for improved layout consistency --- .../app/routes/studio/canvas/flow.config.ts | 1 + .../studio/canvas/nodetypes/components/handle.tsx | 2 +- .../routes/studio/canvas/nodetypes/frank-node.tsx | 14 +++++++++----- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/main/frontend/app/routes/studio/canvas/flow.config.ts b/src/main/frontend/app/routes/studio/canvas/flow.config.ts index 3d0c18a8..5f72e97f 100644 --- a/src/main/frontend/app/routes/studio/canvas/flow.config.ts +++ b/src/main/frontend/app/routes/studio/canvas/flow.config.ts @@ -1,6 +1,7 @@ export const FlowConfig = { NODE_DEFAULT_WIDTH: 300, NODE_MIN_HEIGHT: 80, + NODE_ZOOMED_OUT_HEIGHT: 300, EXIT_DEFAULT_WIDTH: 150, EXIT_DEFAULT_HEIGHT: 100, STICKY_NOTE_DEFAULT_WIDTH: 200, diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx index b8979921..55c92081 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx @@ -68,7 +68,7 @@ export function CustomHandle(properties: Readonly) { isConnectableEnd={connections.length === 0} onClick={handleClick} style={{ - top: `${properties.firstHandlePosition + properties.index * properties.handleSpacing}px`, + top: `${properties.firstHandlePosition + (properties.index - 1) * properties.handleSpacing}px`, right: '-15px', width: '15px', height: '15px', diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx index 4350317e..362689d4 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx @@ -116,8 +116,8 @@ export default function FrankNode(properties: NodeProps) { }, [dimensions.height, properties.data.sourceHandles.length]) const compactFirstHandlePosition = useMemo(() => { - return (minNodeHeight - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2 - }, [minNodeHeight, properties.data.sourceHandles.length]) + return (FlowConfig.NODE_ZOOMED_OUT_HEIGHT - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2 + }, [properties.data.sourceHandles.length]) const allForwardTypesUsed = useMemo(() => { if (availableHandleTypes.length === 0) return true @@ -141,6 +141,10 @@ export default function FrankNode(properties: NodeProps) { } }, [dragOver, properties.id, updateNodeInternals]) + useEffect(() => { + updateNodeInternals(properties.id) + }, [dimensions.height, isCompact, properties.id, updateNodeInternals]) + useEffect(() => { fetchFrankConfigXsd().then((xsd) => { const doc = parseXsd(xsd) @@ -381,10 +385,10 @@ export default function FrankNode(properties: NodeProps) { return ( <>
@@ -611,7 +615,7 @@ export default function FrankNode(properties: NodeProps) { }} className="nodrag absolute -right-5.75 h-3.75 w-3.75 cursor-pointer justify-center rounded-full border bg-gray-400 text-center text-[8px] font-bold text-white" style={{ - top: `${firstHandlePosition + properties.data.sourceHandles.length * handleSpacing + handleSpacing}px`, + top: `${firstHandlePosition + properties.data.sourceHandles.length * handleSpacing}px`, }} > + From 93bf9109faaecc70c59298a7812980d7ba9214d9 Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Wed, 27 May 2026 16:29:28 +0200 Subject: [PATCH 2/4] Update NODE_ZOOMED_OUT_HEIGHT in flow configuration for improved layout, now its bigger --- src/main/frontend/app/routes/studio/canvas/flow.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/frontend/app/routes/studio/canvas/flow.config.ts b/src/main/frontend/app/routes/studio/canvas/flow.config.ts index 5f72e97f..1a88a5d1 100644 --- a/src/main/frontend/app/routes/studio/canvas/flow.config.ts +++ b/src/main/frontend/app/routes/studio/canvas/flow.config.ts @@ -1,7 +1,7 @@ export const FlowConfig = { NODE_DEFAULT_WIDTH: 300, NODE_MIN_HEIGHT: 80, - NODE_ZOOMED_OUT_HEIGHT: 300, + NODE_ZOOMED_OUT_HEIGHT: 380, EXIT_DEFAULT_WIDTH: 150, EXIT_DEFAULT_HEIGHT: 100, STICKY_NOTE_DEFAULT_WIDTH: 200, From 632467ecaf1dffb17a4fe29a0b09f264c707cab8 Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Wed, 27 May 2026 16:33:11 +0200 Subject: [PATCH 3/4] Refactor handle positioning and styling for improved layout on zoomed out version in flow --- .../canvas/nodetypes/components/handle.tsx | 3 +- .../studio/canvas/nodetypes/frank-node.tsx | 71 +++++++++++++------ 2 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx index 55c92081..53367515 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx @@ -11,6 +11,7 @@ interface HandleProperties { onChangeType: (newType: string) => void absolutePosition: { x: number; y: number } typesAllowed?: Record + rightOverride?: string } const HANDLE_TYPE_COLOURS: Record = { @@ -69,7 +70,7 @@ export function CustomHandle(properties: Readonly) { onClick={handleClick} style={{ top: `${properties.firstHandlePosition + (properties.index - 1) * properties.handleSpacing}px`, - right: '-15px', + right: properties.rightOverride ?? '-15px', width: '15px', height: '15px', backgroundColor: translateHandleTypeToColour(type), diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx index 362689d4..8635fe65 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx @@ -115,9 +115,16 @@ export default function FrankNode(properties: NodeProps) { return (dimensions.height - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2 }, [dimensions.height, properties.data.sourceHandles.length]) - const compactFirstHandlePosition = useMemo(() => { - return (FlowConfig.NODE_ZOOMED_OUT_HEIGHT - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2 - }, [properties.data.sourceHandles.length]) + const COMPACT_INITIALS_BOX_SIZE = 160 + const COMPACT_PADDING_TOP = 8 + const COMPACT_HANDLE_SIZE = 15 + const COMPACT_HANDLE_GAP = 4 + + const compactHandleXOffset = `${(FlowConfig.NODE_DEFAULT_WIDTH - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP}px` + const compactHandleTop = COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + 10 + const compactDotTop = compactHandleTop - 8 + const compactDotXOffset = `${(FlowConfig.NODE_DEFAULT_WIDTH - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP - 10}px` + const compactTargetXOffset = `${(FlowConfig.NODE_DEFAULT_WIDTH - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP + 10}px` const allForwardTypesUsed = useMemo(() => { if (availableHandleTypes.length === 0) return true @@ -385,33 +392,32 @@ export default function FrankNode(properties: NodeProps) { return ( <>
- + {abbr}
- + {properties.data.subtype} {properties.data.name && ( - - {properties.data.name} - + {properties.data.name} )}
@@ -419,20 +425,43 @@ export default function FrankNode(properties: NodeProps) { + )} + + {properties.data.sourceHandles.length > 0 && ( +
)} {properties.data.sourceHandles.map((handle) => ( - changeHandleType(handle.index, newType)} - absolutePosition={{ x: properties.positionAbsoluteX, y: properties.positionAbsoluteY }} - typesAllowed={frankElement?.forwards} + type="source" + position={Position.Right} + id={handle.index.toString()} + style={{ + top: `${compactHandleTop}px`, + right: compactHandleXOffset, + width: '15px', + height: '15px', + opacity: 0, + }} /> ))} From 4234e47621be97ae07e4de781a025c6433ccb3cc Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Wed, 27 May 2026 16:37:35 +0200 Subject: [PATCH 4/4] Fix handle positioning for consistent layout in flow component --- .../app/routes/studio/canvas/nodetypes/components/handle.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx index 53367515..b8979921 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx @@ -11,7 +11,6 @@ interface HandleProperties { onChangeType: (newType: string) => void absolutePosition: { x: number; y: number } typesAllowed?: Record - rightOverride?: string } const HANDLE_TYPE_COLOURS: Record = { @@ -69,8 +68,8 @@ export function CustomHandle(properties: Readonly) { isConnectableEnd={connections.length === 0} onClick={handleClick} style={{ - top: `${properties.firstHandlePosition + (properties.index - 1) * properties.handleSpacing}px`, - right: properties.rightOverride ?? '-15px', + top: `${properties.firstHandlePosition + properties.index * properties.handleSpacing}px`, + right: '-15px', width: '15px', height: '15px', backgroundColor: translateHandleTypeToColour(type),