mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-07-31 01:06:59 +08:00
feat: added export workflow as img (#17904)
This commit is contained in:
parent
0975c3c399
commit
f84832e0c2
@ -21,6 +21,7 @@ import { useStore } from '../store'
|
||||
import Divider from '../../base/divider'
|
||||
import AddBlock from './add-block'
|
||||
import TipPopup from './tip-popup'
|
||||
import ExportImage from './export-image'
|
||||
import { useOperator } from './hooks'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
@ -83,6 +84,7 @@ const Control = () => {
|
||||
</div>
|
||||
</TipPopup>
|
||||
<Divider type='vertical' className='mx-0.5 h-3.5' />
|
||||
<ExportImage />
|
||||
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
|
||||
<div
|
||||
className={cn(
|
||||
|
131
web/app/components/workflow/operator/export-image.tsx
Normal file
131
web/app/components/workflow/operator/export-image.tsx
Normal file
@ -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)
|
@ -70,6 +70,10 @@ const translation = {
|
||||
pasteHere: 'Paste Here',
|
||||
pointerMode: 'Pointer Mode',
|
||||
handMode: 'Hand Mode',
|
||||
exportImage: 'Export Image',
|
||||
exportPNG: 'Export as PNG',
|
||||
exportJPEG: 'Export as JPEG',
|
||||
exportSVG: 'Export as SVG',
|
||||
model: 'Model',
|
||||
workflowAsTool: 'Workflow as Tool',
|
||||
configureRequired: 'Configure Required',
|
||||
|
@ -69,6 +69,10 @@ const translation = {
|
||||
pasteHere: '粘贴到这里',
|
||||
pointerMode: '指针模式',
|
||||
handMode: '手模式',
|
||||
exportImage: '导出图片',
|
||||
exportPNG: '导出为 PNG',
|
||||
exportJPEG: '导出为 JPEG',
|
||||
exportSVG: '导出为 SVG',
|
||||
model: '模型',
|
||||
workflowAsTool: '发布为工具',
|
||||
configureRequired: '需要进行配置',
|
||||
|
@ -69,6 +69,7 @@
|
||||
"emoji-mart": "^5.5.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"globals": "^15.11.0",
|
||||
"html-to-image": "1.11.11",
|
||||
"i18next": "^23.16.4",
|
||||
"i18next-resources-to-backend": "^1.2.1",
|
||||
"immer": "^9.0.19",
|
||||
|
8637
web/pnpm-lock.yaml
generated
8637
web/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user