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

port/anchor size adjustment #10

Merged
PotatoMaxwell merged 1 commits from jingwen_main into qinyue_main 2026-06-11 13:45:08 +00:00
Conversation 0 Commits 1 Files Changed 2
+66 -88
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
+62 -81
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,37 +1975,25 @@ 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, <React.Fragment key={portHandle.name}>
position: 'relative', <Handle
boxSizing: 'border-box', type="source"
background: selected ? 'var(--accent)' : 'var(--bg-card)', position={handlePositionMap[portHandle.position]}
border: selected ? '2px solid white' : '2px solid var(--accent)', id={portHandle.name}
color: selected ? 'white' : 'var(--accent)', style={{ ...baseHandleStyle, ...portHandle.style }}
fontSize: 8, fontWeight: 'bold', />
boxShadow: selected ? '0 0 10px rgba(56,189,248,0.4)' : 'none', <Handle
transform: `rotate(${canvasAngle}deg) scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})`, type="target"
}}> position={handlePositionMap[portHandle.position]}
{localPortHandles.map((portHandle) => ( id={portHandle.name}
<React.Fragment key={portHandle.name}> style={{ ...baseHandleStyle, ...portHandle.style }}
<Handle />
type="source" <div className="port-pin-label" style={pinLabelStyle(portHandle)}>
position={handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]} <span style={pinLabelTextStyle}>{pinLabelFromPortName(portHandle.name)}</span>
id={portHandle.name} </div>
style={{ ...baseHandleStyle, ...portHandle.style }} </React.Fragment>
/> ))}
<Handle
type="target"
position={handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]}
id={portHandle.name}
style={{ ...baseHandleStyle, ...portHandle.style }}
/>
<div className="port-pin-label" style={pinLabelStyle(portHandle)}>
<span style={pinLabelTextStyle}>{pinLabelFromPortName(portHandle.name)}</span>
</div>
</React.Fragment>
))}
</div>
</div> </div>
); );
}; };
@@ -4993,38 +4976,36 @@ 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'); if (link.from && link.to) {
if (link.from && link.to) { const [fromInst, fromPort] = link.from.split(':');
const [fromInst, fromPort] = link.from.split(':'); const [toInst, toPort] = link.to.split(':');
const [toInst, toPort] = link.to.split(':'); const sourceId = nodeNameMap[fromInst];
const sourceId = nodeNameMap[fromInst]; const targetId = nodeNameMap[toInst];
const targetId = nodeNameMap[toInst]; if (sourceId && targetId) {
if (sourceId && targetId) { const sourceNode = newNodes.find(node => node.id === sourceId);
const sourceNode = newNodes.find(node => node.id === sourceId); const targetNode = newNodes.find(node => node.id === targetId);
const targetNode = newNodes.find(node => node.id === targetId); const sourceHandle = resolveLoadedPinHandle(sourceNode, fromPort);
const sourceHandle = resolveLoadedPinHandle(sourceNode, fromPort); const targetHandle = resolveLoadedPinHandle(targetNode, toPort);
const targetHandle = resolveLoadedPinHandle(targetNode, toPort); const view = routeStyleForSettings(route, false);
const view = routeStyleForSettings(route, false); newEdges.push({
newEdges.push({ id: `edge-${sourceId}-${sourceHandle}-${targetId}-${targetHandle}`,
id: `edge-${sourceId}-${sourceHandle}-${targetId}-${targetHandle}`, source: sourceId,
source: sourceId, target: targetId,
target: targetId, sourceHandle,
sourceHandle, targetHandle,
targetHandle, type: view.type,
type: view.type, style: view.style,
style: view.style, data: { route, points: routePoints },
data: { route, points: routePoints }, });
});
}
} else if (routePoints.length >= 2) {
const edgeId = link.id || `route-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
newEdges.push(makeFreeRouteEdge(edgeId, routePoints, route));
} }
}); } else if (routePoints.length >= 2) {
} const edgeId = link.id || `route-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
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, '');