full screen of workflow canvas

web/app/components/app-sidebar/app-sidebar-dropdown.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useRef, useState } from 'react'
+import { RiMenuLine } from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import AppIcon from '../base/app-icon'
+import Divider from '../base/divider'
+import AppInfo from './app-info'
+import NavLink from './navLink'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { NavIcon } from './navLink'
+import cn from '@/utils/classnames'
+
+type Props = {
+  navigation: Array<{
+    name: string
+    href: string
+    icon: NavIcon
+    selectedIcon: NavIcon
+  }>
+}
+
+const AppSidebarDropdown = ({ navigation }: Props) => {
+  const appDetail = useAppStore(state => state.appDetail)
+
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+  }, [doSetOpen])
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  if (!appDetail)
+    return null
+
+  return (
+    <div className='fixed left-2 top-2 z-[1000]'>
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement='bottom-start'
+        offset={{
+          mainAxis: -41,
+        }}
+      >
+        <PortalToFollowElemTrigger onClick={handleTrigger}>
+          <div className={cn('flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-sm hover:bg-background-default-hover', open && 'bg-background-default-hover')}>
+            <AppIcon
+              size='small'
+              iconType={appDetail.icon_type}
+              icon={appDetail.icon}
+              background={appDetail.icon_background}
+              imageUrl={appDetail.icon_url}
+            />
+            <RiMenuLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className={cn('w-[305px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg')}>
+            <div className='p-2'>
+              <AppInfo expand />
+            </div>
+            <div className='px-4'>
+              <Divider bgStyle='gradient' />
+            </div>
+            <nav className='space-y-0.5 px-3 pb-6 pt-4'>
+              {navigation.map((item, index) => {
+                return (
+                  <NavLink key={index} mode='expand' iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
+                )
+              })}
+            </nav>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </div>
+  )
+}
+
+export default AppSidebarDropdown

web/app/components/app-sidebar/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
 import { RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
 import NavLink from './navLink'
@@ -6,8 +7,10 @@ import type { NavIcon } from './navLink'
 import AppBasic from './basic'
 import AppInfo from './app-info'
 import DatasetInfo from './dataset-info'
+import AppSidebarDropdown from './app-sidebar-dropdown'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
 
 export type IAppDetailNavProps = {
@@ -39,6 +42,18 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
     setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
   }
 
+  // // Check if the current path is a workflow canvas & fullscreen
+  const pathname = usePathname()
+  const inWorkflowCanvas = pathname.endsWith('/workflow')
+  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
+  const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
+  const { eventEmitter } = useEventEmitterContextContext()
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v?.type === 'workflow-canvas-maximize')
+      setHideHeader(v.payload)
+  })
+
   useEffect(() => {
     if (appSidebarExpand) {
       localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
@@ -46,6 +61,9 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
     }
   }, [appSidebarExpand, setAppSiderbarExpand])
 
+  if (inWorkflowCanvas && hideHeader)
+    return <AppSidebarDropdown navigation={navigation} />
+
   return (
     <div
       className={`

web/app/components/header/header-wrapper.tsx

@@ -1,6 +1,8 @@
 'use client'
+import React, { useState } from 'react'
 import { usePathname } from 'next/navigation'
 import s from './index.module.css'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
 import classNames from '@/utils/classnames'
 
 type HeaderWrapperProps = {
@@ -12,6 +14,19 @@ const HeaderWrapper = ({
 }: HeaderWrapperProps) => {
   const pathname = usePathname()
   const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname)
+  // // Check if the current path is a workflow canvas & fullscreen
+  const inWorkflowCanvas = pathname.endsWith('/workflow')
+  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
+  const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
+  const { eventEmitter } = useEventEmitterContextContext()
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v?.type === 'workflow-canvas-maximize')
+      setHideHeader(v.payload)
+  })
+
+  if (hideHeader && inWorkflowCanvas)
+    return null
 
   return (
     <div className={classNames(

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

@@ -1,3 +1,4 @@
+import { usePathname } from 'next/navigation'
 import {
   useWorkflowMode,
 } from '../hooks'
@@ -6,7 +7,7 @@ import HeaderInNormal from './header-in-normal'
 import HeaderInHistory from './header-in-view-history'
 import type { HeaderInRestoringProps } from './header-in-restoring'
 import HeaderInRestoring from './header-in-restoring'
-
+import { useStore } from '../store'
 export type HeaderProps = {
   normal?: HeaderInNormalProps
   restoring?: HeaderInRestoringProps
@@ -15,16 +16,20 @@ const Header = ({
   normal: normalProps,
   restoring: restoringProps,
 }: HeaderProps) => {
+  const pathname = usePathname()
+  const inWorkflowCanvas = pathname.endsWith('/workflow')
   const {
     normal,
     restoring,
     viewHistory,
   } = useWorkflowMode()
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
 
   return (
     <div
       className='absolute left-0 top-0 z-10 flex h-14 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3'
     >
+      {inWorkflowCanvas && maximizeCanvas && <div className='h-14 w-[52px]' />}
       {
         normal && (
           <HeaderInNormal

web/app/components/workflow/hooks/use-workflow-interactions.ts

@@ -403,6 +403,8 @@ export const useDSL = () => {
 }
 
 export const useWorkflowCanvasMaximize = () => {
+  const { eventEmitter } = useEventEmitterContextContext()
+
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
   const setMaximizeCanvas = useStore(s => s.setMaximizeCanvas)
   const {
@@ -415,7 +417,11 @@ export const useWorkflowCanvasMaximize = () => {
 
     setMaximizeCanvas(!maximizeCanvas)
     localStorage.setItem('workflow-canvas-maximize', String(!maximizeCanvas))
-  }, [getNodesReadOnly, maximizeCanvas, setMaximizeCanvas])
+    eventEmitter?.emit({
+      type: 'workflow-canvas-maximize',
+      payload: !maximizeCanvas,
+    } as any)
+  }, [eventEmitter, getNodesReadOnly, maximizeCanvas, setMaximizeCanvas])
 
   return {
     handleToggleMaximizeCanvas,

web/app/components/workflow/index.tsx

@@ -302,7 +302,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
       <SyncingDataModal />
       <CandidateNode />
       <div
-        className='absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1'
+        className='absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1 pl-2'
         style={{ height: controlHeight }}
       >
         <Control />

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

@@ -105,7 +105,7 @@ const Control = () => {
         <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',
+            maximizeCanvas ? 'bg-state-accent-active text-text-accent hover: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}