redhotmagma-graphics-editor 1.41.1 → 1.42.1
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,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
|
|
43
|
-
|
|
44
|
-
function
|
|
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
|
|
59
|
-
|
|
60
|
-
function
|
|
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
|
-
}
|
|
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
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
98
|
+
}
|
|
99
|
+
// render default
|
|
139
100
|
var upload = renderObj.upload,
|
|
140
|
-
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
|
|
176
|
-
|
|
177
|
-
|
|
132
|
+
props = this.props,
|
|
133
|
+
canvasElementRef = this.canvasElementRef,
|
|
134
|
+
onSizeChange = this.onSizeChange;
|
|
178
135
|
var children = props.children,
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
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
|
-
}
|
|
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
|
|
324
|
-
|
|
325
|
-
var _default = (0, _CanvasProvider.withCanvas)(StyledEditor);
|
|
326
|
-
|
|
327
|
-
exports["default"] = _default;
|
|
272
|
+
var _default = exports["default"] = (0, _CanvasProvider.withCanvas)(StyledEditor);
|