From 15d11bc104cc12116ae5dfb61ccfa9e8c784e812 Mon Sep 17 00:00:00 2001 From: alex <419725794@qq.com> Date: Thu, 18 Jan 2024 15:15:51 +0800 Subject: [PATCH] feat(floating-window): floating-window manager; toggle floating-window; save settings on quit --- src/dev-test.ts | 1 - src/globals/plugin-setting.ts | 8 ++-- src/main.ts | 4 +- src/services/obsidian/command-registry.ts | 4 +- src/services/obsidian/plugin-manager.ts | 8 +++- src/services/obsidian/setting-manager.ts | 7 ++- src/ui/floating-window.ts | 52 ++++++++++++++++++----- 7 files changed, 61 insertions(+), 23 deletions(-) diff --git a/src/dev-test.ts b/src/dev-test.ts index 01c20f4..7240490 100644 --- a/src/dev-test.ts +++ b/src/dev-test.ts @@ -11,7 +11,6 @@ import { ChinesePatch } from "./integrations/languages/chinese-patch"; import { RenderMarkdownModal } from "./main"; import { SearchService } from "./services/obsidian/search-service"; import { Tokenizer } from "./services/search/tokenizer"; -import { FloatingWindow } from "./ui/floating-window"; import { logger } from "./utils/logger"; import { getInstance, monitorExecution } from "./utils/my-lib"; import { AssetsProvider } from "./utils/web/assets-provider"; diff --git a/src/globals/plugin-setting.ts b/src/globals/plugin-setting.ts index 23dfa6d..63175f7 100644 --- a/src/globals/plugin-setting.ts +++ b/src/globals/plugin-setting.ts @@ -41,8 +41,8 @@ export const DEFAULT_OUTER_SETTING: OuterSetting = { maxItemResults: 30, showedExtension: "except md", collapseDevSettingByDefault: isDevEnvironment ? false : true, - floatingWindowTop: "20px", - floatingWindowLeft: "20px", + inFileFloatingWindowTop: "2.7em", + inFileFloatingWindowLeft: "2.5em", }, }; @@ -60,8 +60,8 @@ export type UISetting = { maxItemResults: number; showedExtension: "none" | "except md" | "all"; collapseDevSettingByDefault: boolean; - floatingWindowTop: string; - floatingWindowLeft: string, + inFileFloatingWindowTop: string; + inFileFloatingWindowLeft: string, }; // ========== transparent for users ========== diff --git a/src/main.ts b/src/main.ts index 3ce8927..9e5c67f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -30,6 +30,9 @@ export default class CleverSearch extends Plugin { this.app.workspace.onLayoutReady(() => { pluginManager.onLayoutReady(); }); + this.registerEvent( + this.app.workspace.on("quit", () => pluginManager.onAppQuit(), this), + ); // this.exampleCode(); } @@ -140,7 +143,6 @@ class RenderHTMLModal extends Modal { console.log(this.contentHTML); this.containerEl.style.backgroundColor = "black"; this.containerEl.innerHTML = this.contentHTML; - } onClose() { diff --git a/src/services/obsidian/command-registry.ts b/src/services/obsidian/command-registry.ts index 235e6a2..8ba893c 100644 --- a/src/services/obsidian/command-registry.ts +++ b/src/services/obsidian/command-registry.ts @@ -5,7 +5,7 @@ import { EventEnum } from "src/globals/enums"; import { SearchType } from "src/globals/search-types"; import { OmnisearchIntegration } from "src/integrations/omnisearch"; import type CleverSearch from "src/main"; -import { FloatingWindow } from "src/ui/floating-window"; +import { FloatingWindowManager } from "src/ui/floating-window"; import { SearchModal } from "src/ui/search-modal"; import { eventBus } from "src/utils/event-bus"; import { currModifier, getInstance, isDevEnvironment } from "src/utils/my-lib"; @@ -27,7 +27,7 @@ export class CommandRegistry { this.addCommand({ id: "cs-in-file-search-floating-window", name: "In file search - floating window", - callback: () => getInstance(FloatingWindow).toggle() + callback: () => getInstance(FloatingWindowManager).toggle("inFile") }) this.addCommand({ diff --git a/src/services/obsidian/plugin-manager.ts b/src/services/obsidian/plugin-manager.ts index 612d596..e2546d7 100644 --- a/src/services/obsidian/plugin-manager.ts +++ b/src/services/obsidian/plugin-manager.ts @@ -1,6 +1,5 @@ import { ChinesePatch } from "src/integrations/languages/chinese-patch"; import { OmnisearchIntegration } from "src/integrations/omnisearch"; -import { FloatingWindow } from "src/ui/floating-window"; import { AssetsProvider } from "src/utils/web/assets-provider"; import { SearchClient } from "src/web-workers/client"; import { singleton } from "tsyringe"; @@ -9,6 +8,7 @@ import { CommandRegistry } from "./command-registry"; import { SettingManager } from "./setting-manager"; import { DataManager } from "./user-data/data-manager"; import { ViewRegistry } from "./view-registry"; +import { FloatingWindowManager } from "src/ui/floating-window"; @singleton() export class PluginManager { @@ -36,6 +36,10 @@ export class PluginManager { // should be called in CleverSearch.onunload() onunload() { getInstance(DataManager).onunload(); - getInstance(FloatingWindow).onClose(); + getInstance(FloatingWindowManager).onunload(); + } + + onAppQuit() { + getInstance(SettingManager).saveSettings(); } } diff --git a/src/services/obsidian/setting-manager.ts b/src/services/obsidian/setting-manager.ts index d5c8562..1278cc2 100644 --- a/src/services/obsidian/setting-manager.ts +++ b/src/services/obsidian/setting-manager.ts @@ -23,6 +23,7 @@ import { t } from "./translations/locale-helper"; import { DataManager } from "./user-data/data-manager"; import { DataProvider } from "./user-data/data-provider"; import { ViewRegistry } from "./view-registry"; +import { FloatingWindowManager } from "src/ui/floating-window"; @singleton() export class SettingManager { @@ -266,8 +267,10 @@ class GeneralTab extends PluginSettingTab { .setDesc("In case you move it outside of the viewport") .addButton((b) => b.setButtonText("Reset Position").onClick((e) => { - this.setting.ui.floatingWindowLeft = "20px"; - this.setting.ui.floatingWindowTop = "20px"; + this.setting.ui.inFileFloatingWindowLeft = "2.7em"; + this.setting.ui.inFileFloatingWindowTop = "2.5em"; + getInstance(FloatingWindowManager).toggle("inFile"); + getInstance(FloatingWindowManager).toggle("inFile"); }), ); diff --git a/src/ui/floating-window.ts b/src/ui/floating-window.ts index bedf0bf..d34c67f 100644 --- a/src/ui/floating-window.ts +++ b/src/ui/floating-window.ts @@ -1,26 +1,41 @@ import { OuterSetting } from "src/globals/plugin-setting"; import { SettingManager } from "src/services/obsidian/setting-manager"; +import { logger } from "src/utils/logger"; import { singleton } from "tsyringe"; import { SearchType } from "../globals/search-types"; -import { getInstance } from "../utils/my-lib"; +import { TO_BE_IMPL, getInstance } from "../utils/my-lib"; import MountedModal from "./MountedModal.svelte"; import { ViewHelper } from "./view-helper"; @singleton() -export class FloatingWindow { +export class FloatingWindowManager { + toggle(windowType: "inFile" | "inVault") { + if (windowType === "inFile") { + getInstance(InFileFloatingWindow).toggle(); + } else { + throw Error(TO_BE_IMPL); + } + } + + onunload() { + getInstance(InFileFloatingWindow).onClose(); + } +} +abstract class FloatingWindow { private isDragging = false; private dragStartX = 0; private dragStartY = 0; - private uiSetting = getInstance(OuterSetting).ui; - private containerEl: HTMLDivElement; + protected uiSetting = getInstance(OuterSetting).ui; + protected containerEl: HTMLDivElement; private frameEl: HTMLDivElement; private contentEl: HTMLDivElement; private mountedElement: MountedModal | null = null; - toggle() { + toggle(): FloatingWindow { + logger.info("abc") if (this.mountedElement !== null) { this.onClose(); - return; + return this; } this.containerEl = document.body.createDiv(); this.frameEl = this.containerEl.createDiv(); @@ -32,8 +47,8 @@ export class FloatingWindow { this.containerEl.addClass("cs-floating-window-container"); this.containerEl.style.position = "fixed"; - this.containerEl.style.top = this.uiSetting.floatingWindowTop; - this.containerEl.style.left = this.uiSetting.floatingWindowLeft; + // load position and other states from setting + this.loadContainerElStates(); this.containerEl.style.zIndex = "20"; this.containerEl.style.border = "1px solid #454545"; this.containerEl.style.borderRadius = "10px"; @@ -70,8 +85,12 @@ export class FloatingWindow { }, }); getInstance(ViewHelper).focusInput(); + return this; } + protected abstract loadContainerElStates(): void; + protected abstract saveContainerElStates(): void; + private handleMouseDown = (e: MouseEvent) => { this.isDragging = true; this.containerEl.style.opacity = "0.75"; @@ -85,14 +104,13 @@ export class FloatingWindow { this.containerEl.style.left = `${e.pageX - this.dragStartX}px`; this.containerEl.style.top = `${e.pageY - this.dragStartY}px`; } - }; private handleMouseUp = () => { this.isDragging = false; this.containerEl.style.opacity = "1"; - this.uiSetting.floatingWindowLeft = this.containerEl.style.left; - this.uiSetting.floatingWindowTop = this.containerEl.style.top; + // remember position and other stated + this.saveContainerElStates(); getInstance(SettingManager).postSettingUpdated(); }; @@ -106,3 +124,15 @@ export class FloatingWindow { this.containerEl?.remove(); }; } + +@singleton() +class InFileFloatingWindow extends FloatingWindow { + protected loadContainerElStates(): void { + this.containerEl.style.top = this.uiSetting.inFileFloatingWindowTop; + this.containerEl.style.left = this.uiSetting.inFileFloatingWindowLeft; + } + protected saveContainerElStates(): void { + this.uiSetting.inFileFloatingWindowLeft = this.containerEl.style.left; + this.uiSetting.inFileFloatingWindowTop = this.containerEl.style.top; + } +} \ No newline at end of file