Merge pull request 'update canvas.html' (#8) from jingwen_main into qinyue_main

Reviewed-on: #8

frontend/canvas.html

@@ -1720,8 +1720,40 @@ Organization : OptiHK Limited
         bottom: Position.Bottom
       };
       const componentSize = normalizeBoxSize({ box_size: data.boxSize }, DEFAULT_COMPONENT_BOX_SIZE);
+      const flippedPorts = useMemo(
+        () => {
+          const result = {};
+          const ports = Object.entries(data.ports || {}).filter(([name]) => name !== 'a0' && name !== 'b0');
+          if (ports.length === 0) return result;
+          let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+          ports.forEach(([, info]) => {
+            const x = Number(info.x || 0);
+            const y = Number(info.y || 0);
+            if (x < minX) minX = x;
+            if (x > maxX) maxX = x;
+            if (y < minY) minY = y;
+            if (y > maxY) maxY = y;
+          });
+          ports.forEach(([name, info]) => {
+            let x = Number(info.x || 0);
+            let y = Number(info.y || 0);
+            let a = Number(info.a || 0);
+            if (data.flip) {
+              y = minY + maxY - y;
+              a = -a;
+            }
+            if (data.flop) {
+              x = minX + maxX - x;
+              a = normalizeAngle(180 - a);
+            }
+            result[name] = { ...info, x, y, a: normalizeAngle(a) };
+          });
+          return result;
+        },
+        [data.ports, data.flip, data.flop]
+      );
       const portHandles = useMemo(
-        () => buildPortHandles(data.ports, { rotation: data.rotation || 0, flip: Boolean(data.flip), flop: Boolean(data.flop), boxSize: componentSize }),
+        () => buildPortHandles(flippedPorts, { rotation: 0, boxSize: componentSize }),
         [data.ports, data.rotation, data.flip, data.flop, componentSize]
       );
       const portDirectionMap = useMemo(
@@ -1731,20 +1763,22 @@ Organization : OptiHK Limited
       const isAnchorElement = data.elementType === 'anchor';
       const isBasicCompactComponent = isBasicComponent(data.componentName) && ['waveguide', 'taper', '90 bend'].includes(data.componentName);
       const visualSize = isAnchorElement ? { width: PORT_NODE_SIZE, height: PORT_NODE_SIZE } : componentSize;
-      const componentVisualTransform = `rotate(${data.rotation || 0}deg) scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})`;
+      const componentVisualTransform = `rotate(${data.rotation || 0}deg)`;
+      const componentBodyTransform = `rotate(${data.rotation || 0}deg) scaleX(${data.flop ? -1 : 1}) scaleY(${data.flip ? -1 : 1})`;
       const iconSize = createComponentSymbolMetrics(componentSize);
       const portLabelStyle = (portHandle) => {
         const base = { ...portHandle.style };
+        const unrotate = `rotate(${-(data.rotation || 0)}deg)`;
         if (portHandle.position === 'left') {
-          return { ...base, left: 'auto', right: 'calc(100% + 8px)', transform: 'translateY(-50%)', textAlign: 'right' };
+          return { ...base, left: 'auto', right: 'calc(100% + 8px)', transform: `${unrotate} translateY(-50%)`, textAlign: 'right' };
         }
         if (portHandle.position === 'right') {
-          return { ...base, left: 'calc(100% + 8px)', right: 'auto', transform: 'translateY(-50%)', textAlign: 'left' };
+          return { ...base, left: 'calc(100% + 8px)', right: 'auto', transform: `${unrotate} translateY(-50%)`, textAlign: 'left' };
         }
         if (portHandle.position === 'top') {
-          return { ...base, top: 'auto', bottom: 'calc(100% + 8px)', transform: 'translateX(-50%)', textAlign: 'center' };
+          return { ...base, top: 'auto', bottom: 'calc(100% + 8px)', transform: `${unrotate} translateX(-50%)`, textAlign: 'center' };
         }
-        return { ...base, top: 'calc(100% + 8px)', bottom: 'auto', transform: 'translateX(-50%)', textAlign: 'center' };
+        return { ...base, top: 'calc(100% + 8px)', bottom: 'auto', transform: `${unrotate} translateX(-50%)`, textAlign: 'center' };
       };
 
       return (
@@ -1768,7 +1802,7 @@ Organization : OptiHK Limited
               ...(visualSize.height < 50 && !isAnchorElement ? { padding: '2px 4px' } : {}),
               border: selected ? '2px solid var(--accent)' : '1px solid var(--border)',
               boxShadow: selected ? '0 0 15px rgba(56, 189, 248, 0.2)' : '0 4px 6px rgba(0,0,0,0.3)',
-              transform: componentVisualTransform,
+              transform: componentBodyTransform,
               transformOrigin: 'center center',
                 ...(isBasicCompactComponent ? {
                   padding: 0,
@@ -1806,6 +1840,8 @@ Organization : OptiHK Limited
             top: 0, left: 0,
             width: componentSize.width,
             height: visualSize.height,
+            transform: componentVisualTransform,
+            transformOrigin: 'center center',
             pointerEvents: 'none'
           }}>
             {portHandles.map((portHandle) => (
@@ -1826,16 +1862,13 @@ Organization : OptiHK Limited
                 />
               </React.Fragment>
             ))}
-          </div>
-
             {portHandles.map((portHandle) => (
-            <React.Fragment key={`label-${portHandle.name}`}>
-              <span className="port-name-label" style={portLabelStyle(portHandle)} title={portHandle.name}>
+              <span key={`label-${portHandle.name}`} className="port-name-label" style={portLabelStyle(portHandle)} title={portHandle.name}>
                 {portHandle.name}
               </span>
-            </React.Fragment>
             ))}
           </div>
+        </div>
       );
     }, (prevProps, nextProps) => {
       return (