- {!data.hideIcon && data.category && (
-
-
- )}
-
-
- {data.componentDisplayName}
-
+
+
+ {data.componentDisplayName}
{data.componentName && data.componentName !== data.componentDisplayName && (
-
@@ -1193,6 +1690,9 @@
prevProps.data.componentName === nextProps.data.componentName &&
prevProps.data.category === nextProps.data.category &&
prevProps.data.rotation === nextProps.data.rotation &&
+ prevProps.data.flip === nextProps.data.flip &&
+ prevProps.data.flop === nextProps.data.flop &&
+ prevProps.data.boxSize === nextProps.data.boxSize &&
prevProps.data.hideIcon === nextProps.data.hideIcon &&
prevProps.data.ports === nextProps.data.ports
);
@@ -1206,7 +1706,7 @@
const handleId = data.portName || data.componentDisplayName || 'port';
return (
- {data.componentName}
+ {data.componentName}
+ )}
+
+
+ {isAnchorElement ? (
+ A
+ ) : (
+
@@ -1181,6 +1675,9 @@
title={portHandle.name}
style={{ ...baseHandleStyle, ...portHandle.style, zIndex: 5 }}
/>
+
+ {portHandle.name}
+
))}
+ {!data.hideIcon && data.category && (
+
)}
+
+ )}
+ {!data.category && }
{
+ const updateNodeInternals = useUpdateNodeInternals();
+ const ports = data.ports || buildElementPorts('anchor');
+ const portHandles = useMemo(
+ () => buildPortHandles(ports, { rotation: data.rotation || 0, flip: Boolean(data.flip), flop: Boolean(data.flop) }),
+ [ports, data.rotation, data.flip, data.flop]
+ );
+ const handlePositionMap = {
+ left: Position.Left,
+ right: Position.Right,
+ top: Position.Top,
+ bottom: Position.Bottom
+ };
+ const baseHandleStyle = {
+ width: 8,
+ height: 8,
+ background: 'var(--accent)',
+ border: '1px solid var(--bg-main)',
+ borderRadius: '50%'
+ };
+
+ useEffect(() => {
+ updateNodeInternals(id);
+ }, [id, data.ports, data.rotation, data.flip, data.flop, updateNodeInternals]);
+
+ return (
+
+
+ );
+ });
+
const LayoutSvgPreview = ({ page }) => {
const [layoutScale, setLayoutScale] = useState(100);
+ const previewBounds = useMemo(
+ () => page.layoutBounds || calculateLayoutBounds(page),
+ [page.layoutBounds, page.nodes, page.canvasSize]
+ );
const normalizedScale = Math.min(800, Math.max(10, Number(layoutScale) || 100));
+ const stageWidth = Math.max(1, previewBounds.width) * normalizedScale / 100;
+ const stageHeight = Math.max(1, previewBounds.height) * normalizedScale / 100;
const updateScale = (value) => {
setLayoutScale(Math.min(800, Math.max(10, Number(value) || 100)));
};
+ const handleWheel = (event) => {
+ event.preventDefault();
+ const direction = event.deltaY > 0 ? -1 : 1;
+ const step = event.shiftKey ? 5 : 15;
+ setLayoutScale(current => Math.min(800, Math.max(10, (Number(current) || 100) + direction * step)));
+ };
+
return (
+ A
+ {portHandles.map((portHandle) => (
+
+
+ ))}
+
+ );
+ });
+
+ const CanvasBoundaryNode = memo(({ data }) => (
+
+ ));
+
+ const RulerPointNode = memo(({ data }) => {
+ const hiddenHandleStyle = {
+ width: 1,
+ height: 1,
+ opacity: 0,
+ border: 0,
+ background: 'transparent',
+ pointerEvents: 'none'
+ };
+ return (
+ <>
+
+
+ {data.label}
+
+ ));
+
+ const ParallelRouteEdge = memo(({ id, sourceX, sourceY, targetX, targetY, markerEnd, style, selected, data }) => {
+ const offset = Number(data?.parallelOffset || 0);
+ let rawPoints = Array.isArray(data?.points) && data.points.length >= 2
+ ? data.points.map(point => ({ x: Number(point.x), y: Number(point.y) })).filter(point => Number.isFinite(point.x) && Number.isFinite(point.y))
+ : [{ x: sourceX, y: sourceY }, { x: targetX, y: targetY }];
+ if (!data?.freeRoute && rawPoints.length >= 2) {
+ const sourcePoint = data?.sourceSnap?.point || { x: sourceX, y: sourceY };
+ const targetPoint = data?.targetSnap?.point || { x: targetX, y: targetY };
+ rawPoints = [
+ { x: Number(sourcePoint.x), y: Number(sourcePoint.y) },
+ ...rawPoints.slice(1, -1),
+ { x: Number(targetPoint.x), y: Number(targetPoint.y) }
+ ];
+ }
+ const firstPoint = rawPoints[0] || { x: sourceX, y: sourceY };
+ const lastPoint = rawPoints[rawPoints.length - 1] || { x: targetX, y: targetY };
+ const dx = lastPoint.x - firstPoint.x;
+ const dy = lastPoint.y - firstPoint.y;
+ const length = Math.hypot(dx, dy) || 1;
+ const normalX = -dy / length;
+ const normalY = dx / length;
+ const points = rawPoints.map(point => ({
+ x: point.x + normalX * offset,
+ y: point.y + normalY * offset
+ }));
+ const path = points.length >= 2
+ ? `M ${points[0].x},${points[0].y} ${points.slice(1).map(point => `L ${point.x},${point.y}`).join(' ')}`
+ : `M ${sourceX},${sourceY} Q ${(sourceX + targetX) / 2 + normalX * offset},${(sourceY + targetY) / 2 + normalY * offset} ${targetX},${targetY}`;
+ const routeStyle = {
+ ...(style || {}),
+ fill: 'none',
+ strokeWidth: selected ? Number(style?.strokeWidth || 2.4) + 1.2 : style?.strokeWidth
+ };
+ return (
+
@@ -1258,11 +1921,11 @@
%
-
+
![]()
{
+ if (isBasicElement) {
+ const dragData = JSON.stringify({
+ name: componentName,
+ type: 'basic',
+ componentName,
+ settings: createBasicSettings(componentName)
+ });
+ event.dataTransfer.setData('application/reactflow', dragData);
+ event.dataTransfer.setData('text/plain', dragData);
+ event.dataTransfer.effectAllowed = 'move';
+ return;
+ }
if (isVirtualElement) {
const dragData = JSON.stringify({
name: componentName,
@@ -1456,20 +2134,20 @@
return (
- {isVirtualElement && (
+ {(isVirtualElement || isBasicElement) && (
)}
- {!isUserCell && !isVirtualElement && (
+ {!isUserCell && !isVirtualElement && !isBasicElement && (
+ {entries.map(([childName, childData]) => (
+
+ ) : isCategoryGrid && !isElementComponentGrid ? (
{entries.map(([childName, childData]) => (
Project Tree
+
@@ -1729,6 +2420,29 @@
+
-
+
{projectTreeItems && projectTreeItems.length > 0 ? (
projectTreeItems.map(item => {
if (item.type === 'project') {
@@ -1772,7 +2486,7 @@
);
};
- const RightPanel = ({ selectedNode, selectedEdge, technologyManifest, width, onRenameComponent, onUpdateNode, onUpdateEdgeRoute }) => {
+ const RightPanel = ({ selectedNode, selectedNodes = [], selectedEdge, selectedEdges = [], technologyManifest, projectName, width, onRenameComponent, onUpdateNode, onUpdateEdgeRoute }) => {
const [componentData, setComponentData] = useState(null);
const [loading, setLoading] = useState(false);
const [enlarged, setEnlarged] = useState(null);
@@ -1790,7 +2504,7 @@
return;
}
const compName = selectedNode?.data?.componentName;
- if (selectedNode?.data?.elementType) {
+ if (selectedNode?.data?.elementType || isBasicComponent(compName)) {
setComponentData(null);
setLoading(false);
return;
@@ -1808,13 +2522,14 @@
if (componentData && componentData.name === compName && componentData.nodeId === nodeId) return;
setLoading(true);
- fetch(`/api/component/${encodeURIComponent(compName)}`)
+ fetch(`/api/component/${encodeURIComponent(compName)}?project=${encodeURIComponent(projectName || '')}`)
.then(r => r.json())
.then(data => {
setComponentData({ ...data, nodeId: nodeId, componentDisplayName: selectedNode.data.componentDisplayName || data.name });
onUpdateNode(nodeId, {
data: {
ports: data.ports || {},
+ boxSize: normalizeBoxSize(data),
foundry: data.foundry || '',
process: data.process || ''
}
@@ -1822,7 +2537,7 @@
setLoading(false);
})
.catch(() => setLoading(false));
- }, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName, onUpdateNode]);
+ }, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName, projectName, onUpdateNode]);
useEffect(() => {
if (selectedNode) {
@@ -1835,11 +2550,25 @@
}
}, [selectedNode?.position.x, selectedNode?.position.y, selectedNode?.data?.rotation, selectedNode?.data?.angle, selectedNode?.id]);
+ const selectedPositionNodes = useMemo(
+ () => (selectedNodes.length > 0 ? selectedNodes : (selectedNode ? [selectedNode] : [])).filter(node => node && node.position),
+ [selectedNodes, selectedNode]
+ );
+
const updatePosition = useCallback((id, axis, value) => {
const val = parseFloat(value);
if (isNaN(val)) return;
+ if (selectedPositionNodes.length > 1 && selectedPositionNodes.some(node => node.id === id)) {
+ const baseNode = selectedPositionNodes.find(node => node.id === id) || selectedPositionNodes[0];
+ const delta = val - Number((baseNode.position && baseNode.position[axis]) || 0);
+ selectedPositionNodes.forEach(node => {
+ const currentValue = Number((node.position && node.position[axis]) || 0);
+ onUpdateNode(node.id, { position: { [axis]: currentValue + delta } });
+ });
+ return;
+ }
onUpdateNode(id, { position: { [axis]: val } });
- }, [onUpdateNode]);
+ }, [onUpdateNode, selectedPositionNodes]);
const updateRotation = useCallback((id, value, isPortNode = false) => {
const val = parseFloat(value);
@@ -1849,9 +2578,15 @@
onUpdateNode(id, { data: dataField });
}, [onUpdateNode]);
+ const toggleComponentTransform = useCallback((key) => {
+ if (!selectedNode) return;
+ onUpdateNode(selectedNode.id, { data: { [key]: !Boolean(selectedNode.data?.[key]) } });
+ }, [onUpdateNode, selectedNode]);
+
const formatPort = (port) => {
if (!port) return '-';
- return `x:${port.x ?? '?'}, y:${port.y ?? '?'}, a:${port.a ?? '?'}, w:${port.width ?? '?'}`;
+ const description = port.description ? ` ${port.description}` : '';
+ return `(${port.x ?? '?'}, ${port.y ?? '?'}, ${port.a ?? '?'})${description}`;
};
const currentComponentDisplayName = selectedNode?.data?.componentDisplayName || '';
@@ -1863,12 +2598,30 @@
const selectedIsVirtualElement = selectedNode?.data?.elementType === 'port' || selectedNode?.data?.elementType === 'anchor';
const canChooseComponent = !selectedIsVirtualElement && availableComponentsFromNode.length > 0;
const forgeSelected = isForgeComponent(selectedComponentName);
+ const basicSelected = isBasicComponent(selectedComponentName);
+ const basicMetadata = basicSelected ? getBasicComponentMetadata(selectedComponentName, selectedNode?.data?.basicArguments) : null;
+ const basicArguments = basicSelected ? createBasicSettings(selectedComponentName, selectedNode?.data?.basicArguments) : {};
const forgeArguments = createForgeArguments(selectedNode?.data?.forgeArguments);
const selectedIsPort = selectedNode && (selectedNode.type === 'portNode' || selectedNode.data?.elementType === 'port');
const selectedIsAnchor = selectedNode?.data?.elementType === 'anchor';
+ const selectedNodeBoxSize = selectedNode?.data?.componentName && !selectedNode?.data?.elementType
+ ? normalizeBoxSize({ box_size: selectedNode.data?.boxSize }, DEFAULT_COMPONENT_BOX_SIZE)
+ : null;
- if (selectedEdge) {
- const route = createRouteSettings(technologyManifest, selectedEdge.data?.route);
+ const selectedRouteEdges = selectedEdges.length > 0 ? selectedEdges : (selectedEdge ? [selectedEdge] : []);
+ if (selectedRouteEdges.length > 0) {
+ const routes = selectedRouteEdges.map(edge => createRouteSettings(technologyManifest, edge.data?.route));
+ const selectedEdgeIds = selectedRouteEdges.map(edge => edge.id);
+ const firstRoute = routes[0];
+ const mixedValue = (key) => routes.every(route => String(route[key]) === String(firstRoute[key])) ? firstRoute[key] : '__mixed__';
+ const route = {
+ ...firstRoute,
+ xsection: mixedValue('xsection'),
+ family: mixedValue('family'),
+ width: mixedValue('width'),
+ radius: mixedValue('radius'),
+ routing_type: mixedValue('routing_type')
+ };
const xsections = Object.keys((technologyManifest || FALLBACK_TECHNOLOGY_MANIFEST).xsections || {});
const routingTypes = (technologyManifest || FALLBACK_TECHNOLOGY_MANIFEST).routing_types || ['euler_bend', 'standard_bend'];
return (
@@ -1881,13 +2634,14 @@
Canvas Size
+
+
+ onCanvasSizeChange && onCanvasSizeChange('width', event.target.value)}
+ />
+
+
+
+ onCanvasSizeChange && onCanvasSizeChange('height', event.target.value)}
+ />
+
+ Route Editor
- {route.family} / {route.xsection}
+ {selectedRouteEdges.length} selected / {route.family === '__mixed__' ? '--' : route.family}
- childData.__element__ === true);'),
- 'Elements folder should bypass category-card grouping and render separate virtual component leaves'
+ canvasHtml.includes('isDirectLeafGrid') &&
+ canvasHtml.includes('childData.__cell__ === true || childData.__element__ === true || childData.__basic__ === true') &&
+ canvasHtml.includes('
- Snap to Grid
+
)}
@@ -4083,8 +5605,11 @@ ${bundlesBlock}`;
+
+ {buildProgress.active && (
+
+ Snap to Grid
+
+
-
- + Link + + {currentLinkXsection} + +
+
+ {linkXsectionChoices.map(xsection => {
+ const route = createRouteSettings(technologyManifest, { xsection });
+ const color = routeStyleForSettings(route, false).style.stroke;
+ return (
+
+ );
+ })}
+
+
+
+ )}
+
+ {rulerMode && activePage?.type !== 'layoutPreview' && (
+
+ {buildProgress.label}
+ {Math.round(buildProgress.value)}%
+
+
+
+
+
+ {rulerMeasurement
+ ? rulerMeasurement.label
+ : (rulerStartPoint && !rulerEndPoint ? 'Move mouse, click second point' : 'Click the first point')}
+
+ )}
+
{activePage && activePage.type !== 'layoutPreview' && (
)}
@@ -4052,24 +5556,42 @@ ${bundlesBlock}`;
'),
+ 'Cells and Basic folders should bypass category grouping and render direct draggable leaves in a 2D grid'
);
assert(
canvasHtml.includes('element-card-icon port-icon') && canvasHtml.includes('element-card-icon anchor-icon'),
@@ -46,7 +50,7 @@ assert(
'virtual elements should not show PDK or generate_with_forge component selection'
);
assert(
- canvasHtml.includes('buildElementsYaml(activePage.nodes)'),
+ canvasHtml.includes('buildElementsYaml(page.nodes)'),
'canvas layout export should include an elements section'
);
assert(
diff --git a/tests/canvas-helpers.test.js b/tests/canvas-helpers.test.js
index d5ced1e..dba05d7 100644
--- a/tests/canvas-helpers.test.js
+++ b/tests/canvas-helpers.test.js
@@ -21,9 +21,169 @@ assert.strictEqual(handles.find(handle => handle.name === 'a1').style.top, '15%'
assert.strictEqual(handles.find(handle => handle.name === 'a2').style.top, '85%');
assert.strictEqual(handles.find(handle => handle.name === 'ep2b').style.left, '50%');
+const uniformLeftHandles = helpers.buildPortHandles({
+ p_top: { x: -10, y: 300, a: 180 },
+ p_mid: { x: -10, y: 20, a: 180 },
+ p_bottom: { x: -10, y: -5, a: 180 },
+});
+assert.deepStrictEqual(
+ uniformLeftHandles.map(handle => handle.style.top),
+ ['15%', '50%', '85%'],
+ 'ports on the same side should be uniformly spaced after sorting'
+);
+
+assert.deepStrictEqual(
+ helpers.normalizeBoxSize({ box_size: [946, 75] }),
+ { width: 946, height: 75 },
+ 'component box size should load from YAML box_size arrays'
+);
+assert.deepStrictEqual(
+ helpers.normalizeBoxSize({ box_size: ['946.0', '75.0'] }),
+ { width: 946, height: 75 },
+ 'component box size should accept numeric strings from YAML/JSON metadata'
+);
+assert.deepStrictEqual(
+ helpers.normalizeBoxSize({ box_sz: { width: 1200, height: 85 } }),
+ { width: 1200, height: 85 },
+ 'component box size should also accept box_sz objects'
+);
+assert.strictEqual(
+ helpers.PORT_NODE_SIZE,
+ 30,
+ 'Port and Anchor virtual elements should use the same 30 um canvas footprint'
+);
+assert.deepStrictEqual(
+ helpers.calculateLayoutBounds({
+ nodes: [{
+ position: { x: 100, y: 200 },
+ data: { componentName: 'rotated_component', boxSize: { width: 50, height: 20 }, rotation: 90 }
+ }]
+ }),
+ {
+ minX: 80,
+ minY: 200,
+ maxX: 100,
+ maxY: 250,
+ width: 20,
+ height: 50,
+ bottomLeft: { x: 80, y: 200 },
+ topRight: { x: 100, y: 250 }
+ },
+ 'layout preview bounds should use component box_size and rotation to find device corners'
+);
+assert.strictEqual(
+ helpers.chooseCategoryComponent('generate with mxpic_forge', [
+ 'generate with mxpic_forge',
+ 'EC_SiN400_1310_0p5dB_L935_A0_QY_202604'
+ ], 'edge_couplers'),
+ 'EC_SiN400_1310_0p5dB_L935_A0_QY_202604',
+ 'dropping an EC category should prefer the real PDK component so its YAML box_size is loaded'
+);
+assert.deepStrictEqual(
+ helpers.clampPositionToCanvas({ x: 4990, y: 5010 }, { width: 5000, height: 5000 }, { width: 946, height: 75 }),
+ { x: 4054, y: 4925 },
+ 'component drag position should keep the full component box inside the canvas boundary'
+);
+const rulerMeasurement = helpers.createRulerMeasurement({ x: 10, y: 20 }, { x: 40, y: 60 });
+assert.deepStrictEqual(
+ rulerMeasurement,
+ {
+ start: { x: 10, y: 20 },
+ end: { x: 40, y: 60 },
+ dx: 30,
+ dy: 40,
+ distance: 50,
+ midpoint: { x: 25, y: 40 },
+ label: '50.000 um dx 30.000 dy 40.000'
+ },
+ 'ruler measurement should calculate point-to-point distance in canvas um coordinates'
+);
+assert.strictEqual(
+ helpers.createRulerMeasurement({ x: 1 }, null),
+ null,
+ 'ruler measurement should wait until both points are available'
+);
+assert.deepStrictEqual(
+ helpers.createComponentSymbolMetrics({ width: 946, height: 75 }),
+ { width: 898.7, height: 51 },
+ 'large edge-coupler symbols should scale close to the YAML box width instead of being capped near 300 um'
+);
+assert.deepStrictEqual(
+ helpers.createComponentSymbolMetrics({ width: 132, height: 82 }),
+ { width: 118.8, height: 55.76 },
+ 'default symbols should still scale proportionally inside normal component boxes'
+);
+
+const rotatedHandles = helpers.buildPortHandles({
+ left_port: { x: -50, y: 0, a: 180 },
+ top_port: { x: 0, y: 20, a: 90 },
+}, { rotation: 180 });
+assert.strictEqual(
+ rotatedHandles.find(handle => handle.name === 'left_port').position,
+ 'right',
+ 'rotating a component should rotate the React Flow handle side'
+);
+assert.strictEqual(
+ rotatedHandles.find(handle => handle.name === 'top_port').position,
+ 'bottom',
+ 'rotating a component should rotate vertical port handle sides'
+);
+
const args = helpers.createForgeArguments();
assert(Object.keys(args).length >= 10);
assert.strictEqual(helpers.isForgeComponent('generate with mxpic_forge'), true);
+assert.strictEqual(helpers.isBasicComponent('waveguide'), true);
+assert.strictEqual(helpers.isBasicComponent('circle'), true);
+assert.strictEqual(helpers.isBasicComponent('cricle'), true);
+assert.strictEqual(
+ helpers.buildElementPorts('port').port.a,
+ 0,
+ 'Port objects should default to 0 degree angle'
+);
+assert.deepStrictEqual(
+ {
+ left: helpers.buildElementPorts('anchor').left.a,
+ right: helpers.buildElementPorts('anchor').right.a,
+ },
+ { left: 180, right: 0 },
+ 'Anchor objects should default to 180 degree left port and 0 degree right port'
+);
+assert.deepStrictEqual(
+ {
+ left: helpers.buildElementPorts('anchor').left,
+ right: helpers.buildElementPorts('anchor').right,
+ },
+ {
+ left: { x: 0, y: -15, a: 180, width: 0.5 },
+ right: { x: 30, y: -15, a: 0, width: 0.5 }
+ },
+ 'Anchor ports should sit on the left and right edges of a port-sized circle'
+);
+assert.deepStrictEqual(
+ helpers.buildBasicComponentPorts('waveguide', { length: 120, width: 0.6 }).b1,
+ { x: 120, y: 0, a: 0, width: 0.6, xsection: 'strip', description: 'Optical power output' },
+ 'basic waveguide ports should be generated from editable settings'
+);
+assert.deepStrictEqual(
+ helpers.getBasicComponentMetadata('waveguide', { length: 120, width: 0.5 }).box_size,
+ [120, 4],
+ 'basic waveguide symbol should use a narrow default height'
+);
+assert.deepStrictEqual(
+ helpers.getBasicComponentMetadata('90 bend', { radius: 15 }).box_size,
+ [15, 15],
+ '90 bend symbol should be square with side length equal to radius'
+);
+assert.deepStrictEqual(
+ helpers.getBasicComponentMetadata('180 bend', { radius: 15 }).box_size,
+ [15, 30],
+ '180 bend symbol should be one radius wide and two radii tall'
+);
+assert.deepStrictEqual(
+ helpers.getBasicComponentMetadata('taper', { length: 80, width1: 0.4, width2: 1.2 }).ports.a1.description,
+ 'Optical power input',
+ 'basic component metadata should include human-readable port descriptions'
+);
const yaml = helpers.buildInstanceYaml({
instanceName: 'component_1',
@@ -31,14 +191,32 @@ const yaml = helpers.buildInstanceYaml({
componentPath: 'ignored/path',
position: { x: 12.34, y: -5 },
rotation: 90,
+ flip: true,
+ flop: true,
forgeArguments: { function_name: 'mmi1x2', length: 25.5, include_heater: true }
});
assert(yaml.includes('component: generate_with_forge'));
+assert(yaml.includes('flip: 1'));
+assert(yaml.includes('flop: 1'));
assert(yaml.includes('function_name: "mmi1x2"'));
assert(yaml.includes('length: 25.5'));
assert(yaml.includes('include_heater: true'));
+const basicYaml = helpers.buildInstanceYaml({
+ instanceName: 'wg_1',
+ componentName: 'waveguide',
+ componentPath: 'ignored',
+ position: { x: 0, y: 0 },
+ rotation: 0,
+ flip: false,
+ flop: false,
+ basicArguments: { length: 88, width: 0.7, xsection: 'strip' }
+});
+assert(basicYaml.includes('component: waveguide'));
+assert(basicYaml.includes('length: 88'));
+assert(basicYaml.includes('width: 0.7'));
+
const projectInstancesYaml = helpers.buildInstancesYaml({
nodes: [
{
@@ -74,7 +252,7 @@ assert(projectInstancesYaml.includes('component: canvas_1'));
const pagePortsYaml = helpers.buildPortsYaml({ x: 50, y: 150, a: 90 });
assert(pagePortsYaml.includes('- name: port'));
assert(pagePortsYaml.includes('x: 50.0'));
-assert(pagePortsYaml.includes('y: 150.0'));
+assert(pagePortsYaml.includes('y: -150.0'));
assert(pagePortsYaml.includes('angle: 90.0'));
const componentPorts = helpers.buildPageComponentPorts({ x: 12, y: -6, a: 180 });
@@ -128,12 +306,14 @@ const canvasPortsYaml = helpers.buildCanvasPortsYaml(elementNodes);
assert(canvasPortsYaml.includes('name: in0'));
assert(canvasPortsYaml.includes('description: "input port"'));
assert(canvasPortsYaml.includes('width: 0.7'));
+assert(canvasPortsYaml.includes('y: -20.0'));
const elementsYaml = helpers.buildElementsYaml(elementNodes);
assert(elementsYaml.includes('in0:'));
assert(elementsYaml.includes('type: port'));
assert(elementsYaml.includes('anchor_1:'));
assert(elementsYaml.includes('type: anchor'));
+assert(elementsYaml.includes('y: -20.0'));
const instancesWithoutElements = helpers.buildInstancesYaml({
nodes: elementNodes,
@@ -142,6 +322,7 @@ const instancesWithoutElements = helpers.buildInstancesYaml({
assert(!instancesWithoutElements.includes('anchor_1:'));
assert(!instancesWithoutElements.includes('in0:'));
assert(instancesWithoutElements.includes('component_1:'));
+assert(instancesWithoutElements.includes('y: -60.0'));
const multiPortComponentPorts = helpers.buildPageComponentPorts(null, elementNodes);
assert.deepStrictEqual(multiPortComponentPorts.in0, { x: 10, y: 20, a: 180, width: 0.7 });
@@ -193,13 +374,80 @@ const routeYaml = helpers.buildBundlesYaml({
target: 'b',
sourceHandle: 'out',
targetHandle: 'in',
- data: { route: { xsection: 'metal_1', family: 'electrical', width: 5, radius: 20, routing_type: 'standard_bend' } }
+ data: {
+ route: { xsection: 'metal_1', family: 'electrical', width: 5, radius: 20, routing_type: 'standard_bend' },
+ points: [{ x: 0, y: 0 }, { x: 40, y: 20 }]
+ }
}]
}, technologyManifest);
assert(routeYaml.includes('xsection: metal_1'));
assert(routeYaml.includes('family: electrical'));
assert(routeYaml.includes('radius: 20'));
assert(routeYaml.includes('routing_type: standard_bend'));
+assert(routeYaml.includes('points:'));
+assert(routeYaml.includes('x: 40.0'));
+assert(routeYaml.includes('y: -20.0'));
+
+const anchoredRouteYaml = helpers.buildBundlesYaml({
+ nodes: [
+ {
+ id: 'src-node',
+ type: 'rotatableNode',
+ position: { x: 10, y: 20 },
+ data: {
+ componentDisplayName: 'src_inst',
+ boxSize: [100, 40],
+ ports: { out: { x: -10, y: 0, a: 180 } }
+ }
+ },
+ {
+ id: 'dst-node',
+ type: 'rotatableNode',
+ position: { x: 120, y: 20 },
+ data: {
+ componentDisplayName: 'dst_inst',
+ boxSize: [100, 40],
+ ports: { in: { x: 10, y: 0, a: 0 } }
+ }
+ }
+ ],
+ edges: [{
+ id: 'edge-src-dst',
+ source: 'src-node',
+ target: 'dst-node',
+ sourceHandle: 'out',
+ targetHandle: 'in',
+ data: {
+ route: { xsection: 'strip', family: 'optical', width: 0.45, radius: 10, routing_type: 'euler_bend' },
+ points: [{ x: 0, y: 0 }, { x: 80, y: 0 }, { x: 80, y: 60 }]
+ }
+ }]
+}, technologyManifest);
+assert(anchoredRouteYaml.includes('from: src_inst:out'));
+assert(anchoredRouteYaml.includes('to: dst_inst:in'));
+assert(anchoredRouteYaml.includes('x: 0.0'));
+assert(anchoredRouteYaml.includes('y: -20.0'));
+assert(anchoredRouteYaml.includes('x: 130.0'));
+
+const freeRouteYaml = helpers.buildBundlesYaml({
+ nodes: [],
+ edges: [{
+ id: 'route-free-1',
+ source: '__free_route_route-free-1_start__',
+ target: '__free_route_route-free-1_end__',
+ data: {
+ freeRoute: true,
+ route: { xsection: 'strip', family: 'optical', width: 0.45, radius: 10, routing_type: 'euler_bend' },
+ points: [{ x: 10, y: 20 }, { x: 80, y: 20 }, { x: 80, y: 120 }]
+ }
+ }]
+}, technologyManifest);
+assert(freeRouteYaml.includes('id: "route-free-1"'));
+assert(!freeRouteYaml.includes('from:'));
+assert(!freeRouteYaml.includes('to:'));
+assert(freeRouteYaml.includes('points:'));
+assert(freeRouteYaml.includes('x: 80.0'));
+assert(freeRouteYaml.includes('y: -120.0'));
const edgeA = {
id: 'edge-a-b',
@@ -227,5 +475,16 @@ const crossingNodes = {
e: { position: { x: 0, y: 100 } },
f: { position: { x: 100, y: 0 } }
};
+edgeA.data.route.xsection = 'strip';
+edgeB.data.route.xsection = 'strip';
+edgeC.data.route.xsection = 'metal_1';
+const edgeD = {
+ id: 'edge-g-h',
+ source: 'e',
+ target: 'f',
+ data: { route: { xsection: 'rib_low', family: 'optical' } }
+};
+assert.strictEqual(helpers.findSameTypeRouteCrossing(edgeB, [edgeA], crossingNodes).conflictEdge.id, 'edge-a-b');
+assert.strictEqual(helpers.findSameTypeRouteCrossing(edgeC, [edgeA], crossingNodes), null);
+assert.strictEqual(helpers.findSameTypeRouteCrossing(edgeD, [edgeA], crossingNodes), null);
assert.strictEqual(helpers.findSameFamilyRouteCrossing(edgeB, [edgeA], crossingNodes).conflictEdge.id, 'edge-a-b');
-assert.strictEqual(helpers.findSameFamilyRouteCrossing(edgeC, [edgeA], crossingNodes), null);
diff --git a/tests/layout-backend-static.test.js b/tests/layout-backend-static.test.js
index a898efa..f95c142 100644
--- a/tests/layout-backend-static.test.js
+++ b/tests/layout-backend-static.test.js
@@ -30,6 +30,12 @@ assert(
serverPy.includes('create_routed_layout_svg'),
'save-layout route should use routed preview generation when links exist'
);
+assert(
+ serverPy.includes('cell_routes_path') &&
+ serverPy.includes('write_route_points_sidecar') &&
+ serverPy.includes('.routes.yml'),
+ 'save-layout should write a sidecar route-points file for manually drawn link guidance'
+);
assert(
serverPy.includes('svg_url'),
'save-layout response should include an svg_url for the new layout tab'
@@ -78,3 +84,20 @@ assert(
gdsBuilderPy.includes('_cells_have_links') && gdsBuilderPy.includes('Routed Build GDS requires mxpic_router'),
'Build GDS should not silently fall back to unrouted gdstk when links are present'
);
+
+assert(
+ serverPy.includes('def scoped_pdk_root_for_project') &&
+ serverPy.includes('read_project_meta(project_name).get("technology")') &&
+ serverPy.includes('os.path.join(base_root, foundry, technology)'),
+ 'backend should resolve a project-scoped PDK root from selected foundry/technology'
+);
+assert(
+ serverPy.includes('request.args.get(\'project\')') &&
+ serverPy.includes('scoped_pdk_root_for_project(project)'),
+ 'library/component APIs should accept ?project= and search inside the selected technology folder'
+);
+assert(
+ serverPy.includes('__path__') &&
+ serverPy.includes('os.path.relpath(root, path_root)'),
+ 'library tree leaves should preserve component paths relative to the role PDK root'
+);
diff --git a/tests/layout-ui-wiring.test.js b/tests/layout-ui-wiring.test.js
index 2b6a8d0..c4b5b7a 100644
--- a/tests/layout-ui-wiring.test.js
+++ b/tests/layout-ui-wiring.test.js
@@ -4,11 +4,16 @@ const path = require('path');
const root = path.resolve(__dirname, '..');
const canvasHtml = fs.readFileSync(path.join(root, 'frontend', 'canvas.html'), 'utf8');
+const canvasHelpers = fs.readFileSync(path.join(root, 'frontend', 'canvas-helpers.js'), 'utf8');
assert(
canvasHtml.includes('Build GDS'),
'Project Tree header should include a Build GDS button'
);
+assert(
+ canvasHtml.includes('Save YAML for all canvases') && canvasHtml.includes('handleSaveProjectLayouts'),
+ 'Project Tree should include a save button that writes YAML for all canvases'
+);
assert(
canvasHtml.includes('/api/build-gds'),
'Build GDS button should call the backend build-gds API'
@@ -70,6 +75,280 @@ assert(
'route editor should offer standard_bend as a routing type'
);
assert(
- canvasHtml.includes('findSameFamilyRouteCrossing'),
- 'canvas should validate same-family route crossings'
+ canvasHtml.includes('findSameTypeRouteCrossing'),
+ 'canvas should validate same-xsection route crossings'
+);
+assert(
+ canvasHtml.includes('link-mode-tabs') &&
+ canvasHtml.includes('link-mode-summary') &&
+ canvasHtml.includes('link-mode-menu') &&
+ canvasHtml.includes('currentLinkXsection') &&
+ canvasHtml.includes('setCurrentLinkXsection') &&
+ canvasHtml.includes("['strip', 'rib_low', 'metal_1', 'metal_2']"),
+ 'canvas should expose a collapsed route-type selector for new links'
+);
+assert(
+ canvasHtml.includes('handleBasicConnection') &&
+ canvasHtml.includes('onConnect={handleBasicConnection}') &&
+ canvasHtml.includes('nodesConnectable={true}') &&
+ canvasHtml.includes('connectionMode="loose"') &&
+ canvasHtml.includes('data: { route }') &&
+ canvasHtml.includes('addEdge(candidate, p.edges)'),
+ 'canvas should use React Flow native pin-to-pin connections for new links'
+);
+assert(
+ !canvasHtml.includes('linkDraft') &&
+ !canvasHtml.includes('routingMode') &&
+ !canvasHtml.includes('toggleRoutingMode') &&
+ !canvasHtml.includes('handleLinkCanvasMouseDown') &&
+ !canvasHtml.includes('handleLinkCanvasMouseMove') &&
+ !canvasHtml.includes('finalizeLinkDraft') &&
+ !canvasHtml.includes('__link_draft_edge__') &&
+ !canvasHtml.includes('Routing mode: click anywhere to start a point route.'),
+ 'current interactive point-link drawing mode should be removed from the canvas'
+);
+assert(
+ canvasHtml.includes('= 2') &&
+ canvasHtml.includes('points.slice(1).map(point => `L ${point.x},${point.y}`)') &&
+ canvasHtml.includes('position: { x: first.x - 6, y: first.y - 6 }') &&
+ canvasHtml.includes('position: { x: last.x - 6, y: last.y - 6 }'),
+ 'free routes should render all saved point-to-point line segments and keep hidden endpoints aligned'
+);
+assert(
+ !canvasHtml.includes('buildOrthogonalPoints') &&
+ !canvasHtml.includes('buildManhattanRoutePoints') &&
+ !canvasHtml.includes('findNearestPort') &&
+ !canvasHtml.includes('linkPreviewSnapPort'),
+ 'custom link drawing geometry helpers should be deleted from the current canvas code'
+);
+const routePointNodeBlock = canvasHtml.slice(
+ canvasHtml.indexOf('const RulerPointNode'),
+ canvasHtml.indexOf('const RulerMeasurementNode')
+);
+assert(
+ routePointNodeBlock.includes(' 1') &&
+ canvasHtml.includes('const delta = val - Number') &&
+ canvasHtml.includes('selectedNodes={selectedNodes}'),
+ 'multi-selected components should move together when editing X or Y in the inspector'
+);
+assert(
+ canvasHtml.includes('portInfo.description') || canvasHtml.includes('port.description'),
+ 'port information should append optional human-readable port descriptions'
+);
+assert(
+ canvasHtml.includes('BASIC_COMPONENTS') &&
+ canvasHelpers.includes('BASIC_COMPONENTS') &&
+ canvasHelpers.includes('waveguide') &&
+ canvasHelpers.includes('90 bend') &&
+ canvasHelpers.includes('180 bend') &&
+ canvasHelpers.includes('circle') &&
+ canvasHelpers.includes('taper'),
+ 'component library should expose basic Nazca primitives'
+);
+assert(
+ canvasHtml.includes('Cells: cellEntries') &&
+ canvasHtml.includes('Basic: basicEntries') &&
+ canvasHtml.includes('PDK: library || {}'),
+ 'component library should keep top-level Cells, Basic, and PDK folders'
+);
+assert(
+ canvasHtml.includes('isDirectLeafGrid ? (') &&
+ canvasHtml.includes('
') &&
+ canvasHtml.includes("isUserCell ? 'compact-tree-card' : ''"),
+ 'Basic, Port, and Anchor entries should render as consistent 2D cards instead of compact list rows'
+);
+assert(
+ canvasHtml.includes('ParallelRouteEdge') &&
+ canvasHtml.includes('parallelOffset') &&
+ canvasHtml.includes("type: 'parallelRoute'") &&
+ canvasHtml.includes('edgeTypes={edgeTypes}'),
+ 'overlapped links should render with separated parallel edge paths'
+);
+assert(
+ canvasHtml.includes('data: { route, points: routePoints }') &&
+ canvasHtml.includes('normalizeRoutePoints(link.points'),
+ 'manual link route points should be stored on edges and restored from saved YAML'
+);
+assert(
+ canvasHtml.includes('createComponentSymbolMetrics') &&
+ !canvasHtml.includes('Math.min(128') &&
+ !canvasHtml.includes('Math.min(64'),
+ 'component icon/symbol dimensions should scale with component box size without old hard caps'
+);
+assert(
+ canvasHtml.includes('/api/library?project=') &&
+ canvasHtml.includes('/api/component/${encodeURIComponent(componentName)}?project=') &&
+ canvasHtml.includes('/api/component/${encodeURIComponent(compName)}?project='),
+ 'canvas should pass project context when loading library and component metadata'
+);
+assert(
+ canvasHtml.includes('/api/component/${encodeURIComponent(componentData.name)}/image?project=') &&
+ canvasHtml.includes('return obj.__path__.split'),
+ 'component images and saved component paths should use technology-scoped library metadata'
);
diff --git a/tests/project-load-static.test.js b/tests/project-load-static.test.js
new file mode 100644
index 0000000..7d764f3
--- /dev/null
+++ b/tests/project-load-static.test.js
@@ -0,0 +1,19 @@
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const canvasHtml = fs.readFileSync(path.join(root, 'frontend', 'canvas.html'), 'utf8');
+
+assert(
+ canvasHtml.includes('loadedProjectPage'),
+ 'project loading should reuse the saved project canvas instead of creating a duplicate empty project tab'
+);
+assert(
+ canvasHtml.includes('nonProjectPages'),
+ 'project composite map should exclude the saved project page itself'
+);
+assert(
+ canvasHtml.includes('layoutToCanvasY'),
+ 'loading saved layout YAML should convert GDS/layout Y coordinates back to canvas coordinates'
+);