PotatoMaxwell/mxpic_EDA
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

port/anchor size adjustment

Browse Source
This commit is contained in:
xsxx03-art
2026-06-11 20:45:26 +08:00
parent d577edf348
commit 5db13a7d69
2 changed files with 66 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/canvas-helpers.js
+4 -7
View File
@@ -790,14 +790,11 @@
const portNumber = normalizePortNumber(data && data.portNumber); const portNumber = normalizePortNumber(data && data.portNumber);
const pitch = normalizePitch(data && data.pitch); const pitch = normalizePitch(data && data.pitch);
const handleClearance = Math.max(pitch, 14); const handleClearance = Math.max(pitch, 14);
const portDisplayName = String((data && (data.portName || data.componentDisplayName || data.label)) || 'port');
const portWidth = Math.max(
PORT_NODE_SIZE,
PORT_LABEL_HORIZONTAL_PADDING + Math.max(PORT_LABEL_MIN_CHARS, portDisplayName.length) * PORT_LABEL_CHAR_WIDTH
);
return { return {
width: data && data.elementType === 'anchor' ? ANCHOR_NODE_WIDTH : portWidth, width: data && data.elementType === 'anchor' ? ANCHOR_NODE_WIDTH : PORT_NODE_SIZE,
height: Math.max(PORT_NODE_SIZE, PORT_NODE_SIZE + Math.max(0, portNumber - 1) * handleClearance) height: data && data.elementType === 'anchor'
? Math.max(PORT_NODE_SIZE / 2, PORT_NODE_SIZE / 2 + Math.max(0, portNumber - 1) * handleClearance)
: Math.max(PORT_NODE_SIZE, PORT_NODE_SIZE + Math.max(0, portNumber - 1) * handleClearance)
}; };
}; };
frontend/canvas.html
+17 -36
View File
@@ -1933,20 +1933,12 @@ Organization : OptiHK Limited
const portDisplayName = data.portName || data.componentDisplayName || data.label || 'port'; const portDisplayName = data.portName || data.componentDisplayName || data.label || 'port';
const ports = buildElementPorts('port', data); const ports = buildElementPorts('port', data);
const elementSize = buildElementBoxSize(data); const elementSize = buildElementBoxSize(data);
const localHandlePorts = Object.fromEntries( const handlePorts = Object.fromEntries(
Object.entries(ports).map(([name, info]) => [name, { ...info, a: 0 }]) Object.entries(ports).map(([name, info]) => [name, { ...info, a: 0 }])
); );
const localPortHandles = useMemo(
() => buildPortHandles(localHandlePorts, { rotation: 0, boxSize: elementSize }),
[localHandlePorts, elementSize]
);
const portHandles = useMemo( const portHandles = useMemo(
() => buildPortHandles(localHandlePorts, { rotation: canvasAngle }), () => buildPortHandles(handlePorts, { rotation: canvasAngle, boxSize: elementSize }),
[localHandlePorts, canvasAngle] [handlePorts, canvasAngle, elementSize]
);
const portDirectionMap = useMemo(
() => new Map(portHandles.map(handle => [handle.name, handle.position])),
[portHandles]
); );
const handlePositionMap = { const handlePositionMap = {
left: Position.Left, left: Position.Left,
@@ -1955,9 +1947,12 @@ Organization : OptiHK Limited
bottom: Position.Bottom bottom: Position.Bottom
}; };
const baseHandleStyle = { const baseHandleStyle = {
background: 'var(--accent)', background: selected ? '#f87171' : 'var(--danger)',
width: 5, width: 7,
height: 5 height: 7,
borderRadius: '50%',
border: selected ? '2px solid white' : '1px solid rgba(239,68,68,0.5)',
boxShadow: selected ? '0 0 8px rgba(239,68,68,0.5)' : 'none'
}; };
const pinLabelStyle = (portHandle) => { const pinLabelStyle = (portHandle) => {
const base = { const base = {
@@ -1966,13 +1961,13 @@ Organization : OptiHK Limited
top: portHandle.style?.top, top: portHandle.style?.top,
bottom: portHandle.style?.bottom bottom: portHandle.style?.bottom
}; };
if (portHandle.position === 'left') return { ...base, transform: 'translate(calc(-100% - 5px), -50%)' }; if (portHandle.position === 'left') return { ...base, transform: 'translate(calc(-100% - 8px), -50%)' };
if (portHandle.position === 'right') return { ...base, transform: 'translate(5px, -50%)' }; if (portHandle.position === 'right') return { ...base, transform: 'translate(8px, -50%)' };
if (portHandle.position === 'top') return { ...base, transform: 'translate(-50%, calc(-100% - 5px))' }; if (portHandle.position === 'top') return { ...base, transform: 'translate(-50%, calc(-100% - 8px))' };
return { ...base, transform: 'translate(-50%, 5px)' }; return { ...base, transform: 'translate(-50%, 8px)' };
}; };
const pinLabelTextStyle = { const pinLabelTextStyle = {
transform: `rotate(${-canvasAngle}deg) scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})` transform: `scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})`
}; };
return ( return (
<div style={{ width: elementSize.width, height: elementSize.height, position: 'relative' }}> <div style={{ width: elementSize.width, height: elementSize.height, position: 'relative' }}>
@@ -1980,28 +1975,17 @@ Organization : OptiHK Limited
<strong>{portDisplayName}</strong> <strong>{portDisplayName}</strong>
<span>Port</span> <span>Port</span>
</div> </div>
<div style={{ {portHandles.map((portHandle) => (
width: elementSize.width, height: elementSize.height, borderRadius: 7,
position: 'relative',
boxSizing: 'border-box',
background: selected ? 'var(--accent)' : 'var(--bg-card)',
border: selected ? '2px solid white' : '2px solid var(--accent)',
color: selected ? 'white' : 'var(--accent)',
fontSize: 8, fontWeight: 'bold',
boxShadow: selected ? '0 0 10px rgba(56,189,248,0.4)' : 'none',
transform: `rotate(${canvasAngle}deg) scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})`,
}}>
{localPortHandles.map((portHandle) => (
<React.Fragment key={portHandle.name}> <React.Fragment key={portHandle.name}>
<Handle <Handle
type="source" type="source"
position={handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]} position={handlePositionMap[portHandle.position]}
id={portHandle.name} id={portHandle.name}
style={{ ...baseHandleStyle, ...portHandle.style }} style={{ ...baseHandleStyle, ...portHandle.style }}
/> />
<Handle <Handle
type="target" type="target"
position={handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]} position={handlePositionMap[portHandle.position]}
id={portHandle.name} id={portHandle.name}
style={{ ...baseHandleStyle, ...portHandle.style }} style={{ ...baseHandleStyle, ...portHandle.style }}
/> />
@@ -2011,7 +1995,6 @@ Organization : OptiHK Limited
</React.Fragment> </React.Fragment>
))} ))}
</div> </div>
</div>
); );
}; };
@@ -4993,7 +4976,6 @@ Organization : OptiHK Limited
} }
newNodes.push(...buildElementNodesFromYaml(doc, usesGdsYUp, nodeNameMap)); newNodes.push(...buildElementNodesFromYaml(doc, usesGdsYUp, nodeNameMap));
if (!isProject) {
forEachBundleLink(doc, (bundleName, bundle, link) => { forEachBundleLink(doc, (bundleName, bundle, link) => {
const route = createRouteSettings(technologyManifest, { ...bundle, ...link, bundle_group: bundleName }); const route = createRouteSettings(technologyManifest, { ...bundle, ...link, bundle_group: bundleName });
const routePoints = normalizeRoutePoints(link.points, doc.coordinate_system === 'gds_y_up'); const routePoints = normalizeRoutePoints(link.points, doc.coordinate_system === 'gds_y_up');
@@ -5024,7 +5006,6 @@ Organization : OptiHK Limited
newEdges.push(makeFreeRouteEdge(edgeId, routePoints, route)); newEdges.push(makeFreeRouteEdge(edgeId, routePoints, route));
} }
}); });
}
const newPageId = Date.now().toString() + Math.random().toString(36).substr(2, 5); const newPageId = Date.now().toString() + Math.random().toString(36).substr(2, 5);
const newPageName = file.name.replace(/\.(yaml|yml)$/i, ''); const newPageName = file.name.replace(/\.(yaml|yml)$/i, '');