langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-22 12:36:14 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #23655] Allow to export full screen image of workflow #30344

New Issue
Closed
opened 2026-02-21 20:47:19 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:47:19 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/23655

State: closed
Merged: Yes

Summary

Fix : #23443

Implementation Complete

I've successfully implemented the whole-workflow screenshot export feature with zoom functionality. Here's what was added:

Key Features:

  1. Export Options: The export dropdown now has two sections:
    - Current View: Original functionality (exports what you see)
    - Whole Workflow: New feature (exports entire workflow)
  2. Whole Workflow Export:
    - Temporarily fits view to show all nodes
    - Captures high-resolution image (2x pixel ratio)
    - Automatically downloads the image
    - Opens in preview modal with zoom capabilities
    - Restores original viewport after capture
  3. Zoom Functionality:
    - Uses existing ImagePreview component
    - Supports zoom in/out with mouse wheel or buttons
    - Pan when zoomed in
    - Keyboard shortcuts (ESC to close, arrows for zoom)
  4. Translations: Added for English, Chinese, and Japanese

Files Modified:

  • /web/app/components/workflow/operator/export-image.tsx - Main implementation
  • /web/i18n/en-US/workflow.ts - English translations
  • /web/i18n/zh-Hans/workflow.ts - Chinese translations
  • /web/i18n/ja-JP/workflow.ts - Japanese translations

Screenshots

image

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/23655 **State:** closed **Merged:** Yes --- ## Summary Fix : #23443 Implementation Complete I've successfully implemented the whole-workflow screenshot export feature with zoom functionality. Here's what was added: Key Features: 1. Export Options: The export dropdown now has two sections: - Current View: Original functionality (exports what you see) - Whole Workflow: New feature (exports entire workflow) 2. Whole Workflow Export: - Temporarily fits view to show all nodes - Captures high-resolution image (2x pixel ratio) - Automatically downloads the image - Opens in preview modal with zoom capabilities - Restores original viewport after capture 3. Zoom Functionality: - Uses existing ImagePreview component - Supports zoom in/out with mouse wheel or buttons - Pan when zoomed in - Keyboard shortcuts (ESC to close, arrows for zoom) 4. Translations: Added for English, Chinese, and Japanese Files Modified: - /web/app/components/workflow/operator/export-image.tsx - Main implementation - /web/i18n/en-US/workflow.ts - English translations - /web/i18n/zh-Hans/workflow.ts - Chinese translations - /web/i18n/ja-JP/workflow.ts - Japanese translations ## Screenshots <img width="252" height="282" alt="image" src="https://github.com/user-attachments/assets/38a2fc57-ca50-4aa6-833e-e53419aa7f9d" /> ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:19 -05:00
yindo closed this issue 2026-02-21 20:47:19 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30344
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?