mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
wip: init image resize
This commit is contained in:
swve
Badr B
parent
4e6470b6e1
commit
c2896a8837
5 changed files with 509 additions and 13 deletions
|
|
@ -14,6 +14,10 @@ export default Node.create({
|
|||
blockObject: {
|
||||
default: null,
|
||||
},
|
||||
size: {
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Resizable } from 're-resizable';
|
||||
|
||||
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
|
||||
import { AlertCircle, AlertTriangle, Image, ImagePlus, Info } from "lucide-react";
|
||||
import { getImageFile, uploadNewImageFile } from "../../../../services/blocks/Image/images";
|
||||
import { getBackendUrl } from "../../../../services/config/config";
|
||||
|
|
@ -9,6 +12,7 @@ function ImageBlockComponent(props: any) {
|
|||
const [image, setImage] = React.useState(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
|
||||
const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 });
|
||||
|
||||
const handleImageChange = (event: React.ChangeEvent<any>) => {
|
||||
setImage(event.target.files[0]);
|
||||
|
|
@ -22,6 +26,7 @@ function ImageBlockComponent(props: any) {
|
|||
setblockObject(object);
|
||||
props.updateAttributes({
|
||||
blockObject: object,
|
||||
size: imageSize,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -39,14 +44,44 @@ function ImageBlockComponent(props: any) {
|
|||
</BlockImageWrapper>
|
||||
)}
|
||||
{blockObject && (
|
||||
<BlockImage>
|
||||
<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
|
||||
}`}
|
||||
alt=""
|
||||
/>
|
||||
</BlockImage>
|
||||
<BlockImageGlobal>
|
||||
<Resizable defaultSize={{ width: blockObject.width, height: blockObject.height }}
|
||||
handleStyles={{
|
||||
right: { width: '10px', height: '100%', cursor: 'col-resize' },
|
||||
top: { width: 0 },
|
||||
bottom: { width: 0 },
|
||||
left: { width: 0 },
|
||||
topRight: { width: 0 },
|
||||
bottomRight: { width: 0 },
|
||||
bottomLeft: { width: 0 },
|
||||
topLeft: { width: 0 },
|
||||
|
||||
}}
|
||||
style={{ margin: "auto" }}
|
||||
onResizeStop={(e, direction, ref, d) => {
|
||||
props.updateAttributes({
|
||||
blockObject: {
|
||||
...blockObject,
|
||||
width: imageSize.width + d.width,
|
||||
height: imageSize.height + d.height,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
<BlockImage>
|
||||
<AspectRatio.Root ratio={16 / 9}>
|
||||
<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
|
||||
}`}
|
||||
alt=""
|
||||
/>
|
||||
</AspectRatio.Root>
|
||||
|
||||
|
||||
</BlockImage>
|
||||
</Resizable>
|
||||
</BlockImageGlobal>
|
||||
)}
|
||||
{isLoading && (
|
||||
<div>
|
||||
|
|
@ -77,13 +112,25 @@ const BlockImageWrapper = styled.div`
|
|||
|
||||
const BlockImage = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
img {
|
||||
|
||||
// center
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
img{
|
||||
object-fit: "cover";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
height: 300px;
|
||||
// cover
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const BlockImageGlobal = styled.div`
|
||||
|
||||
|
||||
`;
|
||||
const ImageNotFound = styled.div``;
|
||||
|
|
|
|||
63
front/package-lock.json
generated
63
front/package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@radix-ui/react-aspect-ratio": "^1.0.2",
|
||||
"@radix-ui/react-dialog": "^1.0.2",
|
||||
"@radix-ui/react-form": "^0.0.2",
|
||||
"@radix-ui/react-icons": "^1.1.1",
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
"framer-motion": "^7.3.6",
|
||||
"lucide-react": "^0.104.1",
|
||||
"next": "^13.2.4",
|
||||
"re-resizable": "^6.9.9",
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
@ -2421,6 +2423,32 @@
|
|||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-aspect-ratio": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.2.tgz",
|
||||
"integrity": "sha512-YCujQYnwcVcakbdhE8eTjhh4QR8CsngEcRlSzIPWw1vp3KPC9orETo8CxuVM65j5HAp0oFoOlIy6v7SuF+9P+Q==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/react-primitive": "1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
|
||||
"integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/react-slot": "1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
|
||||
|
|
@ -6868,6 +6896,15 @@
|
|||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/re-resizable": {
|
||||
"version": "6.9.9",
|
||||
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz",
|
||||
"integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
|
|
@ -9761,6 +9798,26 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@radix-ui/react-aspect-ratio": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.2.tgz",
|
||||
"integrity": "sha512-YCujQYnwcVcakbdhE8eTjhh4QR8CsngEcRlSzIPWw1vp3KPC9orETo8CxuVM65j5HAp0oFoOlIy6v7SuF+9P+Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/react-primitive": "1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
|
||||
"integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/react-slot": "1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@radix-ui/react-compose-refs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
|
||||
|
|
@ -12961,6 +13018,12 @@
|
|||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"re-resizable": {
|
||||
"version": "6.9.9",
|
||||
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz",
|
||||
"integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==",
|
||||
"requires": {}
|
||||
},
|
||||
"react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@radix-ui/react-aspect-ratio": "^1.0.2",
|
||||
"@radix-ui/react-dialog": "^1.0.2",
|
||||
"@radix-ui/react-form": "^0.0.2",
|
||||
"@radix-ui/react-icons": "^1.1.1",
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
"framer-motion": "^7.3.6",
|
||||
"lucide-react": "^0.104.1",
|
||||
"next": "^13.2.4",
|
||||
"re-resizable": "^6.9.9",
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue