Allow to export full screen image of workflow (#23655)

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

@@ -16,15 +16,20 @@ import {
   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'
 
 const ExportImage: FC = () => {
   const { t } = useTranslation()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const reactFlow = useReactFlow()
 
   const appDetail = useAppStore(s => s.appDetail)
   const [open, setOpen] = useState(false)
+  const [previewUrl, setPreviewUrl] = useState('')
+  const [previewTitle, setPreviewTitle] = useState('')
 
-  const handleExportImage = useCallback(async (type: 'png' | 'jpeg' | 'svg') => {
+  const handleExportImage = useCallback(async (type: 'png' | 'jpeg' | 'svg', currentWorkflow = false) => {
     if (!appDetail)
       return
 
@@ -44,31 +49,123 @@ const ExportImage: FC = () => {
       }
 
       let dataUrl
-      switch (type) {
+      let filename = `${appDetail.name}`
-        case 'png':
+
-          dataUrl = await toPng(flowElement, { filter })
+      if (currentWorkflow) {
-          break
+        // Get all nodes and their bounds
-        case 'jpeg':
+        const nodes = reactFlow.getNodes()
-          dataUrl = await toJpeg(flowElement, { filter })
+        const nodesBounds = getNodesBounds(nodes)
-          break
+
-        case 'svg':
+        // Save current viewport
-          dataUrl = await toSvg(flowElement, { filter })
+        const currentViewport = reactFlow.getViewport()
-          break
+
-        default:
+        // Calculate the required zoom to fit all nodes
-          dataUrl = await toPng(flowElement, { filter })
+        const viewportWidth = window.innerWidth
+        const viewportHeight = window.innerHeight
+        const zoom = Math.min(
+          viewportWidth / (nodesBounds.width + 100),
+          viewportHeight / (nodesBounds.height + 100),
+          1,
+        )
+
+        // Calculate center position
+        const centerX = nodesBounds.x + nodesBounds.width / 2
+        const centerY = nodesBounds.y + nodesBounds.height / 2
+
+        // Set viewport to show all nodes
+        reactFlow.setViewport({
+          x: viewportWidth / 2 - centerX * zoom,
+          y: viewportHeight / 2 - centerY * zoom,
+          zoom,
+        })
+
+        // Wait for the transition to complete
+        await new Promise(resolve => setTimeout(resolve, 300))
+
+        // Calculate actual content size with padding
+        const padding = 50 // More padding for better visualization
+        const contentWidth = nodesBounds.width + padding * 2
+        const contentHeight = nodesBounds.height + padding * 2
+
+        // Export with higher quality for whole workflow
+        const exportOptions = {
+          filter,
+          backgroundColor: '#1a1a1a', // Dark background to match previous style
+          pixelRatio: 2, // Higher resolution for better zoom
+          width: contentWidth,
+          height: contentHeight,
+          style: {
+            width: `${contentWidth}px`,
+            height: `${contentHeight}px`,
+            transform: `translate(${padding - nodesBounds.x}px, ${padding - nodesBounds.y}px) scale(${zoom})`,
+          },
+        }
+
+        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'
+
+        // Restore original viewport after a delay
+        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 })
+        }
       }
 
-      const link = document.createElement('a')
+      if (currentWorkflow) {
-      link.href = dataUrl
+        // For whole workflow, show preview first
-      link.download = `${appDetail.name}.${type}`
+        setPreviewUrl(dataUrl)
-      document.body.appendChild(link)
+        setPreviewTitle(`${filename}.${type}`)
-      link.click()
+
-      document.body.removeChild(link)
+        // Also auto-download
+        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, appDetail])
+  }, [getNodesReadOnly, appDetail, reactFlow])
 
   const handleTrigger = useCallback(() => {
     if (getNodesReadOnly())
@@ -78,53 +175,90 @@ const ExportImage: FC = () => {
   }, [getNodesReadOnly])
 
   return (
-    <PortalToFollowElem
+    <>
-      open={open}
+      <PortalToFollowElem
-      onOpenChange={setOpen}
+        open={open}
-      placement="top-start"
+        onOpenChange={setOpen}
-      offset={{
+        placement="top-start"
-        mainAxis: 4,
+        offset={{
-        crossAxis: -8,
+          mainAxis: 4,
-      }}
+          crossAxis: -8,
-    >
+        }}
-      <PortalToFollowElemTrigger>
+      >
-        <TipPopup title={t('workflow.common.exportImage')}>
+        <PortalToFollowElemTrigger>
-          <div
+          <TipPopup title={t('workflow.common.exportImage')}>
-            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'
+              className={cn(
-              onClick={() => handleExportImage('png')}
+                '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}
             >
-              {t('workflow.common.exportPNG')}
+              <RiExportLine className='h-4 w-4' />
             </div>
-            <div
+          </TipPopup>
-              className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+        </PortalToFollowElemTrigger>
-              onClick={() => handleExportImage('jpeg')}
+        <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'>
-              {t('workflow.common.exportJPEG')}
+            <div className='p-1'>
-            </div>
+              <div className='px-2 py-1 text-xs font-medium text-text-tertiary'>
-            <div
+                {t('workflow.common.currentView')}
-              className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
+              </div>
-              onClick={() => handleExportImage('svg')}
+              <div
-            >
+                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
-              {t('workflow.common.exportSVG')}
+                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>
-        </div>
+        </PortalToFollowElemContent>
-      </PortalToFollowElemContent>
+      </PortalToFollowElem>
-    </PortalToFollowElem>
+
+      {previewUrl && (
+        <ImagePreview
+          url={previewUrl}
+          title={previewTitle}
+          onCancel={() => setPreviewUrl('')}
+        />
+      )}
+    </>
   )
 }
 

web/i18n/en-US/workflow.ts

@@ -74,6 +74,8 @@ const translation = {
     exportPNG: 'Export as PNG',
     exportJPEG: 'Export as JPEG',
     exportSVG: 'Export as SVG',
+    currentView: 'Current View',
+    currentWorkflow: 'Current Workflow',
     model: 'Model',
     workflowAsTool: 'Workflow as Tool',
     configureRequired: 'Configure Required',

web/i18n/ja-JP/workflow.ts

@@ -74,6 +74,8 @@ const translation = {
     exportPNG: 'PNG で出力',
     exportJPEG: 'JPEG で出力',
     exportSVG: 'SVG で出力',
+    currentView: '現在のビュー',
+    currentWorkflow: '現在のワークフロー',
     model: 'モデル',
     workflowAsTool: 'ワークフローをツールとして公開する',
     configureRequired: '設定が必要',

web/i18n/zh-Hans/workflow.ts

@@ -73,6 +73,8 @@ const translation = {
     exportPNG: '导出为 PNG',
     exportJPEG: '导出为 JPEG',
     exportSVG: '导出为 SVG',
+    currentView: '当前视图',
+    currentWorkflow: '整个工作流',
     model: '模型',
     workflowAsTool: '发布为工具',
     configureRequired: '需要进行配置',