dvirlabs/labmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set the buttons to not move

Browse Source
This commit is contained in:
dvirlabs 2025-07-11 19:06:32 +03:00
parent ccc429e258
commit 05a8a64039
2 changed files with 68 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/env.js"></script> <script src="/env.js"></script>
<title>Vite + React</title> <title>Labmap</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

184
frontend/src/components/Diagram.jsx
View File

@ -198,136 +198,87 @@ function Diagram() {
return ( return (
<div style={{ width: '100vw', height: '100vh' }}> <div style={{ width: '100vw', height: '100vh' }}>
<div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}> <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: '10px', height: '48px' }}>
<div style={{ position: 'relative', display: 'inline-block', marginRight: 8 }}> <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
<select <select
value={diagramName || ''} value={diagramName || ''}
onChange={(e) => setDiagramName(e.target.value)} onChange={(e) => setDiagramName(e.target.value)}
className="btn" style={{
style={{ padding: '10px 16px',
padding: '10px 16px', height: '48px',
height: 48, fontSize: '16px',
fontSize: 16, fontWeight: 'bold',
fontWeight: 'bold', borderRadius: '12px',
borderRadius: '12px', border: 'none',
border: 'none', background: '#111',
background: '#111', color: 'white',
color: 'white', cursor: 'pointer',
cursor: 'pointer', appearance: 'none',
appearance: 'none', width: 180,
width: 180, paddingRight: 32,
}} }}
> >
{diagramList.map((name) => ( {diagramList.map((name) => (
<option key={name} value={name} style={{ color: 'white' }}> <option key={name} value={name} style={{ color: 'white', font: 'bold 16px Arial' }}>
📌 {name} 📌 {name}
</option> </option>
))} ))}
</select> </select>
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
right: 16, right: 12,
top: '50%', top: '50%',
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
pointerEvents: 'none', pointerEvents: 'none',
}} fontSize: 16,
> color: 'white',
⏷ }}
</div> >
</div> ⏷
</div>
</div>
<button className="btn" style={{ background: '#d28519' }} onClick={() => {
<button const newName = prompt("Enter new diagram name:");
className="btn" if (newName) {
style={{ marginLeft: 8, background: '#d28519', color: 'white' }} if (!diagramList.includes(newName)) {
onClick={() => { const updatedList = [...diagramList, newName];
const newName = prompt("Enter new diagram name:"); setDiagramList(updatedList);
if (newName) {
if (!diagramList.includes(newName)) {
const updatedList = [...diagramList, newName];
setDiagramList(updatedList);
}
setDiagramName(newName);
setNodes([]);
setEdges([]);
setSelectedNode(null);
setSelectedEdge(null);
} }
}} setDiagramName(newName);
> setNodes([]);
🆕 New Diagram setEdges([]);
</button> setSelectedNode(null);
<button onClick={handleSave} className="btn" style={{ marginLeft: 8, background: 'green' }}>💾 Save</button> setSelectedEdge(null);
<button onClick={handleAddNode} className="btn" style={{ marginLeft: 8, background: 'blue' }}>➕ Add Node</button> }
<button }}>🆕 New Diagram</button>
onClick={handleDeleteNode}
className="btn" <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
style={{ <button className="btn" onClick={handleAddNode} style={{ background: 'blue' }}>➕ Add Node</button>
marginLeft: 8,
background: selectedNode ? '#b81a1a' : '#ccc', <button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc', color: selectedNode ? 'white' : '#666', cursor: selectedNode ? 'pointer' : 'not-allowed' }} disabled={!selectedNode}>🗑️ Delete Node</button>
color: selectedNode ? 'white' : '#666',
cursor: selectedNode ? 'pointer' : 'not-allowed', <button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc', color: selectedEdge ? 'white' : '#666', cursor: selectedEdge ? 'pointer' : 'not-allowed' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
}}
disabled={!selectedNode} <button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
>
🗑️ Delete Node
</button>
<button
onClick={handleDeleteEdge}
className="btn"
style={{
marginLeft: 8,
background: selectedNode ? '#b81a1a' : '#ccc',
color: selectedNode ? 'white' : '#666',
cursor: selectedNode ? 'pointer' : 'not-allowed',
}}
disabled={!selectedEdge}
>
🗑️ Delete Edge
</button>
<button onClick={handleDeleteDiagram} className="btn" style={{ marginLeft: 8, background: 'red' }}>🗑️ Delete Diagram</button>
</div> </div>
{showForm && ( {showForm && (
<div <div style={{ position: 'absolute', zIndex: 20, right: 10, top: 80, background: '#e6f0fa', padding: '16px', borderRadius: '12px', boxShadow: '0 4px 8px rgba(0,0,0,0.15)', width: 280 }}>
style={{ <h4 style={{ color: '#125ea8', marginBottom: 12, fontSize: 18, display: 'flex', alignItems: 'center', gap: 8 }}>🧩 Add New Node</h4>
position: 'absolute', <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Label:</label>
zIndex: 20,
right: 10,
top: 80,
background: '#e6f0fa',
padding: '16px',
borderRadius: '12px',
boxShadow: '0 4px 8px rgba(0,0,0,0.15)',
width: 280,
}}
>
<h4 style={{ color: '#125ea8', marginBottom: 12, fontSize: 18, display: 'flex', alignItems: 'center', gap: 8 }}>
🧩 Add New Node
</h4>
<label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>
Label:
</label>
<input <input
type="text" type="text"
placeholder="Enter label" placeholder="Enter label"
value={newLabel} value={newLabel}
onChange={(e) => setNewLabel(e.target.value)} onChange={(e) => setNewLabel(e.target.value)}
style={{ style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
padding: '6px',
width: '100%',
borderRadius: 6,
border: '1px solid #ccc',
marginBottom: 12,
}}
/> />
<IconSelector onSelect={setSelectedIcon} /> <IconSelector onSelect={setSelectedIcon} />
<div style={{ marginTop: 12 }}> <div style={{ marginTop: 12 }}>
<button className="btn" onClick={handleSubmitNode}>✅ Add</button> <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
<button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}> <button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button>
❌ Cancel
</button>
</div> </div>
</div> </div>
)} )}
@ -351,7 +302,6 @@ function Diagram() {
<Background /> <Background />
<Controls /> <Controls />
</ReactFlow> </ReactFlow>
</div> </div>
); );
} }