react-sync-board 0.7.0 → 0.7.1

package/dist/esm/index.js

@@ -4550,6 +4550,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;
@@ -4580,6 +4592,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,
@@ -4605,50 +4646,16 @@ var Gesture = function Gesture(_ref6) {
     pointers: {},
     mainPointer: undefined
   });
-  var queueRef = React__default.useRef([]); // Queue event to avoid async mess
-
-  var queue = React__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.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.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.
 
@@ -4661,14 +4668,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
@@ -4690,25 +4697,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.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.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
@@ -4767,27 +4774,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)
     });
 
@@ -4797,17 +4805,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.useCallback(function (e) {
+  }, [onLongTap]);
+  var onPointerMove = React__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,
-          buttons = e.buttons,
-          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
@@ -4862,7 +4870,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,
@@ -4876,17 +4884,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,
@@ -4900,7 +4907,7 @@ var Gesture = function Gesture(_ref6) {
           ctrlKey: ctrlKey,
           metaKey: metaKey,
           target: stateRef.current.target,
-          event: e
+          event: event
         });
       }
 
@@ -4919,7 +4926,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,
@@ -4927,18 +4934,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;
           }
@@ -4948,15 +4955,15 @@ var Gesture = function Gesture(_ref6) {
       stateRef.current.prevX = clientX;
       stateRef.current.prevY = clientY;
     }
-  }, [mainAction, onDrag, onDragStart, onPan, onZoom, queue]);
-  var onPointerUp = React__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.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
@@ -4995,7 +5002,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,
@@ -5008,7 +5015,7 @@ var Gesture = function Gesture(_ref6) {
         altKey: altKey,
         ctrlKey: ctrlKey,
         metaKey: metaKey,
-        event: e
+        event: event
       });
       wrapperRef.current.style.cursor = "auto";
     } else {
@@ -5018,20 +5025,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.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.createElement("div", {
     onWheel: onWheel,
     onPointerDown: onPointerDown,
@@ -6130,7 +6152,6 @@ var Selector = function Selector(_ref) {
 
 var ActionPane = function ActionPane(_ref) {
   var children = _ref.children;
-      _ref.moveFirst;
 
   var _useItemActions = useItemActions(),
       moveItems = _useItemActions.moveItems,
@@ -6209,23 +6230,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;
@@ -6240,7 +6262,7 @@ var ActionPane = function ActionPane(_ref) {
                   }) : prev;
                 });
 
-              case 10:
+              case 11:
               case "end":
                 return _context2.stop();
             }
@@ -7052,22 +7074,12 @@ var PanZoom = function PanZoom(_ref) {
   }, [setBoardState, zoomToCenter]);
   var onPan = React__default.useCallback( /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref5) {
-      var deltaX, deltaY, target, insideItem;
+      var deltaX, deltaY;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              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:
+              deltaX = _ref5.deltaX, deltaY = _ref5.deltaY;
               setDim(function (prev) {
                 return _objectSpread2(_objectSpread2({}, prev), {}, {
                   translateX: prev.translateX + deltaX,
@@ -7089,7 +7101,7 @@ var PanZoom = function PanZoom(_ref) {
                 }) : prev;
               });
 
-            case 8:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -7100,7 +7112,7 @@ var PanZoom = function PanZoom(_ref) {
     return function (_x) {
       return _ref6.apply(this, arguments);
     };
-  }(), [moveFirst, setBoardState, setDim]);
+  }(), [setBoardState, setDim]);
   var onKeyDown = useRecoilCallback(function (_ref7) {
     var snapshot = _ref7.snapshot;
     return /*#__PURE__*/function () {