Welcome screen, refactor to allow zero documents, and add TS typing to widgets (#702)

* unfinished implementation

* Add frontend for the empty panel screen

* Add an icon for Folder based on NodeFolder

* fixed messages causing peicees of ui not to render on new document

* Standardize nextTick syntax

* WIP generisization of component subscriptions (not compiling yet)

* Fix crash when loading font and there is no active document

* Only advertise tool actions with a document

* Fix failure to create new document

* Initalise the properties panel

* Fix highlight tab, canvas jump, warns and layer tree

* Fix tests

* Possibly fix some things?

* Move WorkingColors layout definition to backend

* Standardize action macro formatting

* Provide typing for widgets in TS/Vue and associated cleanup

* Fix viewport positioning initialization

* Fix menu bar init at startup not document creation

* Fix no viewport bounds bug

* Change !=0 to >0

* Simplify the init system

Closes #656

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/src/components/floating-menus/FloatingMenu.vue

@@ -175,7 +175,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, nextTick, PropType } from "vue";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 
@@ -319,7 +319,7 @@ export default defineComponent({
 		// To be called by the parent component. Measures the actual width of the floating menu content element and returns it in a promise.
 		async measureAndEmitNaturalWidth(): Promise<void> {
 			// Wait for the changed content which fired the `updated()` Vue event to be put into the DOM
-			await this.$nextTick();
+			await nextTick();
 
 			// Wait until all fonts have been loaded and rendered so measurements of content involving text are accurate
 			// API is experimental but supported in all browsers - https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready
@@ -329,7 +329,8 @@ export default defineComponent({
 			// Make the component show itself with 0 min-width so it can be measured, and wait until the values have been updated to the DOM
 			this.measuringOngoing = true;
 			this.measuringOngoingGuard = true;
-			await this.$nextTick();
+
+			await nextTick();
 
 			// Only measure if the menu is visible, perhaps because a parent component with a `v-if` condition is false
 			let naturalWidth;
@@ -341,7 +342,7 @@ export default defineComponent({
 
 			// Turn off measuring mode for the component, which triggers another call to the `updated()` Vue event, so we can turn off the protection after that has happened
 			this.measuringOngoing = false;
-			await this.$nextTick();
+			await nextTick();
 			this.measuringOngoingGuard = false;
 
 			// Emit the measured natural width to the parent
@@ -424,7 +425,7 @@ export default defineComponent({
 	},
 	watch: {
 		// Called only when `open` is changed from outside this component (with v-model)
-		open(newState: boolean, oldState: boolean) {
+		async open(newState: boolean, oldState: boolean) {
 			// Switching from closed to open
 			if (newState && !oldState) {
 				// Close floating menu if pointer strays far enough away
@@ -435,15 +436,17 @@ export default defineComponent({
 				window.addEventListener("pointerdown", this.pointerDownHandler);
 				// Cancel the subsequent click event to prevent the floating menu from reopening if the floating menu's button is the click event target
 				window.addEventListener("pointerup", this.pointerUpHandler);
-				// Floating menu min-width resize observer
-				this.$nextTick(() => {
-					const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement;
-					if (!floatingMenuContainer) return;
 
-					// Start a new observation of the now-open floating menu
-					this.containerResizeObserver.disconnect();
-					this.containerResizeObserver.observe(floatingMenuContainer);
-				});
+				// Floating menu min-width resize observer
+
+				await nextTick();
+
+				const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement;
+				if (!floatingMenuContainer) return;
+
+				// Start a new observation of the now-open floating menu
+				this.containerResizeObserver.disconnect();
+				this.containerResizeObserver.observe(floatingMenuContainer);
 			}
 
 			// Switching from open to closed

frontend/src/components/floating-menus/MenuList.vue

@@ -163,7 +163,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { MenuListEntry, SectionsOfMenuListEntries, MenuListEntryData } from "@/wasm-communication/messages";
 
 import FloatingMenu, { MenuDirection } from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -172,23 +172,6 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import Separator from "@/components/widgets/labels/Separator.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
-export type MenuListEntries<Value = string> = MenuListEntry<Value>[];
-export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[];
-
-interface MenuListEntryData<Value = string> {
-	value?: Value;
-	label?: string;
-	icon?: IconName;
-	font?: URL;
-	shortcut?: string[];
-	shortcutRequiresLock?: boolean;
-	disabled?: boolean;
-	action?: () => void;
-	children?: SectionsOfMenuListEntries;
-}
-
-export type MenuListEntry<Value = string> = MenuListEntryData<Value> & { ref?: typeof FloatingMenu | typeof MenuList };
-
 const KEYBOARD_LOCK_USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode";
 const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
 

frontend/src/components/panels/Document.vue

@@ -17,12 +17,7 @@
 				<LayoutCol class="spacer"></LayoutCol>
 
 				<LayoutCol class="working-colors">
-					<SwatchPairInput />
-					<LayoutRow class="swap-and-reset">
-						<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
-						<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
-						<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
-					</LayoutRow>
+					<WidgetLayout :layout="workingColorsLayout" />
 				</LayoutCol>
 			</LayoutCol>
 			<LayoutCol class="viewport">
@@ -135,8 +130,16 @@
 			.working-colors {
 				flex: 0 0 auto;
 
-				.swap-and-reset {
-					flex: 0 0 auto;
+				.widget-row {
+					min-height: 0;
+
+					.swatch-pair {
+						margin: 0;
+					}
+
+					.icon-button {
+						--widget-height: 0;
+					}
 				}
 			}
 		}
@@ -222,55 +225,26 @@ import { defineComponent, nextTick } from "vue";
 
 import { textInputCleanup } from "@/utility-functions/keyboard-entry";
 import {
-	UpdateDocumentArtwork,
-	UpdateDocumentOverlays,
-	UpdateDocumentScrollbars,
-	UpdateDocumentRulers,
-	UpdateDocumentArtboards,
-	UpdateMouseCursor,
 	UpdateDocumentModeLayout,
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
+	UpdateWorkingColorsLayout,
 	defaultWidgetLayout,
 	UpdateDocumentBarLayout,
-	UpdateImageData,
-	TriggerTextCommit,
-	TriggerViewportResize,
-	DisplayRemoveEditableTextbox,
 	DisplayEditableTextbox,
+	MouseCursorIcon,
+	XY,
 } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
 import CanvasRuler from "@/components/widgets/metrics/CanvasRuler.vue";
 import PersistentScrollbar from "@/components/widgets/metrics/PersistentScrollbar.vue";
 import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
 export default defineComponent({
-	inject: ["editor"],
+	inject: ["editor", "panels"],
 	methods: {
-		viewportResize() {
-			// Resize the canvas
-
-			const canvas = this.$refs.canvas as HTMLElement;
-
-			// Get the width and height rounded up to the nearest even number because resizing is centered and dividing an odd number by 2 for centering causes antialiasing
-			let width = Math.ceil(parseFloat(getComputedStyle(canvas).width));
-			if (width % 2 === 1) width += 1;
-			let height = Math.ceil(parseFloat(getComputedStyle(canvas).height));
-			if (height % 2 === 1) height += 1;
-
-			this.canvasSvgWidth = `${width}px`;
-			this.canvasSvgHeight = `${height}px`;
-
-			// Resize the rulers
-			const rulerHorizontal = this.$refs.rulerHorizontal as typeof CanvasRuler;
-			const rulerVertical = this.$refs.rulerVertical as typeof CanvasRuler;
-			rulerHorizontal?.resize();
-			rulerVertical?.resize();
-		},
 		pasteFile(e: DragEvent) {
 			const { dataTransfer } = e;
 			if (!dataTransfer) return;
@@ -304,12 +278,6 @@ export default defineComponent({
 			const move = delta < 0 ? 1 : -1;
 			this.editor.instance.translate_canvas_by_fraction(0, move);
 		},
-		swapWorkingColors() {
-			this.editor.instance.swap_colors();
-		},
-		resetWorkingColors() {
-			this.editor.instance.reset_colors();
-		},
 		canvasPointerDown(e: PointerEvent) {
 			const onEditbox = e.target instanceof HTMLDivElement && e.target.contentEditable;
 			if (!onEditbox) {
@@ -317,76 +285,65 @@ export default defineComponent({
 				canvas.setPointerCapture(e.pointerId);
 			}
 		},
-	},
-	mounted() {
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentArtwork, (UpdateDocumentArtwork) => {
-			this.artworkSvg = UpdateDocumentArtwork.svg;
+		// Update rendered SVGs
+		async updateDocumentArtwork(svg: string) {
+			this.artworkSvg = svg;
 
-			nextTick((): void => {
-				if (this.textInput) {
-					const canvas = this.$refs.canvas as HTMLElement;
-					const foreignObject = canvas.getElementsByTagName("foreignObject")[0] as SVGForeignObjectElement;
-					if (foreignObject.children.length > 0) return;
+			await nextTick();
 
-					const addedInput = foreignObject.appendChild(this.textInput);
-
-					nextTick((): void => {
-						// Necessary to select contenteditable: https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element/6150060#6150060
-
-						const range = document.createRange();
-						range.selectNodeContents(addedInput);
-
-						const selection = window.getSelection();
-						if (selection) {
-							selection.removeAllRanges();
-							selection.addRange(range);
-						}
-
-						addedInput.focus();
-						addedInput.click();
-					});
-
-					window.dispatchEvent(
-						new CustomEvent("modifyinputfield", {
-							detail: addedInput,
-						})
-					);
-				}
-			});
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentOverlays, (updateDocumentOverlays) => {
-			this.overlaysSvg = updateDocumentOverlays.svg;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentArtboards, (updateDocumentArtboards) => {
-			this.artboardSvg = updateDocumentArtboards.svg;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentScrollbars, (updateDocumentScrollbars) => {
-			this.scrollbarPos = updateDocumentScrollbars.position;
-			this.scrollbarSize = updateDocumentScrollbars.size;
-			this.scrollbarMultiplier = updateDocumentScrollbars.multiplier;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentRulers, (updateDocumentRulers) => {
-			this.rulerOrigin = updateDocumentRulers.origin;
-			this.rulerSpacing = updateDocumentRulers.spacing;
-			this.rulerInterval = updateDocumentRulers.interval;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateMouseCursor, (updateMouseCursor) => {
-			this.canvasCursor = updateMouseCursor.cursor;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(TriggerTextCommit, () => {
 			if (this.textInput) {
-				const textCleaned = textInputCleanup(this.textInput.innerText);
-				this.editor.instance.on_change_text(textCleaned);
-			}
-		});
+				const canvas = this.$refs.canvas as HTMLElement;
+				const foreignObject = canvas.getElementsByTagName("foreignObject")[0] as SVGForeignObjectElement;
+				if (foreignObject.children.length > 0) return;
 
-		this.editor.subscriptions.subscribeJsMessage(DisplayEditableTextbox, (displayEditableTextbox) => {
+				const addedInput = foreignObject.appendChild(this.textInput);
+				window.dispatchEvent(new CustomEvent("modifyinputfield", { detail: addedInput }));
+
+				await nextTick();
+
+				// Necessary to select contenteditable: https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element/6150060#6150060
+
+				const range = document.createRange();
+				range.selectNodeContents(addedInput);
+
+				const selection = window.getSelection();
+				if (selection) {
+					selection.removeAllRanges();
+					selection.addRange(range);
+				}
+
+				addedInput.focus();
+				addedInput.click();
+			}
+		},
+		updateDocumentOverlays(svg: string) {
+			this.overlaysSvg = svg;
+		},
+		updateDocumentArtboards(svg: string) {
+			this.artboardSvg = svg;
+		},
+		// Update scrollbars and rulers
+		updateDocumentScrollbars(position: XY, size: XY, multiplier: XY) {
+			this.scrollbarPos = position;
+			this.scrollbarSize = size;
+			this.scrollbarMultiplier = multiplier;
+		},
+		updateDocumentRulers(origin: XY, spacing: number, interval: number) {
+			this.rulerOrigin = origin;
+			this.rulerSpacing = spacing;
+			this.rulerInterval = interval;
+		},
+		// Update mouse cursor icon
+		updateMouseCursor(cursor: MouseCursorIcon) {
+			this.canvasCursor = cursor;
+		},
+		// Text entry
+		triggerTextCommit() {
+			if (!this.textInput) return;
+			const textCleaned = textInputCleanup(this.textInput.innerText);
+			this.editor.instance.on_change_text(textCleaned);
+		},
+		displayEditableTextbox(displayEditableTextbox: DisplayEditableTextbox) {
 			this.textInput = document.createElement("DIV") as HTMLDivElement;
 
 			if (displayEditableTextbox.text === "") this.textInput.textContent = "";
@@ -399,49 +356,52 @@ export default defineComponent({
 			this.textInput.style.color = displayEditableTextbox.color.toRgbaCSS();
 
 			this.textInput.oninput = (): void => {
-				if (this.textInput) this.editor.instance.update_bounds(textInputCleanup(this.textInput.innerText));
+				if (!this.textInput) return;
+				this.editor.instance.update_bounds(textInputCleanup(this.textInput.innerText));
 			};
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(DisplayRemoveEditableTextbox, () => {
+		},
+		displayRemoveEditableTextbox() {
 			this.textInput = undefined;
-			window.dispatchEvent(
-				new CustomEvent("modifyinputfield", {
-					detail: undefined,
-				})
-			);
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, (updateDocumentModeLayout) => {
+			window.dispatchEvent(new CustomEvent("modifyinputfield", { detail: undefined }));
+		},
+		// Update layouts
+		updateDocumentModeLayout(updateDocumentModeLayout: UpdateDocumentModeLayout) {
 			this.documentModeLayout = updateDocumentModeLayout;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateToolOptionsLayout, (updateToolOptionsLayout) => {
+		},
+		updateToolOptionsLayout(updateToolOptionsLayout: UpdateToolOptionsLayout) {
 			this.toolOptionsLayout = updateToolOptionsLayout;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentBarLayout, (updateDocumentBarLayout) => {
+		},
+		updateDocumentBarLayout(updateDocumentBarLayout: UpdateDocumentBarLayout) {
 			this.documentBarLayout = updateDocumentBarLayout;
-		});
-
-		this.editor.subscriptions.subscribeJsMessage(UpdateToolShelfLayout, (updateToolShelfLayout) => {
+		},
+		updateToolShelfLayout(updateToolShelfLayout: UpdateToolShelfLayout) {
 			this.toolShelfLayout = updateToolShelfLayout;
-		});
+		},
+		updateWorkingColorsLayout(updateWorkingColorsLayout: UpdateWorkingColorsLayout) {
+			this.workingColorsLayout = updateWorkingColorsLayout;
+		},
+		// Resize elements to render the new viewport size
+		viewportResize() {
+			// Resize the canvas
+			// Width and height are rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
+			const canvas = this.$refs.canvas as HTMLElement;
+			const width = Math.ceil(parseFloat(getComputedStyle(canvas).width));
+			const height = Math.ceil(parseFloat(getComputedStyle(canvas).height));
+			this.canvasSvgWidth = `${width % 2 === 1 ? width + 1 : width}px`;
+			this.canvasSvgHeight = `${height % 2 === 1 ? height + 1 : height}px`;
 
-		this.editor.subscriptions.subscribeJsMessage(TriggerViewportResize, this.viewportResize);
+			// Resize the rulers
+			const rulerHorizontal = this.$refs.rulerHorizontal as typeof CanvasRuler;
+			const rulerVertical = this.$refs.rulerVertical as typeof CanvasRuler;
+			rulerHorizontal?.resize();
+			rulerVertical?.resize();
+		},
+	},
+	mounted() {
+		this.panels.registerPanel("Document", this);
 
-		this.editor.subscriptions.subscribeJsMessage(UpdateImageData, (updateImageData) => {
-			updateImageData.image_data.forEach(async (element) => {
-				// Using updateImageData.image_data.buffer returns undefined for some reason?
-				const blob = new Blob([new Uint8Array(element.image_data.values()).buffer], { type: element.mime });
-
-				const url = URL.createObjectURL(blob);
-
-				const image = await createImageBitmap(blob);
-
-				this.editor.instance.set_image_blob_url(element.path, url, image.width, image.height);
-			});
-		});
+		// Once this component is mounted, we want to resend the document bounds to the backend via the resize event handler which does that
+		window.dispatchEvent(new Event("resize"));
 	},
 	data() {
 		return {
@@ -449,39 +409,38 @@ export default defineComponent({
 			textInput: undefined as undefined | HTMLDivElement,
 
 			// CSS properties
-			canvasSvgWidth: "100%",
-			canvasSvgHeight: "100%",
-			canvasCursor: "default",
+			canvasSvgWidth: "100%" as string,
+			canvasSvgHeight: "100%" as string,
+			canvasCursor: "default" as MouseCursorIcon,
 
 			// Scrollbars
-			scrollbarPos: { x: 0.5, y: 0.5 },
-			scrollbarSize: { x: 0.5, y: 0.5 },
-			scrollbarMultiplier: { x: 0, y: 0 },
+			scrollbarPos: { x: 0.5, y: 0.5 } as XY,
+			scrollbarSize: { x: 0.5, y: 0.5 } as XY,
+			scrollbarMultiplier: { x: 0, y: 0 } as XY,
 
 			// Rulers
-			rulerOrigin: { x: 0, y: 0 },
-			rulerSpacing: 100,
-			rulerInterval: 100,
+			rulerOrigin: { x: 0, y: 0 } as XY,
+			rulerSpacing: 100 as number,
+			rulerInterval: 100 as number,
 
 			// Rendered SVG viewport data
-			artworkSvg: "",
-			artboardSvg: "",
-			overlaysSvg: "",
+			artworkSvg: "" as string,
+			artboardSvg: "" as string,
+			overlaysSvg: "" as string,
 
 			// Layouts
 			documentModeLayout: defaultWidgetLayout(),
 			toolOptionsLayout: defaultWidgetLayout(),
 			documentBarLayout: defaultWidgetLayout(),
 			toolShelfLayout: defaultWidgetLayout(),
+			workingColorsLayout: defaultWidgetLayout(),
 		};
 	},
 	components: {
 		LayoutRow,
 		LayoutCol,
-		SwatchPairInput,
 		PersistentScrollbar,
 		CanvasRuler,
-		IconButton,
 		WidgetLayout,
 	},
 });

frontend/src/components/panels/LayerTree.vue

@@ -41,10 +41,10 @@
 						:title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`.trim() || null"
 					>
 						<LayoutRow class="layer-type-icon">
-							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" :style="'node'" title="Folder" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" :style="'node'" title="Image" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" :style="'node'" title="Shape" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" :style="'node'" title="Path" />
+							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" :iconStyle="'Node'" title="Folder" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" :iconStyle="'Node'" title="Image" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" :iconStyle="'Node'" title="Shape" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" :iconStyle="'Node'" title="Path" />
 						</LayoutRow>
 						<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
 							<input
@@ -261,7 +261,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, nextTick } from "vue";
 
 import { defaultWidgetLayout, UpdateDocumentLayerTreeStructure, UpdateDocumentLayerDetails, UpdateLayerTreeOptionsLayout, LayerPanelEntry } from "@/wasm-communication/messages";
 
@@ -313,16 +313,16 @@ export default defineComponent({
 		handleExpandArrowClick(path: BigUint64Array) {
 			this.editor.instance.toggle_layer_expansion(path);
 		},
-		onEditLayerName(listing: LayerListingInfo) {
+		async onEditLayerName(listing: LayerListingInfo) {
 			if (listing.editingName) return;
 
 			this.draggable = false;
 
 			listing.editingName = true;
 			const tree: HTMLElement = (this.$refs.layerTreeList as typeof LayoutCol).$el;
-			this.$nextTick(() => {
-				(tree.querySelector("[data-text-input]:not([disabled])") as HTMLInputElement).select();
-			});
+
+			await nextTick();
+			(tree.querySelector("[data-text-input]:not([disabled])") as HTMLInputElement).select();
 		},
 		onEditLayerNameChange(listing: LayerListingInfo, inputElement: EventTarget | null) {
 			// Eliminate duplicate events
@@ -334,13 +334,13 @@ export default defineComponent({
 			listing.editingName = false;
 			this.editor.instance.set_layer_name(listing.entry.path, name);
 		},
-		onEditLayerNameDeselect(listing: LayerListingInfo) {
+		async onEditLayerNameDeselect(listing: LayerListingInfo) {
 			this.draggable = true;
 
 			listing.editingName = false;
-			this.$nextTick(() => {
-				window.getSelection()?.removeAllRanges();
-			});
+
+			await nextTick();
+			window.getSelection()?.removeAllRanges();
 		},
 		async selectLayer(clickedLayer: LayerPanelEntry, ctrl: boolean, shift: boolean) {
 			this.editor.instance.select_layer(clickedLayer.path, ctrl, shift);

frontend/src/components/panels/NodeGraph.vue

@@ -28,7 +28,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeImage'" :style="'node'" />
+						<IconLabel :icon="'NodeImage'" :iconStyle="'Node'" />
 						<TextLabel>Image</TextLabel>
 					</div>
 				</div>
@@ -42,7 +42,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeImage'" :style="'node'" />
+						<IconLabel :icon="'NodeImage'" :iconStyle="'Node'" />
 						<TextLabel>Mask</TextLabel>
 					</div>
 					<div class="arguments">
@@ -69,7 +69,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeTransform'" :style="'node'" />
+						<IconLabel :icon="'NodeTransform'" :iconStyle="'Node'" />
 						<TextLabel>Transform</TextLabel>
 					</div>
 				</div>
@@ -83,7 +83,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeMotionBlur'" :style="'node'" />
+						<IconLabel :icon="'NodeMotionBlur'" :iconStyle="'Node'" />
 						<TextLabel>Motion Blur</TextLabel>
 					</div>
 					<div class="arguments">
@@ -110,7 +110,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeShape'" :style="'node'" />
+						<IconLabel :icon="'NodeShape'" :iconStyle="'Node'" />
 						<TextLabel>Shape</TextLabel>
 					</div>
 				</div>
@@ -124,7 +124,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeBrushwork'" :style="'node'" />
+						<IconLabel :icon="'NodeBrushwork'" :iconStyle="'Node'" />
 						<TextLabel>Brushwork</TextLabel>
 					</div>
 				</div>
@@ -138,7 +138,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeBlur'" :style="'node'" />
+						<IconLabel :icon="'NodeBlur'" :iconStyle="'Node'" />
 						<TextLabel>Blur</TextLabel>
 					</div>
 				</div>
@@ -152,7 +152,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeGradient'" :style="'node'" />
+						<IconLabel :icon="'NodeGradient'" :iconStyle="'Node'" />
 						<TextLabel>Gradient</TextLabel>
 					</div>
 				</div>

frontend/src/components/widgets/WidgetRow.vue

@@ -4,35 +4,41 @@
 <template>
 	<div :class="`widget-${direction}`">
 		<template v-for="(component, index) in widgets" :key="index">
-			<CheckboxInput v-if="component.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
-			<ColorInput v-if="component.kind === 'ColorInput'" v-bind="component.props" v-model:open="open" @update:value="(value: string) => updateLayout(component.widget_id, value)" />
-			<DropdownInput v-if="component.kind === 'DropdownInput'" v-bind="component.props" v-model:open="open" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
-			<FontInput
-				v-if="component.kind === 'FontInput'"
+			<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
+			<ColorInput v-if="component.props.kind === 'ColorInput'" v-bind="component.props" v-model:open="open" @update:value="(value: string) => updateLayout(component.widgetId, value)" />
+			<DropdownInput
+				v-if="component.props.kind === 'DropdownInput'"
 				v-bind="component.props"
 				v-model:open="open"
-				@changeFont="(value: { name: string, style: string, file: string }) => updateLayout(component.widget_id, value)"
+				@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
 			/>
-			<IconButton v-if="component.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
-			<IconLabel v-if="component.kind === 'IconLabel'" v-bind="component.props" />
-			<NumberInput
-				v-if="component.kind === 'NumberInput'"
+			<FontInput
+				v-if="component.props.kind === 'FontInput'"
 				v-bind="component.props"
-				@update:value="(value: number) => updateLayout(component.widget_id, value)"
-				:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
-				:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
+				v-model:open="open"
+				@changeFont="(value: { name: string, style: string, file: string }) => updateLayout(component.widgetId, value)"
 			/>
-			<OptionalInput v-if="component.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
-			<PopoverButton v-if="component.kind === 'PopoverButton'">
-				<h3>{{ component.props.title }}</h3>
+			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, null)" />
+			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
+			<NumberInput
+				v-if="component.props.kind === 'NumberInput'"
+				v-bind="component.props"
+				@update:value="(value: number) => updateLayout(component.widgetId, value)"
+				:incrementCallbackIncrease="() => updateLayout(component.widgetId, 'Increment')"
+				:incrementCallbackDecrease="() => updateLayout(component.widgetId, 'Decrement')"
+			/>
+			<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
+			<PopoverButton v-if="component.props.kind === 'PopoverButton'" v-bind="component.props">
+				<h3>{{ component.props.header }}</h3>
 				<p>{{ component.props.text }}</p>
 			</PopoverButton>
-			<RadioInput v-if="component.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
-			<Separator v-if="component.kind === 'Separator'" v-bind="component.props" />
-			<TextAreaInput v-if="component.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
-			<TextButton v-if="component.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
-			<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
-			<TextLabel v-if="component.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ component.props.value }}</TextLabel>
+			<RadioInput v-if="component.props.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)" />
+			<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
+			<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
+			<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
+			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, null)" />
+			<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
+			<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ component.props.value }}</TextLabel>
 		</template>
 	</div>
 </template>
@@ -84,6 +90,7 @@ import FontInput from "@/components/widgets/inputs/FontInput.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
+import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
 import TextAreaInput from "@/components/widgets/inputs/TextAreaInput.vue";
 import TextInput from "@/components/widgets/inputs/TextInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -123,21 +130,22 @@ export default defineComponent({
 		},
 	},
 	components: {
-		Separator,
-		PopoverButton,
-		TextButton,
 		CheckboxInput,
-		NumberInput,
-		TextInput,
-		IconButton,
-		OptionalInput,
-		RadioInput,
-		DropdownInput,
-		TextLabel,
-		IconLabel,
 		ColorInput,
+		DropdownInput,
 		FontInput,
+		IconButton,
+		IconLabel,
+		NumberInput,
+		OptionalInput,
+		PopoverButton,
+		RadioInput,
+		Separator,
+		SwatchPairInput,
 		TextAreaInput,
+		TextButton,
+		TextInput,
+		TextLabel,
 	},
 });
 </script>

frontend/src/components/widgets/buttons/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)">
+	<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)" :title="tooltip">
 		<IconLabel :icon="icon" />
 	</button>
 </template>
@@ -69,11 +69,13 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
 		icon: { type: String as PropType<IconName>, required: true },
 		size: { type: Number as PropType<IconSize>, required: true },
 		active: { type: Boolean as PropType<boolean>, default: false },
-		gapAfter: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
 	},
 	components: { IconLabel },
 });

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -62,8 +62,10 @@ export default defineComponent({
 		LayoutRow,
 	},
 	props: {
-		action: { type: Function as PropType<() => void>, required: false },
 		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
+
+		// Callbacks
+		action: { type: Function as PropType<() => void>, required: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/buttons/TextButton.ts

@@ -1,16 +1,17 @@
 // TODO: Try and get rid of the need for this file
 
 export interface TextButtonWidget {
-	kind: "TextButton";
 	tooltip?: string;
 	message?: string | object;
 	callback?: () => void;
 	props: {
-		// `action` is used via `IconButtonWidget.callback`
+		kind: "TextButton";
 		label: string;
 		emphasized?: boolean;
-		disabled?: boolean;
 		minWidth?: number;
-		gapAfter?: boolean;
+		disabled?: boolean;
+
+		// Callbacks
+		// `action` is used via `IconButtonWidget.callback`
 	};
 }

frontend/src/components/widgets/buttons/TextButton.vue

@@ -62,12 +62,13 @@ import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 		label: { type: String as PropType<string>, required: true },
 		emphasized: { type: Boolean as PropType<boolean>, default: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
-		gapAfter: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 	},
 	components: { TextLabel },
 });

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<LayoutRow class="checkbox-input">
 		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
-		<label :for="`checkbox-input-${id}`" :tabindex="disableTabIndex ? -1 : 0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()">
+		<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()" :title="tooltip">
 			<LayoutRow class="checkbox-box">
 				<IconLabel :icon="icon" />
 			</LayoutRow>
@@ -66,6 +66,11 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	emits: ["update:checked"],
+	props: {
+		checked: { type: Boolean as PropType<boolean>, default: false },
+		icon: { type: String as PropType<IconName>, default: "Checkmark" },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+	},
 	data() {
 		return {
 			id: `${Math.random()}`.substring(2),
@@ -76,11 +81,6 @@ export default defineComponent({
 			return this.checked;
 		},
 	},
-	props: {
-		checked: { type: Boolean as PropType<boolean>, default: false },
-		icon: { type: String as PropType<IconName>, default: "Checkmark" },
-		disableTabIndex: { type: Boolean as PropType<boolean>, default: false },
-	},
 	components: {
 		IconLabel,
 		LayoutRow,

frontend/src/components/widgets/inputs/ColorInput.vue

@@ -1,6 +1,6 @@
 <template>
-	<LayoutRow class="color-input">
-		<OptionalInput v-if="canSetTransparent" :icon="'CloseX'" :checked="!!value" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
+	<LayoutRow class="color-input" :title="tooltip">
+		<OptionalInput v-if="!noTransparency" :icon="'CloseX'" :checked="Boolean(value)" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
 		<TextInput :value="displayValue" :label="label" :disabled="disabled || !value" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
 		<Separator :type="'Related'" />
 		<LayoutRow class="swatch">
@@ -82,11 +82,15 @@ import Separator from "@/components/widgets/labels/Separator.vue";
 export default defineComponent({
 	emits: ["update:value", "update:open"],
 	props: {
-		value: { type: String as PropType<string | undefined>, required: true },
-		open: { type: Boolean as PropType<boolean>, required: true },
+		value: { type: String as PropType<string | undefined>, required: false },
 		label: { type: String as PropType<string>, required: false },
-		canSetTransparent: { type: Boolean as PropType<boolean>, required: false, default: true },
+		noTransparency: { type: Boolean as PropType<boolean>, default: false },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Bound through `v-model`
+		// TODO: See if this should be made to follow the pattern of DropdownInput.vue so this could be removed
+		open: { type: Boolean as PropType<boolean>, required: true },
 	},
 	data() {
 		return {

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -99,7 +99,9 @@
 <script lang="ts">
 import { defineComponent, PropType, toRaw } from "vue";
 
-import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/floating-menus/MenuList.vue";
+import { MenuListEntry, SectionsOfMenuListEntries } from "@/wasm-communication/messages";
+
+import MenuList from "@/components/floating-menus/MenuList.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 

frontend/src/components/widgets/inputs/FontInput.vue

@@ -71,9 +71,10 @@
 <script lang="ts">
 import { defineComponent, nextTick, PropType } from "vue";
 
-import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
-import MenuList, { MenuListEntry } from "@/components/floating-menus/MenuList.vue";
+import { MenuListEntry } from "@/wasm-communication/messages";
 
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
+import MenuList from "@/components/floating-menus/MenuList.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -84,8 +85,8 @@ export default defineComponent({
 	props: {
 		fontFamily: { type: String as PropType<string>, required: true },
 		fontStyle: { type: String as PropType<string>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
 		isStyle: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {
@@ -111,6 +112,7 @@ export default defineComponent({
 		},
 		async setOpen() {
 			this.open = true;
+
 			// Scroll to the active entry (the scroller div does not yet exist so we must wait for vue to render)
 			await nextTick();
 			if (this.activeEntry) {

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -72,9 +72,9 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { MenuEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
+import { MenuEntry, UpdateMenuBarLayout, MenuListEntry } from "@/wasm-communication/messages";
 
-import MenuList, { MenuListEntry } from "@/components/floating-menus/MenuList.vue";
+import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 const LOCK_REQUIRING_SHORTCUTS = [
@@ -100,7 +100,7 @@ export default defineComponent({
 					group.map((entry) => ({
 						...entry,
 						children: entry.children ? menuEntryToFrontendMenuEntry(entry.children) : undefined,
-						action: (): void => this.editor.instance.update_layout(updateMenuBarLayout.layout_target, entry.action.widget_id, undefined),
+						action: (): void => this.editor.instance.update_layout(updateMenuBarLayout.layout_target, entry.action.widgetId, undefined),
 						shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut) : undefined,
 					}))
 				);

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -87,27 +87,30 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IncrementBehavior } from "@/wasm-communication/messages";
+
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 
-type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
-type IncrementDirection = "Decrease" | "Increase";
+export type IncrementDirection = "Decrease" | "Increase";
 
 export default defineComponent({
 	emits: ["update:value"],
 	props: {
+		label: { type: String as PropType<string>, required: false },
 		value: { type: Number as PropType<number>, required: false }, // When not provided, a dash is displayed
 		min: { type: Number as PropType<number>, required: false },
 		max: { type: Number as PropType<number>, required: false },
-		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: "Add" },
-		incrementFactor: { type: Number as PropType<number>, default: 1 },
-		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
-		incrementCallbackDecrease: { type: Function as PropType<() => void>, required: false },
 		isInteger: { type: Boolean as PropType<boolean>, default: false },
+		displayDecimalPlaces: { type: Number as PropType<number>, default: 3 },
 		unit: { type: String as PropType<string>, default: "" },
 		unitIsHiddenWhenEditing: { type: Boolean as PropType<boolean>, default: true },
-		displayDecimalPlaces: { type: Number as PropType<number>, default: 3 },
-		label: { type: String as PropType<string>, required: false },
+		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: "Add" },
+		incrementFactor: { type: Number as PropType<number>, default: 1 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+
+		// Callbacks
+		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
+		incrementCallbackDecrease: { type: Function as PropType<() => void>, required: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/inputs/OptionalInput.vue

@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="optional-input">
-		<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
+		<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
 	</LayoutRow>
 </template>
 
@@ -47,6 +47,7 @@ export default defineComponent({
 	props: {
 		checked: { type: Boolean as PropType<boolean>, required: true },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	components: {
 		CheckboxInput,

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -64,22 +64,12 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { RadioEntries, RadioEntryData } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
-export interface RadioEntryData {
-	value?: string;
-	label?: string;
-	icon?: IconName;
-	tooltip?: string;
-	action?: () => void;
-}
-
-export type RadioEntries = RadioEntryData[];
-
 export default defineComponent({
 	emits: ["update:selectedIndex"],
 	props: {

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -1,15 +1,15 @@
 <template>
 	<LayoutCol class="swatch-pair">
 		<LayoutRow class="secondary swatch">
-			<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
+			<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-hover-menu-spawner></button>
 			<FloatingMenu :type="'Popover'" :direction="'Right'" v-model:open="secondaryOpen">
-				<ColorPicker @update:color="(color: RGBA) => secondaryColorChanged(color)" :color="secondaryColor" />
+				<ColorPicker @update:color="(color: RGBA) => secondaryColorChanged(color)" :color="secondary.toRgba()" />
 			</FloatingMenu>
 		</LayoutRow>
 		<LayoutRow class="primary swatch">
-			<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
+			<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-hover-menu-spawner></button>
 			<FloatingMenu :type="'Popover'" :direction="'Right'" v-model:open="primaryOpen">
-				<ColorPicker @update:color="(color: RGBA) => primaryColorChanged(color)" :color="primaryColor" />
+				<ColorPicker @update:color="(color: RGBA) => primaryColorChanged(color)" :color="primary.toRgba()" />
 			</FloatingMenu>
 		</LayoutRow>
 	</LayoutCol>
@@ -66,10 +66,10 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import { rgbaToDecimalRgba } from "@/utility-functions/color";
-import { type RGBA, UpdateWorkingColors } from "@/wasm-communication/messages";
+import { type RGBA, Color } from "@/wasm-communication/messages";
 
 import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
@@ -84,12 +84,14 @@ export default defineComponent({
 		LayoutRow,
 		LayoutCol,
 	},
+	props: {
+		primary: { type: Object as PropType<Color>, required: true },
+		secondary: { type: Object as PropType<Color>, required: true },
+	},
 	data() {
 		return {
 			primaryOpen: false,
 			secondaryOpen: false,
-			primaryColor: { r: 0, g: 0, b: 0, a: 1 } as RGBA,
-			secondaryColor: { r: 255, g: 255, b: 255, a: 1 } as RGBA,
 		};
 	},
 	methods: {
@@ -102,44 +104,13 @@ export default defineComponent({
 			this.secondaryOpen = true;
 		},
 		primaryColorChanged(color: RGBA) {
-			this.primaryColor = color;
-			this.updatePrimaryColor();
+			const newColor = rgbaToDecimalRgba(color);
+			this.editor.instance.update_primary_color(newColor.r, newColor.g, newColor.b, newColor.a);
 		},
 		secondaryColorChanged(color: RGBA) {
-			this.secondaryColor = color;
-			this.updateSecondaryColor();
+			const newColor = rgbaToDecimalRgba(color);
+			this.editor.instance.update_secondary_color(newColor.r, newColor.g, newColor.b, newColor.a);
 		},
-		async updatePrimaryColor() {
-			let color = this.primaryColor;
-			const button = this.$refs.primaryButton as HTMLButtonElement;
-			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
-
-			color = rgbaToDecimalRgba(this.primaryColor);
-			this.editor.instance.update_primary_color(color.r, color.g, color.b, color.a);
-		},
-		async updateSecondaryColor() {
-			let color = this.secondaryColor;
-			const button = this.$refs.secondaryButton as HTMLButtonElement;
-			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
-
-			color = rgbaToDecimalRgba(this.secondaryColor);
-			this.editor.instance.update_secondary_color(color.r, color.g, color.b, color.a);
-		},
-	},
-	mounted() {
-		this.editor.subscriptions.subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
-			this.primaryColor = updateWorkingColors.primary.toRgba();
-			this.secondaryColor = updateWorkingColors.secondary.toRgba();
-
-			const primaryButton = this.$refs.primaryButton as HTMLButtonElement;
-			primaryButton.style.setProperty("--swatch-color", updateWorkingColors.primary.toRgbaCSS());
-
-			const secondaryButton = this.$refs.secondaryButton as HTMLButtonElement;
-			secondaryButton.style.setProperty("--swatch-color", updateWorkingColors.secondary.toRgbaCSS());
-		});
-
-		this.updatePrimaryColor();
-		this.updateSecondaryColor();
 	},
 });
 </script>

frontend/src/components/widgets/labels/IconLabel.vue

@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow :class="['icon-label', iconSize, iconStyle]">
+	<LayoutRow :class="['icon-label', iconSizeClass, iconStyleClass]">
 		<component :is="icon" />
 	</LayoutRow>
 </template>
@@ -42,16 +42,15 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 export default defineComponent({
 	props: {
 		icon: { type: String as PropType<IconName>, required: true },
-		gapAfter: { type: Boolean as PropType<boolean>, default: false },
-		style: { type: String as PropType<IconStyle>, default: "" },
+		iconStyle: { type: String as PropType<IconStyle | undefined>, required: false },
 	},
 	computed: {
-		iconSize(): string {
+		iconSizeClass(): string {
 			return `size-${icons[this.icon].size}`;
 		},
-		iconStyle(): string {
-			if (!this.style) return "";
-			return `${this.style}-style`;
+		iconStyleClass(): string {
+			if (!this.iconStyle || this.iconStyle === "Normal") return "";
+			return `${this.iconStyle.toLowerCase()}-style`;
 		},
 	},
 	components: {

frontend/src/components/widgets/labels/Separator.vue

@@ -75,8 +75,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-export type SeparatorDirection = "Horizontal" | "Vertical";
-export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";
+import { SeparatorDirection, SeparatorType } from "@/wasm-communication/messages";
 
 export default defineComponent({
 	props: {

frontend/src/components/window/workspace/Panel.vue

@@ -21,7 +21,36 @@
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutCol class="panel-body">
-			<component :is="panelType" />
+			<component :is="panelType" v-if="panelType" />
+			<LayoutCol class="empty-panel" v-else>
+				<LayoutCol class="content">
+					<LayoutRow class="logotype">
+						<IconLabel :icon="'GraphiteLogotypeSolid'" />
+					</LayoutRow>
+					<LayoutRow class="actions">
+						<LayoutCol>
+							<IconButton :action="() => newDocument()" :icon="'File'" :size="24" />
+							<IconButton :action="() => openDocument()" :icon="'Folder'" :size="24" />
+						</LayoutCol>
+						<LayoutCol>
+							<Separator :type="'Related'" />
+							<Separator :type="'Related'" />
+						</LayoutCol>
+						<LayoutCol>
+							<TextLabel>New Document:</TextLabel>
+							<TextLabel>Open Document:</TextLabel>
+						</LayoutCol>
+						<LayoutCol>
+							<Separator :type="'Unrelated'" />
+							<Separator :type="'Unrelated'" />
+						</LayoutCol>
+						<LayoutCol>
+							<UserInputLabel :inputKeys="[['KeyControl', 'KeyN']]" />
+							<UserInputLabel :inputKeys="[['KeyControl', 'KeyO']]" />
+						</LayoutCol>
+					</LayoutRow>
+				</LayoutCol>
+			</LayoutCol>
 		</LayoutCol>
 	</LayoutCol>
 </template>
@@ -141,6 +170,45 @@
 		flex: 1 1 100%;
 		flex-direction: column;
 		min-height: 0;
+
+		.empty-panel {
+			background: var(--color-2-mildblack);
+			margin: 4px;
+			border-radius: 2px;
+			justify-content: center;
+
+			.content {
+				flex: 0 0 auto;
+				align-items: center;
+
+				.logotype {
+					margin-bottom: 40px;
+
+					svg {
+						width: auto;
+						height: 120px;
+					}
+				}
+
+				.actions {
+					> div {
+						gap: 8px;
+
+						> * {
+							height: 24px;
+						}
+
+						.text-label {
+							line-height: 24px;
+						}
+
+						.user-input-label {
+							margin: 0;
+						}
+					}
+				}
+			}
+		}
 	}
 }
 </style>
@@ -156,6 +224,10 @@ import NodeGraph from "@/components/panels/NodeGraph.vue";
 import Properties from "@/components/panels/Properties.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
 const panelComponents = {
 	Document,
@@ -168,18 +240,31 @@ const panelComponents = {
 type PanelTypes = keyof typeof panelComponents;
 
 export default defineComponent({
+	inject: ["editor"],
 	props: {
 		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
 		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
 		tabLabels: { type: Array as PropType<string[]>, required: true },
 		tabActiveIndex: { type: Number as PropType<number>, required: true },
-		panelType: { type: String as PropType<PanelTypes>, required: true },
+		panelType: { type: String as PropType<PanelTypes>, required: false },
 		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
 		closeAction: { type: Function as PropType<(index: number) => void>, required: false },
 	},
+	methods: {
+		newDocument() {
+			this.editor.instance.new_document_dialog();
+		},
+		openDocument() {
+			this.editor.instance.open_file_upload();
+		},
+	},
 	components: {
 		LayoutCol,
 		LayoutRow,
+		IconLabel,
+		TextLabel,
+		UserInputLabel,
+		Separator,
 		...panelComponents,
 	},
 });

frontend/src/components/window/workspace/Workspace.vue

@@ -4,7 +4,7 @@
 			<LayoutCol class="workspace-grid-subdivision">
 				<LayoutRow class="workspace-grid-subdivision">
 					<Panel
-						:panelType="'Document'"
+						:panelType="portfolio.state.documents.length > 0 ? 'Document' : undefined"
 						:tabCloseButtons="true"
 						:tabMinWidths="true"
 						:tabLabels="portfolio.state.documents.map((doc) => doc.displayName)"
@@ -64,7 +64,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, nextTick } from "vue";
 
 import DialogModal from "@/components/floating-menus/DialogModal.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -117,7 +117,7 @@ export default defineComponent({
 				nextSibling.style.flexGrow = (nextSiblingSize + mouseDelta).toString();
 				previousSibling.style.flexGrow = (previousSiblingSize - mouseDelta).toString();
 
-				window.dispatchEvent(new CustomEvent("resize", { detail: {} }));
+				window.dispatchEvent(new CustomEvent("resize"));
 			}
 
 			function cleanup(event: PointerEvent): void {
@@ -134,12 +134,12 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		activeDocumentIndex(newIndex: number) {
-			this.$nextTick(() => {
-				const documentsPanel = this.$refs.documentsPanel as typeof Panel;
-				const newActiveTab = documentsPanel.$el.querySelectorAll("[data-tab-bar] [data-tab]")[newIndex];
-				newActiveTab.scrollIntoView();
-			});
+		async activeDocumentIndex(newIndex: number) {
+			await nextTick();
+
+			const documentsPanel = this.$refs.documentsPanel as typeof Panel;
+			const newActiveTab = documentsPanel.$el.querySelectorAll("[data-tab-bar] [data-tab]")[newIndex];
+			newActiveTab.scrollIntoView();
 		},
 	},
 });