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,182 +1,120 @@
|
|
|
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.Canvas = void 0;
|
|
9
|
-
|
|
10
7
|
var _paper = _interopRequireDefault(require("paper"));
|
|
11
|
-
|
|
12
8
|
var _Canvas = require("../../CanvasInterface/Canvas");
|
|
13
|
-
|
|
14
9
|
var _Group = require("./Objects/Group");
|
|
15
|
-
|
|
16
10
|
var _Image = require("./Objects/Image");
|
|
17
|
-
|
|
18
11
|
var _Text = require("./Objects/Text");
|
|
19
|
-
|
|
20
12
|
var _Logger = _interopRequireDefault(require("../../Utils/Logger"));
|
|
21
|
-
|
|
22
13
|
var _UseMask = require("./Utils/UseMask");
|
|
23
|
-
|
|
24
14
|
var _TextToSVGRepository = require("./Utils/TextToSVGRepository");
|
|
25
|
-
|
|
26
15
|
var _HTML2Paper = require("./Utils/HTML2Paper");
|
|
27
|
-
|
|
28
16
|
var _SVGfix = require("./Utils/SVGfix");
|
|
29
|
-
|
|
17
|
+
var _UseColorLayer = require("./Utils/UseColorLayer");
|
|
30
18
|
var _excluded = ["type"];
|
|
31
|
-
|
|
32
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
33
|
-
|
|
20
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
34
21
|
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; } } }; }
|
|
35
|
-
|
|
36
22
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
37
|
-
|
|
38
23
|
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."); }
|
|
39
|
-
|
|
40
24
|
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); }
|
|
41
|
-
|
|
42
25
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
43
|
-
|
|
44
26
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
45
|
-
|
|
46
|
-
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; }
|
|
47
|
-
|
|
27
|
+
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; }
|
|
48
28
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
49
|
-
|
|
50
29
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
51
|
-
|
|
30
|
+
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; }
|
|
52
31
|
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); } }
|
|
53
|
-
|
|
54
32
|
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); }); }; }
|
|
55
|
-
|
|
56
33
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
57
|
-
|
|
58
|
-
function
|
|
59
|
-
|
|
60
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
61
|
-
|
|
62
|
-
function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
|
|
63
|
-
|
|
34
|
+
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); } }
|
|
35
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
36
|
+
function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
|
|
64
37
|
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
|
|
65
|
-
|
|
66
|
-
function
|
|
67
|
-
|
|
68
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
69
|
-
|
|
38
|
+
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); }
|
|
39
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
70
40
|
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); }; }
|
|
71
|
-
|
|
72
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
73
|
-
|
|
41
|
+
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); }
|
|
74
42
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
75
|
-
|
|
76
43
|
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; } }
|
|
77
|
-
|
|
78
|
-
function
|
|
79
|
-
|
|
80
|
-
function
|
|
81
|
-
|
|
44
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
45
|
+
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; }
|
|
46
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
47
|
+
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); }
|
|
82
48
|
var logger = new _Logger["default"]('Canvas');
|
|
83
|
-
|
|
84
|
-
var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
49
|
+
var Canvas = exports.Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
85
50
|
_inherits(Canvas, _AbstractCanvas);
|
|
86
|
-
|
|
87
51
|
var _super = _createSuper(Canvas);
|
|
88
|
-
|
|
89
52
|
function Canvas() {
|
|
90
53
|
var _this;
|
|
91
|
-
|
|
92
54
|
_classCallCheck(this, Canvas);
|
|
93
|
-
|
|
94
55
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
95
56
|
args[_key] = arguments[_key];
|
|
96
57
|
}
|
|
97
|
-
|
|
98
58
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
99
|
-
|
|
100
59
|
_defineProperty(_assertThisInitialized(_this), "_project", void 0);
|
|
101
|
-
|
|
102
60
|
_defineProperty(_assertThisInitialized(_this), "_view", void 0);
|
|
103
|
-
|
|
61
|
+
// prevents dragging out the object (by default lets dragging only up to the 2/3 of the object width)
|
|
104
62
|
_defineProperty(_assertThisInitialized(_this), "_boundTolerance", 1 / 2 - 2 / 3);
|
|
105
|
-
|
|
106
63
|
_defineProperty(_assertThisInitialized(_this), "_maskHandler", undefined);
|
|
107
|
-
|
|
64
|
+
_defineProperty(_assertThisInitialized(_this), "_colorOverlay", undefined);
|
|
108
65
|
_defineProperty(_assertThisInitialized(_this), "getScreenshot", function () {
|
|
109
66
|
// speed up repeated screenshot creation by memoizing the svg output of Paper.js
|
|
110
67
|
var memoizedSvgStr;
|
|
111
68
|
var result;
|
|
112
69
|
return /*#__PURE__*/function () {
|
|
113
|
-
var _ref = _asyncToGenerator(
|
|
114
|
-
var options
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
xmlStr,
|
|
120
|
-
_args = arguments;
|
|
121
|
-
|
|
122
|
-
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
123
|
-
while (1) {
|
|
124
|
-
switch (_context.prev = _context.next) {
|
|
70
|
+
var _ref = _asyncToGenerator(function (fontToFileMap) {
|
|
71
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
72
|
+
return /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
73
|
+
var _options$memoize, memoize, svgStr, xmlDoc, xmlStr;
|
|
74
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
75
|
+
while (1) switch (_context.prev = _context.next) {
|
|
125
76
|
case 0:
|
|
126
|
-
options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
|
|
127
77
|
_options$memoize = options.memoize, memoize = _options$memoize === void 0 ? true : _options$memoize;
|
|
128
78
|
svgStr = (0, _SVGfix.prepareSvgStr)(_this._project.exportSVG({
|
|
129
79
|
asString: true,
|
|
130
80
|
embedImages: false
|
|
131
81
|
}));
|
|
132
|
-
|
|
133
82
|
if (!(memoize && memoizedSvgStr === svgStr && result)) {
|
|
134
|
-
_context.next =
|
|
83
|
+
_context.next = 4;
|
|
135
84
|
break;
|
|
136
85
|
}
|
|
137
|
-
|
|
138
86
|
return _context.abrupt("return", result);
|
|
139
|
-
|
|
140
|
-
case 5:
|
|
87
|
+
case 4:
|
|
141
88
|
result = '';
|
|
142
89
|
xmlDoc = new DOMParser().parseFromString(svgStr, 'text/xml');
|
|
143
90
|
(0, _HTML2Paper.removePlaceholders)(xmlDoc);
|
|
144
|
-
_context.next =
|
|
91
|
+
_context.next = 9;
|
|
145
92
|
return (0, _TextToSVGRepository.transformTextToPath)(xmlDoc, fontToFileMap);
|
|
146
|
-
|
|
147
|
-
case 10:
|
|
93
|
+
case 9:
|
|
148
94
|
(0, _SVGfix.wrapWithViewGroup)(xmlDoc);
|
|
149
|
-
|
|
150
95
|
if (_this._maskHandler) {
|
|
151
96
|
_this._maskHandler.fixSVGExport(xmlDoc);
|
|
152
97
|
}
|
|
153
|
-
|
|
154
98
|
xmlStr = new XMLSerializer().serializeToString(xmlDoc);
|
|
155
99
|
result = (0, _SVGfix.fixSvgExportResult)(xmlStr);
|
|
156
|
-
|
|
157
100
|
if (memoize) {
|
|
158
101
|
memoizedSvgStr = svgStr;
|
|
159
102
|
}
|
|
160
|
-
|
|
161
103
|
return _context.abrupt("return", result);
|
|
162
|
-
|
|
163
|
-
case 16:
|
|
104
|
+
case 15:
|
|
164
105
|
case "end":
|
|
165
106
|
return _context.stop();
|
|
166
107
|
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
})
|
|
170
|
-
|
|
108
|
+
}, _callee);
|
|
109
|
+
})();
|
|
110
|
+
});
|
|
171
111
|
return function (_x) {
|
|
172
112
|
return _ref.apply(this, arguments);
|
|
173
113
|
};
|
|
174
114
|
}();
|
|
175
115
|
}());
|
|
176
|
-
|
|
177
116
|
return _this;
|
|
178
117
|
}
|
|
179
|
-
|
|
180
118
|
_createClass(Canvas, [{
|
|
181
119
|
key: "setBoundTolerance",
|
|
182
120
|
value: function setBoundTolerance(value) {
|
|
@@ -191,7 +129,6 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
191
129
|
this._view = this._project.view;
|
|
192
130
|
this._project.activeLayer.name = 'designerLayer';
|
|
193
131
|
this.initControls();
|
|
194
|
-
|
|
195
132
|
_get(_getPrototypeOf(Canvas.prototype), "init", this).call(this, this._view.element, options);
|
|
196
133
|
}
|
|
197
134
|
}, {
|
|
@@ -200,7 +137,6 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
200
137
|
this._view.onMouseDown = this.onMouseDown.bind(this);
|
|
201
138
|
this._view.onMouseDrag = this.onMouseDrag.bind(this);
|
|
202
139
|
this._view.onMouseUp = this.onMouseUp.bind(this);
|
|
203
|
-
|
|
204
140
|
this._view.on('keydown', this.onKeyDown.bind(this));
|
|
205
141
|
}
|
|
206
142
|
}, {
|
|
@@ -212,14 +148,12 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
212
148
|
key: "update",
|
|
213
149
|
value: function update() {
|
|
214
150
|
// for some older browsers the canvas has to be added to the dom to draw the fonts correctly
|
|
215
|
-
var forceUpdate = this.addToContainer();
|
|
151
|
+
var forceUpdate = this.addToContainer();
|
|
152
|
+
// important: at the time of this code was created, there was no way to force the update (redrawing of canvas items)
|
|
216
153
|
// as a workaround the view._needsUpdate flag can be set to true
|
|
217
154
|
// see https://github.com/paperjs/paper.js/commit/8174405924fde12488b73dbf58a70ceef4f57665 for updates
|
|
218
|
-
|
|
219
155
|
this._view._needsUpdate = this._view._needsUpdate || forceUpdate;
|
|
220
|
-
|
|
221
156
|
this._view.update();
|
|
222
|
-
|
|
223
157
|
forceUpdate && this.removeFromContainer();
|
|
224
158
|
return this;
|
|
225
159
|
}
|
|
@@ -227,22 +161,16 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
227
161
|
key: "dispose",
|
|
228
162
|
value: function dispose() {
|
|
229
163
|
this._view.remove();
|
|
230
|
-
|
|
231
164
|
this._view = null;
|
|
232
|
-
|
|
233
165
|
this._project.remove();
|
|
234
|
-
|
|
235
166
|
this._project = null;
|
|
236
|
-
|
|
237
167
|
_get(_getPrototypeOf(Canvas.prototype), "dispose", this).call(this);
|
|
238
168
|
}
|
|
239
169
|
}, {
|
|
240
170
|
key: "setSize",
|
|
241
171
|
value: function setSize() {
|
|
242
172
|
var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getSize();
|
|
243
|
-
|
|
244
173
|
_get(_getPrototypeOf(Canvas.prototype), "setSize", this).call(this, size);
|
|
245
|
-
|
|
246
174
|
this.updateViewSize();
|
|
247
175
|
return this;
|
|
248
176
|
}
|
|
@@ -250,7 +178,6 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
250
178
|
key: "setZoom",
|
|
251
179
|
value: function setZoom(zoom) {
|
|
252
180
|
_get(_getPrototypeOf(Canvas.prototype), "setZoom", this).call(this, zoom);
|
|
253
|
-
|
|
254
181
|
this.updateViewSize();
|
|
255
182
|
return this;
|
|
256
183
|
}
|
|
@@ -258,9 +185,9 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
258
185
|
key: "updateViewSize",
|
|
259
186
|
value: function updateViewSize() {
|
|
260
187
|
var zoom = this.zoom,
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
188
|
+
_this$size = this.size,
|
|
189
|
+
width = _this$size.width,
|
|
190
|
+
height = _this$size.height;
|
|
264
191
|
var w = width * zoom;
|
|
265
192
|
var h = height * zoom;
|
|
266
193
|
var size = new _paper["default"].Size(w, h);
|
|
@@ -274,11 +201,10 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
274
201
|
key: "saveViewBox",
|
|
275
202
|
value: function saveViewBox() {
|
|
276
203
|
var _this2 = this;
|
|
277
|
-
|
|
278
204
|
var _this$_view = this._view,
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
205
|
+
viewSize = _this$_view.viewSize,
|
|
206
|
+
center = _this$_view.center,
|
|
207
|
+
zoom = _this$_view.zoom;
|
|
282
208
|
return function () {
|
|
283
209
|
_this2._view.viewSize = viewSize;
|
|
284
210
|
_this2._view.center = center;
|
|
@@ -289,10 +215,10 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
289
215
|
key: "setViewBox",
|
|
290
216
|
value: function setViewBox(_ref2) {
|
|
291
217
|
var width = _ref2.width,
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
218
|
+
height = _ref2.height,
|
|
219
|
+
x = _ref2.x,
|
|
220
|
+
y = _ref2.y,
|
|
221
|
+
zoom = _ref2.zoom;
|
|
296
222
|
this._view.viewSize = new _paper["default"].Size(width, height);
|
|
297
223
|
this._view.center = new _paper["default"].Point((x + width / 2) / zoom, (y + height / 2) / zoom);
|
|
298
224
|
this._view.zoom = zoom;
|
|
@@ -301,89 +227,99 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
301
227
|
}, {
|
|
302
228
|
key: "drawToContext",
|
|
303
229
|
value: function () {
|
|
304
|
-
var _drawToContext = _asyncToGenerator(
|
|
230
|
+
var _drawToContext = _asyncToGenerator(function (ctx, dx, dy, dWidth, dHeight) {
|
|
305
231
|
var _this3 = this;
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
dstSize,
|
|
312
|
-
srcSize,
|
|
313
|
-
zoom,
|
|
314
|
-
framesX,
|
|
315
|
-
framesY,
|
|
316
|
-
tiles,
|
|
317
|
-
_loop,
|
|
318
|
-
fx,
|
|
319
|
-
_args2 = arguments;
|
|
320
|
-
|
|
321
|
-
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
322
|
-
while (1) {
|
|
323
|
-
switch (_context2.prev = _context2.next) {
|
|
232
|
+
var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
|
|
233
|
+
return /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
234
|
+
var TILE_SIZE, currentZoom, restoreViewBox, dstSize, srcSize, zoom, framesX, framesY, tiles, _loop, fx;
|
|
235
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context4) {
|
|
236
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
324
237
|
case 0:
|
|
325
|
-
options = _args2.length > 5 && _args2[5] !== undefined ? _args2[5] : {};
|
|
326
238
|
TILE_SIZE = 512; // safe for ios
|
|
327
|
-
|
|
328
239
|
currentZoom = Math.min(Math.max(options.currentZoom || 1, 0.0001), 1);
|
|
329
|
-
restoreViewBox =
|
|
240
|
+
restoreViewBox = _this3.saveViewBox();
|
|
330
241
|
dstSize = TILE_SIZE;
|
|
331
242
|
srcSize = Math.round(TILE_SIZE * currentZoom);
|
|
332
|
-
zoom = dWidth /
|
|
243
|
+
zoom = dWidth / _this3.getSize().width * currentZoom;
|
|
333
244
|
framesX = Math.floor(dWidth / dstSize) + 1;
|
|
334
245
|
framesY = Math.floor(dHeight / dstSize) + 1;
|
|
335
246
|
tiles = [];
|
|
336
|
-
|
|
247
|
+
_this3._maskHandler && _this3._maskHandler.updateOutline({
|
|
337
248
|
getZoomFactor: function getZoomFactor() {
|
|
338
249
|
return zoom;
|
|
339
250
|
}
|
|
340
251
|
});
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
252
|
+
_loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop(fx) {
|
|
253
|
+
var _loop2, fy;
|
|
254
|
+
return _regeneratorRuntime().wrap(function _loop$(_context3) {
|
|
255
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
256
|
+
case 0:
|
|
257
|
+
_loop2 = /*#__PURE__*/_regeneratorRuntime().mark(function _loop2(fy) {
|
|
258
|
+
return _regeneratorRuntime().wrap(function _loop2$(_context2) {
|
|
259
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
260
|
+
case 0:
|
|
261
|
+
tiles.push(new Promise(function (resolve) {
|
|
262
|
+
window.requestAnimationFrame(function () {
|
|
263
|
+
_this3.setViewBox({
|
|
264
|
+
width: srcSize,
|
|
265
|
+
height: srcSize,
|
|
266
|
+
x: srcSize * fx,
|
|
267
|
+
y: srcSize * fy,
|
|
268
|
+
zoom: zoom
|
|
269
|
+
});
|
|
270
|
+
ctx.drawImage(_this3.canvasElement, dx + dstSize * fx, dy + dstSize * fy, dstSize, dstSize);
|
|
271
|
+
resolve();
|
|
272
|
+
});
|
|
273
|
+
}));
|
|
274
|
+
case 1:
|
|
275
|
+
case "end":
|
|
276
|
+
return _context2.stop();
|
|
277
|
+
}
|
|
278
|
+
}, _loop2);
|
|
352
279
|
});
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
280
|
+
fy = 0;
|
|
281
|
+
case 2:
|
|
282
|
+
if (!(fy < framesY)) {
|
|
283
|
+
_context3.next = 7;
|
|
284
|
+
break;
|
|
285
|
+
}
|
|
286
|
+
return _context3.delegateYield(_loop2(fy), "t0", 4);
|
|
287
|
+
case 4:
|
|
288
|
+
fy++;
|
|
289
|
+
_context3.next = 2;
|
|
290
|
+
break;
|
|
291
|
+
case 7:
|
|
292
|
+
case "end":
|
|
293
|
+
return _context3.stop();
|
|
294
|
+
}
|
|
295
|
+
}, _loop);
|
|
296
|
+
});
|
|
297
|
+
fx = 0;
|
|
298
|
+
case 12:
|
|
299
|
+
if (!(fx < framesX)) {
|
|
300
|
+
_context4.next = 17;
|
|
301
|
+
break;
|
|
367
302
|
}
|
|
368
|
-
|
|
369
|
-
|
|
303
|
+
return _context4.delegateYield(_loop(fx), "t0", 14);
|
|
304
|
+
case 14:
|
|
305
|
+
fx++;
|
|
306
|
+
_context4.next = 12;
|
|
307
|
+
break;
|
|
308
|
+
case 17:
|
|
309
|
+
_context4.next = 19;
|
|
370
310
|
return Promise.all(tiles);
|
|
371
|
-
|
|
372
|
-
case 15:
|
|
311
|
+
case 19:
|
|
373
312
|
restoreViewBox();
|
|
374
|
-
|
|
375
|
-
case 16:
|
|
313
|
+
case 20:
|
|
376
314
|
case "end":
|
|
377
|
-
return
|
|
315
|
+
return _context4.stop();
|
|
378
316
|
}
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
})
|
|
382
|
-
|
|
317
|
+
}, _callee2);
|
|
318
|
+
})();
|
|
319
|
+
});
|
|
383
320
|
function drawToContext(_x2, _x3, _x4, _x5, _x6) {
|
|
384
321
|
return _drawToContext.apply(this, arguments);
|
|
385
322
|
}
|
|
386
|
-
|
|
387
323
|
return drawToContext;
|
|
388
324
|
}()
|
|
389
325
|
}, {
|
|
@@ -395,33 +331,27 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
395
331
|
}, {
|
|
396
332
|
key: "useMask",
|
|
397
333
|
value: function () {
|
|
398
|
-
var _useMask2 = _asyncToGenerator( /*#__PURE__*/
|
|
399
|
-
return
|
|
400
|
-
while (1) {
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
case 7:
|
|
414
|
-
case "end":
|
|
415
|
-
return _context3.stop();
|
|
416
|
-
}
|
|
334
|
+
var _useMask2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(maskData) {
|
|
335
|
+
return _regeneratorRuntime().wrap(function _callee3$(_context5) {
|
|
336
|
+
while (1) switch (_context5.prev = _context5.next) {
|
|
337
|
+
case 0:
|
|
338
|
+
_context5.t0 = Object;
|
|
339
|
+
_context5.t1 = this._maskHandler || {};
|
|
340
|
+
_context5.next = 4;
|
|
341
|
+
return (0, _UseMask.useMask)(this._project, maskData);
|
|
342
|
+
case 4:
|
|
343
|
+
_context5.t2 = _context5.sent;
|
|
344
|
+
this._maskHandler = _context5.t0.assign.call(_context5.t0, _context5.t1, _context5.t2);
|
|
345
|
+
return _context5.abrupt("return", this._maskHandler);
|
|
346
|
+
case 7:
|
|
347
|
+
case "end":
|
|
348
|
+
return _context5.stop();
|
|
417
349
|
}
|
|
418
350
|
}, _callee3, this);
|
|
419
351
|
}));
|
|
420
|
-
|
|
421
352
|
function useMask(_x7) {
|
|
422
353
|
return _useMask2.apply(this, arguments);
|
|
423
354
|
}
|
|
424
|
-
|
|
425
355
|
return useMask;
|
|
426
356
|
}()
|
|
427
357
|
}, {
|
|
@@ -429,21 +359,28 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
429
359
|
value: function getMaskHandler() {
|
|
430
360
|
return this._maskHandler;
|
|
431
361
|
}
|
|
362
|
+
}, {
|
|
363
|
+
key: "useColorOverlay",
|
|
364
|
+
value: function useColorOverlay(colorLayerData) {
|
|
365
|
+
this._colorOverlay = (0, _UseColorLayer.useColorLayer)(this._project, colorLayerData);
|
|
366
|
+
return this._colorOverlay;
|
|
367
|
+
}
|
|
368
|
+
}, {
|
|
369
|
+
key: "getColorOverlay",
|
|
370
|
+
value: function getColorOverlay() {
|
|
371
|
+
return this._colorOverlay;
|
|
372
|
+
}
|
|
432
373
|
}, {
|
|
433
374
|
key: "onMouseDown",
|
|
434
375
|
value: function onMouseDown(event) {
|
|
435
376
|
var point = event.point;
|
|
436
|
-
|
|
437
377
|
var hitResult = this._project.hitTest(point);
|
|
438
|
-
|
|
439
378
|
if (hitResult) {
|
|
440
379
|
var item = hitResult.item;
|
|
441
380
|
var wo = this.getWrapperObject(this.getTopParent(item));
|
|
442
|
-
|
|
443
381
|
if (this.selectedObject && wo !== this.selectedObject) {
|
|
444
382
|
this.clearSelection();
|
|
445
383
|
}
|
|
446
|
-
|
|
447
384
|
if (wo) {
|
|
448
385
|
wo.selected = true;
|
|
449
386
|
wo.grabbed = true;
|
|
@@ -457,8 +394,8 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
457
394
|
value: function onMouseDrag(event) {
|
|
458
395
|
if (this.selectedObject && !this.selectedObject.locked && !this.selectedObject.autoFit) {
|
|
459
396
|
var _event$delta = event.delta,
|
|
460
|
-
|
|
461
|
-
|
|
397
|
+
dx = _event$delta.x,
|
|
398
|
+
dy = _event$delta.y;
|
|
462
399
|
var o = this.selectedObject;
|
|
463
400
|
o.x += dx;
|
|
464
401
|
o.y += dy;
|
|
@@ -469,24 +406,20 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
469
406
|
key: "fitBounds",
|
|
470
407
|
value: function fitBounds(o) {
|
|
471
408
|
var _this$size2 = this.size,
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
409
|
+
cw = _this$size2.width,
|
|
410
|
+
ch = _this$size2.height;
|
|
475
411
|
var _o$getScaledSize = o.getScaledSize(),
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
412
|
+
ow = _o$getScaledSize.width,
|
|
413
|
+
oh = _o$getScaledSize.height;
|
|
479
414
|
var leftMin = ow * this._boundTolerance;
|
|
480
415
|
var leftMax = cw - leftMin;
|
|
481
416
|
var topMin = oh * this._boundTolerance;
|
|
482
417
|
var topMax = ch - topMin;
|
|
483
|
-
|
|
484
418
|
if (o.x < leftMin) {
|
|
485
419
|
o.x = leftMin;
|
|
486
420
|
} else if (o.x > leftMax) {
|
|
487
421
|
o.x = leftMax;
|
|
488
422
|
}
|
|
489
|
-
|
|
490
423
|
if (o.y < topMin) {
|
|
491
424
|
o.y = topMin;
|
|
492
425
|
} else if (o.y > topMax) {
|
|
@@ -505,21 +438,17 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
505
438
|
value: function onKeyDown(event) {
|
|
506
439
|
if (['INPUT', 'SELECT'].indexOf(event.event.target.nodeName) === -1 && this.selectedObject) {
|
|
507
440
|
var o = this.selectedObject;
|
|
508
|
-
|
|
509
441
|
if (event.event.ctrlKey) {
|
|
510
442
|
switch (event.key) {
|
|
511
443
|
case 'up':
|
|
512
444
|
o.scaling += 0.1;
|
|
513
445
|
break;
|
|
514
|
-
|
|
515
446
|
case 'right':
|
|
516
447
|
o.rotation += 1;
|
|
517
448
|
break;
|
|
518
|
-
|
|
519
449
|
case 'down':
|
|
520
450
|
o.scaling -= 0.1;
|
|
521
451
|
break;
|
|
522
|
-
|
|
523
452
|
case 'left':
|
|
524
453
|
o.rotation -= 1;
|
|
525
454
|
break;
|
|
@@ -530,20 +459,16 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
530
459
|
case 'up':
|
|
531
460
|
o.y -= 1;
|
|
532
461
|
break;
|
|
533
|
-
|
|
534
462
|
case 'right':
|
|
535
463
|
o.x += 1;
|
|
536
464
|
break;
|
|
537
|
-
|
|
538
465
|
case 'down':
|
|
539
466
|
o.y += 1;
|
|
540
467
|
break;
|
|
541
|
-
|
|
542
468
|
case 'left':
|
|
543
469
|
o.x -= 1;
|
|
544
470
|
break;
|
|
545
471
|
// remove
|
|
546
|
-
|
|
547
472
|
case 'delete':
|
|
548
473
|
o.remove();
|
|
549
474
|
break;
|
|
@@ -555,11 +480,9 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
555
480
|
key: "getTopParent",
|
|
556
481
|
value: function getTopParent(item) {
|
|
557
482
|
var el = item;
|
|
558
|
-
|
|
559
483
|
while (el.parent && el.parent !== item.layer) {
|
|
560
484
|
el = el.parent;
|
|
561
485
|
}
|
|
562
|
-
|
|
563
486
|
return el;
|
|
564
487
|
}
|
|
565
488
|
}, {
|
|
@@ -567,9 +490,8 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
567
490
|
value: function getElementSize() {
|
|
568
491
|
if (this._view) {
|
|
569
492
|
var _this$_view$getViewSi = this._view.getViewSize(),
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
493
|
+
width = _this$_view$getViewSi.width,
|
|
494
|
+
height = _this$_view$getViewSi.height;
|
|
573
495
|
return {
|
|
574
496
|
width: width,
|
|
575
497
|
height: height
|
|
@@ -585,9 +507,7 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
585
507
|
key: "setObjectIndex",
|
|
586
508
|
value: function setObjectIndex(obj, pos) {
|
|
587
509
|
var overwrite = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
588
|
-
|
|
589
510
|
_get(_getPrototypeOf(Canvas.prototype), "setObjectIndex", this).call(this, obj, pos, overwrite);
|
|
590
|
-
|
|
591
511
|
var layer = this._project.activeLayer;
|
|
592
512
|
layer.removeChildren(layer.firstChild.isClipMask() ? 1 : 0);
|
|
593
513
|
layer.addChildren(this.objects.map(function (o) {
|
|
@@ -598,12 +518,10 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
598
518
|
key: "add",
|
|
599
519
|
value: function add(obj) {
|
|
600
520
|
_get(_getPrototypeOf(Canvas.prototype), "add", this).call(this, obj);
|
|
601
|
-
|
|
602
521
|
if (obj.wrappedObject) {
|
|
603
522
|
// make sure the object is added to the active layer of the associated project
|
|
604
523
|
obj.wrappedObject.addTo(this._project.activeLayer);
|
|
605
524
|
}
|
|
606
|
-
|
|
607
525
|
return this;
|
|
608
526
|
}
|
|
609
527
|
}, {
|
|
@@ -616,220 +534,172 @@ var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
|
|
|
616
534
|
}, {
|
|
617
535
|
key: "addImage",
|
|
618
536
|
value: function () {
|
|
619
|
-
var _addImage = _asyncToGenerator( /*#__PURE__*/
|
|
537
|
+
var _addImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(options) {
|
|
620
538
|
var src, image;
|
|
621
|
-
return
|
|
622
|
-
while (1) {
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
return _context4.abrupt("return", image);
|
|
640
|
-
|
|
641
|
-
case 8:
|
|
642
|
-
case "end":
|
|
643
|
-
return _context4.stop();
|
|
644
|
-
}
|
|
539
|
+
return _regeneratorRuntime().wrap(function _callee4$(_context6) {
|
|
540
|
+
while (1) switch (_context6.prev = _context6.next) {
|
|
541
|
+
case 0:
|
|
542
|
+
src = options.src;
|
|
543
|
+
image = new _Image.Image(options);
|
|
544
|
+
if (!src) {
|
|
545
|
+
_context6.next = 5;
|
|
546
|
+
break;
|
|
547
|
+
}
|
|
548
|
+
_context6.next = 5;
|
|
549
|
+
return image.loadFromURL(src);
|
|
550
|
+
case 5:
|
|
551
|
+
this.add(image);
|
|
552
|
+
logger.log('Image has been added.', image);
|
|
553
|
+
return _context6.abrupt("return", image);
|
|
554
|
+
case 8:
|
|
555
|
+
case "end":
|
|
556
|
+
return _context6.stop();
|
|
645
557
|
}
|
|
646
558
|
}, _callee4, this);
|
|
647
559
|
}));
|
|
648
|
-
|
|
649
560
|
function addImage(_x8) {
|
|
650
561
|
return _addImage.apply(this, arguments);
|
|
651
562
|
}
|
|
652
|
-
|
|
653
563
|
return addImage;
|
|
654
564
|
}()
|
|
655
565
|
}, {
|
|
656
566
|
key: "addGroup",
|
|
657
567
|
value: function () {
|
|
658
|
-
var _addGroup = _asyncToGenerator( /*#__PURE__*/
|
|
568
|
+
var _addGroup = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(options) {
|
|
659
569
|
var src, group;
|
|
660
|
-
return
|
|
661
|
-
while (1) {
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
return _context5.abrupt("return", group);
|
|
679
|
-
|
|
680
|
-
case 8:
|
|
681
|
-
case "end":
|
|
682
|
-
return _context5.stop();
|
|
683
|
-
}
|
|
570
|
+
return _regeneratorRuntime().wrap(function _callee5$(_context7) {
|
|
571
|
+
while (1) switch (_context7.prev = _context7.next) {
|
|
572
|
+
case 0:
|
|
573
|
+
src = options.src;
|
|
574
|
+
group = new _Group.Group(options);
|
|
575
|
+
if (!src) {
|
|
576
|
+
_context7.next = 5;
|
|
577
|
+
break;
|
|
578
|
+
}
|
|
579
|
+
_context7.next = 5;
|
|
580
|
+
return group.loadFromURL(src);
|
|
581
|
+
case 5:
|
|
582
|
+
this.add(group);
|
|
583
|
+
logger.log('Group has been added.', group);
|
|
584
|
+
return _context7.abrupt("return", group);
|
|
585
|
+
case 8:
|
|
586
|
+
case "end":
|
|
587
|
+
return _context7.stop();
|
|
684
588
|
}
|
|
685
589
|
}, _callee5, this);
|
|
686
590
|
}));
|
|
687
|
-
|
|
688
591
|
function addGroup(_x9) {
|
|
689
592
|
return _addGroup.apply(this, arguments);
|
|
690
593
|
}
|
|
691
|
-
|
|
692
594
|
return addGroup;
|
|
693
595
|
}()
|
|
694
596
|
}, {
|
|
695
597
|
key: "addItemFromObject",
|
|
696
598
|
value: function () {
|
|
697
|
-
var _addItemFromObject = _asyncToGenerator( /*#__PURE__*/
|
|
599
|
+
var _addItemFromObject = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(options, index, overwrite) {
|
|
698
600
|
var type, props, object;
|
|
699
|
-
return
|
|
700
|
-
while (1) {
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
case 16:
|
|
733
|
-
if (typeof index === 'number') {
|
|
734
|
-
object.setIndex(index, overwrite);
|
|
735
|
-
}
|
|
736
|
-
|
|
737
|
-
return _context6.abrupt("return", object);
|
|
738
|
-
|
|
739
|
-
case 18:
|
|
740
|
-
case "end":
|
|
741
|
-
return _context6.stop();
|
|
742
|
-
}
|
|
601
|
+
return _regeneratorRuntime().wrap(function _callee6$(_context8) {
|
|
602
|
+
while (1) switch (_context8.prev = _context8.next) {
|
|
603
|
+
case 0:
|
|
604
|
+
type = options.type, props = _objectWithoutProperties(options, _excluded);
|
|
605
|
+
_context8.t0 = type;
|
|
606
|
+
_context8.next = _context8.t0 === 'Image' ? 4 : _context8.t0 === 'Group' ? 8 : _context8.t0 === 'Text' ? 12 : 14;
|
|
607
|
+
break;
|
|
608
|
+
case 4:
|
|
609
|
+
_context8.next = 6;
|
|
610
|
+
return this.addImage(props);
|
|
611
|
+
case 6:
|
|
612
|
+
object = _context8.sent;
|
|
613
|
+
return _context8.abrupt("break", 16);
|
|
614
|
+
case 8:
|
|
615
|
+
_context8.next = 10;
|
|
616
|
+
return this.addGroup(props);
|
|
617
|
+
case 10:
|
|
618
|
+
object = _context8.sent;
|
|
619
|
+
return _context8.abrupt("break", 16);
|
|
620
|
+
case 12:
|
|
621
|
+
object = this.addText(props);
|
|
622
|
+
return _context8.abrupt("break", 16);
|
|
623
|
+
case 14:
|
|
624
|
+
logger.error('Unknown type: ' + type);
|
|
625
|
+
return _context8.abrupt("return");
|
|
626
|
+
case 16:
|
|
627
|
+
if (typeof index === 'number') {
|
|
628
|
+
object.setIndex(index, overwrite);
|
|
629
|
+
}
|
|
630
|
+
return _context8.abrupt("return", object);
|
|
631
|
+
case 18:
|
|
632
|
+
case "end":
|
|
633
|
+
return _context8.stop();
|
|
743
634
|
}
|
|
744
635
|
}, _callee6, this);
|
|
745
636
|
}));
|
|
746
|
-
|
|
747
637
|
function addItemFromObject(_x10, _x11, _x12) {
|
|
748
638
|
return _addItemFromObject.apply(this, arguments);
|
|
749
639
|
}
|
|
750
|
-
|
|
751
640
|
return addItemFromObject;
|
|
752
641
|
}()
|
|
753
642
|
}, {
|
|
754
643
|
key: "getScreenshotsOfElements",
|
|
755
644
|
value: function () {
|
|
756
|
-
var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/
|
|
645
|
+
var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(fontToFileMap) {
|
|
757
646
|
var svgStr, xmlDoc, designerLayer, elements, _iterator, _step, element, xmlSerializer, screenshots, _iterator2, _step2, _element;
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
elements = _toConsumableArray(designerLayer.children); // remove all elements from the active layer
|
|
782
|
-
|
|
783
|
-
_iterator = _createForOfIteratorHelper(elements);
|
|
784
|
-
|
|
785
|
-
try {
|
|
786
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
787
|
-
element = _step.value;
|
|
788
|
-
designerLayer.removeChild(element);
|
|
789
|
-
}
|
|
790
|
-
} catch (err) {
|
|
791
|
-
_iterator.e(err);
|
|
792
|
-
} finally {
|
|
793
|
-
_iterator.f();
|
|
647
|
+
return _regeneratorRuntime().wrap(function _callee7$(_context9) {
|
|
648
|
+
while (1) switch (_context9.prev = _context9.next) {
|
|
649
|
+
case 0:
|
|
650
|
+
_context9.next = 2;
|
|
651
|
+
return this.getScreenshot(fontToFileMap, {
|
|
652
|
+
memoize: false
|
|
653
|
+
});
|
|
654
|
+
case 2:
|
|
655
|
+
svgStr = _context9.sent;
|
|
656
|
+
xmlDoc = new DOMParser().parseFromString(svgStr, 'text/xml');
|
|
657
|
+
designerLayer = xmlDoc.getElementById('designerLayer');
|
|
658
|
+
if (designerLayer) {
|
|
659
|
+
_context9.next = 7;
|
|
660
|
+
break;
|
|
661
|
+
}
|
|
662
|
+
return _context9.abrupt("return", []);
|
|
663
|
+
case 7:
|
|
664
|
+
elements = _toConsumableArray(designerLayer.children); // remove all elements from the active layer
|
|
665
|
+
_iterator = _createForOfIteratorHelper(elements);
|
|
666
|
+
try {
|
|
667
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
668
|
+
element = _step.value;
|
|
669
|
+
designerLayer.removeChild(element);
|
|
794
670
|
}
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
_iterator2.e(err);
|
|
810
|
-
} finally {
|
|
811
|
-
_iterator2.f();
|
|
671
|
+
} catch (err) {
|
|
672
|
+
_iterator.e(err);
|
|
673
|
+
} finally {
|
|
674
|
+
_iterator.f();
|
|
675
|
+
}
|
|
676
|
+
xmlSerializer = new XMLSerializer();
|
|
677
|
+
screenshots = []; // add elements one-by-one to export SVGs of them
|
|
678
|
+
_iterator2 = _createForOfIteratorHelper(elements);
|
|
679
|
+
try {
|
|
680
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
681
|
+
_element = _step2.value;
|
|
682
|
+
designerLayer.appendChild(_element);
|
|
683
|
+
screenshots.push(xmlSerializer.serializeToString(xmlDoc));
|
|
684
|
+
designerLayer.removeChild(_element);
|
|
812
685
|
}
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
686
|
+
} catch (err) {
|
|
687
|
+
_iterator2.e(err);
|
|
688
|
+
} finally {
|
|
689
|
+
_iterator2.f();
|
|
690
|
+
}
|
|
691
|
+
return _context9.abrupt("return", screenshots);
|
|
692
|
+
case 15:
|
|
693
|
+
case "end":
|
|
694
|
+
return _context9.stop();
|
|
820
695
|
}
|
|
821
696
|
}, _callee7, this);
|
|
822
697
|
}));
|
|
823
|
-
|
|
824
698
|
function getScreenshotsOfElements(_x13) {
|
|
825
699
|
return _getScreenshotsOfElements.apply(this, arguments);
|
|
826
700
|
}
|
|
827
|
-
|
|
828
701
|
return getScreenshotsOfElements;
|
|
829
702
|
}()
|
|
830
703
|
}]);
|
|
831
|
-
|
|
832
704
|
return Canvas;
|
|
833
|
-
}(_Canvas.AbstractCanvas);
|
|
834
|
-
|
|
835
|
-
exports.Canvas = Canvas;
|
|
705
|
+
}(_Canvas.AbstractCanvas);
|