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

legalize nuclear bombs

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:08 +03:00
parent 00231d9f01
commit a49e90991b
2 changed files with 894 additions and 743 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1501
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

136
src/components/area.jsx
View File

@ -10,6 +10,7 @@ export default function Area(props) {
mouseX: 0,
mouseY: 0,
});
const [hovered, setHovered] = useState(false);
const handleMouseDown = (e, dir) => {
setResize(dir);
@ -66,18 +67,21 @@ export default function Area(props) {
});
};
const handleMouseUp = () => {
const unableResize = () => {
setResize("none");
};
return (
<g>
<g
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
<foreignObject
key={props.areaData.id}
x={props.areaData.x}
y={props.areaData.y}
width={props.areaData.width}
height={props.areaData.height}
width={props.areaData.width > 0 ? props.areaData.width : 0}
height={props.areaData.height > 0 ? props.areaData.height : 0}
style={{ cursor: "move" }}
onMouseDown={props.onMouseDown}
>
@ -85,70 +89,66 @@ export default function Area(props) {
{props.areaData.name}
</div>
</foreignObject>
<rect
x={props.areaData.x - 6}
y={props.areaData.y - 6}
width={32}
height={32}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nwse-resize"
onMouseDown={(e) => handleMouseDown(e, "tl")}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
onMouseLeave={(e) => {
setResize("none");
}}
/>
<rect
x={props.areaData.x + props.areaData.width - 6}
y={props.areaData.y - 6}
width={32}
height={32}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nesw-resize"
onMouseDown={(e) => handleMouseDown(e, "tr")}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
onMouseLeave={(e) => {
setResize("none");
}}
/>
<rect
x={props.areaData.x - 6}
y={props.areaData.y + props.areaData.height - 6}
width={32}
height={32}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nesw-resize"
onMouseDown={(e) => handleMouseDown(e, "bl")}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
onMouseLeave={(e) => {
setResize("none");
}}
/>
<rect
x={props.areaData.x + props.areaData.width - 6}
y={props.areaData.y + props.areaData.height - 6}
width={32}
height={32}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nwse-resize"
onMouseDown={(e) => handleMouseDown(e, "br")}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
onMouseLeave={(e) => {
setResize("none");
}}
/>
{hovered && (
<>
<rect
x={props.areaData.x - 8}
y={props.areaData.y - 8}
width={16}
height={16}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nwse-resize"
onMouseDown={(e) => handleMouseDown(e, "tl")}
onMouseUp={unableResize}
onMouseMove={handleMouseMove}
onMouseLeave={unableResize}
/>
<rect
x={props.areaData.x + props.areaData.width - 8}
y={props.areaData.y - 8}
width={16}
height={16}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nesw-resize"
onMouseDown={(e) => handleMouseDown(e, "tr")}
onMouseUp={unableResize}
onMouseMove={handleMouseMove}
onMouseLeave={unableResize}
/>
<rect
x={props.areaData.x - 8}
y={props.areaData.y + props.areaData.height - 8}
width={16}
height={16}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nesw-resize"
onMouseDown={(e) => handleMouseDown(e, "bl")}
onMouseUp={unableResize}
onMouseMove={handleMouseMove}
onMouseLeave={unableResize}
/>
<rect
x={props.areaData.x + props.areaData.width - 8}
y={props.areaData.y + props.areaData.height - 8}
width={16}
height={16}
fill="lightblue"
stroke="blue"
strokeWidth={1}
cursor="nwse-resize"
onMouseDown={(e) => handleMouseDown(e, "br")}
onMouseUp={unableResize}
onMouseMove={handleMouseMove}
onMouseLeave={unableResize}
/>
</>
)}
</g>
);
}