Add automatic simulation playback and configurable Display pixel order

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

@@ -1,59 +1,150 @@
 import { ChevronLeft, ChevronRight } from "@mui/icons-material";
-import { IconButton, Paper } from "@mui/material";
+import { Box, IconButton, Paper, TextField, ToggleButton } from "@mui/material";
+import { useState } from "react";
+import { useInterval } from "react-use";
 import { useComponentEditorStore } from "../store";
+import {
+	isValidPlaybackSpeed,
+	MAX_PLAYBACK_SPEED,
+	MIN_PLAYBACK_SPEED,
+} from "../store/slices/core/types";
 
 export default function CCComponentEditorFrameControl() {
-	const componentEditorState = useComponentEditorStore()();
+	const componentEditorStore = useComponentEditorStore();
+	const componentEditorState = componentEditorStore();
+	const [speedInput, setSpeedInput] = useState(
+		String(componentEditorState.playbackSpeed),
+	);
+	const isAutomatic = componentEditorState.playbackMode === "auto";
+	const isSpeedValid = isValidPlaybackSpeed(Number(speedInput));
+
+	useInterval(
+		() => {
+			const state = componentEditorStore.getState();
+			if (state.editorMode === "play" && state.playbackMode === "auto") {
+				state.setTimeStep(state.timeStep + 1);
+			}
+		},
+		componentEditorState.editorMode === "play" && isAutomatic
+			? 1000 / componentEditorState.playbackSpeed
+			: null,
+	);
 
 	if (componentEditorState.editorMode === "edit") return null;
 
 	return (
-		<Paper
+		<Box
 			sx={{
 				position: "absolute",
 				bottom: "40px",
-				left: "calc(50% - 80px)",
-				width: "160px",
+				left: "16px",
+				right: "112px",
 				display: "flex",
-				backgroundColor: "background.paper",
-				borderRadius: "40px",
+				justifyContent: "center",
+				pointerEvents: "none",
 			}}
-			elevation={3}
 		>
-			<IconButton
-				size="large"
-				disabled={componentEditorState.timeStep <= 0}
-				onClick={() => {
-					componentEditorState.setTimeStep(componentEditorState.timeStep - 1);
+			<Paper
+				sx={{
+					display: "flex",
+					flexWrap: "wrap",
+					alignItems: "center",
+					justifyContent: "center",
+					gap: 1,
+					p: 1,
+					borderRadius: 3,
+					pointerEvents: "auto",
 				}}
+				elevation={3}
 			>
-				<ChevronLeft />
-			</IconButton>
-			<input
-				style={{
-					flex: 1,
-					minWidth: 0,
-					textAlign: "center",
-					border: "none",
-					outline: "none",
-					fontSize: "20px",
-				}}
-				value={componentEditorState.timeStep + 1}
-				onChange={(e) => {
-					const value = Number.parseInt(e.target.value, 10);
-					if (!Number.isNaN(value) && value > 0) {
-						componentEditorState.setTimeStep(value - 1);
+				<ToggleButton
+					value="auto"
+					selected={isAutomatic}
+					size="small"
+					aria-label="自動再生"
+					onChange={() => {
+						componentEditorState.setPlaybackMode(
+							isAutomatic ? "manual" : "auto",
+						);
+					}}
+				>
+					Auto
+				</ToggleButton>
+				<Box sx={{ display: "flex", width: "160px", flexShrink: 0 }}>
+					<IconButton
+						size="large"
+						aria-label="前のステップ"
+						disabled={isAutomatic || componentEditorState.timeStep <= 0}
+						onClick={() => {
+							componentEditorState.setTimeStep(
+								componentEditorState.timeStep - 1,
+							);
+						}}
+					>
+						<ChevronLeft />
+					</IconButton>
+					<input
+						aria-label="タイムステップ"
+						disabled={isAutomatic}
+						style={{
+							flex: 1,
+							minWidth: 0,
+							textAlign: "center",
+							border: "none",
+							outline: "none",
+							fontSize: "20px",
+						}}
+						value={componentEditorState.timeStep + 1}
+						onChange={(e) => {
+							const value = Number(e.target.value);
+							if (Number.isSafeInteger(value) && value > 0) {
+								componentEditorState.setTimeStep(value - 1);
+							}
+						}}
+					/>
+					<IconButton
+						size="large"
+						aria-label="次のステップ"
+						disabled={isAutomatic}
+						onClick={() => {
+							componentEditorState.setTimeStep(
+								componentEditorState.timeStep + 1,
+							);
+						}}
+					>
+						<ChevronRight />
+					</IconButton>
+				</Box>
+				<TextField
+					label="クロック周波数 (Hz)"
+					type="number"
+					size="small"
+					sx={{ width: "160px" }}
+					value={speedInput}
+					error={!isSpeedValid}
+					helperText={
+						isSpeedValid
+							? undefined
+							: `${MIN_PLAYBACK_SPEED}〜${MAX_PLAYBACK_SPEED} を入力`
 					}
-				}}
-			/>
-			<IconButton
-				size="large"
-				onClick={() => {
-					componentEditorState.setTimeStep(componentEditorState.timeStep + 1);
-				}}
-			>
-				<ChevronRight />
-			</IconButton>
-		</Paper>
+					slotProps={{
+						htmlInput: {
+							min: MIN_PLAYBACK_SPEED,
+							max: MAX_PLAYBACK_SPEED,
+							step: "any",
+						},
+					}}
+					onChange={(e) => {
+						setSpeedInput(e.target.value);
+						componentEditorState.setPlaybackSpeed(Number(e.target.value));
+					}}
+					onBlur={() => {
+						setSpeedInput(
+							String(componentEditorStore.getState().playbackSpeed),
+						);
+					}}
+				/>
+			</Paper>
+		</Box>
 	);
 }

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

@@ -3,6 +3,7 @@ import {
 	Button,
 	FormLabel,
 	IconButton,
+	MenuItem,
 	Popover,
 	Stack,
 	TextField,
@@ -97,6 +98,23 @@ export function CCComponentEditorRendererNodeDisplayRendererConfigSettingButton(
 							}}
 						/>
 					</Stack>
+					<TextField
+						select
+						label="Pixel order"
+						value={newConfig.pixelOrder ?? "row-major"}
+						onChange={(e) => {
+							const pixelOrder = e.target.value;
+							if (pixelOrder === "row-major" || pixelOrder === "column-major") {
+								setNewConfig((prev) => ({ ...prev, pixelOrder }));
+							}
+						}}
+						size="small"
+						fullWidth
+						sx={{ mt: 2 }}
+					>
+						<MenuItem value="row-major">Row-major</MenuItem>
+						<MenuItem value="column-major">Column-major</MenuItem>
+					</TextField>
 					<Stack direction="row" justifyContent="flex-end" mt={2} gap={1}>
 						<Button
 							type="button"

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

@@ -64,7 +64,11 @@ export function CCComponentEditorRendererNodeDisplayRenderer(
 								width={gridSize}
 								height={gridSize}
 								fill={
-									inputValue?.[x + config.resolution.x * y]
+									inputValue?.[
+										config.pixelOrder === "column-major"
+											? y + config.resolution.y * x
+											: x + config.resolution.x * y
+									]
 										? theme.colors.black
 										: theme.colors.white
 								}

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

@@ -14,6 +14,7 @@ import type { ComponentEditorSliceCreator } from "../../types";
 import {
 	type EditorStoreCoreSlice,
 	type InputValueKey,
+	isValidPlaybackSpeed,
 	serializeInputValueKey,
 } from "./types";
 
@@ -35,6 +36,8 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 			return {
 				editorMode: "edit",
 				timeStep: 0,
+				playbackMode: "manual",
+				playbackSpeed: 1,
 				selectedNodeIds: new Set(),
 				rangeSelect: null,
 				selectedConnectionIds: new Set(),
@@ -54,17 +57,22 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 					);
 					if (value) return value;
 
-					// If not, try to find the value from the previous time step
-					const previousTimeStepValue = get().inputValues.get(
-						serializeInputValueKey({
-							...inputValueKey,
-							timeStep: inputValueKey.timeStep - 1,
-						}),
-					);
-					if (previousTimeStepValue) {
-						get().setInputValue(inputValueKey, previousTimeStepValue);
-						return previousTimeStepValue;
+					// Inherit the latest earlier input without updating the store during simulation.
+					const prefix = `${inputValueKey.componentPinId}:`;
+					let latestTimeStep = -1;
+					let previousValue: SimulationValue | undefined;
+					for (const [key, value] of get().inputValues) {
+						if (!key.startsWith(prefix)) continue;
+						const timeStep = Number(key.slice(prefix.length));
+						if (
+							timeStep < inputValueKey.timeStep &&
+							timeStep > latestTimeStep
+						) {
+							latestTimeStep = timeStep;
+							previousValue = value;
+						}
 					}
+					if (previousValue) return previousValue;
 
 					// If not found, initialize the value based on the bit width of the pin
 					const componentPin = nullthrows(
@@ -97,11 +105,23 @@ export const createComponentEditorStoreCoreSlice: ComponentEditorSliceCreator<
 					set((state) => ({ ...state, rangeSelect }));
 				},
 				setEditorMode(mode) {
-					set((state) => ({ ...state, editorMode: mode }));
+					set((state) => ({
+						...state,
+						editorMode: mode,
+						playbackMode: "manual",
+					}));
 				},
 				setTimeStep(timeStep: number) {
 					set((state) => ({ ...state, timeStep }));
 				},
+				setPlaybackMode(playbackMode) {
+					if (get().editorMode !== "play") return;
+					set((state) => ({ ...state, playbackMode }));
+				},
+				setPlaybackSpeed(playbackSpeed) {
+					if (!isValidPlaybackSpeed(playbackSpeed)) return;
+					set((state) => ({ ...state, playbackSpeed }));
+				},
 				selectNode(ids: CCNodeId[], exclusive: boolean) {
 					set((state) => ({
 						...state,

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

@@ -9,6 +9,19 @@ export type EditorMode = EditorModeEdit | EditorModePlay;
 export type EditorModeEdit = "edit";
 export type EditorModePlay = "play";
 
+export type PlaybackMode = "manual" | "auto";
+
+export const MIN_PLAYBACK_SPEED = 0.1;
+export const MAX_PLAYBACK_SPEED = 60;
+
+export function isValidPlaybackSpeed(speed: number): boolean {
+	return (
+		Number.isFinite(speed) &&
+		speed >= MIN_PLAYBACK_SPEED &&
+		speed <= MAX_PLAYBACK_SPEED
+	);
+}
+
 export type RangeSelect = { start: Vector2; end: Vector2 } | null;
 
 export type TimeStep = number;
@@ -29,6 +42,9 @@ export type NodePinPropertyEditorTarget = {
 export type EditorStoreCoreSlice = {
 	editorMode: EditorMode;
 	timeStep: number;
+	playbackMode: PlaybackMode;
+	/** Simulation steps per second. */
+	playbackSpeed: number;
 	selectedNodeIds: Set<CCNodeId>;
 	rangeSelect: RangeSelect;
 	setRangeSelect(rangeSelect: RangeSelect): void;
@@ -42,6 +58,8 @@ export type EditorStoreCoreSlice = {
 	setInputValue(inputValueKey: InputValueKey, value: SimulationValue): void;
 	setEditorMode(mode: EditorMode): void;
 	setTimeStep(timeStep: number): void;
+	setPlaybackMode(mode: PlaybackMode): void;
+	setPlaybackSpeed(speed: number): void;
 	selectNode(ids: CCNodeId[], exclusive: boolean): void;
 	unselectNode(ids: CCNodeId[]): void;
 	selectConnection(ids: CCConnectionId[], exclusive: boolean): void;

src/store/intrinsics/definitions.ts

@@ -414,7 +414,10 @@ export const display =
 			},
 		},
 		out: {},
-		initialConfig: { resolution: { x: 20, y: 15 } },
+		initialConfig: {
+			resolution: { x: 20, y: 15 },
+			pixelOrder: "row-major",
+		},
 		evaluate: () => true,
 	});
 

src/store/intrinsics/types.ts

@@ -61,7 +61,10 @@ export type CCIntrinsicComponentNullaryOperatorSpec = {
 export type CCIntrinsicComponentDisplaySpec = {
 	in: "Pixels";
 	out: never;
-	config: { resolution: Vector2 };
+	config: {
+		resolution: Vector2;
+		pixelOrder?: "row-major" | "column-major";
+	};
 };
 
 export type CCIntrinsicComponentConstSpecConfigViewMode =