Routing problem for multi-pin port and anchors are debugged

tests/layout-ui-wiring.test.js

@@ -213,21 +213,20 @@ assert(
   canvasHtml.includes('const anchorRotation = data.rotation || 0') &&
     canvasHtml.includes('const anchorVisualRotation = -Number(anchorRotation || 0)') &&
     canvasHtml.includes('transform: `rotate(${anchorVisualRotation}deg)`') &&
-    canvasHtml.includes('buildPortHandles(localAnchorHandlePorts, { rotation: 0') &&
+    canvasHtml.includes('buildPortHandles(localAnchorHandlePorts, { rotation: 0, boxSize: elementSize') &&
     canvasHtml.includes('anchorDirectionHandles') &&
-    canvasHtml.includes('rotation: Number(anchorRotation || 0)') &&
+    canvasHtml.includes('rotation: -Number(anchorRotation || 0)') &&
     canvasHtml.includes('anchorHandleVisualStyle(portHandle') &&
     canvasHtml.includes('anchorPortVisualSide') &&
     canvasHtml.includes('portHandle.name') &&
     canvasHtml.includes('visualSide === \'left\' ? 0 : elementSize.width') &&
-    canvasHtml.includes('anchorPortVisualTop') &&
-    canvasHtml.includes('(index - 1) / (portCount - 1)') &&
-    canvasHtml.includes('elementSize.height - baseHandleStyle.height') &&
+    canvasHtml.includes('transform: \'translate(-50%, -50%)\'') &&
+    canvasHtml.includes("portHandle.style?.top || '50%'") &&
     canvasHtml.includes('localLeft') &&
     canvasHtml.includes('localTop') &&
     canvasHtml.includes('handlePositionMap[anchorDirectionHandles.get(portHandle.name) || portHandle.position]') &&
     canvasHtml.includes('getAnchorHandleRouteDirection') &&
-    canvasHtml.includes('rotation: Number(node.data?.rotation || 0)') &&
+    canvasHtml.includes('rotation: -Number(node.data?.rotation || 0)') &&
     canvasHtml.includes('directionToReactFlowPosition') &&
     canvasHtml.includes('sourcePosition: directionToReactFlowPosition(sourceDirection)') &&
     canvasHtml.includes('targetPosition: directionToReactFlowPosition(targetDirection)') &&
@@ -282,6 +281,16 @@ assert(
   canvasHtml.includes('component-floating-label') && canvasHtml.includes('component-visual-body'),
   'component labels should float outside the rotated body'
 );
+assert(
+  !canvasHtml.includes('const visualPortHandles = useMemo(') &&
+    canvasHtml.includes('buildPortHandles(data.ports, { rotation: data.rotation || 0, flip: Boolean(data.flip), flop: Boolean(data.flop), boxSize: componentSize })') &&
+    canvasHtml.includes('const portDirectionMap = useMemo(') &&
+    canvasHtml.includes('position: \'absolute\', inset: 0') &&
+    canvasHtml.includes('pointerEvents: \'none\'') &&
+    canvasHtml.includes('pointerEvents: \'all\'') &&
+    canvasHtml.includes('handlePositionMap[portDirectionMap.get(portHandle.name) || portHandle.position]'),
+  'component port circles should use transformed pin positions so rendered sides follow pin angles'
+);
 assert(
   canvasHtml.includes('canvasTextVisible') &&
     canvasHtml.includes('toggleCanvasText') &&
@@ -353,11 +362,26 @@ assert(
 assert(
   canvasHtml.includes('Ruler') &&
     canvasHtml.includes('rulerMode') &&
-    canvasHtml.includes('onPaneClick={handleRulerPaneClick}') &&
-    canvasHtml.includes('onNodeClick={handleRulerPaneClick}') &&
-    canvasHtml.includes('onPaneMouseMove={handleRulerMouseMove}'),
+    canvasHtml.includes('onPaneClick={handleCanvasPaneClick}') &&
+    canvasHtml.includes('onNodeClick={handleCanvasNodeClick}') &&
+    canvasHtml.includes('onPaneMouseMove={handleCanvasMouseMove}'),
   'canvas should expose a ruler mode controlled from the top toolbar, allow measuring on component bodies, and preview to the mouse'
 );
+assert(
+  canvasHtml.includes('mouseCanvasPoint') &&
+    canvasHtml.includes('canvasOrigin') &&
+    canvasHtml.includes('originPickMode') &&
+    canvasHtml.includes('displayMousePoint') &&
+    canvasHtml.includes('toggleOriginPickMode') &&
+    canvasHtml.includes('onMouseMoveCapture={handleCanvasMouseMove}') &&
+    canvasHtml.includes('handleCanvasPaneClick') &&
+    canvasHtml.includes('handleCanvasNodeClick') &&
+    canvasHtml.includes('origin-select-btn') &&
+    canvasHtml.includes('Select canvas origin') &&
+    canvasHtml.includes('className="coordinate-readout"') &&
+    canvasHtml.includes('className="origin-crosshair"'),
+  'canvas should show live mouse coordinates and support one-click origin selection with a crosshair preview'
+);
 assert(
   canvasHtml.includes('createRulerMeasurement') &&
     canvasHtml.includes('rulerPointNode') &&
@@ -442,11 +466,42 @@ assert(
     canvasHtml.includes('font-size: 0.4rem;') &&
     canvasHtml.includes('font-size: 0.32rem;') &&
     canvasHtml.includes("font: 600 0.5rem/1.35") &&
-    canvasHtml.includes('width: 8, height: 8') &&
-    canvasHtml.includes('width: 6,') &&
+    canvasHtml.includes('width: 6, height: 6') &&
+    canvasHtml.includes("border: '1px solid var(--accent)'") &&
+    canvasHtml.includes('width: 5,') &&
     canvasHtml.includes('fontSize: 8'),
   'canvas labels and port circles should render smaller than the previous sizing'
 );
+assert(
+    canvasHtml.includes('const portDisplayName = data.portName || data.componentDisplayName || data.label || \'port\';') &&
+    canvasHtml.includes('const canvasAngle = -Number(angle || 0);') &&
+    canvasHtml.includes('const pinLabelFromPortName =') &&
+    canvasHtml.includes('buildPortHandles(localHandlePorts, { rotation: canvasAngle })') &&
+    canvasHtml.includes('buildPortHandles(localHandlePorts, { rotation: 0, boxSize: elementSize })') &&
+    canvasHtml.includes('style={{ ...baseHandleStyle, ...portHandle.style }}') &&
+    canvasHtml.includes('borderRadius: 7') &&
+    canvasHtml.includes('boxSizing: \'border-box\'') &&
+    canvasHtml.includes('width: elementSize.width, height: elementSize.height, position: \'relative\'') &&
+    canvasHtml.includes('className="component-floating-label"') &&
+    canvasHtml.includes('className="port-pin-label"') &&
+    canvasHtml.includes('pinLabelFromPortName(portHandle.name)') &&
+    canvasHtml.includes('pinLabelStyle(portHandle') &&
+    canvasHtml.includes('transform: `rotate(${canvasAngle}deg) scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})`') &&
+    canvasHtml.includes('{portDisplayName}'),
+  'standalone Port nodes should render pin labels at their circles while the port instance name floats outside the rotated body'
+);
+assert(
+    canvasHtml.includes('const anchorDisplayName = data.componentDisplayName || data.label || \'anchor\';') &&
+    canvasHtml.includes('className="anchor-node-shell"') &&
+    canvasHtml.includes('className="anchor-visual-body"') &&
+    canvasHtml.includes("const localLeft = visualSide === 'left' ? 0 : elementSize.width") &&
+    canvasHtml.includes("transform: 'translate(-50%, -50%)'") &&
+    canvasHtml.includes('pinLabelFromPortName(portHandle.name)') &&
+    canvasHtml.includes('pinLabelStyle(portHandle') &&
+    canvasHtml.includes('className="port-pin-label"') &&
+    canvasHtml.includes('{anchorDisplayName}'),
+  'standalone Anchor nodes should use the same outside name label and per-pin labels as Port nodes'
+);
 assert(
   canvasHtml.includes('ParallelRouteEdge') &&
     canvasHtml.includes('parallelOffset') &&