react-sync-board 0.6.1 → 0.7.1

package/dist/cjs/index.js

@@ -4578,6 +4578,18 @@ var computeDistance = function computeDistance(_ref, _ref2) {
 
 var empty = function empty() {};
 
+var stopPropagation = function stopPropagation(fn) {
+  return function (arg) {
+    var event = arg.event;
+
+    if (!event.isPropagationStopped()) {
+      return fn(arg);
+    }
+
+    return null;
+  };
+};
+
 var protect = function protect(fn) {
   return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
     var _args = arguments;
@@ -4608,6 +4620,35 @@ var protect = function protect(fn) {
   }));
 };
 
+var PromiseQueue = /*#__PURE__*/function () {
+  function PromiseQueue() {
+    _classCallCheck(this, PromiseQueue);
+
+    _defineProperty(this, "lastPromise", Promise.resolve(true));
+  }
+
+  _createClass(PromiseQueue, [{
+    key: "add",
+    value: function add(operation) {
+      var _this = this;
+
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      return new Promise(function (resolve, reject) {
+        _this.lastPromise = _this.lastPromise.then(function () {
+          return stopPropagation(protect(operation)).apply(void 0, args);
+        }).then(resolve)["catch"](reject);
+      });
+    }
+  }]);
+
+  return PromiseQueue;
+}();
+
+var promiseQueue = new PromiseQueue();
+
 var Gesture = function Gesture(_ref6) {
   var children = _ref6.children,
       _ref6$onDrag = _ref6.onDrag,
@@ -4624,57 +4665,25 @@ 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['default'].useRef(null);
   var stateRef = React__default['default'].useRef({
     moving: false,
     pointers: {},
     mainPointer: undefined
   });
-  var queueRef = React__default['default'].useRef([]); // Queue event to avoid async mess
-
-  var queue = React__default['default'].useCallback(function (callback, args) {
-    queueRef.current.push( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return protect(callback)(args);
-
-            case 2:
-              queueRef.current.shift();
-
-              if (!(queueRef.current.length !== 0)) {
-                _context2.next = 6;
-                break;
-              }
-
-              _context2.next = 6;
-              return protect(queueRef.current[0])();
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-
-    if (queueRef.current.length === 1) {
-      protect(queueRef.current[0])();
-    }
-  }, []);
-  var onWheel = React__default['default'].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.
+  var onWheel = React__default['default'].useCallback(function (event) {
+    var deltaX = event.deltaX,
+        deltaY = event.deltaY,
+        clientX = event.clientX,
+        clientY = event.clientY,
+        deltaMode = event.deltaMode,
+        ctrlKey = event.ctrlKey,
+        altKey = event.altKey,
+        metaKey = event.metaKey,
+        target = event.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.
 
@@ -4687,14 +4696,14 @@ var Gesture = function Gesture(_ref6) {
 
 
     if (isMacOS() && !ctrlKey) {
-      queue(onPan, {
+      promiseQueue.add(onPan, {
         deltaX: -2 * deltaX,
         deltaY: -2 * deltaY,
         button: 1,
         ctrlKey: ctrlKey,
         metaKey: metaKey,
         target: target,
-        event: e
+        event: event
       });
     } else {
       // Quit if onZoom is not set
@@ -4716,25 +4725,25 @@ var Gesture = function Gesture(_ref6) {
         scale *= 2;
       }
 
-      queue(onZoom, {
+      promiseQueue.add(onZoom, {
         scale: scale,
         clientX: clientX,
         clientY: clientY,
-        event: e
+        event: event
       });
     }
-  }, [onPan, onZoom, queue]);
-  var onPointerDown = React__default['default'].useCallback(function (_ref8) {
-    var target = _ref8.target,
-        button = _ref8.button,
-        clientX = _ref8.clientX,
-        clientY = _ref8.clientY,
-        pointerId = _ref8.pointerId,
-        altKey = _ref8.altKey,
-        ctrlKey = _ref8.ctrlKey,
-        metaKey = _ref8.metaKey,
-        isPrimary = _ref8.isPrimary;
-    // Add pointer to map
+  }, [onPan, onZoom]);
+  var onPointerDown = React__default['default'].useCallback(function (event) {
+    var target = event.target,
+        button = event.button,
+        clientX = event.clientX,
+        clientY = event.clientY,
+        pointerId = event.pointerId,
+        altKey = event.altKey,
+        ctrlKey = event.ctrlKey,
+        metaKey = event.metaKey,
+        isPrimary = event.isPrimary; // Add pointer to map
+
     stateRef.current.pointers[pointerId] = {
       clientX: clientX,
       clientY: clientY
@@ -4793,27 +4802,28 @@ var Gesture = function Gesture(_ref6) {
       currentButton: button,
       target: target,
       timeStart: Date.now(),
-      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      longTapTimeout: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
                 stateRef.current.noTap = true;
-                queue(onLongTap, {
+                promiseQueue.add(onLongTap, {
                   clientX: clientX,
                   clientY: clientY,
                   altKey: altKey,
                   ctrlKey: ctrlKey,
                   metaKey: metaKey,
-                  target: target
+                  target: target,
+                  event: event
                 });
 
               case 2:
               case "end":
-                return _context3.stop();
+                return _context2.stop();
             }
           }
-        }, _callee3);
+        }, _callee2);
       })), 750)
     });
 
@@ -4823,16 +4833,17 @@ var Gesture = function Gesture(_ref6) {
       // eslint-disable-next-line no-console
       console.log("Fail to capture pointer", e);
     }
-  }, [onLongTap, queue]);
-  var onPointerMove = React__default['default'].useCallback(function (e) {
+  }, [onLongTap]);
+  var onPointerMove = React__default['default'].useCallback(function (event) {
     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 pointerId = event.pointerId,
+          eventClientX = event.clientX,
+          eventClientY = event.clientY,
+          altKey = event.altKey,
+          ctrlKey = event.ctrlKey,
+          metaKey = event.metaKey,
+          buttons = event.buttons,
+          pointerType = event.pointerType;
 
       if (stateRef.current.mainPointer !== pointerId) {
         // Event from other pointer
@@ -4865,13 +4876,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
@@ -4880,7 +4898,7 @@ var Gesture = function Gesture(_ref6) {
           stateRef.current.gestureStart = true; // Clear tap timeout
 
           clearTimeout(stateRef.current.longTapTimeout);
-          queue(onDragStart, {
+          promiseQueue.add(onDragStart, {
             deltaX: 0,
             deltaY: 0,
             startX: stateRef.current.startX,
@@ -4894,17 +4912,16 @@ var Gesture = function Gesture(_ref6) {
             ctrlKey: ctrlKey,
             metaKey: metaKey,
             target: stateRef.current.target,
-            event: e
+            event: event
           });
-        } // Create closure
-
+        }
 
         var deltaX = clientX - stateRef.current.prevX;
         var deltaY = clientY - stateRef.current.prevY;
         var distanceX = clientX - stateRef.current.startX;
         var distanceY = clientY - stateRef.current.startY; // Drag event
 
-        queue(onDrag, {
+        promiseQueue.add(onDrag, {
           deltaX: deltaX,
           deltaY: deltaY,
           startX: stateRef.current.startX,
@@ -4918,9 +4935,11 @@ var Gesture = function Gesture(_ref6) {
           ctrlKey: ctrlKey,
           metaKey: metaKey,
           target: stateRef.current.target,
-          event: e
+          event: event
         });
-      } else {
+      }
+
+      if (shouldPan) {
         if (!stateRef.current.gestureStart) {
           wrapperRef.current.style.cursor = "move";
           stateRef.current.gestureStart = true; // Clear tap timeout on first move
@@ -4935,7 +4954,7 @@ var Gesture = function Gesture(_ref6) {
 
         var target = stateRef.current.target; // Pan event
 
-        queue(onPan, {
+        promiseQueue.add(onPan, {
           deltaX: _deltaX,
           deltaY: _deltaY,
           button: stateRef.current.currentButton,
@@ -4943,18 +4962,18 @@ var Gesture = function Gesture(_ref6) {
           ctrlKey: ctrlKey,
           metaKey: metaKey,
           target: target,
-          event: e
+          event: event
         });
 
         if (twoFingers && distance !== stateRef.current.prevDistance && onZoom) {
           var scale = stateRef.current.prevDistance - distance;
 
           if (Math.abs(scale) > 0) {
-            queue(onZoom, {
+            promiseQueue.add(onZoom, {
               scale: scale,
               clientX: clientX,
               clientY: clientY,
-              event: e
+              event: event
             });
             stateRef.current.prevDistance = distance;
           }
@@ -4964,15 +4983,15 @@ var Gesture = function Gesture(_ref6) {
       stateRef.current.prevX = clientX;
       stateRef.current.prevY = clientY;
     }
-  }, [onDrag, onDragStart, onPan, onZoom, queue]);
-  var onPointerUp = React__default['default'].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;
+  }, [mainAction, onDrag, onDragStart, onPan, onZoom]);
+  var onPointerUp = React__default['default'].useCallback(function (event) {
+    var clientX = event.clientX,
+        clientY = event.clientY,
+        altKey = event.altKey,
+        ctrlKey = event.ctrlKey,
+        metaKey = event.metaKey,
+        target = event.target,
+        pointerId = event.pointerId;
 
     if (!stateRef.current.pointers[pointerId]) {
       // Pointer already gone previously with another event
@@ -5011,7 +5030,7 @@ var Gesture = function Gesture(_ref6) {
     if (stateRef.current.moving) {
       // If we were moving, send drag end event
       stateRef.current.moving = false;
-      queue(onDragEnd, {
+      promiseQueue.add(onDragEnd, {
         deltaX: clientX - stateRef.current.prevX,
         deltaY: clientY - stateRef.current.prevY,
         startX: stateRef.current.startX,
@@ -5024,7 +5043,7 @@ var Gesture = function Gesture(_ref6) {
         altKey: altKey,
         ctrlKey: ctrlKey,
         metaKey: metaKey,
-        event: e
+        event: event
       });
       wrapperRef.current.style.cursor = "auto";
     } else {
@@ -5034,20 +5053,35 @@ var Gesture = function Gesture(_ref6) {
         stateRef.current.noTap = false;
       } // Send tap event only if time less than 300ms
       else if (stateRef.current.timeStart - now < 300) {
-        queue(onTap, {
+        promiseQueue.add(onTap, {
           clientX: clientX,
           clientY: clientY,
           altKey: altKey,
           ctrlKey: ctrlKey,
           metaKey: metaKey,
-          target: target
+          target: target,
+          event: event
         });
       }
     }
-  }, [onDragEnd, onTap, queue]);
+  }, [onDragEnd, onTap]);
   var onDoubleTapHandler = React__default['default'].useCallback(function (event) {
-    queue(onDoubleTap, event);
-  }, [onDoubleTap, queue]);
+    var clientX = event.clientX,
+        clientY = event.clientY,
+        altKey = event.altKey,
+        ctrlKey = event.ctrlKey,
+        metaKey = event.metaKey,
+        target = event.target;
+    promiseQueue.add(onDoubleTap, {
+      clientX: clientX,
+      clientY: clientY,
+      altKey: altKey,
+      ctrlKey: ctrlKey,
+      metaKey: metaKey,
+      target: target,
+      event: event
+    });
+  }, [onDoubleTap]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     onWheel: onWheel,
     onPointerDown: onPointerDown,
@@ -5118,7 +5152,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);
@@ -5372,6 +5406,8 @@ var Item = function Item(_ref5) {
     className: "corner bottom-right"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "corner bottom-left"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "center"
   }), isSelected && showResizeHandle && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, resizeDirections.b && /*#__PURE__*/React__default['default'].createElement(ResizeHandler, {
     className: "resize resize-ratio",
     onResize: onResizeRatio
@@ -5937,24 +5973,20 @@ var Selector = function Selector(_ref) {
     }));
   }, [setSelected]);
   useThrottledEffect(updateSelected, [selector, updateSelected], 200);
-
-  var onDragStart = /*#__PURE__*/function () {
+  var onDragStart = React__default['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), {}, {
@@ -5964,7 +5996,7 @@ var Selector = function Selector(_ref) {
                 wrapperRef.current.style.cursor = "crosshair";
               }
 
-            case 7:
+            case 4:
             case "end":
               return _context2.stop();
           }
@@ -5972,11 +6004,10 @@ var Selector = function Selector(_ref) {
       }, _callee2);
     }));
 
-    return function onDragStart(_x) {
+    return function (_x) {
       return _ref4.apply(this, arguments);
     };
-  }();
-
+  }(), [findElementUnderPointer, setBoardState]);
   var onDrag = recoil.useRecoilCallback(function (_ref5) {
     var snapshot = _ref5.snapshot;
     return /*#__PURE__*/function () {
@@ -6039,8 +6070,7 @@ var Selector = function Selector(_ref) {
       };
     }();
   }, []);
-
-  var onDragEnd = function onDragEnd() {
+  var onDragEnd = React__default['default'].useCallback(function () {
     if (stateRef.current.moving) {
       setBoardState(function (prev) {
         return _objectSpread2(_objectSpread2({}, prev), {}, {
@@ -6053,8 +6083,7 @@ var Selector = function Selector(_ref) {
       });
       wrapperRef.current.style.cursor = "auto";
     }
-  };
-
+  }, [setBoardState]);
   var onLongTap = React__default['default'].useCallback(function (_ref8) {
     var target = _ref8.target;
     var foundElement = insideClass(target, "item");
@@ -6135,7 +6164,8 @@ var Selector = function Selector(_ref) {
     onDrag: onDrag,
     onDragEnd: onDragEnd,
     onTap: onTap,
-    onLongTap: onLongTap
+    onLongTap: onLongTap,
+    mainAction: moveFirst ? "pan" : "drag"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: wrapperRef
   }, selector.moving && /*#__PURE__*/React__default['default'].createElement("div", {
@@ -6228,23 +6258,24 @@ var ActionPane = function ActionPane(_ref) {
     var snapshot = _ref4.snapshot;
     return /*#__PURE__*/function () {
       var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref5) {
-        var deltaX, deltaY, _yield$snapshot$getPr, scale, moveX, moveY;
+        var deltaX, deltaY, originalEvent, _yield$snapshot$getPr, scale, moveX, moveY;
 
         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, originalEvent = _ref5.event;
 
                 if (!actionRef.current.moving) {
-                  _context2.next = 10;
+                  _context2.next = 11;
                   break;
                 }
 
-                _context2.next = 4;
+                originalEvent.stopPropagation();
+                _context2.next = 5;
                 return snapshot.getPromise(BoardTransformAtom);
 
-              case 4:
+              case 5:
                 _yield$snapshot$getPr = _context2.sent;
                 scale = _yield$snapshot$getPr.scale;
                 moveX = actionRef.current.remainX + deltaX / scale;
@@ -6259,7 +6290,7 @@ var ActionPane = function ActionPane(_ref) {
                   }) : prev;
                 });
 
-              case 10:
+              case 11:
               case "end":
                 return _context2.stop();
             }
@@ -6984,8 +7015,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,
@@ -6995,7 +7024,8 @@ var PanZoom = function PanZoom(_ref) {
 
   var _useDim = useDim(),
       setDim = _useDim.setDim,
-      zoomTo = _useDim.zoomTo;
+      zoomToCenter = _useDim.zoomToCenter,
+      zoomToExtent = _useDim.zoomToExtent;
 
   var _useRecoilValue = recoil.useRecoilValue(ConfigurationAtom),
       itemExtentGlobal = _useRecoilValue.itemExtent;
@@ -7011,10 +7041,14 @@ var PanZoom = function PanZoom(_ref) {
   var getMouseInfo = useMousePosition(wrappedRef); // Hooks to save/restore position
 
   usePositionNavigator();
+  /**
+   * Center board on startup
+   */
+
   var centerBoard = recoil.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) {
@@ -7025,34 +7059,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['default'].useEffect(function () {
     if (!centered && itemExtentGlobal.left) {
       // Center board on first valid extent
@@ -7064,7 +7081,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
@@ -7082,7 +7099,7 @@ var PanZoom = function PanZoom(_ref) {
         zooming: true
       }) : prev;
     });
-  }, [setBoardState, zoomTo]);
+  }, [setBoardState, zoomToCenter]);
   var onPan = React__default['default'].useCallback( /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref5) {
       var deltaX, deltaY;
@@ -7124,14 +7141,6 @@ var PanZoom = function PanZoom(_ref) {
       return _ref6.apply(this, arguments);
     };
   }(), [setBoardState, setDim]);
-  var onDrag = React__default['default'].useCallback(function (state) {
-    var target = state.target;
-    var outsideItem = !insideClass(target, "item") || insideClass(target, "locked");
-
-    if (moveFirst && outsideItem) {
-      onPan(state);
-    }
-  }, [moveFirst, onPan]);
   var onKeyDown = recoil.useRecoilCallback(function (_ref7) {
     var snapshot = _ref7.snapshot;
     return /*#__PURE__*/function () {
@@ -7216,14 +7225,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());
                   }
                 }
 
@@ -7239,15 +7248,15 @@ var PanZoom = function PanZoom(_ref) {
         return _ref8.apply(this, arguments);
       };
     }();
-  }, [setDim, zoomTo, getMouseInfo]);
+  }, [setDim, zoomToCenter, getMouseInfo]);
   var onKeyUp = React__default['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['default'].useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);
@@ -7259,7 +7268,7 @@ var PanZoom = function PanZoom(_ref) {
   return /*#__PURE__*/React__default['default'].createElement(Gesture, {
     onPan: onPan,
     onZoom: onZoom,
-    onDrag: onDrag
+    mainAction: moveFirst ? "pan" : "drag"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: "inline-block",
@@ -7427,7 +7436,9 @@ var Board = function Board(_ref) {
     moveFirst: moveFirst
   }, /*#__PURE__*/React__default['default'].createElement(Selector, {
     moveFirst: moveFirst
-  }, /*#__PURE__*/React__default['default'].createElement(ActionPane, null, /*#__PURE__*/React__default['default'].createElement(CursorPane, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(ActionPane, {
+    moveFirst: moveFirst
+  }, /*#__PURE__*/React__default['default'].createElement(CursorPane, null, /*#__PURE__*/React__default['default'].createElement("div", {
     onContextMenu: function onContextMenu(e) {
       e.preventDefault();
     },
@@ -7438,6 +7449,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,
@@ -7555,7 +7567,7 @@ var useDim = function useDim() {
       };
     }();
   }, [setDim]);
-  var zoomTo = recoil.useRecoilCallback(function (_ref5) {
+  var zoomToCenter = recoil.useRecoilCallback(function (_ref5) {
     var snapshot = _ref5.snapshot;
     return /*#__PURE__*/function () {
       var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(factor, zoomCenter) {
@@ -7634,24 +7646,68 @@ var useDim = function useDim() {
       };
     }();
   }, [setDim]);
-  var updateScaleBoundaries = recoil.useRecoilCallback(function (_ref7) {
+  var zoomToExtent = recoil.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 = recoil.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);
@@ -7659,86 +7715,86 @@ var useDim = function useDim() {
 
             case 11:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     }));
   }, []);
-  var getCenterCoordinates = recoil.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 = recoil.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 = recoil.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 = recoil.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,
@@ -7770,10 +7826,10 @@ var useDim = function useDim() {
 
             case 22:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5);
+      }, _callee6);
     }));
   }, []);
   var debouncedUpdateItemExtent = useDebouncedCallback(updateItemExtent, [], 300);
@@ -7785,7 +7841,9 @@ var useDim = function useDim() {
   return {
     setDim: setDimSafe,
     getDim: getDim,
-    zoomTo: zoomTo,
+    zoomTo: zoomToCenter,
+    zoomToCenter: zoomToCenter,
+    zoomToExtent: zoomToExtent,
     getCenter: getCenterCoordinates,
     updateItemExtent: debouncedUpdateItemExtent
   };