- Don't suggest tags allready on image

- Don't resize for small resize increases
- Don't redraw for resizes unless there is column shifting
- New optional setting for max image height
- Fix for meta file not immediately being available for edit after inital creation

README.md

@@ -25,6 +25,12 @@
 
 
 # Release Notes
+## 1.0.0 RC1
+ - Fuzzy search auto completer field added to tag block
+ - tag block has Xs to delete tags
+ - Fixed refresh bug in main gallery view
+ - some CICD work to make builds run smoother that was not smooth to set up
+
 ## 0.8.1
  - Added button to copy current main gallery filter in a format that can be pasted in a note to generate a block gallery
  - Added another button to paste the same information back in as a filter to use in the gallery
@@ -48,10 +54,4 @@
 ## v0.7.1
  - Fixing critical bug with meta file templates
  - Improves display of gallery filter on mobile
- - Image info blocks now try to resolve the image if the path has changed, and provides some info if it fails
-
-## v0.7.0
-- Total image count now only count file the gallery thinks it can display in the first place
-- More large gallery optimization
-- Added a setting for default hidden info
-- Added the option to set your own template file for the meta files
+ - Image info blocks now try to resolve the image if the path has changed, and provides some info if it fails

src/DisplayObjects/GalleryInfo.ts

@@ -150,7 +150,7 @@ export class GalleryInfo
 			const newTagEl = currentVal.createEl("input", {cls: "new-tag-input"});
 			newTagEl.name = "new-tag";
 			newTagEl.placeholder = "New Tag";
-			new SuggestionDropdown(newTagEl, () =>{
+			const suggetions = new SuggestionDropdown(newTagEl, () =>{
 				const files = this.plugin.app.vault.getMarkdownFiles();
 				const allTags: string[] = []
 				for(let i = 0; i < files.length; i++)
@@ -192,6 +192,7 @@ export class GalleryInfo
 					(document.querySelector("input[name='new-tag']") as HTMLInputElement).focus();
 					});
 			});
+			suggetions.ignoreList = this.tagList;
 		}
 
 		if(!this.infoList.contains("backlinks"))

src/DisplayObjects/ImageGrid.ts

@@ -17,27 +17,40 @@ export class ImageGrid
 	exclusive: boolean = false
 	reverse : boolean = false
 	maxWidth : number
+	maxHeight : number
 	imgResources!: ImageResources
 	imgList: string[] = []
 	totalCount: number = 0
 
 	#tempImg: string
-	#columnCount: number
+	#redraw: boolean
+	#oldWidth: number = 0
+	#columnEls: HTMLDivElement[] = []
 
 	constructor(parent: HTMLElement, plugin: GalleryTagsPlugin)
 	{
 		this.plugin = plugin;
 		this.parent = parent;
 		this.path = this.plugin.settings.galleryLoadPath;
 		this.maxWidth = this.plugin.settings.width;
+		if(this.plugin.settings.useMaxHeight)
+		{
+			this.maxHeight = this.plugin.settings.maxHeight;
+		}
 		this.#tempImg = "data:image/gif;base64,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"
 	}
 
 	haveColumnsChanged(): boolean
 	{
-		const newColumnCount = Math.ceil(this.parent.innerWidth/this.maxWidth);
+		const columnCount = Math.ceil(this.parent.offsetWidth/this.maxWidth);
+		const result = columnCount != this.#columnEls.length;
+
+		if(result)
+		{
+			this.#redraw = true;
+		}
 
-		return this.#columnCount != newColumnCount;
+		return result;
 	}
 
 	async updateData()
@@ -56,28 +69,48 @@ export class ImageGrid
 		{
 			this.imgList = this.imgList.reverse()
 		}
+
+		this.#redraw = true;
 	}
 
 	updateDisplay()
 	{
-		if(this.parent.innerWidth <= 0)
+		if(this.parent.offsetWidth <= 0)
+		{
+			return;
+		}
+
+		if(!this.#redraw 
+		&& this.parent.offsetWidth >= this.#oldWidth 
+		&& this.parent.offsetWidth - this.#oldWidth < 20)
+		{
+			return;
+		}
+
+		this.#oldWidth = this.parent.offsetWidth;
+
+		if(!this.#redraw && !this.haveColumnsChanged())
 		{
+			this.#resize();
 			return;
 		}
+
+        this.parent.empty();
+		this.#columnEls = [];
 
-		this.#columnCount = Math.ceil(this.parent.innerWidth/this.maxWidth);
-		const columnWidth = (this.parent.innerWidth-15)/this.#columnCount;
-		const columnEls: HTMLDivElement[] = [];
+		const columnCount = Math.ceil(this.parent.offsetWidth/this.maxWidth);
+		const columnWidth = (this.parent.offsetWidth-55)/columnCount;
 
-		for(let col = 0; col < this.#columnCount; col++)
+		for(let col = 0; col < columnCount; col++)
 		{
-			columnEls.push(this.parent.createDiv({ cls: 'gallery-grid-column' }));
+			this.#columnEls.push(this.parent.createDiv({ cls: 'gallery-grid-column' }));
+			this.#columnEls[col].style.width = columnWidth+"px";
 		}
 
 		let index = 0;
 		while(index < this.imgList.length)
 		{
-			for(let col = 0; col < this.#columnCount; col++)
+			for(let col = 0; col < this.#columnEls.length; col++)
 			{
 				if(index >= this.imgList.length)
 				{
@@ -89,26 +122,43 @@ export class ImageGrid
 
 				if(source.match(VIDEO_REGEX))
 				{
-					const vid = columnEls[col].createEl("video");
+					const vid = this.#columnEls[col].createEl("video");
 					vid.src = source;
 					vid.classList.add("gallery-grid-vid");
 					vid.controls = true;
-					vid.width = columnWidth;
+					if(this.maxHeight > 10)
+					{
+						vid.style.maxHeight = this.maxHeight+"px";
+					}
 				}
 				else
 				{
-					const img = columnEls[col].createEl("img");
+					const img = this.#columnEls[col].createEl("img");
 					img.src = this.#tempImg;
 					img.classList.add("gallery-grid-img");
 					img.classList.add("lazy");
 					img.loading = "lazy";
 					img.alt = "testing alt text";
 					img.dataset.src = source;
-					img.width = columnWidth;
+					if(this.maxHeight > 10)
+					{
+						img.style.maxHeight = this.maxHeight+"px";
+					}
 				}
 			}
 		}
 
+		this.#redraw = false;
 		setLazyLoading();
 	}
+
+	#resize()
+	{
+		const columnWidth = (this.parent.offsetWidth-55)/this.#columnEls.length;
+
+		for(let col = 0; col < this.#columnEls.length; col++)
+		{
+			this.#columnEls[col].style.width = columnWidth+"px";
+		}
+	}
 }

src/DisplayObjects/SuggestionDropdown.ts

@@ -4,6 +4,7 @@ export class SuggestionDropdown
 {
 	target: HTMLInputElement
 	showOnClick: boolean = true
+	ignoreList: string[]
 	onGetItems: () => string[]
 	onSubmit: (submission: string) => void
 	onEmptyBackspace: () => void
@@ -167,6 +168,11 @@ export class SuggestionDropdown
 		const matches: [string,number][] = []
 		for (let i = 1; i < items.length; i++) 
 		{
+			if(this.ignoreList.contains(items[i]))
+			{
+				continue;
+			}
+
 			const result = fuzzySearch({fuzzy: input.split(""), query: input, tokens: input.split(" ") }, items[i]);
 			if(result)
 			{

src/block.ts

@@ -25,6 +25,7 @@ export class GalleryProcessor
       exclusive: 'false',
       matchCase: 'false',
       imgWidth: 200,
+      imgHeight: 0,
       divWidth: 100,
       divAlign: 'left',
       reverseOrder: 'false',
@@ -60,6 +61,10 @@ export class GalleryProcessor
     imageGrid.tag = args.tags;
     imageGrid.reverse = args.reverseOrder === 'true';
     imageGrid.maxWidth = args.imgWidth;
+    if(args.imgHeight > 10)
+    {
+      imageGrid.maxHeight = args.imgHeight;
+    }
     imageGrid.exclusive = args.exclusive === 'true';
     imageGrid.matchCase = args.matchCase === 'true';
     imageGrid.reverse = args.reverseOrder === 'true';
@@ -75,7 +80,6 @@ export class GalleryProcessor
       imageGrid.updateDisplay();
       plugin.onResize = () =>
       {
-        imagesContainer.empty();
         imageGrid.updateDisplay();
       }
 

src/settings.ts

@@ -45,17 +45,17 @@ export class GallerySettingTab extends PluginSettingTab
 
     // Gallery search bar
     new Setting(containerEl)
-    .setName('Filter starts open in main gallery')
-    .setDesc('Toggle this option to have the filter header start open.')
-    .addToggle((toggle) =>
-    {
-      toggle.setValue(this.plugin.settings.filterStartOpen)
-      toggle.onChange(async (value) =>
+      .setName('Filter starts open in main gallery')
+      .setDesc('Toggle this option to have the filter header start open.')
+      .addToggle((toggle) =>
       {
-        this.plugin.settings.filterStartOpen = value
-        await this.plugin.saveSettings()
-      });
-    })
+        toggle.setValue(this.plugin.settings.filterStartOpen)
+        toggle.onChange(async (value) =>
+        {
+          this.plugin.settings.filterStartOpen = value
+          await this.plugin.saveSettings()
+        });
+      })
 
     // Default image width
     new Setting(containerEl)
@@ -74,6 +74,43 @@ export class GallerySettingTab extends PluginSettingTab
           this.plugin.settings.width = Math.abs(numValue)
           await this.plugin.saveSettings()
         }))
+
+
+    // Use max height?
+    new Setting(containerEl)
+      .setName('Use max image height')
+      .setDesc('Toggle this option to set a max image height for images to display in collumns.')
+      .addToggle((toggle) =>
+      {
+        toggle.setValue(this.plugin.settings.useMaxHeight)
+        toggle.onChange(async (value) =>
+        {
+          this.plugin.settings.useMaxHeight = value;
+          await this.plugin.saveSettings();
+          this.display();
+        });
+      })
+
+    // Max image height
+    if(this.plugin.settings.useMaxHeight)
+    {
+      new Setting(containerEl)
+      .setName('Max image height')
+      .setDesc('Max image height in `pixels` for images to display in collumns.')
+      .addText(text => text
+        .setPlaceholder(`${this.plugin.settings.maxHeight}`)
+        .onChange(async (value) =>
+        {
+          const numValue = parseInt(value)
+          if (isNaN(numValue))
+          {
+            return;
+          }
+
+          this.plugin.settings.maxHeight = Math.abs(numValue)
+          await this.plugin.saveSettings()
+        }))
+    }
 
     // Hidden meta fields
     new Setting(containerEl)

src/utils.ts

@@ -8,6 +8,8 @@ export interface GallerySettings
   galleryLoadPath: string
   imgmetaTemplatePath: string | null
   width: number
+  useMaxHeight: boolean
+  maxHeight: number
   hiddenInfo: string | null
   filterStartOpen: boolean
 }
@@ -29,6 +31,7 @@ export interface GalleryBlockArgs
   exclusive: string
   matchCase: string
   imgWidth: number
+  imgHeight: number
   divWidth: number
   divAlign: string
   reverseOrder: string
@@ -46,6 +49,8 @@ export const SETTINGS: GallerySettings = {
   galleryLoadPath: '/',
   imgmetaTemplatePath: null,
   width: 400,
+  useMaxHeight: false,
+  maxHeight: 400,
   hiddenInfo: "tags;palette",
   filterStartOpen: false
 }
@@ -214,9 +219,13 @@ export const getImgInfo = async (imgPath: string, vault: Vault, metadata: Metada
         template = await plugin.app.vault.read(templateTFile);
       }
 
-      infoFile = await vault.create(normalizePath(`${plugin.settings.imgDataFolder}/${fileName}.md`), initializeInfo(template, imgPath, imgName));
+      const filepath = normalizePath(`${plugin.settings.imgDataFolder}/${fileName}.md`);
+      await vault.create(filepath, initializeInfo(template, imgPath, imgName));
+      // TODO: this waits a moment for the metadatacache to catch up with the new backlinks, but boy does it feel gross. Need to find out if there's another way to do this
+      await new Promise(f => setTimeout(f, 50));
+      infoFile = plugin.app.vault.getAbstractFileByPath(filepath) as TFile
     }
-    return infoFile
+    return infoFile 
   }
 
   // Specified Resources folder does not exist