dify

dify/web/app/components/workflow/operator/add-block.tsx

@@ -0,0 +1,122 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { RiAddCircleFill } from '@remixicon/react'
+import { useStoreApi } from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import type { OffsetOptions } from '@floating-ui/react'
+import {
+  generateNewNode,
+  getNodeCustomTypeByNodeDataType,
+} from '../utils'
+import {
+  useAvailableBlocks,
+  useIsChatMode,
+  useNodesMetaData,
+  useNodesReadOnly,
+  usePanelInteractions,
+} from '../hooks'
+import { useHooksStore } from '../hooks-store'
+import { useWorkflowStore } from '../store'
+import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
+import BlockSelector from '@/app/components/workflow/block-selector'
+import type {
+  OnSelectBlock,
+} from '@/app/components/workflow/types'
+import {
+  BlockEnum,
+} from '@/app/components/workflow/types'
+import { FlowType } from '@/types/common'
+
+type AddBlockProps = {
+  renderTrigger?: (open: boolean) => React.ReactNode
+  offset?: OffsetOptions
+}
+const AddBlock = ({
+  renderTrigger,
+  offset,
+}: AddBlockProps) => {
+  const { t } = useTranslation()
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const isChatMode = useIsChatMode()
+  const { nodesReadOnly } = useNodesReadOnly()
+  const { handlePaneContextmenuCancel } = usePanelInteractions()
+  const [open, setOpen] = useState(false)
+  const { availableNextBlocks } = useAvailableBlocks(BlockEnum.Start, false)
+  const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
+  const flowType = useHooksStore(s => s.configsMap?.flowType)
+  const showStartTab = flowType !== FlowType.ragPipeline && !isChatMode
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    setOpen(open)
+    if (!open)
+      handlePaneContextmenuCancel()
+  }, [handlePaneContextmenuCancel])
+
+  const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
+    const {
+      getNodes,
+    } = store.getState()
+    const nodes = getNodes()
+    const nodesWithSameType = nodes.filter(node => node.data.type === type)
+    const {
+      defaultValue,
+    } = nodesMetaDataMap![type]
+    const { newNode } = generateNewNode({
+      type: getNodeCustomTypeByNodeDataType(type),
+      data: {
+        ...(defaultValue as any),
+        title: nodesWithSameType.length > 0 ? `${defaultValue.title} ${nodesWithSameType.length + 1}` : defaultValue.title,
+        ...pluginDefaultValue,
+        _isCandidate: true,
+      },
+      position: {
+        x: 0,
+        y: 0,
+      },
+    })
+    workflowStore.setState({
+      candidateNode: newNode,
+    })
+  }, [store, workflowStore, nodesMetaDataMap])
+
+  const renderTriggerElement = useCallback((open: boolean) => {
+    return (
+      <TipPopup
+        title={t('workflow.common.addBlock')}
+      >
+        <div className={cn(
+          'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          open && 'bg-state-accent-active text-text-accent',
+        )}>
+          <RiAddCircleFill className='h-4 w-4' />
+        </div>
+      </TipPopup>
+    )
+  }, [nodesReadOnly, t])
+
+  return (
+    <BlockSelector
+      open={open}
+      onOpenChange={handleOpenChange}
+      disabled={nodesReadOnly}
+      onSelect={handleSelect}
+      placement='right-start'
+      offset={offset ?? {
+        mainAxis: 4,
+        crossAxis: -8,
+      }}
+      trigger={renderTrigger || renderTriggerElement}
+      popupClassName='!min-w-[256px]'
+      availableBlocksTypes={availableNextBlocks}
+      showStartTab={showStartTab}
+    />
+  )
+}
+
+export default memo(AddBlock)

dify/web/app/components/workflow/operator/control.tsx

@@ -0,0 +1,121 @@
+import type { MouseEvent } from 'react'
+import {
+  memo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAspectRatioFill,
+  RiAspectRatioLine,
+  RiCursorLine,
+  RiFunctionAddLine,
+  RiHand,
+  RiStickyNoteAddLine,
+} from '@remixicon/react'
+import {
+  useNodesReadOnly,
+  useWorkflowCanvasMaximize,
+  useWorkflowMoveMode,
+  useWorkflowOrganize,
+} from '../hooks'
+import {
+  ControlMode,
+} from '../types'
+import { useStore } from '../store'
+import Divider from '../../base/divider'
+import AddBlock from './add-block'
+import TipPopup from './tip-popup'
+import MoreActions from './more-actions'
+import { useOperator } from './hooks'
+import cn from '@/utils/classnames'
+
+const Control = () => {
+  const { t } = useTranslation()
+  const controlMode = useStore(s => s.controlMode)
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
+  const { handleModePointer, handleModeHand } = useWorkflowMoveMode()
+  const { handleLayout } = useWorkflowOrganize()
+  const { handleAddNote } = useOperator()
+  const {
+    nodesReadOnly,
+    getNodesReadOnly,
+  } = useNodesReadOnly()
+  const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
+
+  const addNote = (e: MouseEvent<HTMLDivElement>) => {
+    if (getNodesReadOnly())
+      return
+
+    e.stopPropagation()
+    handleAddNote()
+  }
+
+  return (
+    <div className='pointer-events-auto flex flex-col items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
+      <AddBlock />
+      <TipPopup title={t('workflow.nodes.note.addNote')}>
+        <div
+          className={cn(
+            'ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={addNote}
+        >
+          <RiStickyNoteAddLine className='h-4 w-4' />
+        </div>
+      </TipPopup>
+      <Divider className='my-1 w-3.5' />
+      <TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
+        <div
+          className={cn(
+            'mr-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            controlMode === ControlMode.Pointer ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={handleModePointer}
+        >
+          <RiCursorLine className='h-4 w-4' />
+        </div>
+      </TipPopup>
+      <TipPopup title={t('workflow.common.handMode')} shortcuts={['h']}>
+        <div
+          className={cn(
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            controlMode === ControlMode.Hand ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={handleModeHand}
+        >
+          <RiHand className='h-4 w-4' />
+        </div>
+      </TipPopup>
+      <Divider className='my-1 w-3.5' />
+      <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
+        <div
+          className={cn(
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={handleLayout}
+        >
+          <RiFunctionAddLine className='h-4 w-4' />
+        </div>
+      </TipPopup>
+      <TipPopup title={maximizeCanvas ? t('workflow.panel.minimize') : t('workflow.panel.maximize')} shortcuts={['f']}>
+        <div
+          className={cn(
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            maximizeCanvas ? 'bg-state-accent-active text-text-accent hover:text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={handleToggleMaximizeCanvas}
+        >
+          {maximizeCanvas && <RiAspectRatioFill className='h-4 w-4' />}
+          {!maximizeCanvas && <RiAspectRatioLine className='h-4 w-4' />}
+        </div>
+      </TipPopup>
+      <MoreActions />
+    </div>
+  )
+}
+
+export default memo(Control)

dify/web/app/components/workflow/operator/hooks.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react'
+import { generateNewNode } from '../utils'
+import { useWorkflowStore } from '../store'
+import type { NoteNodeType } from '../note-node/types'
+import { CUSTOM_NOTE_NODE } from '../note-node/constants'
+import { NoteTheme } from '../note-node/types'
+import { useAppContext } from '@/context/app-context'
+
+export const useOperator = () => {
+  const workflowStore = useWorkflowStore()
+  const { userProfile } = useAppContext()
+
+  const handleAddNote = useCallback(() => {
+    const { newNode } = generateNewNode({
+      type: CUSTOM_NOTE_NODE,
+      data: {
+        title: '',
+        desc: '',
+        type: '' as any,
+        text: '',
+        theme: NoteTheme.blue,
+        author: userProfile?.name || '',
+        showAuthor: true,
+        width: 240,
+        height: 88,
+        _isCandidate: true,
+      } as NoteNodeType,
+      position: {
+        x: 0,
+        y: 0,
+      },
+    })
+    workflowStore.setState({
+      candidateNode: newNode,
+    })
+  }, [workflowStore, userProfile])
+
+  return {
+    handleAddNote,
+  }
+}

dify/web/app/components/workflow/operator/index.tsx

@@ -0,0 +1,88 @@
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import type { Node } from 'reactflow'
+import { MiniMap } from 'reactflow'
+import UndoRedo from '../header/undo-redo'
+import ZoomInOut from './zoom-in-out'
+import VariableTrigger from '../variable-inspect/trigger'
+import VariableInspectPanel from '../variable-inspect'
+import { useStore } from '../store'
+
+export type OperatorProps = {
+  handleUndo: () => void
+  handleRedo: () => void
+}
+
+const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
+  const bottomPanelRef = useRef<HTMLDivElement>(null)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const rightPanelWidth = useStore(s => s.rightPanelWidth)
+  const setBottomPanelWidth = useStore(s => s.setBottomPanelWidth)
+  const setBottomPanelHeight = useStore(s => s.setBottomPanelHeight)
+
+  const bottomPanelWidth = useMemo(() => {
+    if (!workflowCanvasWidth || !rightPanelWidth)
+      return 'auto'
+    return Math.max((workflowCanvasWidth - rightPanelWidth), 400)
+  }, [workflowCanvasWidth, rightPanelWidth])
+
+  const getMiniMapNodeClassName = useCallback((node: Node) => {
+    return node.data?.selected
+      ? 'bg-workflow-minimap-block border-components-option-card-option-selected-border'
+      : 'bg-workflow-minimap-block'
+  }, [])
+
+  // update bottom panel height
+  useEffect(() => {
+    if (bottomPanelRef.current) {
+      const resizeContainerObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { inlineSize, blockSize } = entry.borderBoxSize[0]
+          setBottomPanelWidth(inlineSize)
+          setBottomPanelHeight(blockSize)
+        }
+      })
+      resizeContainerObserver.observe(bottomPanelRef.current)
+      return () => {
+        resizeContainerObserver.disconnect()
+      }
+    }
+  }, [setBottomPanelHeight, setBottomPanelWidth])
+
+  return (
+    <div
+      ref={bottomPanelRef}
+      className='absolute bottom-0 left-0 right-0 z-10 px-1'
+      style={
+        {
+          width: bottomPanelWidth,
+        }
+      }
+    >
+      <div className='flex justify-between px-1 pb-2'>
+        <div className='flex items-center gap-2'>
+          <UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
+        </div>
+        <VariableTrigger />
+        <div className='relative'>
+          <MiniMap
+            pannable
+            zoomable
+            style={{
+              width: 102,
+              height: 72,
+            }}
+            maskColor='var(--color-workflow-minimap-bg)'
+            nodeClassName={getMiniMapNodeClassName}
+            nodeStrokeWidth={3}
+            className='!absolute !bottom-10 z-[9] !m-0 !h-[73px] !w-[103px] !rounded-lg !border-[0.5px]
+            !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
+          />
+          <ZoomInOut />
+        </div>
+      </div>
+      <VariableInspectPanel />
+    </div>
+  )
+}
+
+export default memo(Operator)

dify/web/app/components/workflow/operator/more-actions.tsx

@@ -0,0 +1,272 @@
+import type { FC } from 'react'
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { useTranslation } from 'react-i18next'
+import { RiExportLine, RiMoreFill } from '@remixicon/react'
+import { toJpeg, toPng, toSvg } from 'html-to-image'
+import { useNodesReadOnly } from '../hooks'
+import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { getNodesBounds, useReactFlow } from 'reactflow'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'
+import { useStore } from '@/app/components/workflow/store'
+import { useStore as useAppStore } from '@/app/components/app/store'
+
+const MoreActions: FC = () => {
+  const { t } = useTranslation()
+  const { getNodesReadOnly } = useNodesReadOnly()
+  const reactFlow = useReactFlow()
+
+  const [open, setOpen] = useState(false)
+  const [previewUrl, setPreviewUrl] = useState('')
+  const [previewTitle, setPreviewTitle] = useState('')
+  const knowledgeName = useStore(s => s.knowledgeName)
+  const appName = useStore(s => s.appName)
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
+  const { appSidebarExpand } = useAppStore(useShallow(state => ({
+    appSidebarExpand: state.appSidebarExpand,
+  })))
+
+  const crossAxisOffset = useMemo(() => {
+    if (maximizeCanvas) return 40
+    return appSidebarExpand === 'expand' ? 188 : 40
+  }, [appSidebarExpand, maximizeCanvas])
+
+  const handleExportImage = useCallback(async (type: 'png' | 'jpeg' | 'svg', currentWorkflow = false) => {
+    if (!appName && !knowledgeName)
+      return
+
+    if (getNodesReadOnly())
+      return
+
+    setOpen(false)
+    const flowElement = document.querySelector('.react-flow__viewport') as HTMLElement
+    if (!flowElement) return
+
+    try {
+      let filename = appName || knowledgeName
+      const filter = (node: HTMLElement) => {
+        if (node instanceof HTMLImageElement)
+          return node.complete && node.naturalHeight !== 0
+
+        return true
+      }
+
+      let dataUrl
+
+      if (currentWorkflow) {
+        const nodes = reactFlow.getNodes()
+        const nodesBounds = getNodesBounds(nodes)
+
+        const currentViewport = reactFlow.getViewport()
+
+        const viewportWidth = window.innerWidth
+        const viewportHeight = window.innerHeight
+        const zoom = Math.min(
+          viewportWidth / (nodesBounds.width + 100),
+          viewportHeight / (nodesBounds.height + 100),
+          1,
+        )
+
+        const centerX = nodesBounds.x + nodesBounds.width / 2
+        const centerY = nodesBounds.y + nodesBounds.height / 2
+
+        reactFlow.setViewport({
+          x: viewportWidth / 2 - centerX * zoom,
+          y: viewportHeight / 2 - centerY * zoom,
+          zoom,
+        })
+
+        await new Promise(resolve => setTimeout(resolve, 300))
+
+        const padding = 50
+        const contentWidth = nodesBounds.width + padding * 2
+        const contentHeight = nodesBounds.height + padding * 2
+
+        const exportOptions = {
+          filter,
+          backgroundColor: '#1a1a1a',
+          pixelRatio: 2,
+          width: contentWidth,
+          height: contentHeight,
+          style: {
+            width: `${contentWidth}px`,
+            height: `${contentHeight}px`,
+            transform: `translate(${padding - nodesBounds.x}px, ${padding - nodesBounds.y}px)`,
+            transformOrigin: 'top left',
+          },
+        }
+
+        switch (type) {
+          case 'png':
+            dataUrl = await toPng(flowElement, exportOptions)
+            break
+          case 'jpeg':
+            dataUrl = await toJpeg(flowElement, exportOptions)
+            break
+          case 'svg':
+            dataUrl = await toSvg(flowElement, { filter })
+            break
+          default:
+            dataUrl = await toPng(flowElement, exportOptions)
+        }
+
+        filename += '-whole-workflow'
+
+        setTimeout(() => {
+          reactFlow.setViewport(currentViewport)
+        }, 500)
+      }
+      else {
+        // Current viewport export (existing functionality)
+        switch (type) {
+          case 'png':
+            dataUrl = await toPng(flowElement, { filter })
+            break
+          case 'jpeg':
+            dataUrl = await toJpeg(flowElement, { filter })
+            break
+          case 'svg':
+            dataUrl = await toSvg(flowElement, { filter })
+            break
+          default:
+            dataUrl = await toPng(flowElement, { filter })
+        }
+      }
+
+      if (currentWorkflow) {
+        setPreviewUrl(dataUrl)
+        setPreviewTitle(`${filename}.${type}`)
+
+        const link = document.createElement('a')
+        link.href = dataUrl
+        link.download = `${filename}.${type}`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+      else {
+        // For current view, just download
+        const link = document.createElement('a')
+        link.href = dataUrl
+        link.download = `${filename}.${type}`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    }
+    catch (error) {
+      console.error('Export image failed:', error)
+    }
+  }, [getNodesReadOnly, appName, reactFlow, knowledgeName])
+
+  const handleTrigger = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    setOpen(v => !v)
+  }, [getNodesReadOnly])
+
+  return (
+    <>
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement="bottom-end"
+        offset={{
+          mainAxis: -200,
+          crossAxis: crossAxisOffset,
+        }}
+      >
+        <PortalToFollowElemTrigger>
+          <TipPopup title={t('workflow.common.moreActions')}>
+            <div
+              className={cn(
+                'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+                `${getNodesReadOnly() && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+              )}
+              onClick={handleTrigger}
+            >
+              <RiMoreFill className='h-4 w-4' />
+            </div>
+          </TipPopup>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-10'>
+          <div className='min-w-[180px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg'>
+            <div className='p-1'>
+              <div className='flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary'>
+                <RiExportLine className='h-3 w-3' />
+                {t('workflow.common.exportImage')}
+              </div>
+              <div className='px-2 py-1 text-xs font-medium text-text-tertiary'>
+                {t('workflow.common.currentView')}
+              </div>
+              <div
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+                onClick={() => handleExportImage('png')}
+              >
+                {t('workflow.common.exportPNG')}
+              </div>
+              <div
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+                onClick={() => handleExportImage('jpeg')}
+              >
+                {t('workflow.common.exportJPEG')}
+              </div>
+              <div
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+                onClick={() => handleExportImage('svg')}
+              >
+                {t('workflow.common.exportSVG')}
+              </div>
+
+              <div className='border-border-divider mx-2 my-1 border-t' />
+
+              <div className='px-2 py-1 text-xs font-medium text-text-tertiary'>
+                {t('workflow.common.currentWorkflow')}
+              </div>
+              <div
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+                onClick={() => handleExportImage('png', true)}
+              >
+                {t('workflow.common.exportPNG')}
+              </div>
+              <div
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+                onClick={() => handleExportImage('jpeg', true)}
+              >
+                {t('workflow.common.exportJPEG')}
+              </div>
+              <div
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+                onClick={() => handleExportImage('svg', true)}
+              >
+                {t('workflow.common.exportSVG')}
+              </div>
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+
+      {previewUrl && (
+        <ImagePreview
+          url={previewUrl}
+          title={previewTitle}
+          onCancel={() => setPreviewUrl('')}
+        />
+      )}
+    </>
+  )
+}
+
+export default memo(MoreActions)

dify/web/app/components/workflow/operator/tip-popup.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react'
+import ShortcutsName from '../shortcuts-name'
+import Tooltip from '@/app/components/base/tooltip'
+
+type TipPopupProps = {
+  title: string
+  children: React.ReactNode
+  shortcuts?: string[]
+}
+const TipPopup = ({
+  title,
+  children,
+  shortcuts,
+}: TipPopupProps) => {
+  return (
+    <Tooltip
+      needsDelay={false}
+      offset={4}
+      popupClassName='p-0 bg-transparent'
+      popupContent={
+        <div className='flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg backdrop-blur-[5px]'>
+          <span className='system-xs-medium text-text-secondary'>{title}</span>
+          {
+            shortcuts && <ShortcutsName keys={shortcuts} />
+          }
+        </div>
+      }
+    >
+      {children}
+    </Tooltip>
+  )
+}
+
+export default memo(TipPopup)

dify/web/app/components/workflow/operator/zoom-in-out.tsx

@@ -0,0 +1,229 @@
+import type { FC } from 'react'
+import {
+  Fragment,
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import {
+  RiZoomInLine,
+  RiZoomOutLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import {
+  useReactFlow,
+  useViewport,
+} from 'reactflow'
+import {
+  useNodesSyncDraft,
+  useWorkflowReadOnly,
+} from '../hooks'
+
+import ShortcutsName from '../shortcuts-name'
+import Divider from '../../base/divider'
+import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+enum ZoomType {
+  zoomIn = 'zoomIn',
+  zoomOut = 'zoomOut',
+  zoomToFit = 'zoomToFit',
+  zoomTo25 = 'zoomTo25',
+  zoomTo50 = 'zoomTo50',
+  zoomTo75 = 'zoomTo75',
+  zoomTo100 = 'zoomTo100',
+  zoomTo200 = 'zoomTo200',
+}
+
+const ZoomInOut: FC = () => {
+  const { t } = useTranslation()
+  const {
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    fitView,
+  } = useReactFlow()
+  const { zoom } = useViewport()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const [open, setOpen] = useState(false)
+  const {
+    workflowReadOnly,
+    getWorkflowReadOnly,
+  } = useWorkflowReadOnly()
+
+  const ZOOM_IN_OUT_OPTIONS = [
+    [
+      {
+        key: ZoomType.zoomTo200,
+        text: '200%',
+      },
+      {
+        key: ZoomType.zoomTo100,
+        text: '100%',
+      },
+      {
+        key: ZoomType.zoomTo75,
+        text: '75%',
+      },
+      {
+        key: ZoomType.zoomTo50,
+        text: '50%',
+      },
+      {
+        key: ZoomType.zoomTo25,
+        text: '25%',
+      },
+    ],
+    [
+      {
+        key: ZoomType.zoomToFit,
+        text: t('workflow.operator.zoomToFit'),
+      },
+    ],
+  ]
+
+  const handleZoom = (type: string) => {
+    if (workflowReadOnly)
+      return
+
+    if (type === ZoomType.zoomToFit)
+      fitView()
+
+    if (type === ZoomType.zoomTo25)
+      zoomTo(0.25)
+
+    if (type === ZoomType.zoomTo50)
+      zoomTo(0.5)
+
+    if (type === ZoomType.zoomTo75)
+      zoomTo(0.75)
+
+    if (type === ZoomType.zoomTo100)
+      zoomTo(1)
+
+    if (type === ZoomType.zoomTo200)
+      zoomTo(2)
+
+    handleSyncWorkflowDraft()
+  }
+
+  const handleTrigger = useCallback(() => {
+    if (getWorkflowReadOnly())
+      return
+
+    setOpen(v => !v)
+  }, [getWorkflowReadOnly])
+
+  return (
+    <PortalToFollowElem
+      placement='top-start'
+      open={open}
+      onOpenChange={setOpen}
+      offset={{
+        mainAxis: 4,
+        crossAxis: -2,
+      }}
+    >
+      <PortalToFollowElemTrigger asChild>
+        <div className={`
+          h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg
+          p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]
+          hover:bg-state-base-hover
+          ${workflowReadOnly && '!cursor-not-allowed opacity-50'}
+        `}>
+          <div className={cn(
+            'flex h-8 w-[98px] items-center justify-between rounded-lg',
+          )}>
+            <TipPopup
+              title={t('workflow.operator.zoomOut')}
+              shortcuts={['ctrl', '-']}
+            >
+              <div
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+                onClick={(e) => {
+                  if (zoom <= 0.25)
+                    return
+
+                  e.stopPropagation()
+                  zoomOut()
+                }}
+              >
+                <RiZoomOutLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
+              </div>
+            </TipPopup>
+            <div onClick={handleTrigger} className={cn('system-sm-medium w-[34px] text-text-tertiary hover:text-text-secondary')}>{Number.parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
+            <TipPopup
+              title={t('workflow.operator.zoomIn')}
+              shortcuts={['ctrl', '+']}
+            >
+              <div
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+                onClick={(e) => {
+                  if (zoom >= 2)
+                    return
+
+                  e.stopPropagation()
+                  zoomIn()
+                }}
+              >
+                <RiZoomInLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
+              </div>
+            </TipPopup>
+          </div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-10'>
+        <div className='w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+          {
+            ZOOM_IN_OUT_OPTIONS.map((options, i) => (
+              <Fragment key={i}>
+                {
+                  i !== 0 && (
+                    <Divider className='m-0' />
+                  )
+                }
+                <div className='p-1'>
+                  {
+                    options.map(option => (
+                      <div
+                        key={option.key}
+                        className='system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2 text-text-secondary hover:bg-state-base-hover'
+                        onClick={() => handleZoom(option.key)}
+                      >
+                        <span>{option.text}</span>
+                        <div className='flex items-center space-x-0.5'>
+                          {
+                            option.key === ZoomType.zoomToFit && (
+                              <ShortcutsName keys={['ctrl', '1']} />
+                            )
+                          }
+                          {
+                            option.key === ZoomType.zoomTo50 && (
+                              <ShortcutsName keys={['shift', '5']} />
+                            )
+                          }
+                          {
+                            option.key === ZoomType.zoomTo100 && (
+                              <ShortcutsName keys={['shift', '1']} />
+                            )
+                          }
+                        </div>
+                      </div>
+                    ))
+                  }
+                </div>
+              </Fragment>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(ZoomInOut)