feat(floating-window): floating-window manager; toggle floating-windo…

…w; save settings on quit

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

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 ==========

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

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

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

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");
 				}),
 			);
 

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;
+	}
+}