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

Set all dots source and targets

Browse Source
This commit is contained in:
dvirlabs 2025-07-01 15:22:14 +03:00
parent 23b72f3e41
commit e01ae1dc92
1 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/CustomNode.jsx
View File

@ -3,35 +3,61 @@ import { Handle, Position } from 'reactflow';
function CustomNode({ data }) { function CustomNode({ data }) {
const icon = data.icon || 'https://s3.dvirlabs.com/lab-icons/default.svg'; const icon = data.icon || 'https://s3.dvirlabs.com/lab-icons/default.svg';
const handleSize = 5;
const visibleHandleStyle = {
background: '#1976d2',
width: handleSize,
height: handleSize,
borderRadius: '50%',
zIndex: 2,
};
const invisibleHandleStyle = {
background: 'transparent',
width: handleSize,
height: handleSize,
borderRadius: '50%',
zIndex: 1,
};
return ( return (
<div style={{ <div style={{
background: 'transparent', background: 'transparent',
border: '2px solid #1976d2', border: '2px solid #1976d2',
borderRadius: 6, borderRadius: 6,
padding: 10,
textAlign: 'center', textAlign: 'center',
width: 80, width: 80,
height: 40, height: 80,
boxShadow: '0 2px 6px rgba(0,0,0,0.2)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
position: 'relative', position: 'relative',
}}> }}>
{/* Handles - חובה */} {/* === TOP === */}
<Handle type="target" position={Position.Top} /> <Handle id="source-top" type="source" position={Position.Top} style={{ ...visibleHandleStyle, top: -6 }} />
<Handle type="source" position={Position.Bottom} /> <Handle id="target-top" type="target" position={Position.Top} style={{ ...invisibleHandleStyle, top: -6 }} />
<Handle type="source" position={Position.Right} />
<Handle type="source" position={Position.Left} />
{/* Icon and label */} {/* === BOTTOM === */}
<Handle id="source-bottom" type="source" position={Position.Bottom} style={{ ...visibleHandleStyle, bottom: -6 }} />
<Handle id="target-bottom" type="target" position={Position.Bottom} style={{ ...invisibleHandleStyle, bottom: -6 }} />
{/* === LEFT === */}
<Handle id="source-left" type="source" position={Position.Left} style={{ ...visibleHandleStyle, left: -6, top: 30 }} />
<Handle id="target-left" type="target" position={Position.Left} style={{ ...invisibleHandleStyle, left: -6, top: 30 }} />
{/* === RIGHT === */}
<Handle id="source-right" type="source" position={Position.Right} style={{ ...visibleHandleStyle, right: -6, top: 30 }} />
<Handle id="target-right" type="target" position={Position.Right} style={{ ...invisibleHandleStyle, right: -6, top: 30 }} />
{/* === ICON + LABEL === */}
<img <img
src={icon} src={icon}
alt={data.label} alt={data.label}
onError={(e) => { onError={(e) => {
e.target.src = 'https://s3.dvirlabs.com/lab-icons/default.svg'; e.target.src = 'https://s3.dvirlabs.com/lab-icons/default.svg';
}} }}
style={{ width: 40, height: 40, marginBottom: 6 }} style={{ width: 40, height: 40, marginTop: 6 }}
/> />
<div style={{ fontWeight: 'bold' }}>{data.label}</div> <div style={{ fontWeight: 'bold', fontSize: 12 }}>{data.label}</div>
</div> </div>
); );
} }