Add a dedicated renderer for the Input and Output nodes

src/pages/edit/Editor/renderer/Node/components/Interface/geometry.ts

@@ -0,0 +1,31 @@
+import { type Vector2, vector2 } from "../../../../../../../common/vector2";
+import type { CCNodePinId } from "../../../../../../../store/nodePin";
+import type {
+	CCComponentEditorRendererNodeLayout,
+	CCComponentEditorRendererNodeLayoutSource,
+} from "../../types";
+
+export const ccComponentEditorRendererNodeInterfaceLayoutConstants = {
+	width: 70,
+	height: 30,
+	labelWidth: 54,
+	labelHeight: 16,
+};
+
+export function ccComponentRendererNodeInterfaceLayoutCalculator(
+	source: CCComponentEditorRendererNodeLayoutSource,
+): CCComponentEditorRendererNodeLayout {
+	const { width, height } =
+		ccComponentEditorRendererNodeInterfaceLayoutConstants;
+	return {
+		size: vector2.create(width, height),
+		nodePinOffsetById: new Map<CCNodePinId, Vector2>([
+			...source.inputNodePinIds.map(
+				(id) => [id, vector2.create(0, height / 2)] as const,
+			),
+			...source.outputNodePinIds.map(
+				(id) => [id, vector2.create(width, height / 2)] as const,
+			),
+		]),
+	};
+}

src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx

@@ -0,0 +1,91 @@
+import nullthrows from "nullthrows";
+import { theme } from "../../../../../../../common/theme";
+import { useStore } from "../../../../../../../store/react";
+import { wrappingIncrementSimulationValue } from "../../../../../../../store/simulation";
+import { useComponentEditorStore } from "../../../../store";
+import { stringifySimulationValue } from "../../../../store/slices/core";
+import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
+import { CCComponentEditorRendererNodeDefaultRenderer } from "../Default";
+import { ccComponentEditorRendererNodeInterfaceLayoutConstants as constants } from "./geometry";
+
+export function CCComponentEditorRendererNodeInterfaceRenderer(
+	props: CCComponentEditorRendererNodeRendererProps,
+) {
+	const { store } = useStore();
+	const editorState = useComponentEditorStore()();
+
+	const nodePin = nullthrows(
+		store.nodePins.getManyByNodeId(props.node.id)[0],
+		`Interface node ${props.node.id} is missing its pin`,
+	);
+	const componentPin = nullthrows(
+		store.componentPins.getByImplementation(nodePin.id),
+	);
+
+	const { label, onClick } =
+		editorState.editorMode === "edit"
+			? { label: componentPin.name, onClick: null }
+			: componentPin.type === "input"
+				? (() => {
+						const inputValueKey = {
+							componentPinId: componentPin.id,
+							timeStep: editorState.timeStep,
+						};
+						const value = nullthrows(editorState.getInputValue(inputValueKey));
+						return {
+							label: stringifySimulationValue(value),
+							onClick: () =>
+								editorState.setInputValue(
+									inputValueKey,
+									wrappingIncrementSimulationValue(value),
+								),
+						};
+					})()
+				: {
+						label: stringifySimulationValue(
+							nullthrows(editorState.getNodePinValue(nodePin.id)),
+						),
+						onClick: null,
+					};
+
+	const { width, height, labelWidth, labelHeight } = constants;
+
+	return (
+		<>
+			<CCComponentEditorRendererNodeDefaultRenderer {...props} />
+			<rect
+				x={(width - labelWidth) / 2}
+				y={(height - labelHeight) / 2}
+				width={labelWidth}
+				height={labelHeight}
+				rx={labelHeight / 2}
+				ry={labelHeight / 2}
+				stroke={theme.palette.textPrimary}
+				fill={theme.palette.white}
+				strokeWidth={1}
+				{...(onClick
+					? {
+							onPointerDown: (e: React.PointerEvent) => {
+								// Prevent the node from being selected or dragged
+								e.stopPropagation();
+								onClick();
+							},
+							style: { cursor: "pointer" },
+						}
+					: {})}
+			/>
+			<text
+				x={width / 2}
+				y={height / 2}
+				fill={theme.palette.textPrimary}
+				textAnchor="middle"
+				dominantBaseline="middle"
+				fontSize={10}
+				dy={1}
+				style={{ pointerEvents: "none" }}
+			>
+				{label}
+			</text>
+		</>
+	);
+}

src/pages/edit/Editor/renderer/Node/geometry.ts

@@ -9,6 +9,7 @@ import type { CCNodeId } from "../../../../../store/node";
 import { ccComponentRendererNodeConstLayoutCalculator } from "./components/Const/geometry";
 import { ccComponentRendererNodeDefaultLayoutCalculator } from "./components/Default/geometry";
 import { ccComponentRendererNodeDisplayLayoutCalculator } from "./components/Display/geometry";
+import { ccComponentRendererNodeInterfaceLayoutCalculator } from "./components/Interface/geometry";
 import type {
 	CCComponentEditorRendererNodeGeometry,
 	CCComponentEditorRendererNodeLayout,
@@ -24,6 +25,10 @@ const specialLayoutCalculators: {
 		ccComponentRendererNodeDisplayLayoutCalculator,
 	[ccIntrinsicComponentTypes.CONST]:
 		ccComponentRendererNodeConstLayoutCalculator,
+	[ccIntrinsicComponentTypes.INPUT]:
+		ccComponentRendererNodeInterfaceLayoutCalculator,
+	[ccIntrinsicComponentTypes.OUTPUT]:
+		ccComponentRendererNodeInterfaceLayoutCalculator,
 };
 
 export function getCCComponentEditorRendererNodeLayout(

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

@@ -13,6 +13,7 @@ import CCComponentEditorRendererNodePin from "../NodePin";
 import { CCComponentEditorRendererNodeConstRenderer } from "./components/Const";
 import { CCComponentEditorRendererNodeDefaultRenderer } from "./components/Default";
 import { CCComponentEditorRendererNodeDisplayRenderer } from "./components/Display";
+import { CCComponentEditorRendererNodeInterfaceRenderer } from "./components/Interface";
 import {
 	ccComponentEditorRendererLayoutToGeometry,
 	getCCComponentEditorRendererNodeLayout,
@@ -31,6 +32,10 @@ const specialRenderers: Partial<
 	[ccIntrinsicComponentTypes.DISPLAY]:
 		CCComponentEditorRendererNodeDisplayRenderer,
 	[ccIntrinsicComponentTypes.CONST]: CCComponentEditorRendererNodeConstRenderer,
+	[ccIntrinsicComponentTypes.INPUT]:
+		CCComponentEditorRendererNodeInterfaceRenderer,
+	[ccIntrinsicComponentTypes.OUTPUT]:
+		CCComponentEditorRendererNodeInterfaceRenderer,
 };
 
 export type CCComponentEditorRendererNodeProps = {

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

@@ -9,7 +9,6 @@ import { input, output } from "../../../../../store/intrinsics/definitions";
 import type { CCNodePinId } from "../../../../../store/nodePin";
 import { useStore } from "../../../../../store/react";
 import { useComponentEditorStore } from "../../store";
-import CCComponentEditorRendererComponentPin from "./../ComponentPin";
 import {
 	CCComponentEditorRendererConnectionCore,
 	type CCComponentEditorRendererConnectionEndpoint,
@@ -146,14 +145,8 @@ export default function CCComponentEditorRendererNodePin({
 		},
 	});
 
-	const interfaceComponentPin =
-		store.componentPins.getByImplementation(nodePinId);
-
 	return (
 		<>
-			{interfaceComponentPin && (
-				<CCComponentEditorRendererComponentPin nodePinId={nodePinId} />
-			)}
 			<g {...draggableProps} style={{ cursor: "pointer" }}>
 				<rect
 					x={position.x - CCComponentEditorRendererNodePinConstants.SIZE / 2}