feat: Refactor panel component, add adaptive width observer to optimize panel width management

web/app/components/workflow/panel/index.tsx

@@ -13,51 +13,61 @@ export type PanelProps = {
     right?: React.ReactNode
   }
 }
-const Panel: FC<PanelProps> = ({
-  components,
-}) => {
-  const nodes = useNodes<CommonNodeType>()
-  const selectedNode = nodes.find(node => node.data.selected)
-  const showEnvPanel = useStore(s => s.showEnvPanel)
-  const isRestoring = useStore(s => s.isRestoring)
 
-  const rightPanelRef = useRef<HTMLDivElement>(null)
+const useResizeObserver = (
-  const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
+  callback: (width: number) => void,
+  dependencies: React.DependencyList,
+) => {
+  const elementRef = useRef<HTMLDivElement>(null)
 
-  // get right panel width
   useEffect(() => {
-    if (rightPanelRef.current) {
+    const element = elementRef.current
-      const resizeRightPanelObserver = new ResizeObserver((entries) => {
+    if (!element) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { inlineSize } = entry.borderBoxSize[0]
-          setRightPanelWidth(inlineSize)
+
+        const width = inlineSize > 0 ? inlineSize : element.getBoundingClientRect().width
+        callback(width)
       }
     })
-      resizeRightPanelObserver.observe(rightPanelRef.current)
+
+    resizeObserver.observe(element)
+
+    const initialWidth = element.getBoundingClientRect().width
+    callback(initialWidth)
+
     return () => {
-        resizeRightPanelObserver.disconnect()
+      resizeObserver.disconnect()
     }
+  }, dependencies)
+
+  return elementRef
 }
-  }, [setRightPanelWidth])
 
-  const otherPanelRef = useRef<HTMLDivElement>(null)
+const Panel: FC<PanelProps> = ({
+  components,
+}) => {
+  const nodes = useNodes<CommonNodeType>()
+  const selectedNode = nodes.find(node => node.data.selected)
+  const showEnvPanel = useStore(s => s.showEnvPanel)
+  const isRestoring = useStore(s => s.isRestoring)
+  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
+
+  const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
   const setOtherPanelWidth = useStore(s => s.setOtherPanelWidth)
 
-  // get other panel width
+  const rightPanelRef = useResizeObserver(
-  useEffect(() => {
+    setRightPanelWidth,
-    if (otherPanelRef.current) {
+    [setRightPanelWidth, selectedNode, showEnvPanel, showWorkflowVersionHistoryPanel],
-      const resizeOtherPanelObserver = new ResizeObserver((entries) => {
+  )
-        for (const entry of entries) {
+
-          const { inlineSize } = entry.borderBoxSize[0]
+  const otherPanelRef = useResizeObserver(
-          setOtherPanelWidth(inlineSize)
+    setOtherPanelWidth,
-        }
+    [setOtherPanelWidth, showEnvPanel, showWorkflowVersionHistoryPanel],
-      })
+  )
-      resizeOtherPanelObserver.observe(otherPanelRef.current)
+
-      return () => {
-        resizeOtherPanelObserver.disconnect()
-      }
-    }
-  }, [setOtherPanelWidth])
   return (
     <div
       ref={rightPanelRef}
@@ -65,26 +75,14 @@ const Panel: FC<PanelProps> = ({
       className={cn('absolute bottom-1 right-0 top-14 z-10 flex outline-none')}
       key={`${isRestoring}`}
     >
-      {
+      {components?.left}
-        components?.left
+      {!!selectedNode && <NodePanel {...selectedNode} />}
-      }
-      {
-        !!selectedNode && (
-          <NodePanel {...selectedNode!} />
-        )
-      }
       <div
-        className='relative'
+        className="relative"
         ref={otherPanelRef}
       >
-        {
+        {components?.right}
-          components?.right
+        {showEnvPanel && <EnvPanel />}
-        }
-        {
-          showEnvPanel && (
-            <EnvPanel />
-          )
-        }
       </div>
     </div>
   )