binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[PE-56] regression: image aspect ratio fix (#5792)

Browse source 
* regression: image aspect ratio fix

* fix: name of variables changed for clarity
This commit is contained in:
M. Palanikannan 2024-10-18 13:40:39 +05:30 • committed by GitHub
parent 07402efd79
commit 81550ab5ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 17 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

33
packages/editor/src/core/extensions/custom-image/components/image-block.tsx
View file

@ -59,12 +59,12 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
src: remoteImageSrc, src: remoteImageSrc,
setEditorContainer, setEditorContainer,
} = props; } = props;
const { width, height, aspectRatio } = node.attrs; const { src: remoteImageSrc, width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio } = node.attrs;
// states // states
const [size, setSize] = useState<Size>({ const [size, setSize] = useState<Size>({
width: ensurePixelString(width, "35%"), width: ensurePixelString(nodeWidth, "35%"),
height: ensurePixelString(height, "auto"), height: ensurePixelString(nodeHeight, "auto"),
aspectRatio: aspectRatio || 1, aspectRatio: nodeAspectRatio || null,
}); });
const [isResizing, setIsResizing] = useState(false); const [isResizing, setIsResizing] = useState(false);
const [initialResizeComplete, setInitialResizeComplete] = useState(false); const [initialResizeComplete, setInitialResizeComplete] = useState(false);
@ -104,17 +104,17 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
} }
setEditorContainer(closestEditorContainer); setEditorContainer(closestEditorContainer);
const aspectRatio = img.naturalWidth / img.naturalHeight; const aspectRatioCalculated = img.naturalWidth / img.naturalHeight;
if (width === "35%") { if (nodeWidth === "35%") {
const editorWidth = closestEditorContainer.clientWidth; const editorWidth = closestEditorContainer.clientWidth;
const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE); const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
const initialHeight = initialWidth / aspectRatio; const initialHeight = initialWidth / aspectRatioCalculated;
const initialComputedSize = { const initialComputedSize = {
width: `${Math.round(initialWidth)}px` satisfies Pixel, width: `${Math.round(initialWidth)}px` satisfies Pixel,
height: `${Math.round(initialHeight)}px` satisfies Pixel, height: `${Math.round(initialHeight)}px` satisfies Pixel,
aspectRatio: aspectRatio, aspectRatio: aspectRatioCalculated,
}; };
setSize(initialComputedSize); setSize(initialComputedSize);
@ -124,9 +124,10 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
); );
} else { } else {
// as the aspect ratio in not stored for old images, we need to update the attrs // as the aspect ratio in not stored for old images, we need to update the attrs
if (!aspectRatio) { // or if aspectRatioCalculated from the image's width and height doesn't match stored aspectRatio then also we'll update the attrs
if (!nodeAspectRatio || nodeAspectRatio !== aspectRatioCalculated) {
setSize((prevSize) => { setSize((prevSize) => {
const newSize = { ...prevSize, aspectRatio }; const newSize = { ...prevSize, aspectRatio: aspectRatioCalculated };
updateAttributesSafely( updateAttributesSafely(
newSize, newSize,
"Failed to update attributes while initializing images with width but no aspect ratio:" "Failed to update attributes while initializing images with width but no aspect ratio:"
@ -136,16 +137,16 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
} }
} }
setInitialResizeComplete(true); setInitialResizeComplete(true);
}, [width, updateAttributes, editorContainer, aspectRatio]); }, [nodeWidth, updateAttributes, editorContainer, nodeAspectRatio]);
// for real time resizing // for real time resizing
useLayoutEffect(() => { useLayoutEffect(() => {
setSize((prevSize) => ({ setSize((prevSize) => ({
...prevSize, ...prevSize,
width: ensurePixelString(width), width: ensurePixelString(nodeWidth),
height: ensurePixelString(height), height: ensurePixelString(nodeHeight),
})); }));
}, [width, height]); }, [nodeWidth, nodeHeight]);
const handleResize = useCallback( const handleResize = useCallback(
(e: MouseEvent | TouchEvent) => { (e: MouseEvent | TouchEvent) => {
@ -217,7 +218,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
onMouseDown={handleImageMouseDown} onMouseDown={handleImageMouseDown}
style={{ style={{
width: size.width, width: size.width,
aspectRatio: size.aspectRatio, ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
}} }}
> >
{showImageLoader && ( {showImageLoader && (
@ -243,7 +244,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
})} })}
style={{ style={{
width: size.width, width: size.width,
aspectRatio: size.aspectRatio, ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
}} }}
/> />
{showImageUtils && ( {showImageUtils && (