react-sync-board 0.4.1 → 0.4.4

package/dist/cjs/index.js

@@ -4692,11 +4692,35 @@ var isItemInsideElement = function isItemInsideElement(itemElement, otherElem) {
     }, rect);
   });
 };
+var getItemElem = function getItemElem(wrapper, itemId) {
+  var elems = wrapper.getElementsByClassName("item ".concat(itemId));
+  var elem = elems[0];
+
+  if (!elem) {
+    // eslint-disable-next-line no-console
+    console.error("Missing item ".concat(itemId));
+  }
+
+  return elem;
+};
+var getIdFromElem = function getIdFromElem(elem) {
+  var _elem$dataset;
+
+  var value = elem === null || elem === void 0 ? void 0 : (_elem$dataset = elem.dataset) === null || _elem$dataset === void 0 ? void 0 : _elem$dataset.id;
+
+  if (!value) {
+    var _elem$dataset2;
+
+    // eslint-disable-next-line no-console
+    console.error("getIdFromElem call fails", elem, JSON.stringify(elem === null || elem === void 0 ? void 0 : elem.dataset), elem === null || elem === void 0 ? void 0 : (_elem$dataset2 = elem.dataset) === null || _elem$dataset2 === void 0 ? void 0 : _elem$dataset2.id);
+  }
+
+  return value;
+};
 var getItemBoundingBox = function getItemBoundingBox(items) {
   var wrapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
   var result = items.reduce(function (prev, itemId) {
-    var elems = wrapper.getElementsByClassName("item ".concat(itemId));
-    var elem = elems[0];
+    var elem = getItemElem(wrapper, itemId);
     if (!elem) return null;
 
     var _elem$getBoundingClie = elem.getBoundingClientRect(),
@@ -4782,23 +4806,53 @@ var computeDistance = function computeDistance(_ref, _ref2) {
 
 var empty = function empty() {};
 
-var Gesture = function Gesture(_ref5) {
-  var children = _ref5.children,
-      _ref5$onDrag = _ref5.onDrag,
-      onDrag = _ref5$onDrag === void 0 ? empty : _ref5$onDrag,
-      _ref5$onDragStart = _ref5.onDragStart,
-      onDragStart = _ref5$onDragStart === void 0 ? empty : _ref5$onDragStart,
-      _ref5$onDragEnd = _ref5.onDragEnd,
-      onDragEnd = _ref5$onDragEnd === void 0 ? empty : _ref5$onDragEnd,
-      _ref5$onPan = _ref5.onPan,
-      onPan = _ref5$onPan === void 0 ? empty : _ref5$onPan,
-      _ref5$onTap = _ref5.onTap,
-      onTap = _ref5$onTap === void 0 ? empty : _ref5$onTap,
-      _ref5$onLongTap = _ref5.onLongTap,
-      onLongTap = _ref5$onLongTap === void 0 ? empty : _ref5$onLongTap,
-      _ref5$onDoubleTap = _ref5.onDoubleTap,
-      onDoubleTap = _ref5$onDoubleTap === void 0 ? empty : _ref5$onDoubleTap,
-      onZoom = _ref5.onZoom;
+var protect = function protect(fn) {
+  return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _args = arguments;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return fn.apply(void 0, _args);
+
+          case 3:
+            _context.next = 8;
+            break;
+
+          case 5:
+            _context.prev = 5;
+            _context.t0 = _context["catch"](0);
+            // eslint-disable-next-line no-console
+            console.error(_context.t0);
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 5]]);
+  }));
+};
+
+var Gesture = function Gesture(_ref6) {
+  var children = _ref6.children,
+      _ref6$onDrag = _ref6.onDrag,
+      onDrag = _ref6$onDrag === void 0 ? empty : _ref6$onDrag,
+      _ref6$onDragStart = _ref6.onDragStart,
+      onDragStart = _ref6$onDragStart === void 0 ? empty : _ref6$onDragStart,
+      _ref6$onDragEnd = _ref6.onDragEnd,
+      onDragEnd = _ref6$onDragEnd === void 0 ? empty : _ref6$onDragEnd,
+      _ref6$onPan = _ref6.onPan,
+      onPan = _ref6$onPan === void 0 ? empty : _ref6$onPan,
+      _ref6$onTap = _ref6.onTap,
+      onTap = _ref6$onTap === void 0 ? empty : _ref6$onTap,
+      _ref6$onLongTap = _ref6.onLongTap,
+      onLongTap = _ref6$onLongTap === void 0 ? empty : _ref6$onLongTap,
+      _ref6$onDoubleTap = _ref6.onDoubleTap,
+      onDoubleTap = _ref6$onDoubleTap === void 0 ? empty : _ref6$onDoubleTap,
+      onZoom = _ref6.onZoom;
   var wrapperRef = React__default['default'].useRef(null);
   var stateRef = React__default['default'].useRef({
     moving: false,
@@ -4807,36 +4861,36 @@ var Gesture = function Gesture(_ref5) {
   });
   var queueRef = React__default['default'].useRef([]); // Queue event to avoid async mess
 
-  var queue = React__default['default'].useCallback(function (callback) {
-    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
+  var queue = React__default['default'].useCallback(function (callback, args) {
+    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
-              return callback();
+              _context2.next = 2;
+              return protect(callback)(args);
 
             case 2:
               queueRef.current.shift();
 
               if (!(queueRef.current.length !== 0)) {
-                _context.next = 6;
+                _context2.next = 6;
                 break;
               }
 
-              _context.next = 6;
-              return queueRef.current[0]();
+              _context2.next = 6;
+              return protect(queueRef.current[0])();
 
             case 6:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     })));
 
     if (queueRef.current.length === 1) {
-      queueRef.current[0]();
+      protect(queueRef.current[0])();
     }
   }, []);
   var onWheel = React__default['default'].useCallback(function (e) {
@@ -4861,16 +4915,14 @@ var Gesture = function Gesture(_ref5) {
 
 
     if (isMacOS() && !ctrlKey) {
-      queue(function () {
-        return onPan({
-          deltaX: -2 * deltaX,
-          deltaY: -2 * deltaY,
-          button: 1,
-          ctrlKey: ctrlKey,
-          metaKey: metaKey,
-          target: target,
-          event: e
-        });
+      queue(onPan, {
+        deltaX: -2 * deltaX,
+        deltaY: -2 * deltaY,
+        button: 1,
+        ctrlKey: ctrlKey,
+        metaKey: metaKey,
+        target: target,
+        event: e
       });
     } else {
       // Quit if onZoom is not set
@@ -4892,26 +4944,24 @@ var Gesture = function Gesture(_ref5) {
         scale *= 2;
       }
 
-      queue(function () {
-        return onZoom({
-          scale: scale,
-          clientX: clientX,
-          clientY: clientY,
-          event: e
-        });
+      queue(onZoom, {
+        scale: scale,
+        clientX: clientX,
+        clientY: clientY,
+        event: e
       });
     }
   }, [onPan, onZoom, queue]);
-  var onPointerDown = React__default['default'].useCallback(function (_ref7) {
-    var target = _ref7.target,
-        button = _ref7.button,
-        clientX = _ref7.clientX,
-        clientY = _ref7.clientY,
-        pointerId = _ref7.pointerId,
-        altKey = _ref7.altKey,
-        ctrlKey = _ref7.ctrlKey,
-        metaKey = _ref7.metaKey,
-        isPrimary = _ref7.isPrimary;
+  var onPointerDown = React__default['default'].useCallback(function (_ref8) {
+    var target = _ref8.target,
+        button = _ref8.button,
+        clientX = _ref8.clientX,
+        clientY = _ref8.clientY,
+        pointerId = _ref8.pointerId,
+        altKey = _ref8.altKey,
+        ctrlKey = _ref8.ctrlKey,
+        metaKey = _ref8.metaKey,
+        isPrimary = _ref8.isPrimary;
     // Add pointer to map
     stateRef.current.pointers[pointerId] = {
       clientX: clientX,
@@ -4947,6 +4997,7 @@ var Gesture = function Gesture(_ref5) {
             prevDistance: distance
           });
         } catch (e) {
+          // eslint-disable-next-line no-console
           console.log("Error while getting other pointer. Ignoring", e); // eslint-disable-next-line no-unused-expressions
 
           stateRef.current.mainPointer === undefined;
@@ -4970,35 +5021,34 @@ var Gesture = function Gesture(_ref5) {
       currentButton: button,
       target: target,
       timeStart: Date.now(),
-      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 stateRef.current.noTap = true;
-                queue(function () {
-                  return onLongTap({
-                    clientX: clientX,
-                    clientY: clientY,
-                    altKey: altKey,
-                    ctrlKey: ctrlKey,
-                    metaKey: metaKey,
-                    target: target
-                  });
+                queue(onLongTap, {
+                  clientX: clientX,
+                  clientY: clientY,
+                  altKey: altKey,
+                  ctrlKey: ctrlKey,
+                  metaKey: metaKey,
+                  target: target
                 });
 
               case 2:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2);
+        }, _callee3);
       })), 750)
     });
 
     try {
       target.setPointerCapture(pointerId);
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.log("Fail to capture pointer", e);
     }
   }, [onLongTap, queue]);
@@ -5058,38 +5108,13 @@ var Gesture = function Gesture(_ref5) {
           stateRef.current.gestureStart = true; // Clear tap timeout
 
           clearTimeout(stateRef.current.longTapTimeout);
-          queue(function () {
-            return onDragStart({
-              deltaX: 0,
-              deltaY: 0,
-              startX: stateRef.current.startX,
-              startY: stateRef.current.startY,
-              distanceX: 0,
-              distanceY: 0,
-              button: stateRef.current.currentButton,
-              altKey: altKey,
-              ctrlKey: ctrlKey,
-              metaKey: metaKey,
-              target: stateRef.current.target,
-              event: e
-            });
-          });
-        } // Create closure
-
-
-        var deltaX = clientX - stateRef.current.prevX;
-        var deltaY = clientY - stateRef.current.prevY;
-        var distanceX = clientX - stateRef.current.startX;
-        var distanceY = clientY - stateRef.current.startY; // Drag event
-
-        queue(function () {
-          return onDrag({
-            deltaX: deltaX,
-            deltaY: deltaY,
+          queue(onDragStart, {
+            deltaX: 0,
+            deltaY: 0,
             startX: stateRef.current.startX,
             startY: stateRef.current.startY,
-            distanceX: distanceX,
-            distanceY: distanceY,
+            distanceX: 0,
+            distanceY: 0,
             button: stateRef.current.currentButton,
             altKey: altKey,
             ctrlKey: ctrlKey,
@@ -5097,6 +5122,27 @@ var Gesture = function Gesture(_ref5) {
             target: stateRef.current.target,
             event: e
           });
+        } // Create closure
+
+
+        var deltaX = clientX - stateRef.current.prevX;
+        var deltaY = clientY - stateRef.current.prevY;
+        var distanceX = clientX - stateRef.current.startX;
+        var distanceY = clientY - stateRef.current.startY; // Drag event
+
+        queue(onDrag, {
+          deltaX: deltaX,
+          deltaY: deltaY,
+          startX: stateRef.current.startX,
+          startY: stateRef.current.startY,
+          distanceX: distanceX,
+          distanceY: distanceY,
+          button: stateRef.current.currentButton,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: stateRef.current.target,
+          event: e
         });
       } else {
         if (!stateRef.current.gestureStart) {
@@ -5113,30 +5159,26 @@ var Gesture = function Gesture(_ref5) {
 
         var target = stateRef.current.target; // Pan event
 
-        queue(function () {
-          return onPan({
-            deltaX: _deltaX,
-            deltaY: _deltaY,
-            button: stateRef.current.currentButton,
-            altKey: altKey,
-            ctrlKey: ctrlKey,
-            metaKey: metaKey,
-            target: target,
-            event: e
-          });
+        queue(onPan, {
+          deltaX: _deltaX,
+          deltaY: _deltaY,
+          button: stateRef.current.currentButton,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: target,
+          event: e
         });
 
         if (twoFingers && distance !== stateRef.current.prevDistance && onZoom) {
           var scale = stateRef.current.prevDistance - distance;
 
           if (Math.abs(scale) > 0) {
-            queue(function () {
-              return onZoom({
-                scale: scale,
-                clientX: clientX,
-                clientY: clientY,
-                event: e
-              });
+            queue(onZoom, {
+              scale: scale,
+              clientX: clientX,
+              clientY: clientY,
+              event: e
             });
             stateRef.current.prevDistance = distance;
           }
@@ -5178,6 +5220,7 @@ var Gesture = function Gesture(_ref5) {
         stateRef.current.target.setPointerCapture(stateRef.current.mainPointer);
         return;
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.log("Fails to set pointer capture", error);
         stateRef.current.mainPointer = undefined;
         delete stateRef.current.pointers[Object.keys(stateRef.current.pointers)[0]];
@@ -5192,20 +5235,18 @@ var Gesture = function Gesture(_ref5) {
     if (stateRef.current.moving) {
       // If we were moving, send drag end event
       stateRef.current.moving = false;
-      queue(function () {
-        return onDragEnd({
-          deltaX: clientX - stateRef.current.prevX,
-          deltaY: clientY - stateRef.current.prevY,
-          startX: stateRef.current.startX,
-          startY: stateRef.current.startY,
-          distanceX: clientX - stateRef.current.startX,
-          distanceY: clientY - stateRef.current.startY,
-          button: stateRef.current.currentButton,
-          altKey: altKey,
-          ctrlKey: ctrlKey,
-          metaKey: metaKey,
-          event: e
-        });
+      queue(onDragEnd, {
+        deltaX: clientX - stateRef.current.prevX,
+        deltaY: clientY - stateRef.current.prevY,
+        startX: stateRef.current.startX,
+        startY: stateRef.current.startY,
+        distanceX: clientX - stateRef.current.startX,
+        distanceY: clientY - stateRef.current.startY,
+        button: stateRef.current.currentButton,
+        altKey: altKey,
+        ctrlKey: ctrlKey,
+        metaKey: metaKey,
+        event: e
       });
       wrapperRef.current.style.cursor = "auto";
     } else {
@@ -5215,22 +5256,20 @@ var Gesture = function Gesture(_ref5) {
         stateRef.current.noTap = false;
       } // Send tap event only if time less than 300ms
       else if (stateRef.current.timeStart - now < 300) {
-          queue(function () {
-            return onTap({
-              clientX: clientX,
-              clientY: clientY,
-              altKey: altKey,
-              ctrlKey: ctrlKey,
-              metaKey: metaKey,
-              target: target
-            });
+          queue(onTap, {
+            clientX: clientX,
+            clientY: clientY,
+            altKey: altKey,
+            ctrlKey: ctrlKey,
+            metaKey: metaKey,
+            target: target
           });
         }
     }
   }, [onDragEnd, onTap, queue]);
   var onDoubleTapHandler = React__default['default'].useCallback(function (event) {
-    onDoubleTap(event);
-  }, [onDoubleTap]);
+    queue(onDoubleTap, event);
+  }, [onDoubleTap, queue]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     onWheel: onWheel,
     onPointerDown: onPointerDown,
@@ -5263,22 +5302,16 @@ var findSelected = function findSelected(itemMap, wrapper) {
 
   var selector = selectors[0];
   return Array.from(wrapper.getElementsByClassName("item")).filter(function (elem) {
-    var id = elem.dataset.id;
+    var id = getIdFromElem(elem);
     var item = itemMap[id];
 
-    if (!item) {
-      // Avoid to find item that are not yet removed from DOM
-      console.error("Missing item ".concat(id));
-      return false;
-    }
-
-    if (item.locked) {
+    if (!item || item.locked) {
       return false;
     }
 
     return isItemInsideElement(elem, selector);
   }).map(function (elem) {
-    return elem.dataset.id;
+    return getIdFromElem(elem);
   });
 };
 
@@ -5456,7 +5489,8 @@ var Selector = function Selector(_ref) {
     var foundElement = insideClass(target, "item");
 
     if (foundElement) {
-      setSelected([foundElement.dataset.id]);
+      var id = getIdFromElem(foundElement);
+      setSelected([id]);
     }
   }, [setSelected]);
   var onTap = recoil.useRecoilCallback(function (_ref9) {
@@ -5477,15 +5511,25 @@ var Selector = function Selector(_ref) {
                 }
 
                 setSelected([]);
-                _context3.next = 11;
+                _context3.next = 14;
                 break;
 
               case 6:
-                itemId = foundItem.dataset.id;
-                _context3.next = 9;
+                itemId = getIdFromElem(foundItem); // Being defensive here to avoid bug
+
+                if (itemId) {
+                  _context3.next = 10;
+                  break;
+                }
+
+                setSelected([]);
+                return _context3.abrupt("return");
+
+              case 10:
+                _context3.next = 12;
                 return snapshot.getPromise(SelectedItemsAtom);
 
-              case 9:
+              case 12:
                 selectedItems = _context3.sent;
 
                 if (foundItem && !selectedItems.includes(itemId)) {
@@ -5498,7 +5542,7 @@ var Selector = function Selector(_ref) {
                   }
                 }
 
-              case 11:
+              case 14:
               case "end":
                 return _context3.stop();
             }
@@ -5577,7 +5621,7 @@ var ActionPane = function ActionPane(_ref) {
               case 8:
                 selectedItems = _context.sent;
                 selectedItemRef.current.items = selectedItems;
-                itemId = foundElement.dataset.id;
+                itemId = getIdFromElem(foundElement);
 
                 if (!selectedItems.includes(itemId)) {
                   if (ctrlKey || metaKey) {
@@ -5970,8 +6014,8 @@ function F(t) {
 var _excluded$1 = ["pos"];
 
 var _templateObject$1, _templateObject2;
-var StyledCursor = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  z-index: 210;\n"])));
-var CursorName = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  padding: 0 0.5em;\n  border-radius: 2px;\n  max-width: 5em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: -0.5em;\n  margin-top: 1.7em;\n  whitespace: nowrap;\n  background-color: ", ";\n"])), function (_ref) {
+var StyledCursor = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  z-index: 210;\n  pointer-events: none;\n"])));
+var CursorName = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  padding: 0 0.5em;\n  border-radius: 2px;\n  max-width: 5em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: -0.5em;\n  margin-top: 1.7em;\n  whitespace: nowrap;\n  pointer-events: none;\n  background-color: ", ";\n"])), function (_ref) {
   var textColor = _ref.textColor;
   return textColor;
 }, function (_ref2) {
@@ -6023,7 +6067,8 @@ var PositionnedCursor = function PositionnedCursor(_ref4) {
       top: 0,
       left: 0,
       zIndex: 210,
-      position: "fixed"
+      position: "fixed",
+      pointerEvents: "none"
     }
   }, /*#__PURE__*/React__default['default'].createElement(MemoizedCursor, rest));
 };
@@ -6153,6 +6198,21 @@ 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),
@@ -6161,6 +6221,7 @@ var useUsers = function useUsers() {
       setCurrentUserState = _useRecoilState2[1];
 
   var users = recoil.useRecoilValue(usersAtom);
+  var localUsers = recoil.useRecoilValue(localUsersAtom);
   var setCurrentUser = React__default['default'].useCallback(function (callbackOrUser) {
     var callback = callbackOrUser;
 
@@ -6180,12 +6241,10 @@ var useUsers = function useUsers() {
       return newUser;
     });
   }, [setCurrentUserState]);
-  var localUsers = React__default['default'].useMemo(function () {
-    return users.filter(function (_ref) {
-      var space = _ref.space;
-      return space === currentUser.space;
-    });
-  }, [currentUser.space, users]);
+  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,
@@ -6908,9 +6967,6 @@ var Board = function Board(_ref) {
   var _useDim = useDim(),
       updateItemExtent = _useDim.updateItemExtent;
 
-  var _useRecoilValue = recoil.useRecoilValue(ConfigurationAtom),
-      itemExtent = _useRecoilValue.itemExtent;
-
   var boardStyle = React__default['default'].useMemo(function () {
     return _objectSpread2({
       userSelect: "none",
@@ -6943,12 +6999,7 @@ var Board = function Board(_ref) {
     className: "board"
   }, /*#__PURE__*/React__default['default'].createElement(ItemList, {
     itemTemplates: itemTemplates
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
-    style: _objectSpread2(_objectSpread2({}, itemExtent), {}, {
-      border: "3px solid red",
-      position: "absolute"
-    })
-  }))))), /*#__PURE__*/React__default['default'].createElement(Selection, null));
+  })))))), /*#__PURE__*/React__default['default'].createElement(Selection, null));
 };
 
 var TOLERANCE = 100;
@@ -7470,6 +7521,11 @@ var useItemActions = function useItemActions() {
 
       itemIds.forEach(function (id) {
         var item = prevItemMap[id];
+
+        if (!item) {
+          return;
+        }
+
         result[id] = _objectSpread2(_objectSpread2({}, item), {}, {
           x: (item.x || 0) + posDelta.x,
           y: (item.y || 0) + posDelta.y,
@@ -7506,120 +7562,155 @@ var useItemActions = function useItemActions() {
       return result;
     });
   }, [setItemList, wire]);
-  var stickOnGrid = React__default['default'].useCallback(function (itemIds) {
-    var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        globalType = _ref4.type,
-        globalSize = _ref4.size;
-
-    var sync = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var updatedItems = {};
-    setItemMap(function (prevItemMap) {
-      var result = _objectSpread2({}, prevItemMap);
+  var stickOnGrid = recoil.useRecoilCallback(function (_ref4) {
+    var snapshot = _ref4.snapshot;
+    return /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(itemIds) {
+        var _ref6,
+            globalType,
+            globalSize,
+            sync,
+            _yield$snapshot$getPr,
+            boardWrapper,
+            updatedItems,
+            _args2 = arguments;
 
-      itemIds.forEach(function (id) {
-        var item = prevItemMap[id];
-        var elems = document.getElementsByClassName("item ".concat(id));
-        var elem = elems[0];
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _ref6 = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {}, globalType = _ref6.type, globalSize = _ref6.size;
+                sync = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : true;
+                _context2.next = 4;
+                return snapshot.getPromise(ConfigurationAtom);
 
-        var _ref5 = item.grid || {},
-            itemType = _ref5.type,
-            itemSize = _ref5.size;
+              case 4:
+                _yield$snapshot$getPr = _context2.sent;
+                boardWrapper = _yield$snapshot$getPr.boardWrapper;
+                updatedItems = {};
+                setItemMap(function (prevItemMap) {
+                  var result = _objectSpread2({}, prevItemMap);
 
-        var type = globalType;
-        var size = globalSize || 1; // If item specific
+                  itemIds.forEach(function (id) {
+                    var item = prevItemMap[id];
+                    var elem = getItemElem(boardWrapper, id);
 
-        if (itemType) {
-          type = itemType;
-          size = itemSize || 1;
-        }
+                    if (!elem) {
+                      return;
+                    }
 
-        var centerX = item.x + elem.clientWidth / 2,
-            centerY = item.y + elem.clientHeight / 2;
-        var newX;
-        var newY;
-        var sizeX;
-        var sizeY;
-        var px1;
-        var px2;
-        var py1;
-        var py2;
-        var diff1;
-        var diff2;
-        var h = size / 1.1547;
-
-        switch (type) {
-          case "grid":
-            newX = Math.round(centerX / size) * size;
-            newY = Math.round(centerY / size) * size;
-            break;
+                    var _ref7 = item.grid || {},
+                        itemType = _ref7.type,
+                        itemSize = _ref7.size;
 
-          case "hexH":
-            sizeX = 2 * h;
-            sizeY = 3 * size;
-            px1 = Math.round(centerX / sizeX) * sizeX;
-            py1 = Math.round(centerY / sizeY) * sizeY;
-            px2 = px1 > centerX ? px1 - h : px1 + h;
-            py2 = py1 > centerY ? py1 - 1.5 * size : py1 + 1.5 * size;
-            diff1 = Math.hypot.apply(Math, [px1 - centerX, py1 - centerY]);
-            diff2 = Math.hypot.apply(Math, [px2 - centerX, py2 - centerY]);
-
-            if (diff1 < diff2) {
-              newX = px1;
-              newY = py1;
-            } else {
-              newX = px2;
-              newY = py2;
-            }
+                    var type = globalType;
+                    var size = globalSize || 1; // If item specific
 
-            break;
+                    if (itemType) {
+                      type = itemType;
+                      size = itemSize || 1;
+                    }
 
-          case "hexV":
-            sizeX = 3 * size;
-            sizeY = 2 * h;
-            px1 = Math.round(centerX / sizeX) * sizeX;
-            py1 = Math.round(centerY / sizeY) * sizeY;
-            px2 = px1 > centerX ? px1 - 1.5 * size : px1 + 1.5 * size;
-            py2 = py1 > centerY ? py1 - h : py1 + h;
-            diff1 = Math.hypot.apply(Math, [px1 - centerX, py1 - centerY]);
-            diff2 = Math.hypot.apply(Math, [px2 - centerX, py2 - centerY]);
-
-            if (diff1 < diff2) {
-              newX = px1;
-              newY = py1;
-            } else {
-              newX = px2;
-              newY = py2;
-            }
+                    var centerX = item.x + elem.clientWidth / 2,
+                        centerY = item.y + elem.clientHeight / 2;
+                    var newX;
+                    var newY;
+                    var sizeX;
+                    var sizeY;
+                    var px1;
+                    var px2;
+                    var py1;
+                    var py2;
+                    var diff1;
+                    var diff2;
+                    var h = size / 1.1547;
+
+                    switch (type) {
+                      case "grid":
+                        newX = Math.round(centerX / size) * size;
+                        newY = Math.round(centerY / size) * size;
+                        break;
+
+                      case "hexH":
+                        sizeX = 2 * h;
+                        sizeY = 3 * size;
+                        px1 = Math.round(centerX / sizeX) * sizeX;
+                        py1 = Math.round(centerY / sizeY) * sizeY;
+                        px2 = px1 > centerX ? px1 - h : px1 + h;
+                        py2 = py1 > centerY ? py1 - 1.5 * size : py1 + 1.5 * size;
+                        diff1 = Math.hypot.apply(Math, [px1 - centerX, py1 - centerY]);
+                        diff2 = Math.hypot.apply(Math, [px2 - centerX, py2 - centerY]);
+
+                        if (diff1 < diff2) {
+                          newX = px1;
+                          newY = py1;
+                        } else {
+                          newX = px2;
+                          newY = py2;
+                        }
+
+                        break;
+
+                      case "hexV":
+                        sizeX = 3 * size;
+                        sizeY = 2 * h;
+                        px1 = Math.round(centerX / sizeX) * sizeX;
+                        py1 = Math.round(centerY / sizeY) * sizeY;
+                        px2 = px1 > centerX ? px1 - 1.5 * size : px1 + 1.5 * size;
+                        py2 = py1 > centerY ? py1 - h : py1 + h;
+                        diff1 = Math.hypot.apply(Math, [px1 - centerX, py1 - centerY]);
+                        diff2 = Math.hypot.apply(Math, [px2 - centerX, py2 - centerY]);
+
+                        if (diff1 < diff2) {
+                          newX = px1;
+                          newY = py1;
+                        } else {
+                          newX = px2;
+                          newY = py2;
+                        }
+
+                        break;
+
+                      default:
+                        newX = item.x + elem.clientWidth / 2;
+                        newY = item.y + elem.clientHeight / 2;
+                    }
 
-            break;
+                    result[id] = _objectSpread2(_objectSpread2({}, item), {}, {
+                      x: newX - elem.clientWidth / 2,
+                      y: newY - elem.clientHeight / 2
+                    });
+                    updatedItems[id] = result[id];
+                  });
+                  return result;
+                });
 
-          default:
-            newX = item.x + elem.clientWidth / 2;
-            newY = item.y + elem.clientHeight / 2;
-        }
+                if (sync) {
+                  wire.publish("batchItemsUpdate", updatedItems);
+                }
 
-        result[id] = _objectSpread2(_objectSpread2({}, item), {}, {
-          x: newX - elem.clientWidth / 2,
-          y: newY - elem.clientHeight / 2
-        });
-        updatedItems[id] = result[id];
-      });
-      return result;
-    });
+              case 9:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
 
-    if (sync) {
-      wire.publish("batchItemsUpdate", updatedItems);
-    }
+      return function (_x3) {
+        return _ref5.apply(this, arguments);
+      };
+    }();
   }, [wire, setItemMap]);
   var placeItems = React__default['default'].useCallback( /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(itemIds, gridConfig) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(itemIds, gridConfig) {
       var sync,
-          _args2 = arguments;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          _args3 = arguments;
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              sync = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : true;
+              sync = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : true;
               // Put moved items on top
               putItemsOnTop(itemIds, sync); // Remove moving state
 
@@ -7635,14 +7726,14 @@ var useItemActions = function useItemActions() {
 
             case 6:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     }));
 
-    return function (_x3, _x4) {
-      return _ref6.apply(this, arguments);
+    return function (_x4, _x5) {
+      return _ref8.apply(this, arguments);
     };
   }(), [batchUpdateItems, callPlaceInteractions, putItemsOnTop, stickOnGrid, updateItemExtent]);
   var updateItemOrder = React__default['default'].useCallback(function (newOrder) {
@@ -7681,27 +7772,27 @@ var useItemActions = function useItemActions() {
       return reversed;
     });
   }, [setItemList, wire, setSelectItems]);
-  var swapItems = recoil.useRecoilCallback(function (_ref7) {
-    var snapshot = _ref7.snapshot;
+  var swapItems = recoil.useRecoilCallback(function (_ref9) {
+    var snapshot = _ref9.snapshot;
     return /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(fromIds, toIds) {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(fromIds, toIds) {
         var sync,
             itemMap,
             fromItems,
             toItems,
             replaceMapItems,
             replaceMap,
-            _args3 = arguments;
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+            _args4 = arguments;
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
-                sync = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : true;
-                _context3.next = 3;
+                sync = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : true;
+                _context4.next = 3;
                 return snapshot.getPromise(ItemMapAtom);
 
               case 3:
-                itemMap = _context3.sent;
+                itemMap = _context4.sent;
                 fromItems = fromIds.map(function (id) {
                   return itemMap[id];
                 });
@@ -7756,38 +7847,38 @@ var useItemActions = function useItemActions() {
 
               case 10:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
           }
-        }, _callee3);
+        }, _callee4);
       }));
 
-      return function (_x5, _x6) {
-        return _ref8.apply(this, arguments);
+      return function (_x6, _x7) {
+        return _ref10.apply(this, arguments);
       };
     }();
   }, [wire, setItemList, setItemMap]);
   var pushItems = React__default['default'].useCallback( /*#__PURE__*/function () {
-    var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(itemsToInsert, beforeId) {
+    var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(itemsToInsert, beforeId) {
       var sync,
-          _args5 = arguments;
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+          _args6 = arguments;
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
-              sync = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : true;
+              sync = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : true;
               itemsToInsert.forEach( /*#__PURE__*/function () {
-                var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(item, index) {
+                var _ref12 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(item, index) {
                   var center, newItem;
-                  return regeneratorRuntime.wrap(function _callee4$(_context4) {
+                  return regeneratorRuntime.wrap(function _callee5$(_context5) {
                     while (1) {
-                      switch (_context4.prev = _context4.next) {
+                      switch (_context5.prev = _context5.next) {
                         case 0:
-                          _context4.next = 2;
+                          _context5.next = 2;
                           return getCenter();
 
                         case 2:
-                          center = _context4.sent;
+                          center = _context5.sent;
                           newItem = _objectSpread2({}, item);
 
                           if (!newItem.x || !newItem.y) {
@@ -7819,28 +7910,28 @@ var useItemActions = function useItemActions() {
 
                         case 8:
                         case "end":
-                          return _context4.stop();
+                          return _context5.stop();
                       }
                     }
-                  }, _callee4);
+                  }, _callee5);
                 }));
 
-                return function (_x9, _x10) {
-                  return _ref10.apply(this, arguments);
+                return function (_x10, _x11) {
+                  return _ref12.apply(this, arguments);
                 };
               }());
               updateItemExtent();
 
             case 3:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5);
+      }, _callee6);
     }));
 
-    return function (_x7, _x8) {
-      return _ref9.apply(this, arguments);
+    return function (_x8, _x9) {
+      return _ref11.apply(this, arguments);
     };
   }(), [updateItemExtent, getCenter, setItemMap, setItemList, wire]);
   var pushItem = React__default['default'].useCallback(function (itemToInsert, beforeId) {
@@ -7873,40 +7964,40 @@ var useItemActions = function useItemActions() {
       wire.publish("removeItems", itemsIdToRemove);
     }
   }, [wire, setItemList, setItemMap, setSelectItems]);
-  var getItemList = recoil.useRecoilCallback(function (_ref11) {
-    var snapshot = _ref11.snapshot;
+  var getItemList = recoil.useRecoilCallback(function (_ref13) {
+    var snapshot = _ref13.snapshot;
     return function () {
       return snapshot.getPromise(AllItemsSelector);
     };
   }, []);
-  var getItems = recoil.useRecoilCallback(function (_ref12) {
-    var snapshot = _ref12.snapshot;
+  var getItems = recoil.useRecoilCallback(function (_ref14) {
+    var snapshot = _ref14.snapshot;
     return /*#__PURE__*/function () {
-      var _ref13 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(itemIds) {
+      var _ref15 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(itemIds) {
         var itemMap;
-        return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        return regeneratorRuntime.wrap(function _callee7$(_context7) {
           while (1) {
-            switch (_context6.prev = _context6.next) {
+            switch (_context7.prev = _context7.next) {
               case 0:
-                _context6.next = 2;
+                _context7.next = 2;
                 return snapshot.getPromise(ItemMapAtom);
 
               case 2:
-                itemMap = _context6.sent;
-                return _context6.abrupt("return", itemIds.map(function (id) {
+                itemMap = _context7.sent;
+                return _context7.abrupt("return", itemIds.map(function (id) {
                   return itemMap[id];
                 }));
 
               case 4:
               case "end":
-                return _context6.stop();
+                return _context7.stop();
             }
           }
-        }, _callee6);
+        }, _callee7);
       }));
 
-      return function (_x11) {
-        return _ref13.apply(this, arguments);
+      return function (_x12) {
+        return _ref15.apply(this, arguments);
       };
     }();
   }, []);