From 6a3d701e82f923f940cdd706920787144e856320 Mon Sep 17 00:00:00 2001 From: Joscha Date: Wed, 12 Feb 2025 12:58:35 +0100 Subject: [PATCH] Make entire ui store state public --- gdn-app/src/App.vue | 2 +- gdn-app/src/stores/ui.ts | 78 +++++++++++++++++++++------------------- 2 files changed, 43 insertions(+), 37 deletions(-) diff --git a/gdn-app/src/App.vue b/gdn-app/src/App.vue index 6204015..667b3bb 100644 --- a/gdn-app/src/App.vue +++ b/gdn-app/src/App.vue @@ -10,7 +10,7 @@ window.addEventListener("keypress", (ev) => { if (document.activeElement !== document.body) return; if (ev.key === "Escape") { - if (ui.mode !== "focus") { + if (ui.mode.type !== "focus") { ui.focus(); return; } diff --git a/gdn-app/src/stores/ui.ts b/gdn-app/src/stores/ui.ts index 7f0df87..338d6f4 100644 --- a/gdn-app/src/stores/ui.ts +++ b/gdn-app/src/stores/ui.ts @@ -1,6 +1,6 @@ import { Segment, Path as UiPath } from "@/lib/path"; import { defineStore } from "pinia"; -import { computed, ref, watchEffect } from "vue"; +import { ref, watchEffect } from "vue"; interface HistoryEntry { anchorId: string; @@ -17,22 +17,22 @@ export const useUiStore = defineStore("ui", () => { const history = ref([]); // Managed by history - const _anchorId = ref(); - const _focusPath = ref(new UiPath()); + const anchorId = ref(); + const focusPath = ref(new UiPath()); const openPaths = ref>(new Set()); - const _mode = ref({ type: "focus" }); + const mode = ref({ type: "focus" }); const pinned = ref<{ segment: Segment; parentId?: string }>(); // Ensure the currently focused note is visible. watchEffect(() => { - if (_mode.value.type === "insert") { - for (const ancestor of _mode.value.path.ancestors()) { + if (mode.value.type === "insert") { + for (const ancestor of mode.value.path.ancestors()) { setOpen(ancestor, true); } } else { // The node pointed to by the path itself doesn't need to be unfolded. - for (const ancestor of _focusPath.value.ancestors().slice(1)) { + for (const ancestor of focusPath.value.ancestors().slice(1)) { setOpen(ancestor, true); } } @@ -42,22 +42,20 @@ export const useUiStore = defineStore("ui", () => { // History and anchor management // /////////////////////////////////// - const anchorId = computed(() => _anchorId.value); // Getter - function pushAnchorId(id: string): void { - if (_anchorId.value) { + if (anchorId.value) { history.value.push({ - anchorId: _anchorId.value, - focusPath: _focusPath.value, + anchorId: anchorId.value, + focusPath: focusPath.value, openPaths: openPaths.value, }); } - _anchorId.value = id; - _focusPath.value = new UiPath(); + anchorId.value = id; + focusPath.value = new UiPath(); openPaths.value = new Set(); - _mode.value = { type: "focus" }; + mode.value = { type: "focus" }; } function popAnchorId(): void { @@ -66,55 +64,52 @@ export const useUiStore = defineStore("ui", () => { const entry = history.value.pop(); if (entry) { - _anchorId.value = entry.anchorId; - _focusPath.value = entry.focusPath; + anchorId.value = entry.anchorId; + focusPath.value = entry.focusPath; openPaths.value = entry.openPaths; } else { - _anchorId.value = undefined; - _focusPath.value = new UiPath(); + anchorId.value = undefined; + focusPath.value = new UiPath(); openPaths.value = new Set(); } - _mode.value = { type: "focus" }; + mode.value = { type: "focus" }; } /////////////////////////////// // Mode and focus management // /////////////////////////////// - const mode = computed(() => _mode.value.type); - const focusPath = computed(() => _focusPath.value); - function isFocused(path: UiPath): boolean { - return _mode.value.type === "focus" && _focusPath.value.eq(path); + return mode.value.type === "focus" && focusPath.value.eq(path); } function isEditing(path: UiPath): boolean { - return _mode.value.type === "edit" && _mode.value.path.eq(path); + return mode.value.type === "edit" && mode.value.path.eq(path); } function getInsertIndex(path: UiPath): number | undefined { - if (_mode.value.type !== "insert") return; - if (!_mode.value.path.eq(path)) return; - if (_mode.value.index < 0) return; - return _mode.value.index; + if (mode.value.type !== "insert") return; + if (!mode.value.path.eq(path)) return; + if (mode.value.index < 0) return; + return mode.value.index; } function focus(): void { - _mode.value = { type: "focus" }; + mode.value = { type: "focus" }; } function focusOn(path: UiPath): void { focus(); - _focusPath.value = path; + focusPath.value = path; } function edit(path: UiPath): void { - _mode.value = { type: "edit", path }; + mode.value = { type: "edit", path }; } function insertAt(path: UiPath, index: number): void { - _mode.value = { type: "insert", path, index }; + mode.value = { type: "insert", path, index }; } ////////////////// @@ -132,7 +127,7 @@ export const useUiStore = defineStore("ui", () => { openPaths.value.add(path.fmt()); } else if (!value && isOpen(path)) { // Move the focusPath if necessary - if (path.isPrefixOf(_focusPath.value)) _focusPath.value = path; + if (path.isPrefixOf(focusPath.value)) focusPath.value = path; openPaths.value.delete(path.fmt()); } @@ -160,21 +155,32 @@ export const useUiStore = defineStore("ui", () => { } return { + history, anchorId, + focusPath, + openPaths, + mode, + pinned, + + // History and anchor management pushAnchorId, popAnchorId, + + // Mode and focus management isFocused, isEditing, getInsertIndex, - mode, - focusPath, focus, focusOn, edit, insertAt, + + // Node folding isOpen, setOpen, toggleOpen, + + // Pinning isPinned, setPinned, unsetPinned,