From bce557cc2dc767628bed6aac87301a1be7c5431b Mon Sep 17 00:00:00 2001 From: rxliuli Date: Tue, 4 Nov 2025 05:03:50 +0800 Subject: init commit --- shared/components/src/utils/shelfAspectRatio.ts | 75 +++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 shared/components/src/utils/shelfAspectRatio.ts (limited to 'shared/components/src/utils/shelfAspectRatio.ts') diff --git a/shared/components/src/utils/shelfAspectRatio.ts b/shared/components/src/utils/shelfAspectRatio.ts new file mode 100644 index 0000000..eeb977d --- /dev/null +++ b/shared/components/src/utils/shelfAspectRatio.ts @@ -0,0 +1,75 @@ +import { getAspectRatio } from '@amp/web-app-components/src/components/Artwork/utils/artProfile'; +import { setContext, getContext, hasContext } from 'svelte'; +import { derived, writable } from 'svelte/store'; +import type { Readable } from 'svelte/store'; +import type { Profile } from '@amp/web-app-components/src/components/Artwork/types'; +import type { AspectRatioOverrideConfig } from '@amp/web-app-components/src/components/Shelf/types'; + +const SHELF_ASPECT_RATIO_KEY = 'shelf-aspect-ratio'; + +export const getShelfAspectRatioContext = (): { + shelfAspectRatio: Readable; + addProfile: (profile: string | Profile) => void; +} => { + return getContext(SHELF_ASPECT_RATIO_KEY); +}; + +export const hasShelfAspectRatioContext = () => + hasContext(SHELF_ASPECT_RATIO_KEY); + +const createShelfAspectRatioStore = (config: AspectRatioOverrideConfig) => { + const { subscribe, update } = writable(new Map() as Map); + + const addProfile = (profile: string) => { + const ratio = getAspectRatio(profile).toFixed(2); + + update((ratiosCount) => { + const currentCount = ratiosCount.get(ratio); + const newCount = ratiosCount.has(ratio) ? currentCount + 1 : 0; + ratiosCount.set(ratio, newCount); + return ratiosCount; + }); + }; + + const aspectRatioStore = { + subscribe, + addProfile, + }; + + const shelfAspectRatio = derived(aspectRatioStore, ($store) => { + let aspectRatio: string = null; + + // Don't set shelf aspect ratio when only 1 ratio is found + // + // This allows e.g. a shelf with only tall artwork Powerswooshes to use + // their native 3:4 aspect ratio, even when the shelf is set to use the + // fixed 1:1 aspect ratio or a dominant aspect ratio. + if ($store.size > 1) { + if (config.type === 'fixed') { + aspectRatio = config.aspectRatio; + } else if (config.type === 'dominant') { + let highestCount = 0; + for (const [ratio, count] of $store.entries()) { + if (highestCount < count) { + aspectRatio = ratio; + highestCount = count; + } + } + } + } + + return aspectRatio; + }); + + return { + shelfAspectRatio, + addProfile, + }; +}; + +export const createShelfAspectRatioContext = ( + config: AspectRatioOverrideConfig, +) => { + setContext(SHELF_ASPECT_RATIO_KEY, createShelfAspectRatioStore(config)); + return getShelfAspectRatioContext(); +}; -- cgit v1.2.3