routing for canvase level object is finished.

frontend/canvas-helpers.js

@@ -446,7 +446,8 @@
     const vertical = side === 'left' || side === 'right';
 
     return ports.map((port, index) => {
-      const percent = fallbackPercent(index, ports.length);
+      const explicitPercent = Number(port.info && port.info.handlePercent);
+      const percent = Number.isFinite(explicitPercent) ? explicitPercent : fallbackPercent(index, ports.length);
       const percentValue = `${percent}%`;
       const style = vertical
         ? { top: percentValue, transform: side === 'left' ? 'translate(-50%, -50%)' : 'translate(50%, -50%)' }
@@ -587,6 +588,24 @@
   // Calculate the centered offset for one repeated port index.
   const elementPortOffset = (index, count, pitch) => ((count - 1) / 2 - index) * pitch;
 
+  // Keep Basic line-like components at twice the 10 px canvas port-circle size.
+  const BASIC_LINE_COMPONENT_HEIGHT = 20;
+
+  // Keep Basic line-like components visually slim with a stable canvas hit area.
+  const basicLineComponentHeight = () => BASIC_LINE_COMPONENT_HEIGHT;
+
+  // Keep bend components readable by using the radius-25 footprint as the
+  // minimum canvas size, while still allowing larger radii to grow.
+  const BASIC_BEND_MIN_CANVAS_RADIUS = 25;
+
+  // Normalize bend radius into a positive canvas footprint dimension.
+  const basicBendRadiusSize = (radius) => {
+    const numericRadius = Number(radius || 0);
+    return Number.isFinite(numericRadius) && numericRadius > 0
+      ? Math.max(BASIC_BEND_MIN_CANVAS_RADIUS, numericRadius)
+      : BASIC_BEND_MIN_CANVAS_RADIUS;
+  };
+
   // Grow port and anchor visual bodies so repeated port circles do not overlap.
   const buildElementBoxSize = (data) => {
     const portNumber = normalizePortNumber(data && data.portNumber);
@@ -643,6 +662,7 @@
     const values = createBasicSettings(componentName, settings);
     const length = Number(values.length || 0);
     const radius = Number(values.radius || 10);
+    const bendSize = basicBendRadiusSize(radius);
     const width = Number(values.width ?? values.width1 ?? 0.5);
     const xsection = values.xsection || values.xs || 'strip';
     if (componentName === 'waveguide') {
@@ -653,14 +673,14 @@
     }
     if (componentName === '90 bend') {
       return {
-        a1: { x: 0, y: 0, a: 180, width, xsection, description: 'Optical power input' },
-        b1: { x: radius, y: radius, a: 90, width, xsection, description: 'Optical power output' }
+        a1: { x: 0, y: bendSize / 2, a: 180, width, xsection, description: 'Optical power input' },
+        b1: { x: bendSize / 2, y: 0, a: 90, width, xsection, description: 'Optical power output' }
       };
     }
     if (componentName === '180 bend') {
       return {
         a1: { x: 0, y: 0, a: 180, width, xsection, description: 'Optical power input' },
-        b1: { x: 0, y: 2 * radius, a: 180, width, xsection, description: 'Optical power output' }
+        b1: { x: 0, y: 2 * bendSize, a: 180, width, xsection, description: 'Optical power output' }
       };
     }
     if (componentName === 'cricle' || componentName === 'circle') {
@@ -686,13 +706,14 @@
     const radius = Number(values.radius || 10);
     const width = Number(values.width ?? values.width1 ?? 0.5);
     const width2 = Number(values.width2 ?? width);
+    const bendSize = basicBendRadiusSize(radius);
     const boxSize = componentName === 'waveguide'
-      ? [Math.max(length, 10), Math.max(width * 4, 4)]
+      ? [Math.max(length, 10), basicLineComponentHeight(width)]
       : componentName === 'taper'
-        ? [Math.max(length, 10), Math.max(width, width2) * 10 + 18]
+        ? [Math.max(length, 10), basicLineComponentHeight(width, width2)]
         : componentName === '180 bend'
-          ? [radius, radius * 2]
-          : [radius, radius];
+          ? [bendSize, bendSize * 2]
+          : [bendSize, bendSize];
     return {
       name: componentName,
       foundry: 'mxpic',
@@ -703,6 +724,10 @@
     };
   };
 
+  // Flip an internal standalone Port angle into the outward-facing cell port
+  // angle used when this canvas is placed as a component elsewhere.
+  const externalPortAngle = (angle) => normalizeAngle(Number(angle ?? 0) + 180);
+
   // Convert standalone port nodes into page-level layout ports.
   const buildPageComponentPorts = (port, nodes) => {
     const portNodes = (nodes || []).filter(isPortElementNode);
@@ -723,7 +748,7 @@
           ports[exportName] = {
             x: Number(point.x || 0),
             y: Number(point.y || 0),
-            a: Number(portInfo.a ?? data.angle ?? data.a ?? 0),
+            a: externalPortAngle(portInfo.a ?? data.angle ?? data.a ?? 0),
             width: Number(portInfo.width || data.width || 0.5)
           };
         });
@@ -735,7 +760,7 @@
       port: {
         x: Number(port.x || 0),
         y: Number(port.y || 0),
-        a: Number(port.a || 0),
+        a: externalPortAngle(port.a || 0),
         width: Number(port.width || 0.5)
       }
     };