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