temp

Author: chelproc

package-lock.json

@@ -18,6 +18,7 @@
 		"@mui/icons-material": "^6.3.0",
 		"@mui/material": "^6.3.0",
 		"eventemitter3": "^5.0.1",
+		"lodash-es": "^4.17.21",
 		"memoize-one": "^6.0.0",
 		"mnemonist": "^0.39.8",
 		"nullthrows": "^1.1.1",
@@ -31,6 +32,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
 		"@tsconfig/strictest": "^2.0.5",
+		"@types/lodash-es": "^4.17.12",
 		"@types/react": "^19.0.2",
 		"@types/react-dom": "^19.0.2",
 		"@vitejs/plugin-react": "^4.3.4",

package.json

@@ -1,15 +1,20 @@
 import { createTheme } from "@mui/material";
 
 // See https://www.figma.com/file/M3dC0Gk98IGSGlxY901rBh/
-export const blackColor = "#000000";
-export const whiteColor = "#ffffff";
-export const primaryColor = "#009966";
-export const errorColor = "#ff0000";
-export const editorBackgroundColor = "#fafafa";
-export const editorGridColor = "#dddddd";
+export const theme = {
+	palette: {
+		black: "#000000",
+		white: "#ffffff",
+		textPrimary: "#444444",
+		primary: "#009966",
+		error: "#ff0000",
+		editorBackground: "#fafafa",
+		editorGrid: "#dddddd",
+	},
+};
 
-export const theme = createTheme({
+export const muiTheme = createTheme({
 	palette: {
-		primary: { main: primaryColor },
+		primary: { main: theme.palette.primary },
 	},
 });

src/common/theme.ts

@@ -1,6 +1,6 @@
 import { AppBar } from "@mui/material";
 import type { CSSProperties } from "react";
-import { whiteColor } from "../common/theme";
+import { theme } from "../common/theme";
 
 export type GlobalHeaderProps = {
 	style: CSSProperties;
@@ -15,7 +15,7 @@ export default function GlobalHeader({ style }: GlobalHeaderProps) {
 			style={style}
 			sx={{
 				p: 2,
-				background: whiteColor,
+				background: theme.palette.white,
 				borderBottom: "1px solid",
 				borderColor: "divider",
 			}}

src/components/GlobalHeader.tsx

@@ -3,13 +3,13 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
-import { theme } from "./common/theme";
+import { muiTheme } from "./common/theme";
 import { StoreProvider } from "./store/react";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
 		<StoreProvider>
-			<ThemeProvider theme={theme}>
+			<ThemeProvider theme={muiTheme}>
 				<App />
 			</ThemeProvider>
 		</StoreProvider>

src/main.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import { theme } from "../../../../common/theme";
 import { vector2 } from "../../../../common/vector2";
 import { useComponentEditorStore } from "../store";
 
@@ -8,7 +9,7 @@ export default function CCComponentEditorGrid() {
 	const canvasOriginPosition = componentEditorState.fromStageToCanvas(
 		vector2.zero,
 	);
-	const canvasGridSize = 100 * 2 ** (Math.ceil(logScale) - logScale);
+	const canvasGridSize = 80 * 2 ** (Math.ceil(logScale) - logScale);
 
 	const elements: ReactElement[] = [];
 	let i = 0;
@@ -26,7 +27,7 @@ export default function CCComponentEditorGrid() {
 					left: 0,
 					width: "1px",
 					height: "100%",
-					backgroundColor: "rgba(0, 0, 0, 0.1)",
+					backgroundColor: theme.palette.editorGrid,
 					transform: `translateX(${x}px)`,
 				}}
 			/>,
@@ -47,7 +48,7 @@ export default function CCComponentEditorGrid() {
 					left: 0,
 					width: "100%",
 					height: "1px",
-					backgroundColor: "rgba(0, 0, 0, 0.1)",
+					backgroundColor: theme.palette.editorGrid,
 					transform: `translateY(${y}px)`,
 				}}
 			/>,

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

@@ -0,0 +1,37 @@
+import { useRef, type PointerEvent } from "react";
+import type { Vector2 } from "../../../../common/vector2";
+import { useComponentEditorStore } from "../store";
+
+export type UseDraggableProps = {
+	onClick?(e: PointerEvent): void;
+	onDragStart(e: PointerEvent): Vector2;
+	onDrag(e: PointerEvent): void;
+};
+
+export function useDraggable(props: UseDraggableProps) {
+	const { onClick, onDragStart, onDrag } = props;
+
+	const perspective = useComponentEditorStore()((state) => state.perspective);
+	const dragStateRef = useRef<{
+		pointerId: number;
+		initialPosition: Vector2;
+	} | null>(null);
+
+	return {
+		onPointerDown: (e: PointerEvent) => {
+			if (!(e.buttons & 1)) return;
+			dragStateRef.current = {
+				pointerId: e.pointerId,
+				initialPosition: { x: e.nativeEvent.clientX, y: e.nativeEvent.clientY },
+			};
+      onDragStart(e);
+			e.currentTarget.setPointerCapture(e.pointerId);
+		},
+    onPointerMove: (e: PointerEvent) => {
+      if (!dragStateRef.current) return;
+    },
+		onPointerUp: (e: PointerEvent) => {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		},
+	};
+}

src/pages/edit/Editor/hooks/drag.ts

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import nullthrows from "nullthrows";
 import { useState } from "react";
-import { editorBackgroundColor } from "../../../common/theme";
+import { theme } from "../../../common/theme";
 import { ComponentPropertyDialog } from "../../../components/ComponentPropertyDialog";
 import type { CCComponentId } from "../../../store/component";
 import { useStore } from "../../../store/react";
@@ -33,7 +33,7 @@ function CCComponentEditorContent({
 			sx={{
 				position: "relative",
 				overflow: "hidden",
-				backgroundColor: editorBackgroundColor,
+				backgroundColor: theme.palette.editorBackground,
 			}}
 		>
 			<CCComponentEditorGrid />

src/pages/edit/Editor/index.tsx

@@ -15,6 +15,10 @@ export default function CCComponentEditorRendererBackground() {
 				const { currentTarget } = pointerDownEvent;
 				const startPerspective = componentEditorState.perspective;
 				const startPoint = vector2.fromDomEvent(pointerDownEvent.nativeEvent);
+
+				pointerDownEvent.currentTarget.setPointerCapture(
+					pointerDownEvent.pointerId
+				);
 				const onPointerMove = (pointerMoveEvent: PointerEvent) => {
 					const endPoint = vector2.fromDomEvent(pointerMoveEvent);
 					componentEditorState.setPerspective({
@@ -23,31 +27,32 @@ export default function CCComponentEditorRendererBackground() {
 							startPerspective.center,
 							vector2.mul(
 								vector2.sub(endPoint, startPoint),
-								startPerspective.scale,
-							),
+								startPerspective.scale
+							)
 						),
 					});
 				};
-				currentTarget.addEventListener("pointermove", onPointerMove);
 				const onPointerUp = () => {
 					currentTarget.removeEventListener("pointermove", onPointerMove);
 					currentTarget.removeEventListener("pointerup", onPointerUp);
+					pointerDownEvent.currentTarget.releasePointerCapture(pointerDownEvent.pointerId);
 				};
+				currentTarget.addEventListener("pointermove", onPointerMove);
 				currentTarget.addEventListener("pointerup", onPointerUp);
 			}}
 			onWheel={(wheelEvent) => {
 				const scaleDelta = Math.exp(wheelEvent.deltaY / 256);
 				const scaleCenter = componentEditorState.fromCanvasToStage(
-					vector2.fromDomEvent(wheelEvent.nativeEvent),
+					vector2.fromDomEvent(wheelEvent.nativeEvent)
 				);
 				componentEditorState.setPerspective({
 					scale: componentEditorState.perspective.scale * scaleDelta,
 					center: vector2.add(
 						scaleCenter,
 						vector2.mul(
 							vector2.sub(componentEditorState.perspective.center, scaleCenter),
-							scaleDelta,
-						),
+							scaleDelta
+						)
 					),
 				});
 			}}

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

@@ -1,4 +1,5 @@
 import nullthrows from "nullthrows";
+import { theme } from "../../../../common/theme";
 import type { CCConnectionId } from "../../../../store/connection";
 import { useStore } from "../../../../store/react";
 import ensureStoreItem from "../../../../store/react/error";
@@ -31,7 +32,7 @@ export function CCComponentEditorRendererConnectionCore({
 				].join(" ")}`,
 				`h ${straightGap * direction}`,
 			].join(" ")}
-			stroke="black"
+			stroke={theme.palette.textPrimary}
 			strokeWidth="2"
 			fill="none"
 		/>