From 5ca0f35356d6728e3984f9415e055e89e31cbd7d Mon Sep 17 00:00:00 2001
From: Artem Shinkaruk <artasend@gmail.com>
Date: Mon, 11 Nov 2024 23:09:04 +0200
Subject: [PATCH 1/2] Move modules from main page to features

- export-image
- save-project
- tool-panel-position
---
 src/features/export-image/index.ts            |  1 +
 .../export-image}/model/export-image.ts       | 11 +++--
 .../ui/export-image-dropdown.svelte           | 25 +++++++++++
 src/features/save-project/index.ts            |  2 +
 src/features/save-project/model/index.ts      |  1 +
 .../save-project}/model/save-project.ts       |  9 ++--
 .../ui/save-project-dropdown-item.svelte      | 12 ++++++
 .../main/model/hotkeys/register-hotkeys.ts    |  9 ++--
 src/pages/main/ui/main-page-header.svelte     | 42 ++++---------------
 src/widgets/tool-panel/index.ts               |  2 +-
 src/widgets/tool-panel/model/index.ts         |  1 -
 .../ui/tool-panel-dropdown-item.svelte        | 14 +++++++
 12 files changed, 80 insertions(+), 49 deletions(-)
 create mode 100644 src/features/export-image/index.ts
 rename src/{pages/main => features/export-image}/model/export-image.ts (74%)
 create mode 100644 src/features/export-image/ui/export-image-dropdown.svelte
 create mode 100644 src/features/save-project/index.ts
 create mode 100644 src/features/save-project/model/index.ts
 rename src/{pages/main => features/save-project}/model/save-project.ts (84%)
 create mode 100644 src/features/save-project/ui/save-project-dropdown-item.svelte
 delete mode 100644 src/widgets/tool-panel/model/index.ts
 create mode 100644 src/widgets/tool-panel/ui/tool-panel-dropdown-item.svelte

diff --git a/src/features/export-image/index.ts b/src/features/export-image/index.ts
new file mode 100644
index 0000000..ae23bac
--- /dev/null
+++ b/src/features/export-image/index.ts
@@ -0,0 +1 @@
+export { default as ExportImageDropdown } from './ui/export-image-dropdown.svelte';
diff --git a/src/pages/main/model/export-image.ts b/src/features/export-image/model/export-image.ts
similarity index 74%
rename from src/pages/main/model/export-image.ts
rename to src/features/export-image/model/export-image.ts
index 2f1e4da..4ab9aef 100644
--- a/src/pages/main/model/export-image.ts
+++ b/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) => {
diff --git a/src/features/export-image/ui/export-image-dropdown.svelte b/src/features/export-image/ui/export-image-dropdown.svelte
new file mode 100644
index 0000000..6152407
--- /dev/null
+++ b/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>
diff --git a/src/features/save-project/index.ts b/src/features/save-project/index.ts
new file mode 100644
index 0000000..d71f587
--- /dev/null
+++ b/src/features/save-project/index.ts
@@ -0,0 +1,2 @@
+export * from './model';
+export { default as SaveProjectDropdownItem } from './ui/save-project-dropdown-item.svelte';
diff --git a/src/features/save-project/model/index.ts b/src/features/save-project/model/index.ts
new file mode 100644
index 0000000..50e9131
--- /dev/null
+++ b/src/features/save-project/model/index.ts
@@ -0,0 +1 @@
+export { default as saveProject } from './save-project';
diff --git a/src/pages/main/model/save-project.ts b/src/features/save-project/model/save-project.ts
similarity index 84%
rename from src/pages/main/model/save-project.ts
rename to src/features/save-project/model/save-project.ts
index cedbd66..2bf0b1d 100644
--- a/src/pages/main/model/save-project.ts
+++ b/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) {
diff --git a/src/features/save-project/ui/save-project-dropdown-item.svelte b/src/features/save-project/ui/save-project-dropdown-item.svelte
new file mode 100644
index 0000000..372b33f
--- /dev/null
+++ b/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>
diff --git a/src/pages/main/model/hotkeys/register-hotkeys.ts b/src/pages/main/model/hotkeys/register-hotkeys.ts
index 0d46734..0f3e698 100644
--- a/src/pages/main/model/hotkeys/register-hotkeys.ts
+++ b/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(() =>
diff --git a/src/pages/main/ui/main-page-header.svelte b/src/pages/main/ui/main-page-header.svelte
index f12fc9c..5137332 100644
--- a/src/pages/main/ui/main-page-header.svelte
+++ b/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>
diff --git a/src/widgets/tool-panel/index.ts b/src/widgets/tool-panel/index.ts
index 486d65d..960cead 100644
--- a/src/widgets/tool-panel/index.ts
+++ b/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';
diff --git a/src/widgets/tool-panel/model/index.ts b/src/widgets/tool-panel/model/index.ts
deleted file mode 100644
index 16f6e64..0000000
--- a/src/widgets/tool-panel/model/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * as toolPanelStore from './store';
diff --git a/src/widgets/tool-panel/ui/tool-panel-dropdown-item.svelte b/src/widgets/tool-panel/ui/tool-panel-dropdown-item.svelte
new file mode 100644
index 0000000..9bd860a
--- /dev/null
+++ b/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>

From 4a1c49cd42ceb45e2c74a74bedea8e1a59d38ec0 Mon Sep 17 00:00:00 2001
From: Artem Shinkaruk <artasend@gmail.com>
Date: Mon, 11 Nov 2024 23:22:11 +0200
Subject: [PATCH 2/2] Remove main page types

---
 src/pages/main/types.ts | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 src/pages/main/types.ts

diff --git a/src/pages/main/types.ts b/src/pages/main/types.ts
deleted file mode 100644
index 2427b00..0000000
--- a/src/pages/main/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type MainPageRouterParams = {
-  projectId?: string;
-};