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

72
src/components/area.jsx
View File

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