feat: have an ability to choose between transform or position property

This will affect smoothness of the cursor move and its display. Using transform will have more smoothly moving transition, but it will appear blurly.

Author: kotaindah55

main.ts

@@ -3,10 +3,13 @@ import { App, MarkdownView, Plugin, WorkspaceLeaf } from "obsidian";
 import { hookCursorPlugin, patchCursorPlugin, unpatchCursorPlugin } from "src/core";
 import { AnimatedCursorSettingTab } from "src/setting-tab";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface AnimatedCursorSettings {}
+export interface AnimatedCursorSettings {
+	useTransform: boolean;
+}
 
-export const DEFAULT_SETTINGS: AnimatedCursorSettings = {}
+export const DEFAULT_SETTINGS: AnimatedCursorSettings = {
+	useTransform: true
+}
 
 function _iterMarkdownView(app: App, callback: (view: MarkdownView) => unknown): void {
 	app.workspace.getLeavesOfType("markdown").forEach(leaf => {
@@ -29,7 +32,7 @@ export default class AnimatedCursorPlugin extends Plugin {
 	async onload(): Promise<void> {
 		await this.loadSettings();
 
-		// this.addSettingTab(new SmoothCursorSettingTab(this.app, this));
+		this.addSettingTab(new AnimatedCursorSettingTab(this.app, this));
 
 		let mdView = this.app.workspace.getActiveViewOfType(MarkdownView);
 		if (mdView)
@@ -78,7 +81,7 @@ export default class AnimatedCursorPlugin extends Plugin {
 		if (!cursorPlugin) return;
 
 		this.targetLayerConfig = cursorPlugin.layer;
-		this.originalLayerConfig = patchCursorPlugin(cursorPlugin);
+		this.originalLayerConfig = patchCursorPlugin(cursorPlugin, this.settings);
 		this.alreadyPatched = true;
 
 		// Detach the handler after a successful attemp.

src/core.ts

@@ -2,6 +2,7 @@ import { SelectionRange } from "@codemirror/state";
 import { Direction, EditorView, LayerConfig, LayerMarker, MeasureRequest, PluginInstance, ViewUpdate } from "@codemirror/view";
 import { debounce } from "obsidian";
 import { CursorLayerView, CursorPluginInstance } from "./typing";
+import { AnimatedCursorSettings } from "main";
 
 /** Ensure that it is a layer config. */
 function _isLayerConfig(object: object): object is LayerConfig {
@@ -80,16 +81,18 @@ const _blinkDebouncer = debounce((layerEl: HTMLElement) => {
  */
 class _CursorMarker implements LayerMarker {
 	private className: string;
+	private useTransform: boolean;
 
 	readonly left: number;
 	readonly top: number;
 	readonly height: number;
 
-	constructor(className: string, left: number, top: number, height: number) {
+	constructor(className: string, left: number, top: number, height: number, useTransform: boolean) {
 		this.className = className;
-		this.left = left;
-		this.top = top;
-		this.height = height;
+		this.left = Math.round(left);
+		this.top = Math.round(top);
+		this.height = Math.round(height);
+		this.useTransform = useTransform;
 	}
 
 	draw(): HTMLElement {
@@ -100,8 +103,10 @@ class _CursorMarker implements LayerMarker {
 	}
 
 	update(cursorEl: HTMLElement, prev: _CursorMarker): boolean {
-		if (prev.className != this.className)
-			return false;
+		if (
+			prev.className != this.className ||
+			prev.useTransform != this.useTransform
+		) return false;
 
 		// Reuse previous debouncer.
 		this.requestAdjust = prev.requestAdjust ?? this.requestAdjust;
@@ -115,7 +120,8 @@ class _CursorMarker implements LayerMarker {
 			this.left == other.left &&
 			this.top == other.top &&
 			this.height == other.height &&
-			this.className == other.className
+			this.className == other.className &&
+			this.useTransform == other.useTransform
 		);
 	}
 
@@ -124,22 +130,30 @@ class _CursorMarker implements LayerMarker {
 	 * range, the function will use its head position as the marker
 	 * position.
 	 */
-	static forRange(view: EditorView, className: string, range: SelectionRange): _CursorMarker | null {
+	static forRange(view: EditorView, className: string, range: SelectionRange, useTransform: boolean): _CursorMarker | null {
 		let cursorPos = view.coordsAtPos(range.head, range.assoc || 1);
 		if (!cursorPos) return null;
 		let baseCoords = _getBaseCoords(view);
 		return new _CursorMarker(
 			className,
 			cursorPos.left - baseCoords.left,
 			cursorPos.top - baseCoords.top,
-			cursorPos.bottom - cursorPos.top
+			cursorPos.bottom - cursorPos.top,
+			useTransform
 		);
 	}
 
-	/** Adjust the marker position. Should not be run in updating process. */
+	/**
+	 * Adjust the marker position. Should not be run immediately in `update`
+	 * call, use `requestAdjust` instead.
+	 */
 	private adjust = (cursorEl: HTMLElement): void => {
-		cursorEl.style.left = this.left + "px";
-		cursorEl.style.top = this.top + "px";
+		if (this.useTransform) {
+			cursorEl.style.transform = `translateX(${this.left}px) translateY(${this.top}px)`;
+		} else {
+			cursorEl.style.left = this.left + "px";
+			cursorEl.style.top = this.top + "px";
+		}
 		cursorEl.style.height = this.height + "px";
 	}
 
@@ -168,9 +182,9 @@ export function hookCursorPlugin(view: EditorView): CursorLayerView | null | und
  * Patch the cursor plugin and return the original config that can be
  * restored again.
  * 
- * **Should only be excuted once after successful hook attemp.**
+ * **Should not be executed again after successful hook attemp.**
  */
-export function patchCursorPlugin(cursorPlugin: CursorLayerView): LayerConfig {
+export function patchCursorPlugin(cursorPlugin: CursorLayerView, settings: AnimatedCursorSettings): LayerConfig {
 	// Store the original config.
 	let originalConfig = Object.assign({}, cursorPlugin.layer);
 
@@ -199,7 +213,7 @@ export function patchCursorPlugin(cursorPlugin: CursorLayerView): LayerConfig {
 			// implemented, so the primary is able to be animated.
 			let isPrimary = range == state.selection.main,
 				className = "cm-cursor " + (isPrimary ? "cm-cursor-primary" : "cm-cursor-secondary"),
-				cursorMarker = _CursorMarker.forRange(view, className, range);
+				cursorMarker = _CursorMarker.forRange(view, className, range, settings.useTransform);
 
 			if (cursorMarker)
 				cursors.push(cursorMarker);

src/setting-tab.ts

@@ -1,7 +1,6 @@
 import AnimatedCursorPlugin from "main";
-import { App, PluginSettingTab } from "obsidian"
+import { App, PluginSettingTab, Setting } from "obsidian"
 
-/** _Currently not in use._ */
 export class AnimatedCursorSettingTab extends PluginSettingTab {
 	plugin: AnimatedCursorPlugin;
 
@@ -10,7 +9,21 @@ export class AnimatedCursorSettingTab extends PluginSettingTab {
 		this.plugin = plugin;
 	}
 
-	display(): void {}
+	display(): void {
+		new Setting(this.containerEl)
+			.setName("Slightly more smoothly")
+			.setDesc(
+				"If turned on, cursor moves slightly more smoothly, especially when the user moves it continously. " +
+				"There is a downside, the cursor appears blurly."
+			)
+			.addToggle(toggle => {
+				toggle
+					.setValue(this.plugin.settings.useTransform)
+					.onChange(val => this.plugin.settings.useTransform = val);
+			});
+		
+		document.createDocumentFragment();
+	}
 
 	hide(): void {
 		// Clear all components when the tab was hidden.

styles.css

@@ -71,7 +71,7 @@ settings:
             animation: none !important;
         }
         &>.cm-cursor {
-            transition-property: top, left, height;
+            transition-property: transform, top, left;
             transition-duration: var(--cursor-move-speed);
             transition-timing-function: var(--cursor-move-easing);
             border-left-width: 2px;