(null);
const { setDomEl, setCallbacks } = useMouseInput();
const setRenderer = useGlobalState((state) => state.setRenderer);
@@ -17,32 +19,31 @@ export const RendererContainer = () => {
const renderer = new Renderer(rendererEl.current);
setRenderer(renderer);
setDomEl(rendererEl.current);
- editor.send("INIT", {
- renderer,
- });
- }, [setRenderer, setDomEl, editor]);
+ modeManager.setRenderer(renderer);
+ modeManager.activateMode(Select);
+ }, [setRenderer, setDomEl, modeManager]);
useEffect(() => {
- if (!rendererEl.current) return;
+ if (!modeManager) return;
setCallbacks({
onMouseMove: (event) => {
- editor.send("MOUSE_MOVE", { ...event });
+ modeManager.onMouseEvent("MOUSE_MOVE", event);
},
onMouseDown: (event) => {
- editor.send("MOUSE_DOWN", { ...event });
+ modeManager.onMouseEvent("MOUSE_DOWN", event);
},
onMouseUp: (event) => {
- editor.send("MOUSE_UP", { ...event });
+ modeManager.onMouseEvent("MOUSE_UP", event);
},
onMouseEnter: (event) => {
- editor.send("MOUSE_ENTER", { ...event });
+ modeManager.onMouseEvent("MOUSE_ENTER", event);
},
onMouseLeave: (event) => {
- editor.send("MOUSE_LEAVE", { ...event });
+ modeManager.onMouseEvent("MOUSE_LEAVE", event);
},
});
- }, [setCallbacks, editor]);
+ }, [setCallbacks, modeManager]);
return (
{
position: "absolute",
top: 0,
left: 0,
- width: "100vw",
- height: "100vh",
+ width: "100%",
+ height: "100%",
}}
/>
);
-};
+});
diff --git a/src/components/ToolMenu/index.tsx b/src/components/ToolMenu/index.tsx
index efc553b..c74c562 100644
--- a/src/components/ToolMenu/index.tsx
+++ b/src/components/ToolMenu/index.tsx
@@ -1,20 +1,21 @@
import React from "react";
+import { observer } from "mobx-react";
import { useContext } from "react";
import { useTheme } from "@mui/material";
-import { useActor } from "@xstate/react";
import Card from "@mui/material/Card";
import { MenuItem } from "../MenuItem";
import PanToolIcon from "@mui/icons-material/PanTool";
import ZoomInIcon from "@mui/icons-material/ZoomIn";
import ZoomOutIcon from "@mui/icons-material/ZoomOut";
import NearMeIcon from "@mui/icons-material/NearMe";
-import { GlobalStateContext } from "../../contexts/GlobalStateContext";
import { useZoom } from "../../hooks/useZoom";
+import { modeManagerContext } from "../../contexts/ModeManagerContext";
+import { Select } from "../../modes/Select";
+import { Pan } from "../../modes/Pan";
-export const ToolMenu = () => {
+export const ToolMenu = observer(() => {
+ const modeManager = useContext(modeManagerContext);
const theme = useTheme();
- const { editor } = useContext(GlobalStateContext);
- const [state] = useActor(editor);
const { incrementZoom, decrementZoom } = useZoom();
return (
@@ -30,16 +31,16 @@ export const ToolMenu = () => {