From 7ed064b25e98fa904a4ecba6890e4d48b46483eb Mon Sep 17 00:00:00 2001 From: JzoNg Date: Mon, 16 Jun 2025 14:39:17 +0800 Subject: [PATCH] add full screen button --- .../workflow/hooks/use-shortcuts.ts | 12 +++++++++++ .../hooks/use-workflow-interactions.ts | 20 +++++++++++++++++++ .../components/workflow/operator/control.tsx | 18 +++++++++++++++++ .../components/workflow/operator/index.tsx | 2 +- .../workflow/store/workflow/layout-slice.ts | 4 ++++ web/i18n/en-US/workflow.ts | 2 ++ web/i18n/zh-Hans/workflow.ts | 2 ++ 7 files changed, 59 insertions(+), 1 deletion(-) diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts index 8b1003e89c..118ec94058 100644 --- a/web/app/components/workflow/hooks/use-shortcuts.ts +++ b/web/app/components/workflow/hooks/use-shortcuts.ts @@ -11,6 +11,7 @@ import { useEdgesInteractions, useNodesInteractions, useNodesSyncDraft, + useWorkflowCanvasMaximize, useWorkflowMoveMode, useWorkflowOrganize, useWorkflowStartRun, @@ -35,6 +36,7 @@ export const useShortcuts = (): void => { handleModePointer, } = useWorkflowMoveMode() const { handleLayout } = useWorkflowOrganize() + const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize() const { zoomTo, @@ -145,6 +147,16 @@ export const useShortcuts = (): void => { } }, { exactMatch: true, useCapture: true }) + useKeyPress('f', (e) => { + if (shouldHandleShortcut(e)) { + e.preventDefault() + handleToggleMaximizeCanvas() + } + }, { + exactMatch: true, + useCapture: true, + }) + useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.1`, (e) => { if (shouldHandleShortcut(e)) { e.preventDefault() diff --git a/web/app/components/workflow/hooks/use-workflow-interactions.ts b/web/app/components/workflow/hooks/use-workflow-interactions.ts index 636d3b94f9..0ef48ab76d 100644 --- a/web/app/components/workflow/hooks/use-workflow-interactions.ts +++ b/web/app/components/workflow/hooks/use-workflow-interactions.ts @@ -401,3 +401,23 @@ export const useDSL = () => { handleExportDSL, } } + +export const useWorkflowCanvasMaximize = () => { + const maximizeCanvas = useStore(s => s.maximizeCanvas) + const setMaximizeCanvas = useStore(s => s.setMaximizeCanvas) + const { + getNodesReadOnly, + } = useNodesReadOnly() + + const handleToggleMaximizeCanvas = useCallback(() => { + if (getNodesReadOnly()) + return + + setMaximizeCanvas(!maximizeCanvas) + localStorage.setItem('workflow-canvas-maximize', String(!maximizeCanvas)) + }, [getNodesReadOnly, maximizeCanvas, setMaximizeCanvas]) + + return { + handleToggleMaximizeCanvas, + } +} diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx index 81ed7a07fa..f86932da36 100644 --- a/web/app/components/workflow/operator/control.tsx +++ b/web/app/components/workflow/operator/control.tsx @@ -4,6 +4,8 @@ import { } from 'react' import { useTranslation } from 'react-i18next' import { + RiAspectRatioFill, + RiAspectRatioLine, RiCursorLine, RiFunctionAddLine, RiHand, @@ -11,6 +13,7 @@ import { } from '@remixicon/react' import { useNodesReadOnly, + useWorkflowCanvasMaximize, useWorkflowMoveMode, useWorkflowOrganize, } from '../hooks' @@ -28,6 +31,7 @@ import cn from '@/utils/classnames' const Control = () => { const { t } = useTranslation() const controlMode = useStore(s => s.controlMode) + const maximizeCanvas = useStore(s => s.maximizeCanvas) const { handleModePointer, handleModeHand } = useWorkflowMoveMode() const { handleLayout } = useWorkflowOrganize() const { handleAddNote } = useOperator() @@ -35,6 +39,7 @@ const Control = () => { nodesReadOnly, getNodesReadOnly, } = useNodesReadOnly() + const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize() const addNote = (e: MouseEvent) => { if (getNodesReadOnly()) @@ -96,6 +101,19 @@ const Control = () => { + +
+ {maximizeCanvas && } + {!maximizeCanvas && } +
+ ) } diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx index 07508214d8..4a472a755f 100644 --- a/web/app/components/workflow/operator/index.tsx +++ b/web/app/components/workflow/operator/index.tsx @@ -39,7 +39,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => { resizeContainerObserver.disconnect() } } - }, [setBottomPanelHeight]) + }, [setBottomPanelHeight, setBottomPanelWidth]) return (
void variableInspectPanelHeight: number // min-height = 120px; default-height = 320px; setVariableInspectPanelHeight: (height: number) => void + maximizeCanvas: boolean + setMaximizeCanvas: (maximize: boolean) => void } export const createLayoutSlice: StateCreator = set => ({ @@ -37,4 +39,6 @@ export const createLayoutSlice: StateCreator = set => ({ setBottomPanelHeight: height => set(() => ({ bottomPanelHeight: height })), variableInspectPanelHeight: localStorage.getItem('workflow-variable-inpsect-panel-height') ? Number.parseFloat(localStorage.getItem('workflow-variable-inpsect-panel-height')!) : 320, setVariableInspectPanelHeight: height => set(() => ({ variableInspectPanelHeight: height })), + maximizeCanvas: localStorage.getItem('workflow-canvas-maximize') === 'true', + setMaximizeCanvas: maximize => set(() => ({ maximizeCanvas: maximize })), }) diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 9cbf73fc97..c004bf2518 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -307,6 +307,8 @@ const translation = { organizeBlocks: 'Organize blocks', change: 'Change', optional: '(optional)', + maximize: 'Maximize Canvas', + minimize: 'Exit Full Screen', }, nodes: { common: { diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index bd009bbf02..0ce193e9b6 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -308,6 +308,8 @@ const translation = { change: '更改', optional: '（选填）', moveToThisNode: '定位至此节点', + maximize: '最大化画布', + minimize: '退出最大化', }, nodes: { common: {