Merge pull request #311 from decaf-dev/dev

1.41.0

Author: decaf-dev

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.40.2",
+	"version": "1.41.0",
 	"minAppVersion": "1.4.13",
 	"description": "Explore your vault in visual format",
 	"author": "DecafDev",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-vault-explorer",
-	"version": "1.40.2",
+	"version": "1.41.0",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {

src/constants.ts

@@ -10,6 +10,7 @@ export const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
 		favorite: "",
 		url: "",
 		image: "",
+		coverImageFit: "",
 		createdDate: "",
 		modifiedDate: "",
 		custom1: "",
@@ -45,6 +46,7 @@ export const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
 		},
 		grid: {
 			isEnabled: true,
+			coverImageFit: "cover",
 			coverImageSources: [
 				{
 					type: "image-property",

src/event/types.ts

@@ -10,6 +10,7 @@ export enum PluginEvent {
 	FOLDER_DELETE = "folder-delete",
 	FOLDER_CREATE = "folder-create",
 	PAGE_SIZE_SETTING_CHANGE = "page-size-setting-change",
+	COVER_IMAGE_FIT_SETTING_CHANGE = "cover-image-fit-setting-change",
 	FEED_CONTENT_SETTING_CHANGE = "feed-content-setting-change",
 	COVER_IMAGE_SOURCE_SETTING_CHANGE = "cover-image-source-setting-change",
 	PROPERTY_SETTING_CHANGE = "property-setting-change",

src/migrations/index.ts

@@ -30,6 +30,7 @@ import Migrate_1_37_0 from "./migrate_1_37_0";
 import Migrate_1_38_0 from "./migrate_1_38_0";
 import Migrate_1_39_0 from "./migrate_1_39_0";
 import Migrate_1_40_0 from "./migrate_1_40_0";
+import Migrate_1_41_0 from "./migrate_1_41_0";
 
 const migrations: TMigration[] = [
 	{
@@ -177,6 +178,11 @@ const migrations: TMigration[] = [
 		to: "1.40.0",
 		migrate: Migrate_1_40_0,
 	},
+	{
+		from: "1.40.2",
+		to: "1.41.0",
+		migrate: Migrate_1_41_0,
+	},
 ];
 
 export const preformMigrations = (

src/migrations/migrate_1_40_0.ts

@@ -1,11 +1,11 @@
 import MigrationInterface from "./migration_interface";
 import { VaultExplorerPluginSettings_1_39_0 } from "src/types/types-1.39.0";
-import { VaultExplorerPluginSettings } from "src/types";
+import { VaultExplorerPluginSettings_1_40_2 } from "src/types/types-1.40.2";
 
 export default class Migrate_1_40_0 implements MigrationInterface {
 	migrate(data: Record<string, unknown>) {
 		const typedData = data as unknown as VaultExplorerPluginSettings_1_39_0;
-		const newData: VaultExplorerPluginSettings = {
+		const newData: VaultExplorerPluginSettings_1_40_2 = {
 			...typedData,
 			shouldCollapseFilters: false,
 		};

src/migrations/migrate_1_41_0.ts

@@ -0,0 +1,25 @@
+import { VaultExplorerPluginSettings } from "src/types";
+import MigrationInterface from "./migration_interface";
+import { VaultExplorerPluginSettings_1_40_2 } from "src/types/types-1.40.2";
+
+export default class Migrate_1_41_0 implements MigrationInterface {
+	migrate(data: Record<string, unknown>) {
+		const typedData = data as unknown as VaultExplorerPluginSettings_1_40_2;
+		const newData: VaultExplorerPluginSettings = {
+			...typedData,
+			properties: {
+				...typedData.properties,
+				coverImageFit: "",
+			},
+			views: {
+				...typedData.views,
+				grid: {
+					...typedData.views.grid,
+					coverImageFit: "cover",
+				},
+			},
+		};
+
+		return newData as unknown as Record<string, unknown>;
+	}
+}

src/obsidian/vault-explorer-settings-tab.ts

@@ -14,7 +14,7 @@ import {
 } from "src/logger/constants";
 import Logger from "js-logger";
 import { stringToLogLevel } from "src/logger";
-import { CollapseStyle, TExplorerView } from "src/types";
+import { CollapseStyle, CoverImageFit, TExplorerView } from "src/types";
 import EventManager from "src/event/event-manager";
 import LicenseKeyApp from "../svelte/license-key-app/index.svelte";
 import ImageSourceApp from "../svelte/image-source-app/index.svelte";
@@ -312,6 +312,26 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					})
 			);
 
+		new Setting(containerEl)
+			.setName("Cover image fit")
+			.setDesc("Set the default cover image fit")
+			.addDropdown((cb) =>
+				cb
+					.addOptions({
+						cover: "Cover",
+						contain: "Contain",
+					})
+					.setValue(this.plugin.settings.views.grid.coverImageFit)
+					.onChange(async (value) => {
+						this.plugin.settings.views.grid.coverImageFit =
+							value as CoverImageFit;
+						await this.plugin.saveSettings();
+						EventManager.getInstance().emit(
+							PluginEvent.COVER_IMAGE_FIT_SETTING_CHANGE
+						);
+					})
+			);
+
 		new Setting(containerEl).setName("List view").setHeading();
 
 		new Setting(containerEl)
@@ -443,9 +463,9 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 			);
 
 		new Setting(containerEl)
-			.setName("Image property")
+			.setName("Cover image property")
 			.setDesc(
-				"Property used to store an image. This must be a text property."
+				"Property used to store a cover image. This must be a text property."
 			)
 			.addDropdown((dropdown) =>
 				dropdown
@@ -460,6 +480,24 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					})
 			);
 
+		new Setting(containerEl)
+			.setName("Cover image fit property")
+			.setDesc(
+				"Property used to store the cover image fit. This must be a text property."
+			)
+			.addDropdown((dropdown) =>
+				dropdown
+					.addOptions(getDropdownOptionsForProperties(textProperties))
+					.setValue(this.plugin.settings.properties.coverImageFit)
+					.onChange(async (value) => {
+						this.plugin.settings.properties.coverImageFit = value;
+						await this.plugin.saveSettings();
+						EventManager.getInstance().emit(
+							PluginEvent.PROPERTY_SETTING_CHANGE
+						);
+					})
+			);
+
 		new Setting(containerEl)
 			.setName("URL property")
 			.setDesc(

src/svelte/app/components/grid-card.svelte

@@ -23,6 +23,7 @@
 		isSocialMediaImageEntryExpired,
 		putSocialMediaImageUrl,
 	} from "../services/social-media-image-cache";
+	import { CoverImageFit } from "src/types";
 
 	export let displayName: string;
 	export let path: string;
@@ -35,6 +36,7 @@
 	export let custom2: string | null;
 	export let custom3: string | null;
 	export let isFavorite: boolean | null;
+	export let coverImageFit: CoverImageFit;
 
 	let plugin: VaultExplorerPlugin;
 	let enableFileIcons: boolean = false;
@@ -136,11 +138,21 @@
 		dispatch("favoritePropertyChange", { filePath, value });
 	}
 
+	function handleCoverImageFitChange(filePath: string, value: CoverImageFit) {
+		dispatch("coverImageFitChange", { filePath, value });
+	}
+
 	function handleCardContextMenu(e: Event) {
 		const nativeEvent = e as MouseEvent;
+
+		const showCoverImageOptions = path.endsWith(".md");
 		openContextMenu(plugin, path, nativeEvent, {
 			isFavorite,
+			coverImageFit: showCoverImageOptions ? coverImageFit : undefined,
 			onFavoriteChange: handleFavoriteChange,
+			onCoverImageFitChange: showCoverImageOptions
+				? handleCoverImageFitChange
+				: undefined,
 		});
 	}
 
@@ -208,7 +220,9 @@
 				<img
 					class="vault-explorer-grid-card__image"
 					src={imgSrc}
-					style="display: {isCoverImageLoaded ? 'block' : 'none'};"
+					style="display: {isCoverImageLoaded
+						? 'block'
+						: 'none'}; object-fit: {coverImageFit};"
 					on:load={handleImageLoad}
 					on:error={handleImageError}
 				/>
@@ -335,7 +349,6 @@
 	.vault-explorer-grid-card__image {
 		width: 100%;
 		height: 150px;
-		object-fit: cover;
 		border-top-left-radius: var(--radius-m);
 		border-top-right-radius: var(--radius-m);
 	}

src/svelte/app/components/grid-view.svelte

@@ -26,6 +26,7 @@
 			<GridCard
 				displayName={fileRenderData.displayName}
 				path={fileRenderData.path}
+				coverImageFit={fileRenderData.coverImageFit}
 				baseName={fileRenderData.baseName}
 				extension={fileRenderData.extension}
 				imageUrl={fileRenderData.imageUrl}
@@ -36,6 +37,7 @@
 				custom3={fileRenderData.custom3}
 				isFavorite={fileRenderData.isFavorite}
 				on:favoritePropertyChange
+				on:coverImageFitChange
 			/>
 		{/each}
 	</div>