mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-03 21:08:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source
This commit is contained in:
0HyperCube 2022-12-27 21:24:18 +00:00 • committed by Keavon Chambers
parent d742b05d3a
commit 559c05f2a9
5 changed files with 65 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/App.vue
View file

@ -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() {

48
frontend/src/components/panels/Document.vue
View file

@ -1,23 +1,23 @@
<template>
<LayoutCol class="document">
<LayoutRow class="options-bar" :scrollableX="true">
<WidgetLayout :layout="documentModeLayout" />
<WidgetLayout :layout="toolOptionsLayout" />
<WidgetLayout :layout="document.state.documentModeLayout" />
<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 {
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

51
frontend/src/state-providers/document.ts Normal file
View file

@ -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>;

27
frontend/src/state-providers/panels.ts
View file

@ -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();