Point the Input and Output nodes toward their pins

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

@@ -1,4 +1,4 @@
-import { theme } from "../../../../../../../style";
+import styles from "../../style.module.css";
 import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
 
 export function CCComponentEditorRendererNodeDefaultRenderer(
@@ -7,7 +7,7 @@ export function CCComponentEditorRendererNodeDefaultRenderer(
 	return (
 		<>
 			<text
-				fill={theme.colors.textPrimary}
+				className={styles.text}
 				x={0}
 				y={-5}
 				textAnchor="start"
@@ -20,14 +20,8 @@ export function CCComponentEditorRendererNodeDefaultRenderer(
 				y={0}
 				width="100%"
 				height="100%"
-				fill={theme.colors.white}
-				stroke={
-					props.nodeState.isSelected
-						? theme.colors.primary
-						: theme.colors.textPrimary
-				}
-				strokeWidth={2}
 				rx={2}
+				className={styles.shape}
 			/>
 		</>
 	);

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

@@ -5,11 +5,14 @@ import type {
 	CCComponentEditorRendererNodeLayoutSource,
 } from "../../types";
 
+const bodyWidth = 70;
+const arrowDepth = 10;
+
 export const ccComponentEditorRendererNodeInterfaceLayoutConstants = {
-	width: 70,
+	bodyWidth,
+	arrowDepth,
+	width: bodyWidth + arrowDepth,
 	height: 30,
-	labelWidth: 54,
-	labelHeight: 16,
 };
 
 export function ccComponentRendererNodeInterfaceLayoutCalculator(

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

@@ -1,11 +1,11 @@
 import nullthrows from "nullthrows";
+import { ccIntrinsicComponentTypes } from "../../../../../../../store/intrinsics/types";
 import { useStore } from "../../../../../../../store/react";
 import { wrappingIncrementSimulationValue } from "../../../../../../../store/simulation";
-import { theme } from "../../../../../../../style";
 import { useComponentEditorStore } from "../../../../store";
 import { stringifySimulationValue } from "../../../../store/slices/core";
+import styles from "../../style.module.css";
 import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
-import { CCComponentEditorRendererNodeDefaultRenderer } from "../Default";
 import { ccComponentEditorRendererNodeInterfaceLayoutConstants as constants } from "./geometry";
 
 export function CCComponentEditorRendererNodeInterfaceRenderer(
@@ -48,21 +48,20 @@ export function CCComponentEditorRendererNodeInterfaceRenderer(
 						onClick: null,
 					};
 
-	const { width, height, labelWidth, labelHeight } = constants;
+	const { bodyWidth, arrowDepth, width, height } = constants;
+	const isPinOnRight =
+		props.component.intrinsicType === ccIntrinsicComponentTypes.INPUT;
+	const bodyX = isPinOnRight ? 0 : arrowDepth;
+	const points = isPinOnRight
+		? `0,0  ${bodyWidth},0  ${width},${height / 2}  ${bodyWidth},${height}  0,${height}`
+		: `${arrowDepth},0  ${width},0  ${width},${height}  ${arrowDepth},${height}  0,${height / 2}`;
 
 	return (
 		<>
-			<CCComponentEditorRendererNodeDefaultRenderer {...props} />
-			<rect
-				x={(width - labelWidth) / 2}
-				y={(height - labelHeight) / 2}
-				width={labelWidth}
-				height={labelHeight}
-				rx={labelHeight / 2}
-				ry={labelHeight / 2}
-				stroke={theme.colors.textPrimary}
-				fill={theme.colors.white}
-				strokeWidth={1}
+			<polygon
+				points={points}
+				strokeLinejoin="round"
+				className={styles.shape}
 				{...(onClick
 					? {
 							onPointerDown: (e: React.PointerEvent) => {
@@ -75,9 +74,9 @@ export function CCComponentEditorRendererNodeInterfaceRenderer(
 					: {})}
 			/>
 			<text
-				x={width / 2}
+				x={bodyX + bodyWidth / 2}
 				y={height / 2}
-				fill={theme.colors.textPrimary}
+				className={styles.text}
 				textAnchor="middle"
 				dominantBaseline="middle"
 				fontSize={10}

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

@@ -18,10 +18,8 @@ import {
 	ccComponentEditorRendererLayoutToGeometry,
 	getCCComponentEditorRendererNodeLayout,
 } from "./geometry";
-import type {
-	CCComponentEditorRendererNodeRendererNodeState,
-	CCComponentEditorRendererNodeRendererProps,
-} from "./types";
+import styles from "./style.module.css";
+import type { CCComponentEditorRendererNodeRendererProps } from "./types";
 
 const specialRenderers: Partial<
 	Record<
@@ -62,9 +60,7 @@ const CCComponentEditorRendererNode = ensureStoreItem(
 		const Renderer =
 			(component.intrinsicType && specialRenderers[component.intrinsicType]) ||
 			CCComponentEditorRendererNodeDefaultRenderer;
-		const nodeState: CCComponentEditorRendererNodeRendererNodeState = {
-			isSelected: componentEditorState.selectedNodeIds.has(nodeId),
-		};
+		const isSelected = componentEditorState.selectedNodeIds.has(nodeId);
 
 		const handlePointerDown = (e: React.PointerEvent) => {
 			if (e.button === 0) {
@@ -107,6 +103,7 @@ const CCComponentEditorRendererNode = ensureStoreItem(
 					width={geometry.rect.size.x}
 					height={geometry.rect.size.y}
 					overflow="visible"
+					className={isSelected ? styles.selected : undefined}
 					onPointerDown={handlePointerDown}
 					onPointerMove={handlePointerMove}
 					onPointerUp={handlePointerUp}
@@ -121,7 +118,6 @@ const CCComponentEditorRendererNode = ensureStoreItem(
 				>
 					<Renderer
 						node={node}
-						nodeState={nodeState}
 						component={component}
 						layout={layout}
 						geometry={geometry}

src/pages/edit/Editor/renderer/Node/style.module.css

@@ -0,0 +1,14 @@
+/* Shared by the node renderers. `selected` is given to the element wrapping a node. */
+.shape {
+	fill: var(--color-white);
+	stroke: var(--color-text-primary);
+	stroke-width: 2;
+}
+
+.selected .shape {
+	stroke: var(--color-primary);
+}
+
+.text {
+	fill: var(--color-text-primary);
+}

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

@@ -6,7 +6,6 @@ import type { CCNodePinId } from "../../../../../store/nodePin";
 
 export type CCComponentEditorRendererNodeRendererProps = {
 	node: CCNode;
-	nodeState: CCComponentEditorRendererNodeRendererNodeState;
 	component: CCComponent;
 	layout: CCComponentEditorRendererNodeLayout;
 	geometry: CCComponentEditorRendererNodeGeometry;
@@ -27,7 +26,3 @@ export type CCComponentEditorRendererNodeGeometry = {
 	rect: Rect;
 	nodePinPositionById: Map<CCNodePinId, Vector2>;
 };
-
-export type CCComponentEditorRendererNodeRendererNodeState = {
-	isSelected: boolean;
-};

tsconfig.json

@@ -7,7 +7,9 @@
 		"moduleResolution": "bundler",
 		"noEmit": true,
 		"jsx": "react-jsx",
-		"verbatimModuleSyntax": true
+		"verbatimModuleSyntax": true,
+		// Conflicts with CSS Modules
+		"noPropertyAccessFromIndexSignature": false
 	},
 	"include": ["src"]
 }