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, 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>
<rect {hovered && (
x={props.areaData.x - 6} <>
y={props.areaData.y - 6} <rect
width={32} x={props.areaData.x - 8}
height={32} y={props.areaData.y - 8}
fill="lightblue" width={16}
stroke="blue" height={16}
strokeWidth={1} fill="lightblue"
cursor="nwse-resize" stroke="blue"
onMouseDown={(e) => handleMouseDown(e, "tl")} strokeWidth={1}
onMouseUp={handleMouseUp} cursor="nwse-resize"
onMouseMove={handleMouseMove} onMouseDown={(e) => handleMouseDown(e, "tl")}
onMouseLeave={(e) => { onMouseUp={unableResize}
setResize("none"); onMouseMove={handleMouseMove}
}} onMouseLeave={unableResize}
/> />
<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
/> x={props.areaData.x - 8}
<rect y={props.areaData.y + props.areaData.height - 8}
x={props.areaData.x - 6} width={16}
y={props.areaData.y + props.areaData.height - 6} height={16}
width={32} fill="lightblue"
height={32} stroke="blue"
fill="lightblue" strokeWidth={1}
stroke="blue" cursor="nesw-resize"
strokeWidth={1} onMouseDown={(e) => handleMouseDown(e, "bl")}
cursor="nesw-resize" onMouseUp={unableResize}
onMouseDown={(e) => handleMouseDown(e, "bl")} onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp} onMouseLeave={unableResize}
onMouseMove={handleMouseMove} />
onMouseLeave={(e) => { <rect
setResize("none"); x={props.areaData.x + props.areaData.width - 8}
}} y={props.areaData.y + props.areaData.height - 8}
/> width={16}
<rect height={16}
x={props.areaData.x + props.areaData.width - 6} fill="lightblue"
y={props.areaData.y + props.areaData.height - 6} stroke="blue"
width={32} strokeWidth={1}
height={32} cursor="nwse-resize"
fill="lightblue" onMouseDown={(e) => handleMouseDown(e, "br")}
stroke="blue" onMouseUp={unableResize}
strokeWidth={1} onMouseMove={handleMouseMove}
cursor="nwse-resize" onMouseLeave={unableResize}
onMouseDown={(e) => handleMouseDown(e, "br")} />
onMouseUp={handleMouseUp} </>
onMouseMove={handleMouseMove} )}
onMouseLeave={(e) => {
setResize("none");
}}
/>
</g> </g>
); );
} }