port/anchor size adjustment #10

Merged
PotatoMaxwell merged 1 commits from jingwen_main into qinyue_main 2026-06-11 13:45:08 +00:00
2 changed files with 66 additions and 88 deletions
Showing only changes of commit 5db13a7d69 - Show all commits
+4 -7
View File
@@ -790,14 +790,11 @@
const portNumber = normalizePortNumber(data && data.portNumber);
const pitch = normalizePitch(data && data.pitch);
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 {
width: data && data.elementType === 'anchor' ? ANCHOR_NODE_WIDTH : portWidth,
height: Math.max(PORT_NODE_SIZE, PORT_NODE_SIZE + Math.max(0, portNumber - 1) * handleClearance)
width: data && data.elementType === 'anchor' ? ANCHOR_NODE_WIDTH : PORT_NODE_SIZE,
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)
};
};
+17 -36
View File
@@ -1933,20 +1933,12 @@ Organization : OptiHK Limited
const portDisplayName = data.portName || data.componentDisplayName || data.label || 'port';
const ports = buildElementPorts('port', data);
const elementSize = buildElementBoxSize(data);
const localHandlePorts = Object.fromEntries(
const handlePorts = Object.fromEntries(
Object.entries(ports).map(([name, info]) => [name, { ...info, a: 0 }])
);
const localPortHandles = useMemo(
() => buildPortHandles(localHandlePorts, { rotation: 0, boxSize: elementSize }),
[localHandlePorts, elementSize]
);
const portHandles = useMemo(
() => buildPortHandles(localHandlePorts, { rotation: canvasAngle }),
[localHandlePorts, canvasAngle]
);
const portDirectionMap = useMemo(
() => new Map(portHandles.map(handle => [handle.name, handle.position])),
[portHandles]
() => buildPortHandles(handlePorts, { rotation: canvasAngle, boxSize: elementSize }),
[handlePorts, canvasAngle, elementSize]
);
const handlePositionMap = {
left: Position.Left,
@@ -1955,9 +1947,12 @@ Organization : OptiHK Limited
bottom: Position.Bottom
};
const baseHandleStyle = {
background: 'var(--accent)',
width: 5,
height: 5
background: selected ? '#f87171' : 'var(--danger)',
width: 7,
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 base = {
@@ -1966,13 +1961,13 @@ Organization : OptiHK Limited
top: portHandle.style?.top,
bottom: portHandle.style?.bottom
};
if (portHandle.position === 'left') return { ...base, transform: 'translate(calc(-100% - 5px), -50%)' };
if (portHandle.position === 'right') return { ...base, transform: 'translate(5px, -50%)' };
if (portHandle.position === 'top') return { ...base, transform: 'translate(-50%, calc(-100% - 5px))' };
return { ...base, transform: 'translate(-50%, 5px)' };
if (portHandle.position === 'left') return { ...base, transform: 'translate(calc(-100% - 8px), -50%)' };
if (portHandle.position === 'right') return { ...base, transform: 'translate(8px, -50%)' };
if (portHandle.position === 'top') return { ...base, transform: 'translate(-50%, calc(-100% - 8px))' };
return { ...base, transform: 'translate(-50%, 8px)' };
};
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 (
<div style={{ width: elementSize.width, height: elementSize.height, position: 'relative' }}>
@@ -1980,28 +1975,17 @@ Organization : OptiHK Limited
<strong>{portDisplayName}</strong>
<span>Port</span>
</div>
<div style={{
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) => (
{portHandles.map((portHandle) => (
<React.Fragment key={portHandle.name}>
<Handle
type="source"
position={handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]}
position={handlePositionMap[portHandle.position]}
id={portHandle.name}
style={{ ...baseHandleStyle, ...portHandle.style }}
/>
<Handle
type="target"
position={handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]}
position={handlePositionMap[portHandle.position]}
id={portHandle.name}
style={{ ...baseHandleStyle, ...portHandle.style }}
/>
@@ -2011,7 +1995,6 @@ Organization : OptiHK Limited
</React.Fragment>
))}
</div>
</div>
);
};
@@ -4993,7 +4976,6 @@ Organization : OptiHK Limited
}
newNodes.push(...buildElementNodesFromYaml(doc, usesGdsYUp, nodeNameMap));
if (!isProject) {
forEachBundleLink(doc, (bundleName, bundle, link) => {
const route = createRouteSettings(technologyManifest, { ...bundle, ...link, bundle_group: bundleName });
const routePoints = normalizeRoutePoints(link.points, doc.coordinate_system === 'gds_y_up');
@@ -5024,7 +5006,6 @@ Organization : OptiHK Limited
newEdges.push(makeFreeRouteEdge(edgeId, routePoints, route));
}
});
}
const newPageId = Date.now().toString() + Math.random().toString(36).substr(2, 5);
const newPageName = file.name.replace(/\.(yaml|yml)$/i, '');