react-sync-board 0.5.3 → 0.5.6

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext, createContext, createElement, useRef, useLayoutEffect, useEffect, useMemo, memo } from 'react';
-import { atom, selector, useRecoilValue, useRecoilState, useSetRecoilState, useRecoilCallback, RecoilRoot } from 'recoil';
+import { atom, selector, useRecoilValue, useRecoilCallback, useRecoilState, useSetRecoilState, RecoilRoot } from 'recoil';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -4310,1196 +4310,1312 @@ function useResizeObserver(target, callback, enabled) {
   }, [target, ro]);
 }
 
-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 = ["state", "boardSize", "currentUser"],
-    _excluded3 = ["x", "y", "layer", "moving"];
+var isMacOS = function isMacOS() {
+  var userAgent = navigator.userAgent.toLowerCase();
+  return /mac os ?x 10/.test(userAgent);
+}; // From https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
 
-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) {
-  var rotation = _ref.rotation;
-  return rotation;
-}, img);
+var getScrollLineHeight = function getScrollLineHeight() {
+  var iframe = document.createElement("iframe");
+  iframe.src = "#";
+  document.body.appendChild(iframe); // Write content in Iframe
 
-var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
-  var onReload = _ref2.onReload;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100px",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      textAlign: "center",
-      color: "red"
-    },
-    className: "syncboard-error-item"
-  }, "Sorry, this item seems broken.", /*#__PURE__*/React.createElement("button", {
-    onClick: onReload
-  }, "Reload it"));
+  var idoc = iframe.contentWindow.document;
+  idoc.open();
+  idoc.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>");
+  idoc.close();
+  var scrollLineHeight = idoc.body.firstElementChild.offsetHeight;
+  document.body.removeChild(iframe);
+  return scrollLineHeight;
 };
-/* Error boundary for broken item */
-
-
-var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(ItemErrorBoundary, _React$Component);
-
-  var _super = _createSuper(ItemErrorBoundary);
-
-  function ItemErrorBoundary(props) {
-    var _this;
-
-    _classCallCheck(this, ItemErrorBoundary);
 
-    _this = _super.call(this, props);
-    _this.state = {
-      hasError: false,
-      itemId: props.itemId
-    };
-    _this.onReload = _this.onReload.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+var LINE_HEIGHT = getScrollLineHeight(); // Reasonable default from https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
 
-  _createClass(ItemErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error) {
-      // eslint-disable-next-line no-console
-      console.error("Error for item ".concat(this.state.itemId), error, this.props.state);
-    }
-  }, {
-    key: "onReload",
-    value: function onReload() {
-      this.setState({
-        hasError: false
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var ErrorComponent = this.props.ErrorComponent;
+var PAGE_HEIGHT = 800;
 
-      if (this.state.hasError) {
-        return /*#__PURE__*/React.createElement(ErrorComponent, {
-          onReload: this.onReload
-        });
-      }
+var otherPointer = function otherPointer(pointers, currentPointer) {
+  var p2 = Object.keys(pointers).map(function (p) {
+    return Number(p);
+  }).find(function (pointer) {
+    return pointer !== currentPointer;
+  });
+  return pointers[p2];
+};
 
-      return this.props.children;
-    }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError() {
-      return {
-        hasError: true
-      };
-    }
-  }]);
+var computeDistance = function computeDistance(_ref, _ref2) {
+  var _ref3 = _slicedToArray(_ref, 2),
+      x1 = _ref3[0],
+      y1 = _ref3[1];
 
-  return ItemErrorBoundary;
-}(React.Component);
+  var _ref4 = _slicedToArray(_ref2, 2),
+      x2 = _ref4[0],
+      y2 = _ref4[1];
 
-var removeClass = function removeClass(e) {
-  e.target.className = "";
+  var distanceX = Math.abs(x1 - x2);
+  var distanceY = Math.abs(y1 - y2);
+  return Math.hypot(distanceX, distanceY);
 };
 
-var Item = function Item(_ref3) {
-  var _itemMap$error;
-
-  var setState = _ref3.setState,
-      _ref3$state = _ref3.state;
-  _ref3$state = _ref3$state === void 0 ? {} : _ref3$state;
-
-  var type = _ref3$state.type,
-      _ref3$state$rotation = _ref3$state.rotation,
-      rotation = _ref3$state$rotation === void 0 ? 0 : _ref3$state$rotation,
-      id = _ref3$state.id,
-      locked = _ref3$state.locked,
-      layer = _ref3$state.layer,
-      rest = _objectWithoutProperties(_ref3$state, _excluded$2),
-      _ref3$animate = _ref3.animate,
-      animate = _ref3$animate === void 0 ? "hvr-pop" : _ref3$animate,
-      isSelected = _ref3.isSelected,
-      itemMap = _ref3.itemMap,
-      unlocked = _ref3.unlocked;
-
-  var animateRef = React.useRef(null);
-
-  var Component = itemMap[type].component || function () {
-    return null;
-  };
+var empty = function empty() {};
 
-  var updateState = React.useCallback(function (callbackOrItem) {
-    var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return setState(id, callbackOrItem, sync);
-  }, [setState, id]);
-  React.useEffect(function () {
-    animateRef.current.className = animate;
-  }, [animate]);
-  var className = "item ".concat(id);
+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);
 
-  if (locked) {
-    className += " locked";
-  }
+          case 3:
+            _context.next = 8;
+            break;
 
-  if (isSelected) {
-    className += " selected";
-  }
+          case 5:
+            _context.prev = 5;
+            _context.t0 = _context["catch"](0);
+            // eslint-disable-next-line no-console
+            console.error(_context.t0);
 
-  return /*#__PURE__*/React.createElement(ItemWrapper, {
-    rotation: rotation,
-    locked: locked && !unlocked,
-    selected: isSelected,
-    layer: layer,
-    "data-id": id,
-    className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex"
-    },
-    ref: animateRef,
-    onAnimationEnd: removeClass,
-    onKeyDown: function onKeyDown(e) {
-      return e.stopPropagation();
-    },
-    onKeyUp: function onKeyUp(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(ItemErrorBoundary, {
-    itemId: id,
-    state: rest,
-    setState: updateState,
-    ErrorComponent: (itemMap === null || itemMap === void 0 ? void 0 : (_itemMap$error = itemMap.error) === null || _itemMap$error === void 0 ? void 0 : _itemMap$error.component) || DefaultErrorComponent
-  }, /*#__PURE__*/React.createElement(Component, _extends$1({}, rest, {
-    id: id,
-    setState: updateState
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "corner top-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "corner bottom-right"
-  })));
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 5]]);
+  }));
 };
 
-var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref4, _ref5) {
-  var prevState = _ref4.state,
-      prevSetState = _ref4.setState,
-      prevIsSelected = _ref4.isSelected,
-      prevUnlocked = _ref4.unlocked;
-  var nextState = _ref5.state,
-      nextSetState = _ref5.setState,
-      nextIsSelected = _ref5.isSelected,
-      nextUnlocked = _ref5.unlocked;
-  return prevIsSelected === nextIsSelected && prevUnlocked === nextUnlocked && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
-}); // Exclude positioning from memoization
+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.useRef(null);
+  var stateRef = React.useRef({
+    moving: false,
+    pointers: {},
+    mainPointer: undefined
+  });
+  var queueRef = React.useRef([]); // Queue event to avoid async mess
 
-var PositionedItem = function PositionedItem(_ref6) {
-  var _rest$itemMap$state$t;
+  var queue = React.useCallback(function (callback, args) {
+    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return protect(callback)(args);
 
-  var _ref6$state = _ref6.state,
-      state = _ref6$state === void 0 ? {} : _ref6$state,
-      boardSize = _ref6.boardSize,
-      currentUser = _ref6.currentUser,
-      rest = _objectWithoutProperties(_ref6, _excluded2);
+            case 2:
+              queueRef.current.shift();
 
-  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;
-  };
+              if (!(queueRef.current.length !== 0)) {
+                _context2.next = 6;
+                break;
+              }
 
-  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);
+              _context2.next = 6;
+              return protect(queueRef.current[0])();
 
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      top: "".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
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
 
+    if (queueRef.current.length === 1) {
+      protect(queueRef.current[0])();
     }
-  }, /*#__PURE__*/React.createElement(MemoizedItem, _extends$1({}, rest, {
-    state: stateRest
-  })));
-};
+  }, []);
+  var onWheel = React.useCallback(function (e) {
+    var deltaX = e.deltaX,
+        deltaY = e.deltaY,
+        clientX = e.clientX,
+        clientY = e.clientY,
+        deltaMode = e.deltaMode,
+        ctrlKey = e.ctrlKey,
+        altKey = e.altKey,
+        metaKey = e.metaKey,
+        target = e.target; // On a MacOs trackpad, the pinch gesture sets the ctrlKey to true.
+    // In that situation, we want to use the custom scaling, not the browser default zoom.
+    // Hence in this situation we avoid to return immediately.
 
-var MemoizedPositionedItem = /*#__PURE__*/memo(PositionedItem);
+    if (altKey || ctrlKey && !isMacOS()) {
+      return;
+    } // On a trackpad, the pinch and pan events are differentiated by the crtlKey value.
+    // On a pinch gesture, the ctrlKey is set to true, so we want to have a scaling effect.
+    // If we are only moving the fingers in the same direction, a pan is needed.
+    // Ref: https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
 
-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
+    if (isMacOS() && !ctrlKey) {
+      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
+      if (onZoom === undefined || !deltaY) return;
+      var scale = deltaY;
 
+      switch (deltaMode) {
+        case 1:
+          // Pixel
+          scale *= LINE_HEIGHT;
+          break;
 
-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;
+        case 2:
+          scale *= PAGE_HEIGHT;
+          break;
+      }
 
+      if (isMacOS()) {
+        scale *= 2;
+      }
 
-    persistUser(localUser);
-    return localUser;
-  }
+      queue(onZoom, {
+        scale: scale,
+        clientX: clientX,
+        clientY: clientY,
+        event: e
+      });
+    }
+  }, [onPan, onZoom, queue]);
+  var onPointerDown = React.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,
+      clientY: clientY
+    };
 
-  var newUser = {
-    name: "Player",
-    color: getRandomColor(),
-    uid: nanoid()
-  };
-  persistUser(newUser);
-  return newUser;
-};
-var userAtom = atom({
-  key: "user",
-  "default": getUser()
-});
-var usersAtom = atom({
-  key: "users",
-  "default": []
-});
-var localUsersAtom = selector({
-  key: "localUsersAtom",
-  get: function get(_ref) {
-    var _get = _ref.get;
+    if (isPrimary) {
+      // Clean mainPoint on primary pointer
+      stateRef.current.mainPointer = undefined;
+    }
 
-    var currentUser = _get(userAtom);
+    if (stateRef.current.mainPointer !== undefined) {
+      if (stateRef.current.mainPointer !== pointerId) {
+        // This is not the main pointer
+        try {
+          var _otherPointer = otherPointer(stateRef.current.pointers, pointerId),
+              clientX2 = _otherPointer.clientX,
+              clientY2 = _otherPointer.clientY;
 
-    var users = _get(usersAtom);
+          var newClientX = (clientX2 + clientX) / 2;
+          var newClientY = (clientY2 + clientY) / 2;
+          var distance = computeDistance([clientX2, clientY2], [clientX, clientY]); // We update previous position as the new position is the center beetween both finger
 
-    return users.filter(function (_ref2) {
-      var space = _ref2.space;
-      return space === currentUser.space;
-    });
-  }
-});
+          Object.assign(stateRef.current, {
+            pressed: true,
+            moving: false,
+            gestureStart: false,
+            startX: clientX,
+            startY: clientY,
+            prevX: newClientX,
+            prevY: newClientY,
+            startDistance: distance,
+            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
 
-var useUsers = function useUsers() {
-  var _useRecoilState = useRecoilState(userAtom),
-      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-      currentUser = _useRecoilState2[0],
-      setCurrentUserState = _useRecoilState2[1];
+          stateRef.current.mainPointer === undefined;
+        }
+      }
 
-  var users = useRecoilValue(usersAtom);
-  var localUsers = useRecoilValue(localUsersAtom);
-  var setCurrentUser = React.useCallback(function (callbackOrUser) {
-    var callback = callbackOrUser;
+      return;
+    } // We set the mainpointer
 
-    if (_typeof(callbackOrUser) === "object") {
-      callback = function callback() {
-        return callbackOrUser;
-      };
-    }
 
-    setCurrentUserState(function (prevUser) {
-      var newUser = _objectSpread2(_objectSpread2({}, callback(prevUser)), {}, {
-        id: prevUser.id,
-        uid: prevUser.uid
-      });
+    stateRef.current.mainPointer = pointerId; // And prepare move
 
-      persistUser(newUser);
-      return newUser;
+    Object.assign(stateRef.current, {
+      pressed: true,
+      moving: false,
+      gestureStart: false,
+      startX: clientX,
+      startY: clientY,
+      prevX: clientX,
+      prevY: clientY,
+      currentButton: button,
+      target: target,
+      timeStart: Date.now(),
+      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                stateRef.current.noTap = true;
+                queue(onLongTap, {
+                  clientX: clientX,
+                  clientY: clientY,
+                  altKey: altKey,
+                  ctrlKey: ctrlKey,
+                  metaKey: metaKey,
+                  target: target
+                });
+
+              case 2:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      })), 750)
     });
-  }, [setCurrentUserState]);
-  React.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.useRef([]);
-  var setUsers = useSetRecoilState(usersAtom);
+    try {
+      target.setPointerCapture(pointerId);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log("Fail to capture pointer", e);
+    }
+  }, [onLongTap, queue]);
+  var onPointerMove = React.useCallback(function (e) {
+    if (stateRef.current.pressed) {
+      var pointerId = e.pointerId,
+          eventClientX = e.clientX,
+          eventClientY = e.clientY,
+          altKey = e.altKey,
+          ctrlKey = e.ctrlKey,
+          metaKey = e.metaKey,
+          pointerType = e.pointerType;
 
-  var _useRecoilState = useRecoilState(userAtom),
-      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-      currentUser = _useRecoilState2[0],
-      setCurrentUserState = _useRecoilState2[1];
+      if (stateRef.current.mainPointer !== pointerId) {
+        // Event from other pointer
+        stateRef.current.pointers[pointerId] = {
+          clientX: eventClientX,
+          clientY: eventClientY
+        };
+        return;
+      }
 
-  var _useWire = useWire("room"),
-      wire = _useWire.wire,
-      isMaster = _useWire.isMaster,
-      roomSpace = _useWire.room;
+      stateRef.current.moving = true; // Do we have two fingers ?
 
-  React.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.useEffect(function () {
-    if (!isMaster) {
-      var onGetUserList = function onGetUserList(userList) {
-        usersRef.current = userList;
-        setUsers(userList);
-      };
+      var twoFingers = Object.keys(stateRef.current.pointers).length === 2;
+      var clientX;
+      var clientY;
+      var distance;
 
-      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
+      if (twoFingers) {
+        // Find other pointerId
+        var _otherPointer2 = otherPointer(stateRef.current.pointers, pointerId),
+            clientX2 = _otherPointer2.clientX,
+            clientY2 = _otherPointer2.clientY; // Update client X with the center of each touch
 
-  var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
-    wire.publish("userUpdate", newUser, true);
-  }, [wire], 500);
-  React.useEffect(function () {
-    if (currentUser && currentUser.id) {
-      debouncedEmitUpdateUser(currentUser);
-    }
-  }, [currentUser, debouncedEmitUpdateUser]);
-  React.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]);
+        clientX = (clientX2 + eventClientX) / 2;
+        clientY = (clientY2 + eventClientY) / 2;
+        distance = computeDistance([clientX2, clientY2], [eventClientX, eventClientY]);
+      } else {
+        clientX = eventClientX;
+        clientY = eventClientY;
+      } // We drag if
+      // On non touch device
+      //   - Button is 0
+      //   - Alt key is no pressed
+      // or on touch devices
+      //   - We use only one finger
 
-          usersRef.current = _newUsers;
-        }
 
-        setUsers(usersRef.current);
-        wire.publish("updateUserList", usersRef.current);
-      }));
-    }
+      var shouldDrag = pointerType !== "touch" ? stateRef.current.currentButton === 0 && !altKey : !twoFingers;
 
-    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 (shouldDrag) {
+        // Send drag start on first move
+        if (!stateRef.current.gestureStart) {
+          wrapperRef.current.style.cursor = "move";
+          stateRef.current.gestureStart = true; // Clear tap timeout
 
-      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;
-};
+          clearTimeout(stateRef.current.longTapTimeout);
+          queue(onDragStart, {
+            deltaX: 0,
+            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,
+            altKey: altKey,
+            ctrlKey: ctrlKey,
+            metaKey: metaKey,
+            target: stateRef.current.target,
+            event: e
+          });
+        } // Create closure
 
-/** Allow to operate on locked items while u or l key is pressed  */
 
-var useUnlock = function useUnlock() {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      unlock = _React$useState2[0],
-      setUnlock = _React$useState2[1];
+        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
 
-  React.useEffect(function () {
-    var onKeyDown = function onKeyDown(e) {
-      if (e.key === "u" || e.key === "l") {
-        setUnlock(true);
-      }
-    };
+        queue(onDrag, {
+          deltaX: deltaX,
+          deltaY: deltaY,
+          startX: stateRef.current.startX,
+          startY: stateRef.current.startY,
+          clientX: clientX,
+          clientY: clientY,
+          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) {
+          wrapperRef.current.style.cursor = "move";
+          stateRef.current.gestureStart = true; // Clear tap timeout on first move
 
-    var onKeyUp = function onKeyUp(e) {
-      if (e.key === "u" || e.key === "l") {
-        setUnlock(false);
-      }
-    };
+          clearTimeout(stateRef.current.longTapTimeout);
+        } // Create closure
 
-    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("keyup", onKeyUp);
-    return function () {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("keyup", onKeyUp);
-    };
-  }, []);
-  return unlock;
-};
 
-var ItemList = function ItemList(_ref) {
-  var itemTemplates = _ref.itemTemplates;
+        var _deltaX = clientX - stateRef.current.prevX;
 
-  var _useItemActions = useItemActions(),
-      updateItem = _useItemActions.updateItem;
+        var _deltaY = clientY - stateRef.current.prevY;
 
-  var itemList = useRecoilValue(ItemListAtom);
-  var itemMap = useRecoilValue(ItemMapAtom);
-  var selectedItems = useRecoilValue(SelectedItemsAtom);
+        var target = stateRef.current.target; // Pan event
 
-  var _useRecoilValue = useRecoilValue(ConfigurationAtom),
-      boardSize = _useRecoilValue.boardSize;
+        queue(onPan, {
+          deltaX: _deltaX,
+          deltaY: _deltaY,
+          button: stateRef.current.currentButton,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          metaKey: metaKey,
+          target: target,
+          event: e
+        });
 
-  var _useUsers = useUsers(),
-      currentUser = _useUsers.currentUser;
+        if (twoFingers && distance !== stateRef.current.prevDistance && onZoom) {
+          var scale = stateRef.current.prevDistance - distance;
 
-  var unlocked = useUnlock();
-  return itemList.map(function (itemId) {
-    return /*#__PURE__*/React.createElement(MemoizedPositionedItem, {
-      key: itemId,
-      state: itemMap[itemId],
-      setState: updateItem,
-      isSelected: selectedItems.includes(itemId),
-      unlocked: unlocked,
-      itemMap: itemTemplates,
-      boardSize: boardSize,
-      currentUser: currentUser
-    });
-  });
-};
+          if (Math.abs(scale) > 0) {
+            queue(onZoom, {
+              scale: scale,
+              clientX: clientX,
+              clientY: clientY,
+              event: e
+            });
+            stateRef.current.prevDistance = distance;
+          }
+        }
+      }
 
-var SubcribeItemEvents = function SubcribeItemEvents() {
-  var _useWire = useWire("board"),
-      wire = _useWire.wire;
+      stateRef.current.prevX = clientX;
+      stateRef.current.prevY = clientY;
+    }
+  }, [onDrag, onDragStart, onPan, onZoom, queue]);
+  var onPointerUp = React.useCallback(function (e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        altKey = e.altKey,
+        ctrlKey = e.ctrlKey,
+        metaKey = e.metaKey,
+        target = e.target,
+        pointerId = e.pointerId;
 
-  var setItemMap = useSetRecoilState(ItemMapAtom);
+    if (!stateRef.current.pointers[pointerId]) {
+      // Pointer already gone previously with another event
+      // ignoring it
+      return;
+    } // Remove pointer from map
 
-  var _useItemActions = useItemActions(),
-      updateItemOrder = _useItemActions.updateItemOrder,
-      moveItems = _useItemActions.moveItems,
-      removeItems = _useItemActions.removeItems,
-      pushItem = _useItemActions.pushItem;
 
-  var batchUpdate = React.useCallback(function (updatedItems) {
-    setItemMap(function (prevItemMap) {
-      return _objectSpread2(_objectSpread2({}, prevItemMap), updatedItems);
-    });
-  }, [setItemMap]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("batchItemsUpdate", function (updatedItems) {
-      batchUpdate(updatedItems);
-    });
-    return unsub;
-  }, [wire, batchUpdate]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("selectedItemsMove", function (_ref) {
-      var itemIds = _ref.itemIds,
-          posDelta = _ref.posDelta;
-      moveItems(itemIds, posDelta, false);
-    });
-    return unsub;
-  }, [wire, moveItems]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("updateItemListOrder", function (itemIds) {
-      updateItemOrder(itemIds, false);
-    });
-    return unsub;
-  }, [wire, updateItemOrder]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("pushItem", function (newItem) {
-      pushItem(newItem, null, false);
-    });
-    return unsub;
-  }, [wire, pushItem]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("insertItemBefore", function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-          newItem = _ref3[0],
-          beforeId = _ref3[1];
+    delete stateRef.current.pointers[pointerId];
 
-      pushItem(newItem, beforeId, false);
-    });
-    return unsub;
-  }, [wire, pushItem]);
-  React.useEffect(function () {
-    var unsub = wire.subscribe("removeItems", function (itemIds) {
-      removeItems(itemIds, false);
-    });
-    return unsub;
-  }, [wire, removeItems]);
-  return null;
-};
+    if (stateRef.current.mainPointer !== pointerId) {
+      // If this is not the main pointer we quit here
+      return;
+    }
 
-/**
- * Check if element or parent has className.
- * @param {DOMElement} element
- * @param {string} className
- */
-var hasClass = function hasClass(element, className) {
-  return element.classList && element.classList.contains(className);
-};
-var insideClass = function insideClass(element, className) {
-  if (hasClass(element, className)) {
-    return element;
-  }
+    while (Object.keys(stateRef.current.pointers).length > 0) {
+      // If was main pointer but we have another one, this one become main
+      stateRef.current.mainPointer = Number(Object.keys(stateRef.current.pointers)[0]);
 
-  if (!element.parentNode) {
-    return false;
-  }
+      try {
+        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]];
+      }
+    }
 
-  return insideClass(element.parentNode, className);
-};
-var isPointInsideRect = function isPointInsideRect(point, rect) {
-  return point.x > rect.left && point.x < rect.left + rect.width && point.y > rect.top && point.y < rect.top + rect.height;
-};
-var isItemInsideElement = function isItemInsideElement(itemElement, otherElem) {
-  var rect = otherElem.getBoundingClientRect();
-  var fourElem = Array.from(itemElement.querySelectorAll(".corner"));
-  return fourElem.every(function (corner) {
-    var _corner$getBoundingCl = corner.getBoundingClientRect(),
-        y = _corner$getBoundingCl.top,
-        x = _corner$getBoundingCl.left;
+    stateRef.current.mainPointer = undefined;
+    stateRef.current.pressed = false; // Clear longTap
 
-    return isPointInsideRect({
-      x: x,
-      y: y
-    }, rect);
-  });
-};
-var getItemElem = function getItemElem(wrapper, itemId) {
-  var elems = wrapper.getElementsByClassName("item ".concat(itemId));
-  var elem = elems[0];
+    clearTimeout(stateRef.current.longTapTimeout);
 
-  if (!elem) {
-    // eslint-disable-next-line no-console
-    console.error("Missing item ".concat(itemId));
-  }
+    if (stateRef.current.moving) {
+      // If we were moving, send drag end event
+      stateRef.current.moving = false;
+      queue(onDragEnd, {
+        deltaX: clientX - stateRef.current.prevX,
+        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,
+        altKey: altKey,
+        ctrlKey: ctrlKey,
+        metaKey: metaKey,
+        event: e
+      });
+      wrapperRef.current.style.cursor = "auto";
+    } else {
+      var now = Date.now();
 
-  return elem;
+      if (stateRef.current.noTap) {
+        stateRef.current.noTap = false;
+      } // Send tap event only if time less than 300ms
+      else if (stateRef.current.timeStart - now < 300) {
+          queue(onTap, {
+            clientX: clientX,
+            clientY: clientY,
+            altKey: altKey,
+            ctrlKey: ctrlKey,
+            metaKey: metaKey,
+            target: target
+          });
+        }
+    }
+  }, [onDragEnd, onTap, queue]);
+  var onDoubleTapHandler = React.useCallback(function (event) {
+    queue(onDoubleTap, event);
+  }, [onDoubleTap, queue]);
+  return /*#__PURE__*/React.createElement("div", {
+    onWheel: onWheel,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onPointerOut: onPointerUp,
+    onPointerLeave: onPointerUp,
+    onPointerCancel: onPointerUp,
+    onDoubleClick: onDoubleTapHandler,
+    style: {
+      touchAction: "none"
+    },
+    ref: wrapperRef
+  }, children);
 };
-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;
+var _excluded$3 = ["onResize"];
 
-  if (!value) {
-    var _elem$dataset2;
+var ResizeHandler = function ResizeHandler(_ref) {
+  var onResize = _ref.onResize,
+      rest = _objectWithoutProperties(_ref, _excluded$3);
 
-    // 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);
-  }
+  var onDrag = useRecoilCallback(function (_ref2) {
+    var snapshot = _ref2.snapshot;
+    return /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3) {
+        var deltaX, deltaY, event, _yield$snapshot$getPr, scale;
 
-  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 elem = getItemElem(wrapper, itemId);
-    if (!elem) return null;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                deltaX = _ref3.deltaX, deltaY = _ref3.deltaY, event = _ref3.event;
+                event.stopPropagation();
+                _context.next = 4;
+                return snapshot.getPromise(BoardTransformAtom);
 
-    var _elem$getBoundingClie = elem.getBoundingClientRect(),
-        left = _elem$getBoundingClie.left,
-        right = _elem$getBoundingClie.right,
-        top = _elem$getBoundingClie.top,
-        bottom = _elem$getBoundingClie.bottom;
+              case 4:
+                _yield$snapshot$getPr = _context.sent;
+                scale = _yield$snapshot$getPr.scale;
+                onResize({
+                  width: deltaX / scale,
+                  height: deltaY / scale
+                });
 
-    var boundingBox;
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
 
-    if (!prev) {
-      boundingBox = {
-        left: left,
-        top: top,
-        right: right,
-        bottom: bottom
+      return function (_x) {
+        return _ref4.apply(this, arguments);
       };
-    } else {
-      boundingBox = prev;
-    }
-
-    boundingBox.left = Math.min(left, boundingBox.left);
-    boundingBox.top = Math.min(top, boundingBox.top);
-    boundingBox.right = Math.max(right, boundingBox.right);
-    boundingBox.bottom = Math.max(bottom, boundingBox.bottom);
-    return boundingBox;
-  }, null);
+    }();
+  }, [onResize]);
+  return /*#__PURE__*/React.createElement(Gesture, {
+    onDrag: onDrag
+  }, /*#__PURE__*/React.createElement("div", rest));
+};
 
-  if (!result) {
-    return result;
-  }
+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";
 
-  result.width = result.right - result.left;
-  result.height = result.bottom - result.top;
-  return result;
-};
+var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
+    _excluded2 = ["state", "boardSize", "currentUser"],
+    _excluded3 = ["x", "y", "layer", "moving"];
 
-var isMacOS = function isMacOS() {
-  var userAgent = navigator.userAgent.toLowerCase();
-  return /mac os ?x 10/.test(userAgent);
-}; // From https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
+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: 2px;\n  box-sizing: border-box;\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: 0px;\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\n  & .resize {\n    position: absolute;\n\n    width: 10px;\n    height: 10px;\n    border: 2px solid #db5034;\n    background-color: #db5034;\n    cursor: move;\n\n    &.resize-width {\n      cursor: ew-resize;\n      right: -6px;\n      top: calc(50% - 5px);\n    }\n    &.resize-height {\n      cursor: ns-resize;\n      bottom: -6px;\n      left: calc(50% - 5px);\n    }\n    &.resize-ratio {\n      cursor: nwse-resize;\n      bottom: -6px;\n      right: -6px;\n    }\n  }\n"])), function (_ref) {
+  var rotation = _ref.rotation;
+  return rotation;
+}, img);
 
-var getScrollLineHeight = function getScrollLineHeight() {
-  var iframe = document.createElement("iframe");
-  iframe.src = "#";
-  document.body.appendChild(iframe); // Write content in Iframe
+var identity = function identity(x) {
+  return x;
+};
 
-  var idoc = iframe.contentWindow.document;
-  idoc.open();
-  idoc.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>");
-  idoc.close();
-  var scrollLineHeight = idoc.body.firstElementChild.offsetHeight;
-  document.body.removeChild(iframe);
-  return scrollLineHeight;
+var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
+  var onReload = _ref2.onReload;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      color: "red"
+    },
+    className: "syncboard-error-item"
+  }, "Sorry, this item seems broken.", /*#__PURE__*/React.createElement("button", {
+    onClick: onReload
+  }, "Reload it"));
 };
+/* Error boundary for broken item */
 
-var LINE_HEIGHT = getScrollLineHeight(); // Reasonable default from https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
 
-var PAGE_HEIGHT = 800;
+var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ItemErrorBoundary, _React$Component);
 
-var otherPointer = function otherPointer(pointers, currentPointer) {
-  var p2 = Object.keys(pointers).map(function (p) {
-    return Number(p);
-  }).find(function (pointer) {
-    return pointer !== currentPointer;
-  });
-  return pointers[p2];
-};
+  var _super = _createSuper(ItemErrorBoundary);
 
-var computeDistance = function computeDistance(_ref, _ref2) {
-  var _ref3 = _slicedToArray(_ref, 2),
-      x1 = _ref3[0],
-      y1 = _ref3[1];
+  function ItemErrorBoundary(props) {
+    var _this;
 
-  var _ref4 = _slicedToArray(_ref2, 2),
-      x2 = _ref4[0],
-      y2 = _ref4[1];
+    _classCallCheck(this, ItemErrorBoundary);
 
-  var distanceX = Math.abs(x1 - x2);
-  var distanceY = Math.abs(y1 - y2);
-  return Math.hypot(distanceX, distanceY);
-};
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false,
+      itemId: props.itemId
+    };
+    _this.onReload = _this.onReload.bind(_assertThisInitialized(_this));
+    return _this;
+  }
 
-var empty = function empty() {};
+  _createClass(ItemErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      // eslint-disable-next-line no-console
+      console.error("Error for item ".concat(this.state.itemId), error, this.props.state);
+    }
+  }, {
+    key: "onReload",
+    value: function onReload() {
+      this.setState({
+        hasError: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var ErrorComponent = this.props.ErrorComponent;
 
-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);
+      if (this.state.hasError) {
+        return /*#__PURE__*/React.createElement(ErrorComponent, {
+          onReload: this.onReload
+        });
+      }
 
-          case 3:
-            _context.next = 8;
-            break;
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
 
-          case 5:
-            _context.prev = 5;
-            _context.t0 = _context["catch"](0);
-            // eslint-disable-next-line no-console
-            console.error(_context.t0);
+  return ItemErrorBoundary;
+}(React.Component);
 
-          case 8:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee, null, [[0, 5]]);
-  }));
+var removeClass = function removeClass(e) {
+  e.target.className = "";
 };
 
-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.useRef(null);
-  var stateRef = React.useRef({
-    moving: false,
-    pointers: {},
-    mainPointer: undefined
-  });
-  var queueRef = React.useRef([]); // Queue event to avoid async mess
+var defaultResize = function defaultResize(_ref3) {
+  var width = _ref3.width,
+      height = _ref3.height,
+      actualWidth = _ref3.actualWidth,
+      actualHeight = _ref3.actualHeight,
+      prevState = _ref3.prevState,
+      keepRatio = _ref3.keepRatio;
+  var currentWidth = prevState.width,
+      currentHeight = prevState.height; // Parse text values if any
+
+  var _ref4 = [parseFloat(currentWidth), parseFloat(currentHeight)];
+  currentWidth = _ref4[0];
+  currentHeight = _ref4[1];
+
+  if (!currentWidth || Number.isNaN(Number(currentWidth))) {
+    currentWidth = actualWidth;
+  }
 
-  var queue = React.useCallback(function (callback, args) {
-    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return protect(callback)(args);
+  if (!currentHeight || Number.isNaN(Number(currentHeight))) {
+    currentHeight = actualHeight;
+  }
 
-            case 2:
-              queueRef.current.shift();
+  if (keepRatio) {
+    var ratio = currentWidth / currentHeight;
+    return _objectSpread2(_objectSpread2({}, prevState), {}, {
+      width: (currentWidth + width).toFixed(1),
+      height: (currentHeight + height / ratio).toFixed(1)
+    });
+  }
 
-              if (!(queueRef.current.length !== 0)) {
-                _context2.next = 6;
-                break;
-              }
+  return _objectSpread2(_objectSpread2({}, prevState), {}, {
+    width: (currentWidth + width).toFixed(1),
+    height: (currentHeight + height).toFixed(1)
+  });
+};
 
-              _context2.next = 6;
-              return protect(queueRef.current[0])();
+var defaultResizeDirection = {
+  w: true,
+  h: true,
+  b: true
+};
 
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
+var Item = function Item(_ref5) {
+  var _itemMap$error;
 
-    if (queueRef.current.length === 1) {
-      protect(queueRef.current[0])();
-    }
-  }, []);
-  var onWheel = React.useCallback(function (e) {
-    var deltaX = e.deltaX,
-        deltaY = e.deltaY,
-        clientX = e.clientX,
-        clientY = e.clientY,
-        deltaMode = e.deltaMode,
-        ctrlKey = e.ctrlKey,
-        altKey = e.altKey,
-        metaKey = e.metaKey,
-        target = e.target; // On a MacOs trackpad, the pinch gesture sets the ctrlKey to true.
-    // In that situation, we want to use the custom scaling, not the browser default zoom.
-    // Hence in this situation we avoid to return immediately.
+  var setState = _ref5.setState,
+      _ref5$state = _ref5.state;
+  _ref5$state = _ref5$state === void 0 ? {} : _ref5$state;
+
+  var type = _ref5$state.type,
+      _ref5$state$rotation = _ref5$state.rotation,
+      rotation = _ref5$state$rotation === void 0 ? 0 : _ref5$state$rotation,
+      id = _ref5$state.id,
+      locked = _ref5$state.locked,
+      layer = _ref5$state.layer,
+      rest = _objectWithoutProperties(_ref5$state, _excluded$2),
+      _ref5$animate = _ref5.animate,
+      animate = _ref5$animate === void 0 ? "hvr-pop" : _ref5$animate,
+      isSelected = _ref5.isSelected,
+      itemMap = _ref5.itemMap,
+      _ref5$showResizeHandl = _ref5.showResizeHandle,
+      showResizeHandle = _ref5$showResizeHandl === void 0 ? false : _ref5$showResizeHandl;
+
+  var itemWrapperRef = React.useRef(null);
+  var _itemMap$type = itemMap[type],
+      _itemMap$type$compone = _itemMap$type.component,
+      Component = _itemMap$type$compone === void 0 ? function () {
+    return null;
+  } : _itemMap$type$compone,
+      _itemMap$type$resizeD = _itemMap$type.resizeDirections,
+      resizeDirections = _itemMap$type$resizeD === void 0 ? defaultResizeDirection : _itemMap$type$resizeD,
+      _itemMap$type$resize = _itemMap$type.resize,
+      resize = _itemMap$type$resize === void 0 ? defaultResize : _itemMap$type$resize;
+  var updateState = React.useCallback(function (callbackOrItem) {
+    var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    return setState(id, callbackOrItem, sync);
+  }, [setState, id]);
+  React.useEffect(function () {
+    itemWrapperRef.current.className = animate;
+  }, [animate]);
+  var className = "item ".concat(id);
 
-    if (altKey || ctrlKey && !isMacOS()) {
-      return;
-    } // On a trackpad, the pinch and pan events are differentiated by the crtlKey value.
-    // On a pinch gesture, the ctrlKey is set to true, so we want to have a scaling effect.
-    // If we are only moving the fingers in the same direction, a pan is needed.
-    // Ref: https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
+  if (locked) {
+    className += " locked";
+  }
 
+  if (isSelected) {
+    className += " selected";
+  }
 
-    if (isMacOS() && !ctrlKey) {
-      queue(onPan, {
-        deltaX: -2 * deltaX,
-        deltaY: -2 * deltaY,
-        button: 1,
-        ctrlKey: ctrlKey,
-        metaKey: metaKey,
-        target: target,
-        event: e
+  var onResize = React.useCallback(function (_ref6) {
+    var _ref6$width = _ref6.width,
+        width = _ref6$width === void 0 ? 0 : _ref6$width,
+        _ref6$height = _ref6.height,
+        height = _ref6$height === void 0 ? 0 : _ref6$height,
+        keepRatio = _ref6.keepRatio;
+    updateState(function (prev) {
+      var _itemWrapperRef$curre = itemWrapperRef.current,
+          offsetWidth = _itemWrapperRef$curre.offsetWidth,
+          offsetHeight = _itemWrapperRef$curre.offsetHeight;
+      return resize({
+        prevState: prev,
+        width: width,
+        height: height,
+        actualHeight: offsetHeight,
+        actualWidth: offsetWidth,
+        keepRatio: keepRatio
       });
-    } else {
-      // Quit if onZoom is not set
-      if (onZoom === undefined || !deltaY) return;
-      var scale = deltaY;
+    });
+  }, [resize, updateState]);
+  var onResizeWidth = React.useCallback(function (_ref7) {
+    var width = _ref7.width;
+    onResize({
+      width: width
+    });
+  }, [onResize]);
+  var onResizeHeight = React.useCallback(function (_ref8) {
+    var height = _ref8.height;
+    onResize({
+      height: height
+    });
+  }, [onResize]);
+  var onResizeRatio = React.useCallback(function (_ref9) {
+    var width = _ref9.width;
+    onResize({
+      height: width,
+      width: width,
+      keepRatio: true
+    });
+  }, [onResize]);
+  return /*#__PURE__*/React.createElement(ItemWrapper, {
+    rotation: rotation,
+    locked: locked,
+    selected: isSelected,
+    layer: layer,
+    "data-id": id,
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex"
+    },
+    ref: itemWrapperRef,
+    onAnimationEnd: removeClass,
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onKeyUp: function onKeyUp(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(ItemErrorBoundary, {
+    itemId: id,
+    state: rest,
+    setState: updateState,
+    ErrorComponent: (itemMap === null || itemMap === void 0 ? void 0 : (_itemMap$error = itemMap.error) === null || _itemMap$error === void 0 ? void 0 : _itemMap$error.component) || DefaultErrorComponent
+  }, /*#__PURE__*/React.createElement(Component, _extends$1({}, rest, {
+    id: id,
+    setState: updateState
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "corner top-left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "corner top-right"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "corner bottom-left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "corner bottom-right"
+  }), isSelected && showResizeHandle && /*#__PURE__*/React.createElement(React.Fragment, null, resizeDirections.b && /*#__PURE__*/React.createElement(ResizeHandler, {
+    className: "resize resize-ratio",
+    onResize: onResizeRatio
+  }), resizeDirections.h && /*#__PURE__*/React.createElement(ResizeHandler, {
+    className: "resize resize-height",
+    onResize: onResizeHeight
+  }), resizeDirections.w && /*#__PURE__*/React.createElement(ResizeHandler, {
+    className: "resize resize-width",
+    onResize: onResizeWidth
+  }))));
+};
 
-      switch (deltaMode) {
-        case 1:
-          // Pixel
-          scale *= LINE_HEIGHT;
-          break;
+var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref10, _ref11) {
+  var prevState = _ref10.state,
+      prevSetState = _ref10.setState,
+      prevIsSelected = _ref10.isSelected,
+      prevShowResizeHandle = _ref10.showResizeHandle;
+  var nextState = _ref11.state,
+      nextSetState = _ref11.setState,
+      nextIsSelected = _ref11.isSelected,
+      nextShowResizeHandle = _ref11.showResizeHandle;
+  return prevIsSelected === nextIsSelected && prevShowResizeHandle === nextShowResizeHandle && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
+}); // Exclude positioning from memoization
 
-        case 2:
-          scale *= PAGE_HEIGHT;
-          break;
-      }
+var PositionedItem = function PositionedItem(_ref12) {
+  var _ref12$state = _ref12.state,
+      state = _ref12$state === void 0 ? {} : _ref12$state,
+      boardSize = _ref12.boardSize,
+      currentUser = _ref12.currentUser,
+      rest = _objectWithoutProperties(_ref12, _excluded2);
 
-      if (isMacOS()) {
-        scale *= 2;
-      }
+  if (!rest.itemMap[state.type]) {
+    // eslint-disable-next-line no-console
+    console.warn("Item type ".concat(state.type, " not recognized!"));
+    return null;
+  }
 
-      queue(onZoom, {
-        scale: scale,
-        clientX: clientX,
-        clientY: clientY,
-        event: e
-      });
-    }
-  }, [onPan, onZoom, queue]);
-  var onPointerDown = React.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,
-      clientY: clientY
-    };
+  var _rest$itemMap$state$t = rest.itemMap[state.type].stateHook,
+      stateHook = _rest$itemMap$state$t === void 0 ? identity : _rest$itemMap$state$t;
+
+  var _stateHook = stateHook(state, {
+    currentUser: currentUser
+  }),
+      _stateHook$x = _stateHook.x,
+      x = _stateHook$x === void 0 ? 0 : _stateHook$x,
+      _stateHook$y = _stateHook.y,
+      y = _stateHook$y === void 0 ? 0 : _stateHook$y,
+      _stateHook$layer = _stateHook.layer,
+      layer = _stateHook$layer === void 0 ? 0 : _stateHook$layer,
+      moving = _stateHook.moving,
+      stateRest = _objectWithoutProperties(_stateHook, _excluded3);
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "".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
 
-    if (isPrimary) {
-      // Clean mainPoint on primary pointer
-      stateRef.current.mainPointer = undefined;
     }
+  }, /*#__PURE__*/React.createElement(MemoizedItem, _extends$1({}, rest, {
+    // Helps to prevent render
+    showResizeHandle: rest.isSelected && rest.showResizeHandle,
+    state: stateRest
+  })));
+};
 
-    if (stateRef.current.mainPointer !== undefined) {
-      if (stateRef.current.mainPointer !== pointerId) {
-        // This is not the main pointer
-        try {
-          var _otherPointer = otherPointer(stateRef.current.pointers, pointerId),
-              clientX2 = _otherPointer.clientX,
-              clientY2 = _otherPointer.clientY;
+var MemoizedPositionedItem = /*#__PURE__*/memo(PositionedItem);
 
-          var newClientX = (clientX2 + clientX) / 2;
-          var newClientY = (clientY2 + clientY) / 2;
-          var distance = computeDistance([clientX2, clientY2], [clientX, clientY]); // We update previous position as the new position is the center beetween both finger
+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"];
 
-          Object.assign(stateRef.current, {
-            pressed: true,
-            moving: false,
-            gestureStart: false,
-            startX: clientX,
-            startY: clientY,
-            prevX: newClientX,
-            prevY: newClientY,
-            startDistance: distance,
-            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
+var getRandomColor = function getRandomColor() {
+  return colors[Math.floor(Math.random() * colors.length)];
+}; // TODO remove user persistence
 
-          stateRef.current.mainPointer === undefined;
-        }
-      }
 
-      return;
-    } // We set the mainpointer
+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;
 
 
-    stateRef.current.mainPointer = pointerId; // And prepare move
+    persistUser(localUser);
+    return localUser;
+  }
 
-    Object.assign(stateRef.current, {
-      pressed: true,
-      moving: false,
-      gestureStart: false,
-      startX: clientX,
-      startY: clientY,
-      prevX: clientX,
-      prevY: clientY,
-      currentButton: button,
-      target: target,
-      timeStart: Date.now(),
-      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                stateRef.current.noTap = true;
-                queue(onLongTap, {
-                  clientX: clientX,
-                  clientY: clientY,
-                  altKey: altKey,
-                  ctrlKey: ctrlKey,
-                  metaKey: metaKey,
-                  target: target
-                });
+  var newUser = {
+    name: "Player",
+    color: getRandomColor(),
+    uid: nanoid()
+  };
+  persistUser(newUser);
+  return newUser;
+};
+var userAtom = atom({
+  key: "user",
+  "default": getUser()
+});
+var usersAtom = atom({
+  key: "users",
+  "default": []
+});
+var localUsersAtom = selector({
+  key: "localUsersAtom",
+  get: function get(_ref) {
+    var _get = _ref.get;
 
-              case 2:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3);
-      })), 750)
+    var currentUser = _get(userAtom);
+
+    var users = _get(usersAtom);
+
+    return users.filter(function (_ref2) {
+      var space = _ref2.space;
+      return space === currentUser.space;
     });
+  }
+});
 
-    try {
-      target.setPointerCapture(pointerId);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.log("Fail to capture pointer", e);
-    }
-  }, [onLongTap, queue]);
-  var onPointerMove = React.useCallback(function (e) {
-    if (stateRef.current.pressed) {
-      var pointerId = e.pointerId,
-          eventClientX = e.clientX,
-          eventClientY = e.clientY,
-          altKey = e.altKey,
-          ctrlKey = e.ctrlKey,
-          metaKey = e.metaKey,
-          pointerType = e.pointerType;
+var useUsers = function useUsers() {
+  var _useRecoilState = useRecoilState(userAtom),
+      _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+      currentUser = _useRecoilState2[0],
+      setCurrentUserState = _useRecoilState2[1];
 
-      if (stateRef.current.mainPointer !== pointerId) {
-        // Event from other pointer
-        stateRef.current.pointers[pointerId] = {
-          clientX: eventClientX,
-          clientY: eventClientY
-        };
-        return;
-      }
+  var users = useRecoilValue(usersAtom);
+  var localUsers = useRecoilValue(localUsersAtom);
+  var setCurrentUser = React.useCallback(function (callbackOrUser) {
+    var callback = callbackOrUser;
 
-      stateRef.current.moving = true; // Do we have two fingers ?
+    if (_typeof(callbackOrUser) === "object") {
+      callback = function callback() {
+        return callbackOrUser;
+      };
+    }
 
-      var twoFingers = Object.keys(stateRef.current.pointers).length === 2;
-      var clientX;
-      var clientY;
-      var distance;
+    setCurrentUserState(function (prevUser) {
+      var newUser = _objectSpread2(_objectSpread2({}, callback(prevUser)), {}, {
+        id: prevUser.id,
+        uid: prevUser.uid
+      });
 
-      if (twoFingers) {
-        // Find other pointerId
-        var _otherPointer2 = otherPointer(stateRef.current.pointers, pointerId),
-            clientX2 = _otherPointer2.clientX,
-            clientY2 = _otherPointer2.clientY; // Update client X with the center of each touch
+      persistUser(newUser);
+      return newUser;
+    });
+  }, [setCurrentUserState]);
+  return {
+    currentUser: currentUser,
+    setCurrentUser: setCurrentUser,
+    users: users,
+    localUsers: localUsers
+  };
+};
 
+var SubscribeUserEvents = function SubscribeUserEvents() {
+  var usersRef = React.useRef([]);
+  var setUsers = useSetRecoilState(usersAtom);
 
-        clientX = (clientX2 + eventClientX) / 2;
-        clientY = (clientY2 + eventClientY) / 2;
-        distance = computeDistance([clientX2, clientY2], [eventClientX, eventClientY]);
-      } else {
-        clientX = eventClientX;
-        clientY = eventClientY;
-      } // We drag if
-      // On non touch device
-      //   - Button is 0
-      //   - Alt key is no pressed
-      // or on touch devices
-      //   - We use only one finger
+  var _useRecoilState = 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;
 
-      var shouldDrag = pointerType !== "touch" ? stateRef.current.currentButton === 0 && !altKey : !twoFingers;
+  React.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.useEffect(function () {
+    if (!isMaster) {
+      var onGetUserList = function onGetUserList(userList) {
+        usersRef.current = userList;
+        setUsers(userList);
+      };
 
-      if (shouldDrag) {
-        // Send drag start on first move
-        if (!stateRef.current.gestureStart) {
-          wrapperRef.current.style.cursor = "move";
-          stateRef.current.gestureStart = true; // Clear tap timeout
+      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
 
-          clearTimeout(stateRef.current.longTapTimeout);
-          queue(onDragStart, {
-            deltaX: 0,
-            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,
-            altKey: altKey,
-            ctrlKey: ctrlKey,
-            metaKey: metaKey,
-            target: stateRef.current.target,
-            event: e
+  var debouncedEmitUpdateUser = useDebouncedCallback(function (newUser) {
+    wire.publish("userUpdate", newUser, true);
+  }, [wire], 500);
+  React.useEffect(function () {
+    if (currentUser && currentUser.id) {
+      debouncedEmitUpdateUser(currentUser);
+    }
+  }, [currentUser, debouncedEmitUpdateUser]);
+  React.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;
           });
-        } // Create closure
+          usersRef.current = newUsers;
+        } else {
+          var _newUsers = [].concat(_toConsumableArray(usersRef.current), [user]);
 
+          usersRef.current = _newUsers;
+        }
 
-        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
+        setUsers(usersRef.current);
+        wire.publish("updateUserList", usersRef.current);
+      }));
+    }
 
-        queue(onDrag, {
-          deltaX: deltaX,
-          deltaY: deltaY,
-          startX: stateRef.current.startX,
-          startY: stateRef.current.startY,
-          clientX: clientX,
-          clientY: clientY,
-          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) {
-          wrapperRef.current.style.cursor = "move";
-          stateRef.current.gestureStart = true; // Clear tap timeout on first move
+    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;
+};
+
+var ItemList = function ItemList() {
+  var _useItemActions = useItemActions(),
+      updateItem = _useItemActions.updateItem;
+
+  var itemList = useRecoilValue(ItemListAtom);
+  var itemMap = useRecoilValue(ItemMapAtom);
+  var selectedItems = useRecoilValue(SelectedItemsAtom);
+
+  var _useRecoilValue = useRecoilValue(ConfigurationAtom),
+      boardSize = _useRecoilValue.boardSize,
+      showResizeHandle = _useRecoilValue.showResizeHandle,
+      itemTemplates = _useRecoilValue.itemTemplates;
+
+  var _useUsers = useUsers(),
+      currentUser = _useUsers.currentUser;
+
+  return itemList.map(function (itemId) {
+    return /*#__PURE__*/React.createElement(MemoizedPositionedItem, {
+      key: itemId,
+      state: itemMap[itemId],
+      setState: updateItem,
+      isSelected: selectedItems.includes(itemId),
+      itemMap: itemTemplates,
+      boardSize: boardSize,
+      currentUser: currentUser,
+      showResizeHandle: showResizeHandle
+    });
+  });
+};
+
+var SubcribeItemEvents = function SubcribeItemEvents() {
+  var _useWire = useWire("board"),
+      wire = _useWire.wire;
+
+  var setItemMap = useSetRecoilState(ItemMapAtom);
+
+  var _useItemActions = useItemActions(),
+      updateItemOrder = _useItemActions.updateItemOrder,
+      moveItems = _useItemActions.moveItems,
+      removeItems = _useItemActions.removeItems,
+      pushItem = _useItemActions.pushItem;
 
-          clearTimeout(stateRef.current.longTapTimeout);
-        } // Create closure
+  var batchUpdate = React.useCallback(function (updatedItems) {
+    setItemMap(function (prevItemMap) {
+      return _objectSpread2(_objectSpread2({}, prevItemMap), updatedItems);
+    });
+  }, [setItemMap]);
+  React.useEffect(function () {
+    var unsub = wire.subscribe("batchItemsUpdate", function (updatedItems) {
+      batchUpdate(updatedItems);
+    });
+    return unsub;
+  }, [wire, batchUpdate]);
+  React.useEffect(function () {
+    var unsub = wire.subscribe("selectedItemsMove", function (_ref) {
+      var itemIds = _ref.itemIds,
+          posDelta = _ref.posDelta;
+      moveItems(itemIds, posDelta, false);
+    });
+    return unsub;
+  }, [wire, moveItems]);
+  React.useEffect(function () {
+    var unsub = wire.subscribe("updateItemListOrder", function (itemIds) {
+      updateItemOrder(itemIds, false);
+    });
+    return unsub;
+  }, [wire, updateItemOrder]);
+  React.useEffect(function () {
+    var unsub = wire.subscribe("pushItem", function (newItem) {
+      pushItem(newItem, null, false);
+    });
+    return unsub;
+  }, [wire, pushItem]);
+  React.useEffect(function () {
+    var unsub = wire.subscribe("insertItemBefore", function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          newItem = _ref3[0],
+          beforeId = _ref3[1];
 
+      pushItem(newItem, beforeId, false);
+    });
+    return unsub;
+  }, [wire, pushItem]);
+  React.useEffect(function () {
+    var unsub = wire.subscribe("removeItems", function (itemIds) {
+      removeItems(itemIds, false);
+    });
+    return unsub;
+  }, [wire, removeItems]);
+  return null;
+};
 
-        var _deltaX = clientX - stateRef.current.prevX;
+/**
+ * Check if element or parent has className.
+ * @param {DOMElement} element
+ * @param {string} className
+ */
+var hasClass = function hasClass(element, className) {
+  return element.classList && element.classList.contains(className);
+};
+var insideClass = function insideClass(element, className) {
+  if (hasClass(element, className)) {
+    return element;
+  }
 
-        var _deltaY = clientY - stateRef.current.prevY;
+  if (!element.parentNode) {
+    return false;
+  }
 
-        var target = stateRef.current.target; // Pan event
+  return insideClass(element.parentNode, className);
+};
+var isPointInsideRect = function isPointInsideRect(point, rect) {
+  return point.x > rect.left && point.x < rect.left + rect.width && point.y > rect.top && point.y < rect.top + rect.height;
+};
+var isItemInsideElement = function isItemInsideElement(itemElement, otherElem) {
+  var rect = otherElem.getBoundingClientRect();
+  var fourElem = Array.from(itemElement.querySelectorAll(".corner"));
+  return fourElem.every(function (corner) {
+    var _corner$getBoundingCl = corner.getBoundingClientRect(),
+        y = _corner$getBoundingCl.top,
+        x = _corner$getBoundingCl.left;
 
-        queue(onPan, {
-          deltaX: _deltaX,
-          deltaY: _deltaY,
-          button: stateRef.current.currentButton,
-          altKey: altKey,
-          ctrlKey: ctrlKey,
-          metaKey: metaKey,
-          target: target,
-          event: e
-        });
+    return isPointInsideRect({
+      x: x,
+      y: y
+    }, rect);
+  });
+};
+var getItemElem = function getItemElem(wrapper, itemId) {
+  var elems = wrapper.getElementsByClassName("item ".concat(itemId));
+  var elem = elems[0];
 
-        if (twoFingers && distance !== stateRef.current.prevDistance && onZoom) {
-          var scale = stateRef.current.prevDistance - distance;
+  if (!elem) {
+    // eslint-disable-next-line no-console
+    console.error("Missing item ".concat(itemId));
+  }
 
-          if (Math.abs(scale) > 0) {
-            queue(onZoom, {
-              scale: scale,
-              clientX: clientX,
-              clientY: clientY,
-              event: e
-            });
-            stateRef.current.prevDistance = distance;
-          }
-        }
-      }
+  return elem;
+};
+var getIdFromElem = function getIdFromElem(elem) {
+  var _elem$dataset;
 
-      stateRef.current.prevX = clientX;
-      stateRef.current.prevY = clientY;
-    }
-  }, [onDrag, onDragStart, onPan, onZoom, queue]);
-  var onPointerUp = React.useCallback(function (e) {
-    var clientX = e.clientX,
-        clientY = e.clientY,
-        altKey = e.altKey,
-        ctrlKey = e.ctrlKey,
-        metaKey = e.metaKey,
-        target = e.target,
-        pointerId = e.pointerId;
+  var value = elem === null || elem === void 0 ? void 0 : (_elem$dataset = elem.dataset) === null || _elem$dataset === void 0 ? void 0 : _elem$dataset.id;
 
-    if (!stateRef.current.pointers[pointerId]) {
-      // Pointer already gone previously with another event
-      // ignoring it
-      return;
-    } // Remove pointer from map
+  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);
+  }
 
-    delete stateRef.current.pointers[pointerId];
+  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 elem = getItemElem(wrapper, itemId);
+    if (!elem) return null;
 
-    if (stateRef.current.mainPointer !== pointerId) {
-      // If this is not the main pointer we quit here
-      return;
-    }
+    var _elem$getBoundingClie = elem.getBoundingClientRect(),
+        left = _elem$getBoundingClie.left,
+        right = _elem$getBoundingClie.right,
+        top = _elem$getBoundingClie.top,
+        bottom = _elem$getBoundingClie.bottom;
 
-    while (Object.keys(stateRef.current.pointers).length > 0) {
-      // If was main pointer but we have another one, this one become main
-      stateRef.current.mainPointer = Number(Object.keys(stateRef.current.pointers)[0]);
+    var boundingBox;
 
-      try {
-        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]];
-      }
+    if (!prev) {
+      boundingBox = {
+        left: left,
+        top: top,
+        right: right,
+        bottom: bottom
+      };
+    } else {
+      boundingBox = prev;
     }
 
-    stateRef.current.mainPointer = undefined;
-    stateRef.current.pressed = false; // Clear longTap
-
-    clearTimeout(stateRef.current.longTapTimeout);
+    boundingBox.left = Math.min(left, boundingBox.left);
+    boundingBox.top = Math.min(top, boundingBox.top);
+    boundingBox.right = Math.max(right, boundingBox.right);
+    boundingBox.bottom = Math.max(bottom, boundingBox.bottom);
+    return boundingBox;
+  }, null);
 
-    if (stateRef.current.moving) {
-      // If we were moving, send drag end event
-      stateRef.current.moving = false;
-      queue(onDragEnd, {
-        deltaX: clientX - stateRef.current.prevX,
-        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,
-        altKey: altKey,
-        ctrlKey: ctrlKey,
-        metaKey: metaKey,
-        event: e
-      });
-      wrapperRef.current.style.cursor = "auto";
-    } else {
-      var now = Date.now();
+  if (!result) {
+    return result;
+  }
 
-      if (stateRef.current.noTap) {
-        stateRef.current.noTap = false;
-      } // Send tap event only if time less than 300ms
-      else if (stateRef.current.timeStart - now < 300) {
-          queue(onTap, {
-            clientX: clientX,
-            clientY: clientY,
-            altKey: altKey,
-            ctrlKey: ctrlKey,
-            metaKey: metaKey,
-            target: target
-          });
-        }
-    }
-  }, [onDragEnd, onTap, queue]);
-  var onDoubleTapHandler = React.useCallback(function (event) {
-    queue(onDoubleTap, event);
-  }, [onDoubleTap, queue]);
-  return /*#__PURE__*/React.createElement("div", {
-    onWheel: onWheel,
-    onPointerDown: onPointerDown,
-    onPointerMove: onPointerMove,
-    onPointerUp: onPointerUp,
-    onPointerOut: onPointerUp,
-    onPointerLeave: onPointerUp,
-    onPointerCancel: onPointerUp,
-    onDoubleClick: onDoubleTapHandler,
-    style: {
-      touchAction: "none"
-    },
-    ref: wrapperRef
-  }, children);
+  result.width = result.right - result.left;
+  result.height = result.bottom - result.top;
+  return result;
 };
 
 var defaultSelectorStyle = {
@@ -6991,7 +7107,9 @@ var Board = function Board(_ref) {
       itemTemplates = _ref$itemTemplates === void 0 ? {} : _ref$itemTemplates,
       _ref$boardSize = _ref.boardSize,
       boardSize = _ref$boardSize === void 0 ? DEFAULT_BOARD_MAX_SIZE : _ref$boardSize,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$showResizeHandle = _ref.showResizeHandle,
+      showResizeHandle = _ref$showResizeHandle === void 0 ? false : _ref$showResizeHandle;
   var setConfiguration = useSetRecoilState(ConfigurationAtom);
 
   var _useDim = useDim(),
@@ -7009,10 +7127,11 @@ var Board = function Board(_ref) {
     setConfiguration(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         itemTemplates: itemTemplates,
-        boardSize: boardSize
+        boardSize: boardSize,
+        showResizeHandle: showResizeHandle
       });
     });
-  }, [itemTemplates, setConfiguration, boardSize]);
+  }, [itemTemplates, setConfiguration, boardSize, showResizeHandle]);
   React.useEffect(function () {
     updateItemExtent();
     setTimeout(updateItemExtent, 2000);
@@ -7027,9 +7146,7 @@ var Board = function Board(_ref) {
     },
     style: boardStyle,
     className: "board"
-  }, /*#__PURE__*/React.createElement(ItemList, {
-    itemTemplates: itemTemplates
-  }), children))))), /*#__PURE__*/React.createElement(Selection, null));
+  }, /*#__PURE__*/React.createElement(ItemList, null), children))))), /*#__PURE__*/React.createElement(Selection, null));
 };
 
 var TOLERANCE = 100;
@@ -7631,8 +7748,14 @@ var useItemActions = function useItemActions() {
 
                     var _ref7 = item.grid || {},
                         itemType = _ref7.type,
-                        itemSize = _ref7.size;
-
+                        itemSize = _ref7.size,
+                        _ref7$offset = _ref7.offset;
+
+                    _ref7$offset = _ref7$offset === void 0 ? {} : _ref7$offset;
+                    var _ref7$offset$x = _ref7$offset.x,
+                        offsetX = _ref7$offset$x === void 0 ? 0 : _ref7$offset$x,
+                        _ref7$offset$y = _ref7$offset.y,
+                        offsetY = _ref7$offset$y === void 0 ? 0 : _ref7$offset$y;
                     var type = globalType;
                     var size = globalSize || 1; // If item specific
 
@@ -7641,8 +7764,8 @@ var useItemActions = function useItemActions() {
                       size = itemSize || 1;
                     }
 
-                    var centerX = item.x + elem.clientWidth / 2,
-                        centerY = item.y + elem.clientHeight / 2;
+                    var centerX = item.x + elem.clientWidth / 2 - offsetX,
+                        centerY = item.y + elem.clientHeight / 2 - offsetY;
                     var newX;
                     var newY;
                     var sizeX;
@@ -7707,8 +7830,8 @@ var useItemActions = function useItemActions() {
                     }
 
                     result[id] = _objectSpread2(_objectSpread2({}, item), {}, {
-                      x: newX - elem.clientWidth / 2,
-                      y: newY - elem.clientHeight / 2
+                      x: newX + offsetX - elem.clientWidth / 2,
+                      y: newY + offsetY - elem.clientHeight / 2
                     });
                     updatedItems[id] = result[id];
                   });