node panel resize

2024-03-25 18:01:41 +08:00 · 2024-03-25 18:01:41 +08:00 · 07091c9d33
parent b3db119146
commit 07091c9d33
3 changed files with 206 additions and 62 deletions
--- a/web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts
@ -0,0 +1,116 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+export type UseResizePanelPrarams = {
+  direction?: 'horizontal' | 'vertical' | 'both'
+  triggerDirection?: 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+  minWidth?: number
+  maxWidth?: number
+  minHeight?: number
+  maxHeight?: number
+  onResized?: (width: number, height: number) => void
+}
+export const useResizePanel = (params?: UseResizePanelPrarams) => {
+  const {
+    direction = 'both',
+    triggerDirection = 'bottom-right',
+    minWidth = -Infinity,
+    maxWidth = Infinity,
+    minHeight = -Infinity,
+    maxHeight = Infinity,
+    onResized,
+  } = params || {}
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const initXRef = useRef(0)
+  const initYRef = useRef(0)
+  const initContainerWidthRef = useRef(0)
+  const initContainerHeightRef = useRef(0)
+  const isResizingRef = useRef(false)
+  const [prevUserSelectStyle, setPrevUserSelectStyle] = useState(getComputedStyle(document.body).userSelect)
+
+  const handleStartResize = useCallback((e: MouseEvent) => {
+    initXRef.current = e.clientX
+    initYRef.current = e.clientY
+    initContainerWidthRef.current = containerRef.current?.offsetWidth || minWidth
+    initContainerHeightRef.current = containerRef.current?.offsetHeight || minHeight
+    isResizingRef.current = true
+    setPrevUserSelectStyle(getComputedStyle(document.body).userSelect)
+    document.body.style.userSelect = 'none'
+  }, [minWidth, minHeight])
+
+  const handleResize = useCallback((e: MouseEvent) => {
+    if (!isResizingRef.current)
+      return
+
+    if (!containerRef.current)
+      return
+
+    if (direction === 'horizontal' || direction === 'both') {
+      const offsetX = e.clientX - initXRef.current
+      let width = 0
+      if (triggerDirection === 'left' || triggerDirection === 'top-left' || triggerDirection === 'bottom-left')
+        width = initContainerWidthRef.current - offsetX
+      else if (triggerDirection === 'right' || triggerDirection === 'top-right' || triggerDirection === 'bottom-right')
+        width = initContainerWidthRef.current + offsetX
+
+      if (width < minWidth)
+        width = minWidth
+      if (width > maxWidth)
+        width = maxWidth
+      containerRef.current.style.width = `${width}px`
+    }
+
+    if (direction === 'vertical' || direction === 'both') {
+      const offsetY = e.clientY - initYRef.current
+      let height = 0
+      if (triggerDirection === 'top' || triggerDirection === 'top-left' || triggerDirection === 'top-right')
+        height = initContainerHeightRef.current - offsetY
+      else if (triggerDirection === 'bottom' || triggerDirection === 'bottom-left' || triggerDirection === 'bottom-right')
+        height = initContainerHeightRef.current + offsetY
+
+      if (height < minHeight)
+        height = minHeight
+      if (height > maxHeight)
+        height = maxHeight
+
+      containerRef.current.style.height = `${height}px`
+    }
+  }, [
+    direction,
+    triggerDirection,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+  ])
+
+  const handleStopResize = useCallback(() => {
+    isResizingRef.current = false
+    document.body.style.userSelect = prevUserSelectStyle
+
+    if (onResized && containerRef.current)
+      onResized(containerRef.current.offsetWidth, containerRef.current.offsetHeight)
+  }, [prevUserSelectStyle, onResized])
+
+  useEffect(() => {
+    const element = triggerRef.current
+    element?.addEventListener('mousedown', handleStartResize)
+    document.addEventListener('mousemove', handleResize)
+    document.addEventListener('mouseup', handleStopResize)
+    return () => {
+      if (element)
+        element.removeEventListener('mousedown', handleStartResize)
+      document.removeEventListener('mousemove', handleResize)
+    }
+  }, [handleStartResize, handleResize, handleStopResize])
+
+  return {
+    triggerRef,
+    containerRef,
+  }
+}
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@ -14,6 +14,7 @@ import {
  DescriptionInput,
  TitleInput,
 } from './components/title-description-input'
+import { useResizePanel } from './hooks/use-resize-panel'
 import {
  XClose,
 } from '@/app/components/base/icons/src/vender/line/general'
@ -42,6 +43,7 @@ const BasePanel: FC<BasePanelProps> = ({
  children,
 }) => {
  const { t } = useTranslation()
+  const initPanelWidth = localStorage.getItem('workflow-node-panel-width') || 420
  const { handleNodeSelect } = useNodesInteractions()
  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
  const { nodesReadOnly } = useNodesReadOnly()
@ -49,6 +51,21 @@ const BasePanel: FC<BasePanelProps> = ({
  const availableNextNodes = nodesExtraData[data.type].availableNextNodes
  const toolIcon = useToolIcon(data)

+  const handleResized = useCallback((width: number) => {
+    localStorage.setItem('workflow-node-panel-width', `${width}`)
+  }, [])
+
+  const {
+    triggerRef,
+    containerRef,
+  } = useResizePanel({
+    direction: 'horizontal',
+    triggerDirection: 'left',
+    minWidth: 420,
+    maxWidth: 720,
+    onResized: handleResized,
+  })
+
  const {
    handleNodeDataUpdate,
    handleNodeDataUpdateWithSyncDraft,
@ -62,71 +79,82 @@ const BasePanel: FC<BasePanelProps> = ({
  }, [handleNodeDataUpdateWithSyncDraft, id])

  return (
-    <div className='w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'>
-      <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
-        <div className='flex items-center px-4 pt-4 pb-1'>
-          <BlockIcon
-            className='shrink-0 mr-1'
-            type={data.type}
-            toolIcon={toolIcon}
-            size='md'
-          />
-          <TitleInput
-            value={data.title || ''}
-            onBlur={handleTitleBlur}
-          />
-          <div className='shrink-0 flex items-center text-gray-500'>
-            {
-              canRunBySingle(data.type) && !nodesReadOnly && (
-                <TooltipPlus
-                  popupContent={t('workflow.panel.runThisStep')}
-                >
-                  <div
-                    className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
-                    onClick={() => {
-                      handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
-                      handleSyncWorkflowDraft(true)
-                    }}
+    <div className='relative h-full'>
+      <div
+        ref={triggerRef}
+        className='absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-6 bg-gray-300 rounded-sm cursor-col-resize resize-x'></div>
+      <div
+        ref={containerRef}
+        className='relative h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'
+        style={{
+          width: `${initPanelWidth}px`,
+        }}
+      >
+        <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
+          <div className='flex items-center px-4 pt-4 pb-1'>
+            <BlockIcon
+              className='shrink-0 mr-1'
+              type={data.type}
+              toolIcon={toolIcon}
+              size='md'
+            />
+            <TitleInput
+              value={data.title || ''}
+              onBlur={handleTitleBlur}
+            />
+            <div className='shrink-0 flex items-center text-gray-500'>
+              {
+                canRunBySingle(data.type) && !nodesReadOnly && (
+                  <TooltipPlus
+                    popupContent={t('workflow.panel.runThisStep')}
                  >
-                    <Play className='w-4 h-4 text-gray-500' />
-                  </div>
-                </TooltipPlus>
-              )
-            }
-            <PanelOperator id={id} data={data} />
-            <div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
-            <div
-              className='flex items-center justify-center w-6 h-6 cursor-pointer'
-              onClick={() => handleNodeSelect(id, true)}
-            >
-              <XClose className='w-4 h-4' />
+                    <div
+                      className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
+                      onClick={() => {
+                        handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
+                        handleSyncWorkflowDraft(true)
+                      }}
+                    >
+                      <Play className='w-4 h-4 text-gray-500' />
+                    </div>
+                  </TooltipPlus>
+                )
+              }
+              <PanelOperator id={id} data={data} />
+              <div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
+              <div
+                className='flex items-center justify-center w-6 h-6 cursor-pointer'
+                onClick={() => handleNodeSelect(id, true)}
+              >
+                <XClose className='w-4 h-4' />
+              </div>
            </div>
          </div>
-        </div>
-        <div className='p-2'>
-          <DescriptionInput
-            value={data.desc || ''}
-            onChange={handleDescriptionChange}
-          />
-        </div>
-      </div>
-      <div className='py-2'>
-        {cloneElement(children, { id, data })}
-      </div>
-      {
-        !!availableNextNodes.length && (
-          <div className='p-4 border-t-[0.5px] border-t-black/5'>
-            <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
-              <GitBranch01 className='mr-1 w-4 h-4' />
-              {t('workflow.panel.nextStep').toLocaleUpperCase()}
-            </div>
-            <div className='mb-2 text-xs text-gray-400'>
-              {t('workflow.panel.addNextStep')}
-            </div>
-            <NextStep selectedNode={{ id, data } as Node} />
+          <div className='p-2'>
+            <DescriptionInput
+              value={data.desc || ''}
+              onChange={handleDescriptionChange}
+            />
          </div>
-        )
-      }
+        </div>
+        <div className='py-2'>
+          {cloneElement(children, { id, data })}
+        </div>
+        {
+          !!availableNextNodes.length && (
+            <div className='p-4 border-t-[0.5px] border-t-black/5'>
+              <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
+                <GitBranch01 className='mr-1 w-4 h-4' />
+                {t('workflow.panel.nextStep').toLocaleUpperCase()}
+              </div>
+              <div className='mb-2 text-xs text-gray-400'>
+                {t('workflow.panel.addNextStep')}
+              </div>
+              <NextStep selectedNode={{ id, data } as Node} />
+            </div>
+          )
+        }
+      </div>
    </div>
  )
 }
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@ -25,7 +25,7 @@ const Operator = () => {

  return (
    <div className={`
-      absolute left-6 bottom-6 z-10
+      absolute left-6 bottom-6 z-[9]
    `}>
      <MiniMap
        style={{