feat: added export workflow as img (#17904)

2025-04-14 11:18:18 +08:00
parent 0975c3c399
commit f84832e0c2
6 changed files with 4682 additions and 4097 deletions
--- a/web/app/components/workflow/operator/export-image.tsx
+++ b/web/app/components/workflow/operator/export-image.tsx
@@ -0,0 +1,131 @@
+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)