feat(ui): rework isolated previewing

Previously the setting was `showOnlyRasterLayersWhileStaging`. This has been renamed to `isolatedStagingPreview`. Works the same.

Also added `isolatedFilteringPreview` an `isolatedTransformingPreview`. These work the same way, but they isolate the current selected layer. There are toggles in the canvas settings popover _and_ the filter/transform popups (same setting).

invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx

@@ -1,14 +1,24 @@
-import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, FormControl, FormLabel, Heading, Spacer, Switch } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
-import { memo } from 'react';
+import {
+  selectIsolatedTransformingPreview,
+  settingsIsolatedTransformingPreviewToggled,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsCounterClockwiseBold, PiArrowsOutBold, PiCheckBold, PiXBold } from 'react-icons/pi';
 
 const TransformBox = memo(({ adapter }: { adapter: CanvasEntityAdapter }) => {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const isProcessing = useStore(adapter.transformer.$isProcessing);
+  const isolatedTransformingPreview = useAppSelector(selectIsolatedTransformingPreview);
+  const onChangeIsolatedPreview = useCallback(() => {
+    dispatch(settingsIsolatedTransformingPreviewToggled());
+  }, [dispatch]);
 
   return (
     <Flex
@@ -23,9 +33,16 @@ const TransformBox = memo(({ adapter }: { adapter: CanvasEntityAdapter }) => {
       transitionProperty="height"
       transitionDuration="normal"
     >
-      <Heading size="md" color="base.300" userSelect="none">
-        {t('controlLayers.transform.transform')}
-      </Heading>
+      <Flex w="full" gap={4}>
+        <Heading size="md" color="base.300" userSelect="none">
+          {t('controlLayers.transform.transform')}
+        </Heading>
+        <Spacer />
+        <FormControl w="min-content">
+          <FormLabel m={0}>{t('controlLayers.settings.isolatedPreview')}</FormLabel>
+          <Switch size="sm" isChecked={isolatedTransformingPreview} onChange={onChangeIsolatedPreview} />
+        </FormControl>
+      </Flex>
       <ButtonGroup isAttached={false} size="sm" w="full">
         <Button
           leftIcon={<PiArrowsOutBold />}