Set the buttons to not move
This commit is contained in:
parent
ccc429e258
commit
05a8a64039
@ -5,7 +5,7 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="/env.js"></script>
|
||||
<title>Vite + React</title>
|
||||
<title>Labmap</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -198,136 +198,87 @@ function Diagram() {
|
||||
|
||||
return (
|
||||
<div style={{ width: '100vw', height: '100vh' }}>
|
||||
<div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}>
|
||||
<div style={{ position: 'relative', display: 'inline-block', marginRight: 8 }}>
|
||||
<select
|
||||
value={diagramName || ''}
|
||||
onChange={(e) => setDiagramName(e.target.value)}
|
||||
className="btn"
|
||||
style={{
|
||||
padding: '10px 16px',
|
||||
height: 48,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
background: '#111',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
appearance: 'none',
|
||||
width: 180,
|
||||
}}
|
||||
>
|
||||
{diagramList.map((name) => (
|
||||
<option key={name} value={name} style={{ color: 'white' }}>
|
||||
📌 {name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 16,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
⏷
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: '10px', height: '48px' }}>
|
||||
<div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
|
||||
<select
|
||||
value={diagramName || ''}
|
||||
onChange={(e) => setDiagramName(e.target.value)}
|
||||
style={{
|
||||
padding: '10px 16px',
|
||||
height: '48px',
|
||||
fontSize: '16px',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
background: '#111',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
appearance: 'none',
|
||||
width: 180,
|
||||
paddingRight: 32,
|
||||
}}
|
||||
>
|
||||
{diagramList.map((name) => (
|
||||
<option key={name} value={name} style={{ color: 'white', font: 'bold 16px Arial' }}>
|
||||
📌 {name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 12,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
fontSize: 16,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
⏷
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
className="btn"
|
||||
style={{ marginLeft: 8, background: '#d28519', color: 'white' }}
|
||||
onClick={() => {
|
||||
const newName = prompt("Enter new diagram name:");
|
||||
if (newName) {
|
||||
if (!diagramList.includes(newName)) {
|
||||
const updatedList = [...diagramList, newName];
|
||||
setDiagramList(updatedList);
|
||||
}
|
||||
setDiagramName(newName);
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
setSelectedNode(null);
|
||||
setSelectedEdge(null);
|
||||
<button className="btn" style={{ background: '#d28519' }} onClick={() => {
|
||||
const newName = prompt("Enter new diagram name:");
|
||||
if (newName) {
|
||||
if (!diagramList.includes(newName)) {
|
||||
const updatedList = [...diagramList, newName];
|
||||
setDiagramList(updatedList);
|
||||
}
|
||||
}}
|
||||
>
|
||||
🆕 New Diagram
|
||||
</button>
|
||||
<button onClick={handleSave} className="btn" style={{ marginLeft: 8, background: 'green' }}>💾 Save</button>
|
||||
<button onClick={handleAddNode} className="btn" style={{ marginLeft: 8, background: 'blue' }}>➕ Add Node</button>
|
||||
<button
|
||||
onClick={handleDeleteNode}
|
||||
className="btn"
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
background: selectedNode ? '#b81a1a' : '#ccc',
|
||||
color: selectedNode ? 'white' : '#666',
|
||||
cursor: selectedNode ? 'pointer' : 'not-allowed',
|
||||
}}
|
||||
disabled={!selectedNode}
|
||||
>
|
||||
🗑️ 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>
|
||||
setDiagramName(newName);
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
setSelectedNode(null);
|
||||
setSelectedEdge(null);
|
||||
}
|
||||
}}>🆕 New Diagram</button>
|
||||
|
||||
<button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
|
||||
<button className="btn" onClick={handleAddNode} style={{ background: 'blue' }}>➕ Add Node</button>
|
||||
|
||||
<button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc', color: selectedNode ? 'white' : '#666', cursor: selectedNode ? 'pointer' : 'not-allowed' }} disabled={!selectedNode}>🗑️ Delete Node</button>
|
||||
|
||||
<button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc', color: selectedEdge ? 'white' : '#666', cursor: selectedEdge ? 'pointer' : 'not-allowed' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
|
||||
|
||||
<button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<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 }}>
|
||||
<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
|
||||
type="text"
|
||||
placeholder="Enter label"
|
||||
value={newLabel}
|
||||
onChange={(e) => setNewLabel(e.target.value)}
|
||||
style={{
|
||||
padding: '6px',
|
||||
width: '100%',
|
||||
borderRadius: 6,
|
||||
border: '1px solid #ccc',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
|
||||
/>
|
||||
<IconSelector onSelect={setSelectedIcon} />
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<button className="btn" onClick={handleSubmitNode}>✅ Add</button>
|
||||
<button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>
|
||||
❌ Cancel
|
||||
</button>
|
||||
<button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -351,7 +302,6 @@ function Diagram() {
|
||||
<Background />
|
||||
<Controls />
|
||||
</ReactFlow>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user