Moved map and map tokens to Konva

src/components/map/Map.js

@@ -1,24 +1,12 @@
-import React, { useRef, useEffect, useState, useContext } from "react";
-import { Box, Image } from "theme-ui";
+import React, { useState, useContext } from "react";
 
-import ProxyToken from "../token/ProxyToken";
-import TokenMenu from "../token/TokenMenu";
-import MapToken from "./MapToken";
-import MapDrawing from "./MapDrawing";
-import MapFog from "./MapFog";
 import MapControls from "./MapControls";
 
-import { omit } from "../../helpers/shared";
-import useDataSource from "../../helpers/useDataSource";
 import MapInteraction from "./MapInteraction";
+import MapToken from "./MapToken";
 
-import AuthContext from "../../contexts/AuthContext";
 import TokenDataContext from "../../contexts/TokenDataContext";
-
-import { mapSources as defaultMapSources } from "../../maps";
-
-const mapTokenProxyClassName = "map-token__proxy";
-const mapTokenMenuClassName = "map-token__menu";
+import TokenMenu from "../token/TokenMenu";
 
 function Map({
   map,
@@ -38,24 +26,12 @@ function Map({
   disabledTokens,
   loading,
 }) {
-  const { userId } = useContext(AuthContext);
   const { tokens } = useContext(TokenDataContext);
 
-  const mapSource = useDataSource(map, defaultMapSources);
-
-  function handleProxyDragEnd(isOnMap, tokenState) {
-    if (isOnMap && onMapTokenStateChange) {
-      onMapTokenStateChange({ ...tokenState, lastEditedBy: userId });
-    }
-
-    if (!isOnMap && onMapTokenStateRemove) {
-      onMapTokenStateRemove({ ...tokenState, lastEditedBy: userId });
-    }
-  }
-
-  /**
-   * Map drawing
-   */
+  const gridX = map && map.gridX;
+  const gridY = map && map.gridY;
+  const gridSizeNormalized = { x: 1 / gridX || 0, y: 1 / gridY || 0 };
+  const tokenSizePercent = gridSizeNormalized.x;
 
   const [selectedToolId, setSelectedToolId] = useState("pan");
   const [toolSettings, setToolSettings] = useState({
@@ -105,55 +81,7 @@ function Map({
   }
 
   const [mapShapes, setMapShapes] = useState([]);
-  function handleMapShapeAdd(shape) {
-    onMapDraw({ type: "add", shapes: [shape] });
-  }
-
-  function handleMapShapeRemove(shapeId) {
-    onMapDraw({ type: "remove", shapeIds: [shapeId] });
-  }
-
   const [fogShapes, setFogShapes] = useState([]);
-  function handleFogShapeAdd(shape) {
-    onFogDraw({ type: "add", shapes: [shape] });
-  }
-
-  function handleFogShapeRemove(shapeId) {
-    onFogDraw({ type: "remove", shapeIds: [shapeId] });
-  }
-
-  function handleFogShapeEdit(shape) {
-    onFogDraw({ type: "edit", shapes: [shape] });
-  }
-
-  // Replay the draw actions and convert them to shapes for the map drawing
-  useEffect(() => {
-    if (!mapState) {
-      return;
-    }
-    function actionsToShapes(actions, actionIndex) {
-      let shapesById = {};
-      for (let i = 0; i <= actionIndex; i++) {
-        const action = actions[i];
-        if (action.type === "add" || action.type === "edit") {
-          for (let shape of action.shapes) {
-            shapesById[shape.id] = shape;
-          }
-        }
-        if (action.type === "remove") {
-          shapesById = omit(shapesById, action.shapeIds);
-        }
-      }
-      return Object.values(shapesById);
-    }
-
-    setMapShapes(
-      actionsToShapes(mapState.mapDrawActions, mapState.mapDrawActionIndex)
-    );
-    setFogShapes(
-      actionsToShapes(mapState.fogDrawActions, mapState.fogDrawActionIndex)
-    );
-  }, [mapState]);
 
   const disabledControls = [];
   if (!allowMapDrawing) {
@@ -195,92 +123,6 @@ function Map({
     disabledSettings.fog.push("redo");
   }
 
-  /**
-   * Member setup
-   */
-
-  const mapRef = useRef(null);
-
-  const gridX = map && map.gridX;
-  const gridY = map && map.gridY;
-  const gridSizeNormalized = { x: 1 / gridX || 0, y: 1 / gridY || 0 };
-  const tokenSizePercent = gridSizeNormalized.x * 100;
-  const aspectRatio = (map && map.width / map.height) || 1;
-
-  const mapImage = (
-    <Box
-      sx={{
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      }}
-    >
-      <Image
-        ref={mapRef}
-        className="mapImage"
-        sx={{
-          width: "100%",
-          userSelect: "none",
-          touchAction: "none",
-        }}
-        src={mapSource}
-      />
-    </Box>
-  );
-
-  const mapTokens = (
-    <Box
-      sx={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: "none",
-      }}
-    >
-      {mapState &&
-        Object.values(mapState.tokens).map((tokenState) => (
-          <MapToken
-            key={tokenState.id}
-            token={tokens.find((token) => token.id === tokenState.tokenId)}
-            tokenState={tokenState}
-            tokenSizePercent={tokenSizePercent}
-            className={`${mapTokenProxyClassName} ${mapTokenMenuClassName}`}
-          />
-        ))}
-    </Box>
-  );
-
-  const mapDrawing = (
-    <MapDrawing
-      width={map ? map.width : 0}
-      height={map ? map.height : 0}
-      selectedTool={selectedToolId !== "fog" ? selectedToolId : "none"}
-      toolSettings={toolSettings[selectedToolId]}
-      shapes={mapShapes}
-      onShapeAdd={handleMapShapeAdd}
-      onShapeRemove={handleMapShapeRemove}
-      gridSize={gridSizeNormalized}
-    />
-  );
-
-  const mapFog = (
-    <MapFog
-      width={map ? map.width : 0}
-      height={map ? map.height : 0}
-      isEditing={selectedToolId === "fog"}
-      toolSettings={toolSettings["fog"]}
-      shapes={fogShapes}
-      onShapeAdd={handleFogShapeAdd}
-      onShapeRemove={handleFogShapeRemove}
-      onShapeEdit={handleFogShapeEdit}
-      gridSize={gridSizeNormalized}
-    />
-  );
-
   const mapControls = (
     <MapControls
       onMapChange={onMapChange}
@@ -296,33 +138,49 @@ function Map({
       disabledSettings={disabledSettings}
     />
   );
+
+  const [isTokenMenuOpen, setIsTokenMenuOpen] = useState(false);
+  const [tokenMenuOptions, setTokenMenuOptions] = useState({});
+  function handleTokenMenuOpen(tokenStateId, tokenImage) {
+    setTokenMenuOptions({ tokenStateId, tokenImage });
+    setIsTokenMenuOpen(true);
+  }
+
+  const mapTokens =
+    mapState &&
+    Object.values(mapState.tokens).map((tokenState) => (
+      <MapToken
+        key={tokenState.id}
+        token={tokens.find((token) => token.id === tokenState.tokenId)}
+        tokenState={tokenState}
+        tokenSizePercent={tokenSizePercent}
+        onTokenStateChange={onMapTokenStateChange}
+        onTokenMenuOpen={handleTokenMenuOpen}
+      />
+    ));
+
+  const tokenMenu = isTokenMenuOpen && (
+    <TokenMenu
+      isOpen={isTokenMenuOpen}
+      onRequestClose={() => setIsTokenMenuOpen(false)}
+      onTokenChange={onMapTokenStateChange}
+      tokenState={mapState.tokens[tokenMenuOptions.tokenStateId]}
+      tokenImage={tokenMenuOptions.tokenImage}
+    />
+  );
+
   return (
-    <>
-      <MapInteraction
-        map={map}
-        aspectRatio={aspectRatio}
-        isEnabled={selectedToolId === "pan"}
-        controls={mapControls}
-        loading={loading}
-      >
-        {map && mapImage}
-        {map && mapDrawing}
-        {map && mapFog}
-        {map && mapTokens}
-      </MapInteraction>
-      <ProxyToken
-        tokenClassName={mapTokenProxyClassName}
-        onProxyDragEnd={handleProxyDragEnd}
-        tokens={mapState && mapState.tokens}
-        disabledTokens={disabledTokens}
-      />
-      <TokenMenu
-        tokenClassName={mapTokenMenuClassName}
-        onTokenChange={onMapTokenStateChange}
-        tokens={mapState && mapState.tokens}
-        disabledTokens={disabledTokens}
-      />
-    </>
+    <MapInteraction
+      map={map}
+      controls={
+        <>
+          {mapControls}
+          {tokenMenu}
+        </>
+      }
+    >
+      {mapTokens}
+    </MapInteraction>
   );
 }