wip

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";
@@ -32,9 +33,7 @@ export function CCComponentEditorNodePinPropertyEditor() {
 		"NodePinPropertyEditor can only be used for node pins with user specified bit width",
 	);
 	const componentPinAttributes = nullthrows(
-		IntrinsicComponentDefinition.intrinsicComponentPinAttributesByComponentPinId.get(
-			target.componentPinId,
-		),
+		IntrinsicComponentDefinition.getPinAttributesByPinId(target.componentPinId),
 		"NodePinPropertyEditor can only be used for intrinsic component pins",
 	);
 
@@ -128,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 }}>