[filebrowser] Highlight search in gallery

bin/style.css

@@ -5302,6 +5302,11 @@ fancy-tooltip fancy-item fancy-name {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+fancy-gallery fancy-item fancy-name > span.search-hl,
+fancy-tooltip fancy-item fancy-name > span.search-hl {
+  background-color: var(--selection);
+  color: white;
+}
 fancy-gallery fancy-item.details fancy-name,
 fancy-tooltip fancy-item.details fancy-name {
   position: relative;

bin/style.less

@@ -6313,7 +6313,6 @@ fancy-gallery fancy-item, fancy-tooltip fancy-item {
 		border-radius: unset;
 
 		gap: 0.2em;
-
 	}
 
 	fancy-thumbnail {
@@ -6362,6 +6361,11 @@ fancy-gallery fancy-item, fancy-tooltip fancy-item {
 		word-break: break-all;
 		text-overflow: ellipsis;
 		overflow: hidden;
+
+		>span.search-hl {
+			background-color: var(--selection);
+			color: white;
+		}
 	}
 
 	&.details fancy-name {

hide/comp/FancyGallery.hx

@@ -9,7 +9,7 @@ enum GalleryRefreshFlag {
 
 typedef GalleryRefreshFlags = haxe.EnumFlags<GalleryRefreshFlag>;
 
-typedef GalleryItemData<GalleryItem> = {item: GalleryItem, name: String, element: js.html.Element, thumbnailStringCache: String, iconStringCache: String};
+typedef GalleryItemData<GalleryItem> = {item: GalleryItem, name: String, element: js.html.Element, thumbnailStringCache: String, iconStringCache: String, ranges: hide.comp.FancySearch.SearchRanges};
 
 class FancyGallery<GalleryItem> extends hide.comp.Component {
 
@@ -171,6 +171,10 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 		return [];
 	}
 
+	public dynamic function getItemRanges(item: GalleryItem) : hide.comp.FancySearch.SearchRanges {
+		return [];
+	}
+
 	public dynamic function getName(item: GalleryItem) : String {
 		return "";
 	}
@@ -489,8 +493,14 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 		}
 
 		var name = genElement.querySelector("fancy-name");
-		if (name.title != data.name) {
-			name.innerHTML = '<span class="bg">${data.name}</span>';
+		var ranges = getItemRanges(data.item);
+		if (name.title != data.name || data.ranges != ranges) {
+			data.ranges = ranges;
+			if (data.ranges != null) {
+				name.innerHTML = FancySearch.splitSearchRanges(data.name, data.ranges);
+			} else {
+				name.innerHTML = data.name;
+			}
 			name.title = data.name;
 		}
 
@@ -521,6 +531,7 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 				element: null,
 				thumbnailStringCache: null,
 				iconStringCache: null,
+				ranges: null,
 			});
 
 			currentData.push(data);

hide/comp/FancySearch.hx

@@ -55,4 +55,20 @@ class FancySearch extends hide.comp.Component {
 			return null;
 		return [pos, pos + needle.length];
 	}
+
+	public static function splitSearchRanges(string: String, ranges: SearchRanges, openToken: String = "<span class='search-hl'>", closeToken: String = "</span>") : String {
+		var lastPos = 0;
+		var finalName = "";
+		for (index in 0...(ranges.length>>1)) {
+			var len = ranges[index+1] - ranges[index];
+			if (len > 0) {
+				var first = string.substr(lastPos, ranges[index]);
+				var match = string.substr(ranges[index], len);
+				finalName += first + openToken + match + closeToken;
+			}
+			lastPos = ranges[index+1];
+		}
+		finalName += string.substr(lastPos);
+		return finalName;
+	}
 }

hide/comp/FancyTree.hx

@@ -763,17 +763,7 @@ class FancyTree<TreeItem> extends hide.comp.Component {
 		element.title = data.name;
 
 		if (data.searchRanges != null) {
-			var name = data.name;
-			var lastPos = 0;
-			var finalName = "";
-			for (index in 0...(data.searchRanges.length>>1)) {
-				var first = name.substr(lastPos, data.searchRanges[index]);
-				var match = name.substr(data.searchRanges[index], data.searchRanges[index+1] - data.searchRanges[index]);
-				finalName += first + '<span class="search-hl">' + match + "</span>";
-				lastPos = data.searchRanges[index+1];
-			}
-			finalName += name.substr(lastPos);
-			nameElement.innerHTML = finalName;
+			nameElement.innerHTML = hide.comp.FancySearch.splitSearchRanges(data.name, data.searchRanges);
 		} else {
 			nameElement.innerHTML = data.name;
 		}

hide/view/FileBrowser.hx

@@ -118,7 +118,8 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 	public static final dragKey = "application/x.filemove";
 
 	var currentFolder : FileEntry;
-	var currentSearch = [];
+	var currentSearch : Array<FileEntry> = [];
+	var currentSearchRanges : Map<FileEntry, hide.comp.FancySearch.SearchRanges> = [];
 	var searchString: String = "";
 	var fancyGallery : hide.comp.FancyGallery<FileEntry>;
 	var fancyTree: hide.comp.FancyTree<FileEntry>;
@@ -183,6 +184,7 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 		galleryRefreshQueued = false;
 		hide.tools.FileManager.inst.clearRenderQueue();
 		currentSearch = [];
+		currentSearchRanges = [];
 
 		var validFolder = currentFolder;
 		while(validFolder != null && !sys.FileSystem.exists(validFolder.getPath())) {
@@ -237,10 +239,17 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 								file.name;
 							}
 
-							var range = hide.comp.FancySearch.computeSearchRanges(name, searchString);
-							if (range == null) {
+							var ranges = hide.comp.FancySearch.computeSearchRanges(name, searchString);
+							if (ranges == null) {
 								continue;
 							}
+
+							if (gallerySearchFullPath == true) {
+								for (i in 0...ranges.length) {
+									ranges[i] = hxd.Math.imax(ranges[i] - (name.length - file.name.length), 0);
+								}
+							}
+							currentSearchRanges.set(file, ranges);
 						}
 
 						currentSearch.push(file);
@@ -510,6 +519,7 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 		}
 
 		fancyGallery.getName = (item : FileEntry) -> item.name;
+		fancyGallery.getItemRanges = (item: FileEntry) -> currentSearchRanges.get(item);
 
 		fancyGallery.getThumbnail = (item : FileEntry) -> {
 			if (item.kind == Dir) {