Create flow functionalities (#387)

app/common/constants.ts

@@ -75,12 +75,10 @@ export enum MainChannels {
 
  // Storage
  GET_USER_SETTINGS = 'get-user-settings',
- GET_PROJECT_SETTINGS = 'get-project-settings',
  GET_APP_STATE = 'get-app-state',
  GET_PROJECTS = 'get-projects',
 
  UPDATE_USER_SETTINGS = 'update-user-settings',
- UPDATE_PROJECT_SETTINGS = 'update-project-settings',
  UPDATE_APP_STATE = 'update-app-state',
  UPDATE_PROJECTS = 'update-projects',
 }

app/common/models/project.ts

@@ -6,4 +6,28 @@ export interface Project {
  previewImg?: string;
  createdAt: string; // ISO 8601
  updatedAt: string; // ISO 8601
+ settings?: ProjectSettings;
+}
+
+export interface ProjectSettings {
+ scale?: number;
+ frames?: FrameSettings[];
+ position?: RectPosition;
+}
+
+export interface FrameSettings {
+ id: string;
+ url: string;
+ position: RectPosition;
+ dimension: RectDimension;
+}
+
+export interface RectPosition {
+ x: number;
+ y: number;
+}
+
+export interface RectDimension {
+ width: number;
+ height: number;
 }

app/common/models/settings.ts

@@ -1,32 +1,14 @@
 import { IdeType } from '../ide';
+import { Project } from './project';
 
 export interface UserSettings {
  id?: string;
  enableAnalytics?: boolean;
  ideType?: IdeType;
 }
 
-export interface RectPosition {
- x: number;
- y: number;
-}
-
-export interface RectDimension {
- width: number;
- height: number;
-}
-
-export interface FrameSettings {
- id: string;
- url: string;
- position: RectPosition;
- dimension: RectDimension;
-}
-
-export interface ProjectSettings {
- scale?: number;
- frames?: FrameSettings[];
- position?: RectPosition;
+export interface ProjectsCache {
+ projects: Project[];
 }
 
 export interface UserMetadata {

app/electron/main/events/storage.ts

@@ -1,7 +1,7 @@
 import { ipcMain } from 'electron';
 import { PersistentStorage } from '../storage';
 import { MainChannels } from '/common/constants';
-import { AppState, ProjectSettings, UserSettings } from '/common/models/settings';
+import { AppState, UserSettings } from '/common/models/settings';
 
 export function listenForStorageMessages() {
  ipcMain.handle(MainChannels.GET_USER_SETTINGS, (e: Electron.IpcMainInvokeEvent) => {
@@ -15,17 +15,6 @@ export function listenForStorageMessages() {
  },
  );
 
- ipcMain.handle(MainChannels.GET_PROJECT_SETTINGS, (e: Electron.IpcMainInvokeEvent) => {
- return PersistentStorage.PROJECT_SETTINGS.read();
- });
-
- ipcMain.handle(
- MainChannels.UPDATE_PROJECT_SETTINGS,
- (e: Electron.IpcMainInvokeEvent, args: ProjectSettings) => {
- PersistentStorage.PROJECT_SETTINGS.update(args);
- },
- );
-
  ipcMain.handle(MainChannels.GET_USER_METADATA, (e: Electron.IpcMainInvokeEvent) => {
  return PersistentStorage.USER_METADATA.read();
  });

app/electron/main/storage/index.ts

@@ -1,11 +1,10 @@
 import { UserMetadata } from '@supabase/supabase-js';
 import { app, safeStorage } from 'electron';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
-import { AppState, AuthTokens, ProjectSettings, UserSettings } from '/common/models/settings';
+import { AppState, AuthTokens, ProjectsCache, UserSettings } from '/common/models/settings';
 
 export enum StorageType {
  USER_SETTINGS = 'user-settings',
- PROJECT_SETTINGS = 'project-settings',
  APP_STATE = 'app-state',
  USER_METADATA = 'user-metadata',
  AUTH_TOKENS = 'auth-tokens',
@@ -16,16 +15,11 @@ export class PersistentStorage<T> {
  public readonly FILE_PATH: string;
 
  static readonly APP_STATE = new PersistentStorage<AppState>(StorageType.APP_STATE);
- static readonly PROJECTS = new PersistentStorage<ProjectSettings>(StorageType.PROJECTS);
+ static readonly PROJECTS = new PersistentStorage<ProjectsCache>(StorageType.PROJECTS);
  static readonly USER_SETTINGS = new PersistentStorage<UserSettings>(StorageType.USER_SETTINGS);
  static readonly USER_METADATA = new PersistentStorage<UserMetadata>(StorageType.USER_METADATA);
  static readonly AUTH_TOKENS = new PersistentStorage<AuthTokens>(StorageType.AUTH_TOKENS, true);
 
- // TODO: Deprecate
- static readonly PROJECT_SETTINGS = new PersistentStorage<ProjectSettings>(
- StorageType.PROJECT_SETTINGS,
- );
-
  private constructor(
  public readonly fileName: string,
  public readonly encrypted = false,

app/src/components/AppBar/index.tsx

@@ -1,4 +1,4 @@
-import { useRouteManager } from '@/components/Context/Route';
+import { useRouteManager } from '@/components/Context';
 import { Route } from '@/lib/routes';
 import { DiscordLogoIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';

app/src/components/Context/Auth.tsx

@@ -1,5 +0,0 @@
-import { AuthManager } from '@/lib/auth';
-import { createContext, useContext } from 'react';
-
-const AuthContext = createContext(new AuthManager());
-export const useAuthManager = () => useContext(AuthContext);

app/src/components/Context/index.tsx

@@ -0,0 +1,20 @@
+import { AuthManager } from '@/lib/auth';
+import { EditorEngine } from '@/lib/editor/engine';
+import { ProjectsManager } from '@/lib/projects';
+import { RouteManager } from '@/lib/routes';
+import { createContext, useContext } from 'react';
+
+const authManager = new AuthManager();
+const routeManager = new RouteManager();
+const projectsManager = new ProjectsManager();
+const editorEngine = new EditorEngine(projectsManager);
+
+const AuthContext = createContext(authManager);
+const RouteContext = createContext(routeManager);
+const ProjectsContext = createContext(projectsManager);
+const EditorEngineContext = createContext(editorEngine);
+
+export const useAuthManager = () => useContext(AuthContext);
+export const useRouteManager = () => useContext(RouteContext);
+export const useProjectsManager = () => useContext(ProjectsContext);
+export const useEditorEngine = () => useContext(EditorEngineContext);

app/src/components/ui/toggle.tsx

@@ -13,6 +13,8 @@ const toggleVariants = cva(
  'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
  overline:
  'bg-transparent hover:bg-surface hover:text-muted-foreground data-[state=on]:border-text-primary data-[state=on]:bg-transparent border-t-2 border-transparent rounded-none',
+ ['custom-overline']:
+ 'bg-transparent hover:bg-surface hover:text-muted-foreground data-[state=on]:border-text-primary data-[state=on]:bg-transparent border-transparent rounded-none',
  },
  size: {
  default: 'h-9 px-3',

app/src/lib/editor/engine/canvas/index.ts

@@ -1,22 +1,30 @@
+import { ProjectsManager } from '@/lib/projects';
 import { debounce } from 'lodash';
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, reaction } from 'mobx';
 import { nanoid } from 'nanoid';
-import { DefaultSettings, MainChannels } from '/common/constants';
+import { DefaultSettings } from '/common/constants';
 import {
  FrameSettings,
+ Project,
  ProjectSettings,
  RectDimension,
  RectPosition,
-} from '/common/models/settings';
+} from '/common/models/project';
 
 export class CanvasManager {
  private zoomScale: number = DefaultSettings.SCALE;
  private panPosition: RectPosition = DefaultSettings.POSITION;
- private idToFrame: Map<string, FrameSettings> = new Map();
+ private webFrames: FrameSettings[] = [];
 
- constructor() {
+ constructor(private projects: ProjectsManager) {
  makeAutoObservable(this);
- this.restoreSettings();
+
+ reaction(
+ () => this.projects.project,
+ (project) => {
+ project && this.applySettings(project);
+ },
+ );
  }
 
  get scale() {
@@ -38,7 +46,12 @@ export class CanvasManager {
  }
 
  get frames() {
- return Array.from(this.idToFrame.values());
+ return this.webFrames;
+ }
+
+ set frames(frames: FrameSettings[]) {
+ this.webFrames = frames;
+ this.saveSettings();
  }
 
  saveFrame(
@@ -49,27 +62,29 @@ export class CanvasManager {
  dimension?: RectDimension;
  },
  ) {
- let frame = this.idToFrame.get(id);
+ let frame = this.webFrames.find((f) => f.id === id);
  if (!frame) {
  return;
  }
 
  frame = { ...frame, ...newSettings };
- this.idToFrame.set(id, frame);
+ this.webFrames = this.webFrames.map((f) => (f.id === id ? frame : f));
  this.saveSettings();
  }
 
- restoreSettings() {
- window.api.invoke(MainChannels.GET_PROJECT_SETTINGS).then((res) => {
- const settings: ProjectSettings = res as ProjectSettings;
- this.scale = settings.scale || DefaultSettings.SCALE;
- this.position = settings.position || DefaultSettings.POSITION;
- this.idToFrame = this.getFrameMap(
- settings.frames && settings.frames.length
- ? settings.frames
- : [this.getDefaultFrame()],
- );
- });
+ async applySettings(project: Project) {
+ this.zoomScale = project.settings?.scale || DefaultSettings.SCALE;
+ this.panPosition = project.settings?.position || DefaultSettings.POSITION;
+ this.webFrames =
+ project.settings?.frames && project.settings.frames.length
+ ? project.settings.frames
+ : [this.getDefaultFrame({ url: project.url })];
+ }
+
+ clear() {
+ this.webFrames = [];
+ this.zoomScale = DefaultSettings.SCALE;
+ this.panPosition = DefaultSettings.POSITION;
  }
 
  getFrameMap(frames: FrameSettings[]): Map<string, FrameSettings> {
@@ -80,12 +95,12 @@ export class CanvasManager {
  return map;
  }
 
- getDefaultFrame(): FrameSettings {
+ getDefaultFrame(defaults: Partial<FrameSettings>): FrameSettings {
  return {
- id: nanoid(),
- url: DefaultSettings.URL,
- position: DefaultSettings.FRAME_POSITION,
- dimension: DefaultSettings.FRAME_DIMENSION,
+ id: defaults.id || nanoid(),
+ url: defaults.url || DefaultSettings.URL,
+ position: defaults.position || DefaultSettings.FRAME_POSITION,
+ dimension: defaults.dimension || DefaultSettings.FRAME_DIMENSION,
  };
  }
 
@@ -97,17 +112,10 @@ export class CanvasManager {
  position: this.panPosition,
  frames: Array.from(this.frames.values()),
  };
- window.api.invoke(
- MainChannels.UPDATE_PROJECT_SETTINGS,
- JSON.parse(JSON.stringify(settings)),
- );
- }
 
- private clearSettings() {
- const settings: ProjectSettings = {};
- window.api.invoke(
- MainChannels.UPDATE_PROJECT_SETTINGS,
- JSON.parse(JSON.stringify(settings)),
- );
+ if (this.projects.project) {
+ this.projects.project.settings = settings;
+ this.projects.updateProject(this.projects.project);
+ }
  }
 }

app/src/lib/editor/engine/index.ts

@@ -1,4 +1,5 @@
 import { EditorMode } from '@/lib/models';
+import { ProjectsManager } from '@/lib/projects';
 import { makeAutoObservable } from 'mobx';
 import { ActionManager } from './action';
 import { AstManager } from './ast';
@@ -25,7 +26,7 @@ export class EditorEngine {
  private astManager: AstManager = new AstManager();
  private historyManager: HistoryManager = new HistoryManager();
  private projectInfoManager: ProjectInfoManager = new ProjectInfoManager();
- private canvasManager: CanvasManager = new CanvasManager();
+ private canvasManager: CanvasManager;
  private domManager: DomManager = new DomManager(this.astManager);
  private codeManager: CodeManager = new CodeManager(this.webviewManager, this.astManager);
  private elementManager: ElementManager = new ElementManager(
@@ -48,9 +49,11 @@ export class EditorEngine {
  this.astManager,
  );
 
- constructor() {
+ constructor(private projectsManager: ProjectsManager) {
  makeAutoObservable(this);
+ this.canvasManager = new CanvasManager(this.projectsManager);
  }
+
  get elements() {
  return this.elementManager;
  }