dify/web/app/components/workflow/operator/export-image.tsx

import type { FC } from 'react'
import {
  memo,
  useCallback,
  useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import { toJpeg, toPng, toSvg } from 'html-to-image'
import { useNodesReadOnly } from '../hooks'
import TipPopup from './tip-popup'
import { RiExportLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import { useStore as useAppStore } from '@/app/components/app/store'
import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'

const ExportImage: FC = () => {
  const { t } = useTranslation()
  const { getNodesReadOnly } = useNodesReadOnly()

  const appDetail = useAppStore(s => s.appDetail)
  const [open, setOpen] = useState(false)

  const handleExportImage = useCallback(async (type: 'png' | 'jpeg' | 'svg') => {
    if (!appDetail)
      return

    if (getNodesReadOnly())
      return

    setOpen(false)
    const flowElement = document.querySelector('.react-flow__viewport') as HTMLElement
    if (!flowElement) return

    try {
      const filter = (node: HTMLElement) => {
        if (node instanceof HTMLImageElement)
          return node.complete && node.naturalHeight !== 0

        return true
      }

      let dataUrl
      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 })
      }

      const link = document.createElement('a')
      link.href = dataUrl
      link.download = `${appDetail.name}.${type}`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    catch (error) {
      console.error('Export image failed:', error)
    }
  }, [getNodesReadOnly, appDetail])

  const handleTrigger = useCallback(() => {
    if (getNodesReadOnly())
      return

    setOpen(v => !v)
  }, [getNodesReadOnly])

  return (
    <PortalToFollowElem
      open={open}
      onOpenChange={setOpen}
      placement="top-start"
      offset={{
        mainAxis: 4,
        crossAxis: -8,
      }}
    >
      <PortalToFollowElemTrigger>
        <TipPopup title={t('workflow.common.exportImage')}>
          <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}
          >
            <RiExportLine className='h-4 w-4' />
          </div>
        </TipPopup>
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-10'>
        <div className='min-w-[120px] 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='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>
        </div>
      </PortalToFollowElemContent>
    </PortalToFollowElem>
  )
}

export default memo(ExportImage)