Merge pull request #5 from jmxo/1

README.md

@@ -1,9 +1,12 @@
 ## Obsidian Auto Hide Cursor
 
-A nice complementary plugin to [obsidian-focus-mode](https://github.com/ryanpcmcquen/obsidian-focus-mode). Hides the cursor after scrolling up/down, and shows it again after moving the mouse.
+A nice complementary plugin to [obsidian-focus-mode](https://github.com/ryanpcmcquen/obsidian-focus-mode). Hides the cursor after scrolling up/down, or after a delay, and shows it again after moving the mouse. 
 
 Similar to the chrome extension [Hide mouse pointer](https://chrome.google.com/webstore/detail/hide-mouse-pointer/lbbedlldjinglbnfghakndfbagkolfdf)
 
+You can customize the numbers in the settings tab of the plugin.
+
+
 ### Installation
 
 The plugin was accepted by the plugin store. You can find it in the Community Plugins section inside obsidian.

main.ts

@@ -1,35 +1,138 @@
-import { Plugin } from "obsidian";
+import { App, Plugin, PluginSettingTab, Setting } from "obsidian";
+
+interface CursorSettings {
+	movementThreshold: number;
+	delayTime: number;
+}
+
+const DEFAULT_CURSOR_SETTINGS: CursorSettings = {
+	movementThreshold: 3,
+	delayTime: 500,
+};
+
+const HIDE_CURSOR_CLASS = "hide-cursor";
+
+export default class AutoHideCursorPlugin extends Plugin {
+	settings: CursorSettings;
+	cursorTimeout: NodeJS.Timeout;
+	isCursorMoving = false;
 
-export default class PopoutWindowListenerPlugin extends Plugin {
 	async onload() {
-		this.setupEventListeners(document.body);
+		await this.loadUserSettings();
+		this.addSettingTab(new AutoHideCursorSettingsTab(this.app, this));
+
+		this.app.workspace.onLayoutReady(() => {
+			this.setEventListeners(document.body);
+		});
 
+		// to support popout windows
 		this.registerEvent(
 			this.app.workspace.on("layout-change", () => {
 				setTimeout(() => {
-					this.setupEventListeners(activeDocument.body);
+					this.setEventListeners(activeDocument.body);
 				}, 1000);
 			})
 		);
 	}
 
-	setupEventListeners(targetElement: HTMLElement) {
-		this.registerDomEvent(
-			targetElement,
-			"scroll",
-			() => {
-				targetElement.classList.add("hide-cursor");
-			},
+	setEventListeners(targetElement: HTMLElement) {
+		targetElement.removeEventListener(
+			"mousemove",
+			this.handleCursorMovement,
 			{ capture: true }
 		);
+		targetElement.removeEventListener("scroll", this.handleScrollEvent, {
+			capture: true,
+		});
 
 		this.registerDomEvent(
 			targetElement,
 			"mousemove",
-			() => {
-				targetElement.classList.remove("hide-cursor");
-			},
+			this.handleCursorMovement,
 			{ capture: true }
 		);
+		this.registerDomEvent(targetElement, "scroll", this.handleScrollEvent, {
+			capture: true,
+		});
+	}
+
+	async loadUserSettings() {
+		this.settings = {
+			...DEFAULT_CURSOR_SETTINGS,
+			...(await this.loadData()),
+		};
+	}
+
+	async saveUserSettings() {
+		await this.saveData(this.settings);
+		this.setEventListeners(activeDocument.body);
+	}
+
+	handleScrollEvent = () => {
+		document.body.classList.add(HIDE_CURSOR_CLASS);
+		this.isCursorMoving = false;
+	};
+
+	handleCursorMovement = (evt: MouseEvent) => {
+		if (this.hasCursorMovementExceededThreshold(evt)) {
+			clearTimeout(this.cursorTimeout);
+			document.body.classList.remove(HIDE_CURSOR_CLASS);
+			this.isCursorMoving = true;
+
+			this.cursorTimeout = setTimeout(() => {
+				document.body.classList.add(HIDE_CURSOR_CLASS);
+				this.isCursorMoving = false;
+			}, this.settings.delayTime);
+		}
+	};
+
+	hasCursorMovementExceededThreshold(evt: MouseEvent) {
+		const movementThreshold = this.settings.movementThreshold;
+		const deltaX = Math.abs(evt.movementX);
+		const deltaY = Math.abs(evt.movementY);
+		return deltaX > movementThreshold || deltaY > movementThreshold;
+	}
+}
+
+class AutoHideCursorSettingsTab extends PluginSettingTab {
+	plugin: AutoHideCursorPlugin;
+
+	constructor(app: App, plugin: AutoHideCursorPlugin) {
+		super(app, plugin);
+		this.plugin = plugin;
+	}
+
+	display(): void {
+		const { containerEl } = this;
+		containerEl.empty();
+		containerEl.createEl("h2", { text: "Auto Hide Cursor Settings" });
+
+		new Setting(containerEl)
+			.setName("Movement Threshold (px)")
+			.setDesc("Minimum distance to show the cursor again")
+			.addSlider((slider) => {
+				slider
+					.setLimits(0, 10, 1)
+					.setValue(this.plugin.settings.movementThreshold)
+					.setDynamicTooltip()
+					.onChange(async (value) => {
+						this.plugin.settings.movementThreshold = value;
+						await this.plugin.saveUserSettings();
+					});
+			});
+
+		new Setting(containerEl)
+			.setName("Hide Delay (ms)")
+			.setDesc("Time to hide the cursor after stopping movement")
+			.addSlider((slider) => {
+				slider
+					.setLimits(200, 1000, 25)
+					.setValue(this.plugin.settings.delayTime)
+					.setDynamicTooltip()
+					.onChange(async (value) => {
+						this.plugin.settings.delayTime = value;
+						await this.plugin.saveUserSettings();
+					});
+			});
 	}
 }

manifest.json

@@ -1,11 +1,11 @@
 {
 	"id": "auto-hide-cursor",
 	"name": "Auto Hide Cursor",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"minAppVersion": "0.15.0",
 	"description": "Hides the cursor when scrolling and shows it again when moving the mouse.",
-	"author": "Mo Ismat",
-	"authorUrl": "https://github.com/moismat",
+	"author": "jmxo",
+	"authorUrl": "https://github.com/jmxo",
 	"fundingUrl": "",
 	"isDesktopOnly": true
 }

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "auto-hide-cursor",
-	"version": "1.0.0",
-	"description": "Hides the cursor when scrolling and shows it again when moving the mouse.",
+	"version": "1.1.0",
+	"description": "Hides the cursor when scrolling or after a delay, and shows it again after moving the mouse.",
 	"main": "main.js",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",

versions.json

@@ -1,3 +1,4 @@
-{
+{	
+	"1.1.0": "0.15.0",
 	"1.0.0": "0.15.0"
 }