feat: implement basic edit history for pages

src/electron/main.ts

@@ -104,7 +104,7 @@ async function createWindow(): Promise<void> {
 
 				if (path) {
 					const project = Project.create({
-						name: 'Untitled Page',
+						name: 'Untitled Project',
 						path
 					});
 

src/store/command/index.ts

@@ -2,5 +2,7 @@ export * from './command';
 export * from './element-command';
 export * from './element-location-command';
 export * from './element-name-command';
-export * from './property-value-command';
 export * from './element-remove-command';
+export * from './page-add-command';
+export * from './page-remove-command';
+export * from './property-value-command';

src/store/command/page-add-command.ts

@@ -0,0 +1,46 @@
+import { Command } from './command';
+import { Page } from '../page';
+import { Project } from '../project';
+import * as Types from '../types';
+import { ViewStore } from '../view-store';
+
+export class PageAddCommand extends Command {
+	private page: Page;
+	private project: Project;
+
+	private constructor(init: { page: Page; project: Project }) {
+		super();
+		this.page = init.page;
+		this.project = init.project;
+	}
+
+	public static create(init: { page: Page; project: Project }): PageAddCommand {
+		return new PageAddCommand(init);
+	}
+
+	public execute(): boolean {
+		const store = ViewStore.getInstance();
+
+		this.project.addPage(this.page);
+		store.setActivePage(this.page);
+		return true;
+	}
+
+	public getType(): string {
+		return 'page-create';
+	}
+
+	public undo(): boolean {
+		const store = ViewStore.getInstance();
+		const index = this.project.getPageIndex(this.page);
+
+		if (index === 0) {
+			store.unsetActivePage();
+			store.setActiveView(Types.AlvaView.Pages);
+		} else {
+			store.setActivePageByIndex(index - 1);
+		}
+
+		return this.project.removePage(this.page);
+	}
+}

src/store/command/page-remove-command.ts

@@ -0,0 +1,47 @@
+import { Command } from './command';
+import { Page } from '../page';
+import { Project } from '../project';
+import * as Types from '../types';
+import { ViewStore } from '../view-store';
+
+export class PageRemoveCommand extends Command {
+	private page: Page;
+	private project: Project;
+
+	private constructor(init: { page: Page; project: Project }) {
+		super();
+		this.page = init.page;
+		this.project = init.project;
+	}
+
+	public static create(init: { page: Page; project: Project }): PageRemoveCommand {
+		return new PageRemoveCommand(init);
+	}
+
+	public execute(): boolean {
+		const store = ViewStore.getInstance();
+		const index = this.project.getPageIndex(this.page);
+
+		if (index === 0) {
+			store.unsetActivePage();
+			store.setActiveView(Types.AlvaView.Pages);
+		} else {
+			store.setActivePageByIndex(index - 1);
+		}
+
+		this.project.removePage(this.page);
+		return true;
+	}
+
+	public getType(): string {
+		return 'page-remove';
+	}
+
+	public undo(): boolean {
+		const store = ViewStore.getInstance();
+
+		this.project.addPage(this.page);
+		store.setActivePage(this.page);
+		return true;
+	}
+}

src/store/project.ts

@@ -159,6 +159,10 @@ export class Project {
 		return this.pages.find(page => page.getId() === id);
 	}
 
+	public getPageIndex(page: Page): number {
+		return this.pages.indexOf(page);
+	}
+
 	public getPages(): Page[] {
 		return this.pages;
 	}
@@ -171,6 +175,18 @@ export class Project {
 		return this.styleguide;
 	}
 
+	public removePage(page: Page): boolean {
+		const index = this.pages.indexOf(page);
+
+		if (index === -1) {
+			return false;
+		}
+
+		this.pages.splice(index, 1);
+
+		return true;
+	}
+
 	public setName(name: string): void {
 		this.name = name;
 	}

src/store/view-store.ts

@@ -1,4 +1,11 @@
-import { Command, ElementLocationCommand, ElementRemoveCommand } from './command';
+import {
+	Command,
+	ElementLocationCommand,
+	ElementRemoveCommand,
+	PageAddCommand,
+	PageRemoveCommand
+} from './command';
+
 import * as MobX from 'mobx';
 import * as Os from 'os';
 import { Page, PageElement } from './page';
@@ -39,7 +46,7 @@ export class ViewStore {
 	 * The page that is currently being displayed in the preview, and edited in the elements
 	 * and properties panes. May be undefined if there is none.
 	 */
-	@MobX.observable private activePage: number = 0;
+	@MobX.observable private activePage?: number = 0;
 
 	/**
 	 * The current state of the Page Overview
@@ -153,8 +160,7 @@ export class ViewStore {
 			styleguide: project.getStyleguide()
 		});
 
-		project.addPage(page);
-
+		this.execute(PageAddCommand.create({ page, project }));
 		return page;
 	}
 
@@ -342,6 +348,10 @@ export class ViewStore {
 			return;
 		}
 
+		if (typeof this.activePage === 'undefined') {
+			return;
+		}
+
 		return project.getPages()[this.activePage];
 	}
 
@@ -638,6 +648,21 @@ export class ViewStore {
 		}
 	}
 
+	public removePage(page: Page): void {
+		const project = this.getCurrentProject();
+
+		if (!project) {
+			return;
+		}
+
+		this.execute(
+			PageRemoveCommand.create({
+				page,
+				project
+			})
+		);
+	}
+
 	/**
 	 * Remove the currently selected element from its page
 	 * Returns the deleted PageElement or undefined if nothing was deleted
@@ -663,7 +688,7 @@ export class ViewStore {
 			return;
 		}
 
-		// this.removePage(page);
+		this.removePage(page);
 		return page;
 	}
 
@@ -850,4 +875,8 @@ export class ViewStore {
 		this.redoBuffer.push(command);
 		return true;
 	}
+
+	public unsetActivePage(): void {
+		this.activePage = undefined;
+	}
 }