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
package/App.js
CHANGED
|
@@ -1,70 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
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); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _reactHotLoader = require("react-hot-loader");
|
|
13
|
-
|
|
14
9
|
var _TextEditorStateProvider = require("./Components/TextEditor/TextEditorStateProvider");
|
|
15
|
-
|
|
16
10
|
var _Editor = _interopRequireDefault(require("./Components/Editor/Editor"));
|
|
17
|
-
|
|
18
11
|
var _CanvasProvider = require("./CanvasInterface/CanvasProvider");
|
|
19
|
-
|
|
20
12
|
var _FontSizeMin = require("./CanvasAdapters/PaperJs/Modifiers/FontSizeMin");
|
|
21
|
-
|
|
22
13
|
var _CanvasRepository = require("./CanvasAdapters/PaperJs/CanvasRepository");
|
|
23
|
-
|
|
24
14
|
var _EditorContainer = _interopRequireDefault(require("./Components/Editor/EditorContainer"));
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
var _excluded = ["children"]; // ╔════════════╗
|
|
16
|
+
// ║ CAUTION! ║
|
|
17
|
+
// ╚════════════╝
|
|
18
|
+
// Do not use this App component directly!
|
|
19
|
+
// It was made only for development and demo purposes!
|
|
28
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
|
-
|
|
21
|
+
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; }
|
|
30
22
|
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); } }
|
|
31
|
-
|
|
32
23
|
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); }); }; }
|
|
33
|
-
|
|
34
24
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
41
|
-
|
|
42
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
43
|
-
|
|
25
|
+
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); } }
|
|
26
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
27
|
+
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); }
|
|
28
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
44
29
|
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); }; }
|
|
45
|
-
|
|
46
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
47
|
-
|
|
30
|
+
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); }
|
|
48
31
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
49
|
-
|
|
50
32
|
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; } }
|
|
51
|
-
|
|
52
|
-
function
|
|
53
|
-
|
|
54
|
-
function
|
|
55
|
-
|
|
33
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
34
|
+
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; }
|
|
35
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
36
|
+
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); }
|
|
56
37
|
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; }
|
|
57
|
-
|
|
58
38
|
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; }
|
|
59
|
-
|
|
60
39
|
console.warn('Do not use this App component directly! It was made only for development and demo purposes!');
|
|
61
40
|
var canvasRepository = (0, _CanvasRepository.createCanvasRepository)();
|
|
62
|
-
|
|
63
41
|
canvasRepository.onCreate = function (canvas) {
|
|
64
42
|
return console.log('Canvas is ready', canvas);
|
|
65
|
-
};
|
|
66
|
-
|
|
43
|
+
};
|
|
67
44
|
|
|
45
|
+
// expose canvasRepository to window
|
|
68
46
|
window.canvasRepository = canvasRepository;
|
|
69
47
|
var canvases = {
|
|
70
48
|
c1: {
|
|
@@ -162,16 +140,13 @@ var styles = {
|
|
|
162
140
|
fontSize: 20
|
|
163
141
|
}
|
|
164
142
|
};
|
|
165
|
-
|
|
166
143
|
var CustomEditorContainer = function CustomEditorContainer(_ref) {
|
|
167
144
|
var children = _ref.children,
|
|
168
|
-
|
|
169
|
-
|
|
145
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
170
146
|
return /*#__PURE__*/_react["default"].createElement(_EditorContainer["default"], props, /*#__PURE__*/_react["default"].createElement("div", {
|
|
171
147
|
style: styles.demoExtraContent
|
|
172
148
|
}, "This is how to add extra content inside the EditorContainer"), children);
|
|
173
149
|
};
|
|
174
|
-
|
|
175
150
|
var CanvasSelect = function CanvasSelect(_ref2) {
|
|
176
151
|
var onChange = _ref2.onChange;
|
|
177
152
|
return Object.keys(canvases).map(function (id, i) {
|
|
@@ -182,7 +157,6 @@ var CanvasSelect = function CanvasSelect(_ref2) {
|
|
|
182
157
|
}, id);
|
|
183
158
|
});
|
|
184
159
|
};
|
|
185
|
-
|
|
186
160
|
var MaskSelect = function MaskSelect(_ref3) {
|
|
187
161
|
var onChange = _ref3.onChange;
|
|
188
162
|
return /*#__PURE__*/_react["default"].createElement("select", {
|
|
@@ -197,206 +171,161 @@ var MaskSelect = function MaskSelect(_ref3) {
|
|
|
197
171
|
}, maskData.id);
|
|
198
172
|
}));
|
|
199
173
|
};
|
|
200
|
-
|
|
201
174
|
var App = /*#__PURE__*/function (_React$Component) {
|
|
202
175
|
_inherits(App, _React$Component);
|
|
203
|
-
|
|
204
176
|
var _super = _createSuper(App);
|
|
205
|
-
|
|
206
177
|
function App() {
|
|
207
178
|
var _this;
|
|
208
|
-
|
|
209
179
|
_classCallCheck(this, App);
|
|
210
|
-
|
|
211
180
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
212
181
|
args[_key] = arguments[_key];
|
|
213
182
|
}
|
|
214
|
-
|
|
215
183
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
216
|
-
|
|
217
184
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
218
185
|
canvasInstance: canvasRepository.requestCanvas('c1', canvases.c1)
|
|
219
186
|
});
|
|
220
|
-
|
|
221
187
|
_defineProperty(_assertThisInitialized(_this), "mockUploadFunction", function (files) {
|
|
222
188
|
return new Promise(function (resolve, reject) {
|
|
223
189
|
var reader = new FileReader();
|
|
224
|
-
|
|
225
190
|
reader.onload = function () {
|
|
226
191
|
var dataURL = reader.result;
|
|
227
192
|
resolve([{
|
|
228
193
|
src: dataURL
|
|
229
194
|
}]);
|
|
230
195
|
};
|
|
231
|
-
|
|
232
196
|
reader.onerror = reject;
|
|
233
197
|
reader.readAsDataURL(files[0]);
|
|
234
198
|
});
|
|
235
199
|
});
|
|
236
|
-
|
|
237
200
|
_defineProperty(_assertThisInitialized(_this), "saveCanvasData", function () {
|
|
238
201
|
var canvasData = canvasRepository.getActiveCanvas().toObject(true, {
|
|
239
202
|
includeObjects: true
|
|
240
203
|
});
|
|
241
|
-
|
|
242
204
|
if (window.localStorage) {
|
|
243
205
|
localStorage.setItem('savedCanvasData', canvasData);
|
|
244
206
|
console.log('canvas saved!');
|
|
245
207
|
}
|
|
246
208
|
});
|
|
247
|
-
|
|
248
|
-
_defineProperty(_assertThisInitialized(_this), "loadCanvasData", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
209
|
+
_defineProperty(_assertThisInitialized(_this), "loadCanvasData", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
249
210
|
var canvasData;
|
|
250
|
-
return
|
|
251
|
-
while (1) {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
if (!window.localStorage) {
|
|
255
|
-
_context.next = 13;
|
|
256
|
-
break;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
_context.prev = 1;
|
|
260
|
-
canvasData = JSON.parse(localStorage.getItem('savedCanvasData'));
|
|
261
|
-
|
|
262
|
-
if (!canvasData) {
|
|
263
|
-
_context.next = 7;
|
|
264
|
-
break;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
_context.next = 6;
|
|
268
|
-
return canvasRepository.getActiveCanvas().fromObject(canvasData);
|
|
269
|
-
|
|
270
|
-
case 6:
|
|
271
|
-
console.log('canvas loaded!');
|
|
272
|
-
|
|
273
|
-
case 7:
|
|
211
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
212
|
+
while (1) switch (_context.prev = _context.next) {
|
|
213
|
+
case 0:
|
|
214
|
+
if (!window.localStorage) {
|
|
274
215
|
_context.next = 13;
|
|
275
216
|
break;
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
217
|
+
}
|
|
218
|
+
_context.prev = 1;
|
|
219
|
+
canvasData = JSON.parse(localStorage.getItem('savedCanvasData'));
|
|
220
|
+
if (!canvasData) {
|
|
221
|
+
_context.next = 7;
|
|
222
|
+
break;
|
|
223
|
+
}
|
|
224
|
+
_context.next = 6;
|
|
225
|
+
return canvasRepository.getActiveCanvas().fromObject(canvasData);
|
|
226
|
+
case 6:
|
|
227
|
+
console.log('canvas loaded!');
|
|
228
|
+
case 7:
|
|
229
|
+
_context.next = 13;
|
|
230
|
+
break;
|
|
231
|
+
case 9:
|
|
232
|
+
_context.prev = 9;
|
|
233
|
+
_context.t0 = _context["catch"](1);
|
|
234
|
+
console.error(_context.t0);
|
|
235
|
+
alert('Could not load data!');
|
|
236
|
+
case 13:
|
|
237
|
+
case "end":
|
|
238
|
+
return _context.stop();
|
|
287
239
|
}
|
|
288
240
|
}, _callee, null, [[1, 9]]);
|
|
289
241
|
})));
|
|
290
|
-
|
|
291
242
|
_defineProperty(_assertThisInitialized(_this), "setFontSizeMin", function () {
|
|
292
243
|
return (0, _FontSizeMin.applyFontSizeMin)(canvasRepository.getActiveCanvas(), 20);
|
|
293
244
|
});
|
|
294
|
-
|
|
295
245
|
_defineProperty(_assertThisInitialized(_this), "clearCanvas", function () {
|
|
296
246
|
return canvasRepository.getActiveCanvas().clear();
|
|
297
247
|
});
|
|
298
|
-
|
|
299
248
|
_defineProperty(_assertThisInitialized(_this), "switchCanvas", function (_ref5) {
|
|
300
249
|
var value = _ref5.target.value;
|
|
301
|
-
|
|
302
250
|
_this.setState({
|
|
303
251
|
canvasInstance: canvasRepository.requestCanvas(value, canvases[value])
|
|
304
252
|
});
|
|
305
253
|
});
|
|
306
|
-
|
|
307
|
-
_defineProperty(_assertThisInitialized(_this), "screenshotToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
|
254
|
+
_defineProperty(_assertThisInitialized(_this), "screenshotToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
308
255
|
var screenshot;
|
|
309
|
-
return
|
|
310
|
-
while (1) {
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
case 6:
|
|
323
|
-
case "end":
|
|
324
|
-
return _context2.stop();
|
|
325
|
-
}
|
|
256
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
257
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
258
|
+
case 0:
|
|
259
|
+
console.time('screenshot');
|
|
260
|
+
_context2.next = 3;
|
|
261
|
+
return canvasRepository.getActiveCanvas().getScreenshot(fontToFileMap);
|
|
262
|
+
case 3:
|
|
263
|
+
screenshot = _context2.sent;
|
|
264
|
+
console.log('Screenshot:', "data:image/svg+xml;base64,".concat(btoa(screenshot)));
|
|
265
|
+
console.timeEnd('screenshot');
|
|
266
|
+
case 6:
|
|
267
|
+
case "end":
|
|
268
|
+
return _context2.stop();
|
|
326
269
|
}
|
|
327
270
|
}, _callee2);
|
|
328
271
|
})));
|
|
329
|
-
|
|
330
|
-
_defineProperty(_assertThisInitialized(_this), "screenshotsToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
|
|
272
|
+
_defineProperty(_assertThisInitialized(_this), "screenshotsToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
331
273
|
var elements;
|
|
332
|
-
return
|
|
333
|
-
while (1) {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
case 4:
|
|
344
|
-
case "end":
|
|
345
|
-
return _context3.stop();
|
|
346
|
-
}
|
|
274
|
+
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
275
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
276
|
+
case 0:
|
|
277
|
+
_context3.next = 2;
|
|
278
|
+
return canvasRepository.getActiveCanvas().getScreenshotsOfElements(fontToFileMap);
|
|
279
|
+
case 2:
|
|
280
|
+
elements = _context3.sent;
|
|
281
|
+
console.log(elements);
|
|
282
|
+
case 4:
|
|
283
|
+
case "end":
|
|
284
|
+
return _context3.stop();
|
|
347
285
|
}
|
|
348
286
|
}, _callee3);
|
|
349
287
|
})));
|
|
350
|
-
|
|
351
288
|
_defineProperty(_assertThisInitialized(_this), "onMaskSelected", /*#__PURE__*/function () {
|
|
352
|
-
var _ref8 = _asyncToGenerator(
|
|
353
|
-
var value
|
|
354
|
-
return
|
|
355
|
-
|
|
356
|
-
|
|
289
|
+
var _ref8 = _asyncToGenerator(function (_ref9) {
|
|
290
|
+
var value = _ref9.target.value;
|
|
291
|
+
return /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
|
292
|
+
var maskData, maskHandler;
|
|
293
|
+
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
294
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
357
295
|
case 0:
|
|
358
|
-
value = _ref9.target.value;
|
|
359
|
-
|
|
360
296
|
if (!value) {
|
|
361
|
-
_context4.next =
|
|
297
|
+
_context4.next = 6;
|
|
362
298
|
break;
|
|
363
299
|
}
|
|
364
|
-
|
|
365
300
|
maskData = maskDataSamples.filter(function (_ref10) {
|
|
366
301
|
var id = _ref10.id;
|
|
367
302
|
return id === value;
|
|
368
303
|
})[0];
|
|
369
|
-
_context4.next =
|
|
304
|
+
_context4.next = 4;
|
|
370
305
|
return canvasRepository.getActiveCanvas().useMask(maskData);
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
_context4.next = 9;
|
|
306
|
+
case 4:
|
|
307
|
+
_context4.next = 8;
|
|
374
308
|
break;
|
|
375
|
-
|
|
376
|
-
case 7:
|
|
309
|
+
case 6:
|
|
377
310
|
maskHandler = canvasRepository.getActiveCanvas().getMaskHandler();
|
|
378
311
|
maskHandler && maskHandler.dispose();
|
|
379
|
-
|
|
380
|
-
case 9:
|
|
312
|
+
case 8:
|
|
381
313
|
case "end":
|
|
382
314
|
return _context4.stop();
|
|
383
315
|
}
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
})
|
|
387
|
-
|
|
316
|
+
}, _callee4);
|
|
317
|
+
})();
|
|
318
|
+
});
|
|
388
319
|
return function (_x) {
|
|
389
320
|
return _ref8.apply(this, arguments);
|
|
390
321
|
};
|
|
391
322
|
}());
|
|
392
|
-
|
|
393
323
|
return _this;
|
|
394
324
|
}
|
|
395
|
-
|
|
396
325
|
_createClass(App, [{
|
|
397
326
|
key: "render",
|
|
398
327
|
value: function render() {
|
|
399
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
328
|
+
return /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasProvider, {
|
|
400
329
|
canvas: this.state.canvasInstance
|
|
401
330
|
}, /*#__PURE__*/_react["default"].createElement(_TextEditorStateProvider.TextEditorStateProvider, {
|
|
402
331
|
defaultStyle: {
|
|
@@ -442,13 +371,9 @@ var App = /*#__PURE__*/function (_React$Component) {
|
|
|
442
371
|
style: styles.demoGroup
|
|
443
372
|
}, /*#__PURE__*/_react["default"].createElement(MaskSelect, {
|
|
444
373
|
onChange: this.onMaskSelected
|
|
445
|
-
}))))
|
|
374
|
+
}))));
|
|
446
375
|
}
|
|
447
376
|
}]);
|
|
448
|
-
|
|
449
377
|
return App;
|
|
450
378
|
}(_react["default"].Component);
|
|
451
|
-
|
|
452
|
-
var _default = (0, _reactHotLoader.hot)(module)(App);
|
|
453
|
-
|
|
454
|
-
exports["default"] = _default;
|
|
379
|
+
var _default = exports["default"] = App;
|