202560509

Co-authored-by: Takashi Nagatomi <taka231@users.noreply.github.com>
Co-authored-by: Raito Nakajima <Rn86222@users.noreply.github.com>

Author: 3 people

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

@@ -4,6 +4,7 @@ import nullthrows from "nullthrows";
 import { useState } from "react";
 import invariant from "tiny-invariant";
 import { rect } from "../../../../common/rect";
+import { CCConnectionStore } from "../../../../store/connection";
 import { IntrinsicComponentDefinition } from "../../../../store/intrinsics/base";
 import { CCNodePinStore } from "../../../../store/nodePin";
 import { useStore } from "../../../../store/react";
@@ -126,10 +127,28 @@ export function CCComponentEditorNodePinPropertyEditor() {
 										connection.from === nodePin.id
 											? connection.to
 											: connection.from;
+									const fromNodePinId =
+										connection.from === nodePin.id
+											? nodePin.id
+											: anotherNodePinId;
+									const toNodePinId =
+										connection.from === nodePin.id
+											? anotherNodePinId
+											: nodePin.id;
+									const parentComponentId = connection.parentComponentId;
+									store.connections.unregister([connection.id]);
 									if (
-										!store.nodePins.isConnectable(nodePin.id, anotherNodePinId)
+										store.nodePins.isConnectable(nodePin.id, anotherNodePinId)
 									) {
-										store.connections.unregister([connection.id]);
+										// reconnect if still connectable after bit width change
+										store.connections.register(
+											CCConnectionStore.create({
+												parentComponentId,
+												from: fromNodePinId,
+												to: toNodePinId,
+												bentPortion: 0.5,
+											}),
+										);
 									}
 								}
 							}

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

@@ -30,20 +30,24 @@ export default function CCComponentEditorRendererComponentPin({
 					label: stringifySimulationValue(
 						type === "input"
 							? nullthrows(
-									componentEditorState.getInputValue(interfaceComponentPin.id),
+									componentEditorState.getInputValue([
+										interfaceComponentPin.id,
+										componentEditorState.timeStep,
+									]),
 								)
 							: nullthrows(componentEditorState.getNodePinValue(nodePinId)),
 					),
 					onClick:
 						type === "input"
 							? () => {
 									const nodePinValue = nullthrows(
-										componentEditorState.getInputValue(
+										componentEditorState.getInputValue([
 											interfaceComponentPin.id,
-										),
+											componentEditorState.timeStep,
+										]),
 									);
 									componentEditorState.setInputValue(
-										interfaceComponentPin.id,
+										[interfaceComponentPin.id, componentEditorState.timeStep],
 										wrappingIncrementSimulationValue(nodePinValue),
 									);
 								}

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

@@ -1,12 +1,27 @@
+import nullthrows from "nullthrows";
 import { theme } from "../../../../../../../common/theme";
+import { display } from "../../../../../../../store/intrinsics/definitions";
 import type { CCIntrinsicComponentDisplaySpec } from "../../../../../../../store/intrinsics/types";
-import type { CCNode } from "../../../../../../../store/node";
+import { useStore } from "../../../../../../../store/react";
+import { useComponentEditorStore } from "../../../../store";
 import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
 
 export function CCComponentEditorRendererNodeDisplayRenderer(
 	props: CCComponentEditorRendererNodeRendererProps,
 ) {
-	const node = props.node as CCNode<CCIntrinsicComponentDisplaySpec>;
+	const { store } = useStore();
+	const config = props.node.config as CCIntrinsicComponentDisplaySpec["config"];
+	const inputNodePin = nullthrows(
+		store.nodePins
+			.getManyByNodeId(props.node.id)
+			.find((pin) => pin.componentPinId === display.inputPin.Pixels.id),
+		`Display node ${props.node.id} is missing input pin`,
+	);
+	const editorState = useComponentEditorStore()();
+	const inputValue =
+		editorState.editorMode === "play"
+			? editorState.getNodePinValue(inputNodePin.id)
+			: undefined;
 
 	return (
 		<>
@@ -38,12 +53,12 @@ export function CCComponentEditorRendererNodeDisplayRenderer(
 				fontSize={16}
 				fill={theme.palette.textPrimary}
 			>
-				{node.config.resolution.x}x{node.config.resolution.y}
+				{config.resolution.x}x{config.resolution.y}
 			</text>
-			{Array(node.config.resolution.y)
+			{Array(config.resolution.y)
 				.keys()
 				.map((y) =>
-					Array(node.config.resolution.x)
+					Array(config.resolution.x)
 						.keys()
 						.map((x) => (
 							<rect
@@ -52,7 +67,14 @@ export function CCComponentEditorRendererNodeDisplayRenderer(
 								y={props.geometry.rect.position.y + 8 + y * 12}
 								width={12}
 								height={12}
-								fill={theme.palette.white}
+								fill={
+									inputValue?.[
+										config.resolution.x * config.resolution.y -
+											(1 + x + config.resolution.x * y)
+									]
+										? theme.palette.black
+										: theme.palette.white
+								}
 								stroke={theme.palette.editorGrid}
 							/>
 						))

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

@@ -11,7 +11,7 @@ import type {
 // import type { CCComponentId } from "../../../../../../store/component";
 import simulateComponent from "../../../../../../store/simulation";
 import type { ComponentEditorSliceCreator } from "../../types";
-import type { EditorStoreCoreSlice } from "./types";
+import type { EditorStoreCoreSlice, InputValueKey } from "./types";
 
 export function stringifySimulationValue(value: SimulationValue): string {
 	const binary = value.map((v) => (v ? "1" : "0")).join("");
@@ -43,11 +43,20 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 				},
 				/** @private */
 				inputValues: new Map(),
-				getInputValue(componentPinId: CCComponentPinId) {
-					const value = get().inputValues.get(componentPinId);
+				getInputValue(inputValueKey: InputValueKey) {
+					const value = get().inputValues.get(JSON.stringify(inputValueKey));
 					if (!value) {
+						const previousTimeStepValue = get().inputValues.get(
+							JSON.stringify([inputValueKey[0], inputValueKey[1] - 1]),
+						);
+						if (previousTimeStepValue) {
+							get().setInputValue(inputValueKey, previousTimeStepValue);
+							return previousTimeStepValue;
+						}
 						const bitWidthStatus =
-							store.componentPins.getComponentPinBitWidthStatus(componentPinId);
+							store.componentPins.getComponentPinBitWidthStatus(
+								inputValueKey[0],
+							);
 						if (bitWidthStatus.isFixed) {
 							const newValue = new Array(bitWidthStatus.bitWidth).fill(false);
 							return newValue;
@@ -60,15 +69,12 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 					}
 					return value;
 				},
-				setInputValue(
-					componentPinId: CCComponentPinId,
-					value: SimulationValue,
-				) {
+				setInputValue(inputValueKey: InputValueKey, value: SimulationValue) {
 					set((state) => {
 						return {
 							...state,
 							inputValues: new Map(state.inputValues).set(
-								componentPinId,
+								JSON.stringify(inputValueKey),
 								value,
 							),
 						};
@@ -170,7 +176,10 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 					for (const pin of pins) {
 						invariant(pin.implementation);
 						if (pin.type === "input") {
-							inputValues.set(pin.id, editorState.getInputValue(pin.id));
+							inputValues.set(
+								pin.id,
+								editorState.getInputValue([pin.id, timeStep]),
+							);
 						}
 					}
 					simulationCachedFrames.push(

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

@@ -11,7 +11,9 @@ export type EditorModePlay = "play";
 
 export type RangeSelect = { start: Vector2; end: Vector2 } | null;
 
-export type InputValueKey = CCComponentPinId;
+export type TimeStep = number;
+
+export type InputValueKey = [CCComponentPinId, TimeStep];
 
 export type NodePinPropertyEditorTarget = {
 	nodeId: CCNodeId;
@@ -29,9 +31,9 @@ export type EditorStoreCoreSlice = {
 	setNodePinPropertyEditorTarget(
 		target: NodePinPropertyEditorTarget | null,
 	): void;
-	inputValues: Map<InputValueKey, SimulationValue>;
-	getInputValue(componentPinId: CCComponentPinId): SimulationValue;
-	setInputValue(componentPinId: CCComponentPinId, value: SimulationValue): void;
+	inputValues: Map<string, SimulationValue>;
+	getInputValue(inputValueKey: InputValueKey): SimulationValue;
+	setInputValue(inputValueKey: InputValueKey, value: SimulationValue): void;
 	setEditorMode(mode: EditorMode): void;
 	setTimeStep(timeStep: number): void;
 	selectNode(ids: CCNodeId[], exclusive: boolean): void;

src/pages/home/index.tsx

@@ -2,7 +2,6 @@ import {
 	Add as AddIcon,
 	Download as DownloadIcon,
 	MoreVert as MoreVertIcon,
-	NoteAdd as NoteAddIcon,
 	Upload as UploadIcon,
 } from "@mui/icons-material";
 import {
@@ -76,9 +75,6 @@ export default function HomePage({ onComponentSelected }: HomePageProps) {
 					File
 				</Typography>
 				<Box sx={{ display: "flex", gap: 1 }}>
-					<Button variant="outlined" startIcon={<NoteAddIcon />} disabled>
-						New File
-					</Button>
 					<Button
 						variant="outlined"
 						color="inherit"
@@ -101,6 +97,21 @@ export default function HomePage({ onComponentSelected }: HomePageProps) {
 					>
 						Import
 					</Button>
+					<div style={{ flexGrow: 1 }} />
+					<Button
+						variant="text"
+						color="error"
+						onClick={() => {
+							if (
+								confirm(
+									"Are you sure you want to reset the store? This action cannot be undone.",
+								)
+							)
+								resetStore();
+						}}
+					>
+						Reset
+					</Button>
 				</Box>
 				<Box sx={{ display: "flex", alignItems: "center", mt: 4 }}>
 					<div style={{ flexGrow: 1 }}>

src/store/componentPin.ts

@@ -4,22 +4,9 @@ import invariant from "tiny-invariant";
 import type { Opaque } from "type-fest";
 import type CCStore from ".";
 import type { CCComponentId } from "./component";
-import {
-	aggregate,
-	and,
-	broadcast,
-	decompose,
-	false_,
-	flipflop,
-	input,
-	not,
-	or,
-	output,
-	true_,
-	xor,
-} from "./intrinsics/definitions";
+import { IntrinsicComponentDefinition } from "./intrinsics/base";
+import { aggregate, decompose, input, output } from "./intrinsics/definitions";
 import type { CCNodePinId } from "./nodePin";
-// import { IntrinsicComponentDefinition } from "./intrinsics/base";
 
 export type CCComponentPin = {
 	readonly id: CCComponentPinId;
@@ -228,71 +215,51 @@ export class CCComponentPinStore extends EventEmitter<CCComponentPinStoreEvents>
 		const pin = this.#pins.get(pinId);
 		invariant(pin);
 
-		// const intrinsicPinAttributes =
-		// 	IntrinsicComponentDefinition.getPinAttributesByPinId(pin.id);
-		// if (intrinsicPinAttributes) {
-		// 	if (intrinsicPinAttributes.bitWidthPolicy.type === "inferred")
-		// 		return { isFixed: false, fixMode: "automatic" };
-		// 	if (intrinsicPinAttributes.bitWidthPolicy.type === "configurable")
-		// 		return { isFixed: false, fixMode: "manual" };
-		// 	if (intrinsicPinAttributes.bitWidthPolicy.type === "fixed") {
-		// 		const definition = nullthrows(IntrinsicComponentDefinition.getByComponentId(pin.componentId));
-		// 	}
-		// 	throw new Error(`Unknown bit width policy: ${intrinsicPinAttributes.bitWidthPolicy}`);
-		// }
-
-		// TODO: Remove hardcoded intrinsic component pin IDs and replace with a more flexible system, such as metadata on the component definitions.
-		switch (pin.id) {
-			case nullthrows(and.inputPin.A.id):
-			case nullthrows(and.inputPin.B.id):
-			case nullthrows(and.outputPin.Out.id):
-			case nullthrows(or.inputPin.A.id):
-			case nullthrows(or.inputPin.B.id):
-			case nullthrows(or.outputPin.Out.id):
-			case nullthrows(not.inputPin.In.id):
-			case nullthrows(not.outputPin.Out.id):
-			case nullthrows(xor.inputPin.A.id):
-			case nullthrows(xor.inputPin.B.id):
-			case nullthrows(xor.outputPin.Out.id):
-			case nullthrows(input.outputPin.Out.id):
-			case nullthrows(output.inputPin.In.id):
-			case nullthrows(flipflop.inputPin.In.id):
-			case nullthrows(flipflop.outputPin.Out.id):
-			case nullthrows(true_.outputPin.Out.id):
-			case nullthrows(false_.outputPin.Out.id): {
-				return { isFixed: false, fixMode: "automatic" };
-			}
-			case nullthrows(aggregate.inputPin.In.id): {
+		// Intrinsic components
+		const intrinsicPinAttributes =
+			IntrinsicComponentDefinition.getPinAttributesByPinId(pin.id);
+		if (intrinsicPinAttributes) {
+			// TODO: This is a temporary workaround to allow the bit width of aggregate and decompose pins to be calculated outside of the normal inference process.
+			// We should eventually refactor the bit width inference process to handle these cases more elegantly.
+			if (pin.id === aggregate.outputPin.Out.id)
 				return { isFixed: false, fixMode: "manual" };
-			}
-			case nullthrows(aggregate.outputPin.Out.id): {
+			if (pin.id === decompose.inputPin.In.id)
 				return { isFixed: false, fixMode: "manual" };
-			}
-			case nullthrows(decompose.outputPin.Out.id): {
-				return { isFixed: false, fixMode: "manual" };
-			}
-			case nullthrows(decompose.inputPin.In.id): {
-				return { isFixed: false, fixMode: "manual" };
-			}
-			case nullthrows(broadcast.inputPin.In.id): {
-				return { isFixed: true, bitWidth: 1 };
-			}
-			case nullthrows(broadcast.outputPin.Out.id): {
+
+			if (intrinsicPinAttributes.bitWidthPolicy.type === "inferred")
+				return { isFixed: false, fixMode: "automatic" };
+			if (intrinsicPinAttributes.bitWidthPolicy.type === "configurable")
 				return { isFixed: false, fixMode: "manual" };
-			}
-			default: {
-				if (pin.implementation === null) {
-					throw new Error("unreachable");
-				}
-				const bitWidthStatus = this.#store.nodePins.getNodePinBitWidthStatus(
-					pin.implementation,
+			if (intrinsicPinAttributes.bitWidthPolicy.type === "fixed") {
+				const definition = nullthrows(
+					IntrinsicComponentDefinition.getByComponentId(pin.componentId),
+					`Intrinsic component definition not found for component ID: ${pin.componentId}`,
 				);
-				if (bitWidthStatus.isFixed) {
-					return bitWidthStatus;
-				} else {
-					return { isFixed: false, fixMode: "automatic" };
-				}
+				return {
+					isFixed: true,
+					bitWidth: intrinsicPinAttributes.bitWidthPolicy.calculateBitWidth(
+						definition.initialConfig,
+						{},
+					),
+				};
 			}
+			throw new Error(
+				`Unknown bit width policy: ${intrinsicPinAttributes.bitWidthPolicy satisfies never}`,
+			);
+		}
+
+		// User-defined components
+		invariant(
+			pin.implementation,
+			"Pin implementation must be defined for user-defined components",
+		);
+		const bitWidthStatus = this.#store.nodePins.getNodePinBitWidthStatus(
+			pin.implementation,
+		);
+		if (bitWidthStatus.isFixed) {
+			return bitWidthStatus;
+		} else {
+			return { isFixed: false, fixMode: "automatic" };
 		}
 	}