2024-04-08 18:51:46 +08:00
|
|
|
import type { FC } from 'react'
|
2025-06-24 09:10:30 +08:00
|
|
|
import { memo, useEffect, useRef } from 'react'
|
2024-04-08 18:51:46 +08:00
|
|
|
import { useNodes } from 'reactflow'
|
2025-05-08 18:27:15 +08:00
|
|
|
import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel'
|
|
|
|
import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel'
|
2024-04-08 18:51:46 +08:00
|
|
|
import type { CommonNodeType } from '../types'
|
|
|
|
import { Panel as NodePanel } from '../nodes'
|
|
|
|
import { useStore } from '../store'
|
2024-07-22 15:29:39 +08:00
|
|
|
import EnvPanel from './env-panel'
|
2024-07-09 15:05:40 +08:00
|
|
|
import cn from '@/utils/classnames'
|
2024-04-08 18:51:46 +08:00
|
|
|
|
2025-04-18 13:59:12 +08:00
|
|
|
export type PanelProps = {
|
|
|
|
components?: {
|
|
|
|
left?: React.ReactNode
|
|
|
|
right?: React.ReactNode
|
|
|
|
}
|
2025-05-08 18:27:15 +08:00
|
|
|
versionHistoryPanelProps?: VersionHistoryPanelProps
|
2025-04-18 13:59:12 +08:00
|
|
|
}
|
|
|
|
const Panel: FC<PanelProps> = ({
|
|
|
|
components,
|
2025-05-08 18:27:15 +08:00
|
|
|
versionHistoryPanelProps,
|
2025-04-18 13:59:12 +08:00
|
|
|
}) => {
|
2024-04-08 18:51:46 +08:00
|
|
|
const nodes = useNodes<CommonNodeType>()
|
|
|
|
const selectedNode = nodes.find(node => node.data.selected)
|
2024-07-22 15:29:39 +08:00
|
|
|
const showEnvPanel = useStore(s => s.showEnvPanel)
|
2024-04-24 13:05:33 +08:00
|
|
|
const isRestoring = useStore(s => s.isRestoring)
|
2025-05-08 18:27:15 +08:00
|
|
|
const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
|
2024-04-08 18:51:46 +08:00
|
|
|
|
2025-06-24 09:10:30 +08:00
|
|
|
const rightPanelRef = useRef<HTMLDivElement>(null)
|
|
|
|
const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
|
|
|
|
|
|
|
|
// get right panel width
|
|
|
|
useEffect(() => {
|
|
|
|
if (rightPanelRef.current) {
|
|
|
|
const resizeRightPanelObserver = new ResizeObserver((entries) => {
|
|
|
|
for (const entry of entries) {
|
|
|
|
const { inlineSize } = entry.borderBoxSize[0]
|
|
|
|
setRightPanelWidth(inlineSize)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
resizeRightPanelObserver.observe(rightPanelRef.current)
|
|
|
|
return () => {
|
|
|
|
resizeRightPanelObserver.disconnect()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [setRightPanelWidth])
|
|
|
|
|
|
|
|
const otherPanelRef = useRef<HTMLDivElement>(null)
|
|
|
|
const setOtherPanelWidth = useStore(s => s.setOtherPanelWidth)
|
|
|
|
|
|
|
|
// get other panel width
|
|
|
|
useEffect(() => {
|
|
|
|
if (otherPanelRef.current) {
|
|
|
|
const resizeOtherPanelObserver = new ResizeObserver((entries) => {
|
|
|
|
for (const entry of entries) {
|
|
|
|
const { inlineSize } = entry.borderBoxSize[0]
|
|
|
|
setOtherPanelWidth(inlineSize)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
resizeOtherPanelObserver.observe(otherPanelRef.current)
|
|
|
|
return () => {
|
|
|
|
resizeOtherPanelObserver.disconnect()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [setOtherPanelWidth])
|
2024-04-08 18:51:46 +08:00
|
|
|
return (
|
2024-04-25 14:02:06 +08:00
|
|
|
<div
|
2025-06-24 09:10:30 +08:00
|
|
|
ref={rightPanelRef}
|
2024-04-25 14:02:06 +08:00
|
|
|
tabIndex={-1}
|
2025-06-24 09:10:30 +08:00
|
|
|
className={cn('absolute bottom-1 right-0 top-14 z-10 flex outline-none')}
|
2024-04-25 14:02:06 +08:00
|
|
|
key={`${isRestoring}`}
|
|
|
|
>
|
2024-04-08 18:51:46 +08:00
|
|
|
{
|
2025-04-18 13:59:12 +08:00
|
|
|
components?.left
|
2024-04-08 18:51:46 +08:00
|
|
|
}
|
2024-04-28 17:09:56 +08:00
|
|
|
{
|
|
|
|
!!selectedNode && (
|
|
|
|
<NodePanel {...selectedNode!} />
|
|
|
|
)
|
|
|
|
}
|
2025-06-24 09:10:30 +08:00
|
|
|
<div
|
|
|
|
className='relative'
|
|
|
|
ref={otherPanelRef}
|
|
|
|
>
|
|
|
|
{
|
|
|
|
components?.right
|
|
|
|
}
|
2025-06-26 15:21:24 +08:00
|
|
|
{
|
|
|
|
showWorkflowVersionHistoryPanel && (
|
|
|
|
<VersionHistoryPanel {...versionHistoryPanelProps} />
|
|
|
|
)
|
|
|
|
}
|
2025-06-24 09:10:30 +08:00
|
|
|
{
|
|
|
|
showEnvPanel && (
|
|
|
|
<EnvPanel />
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</div>
|
2024-04-08 18:51:46 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default memo(Panel)
|