fix: Optimize the workspace panel width calculation (#22195)

This commit is contained in:
GuanMu
2025-07-11 19:12:12 +08:00
committed by GitHub
parent 5f9628e027
commit f193e9764e
3 changed files with 49 additions and 13 deletions

View File

@@ -83,18 +83,19 @@ const BasePanel: FC<BasePanelProps> = ({
const otherPanelWidth = useStore(s => s.otherPanelWidth)
const setNodePanelWidth = useStore(s => s.setNodePanelWidth)
const reservedCanvasWidth = 400 // Reserve the minimum visible width for the canvas
const maxNodePanelWidth = useMemo(() => {
if (!workflowCanvasWidth)
return 720
if (!otherPanelWidth)
return workflowCanvasWidth - 400
return workflowCanvasWidth - otherPanelWidth - 400
const available = workflowCanvasWidth - (otherPanelWidth || 0) - reservedCanvasWidth
return Math.max(available, 400)
}, [workflowCanvasWidth, otherPanelWidth])
const updateNodePanelWidth = useCallback((width: number) => {
// Ensure the width is within the min and max range
const newValue = Math.min(Math.max(width, 400), maxNodePanelWidth)
const newValue = Math.max(400, Math.min(width, maxNodePanelWidth))
localStorage.setItem('workflow-node-panel-width', `${newValue}`)
setNodePanelWidth(newValue)
}, [maxNodePanelWidth, setNodePanelWidth])
@@ -118,8 +119,13 @@ const BasePanel: FC<BasePanelProps> = ({
useEffect(() => {
if (!workflowCanvasWidth)
return
if (workflowCanvasWidth - 400 <= nodePanelWidth + otherPanelWidth)
debounceUpdate(workflowCanvasWidth - 400 - otherPanelWidth)
// If the total width of the three exceeds the canvas, shrink the node panel to the available range (at least 400px)
const total = nodePanelWidth + otherPanelWidth + reservedCanvasWidth
if (total > workflowCanvasWidth) {
const target = Math.max(workflowCanvasWidth - otherPanelWidth - reservedCanvasWidth, 400)
debounceUpdate(target)
}
}, [nodePanelWidth, otherPanelWidth, workflowCanvasWidth, updateNodePanelWidth])
const { handleNodeSelect } = useNodesInteractions()

View File

@@ -77,6 +77,30 @@ const Panel: FC<PanelProps> = ({
const isRestoring = useStore(s => s.isRestoring)
const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
// widths used for adaptive layout
const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
const previewPanelWidth = useStore(s => s.previewPanelWidth)
const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
// When a node is selected and the NodePanel appears, if the current width
// of preview/otherPanel is too large, it may result in the total width of
// the two panels exceeding the workflowCanvasWidth, causing the NodePanel
// to be pushed out. Here we check and, if necessary, reduce the previewPanelWidth
// to "workflowCanvasWidth - 400 (minimum NodePanel width) - 400 (minimum canvas space)",
// while still ensuring that previewPanelWidth ≥ 400.
useEffect(() => {
if (!selectedNode || !workflowCanvasWidth)
return
const reservedCanvasWidth = 400 // Reserve the minimum visible width for the canvas
const minNodePanelWidth = 400
const maxAllowed = Math.max(workflowCanvasWidth - reservedCanvasWidth - minNodePanelWidth, 400)
if (previewPanelWidth > maxAllowed)
setPreviewPanelWidth(maxAllowed)
}, [selectedNode, workflowCanvasWidth, previewPanelWidth, setPreviewPanelWidth])
const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
const setOtherPanelWidth = useStore(s => s.setOtherPanelWidth)

View File

@@ -32,6 +32,9 @@ const WorkflowPreview = () => {
const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
const workflowRunningData = useStore(s => s.workflowRunningData)
const showInputsPanel = useStore(s => s.showInputsPanel)
const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
const panelWidth = useStore(s => s.previewPanelWidth)
const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
const [currentTab, setCurrentTab] = useState<string>(showInputsPanel ? 'INPUT' : 'TRACING')
@@ -49,7 +52,6 @@ const WorkflowPreview = () => {
switchTab('DETAIL')
}, [workflowRunningData])
const [panelWidth, setPanelWidth] = useState(420)
const [isResizing, setIsResizing] = useState(false)
const startResizing = useCallback((e: React.MouseEvent) => {
@@ -64,10 +66,14 @@ const WorkflowPreview = () => {
const resize = useCallback((e: MouseEvent) => {
if (isResizing) {
const newWidth = window.innerWidth - e.clientX
if (newWidth > 420 && newWidth < 1024)
setPanelWidth(newWidth)
// width constraints: 400 <= width <= maxAllowed (canvas - reserved 400)
const reservedCanvasWidth = 400
const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
if (newWidth >= 400 && newWidth <= maxAllowed)
setPreviewPanelWidth(newWidth)
}
}, [isResizing])
}, [isResizing, workflowCanvasWidth, setPreviewPanelWidth])
useEffect(() => {
window.addEventListener('mousemove', resize)
@@ -79,9 +85,9 @@ const WorkflowPreview = () => {
}, [resize, stopResizing])
return (
<div className={`
relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
`}
<div className={
'relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
}
style={{ width: `${panelWidth}px` }}
>
<div