fix bugs of simulation

Co-authored-by: Takashi Nagatomi <taka231@users.noreply.github.com>
Co-authored-by: Tatsuhiko Nagaya <chelproc@users.noreply.github.com>

Author: Rn86222

src/App.tsx

@@ -2,15 +2,13 @@ import { Box } from "@mui/material";
 import { useState } from "react";
 import "@pixi/math-extras";
 import GlobalHeader from "./components/GlobalHeader";
-import { useStore } from "./store/react";
 import type { CCComponentId } from "./store/component";
 import EditPage from "./pages/edit";
 import HomePage from "./pages/home";
 
 export default function App() {
-  const store = useStore();
   const [editedComponentId, setEditedComponentId] =
-    useState<CCComponentId | null>(store.components.rootComponentId);
+    useState<CCComponentId | null>(null);
 
   return (
     <Box

src/pages/edit/Editor/index.tsx

@@ -45,7 +45,7 @@ function CCComponentEditorContent({
   const rendererRef = useRef<CCComponentEditorRenderer>();
   const containerRef = useRef<HTMLDivElement>(null);
   const overlayAreaRef = useRef<HTMLDivElement>(null);
-  const store = useStore();
+  const { store } = useStore();
   const componentEditorStore = useComponentEditorStore();
   const componentEditorState = componentEditorStore();
   const component = store.components.get(componentId);

src/pages/edit/Editor/renderer/componentPin.ts

@@ -20,7 +20,6 @@ type CCComponentEditorRendererComponentPinProps = {
   nodeId: CCNodeId; // TODO: this might be unnecessary
   pinId: CCComponentPinId;
   position: PIXI.Point;
-  getPinValue: () => boolean[] | undefined;
 };
 
 /**
@@ -43,8 +42,6 @@ export default class CCComponentEditorRendererComponentPin extends CCComponentEd
 
   readonly #unsubscribeComponentEditorStore: () => void;
 
-  readonly #getPinValue: () => boolean[] | undefined;
-
   #valueBoxWidth: number;
 
   private static readonly drawingConstants = {
@@ -115,7 +112,6 @@ export default class CCComponentEditorRendererComponentPin extends CCComponentEd
     this.context.store.componentPins.on("didUpdate", (pin) => {
       if (pin.id === this.#componentPinId) this.render();
     });
-    this.#getPinValue = props.getPinValue;
     this.render();
   }
 
@@ -189,7 +185,9 @@ export default class CCComponentEditorRendererComponentPin extends CCComponentEd
           }
           return valueText;
         };
-        const outputValue = this.#getPinValue();
+        const outputValue = editorState.getComponentPinValue(
+          this.#componentPinId
+        );
         if (outputValue) {
           this.#pixiValueText.text = createValueText(outputValue);
           this.#valueBoxWidth =

src/pages/edit/Editor/renderer/connection.ts

@@ -3,11 +3,10 @@ import nullthrows from "nullthrows";
 import type { CCConnectionId } from "../../../../store/connection";
 import type CCStore from "../../../../store";
 import CCComponentEditorRendererNode from "./node";
-import type {
-  ComponentEditorStore,
-  EditorMode,
-  SimulationValue,
-} from "../store";
+import type { EditorMode } from "../store";
+import CCComponentEditorRendererBase, {
+  type CCComponentEditorRendererContext,
+} from "./base";
 
 export type CCConnectionEndpoint = {
   nodeId: string;
@@ -20,7 +19,7 @@ const lineColor = 0x000000;
 /**
  * Class for rendering connection
  */
-export default class CCComponentEditorRendererConnection {
+export default class CCComponentEditorRendererConnection extends CCComponentEditorRendererBase {
   #store: CCStore;
 
   #connectionId: CCConnectionId;
@@ -42,12 +41,8 @@ export default class CCComponentEditorRendererConnection {
 
   #offset: number;
 
-  #componentEditorStore: ComponentEditorStore;
-
   #onDragStart: (e: PIXI.FederatedMouseEvent) => void;
 
-  #getPinValue: () => SimulationValue | undefined;
-
   /**
    * Constructor of CCComponentEditorRendererConnection
    * @param store store
@@ -62,14 +57,13 @@ export default class CCComponentEditorRendererConnection {
     store: CCStore,
     connectionId: CCConnectionId,
     pixiParentContainer: PIXI.Container,
-    componentEditorStore: ComponentEditorStore,
-    onDragStart: (e: PIXI.FederatedMouseEvent) => void,
-    getPinValue: () => SimulationValue | undefined
+    context: CCComponentEditorRendererContext,
+    onDragStart: (e: PIXI.FederatedMouseEvent) => void
   ) {
+    super(context);
     this.#store = store;
     this.#connectionId = connectionId;
     this.#onDragStart = onDragStart;
-    this.#getPinValue = getPinValue;
     this.#pixiGraphics = {
       from: CCComponentEditorRendererConnection.#createGraphics(),
       middle: CCComponentEditorRendererConnection.#createGraphics(),
@@ -103,23 +97,25 @@ export default class CCComponentEditorRendererConnection {
     });
     const editValueText = (mode: EditorMode) => {
       if (mode === "play") {
-        const value = this.#getPinValue()
-          ?.map((v) => (v ? "1" : "0"))
-          .join("");
+        const connection = this.#store.connections.get(this.#connectionId)!;
+        const inputValue = this.context.componentEditorStore
+          .getState()
+          .getNodePinValue(connection.from)!;
+        const value = inputValue.map((v) => (v ? "1" : "0")).join("");
         this.#pixiGraphics.value.text = value || "";
         this.#pixiGraphics.value.visible = true;
       } else {
         this.#pixiGraphics.value.visible = false;
       }
     };
     this.#pixiGraphics.from.on("mouseover", () => {
-      editValueText(this.#componentEditorStore.getState().editorMode);
+      editValueText(this.context.componentEditorStore.getState().editorMode);
     });
     this.#pixiGraphics.to.on("mouseover", () => {
-      editValueText(this.#componentEditorStore.getState().editorMode);
+      editValueText(this.context.componentEditorStore.getState().editorMode);
     });
     this.#pixiGraphics.middle.on("mouseover", () => {
-      editValueText(this.#componentEditorStore.getState().editorMode);
+      editValueText(this.context.componentEditorStore.getState().editorMode);
     });
     this.#pixiGraphics.from.on("mouseout", () => {
       this.#pixiGraphics.value.visible = false;
@@ -135,7 +131,6 @@ export default class CCComponentEditorRendererConnection {
     )!.bentPortion;
     this.#temporaryBentPortion = this.#bentPortionCache;
     this.#offset = 0;
-    this.#componentEditorStore = componentEditorStore;
     this.#render();
     this.#store.nodes.on("didUpdate", this.#render);
   }
@@ -146,11 +141,11 @@ export default class CCComponentEditorRendererConnection {
    */
   onPointerDown(e: PIXI.FederatedEvent) {
     if (
-      !this.#componentEditorStore
+      !this.context.componentEditorStore
         .getState()
         .selectedConnectionIds.has(this.#connectionId)
     ) {
-      this.#componentEditorStore
+      this.context.componentEditorStore
         .getState()
         .selectConnection([this.#connectionId], false);
     }
@@ -204,7 +199,7 @@ export default class CCComponentEditorRendererConnection {
   /**
    * Destroy the connection
    */
-  destroy() {
+  override destroy() {
     this.#pixiParentContainer.removeChild(this.#pixiGraphics.from);
     this.#pixiParentContainer.removeChild(this.#pixiGraphics.middle);
     this.#pixiParentContainer.removeChild(this.#pixiGraphics.to);
@@ -249,19 +244,17 @@ export default class CCComponentEditorRendererConnection {
    * Render the connection
    */
   #render = () => {
+    const connection = this.#store.connections.get(this.#connectionId);
+    if (!connection) return;
     this.#pixiGraphics.from.clear();
     this.#pixiGraphics.middle.clear();
     this.#pixiGraphics.to.clear();
     this.#pixiGraphics.from.lineStyle(lineWidth, lineColor);
     this.#pixiGraphics.middle.lineStyle(lineWidth, lineColor);
     this.#pixiGraphics.to.lineStyle(lineWidth, lineColor);
     const endPointGap = 9;
-    const fromEndPoint = nullthrows(
-      this.#store.connections.get(this.#connectionId)?.from
-    );
-    const toEndPoint = nullthrows(
-      this.#store.connections.get(this.#connectionId)?.to
-    );
+    const fromEndPoint = nullthrows(connection.from);
+    const toEndPoint = nullthrows(connection.to);
     const fromPosition = CCComponentEditorRendererNode.getNodePinAbsolute(
       this.#store,
       fromEndPoint

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

@@ -417,19 +417,12 @@ export default class CCComponentEditorRenderer extends CCComponentEditorRenderer
         },
       };
     };
-    const getPinValue = () => {
-      const nodePinId = this.context.store.connections.get(connectionId)!.from;
-      return this.context.componentEditorStore
-        .getState()
-        .getNodePinValue(nodePinId);
-    };
     const newConnectionRenderer = new CCComponentEditorRendererConnection(
       this.context.store,
       connectionId,
       this.#pixiWorld,
-      this.context.componentEditorStore,
-      onDragStart,
-      getPinValue
+      this.context,
+      onDragStart
     );
     this.#connectionRenderers.set(connectionId, newConnectionRenderer);
   }

src/pages/edit/Editor/renderer/node.ts

@@ -257,6 +257,11 @@ export default class CCComponentEditorRendererNode extends CCComponentEditorRend
     const node = this.context.store.nodes.get(this.#nodeId);
     if (!node) return;
 
+    const parentComponent = this.context.store.components.get(
+      node.parentComponentId
+    )!;
+    const parentComponentPins =
+      this.context.store.componentPins.getManyByComponentId(parentComponent.id);
     const nodePins = this.context.store.nodePins.getManyByNodeId(this.#nodeId);
 
     const existingComponentPinRenderers = new Map(this.#componentPinRenderers);
@@ -266,37 +271,34 @@ export default class CCComponentEditorRendererNode extends CCComponentEditorRend
     >();
     for (const nodePin of nodePins) {
       if (this.context.store.connections.hasNoConnectionOf(nodePin.id)) {
-        const componentPin = this.context.store.componentPins.get(
-          nodePin.componentPinId
+        const parentComponentPin = parentComponentPins.find(
+          (pin) => pin.implementation === nodePin.id
         )!;
         const existingComponentPinRenderer = existingComponentPinRenderers.get(
-          componentPin.id
+          parentComponentPin.id
         );
         if (existingComponentPinRenderer) {
           newComponentPinRenderers.set(
-            componentPin.id,
+            parentComponentPin.id,
             existingComponentPinRenderer
           );
-          existingComponentPinRenderers.delete(componentPin.id);
+          existingComponentPinRenderers.delete(parentComponentPin.id);
         } else {
-          const getPinValue = () => {
-            return this.context.componentEditorStore
-              .getState()
-              .getNodePinValue(nodePin.id);
-          };
           const componentPinRenderer =
             new CCComponentEditorRendererComponentPin({
               context: this.context,
               pixiParentContainer: this.#pixiWorld,
               nodeId: this.#nodeId,
-              pinId: componentPin.id,
+              pinId: parentComponentPin.id,
               position: CCComponentEditorRendererNode.getPinOffset(
                 this.context.store,
                 nodePin.id
               ),
-              getPinValue,
             });
-          newComponentPinRenderers.set(componentPin.id, componentPinRenderer);
+          newComponentPinRenderers.set(
+            parentComponentPin.id,
+            componentPinRenderer
+          );
         }
       }
     }

src/pages/edit/Editor/store/index.tsx

@@ -31,7 +31,7 @@ type State = {
   setRangeSelect(rangeSelect: RangeSelect): void;
   selectedConnectionIds: Set<CCConnectionId>;
   inputValues: Map<InputValueKey, SimulationValue>;
-  getInputValue(componentPinId: CCComponentPinId): SimulationValue | undefined;
+  getInputValue(componentPinId: CCComponentPinId): SimulationValue;
   setInputValue(componentPinId: CCComponentPinId, value: SimulationValue): void;
   setEditorMode(mode: EditorMode): void;
   resetTimeStep(): void;
@@ -69,10 +69,21 @@ function createEditorStore(componentId: CCComponentId, store: CCStore) {
     selectedNodeIds: new Set(),
     rangeSelect: null,
     selectedConnectionIds: new Set(),
+    /** @private */
     inputValues: new Map(),
-    /** @deprecated */
     getInputValue(componentPinId: CCComponentPinId) {
-      return this.inputValues.get(componentPinId);
+      const value = this.inputValues.get(componentPinId);
+      if (!value) {
+        const multiplexability =
+          store.componentPins.getComponentPinMultiplexability(componentPinId);
+        if (multiplexability.isMultiplexable) {
+          const newValue = [false];
+          return newValue;
+        }
+        const newValue = new Array(multiplexability.multiplicity).fill(false);
+        return newValue;
+      }
+      return value;
     },
     setInputValue(componentPinId: CCComponentPinId, value: SimulationValue) {
       set((state) => {
@@ -139,7 +150,9 @@ function createEditorStore(componentId: CCComponentId, store: CCStore) {
     },
   }));
 
-  const simulationHandler = () => {
+  const executeSimulation = () => {
+    if (editorStore.getState().editorMode !== "play") return;
+
     const newSimulationCacheKey =
       store.nodes
         .toArray()
@@ -148,35 +161,42 @@ function createEditorStore(componentId: CCComponentId, store: CCStore) {
       store.connections
         .toArray()
         .map((connection) => connection.id)
+        .join() +
+      [...editorStore.getState().inputValues.entries()]
+        .map(([key, value]) => key + value.join())
         .join();
-    const editorState = editorStore.getState();
     if (newSimulationCacheKey !== simulationCacheKey) {
       simulationCacheKey = newSimulationCacheKey;
       simulationCachedFrames = [];
     }
+
+    const editorState = editorStore.getState();
+    let isUpdated = false;
     for (
       let timeStep = simulationCachedFrames.length;
       timeStep <= editorState.timeStep;
       timeStep += 1
     ) {
+      console.log(timeStep);
       const previousFrame = simulationCachedFrames[timeStep - 1] ?? null;
-
+      const inputValues = new Map();
+      const pins = store.componentPins.getManyByComponentId(componentId);
+      for (const pin of pins) {
+        inputValues.set(pin.id, editorState.getInputValue(pin.id));
+      }
       simulationCachedFrames.push(
-        simulateComponent(
-          store,
-          componentId,
-          editorState.inputValues,
-          previousFrame
-        )!
+        simulateComponent(store, componentId, inputValues, previousFrame)!
       );
+      isUpdated = true;
     }
+    if (isUpdated) editorStore.setState((s) => ({ ...s }));
   };
-  store.nodes.on("didRegister", simulationHandler);
-  store.nodes.on("didUpdate", simulationHandler);
-  store.nodes.on("didUnregister", simulationHandler);
-  store.connections.on("didRegister", simulationHandler);
-  store.connections.on("didUnregister", simulationHandler);
-  editorStore.subscribe(simulationHandler);
+  store.nodes.on("didRegister", executeSimulation);
+  store.nodes.on("didUpdate", executeSimulation);
+  store.nodes.on("didUnregister", executeSimulation);
+  store.connections.on("didRegister", executeSimulation);
+  store.connections.on("didUnregister", executeSimulation);
+  editorStore.subscribe(executeSimulation);
 
   return editorStore;
 }
@@ -192,7 +212,7 @@ export function ComponentEditorStoreProvider({
   componentId: CCComponentId;
   children: React.ReactNode;
 }) {
-  const store = useStore();
+  const { store } = useStore();
   const [editorStore] = useState(() => createEditorStore(componentId, store));
   return <context.Provider value={editorStore}>{children}</context.Provider>;
 }