fix: add a store to be able to cache thumbnails

src/Umbraco.Web.UI.Client/src/packages/media/imaging/constants.ts

@@ -1 +1,2 @@
 export const UMB_IMAGING_REPOSITORY_ALIAS = 'Umb.Repository.Imaging';
+export const UMB_IMAGING_STORE_ALIAS = 'Umb.Store.Imaging';

src/Umbraco.Web.UI.Client/src/packages/media/imaging/imaging.store.token.ts

@@ -0,0 +1,4 @@
+import type { UmbImagingStore } from './imaging.store.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_IMAGING_STORE_CONTEXT = new UmbContextToken<UmbImagingStore>('UmbImagingStore');

src/Umbraco.Web.UI.Client/src/packages/media/imaging/imaging.store.ts

@@ -0,0 +1,47 @@
+import { UMB_IMAGING_STORE_CONTEXT } from './imaging.store.token.js';
+import type { UmbImagingModel } from './types.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+
+export class UmbImagingStore extends UmbContextBase<never> implements UmbApi {
+	#data;
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_IMAGING_STORE_CONTEXT.toString());
+		this.#data = new Map<string, Map<string, string>>();
+	}
+
+	/**
+	 * Gets the data from the store.
+	 */
+	getData(unique: string) {
+		return this.#data.get(unique);
+	}
+
+	/**
+	 * Gets a specific crop if it exists.
+	 */
+	getCrop(unique: string, data?: UmbImagingModel) {
+		return this.#data.get(unique)?.get(this.#generateCropKey(data));
+	}
+
+	/**
+	 * Adds a new crop to the store.
+	 */
+	addCrop(unique: string, urlInfo: string, data?: UmbImagingModel) {
+		if (!this.#data.has(unique)) {
+			this.#data.set(unique, new Map());
+		}
+		this.#data.get(unique)?.set(this.#generateCropKey(data), urlInfo);
+	}
+
+	/**
+	 * Generates a unique key for the crop based on the width, height and mode.
+	 */
+	#generateCropKey(data?: UmbImagingModel) {
+		return data ? `${data.width}x${data.height};${data.mode}` : 'generic';
+	}
+}
+
+export default UmbImagingStore;

src/Umbraco.Web.UI.Client/src/packages/media/imaging/manifests.ts

@@ -1,5 +1,5 @@
-import { UMB_IMAGING_REPOSITORY_ALIAS } from './constants.js';
-import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_IMAGING_REPOSITORY_ALIAS, UMB_IMAGING_STORE_ALIAS } from './constants.js';
+import type { ManifestRepository, ManifestStore, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
 const repository: ManifestRepository = {
 	type: 'repository',
@@ -8,4 +8,11 @@ const repository: ManifestRepository = {
 	api: () => import('./imaging.repository.js'),
 };
 
-export const manifests: Array<ManifestTypes> = [repository];
+const store: ManifestStore = {
+	type: 'store',
+	alias: UMB_IMAGING_STORE_ALIAS,
+	name: 'Imaging Store',
+	api: () => import('./imaging.store.js'),
+};
+
+export const manifests: Array<ManifestTypes> = [repository, store];