react-sync-board 0.4.5 → 0.5.2

package/dist/cjs/index.js

@@ -4321,8 +4321,8 @@ function useResizeObserver(target, callback, enabled) {
 var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' x='0px' y='0px' viewBox='0 0 75.601318 94.9' xml:space='preserve' id='svg26' sodipodi:docname='lock.svg' width='75.601318' height='94.900002' inkscape:version='0.92.5 (2060ec1f9f%2c 2020-04-08)'%3e%3cmetadata id='metadata32'%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs id='defs30' /%3e%3csodipodi:namedview pagecolor='black' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1848' inkscape:window-height='1016' id='namedview28' showgrid='false' fit-margin-top='0' fit-margin-left='0' fit-margin-right='0' fit-margin-bottom='0' inkscape:zoom='5.3400704' inkscape:cx='3.2640013' inkscape:cy='45.072152' inkscape:window-x='1512' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='g16' /%3e%3cg id='g16' transform='translate(-12.2%2c-2.5)'%3e%3cpath d='M 75.4%2c36.8 H 34.1 V 24.6 c 0%2c-8.8 7.1%2c-15.9 15.9%2c-15.9 8.8%2c0 15.9%2c7.1 15.9%2c15.9 0%2c1.7 1.4%2c3.1 3.1%2c3.1 1.7%2c0 3.1%2c-1.4 3.1%2c-3.1 C 72.1%2c12.4 62.2%2c2.5 50%2c2.5 37.8%2c2.5 27.9%2c12.4 27.9%2c24.6 v 12.2 h -3.3 c -6.9%2c0 -12.4%2c5.6 -12.4%2c12.4 V 85 c 0%2c6.9 5.6%2c12.4 12.4%2c12.4 h 50.8 c 6.9%2c0 12.4%2c-5.6 12.4%2c-12.4 V 49.2 C 87.9%2c42.3 82.3%2c36.8 75.4%2c36.8 Z m 6.2%2c48.3 c 0%2c3.4 -2.8%2c6.2 -6.2%2c6.2 H 24.6 c -3.4%2c0 -6.2%2c-2.8 -6.2%2c-6.2 V 49.2 c 0%2c-3.4 2.8%2c-6.2 6.2%2c-6.2 h 50.8 c 3.4%2c0 6.2%2c2.8 6.2%2c6.2 z' id='path12' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3cpath d='m 59.8%2c57.6 -12.5%2c12.5 -7%2c-7 c -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 -1.2%2c1.2 -1.2%2c3.2 0%2c4.4 l 9.2%2c9.2 c 0.6%2c0.6 1.4%2c0.9 2.2%2c0.9 0.8%2c0 1.6%2c-0.3 2.2%2c-0.9 L 64.2%2c62 c 1.2%2c-1.2 1.2%2c-3.2 0%2c-4.4 -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 z' id='path14' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3c/g%3e%3c/svg%3e";
 
 var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
-    _excluded2 = ["x", "y", "layer", "moving"],
-    _excluded3 = ["state", "boardSize"];
+    _excluded2 = ["state", "boardSize", "currentUser"],
+    _excluded3 = ["x", "y", "layer", "moving"];
 
 var _templateObject$2;
 var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  transition: transform 150ms;\n  user-select: none;\n  padding: 4px;\n  transform: rotate(", "deg);\n\n  & .corner {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n\n  & .top-left {\n    top: 0;\n    left: 0;\n  }\n  & .top-right {\n    top: 0;\n    right: 0;\n  }\n  & .bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n  & .bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n\n  &.selected {\n    border: 2px dashed #db5034;\n    padding: 2px;\n    cursor: pointer;\n  }\n\n  &.locked::after {\n    content: \"\";\n    position: absolute;\n    width: 24px;\n    height: 30px;\n    top: 4px;\n    right: 4px;\n    opacity: 0.1;\n    background-image: url(\"", "\");\n    background-size: cover;\n    user-select: none;\n  }\n\n  &.locked:hover::after {\n    opacity: 0.3;\n  }\n"])), function (_ref) {
@@ -4372,7 +4372,7 @@ var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
     key: "componentDidCatch",
     value: function componentDidCatch(error) {
       // eslint-disable-next-line no-console
-      console.log("Error for item ".concat(this.state.itemId), error, this.props.state);
+      console.error("Error for item ".concat(this.state.itemId), error, this.props.state);
     }
   }, {
     key: "onReload",
@@ -4406,6 +4406,10 @@ var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return ItemErrorBoundary;
 }(React__default['default'].Component);
 
+var removeClass = function removeClass(e) {
+  e.target.className = "";
+};
+
 var Item = function Item(_ref3) {
   var _itemMap$error;
 
@@ -4426,28 +4430,19 @@ var Item = function Item(_ref3) {
       itemMap = _ref3.itemMap,
       unlocked = _ref3.unlocked;
 
-  var isMountedRef = React__default['default'].useRef(false);
   var animateRef = React__default['default'].useRef(null);
-  var Component = itemMap[type].component || null;
+
+  var Component = itemMap[type].component || function () {
+    return null;
+  };
+
   var updateState = React__default['default'].useCallback(function (callbackOrItem) {
     var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     return setState(id, callbackOrItem, sync);
-  }, [setState, id]); // Update actual size when update
-
-  React__default['default'].useEffect(function () {
-    isMountedRef.current = true;
-    return function () {
-      isMountedRef.current = false;
-    };
-  }, []);
+  }, [setState, id]);
   React__default['default'].useEffect(function () {
     animateRef.current.className = animate;
   }, [animate]);
-
-  var removeClass = function removeClass(e) {
-    e.target.className = "";
-  };
-
   var className = "item ".concat(id);
 
   if (locked) {
@@ -4466,6 +4461,9 @@ var Item = function Item(_ref3) {
     "data-id": id,
     className: className
   }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: "flex"
+    },
     ref: animateRef,
     onAnimationEnd: removeClass,
     onKeyDown: function onKeyDown(e) {
@@ -4503,31 +4501,42 @@ var MemoizedItem = /*#__PURE__*/React.memo(Item, function (_ref4, _ref5) {
       nextIsSelected = _ref5.isSelected,
       nextUnlocked = _ref5.unlocked;
   return prevIsSelected === nextIsSelected && prevUnlocked === nextUnlocked && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
-}); // Exclude positionning from memoization
+}); // Exclude positioning from memoization
 
 var PositionedItem = function PositionedItem(_ref6) {
-  var _ref6$state = _ref6.state;
-  _ref6$state = _ref6$state === void 0 ? {} : _ref6$state;
-
-  var _ref6$state$x = _ref6$state.x,
-      x = _ref6$state$x === void 0 ? 0 : _ref6$state$x,
-      _ref6$state$y = _ref6$state.y,
-      y = _ref6$state$y === void 0 ? 0 : _ref6$state$y,
-      layer = _ref6$state.layer,
-      moving = _ref6$state.moving,
-      stateRest = _objectWithoutProperties(_ref6$state, _excluded2),
+  var _rest$itemMap$state$t;
+
+  var _ref6$state = _ref6.state,
+      state = _ref6$state === void 0 ? {} : _ref6$state,
       boardSize = _ref6.boardSize,
-      rest = _objectWithoutProperties(_ref6, _excluded3);
+      currentUser = _ref6.currentUser,
+      rest = _objectWithoutProperties(_ref6, _excluded2);
+
+  var stateTrans = ((_rest$itemMap$state$t = rest.itemMap[state.type]) === null || _rest$itemMap$state$t === void 0 ? void 0 : _rest$itemMap$state$t.stateHook) || function (st) {
+    return st;
+  };
+
+  var _stateTrans = stateTrans(state, {
+    currentUser: currentUser
+  }),
+      _stateTrans$x = _stateTrans.x,
+      x = _stateTrans$x === void 0 ? 0 : _stateTrans$x,
+      _stateTrans$y = _stateTrans.y,
+      y = _stateTrans$y === void 0 ? 0 : _stateTrans$y,
+      _stateTrans$layer = _stateTrans.layer,
+      layer = _stateTrans$layer === void 0 ? 0 : _stateTrans$layer,
+      moving = _stateTrans.moving,
+      stateRest = _objectWithoutProperties(_stateTrans, _excluded3);
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
-      transform: "translate(".concat(x, "px, ").concat(y, "px)"),
-      display: "inline-block",
-      zIndex: ((layer || 0) + 4) * 10 + 100 + (moving ? 5 : 0),
-      // Items z-index between 100 and 200
       position: "absolute",
       top: "".concat(boardSize / 2, "px"),
-      left: "".concat(boardSize / 2, "px")
+      left: "".concat(boardSize / 2, "px"),
+      display: "inline-block",
+      transform: "translate(".concat(x, "px, ").concat(y, "px)"),
+      zIndex: (layer + 4) * 10 + 100 + (moving ? 5 : 0) // Items z-index between 100 and 200
+
     }
   }, /*#__PURE__*/React__default['default'].createElement(MemoizedItem, _extends$1({}, rest, {
     state: stateRest
@@ -4536,6 +4545,211 @@ var PositionedItem = function PositionedItem(_ref6) {
 
 var MemoizedPositionedItem = /*#__PURE__*/React.memo(PositionedItem);
 
+var persistUser = function persistUser(user) {
+  localStorage.setItem("user", JSON.stringify(user));
+};
+var colors = ["#037758", "#99092a", "#067070", "#c6650f", "#008726", "#3d7004", "#348402", "#057f58", "#b58612", "#c44c01", "#0a7704", "#0e910e", "#027377", "#c99e02", "#054160", "#157a01", "#b10de2", "#0d6289", "#bc5d03", "#ba0cd1", "#d39f10", "#0c4c7a", "#460782", "#a51f10", "#cecb10", "#9b0943", "#607f0c", "#007a4b", "#bf0daa", "#af0ad8"];
+
+var getRandomColor = function getRandomColor() {
+  return colors[Math.floor(Math.random() * colors.length)];
+}; // TODO remove user persistence
+
+
+var getUser = function getUser() {
+  if (localStorage.user) {
+    // Add some mandatory info if missing
+    var localUser = _objectSpread2({
+      name: "Player",
+      color: getRandomColor(),
+      uid: nanoid()
+    }, JSON.parse(localStorage.user)); // Id is given by server
+    // delete localUser.id;
+
+
+    persistUser(localUser);
+    return localUser;
+  }
+
+  var newUser = {
+    name: "Player",
+    color: getRandomColor(),
+    uid: nanoid()
+  };
+  persistUser(newUser);
+  return newUser;
+};
+var userAtom = recoil.atom({
+  key: "user",
+  "default": getUser()
+});
+var usersAtom = recoil.atom({
+  key: "users",
+  "default": []
+});
+var localUsersAtom = recoil.selector({
+  key: "localUsersAtom",
+  get: function get(_ref) {
+    var _get = _ref.get;
+
+    var currentUser = _get(userAtom);
+
+    var users = _get(usersAtom);
+
+    return users.filter(function (_ref2) {
+      var space = _ref2.space;
+      return space === currentUser.space;
+    });
+  }
+});
+
+var useUsers = function useUsers() {
+  var _useRecoilState = recoil.useRecoilState(userAtom),
+      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+      currentUser = _useRecoilState2[0],
+      setCurrentUserState = _useRecoilState2[1];
+
+  var users = recoil.useRecoilValue(usersAtom);
+  var localUsers = recoil.useRecoilValue(localUsersAtom);
+  var setCurrentUser = React__default['default'].useCallback(function (callbackOrUser) {
+    var callback = callbackOrUser;
+
+    if (_typeof(callbackOrUser) === "object") {
+      callback = function callback() {
+        return callbackOrUser;
+      };
+    }
+
+    setCurrentUserState(function (prevUser) {
+      var newUser = _objectSpread2(_objectSpread2({}, callback(prevUser)), {}, {
+        id: prevUser.id,
+        uid: prevUser.uid
+      });
+
+      persistUser(newUser);
+      return newUser;
+    });
+  }, [setCurrentUserState]);
+  React__default['default'].useEffect(function () {
+    // eslint-disable-next-line no-console
+    console.debug("Curent user is in space ".concat(currentUser.space));
+  }, [currentUser.space]);
+  return {
+    currentUser: currentUser,
+    setCurrentUser: setCurrentUser,
+    users: users,
+    localUsers: localUsers
+  };
+};
+
+var SubscribeUserEvents = function SubscribeUserEvents() {
+  var usersRef = React__default['default'].useRef([]);
+  var setUsers = recoil.useSetRecoilState(usersAtom);
+
+  var _useRecoilState = recoil.useRecoilState(userAtom),
+      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+      currentUser = _useRecoilState2[0],
+      setCurrentUserState = _useRecoilState2[1];
+
+  var _useWire = useWire("room"),
+      wire = _useWire.wire,
+      isMaster = _useWire.isMaster,
+      roomSpace = _useWire.room;
+
+  React__default['default'].useEffect(function () {
+    setCurrentUserState(function (prevUser) {
+      return _objectSpread2(_objectSpread2({}, prevUser), {}, {
+        id: wire.userId,
+        space: roomSpace
+      });
+    });
+    return function () {
+      setCurrentUserState(function (prevUser) {
+        return _objectSpread2(_objectSpread2({}, prevUser), {}, {
+          id: wire.userId,
+          space: null
+        });
+      });
+    };
+  }, [wire.userId, roomSpace, setCurrentUserState]);
+  React__default['default'].useEffect(function () {
+    if (!isMaster) {
+      var onGetUserList = function onGetUserList(userList) {
+        usersRef.current = userList;
+        setUsers(userList);
+      };
+
+      wire.call("getUserList").then(onGetUserList, function () {
+        // retry later
+        setTimeout(function () {
+          wire.call("getUserList") // eslint-disable-next-line no-console
+          .then(onGetUserList, function (error) {
+            return console.log(error);
+          });
+        }, 1000);
+      });
+    }
+  }, [wire, isMaster, setUsers]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
+    wire.publish("userUpdate", newUser, true);
+  }, [wire], 500);
+  React__default['default'].useEffect(function () {
+    if (currentUser && currentUser.id) {
+      debouncedEmitUpdateUser(currentUser);
+    }
+  }, [currentUser, debouncedEmitUpdateUser]);
+  React__default['default'].useEffect(function () {
+    var unsub = [];
+
+    if (isMaster) {
+      wire.register("getUserList", function () {
+        return usersRef.current;
+      }).then(function (unregister) {
+        unsub.push(unregister);
+      });
+      unsub.push(wire.subscribe("userUpdate", function (user) {
+        if (usersRef.current.find(function (u) {
+          return u.id === user.id;
+        })) {
+          var newUsers = usersRef.current.map(function (u) {
+            return u.id === user.id ? user : u;
+          });
+          usersRef.current = newUsers;
+        } else {
+          var _newUsers = [].concat(_toConsumableArray(usersRef.current), [user]);
+
+          usersRef.current = _newUsers;
+        }
+
+        setUsers(usersRef.current);
+        wire.publish("updateUserList", usersRef.current);
+      }));
+    }
+
+    unsub.push(wire.subscribe("userLeave", function (userId) {
+      usersRef.current = usersRef.current.filter(function (_ref) {
+        var id = _ref.id;
+        return id !== userId;
+      });
+      setUsers(usersRef.current);
+
+      if (isMaster) {
+        wire.publish("updateUserList", usersRef.current);
+      }
+    }));
+    unsub.push(wire.subscribe("updateUserList", function (newList) {
+      usersRef.current = newList;
+      setUsers(usersRef.current);
+    }));
+    return function () {
+      unsub.forEach(function (u) {
+        return u();
+      });
+    };
+  }, [wire, isMaster, setUsers]);
+  return null;
+};
+
 /** Allow to operate on locked items while u or l key is pressed  */
 
 var useUnlock = function useUnlock() {
@@ -4580,6 +4794,9 @@ var ItemList = function ItemList(_ref) {
   var _useRecoilValue = recoil.useRecoilValue(ConfigurationAtom),
       boardSize = _useRecoilValue.boardSize;
 
+  var _useUsers = useUsers(),
+      currentUser = _useUsers.currentUser;
+
   var unlocked = useUnlock();
   return itemList.map(function (itemId) {
     return /*#__PURE__*/React__default['default'].createElement(MemoizedPositionedItem, {
@@ -4589,7 +4806,8 @@ var ItemList = function ItemList(_ref) {
       isSelected: selectedItems.includes(itemId),
       unlocked: unlocked,
       itemMap: itemTemplates,
-      boardSize: boardSize
+      boardSize: boardSize,
+      currentUser: currentUser
     });
   });
 };
@@ -5113,6 +5331,8 @@ var Gesture = function Gesture(_ref6) {
             deltaY: 0,
             startX: stateRef.current.startX,
             startY: stateRef.current.startY,
+            clientX: stateRef.current.startX,
+            clientY: stateRef.current.startY,
             distanceX: 0,
             distanceY: 0,
             button: stateRef.current.currentButton,
@@ -5135,6 +5355,8 @@ var Gesture = function Gesture(_ref6) {
           deltaY: deltaY,
           startX: stateRef.current.startX,
           startY: stateRef.current.startY,
+          clientX: clientX,
+          clientY: clientY,
           distanceX: distanceX,
           distanceY: distanceY,
           button: stateRef.current.currentButton,
@@ -5240,6 +5462,8 @@ var Gesture = function Gesture(_ref6) {
         deltaY: clientY - stateRef.current.prevY,
         startX: stateRef.current.startX,
         startY: stateRef.current.startY,
+        clientX: clientX,
+        clientY: clientY,
         distanceX: clientX - stateRef.current.startX,
         distanceY: clientY - stateRef.current.startY,
         button: stateRef.current.currentButton,
@@ -5321,6 +5545,9 @@ var Selector = function Selector(_ref) {
   var setSelected = recoil.useSetRecoilState(SelectedItemsAtom);
   var setBoardState = recoil.useSetRecoilState(BoardStateAtom);
 
+  var _useItemActions = useItemActions(),
+      findElementUnderPointer = _useItemActions.findElementUnderPointer;
+
   var _React$useState = React__default['default'].useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selector = _React$useState2[0],
@@ -5385,50 +5612,68 @@ var Selector = function Selector(_ref) {
   }, [setSelected]);
   useThrottledEffect(updateSelected, [selector, updateSelected], 200);
 
-  var onDragStart = function onDragStart(_ref4) {
-    var button = _ref4.button,
-        altKey = _ref4.altKey,
-        ctrlKey = _ref4.ctrlKey,
-        metaKey = _ref4.metaKey,
-        target = _ref4.target;
-    var outsideItem = !insideClass(target, "item") || insideClass(target, "locked");
-    var metaKeyPressed = altKey || ctrlKey || metaKey;
-    var goodButton = moveFirst ? button === 1 || button === 0 && metaKeyPressed : button === 0 && !metaKeyPressed;
+  var onDragStart = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(event) {
+      var button, altKey, ctrlKey, metaKey, foundElement, metaKeyPressed, goodButton;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              button = event.button, altKey = event.altKey, ctrlKey = event.ctrlKey, metaKey = event.metaKey;
+              _context2.next = 3;
+              return findElementUnderPointer(event);
 
-    if (goodButton && (outsideItem || moveFirst)) {
-      stateRef.current.moving = true;
-      setBoardState(function (prev) {
-        return _objectSpread2(_objectSpread2({}, prev), {}, {
-          selecting: true
-        });
-      });
-      wrapperRef.current.style.cursor = "crosshair";
-    }
-  };
+            case 3:
+              foundElement = _context2.sent;
+              metaKeyPressed = altKey || ctrlKey || metaKey;
+              goodButton = moveFirst ? button === 1 || button === 0 && metaKeyPressed : button === 0 && !metaKeyPressed;
+
+              if (goodButton && (!foundElement || moveFirst)) {
+                stateRef.current.moving = true;
+                setBoardState(function (prev) {
+                  return _objectSpread2(_objectSpread2({}, prev), {}, {
+                    selecting: true
+                  });
+                });
+                wrapperRef.current.style.cursor = "crosshair";
+              }
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function onDragStart(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
 
   var onDrag = recoil.useRecoilCallback(function (_ref5) {
     var snapshot = _ref5.snapshot;
     return /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref6) {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref6) {
         var distanceY, distanceX, startX, startY, _wrapperRef$current$g, top, left, _yield$snapshot$getPr2, scale, displayX, displayY, displayDistanceX, displayDistanceY;
 
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 distanceY = _ref6.distanceY, distanceX = _ref6.distanceX, startX = _ref6.startX, startY = _ref6.startY;
 
                 if (!stateRef.current.moving) {
-                  _context2.next = 14;
+                  _context3.next = 14;
                   break;
                 }
 
                 _wrapperRef$current$g = wrapperRef.current.getBoundingClientRect(), top = _wrapperRef$current$g.top, left = _wrapperRef$current$g.left;
-                _context2.next = 5;
+                _context3.next = 5;
                 return snapshot.getPromise(BoardTransformAtom);
 
               case 5:
-                _yield$snapshot$getPr2 = _context2.sent;
+                _yield$snapshot$getPr2 = _context3.sent;
                 scale = _yield$snapshot$getPr2.scale;
                 displayX = (startX - left) / scale;
                 displayY = (startY - top) / scale;
@@ -5457,13 +5702,13 @@ var Selector = function Selector(_ref) {
 
               case 14:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2);
+        }, _callee3);
       }));
 
-      return function (_x) {
+      return function (_x2) {
         return _ref7.apply(this, arguments);
       };
     }();
@@ -5496,43 +5741,47 @@ var Selector = function Selector(_ref) {
   var onTap = recoil.useRecoilCallback(function (_ref9) {
     var snapshot = _ref9.snapshot;
     return /*#__PURE__*/function () {
-      var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref10) {
-        var target, ctrlKey, metaKey, foundItem, itemId, selectedItems;
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(event) {
+        var target, ctrlKey, metaKey, foundElement, itemId, selectedItems;
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
-                target = _ref10.target, ctrlKey = _ref10.ctrlKey, metaKey = _ref10.metaKey;
-                foundItem = insideClass(target, "item");
+                target = event.target, ctrlKey = event.ctrlKey, metaKey = event.metaKey;
+                _context4.next = 3;
+                return findElementUnderPointer(event);
+
+              case 3:
+                foundElement = _context4.sent;
 
-                if (!((!foundItem || insideClass(foundItem, "locked")) && insideClass(target, "board"))) {
-                  _context3.next = 6;
+                if (!(!foundElement && insideClass(target, "board"))) {
+                  _context4.next = 8;
                   break;
                 }
 
                 setSelected([]);
-                _context3.next = 14;
+                _context4.next = 16;
                 break;
 
-              case 6:
-                itemId = getIdFromElem(foundItem); // Being defensive here to avoid bug
+              case 8:
+                itemId = getIdFromElem(foundElement); // Being defensive here to avoid bug
 
                 if (itemId) {
-                  _context3.next = 10;
+                  _context4.next = 12;
                   break;
                 }
 
                 setSelected([]);
-                return _context3.abrupt("return");
+                return _context4.abrupt("return");
 
-              case 10:
-                _context3.next = 12;
+              case 12:
+                _context4.next = 14;
                 return snapshot.getPromise(SelectedItemsAtom);
 
-              case 12:
-                selectedItems = _context3.sent;
+              case 14:
+                selectedItems = _context4.sent;
 
-                if (foundItem && !selectedItems.includes(itemId)) {
+                if (foundElement && !selectedItems.includes(itemId)) {
                   if (ctrlKey || metaKey) {
                     setSelected(function (prev) {
                       return [].concat(_toConsumableArray(prev), [itemId]);
@@ -5542,19 +5791,19 @@ var Selector = function Selector(_ref) {
                   }
                 }
 
-              case 14:
+              case 16:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
           }
-        }, _callee3);
+        }, _callee4);
       }));
 
-      return function (_x2) {
-        return _ref11.apply(this, arguments);
+      return function (_x3) {
+        return _ref10.apply(this, arguments);
       };
     }();
-  }, [setSelected]);
+  }, [findElementUnderPointer, setSelected]);
   return /*#__PURE__*/React__default['default'].createElement(Gesture, {
     onDragStart: onDragStart,
     onDrag: onDrag,
@@ -5578,11 +5827,11 @@ var ActionPane = function ActionPane(_ref) {
 
   var _useItemActions = useItemActions(),
       moveItems = _useItemActions.moveItems,
-      placeItems = _useItemActions.placeItems;
+      placeItems = _useItemActions.placeItems,
+      findElementUnderPointer = _useItemActions.findElementUnderPointer;
 
   var setSelectedItems = recoil.useSetRecoilState(SelectedItemsAtom);
   var setBoardState = recoil.useSetRecoilState(BoardStateAtom);
-  var wrapperRef = React__default['default'].useRef(null);
   var actionRef = React__default['default'].useRef({}); // Use ref because pointer events are faster than react state management
 
   var selectedItemRef = React__default['default'].useRef({
@@ -5591,30 +5840,25 @@ var ActionPane = function ActionPane(_ref) {
   var onDragStart = recoil.useRecoilCallback(function (_ref2) {
     var snapshot = _ref2.snapshot;
     return /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3) {
-        var target, ctrlKey, metaKey, event, foundElement, selectedItems, itemId;
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(event) {
+        var ctrlKey, metaKey, originalEvent, foundElement, selectedItems, itemId;
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                target = _ref3.target, ctrlKey = _ref3.ctrlKey, metaKey = _ref3.metaKey, event = _ref3.event;
-
-                if (!["INPUT", "TEXTAREA"].includes(target.tagName)) {
-                  _context.next = 3;
-                  break;
-                }
-
-                return _context.abrupt("return");
+                ctrlKey = event.ctrlKey, metaKey = event.metaKey, originalEvent = event.event;
+                _context.next = 3;
+                return findElementUnderPointer(event);
 
               case 3:
-                foundElement = insideClass(target, "item");
+                foundElement = _context.sent;
 
-                if (!(foundElement && !hasClass(foundElement, "locked"))) {
+                if (!foundElement) {
                   _context.next = 13;
                   break;
                 }
 
-                event.stopPropagation();
+                originalEvent.stopPropagation();
                 _context.next = 8;
                 return snapshot.getPromise(SelectedItemsAtom);
 
@@ -5650,21 +5894,21 @@ var ActionPane = function ActionPane(_ref) {
       }));
 
       return function (_x) {
-        return _ref4.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }();
-  }, [setSelectedItems]);
-  var onDrag = recoil.useRecoilCallback(function (_ref5) {
-    var snapshot = _ref5.snapshot;
+  }, [findElementUnderPointer, setSelectedItems]);
+  var onDrag = recoil.useRecoilCallback(function (_ref4) {
+    var snapshot = _ref4.snapshot;
     return /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref6) {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref5) {
         var deltaX, deltaY, _yield$snapshot$getPr, scale, moveX, moveY;
 
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                deltaX = _ref6.deltaX, deltaY = _ref6.deltaY;
+                deltaX = _ref5.deltaX, deltaY = _ref5.deltaY;
 
                 if (!actionRef.current.moving) {
                   _context2.next = 10;
@@ -5698,12 +5942,12 @@ var ActionPane = function ActionPane(_ref) {
       }));
 
       return function (_x2) {
-        return _ref7.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }();
   }, [moveItems, setBoardState]);
-  var onDragEnd = recoil.useRecoilCallback(function (_ref8) {
-    var snapshot = _ref8.snapshot;
+  var onDragEnd = recoil.useRecoilCallback(function (_ref7) {
+    var snapshot = _ref7.snapshot;
     return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
       var _yield$snapshot$getPr2, _yield$snapshot$getPr3, boardGridSize, gridSize;
 
@@ -5746,10 +5990,10 @@ var ActionPane = function ActionPane(_ref) {
       }, _callee3);
     }));
   }, [placeItems, setBoardState]);
-  var onKeyDown = recoil.useRecoilCallback(function (_ref10) {
-    var snapshot = _ref10.snapshot;
+  var onKeyDown = recoil.useRecoilCallback(function (_ref9) {
+    var snapshot = _ref9.snapshot;
     return /*#__PURE__*/function () {
-      var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(e) {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(e) {
         var selectedItems, _yield$snapshot$getPr4, _yield$snapshot$getPr5, boardGridSize, moveX, moveY, gridSize;
 
         return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -5842,7 +6086,7 @@ var ActionPane = function ActionPane(_ref) {
       }));
 
       return function (_x3) {
-        return _ref11.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }();
   }, [moveItems, placeItems]);
@@ -5856,9 +6100,7 @@ var ActionPane = function ActionPane(_ref) {
     onDragStart: onDragStart,
     onDrag: onDrag,
     onDragEnd: onDragEnd
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    ref: wrapperRef
-  }, children));
+  }, children);
 };
 
 function t(t, n, r) {
@@ -6053,313 +6295,108 @@ var Cursor = function Cursor(_ref3) {
     color: color,
     textColor: textColor
   }, text));
-};
-
-var MemoizedCursor = /*#__PURE__*/React__default['default'].memo(Cursor);
-
-var PositionnedCursor = function PositionnedCursor(_ref4) {
-  var pos = _ref4.pos,
-      rest = _objectWithoutProperties(_ref4, _excluded$1);
-
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      transform: "translate(".concat(pos.x - 5, "px, ").concat(pos.y - 3, "px)"),
-      top: 0,
-      left: 0,
-      zIndex: 210,
-      position: "fixed",
-      pointerEvents: "none"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(MemoizedCursor, rest));
-};
-
-var Cursors = function Cursors(_ref) {
-  var users = _ref.users;
-
-  var _useWire = useWire("board"),
-      wire = _useWire.wire;
-
-  var _React$useState = React__default['default'].useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      cursors = _React$useState2[0],
-      setCursors = _React$useState2[1];
-
-  var preventRef = React__default['default'].useRef(false);
-  var usersById = React__default['default'].useMemo(function () {
-    return users.reduce(function (acc, user) {
-      acc[user.id] = user;
-      return acc;
-    }, {});
-  }, [users]); // Prevent race condition when removing user
-
-  var currentCursor = React__default['default'].useMemo(function () {
-    return users.reduce(function (acc, user) {
-      if (cursors[user.id]) {
-        acc[user.id] = cursors[user.id];
-      }
-
-      return acc;
-    }, {});
-  }, [users, cursors]);
-  React__default['default'].useEffect(function () {
-    setCursors(function (prevCursors) {
-      return users.reduce(function (acc, user) {
-        if (prevCursors[user.id]) {
-          acc[user.id] = prevCursors[user.id];
-        }
-
-        return acc;
-      }, {});
-    });
-  }, [users]);
-  React__default['default'].useEffect(function () {
-    var unsub = [];
-    unsub.push(wire.subscribe("cursorMove", function (_ref2) {
-      var userId = _ref2.userId,
-          pos = _ref2.pos;
-      // Avoid move after cursor off
-      if (preventRef.current) return;
-      setCursors(function (prevCursors) {
-        return _objectSpread2(_objectSpread2({}, prevCursors), {}, _defineProperty({}, userId, pos));
-      });
-    }));
-    unsub.push(wire.subscribe("cursorOff", function (_ref3) {
-      var userId = _ref3.userId;
-      setCursors(function (prevCursors) {
-        var newCursors = _objectSpread2({}, prevCursors);
-
-        delete newCursors[userId];
-        return newCursors;
-      }); // Prevent next moves
-
-      preventRef.current = true;
-      setTimeout(function () {
-        preventRef.current = false;
-      }, 100);
-    }));
-    return function () {
-      unsub.map(function (c) {
-        return c();
-      });
-    };
-  }, [wire]);
-  return /*#__PURE__*/React__default['default'].createElement("div", null, Object.entries(currentCursor).map(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        userId = _ref5[0],
-        pos = _ref5[1];
-
-    return /*#__PURE__*/React__default['default'].createElement(PositionnedCursor, {
-      key: userId,
-      pos: pos,
-      text: usersById[userId].name,
-      color: usersById[userId].color
-    });
-  }));
-};
-
-var persistUser = function persistUser(user) {
-  localStorage.setItem("user", JSON.stringify(user));
-};
-var colors = ["#037758", "#99092a", "#067070", "#c6650f", "#008726", "#3d7004", "#348402", "#057f58", "#b58612", "#c44c01", "#0a7704", "#0e910e", "#027377", "#c99e02", "#054160", "#157a01", "#b10de2", "#0d6289", "#bc5d03", "#ba0cd1", "#d39f10", "#0c4c7a", "#460782", "#a51f10", "#cecb10", "#9b0943", "#607f0c", "#007a4b", "#bf0daa", "#af0ad8"];
-
-var getRandomColor = function getRandomColor() {
-  return colors[Math.floor(Math.random() * colors.length)];
-}; // TODO remove user persistence
-
-
-var getUser = function getUser() {
-  if (localStorage.user) {
-    // Add some mandatory info if missing
-    var localUser = _objectSpread2({
-      name: "Player",
-      color: getRandomColor(),
-      uid: nanoid()
-    }, JSON.parse(localStorage.user)); // Id is given by server
-    // delete localUser.id;
-
-
-    persistUser(localUser);
-    return localUser;
-  }
-
-  var newUser = {
-    name: "Player",
-    color: getRandomColor(),
-    uid: nanoid()
-  };
-  persistUser(newUser);
-  return newUser;
-};
-var userAtom = recoil.atom({
-  key: "user",
-  "default": getUser()
-});
-var usersAtom = recoil.atom({
-  key: "users",
-  "default": []
-});
-var localUsersAtom = recoil.selector({
-  key: "localUsersAtom",
-  get: function get(_ref) {
-    var _get = _ref.get;
-
-    var currentUser = _get(userAtom);
-
-    var users = _get(usersAtom);
-
-    return users.filter(function (_ref2) {
-      var space = _ref2.space;
-      return space === currentUser.space;
-    });
-  }
-});
-
-var useUsers = function useUsers() {
-  var _useRecoilState = recoil.useRecoilState(userAtom),
-      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-      currentUser = _useRecoilState2[0],
-      setCurrentUserState = _useRecoilState2[1];
-
-  var users = recoil.useRecoilValue(usersAtom);
-  var localUsers = recoil.useRecoilValue(localUsersAtom);
-  var setCurrentUser = React__default['default'].useCallback(function (callbackOrUser) {
-    var callback = callbackOrUser;
-
-    if (_typeof(callbackOrUser) === "object") {
-      callback = function callback() {
-        return callbackOrUser;
-      };
-    }
+};
 
-    setCurrentUserState(function (prevUser) {
-      var newUser = _objectSpread2(_objectSpread2({}, callback(prevUser)), {}, {
-        id: prevUser.id,
-        uid: prevUser.uid
-      });
+var MemoizedCursor = /*#__PURE__*/React__default['default'].memo(Cursor);
 
-      persistUser(newUser);
-      return newUser;
-    });
-  }, [setCurrentUserState]);
-  React__default['default'].useEffect(function () {
-    // eslint-disable-next-line no-console
-    console.debug("Curent user is in space ".concat(currentUser.space));
-  }, [currentUser.space]);
-  return {
-    currentUser: currentUser,
-    setCurrentUser: setCurrentUser,
-    users: users,
-    localUsers: localUsers
-  };
+var PositionnedCursor = function PositionnedCursor(_ref4) {
+  var pos = _ref4.pos,
+      rest = _objectWithoutProperties(_ref4, _excluded$1);
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      transform: "translate(".concat(pos.x - 5, "px, ").concat(pos.y - 3, "px)"),
+      top: 0,
+      left: 0,
+      zIndex: 210,
+      position: "fixed",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(MemoizedCursor, rest));
 };
 
-var SubscribeUserEvents = function SubscribeUserEvents() {
-  var usersRef = React__default['default'].useRef([]);
-  var setUsers = recoil.useSetRecoilState(usersAtom);
+var Cursors = function Cursors(_ref) {
+  var users = _ref.users;
 
-  var _useRecoilState = recoil.useRecoilState(userAtom),
-      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-      currentUser = _useRecoilState2[0],
-      setCurrentUserState = _useRecoilState2[1];
+  var _useWire = useWire("board"),
+      wire = _useWire.wire;
 
-  var _useWire = useWire("room"),
-      wire = _useWire.wire,
-      isMaster = _useWire.isMaster,
-      roomSpace = _useWire.room;
+  var _React$useState = React__default['default'].useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      cursors = _React$useState2[0],
+      setCursors = _React$useState2[1];
 
-  React__default['default'].useEffect(function () {
-    setCurrentUserState(function (prevUser) {
-      return _objectSpread2(_objectSpread2({}, prevUser), {}, {
-        id: wire.userId,
-        space: roomSpace
-      });
-    });
-    return function () {
-      setCurrentUserState(function (prevUser) {
-        return _objectSpread2(_objectSpread2({}, prevUser), {}, {
-          id: wire.userId,
-          space: null
-        });
-      });
-    };
-  }, [wire.userId, roomSpace, setCurrentUserState]);
-  React__default['default'].useEffect(function () {
-    if (!isMaster) {
-      var onGetUserList = function onGetUserList(userList) {
-        usersRef.current = userList;
-        setUsers(userList);
-      };
+  var preventRef = React__default['default'].useRef(false);
+  var usersById = React__default['default'].useMemo(function () {
+    return users.reduce(function (acc, user) {
+      acc[user.id] = user;
+      return acc;
+    }, {});
+  }, [users]); // Prevent race condition when removing user
 
-      wire.call("getUserList").then(onGetUserList, function () {
-        // retry later
-        setTimeout(function () {
-          wire.call("getUserList") // eslint-disable-next-line no-console
-          .then(onGetUserList, function (error) {
-            return console.log(error);
-          });
-        }, 1000);
-      });
-    }
-  }, [wire, isMaster, setUsers]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  var currentCursor = React__default['default'].useMemo(function () {
+    return users.reduce(function (acc, user) {
+      if (cursors[user.id]) {
+        acc[user.id] = cursors[user.id];
+      }
 
-  var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
-    wire.publish("userUpdate", newUser, true);
-  }, [wire], 500);
+      return acc;
+    }, {});
+  }, [users, cursors]);
   React__default['default'].useEffect(function () {
-    if (currentUser && currentUser.id) {
-      debouncedEmitUpdateUser(currentUser);
-    }
-  }, [currentUser, debouncedEmitUpdateUser]);
+    setCursors(function (prevCursors) {
+      return users.reduce(function (acc, user) {
+        if (prevCursors[user.id]) {
+          acc[user.id] = prevCursors[user.id];
+        }
+
+        return acc;
+      }, {});
+    });
+  }, [users]);
   React__default['default'].useEffect(function () {
     var unsub = [];
-
-    if (isMaster) {
-      wire.register("getUserList", function () {
-        return usersRef.current;
-      }).then(function (unregister) {
-        unsub.push(unregister);
+    unsub.push(wire.subscribe("cursorMove", function (_ref2) {
+      var userId = _ref2.userId,
+          pos = _ref2.pos;
+      // Avoid move after cursor off
+      if (preventRef.current) return;
+      setCursors(function (prevCursors) {
+        return _objectSpread2(_objectSpread2({}, prevCursors), {}, _defineProperty({}, userId, pos));
       });
-      unsub.push(wire.subscribe("userUpdate", function (user) {
-        if (usersRef.current.find(function (u) {
-          return u.id === user.id;
-        })) {
-          var newUsers = usersRef.current.map(function (u) {
-            return u.id === user.id ? user : u;
-          });
-          usersRef.current = newUsers;
-        } else {
-          var _newUsers = [].concat(_toConsumableArray(usersRef.current), [user]);
-
-          usersRef.current = _newUsers;
-        }
-
-        setUsers(usersRef.current);
-        wire.publish("updateUserList", usersRef.current);
-      }));
-    }
+    }));
+    unsub.push(wire.subscribe("cursorOff", function (_ref3) {
+      var userId = _ref3.userId;
+      setCursors(function (prevCursors) {
+        var newCursors = _objectSpread2({}, prevCursors);
 
-    unsub.push(wire.subscribe("userLeave", function (userId) {
-      usersRef.current = usersRef.current.filter(function (_ref) {
-        var id = _ref.id;
-        return id !== userId;
-      });
-      setUsers(usersRef.current);
+        delete newCursors[userId];
+        return newCursors;
+      }); // Prevent next moves
 
-      if (isMaster) {
-        wire.publish("updateUserList", usersRef.current);
-      }
-    }));
-    unsub.push(wire.subscribe("updateUserList", function (newList) {
-      usersRef.current = newList;
-      setUsers(usersRef.current);
+      preventRef.current = true;
+      setTimeout(function () {
+        preventRef.current = false;
+      }, 100);
     }));
     return function () {
-      unsub.forEach(function (u) {
-        return u();
+      unsub.map(function (c) {
+        return c();
       });
     };
-  }, [wire, isMaster, setUsers]);
-  return null;
+  }, [wire]);
+  return /*#__PURE__*/React__default['default'].createElement("div", null, Object.entries(currentCursor).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        userId = _ref5[0],
+        pos = _ref5[1];
+
+    return /*#__PURE__*/React__default['default'].createElement(PositionnedCursor, {
+      key: userId,
+      pos: pos,
+      text: usersById[userId].name,
+      color: usersById[userId].color
+    });
+  }));
 };
 
 var CursorPane = function CursorPane(_ref) {
@@ -6431,8 +6468,8 @@ var CursorPane = function CursorPane(_ref) {
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    onMouseMove: onMouseMove,
-    onMouseLeave: onLeave
+    onPointerMove: onMouseMove,
+    onPointerLeave: onLeave
   }, children, /*#__PURE__*/React__default['default'].createElement(Cursors, {
     users: users
   }));
@@ -6961,7 +6998,8 @@ var Board = function Board(_ref) {
       _ref$itemTemplates = _ref.itemTemplates,
       itemTemplates = _ref$itemTemplates === void 0 ? {} : _ref$itemTemplates,
       _ref$boardSize = _ref.boardSize,
-      boardSize = _ref$boardSize === void 0 ? DEFAULT_BOARD_MAX_SIZE : _ref$boardSize;
+      boardSize = _ref$boardSize === void 0 ? DEFAULT_BOARD_MAX_SIZE : _ref$boardSize,
+      children = _ref.children;
   var setConfiguration = recoil.useSetRecoilState(ConfigurationAtom);
 
   var _useDim = useDim(),
@@ -6999,7 +7037,7 @@ var Board = function Board(_ref) {
     className: "board"
   }, /*#__PURE__*/React__default['default'].createElement(ItemList, {
     itemTemplates: itemTemplates
-  })))))), /*#__PURE__*/React__default['default'].createElement(Selection, null));
+  }), children))))), /*#__PURE__*/React__default['default'].createElement(Selection, null));
 };
 
 var TOLERANCE = 100;
@@ -7361,14 +7399,7 @@ var useItemInteraction = function useItemInteraction(interaction) {
   var setInteractions = recoil.useSetRecoilState(ItemInteractionsAtom);
   var register = React__default['default'].useCallback(function (callback) {
     setInteractions(function (prev) {
-      if (!prev[interaction]) {
-        // eslint-disable-next-line no-param-reassign
-        prev[interaction] = [];
-      }
-
-      var newInter = _toConsumableArray(prev[interaction]);
-
-      newInter.push(callback);
+      var newInter = Array.isArray(prev[interaction]) ? [].concat(_toConsumableArray(prev[interaction]), [callback]) : [callback];
       return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, interaction, newInter));
     });
     return function () {
@@ -8008,6 +8039,133 @@ var useItemActions = function useItemActions() {
       };
     }();
   }, []);
+  var findElementUnderPointer = recoil.useRecoilCallback(function (_ref16) {
+    var snapshot = _ref16.snapshot;
+    return /*#__PURE__*/function () {
+      var _ref18 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(_ref17) {
+        var target,
+            clientX,
+            clientY,
+            _ref19,
+            _ref19$returnLocked,
+            returnLocked,
+            _ref19$passLocked,
+            passLocked,
+            foundElement,
+            isPassthrough,
+            itemList,
+            _yield$snapshot$getPr2,
+            boardWrapper,
+            elems,
+            i,
+            elem,
+            _args8 = arguments;
+
+        return regeneratorRuntime.wrap(function _callee8$(_context8) {
+          while (1) {
+            switch (_context8.prev = _context8.next) {
+              case 0:
+                target = _ref17.target, clientX = _ref17.clientX, clientY = _ref17.clientY;
+                _ref19 = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : {}, _ref19$returnLocked = _ref19.returnLocked, returnLocked = _ref19$returnLocked === void 0 ? false : _ref19$returnLocked, _ref19$passLocked = _ref19.passLocked, passLocked = _ref19$passLocked === void 0 ? false : _ref19$passLocked;
+
+                if (!["INPUT", "TEXTAREA"].includes(target.tagName)) {
+                  _context8.next = 4;
+                  break;
+                }
+
+                return _context8.abrupt("return", null);
+
+              case 4:
+                foundElement = insideClass(target, "item");
+
+                if (!foundElement) {
+                  _context8.next = 27;
+                  break;
+                }
+
+                if (!(!passLocked && hasClass(foundElement, "locked") && !hasClass(foundElement, "selected"))) {
+                  _context8.next = 8;
+                  break;
+                }
+
+                return _context8.abrupt("return", null);
+
+              case 8:
+                // Is it a passthrough  element?
+                isPassthrough = (hasClass(target, "passthrough") || !returnLocked && hasClass(foundElement, "locked")) && !hasClass(foundElement, "selected");
+
+                if (!isPassthrough) {
+                  _context8.next = 27;
+                  break;
+                }
+
+                _context8.next = 12;
+                return snapshot.getPromise(ItemListAtom);
+
+              case 12:
+                itemList = _context8.sent;
+                _context8.next = 15;
+                return snapshot.getPromise(ConfigurationAtom);
+
+              case 15:
+                _yield$snapshot$getPr2 = _context8.sent;
+                boardWrapper = _yield$snapshot$getPr2.boardWrapper;
+                // Found element under the cursor
+                elems = itemList.reduce(function (prev, itemId) {
+                  var elem = getItemElem(boardWrapper, itemId);
+                  var itemRect = elem.getBoundingClientRect();
+
+                  if (isPointInsideRect({
+                    x: clientX,
+                    y: clientY
+                  }, itemRect)) {
+                    prev.unshift(elem);
+                  }
+
+                  return prev;
+                }, []); // Figure out if one can be returned
+
+                i = 0;
+
+              case 19:
+                if (!(i < elems.length)) {
+                  _context8.next = 26;
+                  break;
+                }
+
+                elem = elems[i];
+
+                if (!(elem !== foundElement && (returnLocked || !hasClass(elem, "locked")))) {
+                  _context8.next = 23;
+                  break;
+                }
+
+                return _context8.abrupt("return", elem);
+
+              case 23:
+                i += 1;
+                _context8.next = 19;
+                break;
+
+              case 26:
+                return _context8.abrupt("return", null);
+
+              case 27:
+                return _context8.abrupt("return", foundElement);
+
+              case 28:
+              case "end":
+                return _context8.stop();
+            }
+          }
+        }, _callee8);
+      }));
+
+      return function (_x13) {
+        return _ref18.apply(this, arguments);
+      };
+    }();
+  }, []);
   return {
     putItemsOnTop: putItemsOnTop,
     batchUpdateItems: batchUpdateItems,
@@ -8022,6 +8180,7 @@ var useItemActions = function useItemActions() {
     pushItems: pushItems,
     removeItems: removeItems,
     getItemList: getItemList,
+    findElementUnderPointer: findElementUnderPointer,
     getItems: getItems
   };
 };