InvokeAI/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx

import type { SystemStyleObject } from '@invoke-ai/ui-library';
import {
  ContextMenu,
  Divider,
  Flex,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
} from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
import { CanvasContextMenuGlobalMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems';
import { CanvasContextMenuSelectedEntityMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems';
import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
import { Filter } from 'features/controlLayers/components/Filters/Filter';
import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
import { SelectObject } from 'features/controlLayers/components/SelectObject/SelectObject';
import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context';
import { InitialState } from 'features/controlLayers/components/SimpleSession/InitialState';
import { StagingAreaItemsList } from 'features/controlLayers/components/SimpleSession/StagingAreaItemsList';
import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
import { Transform } from 'features/controlLayers/components/Transform/Transform';
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
import { memo, useCallback } from 'react';
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';

const FOCUS_REGION_STYLES: SystemStyleObject = {
  width: 'full',
  height: 'full',
};

const MenuContent = memo(() => {
  return (
    <CanvasManagerProviderGate>
      <MenuList>
        <CanvasContextMenuSelectedEntityMenuItems />
        <CanvasContextMenuGlobalMenuItems />
      </MenuList>
    </CanvasManagerProviderGate>
  );
});
MenuContent.displayName = 'MenuContent';

const canvasBgSx = {
  position: 'relative',
  w: 'full',
  h: 'full',
  borderRadius: 'base',
  overflow: 'hidden',
  bg: 'base.900',
  '&[data-dynamic-grid="true"]': {
    bg: 'base.850',
  },
};

export const AdvancedSession = memo(({ id }: { id: string | null }) => {
  const dynamicGrid = useAppSelector(selectDynamicGrid);
  const showHUD = useAppSelector(selectShowHUD);

  const renderMenu = useCallback(() => {
    return <MenuContent />;
  }, []);

  return (
    <Tabs w="full" h="full">
      <TabList>
        <Tab>Welcome</Tab>
        <Tab>Workspace</Tab>
        <Tab>Viewer</Tab>
      </TabList>
      <TabPanels w="full" h="full">
        <TabPanel w="full" h="full" justifyContent="center">
          <InitialState />
        </TabPanel>
        <TabPanel w="full" h="full">
          <FocusRegionWrapper region="canvas" sx={FOCUS_REGION_STYLES}>
            <Flex
              tabIndex={-1}
              borderRadius="base"
              position="relative"
              flexDirection="column"
              height="full"
              width="full"
              gap={2}
              alignItems="center"
              justifyContent="center"
              overflow="hidden"
            >
              <CanvasManagerProviderGate>
                <CanvasToolbar />
              </CanvasManagerProviderGate>
              <Divider />
              <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
                {(ref) => (
                  <Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
                    <InvokeCanvasComponent />
                    <CanvasManagerProviderGate>
                      <Flex
                        position="absolute"
                        flexDir="column"
                        top={1}
                        insetInlineStart={1}
                        pointerEvents="none"
                        gap={2}
                        alignItems="flex-start"
                      >
                        {showHUD && <CanvasHUD />}
                        <CanvasAlertsSelectedEntityStatus />
                        <CanvasAlertsPreserveMask />
                        <CanvasAlertsInvocationProgress />
                      </Flex>
                      <Flex position="absolute" top={1} insetInlineEnd={1}>
                        <Menu>
                          <MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
                          <MenuContent />
                        </Menu>
                      </Flex>
                    </CanvasManagerProviderGate>
                  </Flex>
                )}
              </ContextMenu>
              {id !== null && (
                <CanvasManagerProviderGate>
                  <CanvasSessionContextProvider type="advanced" id={id}>
                    <Flex
                      position="absolute"
                      flexDir="column"
                      bottom={4}
                      gap={2}
                      align="center"
                      justify="center"
                      left={4}
                      right={4}
                    >
                      <Flex position="relative" maxW="full" w="full" h={108}>
                        <StagingAreaItemsList />
                      </Flex>
                      <Flex gap={2}>
                        <StagingAreaToolbar />
                      </Flex>
                    </Flex>
                  </CanvasSessionContextProvider>
                </CanvasManagerProviderGate>
              )}
              <Flex position="absolute" bottom={4}>
                <CanvasManagerProviderGate>
                  <Filter />
                  <Transform />
                  <SelectObject />
                </CanvasManagerProviderGate>
              </Flex>
              <CanvasManagerProviderGate>
                <CanvasDropArea />
              </CanvasManagerProviderGate>
            </Flex>
          </FocusRegionWrapper>
        </TabPanel>
        <TabPanel w="full" h="full">
          <Flex flexDir="column" w="full" h="full">
            <ViewerToolbar />
            <ImageViewer />
          </Flex>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
});
AdvancedSession.displayName = 'AdvancedSession';