react-sync-board 0.6.2 → 0.7.0

package/dist/esm/index.js

@@ -4596,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,
@@ -4804,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) {
@@ -4837,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
@@ -4892,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
@@ -4936,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,
@@ -5911,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), {}, {
@@ -5938,7 +5946,7 @@ var Selector = function Selector(_ref) {
                 wrapperRef.current.style.cursor = "crosshair";
               }
 
-            case 7:
+            case 4:
             case "end":
               return _context2.stop();
           }
@@ -5946,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 () {
@@ -6013,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), {}, {
@@ -6027,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");
@@ -6109,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", {
@@ -6124,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,
@@ -6958,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,
@@ -6969,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;
@@ -6985,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) {
@@ -6999,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
@@ -7038,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
@@ -7056,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,
@@ -7086,7 +7089,7 @@ var PanZoom = function PanZoom(_ref) {
                 }) : prev;
               });
 
-            case 5:
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -7097,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 () {
@@ -7190,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());
                   }
                 }
 
@@ -7213,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);
@@ -7233,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",
@@ -7401,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();
     },
@@ -7412,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,
@@ -7529,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) {
@@ -7608,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);
@@ -7633,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,
@@ -7744,10 +7786,10 @@ var useDim = function useDim() {
 
             case 22:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5);
+      }, _callee6);
     }));
   }, []);
   var debouncedUpdateItemExtent = useDebouncedCallback(updateItemExtent, [], 300);
@@ -7759,7 +7801,9 @@ var useDim = function useDim() {
   return {
     setDim: setDimSafe,
     getDim: getDim,
-    zoomTo: zoomTo,
+    zoomTo: zoomToCenter,
+    zoomToCenter: zoomToCenter,
+    zoomToExtent: zoomToExtent,
     getCenter: getCenterCoordinates,
     updateItemExtent: debouncedUpdateItemExtent
   };