feat(ui): canvas antialiasing

invokeai/frontend/web/public/locales/en.json

@@ -650,7 +650,8 @@
         "betaClear": "Clear",
         "betaDarkenOutside": "Darken Outside",
         "betaLimitToBox": "Limit To Box",
-        "betaPreserveMasked": "Preserve Masked"
+        "betaPreserveMasked": "Preserve Masked",
+        "antialiasing": "Antialiasing"
     },
     "ui": {
         "showProgressImages": "Show Progress Images",

invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx

@@ -34,6 +34,7 @@ import IAICanvasStagingAreaToolbar from './IAICanvasStagingAreaToolbar';
 import IAICanvasStatusText from './IAICanvasStatusText';
 import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
 import IAICanvasToolPreview from './IAICanvasToolPreview';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 
 const selector = createSelector(
   [canvasSelector, isStagingSelector],
@@ -52,6 +53,7 @@ const selector = createSelector(
       shouldShowIntermediates,
       shouldShowGrid,
       shouldRestrictStrokesToBox,
+      shouldAntialias,
     } = canvas;
 
     let stageCursor: string | undefined = 'none';
@@ -80,13 +82,10 @@ const selector = createSelector(
       tool,
       isStaging,
       shouldShowIntermediates,
+      shouldAntialias,
     };
   },
-  {
+  defaultSelectorOptions
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
 );
 
 const ChakraStage = chakra(Stage, {
@@ -106,6 +105,7 @@ const IAICanvas = () => {
     tool,
     isStaging,
     shouldShowIntermediates,
+    shouldAntialias,
   } = useAppSelector(selector);
   useCanvasHotkeys();
 
@@ -190,7 +190,7 @@ const IAICanvas = () => {
             id="base"
             ref={canvasBaseLayerRefCallback}
             listening={false}
-            imageSmoothingEnabled={false}
+            imageSmoothingEnabled={shouldAntialias}
           >
             <IAICanvasObjectRenderer />
           </Layer>
@@ -201,7 +201,7 @@ const IAICanvas = () => {
           <Layer>
             <IAICanvasBoundingBoxOverlay />
           </Layer>
-          <Layer id="preview" imageSmoothingEnabled={false}>
+          <Layer id="preview" imageSmoothingEnabled={shouldAntialias}>
             {!isStaging && (
               <IAICanvasToolPreview
                 visible={tool !== 'move'}

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -6,6 +6,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import {
+  setShouldAntialias,
   setShouldAutoSave,
   setShouldCropToBoundingBoxOnSave,
   setShouldDarkenOutsideBoundingBox,
@@ -36,6 +37,7 @@ export const canvasControlsSelector = createSelector(
       shouldShowIntermediates,
       shouldSnapToGrid,
       shouldRestrictStrokesToBox,
+      shouldAntialias,
     } = canvas;
 
     return {
@@ -47,6 +49,7 @@ export const canvasControlsSelector = createSelector(
       shouldShowIntermediates,
       shouldSnapToGrid,
       shouldRestrictStrokesToBox,
+      shouldAntialias,
     };
   },
   {
@@ -69,6 +72,7 @@ const IAICanvasSettingsButtonPopover = () => {
     shouldShowIntermediates,
     shouldSnapToGrid,
     shouldRestrictStrokesToBox,
+    shouldAntialias,
   } = useAppSelector(canvasControlsSelector);
 
   useHotkeys(
@@ -148,6 +152,12 @@ const IAICanvasSettingsButtonPopover = () => {
             dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
           }
         />
+
+        <IAICheckbox
+          label={t('unifiedCanvas.antialiasing')}
+          isChecked={shouldAntialias}
+          onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
+        />
         <ClearCanvasHistoryButtonModal />
         <EmptyTempFolderButtonModal />
       </Flex>

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -66,6 +66,7 @@ export const initialCanvasState: CanvasState = {
   minimumStageScale: 1,
   pastLayerStates: [],
   scaledBoundingBoxDimensions: { width: 512, height: 512 },
+  shouldAntialias: true,
   shouldAutoSave: false,
   shouldCropToBoundingBoxOnSave: false,
   shouldDarkenOutsideBoundingBox: false,
@@ -796,6 +797,9 @@ export const canvasSlice = createSlice({
     setShouldRestrictStrokesToBox: (state, action: PayloadAction<boolean>) => {
       state.shouldRestrictStrokesToBox = action.payload;
     },
+    setShouldAntialias: (state, action: PayloadAction<boolean>) => {
+      state.shouldAntialias = action.payload;
+    },
     setShouldCropToBoundingBoxOnSave: (
       state,
       action: PayloadAction<boolean>
@@ -907,6 +911,7 @@ export const {
   setShouldRestrictStrokesToBox,
   stagingAreaInitialized,
   canvasSessionIdChanged,
+  setShouldAntialias,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -37,7 +37,7 @@ export type CanvasImage = {
   y: number;
   width: number;
   height: number;
-  image: InvokeAI._Image;
+  image: InvokeAI.Image;
 };
 
 export type CanvasMaskLine = {
@@ -132,7 +132,7 @@ export interface CanvasState {
   cursorPosition: Vector2d | null;
   doesCanvasNeedScaling: boolean;
   futureLayerStates: CanvasLayerState[];
-  intermediateImage?: InvokeAI._Image;
+  intermediateImage?: InvokeAI.Image;
   isCanvasInitialized: boolean;
   isDrawing: boolean;
   isMaskEnabled: boolean;
@@ -149,6 +149,7 @@ export interface CanvasState {
   minimumStageScale: number;
   pastLayerStates: CanvasLayerState[];
   scaledBoundingBoxDimensions: Dimensions;
+  shouldAntialias: boolean;
   shouldAutoSave: boolean;
   shouldCropToBoundingBoxOnSave: boolean;
   shouldDarkenOutsideBoundingBox: boolean;

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx

@@ -6,6 +6,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import {
+  setShouldAntialias,
   setShouldAutoSave,
   setShouldCropToBoundingBoxOnSave,
   setShouldShowCanvasDebugInfo,
@@ -27,6 +28,7 @@ export const canvasControlsSelector = createSelector(
       shouldCropToBoundingBoxOnSave,
       shouldShowCanvasDebugInfo,
       shouldShowIntermediates,
+      shouldAntialias,
     } = canvas;
 
     return {
@@ -34,6 +36,7 @@ export const canvasControlsSelector = createSelector(
       shouldCropToBoundingBoxOnSave,
       shouldShowCanvasDebugInfo,
       shouldShowIntermediates,
+      shouldAntialias,
     };
   },
   {
@@ -52,6 +55,7 @@ const UnifiedCanvasSettings = () => {
     shouldCropToBoundingBoxOnSave,
     shouldShowCanvasDebugInfo,
     shouldShowIntermediates,
+    shouldAntialias,
   } = useAppSelector(canvasControlsSelector);
 
   return (
@@ -95,6 +99,11 @@ const UnifiedCanvasSettings = () => {
             dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
           }
         />
+        <IAICheckbox
+          label={t('unifiedCanvas.antialiasing')}
+          isChecked={shouldAntialias}
+          onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
+        />
         <ClearCanvasHistoryButtonModal />
         <EmptyTempFolderButtonModal />
       </Flex>