refactor: move canvas size to be a project-level setting instead of editor-level

1 files changed, 48 insertions, 93 deletions

diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
index a9c8f2ca..9923aa87 100644
--- a/apps/web/src/stores/editor-store.ts
+++ b/apps/web/src/stores/editor-store.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
-import { CanvasSize, CanvasPreset } from "@/types/editor";
+import { persist } from "zustand/middleware";
+import { CanvasPreset } from "@/types/editor";
 
-type CanvasMode = "preset" | "original" | "custom";
 export type PlatformLayout = "tiktok";
 
 export const PLATFORM_LAYOUTS: Record<PlatformLayout, string> = {
@@ -17,9 +17,7 @@ interface EditorState {
   isInitializing: boolean;
   isPanelsReady: boolean;
 
-  // Canvas/Project settings
-  canvasSize: CanvasSize;
-  canvasMode: CanvasMode;
+  // Editor UI settings
   canvasPresets: CanvasPreset[];
   layoutGuide: LayoutGuideSettings;
 
@@ -27,9 +25,6 @@ interface EditorState {
   setInitializing: (loading: boolean) => void;
   setPanelsReady: (ready: boolean) => void;
   initializeApp: () => Promise<void>;
-  setCanvasSize: (size: CanvasSize) => void;
-  setCanvasSizeToOriginal: (aspectRatio: number) => void;
-  setCanvasSizeFromAspectRatio: (aspectRatio: number) => void;
   setLayoutGuide: (settings: Partial<LayoutGuideSettings>) => void;
   toggleLayoutGuide: (platform: PlatformLayout) => void;
 }
@@ -41,96 +36,56 @@ const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [
   { name: "4:3", width: 1440, height: 1080 },
 ];
 
-// Helper function to find the best matching canvas preset for an aspect ratio
-const findBestCanvasPreset = (aspectRatio: number): CanvasSize => {
-  // Calculate aspect ratio for each preset and find the closest match
-  let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD
-  let smallestDifference = Math.abs(
-    aspectRatio - bestMatch.width / bestMatch.height
-  );
-
-  for (const preset of DEFAULT_CANVAS_PRESETS) {
-    const presetAspectRatio = preset.width / preset.height;
-    const difference = Math.abs(aspectRatio - presetAspectRatio);
-
-    if (difference < smallestDifference) {
-      smallestDifference = difference;
-      bestMatch = preset;
-    }
-  }
-
-  // If the difference is still significant (> 0.1), create a custom size
-  // based on the media aspect ratio with a reasonable resolution
-  const bestAspectRatio = bestMatch.width / bestMatch.height;
-  if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) {
-    // Create custom dimensions based on the aspect ratio
-    if (aspectRatio > 1) {
-      // Landscape - use 1920 width
-      return { width: 1920, height: Math.round(1920 / aspectRatio) };
-    }
-    // Portrait or square - use 1080 height
-    return { width: Math.round(1080 * aspectRatio), height: 1080 };
-  }
-
-  return { width: bestMatch.width, height: bestMatch.height };
-};
-
-export const useEditorStore = create<EditorState>((set, get) => ({
-  // Initial states
-  isInitializing: true,
-  isPanelsReady: false,
-  canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD
-  canvasMode: "preset" as CanvasMode,
-  canvasPresets: DEFAULT_CANVAS_PRESETS,
-  layoutGuide: {
-    platform: null,
-  },
-
-  // Actions
-  setInitializing: (loading) => {
-    set({ isInitializing: loading });
-  },
-
-  setPanelsReady: (ready) => {
-    set({ isPanelsReady: ready });
-  },
-
-  initializeApp: async () => {
-    console.log("Initializing video editor...");
-    set({ isInitializing: true, isPanelsReady: false });
+export const useEditorStore = create<EditorState>()(
+  persist(
+    (set) => ({
+      // Initial states
+      isInitializing: true,
+      isPanelsReady: false,
+      canvasPresets: DEFAULT_CANVAS_PRESETS,
+      layoutGuide: {
+        platform: null,
+      },
 
-    set({ isPanelsReady: true, isInitializing: false });
-    console.log("Video editor ready");
-  },
+      // Actions
+      setInitializing: (loading) => {
+        set({ isInitializing: loading });
+      },
 
-  setCanvasSize: (size) => {
-    set({ canvasSize: size, canvasMode: "preset" });
-  },
+      setPanelsReady: (ready) => {
+        set({ isPanelsReady: ready });
+      },
 
-  setCanvasSizeToOriginal: (aspectRatio) => {
-    const newCanvasSize = findBestCanvasPreset(aspectRatio);
-    set({ canvasSize: newCanvasSize, canvasMode: "original" });
-  },
+      initializeApp: async () => {
+        console.log("Initializing video editor...");
+        set({ isInitializing: true, isPanelsReady: false });
 
-  setCanvasSizeFromAspectRatio: (aspectRatio) => {
-    const newCanvasSize = findBestCanvasPreset(aspectRatio);
-    set({ canvasSize: newCanvasSize, canvasMode: "custom" });
-  },
+        set({ isPanelsReady: true, isInitializing: false });
+        console.log("Video editor ready");
+      },
 
-  setLayoutGuide: (settings) => {
-    set((state) => ({
-      layoutGuide: {
-        ...state.layoutGuide,
-        ...settings,
+      setLayoutGuide: (settings) => {
+        set((state) => ({
+          layoutGuide: {
+            ...state.layoutGuide,
+            ...settings,
+          },
+        }));
       },
-    }));
-  },
 
-  toggleLayoutGuide: (platform) => {
-    set((state) => ({
-      layoutGuide: {
-        platform: state.layoutGuide.platform === platform ? null : platform,
+      toggleLayoutGuide: (platform) => {
+        set((state) => ({
+          layoutGuide: {
+            platform: state.layoutGuide.platform === platform ? null : platform,
+          },
+        }));
       },
-    }));
-  },
-}));
+    }),
+    {
+      name: "editor-settings",
+      partialize: (state) => ({
+        layoutGuide: state.layoutGuide,
+      }),
+    }
+  )
+);