react-sync-board 0.5.2 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +40 -30
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +40 -30
- package/dist/esm/index.js.map +1 -1
- package/dist/react-sync-board.min.js +1 -1
- package/dist/react-sync-board.min.js.map +1 -1
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -4317,7 +4317,7 @@ var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
|
|
|
4317
4317
|
_excluded3 = ["x", "y", "layer", "moving"];
|
|
4318
4318
|
|
|
4319
4319
|
var _templateObject$2;
|
|
4320
|
-
var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n display: inline-block;\n transition: transform 150ms;\n user-select: none;\n padding:
|
|
4320
|
+
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 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"])), function (_ref) {
|
|
4321
4321
|
var rotation = _ref.rotation;
|
|
4322
4322
|
return rotation;
|
|
4323
4323
|
}, img);
|
|
@@ -6966,8 +6966,8 @@ var BoundingBox = function BoundingBox() {
|
|
|
6966
6966
|
return /*#__PURE__*/React.createElement("div", {
|
|
6967
6967
|
style: _objectSpread2(_objectSpread2({}, defaultZoneStyle), {}, {
|
|
6968
6968
|
transform: "translate(".concat(boundingBoxLast.left, "px, ").concat(boundingBoxLast.top, "px)"),
|
|
6969
|
-
height: "".concat(boundingBoxLast.height, "px"),
|
|
6970
|
-
width: "".concat(boundingBoxLast.width, "px")
|
|
6969
|
+
height: "".concat(boundingBoxLast.height - 2, "px"),
|
|
6970
|
+
width: "".concat(boundingBoxLast.width - 2, "px")
|
|
6971
6971
|
}),
|
|
6972
6972
|
className: "selection"
|
|
6973
6973
|
});
|
|
@@ -7631,8 +7631,14 @@ var useItemActions = function useItemActions() {
|
|
|
7631
7631
|
|
|
7632
7632
|
var _ref7 = item.grid || {},
|
|
7633
7633
|
itemType = _ref7.type,
|
|
7634
|
-
itemSize = _ref7.size
|
|
7635
|
-
|
|
7634
|
+
itemSize = _ref7.size,
|
|
7635
|
+
_ref7$offset = _ref7.offset;
|
|
7636
|
+
|
|
7637
|
+
_ref7$offset = _ref7$offset === void 0 ? {} : _ref7$offset;
|
|
7638
|
+
var _ref7$offset$x = _ref7$offset.x,
|
|
7639
|
+
offsetX = _ref7$offset$x === void 0 ? 0 : _ref7$offset$x,
|
|
7640
|
+
_ref7$offset$y = _ref7$offset.y,
|
|
7641
|
+
offsetY = _ref7$offset$y === void 0 ? 0 : _ref7$offset$y;
|
|
7636
7642
|
var type = globalType;
|
|
7637
7643
|
var size = globalSize || 1; // If item specific
|
|
7638
7644
|
|
|
@@ -7641,8 +7647,8 @@ var useItemActions = function useItemActions() {
|
|
|
7641
7647
|
size = itemSize || 1;
|
|
7642
7648
|
}
|
|
7643
7649
|
|
|
7644
|
-
var centerX = item.x + elem.clientWidth / 2,
|
|
7645
|
-
centerY = item.y + elem.clientHeight / 2;
|
|
7650
|
+
var centerX = item.x + elem.clientWidth / 2 - offsetX,
|
|
7651
|
+
centerY = item.y + elem.clientHeight / 2 - offsetY;
|
|
7646
7652
|
var newX;
|
|
7647
7653
|
var newY;
|
|
7648
7654
|
var sizeX;
|
|
@@ -7707,8 +7713,8 @@ var useItemActions = function useItemActions() {
|
|
|
7707
7713
|
}
|
|
7708
7714
|
|
|
7709
7715
|
result[id] = _objectSpread2(_objectSpread2({}, item), {}, {
|
|
7710
|
-
x: newX - elem.clientWidth / 2,
|
|
7711
|
-
y: newY - elem.clientHeight / 2
|
|
7716
|
+
x: newX + offsetX - elem.clientWidth / 2,
|
|
7717
|
+
y: newY + offsetY - elem.clientHeight / 2
|
|
7712
7718
|
});
|
|
7713
7719
|
updatedItems[id] = result[id];
|
|
7714
7720
|
});
|
|
@@ -8044,7 +8050,6 @@ var useItemActions = function useItemActions() {
|
|
|
8044
8050
|
_ref19$passLocked,
|
|
8045
8051
|
passLocked,
|
|
8046
8052
|
foundElement,
|
|
8047
|
-
isPassthrough,
|
|
8048
8053
|
itemList,
|
|
8049
8054
|
_yield$snapshot$getPr2,
|
|
8050
8055
|
boardWrapper,
|
|
@@ -8071,35 +8076,40 @@ var useItemActions = function useItemActions() {
|
|
|
8071
8076
|
foundElement = insideClass(target, "item");
|
|
8072
8077
|
|
|
8073
8078
|
if (!foundElement) {
|
|
8074
|
-
_context8.next =
|
|
8079
|
+
_context8.next = 28;
|
|
8075
8080
|
break;
|
|
8076
8081
|
}
|
|
8077
8082
|
|
|
8078
|
-
if (!
|
|
8083
|
+
if (!hasClass(foundElement, "selected")) {
|
|
8079
8084
|
_context8.next = 8;
|
|
8080
8085
|
break;
|
|
8081
8086
|
}
|
|
8082
8087
|
|
|
8083
|
-
return _context8.abrupt("return",
|
|
8088
|
+
return _context8.abrupt("return", foundElement);
|
|
8084
8089
|
|
|
8085
8090
|
case 8:
|
|
8086
|
-
|
|
8087
|
-
|
|
8091
|
+
if (!(!passLocked && hasClass(foundElement, "locked") && !hasClass(target, "passthrough"))) {
|
|
8092
|
+
_context8.next = 10;
|
|
8093
|
+
break;
|
|
8094
|
+
}
|
|
8088
8095
|
|
|
8089
|
-
|
|
8090
|
-
|
|
8096
|
+
return _context8.abrupt("return", returnLocked ? foundElement : null);
|
|
8097
|
+
|
|
8098
|
+
case 10:
|
|
8099
|
+
if (!hasClass(target, "passthrough")) {
|
|
8100
|
+
_context8.next = 28;
|
|
8091
8101
|
break;
|
|
8092
8102
|
}
|
|
8093
8103
|
|
|
8094
|
-
_context8.next =
|
|
8104
|
+
_context8.next = 13;
|
|
8095
8105
|
return snapshot.getPromise(ItemListAtom);
|
|
8096
8106
|
|
|
8097
|
-
case
|
|
8107
|
+
case 13:
|
|
8098
8108
|
itemList = _context8.sent;
|
|
8099
|
-
_context8.next =
|
|
8109
|
+
_context8.next = 16;
|
|
8100
8110
|
return snapshot.getPromise(ConfigurationAtom);
|
|
8101
8111
|
|
|
8102
|
-
case
|
|
8112
|
+
case 16:
|
|
8103
8113
|
_yield$snapshot$getPr2 = _context8.sent;
|
|
8104
8114
|
boardWrapper = _yield$snapshot$getPr2.boardWrapper;
|
|
8105
8115
|
// Found element under the cursor
|
|
@@ -8119,33 +8129,33 @@ var useItemActions = function useItemActions() {
|
|
|
8119
8129
|
|
|
8120
8130
|
i = 0;
|
|
8121
8131
|
|
|
8122
|
-
case
|
|
8132
|
+
case 20:
|
|
8123
8133
|
if (!(i < elems.length)) {
|
|
8124
|
-
_context8.next =
|
|
8134
|
+
_context8.next = 27;
|
|
8125
8135
|
break;
|
|
8126
8136
|
}
|
|
8127
8137
|
|
|
8128
8138
|
elem = elems[i];
|
|
8129
8139
|
|
|
8130
|
-
if (!(elem !== foundElement && (
|
|
8131
|
-
_context8.next =
|
|
8140
|
+
if (!(elem !== foundElement && (passLocked || !hasClass(elem, "locked")))) {
|
|
8141
|
+
_context8.next = 24;
|
|
8132
8142
|
break;
|
|
8133
8143
|
}
|
|
8134
8144
|
|
|
8135
8145
|
return _context8.abrupt("return", elem);
|
|
8136
8146
|
|
|
8137
|
-
case
|
|
8147
|
+
case 24:
|
|
8138
8148
|
i += 1;
|
|
8139
|
-
_context8.next =
|
|
8149
|
+
_context8.next = 20;
|
|
8140
8150
|
break;
|
|
8141
8151
|
|
|
8142
|
-
case
|
|
8152
|
+
case 27:
|
|
8143
8153
|
return _context8.abrupt("return", null);
|
|
8144
8154
|
|
|
8145
|
-
case
|
|
8155
|
+
case 28:
|
|
8146
8156
|
return _context8.abrupt("return", foundElement);
|
|
8147
8157
|
|
|
8148
|
-
case
|
|
8158
|
+
case 29:
|
|
8149
8159
|
case "end":
|
|
8150
8160
|
return _context8.stop();
|
|
8151
8161
|
}
|