@lumx/react 2.1.9-alpha-thumbnail13 → 2.1.9-alpha-thumbnail17

package/esm/_internal/Thumbnail2.js

@@ -50,19 +50,15 @@ function useImageLoad(imageURL, imgRef) {
   return state;
 }
 
-function shiftPosition(scale, containerSize, imageSize, focusSize, isVertical) {
-  if (!focusSize) return 50;
-  var focusFactor = (focusSize + 1) / 2;
-  var scaledSize = Math.floor(imageSize / scale);
-  var focus = Math.floor(focusFactor * scaledSize);
-  if (isVertical) focus = scaledSize - focus;
-  var containerCenter = Math.floor(containerSize / 2);
-  var focusOffset = focus - containerCenter;
-  var remainder = scaledSize - focus;
-  if (remainder < containerCenter) focusOffset -= containerCenter - remainder;
-  if (focusOffset < 0) return 0;
-  return Math.min(100, Math.floor(focusOffset * 100 / containerSize));
-}
+// Calculate shift to center the focus point in the container.
+function shiftPosition(scale, focusPoint, imageSize, containerSize) {
+  var scaledSize = imageSize / scale;
+  var scaledFocusHeight = focusPoint * scaledSize;
+  var startFocus = scaledFocusHeight - containerSize / 2;
+  var shift = startFocus / (scaledSize - containerSize);
+  return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
+} // Compute CSS properties to apply the focus point.
+
 
 var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
   var image = _ref.image,
@@ -73,7 +69,7 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
   var width = _ref$imgProps.width,
       height = _ref$imgProps.height;
   // Get natural image size from imgProps or img element.
-  var naturalSize = useMemo(function () {
+  var imageSize = useMemo(function () {
     if (!image || aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) return undefined;
     if (typeof width === 'number' && typeof height === 'number') return {
       width: width,
@@ -84,18 +80,25 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
       height: element.naturalHeight
     };
     return undefined;
-  }, [aspectRatio, element, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y, height, image, isLoaded, width]); // Compute focus point CSS style.
+  }, [aspectRatio, element, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y, height, image, isLoaded, width]); // Get container size.
+
+  var containerWidth = element === null || element === void 0 ? void 0 : element.offsetWidth;
+  var containerHeight = element === null || element === void 0 ? void 0 : element.offsetHeight; // Compute focus point CSS style.
 
   return useMemo(function () {
-    if (aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) return {};
-
-    if (element && naturalSize) {
-      var actualWidth = element.offsetWidth;
-      var actualHeight = element.offsetHeight;
-      var heightScale = actualHeight / naturalSize.height;
-      var widthScale = actualWidth / naturalSize.width;
-      var x = shiftPosition(heightScale, actualWidth, naturalSize.width, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x);
-      var y = shiftPosition(widthScale, actualHeight, naturalSize.height, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y, true);
+    if (!image || aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) return {};
+
+    if (containerWidth && containerHeight && imageSize) {
+      var heightScale = imageSize.height / containerHeight;
+      var widthScale = imageSize.width / containerWidth;
+      var scale = Math.min(widthScale, heightScale); // Focus Y relative to the top (instead of the center)
+
+      var focusPointFromTop = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2;
+      var y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerHeight); // Focus X relative to the left (instead of the center)
+
+      var focusPointFromLeft = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2;
+      var x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerWidth);
+      console.debug('x, y', aspectRatio, x, y);
       return {
         objectPosition: "".concat(x, "% ").concat(y, "%")
       };
@@ -105,7 +108,8 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
     return {
       visibility: 'hidden'
     };
-  }, [aspectRatio, element, focusPoint, naturalSize]);
+  }, // Update when the image changes (url or size), when the ratio changes, when the container size changes and when the focus point changes.
+  [image, imageSize, aspectRatio, containerHeight, containerWidth, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y]);
 };
 
 /**

package/esm/_internal/Thumbnail2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n    // Error event occurred or image loaded empty.\n    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n        return 'hasError';\n    }\n    // Image is undefined or incomplete.\n    if (!img || !img.complete) {\n        return 'isLoading';\n    }\n    // Else loaded.\n    return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n    const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n    // Update state when changing image URL or DOM reference.\n    useEffect(() => {\n        setState(getState(imgRef));\n    }, [imageURL, imgRef]);\n\n    // Listen to `load` and `error` event on image\n    useEffect(() => {\n        const img = imgRef;\n        if (!img) return undefined;\n        const update = (event?: Event) => setState(getState(img, event));\n        img.addEventListener('load', update);\n        img.addEventListener('error', update);\n        return () => {\n            img.removeEventListener('load', update);\n            img.removeEventListener('error', update);\n        };\n    }, [imgRef, imgRef?.src]);\n\n    return state;\n}\n","import { CSSProperties, useMemo } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\nfunction shiftPosition(\n    scale: number,\n    containerSize: number,\n    imageSize: number,\n    focusSize: number | undefined,\n    isVertical?: boolean,\n) {\n    if (!focusSize) return 50;\n    const focusFactor = (focusSize + 1) / 2;\n    const scaledSize = Math.floor(imageSize / scale);\n    let focus = Math.floor(focusFactor * scaledSize);\n    if (isVertical) focus = scaledSize - focus;\n\n    const containerCenter = Math.floor(containerSize / 2);\n    let focusOffset = focus - containerCenter;\n    const remainder = scaledSize - focus;\n    if (remainder < containerCenter) focusOffset -= containerCenter - remainder;\n    if (focusOffset < 0) return 0;\n\n    return Math.min(100, Math.floor((focusOffset * 100) / containerSize));\n}\n\nexport const useFocusPointStyle = (\n    { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n    element: HTMLImageElement | undefined,\n    isLoaded: boolean,\n): CSSProperties => {\n    // Get natural image size from imgProps or img element.\n    const naturalSize = useMemo(() => {\n        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n        if (typeof width === 'number' && typeof height === 'number') return { width, height };\n        if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n        return undefined;\n    }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n    // Compute focus point CSS style.\n    return useMemo(() => {\n        if (aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return {};\n        if (element && naturalSize) {\n            const actualWidth = element.offsetWidth;\n            const actualHeight = element.offsetHeight;\n            const heightScale = actualHeight / naturalSize.height;\n            const widthScale = actualWidth / naturalSize.width;\n            const x = shiftPosition(heightScale, actualWidth, naturalSize.width, focusPoint?.x);\n            const y = shiftPosition(widthScale, actualHeight, naturalSize.height, focusPoint?.y, true);\n            return { objectPosition: `${x}% ${y}%` };\n        }\n        // Focus point can't be computed yet => We hide the image until it can.\n        return { visibility: 'hidden' };\n    }, [aspectRatio, element, focusPoint, naturalSize]);\n};\n","import React, {\n    CSSProperties,\n    forwardRef,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n    /** Alignment of the thumbnail in it's parent (requires flex parent). */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Image aspect ratio. */\n    aspectRatio?: AspectRatio;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image cross origin resource policy. */\n    crossOrigin?: ImgHTMLProps['crossOrigin'];\n    /** Fallback icon (SVG path) or react node when image fails to load. */\n    fallback?: string | ReactNode;\n    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n    fillHeight?: boolean;\n    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n    focusPoint?: FocusPoint;\n    /** Image URL. */\n    image: string;\n    /** Props to inject into the native <img> element. */\n    imgProps?: ImgHTMLProps;\n    /** Reference to the native <img> element. */\n    imgRef?: Ref<HTMLImageElement>;\n    /** Set to true to force the display of the loading skeleton. */\n    isLoading?: boolean;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Variant of the component. */\n    variant?: ThumbnailVariant;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n    fallback: mdiImageBroken,\n    loading: 'lazy',\n    theme: Theme.light,\n};\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback,\n        fillHeight,\n        focusPoint,\n        image,\n        imgProps,\n        imgRef: propImgRef,\n        isLoading: isLoadingProp,\n        loading,\n        size,\n        theme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgElement);\n    const isLoaded = loadingState === 'isLoaded';\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    // Focus point.\n    const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n    const hasIconErrorFallback = hasError && typeof fallback === 'string';\n    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n    const imageErrorStyle: CSSProperties = {};\n    if (hasIconErrorFallback) {\n        // Keep the image layout on icon fallback.\n        imageErrorStyle.visibility = 'hidden';\n    } else if (hasCustomErrorFallback) {\n        // Remove the image on custom fallback.\n        imageErrorStyle.display = 'none';\n    }\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isButton = !!forwardedProps.onClick;\n    const isClickable = isButton || isLink;\n\n    let Wrapper: any = 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isLink) {\n        Wrapper = linkAs || 'a';\n        Object.assign(wrapperProps, linkProps);\n    } else if (isButton) {\n        Wrapper = 'button';\n    }\n\n    return (\n        <Wrapper\n            {...wrapperProps}\n            ref={ref}\n            className={classNames(\n                linkProps?.className,\n                className,\n                handleBasicClasses({\n                    align,\n                    aspectRatio,\n                    prefix: CLASSNAME,\n                    size,\n                    theme,\n                    variant,\n                    isClickable,\n                    hasError,\n                    hasIconErrorFallback,\n                    hasCustomErrorFallback,\n                    isLoading,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <div className={`${CLASSNAME}__background`}>\n                <img\n                    {...imgProps}\n                    style={{\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        ...focusPointStyle,\n                    }}\n                    ref={mergeRefs(setImgElement, propImgRef)}\n                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}\n                    crossOrigin={crossOrigin}\n                    src={image}\n                    alt={alt}\n                    loading={loading}\n                />\n                {!isLoading && hasError && (\n                    <div className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </div>\n                )}\n            </div>\n            {badge &&\n                React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n        </Wrapper>\n    );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","containerSize","imageSize","focusSize","isVertical","focusFactor","scaledSize","Math","floor","focus","containerCenter","focusOffset","remainder","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","focusPoint","imgProps","width","height","naturalSize","useMemo","AspectRatio","original","x","y","actualWidth","offsetWidth","actualHeight","offsetHeight","heightScale","widthScale","objectPosition","visibility","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","style","mergeRefs","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n    // Error event occurred or image loaded empty.\n    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n        return 'hasError';\n    }\n    // Image is undefined or incomplete.\n    if (!img || !img.complete) {\n        return 'isLoading';\n    }\n    // Else loaded.\n    return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n    const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n    // Update state when changing image URL or DOM reference.\n    useEffect(() => {\n        setState(getState(imgRef));\n    }, [imageURL, imgRef]);\n\n    // Listen to `load` and `error` event on image\n    useEffect(() => {\n        const img = imgRef;\n        if (!img) return undefined;\n        const update = (event?: Event) => setState(getState(img, event));\n        img.addEventListener('load', update);\n        img.addEventListener('error', update);\n        return () => {\n            img.removeEventListener('load', update);\n            img.removeEventListener('error', update);\n        };\n    }, [imgRef, imgRef?.src]);\n\n    return state;\n}\n","import { CSSProperties, useMemo } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n    const scaledSize = imageSize / scale;\n    const scaledFocusHeight = focusPoint * scaledSize;\n    const startFocus = scaledFocusHeight - containerSize / 2;\n    const shift = startFocus / (scaledSize - containerSize);\n    return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n    { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n    element: HTMLImageElement | undefined,\n    isLoaded: boolean,\n): CSSProperties => {\n    // Get natural image size from imgProps or img element.\n    const imageSize = useMemo(() => {\n        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n        if (typeof width === 'number' && typeof height === 'number') return { width, height };\n        if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n        return undefined;\n    }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n    // Get container size.\n    const containerWidth = element?.offsetWidth;\n    const containerHeight = element?.offsetHeight;\n\n    // Compute focus point CSS style.\n    return useMemo(\n        () => {\n            if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return {};\n            if (containerWidth && containerHeight && imageSize) {\n                const heightScale = imageSize.height / containerHeight;\n                const widthScale = imageSize.width / containerWidth;\n                const scale = Math.min(widthScale, heightScale);\n\n                // Focus Y relative to the top (instead of the center)\n                const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n                const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerHeight);\n\n                // Focus X relative to the left (instead of the center)\n                const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n                const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerWidth);\n\n                console.debug('x, y', aspectRatio, x, y);\n                return { objectPosition: `${x}% ${y}%` };\n            }\n            // Focus point can't be computed yet => We hide the image until it can.\n            return { visibility: 'hidden' };\n        },\n        // Update when the image changes (url or size), when the ratio changes, when the container size changes and when the focus point changes.\n        [image, imageSize, aspectRatio, containerHeight, containerWidth, focusPoint?.x, focusPoint?.y],\n    );\n};\n","import React, {\n    CSSProperties,\n    forwardRef,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n    /** Alignment of the thumbnail in it's parent (requires flex parent). */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Image aspect ratio. */\n    aspectRatio?: AspectRatio;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image cross origin resource policy. */\n    crossOrigin?: ImgHTMLProps['crossOrigin'];\n    /** Fallback icon (SVG path) or react node when image fails to load. */\n    fallback?: string | ReactNode;\n    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n    fillHeight?: boolean;\n    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n    focusPoint?: FocusPoint;\n    /** Image URL. */\n    image: string;\n    /** Props to inject into the native <img> element. */\n    imgProps?: ImgHTMLProps;\n    /** Reference to the native <img> element. */\n    imgRef?: Ref<HTMLImageElement>;\n    /** Set to true to force the display of the loading skeleton. */\n    isLoading?: boolean;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Variant of the component. */\n    variant?: ThumbnailVariant;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n    fallback: mdiImageBroken,\n    loading: 'lazy',\n    theme: Theme.light,\n};\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback,\n        fillHeight,\n        focusPoint,\n        image,\n        imgProps,\n        imgRef: propImgRef,\n        isLoading: isLoadingProp,\n        loading,\n        size,\n        theme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgElement);\n    const isLoaded = loadingState === 'isLoaded';\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    // Focus point.\n    const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n    const hasIconErrorFallback = hasError && typeof fallback === 'string';\n    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n    const imageErrorStyle: CSSProperties = {};\n    if (hasIconErrorFallback) {\n        // Keep the image layout on icon fallback.\n        imageErrorStyle.visibility = 'hidden';\n    } else if (hasCustomErrorFallback) {\n        // Remove the image on custom fallback.\n        imageErrorStyle.display = 'none';\n    }\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isButton = !!forwardedProps.onClick;\n    const isClickable = isButton || isLink;\n\n    let Wrapper: any = 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isLink) {\n        Wrapper = linkAs || 'a';\n        Object.assign(wrapperProps, linkProps);\n    } else if (isButton) {\n        Wrapper = 'button';\n    }\n\n    return (\n        <Wrapper\n            {...wrapperProps}\n            ref={ref}\n            className={classNames(\n                linkProps?.className,\n                className,\n                handleBasicClasses({\n                    align,\n                    aspectRatio,\n                    prefix: CLASSNAME,\n                    size,\n                    theme,\n                    variant,\n                    isClickable,\n                    hasError,\n                    hasIconErrorFallback,\n                    hasCustomErrorFallback,\n                    isLoading,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <div className={`${CLASSNAME}__background`}>\n                <img\n                    {...imgProps}\n                    style={{\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        ...focusPointStyle,\n                    }}\n                    ref={mergeRefs(setImgElement, propImgRef)}\n                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}\n                    crossOrigin={crossOrigin}\n                    src={image}\n                    alt={alt}\n                    loading={loading}\n                />\n                {!isLoading && hasError && (\n                    <div className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </div>\n                )}\n            </div>\n            {badge &&\n                React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n        </Wrapper>\n    );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","containerWidth","offsetWidth","containerHeight","offsetHeight","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","console","debug","objectPosition","visibility","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","style","mergeRefs","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9-alpha-thumbnail13",
-        "@lumx/icons": "^2.1.9-alpha-thumbnail13",
+        "@lumx/core": "^2.1.9-alpha-thumbnail17",
+        "@lumx/icons": "^2.1.9-alpha-thumbnail17",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.9-alpha-thumbnail13",
-    "gitHead": "18619b44fecc3b26cbbed5ff531b538b4d7ca550"
+    "version": "2.1.9-alpha-thumbnail17",
+    "gitHead": "2daf2a861216bfae2000004360185c50f683a155"
 }

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -85,16 +85,15 @@ export const WithBadge = () => {
 
 export const FocusPoint = () => {
     const focusPoint = { x: focusKnob('Focus X ', -0.2), y: focusKnob('Focus Y', -0.3) };
-    const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], AspectRatio.free);
+    const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], AspectRatio.wide);
     const fillHeight = aspectRatio === AspectRatio.free;
     return (
         <>
             <small>Focus point will delay the display of the image if the original image size is not accessible.</small>
-
             <Resizable initialSize={{ height: 200, width: 300 }}>
                 <Thumbnail
                     alt="Image"
-                    image={IMAGES.portrait1}
+                    image={IMAGES.portrait1s200}
                     aspectRatio={aspectRatio}
                     fillHeight={fillHeight}
                     focusPoint={focusPoint}

package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap

@@ -13,11 +13,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={
-        Object {
-          "objectPosition": undefined,
-        }
-      }
+      style={Object {}}
     />
   </div>
 </button>
@@ -36,11 +32,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={
-        Object {
-          "objectPosition": undefined,
-        }
-      }
+      style={Object {}}
     />
   </div>
 </CustomLinkComponent>
@@ -59,11 +51,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink'
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={
-        Object {
-          "objectPosition": undefined,
-        }
-      }
+      style={Object {}}
     />
   </div>
 </a>
@@ -81,11 +69,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] =
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={
-        Object {
-          "objectPosition": undefined,
-        }
-      }
+      style={Object {}}
     />
   </div>
 </div>
@@ -103,11 +87,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`]
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={
-        Object {
-          "objectPosition": undefined,
-        }
-      }
+      style={Object {}}
     />
   </div>
   <Badge

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -2,54 +2,57 @@ import { CSSProperties, useMemo } from 'react';
 import { AspectRatio } from '@lumx/react/components';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
 
-function shiftPosition(
-    scale: number,
-    containerSize: number,
-    imageSize: number,
-    focusSize: number | undefined,
-    isVertical?: boolean,
-) {
-    if (!focusSize) return 50;
-    const focusFactor = (focusSize + 1) / 2;
-    const scaledSize = Math.floor(imageSize / scale);
-    let focus = Math.floor(focusFactor * scaledSize);
-    if (isVertical) focus = scaledSize - focus;
-
-    const containerCenter = Math.floor(containerSize / 2);
-    let focusOffset = focus - containerCenter;
-    const remainder = scaledSize - focus;
-    if (remainder < containerCenter) focusOffset -= containerCenter - remainder;
-    if (focusOffset < 0) return 0;
-
-    return Math.min(100, Math.floor((focusOffset * 100) / containerSize));
+// Calculate shift to center the focus point in the container.
+function shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {
+    const scaledSize = imageSize / scale;
+    const scaledFocusHeight = focusPoint * scaledSize;
+    const startFocus = scaledFocusHeight - containerSize / 2;
+    const shift = startFocus / (scaledSize - containerSize);
+    return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
+// Compute CSS properties to apply the focus point.
 export const useFocusPointStyle = (
     { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,
     element: HTMLImageElement | undefined,
     isLoaded: boolean,
 ): CSSProperties => {
     // Get natural image size from imgProps or img element.
-    const naturalSize = useMemo(() => {
+    const imageSize = useMemo(() => {
         if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;
         if (typeof width === 'number' && typeof height === 'number') return { width, height };
         if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };
         return undefined;
     }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
 
+    // Get container size.
+    const containerWidth = element?.offsetWidth;
+    const containerHeight = element?.offsetHeight;
+
     // Compute focus point CSS style.
-    return useMemo(() => {
-        if (aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return {};
-        if (element && naturalSize) {
-            const actualWidth = element.offsetWidth;
-            const actualHeight = element.offsetHeight;
-            const heightScale = actualHeight / naturalSize.height;
-            const widthScale = actualWidth / naturalSize.width;
-            const x = shiftPosition(heightScale, actualWidth, naturalSize.width, focusPoint?.x);
-            const y = shiftPosition(widthScale, actualHeight, naturalSize.height, focusPoint?.y, true);
-            return { objectPosition: `${x}% ${y}%` };
-        }
-        // Focus point can't be computed yet => We hide the image until it can.
-        return { visibility: 'hidden' };
-    }, [aspectRatio, element, focusPoint, naturalSize]);
+    return useMemo(
+        () => {
+            if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return {};
+            if (containerWidth && containerHeight && imageSize) {
+                const heightScale = imageSize.height / containerHeight;
+                const widthScale = imageSize.width / containerWidth;
+                const scale = Math.min(widthScale, heightScale);
+
+                // Focus Y relative to the top (instead of the center)
+                const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
+                const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerHeight);
+
+                // Focus X relative to the left (instead of the center)
+                const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
+                const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerWidth);
+
+                console.debug('x, y', aspectRatio, x, y);
+                return { objectPosition: `${x}% ${y}%` };
+            }
+            // Focus point can't be computed yet => We hide the image until it can.
+            return { visibility: 'hidden' };
+        },
+        // Update when the image changes (url or size), when the ratio changes, when the container size changes and when the focus point changes.
+        [image, imageSize, aspectRatio, containerHeight, containerWidth, focusPoint?.x, focusPoint?.y],
+    );
 };