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,
+      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

@@ -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 }),
+        () => 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 = {
         left: Position.Left,
@@ -1955,9 +1947,12 @@ Organization : OptiHK Limited
         bottom: Position.Bottom
       };
       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 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 === '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 = {
-        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={{
+          {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}>
               <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, '');