Save the layouts, even when in the welcome screen (#916)

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -638,7 +638,10 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 							node.inputs.extend(((node.inputs.len() - 1)..input_index).map(|_| NodeInput::Network));
 						}
 						node.inputs[input_index] = NodeInput::Value { tagged_value: value, exposed: false };
-						responses.push_back(DocumentMessage::NodeGraphFrameGenerate.into());
+						responses.push_back(PropertiesPanelMessage::ResendActiveProperties.into());
+						if node.name != "Imaginate" || input_index == 0 {
+							responses.push_back(DocumentMessage::NodeGraphFrameGenerate.into());
+						}
 					}
 				}
 			}

frontend/src/App.vue

@@ -244,6 +244,7 @@ import { createLocalizationManager } from "@/io-managers/localization";
 import { createPanicManager } from "@/io-managers/panic";
 import { createPersistenceManager } from "@/io-managers/persistence";
 import { createDialogState, type DialogState } from "@/state-providers/dialog";
+import { createDocumentState, type DocumentState } from "@/state-providers/document";
 import { createFontsState, type FontsState } from "@/state-providers/fonts";
 import { createFullscreenState, type FullscreenState } from "@/state-providers/fullscreen";
 import { createNodeGraphState, type NodeGraphState } from "@/state-providers/node-graph";
@@ -281,6 +282,7 @@ declare module "@vue/runtime-core" {
 		portfolio: PortfolioState;
 		workspace: WorkspaceState;
 		nodeGraph: NodeGraphState;
+		document: DocumentState;
 	}
 }
 
@@ -302,6 +304,7 @@ export default defineComponent({
 			portfolio: createPortfolioState(editor),
 			workspace: createWorkspaceState(editor),
 			nodeGraph: createNodeGraphState(editor),
+			document: createDocumentState(editor),
 		};
 	},
 	mounted() {

frontend/src/components/panels/Document.vue

@@ -1,23 +1,23 @@
 <template>
 	<LayoutCol class="document">
 		<LayoutRow class="options-bar" :scrollableX="true">
-			<WidgetLayout :layout="documentModeLayout" />
+			<WidgetLayout :layout="document.state.documentModeLayout" />
-			<WidgetLayout :layout="toolOptionsLayout" />
+			<WidgetLayout :layout="document.state.toolOptionsLayout" />
 
 			<LayoutRow class="spacer"></LayoutRow>
 
-			<WidgetLayout :layout="documentBarLayout" />
+			<WidgetLayout :layout="document.state.documentBarLayout" />
 		</LayoutRow>
 		<LayoutRow class="shelf-and-viewport">
 			<LayoutCol class="shelf">
 				<LayoutCol class="tools" :scrollableY="true">
-					<WidgetLayout :layout="toolShelfLayout" />
+					<WidgetLayout :layout="document.state.toolShelfLayout" />
 				</LayoutCol>
 
 				<LayoutCol class="spacer"></LayoutCol>
 
 				<LayoutCol class="working-colors">
-					<WidgetLayout :layout="workingColorsLayout" />
+					<WidgetLayout :layout="document.state.workingColorsLayout" />
 				</LayoutCol>
 			</LayoutCol>
 			<LayoutCol class="viewport">
@@ -229,18 +229,7 @@ import { defineComponent, nextTick } from "vue";
 
 import { textInputCleanup } from "@/utility-functions/keyboard-entry";
 import { rasterizeSVGCanvas } from "@/utility-functions/rasterization";
-import {
+import { type DisplayEditableTextbox, type MouseCursorIcon, type XY } from "@/wasm-communication/messages";
-	defaultWidgetLayout,
-	patchWidgetLayout,
-	type DisplayEditableTextbox,
-	type MouseCursorIcon,
-	type UpdateDocumentBarLayout,
-	type UpdateDocumentModeLayout,
-	type UpdateToolOptionsLayout,
-	type UpdateToolShelfLayout,
-	type UpdateWorkingColorsLayout,
-	type XY,
-} from "@/wasm-communication/messages";
 
 import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@/components/floating-menus/EyedropperPreview.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -250,7 +239,7 @@ import PersistentScrollbar from "@/components/widgets/metrics/PersistentScrollba
 import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
 export default defineComponent({
-	inject: ["editor", "panels"],
+	inject: ["editor", "panels", "document"],
 	data() {
 		const scrollbarPos: XY = { x: 0.5, y: 0.5 };
 		const scrollbarSize: XY = { x: 0.5, y: 0.5 };
@@ -294,13 +283,6 @@ export default defineComponent({
 			cursorEyedropperPreviewColorChoice: "",
 			cursorEyedropperPreviewColorPrimary: "",
 			cursorEyedropperPreviewColorSecondary: "",
-
-			// Layouts
-			documentModeLayout: defaultWidgetLayout(),
-			toolOptionsLayout: defaultWidgetLayout(),
-			documentBarLayout: defaultWidgetLayout(),
-			toolShelfLayout: defaultWidgetLayout(),
-			workingColorsLayout: defaultWidgetLayout(),
 		};
 	},
 	mounted() {
@@ -504,22 +486,6 @@ export default defineComponent({
 			this.textInput = undefined;
 			window.dispatchEvent(new CustomEvent("modifyinputfield", { detail: undefined }));
 		},
-		// Update layouts
-		updateDocumentModeLayout(updateDocumentModeLayout: UpdateDocumentModeLayout) {
-			patchWidgetLayout(this.documentModeLayout, updateDocumentModeLayout);
-		},
-		updateToolOptionsLayout(updateToolOptionsLayout: UpdateToolOptionsLayout) {
-			patchWidgetLayout(this.toolOptionsLayout, updateToolOptionsLayout);
-		},
-		updateDocumentBarLayout(updateDocumentBarLayout: UpdateDocumentBarLayout) {
-			patchWidgetLayout(this.documentBarLayout, updateDocumentBarLayout);
-		},
-		updateToolShelfLayout(updateToolShelfLayout: UpdateToolShelfLayout) {
-			patchWidgetLayout(this.toolShelfLayout, updateToolShelfLayout);
-		},
-		updateWorkingColorsLayout(updateWorkingColorsLayout: UpdateWorkingColorsLayout) {
-			patchWidgetLayout(this.workingColorsLayout, updateWorkingColorsLayout);
-		},
 		// Resize elements to render the new viewport size
 		viewportResize() {
 			// Resize the canvas

frontend/src/state-providers/document.ts

@@ -0,0 +1,51 @@
+import { nextTick, reactive, readonly } from "vue";
+
+import { type Editor } from "@/wasm-communication/editor";
+import {
+	defaultWidgetLayout,
+	patchWidgetLayout,
+	UpdateDocumentBarLayout,
+	UpdateDocumentModeLayout,
+	UpdateToolOptionsLayout,
+	UpdateToolShelfLayout,
+	UpdateWorkingColorsLayout,
+} from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createDocumentState(editor: Editor) {
+	const state = reactive({
+		// Layouts
+		documentModeLayout: defaultWidgetLayout(),
+		toolOptionsLayout: defaultWidgetLayout(),
+		documentBarLayout: defaultWidgetLayout(),
+		toolShelfLayout: defaultWidgetLayout(),
+		workingColorsLayout: defaultWidgetLayout(),
+	});
+
+	// Update layouts
+	editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
+		await nextTick();
+		patchWidgetLayout(state.documentModeLayout, updateDocumentModeLayout);
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateToolOptionsLayout, async (updateToolOptionsLayout) => {
+		await nextTick();
+		patchWidgetLayout(state.toolOptionsLayout, updateToolOptionsLayout);
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateDocumentBarLayout, async (updateDocumentBarLayout) => {
+		await nextTick();
+		patchWidgetLayout(state.documentBarLayout, updateDocumentBarLayout);
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateToolShelfLayout, async (updateToolShelfLayout) => {
+		await nextTick();
+		patchWidgetLayout(state.toolShelfLayout, updateToolShelfLayout);
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateWorkingColorsLayout, async (updateWorkingColorsLayout) => {
+		await nextTick();
+		patchWidgetLayout(state.workingColorsLayout, updateWorkingColorsLayout);
+	});
+
+	return {
+		state: readonly(state) as typeof state,
+	};
+}
+export type DocumentState = ReturnType<typeof createDocumentState>;

frontend/src/state-providers/panels.ts

@@ -9,16 +9,11 @@ import {
 	TriggerViewportResize,
 	UpdateDocumentArtboards,
 	UpdateDocumentArtwork,
-	UpdateDocumentBarLayout,
-	UpdateDocumentModeLayout,
 	UpdateDocumentOverlays,
 	UpdateDocumentRulers,
 	UpdateDocumentScrollbars,
 	UpdateEyedropperSamplingState,
 	UpdateMouseCursor,
-	UpdateToolOptionsLayout,
-	UpdateToolShelfLayout,
-	UpdateWorkingColorsLayout,
 } from "@/wasm-communication/messages";
 
 import DocumentComponent from "@/components/panels/Document.vue";
@@ -93,28 +88,6 @@ export function createPanelsState(editor: Editor) {
 			state.documentPanel.displayRemoveEditableTextbox();
 		});
 
-		// Update layouts
-		editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
-			await nextTick();
-			state.documentPanel.updateDocumentModeLayout(updateDocumentModeLayout);
-		});
-		editor.subscriptions.subscribeJsMessage(UpdateToolOptionsLayout, async (updateToolOptionsLayout) => {
-			await nextTick();
-			state.documentPanel.updateToolOptionsLayout(updateToolOptionsLayout);
-		});
-		editor.subscriptions.subscribeJsMessage(UpdateDocumentBarLayout, async (updateDocumentBarLayout) => {
-			await nextTick();
-			state.documentPanel.updateDocumentBarLayout(updateDocumentBarLayout);
-		});
-		editor.subscriptions.subscribeJsMessage(UpdateToolShelfLayout, async (updateToolShelfLayout) => {
-			await nextTick();
-			state.documentPanel.updateToolShelfLayout(updateToolShelfLayout);
-		});
-		editor.subscriptions.subscribeJsMessage(UpdateWorkingColorsLayout, async (updateWorkingColorsLayout) => {
-			await nextTick();
-			state.documentPanel.updateWorkingColorsLayout(updateWorkingColorsLayout);
-		});
-
 		// Resize elements to render the new viewport size
 		editor.subscriptions.subscribeJsMessage(TriggerViewportResize, async () => {
 			await nextTick();