Get back some changes

src/components/Board/ActionPane.js

@@ -34,7 +34,7 @@ const ActionPane = ({ children }) => {
         clientY,
         button,
       } = e;
-      if (button === 0 /*&& !e.altKey*/) {
+      if (button === 0 && !e.altKey) {
         // Allow text selection instead of moving
         if (["INPUT", "TEXTAREA"].includes(target.tagName)) return;
 

src/components/Board/Cursors/CursorPane.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Cursors from "./Cursors";
 import { useC2C } from "../../../hooks/useC2C";
-import { PanZoomRotateAtom } from "../PanZoomRotate";
+import { PanZoomRotateAtom } from "../";
 import { useRecoilValue } from "recoil";
 
 export const Board = ({ children, user, users }) => {

src/components/Board/PanZoomRotate.js

@@ -1,12 +1,7 @@
 import React from "react";
 
-import {
-  atom,
-  useRecoilState,
-  useRecoilValue,
-  useSetRecoilState,
-} from "recoil";
-import { BoardConfigAtom, BoardStateAtom } from "./";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { BoardConfigAtom, BoardStateAtom, PanZoomRotateAtom } from "./";
 import { insideClass } from "../../utils/";
 
 import usePrevious from "../../hooks/usePrevious";
@@ -19,18 +14,6 @@ import Gesture from "./Gesture";
 
 const TOLERANCE = 100;
 
-export const PanZoomRotateAtom = atom({
-  key: "PanZoomRotate",
-  default: {
-    translateX: 0,
-    translateY: 0,
-    scale: 1,
-    rotate: 0,
-    centerX: 0,
-    centerY: 0,
-  },
-});
-
 const Pane = styled.div.attrs(({ translateX, translateY, scale, rotate }) => ({
   style: {
     transform: `translate(${translateX}px, ${translateY}px) scale(${scale}) rotate(${rotate}deg)`,
@@ -53,7 +36,6 @@ const PanZoomRotate = ({ children, moveFirst }) => {
     y: 0,
   });
 
-  //const wrapperRef = React.useRef(null);
   const wrappedRef = React.useRef(null);
 
   // React on scale change
@@ -192,123 +174,6 @@ const PanZoomRotate = ({ children, moveFirst }) => {
     };
   }, []);
 
-  /*const onWheel = React.useCallback(
-    (e) => {
-      const { deltaX, deltaY, clientX, clientY, ctrlKey, altKey } = e;
-
-      // On a trackpad, the pinch gesture sets the ctrlKey to true.
-      // In that situation, we want to use the custom scaling below, not the browser default zoom.
-      // Hence in this situation we avoid to return immediately.
-      if (altKey || (ctrlKey && !isMacOS())) {
-        return;
-      }
-
-      // On a trackpad, the pinch and pan events are differentiated by the crtlKey value.
-      // On a pinch gesture, the ctrlKey is set to true, so we want to have a scaling effect.
-      // If we are only moving the fingers in the same direction, a pan is needed.
-      // Ref: https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
-      if (isMacOS() && !ctrlKey) {
-        setDim((prevDim) => {
-          return {
-            ...prevDim,
-            translateX: prevDim.translateX - 2 * deltaX,
-            translateY: prevDim.translateY - 2 * deltaY,
-          };
-        });
-      } else {
-        setScale((prevScale) => {
-          // Made the scale multiplicator Mac specific, as the default one was zooming way too much on each gesture.
-          const scaleMult =
-            (deltaY < 0 ? -3 : 3 * prevScale.scale) / (isMacOS() ? 50 : 20);
-          let newScale = prevScale.scale - scaleMult;
-
-          if (newScale > 8) {
-            newScale = 8;
-          }
-
-          if (newScale < 0.1) {
-            newScale = 0.1;
-          }
-          return {
-            scale: newScale,
-            x: clientX,
-            y: clientY,
-          };
-        });
-      }
-    },
-    [setDim]
-  );*/
-
-  /*const onMouseDown = (e) => {
-    if (!e.isPrimary) {
-      return;
-    }
-
-    const {
-      target,
-      altKey,
-      ctrlKey,
-      metaKey,
-      button,
-      clientX,
-      clientY,
-      pointerId,
-    } = e;
-
-    const outsideItem =
-      !insideClass(target, "item") || insideClass(target, "locked");
-
-    const metaKeyPressed = altKey || ctrlKey || metaKey;
-
-    const goodButton = moveFirst
-      ? button === 0 && !metaKeyPressed
-      : button === 1 || (button === 0 && metaKeyPressed);
-
-    if (goodButton && (outsideItem || !moveFirst)) {
-      stateRef.current.moving = true;
-      stateRef.current.startX = clientX;
-      stateRef.current.startY = clientY;
-      stateRef.current.startTranslateX = dim.translateX;
-      stateRef.current.startTranslateY = dim.translateY;
-      wrapperRef.current.style.cursor = "move";
-      try {
-        target.setPointerCapture(pointerId);
-      } catch (e) {
-        console.log("Fail to capture pointer", e);
-      }
-    }
-  };*/
-
-  /*const onMouseMove = (e) => {
-    if (stateRef.current.moving) {
-      if (!e.isPrimary) {
-        return;
-      }
-      const { clientX, clientY } = e;
-
-      const [deltaX, deltaY] = [
-        clientX - stateRef.current.startX,
-        clientY - stateRef.current.startY,
-      ];
-      setDim((prevDim) => {
-        return {
-          ...prevDim,
-          translateX: stateRef.current.startTranslateX + deltaX,
-          translateY: stateRef.current.startTranslateY + deltaY,
-        };
-      });
-    }
-  };*/
-
-  /*const onMouseUp = React.useCallback((e) => {
-    if (!e.isPrimary) {
-      return;
-    }
-    stateRef.current.moving = false;
-    wrapperRef.current.style.cursor = "auto";
-  }, []);*/
-
   const onZoom = (e) => {
     const { clientX, clientY, scale } = e;
     setScale((prevScale) => {
@@ -329,19 +194,7 @@ const PanZoomRotate = ({ children, moveFirst }) => {
   };
 
   const onPan = (e) => {
-    const { altKey, ctrlKey, metaKey, button, deltaX, deltaY, target } = e;
-
-    /*const outsideItem =
-      !insideClass(target, "item") || insideClass(target, "locked");
-
-    const metaKeyPressed = altKey || ctrlKey || metaKey;
-
-    const goodButton = moveFirst
-      ? button === 0 && !metaKeyPressed
-      : button === 1 || (button === 0 && metaKeyPressed);*/
-
-    //if (goodButton && (outsideItem || !moveFirst)) {
-    //if (outsideItem) {
+    const { deltaX, deltaY } = e;
     setDim((prevDim) => {
       return {
         ...prevDim,
@@ -349,7 +202,6 @@ const PanZoomRotate = ({ children, moveFirst }) => {
         translateY: prevDim.translateY + deltaY,
       };
     });
-    //}
   };
 
   const onDrag = (e) => {

src/components/Board/Selector.js

@@ -113,130 +113,6 @@ const Selector = ({ children, moveFirst }) => {
     };
   }, [setSelected, emptySelection]);
 
-  /*const onMouseDown = useRecoilCallback(
-    ({ snapshot }) => async (e) => {
-      if (!e.isPrimary) {
-        return;
-      }
-      const {
-        target,
-        pointerId,
-        currentTarget,
-        clientX,
-        clientY,
-        button,
-        altKey,
-        ctrlKey,
-        metaKey,
-      } = e;
-
-      const outsideItem =
-        !insideClass(target, "item") || insideClass(target, "locked");
-
-      const metaKeyPressed = altKey || ctrlKey || metaKey;
-
-      const goodButton = moveFirst
-        ? button === 1 || (button === 0 && metaKeyPressed)
-        : button === 0 && !metaKeyPressed;
-
-      if (goodButton && (outsideItem || moveFirst)) {
-        const { top, left } = currentTarget.getBoundingClientRect();
-
-        const panZoomRotate = await snapshot.getPromise(PanZoomRotateAtom);
-        const displayX = (clientX - left) / panZoomRotate.scale;
-        const displayY = (clientY - top) / panZoomRotate.scale;
-
-        stateRef.current.moving = true;
-        stateRef.current.startX = displayX;
-        stateRef.current.startY = displayY;
-
-        setSelector({ ...stateRef.current });
-        wrapperRef.current.style.cursor = "crosshair";
-
-        try {
-          currentTarget.setPointerCapture(pointerId);
-        } catch (e) {
-          console.log("Fail to capture pointer", e);
-        }
-
-        setBoardState((prev) => ({ ...prev, selecting: true }));
-      }
-    },
-    [moveFirst, setBoardState]
-  );*/
-
-  /*const onMouseMove = useRecoilCallback(
-    ({ snapshot }) => async (e) => {
-      if (stateRef.current.moving) {
-        if (!e.isPrimary) {
-          return;
-        }
-        const { currentTarget, clientX, clientY } = e;
-
-        const { top, left } = currentTarget.getBoundingClientRect();
-
-        const panZoomRotate = await snapshot.getPromise(PanZoomRotateAtom);
-
-        const currentX = (clientX - left) / panZoomRotate.scale;
-        const currentY = (clientY - top) / panZoomRotate.scale;
-
-        if (currentX > stateRef.current.startX) {
-          stateRef.current.left = stateRef.current.startX;
-          stateRef.current.width = currentX - stateRef.current.startX;
-        } else {
-          stateRef.current.left = currentX;
-          stateRef.current.width = -currentX + stateRef.current.startX;
-        }
-        if (currentY > stateRef.current.startY) {
-          stateRef.current.top = stateRef.current.startY;
-          stateRef.current.height = currentY - stateRef.current.startY;
-        } else {
-          stateRef.current.top = currentY;
-          stateRef.current.height = -currentY + stateRef.current.startY;
-        }
-
-        setSelector({ ...stateRef.current });
-      }
-    },
-    []
-  );*/
-
-  /*const onMouseUp = useRecoilCallback(
-    ({ snapshot }) => async (e) => {
-      const { target } = e;
-      if (stateRef.current.moving) {
-        if (!e.isPrimary) {
-          return;
-        }
-
-        const itemMap = await snapshot.getPromise(ItemMapAtom);
-
-        const selected = findSelected(itemMap, stateRef.current);
-
-        if (selected.length === 0) {
-          setSelected(emptySelection);
-        } else {
-          setSelected(selected);
-        }
-
-        stateRef.current = { moving: false };
-        setSelector({ ...stateRef.current });
-        wrapperRef.current.style.cursor = "auto";
-
-        setBoardState((prev) => ({ ...prev, selecting: false }));
-      } else {
-        if (
-          moveFirst &&
-          (!insideClass(target, "item") || insideClass(target, "locked")) &&
-          insideClass(target, "board")
-        ) {
-          setSelected(emptySelection);
-        }
-      }
-    },
-    [emptySelection, moveFirst, setBoardState, setSelected]
-  );*/
-
   const onDragStart = (e) => {
     const { button, altKey, ctrlKey, metaKey, target } = e;
 

src/components/Board/game/atoms.js

@@ -40,10 +40,23 @@ export const AllItemsSelector = selector({
   },
 });
 
+export const PanZoomRotateAtom = atom({
+  key: "PanZoomRotate",
+  default: {
+    translateX: 0,
+    translateY: 0,
+    scale: 1,
+    rotate: 0,
+    centerX: 0,
+    centerY: 0,
+  },
+});
+
 export default {
   ItemListAtom,
   BoardConfigAtom,
   AvailableItemListAtom,
   AllItemsSelector,
   ItemMapAtom,
+  PanZoomRotateAtom,
 };

src/components/Board/index.js

@@ -1,5 +1,4 @@
 export { default as Board } from "./Board";
-export { PanZoomRotateAtom } from "./PanZoomRotate";
 export { selectedItemsAtom } from "./Selector";
 export {
   AvailableItemListAtom,
@@ -8,4 +7,5 @@ export {
   ItemMapAtom,
   AllItemsSelector,
   BoardStateAtom,
+  PanZoomRotateAtom,
 } from "./game/atoms";

src/components/SelectedItemsPane.js

@@ -30,9 +30,10 @@ const SelectedPane = styled.div`
   padding: 0.5em;
   overflow-y: scroll;
   z-index: 2;
-  transform: scaleX(-1);
-  & > div {
-    transform: scaleX(-1);
+  & .close {
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
   }
 `;
 
@@ -300,6 +301,17 @@ export const SelectedItemsPane = () => {
             <header>
               {selectedItems.length === 1 && <h3>{t("Edit item")}</h3>}
               {selectedItems.length > 1 && <h3>{t("Edit all items")}</h3>}
+              <button
+                className="button clear icon-only close"
+                onClick={() => {
+                  setShowEdit(false);
+                }}
+              >
+                <img
+                  src="https://icongr.am/feather/x.svg?size=30&color=ffffff"
+                  alt={t("Close")}
+                />
+              </button>
             </header>
             <CardContent>
               <ItemFormFactory />

src/utils/settings.js

@@ -1,8 +1,12 @@
 export const API_ENDPOINT =
-  process.env.REACT_APP_API_ENDPOINT || "http://localhost:3001";
+  process.env.REACT_APP_API_ENDPOINT ||
+  window.location.origin ||
+  "http://localhost:3001";
 
 export const SOCKET_URL =
-  process.env.REACT_APP_SOCKET_URL || "http://localhost:4000";
+  process.env.REACT_APP_SOCKET_URL ||
+  window.location.origin ||
+  "http://localhost:3001";
 
 export const SOCKET_PATH = process.env.REACT_APP_SOCKET_PATH || "/socket.io";