redhotmagma-graphics-editor 1.41.1 → 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,85 +1,51 @@
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"] = exports.StyledEditor = exports.Editor = void 0;
9
-
10
7
  var _react = _interopRequireDefault(require("react"));
11
-
12
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
9
  var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
15
-
16
10
  var _clsx = _interopRequireDefault(require("clsx"));
17
-
18
11
  var _CanvasProvider = require("../../CanvasInterface/CanvasProvider");
19
-
20
12
  var _Canvas = require("../../CanvasInterface/Canvas");
21
-
22
13
  var _Canvas2 = _interopRequireDefault(require("../Canvas/Canvas"));
23
-
24
14
  var _CanvasContainer = _interopRequireDefault(require("../Canvas/CanvasContainer"));
25
-
26
15
  var _StandardToolbox = _interopRequireDefault(require("../StandardToolbox/StandardToolbox"));
27
-
28
16
  var _InlineToolbox = _interopRequireDefault(require("../InlineToolbox/InlineToolbox"));
29
-
30
17
  var _SelectionToolbox = _interopRequireDefault(require("../SelectionToolbox/SelectionToolbox"));
31
-
32
18
  var _Rulers = _interopRequireDefault(require("../Rulers/Rulers"));
33
-
34
19
  var _EditorContainer = _interopRequireDefault(require("./EditorContainer"));
35
-
36
20
  var _styles = _interopRequireDefault(require("./styles"));
37
-
38
21
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
39
-
22
+ 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); }
40
23
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
41
-
42
- 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); } }
43
-
44
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
45
-
46
- 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); }
47
-
48
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
49
-
24
+ 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); } }
25
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
26
+ 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); }
27
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
50
28
  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); }; }
51
-
52
- function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
53
-
29
+ 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); }
54
30
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
55
-
56
31
  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; } }
57
-
58
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
59
-
60
- 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; }
61
-
62
- var Editor = /*#__PURE__*/function (_React$Component) {
32
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
33
+ 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; }
34
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
35
+ 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); }
36
+ var Editor = exports.Editor = /*#__PURE__*/function (_React$Component) {
63
37
  _inherits(Editor, _React$Component);
64
-
65
38
  var _super = _createSuper(Editor);
66
-
67
39
  function Editor() {
68
40
  var _this;
69
-
70
41
  _classCallCheck(this, Editor);
71
-
72
42
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
73
43
  args[_key] = arguments[_key];
74
44
  }
75
-
76
45
  _this = _super.call.apply(_super, [this].concat(args));
77
-
78
46
  _defineProperty(_assertThisInitialized(_this), "canvasElementRef", /*#__PURE__*/_react["default"].createRef());
79
-
80
47
  return _this;
81
48
  }
82
-
83
49
  _createClass(Editor, [{
84
50
  key: "componentDidMount",
85
51
  value: function componentDidMount() {
@@ -91,7 +57,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
91
57
  value: function componentDidUpdate(prevProps) {
92
58
  var prevCanvas = prevProps.canvas;
93
59
  var canvas = this.props.canvas;
94
-
95
60
  if (prevCanvas !== canvas) {
96
61
  prevCanvas && this.removeView(prevCanvas);
97
62
  this.appendView(canvas);
@@ -117,12 +82,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
117
82
  key: "renderSelectionToolbox",
118
83
  value: function renderSelectionToolbox(renderObj) {
119
84
  var renderSelectionToolbox = this.props.renderSelectionToolbox;
120
-
121
85
  if (renderSelectionToolbox) {
122
86
  return renderSelectionToolbox(renderObj);
123
- } // render default
124
-
125
-
87
+ }
88
+ // render default
126
89
  var SelectionToolbox = renderObj.components.SelectionToolbox;
127
90
  return /*#__PURE__*/_react["default"].createElement(SelectionToolbox, null);
128
91
  }
@@ -130,14 +93,12 @@ var Editor = /*#__PURE__*/function (_React$Component) {
130
93
  key: "renderStandardToolbox",
131
94
  value: function renderStandardToolbox(renderObj) {
132
95
  var renderStandardToolbox = this.props.renderStandardToolbox;
133
-
134
96
  if (renderStandardToolbox) {
135
97
  return renderStandardToolbox(renderObj);
136
- } // render default
137
-
138
-
98
+ }
99
+ // render default
139
100
  var upload = renderObj.upload,
140
- StandardToolbox = renderObj.components.StandardToolbox;
101
+ StandardToolbox = renderObj.components.StandardToolbox;
141
102
  return /*#__PURE__*/_react["default"].createElement(StandardToolbox, {
142
103
  upload: upload
143
104
  });
@@ -146,12 +107,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
146
107
  key: "renderInlineToolbox",
147
108
  value: function renderInlineToolbox(renderObj) {
148
109
  var renderInlineToolbox = this.props.renderInlineToolbox;
149
-
150
110
  if (renderInlineToolbox) {
151
111
  return renderInlineToolbox(renderObj);
152
- } // render default
153
-
154
-
112
+ }
113
+ // render default
155
114
  var InlineToolbox = renderObj.components.InlineToolbox;
156
115
  return /*#__PURE__*/_react["default"].createElement(InlineToolbox, null);
157
116
  }
@@ -159,12 +118,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
159
118
  key: "renderRulers",
160
119
  value: function renderRulers(renderObj) {
161
120
  var renderRulers = this.props.renderRulers;
162
-
163
121
  if (renderRulers) {
164
122
  return renderRulers(renderObj);
165
- } // render default
166
-
167
-
123
+ }
124
+ // render default
168
125
  var Rulers = renderObj.components.Rulers;
169
126
  return /*#__PURE__*/_react["default"].createElement(Rulers, null);
170
127
  }
@@ -172,31 +129,30 @@ var Editor = /*#__PURE__*/function (_React$Component) {
172
129
  key: "render",
173
130
  value: function render() {
174
131
  var state = this.state,
175
- props = this.props,
176
- canvasElementRef = this.canvasElementRef,
177
- onSizeChange = this.onSizeChange;
132
+ props = this.props,
133
+ canvasElementRef = this.canvasElementRef,
134
+ onSizeChange = this.onSizeChange;
178
135
  var children = props.children,
179
- classes = props.classes,
180
- containerClassName = props.containerClassName,
181
- upload = props.upload,
182
- canvas = props.canvas,
183
- fillContainer = props.fillContainer,
184
- allowUpScaling = props.allowUpScaling,
185
- subtractSiblingsHeight = props.subtractSiblingsHeight,
186
- style = props.style,
187
- onContainerReady = props.onContainerReady,
188
- selectedColor = props.selectedColor,
189
- renderFallback = props.renderFallback,
190
- onContainerUpdate = props.onContainerUpdate,
191
- EditorContainer = props.EditorContainer,
192
- CanvasContainer = props.CanvasContainer,
193
- CanvasComponent = props.CanvasComponent,
194
- InlineToolbox = props.InlineToolbox,
195
- Rulers = props.Rulers,
196
- SelectionToolbox = props.SelectionToolbox,
197
- StandardToolbox = props.StandardToolbox,
198
- renderInCanvasContainer = props.renderInCanvasContainer;
199
-
136
+ classes = props.classes,
137
+ containerClassName = props.containerClassName,
138
+ upload = props.upload,
139
+ canvas = props.canvas,
140
+ fillContainer = props.fillContainer,
141
+ allowUpScaling = props.allowUpScaling,
142
+ subtractSiblingsHeight = props.subtractSiblingsHeight,
143
+ style = props.style,
144
+ onContainerReady = props.onContainerReady,
145
+ selectedColor = props.selectedColor,
146
+ renderFallback = props.renderFallback,
147
+ onContainerUpdate = props.onContainerUpdate,
148
+ EditorContainer = props.EditorContainer,
149
+ CanvasContainer = props.CanvasContainer,
150
+ CanvasComponent = props.CanvasComponent,
151
+ InlineToolbox = props.InlineToolbox,
152
+ Rulers = props.Rulers,
153
+ SelectionToolbox = props.SelectionToolbox,
154
+ StandardToolbox = props.StandardToolbox,
155
+ renderInCanvasContainer = props.renderInCanvasContainer;
200
156
  if (typeof children === 'function') {
201
157
  return children({
202
158
  canvas: canvas,
@@ -224,12 +180,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
224
180
  }
225
181
  });
226
182
  }
227
-
228
183
  if (!canvas) {
229
184
  return renderFallback ? renderFallback() : null;
230
- } // render default
231
-
185
+ }
232
186
 
187
+ // render default
233
188
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasStateProvider, {
234
189
  canvas: canvas
235
190
  }, /*#__PURE__*/_react["default"].createElement(EditorContainer, {
@@ -263,12 +218,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
263
218
  }));
264
219
  }
265
220
  }]);
266
-
267
221
  return Editor;
268
222
  }(_react["default"].Component);
269
-
270
- exports.Editor = Editor;
271
-
272
223
  _defineProperty(Editor, "propTypes", {
273
224
  renderStandardToolbox: _propTypes["default"].func,
274
225
  renderSelectionToolbox: _propTypes["default"].func,
@@ -294,7 +245,6 @@ _defineProperty(Editor, "propTypes", {
294
245
  containerClassName: _propTypes["default"].string,
295
246
  renderInCanvasContainer: _propTypes["default"].func
296
247
  });
297
-
298
248
  _defineProperty(Editor, "defaultProps", {
299
249
  renderStandardToolbox: null,
300
250
  renderSelectionToolbox: null,
@@ -316,12 +266,7 @@ _defineProperty(Editor, "defaultProps", {
316
266
  SelectionToolbox: _SelectionToolbox["default"],
317
267
  StandardToolbox: _StandardToolbox["default"]
318
268
  });
319
-
320
- var StyledEditor = (0, _withStyles["default"])(_styles["default"], {
269
+ var StyledEditor = exports.StyledEditor = (0, _withStyles["default"])(_styles["default"], {
321
270
  name: 'Designer-Editor'
322
271
  })(Editor);
323
- exports.StyledEditor = StyledEditor;
324
-
325
- var _default = (0, _CanvasProvider.withCanvas)(StyledEditor);
326
-
327
- exports["default"] = _default;
272
+ var _default = exports["default"] = (0, _CanvasProvider.withCanvas)(StyledEditor);