From 559c05f2a9e29310efa534729c0186d43a853fce Mon Sep 17 00:00:00 2001 From: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Date: Tue, 27 Dec 2022 21:24:18 +0000 Subject: [PATCH] Save the layouts, even when in the welcome screen (#916) --- .../node_graph/node_graph_message_handler.rs | 5 +- frontend/src/App.vue | 3 ++ frontend/src/components/panels/Document.vue | 48 +++-------------- frontend/src/state-providers/document.ts | 51 +++++++++++++++++++ frontend/src/state-providers/panels.ts | 27 ---------- 5 files changed, 65 insertions(+), 69 deletions(-) create mode 100644 frontend/src/state-providers/document.ts diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs index 324c3d0d..83a72143 100644 --- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs +++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs @@ -638,7 +638,10 @@ impl MessageHandler - - + + - + - + - + @@ -229,18 +229,7 @@ import { defineComponent, nextTick } from "vue"; import { textInputCleanup } from "@/utility-functions/keyboard-entry"; import { rasterizeSVGCanvas } from "@/utility-functions/rasterization"; -import { - defaultWidgetLayout, - patchWidgetLayout, - type DisplayEditableTextbox, - type MouseCursorIcon, - type UpdateDocumentBarLayout, - type UpdateDocumentModeLayout, - type UpdateToolOptionsLayout, - type UpdateToolShelfLayout, - type UpdateWorkingColorsLayout, - type XY, -} from "@/wasm-communication/messages"; +import { type DisplayEditableTextbox, type MouseCursorIcon, 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 diff --git a/frontend/src/state-providers/document.ts b/frontend/src/state-providers/document.ts new file mode 100644 index 00000000..62d11cb3 --- /dev/null +++ b/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; diff --git a/frontend/src/state-providers/panels.ts b/frontend/src/state-providers/panels.ts index 8cff6b8f..ab234426 100644 --- a/frontend/src/state-providers/panels.ts +++ b/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();