Update flow configuration and adjust positioning

src/main/frontend/app/routes/studio/canvas/edgetypes/frank-edge.tsx

@@ -68,10 +68,11 @@ export default function FrankEdge({
             position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
             pointerEvents: 'all',
+            zIndex: 20,
           }}
-          className="flex flex-col items-center"
+          className="nodrag flex flex-col items-center"
         >
-          <p className="bg-background border-border relative rounded-md p-1 px-2 text-sm">
+          <p className="bg-background border-border relative rounded-md border p-1 px-2 text-sm">
             {sourceHandleType}
             {selected && (
               <button

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: 380,
   EXIT_DEFAULT_WIDTH: 150,
   EXIT_DEFAULT_HEIGHT: 100,
   STICKY_NOTE_DEFAULT_WIDTH: 200,

src/main/frontend/app/routes/studio/canvas/flow.tsx

@@ -4,6 +4,7 @@
   BackgroundVariant,
   ControlButton,
   Controls,
+  type Connection,
   type Edge,
   type Node,
   type OnConnectStart,
@@ -54,6 +55,7 @@
 import CanvasContextMenu from '~/components/flow/canvas-context-menu'
 import { useSidebarStore, SidebarSide } from '~/stores/sidebar-layout-store'
 import { openInEditorAtElement } from '~/actions/navigationActions'
+import HandleMenu from '~/routes/studio/canvas/nodetypes/components/handle-menu'
 
 export type FlowNode = FrankNodeType | ExitNode | StickyNote | GroupNode | Node
 
@@ -206,6 +208,18 @@
 
   const [showModal, setShowModal] = useState(false)
   const [edgeDropPositions, setEdgeDropPositions] = useState<{ x: number; y: number } | null>(null)
+  const [pendingCompactConnection, setPendingCompactConnection] = useState<{
+    connection: Connection
+    sourceNodeSubtype: string
+    position: { x: number; y: number }
+  } | null>(null)
+  const [pendingEdgeDrop, setPendingEdgeDrop] = useState<{
+    position: { x: number; y: number }
+    sourceNodeSubtype: string
+  } | null>(null)
+
+  const [edgeDropHandleType, setEdgeDropHandleType] = useState<string | null>(null)
+
   const clipboardRef = useRef<{
     nodes: FlowNode[]
     edges: Edge[]
@@ -320,7 +334,7 @@
       logApiError('Failed to save XML', error as Error)
       setIdle()
     }
   }, [])
 
   const autosaveEnabled = useSettingsStore((s) => s.general.autoSave.enabled)
   const autosaveDelay = useSettingsStore((s) => s.general.autoSave.delayMs)
@@ -460,14 +474,88 @@
   }
 
   const handleConnectEnd: OnConnectEnd = (event, connectionState) => {
+    const mouseEvent = event as MouseEvent
     if (!connectionState.isValid) {
-      const mouseEvent = event as MouseEvent
-      const x = mouseEvent.clientX
-      const y = mouseEvent.clientY
-      handleEdgeDropOnCanvas(x, y)
+      const zoom = reactFlow.getZoom()
+      if (zoom < 0.4 && sourceInfoReference.current.handleType === 'source') {
+        const { nodes } = useFlowStore.getState()
+        const sourceNode = nodes.find((node) => node.id === sourceInfoReference.current.nodeId)
+        if (sourceNode && isFrankNode(sourceNode)) {
+          setPendingEdgeDrop({
+            position: { x: mouseEvent.clientX, y: mouseEvent.clientY },
+            sourceNodeSubtype: sourceNode.data.subtype,
+          })
+          return
+        }
+      }
+      handleEdgeDropOnCanvas(mouseEvent.clientX, mouseEvent.clientY)
     }
   }
 
+  const handleConnect = useCallback(
+    (connection: Connection) => {
+      const zoom = reactFlow.getZoom()
+
+      if (zoom < 0.4 && connection.source) {
+        const { nodes } = useFlowStore.getState()
+        const sourceNode = nodes.find((node) => node.id === connection.source)
+
+        if (sourceNode && isFrankNode(sourceNode)) {
+          const targetNode = nodes.find((node) => node.id === connection.target)
+          const position = targetNode
+            ? reactFlow.flowToScreenPosition({
+                x: targetNode.position.x + (targetNode.measured?.width ?? FlowConfig.NODE_DEFAULT_WIDTH) / 2,
+                y: targetNode.position.y + (targetNode.measured?.height ?? FlowConfig.NODE_ZOOMED_OUT_HEIGHT) / 2,
+              })
+            : { x: window.innerWidth / 2, y: window.innerHeight / 2 }
+
+          setPendingCompactConnection({
+            connection,
+            sourceNodeSubtype: sourceNode.data.subtype,
+            position,
+          })
+          return
+        }
+      }
+
+      onConnect(connection)
+    },
+    [onConnect, reactFlow],
+  )
+
+  const handleCompactHandleSelect = useCallback(
+    (type: string) => {
+      if (!pendingCompactConnection) return
+
+      const { nodes } = useFlowStore.getState()
+      const sourceNode = nodes.find((node) => node.id === pendingCompactConnection.connection.source)
+
+      if (!sourceNode || !isFrankNode(sourceNode)) {
+        setPendingCompactConnection(null)
+        return
+      }
+
+      const existingHandle = sourceNode.data.sourceHandles.find((handle) => handle.type === type)
+
+      if (existingHandle) {
+        onConnect({
+          ...pendingCompactConnection.connection,
+          sourceHandle: existingHandle.index.toString(),
+        })
+      } else {
+        const newIndex = sourceNode.data.sourceHandles.length + 1
+        useFlowStore.getState().addHandle(pendingCompactConnection.connection.source!, { type, index: newIndex })
+        onConnect({
+          ...pendingCompactConnection.connection,
+          sourceHandle: newIndex.toString(),
+        })
+      }
+
+      setPendingCompactConnection(null)
+    },
+    [pendingCompactConnection, onConnect],
+  )
+
   const handleEdgeDropOnCanvas = (x: number, y: number) => {
     const { screenToFlowPosition } = reactFlow
     const flowPositions = screenToFlowPosition({ x: x, y: y })
@@ -476,6 +564,18 @@
     setShowModal(true)
   }
 
+  const handleEdgeDropHandleSelect = useCallback(
+    (type: string) => {
+      if (!pendingEdgeDrop) return
+      const flowPositions = reactFlow.screenToFlowPosition(pendingEdgeDrop.position)
+      setEdgeDropHandleType(type)
+      setEdgeDropPositions(flowPositions)
+      setPendingEdgeDrop(null)
+      setShowModal(true)
+    },
+    [pendingEdgeDrop, reactFlow],
+  )
+
   const computeAdapterCenteredViewport = useCallback(
     (nodes: Node[], canvasWidth: number, canvasHeight: number): { x: number; y: number; zoom: number } => {
       const layoutNodes = nodes.filter((node) => node.type === 'frankNode' || node.type === 'exitNode')
@@ -1115,7 +1215,7 @@
     setParentId(null)
   }
 
   function addNodeAtPosition(
     position: { x: number; y: number },
     elementName: string,
     sourceInfo?: { nodeId: string | null; handleId: string | null; handleType: 'source' | 'target' | null },
@@ -1158,6 +1258,44 @@
     if (sourceInfo?.nodeId && sourceInfo.handleType === 'source') {
       const sourceNode = flowStore.nodes.find((node) => node.id === sourceInfo.nodeId)
 
+      if (reactFlow.getZoom() < 0.4 && sourceNode && isFrankNode(sourceNode)) {
+        if (edgeDropHandleType) {
+          const existingHandle = sourceNode.data.sourceHandles.find((handle) => handle.type === edgeDropHandleType)
+          if (existingHandle) {
+            onConnect({
+              source: sourceInfo.nodeId!,
+              sourceHandle: existingHandle.index.toString(),
+              target: newId.toString(),
+              targetHandle: null,
+            })
+          } else {
+            const newIndex = sourceNode.data.sourceHandles.length + 1
+            flowStore.addHandle(sourceInfo.nodeId!, { type: edgeDropHandleType, index: newIndex })
+            onConnect({
+              source: sourceInfo.nodeId!,
+              sourceHandle: newIndex.toString(),
+              target: newId.toString(),
+              targetHandle: null,
+            })
+          }
+          setEdgeDropHandleType(null)
+        } else {
+          setPendingCompactConnection({
+            connection: {
+              source: sourceInfo.nodeId,
+              sourceHandle: null,
+              target: newId.toString(),
+              targetHandle: null,
+            },
+            sourceNodeSubtype: sourceNode.data.subtype,
+            position: reactFlow.flowToScreenPosition(position),
+          })
+        }
+
+        sourceInfoReference.current = { nodeId: null, handleId: null, handleType: null }
+        return
+      }
+
       const label = getEdgeLabelFromHandle(sourceNode, sourceInfo.handleId)
 
       const newEdge: Edge = {
@@ -1474,10 +1612,8 @@
           </div>
         )}
 
-        {isEditing && (
-          <div
-            className={`absolute inset-0 z-10 ${isDirty ? 'bg-background/30 backdrop-blur-[0.5px]' : 'pointer-events-none'}`}
-          >
+        {isEditing && !pendingCompactConnection && (
+          <div className={`absolute inset-0 z-10 ${isDirty ? 'bg-background/10' : 'pointer-events-none'}`}>
             <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-3 rounded bg-black/30 px-3 py-2 text-xs text-white backdrop-blur-[0.5px]">
               <span>
                 <kbd className="rounded border border-white/40 bg-white/15 px-1.5 py-0.5 font-mono text-xs text-white">
@@ -1504,7 +1640,7 @@
           }}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
+          onConnect={handleConnect}
           onReconnect={onReconnect}
           onNodeClick={handleNodeClick}
           onNodeDoubleClick={handleNodeDoubleClick}
@@ -1560,6 +1696,31 @@
           sourceInfo={sourceInfoReference.current}
         />
 
+        {pendingCompactConnection && (
+          <HandleMenu
+            title="Select Handle Type"
+            position={pendingCompactConnection.position}
+            onClose={() => setPendingCompactConnection(null)}
+            onSelect={handleCompactHandleSelect}
+            typesAllowed={
+              (elements as Record<string, ElementDetails> | null)?.[pendingCompactConnection.sourceNodeSubtype]
+                ?.forwards
+            }
+          />
+        )}
+
+        {pendingEdgeDrop && (
+          <HandleMenu
+            title="Select Handle Type"
+            position={pendingEdgeDrop.position}
+            onClose={() => setPendingEdgeDrop(null)}
+            onSelect={handleEdgeDropHandleSelect}
+            typesAllowed={
+              (elements as Record<string, ElementDetails> | null)?.[pendingEdgeDrop.sourceNodeSubtype]?.forwards
+            }
+          />
+        )}
+
         {contextMenu && (
           <CanvasContextMenu
             position={{ x: contextMenu.x, y: contextMenu.y }}

src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx

@@ -59,12 +59,12 @@ export default function HandleMenu({
       ref={menuRef}
       className="nodrag bg-background border-border absolute rounded border shadow-md"
       style={{
-        left: `${position.x + 10}px`, // offset to the right of cursor
+        left: `${position.x + 10}px`,
         top: `${position.y - 5}px`,
       }}
     >
       <div className="w-70">
-        <div className="border-border text-foreground-muted flex h-10 items-center border-b px-3 py-1 text-xs font-semibold tracking-wide uppercase">
+        <div className="border-border text-foreground-muted mt-[1px] flex h-10 items-center border-b p-2 text-xs font-semibold tracking-wide uppercase">
           {title}
         </div>
         <ul className="w-full">