chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(network): surface connect tool and middle-pan

Browse Source
This commit is contained in:
chihlasm
2026-04-14 03:41:21 +00:00
parent c063952f12
commit cf9c258f9e
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/network/DiagramHeader.tsx
View File

@@ -131,42 +131,45 @@ export function DiagramHeader({
<div className="mx-2 h-5 w-px bg-border-default" /> <div className="mx-2 h-5 w-px bg-border-default" />
{/* Interaction mode toggle */} {/* Interaction mode toggle */}
<div className="flex items-center rounded border border-default overflow-hidden"> <div className="flex items-center overflow-hidden rounded border border-default">
<button <button
onClick={() => onModeChange('select')} onClick={() => onModeChange('select')}
title="Select (V)" title="Select (V)"
className={cn( className={cn(
'p-1.5 transition-colors', 'flex items-center gap-1.5 px-2.5 py-1.5 text-xs transition-colors',
interactionMode === 'select' interactionMode === 'select'
? 'bg-elevated text-primary' ? 'bg-elevated text-primary'
: 'text-muted-foreground hover:text-primary hover:bg-elevated/50', : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
)} )}
> >
<MousePointer2 size={15} /> <MousePointer2 size={15} />
<span className="hidden sm:inline">Select</span>
</button> </button>
<button <button
onClick={() => onModeChange('pan')} onClick={() => onModeChange('pan')}
title="Pan (H)" title="Pan (H)"
className={cn( className={cn(
'p-1.5 transition-colors', 'flex items-center gap-1.5 border-l border-default px-2.5 py-1.5 text-xs transition-colors',
interactionMode === 'pan' interactionMode === 'pan'
? 'bg-elevated text-primary' ? 'bg-elevated text-primary'
: 'text-muted-foreground hover:text-primary hover:bg-elevated/50', : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
)} )}
> >
<Hand size={15} /> <Hand size={15} />
<span className="hidden sm:inline">Pan</span>
</button> </button>
<button <button
onClick={() => onModeChange('connect')} onClick={() => onModeChange('connect')}
title="Connect (C)" title="Connect (C)"
className={cn( className={cn(
'p-1.5 transition-colors', 'flex items-center gap-1.5 border-l border-default px-2.5 py-1.5 text-xs transition-colors',
interactionMode === 'connect' interactionMode === 'connect'
? 'bg-elevated text-primary' ? 'bg-elevated text-primary'
: 'text-muted-foreground hover:text-primary hover:bg-elevated/50', : 'text-muted-foreground hover:text-primary hover:bg-elevated/50',
)} )}
> >
<Cable size={15} /> <Cable size={15} />
<span className="hidden sm:inline">Connect</span>
</button> </button>
</div> </div>

11
frontend/src/components/network/NetworkCanvas.tsx
View File

@@ -17,6 +17,7 @@ import { edgeTypes } from './edges/edgeTypes'
import { getDeviceRenderConfig } from './nodes/deviceRegistry' import { getDeviceRenderConfig } from './nodes/deviceRegistry'
import type { DeviceNodeData } from './nodes/DeviceNode' import type { DeviceNodeData } from './nodes/DeviceNode'
import type { InteractionMode } from './DiagramHeader' import type { InteractionMode } from './DiagramHeader'
import { cn } from '@/lib/utils'
interface NetworkCanvasProps { interface NetworkCanvasProps {
nodes: Node[] nodes: Node[]
@@ -81,7 +82,15 @@ export function NetworkCanvas({
}, []) }, [])
return ( return (
<div className="relative h-full w-full" onDragLeave={onDragLeave}> <div
className="relative h-full w-full"
onDragLeave={onDragLeave}
onMouseDownCapture={(event) => {
if (event.button === 1) {
event.preventDefault()
}
}}
>
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}