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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/esm/_internal/Thumbnail2.js +28 -28
  2. package/esm/_internal/Thumbnail2.js.map +1 -1
  3. package/package.json +4 -4
  4. package/src/components/thumbnail/useFocusPointStyle.tsx +38 -37
package/esm/_internal/Thumbnail2.js CHANGED
@@ -50,23 +50,15 @@ function useImageLoad(imageURL, imgRef) {
50
50
  return state;
51
51
  }
52
52
 
53
- var absScale = function absScale(a, b) {
54
- return Math.min(a, b) / Math.max(a, b);
55
- };
53
+ // Calculate shift to center the focus point in the container.
54
+ function shiftPosition(scale, focusPoint, imageSize, containerSize) {
55
+ var scaledSize = imageSize / scale;
56
+ var scaledFocusHeight = focusPoint * scaledSize;
57
+ var startFocus = scaledFocusHeight - containerSize / 2;
58
+ var shift = startFocus / (scaledSize - containerSize);
59
+ return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
60
+ } // Compute CSS properties to apply the focus point.
56
61
 
57
- function shiftPosition(scale, containerSize, imageSize, focusSize, isVertical) {
58
- if (!focusSize) return 50;
59
- var focusFactor = (focusSize + 1) / 2;
60
- var scaledSize = Math.floor(imageSize / scale);
61
- var focus = Math.floor(focusFactor * scaledSize);
62
- if (isVertical) focus = scaledSize - focus;
63
- var containerCenter = Math.floor(containerSize / 2);
64
- var focusOffset = focus - containerCenter;
65
- var remainder = scaledSize - focus;
66
- if (remainder < containerCenter) focusOffset -= containerCenter - remainder;
67
- if (focusOffset < 0) return 0;
68
- return Math.min(100, Math.floor(focusOffset * 100 / containerSize));
69
- }
70
62
 
71
63
  var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
72
64
  var image = _ref.image,
@@ -77,7 +69,7 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
77
69
  var width = _ref$imgProps.width,
78
70
  height = _ref$imgProps.height;
79
71
  // Get natural image size from imgProps or img element.
80
- var naturalSize = useMemo(function () {
72
+ var imageSize = useMemo(function () {
81
73
  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;
82
74
  if (typeof width === 'number' && typeof height === 'number') return {
83
75
  width: width,
@@ -88,18 +80,25 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
88
80
  height: element.naturalHeight
89
81
  };
90
82
  return undefined;
91
- }, [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.
83
+ }, [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.
84
+
85
+ var containerWidth = element === null || element === void 0 ? void 0 : element.offsetWidth;
86
+ var containerHeight = element === null || element === void 0 ? void 0 : element.offsetHeight; // Compute focus point CSS style.
92
87
 
93
88
  return useMemo(function () {
94
- if (aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) return {};
95
-
96
- if (element && naturalSize) {
97
- var actualWidth = element.offsetWidth;
98
- var actualHeight = element.offsetHeight;
99
- var heightScale = absScale(actualHeight, naturalSize.height);
100
- var widthScale = absScale(actualWidth, naturalSize.width);
101
- var x = shiftPosition(heightScale, actualWidth, naturalSize.width, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x);
102
- var y = shiftPosition(widthScale, actualHeight, naturalSize.height, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y, true);
89
+ if (!image || aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) return {};
90
+
91
+ if (containerWidth && containerHeight && imageSize) {
92
+ var heightScale = imageSize.height / containerHeight;
93
+ var widthScale = imageSize.width / containerWidth;
94
+ var scale = Math.min(widthScale, heightScale); // Focus Y relative to the top (instead of the center)
95
+
96
+ var focusPointFromTop = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2;
97
+ var y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerHeight); // Focus X relative to the left (instead of the center)
98
+
99
+ var focusPointFromLeft = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2;
100
+ var x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerWidth);
101
+ console.debug('x, y', aspectRatio, x, y);
103
102
  return {
104
103
  objectPosition: "".concat(x, "% ").concat(y, "%")
105
104
  };
@@ -109,7 +108,8 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
109
108
  return {
110
109
  visibility: 'hidden'
111
110
  };
112
- }, [aspectRatio, element, focusPoint, naturalSize]);
111
+ }, // Update when the image changes (url or size), when the ratio changes, when the container size changes and when the focus point changes.
112
+ [image, imageSize, aspectRatio, containerHeight, containerWidth, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y]);
113
113
  };
114
114
 
115
115
  /**
package/esm/_internal/Thumbnail2.js.map CHANGED
@@ -1 +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\nconst absScale = (a: number, b: number) => Math.min(a, b) / Math.max(a, b);\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 = absScale(actualHeight, naturalSize.height);\n const widthScale = absScale(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","absScale","a","b","Math","min","max","shiftPosition","scale","containerSize","imageSize","focusSize","isVertical","focusFactor","scaledSize","floor","focus","containerCenter","focusOffset","remainder","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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"}
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\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 CHANGED
@@ -7,8 +7,8 @@
7
7
  },
8
8
  "dependencies": {
9
9
  "@juggle/resize-observer": "^3.2.0",
10
- "@lumx/core": "^2.1.9-alpha-thumbnail16",
11
- "@lumx/icons": "^2.1.9-alpha-thumbnail16",
10
+ "@lumx/core": "^2.1.9-alpha-thumbnail17",
11
+ "@lumx/icons": "^2.1.9-alpha-thumbnail17",
12
12
  "@popperjs/core": "^2.5.4",
13
13
  "body-scroll-lock": "^3.1.5",
14
14
  "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
120
120
  "build:storybook": "cd storybook && ./build"
121
121
  },
122
122
  "sideEffects": false,
123
- "version": "2.1.9-alpha-thumbnail16",
124
- "gitHead": "b313100e098700b02180b46f500cfbb274e4de04"
123
+ "version": "2.1.9-alpha-thumbnail17",
124
+ "gitHead": "2daf2a861216bfae2000004360185c50f683a155"
125
125
  }
package/src/components/thumbnail/useFocusPointStyle.tsx CHANGED
@@ -2,56 +2,57 @@ import { CSSProperties, useMemo } from 'react';
2
2
  import { AspectRatio } from '@lumx/react/components';
3
3
  import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
4
4
 
5
- const absScale = (a: number, b: number) => Math.min(a, b) / Math.max(a, b);
6
-
7
- function shiftPosition(
8
- scale: number,
9
- containerSize: number,
10
- imageSize: number,
11
- focusSize: number | undefined,
12
- isVertical?: boolean,
13
- ) {
14
- if (!focusSize) return 50;
15
- const focusFactor = (focusSize + 1) / 2;
16
- const scaledSize = Math.floor(imageSize / scale);
17
- let focus = Math.floor(focusFactor * scaledSize);
18
- if (isVertical) focus = scaledSize - focus;
19
-
20
- const containerCenter = Math.floor(containerSize / 2);
21
- let focusOffset = focus - containerCenter;
22
- const remainder = scaledSize - focus;
23
- if (remainder < containerCenter) focusOffset -= containerCenter - remainder;
24
- if (focusOffset < 0) return 0;
25
-
26
- return Math.min(100, Math.floor((focusOffset * 100) / containerSize));
5
+ // Calculate shift to center the focus point in the container.
6
+ function shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {
7
+ const scaledSize = imageSize / scale;
8
+ const scaledFocusHeight = focusPoint * scaledSize;
9
+ const startFocus = scaledFocusHeight - containerSize / 2;
10
+ const shift = startFocus / (scaledSize - containerSize);
11
+ return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
27
12
  }
28
13
 
14
+ // Compute CSS properties to apply the focus point.
29
15
  export const useFocusPointStyle = (
30
16
  { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,
31
17
  element: HTMLImageElement | undefined,
32
18
  isLoaded: boolean,
33
19
  ): CSSProperties => {
34
20
  // Get natural image size from imgProps or img element.
35
- const naturalSize = useMemo(() => {
21
+ const imageSize = useMemo(() => {
36
22
  if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;
37
23
  if (typeof width === 'number' && typeof height === 'number') return { width, height };
38
24
  if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };
39
25
  return undefined;
40
26
  }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
41
27
 
28
+ // Get container size.
29
+ const containerWidth = element?.offsetWidth;
30
+ const containerHeight = element?.offsetHeight;
31
+
42
32
  // Compute focus point CSS style.
43
- return useMemo(() => {
44
- if (aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return {};
45
- if (element && naturalSize) {
46
- const actualWidth = element.offsetWidth;
47
- const actualHeight = element.offsetHeight;
48
- const heightScale = absScale(actualHeight, naturalSize.height);
49
- const widthScale = absScale(actualWidth, naturalSize.width);
50
- const x = shiftPosition(heightScale, actualWidth, naturalSize.width, focusPoint?.x);
51
- const y = shiftPosition(widthScale, actualHeight, naturalSize.height, focusPoint?.y, true);
52
- return { objectPosition: `${x}% ${y}%` };
53
- }
54
- // Focus point can't be computed yet => We hide the image until it can.
55
- return { visibility: 'hidden' };
56
- }, [aspectRatio, element, focusPoint, naturalSize]);
33
+ return useMemo(
34
+ () => {
35
+ if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return {};
36
+ if (containerWidth && containerHeight && imageSize) {
37
+ const heightScale = imageSize.height / containerHeight;
38
+ const widthScale = imageSize.width / containerWidth;
39
+ const scale = Math.min(widthScale, heightScale);
40
+
41
+ // Focus Y relative to the top (instead of the center)
42
+ const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
43
+ const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerHeight);
44
+
45
+ // Focus X relative to the left (instead of the center)
46
+ const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
47
+ const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerWidth);
48
+
49
+ console.debug('x, y', aspectRatio, x, y);
50
+ return { objectPosition: `${x}% ${y}%` };
51
+ }
52
+ // Focus point can't be computed yet => We hide the image until it can.
53
+ return { visibility: 'hidden' };
54
+ },
55
+ // Update when the image changes (url or size), when the ratio changes, when the container size changes and when the focus point changes.
56
+ [image, imageSize, aspectRatio, containerHeight, containerWidth, focusPoint?.x, focusPoint?.y],
57
+ );
57
58
  };