rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve imageBlock resizing

Browse source
This commit is contained in:
swve 2023-04-20 00:04:58 +02:00 • committed by Badr B
parent c2896a8837
commit fef141acbb
2 changed files with 42 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

1
front/components/Editor/Extensions/Image/ImageBlock.ts
View file

@ -16,7 +16,6 @@ export default Node.create({
}, },
size: { size: {
width: 300, width: 300,
height: 200,
}, },
}; };
}, },

83
front/components/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -12,7 +12,7 @@ function ImageBlockComponent(props: any) {
const [image, setImage] = React.useState(null); const [image, setImage] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 }); const [imageSize, setImageSize] = React.useState({ width: props.node.attrs.size ? props.node.attrs.size.width : 300 });
const handleImageChange = (event: React.ChangeEvent<any>) => { const handleImageChange = (event: React.ChangeEvent<any>) => {
setImage(event.target.files[0]); setImage(event.target.files[0]);
@ -30,6 +30,11 @@ function ImageBlockComponent(props: any) {
}); });
}; };
console.log(props.node.attrs);
console.log(imageSize);
return ( return (
<NodeViewWrapper className="block-image"> <NodeViewWrapper className="block-image">
{!blockObject && ( {!blockObject && (
@ -44,44 +49,45 @@ function ImageBlockComponent(props: any) {
</BlockImageWrapper> </BlockImageWrapper>
)} )}
{blockObject && ( {blockObject && (
<BlockImageGlobal> <Resizable defaultSize={{ width: imageSize.width, height: "100%" }}
<Resizable defaultSize={{ width: blockObject.width, height: blockObject.height }} handleStyles={{
handleStyles={{ right: { width: '10px', height: '100%', cursor: 'col-resize' },
right: { width: '10px', height: '100%', cursor: 'col-resize' }, top: { width: 0 },
top: { width: 0 }, bottom: { width: 0 },
bottom: { width: 0 }, left: { width: 0 },
left: { width: 0 }, topRight: { width: 0 },
topRight: { width: 0 }, bottomRight: { width: 0 },
bottomRight: { width: 0 }, bottomLeft: { width: 0 },
bottomLeft: { width: 0 }, topLeft: { width: 0 },
topLeft: { width: 0 },
}} }}
style={{ margin: "auto" }} style={{ margin: "auto" }}
onResizeStop={(e, direction, ref, d) => { maxWidth={850}
props.updateAttributes({ minWidth={400}
blockObject: { onResizeStop={(e, direction, ref, d) => {
...blockObject, props.updateAttributes({
width: imageSize.width + d.width, size: {
height: imageSize.height + d.height, width: imageSize.width + d.width,
}, }
}); });
}} setImageSize({
> width: imageSize.width + d.width,
});
}}
>
<BlockImage> <BlockImage>
<AspectRatio.Root ratio={16 / 9}> <AspectRatio.Root ratio={16 / 9}>
<img <img
src={`${getBackendUrl()}content/uploads/files/activities/${props.extension.options.activity.activity_id}/blocks/imageBlock/${blockObject.block_id}/${blockObject.block_data.file_id}.${blockObject.block_data.file_format src={`${getBackendUrl()}content/uploads/files/activities/${props.extension.options.activity.activity_id}/blocks/imageBlock/${blockObject.block_id}/${blockObject.block_data.file_id}.${blockObject.block_data.file_format
}`} }`}
alt="" alt=""
/> />
</AspectRatio.Root> </AspectRatio.Root>
</BlockImage> </BlockImage>
</Resizable> </Resizable>
</BlockImageGlobal>
)} )}
{isLoading && ( {isLoading && (
<div> <div>
@ -112,6 +118,7 @@ const BlockImageWrapper = styled.div`
const BlockImage = styled.div` const BlockImage = styled.div`
display: flex; display: flex;
// center // center
align-items: center; align-items: center;
@ -128,9 +135,3 @@ const BlockImage = styled.div`
} }
`; `;
const BlockImageGlobal = styled.div`
`;
const ImageNotFound = styled.div``;