Support NodePin bit width configuration

src/common/rect.ts

@@ -0,0 +1,31 @@
+import { type Vector2, vector2 } from "./vector2";
+
+export type Rect = {
+	position: Vector2;
+	size: Vector2;
+};
+export const rect = {
+	fromPoint: (point: Vector2): Rect => ({
+		position: point,
+		size: vector2.zero,
+	}),
+	bounds: (points: Vector2[]): Rect => {
+		const [first, ...rest] = points;
+		if (!first) throw new Error("No points provided");
+		const rect = {
+			position: first,
+			size: vector2.zero,
+		};
+		for (const point of rest) {
+			rect.position.x = Math.min(rect.position.x, point.x);
+			rect.position.y = Math.min(rect.position.y, point.y);
+			rect.size.x = Math.max(rect.size.x, point.x - rect.position.x);
+			rect.size.y = Math.max(rect.size.y, point.y - rect.position.y);
+		}
+		return rect;
+	},
+	shift: (rect: Rect, offset: Vector2): Rect => ({
+		position: vector2.add(rect.position, offset),
+		size: rect.size,
+	}),
+};

src/pages/edit/Editor/components/NodePinPropertyEditor.tsx

@@ -1 +1,189 @@
-export function CCComponentEditorNodePinPropertyEditor() {}
+import { Button, Popover, Stack, TextField, Typography } from "@mui/material";
+import { zip } from "lodash-es";
+import nullthrows from "nullthrows";
+import { useState } from "react";
+import invariant from "tiny-invariant";
+import { rect } from "../../../../common/rect";
+import { IntrinsicComponentDefinition } from "../../../../store/intrinsics/base";
+import { CCNodePinStore } from "../../../../store/nodePin";
+import { useStore } from "../../../../store/react";
+import getCCComponentEditorRendererNodeGeometry from "../renderer/Node.geometry";
+import { useComponentEditorStore } from "../store";
+
+export function CCComponentEditorNodePinPropertyEditor() {
+	const { store } = useStore();
+	const componentEditorStore = useComponentEditorStore();
+	const target = componentEditorStore((s) => s.nodePinPropertyEditorTarget);
+	const setTarget = componentEditorStore(
+		(s) => s.setNodePinPropertyEditorTarget,
+	);
+	const [newBitWidthList, setNewBitWidthList] = useState<number[] | null>(null); // null means no change
+	if (!target) return null;
+
+	const componentPin = nullthrows(
+		store.componentPins.get(target.componentPinId),
+	);
+	const component = nullthrows(store.components.get(componentPin.componentId));
+	const nodePins = store.nodePins
+		.getManyByNodeIdAndComponentPinId(target.nodeId, target.componentPinId)
+		.toSorted((a, b) => a.order - b.order);
+	invariant(
+		nodePins.every((p) => p.userSpecifiedBitWidth !== null),
+		"NodePinPropertyEditor can only be used for node pins with user specified bit width",
+	);
+	const componentPinAttributes = nullthrows(
+		IntrinsicComponentDefinition.intrinsicComponentPinAttributesByComponentPinId.get(
+			target.componentPinId,
+		),
+		"NodePinPropertyEditor can only be used for intrinsic component pins",
+	);
+
+	const getBoundingClientRect = (): DOMRect => {
+		const geometry = getCCComponentEditorRendererNodeGeometry(
+			store,
+			target.nodeId,
+		);
+		const nodePinCanvasPositions = nodePins.map((nodePin) =>
+			componentEditorStore
+				.getState()
+				.fromStageToCanvas(
+					nullthrows(geometry.nodePinPositionById.get(nodePin.id)),
+				),
+		);
+		const bounds = rect.shift(
+			rect.bounds(nodePinCanvasPositions),
+			componentEditorStore.getState().getRendererPosition(),
+		);
+		return new DOMRect(
+			bounds.position.x,
+			bounds.position.y,
+			bounds.size.x,
+			bounds.size.y,
+		);
+	};
+
+	const bitWidthList =
+		newBitWidthList ??
+		nodePins.map((nodePin) => nullthrows(nodePin.userSpecifiedBitWidth));
+
+	const isTouched = Boolean(newBitWidthList);
+	const isValid = bitWidthList.every((bitWidth) => bitWidth > 0);
+
+	const onClose = () => {
+		setTarget(null);
+		setNewBitWidthList(null);
+	};
+
+	return (
+		<Popover
+			open
+			anchorEl={{ nodeType: 1, getBoundingClientRect }}
+			transformOrigin={{
+				vertical: "center",
+				horizontal: componentPin.type === "input" ? "right" : "left",
+			}}
+			slotProps={{ paper: { sx: { p: 2, width: 250 } } }}
+			onClose={onClose}
+		>
+			<Typography variant="h6">
+				{componentPin.name} ({component.name})
+			</Typography>
+			<Typography variant="caption" color="text.secondary">
+				Specify the bit width to assign to the pin.
+			</Typography>
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					let maxOrder = 0;
+					for (const [nodePin, bitWidth] of zip(nodePins, bitWidthList)) {
+						// Create new NodePin
+						if (!nodePin && bitWidth) {
+							store.nodePins.register(
+								CCNodePinStore.create({
+									componentPinId: target.componentPinId,
+									nodeId: target.nodeId,
+									order: ++maxOrder,
+									userSpecifiedBitWidth: bitWidth,
+								}),
+							);
+							continue;
+						}
+						// Delete old NodePin
+						if (nodePin && !bitWidth) {
+							store.nodePins.unregister(nodePin.id);
+							continue;
+						}
+						// Update NodePin
+						if (nodePin && bitWidth) {
+							maxOrder = nodePin.order; // nodePins are sorted by order
+							if (nodePin.userSpecifiedBitWidth !== bitWidth)
+								store.nodePins.update(nodePin.id, {
+									userSpecifiedBitWidth: bitWidth,
+								});
+							continue;
+						}
+						throw new Error("Unreachable");
+					}
+					onClose();
+				}}
+			>
+				<Stack gap={0.5} sx={{ mt: 1 }}>
+					{bitWidthList.map((bitWidth, index) => {
+						return (
+							<TextField
+								// biome-ignore lint/suspicious/noArrayIndexKey: bitWidth is only identified by index in this component
+								key={index}
+								type="number"
+								value={bitWidth || ""}
+								slotProps={{ htmlInput: { min: 1 } }}
+								onChange={(e) => {
+									const newValue = Number.parseInt(e.target.value, 10);
+									if (newValue >= 0 || e.target.value === "")
+										setNewBitWidthList(bitWidthList.with(index, newValue || 0));
+								}}
+								error={bitWidth <= 0}
+								size="small"
+							/>
+						);
+					})}
+				</Stack>
+				<Stack direction="row" gap={1} sx={{ mt: 1 }}>
+					{componentPinAttributes.isSplittable && (
+						<>
+							<Button
+								type="button"
+								variant="outlined"
+								size="small"
+								onClick={() => {
+									setNewBitWidthList([...bitWidthList, 1]);
+								}}
+							>
+								Add
+							</Button>
+							<Button
+								type="button"
+								variant="outlined"
+								size="small"
+								disabled={bitWidthList.length <= 1}
+								onClick={() => {
+									setNewBitWidthList(bitWidthList.slice(0, -1));
+								}}
+							>
+								Remove
+							</Button>
+						</>
+					)}
+					<Button
+						type="submit"
+						variant="contained"
+						size="small"
+						sx={{ ml: "auto" }}
+						disabled={!isTouched || !isValid}
+					>
+						Apply
+					</Button>
+				</Stack>
+			</form>
+		</Popover>
+	);
+}

src/pages/edit/Editor/index.tsx

@@ -7,6 +7,7 @@ import type { CCComponentId } from "../../../store/component";
 import { useStore } from "../../../store/react";
 import CCComponentEditorContextMenu from "./components/ContextMenu";
 import CCComponentEditorGrid from "./components/Grid";
+import { CCComponentEditorNodePinPropertyEditor } from "./components/NodePinPropertyEditor";
 import CCComponentEditorTitleBar from "./components/TitleBar";
 import CCComponentEditorViewModeSwitcher from "./components/ViewModeSwitcher";
 import CCComponentEditorRenderer from "./renderer";
@@ -46,6 +47,7 @@ function CCComponentEditorContent({
 			/>
 			<CCComponentEditorViewModeSwitcher />
 			<CCComponentEditorContextMenu onEditComponent={onEditComponent} />
+			<CCComponentEditorNodePinPropertyEditor />
 			{isComponentPropertyDialogOpen && (
 				<ComponentPropertyDialog
 					defaultName={component.name}

src/pages/edit/Editor/renderer/Node.tsx

@@ -90,6 +90,7 @@ const CCComponentEditorRendererNode = ensureStoreItem(
 								: theme.palette.textPrimary
 						}
 						strokeWidth={2}
+						rx={2}
 					/>
 				</g>
 				{store.nodePins.getManyByNodeId(nodeId).map((nodePin) => {

src/pages/edit/Editor/renderer/NodePin.tsx

@@ -14,14 +14,17 @@ import getCCComponentEditorRendererNodeGeometry from "./Node.geometry";
 
 const NODE_PIN_POSITION_SENSITIVITY = 10;
 
-export type CCComponentEditorRendererNodeProps = {
+export type CCComponentEditorRendererNodePinProps = {
 	nodePinId: CCNodePinId;
 	position: Vector2;
 };
+export const CCComponentEditorRendererNodePinConstants = {
+	SIZE: 10,
+};
 export default function CCComponentEditorRendererNodePin({
 	nodePinId,
 	position,
-}: CCComponentEditorRendererNodeProps) {
+}: CCComponentEditorRendererNodePinProps) {
 	const { store } = useStore();
 	const componentEditorState = useComponentEditorStore()();
 	const nodePin = nullthrows(store.nodePins.get(nodePinId));
@@ -117,6 +120,13 @@ export default function CCComponentEditorRendererNodePin({
 			}
 			setDraggingState(null);
 		},
+		onClick: () => {
+			if (nodePin.userSpecifiedBitWidth === null) return;
+			componentEditorState.setNodePinPropertyEditorTarget({
+				componentPinId: nodePin.componentPinId,
+				nodeId: nodePin.nodeId,
+			});
+		},
 	});
 
 	const isSimulationMode = useComponentEditorStore()(
@@ -179,28 +189,44 @@ export default function CCComponentEditorRendererNodePin({
 			)}
 			<g {...draggableProps} style={{ cursor: "pointer" }}>
 				<rect
-					x={position.x - 5}
-					y={position.y - 5}
-					width={10}
-					height={10}
+					x={position.x - CCComponentEditorRendererNodePinConstants.SIZE / 2}
+					y={position.y - CCComponentEditorRendererNodePinConstants.SIZE / 2}
+					width={CCComponentEditorRendererNodePinConstants.SIZE}
+					height={CCComponentEditorRendererNodePinConstants.SIZE}
 					rx={3}
 					fill={theme.palette.white}
 					stroke={theme.palette.textPrimary}
 					strokeWidth={2}
 				/>
-				<text
-					x={position.x}
-					y={position.y}
-					textAnchor="middle"
-					dominantBaseline="central"
-					fontSize={7}
-					fill={theme.palette.textPrimary}
-				>
-					3
-				</text>
+				{nodePin.userSpecifiedBitWidth !== null && (
+					<text
+						x={position.x}
+						y={position.y}
+						textAnchor="middle"
+						dominantBaseline="central"
+						fontSize={
+							nodePin.userSpecifiedBitWidth >= 100
+								? 4
+								: nodePin.userSpecifiedBitWidth >= 10
+									? 6
+									: 8
+						}
+						fill={theme.palette.textPrimary}
+					>
+						{nodePin.userSpecifiedBitWidth >= 100
+							? "99+"
+							: nodePin.userSpecifiedBitWidth}
+					</text>
+				)}
 			</g>
 			<text
-				x={position.x + { input: 10, output: -10 }[pinType]}
+				x={
+					position.x +
+					{
+						input: CCComponentEditorRendererNodePinConstants.SIZE,
+						output: -CCComponentEditorRendererNodePinConstants.SIZE,
+					}[pinType]
+				}
 				y={position.y}
 				textAnchor={{ input: "start", output: "end" }[pinType]}
 				dominantBaseline="central"

src/pages/edit/Editor/renderer/index.tsx

@@ -19,6 +19,7 @@ export default function CCComponentEditorRenderer() {
 	const connectionIds = useConnectionIds(componentEditorState.componentId);
 
 	return (
+		// biome-ignore lint/a11y/noSvgWithoutTitle: This svg is not a graphic
 		<svg
 			ref={componentEditorState.registerRendererElement}
 			style={{
@@ -27,6 +28,7 @@ export default function CCComponentEditorRenderer() {
 				left: 0,
 				width: "100%",
 				height: "100%",
+				userSelect: "none",
 			}}
 			viewBox={[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(" ")}
 			onDragOver={(e) => {
@@ -47,7 +49,6 @@ export default function CCComponentEditorRenderer() {
 				);
 			}}
 		>
-			<title>Component editor</title>
 			<CCComponentEditorRendererBackground />
 			{connectionIds.map((connectionId) => (
 				<CCComponentEditorRendererConnection

src/pages/edit/Editor/store/slices/core/index.ts

@@ -37,6 +37,13 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 				selectedNodeIds: new Set(),
 				rangeSelect: null,
 				selectedConnectionIds: new Set(),
+				nodePinPropertyEditorTarget: null,
+				setNodePinPropertyEditorTarget(target) {
+					set((state) => ({
+						...state,
+						nodePinPropertyEditorTarget: target,
+					}));
+				},
 				/** @private */
 				inputValues: new Map(),
 				getInputValue(componentPinId: CCComponentPinId) {