update

Author: chelproc

package-lock.json

@@ -18,6 +18,7 @@
 		"@emotion/styled": "^11.14.1",
 		"@mui/icons-material": "^7.3.1",
 		"@mui/material": "^7.3.1",
+		"debounce": "^2.2.0",
 		"es-toolkit": "^1.39.10",
 		"eventemitter3": "^5.0.1",
 		"memoize-one": "^6.0.0",

package.json

@@ -6,6 +6,7 @@ import { useStore } from "../../../../store/react";
 import ensureStoreItem from "../../../../store/react/error";
 import { useNode } from "../../../../store/react/selectors";
 import { useComponentEditorStore } from "../store";
+import { stringifySimulationValue } from "../store/slices/core/index";
 import getCCComponentEditorRendererNodeGeometry from "./Node.geometry";
 
 export type CCComponentEditorRendererConnectionCoreProps = {
@@ -106,8 +107,6 @@ const CCComponentEditorRendererConnection = ensureStoreItem(
 
 		const [isHovered, setIsHovered] = useState(false);
 
-		// const fromNodePinValue = componentEditorState.getNodePinValue(fromNodePin.id);
-
 		return (
 			<>
 				<CCComponentEditorRendererConnectionCore
@@ -128,7 +127,9 @@ const CCComponentEditorRendererConnection = ensureStoreItem(
 							startOffset="50%"
 							textAnchor="middle"
 						>
-							hoge
+							{stringifySimulationValue(
+								nullthrows(componentEditorState.getNodePinValue(toNodePin.id)),
+							)}
 						</textPath>
 					</text>
 				)}

src/pages/edit/Editor/renderer/Connection.tsx

@@ -79,7 +79,7 @@ const CCComponentEditorRendererNode = ensureStoreItem(
 						fill={theme.palette.textPrimary}
 						x={geometry.x}
 						y={geometry.y - 5}
-						textAnchor="end"
+						textAnchor="start"
 						fontSize={12}
 					>
 						{component.name}

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

@@ -17,7 +17,6 @@ import {
 } from "@mui/material";
 import { useRef, useState } from "react";
 import { ComponentPropertyDialog } from "../../components/ComponentPropertyDialog";
-import type { CCStorePropsFromJson } from "../../store";
 import { type CCComponentId, CCComponentStore } from "../../store/component";
 import { useStore } from "../../store/react";
 import { useComponents } from "../../store/react/selectors";
@@ -49,9 +48,7 @@ export default function HomePage({ onComponentSelected }: HomePageProps) {
 		if (!file) return;
 		const reader = new FileReader();
 		reader.onload = () => {
-			const storeJSON = reader.result as string;
-			const storeData = JSON.parse(storeJSON);
-			resetStore(storeData as CCStorePropsFromJson);
+			resetStore(reader.result as string);
 		};
 		reader.readAsText(file);
 	};

src/pages/home/index.tsx

@@ -0,0 +1,53 @@
+import debounce from "debounce";
+import type CCStore from ".";
+import { ccComponentStoreChangeEventTypes } from "./component";
+import { ccComponentPinStoreChangeEventTypes } from "./componentPin";
+import { ccConnectionStoreChangeEventTypes } from "./connection";
+import { ccNodeStoreChangeEventTypes } from "./node";
+import { ccNodePinStoreChangeEventTypes } from "./nodePin";
+
+export class CCStoreAutoSaver {
+	#store: CCStore;
+
+	static localStorageKey = "ccStoreAutoSaverState";
+
+	constructor(store: CCStore) {
+		this.#store = store;
+	}
+
+	watch() {
+		const save = debounce(this.save.bind(this), 1000);
+		for (const eventType of ccComponentStoreChangeEventTypes) {
+			this.#store.components.addListener(eventType, save);
+		}
+		for (const eventType of ccComponentPinStoreChangeEventTypes) {
+			this.#store.componentPins.addListener(eventType, save);
+		}
+		for (const eventType of ccNodeStoreChangeEventTypes) {
+			this.#store.nodes.addListener(eventType, save);
+		}
+		for (const eventType of ccNodePinStoreChangeEventTypes) {
+			this.#store.nodePins.addListener(eventType, save);
+		}
+		for (const eventType of ccConnectionStoreChangeEventTypes) {
+			this.#store.connections.addListener(eventType, save);
+		}
+	}
+
+	save(): void {
+		window.localStorage.setItem(
+			CCStoreAutoSaver.localStorageKey,
+			this.#store.toJSON(),
+		);
+	}
+
+	tryRestore(): boolean {
+		const json = window.localStorage.getItem(CCStoreAutoSaver.localStorageKey);
+		if (json) {
+			this.#store.importJson(json);
+			return true;
+		} else {
+			return false;
+		}
+	}
+}

src/store/autoSaver.ts

@@ -20,6 +20,8 @@ export type CCComponentStoreEvents = {
 	didUnregister(component: CCComponent): void;
 	didUpdate(component: CCComponent): void;
 };
+export const ccComponentStoreChangeEventTypes: (keyof CCComponentStoreEvents)[] =
+	["didRegister", "didUnregister", "didUpdate"];
 
 /**
  * Store of components