react-sync-board 0.6.0 → 0.7.0

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext, createContext, createElement, Fragment, useRef, useLayoutEffect, useEffect, useMemo, memo } from 'react';
+import React__default, { forwardRef, useContext, createContext, createElement, Fragment, useRef, useLayoutEffect, useEffect, useMemo, memo, useCallback } from 'react';
 import { atom, selector, useRecoilValue, useRecoilCallback, useRecoilState, useSetRecoilState, RecoilRoot } from 'recoil';
 
 function ownKeys(object, enumerableOnly) {
@@ -4110,10 +4110,6 @@ var useItemList = function useItemList() {
   return items;
 };
 
-var useSelectedItems = function useSelectedItems() {
-  return useRecoilValue(SelectedItemsAtom);
-};
-
 /**
  * Run effect only when component is unmounted.
  *
@@ -4301,6 +4297,28 @@ function useThrottledCallback(callback, deps, delay, noTrailing) {
   }, __spreadArray([delay, noTrailing], deps, true));
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Like `useEffect`, but passed function is debounced.
+ *
+ * @param callback Callback like for `useEffect`, but without ability to return
+ * a cleanup function.
+ * @param deps Dependencies list that will be passed to underlying `useEffect`
+ * and `useDebouncedCallback`.
+ * @param delay Debounce delay.
+ * @param maxWait Maximum amount of milliseconds that function can be delayed
+ * before it's force execution. 0 means no max wait.
+ */
+
+function useDebouncedEffect(callback, deps, delay, maxWait) {
+  if (maxWait === void 0) {
+    maxWait = 0;
+  } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  useEffect(useDebouncedCallback(callback, deps, delay, maxWait), deps);
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Like `useEffect`, but passed function is throttled.
@@ -4445,6 +4463,45 @@ function useResizeObserver(target, callback, enabled) {
   }, [target, ro]);
 }
 
+var useDebouncedItems = function useDebouncedItems() {
+  var items = useRecoilValue(AllItemsSelector);
+
+  var _React$useState = React__default.useState(items),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      debouncedItems = _React$useState2[0],
+      setDebouncedItems = _React$useState2[1];
+
+  var updateDebouncedItems = useRecoilCallback(function (_ref) {
+    var snapshot = _ref.snapshot;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var currentItemMap;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return snapshot.getPromise(AllItemsSelector);
+
+            case 2:
+              currentItemMap = _context.sent;
+              setDebouncedItems(currentItemMap);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, []);
+  useDebouncedEffect(updateDebouncedItems, [items], 300);
+  return debouncedItems;
+};
+
+var useSelectedItems = function useSelectedItems() {
+  return useRecoilValue(SelectedItemsAtom);
+};
+
 var isMacOS = function isMacOS() {
   var userAgent = navigator.userAgent.toLowerCase();
   return /mac os ?x 10/.test(userAgent);
@@ -4539,7 +4596,9 @@ var Gesture = function Gesture(_ref6) {
       onLongTap = _ref6$onLongTap === void 0 ? empty : _ref6$onLongTap,
       _ref6$onDoubleTap = _ref6.onDoubleTap,
       onDoubleTap = _ref6$onDoubleTap === void 0 ? empty : _ref6$onDoubleTap,
-      onZoom = _ref6.onZoom;
+      onZoom = _ref6.onZoom,
+      _ref6$mainAction = _ref6.mainAction,
+      mainAction = _ref6$mainAction === void 0 ? "drag" : _ref6$mainAction;
   var wrapperRef = React__default.useRef(null);
   var stateRef = React__default.useRef({
     moving: false,
@@ -4747,6 +4806,7 @@ var Gesture = function Gesture(_ref6) {
           altKey = e.altKey,
           ctrlKey = e.ctrlKey,
           metaKey = e.metaKey,
+          buttons = e.buttons,
           pointerType = e.pointerType;
 
       if (stateRef.current.mainPointer !== pointerId) {
@@ -4780,13 +4840,20 @@ var Gesture = function Gesture(_ref6) {
         clientY = eventClientY;
       } // We drag if
       // On non touch device
-      //   - Button is 0
-      //   - Alt key is no pressed
+      //   - Only button is pressed (1)
+      //   - any special key is no pressed
       // or on touch devices
       //   - We use only one finger
 
 
-      var shouldDrag = pointerType !== "touch" ? stateRef.current.currentButton === 0 && !altKey : !twoFingers;
+      var altAction = altKey || ctrlKey || metaKey || buttons !== 1;
+
+      if (mainAction !== "drag") {
+        altAction = !altAction;
+      }
+
+      var shouldDrag = pointerType !== "touch" ? !altAction : !twoFingers;
+      var shouldPan = pointerType !== "touch" ? altAction : twoFingers;
 
       if (shouldDrag) {
         // Send drag start on first move
@@ -4835,7 +4902,9 @@ var Gesture = function Gesture(_ref6) {
           target: stateRef.current.target,
           event: e
         });
-      } else {
+      }
+
+      if (shouldPan) {
         if (!stateRef.current.gestureStart) {
           wrapperRef.current.style.cursor = "move";
           stateRef.current.gestureStart = true; // Clear tap timeout on first move
@@ -4879,7 +4948,7 @@ var Gesture = function Gesture(_ref6) {
       stateRef.current.prevX = clientX;
       stateRef.current.prevY = clientY;
     }
-  }, [onDrag, onDragStart, onPan, onZoom, queue]);
+  }, [mainAction, onDrag, onDragStart, onPan, onZoom, queue]);
   var onPointerUp = React__default.useCallback(function (e) {
     var clientX = e.clientX,
         clientY = e.clientY,
@@ -5033,7 +5102,7 @@ var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
     _excluded3 = ["x", "y", "layer", "moving"];
 
 var _templateObject$2;
-var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  transition: transform 150ms;\n  user-select: none;\n  padding: 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 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  & .center {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n    top: 50%;\n    left: 50%;\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);
@@ -5287,6 +5356,8 @@ var Item = function Item(_ref5) {
     className: "corner bottom-right"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "corner bottom-left"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "center"
   }), isSelected && showResizeHandle && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, resizeDirections.b && /*#__PURE__*/React__default.createElement(ResizeHandler, {
     className: "resize resize-ratio",
     onResize: onResizeRatio
@@ -5319,8 +5390,6 @@ var PositionedItem = function PositionedItem(_ref12) {
       rest = _objectWithoutProperties(_ref12, _excluded2);
 
   if (!rest.itemMap[state.type]) {
-    // eslint-disable-next-line no-console
-    console.warn("Item type ".concat(state.type, " not recognized!"));
     return null;
   }
 
@@ -5854,24 +5923,20 @@ var Selector = function Selector(_ref) {
     }));
   }, [setSelected]);
   useThrottledEffect(updateSelected, [selector, updateSelected], 200);
-
-  var onDragStart = /*#__PURE__*/function () {
+  var onDragStart = React__default.useCallback( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(event) {
-      var button, altKey, ctrlKey, metaKey, foundElement, metaKeyPressed, goodButton;
+      var foundElement;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              button = event.button, altKey = event.altKey, ctrlKey = event.ctrlKey, metaKey = event.metaKey;
-              _context2.next = 3;
+              _context2.next = 2;
               return findElementUnderPointer(event);
 
-            case 3:
+            case 2:
               foundElement = _context2.sent;
-              metaKeyPressed = altKey || ctrlKey || metaKey;
-              goodButton = moveFirst ? button === 1 || button === 0 && metaKeyPressed : button === 0 && !metaKeyPressed;
 
-              if (goodButton && (!foundElement || moveFirst)) {
+              if (!foundElement) {
                 stateRef.current.moving = true;
                 setBoardState(function (prev) {
                   return _objectSpread2(_objectSpread2({}, prev), {}, {
@@ -5881,7 +5946,7 @@ var Selector = function Selector(_ref) {
                 wrapperRef.current.style.cursor = "crosshair";
               }
 
-            case 7:
+            case 4:
             case "end":
               return _context2.stop();
           }
@@ -5889,11 +5954,10 @@ var Selector = function Selector(_ref) {
       }, _callee2);
     }));
 
-    return function onDragStart(_x) {
+    return function (_x) {
       return _ref4.apply(this, arguments);
     };
-  }();
-
+  }(), [findElementUnderPointer, setBoardState]);
   var onDrag = useRecoilCallback(function (_ref5) {
     var snapshot = _ref5.snapshot;
     return /*#__PURE__*/function () {
@@ -5956,8 +6020,7 @@ var Selector = function Selector(_ref) {
       };
     }();
   }, []);
-
-  var onDragEnd = function onDragEnd() {
+  var onDragEnd = React__default.useCallback(function () {
     if (stateRef.current.moving) {
       setBoardState(function (prev) {
         return _objectSpread2(_objectSpread2({}, prev), {}, {
@@ -5970,8 +6033,7 @@ var Selector = function Selector(_ref) {
       });
       wrapperRef.current.style.cursor = "auto";
     }
-  };
-
+  }, [setBoardState]);
   var onLongTap = React__default.useCallback(function (_ref8) {
     var target = _ref8.target;
     var foundElement = insideClass(target, "item");
@@ -6052,7 +6114,8 @@ var Selector = function Selector(_ref) {
     onDrag: onDrag,
     onDragEnd: onDragEnd,
     onTap: onTap,
-    onLongTap: onLongTap
+    onLongTap: onLongTap,
+    mainAction: moveFirst ? "pan" : "drag"
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: wrapperRef
   }, selector.moving && /*#__PURE__*/React__default.createElement("div", {
@@ -6067,6 +6130,7 @@ var Selector = function Selector(_ref) {
 
 var ActionPane = function ActionPane(_ref) {
   var children = _ref.children;
+      _ref.moveFirst;
 
   var _useItemActions = useItemActions(),
       moveItems = _useItemActions.moveItems,
@@ -6901,8 +6965,6 @@ var usePositionNavigator = function usePositionNavigator() {
   return null;
 };
 
-var SCALE_TOLERANCE = 0.8;
-
 var PanZoom = function PanZoom(_ref) {
   var children = _ref.children,
       _ref$moveFirst = _ref.moveFirst,
@@ -6912,7 +6974,8 @@ var PanZoom = function PanZoom(_ref) {
 
   var _useDim = useDim(),
       setDim = _useDim.setDim,
-      zoomTo = _useDim.zoomTo;
+      zoomToCenter = _useDim.zoomToCenter,
+      zoomToExtent = _useDim.zoomToExtent;
 
   var _useRecoilValue = useRecoilValue(ConfigurationAtom),
       itemExtentGlobal = _useRecoilValue.itemExtent;
@@ -6928,10 +6991,14 @@ var PanZoom = function PanZoom(_ref) {
   var getMouseInfo = useMousePosition(wrappedRef); // Hooks to save/restore position
 
   usePositionNavigator();
+  /**
+   * Center board on startup
+   */
+
   var centerBoard = useRecoilCallback(function (_ref2) {
     var snapshot = _ref2.snapshot;
     return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _yield$snapshot$getPr, _yield$snapshot$getPr2, left, top, width, height, boardWrapperRect, scaleX, scaleY, newScale, scaleWithTolerance, centerX, centerY;
+      var _yield$snapshot$getPr, itemExtent;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -6942,34 +7009,17 @@ var PanZoom = function PanZoom(_ref) {
 
             case 2:
               _yield$snapshot$getPr = _context.sent;
-              _yield$snapshot$getPr2 = _yield$snapshot$getPr.itemExtent;
-              left = _yield$snapshot$getPr2.left;
-              top = _yield$snapshot$getPr2.top;
-              width = _yield$snapshot$getPr2.width;
-              height = _yield$snapshot$getPr2.height;
-              boardWrapperRect = _yield$snapshot$getPr.boardWrapperRect;
-              scaleX = boardWrapperRect.width / width;
-              scaleY = boardWrapperRect.height / height;
-              newScale = Math.min(scaleX, scaleY);
-              scaleWithTolerance = newScale * SCALE_TOLERANCE;
-              centerX = boardWrapperRect.width / 2 - (left + width / 2) * scaleWithTolerance;
-              centerY = boardWrapperRect.height / 2 - (top + height / 2) * scaleWithTolerance;
-              setDim(function (prev) {
-                return _objectSpread2(_objectSpread2({}, prev), {}, {
-                  translateX: centerX,
-                  translateY: centerY,
-                  scale: scaleWithTolerance
-                });
-              });
+              itemExtent = _yield$snapshot$getPr.itemExtent;
+              zoomToExtent(itemExtent);
 
-            case 16:
+            case 5:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     }));
-  }, [setDim]);
+  }, [zoomToExtent]);
   React__default.useEffect(function () {
     if (!centered && itemExtentGlobal.left) {
       // Center board on first valid extent
@@ -6981,7 +7031,7 @@ var PanZoom = function PanZoom(_ref) {
     var clientX = _ref4.clientX,
         clientY = _ref4.clientY,
         scale = _ref4.scale;
-    zoomTo(1 - scale / 500, {
+    zoomToCenter(1 - scale / 500, {
       x: clientX,
       y: clientY
     }); // Update the board zooming state
@@ -6999,15 +7049,25 @@ var PanZoom = function PanZoom(_ref) {
         zooming: true
       }) : prev;
     });
-  }, [setBoardState, zoomTo]);
+  }, [setBoardState, zoomToCenter]);
   var onPan = React__default.useCallback( /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref5) {
-      var deltaX, deltaY;
+      var deltaX, deltaY, target, insideItem;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              deltaX = _ref5.deltaX, deltaY = _ref5.deltaY;
+              deltaX = _ref5.deltaX, deltaY = _ref5.deltaY, target = _ref5.target;
+              insideItem = insideClass(target, "item") && !insideClass(target, "locked");
+
+              if (!(insideItem && moveFirst)) {
+                _context2.next = 4;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 4:
               setDim(function (prev) {
                 return _objectSpread2(_objectSpread2({}, prev), {}, {
                   translateX: prev.translateX + deltaX,
@@ -7029,7 +7089,7 @@ var PanZoom = function PanZoom(_ref) {
                 }) : prev;
               });
 
-            case 5:
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -7040,15 +7100,7 @@ var PanZoom = function PanZoom(_ref) {
     return function (_x) {
       return _ref6.apply(this, arguments);
     };
-  }(), [setBoardState, setDim]);
-  var onDrag = React__default.useCallback(function (state) {
-    var target = state.target;
-    var outsideItem = !insideClass(target, "item") || insideClass(target, "locked");
-
-    if (moveFirst && outsideItem) {
-      onPan(state);
-    }
-  }, [moveFirst, onPan]);
+  }(), [moveFirst, setBoardState, setDim]);
   var onKeyDown = useRecoilCallback(function (_ref7) {
     var snapshot = _ref7.snapshot;
     return /*#__PURE__*/function () {
@@ -7133,14 +7185,14 @@ var PanZoom = function PanZoom(_ref) {
                     translateX: prev.translateX + moveX
                   });
                 });
-                zoomTo(zoom);
+                zoomToCenter(zoom);
                 e.preventDefault();
 
               case 31:
                 // Temporary zoom
                 if (e.key === " " && !e.repeat) {
                   if (getMouseInfo().hover) {
-                    zoomTo(3, getMouseInfo());
+                    zoomToCenter(3, getMouseInfo());
                   }
                 }
 
@@ -7156,15 +7208,15 @@ var PanZoom = function PanZoom(_ref) {
         return _ref8.apply(this, arguments);
       };
     }();
-  }, [setDim, zoomTo, getMouseInfo]);
+  }, [setDim, zoomToCenter, getMouseInfo]);
   var onKeyUp = React__default.useCallback(function (e) {
     // Ignore text in Input or Textarea
     if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return; // Zoom out on release
 
     if (e.key === " " && getMouseInfo().hover) {
-      zoomTo(1 / 3, getMouseInfo());
+      zoomToCenter(1 / 3, getMouseInfo());
     }
-  }, [getMouseInfo, zoomTo]);
+  }, [getMouseInfo, zoomToCenter]);
   React__default.useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);
@@ -7176,7 +7228,7 @@ var PanZoom = function PanZoom(_ref) {
   return /*#__PURE__*/React__default.createElement(Gesture, {
     onPan: onPan,
     onZoom: onZoom,
-    onDrag: onDrag
+    mainAction: moveFirst ? "pan" : "drag"
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: "inline-block",
@@ -7344,7 +7396,9 @@ var Board = function Board(_ref) {
     moveFirst: moveFirst
   }, /*#__PURE__*/React__default.createElement(Selector, {
     moveFirst: moveFirst
-  }, /*#__PURE__*/React__default.createElement(ActionPane, null, /*#__PURE__*/React__default.createElement(CursorPane, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ActionPane, {
+    moveFirst: moveFirst
+  }, /*#__PURE__*/React__default.createElement(CursorPane, null, /*#__PURE__*/React__default.createElement("div", {
     onContextMenu: function onContextMenu(e) {
       e.preventDefault();
     },
@@ -7355,6 +7409,7 @@ var Board = function Board(_ref) {
 
 var TOLERANCE = 100;
 var MIN_SIZE = 1000;
+var SCALE_TOLERANCE = 0.8;
 
 var translateBoundaries = function translateBoundaries(_ref) {
   var x = _ref.x,
@@ -7472,7 +7527,7 @@ var useDim = function useDim() {
       };
     }();
   }, [setDim]);
-  var zoomTo = useRecoilCallback(function (_ref5) {
+  var zoomToCenter = useRecoilCallback(function (_ref5) {
     var snapshot = _ref5.snapshot;
     return /*#__PURE__*/function () {
       var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(factor, zoomCenter) {
@@ -7551,24 +7606,68 @@ var useDim = function useDim() {
       };
     }();
   }, [setDim]);
-  var updateScaleBoundaries = useRecoilCallback(function (_ref7) {
+  var zoomToExtent = useRecoilCallback(function (_ref7) {
     var snapshot = _ref7.snapshot;
-    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _yield$snapshot$getPr3, _yield$snapshot$getPr4, width, height, boardWrapperRect, scaleX, scaleY, newScale;
+    return /*#__PURE__*/function () {
+      var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref8) {
+        var left, top, width, height, _yield$snapshot$getPr3, boardWrapperRect, scaleX, scaleY, newScale, scaleWithTolerance, centerX, centerY;
 
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                left = _ref8.left, top = _ref8.top, width = _ref8.width, height = _ref8.height;
+                _context3.next = 3;
+                return snapshot.getPromise(ConfigurationAtom);
+
+              case 3:
+                _yield$snapshot$getPr3 = _context3.sent;
+                boardWrapperRect = _yield$snapshot$getPr3.boardWrapperRect;
+                scaleX = boardWrapperRect.width / width;
+                scaleY = boardWrapperRect.height / height;
+                newScale = Math.min(scaleX, scaleY);
+                scaleWithTolerance = newScale * SCALE_TOLERANCE;
+                centerX = boardWrapperRect.width / 2 - (left + width / 2) * scaleWithTolerance;
+                centerY = boardWrapperRect.height / 2 - (top + height / 2) * scaleWithTolerance;
+                setDim(function (prev) {
+                  return _objectSpread2(_objectSpread2({}, prev), {}, {
+                    translateX: centerX,
+                    translateY: centerY,
+                    scale: scaleWithTolerance
+                  });
+                });
+
+              case 12:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      return function (_x4) {
+        return _ref9.apply(this, arguments);
+      };
+    }();
+  }, [setDim]);
+  var updateScaleBoundaries = useRecoilCallback(function (_ref10) {
+    var snapshot = _ref10.snapshot;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var _yield$snapshot$getPr4, _yield$snapshot$getPr5, width, height, boardWrapperRect, scaleX, scaleY, newScale;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return snapshot.getPromise(ConfigurationAtom);
 
             case 2:
-              _yield$snapshot$getPr3 = _context3.sent;
-              _yield$snapshot$getPr4 = _yield$snapshot$getPr3.itemExtent;
-              width = _yield$snapshot$getPr4.width;
-              height = _yield$snapshot$getPr4.height;
-              boardWrapperRect = _yield$snapshot$getPr3.boardWrapperRect;
+              _yield$snapshot$getPr4 = _context4.sent;
+              _yield$snapshot$getPr5 = _yield$snapshot$getPr4.itemExtent;
+              width = _yield$snapshot$getPr5.width;
+              height = _yield$snapshot$getPr5.height;
+              boardWrapperRect = _yield$snapshot$getPr4.boardWrapperRect;
               scaleX = boardWrapperRect.width / width;
               scaleY = boardWrapperRect.height / height;
               newScale = Math.min(scaleX, scaleY);
@@ -7576,86 +7675,86 @@ var useDim = function useDim() {
 
             case 11:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     }));
   }, []);
-  var getCenterCoordinates = useRecoilCallback(function (_ref9) {
-    var snapshot = _ref9.snapshot;
-    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var _yield$snapshot$getPr5, boardWrapperRect, boardSize, _yield$snapshot$getPr6, translateX, translateY, scale;
+  var getCenterCoordinates = useRecoilCallback(function (_ref12) {
+    var snapshot = _ref12.snapshot;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      var _yield$snapshot$getPr6, boardWrapperRect, boardSize, _yield$snapshot$getPr7, translateX, translateY, scale;
 
-      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 snapshot.getPromise(ConfigurationAtom);
 
             case 2:
-              _yield$snapshot$getPr5 = _context4.sent;
-              boardWrapperRect = _yield$snapshot$getPr5.boardWrapperRect;
-              boardSize = _yield$snapshot$getPr5.boardSize;
-              _context4.next = 7;
+              _yield$snapshot$getPr6 = _context5.sent;
+              boardWrapperRect = _yield$snapshot$getPr6.boardWrapperRect;
+              boardSize = _yield$snapshot$getPr6.boardSize;
+              _context5.next = 7;
               return snapshot.getPromise(BoardTransformAtom);
 
             case 7:
-              _yield$snapshot$getPr6 = _context4.sent;
-              translateX = _yield$snapshot$getPr6.translateX;
-              translateY = _yield$snapshot$getPr6.translateY;
-              scale = _yield$snapshot$getPr6.scale;
-              return _context4.abrupt("return", {
+              _yield$snapshot$getPr7 = _context5.sent;
+              translateX = _yield$snapshot$getPr7.translateX;
+              translateY = _yield$snapshot$getPr7.translateY;
+              scale = _yield$snapshot$getPr7.scale;
+              return _context5.abrupt("return", {
                 x: (boardWrapperRect.width / 2 - translateX) / scale - boardSize / 2,
                 y: (boardWrapperRect.height / 2 - translateY) / scale - boardSize / 2
               });
 
             case 12:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4);
+      }, _callee5);
     }));
   }, []);
-  var updateItemExtent = useRecoilCallback(function (_ref11) {
-    var snapshot = _ref11.snapshot,
-        set = _ref11.set;
-    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var itemIds, _yield$snapshot$getPr7, boardWrapperRect, boardWrapper, boardSize, _yield$snapshot$getPr8, scale, translateX, translateY, _ref13, left, top, width, height, relativeExtent, delta, _delta;
+  var updateItemExtent = useRecoilCallback(function (_ref14) {
+    var snapshot = _ref14.snapshot,
+        set = _ref14.set;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+      var itemIds, _yield$snapshot$getPr8, boardWrapperRect, boardWrapper, boardSize, _yield$snapshot$getPr9, scale, translateX, translateY, _ref16, left, top, width, height, relativeExtent, delta, _delta;
 
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
-              _context5.next = 2;
+              _context6.next = 2;
               return snapshot.getPromise(ItemListAtom);
 
             case 2:
-              itemIds = _context5.sent;
-              _context5.next = 5;
+              itemIds = _context6.sent;
+              _context6.next = 5;
               return snapshot.getPromise(ConfigurationAtom);
 
             case 5:
-              _yield$snapshot$getPr7 = _context5.sent;
-              boardWrapperRect = _yield$snapshot$getPr7.boardWrapperRect;
-              boardWrapper = _yield$snapshot$getPr7.boardWrapper;
-              boardSize = _yield$snapshot$getPr7.boardSize;
-              _context5.next = 11;
+              _yield$snapshot$getPr8 = _context6.sent;
+              boardWrapperRect = _yield$snapshot$getPr8.boardWrapperRect;
+              boardWrapper = _yield$snapshot$getPr8.boardWrapper;
+              boardSize = _yield$snapshot$getPr8.boardSize;
+              _context6.next = 11;
               return snapshot.getPromise(BoardTransformAtom);
 
             case 11:
-              _yield$snapshot$getPr8 = _context5.sent;
-              scale = _yield$snapshot$getPr8.scale;
-              translateX = _yield$snapshot$getPr8.translateX;
-              translateY = _yield$snapshot$getPr8.translateY;
-              _ref13 = getItemBoundingBox(itemIds, boardWrapper) || {
+              _yield$snapshot$getPr9 = _context6.sent;
+              scale = _yield$snapshot$getPr9.scale;
+              translateX = _yield$snapshot$getPr9.translateX;
+              translateY = _yield$snapshot$getPr9.translateY;
+              _ref16 = getItemBoundingBox(itemIds, boardWrapper) || {
                 left: boardSize / 2 * scale + boardWrapperRect.left + translateX,
                 top: boardSize / 2 * scale + boardWrapperRect.top + translateY,
                 width: 0,
                 height: 0
-              }, left = _ref13.left, top = _ref13.top, width = _ref13.width, height = _ref13.height;
+              }, left = _ref16.left, top = _ref16.top, width = _ref16.width, height = _ref16.height;
               relativeExtent = {
                 left: (left - boardWrapperRect.left - translateX) / scale,
                 top: (top - boardWrapperRect.top - translateY) / scale,
@@ -7687,10 +7786,10 @@ var useDim = function useDim() {
 
             case 22:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5);
+      }, _callee6);
     }));
   }, []);
   var debouncedUpdateItemExtent = useDebouncedCallback(updateItemExtent, [], 300);
@@ -7702,7 +7801,9 @@ var useDim = function useDim() {
   return {
     setDim: setDimSafe,
     getDim: getDim,
-    zoomTo: zoomTo,
+    zoomTo: zoomToCenter,
+    zoomToCenter: zoomToCenter,
+    zoomToExtent: zoomToExtent,
     getCenter: getCenterCoordinates,
     updateItemExtent: debouncedUpdateItemExtent
   };
@@ -8658,8 +8759,10 @@ var getActionsFromItem = function getActionsFromItem(item, itemMap) {
 };
 
 var useAvailableActions = function useAvailableActions() {
+  var itemMap = useRecoilValue(ItemMapAtom);
+
   var _useRecoilValue = useRecoilValue(ConfigurationAtom),
-      itemMap = _useRecoilValue.itemTemplates;
+      itemTemplates = _useRecoilValue.itemTemplates;
 
   var selected = useRecoilValue(SelectedItemsAtom);
 
@@ -8669,6 +8772,13 @@ var useAvailableActions = function useAvailableActions() {
       setAvailableActions = _React$useState2[1];
 
   var isMountedRef = React__default.useRef(false);
+  React__default.useEffect(function () {
+    // Mounted guard
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+    };
+  }, []);
   var getItemListOrSelected = useRecoilCallback(function (_ref) {
     var snapshot = _ref.snapshot;
     return /*#__PURE__*/function () {
@@ -8716,19 +8826,12 @@ var useAvailableActions = function useAvailableActions() {
       };
     }();
   }, []);
-  React__default.useEffect(function () {
-    // Mounted guard
-    isMountedRef.current = true;
-    return function () {
-      isMountedRef.current = false;
-    };
-  }, []);
   /**
    * Returns available actions for selected items. An action is kept only if all
    * items have this exact same action with same parameters.
    */
 
-  var updateAvailableActions = React__default.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  var updateAvailableActions = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var _yield$getItemListOrS, _yield$getItemListOrS2, selectedItemIds, selectedItemList, allActions;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -8758,13 +8861,13 @@ var useAvailableActions = function useAvailableActions() {
 
           case 9:
             allActions = selectedItemList.reduce(function (acc, item) {
-              var itemActions = getActionsFromItem(item, itemMap);
+              var itemActions = getActionsFromItem(item, itemTemplates);
               return acc.filter(function (value) {
                 return itemActions.some(function (itemAction) {
                   return es6(value, itemAction);
                 });
               });
-            }, getActionsFromItem(selectedItemList[0], itemMap));
+            }, getActionsFromItem(selectedItemList[0], itemTemplates));
             setAvailableActions(allActions);
             _context2.next = 14;
             break;
@@ -8778,11 +8881,11 @@ var useAvailableActions = function useAvailableActions() {
         }
       }
     }, _callee2);
-  })), [getItemListOrSelected, itemMap]); // Update available actions when selection change
+  })), [getItemListOrSelected, itemTemplates]); // Update available actions when selection change
 
-  React__default.useEffect(function () {
-    updateAvailableActions();
-  }, [updateAvailableActions, selected]);
+  React__default.useEffect(updateAvailableActions, [updateAvailableActions, selected]); // Debounced update available actions when items change
+
+  useDebouncedEffect(updateAvailableActions, [itemMap, updateAvailableActions], 300);
   return {
     availableActions: availableActions
   };
@@ -9367,7 +9470,11 @@ var SyncBoard = function SyncBoard(_ref) {
     });
   }, [setConfiguration, uid]);
   useResizeObserver(boardWrapperRef, function () {
-    return setConfiguration(function (prev) {
+    if (!boardWrapperRef.current) {
+      return;
+    }
+
+    setConfiguration(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         boardWrapperRect: boardWrapperRef.current.getBoundingClientRect()
       });
@@ -9435,5 +9542,5 @@ var ConnectedSyncRoom = function ConnectedSyncRoom(_ref) {
   }, /*#__PURE__*/React__default.createElement(SubscribeUserEvents, null), children));
 };
 
-export { Board, ConnectedSyncBoard as BoardWrapper, ConnectedSyncRoom as RoomWrapper, useAvailableActions, useBoardConfig, useDim as useBoardPosition, useBoardState, useItemActions, useItemInteraction, useItemList as useItems, useMessage, useSelectedItems, useSelectionBox, useUsers, useWire };
+export { Board, ConnectedSyncBoard as BoardWrapper, ConnectedSyncRoom as RoomWrapper, useAvailableActions, useBoardConfig, useDim as useBoardPosition, useBoardState, useDebouncedItems, useItemActions, useItemInteraction, useItemList as useItems, useMessage, useSelectedItems, useSelectionBox, useUsers, useWire };
 //# sourceMappingURL=index.js.map