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.
Files changed (82) hide show
  1. package/App.js +90 -165
  2. package/CanvasAdapters/Mock/Canvas.js +71 -125
  3. package/CanvasAdapters/Mock/Objects/CanvasObject.js +23 -40
  4. package/CanvasAdapters/Mock/Objects/Group.js +15 -46
  5. package/CanvasAdapters/Mock/Objects/Image.js +15 -46
  6. package/CanvasAdapters/Mock/Objects/Text.js +15 -51
  7. package/CanvasAdapters/Mock/index.js +0 -1
  8. package/CanvasAdapters/PaperJs/Canvas.js +268 -398
  9. package/CanvasAdapters/PaperJs/CanvasRepository.js +6 -23
  10. package/CanvasAdapters/PaperJs/Modifiers/FontSizeMin.js +2 -5
  11. package/CanvasAdapters/PaperJs/Objects/CanvasObject.js +33 -65
  12. package/CanvasAdapters/PaperJs/Objects/Group.js +14 -48
  13. package/CanvasAdapters/PaperJs/Objects/Image.js +58 -114
  14. package/CanvasAdapters/PaperJs/Objects/Text.js +43 -99
  15. package/CanvasAdapters/PaperJs/Utils/HTML2Paper.js +57 -108
  16. package/CanvasAdapters/PaperJs/Utils/SVGfix.js +9 -30
  17. package/CanvasAdapters/PaperJs/Utils/StyleParams.js +10 -21
  18. package/CanvasAdapters/PaperJs/Utils/TextToSVGRepository.js +53 -86
  19. package/CanvasAdapters/PaperJs/Utils/TextToSVGUtils.js +4 -14
  20. package/CanvasAdapters/PaperJs/Utils/UTF8Base64.js +3 -24
  21. package/CanvasAdapters/PaperJs/Utils/UseColorLayer.js +58 -0
  22. package/CanvasAdapters/PaperJs/Utils/UseMask.js +183 -279
  23. package/CanvasAdapters/PaperJs/Utils/__tests__/SVGfix.test.js +0 -1
  24. package/CanvasAdapters/PaperJs/Utils/__tests__/TextToSVGUtils.test.js +0 -1
  25. package/CanvasAdapters/PaperJs/Utils/__tests__/updateFontStyle.test.js +0 -1
  26. package/CanvasAdapters/PaperJs/Utils/updateFontStyle.js +5 -11
  27. package/CanvasAdapters/PaperJs/index.js +0 -1
  28. package/CanvasInterface/Canvas.js +145 -235
  29. package/CanvasInterface/CanvasProvider.js +25 -75
  30. package/CanvasInterface/Objects/CanvasObject.js +68 -148
  31. package/CanvasInterface/Objects/index.js +0 -1
  32. package/CanvasInterface/Observable.js +10 -29
  33. package/CanvasInterface/canvasConnect.js +12 -44
  34. package/CanvasInterface/index.js +1 -7
  35. package/Components/Canvas/Canvas.js +14 -41
  36. package/Components/Canvas/CanvasContainer.js +5 -18
  37. package/Components/Canvas/styles.js +2 -3
  38. package/Components/DelayedContainer.js +14 -39
  39. package/Components/Editor/Editor.js +47 -102
  40. package/Components/Editor/EditorContainer.js +47 -131
  41. package/Components/Editor/styles.js +2 -3
  42. package/Components/InlineToolbox/InlineToolbox.js +49 -142
  43. package/Components/InlineToolbox/InlineToolboxButton.js +9 -19
  44. package/Components/InlineToolbox/styles.js +2 -3
  45. package/Components/ManipulableContainer.js +15 -41
  46. package/Components/ResizeDetect/ResizeDetect.js +14 -47
  47. package/Components/Rulers/Ruler.js +20 -68
  48. package/Components/Rulers/Rulers.js +14 -46
  49. package/Components/Rulers/styles.js +2 -3
  50. package/Components/SelectionToolbox/ColorPalette.js +25 -73
  51. package/Components/SelectionToolbox/SelectionToolbox.js +39 -101
  52. package/Components/SelectionToolbox/TextTools.js +81 -157
  53. package/Components/SelectionToolbox/styles.js +2 -3
  54. package/Components/StandardToolbox/StandardToolbox.js +81 -144
  55. package/Components/TextEditor/TextEditor.js +67 -182
  56. package/Components/TextEditor/TextEditorStateProvider.js +20 -56
  57. package/Components/Toolbox/ToolboxContainer.js +5 -18
  58. package/Components/Toolbox/ToolboxRow.js +4 -16
  59. package/Components/Toolbox/styles.js +2 -3
  60. package/Utils/Calc2D.js +3 -9
  61. package/Utils/DOM.js +22 -80
  62. package/Utils/Device.js +2 -6
  63. package/Utils/Image.js +17 -11
  64. package/Utils/Logger.js +8 -32
  65. package/Utils/Range.js +6 -33
  66. package/Utils/String.js +2 -8
  67. package/Utils/UnitConversion.js +3 -9
  68. package/Utils/__tests__/Calc2D.test.js +1 -3
  69. package/Utils/__tests__/DOM.test.js +17 -25
  70. package/Utils/__tests__/Range.test.js +0 -1
  71. package/_demos/UsingExternalControls/App.js +13 -48
  72. package/_demos/UsingRenderProps/App.js +15 -54
  73. package/index.js +2 -6
  74. package/package.json +5 -7
  75. package/src/App.js +35 -38
  76. package/src/CanvasAdapters/PaperJs/Canvas.ts +11 -0
  77. package/src/CanvasAdapters/PaperJs/Utils/UseColorLayer.js +56 -0
  78. package/src/Components/InlineToolbox/InlineToolbox.js +2 -2
  79. package/src/Components/SelectionToolbox/TextTools.js +1 -1
  80. package/src/_demos/UsingExternalControls/App.js +25 -28
  81. package/src/_demos/UsingRenderProps/App.js +16 -19
  82. 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 _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, descriptor.key, descriptor); } }
37
-
38
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
53
-
54
- 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; }
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
- bottomRight = _selectedObject$getTr.bottomRight;
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
- selectedObject = _this$props$canvas.selectedObject,
146
- canvasElement = _this$props$canvas.canvasElement;
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
- var clientPosition = _this.getClientPositionFromEvent(evt); // const { canvasPosition } = this.props;
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
- renderToolboxButton = _this$props.renderToolboxButton,
234
- canvas = _this$props.canvas,
235
- selectedObject = _this$props.selectedObject;
236
-
164
+ renderToolboxButton = _this$props.renderToolboxButton,
165
+ canvas = _this$props.canvas,
166
+ selectedObject = _this$props.selectedObject;
237
167
  var _assertThisInitialize = _assertThisInitialized(_this),
238
- onScalingChange = _assertThisInitialize.onScalingChange,
239
- onRotationChange = _assertThisInitialize.onRotationChange,
240
- onDeleteClick = _assertThisInitialize.onDeleteClick;
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
- renderAngleLabel = _ref.renderAngleLabel;
297
- var selectedObjectInCanvas = (0, _lodash.get)(_this.props, 'canvas.selectedObject', null);
298
- var selectedObject = selectedObjectInCanvas || (0, _lodash.get)(_this.props, 'selectedObject', null);
299
- var rotation = (0, _lodash.get)(selectedObject, '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
- topRight = _selectedObject$getTr2.topRight,
350
- bottomRight = _selectedObject$getTr2.bottomRight,
351
- bottomLeft = _selectedObject$getTr2.bottomLeft,
352
- topLeft = _selectedObject$getTr2.topLeft;
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
- classes = _this$props2.classes,
415
- children = _this$props2.children,
416
- canvas = _this$props2.canvas,
417
- selectedObject = _this$props2.selectedObject,
418
- renderAngleLabel = _this$props2.renderAngleLabel,
419
- ContainerComponent = _this$props2.ContainerComponent,
420
- canvasPosition = _this$props2.canvasPosition;
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
- topRightContainerRef = this.topRightContainerRef,
424
- bottomRightContainerRef = this.bottomRightContainerRef,
425
- bottomLeftContainerRef = this.bottomLeftContainerRef,
426
- topLeftContainerRef = this.topLeftContainerRef,
427
- angleLabelRef = this.angleLabelRef;
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: _react["default"].Fragment
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 _extends() { _extends = Object.assign || 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); }
15
-
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
17
-
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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
- props = _objectWithoutProperties(_ref, _excluded);
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 || 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); }
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 _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, descriptor.key, descriptor); } }
19
-
20
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
35
-
36
- 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; }
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
- y = _ref.y;
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
- rotate = transformObj.rotate;
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);