tidy(ui): organise files

invokeai/frontend/web/src/features/controlLayers/components/CanvasEditor.stories.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@invoke-ai/ui-library';
 import type { Meta, StoryObj } from '@storybook/react';
-import { CanvasEditor } from 'features/controlLayers/components/ControlLayersEditor';
+import { CanvasEditor } from 'features/controlLayers/components/CanvasEditor';
 
 const meta: Meta<typeof CanvasEditor> = {
   title: 'Feature/ControlLayers',

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

@@ -2,12 +2,12 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
 import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
-import { ControlLayersToolbar } from 'features/controlLayers/components/ControlLayersToolbar';
 import { Filter } from 'features/controlLayers/components/Filters/Filter';
 import { StageComponent } from 'features/controlLayers/components/StageComponent';
 import { StagingAreaIsStagingGate } from 'features/controlLayers/components/StagingArea/StagingAreaIsStagingGate';
 import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
-import { Transform } from 'features/controlLayers/components/Transform';
+import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
+import { Transform } from 'features/controlLayers/components/Transform/Transform';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useRef } from 'react';
 
@@ -28,7 +28,7 @@ export const CanvasEditor = memo(() => {
       alignItems="center"
       justifyContent="center"
     >
-      <ControlLayersToolbar />
+      <CanvasToolbar />
       <StageComponent />
       <Flex position="absolute" bottom={8} gap={2} align="center" justify="center">
         <CanvasManagerProviderGate>

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -1,19 +1,19 @@
 /* eslint-disable i18next/no-literal-string */
 import { Flex, Spacer } from '@invoke-ai/ui-library';
-import { CanvasResetViewButton } from 'features/controlLayers/components/CanvasResetViewButton';
-import { CanvasScale } from 'features/controlLayers/components/CanvasScale';
-import { SaveToGalleryButton } from 'features/controlLayers/components/SaveToGalleryButton';
 import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
 import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser';
 import { ToolFillColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
+import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
+import { CanvasToolbarSaveToGalleryButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton';
+import { CanvasToolbarScale } from 'features/controlLayers/components/Toolbar/CanvasToolbarScale';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCanvasUndoRedo } from 'features/controlLayers/hooks/useCanvasUndoRedo';
 import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
 import { ViewerToggle } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
 import { memo } from 'react';
 
-export const ControlLayersToolbar = memo(() => {
+export const CanvasToolbar = memo(() => {
   useCanvasUndoRedo();
 
   return (
@@ -24,11 +24,11 @@ export const ControlLayersToolbar = memo(() => {
         <Spacer />
         <ToolSettings />
         <Spacer />
-        <CanvasScale />
-        <CanvasResetViewButton />
+        <CanvasToolbarScale />
+        <CanvasToolbarResetViewButton />
         <Spacer />
         <ToolFillColorPicker />
-        <SaveToGalleryButton />
+        <CanvasToolbarSaveToGalleryButton />
         <CanvasSettingsPopover />
         <ViewerToggle />
       </Flex>
@@ -36,4 +36,4 @@ export const ControlLayersToolbar = memo(() => {
   );
 });
 
-ControlLayersToolbar.displayName = 'ControlLayersToolbar';
+CanvasToolbar.displayName = 'CanvasToolbar';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx

@@ -1,4 +1,4 @@
-import { $shift, IconButton } from '@invoke-ai/ui-library';
+import { $alt, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
 import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
@@ -7,7 +7,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
 
-export const CanvasResetViewButton = memo(() => {
+export const CanvasToolbarResetViewButton = memo(() => {
   const { t } = useTranslation();
   const canvasManager = useStore($canvasManager);
   const isCanvasActive = useStore(INTERACTION_SCOPES.canvas.$isActive);
@@ -27,7 +27,7 @@ export const CanvasResetViewButton = memo(() => {
   }, [canvasManager]);
 
   const onReset = useCallback(() => {
-    if ($shift.get()) {
+    if ($alt.get()) {
       resetView();
     } else {
       resetZoom();
@@ -35,7 +35,7 @@ export const CanvasResetViewButton = memo(() => {
   }, [resetView, resetZoom]);
 
   useHotkeys('r', resetView, { enabled: isCanvasActive }, [isCanvasActive]);
-  useHotkeys('shift+r', resetZoom, { enabled: isCanvasActive }, [isCanvasActive]);
+  useHotkeys('alt+r', resetZoom, { enabled: isCanvasActive }, [isCanvasActive]);
 
   return (
     <IconButton
@@ -48,4 +48,4 @@ export const CanvasResetViewButton = memo(() => {
   );
 });
 
-CanvasResetViewButton.displayName = 'CanvasResetViewButton';
+CanvasToolbarResetViewButton.displayName = 'CanvasToolbarResetViewButton';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx

@@ -13,7 +13,7 @@ const log = logger('canvas');
 
 const [useIsSaving] = buildUseBoolean(false);
 
-export const SaveToGalleryButton = memo(() => {
+export const CanvasToolbarSaveToGalleryButton = memo(() => {
   const { t } = useTranslation();
   const shift = useShiftModifier();
   const canvasManager = useCanvasManager();
@@ -50,4 +50,4 @@ export const SaveToGalleryButton = memo(() => {
   );
 });
 
-SaveToGalleryButton.displayName = 'SaveToGalleryButton';
+CanvasToolbarSaveToGalleryButton.displayName = 'CanvasToolbarSaveToGalleryButton';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx

@@ -70,7 +70,7 @@ const sliderDefaultValue = mapScaleToSliderValue(100);
 
 const snapCandidates = marks.slice(1, marks.length - 1);
 
-export const CanvasScale = memo(() => {
+export const CanvasToolbarScale = memo(() => {
   const { t } = useTranslation();
   const canvasManager = useCanvasManager();
   const scale = useStore(computed(canvasManager.stateApi.$stageAttrs, (attrs) => attrs.scale));
@@ -174,4 +174,4 @@ export const CanvasScale = memo(() => {
   );
 });
 
-CanvasScale.displayName = 'CanvasScale';
+CanvasToolbarScale.displayName = 'CanvasToolbarScale';

invokeai/frontend/web/src/features/ui/components/AppContent.tsx

@@ -2,7 +2,7 @@ import { Box, Flex } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
-import { CanvasEditor } from 'features/controlLayers/components/ControlLayersEditor';
+import { CanvasEditor } from 'features/controlLayers/components/CanvasEditor';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import { useIsImageViewerOpen } from 'features/gallery/components/ImageViewer/useImageViewer';