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
|
@@ -3,49 +3,33 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.removePlaceholders = removePlaceholders;
|
|
7
6
|
exports["default"] = void 0;
|
|
8
|
-
|
|
7
|
+
exports.removePlaceholders = removePlaceholders;
|
|
9
8
|
var _paper = _interopRequireDefault(require("paper"));
|
|
10
|
-
|
|
11
9
|
var _DOM = require("../../../Utils/DOM");
|
|
12
|
-
|
|
13
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
|
-
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
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; }
|
|
18
|
-
|
|
19
|
-
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; }
|
|
20
|
-
|
|
11
|
+
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); }
|
|
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; }
|
|
21
14
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
22
|
-
|
|
23
15
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
24
|
-
|
|
25
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
26
|
-
|
|
16
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
27
17
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
28
|
-
|
|
29
|
-
function
|
|
30
|
-
|
|
31
|
-
function
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var HTML2Paper = /*#__PURE__*/function () {
|
|
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, _toPropertyKey(descriptor.key), descriptor); } }
|
|
19
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
20
|
+
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; }
|
|
21
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
22
|
+
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); }
|
|
23
|
+
var HTML2Paper = exports["default"] = /*#__PURE__*/function () {
|
|
36
24
|
function HTML2Paper() {
|
|
37
25
|
_classCallCheck(this, HTML2Paper);
|
|
38
|
-
|
|
39
26
|
_defineProperty(this, "position", {
|
|
40
27
|
x: 0,
|
|
41
28
|
y: 0
|
|
42
29
|
});
|
|
43
|
-
|
|
44
30
|
_defineProperty(this, "lineGroup", false);
|
|
45
|
-
|
|
46
31
|
_defineProperty(this, "previousLineGroup", false);
|
|
47
32
|
}
|
|
48
|
-
|
|
49
33
|
_createClass(HTML2Paper, [{
|
|
50
34
|
key: "createLineGroup",
|
|
51
35
|
value: function createLineGroup(parentItem) {
|
|
@@ -66,12 +50,10 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
66
50
|
key: "finishLine",
|
|
67
51
|
value: function finishLine() {
|
|
68
52
|
var lineGroup = this.lineGroup,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
53
|
+
position = this.position,
|
|
54
|
+
previousLineGroup = this.previousLineGroup;
|
|
72
55
|
if (lineGroup) {
|
|
73
56
|
var height = lineGroup.bounds.height;
|
|
74
|
-
|
|
75
57
|
if (height === 0 && previousLineGroup) {
|
|
76
58
|
position.y += previousLineGroup.bounds.height;
|
|
77
59
|
lineGroup.remove();
|
|
@@ -81,30 +63,25 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
81
63
|
position.y = lineGroup.bounds.bottomLeft.y;
|
|
82
64
|
}
|
|
83
65
|
}
|
|
84
|
-
|
|
85
66
|
position.x = 0;
|
|
86
67
|
}
|
|
87
68
|
}, {
|
|
88
69
|
key: "importHTMLRecursive",
|
|
89
70
|
value: function importHTMLRecursive(el, parentItem) {
|
|
90
71
|
var _this = this;
|
|
91
|
-
|
|
92
72
|
var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
93
73
|
var position = this.position;
|
|
94
74
|
var postProcess = [];
|
|
95
|
-
|
|
96
75
|
var _iterator = _createForOfIteratorHelper(el.childNodes),
|
|
97
|
-
|
|
98
|
-
|
|
76
|
+
_step;
|
|
99
77
|
try {
|
|
100
|
-
|
|
78
|
+
var _loop = function _loop() {
|
|
101
79
|
var node = _step.value;
|
|
102
|
-
|
|
103
80
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
104
81
|
var text = new _paper["default"].PointText(_objectSpread({
|
|
105
82
|
content: node.nodeValue
|
|
106
83
|
}, props));
|
|
107
|
-
|
|
84
|
+
_this.lineGroup.addChild(text);
|
|
108
85
|
text.position.x = position.x + text.bounds.width / 2;
|
|
109
86
|
text.position.y = text.bounds.height / 2;
|
|
110
87
|
position.x = text.bounds.bottomRight.x;
|
|
@@ -115,64 +92,55 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
115
92
|
// skip BR since it is wrapped in a DIV which already sets the position
|
|
116
93
|
break;
|
|
117
94
|
}
|
|
118
|
-
|
|
119
95
|
case 'SPAN':
|
|
120
96
|
{
|
|
121
|
-
var addProps =
|
|
97
|
+
var addProps = _this.collectFontStyleProps(node);
|
|
122
98
|
|
|
123
|
-
|
|
99
|
+
// call the recursion to add children
|
|
100
|
+
_this.importHTMLRecursive(node, parentItem, _objectSpread(_objectSpread({}, props), addProps));
|
|
124
101
|
break;
|
|
125
102
|
}
|
|
126
|
-
|
|
127
103
|
case 'DIV':
|
|
128
104
|
case 'P':
|
|
129
105
|
{
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
case 'left':
|
|
153
|
-
default:
|
|
154
|
-
group.position.x = group.bounds.width / 2;
|
|
155
|
-
break;
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
return "break";
|
|
159
|
-
}();
|
|
160
|
-
|
|
161
|
-
if (_ret === "break") break;
|
|
106
|
+
_this.createLineGroup(parentItem);
|
|
107
|
+
var group = _this.lineGroup;
|
|
108
|
+
var _addProps = _this.collectFontStyleProps(node);
|
|
109
|
+
|
|
110
|
+
// call the recursion to add children
|
|
111
|
+
_this.importHTMLRecursive(node, parentItem, _objectSpread(_objectSpread({}, props), _addProps));
|
|
112
|
+
postProcess.push(function () {
|
|
113
|
+
var containerBounds = parentItem.internalBounds;
|
|
114
|
+
switch (props.textAlign) {
|
|
115
|
+
case 'center':
|
|
116
|
+
group.position.x = containerBounds.width / 2;
|
|
117
|
+
break;
|
|
118
|
+
case 'right':
|
|
119
|
+
group.position.x = containerBounds.width - group.bounds.width / 2;
|
|
120
|
+
break;
|
|
121
|
+
case 'left':
|
|
122
|
+
default:
|
|
123
|
+
group.position.x = group.bounds.width / 2;
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
break;
|
|
162
128
|
}
|
|
163
|
-
|
|
164
129
|
default:
|
|
165
|
-
{
|
|
130
|
+
{
|
|
131
|
+
// skip tag from processing
|
|
166
132
|
}
|
|
167
133
|
}
|
|
168
134
|
}
|
|
135
|
+
};
|
|
136
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
137
|
+
_loop();
|
|
169
138
|
}
|
|
170
139
|
} catch (err) {
|
|
171
140
|
_iterator.e(err);
|
|
172
141
|
} finally {
|
|
173
142
|
_iterator.f();
|
|
174
143
|
}
|
|
175
|
-
|
|
176
144
|
for (var _i = 0, _postProcess = postProcess; _i < _postProcess.length; _i++) {
|
|
177
145
|
var process = _postProcess[_i];
|
|
178
146
|
process();
|
|
@@ -183,30 +151,26 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
183
151
|
value: function collectFontStyleProps(node) {
|
|
184
152
|
var styleProps = {};
|
|
185
153
|
var _node$style = node.style,
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
154
|
+
color = _node$style.color,
|
|
155
|
+
fontStyle = _node$style.fontStyle,
|
|
156
|
+
fontWeight = _node$style.fontWeight,
|
|
157
|
+
fontSize = _node$style.fontSize,
|
|
158
|
+
fontFamily = _node$style.fontFamily;
|
|
192
159
|
if (color) {
|
|
193
160
|
styleProps.fillColor = color;
|
|
194
161
|
}
|
|
195
|
-
|
|
196
162
|
if (fontWeight || fontStyle) {
|
|
197
163
|
styleProps.fontWeight = [fontStyle, fontWeight].filter(function (i) {
|
|
198
164
|
return !!i;
|
|
199
165
|
}).join(' ');
|
|
200
166
|
}
|
|
201
|
-
|
|
202
|
-
|
|
167
|
+
if (fontSize) {
|
|
168
|
+
// ignore fontSize for now, since it's global for the text object
|
|
203
169
|
// styleProps.fontSize = fontSize;
|
|
204
170
|
}
|
|
205
|
-
|
|
206
171
|
if (fontFamily) {
|
|
207
172
|
styleProps.fontFamily = fontFamily;
|
|
208
173
|
}
|
|
209
|
-
|
|
210
174
|
return styleProps;
|
|
211
175
|
}
|
|
212
176
|
}, {
|
|
@@ -217,7 +181,6 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
217
181
|
var addBaseRect = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
|
218
182
|
var initialProps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
219
183
|
var domElement;
|
|
220
|
-
|
|
221
184
|
if ((0, _DOM.isElement)(strOrDomElement)) {
|
|
222
185
|
domElement = strOrDomElement;
|
|
223
186
|
} else if (typeof strOrDomElement === 'string') {
|
|
@@ -226,28 +189,22 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
226
189
|
} else {
|
|
227
190
|
throw new Error("\n HTML2Paper: wrong input type: ".concat(_typeof(strOrDomElement), ". \n It should be an instance of HTMLElement or string.\n "));
|
|
228
191
|
}
|
|
229
|
-
|
|
230
192
|
domElement = prepareInitialStyling(domElement, initialProps);
|
|
231
|
-
|
|
232
193
|
if (targetGroup && !keepContent) {
|
|
233
194
|
targetGroup.removeChildren();
|
|
234
195
|
}
|
|
235
|
-
|
|
236
196
|
var root = targetGroup;
|
|
237
|
-
|
|
238
197
|
if (!root) {
|
|
239
198
|
root = new _paper["default"].Group({
|
|
240
199
|
applyMatrix: false
|
|
241
200
|
});
|
|
242
201
|
}
|
|
243
|
-
|
|
244
202
|
var textGroup = new _paper["default"].Group({
|
|
245
203
|
applyMatrix: false
|
|
246
204
|
});
|
|
247
205
|
this.createLineGroup(textGroup);
|
|
248
206
|
this.importHTMLRecursive(domElement, textGroup, initialProps);
|
|
249
207
|
this.finishImport();
|
|
250
|
-
|
|
251
208
|
if (addBaseRect) {
|
|
252
209
|
var rect = new _paper["default"].Path.Rectangle(textGroup.bounds);
|
|
253
210
|
rect.data = {
|
|
@@ -255,15 +212,14 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
255
212
|
};
|
|
256
213
|
root.addChild(rect);
|
|
257
214
|
}
|
|
215
|
+
root.addChild(textGroup);
|
|
258
216
|
|
|
259
|
-
|
|
217
|
+
// the selection is not visualized after the group content has changed
|
|
260
218
|
// so it has to be reapplied programmatically
|
|
261
|
-
|
|
262
219
|
root.setSelected(root.isSelected());
|
|
263
220
|
return root;
|
|
264
221
|
}
|
|
265
222
|
}]);
|
|
266
|
-
|
|
267
223
|
return HTML2Paper;
|
|
268
224
|
}();
|
|
269
225
|
/**
|
|
@@ -271,31 +227,24 @@ var HTML2Paper = /*#__PURE__*/function () {
|
|
|
271
227
|
* @param {HTMLElement} domElement
|
|
272
228
|
* @param {object} initialProps
|
|
273
229
|
*/
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
exports["default"] = HTML2Paper;
|
|
277
|
-
|
|
278
230
|
function prepareInitialStyling(domElement, initialProps) {
|
|
279
231
|
var node = domElement.cloneNode(true);
|
|
280
232
|
var fontSize = initialProps.fontSize;
|
|
281
|
-
|
|
282
233
|
if (node && node.firstChild && fontSize) {
|
|
283
234
|
node.firstChild.style.fontSize = "".concat(fontSize, "px");
|
|
284
235
|
}
|
|
285
|
-
|
|
286
236
|
return node;
|
|
287
237
|
}
|
|
288
|
-
|
|
289
238
|
function removePlaceholders(xmlDoc) {
|
|
290
239
|
// remove placeholders
|
|
291
240
|
(0, _DOM.traverse)(xmlDoc, function (node) {
|
|
292
241
|
try {
|
|
293
242
|
var data = node.dataset && node.dataset.paperData && JSON.parse(node.dataset.paperData);
|
|
294
|
-
|
|
295
243
|
if (data && data.placeholder) {
|
|
296
244
|
node.parentNode.removeChild(node);
|
|
297
245
|
}
|
|
298
|
-
} catch (e) {
|
|
246
|
+
} catch (e) {
|
|
247
|
+
// no handling needed
|
|
299
248
|
}
|
|
300
249
|
});
|
|
301
250
|
}
|
|
@@ -3,29 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
|
|
6
|
+
exports.wrapWithViewGroup = exports.prepareSvgStr = exports.fixSvgExportResult = exports.fixSvgData = void 0;
|
|
8
7
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
9
|
-
|
|
10
8
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
11
|
-
|
|
12
9
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
13
|
-
|
|
14
10
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
15
|
-
|
|
16
11
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var wrapWithViewGroup = function wrapWithViewGroup(xmlDoc) {
|
|
12
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
|
+
var wrapWithViewGroup = exports.wrapWithViewGroup = function wrapWithViewGroup(xmlDoc) {
|
|
21
14
|
var svgElement = xmlDoc.firstElementChild;
|
|
22
15
|
var firstGroup = Array.from(svgElement.children).find(function (child) {
|
|
23
16
|
return child.tagName === 'g';
|
|
24
17
|
});
|
|
25
|
-
|
|
26
18
|
if (firstGroup.id === 'designerLayer') {
|
|
27
19
|
var elements = _toConsumableArray(svgElement.children);
|
|
28
|
-
|
|
29
20
|
var viewGroup = xmlDoc.createElementNS(svgElement.namespaceURI, 'g');
|
|
30
21
|
viewGroup.id = 'viewGroup';
|
|
31
22
|
elements.forEach(function (element) {
|
|
@@ -36,35 +27,23 @@ var wrapWithViewGroup = function wrapWithViewGroup(xmlDoc) {
|
|
|
36
27
|
firstGroup.id = 'viewGroup';
|
|
37
28
|
}
|
|
38
29
|
};
|
|
39
|
-
|
|
40
|
-
exports.wrapWithViewGroup = wrapWithViewGroup;
|
|
41
|
-
|
|
42
|
-
var prepareSvgStr = function prepareSvgStr(svgStr) {
|
|
30
|
+
var prepareSvgStr = exports.prepareSvgStr = function prepareSvgStr(svgStr) {
|
|
43
31
|
return svgStr.replace(/ /g, ' ') // replace nbsp with unicode char number (Safari DOMParser issue)
|
|
44
32
|
.replace(/(<image [^>]*xlink:href=")https?:\/\/[^/]+/g, '$1') // make image paths relative
|
|
45
33
|
.replace(/\s?translate\(0,0\)\s?/, '');
|
|
46
34
|
}; // remove extra translate to origin
|
|
47
35
|
|
|
48
|
-
|
|
49
|
-
exports.prepareSvgStr = prepareSvgStr;
|
|
50
|
-
|
|
51
|
-
var fixSvgExportResult = function fixSvgExportResult(svgStr) {
|
|
36
|
+
var fixSvgExportResult = exports.fixSvgExportResult = function fixSvgExportResult(svgStr) {
|
|
52
37
|
return svgStr.replace(/path xmlns="\S*"/g, 'path').replace(/xlink:href="([^"]+)"/g, function (match, p1) {
|
|
53
38
|
return "xlink:href=\"".concat(p1.split('?')[0], "\"");
|
|
54
39
|
}).replace(/viewBox="([^"]+),([^"]+),([^"]+),([^"]+)"/g, "viewBox=\"$1 $2 $3 $4\"");
|
|
55
40
|
};
|
|
56
|
-
|
|
57
|
-
exports.fixSvgExportResult = fixSvgExportResult;
|
|
58
|
-
|
|
59
|
-
var fixSvgData = function fixSvgData(svgStr) {
|
|
41
|
+
var fixSvgData = exports.fixSvgData = function fixSvgData(svgStr) {
|
|
60
42
|
// remove metadata
|
|
61
|
-
svgStr = svgStr.replace(/<metadata>[\s\S]+<\/metadata>/, '');
|
|
62
|
-
|
|
43
|
+
svgStr = svgStr.replace(/<metadata>[\s\S]+<\/metadata>/, '');
|
|
44
|
+
// add width and height to svg element if not present
|
|
63
45
|
if (!/<svg[^>]+(width|height)=[^>]+>/.test(svgStr)) {
|
|
64
46
|
svgStr = svgStr.replace(/(<svg[^>]+viewBox="([^"]+)\s([^"]+)\s([^"]+)\s([^"]+)")/, '$1 width="$4" height="$5"');
|
|
65
47
|
}
|
|
66
|
-
|
|
67
48
|
return svgStr;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
exports.fixSvgData = fixSvgData;
|
|
49
|
+
};
|
|
@@ -4,27 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.collectStyleParams = void 0;
|
|
7
|
-
|
|
8
7
|
var _DOM = require("../../../Utils/DOM");
|
|
9
|
-
|
|
10
|
-
function ownKeys(
|
|
11
|
-
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
10
|
+
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; }
|
|
11
|
+
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; }
|
|
12
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
13
|
+
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); }
|
|
16
14
|
var getTextContentWithoutChildren = function getTextContentWithoutChildren(element) {
|
|
17
15
|
var callback = function callback(a, b) {
|
|
18
16
|
return a + (b.nodeType === Node.TEXT_NODE ? b.textContent : '');
|
|
19
17
|
};
|
|
20
|
-
|
|
21
18
|
return [].reduce.call(element.childNodes, callback, '') + '';
|
|
22
19
|
};
|
|
23
|
-
|
|
24
20
|
var hasElementTextContent = function hasElementTextContent(element) {
|
|
25
21
|
return !!getTextContentWithoutChildren(element).replace(/ /g, '').length;
|
|
26
22
|
};
|
|
27
|
-
|
|
28
23
|
var storeFontParams = function storeFontParams(params, element) {
|
|
29
24
|
var colorIdentifier = element.dataset.color;
|
|
30
25
|
var style = element.style;
|
|
@@ -33,36 +28,30 @@ var storeFontParams = function storeFontParams(params, element) {
|
|
|
33
28
|
params.fontWeight = style.fontWeight || params.fontWeight;
|
|
34
29
|
params.fontStyle = style.fontStyle || params.fontStyle;
|
|
35
30
|
params.textAlign = style.textAlign || params.textAlign;
|
|
36
|
-
|
|
37
31
|
if (colorIdentifier && hasElementTextContent(element)) {
|
|
38
32
|
params.colors.push({
|
|
39
33
|
identifier: colorIdentifier,
|
|
40
34
|
value: style.color
|
|
41
35
|
});
|
|
42
36
|
}
|
|
43
|
-
};
|
|
44
|
-
|
|
37
|
+
};
|
|
45
38
|
|
|
39
|
+
// set the initial values that are not there automatically
|
|
46
40
|
var initialParamValues = {
|
|
47
41
|
fontWeight: 'normal',
|
|
48
42
|
fontStyle: 'normal',
|
|
49
43
|
textAlign: 'left'
|
|
50
44
|
};
|
|
51
|
-
|
|
52
|
-
var collectStyleParams = function collectStyleParams(content) {
|
|
45
|
+
var collectStyleParams = exports.collectStyleParams = function collectStyleParams(content) {
|
|
53
46
|
var div = document.createElement('div');
|
|
54
47
|
div.innerHTML = content;
|
|
55
|
-
|
|
56
48
|
var params = _objectSpread({
|
|
57
49
|
colors: []
|
|
58
50
|
}, initialParamValues);
|
|
59
|
-
|
|
60
51
|
(0, _DOM.traverse)(div, function (item) {
|
|
61
52
|
if (item.nodeType === Node.ELEMENT_NODE) {
|
|
62
53
|
storeFontParams(params, item);
|
|
63
54
|
}
|
|
64
55
|
});
|
|
65
56
|
return params;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
exports.collectStyleParams = collectStyleParams;
|
|
57
|
+
};
|