Web page style added
This commit is contained in:
+239
-160
@@ -5,13 +5,26 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Canvas with PDK Library – Component Name & Rotation</title>
|
||||
<title>mxPIC Core - Canvas</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/reactflow@11/dist/umd/index.js" crossorigin></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<style>
|
||||
/* optihk Shared Dark Theme Variables */
|
||||
:root {
|
||||
--bg-main: #0f172a;
|
||||
--bg-card: #1e293b;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #38bdf8;
|
||||
--accent-hover: #0284c7;
|
||||
--border: #334155;
|
||||
--input-bg: #0b1120;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
#root {
|
||||
@@ -19,93 +32,148 @@
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text-main);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom Dark Scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-main);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Tree View Styling */
|
||||
details {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left-block {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.left-block-header {
|
||||
background: #e0e0e0;
|
||||
padding: 6px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left-block-body {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85em;
|
||||
padding: 4px 0;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.tree-folder summary {
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.right-block {
|
||||
border: 1px solid #ccc;
|
||||
.component-leaf {
|
||||
cursor: grab;
|
||||
padding: 4px 6px;
|
||||
margin-left: 15px;
|
||||
margin-top: 2px;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-muted);
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.right-block-header {
|
||||
background: #e0e0e0;
|
||||
padding: 6px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
.component-leaf:hover {
|
||||
background: var(--border);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.right-block-body {
|
||||
padding: 8px 10px;
|
||||
/* Side Panel Blocks */
|
||||
.left-block, .right-block {
|
||||
background: var(--bg-main);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-block-header, .right-block-header {
|
||||
background: var(--bg-card);
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
font-size: 0.85em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.left-block-body, .right-block-body {
|
||||
padding: 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.placeholder-block {
|
||||
border: 1px dashed #bbb;
|
||||
padding: 8px;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
background: #f9f9f9;
|
||||
border: 1px dashed var(--border);
|
||||
padding: 12px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8em;
|
||||
font-size: 1.2em;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: #d0d0d0;
|
||||
background: var(--border);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.component-leaf {
|
||||
cursor: grab;
|
||||
padding: 2px 4px;
|
||||
margin-left: 20px;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
/* Standard Form Inputs inside panels */
|
||||
input[type="number"], input[type="text"] {
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-main);
|
||||
font-family: inherit;
|
||||
font-size: 0.9em;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.component-leaf:hover {
|
||||
background: #e6f7ff;
|
||||
input[type="number"]:focus, input[type="text"]:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ReactFlow Dark Mode Overrides */
|
||||
.react-flow__controls button {
|
||||
background-color: var(--bg-card) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
fill: var(--text-main) !important;
|
||||
}
|
||||
.react-flow__controls button:hover {
|
||||
background-color: var(--border) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -128,6 +196,7 @@
|
||||
useUpdateNodeInternals,
|
||||
} = window.ReactFlow;
|
||||
|
||||
// --- NODE DESIGN (Dark CAD Style) ---
|
||||
const RotatableNode = ({ id, data, selected }) => {
|
||||
const updateNodeInternals = useUpdateNodeInternals();
|
||||
useEffect(() => {
|
||||
@@ -135,9 +204,9 @@
|
||||
}, [data.rotation, updateNodeInternals, id]);
|
||||
|
||||
const baseHandleStyle = {
|
||||
width: 14, height: 14,
|
||||
background: '#555',
|
||||
border: 'none',
|
||||
width: 10, height: 10,
|
||||
background: 'var(--bg-main)',
|
||||
border: '2px solid var(--accent)',
|
||||
borderRadius: '50%',
|
||||
};
|
||||
const leftTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(-50%, -50%)' };
|
||||
@@ -147,11 +216,18 @@
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '10px 20px', border: '1px solid #333', borderRadius: 6,
|
||||
background: '#fff', minWidth: 100, textAlign: 'center',
|
||||
padding: '10px 20px',
|
||||
border: selected ? '2px solid var(--accent)' : '1px solid var(--border)',
|
||||
borderRadius: 6,
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text-main)',
|
||||
minWidth: 100, textAlign: 'center',
|
||||
position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
|
||||
transition: selected ? 'none' : 'transform 0.1s ease',
|
||||
boxSizing: 'border-box',
|
||||
boxShadow: selected ? '0 0 15px rgba(56, 189, 248, 0.2)' : '0 4px 6px rgba(0,0,0,0.3)',
|
||||
fontFamily: "'Inter', sans-serif",
|
||||
fontSize: '0.85rem'
|
||||
}}>
|
||||
<div>{data.componentDisplayName}</div>
|
||||
<Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
|
||||
@@ -175,7 +251,7 @@
|
||||
};
|
||||
return (
|
||||
<div className="component-leaf" draggable onDragStart={handleDragStart}>
|
||||
🔷 {name}
|
||||
<span style={{color: 'var(--accent)', marginRight: '4px'}}>❖</span> {name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -197,8 +273,8 @@
|
||||
|
||||
const LeftPanel = ({ library, treeKey, expanded, onToggle, treeRef, width }) => (
|
||||
<aside style={{
|
||||
width: width, background: '#f4f4f4', borderRight: '1px solid #ccc',
|
||||
padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
width: width, background: 'var(--bg-card)', borderRight: '1px solid var(--border)',
|
||||
padding: 12, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
boxSizing: 'border-box', overflowY: 'auto'
|
||||
}}>
|
||||
<div className="left-block">
|
||||
@@ -214,15 +290,15 @@
|
||||
<TreeNode key={key} name={key} children={value} />
|
||||
))
|
||||
) : (
|
||||
<p style={{ color: '#999' }}>Loading library...</p>
|
||||
<p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Loading library...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="left-block">
|
||||
<div className="left-block-header">Routing selections</div>
|
||||
<div className="left-block-header">Routing modes</div>
|
||||
<div className="left-block-body">
|
||||
<ul style={{ paddingLeft: 20, margin: 0 }}>
|
||||
<ul style={{ paddingLeft: 20, margin: 0, color: 'var(--text-muted)', lineHeight: '1.8' }}>
|
||||
<li>Single mode wires</li>
|
||||
<li>Multi-mode wires</li>
|
||||
<li>DC electrical wires</li>
|
||||
@@ -232,11 +308,14 @@
|
||||
</div>
|
||||
|
||||
<div className="left-block" style={{ marginTop: 'auto' }}>
|
||||
<div className="left-block-header">User info</div>
|
||||
<div className="left-block-body">
|
||||
<div>Name: XXXXXX</div>
|
||||
<div>ID: 12345678</div>
|
||||
<button disabled>Log out</button>
|
||||
<div className="left-block-header">Session</div>
|
||||
<div className="left-block-body" style={{color: 'var(--text-muted)'}}>
|
||||
<div style={{marginBottom: '4px'}}>Name: XXXXXX</div>
|
||||
<div style={{marginBottom: '10px'}}>ID: 12345678</div>
|
||||
<button disabled style={{
|
||||
background: 'var(--border)', color: 'var(--text-muted)',
|
||||
border: 'none', padding: '6px 12px', borderRadius: '4px', width: '100%'
|
||||
}}>Log out</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -330,16 +409,16 @@
|
||||
|
||||
return (
|
||||
<aside style={{
|
||||
width: width, background: '#fafafa', borderLeft: '1px solid #ccc',
|
||||
padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
width: width, background: 'var(--bg-card)', borderLeft: '1px solid var(--border)',
|
||||
padding: 12, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
boxSizing: 'border-box', overflowY: 'auto'
|
||||
}}>
|
||||
<div className="right-block">
|
||||
<div className="right-block-header">Properties</div>
|
||||
<div className="right-block-header">Transforms</div>
|
||||
<div className="right-block-body">
|
||||
{selectedNode ? (
|
||||
<div>
|
||||
<label>X:</label>
|
||||
<label>X Coordinate</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
@@ -355,14 +434,11 @@
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<br /><br />
|
||||
<label>Y:</label>
|
||||
<label>Y Coordinate</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
@@ -378,55 +454,46 @@
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<br /><br />
|
||||
<label>A (deg):</label>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localRotation}
|
||||
onChange={(e) => setLocalRotation(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localRotation);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updateRotation(selectedNode.id, val);
|
||||
setLocalRotation(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
style={{ width: '100%', marginTop: 4 }}
|
||||
/>
|
||||
</div>
|
||||
<label>Angle (deg)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localRotation}
|
||||
onChange={(e) => setLocalRotation(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localRotation);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updateRotation(selectedNode.id, val);
|
||||
setLocalRotation(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p style={{ color: '#999' }}>Click a node to edit</p>
|
||||
<p style={{ color: 'var(--text-muted)', fontStyle: 'italic', textAlign: 'center' }}>Select a node to inspect</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedNode?.data?.componentName && (
|
||||
<div className="right-block">
|
||||
<div className="right-block-header">Item details</div>
|
||||
<div className="right-block-header">Parameters</div>
|
||||
<div className="right-block-body">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
<p style={{color: 'var(--text-muted)'}}>Loading data...</p>
|
||||
) : componentData ? (
|
||||
<>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<strong style={{ display: 'block', marginBottom: '4px' }}>Component name:</strong>
|
||||
<div style={{ marginBottom: '15px' }}>
|
||||
<label>Instance Name</label>
|
||||
{editingComponentName ? (
|
||||
<input
|
||||
type="text"
|
||||
@@ -435,47 +502,54 @@
|
||||
onBlur={handleSaveName}
|
||||
onKeyDown={handleKeyDown}
|
||||
autoFocus
|
||||
style={{ width: '100%', padding: '4px', fontSize: '0.85em', boxSizing: 'border-box' }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: '4px 6px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: '3px',
|
||||
display: 'inline-block',
|
||||
wordBreak: 'break-all'
|
||||
padding: '6px 8px',
|
||||
backgroundColor: 'var(--input-bg)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
wordBreak: 'break-all',
|
||||
color: 'var(--accent)'
|
||||
}}
|
||||
onClick={handleStartEditName}
|
||||
title="Click to edit"
|
||||
>
|
||||
{currentComponentDisplayName || componentData.name} ✎
|
||||
<span>{currentComponentDisplayName || componentData.name}</span>
|
||||
<span style={{fontSize: '12px', color: 'var(--text-muted)'}}>✎</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p style={{ wordBreak: 'break-all', whiteSpace: 'normal', overflowWrap: 'break-word', marginTop: '8px' }}>
|
||||
<strong>PDK name:</strong><br />{componentData.name}
|
||||
</p>
|
||||
<p><strong>Description:</strong><br />
|
||||
Foundry: {componentData.foundry}<br />
|
||||
Process: {componentData.process}<br />
|
||||
Year: {componentData.year}<br />
|
||||
Designer: {componentData.designer}
|
||||
</p>
|
||||
<p><strong>PDK:</strong> (string)</p>
|
||||
<p><strong>Ports:</strong></p>
|
||||
<ul style={{ paddingLeft: 20, margin: 0 }}>
|
||||
<div style={{color: 'var(--text-muted)', lineHeight: '1.6'}}>
|
||||
<p style={{ margin: '0 0 8px 0', wordBreak: 'break-all' }}>
|
||||
<strong style={{color: 'var(--text-main)'}}>Cell:</strong> {componentData.name}
|
||||
</p>
|
||||
<p style={{ margin: '0 0 8px 0' }}>
|
||||
<strong style={{color: 'var(--text-main)'}}>Foundry:</strong> {componentData.foundry}<br/>
|
||||
<strong style={{color: 'var(--text-main)'}}>Process:</strong> {componentData.process}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p style={{color: 'var(--text-main)', fontWeight: '500', marginBottom: '4px'}}>Ports:</p>
|
||||
<ul style={{ paddingLeft: 15, margin: '0 0 15px 0', color: 'var(--text-muted)' }}>
|
||||
{componentData.ports && Object.entries(componentData.ports).map(([portName, portInfo]) => (
|
||||
<li key={portName} style={{ letterSpacing: '0.5px' }}>{portName}: {formatPort(portInfo)}</li>
|
||||
<li key={portName} style={{ letterSpacing: '0.5px' }}>
|
||||
<span style={{color: 'var(--accent)'}}>{portName}</span>: {formatPort(portInfo)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p><strong>Image:</strong></p>
|
||||
|
||||
<p style={{color: 'var(--text-main)', fontWeight: '500', marginBottom: '4px'}}>Preview:</p>
|
||||
<div style={{
|
||||
border: '1px dashed #ccc', width: '100%', height: 80,
|
||||
border: '1px solid var(--border)', width: '100%', height: 100,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: '#999', background: '#fcfcfc', marginTop: 4,
|
||||
background: 'var(--input-bg)', borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<img
|
||||
@@ -485,37 +559,38 @@
|
||||
onClick={() => setEnlarged(`/api/component/${encodeURIComponent(componentData.name)}/image`)}
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
e.currentTarget.parentElement.innerHTML = 'No image available';
|
||||
e.currentTarget.parentElement.innerHTML = '<span style="color:var(--text-muted)">No preview</span>';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: '#999' }}>No data</p>
|
||||
<p style={{ color: 'var(--text-muted)' }}>No data available</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="right-block" style={{ marginTop: 'auto' }}>
|
||||
<div className="right-block-header">Function block to be explored</div>
|
||||
<div className="right-block-body placeholder-block">Reserved for future functionality</div>
|
||||
<div className="right-block-header">Inverse Design</div>
|
||||
<div className="right-block-body placeholder-block">Requires AI Upgrade</div>
|
||||
</div>
|
||||
|
||||
{enlarged && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000,
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.9)', zIndex: 1000,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'zoom-out',
|
||||
backdropFilter: 'blur(4px)'
|
||||
}}
|
||||
onClick={() => setEnlarged(null)}
|
||||
>
|
||||
<img
|
||||
src={enlarged}
|
||||
alt="Enlarged layout"
|
||||
style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain' }}
|
||||
style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain', border: '1px solid var(--border)', background: 'var(--bg-main)' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -541,7 +616,7 @@
|
||||
width: 6, cursor: 'col-resize', background: 'transparent',
|
||||
transition: 'background 0.2s', zIndex: 5, flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = '#ccc'}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--accent)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||
/>
|
||||
);
|
||||
@@ -556,8 +631,8 @@
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const treeContainerRef = useRef(null);
|
||||
|
||||
const [leftWidth, setLeftWidth] = useState(240);
|
||||
const [rightWidth, setRightWidth] = useState(220);
|
||||
const [leftWidth, setLeftWidth] = useState(260);
|
||||
const [rightWidth, setRightWidth] = useState(260);
|
||||
const [dragging, setDragging] = useState(null);
|
||||
|
||||
const [gridSnap, setGridSnap] = useState(false);
|
||||
@@ -627,7 +702,7 @@
|
||||
}, [setNodes, reactFlowInstance, generateComponentDisplayName]);
|
||||
|
||||
const onConnect = useCallback((connection) => {
|
||||
setEdges((eds) => addEdge({ ...connection, type: 'straight' }, eds));
|
||||
setEdges((eds) => addEdge({ ...connection, type: 'smoothstep', style: { stroke: 'var(--accent)', strokeWidth: 2 } }, eds));
|
||||
}, [setEdges]);
|
||||
|
||||
const expandAll = useCallback(() => {
|
||||
@@ -677,28 +752,31 @@
|
||||
<ResizeHandle onMouseDown={handleResizeStart('left')} />
|
||||
|
||||
<div style={{ flex: 1, position: 'relative' }}>
|
||||
|
||||
{/* Grid Snap Toggle Switch */}
|
||||
<div style={{
|
||||
position: 'absolute', top: 10, right: 10, zIndex: 10,
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
position: 'absolute', top: 15, right: 15, zIndex: 10,
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
background: 'var(--bg-card)', padding: '6px 12px', borderRadius: '8px',
|
||||
border: '1px solid var(--border)', boxShadow: '0 4px 6px rgba(0,0,0,0.3)'
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '0.85em', fontWeight: 'bold', fontFamily: "'Sofia Pro', sans-serif",
|
||||
color: '#333', userSelect: 'none'
|
||||
}}>Grid lock</span>
|
||||
fontSize: '0.85em', fontWeight: '500', color: 'var(--text-main)', userSelect: 'none'
|
||||
}}>Snap to Grid</span>
|
||||
<div
|
||||
onClick={toggleGridSnap}
|
||||
style={{
|
||||
width: 48, height: 24, borderRadius: 12,
|
||||
background: gridSnap ? '#28a745' : '#ccc',
|
||||
width: 40, height: 20, borderRadius: 10,
|
||||
background: gridSnap ? 'var(--accent)' : 'var(--input-bg)',
|
||||
border: '1px solid ' + (gridSnap ? 'var(--accent)' : 'var(--border)'),
|
||||
cursor: 'pointer', display: 'flex', alignItems: 'center',
|
||||
padding: '0 2px', transition: 'background 0.3s',
|
||||
boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
|
||||
padding: '0 2px', transition: 'background 0.3s, border-color 0.3s',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: 20, height: 20, borderRadius: '50%',
|
||||
background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
||||
transform: gridSnap ? 'translateX(24px)' : 'translateX(0)',
|
||||
width: 16, height: 16, borderRadius: '50%',
|
||||
background: '#fff',
|
||||
transform: gridSnap ? 'translateX(20px)' : 'translateX(0)',
|
||||
transition: 'transform 0.2s',
|
||||
}} />
|
||||
</div>
|
||||
@@ -721,8 +799,9 @@
|
||||
elementsSelectable={true}
|
||||
connectionRadius={50}
|
||||
>
|
||||
<Controls />
|
||||
<Background />
|
||||
<Controls style={{ bottom: 15, left: 15 }} />
|
||||
{/* Dark mode background for the canvas */}
|
||||
<Background color="#334155" gap={20} size={1} />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
@@ -747,4 +826,4 @@
|
||||
|
||||
</html>
|
||||
|
||||
{% endraw %}
|
||||
{% endraw %}
|
||||
Reference in New Issue
Block a user