rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Embedded image aspect ratio in Super notes (#2075)

Browse Source
This commit is contained in:
Aman Harwara
2022-12-01 02:41:35 +05:30
committed by GitHub
parent 34d9100af6
commit c32541c6e1
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
View File

@@ -20,6 +20,7 @@ const ImagePreview: FunctionComponent<Props> = ({
imageZoomLevel,
setImageZoomLevel,
}) => {
const [imageWidth, setImageWidth] = useState(0)
const [imageHeight, setImageHeight] = useState<number>(0)
const [imageZoomPercent, setImageZoomPercent] = useState(imageZoomLevel ? imageZoomLevel : DefaultZoomPercent)
const [isZoomInputVisible, setIsZoomInputVisible] = useState(false)
@@ -40,24 +41,26 @@ const ImagePreview: FunctionComponent<Props> = ({
const image = new Image()
image.src = objectUrl
image.onload = () => {
setImageWidth(image.width)
setImageHeight(image.height)
}
}, [objectUrl])
const heightIfEmbedded = imageHeight * (imageZoomPercent / PercentageDivisor)
const widthIfEmbedded = imageWidth * (imageZoomPercent / PercentageDivisor)
return (
<div className="group flex h-full min-h-0 w-full items-center justify-center">
<div
className="relative flex h-full w-full items-center justify-center overflow-auto"
style={{
height: isEmbeddedInSuper ? `${heightIfEmbedded}px` : '',
width: isEmbeddedInSuper ? `${widthIfEmbedded}px` : '',
aspectRatio: isEmbeddedInSuper ? `${imageWidth} / ${imageHeight}` : '',
}}
>
<img
src={objectUrl}
style={{
height: isEmbeddedInSuper ? `${heightIfEmbedded}px` : `${imageZoomPercent}%`,
height: isEmbeddedInSuper ? '100%' : `${imageZoomPercent}%`,
...(isEmbeddedInSuper
? {}
: imageZoomPercent <= DefaultZoomPercent