From 5db13a7d693e4a3a850bfdebf8df982786e0c93e Mon Sep 17 00:00:00 2001 From: xsxx03-art <你的邮箱@example.com> Date: Thu, 11 Jun 2026 20:45:26 +0800 Subject: [PATCH] port/anchor size adjustment --- frontend/canvas-helpers.js | 11 ++- frontend/canvas.html | 143 ++++++++++++++++--------------------- 2 files changed, 66 insertions(+), 88 deletions(-) diff --git a/frontend/canvas-helpers.js b/frontend/canvas-helpers.js index d06f606..76324f4 100644 --- a/frontend/canvas-helpers.js +++ b/frontend/canvas-helpers.js @@ -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) }; }; diff --git a/frontend/canvas.html b/frontend/canvas.html index 39d03d2..12fa44a 100644 --- a/frontend/canvas.html +++ b/frontend/canvas.html @@ -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 (
@@ -1980,37 +1975,25 @@ Organization : OptiHK Limited {portDisplayName} Port
-
- {localPortHandles.map((portHandle) => ( - - - -
- {pinLabelFromPortName(portHandle.name)} -
- - ))} -
+ {portHandles.map((portHandle) => ( + + + +
+ {pinLabelFromPortName(portHandle.name)} +
+ + ))} ); }; @@ -4993,38 +4976,36 @@ 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'); - if (link.from && link.to) { - const [fromInst, fromPort] = link.from.split(':'); - const [toInst, toPort] = link.to.split(':'); - const sourceId = nodeNameMap[fromInst]; - const targetId = nodeNameMap[toInst]; - if (sourceId && targetId) { - const sourceNode = newNodes.find(node => node.id === sourceId); - const targetNode = newNodes.find(node => node.id === targetId); - const sourceHandle = resolveLoadedPinHandle(sourceNode, fromPort); - const targetHandle = resolveLoadedPinHandle(targetNode, toPort); - const view = routeStyleForSettings(route, false); - newEdges.push({ - id: `edge-${sourceId}-${sourceHandle}-${targetId}-${targetHandle}`, - source: sourceId, - target: targetId, - sourceHandle, - targetHandle, - type: view.type, - style: view.style, - 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)); + 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'); + if (link.from && link.to) { + const [fromInst, fromPort] = link.from.split(':'); + const [toInst, toPort] = link.to.split(':'); + const sourceId = nodeNameMap[fromInst]; + const targetId = nodeNameMap[toInst]; + if (sourceId && targetId) { + const sourceNode = newNodes.find(node => node.id === sourceId); + const targetNode = newNodes.find(node => node.id === targetId); + const sourceHandle = resolveLoadedPinHandle(sourceNode, fromPort); + const targetHandle = resolveLoadedPinHandle(targetNode, toPort); + const view = routeStyleForSettings(route, false); + newEdges.push({ + id: `edge-${sourceId}-${sourceHandle}-${targetId}-${targetHandle}`, + source: sourceId, + target: targetId, + sourceHandle, + targetHandle, + type: view.type, + style: view.style, + 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)); + } + }); const newPageId = Date.now().toString() + Math.random().toString(36).substr(2, 5); const newPageName = file.name.replace(/\.(yaml|yml)$/i, ''); -- 2.52.0