From 066bf23a2acba2759cde8f728e06a0d093384423 Mon Sep 17 00:00:00 2001 From: Tom Norris Date: Sun, 3 Sep 2023 20:50:14 -0700 Subject: [PATCH] The more I learn about svelte the less I want anything to do with it... --- src/ImageGrid.ts | 89 +++++++++++++++++++++++++++++++ src/block.ts | 75 +++++++++++--------------- src/main.ts | 4 +- src/settings.ts | 6 +-- src/svelte/ImageGrid.svelte | 17 ------ src/utils.ts | 4 +- src/view.ts | 103 ++++++++++++++---------------------- 7 files changed, 168 insertions(+), 130 deletions(-) create mode 100644 src/ImageGrid.ts delete mode 100644 src/svelte/ImageGrid.svelte diff --git a/src/ImageGrid.ts b/src/ImageGrid.ts new file mode 100644 index 0000000..6427680 --- /dev/null +++ b/src/ImageGrid.ts @@ -0,0 +1,89 @@ +import type GalleryTagsPlugin from "./main" +import type { ImageResources } from './utils' +import { + getImageResources, + splitcolumns, + setLazyLoading + } from './utils' + +export class ImageGrid +{ + plugin: GalleryTagsPlugin + parent: HTMLElement + path: string = "" + name: string = "" + tag: string = "" + exclusive: boolean = false + reverse : boolean = false + maxWidth : number + imgResources!: ImageResources + imgList: string[] = [] + totalCount: number = 0 + + tempImg: string + + constructor(parent: HTMLElement, plugin: GalleryTagsPlugin) + { + this.plugin = plugin; + this.parent = parent; + this.path = this.plugin.settings.galleryLoadPath; + this.maxWidth = this.plugin.settings.width; + this.tempImg = this.plugin.app.vault.adapter.getResourcePath(".obsidian/plugins/obsidian-tagged-gallery/loading.gif") + } + + async updateData() + { + { + const totalFiles = this.plugin.app.vault.getFiles(); + this.totalCount = totalFiles.length; + this.imgResources = await getImageResources(this.path, + this.name, + this.tag, + this.exclusive, + totalFiles, + this.plugin.app.vault.adapter, + this.plugin) + + this.imgList = Object.keys(this.imgResources) + if(this.reverse) + { + this.imgList = this.imgList.reverse() + } + } + } + + updateDisplay() + { + const [columns, columnWidth] = splitcolumns(this.imgList, this.parent, this.plugin.settings.width) + + for(let col = 0; col < columns.length; col++) + { + const images = columns[col]; + const columnEL = this.parent.createDiv({ cls: 'gallery-grid-column' }); + for(let row = 0; row < images.length; row++) + { + if(images[row].contains(".mp4") || images[row].contains(".webm")) + { + const vid = columnEL.createEl("video"); + vid.src = images[row]; + vid.classList.add("gallery-grid-vid"); + vid.controls = true; + vid.width = columnWidth; + } + else + { + const img = columnEL.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 = images[row]; + img.width = columnWidth; + } + } + } + + setLazyLoading(); + } +} \ No newline at end of file diff --git a/src/block.ts b/src/block.ts index e568527..9514352 100644 --- a/src/block.ts +++ b/src/block.ts @@ -1,29 +1,29 @@ import type { Vault, MetadataCache, FrontMatterCache } from 'obsidian' -import { MarkdownRenderer, TFile, getAllTags, Platform, Notice } from 'obsidian' +import { MarkdownRenderer, TFile, getAllTags, Platform } from 'obsidian' import { extractColors } from '../node_modules/extract-colors' import type { GalleryBlockArgs, InfoBlockArgs } from './utils' import { EXTENSIONS, GALLERY_DISPLAY_USAGE, EXTRACT_COLORS_OPTIONS, OB_GALLERY_INFO, VIDEO_REGEX, - getImageResources, - getImgInfo, updateFocus, splitcolumns, setLazyLoading + getImgInfo, updateFocus } from './utils' import { GalleryInfoView } from './view' -import type GalleryPlugin from './main' -import ImageGrid from './svelte/ImageGrid.svelte' +import type GalleryTagsPlugin from './main' +import { ImageGrid } from './ImageGrid' import Gallery from './svelte/Gallery.svelte' import GalleryInfo from './svelte/GalleryInfo.svelte' export class GalleryProcessor { - async galleryDisplay(source: string, el: HTMLElement, vault: Vault, metadata: MetadataCache, plugin: GalleryPlugin) + async galleryDisplay(source: string, el: HTMLElement, vault: Vault, plugin: GalleryTagsPlugin) { const args: GalleryBlockArgs = { type: 'grid', path: '', name: '', tags: '', + exclusive: 'false', imgWidth: 200, divWidth: 100, divAlign: 'left', @@ -51,35 +51,24 @@ export class GalleryProcessor MarkdownRenderer.renderMarkdown(GALLERY_DISPLAY_USAGE, elCanvas, '/', plugin) return; } - - const imgResources = await getImageResources(args.path, args.name, args.tags, true, vault.getFiles(), vault.adapter, plugin) - let imgList = Object.keys(imgResources) - - if (args.reverseOrder === 'true') - { - imgList = imgList.reverse() - } + + + const imageGrid = new ImageGrid(elCanvas, plugin); + imageGrid.path = args.path; + imageGrid.name = args.name; + imageGrid.tag = args.tags; + imageGrid.exclusive = args.exclusive === 'true'; + imageGrid.reverse = args.reverseOrder === 'true'; + await imageGrid.updateData(); if (args.customList) { - imgList = args.customList.split(' ').map(i => parseInt(i)).filter(value => !Number.isNaN(value)).map(i => imgList[i]) + imageGrid.imgList = args.customList.split(' ').map(i => parseInt(i)).filter(value => !Number.isNaN(value)).map(i => imageGrid.imgList[i]) } if (args.type === 'grid') { - const [columns, columnWidth] = splitcolumns(imgList, elCanvas, args.imgWidth) - let tempImg = plugin.app.vault.adapter.getResourcePath(".obsidian/plugins/obsidian-tagged-gallery/loading.gif") - - new ImageGrid({ - props: { - columns: columns, - maxColumnWidth: columnWidth, - tempImg: tempImg - }, - target: elCanvas - }) - - setLazyLoading(); + imageGrid.updateDisplay(); const imageFocusEl = elCanvas.createDiv({ cls: 'ob-gallery-image-focus' }) const focusElContainer = imageFocusEl.createDiv({ attr: { class: 'focus-element-container' } }); @@ -115,23 +104,23 @@ export class GalleryProcessor { // Read New image info const imgPath = event.target.src - imgFocusIndex = imgList.indexOf(imgPath) + imgFocusIndex = imageGrid.imgList.indexOf(imgPath) imageFocusEl.style.setProperty('display', 'block') - updateFocus(focusImage, focusVideo, imgList[imgFocusIndex], false) + updateFocus(focusImage, focusVideo, imageGrid.imgList[imgFocusIndex], false) } if (event.target instanceof HTMLVideoElement) { // Read video info const imgPath = event.target.src - imgFocusIndex = imgList.indexOf(imgPath) + imgFocusIndex = imageGrid.imgList.indexOf(imgPath) imageFocusEl.style.setProperty('display', 'block') // Save clicked video info to set it back later pausedVideo = event.target pausedVideoUrl = pausedVideo.src // disable clicked video pausedVideo.src = '' - updateFocus(focusImage, focusVideo, imgList[imgFocusIndex], true) + updateFocus(focusImage, focusVideo, imageGrid.imgList[imgFocusIndex], true) } }) @@ -140,7 +129,7 @@ export class GalleryProcessor if (e.target instanceof HTMLImageElement || e.target instanceof HTMLVideoElement) { // Open image file - const file = vault.getAbstractFileByPath(imgResources[e.target.src]) + const file = vault.getAbstractFileByPath(imageGrid.imgResources[e.target.src]) if (file instanceof TFile) { plugin.app.workspace.getUnpinnedLeaf().openFile(file) @@ -161,28 +150,28 @@ export class GalleryProcessor imgFocusIndex-- if (imgFocusIndex < 0) { - imgFocusIndex = imgList.length - 1 + imgFocusIndex = imageGrid.imgList.length - 1 } - if (imgList[imgFocusIndex].match(VIDEO_REGEX)) + if (imageGrid.imgList[imgFocusIndex].match(VIDEO_REGEX)) { - updateFocus(focusImage, focusVideo, imgList[imgFocusIndex], true) + updateFocus(focusImage, focusVideo, imageGrid.imgList[imgFocusIndex], true) } else { - updateFocus(focusImage, focusVideo, imgList[imgFocusIndex], false) + updateFocus(focusImage, focusVideo, imageGrid.imgList[imgFocusIndex], false) } break; case 'ArrowRight': imgFocusIndex++ - if (imgFocusIndex >= imgList.length) + if (imgFocusIndex >= imageGrid.imgList.length) { imgFocusIndex = 0 } - if (imgList[imgFocusIndex].match(VIDEO_REGEX)) + if (imageGrid.imgList[imgFocusIndex].match(VIDEO_REGEX)) { - updateFocus(focusImage, focusVideo, imgList[imgFocusIndex], true) + updateFocus(focusImage, focusVideo, imageGrid.imgList[imgFocusIndex], true) } else { - updateFocus(focusImage, focusVideo, imgList[imgFocusIndex], false) + updateFocus(focusImage, focusVideo, imageGrid.imgList[imgFocusIndex], false) } break; } @@ -193,7 +182,7 @@ export class GalleryProcessor { new Gallery({ props: { - imgList, + imgList: imageGrid.imgList, width: args.imgWidth / 50, fillFree: true }, @@ -202,7 +191,7 @@ export class GalleryProcessor } } - async galleryImageInfo(source: string, el: HTMLElement, vault: Vault, metadata: MetadataCache, plugin: GalleryPlugin) + async galleryImageInfo(source: string, el: HTMLElement, vault: Vault, metadata: MetadataCache, plugin: GalleryTagsPlugin) { const args: InfoBlockArgs = { imgPath: '', diff --git a/src/main.ts b/src/main.ts index d164863..d9160ce 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,13 +13,13 @@ export default class GalleryTagsPlugin extends Plugin { // Load message await this.loadSettings() - console.log('Loaded Gallery Plugin') + console.log('Loaded Gallery Tags Plugin') // Register gallery display block renderer this.registerMarkdownCodeBlockProcessor('gallery', async (source, el, ctx) => { const proc = new GalleryProcessor() - await proc.galleryDisplay(source, el, this.app.vault, this.app.metadataCache, this) + await proc.galleryDisplay(source, el, this.app.vault, this) }); // Register image info block diff --git a/src/settings.ts b/src/settings.ts index 1d9f56b..022e150 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -1,11 +1,11 @@ import { type App, PluginSettingTab, Setting, TFolder } from 'obsidian' -import type GalleryPlugin from './main' +import type GalleryTagsPlugin from './main' export class GallerySettingTab extends PluginSettingTab { - plugin: GalleryPlugin + plugin: GalleryTagsPlugin - constructor(app: App, plugin: GalleryPlugin) + constructor(app: App, plugin: GalleryTagsPlugin) { super(app, plugin) this.plugin = plugin diff --git a/src/svelte/ImageGrid.svelte b/src/svelte/ImageGrid.svelte deleted file mode 100644 index 97c0200..0000000 --- a/src/svelte/ImageGrid.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - -{#each columns as images} -
- {#each images as img} - {#if img.includes(".mp4") || img.includes(".webm")} - - {:else} - - {/if} - {/each} -
-{/each} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index 377fc7d..09b6efa 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,6 +1,5 @@ import type { DataAdapter, Vault, MetadataCache } from 'obsidian' import { TFolder, TFile, getAllTags } from 'obsidian' -import type GalleryPlugin from './main' import type GalleryTagsPlugin from './main' export interface GallerySettings @@ -24,6 +23,7 @@ export interface GalleryBlockArgs path: string name: string tags: string + exclusive: string imgWidth: number divWidth: number divAlign: string @@ -149,7 +149,7 @@ imgPath=${imgPath} * @param metadata - Vaulat metadata handler * @param plugin - Gallery plugin handler */ -export const getImgInfo = async (imgPath: string, vault: Vault, metadata: MetadataCache, plugin: GalleryPlugin, create: boolean): Promise => +export const getImgInfo = async (imgPath: string, vault: Vault, metadata: MetadataCache, plugin: GalleryTagsPlugin, create: boolean): Promise => { if(plugin.settings.imgDataFolder == null) { diff --git a/src/view.ts b/src/view.ts index da12e90..1f1a915 100644 --- a/src/view.ts +++ b/src/view.ts @@ -1,18 +1,16 @@ import { ItemView, type WorkspaceLeaf, setIcon, MarkdownRenderer, TFile, debounce } from 'obsidian' -import type { ImageResources } from './utils' import { OB_GALLERY, OB_GALLERY_INFO, GALLERY_RESOURCES_MISSING, VIDEO_REGEX, - gallerySearchIcon, getImageResources, getImgInfo, updateFocus, splitcolumns, setLazyLoading + gallerySearchIcon, getImgInfo, updateFocus } from './utils' import * as CodeMirror from 'codemirror' -import ImageGrid from './svelte/ImageGrid.svelte' -import type GalleryPlugin from './main' +import { ImageGrid } from './ImageGrid' import type GalleryTagsPlugin from './main' export class GalleryView extends ItemView { - plugin: GalleryPlugin + plugin: GalleryTagsPlugin headerEl: HTMLElement viewEl: HTMLElement controlEl: HTMLElement @@ -23,13 +21,12 @@ export class GalleryView extends ItemView focusImage: HTMLImageElement focusVideo: HTMLVideoElement imagesContainer: HTMLUListElement - imgList: string[] = [] - imgResources!: ImageResources imgFocusIndex: number pausedVideo: HTMLVideoElement pausedVideoUrl: string = '' + imageGrid: ImageGrid - constructor(leaf: WorkspaceLeaf, plugin: GalleryPlugin) + constructor(leaf: WorkspaceLeaf, plugin: GalleryTagsPlugin) { super(leaf) this.plugin = plugin @@ -74,6 +71,7 @@ export class GalleryView extends ItemView // Create gallery display Element this.displayEl = this.viewEl.createDiv({ cls: 'ob-gallery-display' }) this.imagesContainer = this.displayEl.createEl('ul') + this.imageGrid = new ImageGrid(this.imagesContainer, plugin); this.imageFocusEl = this.displayEl.createDiv({ cls: 'ob-gallery-image-focus', attr: { style: 'display: none;' } }) const focusElContainer = this.imageFocusEl.createDiv({ attr: { class: 'focus-element-container' } }) @@ -93,7 +91,7 @@ export class GalleryView extends ItemView pathFilterEl.addEventListener('input', async () => { - await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin) + await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked) }); // Filter by Name @@ -105,7 +103,7 @@ export class GalleryView extends ItemView nameFilterEl.addEventListener('input', async () => { - await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin) + await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked) }); // Filter by Tags @@ -117,7 +115,7 @@ export class GalleryView extends ItemView tagFilterEl.addEventListener('input', async () => { - await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin) + await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked) }); // Filter Exclusive or inclusive @@ -135,7 +133,7 @@ export class GalleryView extends ItemView exclusiveFilterEl.addEventListener('input', async () => { - await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin) + await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked) }); // Should display order be reversed @@ -153,7 +151,7 @@ export class GalleryView extends ItemView sortReverseEl.addEventListener('input', async () => { - await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin) + await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked) }); // file filter counts @@ -164,45 +162,24 @@ export class GalleryView extends ItemView // todo: figure out a way to actually get a resize event this.displayEl.onresize = async () => { - await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin) + await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked) }; } } - async updateDisplay(path: string, name: string, tag: string, exclusive: boolean, reverse : boolean, plugin: GalleryTagsPlugin) + async updateDisplay(path: string, name: string, tag: string, exclusive: boolean, reverse : boolean) { this.imagesContainer.empty() - - { - const totalFiles = this.app.vault.getFiles(); - this.imgResources = await getImageResources(path, - name, - tag, - exclusive, - totalFiles, - this.app.vault.adapter, - plugin) - - this.imgList = Object.keys(this.imgResources) - this.countEl.setText(this.imgList.length+"/"+totalFiles.length); - if(reverse) - { - this.imgList = this.imgList.reverse() - } - } - - const [columns, columnWidth] = splitcolumns(this.imgList, this.imagesContainer, plugin.settings.width) - let tempImg = this.app.vault.adapter.getResourcePath(".obsidian/plugins/obsidian-tagged-gallery/loading.gif") - new ImageGrid({ - props: { - columns: columns, - maxColumnWidth: columnWidth, - tempImg: tempImg - }, - target: this.imagesContainer - }) - setLazyLoading(); + this.imageGrid.path = path; + this.imageGrid.name = name; + this.imageGrid.tag = tag; + this.imageGrid.exclusive = exclusive; + this.imageGrid.reverse = reverse; + await this.imageGrid.updateData(); + this.imageGrid.updateDisplay(); + + this.countEl.setText(this.imageGrid.imgList.length+"/"+this.imageGrid.totalCount); } getViewType(): string @@ -235,7 +212,7 @@ export class GalleryView extends ItemView // Set Header Icon this.headerEl.querySelector('svg').outerHTML = gallerySearchIcon - await this.updateDisplay(this.plugin.settings.galleryLoadPath, '', '', true, false, this.plugin) + await this.updateDisplay(this.plugin.settings.galleryLoadPath, '', '', true, false) // Open Info panel const workspace = this.app.workspace @@ -271,10 +248,10 @@ export class GalleryInfoView extends ItemView infoFile: TFile | null = null imgPath: string galleryView: GalleryView - plugin: GalleryPlugin + plugin: GalleryTagsPlugin editor: CodeMirror.Editor - constructor(leaf: WorkspaceLeaf, plugin: GalleryPlugin) + constructor(leaf: WorkspaceLeaf, plugin: GalleryTagsPlugin) { super(leaf) this.plugin = plugin @@ -369,10 +346,10 @@ export class GalleryInfoView extends ItemView await this.saveFile() // Read New image info this.imgPath = evt.target.src - this.galleryView.imgFocusIndex = this.galleryView.imgList.indexOf(this.imgPath) + this.galleryView.imgFocusIndex = this.galleryView.imageGrid.imgList.indexOf(this.imgPath) this.galleryView.imageFocusEl.style.setProperty('display', 'block') updateFocus(this.galleryView.focusImage, this.galleryView.focusVideo, - this.galleryView.imgList[this.galleryView.imgFocusIndex], false) + this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex], false) await this.updateInfoDisplay() } @@ -383,7 +360,7 @@ export class GalleryInfoView extends ItemView await this.saveFile() // Read video info this.imgPath = evt.target.src - this.galleryView.imgFocusIndex = this.galleryView.imgList.indexOf(this.imgPath) + this.galleryView.imgFocusIndex = this.galleryView.imageGrid.imgList.indexOf(this.imgPath) this.galleryView.imageFocusEl.style.setProperty('display', 'block') // Save clicked video info to set it back later this.galleryView.pausedVideo = evt.target @@ -391,7 +368,7 @@ export class GalleryInfoView extends ItemView // disable clicked video this.galleryView.pausedVideo.src = '' updateFocus(this.galleryView.focusImage, this.galleryView.focusVideo, - this.galleryView.imgList[this.galleryView.imgFocusIndex], true) + this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex], true) await this.updateInfoDisplay() } @@ -408,7 +385,7 @@ export class GalleryInfoView extends ItemView this.clear() // Open image file - const file = this.app.vault.getAbstractFileByPath(this.galleryView.imgResources[e.target.src]) + const file = this.app.vault.getAbstractFileByPath(this.galleryView.imageGrid.imgResources[e.target.src]) if (file instanceof TFile) { this.app.workspace.getUnpinnedLeaf().openFile(file) @@ -434,34 +411,34 @@ export class GalleryInfoView extends ItemView this.galleryView.imgFocusIndex-- if (this.galleryView.imgFocusIndex < 0) { - this.galleryView.imgFocusIndex = this.galleryView.imgList.length - 1 + this.galleryView.imgFocusIndex = this.galleryView.imageGrid.imgList.length - 1 } - if (this.galleryView.imgList[this.galleryView.imgFocusIndex].match(VIDEO_REGEX)) + if (this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex].match(VIDEO_REGEX)) { updateFocus(this.galleryView.focusImage, this.galleryView.focusVideo, - this.galleryView.imgList[this.galleryView.imgFocusIndex], true) + this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex], true) } else { updateFocus(this.galleryView.focusImage, this.galleryView.focusVideo, - this.galleryView.imgList[this.galleryView.imgFocusIndex], false) + this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex], false) } break; case 'ArrowRight': this.galleryView.imgFocusIndex++ - if (this.galleryView.imgFocusIndex >= this.galleryView.imgList.length) + if (this.galleryView.imgFocusIndex >= this.galleryView.imageGrid.imgList.length) { this.galleryView.imgFocusIndex = 0 } - if (this.galleryView.imgList[this.galleryView.imgFocusIndex].match(VIDEO_REGEX)) + if (this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex].match(VIDEO_REGEX)) { updateFocus(this.galleryView.focusImage, this.galleryView.focusVideo, - this.galleryView.imgList[this.galleryView.imgFocusIndex], true) + this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex], true) } else { updateFocus(this.galleryView.focusImage, this.galleryView.focusVideo, - this.galleryView.imgList[this.galleryView.imgFocusIndex], false) + this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex], false) } break; } @@ -469,7 +446,7 @@ export class GalleryInfoView extends ItemView await this.saveFile() // Read New image info - this.imgPath = this.galleryView.imgList[this.galleryView.imgFocusIndex] + this.imgPath = this.galleryView.imageGrid.imgList[this.galleryView.imgFocusIndex] await this.updateInfoDisplay() }, false) } @@ -525,7 +502,7 @@ export class GalleryInfoView extends ItemView async updateInfoDisplay() { - this.infoFile = await getImgInfo(this.galleryView.imgResources[this.imgPath], + this.infoFile = await getImgInfo(this.galleryView.imageGrid.imgResources[this.imgPath], this.app.vault, this.app.metadataCache, this.plugin,