improve fuzzy matching. add drag delay setting

manifest-beta.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-bartender",
   "name": "Bartender",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "minAppVersion": "0.12.5",
   "description": "Allows for rearranging the elements in the status bar and sidebar ribbon",
   "author": "NothingIsLost",

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-bartender",
   "name": "Bartender",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "minAppVersion": "0.12.5",
   "description": "Allows for rearranging the elements in the status bar and sidebar ribbon",
   "author": "NothingIsLost",

src/main.ts

@@ -1,9 +1,9 @@
+import Fuse from "fuse.js";
 import { around } from "monkey-around";
 import {
   ChildElement,
   FileExplorerHeader,
   FileExplorerView,
-  InfinityScroll,
   Platform,
   Plugin,
   RootElements,
@@ -17,27 +17,25 @@ import {
   WorkspaceItem,
   WorkspaceLeaf,
   WorkspaceSplit,
-  WorkspaceTabs,
+  WorkspaceTabs
 } from "obsidian";
 import Sortable, { MultiDrag } from "sortablejs";
 import { addSortButton, folderSort } from "./file-explorer/custom-sort";
 import { BartenderSettings, DEFAULT_SETTINGS, SettingTab } from "./settings/settings";
 import {
   generateId,
-  GenerateIdOptions,
-  getItems,
+  GenerateIdOptions, getFn, getItems,
   getNextSiblings,
   getPreviousSiblings,
   highlight,
-  reorderArray,
+  reorderArray
 } from "./utils";
-import Fuse from "fuse.js";
 
 Sortable.mount(new MultiDrag());
 
 const STATUS_BAR_SELECTOR = "body > div.app-container div.status-bar";
 const RIBBON_BAR_SELECTOR = "body > div.app-container div.side-dock-actions";
-const DRAG_DELAY = Platform.isMobile ? 200 : 20;
+const DRAG_DELAY = Platform.isMobile ? 200 : 200;
 const ANIMATION_DURATION = 500;
 
 export default class BartenderPlugin extends Plugin {
@@ -155,8 +153,10 @@ export default class BartenderPlugin extends Plugin {
         includeScore: true,
         includeMatches: true,
         useExtendedSearch: true,
-        threshold: 0.3,
-        keys: ["file.name", "file.path"],
+        getFn: getFn,
+        threshold: 0.1,
+        ignoreLocation: true,
+        keys: ["file.path"],
       };
       let flattenedItems = getItems(this.rootEl._children);
       const fuse = new Fuse(flattenedItems, options);
@@ -461,7 +461,7 @@ export default class BartenderPlugin extends Plugin {
     let sorter = Sortable.create(element, {
       group: "leftTabBar",
       dataIdAttr: "data-id",
-      delay: 0,
+      delay: Platform.isMobile ? 200 : this.settings.dragDelay,
       dropBubble: false,
       dragoverBubble: false,
       animation: ANIMATION_DURATION,
@@ -492,7 +492,7 @@ export default class BartenderPlugin extends Plugin {
       this.statusBarSorter = Sortable.create(el, {
         group: "statusBar",
         dataIdAttr: "data-id",
-        delay: DRAG_DELAY,
+        delay: Platform.isMobile ? 200 : this.settings.dragDelay,
         animation: ANIMATION_DURATION,
         onChoose: () => {
           Array.from(el.children).forEach(el => el.removeClass("is-hidden"));
@@ -522,7 +522,7 @@ export default class BartenderPlugin extends Plugin {
     let sortable = new Sortable(el, {
       group: "actionBar",
       dataIdAttr: "data-id",
-      delay: DRAG_DELAY,
+      delay: Platform.isMobile ? 200 : this.settings.dragDelay,
       sort: true,
       animation: ANIMATION_DURATION,
       onStart: () => {
@@ -549,7 +549,7 @@ export default class BartenderPlugin extends Plugin {
       this.ribbonBarSorter = Sortable.create(el, {
         group: "ribbonBar",
         dataIdAttr: "data-id",
-        delay: DRAG_DELAY,
+        delay: Platform.isMobile ? 200 : this.settings.dragDelay,
         animation: ANIMATION_DURATION,
         onChoose: () => {
           Array.from(el.children).forEach(el => el.removeClass("is-hidden"));
@@ -624,7 +624,7 @@ export default class BartenderPlugin extends Plugin {
         // @ts-ignore
         multiDragKey: "alt",
         // selectedClass: "is-selected",
-        delay: Platform.isMobile ? 200 : 0,
+        delay: Platform.isMobile ? 200 : this.settings.dragDelay,
         sort: dragEnabled, // init with dragging disabled. the nav bar button will toggle on/off
         animation: ANIMATION_DURATION,
         onStart: evt => {

src/settings/settings.ts

@@ -8,6 +8,7 @@ export interface BartenderSettings {
   actionBarOrder: Record<string, string[]>;
   autoHide: boolean;
   autoHideDelay: number;
+  dragDelay: number;
 }
 
 export const DEFAULT_SETTINGS: BartenderSettings = {
@@ -17,6 +18,7 @@ export const DEFAULT_SETTINGS: BartenderSettings = {
   actionBarOrder: {},
   autoHide: false,
   autoHideDelay: 2000,
+  dragDelay: 200,
 };
 
 export class SettingTab extends PluginSettingTab {
@@ -36,7 +38,7 @@ export class SettingTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Auto Collapse")
-      .setDesc("Automatically hide items once your mouse leaves the icon container")
+      .setDesc("Automatically hide ribbon and status bar items once your mouse leaves the icon container")
       .addToggle(toggle =>
         toggle.setValue(this.plugin.settings.autoHide).onChange(value => {
           this.plugin.settings.autoHide = value;
@@ -46,7 +48,7 @@ export class SettingTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Auto Collapse Delay")
-      .setDesc("How long to wait before auto collapsing")
+      .setDesc("How long to wait before auto collapsing hidden icons on the ribbon and status bar")
       .addText(textfield => {
         textfield.setPlaceholder(String(2000));
         textfield.inputEl.type = "number";
@@ -56,5 +58,18 @@ export class SettingTab extends PluginSettingTab {
           this.plugin.saveSettings();
         });
       });
+
+    new Setting(containerEl)
+      .setName("Drag Start Delay (ms)")
+      .setDesc("How long to wait before triggering the drag behavior after clicking. ⚠️ Requires an app restart.")
+      .addText(textfield => {
+        textfield.setPlaceholder(String(200));
+        textfield.inputEl.type = "number";
+        textfield.setValue(String(this.plugin.settings.dragDelay));
+        textfield.onChange(async value => {
+          this.plugin.settings.dragDelay = Number(value);
+          this.plugin.saveSettings();
+        });
+      });
   }
 }

src/utils.ts

@@ -1,3 +1,4 @@
+import Fuse from "fuse.js";
 import { ChildElement } from "obsidian";
 
 export function getPreviousSiblings(el: HTMLElement, filter?: (el: HTMLElement) => boolean): HTMLElement[] {
@@ -108,7 +109,7 @@ export const highlight = (fuseSearchResult: any, highlightClassName: string = "s
         str[end] = `${str[end]}</span>`;
         return str;
       }, inputText.split(""))
-      .join("");
+      .join(""); // .replace(/.md$/, "");
 
     return result;
   };
@@ -118,11 +119,27 @@ export const highlight = (fuseSearchResult: any, highlightClassName: string = "s
     .map(({ item, matches }: any) => {
       const highlightedItem = { ...item };
       matches.forEach((match: any) => {
-        if (!highlightedItem.titleInnerEl.origContent) highlightedItem.titleInnerEl.origContent = highlightedItem.titleInnerEl.textContent;
+        if (!highlightedItem.titleInnerEl.origContent)
+          highlightedItem.titleInnerEl.origContent = highlightedItem.titleInnerEl.textContent;
         set(highlightedItem, "titleInnerEl.innerHTML", generateHighlightedText(match.value, match.indices));
         highlightedItem.titleInnerEl?.addClass("has-matches");
       });
 
       return highlightedItem;
     });
 };
+
+export function removeExt(obj: any) {
+  if (typeof obj === "string" || obj instanceof String) {
+    return obj.replace(/.md$/, "");
+  }
+  return obj;
+}
+
+export function getFn(obj: any, path: string[]) {
+  var value = Fuse.config.getFn(obj, path);
+  if (Array.isArray(value)) {
+    return value.map(el => removeExt(el));
+  }
+  return removeExt(value);
+}