import type { FC } from 'react' import { useCallback, useMemo, } from 'react' import { debounce } from 'lodash-es' import { useStore } from '../store' import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel' import Panel from './panel' import cn from '@/utils/classnames' const VariableInspectPanel: FC = () => { const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel) const workflowCanvasHeight = useStore(s => s.workflowCanvasHeight) const variableInspectPanelHeight = useStore(s => s.variableInspectPanelHeight) const setVariableInspectPanelHeight = useStore(s => s.setVariableInspectPanelHeight) const maxHeight = useMemo(() => { if (!workflowCanvasHeight) return 480 return workflowCanvasHeight - 60 }, [workflowCanvasHeight]) const handleResize = useCallback((width: number, height: number) => { localStorage.setItem('workflow-variable-inpsect-panel-height', `${height}`) setVariableInspectPanelHeight(height) }, [setVariableInspectPanelHeight]) const { triggerRef, containerRef, } = useResizePanel({ direction: 'vertical', triggerDirection: 'top', minHeight: 120, maxHeight, onResize: debounce(handleResize), }) if (!showVariableInspectPanel) return null return (
) } export default VariableInspectPanel