From 294c5f2db408cceffcc3a7779bd4d5d223a79df6 Mon Sep 17 00:00:00 2001 From: chelproc Date: Sun, 1 Nov 2026 11:28:01 +0900 Subject: [PATCH] Point the Input and Output nodes toward their pins Draw the Input and Output nodes as pentagons pointing toward their pin, which tells them apart without the component name above them, and drop the chip around their label. Clicking an Input node anywhere now increments its value in play mode. Move the stroke and fill of the node shapes into a CSS module shared by the default and interface renderers. The node renderer gives the `selected` class to the element wrapping a node, so the renderers no longer receive the selection state. Disable noPropertyAccessFromIndexSignature, which forbids accessing the classes of a CSS module with dot notation. --- .../Node/components/Default/index.tsx | 12 ++----- .../Node/components/Interface/geometry.ts | 9 ++++-- .../Node/components/Interface/index.tsx | 31 +++++++++---------- src/pages/edit/Editor/renderer/Node/index.tsx | 12 +++---- .../Editor/renderer/Node/style.module.css | 14 +++++++++ src/pages/edit/Editor/renderer/Node/types.ts | 5 --- tsconfig.json | 4 ++- 7 files changed, 45 insertions(+), 42 deletions(-) create mode 100644 src/pages/edit/Editor/renderer/Node/style.module.css diff --git a/src/pages/edit/Editor/renderer/Node/components/Default/index.tsx b/src/pages/edit/Editor/renderer/Node/components/Default/index.tsx index 3de4550..c92a436 100644 --- a/src/pages/edit/Editor/renderer/Node/components/Default/index.tsx +++ b/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 ( <> ); diff --git a/src/pages/edit/Editor/renderer/Node/components/Interface/geometry.ts b/src/pages/edit/Editor/renderer/Node/components/Interface/geometry.ts index bdc65b7..95e8568 100644 --- a/src/pages/edit/Editor/renderer/Node/components/Interface/geometry.ts +++ b/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( diff --git a/src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx b/src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx index e0da8b0..6fc4f2d 100644 --- a/src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx +++ b/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 ( <> - - { @@ -75,9 +74,9 @@ export function CCComponentEditorRendererNodeInterfaceRenderer( : {})} /> { 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( > ; }; - -export type CCComponentEditorRendererNodeRendererNodeState = { - isSelected: boolean; -}; diff --git a/tsconfig.json b/tsconfig.json index 46c5eac..9b5046e 100644 --- a/tsconfig.json +++ b/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"] }