github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2025-08-07 19:59:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: image resize event listeners

Browse Source
This commit is contained in:
Aaryan Khandelwal
2024-09-17 18:38:15 +05:30
parent 146a500f9f
commit 432be1a506
2 changed files with 25 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/editor/src/core/extensions/custom-image/components/image-block.tsx
View File

@@ -59,19 +59,6 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
setSize({ width, height });
}, [width, height]);
const handleResizeStart = useCallback(
(e: React.MouseEvent | React.TouchEvent) => {
e.preventDefault();
e.stopPropagation();
isResizing.current = true;
if (containerRef.current && editorContainer) {
aspectRatioRef.current = Number(size.width.replace("px", "")) / Number(size.height.replace("px", ""));
containerRect.current = containerRef.current.getBoundingClientRect();
}
},
[size, editorContainer]
);
const handleResize = useCallback(
(e: MouseEvent | TouchEvent) => {
if (!isResizing.current || !containerRef.current || !containerRect.current) return;
@@ -96,10 +83,32 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
if (isResizing.current) {
isResizing.current = false;
updateAttributes(size);
window.removeEventListener("mousemove", handleResize);
window.removeEventListener("mouseup", handleResizeEnd);
window.removeEventListener("mouseleave", handleResizeEnd);
}
}, [size, updateAttributes]);
const handleMouseDown = useCallback(
const handleResizeStart = useCallback(
(e: React.MouseEvent | React.TouchEvent) => {
e.preventDefault();
e.stopPropagation();
isResizing.current = true;
window.addEventListener("mousemove", handleResize);
window.addEventListener("mouseup", handleResizeEnd);
window.addEventListener("mouseleave", handleResizeEnd);
if (containerRef.current && editorContainer) {
aspectRatioRef.current = Number(size.width.replace("px", "")) / Number(size.height.replace("px", ""));
containerRect.current = containerRef.current.getBoundingClientRect();
}
},
[size, editorContainer]
);
const handleImageMouseDown = useCallback(
(e: React.MouseEvent) => {
e.stopPropagation();
const pos = getPos();
@@ -109,29 +118,11 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
[editor, getPos]
);
useEffect(() => {
if (!editorContainer) return;
const handleMouseMove = (e: MouseEvent) => handleResize(e);
const handleMouseUp = () => handleResizeEnd();
const handleMouseLeave = () => handleResizeEnd();
editorContainer.addEventListener("mousemove", handleMouseMove);
editorContainer.addEventListener("mouseup", handleMouseUp);
editorContainer.addEventListener("mouseleave", handleMouseLeave);
return () => {
editorContainer.removeEventListener("mousemove", handleMouseMove);
editorContainer.removeEventListener("mouseup", handleMouseUp);
editorContainer.removeEventListener("mouseleave", handleMouseLeave);
};
}, [handleResize, handleResizeEnd, editorContainer]);
return (
<div
ref={containerRef}
className="group/image-component relative inline-block max-w-full"
onMouseDown={handleMouseDown}
onMouseDown={handleImageMouseDown}
style={{
width: size.width,
height: size.height,

1
packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
View File

@@ -37,6 +37,7 @@ export const CustomImageUploader = (props: {
const file = e.target.files?.[0];
if (file) {
if (isFileValid(file)) {
editor.storage.image.uploadInProgress = true;
uploadFile(file);
}
}