Migrate to React

package.json

@@ -13,33 +13,32 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.5",
-    "@pixi/color": "^7.2.4",
-    "@pixi/graphics-extras": "^7.2.4",
-    "@pixi/math-extras": "^7.2.4",
     "eventemitter3": "^5.0.1",
-    "mnemonist": "^0.39.5",
+    "memoize-one": "^6.0.0",
+    "mnemonist": "^0.39.8",
     "nullthrows": "^1.1.1",
-    "pixi.js": "^7.2.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tiny-invariant": "^1.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-use": "^17.5.1",
+    "tiny-invariant": "^1.3.3",
+    "transformation-matrix": "^2.16.1",
     "zustand": "^4.3.9"
   },
   "devDependencies": {
-    "@tsconfig/esm": "^1.0.3",
-    "@tsconfig/strictest": "^2.0.1",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@tsconfig/esm": "^1.0.5",
+    "@tsconfig/strictest": "^2.0.5",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^8.43.0",
     "eslint-config-airbnb-typescript-prettier": "^5.0.0",
     "prettier": "^2.8.8",
     "type-fest": "^3.12.0",
-    "typescript": "~5.0",
+    "typescript": "^5.6.3",
     "vite": "^4.3.9"
   }
 }

src/App.tsx

@@ -1,6 +1,5 @@
 import { Box } from "@mui/material";
 import { useState } from "react";
-import "@pixi/math-extras";
 import GlobalHeader from "./components/GlobalHeader";
 import type { CCComponentId } from "./store/component";
 import EditPage from "./pages/edit";

src/common/theme.ts

@@ -1,21 +1,20 @@
-import { Color } from "@pixi/color";
 import { createTheme } from "@mui/material";
 
 // See https://www.figma.com/file/M3dC0Gk98IGSGlxY901rBh/
-export const blackColor = 0x000000;
-export const whiteColor = 0xffffff;
+export const blackColor = "#000000";
+export const whiteColor = "#ffffff";
 export const grayColor = {
-  main: 0x9e9e9e,
-  darken2: 0x616161,
+  main: "#9e9e9e",
+  darken2: "#616161",
 };
-export const primaryColor = 0x00d372;
-export const activeColor = 0x00aaff;
-export const errorColor = 0xff0000;
-export const editorBackgroundColor = 0xf3f3f3;
-export const editorGridColor = 0xdddddd;
+export const primaryColor = "#00d372";
+export const activeColor = "#00aaff";
+export const errorColor = "#ff0000";
+export const editorBackgroundColor = "#f3f3f3";
+export const editorGridColor = "#dddddd";
 
 export const theme = createTheme({
   palette: {
-    primary: { main: new Color(primaryColor).toHex() },
+    primary: { main: primaryColor },
   },
 });

src/common/types.ts

@@ -0,0 +1 @@
+export type Point = { x: number; y: number };

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

@@ -0,0 +1,176 @@
+import {
+  ClickAwayListener,
+  MenuList,
+  Paper,
+  MenuItem,
+  Divider,
+} from "@mui/material";
+import nullthrows from "nullthrows";
+import invariant from "tiny-invariant";
+import {
+  CCComponentStore,
+  type CCComponentId,
+} from "../../../../store/component";
+import {
+  type CCConnection,
+  CCConnectionStore,
+} from "../../../../store/connection";
+import {
+  type CCNodeId,
+  type CCNode,
+  CCNodeStore,
+} from "../../../../store/node";
+import { useComponentEditorStore } from "../store";
+import { useStore } from "../../../../store/react";
+
+export type CCComponentEditorContextMenuProps = {
+  onEditComponent: (componentId: CCComponentId) => void;
+};
+
+export default function CCComponentEditorContextMenu({
+  onEditComponent,
+}: CCComponentEditorContextMenuProps) {
+  const { store } = useStore();
+  const componentEditorState = useComponentEditorStore()();
+
+  if (!componentEditorState.contextMenuState) return null;
+
+  return (
+    <ClickAwayListener onClickAway={componentEditorState.closeContextMenu}>
+      <MenuList
+        component={Paper}
+        dense
+        sx={{
+          position: "absolute",
+          top: `${componentEditorState.contextMenuState.position.y}px`,
+          left: `${componentEditorState.contextMenuState.position.x}px`,
+          width: "200px",
+        }}
+      >
+        <MenuItem onClick={componentEditorState.closeContextMenu}>
+          Create a node
+        </MenuItem>
+        {componentEditorState.selectedNodeIds.size > 0 && (
+          <MenuItem
+            onClick={() => {
+              const oldNodes = [...componentEditorState.selectedNodeIds].map(
+                (nodeId) => {
+                  const node = store.nodes.get(nodeId);
+                  invariant(node);
+                  return node;
+                }
+              );
+              const oldConnections = [
+                ...componentEditorState.selectedConnectionIds,
+              ].map((connectionId) => {
+                const connection = store.connections.get(connectionId);
+                invariant(connection);
+                return connection;
+              });
+              const newComponent = CCComponentStore.create({
+                name: "New Component",
+              });
+              store.components.register(newComponent);
+              const oldToNewNodeIdMap = new Map<CCNodeId, CCNodeId>();
+              const newNodes = oldNodes.map<CCNode>((oldNode) => {
+                const newNode = CCNodeStore.create({
+                  parentComponentId: newComponent.id,
+                  position: oldNode.position,
+                  componentId: oldNode.componentId,
+                  variablePins: [],
+                });
+                oldToNewNodeIdMap.set(oldNode.id, newNode.id);
+                return newNode;
+              });
+              for (const node of newNodes) store.nodes.register(node);
+              const newConnections = oldConnections.flatMap<CCConnection>(
+                (oldConnection) => {
+                  const oldFromNodePin = nullthrows(
+                    store.nodePins.get(oldConnection.from)
+                  );
+                  const oldToNodePin = nullthrows(
+                    store.nodePins.get(oldConnection.to)
+                  );
+                  const newFromNodeId = nullthrows(
+                    oldToNewNodeIdMap.get(oldFromNodePin.nodeId)
+                  );
+                  const newToNodeId = nullthrows(
+                    oldToNewNodeIdMap.get(oldToNodePin.nodeId)
+                  );
+                  return CCConnectionStore.create({
+                    parentComponentId: newComponent.id,
+                    from: store.nodePins.getByImplementationNodeIdAndPinId(
+                      newFromNodeId,
+                      oldFromNodePin.componentPinId
+                    ).id,
+                    to: store.nodePins.getByImplementationNodeIdAndPinId(
+                      newToNodeId,
+                      oldToNodePin.componentPinId
+                    ).id,
+                    bentPortion: oldConnection.bentPortion,
+                  });
+                }
+              );
+              for (const connection of newConnections)
+                store.connections.register(connection);
+              store.connections.unregister([
+                ...componentEditorState.selectedConnectionIds,
+              ]);
+              store.nodes.unregister([...componentEditorState.selectedNodeIds]);
+              componentEditorState.closeContextMenu();
+              onEditComponent(newComponent.id);
+            }}
+          >
+            Create a new component...
+          </MenuItem>
+        )}
+        {(componentEditorState.selectedNodeIds.size > 0 ||
+          componentEditorState.selectedConnectionIds.size > 0) && (
+          <MenuItem
+            onClick={() => {
+              if (componentEditorState.selectedNodeIds.size > 0)
+                store.nodes.unregister([
+                  ...componentEditorState.selectedNodeIds,
+                ]);
+              if (componentEditorState.selectedConnectionIds.size > 0)
+                store.connections.unregister([
+                  ...componentEditorState.selectedConnectionIds,
+                ]);
+              componentEditorState.selectNode([], true);
+              componentEditorState.selectConnection([], false);
+              componentEditorState.closeContextMenu();
+            }}
+          >
+            Delete
+          </MenuItem>
+        )}
+        {(() => {
+          if (componentEditorState.selectedNodeIds.size !== 1) return undefined;
+          const iteratorResult = componentEditorState.selectedNodeIds
+            .values()
+            .next();
+          invariant(!iteratorResult.done);
+          const targetNode = store.nodes.get(iteratorResult.value);
+          invariant(targetNode);
+          const targetComponent = store.components.get(targetNode.componentId);
+          invariant(targetComponent);
+          if (targetComponent.isIntrinsic) return undefined;
+          return (
+            <>
+              <Divider />
+              <MenuItem
+                onClick={() => {
+                  invariant(targetNode);
+                  componentEditorState.closeContextMenu();
+                  onEditComponent(targetNode.componentId);
+                }}
+              >
+                Edit...
+              </MenuItem>
+            </>
+          );
+        })()}
+      </MenuList>
+    </ClickAwayListener>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { KeyboardDoubleArrowRight, Edit, Close } from "@mui/icons-material";
+import { Paper, Box, IconButton } from "@mui/material";
+import nullthrows from "nullthrows";
+import { useComponentEditorStore } from "../store";
+import { useStore } from "../../../../store/react";
+
+export type CCComponentEditorTitleBarProps = {
+  onEditorClose: () => void;
+  onComponentPropertyDialogOpen: () => void;
+};
+
+export default function CCComponentEditorTitleBar({
+  onEditorClose,
+  onComponentPropertyDialogOpen,
+}: CCComponentEditorTitleBarProps) {
+  const componentEditorStore = useComponentEditorStore();
+  const componentEditorState = componentEditorStore();
+  const { store } = useStore();
+  const component = nullthrows(
+    store.components.get(componentEditorState.componentId)
+  );
+
+  return (
+    <Paper
+      sx={{
+        position: "absolute",
+        top: "30px",
+        left: "30px",
+        width: "400px",
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        p: 1,
+      }}
+    >
+      <Box sx={{ color: "text.secondary" }}>Components</Box>
+      <KeyboardDoubleArrowRight />
+      <span>{component.name}</span>
+      <IconButton size="small" onClick={onComponentPropertyDialogOpen}>
+        <Edit fontSize="small" />
+      </IconButton>
+      <div aria-hidden style={{ flexGrow: 1 }} />
+      <IconButton size="small" onClick={onEditorClose}>
+        <Close fontSize="small" />
+      </IconButton>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Edit, PlayArrow, SkipNext } from "@mui/icons-material";
+import { Fab } from "@mui/material";
+import { useComponentEditorStore } from "../store";
+
+export default function CCComponentEditorViewModeSwitcher() {
+  const componentEditorState = useComponentEditorStore()();
+
+  return (
+    <>
+      <Fab
+        style={{ position: "absolute", bottom: "40px", right: "40px" }}
+        color="primary"
+        onClick={() => {
+          componentEditorState.setEditorMode(
+            componentEditorState.editorMode === "edit" ? "play" : "edit"
+          );
+          componentEditorState.resetTimeStep();
+        }}
+      >
+        {componentEditorState.editorMode === "edit" ? <PlayArrow /> : <Edit />}
+      </Fab>
+      {componentEditorState.editorMode === "play" && (
+        <Fab
+          style={{ position: "absolute", bottom: "40px", right: "120px" }}
+          color="primary"
+          onClick={() => componentEditorState.incrementTimeStep()}
+        >
+          <SkipNext />
+        </Fab>
+      )}
+    </>
+  );
+}