mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-07-31 23:52:07 +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 Divider from '../../base/divider'
|
||||||
import AddBlock from './add-block'
|
import AddBlock from './add-block'
|
||||||
import TipPopup from './tip-popup'
|
import TipPopup from './tip-popup'
|
||||||
|
import ExportImage from './export-image'
|
||||||
import { useOperator } from './hooks'
|
import { useOperator } from './hooks'
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
|
|
||||||
@ -83,6 +84,7 @@ const Control = () => {
|
|||||||
</div>
|
</div>
|
||||||
</TipPopup>
|
</TipPopup>
|
||||||
<Divider type='vertical' className='mx-0.5 h-3.5' />
|
<Divider type='vertical' className='mx-0.5 h-3.5' />
|
||||||
|
<ExportImage />
|
||||||
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
|
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
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',
|
pasteHere: 'Paste Here',
|
||||||
pointerMode: 'Pointer Mode',
|
pointerMode: 'Pointer Mode',
|
||||||
handMode: 'Hand Mode',
|
handMode: 'Hand Mode',
|
||||||
|
exportImage: 'Export Image',
|
||||||
|
exportPNG: 'Export as PNG',
|
||||||
|
exportJPEG: 'Export as JPEG',
|
||||||
|
exportSVG: 'Export as SVG',
|
||||||
model: 'Model',
|
model: 'Model',
|
||||||
workflowAsTool: 'Workflow as Tool',
|
workflowAsTool: 'Workflow as Tool',
|
||||||
configureRequired: 'Configure Required',
|
configureRequired: 'Configure Required',
|
||||||
|
@ -69,6 +69,10 @@ const translation = {
|
|||||||
pasteHere: '粘贴到这里',
|
pasteHere: '粘贴到这里',
|
||||||
pointerMode: '指针模式',
|
pointerMode: '指针模式',
|
||||||
handMode: '手模式',
|
handMode: '手模式',
|
||||||
|
exportImage: '导出图片',
|
||||||
|
exportPNG: '导出为 PNG',
|
||||||
|
exportJPEG: '导出为 JPEG',
|
||||||
|
exportSVG: '导出为 SVG',
|
||||||
model: '模型',
|
model: '模型',
|
||||||
workflowAsTool: '发布为工具',
|
workflowAsTool: '发布为工具',
|
||||||
configureRequired: '需要进行配置',
|
configureRequired: '需要进行配置',
|
||||||
|
@ -69,6 +69,7 @@
|
|||||||
"emoji-mart": "^5.5.2",
|
"emoji-mart": "^5.5.2",
|
||||||
"fast-deep-equal": "^3.1.3",
|
"fast-deep-equal": "^3.1.3",
|
||||||
"globals": "^15.11.0",
|
"globals": "^15.11.0",
|
||||||
|
"html-to-image": "1.11.11",
|
||||||
"i18next": "^23.16.4",
|
"i18next": "^23.16.4",
|
||||||
"i18next-resources-to-backend": "^1.2.1",
|
"i18next-resources-to-backend": "^1.2.1",
|
||||||
"immer": "^9.0.19",
|
"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