Cleanup and refactoring

src/features/export-image/index.ts

@@ -0,0 +1 @@
+export { default as ExportImageDropdown } from './ui/export-image-dropdown.svelte';

src/pages/main/model/export-image.ts → src/features/export-image/model/export-image.ts

@@ -1,17 +1,20 @@
-import { get } from 'svelte/store';
+import type { Viewport } from '@rastrr-editor/core';
 import { downloadBlob } from '~/shared/lib/url';
-import { viewport as viewportStore } from './store';
 
 const IMAGE_MIME_TYPE = {
   png: 'image/png',
   jpg: 'image/jpeg',
 };
 
-export default function exportImage(name: string, ext: 'png' | 'jpg'): void {
-  const viewport = get(viewportStore);
+export default function exportImage(
+  viewport: Viewport | null,
+  name: string,
+  ext: 'png' | 'jpg',
+): void {
   if (viewport == null) {
     return;
   }
+
   viewport
     .toBlob(IMAGE_MIME_TYPE[ext], ext === 'jpg' ? 0.85 : undefined)
     .then((blob) => {

src/features/export-image/ui/export-image-dropdown.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Viewport } from '@rastrr-editor/core';
+
+  import { projectStore } from '~/entities/project';
+  import { DropdownMenu, DropdownMenuItem } from '~/shared/ui';
+
+  import exportImage from '../model/export-image';
+
+  const { activeProject } = projectStore;
+
+  let { viewport }: { viewport: Viewport | null } = $props();
+</script>
+
+<DropdownMenu nested>
+  <DropdownMenuItem
+    disabled={$activeProject == null}
+    onclick={() => exportImage(viewport, $activeProject?.name ?? '', 'jpg')}>
+    JPEG
+  </DropdownMenuItem>
+  <DropdownMenuItem
+    disabled={$activeProject == null}
+    onclick={() => exportImage(viewport, $activeProject?.name ?? '', 'png')}>
+    PNG
+  </DropdownMenuItem>
+</DropdownMenu>

src/features/save-project/index.ts

@@ -0,0 +1,2 @@
+export * from './model';
+export { default as SaveProjectDropdownItem } from './ui/save-project-dropdown-item.svelte';

src/features/save-project/model/index.ts

@@ -0,0 +1 @@
+export { default as saveProject } from './save-project';

src/pages/main/model/save-project.ts → src/features/save-project/model/save-project.ts

@@ -1,14 +1,13 @@
 import { get } from 'svelte/store';
+import type { Viewport } from '@rastrr-editor/core';
 import { projectStore, createProjectRepository } from '~/entities/project';
 
-import { viewport as viewportStore } from './store';
-
 const projectRepository = createProjectRepository();
 
-export default async function saveProject(): Promise<boolean> {
+export default async function saveProject(
+  viewport: Viewport | null,
+): Promise<boolean> {
   const project = get(projectStore.activeProject);
-  const viewport = get(viewportStore);
-
   const isNewProject = project?.id == null;
 
   if (project && viewport) {

src/features/save-project/ui/save-project-dropdown-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Viewport } from '@rastrr-editor/core';
+  import { DropdownMenuItem } from '~/shared/ui';
+  import { saveProject } from '../model';
+
+  let { viewport }: { viewport: Viewport | null } = $props();
+
+  const onSaveProject = () =>
+    saveProject(viewport).then(() => console.log('Saved'));
+</script>
+
+<DropdownMenuItem onclick={onSaveProject}>Сохранить проект</DropdownMenuItem>

src/pages/main/model/hotkeys/register-hotkeys.ts

@@ -1,17 +1,20 @@
+import { get } from 'svelte/store';
 import { hotkeys } from '~/features/hotkeys-manager';
+import { saveProject } from '~/features/save-project';
+
 import { brushConstants, BrushTool } from '~/features/tools/brush';
 import { eraserConstants, EraserTool } from '~/features/tools/eraser';
+import { toolStore, type Tool } from '~/entities/tool';
+
 import {
   ellipseConstants,
   EllipseTool,
   rectConstants,
   RectTool,
 } from '~/features/tools/shape';
-import { toolStore, type Tool } from '~/entities/tool';
 
 import { handleHistoryHotkeys, HistoryEvents } from './handle-history-hotkeys';
 
-import saveProject from '../save-project';
 import { viewport } from '../store';
 
 export default function registerHotkeys(): () => void {
@@ -30,7 +33,7 @@ export default function registerHotkeys(): () => void {
 
   hotkeys.emitter.on('activated:save', (_alias, _ctx, e) => {
     e.preventDefault();
-    saveProject().then(() => console.log('Saved'));
+    saveProject(get(viewport)).then(() => console.log('Saved'));
   });
 
   subscriptions.push(() =>

src/pages/main/ui/main-page-header.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import { link } from '~/shared/lib/actions/routing';
   import { Dropdown, DropdownMenu, DropdownMenuItem } from '~/shared/ui';
-  import { toolPanelStore } from '~/widgets/tool-panel';
-  import { projectStore } from '~/entities/project';
+  import { ExportImageDropdown } from '~/features/export-image';
+  import { SaveProjectDropdownItem } from '~/features/save-project';
+  import { ToolPanelDropdownItem } from '~/widgets/tool-panel';
 
-  import exportImage from '../model/export-image';
-  import saveProject from '../model/save-project';
-
-  const { position: toolPanelPosition } = toolPanelStore;
-  const { activeProject } = projectStore;
+  import { viewport } from '../model/store';
 
   interface Props {
     onCreateNewProject: () => void;
@@ -18,8 +15,6 @@
 
   let openFileMenu: boolean = $state(false);
   let openViewMenu: boolean = $state(false);
-
-  const onSaveProject = () => saveProject().then(() => console.log('Saved'));
 </script>
 
 <header>
@@ -44,28 +39,13 @@
                 Создать проект
               </DropdownMenuItem>
 
-              <DropdownMenuItem onclick={onSaveProject}>
-                Сохранить проект
-              </DropdownMenuItem>
+              <SaveProjectDropdownItem viewport={$viewport} />
 
               <Dropdown nested hover>
                 <DropdownMenuItem nested>Сохранить как</DropdownMenuItem>
 
                 {#snippet menu()}
-                  <DropdownMenu nested>
-                    <DropdownMenuItem
-                      disabled={$activeProject == null}
-                      onclick={() =>
-                        exportImage($activeProject?.name ?? '', 'jpg')}>
-                      JPEG
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      disabled={$activeProject == null}
-                      onclick={() =>
-                        exportImage($activeProject?.name ?? '', 'png')}>
-                      PNG
-                    </DropdownMenuItem>
-                  </DropdownMenu>
+                  <ExportImageDropdown viewport={$viewport} />
                 {/snippet}
               </Dropdown>
             </DropdownMenu>
@@ -84,15 +64,7 @@
               <!-- <DropdownMenuItem onclick={() => console.log('Hide rulers...')}>
                 Скрыть линейки
               </DropdownMenuItem> -->
-              <DropdownMenuItem
-                onclick={() =>
-                  toolPanelStore.position.set(
-                    $toolPanelPosition === 'bottom' ? 'left' : 'bottom',
-                  )}>
-                Панель инструметов {$toolPanelPosition === 'bottom'
-                  ? 'слева'
-                  : 'снизу'}
-              </DropdownMenuItem>
+              <ToolPanelDropdownItem />
             </DropdownMenu>
           {/snippet}
         </Dropdown>

src/widgets/tool-panel/index.ts

@@ -1,2 +1,2 @@
+export { default as ToolPanelDropdownItem } from './ui/tool-panel-dropdown-item.svelte';
 export { default as ToolPanel } from './ui/tool-panel.svelte';
-export * from './model';

src/widgets/tool-panel/ui/tool-panel-dropdown-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenuItem } from '~/shared/ui';
+  import { position } from '../model/store';
+
+  const positionText = $derived($position === 'bottom' ? 'слева' : 'снизу');
+
+  const onclick = () => {
+    position.set($position === 'bottom' ? 'left' : 'bottom');
+  };
+</script>
+
+<DropdownMenuItem {onclick}>
+  Панель инструментов {positionText}
+</DropdownMenuItem>