From 05c939d41eebca73125a1ae793b00dc498660cbc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 23 Aug 2023 21:15:09 +1000
Subject: [PATCH] feat(ui): remove canvas beta layout

---
 .../SettingsModal/SettingsModal.tsx           | 22 +------
 .../UnifiedCanvas/UnifiedCanvasContent.tsx    | 60 ++-----------------
 2 files changed, 5 insertions(+), 77 deletions(-)

diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index 2db0b9551a..9f9f9fc58a 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -31,7 +31,6 @@ import {
 } from 'features/system/store/systemSlice';
 import {
   setShouldShowProgressInViewer,
-  setShouldUseCanvasBetaLayout,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
 import { isEqual } from 'lodash-es';
@@ -69,18 +68,13 @@ const selector = createSelector(
       shouldUseWatermarker,
     } = system;
 
-    const {
-      shouldUseCanvasBetaLayout,
-      shouldUseSliders,
-      shouldShowProgressInViewer,
-    } = ui;
+    const { shouldUseSliders, shouldShowProgressInViewer } = ui;
 
     const { shouldShowAdvancedOptions } = generation;
 
     return {
       shouldConfirmOnDelete,
       enableImageDebugging,
-      shouldUseCanvasBetaLayout,
       shouldUseSliders,
       shouldShowProgressInViewer,
       consoleLogLevel,
@@ -99,7 +93,6 @@ const selector = createSelector(
 type ConfigOptions = {
   shouldShowDeveloperSettings: boolean;
   shouldShowResetWebUiText: boolean;
-  shouldShowBetaLayout: boolean;
   shouldShowAdvancedOptionsSettings: boolean;
   shouldShowClearIntermediates: boolean;
   shouldShowLocalizationToggle: boolean;
@@ -116,7 +109,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
   const { t } = useTranslation();
   const [countdown, setCountdown] = useState(3);
 
-  const shouldShowBetaLayout = config?.shouldShowBetaLayout ?? true;
   const shouldShowDeveloperSettings =
     config?.shouldShowDeveloperSettings ?? true;
   const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
@@ -158,7 +150,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
   const {
     shouldConfirmOnDelete,
     enableImageDebugging,
-    shouldUseCanvasBetaLayout,
     shouldUseSliders,
     shouldShowProgressInViewer,
     consoleLogLevel,
@@ -306,17 +297,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     )
                   }
                 />
-                {shouldShowBetaLayout && (
-                  <SettingSwitch
-                    label={t('settings.alternateCanvasLayout')}
-                    useBadge
-                    badgeLabel={t('settings.beta')}
-                    isChecked={shouldUseCanvasBetaLayout}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
-                    }
-                  />
-                )}
                 {shouldShowLocalizationToggle && (
                   <IAIMantineSelect
                     disabled={!isLocalizationEnabled}
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
index 91bf4732c3..3258059e8d 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
@@ -1,29 +1,24 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasResizer from 'features/canvas/components/IAICanvasResizer';
 import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
-import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import { CanvasInitialImageDropData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useLayoutEffect } from 'react';
-import UnifiedCanvasToolSettingsBeta from './UnifiedCanvasBeta/UnifiedCanvasToolSettingsBeta';
-import UnifiedCanvasToolbarBeta from './UnifiedCanvasBeta/UnifiedCanvasToolbarBeta';
 
 const selector = createSelector(
-  [canvasSelector, uiSelector],
-  (canvas, ui) => {
+  [stateSelector],
+  ({ canvas }) => {
     const { doesCanvasNeedScaling } = canvas;
-    const { shouldUseCanvasBetaLayout } = ui;
     return {
       doesCanvasNeedScaling,
-      shouldUseCanvasBetaLayout,
     };
   },
   defaultSelectorOptions
@@ -37,8 +32,7 @@ const droppableData: CanvasInitialImageDropData = {
 const UnifiedCanvasContent = () => {
   const dispatch = useAppDispatch();
 
-  const { doesCanvasNeedScaling, shouldUseCanvasBetaLayout } =
-    useAppSelector(selector);
+  const { doesCanvasNeedScaling } = useAppSelector(selector);
 
   const {
     isOver,
@@ -59,52 +53,6 @@ const UnifiedCanvasContent = () => {
     return () => window.removeEventListener('resize', resizeCallback);
   }, [dispatch]);
 
-  if (shouldUseCanvasBetaLayout) {
-    return (
-      <Box
-        layerStyle="first"
-        ref={setDroppableRef}
-        tabIndex={0}
-        sx={{
-          w: 'full',
-          h: 'full',
-          p: 4,
-          borderRadius: 'base',
-        }}
-      >
-        <Flex
-          sx={{
-            w: 'full',
-            h: 'full',
-            gap: 4,
-          }}
-        >
-          <UnifiedCanvasToolbarBeta />
-          <Flex
-            sx={{
-              flexDir: 'column',
-              w: 'full',
-              h: 'full',
-              gap: 4,
-              position: 'relative',
-            }}
-          >
-            <UnifiedCanvasToolSettingsBeta />
-            <Box sx={{ w: 'full', h: 'full', position: 'relative' }}>
-              {doesCanvasNeedScaling ? <IAICanvasResizer /> : <IAICanvas />}
-              {isValidDrop(droppableData, active) && (
-                <IAIDropOverlay
-                  isOver={isOver}
-                  label="Set Canvas Initial Image"
-                />
-              )}
-            </Box>
-          </Flex>
-        </Flex>
-      </Box>
-    );
-  }
-
   return (
     <Box
       ref={setDroppableRef}