add full screen button

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()

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,
+  }
+}

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<HTMLDivElement>) => {
     if (getNodesReadOnly())
@@ -96,6 +101,19 @@ const Control = () => {
           <RiFunctionAddLine className='h-4 w-4' />
         </div>
       </TipPopup>
+      <TipPopup title={maximizeCanvas ? t('workflow.panel.minimize') : t('workflow.panel.maximize')} shortcuts={['f']}>
+        <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',
+            maximizeCanvas ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={handleToggleMaximizeCanvas}
+        >
+          {maximizeCanvas && <RiAspectRatioFill className='h-4 w-4' />}
+          {!maximizeCanvas && <RiAspectRatioLine className='h-4 w-4' />}
+        </div>
+      </TipPopup>
     </div>
   )
 }

web/app/components/workflow/operator/index.tsx

@@ -39,7 +39,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
         resizeContainerObserver.disconnect()
       }
     }
-  }, [setBottomPanelHeight])
+  }, [setBottomPanelHeight, setBottomPanelWidth])
 
   return (
     <div

web/app/components/workflow/store/workflow/layout-slice.ts

@@ -18,6 +18,8 @@ export type LayoutSliceShape = {
   setBottomPanelHeight: (height: number) => void
   variableInspectPanelHeight: number // min-height = 120px; default-height = 320px;
   setVariableInspectPanelHeight: (height: number) => void
+  maximizeCanvas: boolean
+  setMaximizeCanvas: (maximize: boolean) => void
 }
 
 export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
@@ -37,4 +39,6 @@ export const createLayoutSlice: StateCreator<LayoutSliceShape> = 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 })),
 })

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: {

web/i18n/zh-Hans/workflow.ts

@@ -308,6 +308,8 @@ const translation = {
     change: '更改',
     optional: '（选填）',
     moveToThisNode: '定位至此节点',
+    maximize: '最大化画布',
+    minimize: '退出最大化',
   },
   nodes: {
     common: {