react-sync-board 0.3.3 → 0.3.4

package/dist/esm/index.js

@@ -4689,7 +4689,7 @@ var es6 = function equal(a, b) {
 
 var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' x='0px' y='0px' viewBox='0 0 75.601318 94.9' xml:space='preserve' id='svg26' sodipodi:docname='lock.svg' width='75.601318' height='94.900002' inkscape:version='0.92.5 (2060ec1f9f%2c 2020-04-08)'%3e%3cmetadata id='metadata32'%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs id='defs30' /%3e%3csodipodi:namedview pagecolor='black' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1848' inkscape:window-height='1016' id='namedview28' showgrid='false' fit-margin-top='0' fit-margin-left='0' fit-margin-right='0' fit-margin-bottom='0' inkscape:zoom='5.3400704' inkscape:cx='3.2640013' inkscape:cy='45.072152' inkscape:window-x='1512' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='g16' /%3e%3cg id='g16' transform='translate(-12.2%2c-2.5)'%3e%3cpath d='M 75.4%2c36.8 H 34.1 V 24.6 c 0%2c-8.8 7.1%2c-15.9 15.9%2c-15.9 8.8%2c0 15.9%2c7.1 15.9%2c15.9 0%2c1.7 1.4%2c3.1 3.1%2c3.1 1.7%2c0 3.1%2c-1.4 3.1%2c-3.1 C 72.1%2c12.4 62.2%2c2.5 50%2c2.5 37.8%2c2.5 27.9%2c12.4 27.9%2c24.6 v 12.2 h -3.3 c -6.9%2c0 -12.4%2c5.6 -12.4%2c12.4 V 85 c 0%2c6.9 5.6%2c12.4 12.4%2c12.4 h 50.8 c 6.9%2c0 12.4%2c-5.6 12.4%2c-12.4 V 49.2 C 87.9%2c42.3 82.3%2c36.8 75.4%2c36.8 Z m 6.2%2c48.3 c 0%2c3.4 -2.8%2c6.2 -6.2%2c6.2 H 24.6 c -3.4%2c0 -6.2%2c-2.8 -6.2%2c-6.2 V 49.2 c 0%2c-3.4 2.8%2c-6.2 6.2%2c-6.2 h 50.8 c 3.4%2c0 6.2%2c2.8 6.2%2c6.2 z' id='path12' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3cpath d='m 59.8%2c57.6 -12.5%2c12.5 -7%2c-7 c -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 -1.2%2c1.2 -1.2%2c3.2 0%2c4.4 l 9.2%2c9.2 c 0.6%2c0.6 1.4%2c0.9 2.2%2c0.9 0.8%2c0 1.6%2c-0.3 2.2%2c-0.9 L 64.2%2c62 c 1.2%2c-1.2 1.2%2c-3.2 0%2c-4.4 -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 z' id='path14' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3c/g%3e%3c/svg%3e";
 
-var _excluded$1 = ["type", "rotation", "id", "locked", "layer"],
+var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
     _excluded2 = ["x", "y", "layer", "moving"],
     _excluded3 = ["state"];
 
@@ -4699,23 +4699,101 @@ var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _tagge
   return rotation;
 }, img);
 
-var Item = function Item(_ref2) {
-  var setState = _ref2.setState,
-      _ref2$state = _ref2.state;
-  _ref2$state = _ref2$state === void 0 ? {} : _ref2$state;
-
-  var type = _ref2$state.type,
-      _ref2$state$rotation = _ref2$state.rotation,
-      rotation = _ref2$state$rotation === void 0 ? 0 : _ref2$state$rotation,
-      id = _ref2$state.id,
-      locked = _ref2$state.locked,
-      layer = _ref2$state.layer,
-      rest = _objectWithoutProperties(_ref2$state, _excluded$1),
-      _ref2$animate = _ref2.animate,
-      animate = _ref2$animate === void 0 ? "hvr-pop" : _ref2$animate,
-      isSelected = _ref2.isSelected,
-      itemMap = _ref2.itemMap,
-      unlocked = _ref2.unlocked;
+var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
+  var onReload = _ref2.onReload;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      color: "red"
+    },
+    className: "syncboard-error-item"
+  }, "Sorry, this item seems broken.", /*#__PURE__*/React.createElement("button", {
+    onClick: onReload
+  }, "Reload it"));
+};
+/* Error boundary for broken item */
+
+
+var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ItemErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ItemErrorBoundary);
+
+  function ItemErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, ItemErrorBoundary);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false,
+      itemId: props.itemId
+    };
+    _this.onReload = _this.onReload.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(ItemErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      // eslint-disable-next-line no-console
+      console.log("Error for item ".concat(this.state.itemId), error, this.props.state);
+    }
+  }, {
+    key: "onReload",
+    value: function onReload() {
+      this.setState({
+        hasError: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var ErrorComponent = this.props.ErrorComponent;
+
+      if (this.state.hasError) {
+        return /*#__PURE__*/React.createElement(ErrorComponent, {
+          onReload: this.onReload
+        });
+      }
+
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+
+  return ItemErrorBoundary;
+}(React.Component);
+
+var Item = function Item(_ref3) {
+  var _itemMap$error;
+
+  var setState = _ref3.setState,
+      _ref3$state = _ref3.state;
+  _ref3$state = _ref3$state === void 0 ? {} : _ref3$state;
+
+  var type = _ref3$state.type,
+      _ref3$state$rotation = _ref3$state.rotation,
+      rotation = _ref3$state$rotation === void 0 ? 0 : _ref3$state$rotation,
+      id = _ref3$state.id,
+      locked = _ref3$state.locked,
+      layer = _ref3$state.layer,
+      rest = _objectWithoutProperties(_ref3$state, _excluded$2),
+      _ref3$animate = _ref3.animate,
+      animate = _ref3$animate === void 0 ? "hvr-pop" : _ref3$animate,
+      isSelected = _ref3.isSelected,
+      itemMap = _ref3.itemMap,
+      unlocked = _ref3.unlocked;
 
   var isMountedRef = React.useRef(false);
   var animateRef = React.useRef(null);
@@ -4765,10 +4843,15 @@ var Item = function Item(_ref2) {
     onKeyUp: function onKeyUp(e) {
       return e.stopPropagation();
     }
+  }, /*#__PURE__*/React.createElement(ItemErrorBoundary, {
+    itemId: id,
+    state: rest,
+    setState: updateState,
+    ErrorComponent: (itemMap === null || itemMap === void 0 ? void 0 : (_itemMap$error = itemMap.error) === null || _itemMap$error === void 0 ? void 0 : _itemMap$error.component) || DefaultErrorComponent
   }, /*#__PURE__*/React.createElement(Component, _extends$1({}, rest, {
     id: id,
     setState: updateState
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "corner top-left"
   }), /*#__PURE__*/React.createElement("div", {
     className: "corner top-right"
@@ -4779,30 +4862,30 @@ var Item = function Item(_ref2) {
   })));
 };
 
-var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref3, _ref4) {
-  var prevState = _ref3.state,
-      prevSetState = _ref3.setState,
-      prevIsSelected = _ref3.isSelected,
-      prevUnlocked = _ref3.unlocked;
-  var nextState = _ref4.state,
-      nextSetState = _ref4.setState,
-      nextIsSelected = _ref4.isSelected,
-      nextUnlocked = _ref4.unlocked;
+var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref4, _ref5) {
+  var prevState = _ref4.state,
+      prevSetState = _ref4.setState,
+      prevIsSelected = _ref4.isSelected,
+      prevUnlocked = _ref4.unlocked;
+  var nextState = _ref5.state,
+      nextSetState = _ref5.setState,
+      nextIsSelected = _ref5.isSelected,
+      nextUnlocked = _ref5.unlocked;
   return prevIsSelected === nextIsSelected && prevUnlocked === nextUnlocked && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
 }); // Exclude positionning from memoization
 
-var PositionedItem = function PositionedItem(_ref5) {
-  var _ref5$state = _ref5.state;
-  _ref5$state = _ref5$state === void 0 ? {} : _ref5$state;
+var PositionedItem = function PositionedItem(_ref6) {
+  var _ref6$state = _ref6.state;
+  _ref6$state = _ref6$state === void 0 ? {} : _ref6$state;
 
-  var _ref5$state$x = _ref5$state.x,
-      x = _ref5$state$x === void 0 ? 0 : _ref5$state$x,
-      _ref5$state$y = _ref5$state.y,
-      y = _ref5$state$y === void 0 ? 0 : _ref5$state$y,
-      layer = _ref5$state.layer,
-      moving = _ref5$state.moving,
-      stateRest = _objectWithoutProperties(_ref5$state, _excluded2),
-      rest = _objectWithoutProperties(_ref5, _excluded3);
+  var _ref6$state$x = _ref6$state.x,
+      x = _ref6$state$x === void 0 ? 0 : _ref6$state$x,
+      _ref6$state$y = _ref6$state.y,
+      y = _ref6$state$y === void 0 ? 0 : _ref6$state$y,
+      layer = _ref6$state.layer,
+      moving = _ref6$state.moving,
+      stateRest = _objectWithoutProperties(_ref6$state, _excluded2),
+      rest = _objectWithoutProperties(_ref6, _excluded3);
 
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -5992,7 +6075,7 @@ var Selector = function Selector(_ref) {
   var stateRef = React.useRef({
     moving: false
   });
-  var config = useRecoilValue(BoardConfigAtom); // Reset selection on game loading
+  var config = useRecoilValue(BoardConfigAtom); // Reset selection on board loading
 
   React.useEffect(function () {
     setSelected(emptySelection);
@@ -6652,32 +6735,26 @@ function F(t) {
   return w(t) > .179;
 }
 
+var _excluded$1 = ["pos"];
+
 var _templateObject$1, _templateObject2;
-var StyledCursor = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  transform: ", ";\n  position: fixed;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  z-index: 210;\n"])), function (_ref) {
-  var top = _ref.top,
-      left = _ref.left;
-  return "translate(".concat(left, "px, ").concat(top, "px)");
-});
-var CursorName = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  padding: 0 0.5em;\n  border-radius: 2px;\n  max-width: 5em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: -0.5em;\n  margin-top: 1.7em;\n  whitespace: nowrap;\n  background-color: ", ";\n"])), function (_ref2) {
-  var textColor = _ref2.textColor;
+var StyledCursor = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  z-index: 210;\n"])));
+var CursorName = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  padding: 0 0.5em;\n  border-radius: 2px;\n  max-width: 5em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: -0.5em;\n  margin-top: 1.7em;\n  whitespace: nowrap;\n  background-color: ", ";\n"])), function (_ref) {
+  var textColor = _ref.textColor;
   return textColor;
-}, function (_ref3) {
-  var color = _ref3.color;
+}, function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
 
-var Cursor = function Cursor(_ref4) {
-  var _ref4$color = _ref4.color,
-      color = _ref4$color === void 0 ? "#666" : _ref4$color,
-      _ref4$size = _ref4.size,
-      size = _ref4$size === void 0 ? 40 : _ref4$size,
-      pos = _ref4.pos,
-      text = _ref4.text;
+var Cursor = function Cursor(_ref3) {
+  var _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? "#666" : _ref3$color,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 40 : _ref3$size,
+      text = _ref3.text;
   var textColor = F(color) ? "#222" : "#EEE";
-  return /*#__PURE__*/React.createElement(StyledCursor, {
-    top: pos.y - 10,
-    left: pos.x - 5
-  }, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(StyledCursor, null, /*#__PURE__*/React.createElement("svg", {
     version: "1.1",
     id: "Layer_1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -6702,6 +6779,23 @@ var Cursor = function Cursor(_ref4) {
   }, text));
 };
 
+var MemoizedCursor = /*#__PURE__*/React.memo(Cursor);
+
+var PositionnedCursor = function PositionnedCursor(_ref4) {
+  var pos = _ref4.pos,
+      rest = _objectWithoutProperties(_ref4, _excluded$1);
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translate(".concat(pos.x - 5, "px, ").concat(pos.y - 3, "px)"),
+      top: 0,
+      left: 0,
+      zIndex: 210,
+      position: "fixed"
+    }
+  }, /*#__PURE__*/React.createElement(MemoizedCursor, rest));
+};
+
 var Cursors = function Cursors(_ref) {
   var users = _ref.users;
 
@@ -6777,7 +6871,7 @@ var Cursors = function Cursors(_ref) {
         userId = _ref5[0],
         pos = _ref5[1];
 
-    return /*#__PURE__*/React.createElement(Cursor, {
+    return /*#__PURE__*/React.createElement(PositionnedCursor, {
       key: userId,
       pos: pos,
       text: usersById[userId].name,
@@ -7316,7 +7410,12 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
 
   var config = useRecoilValue(BoardConfigAtom);
   var setBoardState = useSetRecoilState(BoardStateAtom);
-  var prevDim = usePrevious(dim); // Hooks to save/restore position
+  var prevDim = usePrevious(dim);
+  var mouseRef = React.useRef({
+    hover: false,
+    x: 0,
+    y: 0
+  }); // Hooks to save/restore position
 
   usePositionNavigator();
 
@@ -7351,7 +7450,7 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
         translateY: prevDimension.translateY + deltaY
       });
     });
-  }, [scale, setDim]); // Center board on game loading
+  }, [scale, setDim]); // Center board on board loading
 
   React.useEffect(function () {
     var _boardRef$current$get = boardRef.current.getBoundingClientRect(),
@@ -7618,9 +7717,11 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
                 e.preventDefault();
 
               case 31:
-                // Temporally zoom
+                // Temporary zoom
                 if (e.key === " " && !e.repeat) {
-                  zoomTo(3);
+                  if (mouseRef.current.hover) {
+                    zoomTo(3, mouseRef.current);
+                  }
                 }
 
               case 32:
@@ -7640,10 +7741,23 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
     // Ignore text in Input or Textarea
     if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return; // Zoom out on release
 
-    if (e.key === " ") {
-      zoomTo(1 / 3);
+    if (e.key === " " && mouseRef.current.hover) {
+      zoomTo(1 / 3, mouseRef.current);
     }
-  }, [zoomTo]);
+  }, [zoomTo]); // Save mouse position for temporary zoom
+
+  var onMouseMove = React.useCallback(function (e) {
+    var clientX = e.clientX,
+        clientY = e.clientY;
+    mouseRef.current.x = clientX;
+    mouseRef.current.y = clientY;
+  }, []);
+  var onMouseEnter = React.useCallback(function () {
+    mouseRef.current.hover = true;
+  }, []);
+  var onMouseLeave = React.useCallback(function () {
+    mouseRef.current.hover = false;
+  }, []);
   React.useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);
@@ -7666,7 +7780,10 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
     ref: wrappedRef,
     onContextMenu: function onContextMenu(e) {
       e.preventDefault();
-    }
+    },
+    onMouseMove: onMouseMove,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
   }, children));
 };