redhotmagma-graphics-editor 1.41.0 → 1.42.0
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/App.js +90 -165
- package/CanvasAdapters/Mock/Canvas.js +71 -125
- package/CanvasAdapters/Mock/Objects/CanvasObject.js +23 -40
- package/CanvasAdapters/Mock/Objects/Group.js +15 -46
- package/CanvasAdapters/Mock/Objects/Image.js +15 -46
- package/CanvasAdapters/Mock/Objects/Text.js +15 -51
- package/CanvasAdapters/Mock/index.js +0 -1
- package/CanvasAdapters/PaperJs/Canvas.js +268 -398
- package/CanvasAdapters/PaperJs/CanvasRepository.js +6 -23
- package/CanvasAdapters/PaperJs/Modifiers/FontSizeMin.js +2 -5
- package/CanvasAdapters/PaperJs/Objects/CanvasObject.js +33 -65
- package/CanvasAdapters/PaperJs/Objects/Group.js +14 -48
- package/CanvasAdapters/PaperJs/Objects/Image.js +58 -114
- package/CanvasAdapters/PaperJs/Objects/Text.js +43 -99
- package/CanvasAdapters/PaperJs/Utils/HTML2Paper.js +57 -108
- package/CanvasAdapters/PaperJs/Utils/SVGfix.js +9 -30
- package/CanvasAdapters/PaperJs/Utils/StyleParams.js +10 -21
- package/CanvasAdapters/PaperJs/Utils/TextToSVGRepository.js +53 -86
- package/CanvasAdapters/PaperJs/Utils/TextToSVGUtils.js +4 -14
- package/CanvasAdapters/PaperJs/Utils/UTF8Base64.js +3 -24
- package/CanvasAdapters/PaperJs/Utils/UseColorLayer.js +58 -0
- package/CanvasAdapters/PaperJs/Utils/UseMask.js +183 -279
- package/CanvasAdapters/PaperJs/Utils/__tests__/SVGfix.test.js +0 -1
- package/CanvasAdapters/PaperJs/Utils/__tests__/TextToSVGUtils.test.js +0 -1
- package/CanvasAdapters/PaperJs/Utils/__tests__/updateFontStyle.test.js +0 -1
- package/CanvasAdapters/PaperJs/Utils/updateFontStyle.js +5 -11
- package/CanvasAdapters/PaperJs/index.js +0 -1
- package/CanvasInterface/Canvas.js +145 -235
- package/CanvasInterface/CanvasProvider.js +25 -75
- package/CanvasInterface/Objects/CanvasObject.js +68 -148
- package/CanvasInterface/Objects/index.js +0 -1
- package/CanvasInterface/Observable.js +10 -29
- package/CanvasInterface/canvasConnect.js +12 -44
- package/CanvasInterface/index.js +1 -7
- package/Components/Canvas/Canvas.js +14 -41
- package/Components/Canvas/CanvasContainer.js +5 -18
- package/Components/Canvas/styles.js +2 -3
- package/Components/DelayedContainer.js +14 -39
- package/Components/Editor/Editor.js +47 -102
- package/Components/Editor/EditorContainer.js +47 -131
- package/Components/Editor/styles.js +2 -3
- package/Components/InlineToolbox/InlineToolbox.js +49 -142
- package/Components/InlineToolbox/InlineToolboxButton.js +9 -19
- package/Components/InlineToolbox/styles.js +2 -3
- package/Components/ManipulableContainer.js +15 -41
- package/Components/ResizeDetect/ResizeDetect.js +14 -47
- package/Components/Rulers/Ruler.js +20 -68
- package/Components/Rulers/Rulers.js +14 -46
- package/Components/Rulers/styles.js +2 -3
- package/Components/SelectionToolbox/ColorPalette.js +25 -73
- package/Components/SelectionToolbox/SelectionToolbox.js +39 -101
- package/Components/SelectionToolbox/TextTools.js +81 -157
- package/Components/SelectionToolbox/styles.js +2 -3
- package/Components/StandardToolbox/StandardToolbox.js +81 -144
- package/Components/TextEditor/TextEditor.js +67 -182
- package/Components/TextEditor/TextEditorStateProvider.js +20 -56
- package/Components/Toolbox/ToolboxContainer.js +5 -18
- package/Components/Toolbox/ToolboxRow.js +4 -16
- package/Components/Toolbox/styles.js +2 -3
- package/Utils/Calc2D.js +3 -9
- package/Utils/DOM.js +22 -80
- package/Utils/Device.js +2 -6
- package/Utils/Image.js +17 -11
- package/Utils/Logger.js +8 -32
- package/Utils/Range.js +6 -33
- package/Utils/String.js +2 -8
- package/Utils/UnitConversion.js +3 -9
- package/Utils/__tests__/Calc2D.test.js +1 -3
- package/Utils/__tests__/DOM.test.js +17 -25
- package/Utils/__tests__/Range.test.js +0 -1
- package/_demos/UsingExternalControls/App.js +13 -48
- package/_demos/UsingRenderProps/App.js +15 -54
- package/index.js +2 -6
- package/package.json +5 -7
- package/src/App.js +35 -38
- package/src/CanvasAdapters/PaperJs/Canvas.ts +11 -0
- package/src/CanvasAdapters/PaperJs/Utils/UseColorLayer.js +56 -0
- package/src/Components/InlineToolbox/InlineToolbox.js +2 -2
- package/src/Components/SelectionToolbox/TextTools.js +1 -1
- package/src/_demos/UsingExternalControls/App.js +25 -28
- package/src/_demos/UsingRenderProps/App.js +16 -19
- package/src/index.js +2 -2
|
@@ -1,80 +1,49 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
7
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
|
-
var _lodash = require("lodash");
|
|
15
|
-
|
|
9
|
+
var _get = _interopRequireDefault(require("lodash/get"));
|
|
16
10
|
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
|
|
17
|
-
|
|
18
11
|
var _ManipulableContainer = _interopRequireDefault(require("../ManipulableContainer"));
|
|
19
|
-
|
|
20
12
|
var _InlineToolboxButton = _interopRequireDefault(require("./InlineToolboxButton"));
|
|
21
|
-
|
|
22
13
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
23
|
-
|
|
24
14
|
var _CanvasProvider = require("../../CanvasInterface/CanvasProvider");
|
|
25
|
-
|
|
26
15
|
var _Canvas = require("../../CanvasInterface/Canvas");
|
|
27
|
-
|
|
28
16
|
var _EditorContainer = require("../Editor/EditorContainer");
|
|
29
|
-
|
|
30
17
|
var _Logger = _interopRequireDefault(require("../../Utils/Logger"));
|
|
31
|
-
|
|
32
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
33
|
-
|
|
19
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
34
20
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
41
|
-
|
|
42
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
43
|
-
|
|
21
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
22
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
23
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
24
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
44
25
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
45
|
-
|
|
46
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
47
|
-
|
|
26
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
48
27
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
49
|
-
|
|
50
28
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
51
|
-
|
|
52
|
-
function
|
|
53
|
-
|
|
54
|
-
function
|
|
55
|
-
|
|
29
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
30
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
31
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
32
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
56
33
|
var logger = new _Logger["default"]('InlineToolbox');
|
|
57
|
-
|
|
58
34
|
var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
59
35
|
_inherits(InlineToolBox, _React$Component);
|
|
60
|
-
|
|
61
36
|
var _super = _createSuper(InlineToolBox);
|
|
62
|
-
|
|
63
37
|
function InlineToolBox() {
|
|
64
38
|
var _this;
|
|
65
|
-
|
|
66
39
|
_classCallCheck(this, InlineToolBox);
|
|
67
|
-
|
|
68
40
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
69
41
|
args[_key] = arguments[_key];
|
|
70
42
|
}
|
|
71
|
-
|
|
72
43
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
73
|
-
|
|
74
44
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
75
45
|
show: false
|
|
76
46
|
});
|
|
77
|
-
|
|
78
47
|
_defineProperty(_assertThisInitialized(_this), "getClientPositionFromEvent", function (evt) {
|
|
79
48
|
var isTouchEvent = !!evt.changedTouches;
|
|
80
49
|
return {
|
|
@@ -83,32 +52,23 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
83
52
|
y: isTouchEvent ? evt.changedTouches[0].clientY : evt.clientY
|
|
84
53
|
};
|
|
85
54
|
});
|
|
86
|
-
|
|
87
55
|
_defineProperty(_assertThisInitialized(_this), "onScalingChange", function (evt) {
|
|
88
56
|
var selectedObject = _this.props.canvas.selectedObject;
|
|
89
|
-
|
|
90
57
|
if (!selectedObject) {
|
|
91
58
|
return;
|
|
92
59
|
}
|
|
93
|
-
|
|
94
60
|
selectedObject.activeAction = 'scale';
|
|
95
|
-
|
|
96
61
|
var clientPosition = _this.getClientPositionFromEvent(evt);
|
|
97
|
-
|
|
98
62
|
var iDistance = selectedObject.getDistanceToCenter(clientPosition.x, clientPosition.y);
|
|
99
|
-
|
|
100
63
|
var _selectedObject$getTr = selectedObject.getTransformedRect(),
|
|
101
|
-
|
|
102
|
-
|
|
64
|
+
bottomRight = _selectedObject$getTr.bottomRight;
|
|
103
65
|
var cDiff = {
|
|
104
66
|
x: clientPosition.x - bottomRight.x,
|
|
105
67
|
y: clientPosition.y - bottomRight.y
|
|
106
68
|
};
|
|
107
69
|
iDistance = selectedObject.getDistanceToCenter(bottomRight.x, bottomRight.y);
|
|
108
|
-
|
|
109
70
|
var mouseMove = function mouseMove(evt) {
|
|
110
71
|
var clientPosition = _this.getClientPositionFromEvent(evt);
|
|
111
|
-
|
|
112
72
|
evt.preventDefault();
|
|
113
73
|
var dPos = {
|
|
114
74
|
x: clientPosition.x - cDiff.x,
|
|
@@ -118,127 +78,96 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
118
78
|
var ratio = dDistance / iDistance;
|
|
119
79
|
selectedObject.scaling *= ratio;
|
|
120
80
|
iDistance = dDistance;
|
|
121
|
-
|
|
122
81
|
_this.updateToolbarTransform();
|
|
123
82
|
};
|
|
124
|
-
|
|
125
83
|
var mouseUp = function mouseUp(evt) {
|
|
126
84
|
selectedObject.activeAction = '';
|
|
127
|
-
|
|
128
85
|
var clientPosition = _this.getClientPositionFromEvent(evt);
|
|
129
|
-
|
|
130
86
|
evt.preventDefault();
|
|
131
87
|
document.removeEventListener(clientPosition.isTouchEvent ? 'touchmove' : 'mousemove', mouseMove, {
|
|
132
88
|
passive: false
|
|
133
89
|
});
|
|
134
90
|
document.removeEventListener(clientPosition.isTouchEvent ? 'touchend' : 'mouseup', mouseUp);
|
|
135
91
|
};
|
|
136
|
-
|
|
137
92
|
document.addEventListener(clientPosition.isTouchEvent ? 'touchmove' : 'mousemove', mouseMove, {
|
|
138
93
|
passive: false
|
|
139
94
|
});
|
|
140
95
|
document.addEventListener(clientPosition.isTouchEvent ? 'touchend' : 'mouseup', mouseUp);
|
|
141
96
|
});
|
|
142
|
-
|
|
143
97
|
_defineProperty(_assertThisInitialized(_this), "onRotationChange", function (evt) {
|
|
144
98
|
var _this$props$canvas = _this.props.canvas,
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
99
|
+
selectedObject = _this$props$canvas.selectedObject,
|
|
100
|
+
canvasElement = _this$props$canvas.canvasElement;
|
|
148
101
|
if (!selectedObject) {
|
|
149
102
|
return;
|
|
150
103
|
}
|
|
151
|
-
|
|
152
104
|
selectedObject.activeAction = 'rotate';
|
|
105
|
+
var clientPosition = _this.getClientPositionFromEvent(evt);
|
|
153
106
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
107
|
+
// const { canvasPosition } = this.props;
|
|
157
108
|
var canvasPosition = canvasElement.getBoundingClientRect();
|
|
158
109
|
var center = selectedObject.getCenter(); // selectedObject.getTransformedRect();
|
|
159
|
-
// add the offset to the center
|
|
160
110
|
|
|
111
|
+
// add the offset to the center
|
|
161
112
|
center.x += canvasPosition.left;
|
|
162
113
|
center.y += canvasPosition.top;
|
|
163
114
|
var iAngle = Math.atan2(clientPosition.y - center.y, clientPosition.x - center.x);
|
|
164
|
-
|
|
165
115
|
var mouseMove = function mouseMove(evt) {
|
|
166
116
|
var clientPosition = _this.getClientPositionFromEvent(evt);
|
|
167
|
-
|
|
168
117
|
evt.preventDefault();
|
|
169
118
|
var dAngle = Math.atan2(clientPosition.y - center.y, clientPosition.x - center.x);
|
|
170
119
|
var delta = (dAngle - iAngle) / Math.PI * 180;
|
|
171
120
|
selectedObject.rotation += delta;
|
|
172
121
|
iAngle = dAngle;
|
|
173
|
-
|
|
174
122
|
_this.updateToolbarTransform();
|
|
175
123
|
};
|
|
176
|
-
|
|
177
124
|
var mouseUp = function mouseUp(evt) {
|
|
178
125
|
selectedObject.activeAction = '';
|
|
179
|
-
|
|
180
126
|
var clientPosition = _this.getClientPositionFromEvent(evt);
|
|
181
|
-
|
|
182
127
|
evt.preventDefault();
|
|
183
128
|
selectedObject.rotation = _this.snapToDeg(selectedObject.rotation);
|
|
184
|
-
|
|
185
129
|
_this.updateToolbarTransform();
|
|
186
|
-
|
|
187
130
|
document.removeEventListener(clientPosition.isTouchEvent ? 'touchmove' : 'mousemove', mouseMove, {
|
|
188
131
|
passive: false
|
|
189
132
|
});
|
|
190
133
|
document.removeEventListener(clientPosition.isTouchEvent ? 'touchend' : 'mouseup', mouseUp);
|
|
191
134
|
};
|
|
192
|
-
|
|
193
135
|
document.addEventListener(clientPosition.isTouchEvent ? 'touchmove' : 'mousemove', mouseMove, {
|
|
194
136
|
passive: false
|
|
195
137
|
});
|
|
196
138
|
document.addEventListener(clientPosition.isTouchEvent ? 'touchend' : 'mouseup', mouseUp);
|
|
197
139
|
});
|
|
198
|
-
|
|
199
140
|
_defineProperty(_assertThisInitialized(_this), "onDeleteClick", function () {
|
|
200
141
|
var selectedObject = _this.props.canvas.selectedObject;
|
|
201
|
-
|
|
202
142
|
if (selectedObject) {
|
|
203
143
|
selectedObject.remove();
|
|
204
144
|
}
|
|
205
145
|
});
|
|
206
|
-
|
|
207
146
|
_defineProperty(_assertThisInitialized(_this), "snapToDeg", function (valueDeg) {
|
|
208
147
|
var toleranceDeg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
|
|
209
148
|
var snapValues = [0, 45, 90, 135, 180, 225, 270, 315, 360];
|
|
210
149
|
var foundSnapValue = snapValues.find(function (value) {
|
|
211
150
|
return Math.abs(valueDeg - value) <= toleranceDeg;
|
|
212
151
|
});
|
|
213
|
-
|
|
214
152
|
if (foundSnapValue === undefined) {
|
|
215
153
|
return valueDeg;
|
|
216
154
|
}
|
|
217
|
-
|
|
218
155
|
return foundSnapValue === 360 ? 0 : foundSnapValue;
|
|
219
156
|
});
|
|
220
|
-
|
|
221
157
|
_defineProperty(_assertThisInitialized(_this), "bottomRightContainerRef", /*#__PURE__*/_react["default"].createRef());
|
|
222
|
-
|
|
223
158
|
_defineProperty(_assertThisInitialized(_this), "topRightContainerRef", /*#__PURE__*/_react["default"].createRef());
|
|
224
|
-
|
|
225
159
|
_defineProperty(_assertThisInitialized(_this), "bottomLeftContainerRef", /*#__PURE__*/_react["default"].createRef());
|
|
226
|
-
|
|
227
160
|
_defineProperty(_assertThisInitialized(_this), "topLeftContainerRef", /*#__PURE__*/_react["default"].createRef());
|
|
228
|
-
|
|
229
161
|
_defineProperty(_assertThisInitialized(_this), "angleLabelRef", /*#__PURE__*/_react["default"].createRef());
|
|
230
|
-
|
|
231
162
|
_defineProperty(_assertThisInitialized(_this), "renderToolboxButton", function (positionName) {
|
|
232
163
|
var _this$props = _this.props,
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
164
|
+
renderToolboxButton = _this$props.renderToolboxButton,
|
|
165
|
+
canvas = _this$props.canvas,
|
|
166
|
+
selectedObject = _this$props.selectedObject;
|
|
237
167
|
var _assertThisInitialize = _assertThisInitialized(_this),
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
168
|
+
onScalingChange = _assertThisInitialize.onScalingChange,
|
|
169
|
+
onRotationChange = _assertThisInitialize.onRotationChange,
|
|
170
|
+
onDeleteClick = _assertThisInitialize.onDeleteClick;
|
|
242
171
|
if (renderToolboxButton) {
|
|
243
172
|
// call the render prop method with the position name and the available functions
|
|
244
173
|
return renderToolboxButton({
|
|
@@ -253,11 +182,9 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
253
182
|
}
|
|
254
183
|
});
|
|
255
184
|
}
|
|
256
|
-
|
|
257
185
|
if (!selectedObject) {
|
|
258
186
|
return null;
|
|
259
187
|
}
|
|
260
|
-
|
|
261
188
|
switch (positionName) {
|
|
262
189
|
case 'topRight':
|
|
263
190
|
return !selectedObject.locked && /*#__PURE__*/_react["default"].createElement(_InlineToolboxButton["default"], {
|
|
@@ -267,7 +194,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
267
194
|
onTouchStart: onRotationChange,
|
|
268
195
|
onMouseDown: onRotationChange
|
|
269
196
|
});
|
|
270
|
-
|
|
271
197
|
case 'bottomRight':
|
|
272
198
|
return !selectedObject.locked && !selectedObject.autoFit && /*#__PURE__*/_react["default"].createElement(_InlineToolboxButton["default"], {
|
|
273
199
|
style: {
|
|
@@ -276,7 +202,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
276
202
|
onTouchStart: onScalingChange,
|
|
277
203
|
onMouseDown: onScalingChange
|
|
278
204
|
});
|
|
279
|
-
|
|
280
205
|
case 'bottomLeft':
|
|
281
206
|
return /*#__PURE__*/_react["default"].createElement(_InlineToolboxButton["default"], {
|
|
282
207
|
style: {
|
|
@@ -284,28 +209,24 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
284
209
|
},
|
|
285
210
|
onClick: onDeleteClick
|
|
286
211
|
});
|
|
287
|
-
|
|
288
212
|
case 'topLeft':
|
|
289
213
|
default:
|
|
290
214
|
return null;
|
|
291
215
|
}
|
|
292
216
|
});
|
|
293
|
-
|
|
294
217
|
_defineProperty(_assertThisInitialized(_this), "AngleLabel", function (_ref) {
|
|
295
218
|
var className = _ref.className,
|
|
296
|
-
|
|
297
|
-
var selectedObjectInCanvas = (0,
|
|
298
|
-
var selectedObject = selectedObjectInCanvas || (0,
|
|
299
|
-
var rotation = (0,
|
|
219
|
+
renderAngleLabel = _ref.renderAngleLabel;
|
|
220
|
+
var selectedObjectInCanvas = (0, _get["default"])(_this.props, 'canvas.selectedObject', null);
|
|
221
|
+
var selectedObject = selectedObjectInCanvas || (0, _get["default"])(_this.props, 'selectedObject', null);
|
|
222
|
+
var rotation = (0, _get["default"])(selectedObject, 'rotation', 0);
|
|
300
223
|
var degAngle = "".concat(Math.round(rotation * 100) / 100, " \xB0");
|
|
301
224
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
302
225
|
className: className
|
|
303
226
|
}, renderAngleLabel ? renderAngleLabel(degAngle) : /*#__PURE__*/_react["default"].createElement("span", null, degAngle));
|
|
304
227
|
});
|
|
305
|
-
|
|
306
228
|
return _this;
|
|
307
229
|
}
|
|
308
|
-
|
|
309
230
|
_createClass(InlineToolBox, [{
|
|
310
231
|
key: "componentDidMount",
|
|
311
232
|
value: function componentDidMount() {
|
|
@@ -315,7 +236,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
315
236
|
key: "componentDidUpdate",
|
|
316
237
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
317
238
|
this.initState(prevProps);
|
|
318
|
-
|
|
319
239
|
if (!prevState.show && this.state.show && this.props.selectedObject || this.props.selectedObject && this.props.selectedObject !== prevProps.selectedObject || this.props.selectedObject && this.props.canvasPosition !== prevProps.canvasPosition) {
|
|
320
240
|
this.updateToolbarTransform();
|
|
321
241
|
}
|
|
@@ -325,7 +245,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
325
245
|
value: function initState() {
|
|
326
246
|
var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
327
247
|
var selectedObject = this.props.selectedObject;
|
|
328
|
-
|
|
329
248
|
if (selectedObject && selectedObject !== prevProps.selectedObject) {
|
|
330
249
|
this.setState({
|
|
331
250
|
show: !selectedObject.grabbed
|
|
@@ -340,17 +259,14 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
340
259
|
key: "updateToolbarTransform",
|
|
341
260
|
value: function updateToolbarTransform() {
|
|
342
261
|
var selectedObject = this.props.canvas.selectedObject;
|
|
343
|
-
|
|
344
262
|
if (!selectedObject) {
|
|
345
263
|
return;
|
|
346
264
|
}
|
|
347
|
-
|
|
348
265
|
var _selectedObject$getTr2 = selectedObject.getTransformedRect(),
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
266
|
+
topRight = _selectedObject$getTr2.topRight,
|
|
267
|
+
bottomRight = _selectedObject$getTr2.bottomRight,
|
|
268
|
+
bottomLeft = _selectedObject$getTr2.bottomLeft,
|
|
269
|
+
topLeft = _selectedObject$getTr2.topLeft;
|
|
354
270
|
this.bottomRightContainerRef.current && this.bottomRightContainerRef.current.updateTransform({
|
|
355
271
|
translate: {
|
|
356
272
|
x: bottomRight.x,
|
|
@@ -381,7 +297,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
381
297
|
});
|
|
382
298
|
var anglePosition = topRight;
|
|
383
299
|
var radAngle = selectedObject.rotation * Math.PI / 180;
|
|
384
|
-
|
|
385
300
|
if (selectedObject.rotation >= 270) {
|
|
386
301
|
anglePosition.x += 50 * Math.cos(radAngle);
|
|
387
302
|
anglePosition.y += 70 * Math.sin(radAngle);
|
|
@@ -395,7 +310,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
395
310
|
anglePosition.x += 50 * Math.cos(radAngle);
|
|
396
311
|
anglePosition.y += 50 * Math.sin(radAngle);
|
|
397
312
|
}
|
|
398
|
-
|
|
399
313
|
this.angleLabelRef.current && this.angleLabelRef.current.updateTransform({
|
|
400
314
|
translate: {
|
|
401
315
|
x: anglePosition.x,
|
|
@@ -408,24 +322,22 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
408
322
|
key: "render",
|
|
409
323
|
value: function render() {
|
|
410
324
|
logger.log('render InlineToolbox');
|
|
411
|
-
|
|
412
325
|
if (this.state.show) {
|
|
413
326
|
var _this$props2 = this.props,
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
327
|
+
classes = _this$props2.classes,
|
|
328
|
+
children = _this$props2.children,
|
|
329
|
+
canvas = _this$props2.canvas,
|
|
330
|
+
selectedObject = _this$props2.selectedObject,
|
|
331
|
+
renderAngleLabel = _this$props2.renderAngleLabel,
|
|
332
|
+
ContainerComponent = _this$props2.ContainerComponent,
|
|
333
|
+
canvasPosition = _this$props2.canvasPosition;
|
|
421
334
|
var AngleLabel = this.AngleLabel;
|
|
422
335
|
var renderToolboxButton = this.renderToolboxButton,
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
336
|
+
topRightContainerRef = this.topRightContainerRef,
|
|
337
|
+
bottomRightContainerRef = this.bottomRightContainerRef,
|
|
338
|
+
bottomLeftContainerRef = this.bottomLeftContainerRef,
|
|
339
|
+
topLeftContainerRef = this.topLeftContainerRef,
|
|
340
|
+
angleLabelRef = this.angleLabelRef;
|
|
429
341
|
if (typeof children === 'function') {
|
|
430
342
|
// call the render prop with all the necessary input
|
|
431
343
|
return children({
|
|
@@ -446,7 +358,6 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
446
358
|
}
|
|
447
359
|
});
|
|
448
360
|
}
|
|
449
|
-
|
|
450
361
|
return /*#__PURE__*/_react["default"].createElement(ContainerComponent, {
|
|
451
362
|
canvasPosition: canvasPosition,
|
|
452
363
|
canvas: canvas,
|
|
@@ -471,14 +382,11 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
|
|
|
471
382
|
className: classes.buttonContainer
|
|
472
383
|
}, renderToolboxButton('topLeft')));
|
|
473
384
|
}
|
|
474
|
-
|
|
475
385
|
return null;
|
|
476
386
|
}
|
|
477
387
|
}]);
|
|
478
|
-
|
|
479
388
|
return InlineToolBox;
|
|
480
389
|
}(_react["default"].Component);
|
|
481
|
-
|
|
482
390
|
_defineProperty(InlineToolBox, "propTypes", {
|
|
483
391
|
children: _propTypes["default"].func,
|
|
484
392
|
selectedObject: _propTypes["default"].object,
|
|
@@ -492,13 +400,12 @@ _defineProperty(InlineToolBox, "propTypes", {
|
|
|
492
400
|
renderAngleLabel: _propTypes["default"].func,
|
|
493
401
|
ContainerComponent: _propTypes["default"].elementType
|
|
494
402
|
});
|
|
495
|
-
|
|
496
403
|
_defineProperty(InlineToolBox, "defaultProps", {
|
|
497
|
-
ContainerComponent:
|
|
404
|
+
ContainerComponent: function ContainerComponent(_ref2) {
|
|
405
|
+
var children = _ref2.children;
|
|
406
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
|
|
407
|
+
}
|
|
498
408
|
});
|
|
499
|
-
|
|
500
|
-
var _default = (0, _withStyles["default"])(_styles["default"], {
|
|
409
|
+
var _default = exports["default"] = (0, _withStyles["default"])(_styles["default"], {
|
|
501
410
|
name: 'Designer-InlineToolbox'
|
|
502
|
-
})((0, _CanvasProvider.withCanvas)((0, _EditorContainer.withCanvasPosition)((0, _CanvasProvider.withCanvasState)(InlineToolBox))));
|
|
503
|
-
|
|
504
|
-
exports["default"] = _default;
|
|
411
|
+
})((0, _CanvasProvider.withCanvas)((0, _EditorContainer.withCanvasPosition)((0, _CanvasProvider.withCanvasState)(InlineToolBox))));
|
|
@@ -1,32 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
9
|
var _excluded = ["style"];
|
|
11
|
-
|
|
12
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
-
|
|
11
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
16
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
22
17
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
23
|
-
|
|
24
18
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
|
-
|
|
26
19
|
var InlineToolboxButton = function InlineToolboxButton(_ref) {
|
|
27
20
|
var style = _ref.style,
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
30
22
|
return /*#__PURE__*/_react["default"].createElement("button", _extends({
|
|
31
23
|
style: _objectSpread({
|
|
32
24
|
position: 'absolute',
|
|
@@ -37,6 +29,4 @@ var InlineToolboxButton = function InlineToolboxButton(_ref) {
|
|
|
37
29
|
}, style)
|
|
38
30
|
}, props));
|
|
39
31
|
};
|
|
40
|
-
|
|
41
|
-
var _default = InlineToolboxButton;
|
|
42
|
-
exports["default"] = _default;
|
|
32
|
+
var _default = exports["default"] = InlineToolboxButton;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _default = {
|
|
7
|
+
var _default = exports["default"] = {
|
|
8
8
|
buttonContainer: {
|
|
9
9
|
position: 'absolute',
|
|
10
10
|
top: 0,
|
|
@@ -23,5 +23,4 @@ var _default = {
|
|
|
23
23
|
height: 'inherit',
|
|
24
24
|
fontSize: '1.5rem'
|
|
25
25
|
}
|
|
26
|
-
};
|
|
27
|
-
exports["default"] = _default;
|
|
26
|
+
};
|
|
@@ -1,56 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
7
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
-
|
|
14
|
-
function _extends() { _extends = Object.assign
|
|
15
|
-
|
|
9
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
10
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
16
11
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
23
|
-
|
|
24
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
25
|
-
|
|
12
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
13
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
14
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
15
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
26
16
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
27
|
-
|
|
28
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
29
|
-
|
|
17
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
30
18
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
31
|
-
|
|
32
19
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
33
|
-
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
var ManipulableContainer = /*#__PURE__*/function (_React$Component) {
|
|
20
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
21
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
22
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
23
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
24
|
+
var ManipulableContainer = exports["default"] = /*#__PURE__*/function (_React$Component) {
|
|
39
25
|
_inherits(ManipulableContainer, _React$Component);
|
|
40
|
-
|
|
41
26
|
var _super = _createSuper(ManipulableContainer);
|
|
42
|
-
|
|
43
27
|
function ManipulableContainer() {
|
|
44
28
|
var _this;
|
|
45
|
-
|
|
46
29
|
_classCallCheck(this, ManipulableContainer);
|
|
47
|
-
|
|
48
30
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
31
|
args[_key] = arguments[_key];
|
|
50
32
|
}
|
|
51
|
-
|
|
52
33
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
53
|
-
|
|
54
34
|
_defineProperty(_assertThisInitialized(_this), "transform", {
|
|
55
35
|
translate: {
|
|
56
36
|
x: 0,
|
|
@@ -58,17 +38,14 @@ var ManipulableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
58
38
|
},
|
|
59
39
|
rotate: 0
|
|
60
40
|
});
|
|
61
|
-
|
|
62
41
|
_defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
|
|
63
|
-
|
|
64
42
|
return _this;
|
|
65
43
|
}
|
|
66
|
-
|
|
67
44
|
_createClass(ManipulableContainer, [{
|
|
68
45
|
key: "translate",
|
|
69
46
|
value: function translate(_ref) {
|
|
70
47
|
var x = _ref.x,
|
|
71
|
-
|
|
48
|
+
y = _ref.y;
|
|
72
49
|
this.transform.translate = {
|
|
73
50
|
x: x,
|
|
74
51
|
y: y
|
|
@@ -87,7 +64,7 @@ var ManipulableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
87
64
|
var transformObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.transform;
|
|
88
65
|
var element = this.containerRef.current;
|
|
89
66
|
var translate = transformObj.translate,
|
|
90
|
-
|
|
67
|
+
rotate = transformObj.rotate;
|
|
91
68
|
element.style.transform = "translate(".concat(translate.x, "px, ").concat(translate.y, "px) rotate(").concat(rotate, "deg)");
|
|
92
69
|
}
|
|
93
70
|
}, {
|
|
@@ -98,8 +75,5 @@ var ManipulableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
98
75
|
}, this.props));
|
|
99
76
|
}
|
|
100
77
|
}]);
|
|
101
|
-
|
|
102
78
|
return ManipulableContainer;
|
|
103
|
-
}(_react["default"].Component);
|
|
104
|
-
|
|
105
|
-
exports["default"] = ManipulableContainer;
|
|
79
|
+
}(_react["default"].Component);
|