Add editor background grid

src/common/theme.ts

@@ -3,14 +3,10 @@ import { createTheme } from "@mui/material";
 // See https://www.figma.com/file/M3dC0Gk98IGSGlxY901rBh/
 export const blackColor = "#000000";
 export const whiteColor = "#ffffff";
-export const grayColor = {
-  main: "#9e9e9e",
-  darken2: "#616161",
-};
 export const primaryColor = "#00d372";
 export const activeColor = "#00aaff";
 export const errorColor = "#ff0000";
-export const editorBackgroundColor = "#f3f3f3";
+export const editorBackgroundColor = "#fafafa";
 export const editorGridColor = "#dddddd";
 
 export const theme = createTheme({

src/common/types.ts

@@ -1 +1,3 @@
-export type Point = { x: number; y: number };
+import type { Vector2 } from "./vector2";
+
+export type Perspective = { center: Vector2; scale: number };

src/common/vector2.ts

@@ -0,0 +1,25 @@
+export type Vector2 = { x: number; y: number };
+
+export const vector2 = {
+  zero: { x: 0, y: 0 },
+  add: (a: Vector2, b: Vector2): Vector2 => ({
+    x: a.x + b.x,
+    y: a.y + b.y,
+  }),
+  sub: (a: Vector2, b: Vector2): Vector2 => ({
+    x: a.x - b.x,
+    y: a.y - b.y,
+  }),
+  mul: (a: Vector2, b: number): Vector2 => ({
+    x: a.x * b,
+    y: a.y * b,
+  }),
+  div: (a: Vector2, b: number): Vector2 => ({
+    x: a.x / b,
+    y: a.y / b,
+  }),
+  fromDomEvent: (e: { offsetX: number; offsetY: number }): Vector2 => ({
+    x: e.offsetX,
+    y: e.offsetY,
+  }),
+};

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

@@ -0,0 +1,59 @@
+import type { ReactElement } from "react";
+import { useComponentEditorStore } from "../store";
+import { vector2 } from "../../../../common/vector2";
+
+export default function CCComponentEditorGrid() {
+  const componentEditorState = useComponentEditorStore()();
+  const logScale = Math.log2(componentEditorState.perspective.scale);
+  const canvasOriginPosition = componentEditorState.fromStageToCanvas(
+    vector2.zero
+  );
+  const canvasGridSize = 100 * 2 ** (Math.ceil(logScale) - logScale);
+
+  const elements: ReactElement[] = [];
+  let i = 0;
+  for (
+    let x = (canvasOriginPosition.x % canvasGridSize) - canvasGridSize;
+    x <= componentEditorState.rendererSize.x;
+    x += canvasGridSize
+  ) {
+    elements.push(
+      <div
+        key={i}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "1px",
+          height: "100%",
+          backgroundColor: "rgba(0, 0, 0, 0.1)",
+          transform: `translateX(${x}px)`,
+        }}
+      />
+    );
+    i += 1;
+  }
+  for (
+    let y = (canvasOriginPosition.y % canvasGridSize) - canvasGridSize;
+    y <= componentEditorState.rendererSize.y;
+    y += canvasGridSize
+  ) {
+    elements.push(
+      <div
+        key={i}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "1px",
+          backgroundColor: "rgba(0, 0, 0, 0.1)",
+          transform: `translateY(${y}px)`,
+        }}
+      />
+    );
+    i += 1;
+  }
+
+  return <div aria-hidden>{elements}</div>;
+}

src/pages/edit/Editor/index.tsx

@@ -9,6 +9,8 @@ import CCComponentEditorViewModeSwitcher from "./components/ViewModeSwitcher";
 import CCComponentEditorContextMenu from "./components/ContextMenu";
 import type { CCComponentId } from "../../../store/component";
 import CCComponentEditorRenderer from "./renderer";
+import CCComponentEditorGrid from "./components/Grid";
+import { editorBackgroundColor } from "../../../common/theme";
 
 export type CCComponentEditorProps = {
   componentId: CCComponentId;
@@ -27,7 +29,14 @@ function CCComponentEditorContent({
     useState(false);
 
   return (
-    <Box sx={{ position: "relative", overflow: "hidden" }}>
+    <Box
+      sx={{
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: editorBackgroundColor,
+      }}
+    >
+      <CCComponentEditorGrid />
       <CCComponentEditorRenderer />
       <CCComponentEditorTitleBar
         onComponentPropertyDialogOpen={() =>

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

@@ -1,6 +1,5 @@
-import * as matrix from "transformation-matrix";
 import { useComponentEditorStore } from "../store";
-import { whiteColor } from "../../../../common/theme";
+import { vector2 } from "../../../../common/vector2";
 
 export default function CCComponentEditorRendererBackground() {
   const componentEditorState = useComponentEditorStore()();
@@ -14,28 +13,20 @@ export default function CCComponentEditorRendererBackground() {
       }}
       onPointerDown={(pointerDownEvent) => {
         const { currentTarget } = pointerDownEvent;
-        const startUserTransformation =
-          componentEditorState.userPerspectiveTransformation;
-        const startInverseViewTransformation =
-          componentEditorState.getInverseViewTransformation();
-        const startPoint = matrix.applyToPoint(startInverseViewTransformation, {
-          x: pointerDownEvent.nativeEvent.offsetX,
-          y: pointerDownEvent.nativeEvent.offsetY,
-        });
+        const startPerspective = componentEditorState.perspective;
+        const startPoint = vector2.fromDomEvent(pointerDownEvent.nativeEvent);
         const onPointerMove = (pointerMoveEvent: PointerEvent) => {
-          const endPoint = matrix.applyToPoint(startInverseViewTransformation, {
-            x: pointerMoveEvent.offsetX,
-            y: pointerMoveEvent.offsetY,
-          });
-          componentEditorState.setUserPerspectiveTransformation(
-            matrix.compose(
-              startUserTransformation,
-              matrix.translate(
-                endPoint.x - startPoint.x,
-                endPoint.y - startPoint.y
+          const endPoint = vector2.fromDomEvent(pointerMoveEvent);
+          componentEditorState.setPerspective({
+            ...startPerspective,
+            center: vector2.sub(
+              startPerspective.center,
+              vector2.mul(
+                vector2.sub(endPoint, startPoint),
+                startPerspective.scale
               )
-            )
-          );
+            ),
+          });
         };
         currentTarget.addEventListener("pointermove", onPointerMove);
         const onPointerUp = () => {
@@ -45,22 +36,22 @@ export default function CCComponentEditorRendererBackground() {
         currentTarget.addEventListener("pointerup", onPointerUp);
       }}
       onWheel={(wheelEvent) => {
-        const scale = Math.exp(-wheelEvent.deltaY / 256);
-        const center = matrix.applyToPoint(
-          componentEditorState.getInverseViewTransformation(),
-          {
-            x: wheelEvent.nativeEvent.offsetX,
-            y: wheelEvent.nativeEvent.offsetY,
-          }
-        );
-        componentEditorState.setUserPerspectiveTransformation(
-          matrix.compose(
-            componentEditorState.userPerspectiveTransformation,
-            matrix.scale(scale, scale, center.x, center.y)
-          )
+        const scaleDelta = Math.exp(wheelEvent.deltaY / 256);
+        const scaleCenter = componentEditorState.fromCanvasToStage(
+          vector2.fromDomEvent(wheelEvent.nativeEvent)
         );
+        componentEditorState.setPerspective({
+          scale: componentEditorState.perspective.scale * scaleDelta,
+          center: vector2.add(
+            scaleCenter,
+            vector2.mul(
+              vector2.sub(componentEditorState.perspective.center, scaleCenter),
+              scaleDelta
+            )
+          ),
+        });
       }}
-      fill={whiteColor}
+      fill="transparent"
     />
   );
 }

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

@@ -1,6 +1,5 @@
 import nullthrows from "nullthrows";
 import { useState } from "react";
-import * as matrix from "transformation-matrix";
 import type { CCNodeId } from "../../../../store/node";
 import { useNode } from "../../../../store/react/selectors";
 import { useStore } from "../../../../store/react";
@@ -9,6 +8,7 @@ import CCComponentEditorRendererNodePin from "./NodePin";
 import getCCComponentEditorRendererNodeGeometry from "./Node.geometry";
 import ensureStoreItem from "../../../../store/react/error";
 import { blackColor, primaryColor, whiteColor } from "../../../../common/theme";
+import { vector2 } from "../../../../common/vector2";
 
 export type CCComponentEditorRendererNodeProps = {
   nodeId: CCNodeId;
@@ -22,40 +22,31 @@ const CCComponentEditorRendererNode = ensureStoreItem(
     const geometry = getCCComponentEditorRendererNodeGeometry(store, nodeId);
     const componentEditorState = useComponentEditorStore()();
     const [dragging, setDragging] = useState(false);
-    const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 });
-    const [previousNodePosition, setPreviousNodePosition] = useState({
-      x: 0,
-      y: 0,
-    });
+    const [dragStartPosition, setDragStartPosition] = useState(vector2.zero);
+    const [previousNodePosition, setPreviousNodePosition] = useState(
+      vector2.zero
+    );
 
     const handleDragStart = (e: React.PointerEvent) => {
-      setDragStartPosition({
-        x: e.nativeEvent.offsetX,
-        y: e.nativeEvent.offsetY,
-      });
-      setPreviousNodePosition({
-        x: node.position.x,
-        y: node.position.y,
-      });
+      setDragStartPosition(vector2.fromDomEvent(e.nativeEvent));
+      setPreviousNodePosition(node.position);
       setDragging(true);
       e.currentTarget.setPointerCapture(e.pointerId);
     };
 
     const handleDragging = (e: React.PointerEvent) => {
       if (dragging) {
-        const { sx, sy } = matrix.decomposeTSR(
-          componentEditorState.getInverseViewTransformation()
-        ).scale;
-        const transformation = matrix.scale(sx, sy);
-        const diff = matrix.applyToPoint(transformation, {
-          x: e.nativeEvent.offsetX - dragStartPosition.x,
-          y: e.nativeEvent.offsetY - dragStartPosition.y,
-        });
         store.nodes.update(nodeId, {
-          position: {
-            x: previousNodePosition.x + diff.x,
-            y: previousNodePosition.y + diff.y,
-          },
+          position: vector2.add(
+            previousNodePosition,
+            vector2.mul(
+              vector2.sub(
+                vector2.fromDomEvent(e.nativeEvent),
+                dragStartPosition
+              ),
+              componentEditorState.perspective.scale
+            )
+          ),
         });
       }
     };

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

@@ -1,38 +1,35 @@
 import { useState, type PointerEvent, type ReactNode } from "react";
-import * as matrix from "transformation-matrix";
 import { KDTree } from "mnemonist";
 import nullthrows from "nullthrows";
-import type { Point } from "../../../../common/types";
 import type { CCNodePinId } from "../../../../store/nodePin";
 import { CCComponentEditorRendererConnectionCore } from "./Connection";
 import { useComponentEditorStore } from "../store";
 import { useStore } from "../../../../store/react";
 import getCCComponentEditorRendererNodeGeometry from "./Node.geometry";
 import { CCConnectionStore } from "../../../../store/connection";
 import type { SimulationValue } from "../store/slices/core";
+import { vector2, type Vector2 } from "../../../../common/vector2";
 
 const NODE_PIN_POSITION_SENSITIVITY = 10;
 
 export type CCComponentEditorRendererNodeProps = {
   nodePinId: CCNodePinId;
-  position: Point;
+  position: Vector2;
 };
 export default function CCComponentEditorRendererNodePin({
   nodePinId,
   position,
 }: CCComponentEditorRendererNodeProps) {
   const { store } = useStore();
+  const componentEditorState = useComponentEditorStore()();
   const nodePin = nullthrows(store.nodePins.get(nodePinId));
   const node = nullthrows(store.nodes.get(nodePin.nodeId));
   const componentPin = nullthrows(
     store.componentPins.get(nodePin.componentPinId)
   );
 
-  const inverseViewTransformation = useComponentEditorStore()((s) =>
-    s.getInverseViewTransformation()
-  );
   const [draggingState, setDraggingState] = useState<{
-    cursorPosition: Point;
+    cursorPosition: Vector2;
     nodePinPositionKDTree: KDTree<CCNodePinId>;
   } | null>(null);
   const onDrag = (e: PointerEvent) => {
@@ -62,10 +59,9 @@ export default function CCComponentEditorRendererNodePin({
       );
     }
     setDraggingState({
-      cursorPosition: matrix.applyToPoint(inverseViewTransformation, {
-        x: e.nativeEvent.offsetX,
-        y: e.nativeEvent.offsetY,
-      }),
+      cursorPosition: componentEditorState.fromCanvasToStage(
+        vector2.fromDomEvent(e.nativeEvent)
+      ),
       nodePinPositionKDTree,
     });
   };
@@ -110,7 +106,6 @@ export default function CCComponentEditorRendererNodePin({
   const hasNoConnection =
     store.connections.getConnectionsByNodePinId(nodePinId).length === 0;
 
-  const componentEditorStore = useComponentEditorStore()();
   const pinType = componentPin.type;
   const simulationValueToString = (simulationValue: SimulationValue) => {
     return simulationValue.reduce(
@@ -123,18 +118,18 @@ export default function CCComponentEditorRendererNodePin({
   let nodePinValueInit = null;
   if (isSimulationMode && hasNoConnection) {
     if (pinType === "input") {
-      nodePinValueInit = componentEditorStore.getInputValue(
+      nodePinValueInit = componentEditorState.getInputValue(
         implementedComponentPin!.id
       )!;
     } else {
-      nodePinValueInit = componentEditorStore.getNodePinValue(nodePinId)!;
+      nodePinValueInit = componentEditorState.getNodePinValue(nodePinId)!;
     }
   }
   const nodePinValue = nodePinValueInit;
   const updateInputValue = () => {
     const updatedPinValue = [...nodePinValue!];
     updatedPinValue[0] = !updatedPinValue[0];
-    componentEditorStore.setInputValue(
+    componentEditorState.setInputValue(
       implementedComponentPin!.id,
       updatedPinValue
     );