titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:07 +03:00
parent 0e4879bab5
commit 00231d9f01
1 changed files with 49 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/area.jsx
View File

@ -2,97 +2,68 @@ import { React, useState } from "react";
export default function Area(props) { export default function Area(props) {
const [resize, setResize] = useState("none"); const [resize, setResize] = useState("none");
const [initialMouseX, setInitialMouseX] = useState(0); const [initCoords, setInitCoords] = useState({
const [initialMouseY, setInitialMouseY] = useState(0); x: 0,
const [initialWidth, setInitialWidth] = useState(0); y: 0,
const [initialHeight, setInitialHeight] = useState(0); width: 0,
const [initialX, setInitialX] = useState(0); height: 0,
const [initialY, setInitialY] = useState(0); mouseX: 0,
mouseY: 0,
});
const handleMouseDown = (e, dir) => { const handleMouseDown = (e, dir) => {
setResize(dir); setResize(dir);
props.setPanning(false); props.setPanning(false);
setInitialMouseX(e.clientX); setInitCoords({
setInitialMouseY(e.clientY); x: props.areaData.x,
setInitialWidth(props.areaData.width); y: props.areaData.y,
setInitialHeight(props.areaData.height); width: props.areaData.width,
setInitialX(props.areaData.x); height: props.areaData.height,
setInitialY(props.areaData.y); mouseX: e.clientX,
mouseY: e.clientY,
});
}; };
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
if (resize === "none") return;
let newX = initCoords.x;
let newY = initCoords.y;
let newWidth = initCoords.width;
let newHeight = initCoords.height;
props.setPanning(false); props.setPanning(false);
if (resize === "br") { if (resize === "br") {
const newWidth = initialWidth + (e.clientX - initialMouseX); newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
const newHeight = initialHeight + (e.clientY - initialMouseY); newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
props.setAreas((prev) => {
return prev.map((a) => {
if (a.id === props.areaData.id) {
return {
...a,
width: newWidth,
height: newHeight,
};
}
return a;
});
});
} else if (resize === "tl") { } else if (resize === "tl") {
const newX = initialX + (e.clientX - initialMouseX); newX = initCoords.x + (e.clientX - initCoords.mouseX);
const newY = initialY + (e.clientY - initialMouseY); newY = initCoords.y + (e.clientY - initCoords.mouseY);
const newWidth = initialWidth - (e.clientX - initialMouseX); newWidth = initCoords.width - (e.clientX - initCoords.mouseX);
const newHeight = initialHeight - (e.clientY - initialMouseY); newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
props.setAreas((prev) => {
return prev.map((a) => {
if (a.id === props.areaData.id) {
return {
...a,
x: newX,
y: newY,
width: newWidth,
height: newHeight,
};
}
return a;
});
});
} else if (resize === "tr") { } else if (resize === "tr") {
const newY = initialY + (e.clientY - initialMouseY); newY = initCoords.y + (e.clientY - initCoords.mouseY);
const newWidth = initialWidth + (e.clientX - initialMouseX); newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
const newHeight = initialHeight - (e.clientY - initialMouseY); newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
props.setAreas((prev) => {
return prev.map((a) => {
if (a.id === props.areaData.id) {
return {
...a,
y: newY,
width: newWidth,
height: newHeight,
};
}
return a;
});
});
} else if (resize === "bl") { } else if (resize === "bl") {
const newX = initialX + (e.clientX - initialMouseX); newX = initCoords.x + (e.clientX - initCoords.mouseX);
const newWidth = initialWidth - (e.clientX - initialMouseX); newWidth = initCoords.width - (e.clientX - initCoords.mouseX);
const newHeight = initialHeight + (e.clientY - initialMouseY); newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
props.setAreas((prev) => {
return prev.map((a) => {
if (a.id === props.areaData.id) {
return {
...a,
x: newX,
width: newWidth,
height: newHeight,
};
}
return a;
});
});
} else {
return;
} }
props.setAreas((prev) => {
return prev.map((a) => {
if (a.id === props.areaData.id) {
return {
...a,
x: newX,
y: newY,
width: newWidth,
height: newHeight,
};
}
return a;
});
});
}; };
const handleMouseUp = () => { const handleMouseUp = () => {