Multi-document management (create new document; tab switching) (#210)

* Multi-docs WIP

* Change to number

* Add new document and switch documents

* Remove keybind for previous document. Change keybind for next document.

* Switch documents by clicking tabs

* Remove keybind for previous document. Change keybind for next document.

* multi-docs

* Update package-lock.json

* Hook up File>New to add new document

* Remove console logs and empty lines. Start new documents from 2 instead of 1.

* Fix formatting

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -73,7 +73,7 @@ const menuEntries: MenuListEntries = [
 		ref: undefined,
 		children: [
 			[
-				{ label: "New", icon: "File", shortcut: ["Ctrl", "N"] },
+				{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], action: async () => (await wasm).new_document() },
 				{ label: "Open…", shortcut: ["Ctrl", "O"] },
 				{
 					label: "Open Recent",

client/web/src/components/workspace/Panel.vue

@@ -2,7 +2,7 @@
 	<div class="panel">
 		<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
 			<div class="tab-group">
-				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
+				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel" @click="handleTabClick(tabIndex)">
 					<span>{{ tabLabel }}</span>
 					<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</div>
@@ -144,6 +144,8 @@ import IconButton from "../widgets/buttons/IconButton.vue";
 import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
 import { MenuDirection } from "../widgets/floating-menus/FloatingMenu.vue";
 
+const wasm = import("../../../wasm/pkg");
+
 export default defineComponent({
 	components: {
 		Document,
@@ -153,6 +155,12 @@ export default defineComponent({
 		IconButton,
 		PopoverButton,
 	},
+	methods: {
+		async handleTabClick(tabIndex: number) {
+			const { select_document } = await wasm;
+			select_document(tabIndex);
+		},
+	},
 	props: {
 		tabMinWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },

client/web/src/components/workspace/Workspace.vue

@@ -1,13 +1,7 @@
 <template>
 	<LayoutRow class="workspace-grid-subdivision">
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
-			<Panel
-				:panelType="'Document'"
-				:tabCloseButtons="true"
-				:tabMinWidths="true"
-				:tabLabels="['Untitled Document*', 'Document 2', 'Document 3', 'Document 4', 'Document 5', 'Document 6']"
-				:tabActiveIndex="0"
-			/>
+			<Panel :panelType="'Document'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="documents" :tabActiveIndex="activeDocument" />
 		</LayoutCol>
 		<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
@@ -52,6 +46,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument } from "../../response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import Panel from "./Panel.vue";
@@ -62,5 +57,24 @@ export default defineComponent({
 		LayoutCol,
 		Panel,
 	},
+
+	mounted() {
+		registerResponseHandler(ResponseType.NewDocument, (responseData: Response) => {
+			const documentData = responseData as NewDocument;
+			if (documentData) this.documents.push(documentData.document_name);
+		});
+
+		registerResponseHandler(ResponseType.SetActiveDocument, (responseData: Response) => {
+			const documentData = responseData as SetActiveDocument;
+			if (documentData) this.activeDocument = documentData.document_index;
+		});
+	},
+
+	data() {
+		return {
+			activeDocument: 0,
+			documents: ["Untitled Document"],
+		};
+	},
 });
 </script>

client/web/src/response-handler.ts

@@ -16,6 +16,8 @@ export enum ResponseType {
 	ExpandFolder = "ExpandFolder",
 	CollapseFolder = "CollapseFolder",
 	SetActiveTool = "SetActiveTool",
+	SetActiveDocument = "SetActiveDocument",
+	NewDocument = "NewDocument",
 	UpdateWorkingColors = "UpdateWorkingColors",
 }
 
@@ -52,6 +54,10 @@ function parseResponse(responseType: string, data: any): Response {
 			return newExpandFolder(data.ExpandFolder);
 		case "SetActiveTool":
 			return newSetActiveTool(data.SetActiveTool);
+		case "SetActiveDocument":
+			return newSetActiveDocument(data.SetActiveDocument);
+		case "NewDocument":
+			return newNewDocument(data.NewDocument);
 		case "UpdateCanvas":
 			return newUpdateCanvas(data.UpdateCanvas);
 		case "ExportDocument":
@@ -95,6 +101,24 @@ function newSetActiveTool(input: any): SetActiveTool {
 	};
 }
 
+export interface SetActiveDocument {
+	document_index: number;
+}
+function newSetActiveDocument(input: any): SetActiveDocument {
+	return {
+		document_index: input.document_index,
+	};
+}
+
+export interface NewDocument {
+	document_name: string;
+}
+function newNewDocument(input: any): NewDocument {
+	return {
+		document_name: input.document_name,
+	};
+}
+
 export interface UpdateCanvas {
 	document: string;
 }

client/web/wasm/src/document.rs

@@ -21,6 +21,16 @@ pub fn select_tool(tool: String) -> Result<(), JsValue> {
 	})
 }
 
+#[wasm_bindgen]
+pub fn select_document(document: usize) -> Result<(), JsValue> {
+	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(DocumentMessage::SelectDocument(document)).map_err(convert_error))
+}
+
+#[wasm_bindgen]
+pub fn new_document() -> Result<(), JsValue> {
+	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(DocumentMessage::NewDocument).map_err(convert_error))
+}
+
 // TODO: When a mouse button is down that started in the viewport, this should trigger even when the mouse is outside the viewport (or even the browser window if the browser supports it)
 /// Mouse movement within the screenspace bounds of the viewport
 #[wasm_bindgen]

client/web/wasm/src/wrappers.rs

@@ -123,6 +123,7 @@ pub fn translate_key(name: &str) -> Key {
 		"backspace" => KeyBackspace,
 		"alt" => KeyAlt,
 		"escape" => KeyEscape,
+		"tab" => KeyTab,
 		_ => UnknownKey,
 	}
 }