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,42 +1,27 @@
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
- exports.useMask = exports.addOutlineLayer = exports.prepareMaskObjects = exports.addClipGroup = void 0;
7
-
7
+ exports.useMask = exports.prepareMaskObjects = exports.addOutlineLayer = exports.addClipGroup = void 0;
8
8
  var _paper = _interopRequireDefault(require("paper"));
9
-
10
9
  var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
11
-
12
10
  var _Logger = _interopRequireDefault(require("../../../Utils/Logger"));
13
-
14
11
  var _SVGfix = require("./SVGfix");
15
-
16
12
  var _DOM = require("../../../Utils/DOM");
17
-
18
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
-
14
+ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
20
15
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
21
-
22
16
  function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
23
-
24
17
  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; } } }; }
25
-
26
18
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
27
-
28
19
  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."); }
29
-
30
20
  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); }
31
-
32
21
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
33
-
34
22
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
35
-
36
- 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; }
37
-
23
+ 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; }
38
24
  var logger = new _Logger["default"]('UseMask');
39
-
40
25
  var loadMask = function loadMask(src) {
41
26
  return new Promise(function (resolve, reject) {
42
27
  _paper["default"].project.importSVG(src, {
@@ -45,9 +30,8 @@ var loadMask = function loadMask(src) {
45
30
  if (!group) {
46
31
  throw new Error("Error while parsing SVG data! Please check the following file: ".concat(src));
47
32
  }
48
-
49
- group.boundsOrig = group.bounds.clone(); // remove clipping rect from imported svg (paperjs svg viewBox implementation)
50
-
33
+ group.boundsOrig = group.bounds.clone();
34
+ // remove clipping rect from imported svg (paperjs svg viewBox implementation)
51
35
  if (group.isClipped()) {
52
36
  group.setClipped(false);
53
37
  group.firstChild.remove(); // the clip mask is always the first child
@@ -62,7 +46,6 @@ var loadMask = function loadMask(src) {
62
46
  });
63
47
  });
64
48
  };
65
-
66
49
  var loadMaskSource = function loadMaskSource(src) {
67
50
  return new Promise(function (resolve, reject) {
68
51
  _paper["default"].project.importSVG(src, {
@@ -74,27 +57,20 @@ var loadMaskSource = function loadMaskSource(src) {
74
57
  });
75
58
  });
76
59
  };
77
-
78
- var addClipGroup = function addClipGroup(project, maskItem) {
60
+ var addClipGroup = exports.addClipGroup = function addClipGroup(project, maskItem) {
79
61
  var clipItem = maskItem.clone();
80
62
  clipItem.name = 'clipGroup';
81
63
  project.layers.designerLayer.insertChild(0, clipItem);
82
64
  project.layers.designerLayer.clipped = true;
83
65
  };
84
-
85
- exports.addClipGroup = addClipGroup;
86
-
87
66
  var traverseItems = function traverseItems(item, cb) {
88
67
  if (false === cb(item)) {
89
68
  return;
90
69
  }
91
-
92
70
  if (item.children) {
93
71
  var children = _toConsumableArray(item.children);
94
-
95
72
  var _iterator = _createForOfIteratorHelper(children),
96
- _step;
97
-
73
+ _step;
98
74
  try {
99
75
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
100
76
  var child = _step.value;
@@ -107,8 +83,7 @@ var traverseItems = function traverseItems(item, cb) {
107
83
  }
108
84
  }
109
85
  };
110
-
111
- var prepareMaskObjects = function prepareMaskObjects(maskItem) {
86
+ var prepareMaskObjects = exports.prepareMaskObjects = function prepareMaskObjects(maskItem) {
112
87
  var paths = [];
113
88
  traverseItems(maskItem, function (item) {
114
89
  if (item instanceof _paper["default"].Path || item instanceof _paper["default"].CompoundPath) {
@@ -118,11 +93,9 @@ var prepareMaskObjects = function prepareMaskObjects(maskItem) {
118
93
  paths.push(item.toPath(false));
119
94
  }
120
95
  });
121
-
122
96
  if (!paths.length) {
123
97
  return;
124
98
  }
125
-
126
99
  var closedPaths = paths.filter(function (path) {
127
100
  return path.isClosed();
128
101
  });
@@ -130,39 +103,31 @@ var prepareMaskObjects = function prepareMaskObjects(maskItem) {
130
103
  return !path.isClosed();
131
104
  });
132
105
  var unitedClosedPaths = closedPaths[0];
133
-
134
106
  for (var i = 1; closedPaths[i]; i++) {
135
107
  unitedClosedPaths = unitedClosedPaths.unite(closedPaths[i]);
136
108
  }
137
-
138
109
  var unitedOpenedPaths = openedPaths[0];
139
-
140
110
  for (var _i = 1; openedPaths[_i]; _i++) {
141
111
  unitedOpenedPaths = unitedOpenedPaths.unite(openedPaths[_i]);
142
112
  }
143
-
144
113
  maskItem.removeChildren();
145
114
  unitedClosedPaths && maskItem.addChild(unitedClosedPaths);
146
115
  unitedOpenedPaths && maskItem.addChild(unitedOpenedPaths);
147
116
  };
148
-
149
- exports.prepareMaskObjects = prepareMaskObjects;
150
-
151
- var addOutlineLayer = function addOutlineLayer(project, maskItem, options) {
117
+ var addOutlineLayer = exports.addOutlineLayer = function addOutlineLayer(project, maskItem, options) {
152
118
  var _options$outlineColor = options.outlineColor,
153
- outlineColor = _options$outlineColor === void 0 ? 'black' : _options$outlineColor,
154
- _options$scaling = options.scaling,
155
- scaling = _options$scaling === void 0 ? 1 : _options$scaling,
156
- _options$outlineSize = options.outlineSize,
157
- outlineSize = _options$outlineSize === void 0 ? 2 : _options$outlineSize;
158
-
119
+ outlineColor = _options$outlineColor === void 0 ? 'black' : _options$outlineColor,
120
+ _options$scaling = options.scaling,
121
+ scaling = _options$scaling === void 0 ? 1 : _options$scaling,
122
+ _options$outlineSize = options.outlineSize,
123
+ outlineSize = _options$outlineSize === void 0 ? 2 : _options$outlineSize;
159
124
  var _outlineSize = outlineSize / (scaling || 1);
160
-
161
125
  var outlineItem = maskItem.clone();
162
126
  outlineItem.fillColor = 'transparent';
163
127
  outlineItem.strokeColor = outlineColor;
164
- outlineItem.strokeWidth = _outlineSize; // adds a layer for the outline
128
+ outlineItem.strokeWidth = _outlineSize;
165
129
 
130
+ // adds a layer for the outline
166
131
  var layer = new _paper["default"].Layer({
167
132
  name: 'outlineLayer',
168
133
  children: [outlineItem],
@@ -171,253 +136,192 @@ var addOutlineLayer = function addOutlineLayer(project, maskItem, options) {
171
136
  project.addLayer(layer);
172
137
  return layer;
173
138
  };
174
-
175
- exports.addOutlineLayer = addOutlineLayer;
176
-
177
139
  var loadMaskSVG = /*#__PURE__*/function () {
178
- var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(svg) {
140
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(svg) {
179
141
  var blob, url;
180
- return regeneratorRuntime.wrap(function _callee$(_context) {
181
- while (1) {
182
- switch (_context.prev = _context.next) {
183
- case 0:
184
- blob = new Blob([svg], {
185
- type: 'image/svg+xml'
186
- });
187
- url = URL.createObjectURL(blob);
188
- _context.prev = 2;
189
- _context.next = 5;
190
- return loadMask(url);
191
-
192
- case 5:
193
- return _context.abrupt("return", _context.sent);
194
-
195
- case 6:
196
- _context.prev = 6;
197
- URL.revokeObjectURL(url);
198
- return _context.finish(6);
199
-
200
- case 9:
201
- case "end":
202
- return _context.stop();
203
- }
142
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
143
+ while (1) switch (_context.prev = _context.next) {
144
+ case 0:
145
+ blob = new Blob([svg], {
146
+ type: 'image/svg+xml'
147
+ });
148
+ url = URL.createObjectURL(blob);
149
+ _context.prev = 2;
150
+ _context.next = 5;
151
+ return loadMask(url);
152
+ case 5:
153
+ return _context.abrupt("return", _context.sent);
154
+ case 6:
155
+ _context.prev = 6;
156
+ URL.revokeObjectURL(url);
157
+ return _context.finish(6);
158
+ case 9:
159
+ case "end":
160
+ return _context.stop();
204
161
  }
205
162
  }, _callee, null, [[2,, 6, 9]]);
206
163
  }));
207
-
208
164
  return function loadMaskSVG(_x) {
209
165
  return _ref.apply(this, arguments);
210
166
  };
211
167
  }();
212
-
213
- var useMask = /*#__PURE__*/function () {
214
- var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(project, initialMaskData) {
168
+ var useMask = exports.useMask = /*#__PURE__*/function () {
169
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(project, initialMaskData) {
215
170
  var scaling, _maskData, _maskDataSVG, maskHandler, currentLayer, dispose, updateOutline, init, outlineLayer, toggleOutline, fixSVGExport;
216
-
217
- return regeneratorRuntime.wrap(function _callee3$(_context3) {
218
- while (1) {
219
- switch (_context3.prev = _context3.next) {
220
- case 0:
171
+ return _regeneratorRuntime().wrap(function _callee3$(_context3) {
172
+ while (1) switch (_context3.prev = _context3.next) {
173
+ case 0:
174
+ _maskData = {};
175
+ maskHandler = {}; // the layer that holds all the user items
176
+ currentLayer = project.activeLayer;
177
+ currentLayer.name = 'designerLayer';
178
+ dispose = function dispose() {
179
+ var _project$layers = project.layers,
180
+ outlineLayer = _project$layers.outlineLayer,
181
+ designerLayer = _project$layers.designerLayer;
182
+ outlineLayer && outlineLayer.remove();
183
+ if (designerLayer && designerLayer.isClipped()) {
184
+ designerLayer.children.clipGroup.remove();
185
+ designerLayer.setClipped(false);
186
+ }
221
187
  _maskData = {};
222
- maskHandler = {}; // the layer that holds all the user items
223
-
224
- currentLayer = project.activeLayer;
225
- currentLayer.name = 'designerLayer';
226
-
227
- dispose = function dispose() {
228
- var _project$layers = project.layers,
229
- outlineLayer = _project$layers.outlineLayer,
230
- designerLayer = _project$layers.designerLayer;
231
- outlineLayer && outlineLayer.remove();
232
-
233
- if (designerLayer && designerLayer.isClipped()) {
234
- designerLayer.children.clipGroup.remove();
235
- designerLayer.setClipped(false);
236
- }
237
-
238
- _maskData = {};
239
- };
240
-
241
- updateOutline = function updateOutline() {
242
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
243
- var outlineLayer = project.layers.outlineLayer;
244
-
245
- if (!outlineLayer) {
246
- return;
188
+ };
189
+ updateOutline = function updateOutline() {
190
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
191
+ var outlineLayer = project.layers.outlineLayer;
192
+ if (!outlineLayer) {
193
+ return;
194
+ }
195
+ var _maskData2 = _maskData,
196
+ _maskData2$outlineSiz = _maskData2.outlineSize,
197
+ outlineSize = _maskData2$outlineSiz === void 0 ? 2 : _maskData2$outlineSiz;
198
+ var getZoomFactor = options.getZoomFactor;
199
+ var zoomFactor = getZoomFactor ? getZoomFactor({
200
+ zoom: currentLayer.view.zoom
201
+ }) : currentLayer.view.zoom;
202
+ var strokeWidth = outlineSize / zoomFactor;
203
+ outlineLayer.getItems({
204
+ recursive: true,
205
+ match: function match(item) {
206
+ return item.strokeWidth;
247
207
  }
248
-
249
- var _maskData2 = _maskData,
250
- _maskData2$outlineSiz = _maskData2.outlineSize,
251
- outlineSize = _maskData2$outlineSiz === void 0 ? 2 : _maskData2$outlineSiz;
252
- var getZoomFactor = options.getZoomFactor;
253
- var zoomFactor = getZoomFactor ? getZoomFactor({
254
- zoom: currentLayer.view.zoom
255
- }) : currentLayer.view.zoom;
256
- var strokeWidth = outlineSize / zoomFactor;
257
- outlineLayer.getItems({
258
- recursive: true,
259
- match: function match(item) {
260
- return item.strokeWidth;
261
- }
262
- }).forEach(function (item) {
263
- item.strokeWidth = strokeWidth;
264
- });
265
- };
266
-
267
- init = /*#__PURE__*/function () {
268
- var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
269
- var maskData,
270
- _project$layers2,
271
- designerLayer,
272
- outlineLayer,
273
- src,
274
- _maskData$outlineColo,
275
- outlineColor,
276
- _maskData$x,
277
- x,
278
- _maskData$y,
279
- y,
280
- _maskData$rotation,
281
- rotation,
282
- mask,
283
- _maskData$relativeSca,
284
- relativeScaling,
285
- position,
286
- _args2 = arguments;
287
-
288
- return regeneratorRuntime.wrap(function _callee2$(_context2) {
289
- while (1) {
290
- switch (_context2.prev = _context2.next) {
291
- case 0:
292
- maskData = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
293
- _project$layers2 = project.layers, designerLayer = _project$layers2.designerLayer, outlineLayer = _project$layers2.outlineLayer;
294
-
295
- if (!(0, _isEqual["default"])(maskData, _maskData)) {
296
- _context2.next = 5;
297
- break;
298
- }
299
-
300
- if (!(designerLayer.isClipped() && outlineLayer)) {
301
- _context2.next = 5;
302
- break;
303
- }
304
-
305
- return _context2.abrupt("return");
306
-
307
- case 5:
308
- src = maskData.src, _maskData$outlineColo = maskData.outlineColor, outlineColor = _maskData$outlineColo === void 0 ? 'black' : _maskData$outlineColo, _maskData$x = maskData.x, x = _maskData$x === void 0 ? 0.5 : _maskData$x, _maskData$y = maskData.y, y = _maskData$y === void 0 ? 0.5 : _maskData$y, _maskData$rotation = maskData.rotation, rotation = _maskData$rotation === void 0 ? 0 : _maskData$rotation;
309
- _context2.next = 8;
310
- return loadMaskSource(src);
311
-
312
- case 8:
313
- _maskDataSVG = _context2.sent;
314
- _context2.next = 11;
315
- return loadMaskSVG(_maskDataSVG);
316
-
317
- case 11:
318
- mask = _context2.sent;
319
- _maskData$relativeSca = maskData.relativeScaling, relativeScaling = _maskData$relativeSca === void 0 ? false : _maskData$relativeSca;
320
- scaling = relativeScaling ? relativeScaling / (mask.boundsOrig.width / currentLayer.view.size.width) : maskData.scaling || 1;
321
- position = currentLayer.view.size.multiply(new _paper["default"].Point(x, y));
322
- dispose();
323
- _maskData = maskData;
324
- prepareMaskObjects(mask);
325
- mask.position = mask.position.add(position).subtract(mask.boundsOrig.center);
326
- mask.rotation = rotation / Math.PI * 180;
327
- mask.scale(scaling);
328
- mask.locked = true;
329
- addClipGroup(project, mask);
330
- addOutlineLayer(project, mask, {
331
- scaling: scaling,
332
- outlineColor: outlineColor
333
- });
334
- updateOutline(); // after all layers added, the first layer should be activated again
335
-
336
- currentLayer.activate();
337
-
338
- case 26:
339
- case "end":
340
- return _context2.stop();
341
- }
208
+ }).forEach(function (item) {
209
+ item.strokeWidth = strokeWidth;
210
+ });
211
+ };
212
+ init = /*#__PURE__*/function () {
213
+ var _ref3 = _asyncToGenerator(function () {
214
+ var maskData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
215
+ return /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
216
+ var _project$layers2, designerLayer, outlineLayer, src, _maskData$outlineColo, outlineColor, _maskData$x, x, _maskData$y, y, _maskData$rotation, rotation, mask, _maskData$relativeSca, relativeScaling, position;
217
+ return _regeneratorRuntime().wrap(function _callee2$(_context2) {
218
+ while (1) switch (_context2.prev = _context2.next) {
219
+ case 0:
220
+ _project$layers2 = project.layers, designerLayer = _project$layers2.designerLayer, outlineLayer = _project$layers2.outlineLayer;
221
+ if (!(0, _isEqual["default"])(maskData, _maskData)) {
222
+ _context2.next = 4;
223
+ break;
224
+ }
225
+ if (!(designerLayer.isClipped() && outlineLayer)) {
226
+ _context2.next = 4;
227
+ break;
228
+ }
229
+ return _context2.abrupt("return");
230
+ case 4:
231
+ src = maskData.src, _maskData$outlineColo = maskData.outlineColor, outlineColor = _maskData$outlineColo === void 0 ? 'black' : _maskData$outlineColo, _maskData$x = maskData.x, x = _maskData$x === void 0 ? 0.5 : _maskData$x, _maskData$y = maskData.y, y = _maskData$y === void 0 ? 0.5 : _maskData$y, _maskData$rotation = maskData.rotation, rotation = _maskData$rotation === void 0 ? 0 : _maskData$rotation;
232
+ _context2.next = 7;
233
+ return loadMaskSource(src);
234
+ case 7:
235
+ _maskDataSVG = _context2.sent;
236
+ _context2.next = 10;
237
+ return loadMaskSVG(_maskDataSVG);
238
+ case 10:
239
+ mask = _context2.sent;
240
+ _maskData$relativeSca = maskData.relativeScaling, relativeScaling = _maskData$relativeSca === void 0 ? false : _maskData$relativeSca;
241
+ scaling = relativeScaling ? relativeScaling / (mask.boundsOrig.width / currentLayer.view.size.width) : maskData.scaling || 1;
242
+ position = currentLayer.view.size.multiply(new _paper["default"].Point(x, y));
243
+ dispose();
244
+ _maskData = maskData;
245
+ prepareMaskObjects(mask);
246
+ mask.position = mask.position.add(position).subtract(mask.boundsOrig.center);
247
+ mask.rotation = rotation / Math.PI * 180;
248
+ mask.scale(scaling);
249
+ mask.locked = true;
250
+ addClipGroup(project, mask);
251
+ addOutlineLayer(project, mask, {
252
+ scaling: scaling,
253
+ outlineColor: outlineColor
254
+ });
255
+ updateOutline();
256
+
257
+ // after all layers added, the first layer should be activated again
258
+ currentLayer.activate();
259
+ case 25:
260
+ case "end":
261
+ return _context2.stop();
342
262
  }
343
263
  }, _callee2);
344
- }));
345
-
346
- return function init() {
347
- return _ref3.apply(this, arguments);
348
- };
349
- }();
350
-
351
- toggleOutline = function toggleOutline(visible) {
352
- var updateOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
353
- outlineLayer = project.layers.outlineLayer || outlineLayer;
354
-
355
- if (outlineLayer) {
356
- var originalValue = outlineLayer.visible;
357
-
358
- if (!visible) {
359
- // remove in case of not visible in order to exclude from svg export
360
- outlineLayer.remove();
361
- } else if (!outlineLayer.visible) {
362
- // add it again if it is not visible
363
- project.addLayer(outlineLayer);
364
- }
365
-
366
- outlineLayer.visible = visible;
367
- updateOptions && updateOutline(updateOptions);
368
- project.view.update(); // return the restore function
369
-
370
- return function () {
371
- return maskHandler.toggleOutline(originalValue, updateOptions);
372
- };
373
- }
374
-
375
- return function () {};
264
+ })();
265
+ });
266
+ return function init() {
267
+ return _ref3.apply(this, arguments);
376
268
  };
377
-
378
- fixSVGExport = function fixSVGExport(svgDocOrStr) {
379
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
380
- var xmlDoc = typeof svgDocOrStr === 'string' ? new DOMParser().parseFromString(svgDocOrStr, 'text/xml') : svgDocOrStr;
381
- var clipGroup = xmlDoc.getElementById('clipGroup');
382
- clipGroup && (0, _DOM.unwrap)(clipGroup); // remove <g> element from clip path
383
-
384
- var _options$asString = options.asString,
385
- asString = _options$asString === void 0 ? false : _options$asString;
386
- return asString ? new XMLSerializer().serializeToString(xmlDoc) : xmlDoc;
387
- }; // initialize automatically
388
-
389
-
390
- dispose(); // remove the current mask in every case
391
-
392
- if (!initialMaskData) {
393
- _context3.next = 13;
394
- break;
269
+ }();
270
+ toggleOutline = function toggleOutline(visible) {
271
+ var updateOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
272
+ outlineLayer = project.layers.outlineLayer || outlineLayer;
273
+ if (outlineLayer) {
274
+ var originalValue = outlineLayer.visible;
275
+ if (!visible) {
276
+ // remove in case of not visible in order to exclude from svg export
277
+ outlineLayer.remove();
278
+ } else if (!outlineLayer.visible) {
279
+ // add it again if it is not visible
280
+ project.addLayer(outlineLayer);
281
+ }
282
+ outlineLayer.visible = visible;
283
+ updateOptions && updateOutline(updateOptions);
284
+ project.view.update();
285
+ // return the restore function
286
+ return function () {
287
+ return maskHandler.toggleOutline(originalValue, updateOptions);
288
+ };
395
289
  }
396
-
290
+ return function () {};
291
+ };
292
+ fixSVGExport = function fixSVGExport(svgDocOrStr) {
293
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
294
+ var xmlDoc = typeof svgDocOrStr === 'string' ? new DOMParser().parseFromString(svgDocOrStr, 'text/xml') : svgDocOrStr;
295
+ var clipGroup = xmlDoc.getElementById('clipGroup');
296
+ clipGroup && (0, _DOM.unwrap)(clipGroup); // remove <g> element from clip path
297
+
298
+ var _options$asString = options.asString,
299
+ asString = _options$asString === void 0 ? false : _options$asString;
300
+ return asString ? new XMLSerializer().serializeToString(xmlDoc) : xmlDoc;
301
+ }; // initialize automatically
302
+ dispose(); // remove the current mask in every case
303
+ if (!initialMaskData) {
397
304
  _context3.next = 13;
398
- return init(initialMaskData);
399
-
400
- case 13:
401
- Object.assign(maskHandler, {
402
- init: init,
403
- toggleOutline: toggleOutline,
404
- updateOutline: updateOutline,
405
- fixSVGExport: fixSVGExport,
406
- dispose: dispose
407
- });
408
- return _context3.abrupt("return", maskHandler);
409
-
410
- case 15:
411
- case "end":
412
- return _context3.stop();
413
- }
305
+ break;
306
+ }
307
+ _context3.next = 13;
308
+ return init(initialMaskData);
309
+ case 13:
310
+ Object.assign(maskHandler, {
311
+ init: init,
312
+ toggleOutline: toggleOutline,
313
+ updateOutline: updateOutline,
314
+ fixSVGExport: fixSVGExport,
315
+ dispose: dispose
316
+ });
317
+ return _context3.abrupt("return", maskHandler);
318
+ case 15:
319
+ case "end":
320
+ return _context3.stop();
414
321
  }
415
322
  }, _callee3);
416
323
  }));
417
-
418
324
  return function useMask(_x2, _x3) {
419
325
  return _ref2.apply(this, arguments);
420
326
  };
421
- }();
422
-
423
- exports.useMask = useMask;
327
+ }();
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _SVGfix = require("../SVGfix");
4
-
5
4
  describe('CanvasAdapters/PaperJs/Utils/SVGfix', function () {
6
5
  test('prepareSvgStr replaces nbsps with its unicode number', function () {
7
6
  var svgStrWithNbsp = '<svg><text>hello&nbsp;world</text></svg>';
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _TextToSVGUtils = require("../TextToSVGUtils");
4
-
5
4
  describe('CanvasAdapters/PaperJs/Utils/TextToSVGUtils', function () {
6
5
  test('convertFontWeightToType returns the correct type', function () {
7
6
  expect((0, _TextToSVGUtils.convertFontWeightToType)('bold')).toEqual('bold');
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _updateFontStyle = require("../updateFontStyle");
4
-
5
4
  describe('CanvasAdapters/PaperJs/Utils/updateFontStyle', function () {
6
5
  it('updateFontStyle should update the font family and remove the styles that are not available', function () {
7
6
  var content = '<div style="font-family: Roboto; font-style: italic"><span style="font-family: Courier; font-weight: bold;">text</span></div>';