import type { FC } from 'react' import { memo, useCallback, useEffect, useRef } from 'react' import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel' import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel' import { useShallow } from 'zustand/react/shallow' import { useStore as useReactflow } from 'reactflow' import { Panel as NodePanel } from '../nodes' import { useStore } from '../store' import EnvPanel from './env-panel' import cn from '@/utils/classnames' export type PanelProps = { components?: { left?: React.ReactNode right?: React.ReactNode } versionHistoryPanelProps?: VersionHistoryPanelProps } /** * Reference MDN standard implementation:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserverEntry/borderBoxSize */ const getEntryWidth = (entry: ResizeObserverEntry, element: HTMLElement): number => { if (entry.borderBoxSize?.length > 0) return entry.borderBoxSize[0].inlineSize if (entry.contentRect.width > 0) return entry.contentRect.width return element.getBoundingClientRect().width } const useResizeObserver = ( callback: (width: number) => void, dependencies: React.DependencyList = [], ) => { const elementRef = useRef(null) const stableCallback = useCallback(callback, [callback]) useEffect(() => { const element = elementRef.current if (!element) return const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { const width = getEntryWidth(entry, element) stableCallback(width) } }) resizeObserver.observe(element) const initialWidth = element.getBoundingClientRect().width stableCallback(initialWidth) return () => { resizeObserver.disconnect() } }, [stableCallback, ...dependencies]) return elementRef } const Panel: FC = ({ components, versionHistoryPanelProps, }) => { const selectedNode = useReactflow(useShallow((s) => { const nodes = s.getNodes() const currentNode = nodes.find(node => node.data.selected) if (currentNode) { return { id: currentNode.id, type: currentNode.type, data: currentNode.data, } } })) 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) const rightPanelRef = useResizeObserver( setRightPanelWidth, [setRightPanelWidth, selectedNode, showEnvPanel, showWorkflowVersionHistoryPanel], ) const otherPanelRef = useResizeObserver( setOtherPanelWidth, [setOtherPanelWidth, showEnvPanel, showWorkflowVersionHistoryPanel], ) return (
{components?.left} {!!selectedNode && }
{ components?.right } { showWorkflowVersionHistoryPanel && ( ) } { showEnvPanel && ( ) }
) } export default memo(Panel)