redhotmagma-visualization 1.41.0 → 1.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AlignTargetProvider.js +50 -79
- package/CommonUtils/Deferred.js +11 -38
- package/CommonUtils/Observable.js +29 -48
- package/CommonUtils/PropertyObserver.js +10 -17
- package/CommonUtils/SyncCurrentFunction.js +33 -42
- package/CommonUtils/SyncObservableEvent.js +2 -6
- package/CommonUtils/pointerEvent.js +50 -98
- package/Constants.js +6 -6
- package/DevApp.js +187 -309
- package/ExposedModules.js +2 -9
- package/FallbackVisualization.js +4 -10
- package/PrintingEffects/ColorEmbossingEffect.js +15 -26
- package/PrintingEffects/DomingEffect.js +29 -52
- package/PrintingEffects/EmbossingEffect.js +17 -29
- package/PrintingEffects/EmbroideryEffect.js +251 -362
- package/PrintingEffects/EngravingEffect.js +17 -29
- package/PrintingEffects/PrintingEffects.js +44 -73
- package/PrintingEffects/PrintingEffectsUtils.js +1 -7
- package/React/ReactBase.js +15 -47
- package/Three/Controls/OrbitControls.js +105 -126
- package/Three/Exporters/glTFExporter.js +2 -6
- package/Three/Loaders/ColladaLoader.js +202 -550
- package/Three/Loaders/MTLLoader.js +33 -64
- package/Three/Loaders/OBJLoader.js +48 -80
- package/Three/Three2D.js +750 -1014
- package/Three/Three2DLayers.js +217 -341
- package/Three/Three3D.js +530 -800
- package/Three/Three3DScene.js +484 -780
- package/Three/ThreeBase.js +145 -230
- package/Utils/DesignArea/getDesignAreaCanvasSize.js +3 -11
- package/Utils/TextureBuilder/createTextureBuilder.js +133 -193
- package/Utils/TextureBuilder/textureBuilderFunctions.js +11 -27
- package/Utils/alignToElement.js +13 -24
- package/Utils/canvasBlur.js +27 -45
- package/Utils/createAlphaMapFromAlphaChannel.js +11 -21
- package/Utils/createBakedShadow.js +38 -42
- package/Utils/createCache.js +0 -4
- package/Utils/createCanvas.js +3 -9
- package/Utils/createImageRepository.js +63 -87
- package/Utils/disposeMaterial.js +4 -14
- package/Utils/getImageSize.js +1 -2
- package/Utils/imagePreloader.js +36 -48
- package/Utils/initTextureCanvas.js +6 -18
- package/Utils/isMobileDevice.js +3 -7
- package/Utils/optimizeTextureImage.js +13 -29
- package/Utils/rememberCameraViewOffset.js +8 -11
- package/Utils/removeObject.js +0 -4
- package/Utils/restrictCameraMovement.js +2 -12
- package/Utils/setLightShadow.js +3 -5
- package/Utils/setOrthographicCameraSize.js +0 -1
- package/Utils/updateFitSizeToElement.js +4 -9
- package/VisualizationContainer.js +37 -90
- package/VisualizationInterface.js +32 -67
- package/VisualizationProvider.js +5 -15
- package/index.js +2 -9
- package/package.json +6 -7
- package/scripts/cpPublicLocal.js +7 -2
- package/src/CommonUtils/Observable.js +1 -0
- package/src/CommonUtils/pointerEvent.js +17 -0
- package/src/Constants.js +2 -0
- package/src/DevApp.js +1 -2
- package/src/Three/Three2D.js +105 -1
- package/src/Three/ThreeBase.js +31 -3
- package/src/Utils/TextureBuilder/createTextureBuilder.js +12 -3
- package/src/VisualizationContainer.js +8 -2
- package/src/index.js +2 -3
- package/visualizationAdapterCreator.js +6 -23
|
@@ -4,311 +4,240 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.embroideryEffect = embroideryEffect;
|
|
7
|
-
|
|
8
7
|
var _createCanvas = require("../Utils/createCanvas");
|
|
9
|
-
|
|
10
8
|
var _imagePreloader = require("../Utils/imagePreloader");
|
|
11
|
-
|
|
12
9
|
var _createCache = require("../Utils/createCache");
|
|
13
|
-
|
|
14
10
|
var _embroidery_screen = _interopRequireDefault(require("./resources/embroidery_screen.jpg"));
|
|
15
|
-
|
|
16
11
|
var _embroidery_multiply = _interopRequireDefault(require("./resources/embroidery_multiply.jpg"));
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
-
|
|
20
|
-
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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
21
|
-
|
|
13
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
22
14
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
23
|
-
|
|
24
15
|
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."); }
|
|
25
|
-
|
|
26
16
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
27
|
-
|
|
28
17
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
29
|
-
|
|
30
|
-
function _typeof(
|
|
31
|
-
|
|
18
|
+
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; }
|
|
19
|
+
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); }
|
|
32
20
|
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); } }
|
|
33
|
-
|
|
34
21
|
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); }); }; }
|
|
35
|
-
|
|
36
22
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
37
|
-
|
|
38
23
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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
|
-
function
|
|
43
|
-
|
|
44
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
45
|
-
|
|
25
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
26
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
46
27
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
47
|
-
|
|
48
28
|
var imagePreloader = (0, _imagePreloader.createImagePreloader)([_embroidery_screen["default"], _embroidery_multiply["default"]]);
|
|
49
29
|
var SVG_DATA_URL_HDR = "data:image/svg+xml;base64,";
|
|
50
|
-
|
|
51
30
|
var getScaleValues = function getScaleValues(node) {
|
|
52
31
|
var transform = node.getAttribute("transform") || "";
|
|
53
32
|
var matches = transform.match(/scale\(([^)]+)\)/);
|
|
54
|
-
|
|
55
33
|
if (matches) {
|
|
56
34
|
var _matches$1$split$map = matches[1].split(",").map(window.parseFloat),
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
35
|
+
_matches$1$split$map2 = _slicedToArray(_matches$1$split$map, 2),
|
|
36
|
+
x = _matches$1$split$map2[0],
|
|
37
|
+
y = _matches$1$split$map2[1];
|
|
61
38
|
return [x, y || x];
|
|
62
39
|
}
|
|
63
|
-
|
|
64
40
|
return [1, 1];
|
|
65
41
|
};
|
|
66
|
-
|
|
67
42
|
var getRotateValue = function getRotateValue(node) {
|
|
68
43
|
var transform = node.getAttribute("transform") || "";
|
|
69
44
|
var matches = transform.match(/rotate\(([^)]+)\)/);
|
|
70
|
-
|
|
71
45
|
if (matches) {
|
|
72
46
|
return window.parseFloat(matches[1]);
|
|
73
47
|
}
|
|
74
|
-
|
|
75
48
|
return 0;
|
|
76
49
|
};
|
|
77
|
-
|
|
78
50
|
var getSizeValues = function getSizeValues(svgNode) {
|
|
79
51
|
return [parseFloat(svgNode.getAttribute("width")) || 0, parseFloat(svgNode.getAttribute("height")) || 0];
|
|
80
52
|
};
|
|
81
|
-
|
|
82
53
|
var findOutermostNode = function findOutermostNode(node, container) {
|
|
83
54
|
return node.parentNode ? node.parentNode === container ? node : findOutermostNode(node.parentNode, container) : node;
|
|
84
55
|
};
|
|
85
|
-
|
|
86
56
|
var svgToImg = /*#__PURE__*/function () {
|
|
87
|
-
var _ref = _asyncToGenerator( /*#__PURE__*/
|
|
57
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(svgElement) {
|
|
88
58
|
var svgImg;
|
|
89
|
-
return
|
|
90
|
-
while (1) {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
var _createWorkingCanvas = (0, _createCanvas.createWorkingCanvas)(svgImg, true),
|
|
116
|
-
_createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 1),
|
|
117
|
-
svgCanvas = _createWorkingCanvas2[0];
|
|
118
|
-
|
|
119
|
-
resolve(svgCanvas);
|
|
120
|
-
});
|
|
59
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
60
|
+
while (1) switch (_context.prev = _context.next) {
|
|
61
|
+
case 0:
|
|
62
|
+
_context.next = 2;
|
|
63
|
+
return new Promise(function (resolve, reject) {
|
|
64
|
+
var img = document.createElement("img");
|
|
65
|
+
img.onload = function () {
|
|
66
|
+
return resolve(img);
|
|
67
|
+
};
|
|
68
|
+
img.onerror = reject;
|
|
69
|
+
var xml = _typeof(svgElement) === "object" ? new XMLSerializer().serializeToString(svgElement) : svgElement;
|
|
70
|
+
var svg64 = btoa(xml);
|
|
71
|
+
img.src = "data:image/svg+xml;base64," + svg64;
|
|
72
|
+
});
|
|
73
|
+
case 2:
|
|
74
|
+
svgImg = _context.sent;
|
|
75
|
+
_context.next = 5;
|
|
76
|
+
return new Promise(function (resolve) {
|
|
77
|
+
setTimeout(function () {
|
|
78
|
+
// some browsers may have issues with applying effects on images with svg source
|
|
79
|
+
// therefore it has to be converted to a canvas before
|
|
80
|
+
// it also has to be performed in a new event to make sure the image content is available
|
|
81
|
+
var _createWorkingCanvas = (0, _createCanvas.createWorkingCanvas)(svgImg, true),
|
|
82
|
+
_createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 1),
|
|
83
|
+
svgCanvas = _createWorkingCanvas2[0];
|
|
84
|
+
resolve(svgCanvas);
|
|
121
85
|
});
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
return _context.stop();
|
|
129
|
-
}
|
|
86
|
+
});
|
|
87
|
+
case 5:
|
|
88
|
+
return _context.abrupt("return", _context.sent);
|
|
89
|
+
case 6:
|
|
90
|
+
case "end":
|
|
91
|
+
return _context.stop();
|
|
130
92
|
}
|
|
131
93
|
}, _callee);
|
|
132
94
|
}));
|
|
133
|
-
|
|
134
95
|
return function svgToImg(_x) {
|
|
135
96
|
return _ref.apply(this, arguments);
|
|
136
97
|
};
|
|
137
98
|
}();
|
|
138
|
-
|
|
139
99
|
var applyOnEmbeddedSvg = /*#__PURE__*/function () {
|
|
140
|
-
var _ref2 = _asyncToGenerator( /*#__PURE__*/
|
|
100
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(imageNode, imageCanvas, ctx, rootSvgElement) {
|
|
141
101
|
var outermostGroup, _getScaleValues, _getScaleValues2, rootScaleX, rootScaleY, _getScaleValues3, _getScaleValues4, imgScaleX, imgScaleY, _getSizeValues, _getSizeValues2, rootWidth, canvasWidth, svgToCanvasRatio, scaleX, scaleY, size, _createWorkingCanvas3, _createWorkingCanvas4, tmpCanvas, tmpCtx, svgAsString, svgDoc, svgElement, x, y, angle;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
case 29:
|
|
187
|
-
case "end":
|
|
188
|
-
return _context2.stop();
|
|
189
|
-
}
|
|
102
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
103
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
104
|
+
case 0:
|
|
105
|
+
outermostGroup = findOutermostNode(imageNode, rootSvgElement);
|
|
106
|
+
_getScaleValues = getScaleValues(outermostGroup), _getScaleValues2 = _slicedToArray(_getScaleValues, 2), rootScaleX = _getScaleValues2[0], rootScaleY = _getScaleValues2[1];
|
|
107
|
+
_getScaleValues3 = getScaleValues(imageNode), _getScaleValues4 = _slicedToArray(_getScaleValues3, 2), imgScaleX = _getScaleValues4[0], imgScaleY = _getScaleValues4[1];
|
|
108
|
+
_getSizeValues = getSizeValues(rootSvgElement), _getSizeValues2 = _slicedToArray(_getSizeValues, 1), rootWidth = _getSizeValues2[0];
|
|
109
|
+
canvasWidth = imageCanvas.width;
|
|
110
|
+
svgToCanvasRatio = canvasWidth / rootWidth;
|
|
111
|
+
scaleX = imgScaleX * rootScaleX * svgToCanvasRatio;
|
|
112
|
+
scaleY = imgScaleY * rootScaleY * svgToCanvasRatio;
|
|
113
|
+
size = {
|
|
114
|
+
width: parseFloat(imageNode.getAttribute("width")) * scaleX,
|
|
115
|
+
height: parseFloat(imageNode.getAttribute("height")) * scaleY
|
|
116
|
+
};
|
|
117
|
+
_createWorkingCanvas3 = (0, _createCanvas.createWorkingCanvas)(size), _createWorkingCanvas4 = _slicedToArray(_createWorkingCanvas3, 2), tmpCanvas = _createWorkingCanvas4[0], tmpCtx = _createWorkingCanvas4[1];
|
|
118
|
+
_context2.prev = 10;
|
|
119
|
+
svgAsString = window.atob(getImageSrc(imageNode).substring(SVG_DATA_URL_HDR.length));
|
|
120
|
+
svgDoc = new DOMParser().parseFromString(svgAsString, "image/svg+xml");
|
|
121
|
+
svgElement = svgDoc.getElementsByTagName("svg")[0];
|
|
122
|
+
_context2.next = 16;
|
|
123
|
+
return Promise.all(Array.from(svgElement.childNodes).map(applyOnChildNode(tmpCanvas, tmpCtx, svgElement)));
|
|
124
|
+
case 16:
|
|
125
|
+
ctx.save();
|
|
126
|
+
|
|
127
|
+
// apply element transformations
|
|
128
|
+
x = parseFloat(imageNode.getAttribute("x"));
|
|
129
|
+
y = parseFloat(imageNode.getAttribute("y"));
|
|
130
|
+
angle = getRotateValue(imageNode) / 180 * Math.PI;
|
|
131
|
+
ctx.rotate(angle);
|
|
132
|
+
ctx.translate(x * scaleX, y * scaleY);
|
|
133
|
+
ctx.drawImage(tmpCanvas, 0, 0);
|
|
134
|
+
ctx.restore();
|
|
135
|
+
_context2.next = 29;
|
|
136
|
+
break;
|
|
137
|
+
case 26:
|
|
138
|
+
_context2.prev = 26;
|
|
139
|
+
_context2.t0 = _context2["catch"](10);
|
|
140
|
+
// eslint-disable-next-line no-console
|
|
141
|
+
console.error("Error during embedded svg image processing!", _context2.t0);
|
|
142
|
+
case 29:
|
|
143
|
+
case "end":
|
|
144
|
+
return _context2.stop();
|
|
190
145
|
}
|
|
191
146
|
}, _callee2, null, [[10, 26]]);
|
|
192
147
|
}));
|
|
193
|
-
|
|
194
148
|
return function applyOnEmbeddedSvg(_x2, _x3, _x4, _x5) {
|
|
195
149
|
return _ref2.apply(this, arguments);
|
|
196
150
|
};
|
|
197
151
|
}();
|
|
198
|
-
|
|
199
152
|
var getImageSrc = function getImageSrc(imageNode) {
|
|
200
153
|
return imageNode.getAttribute("href") || imageNode.getAttribute("xlink:href");
|
|
201
154
|
};
|
|
202
|
-
|
|
203
155
|
var applyOnChildNode = function applyOnChildNode(imageCanvas, ctx, svgElement) {
|
|
204
156
|
return /*#__PURE__*/function () {
|
|
205
|
-
var _ref3 = _asyncToGenerator( /*#__PURE__*/
|
|
157
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(node) {
|
|
206
158
|
var partialSvg, img, rotation, _createWorkingCanvas5, _createWorkingCanvas6, multiplyPatternCanvas, multiplyPatternContext, patternSize, _createWorkingCanvas7, _createWorkingCanvas8, screenPatternCanvas, screenPatternContext, _createWorkingCanvas9, _createWorkingCanvas10, ocvs, octx;
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
ctx.drawImage(ocvs, 0, 0); // Add Screen Effect
|
|
271
|
-
|
|
272
|
-
octx.globalCompositeOperation = "destination-atop";
|
|
273
|
-
octx.drawImage(screenPatternCanvas, 0, 0);
|
|
274
|
-
octx.drawImage(img, 0, 0);
|
|
275
|
-
ctx.globalCompositeOperation = "multiply";
|
|
276
|
-
ctx.drawImage(ocvs, 0, 0); // Draw SVG again behind
|
|
277
|
-
|
|
278
|
-
ctx.globalCompositeOperation = "multiply";
|
|
279
|
-
ctx.drawImage(img, 0, 0);
|
|
280
|
-
|
|
281
|
-
case 36:
|
|
282
|
-
case "end":
|
|
283
|
-
return _context3.stop();
|
|
284
|
-
}
|
|
159
|
+
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
160
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
161
|
+
case 0:
|
|
162
|
+
if (!(node.nodeType === 3 /** ignore text nodes **/ || node.getAttribute("visibility") === "hidden")) {
|
|
163
|
+
_context3.next = 2;
|
|
164
|
+
break;
|
|
165
|
+
}
|
|
166
|
+
return _context3.abrupt("return");
|
|
167
|
+
case 2:
|
|
168
|
+
if (!(node.tagName === "image")) {
|
|
169
|
+
_context3.next = 7;
|
|
170
|
+
break;
|
|
171
|
+
}
|
|
172
|
+
if (!getImageSrc(node).startsWith(SVG_DATA_URL_HDR)) {
|
|
173
|
+
_context3.next = 7;
|
|
174
|
+
break;
|
|
175
|
+
}
|
|
176
|
+
_context3.next = 6;
|
|
177
|
+
return applyOnEmbeddedSvg(node, imageCanvas, ctx, svgElement);
|
|
178
|
+
case 6:
|
|
179
|
+
return _context3.abrupt("return");
|
|
180
|
+
case 7:
|
|
181
|
+
partialSvg = createSvgChunk(imageCanvas, svgElement, node);
|
|
182
|
+
if (partialSvg) {
|
|
183
|
+
_context3.next = 10;
|
|
184
|
+
break;
|
|
185
|
+
}
|
|
186
|
+
return _context3.abrupt("return");
|
|
187
|
+
case 10:
|
|
188
|
+
_context3.next = 12;
|
|
189
|
+
return svgToImg(partialSvg);
|
|
190
|
+
case 12:
|
|
191
|
+
img = _context3.sent;
|
|
192
|
+
rotation = Math.random() * Math.PI;
|
|
193
|
+
_createWorkingCanvas5 = (0, _createCanvas.createWorkingCanvas)(imageCanvas), _createWorkingCanvas6 = _slicedToArray(_createWorkingCanvas5, 2), multiplyPatternCanvas = _createWorkingCanvas6[0], multiplyPatternContext = _createWorkingCanvas6[1];
|
|
194
|
+
multiplyPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(_embroidery_multiply["default"]), "repeat");
|
|
195
|
+
patternSize = Math.max(img.width, img.height) * 4;
|
|
196
|
+
multiplyPatternContext.rotate(rotation);
|
|
197
|
+
multiplyPatternContext.fillRect(-patternSize / 2, -patternSize / 2, patternSize, patternSize);
|
|
198
|
+
_createWorkingCanvas7 = (0, _createCanvas.createWorkingCanvas)(imageCanvas), _createWorkingCanvas8 = _slicedToArray(_createWorkingCanvas7, 2), screenPatternCanvas = _createWorkingCanvas8[0], screenPatternContext = _createWorkingCanvas8[1];
|
|
199
|
+
screenPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(_embroidery_screen["default"]), "repeat");
|
|
200
|
+
screenPatternContext.rotate(rotation);
|
|
201
|
+
screenPatternContext.fillRect(-patternSize / 2, -patternSize / 2, patternSize, patternSize);
|
|
202
|
+
_createWorkingCanvas9 = (0, _createCanvas.createWorkingCanvas)(imageCanvas), _createWorkingCanvas10 = _slicedToArray(_createWorkingCanvas9, 2), ocvs = _createWorkingCanvas10[0], octx = _createWorkingCanvas10[1]; // Add multiply Effect
|
|
203
|
+
octx.globalCompositeOperation = "destination-atop";
|
|
204
|
+
octx.drawImage(multiplyPatternCanvas, 0, 0);
|
|
205
|
+
octx.drawImage(img, 0, 0);
|
|
206
|
+
ctx.globalCompositeOperation = "screen";
|
|
207
|
+
ctx.drawImage(ocvs, 0, 0);
|
|
208
|
+
|
|
209
|
+
// Add Screen Effect
|
|
210
|
+
octx.globalCompositeOperation = "destination-atop";
|
|
211
|
+
octx.drawImage(screenPatternCanvas, 0, 0);
|
|
212
|
+
octx.drawImage(img, 0, 0);
|
|
213
|
+
ctx.globalCompositeOperation = "multiply";
|
|
214
|
+
ctx.drawImage(ocvs, 0, 0);
|
|
215
|
+
|
|
216
|
+
// Draw SVG again behind
|
|
217
|
+
ctx.globalCompositeOperation = "multiply";
|
|
218
|
+
ctx.drawImage(img, 0, 0);
|
|
219
|
+
case 36:
|
|
220
|
+
case "end":
|
|
221
|
+
return _context3.stop();
|
|
285
222
|
}
|
|
286
223
|
}, _callee3);
|
|
287
224
|
}));
|
|
288
|
-
|
|
289
225
|
return function (_x6) {
|
|
290
226
|
return _ref3.apply(this, arguments);
|
|
291
227
|
};
|
|
292
228
|
}();
|
|
293
229
|
};
|
|
294
|
-
|
|
295
230
|
var createSvgChunk = function createSvgChunk(imageCanvas, svgRoot, endNode) {
|
|
296
231
|
var styleTags = ["style", "defs"];
|
|
297
|
-
|
|
298
232
|
if (endNode.nodeType === Node.TEXT_NODE || styleTags.indexOf(endNode.tagName) !== -1) {
|
|
299
233
|
return false;
|
|
300
234
|
}
|
|
301
|
-
|
|
302
235
|
var chunk = svgRoot.cloneNode();
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
var tagName = _styleTags[_i2];
|
|
306
|
-
|
|
236
|
+
for (var _i = 0, _styleTags = styleTags; _i < _styleTags.length; _i++) {
|
|
237
|
+
var tagName = _styleTags[_i];
|
|
307
238
|
var elements = _toConsumableArray(svgRoot.getElementsByTagName(tagName));
|
|
308
|
-
|
|
309
239
|
var _iterator = _createForOfIteratorHelper(elements),
|
|
310
|
-
|
|
311
|
-
|
|
240
|
+
_step;
|
|
312
241
|
try {
|
|
313
242
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
314
243
|
var element = _step.value;
|
|
@@ -320,74 +249,60 @@ var createSvgChunk = function createSvgChunk(imageCanvas, svgRoot, endNode) {
|
|
|
320
249
|
_iterator.f();
|
|
321
250
|
}
|
|
322
251
|
}
|
|
323
|
-
|
|
324
252
|
chunk.appendChild(cloneWithParent(endNode, svgRoot));
|
|
325
253
|
var width = imageCanvas.width,
|
|
326
|
-
|
|
254
|
+
height = imageCanvas.height;
|
|
327
255
|
chunk.setAttribute("width", width);
|
|
328
256
|
chunk.setAttribute("height", height);
|
|
329
257
|
return chunk;
|
|
330
258
|
};
|
|
331
|
-
|
|
332
259
|
var setSvgSize = function setSvgSize(svgElement, _ref4) {
|
|
333
260
|
var width = _ref4.width,
|
|
334
|
-
|
|
261
|
+
height = _ref4.height;
|
|
335
262
|
var scale = svgElement.getAttribute("width") / width;
|
|
336
263
|
svgElement.setAttribute("width", width);
|
|
337
264
|
svgElement.setAttribute("height", height);
|
|
338
|
-
|
|
339
265
|
if (svgElement.hasAttribute("viewBox")) {
|
|
340
266
|
var _svgElement$getAttrib = svgElement.getAttribute("viewBox").split(/[\s,]/),
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
267
|
+
_svgElement$getAttrib2 = _slicedToArray(_svgElement$getAttrib, 2),
|
|
268
|
+
x = _svgElement$getAttrib2[0],
|
|
269
|
+
y = _svgElement$getAttrib2[1];
|
|
345
270
|
svgElement.setAttribute("viewBox", [x, y, width, height].join(" "));
|
|
346
271
|
}
|
|
347
|
-
|
|
348
272
|
updateViewGroupScale(svgElement, scale);
|
|
349
273
|
return scale;
|
|
350
274
|
};
|
|
351
|
-
|
|
352
275
|
var updateViewGroupScale = function updateViewGroupScale(svgElement, ratio) {
|
|
353
276
|
var viewGroup = svgElement.getElementById("viewGroup");
|
|
354
|
-
|
|
355
277
|
if (viewGroup) {
|
|
356
278
|
var _getScaleValues5 = getScaleValues(viewGroup),
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
279
|
+
_getScaleValues6 = _slicedToArray(_getScaleValues5, 2),
|
|
280
|
+
sx = _getScaleValues6[0],
|
|
281
|
+
sy = _getScaleValues6[1];
|
|
361
282
|
viewGroup.setAttribute("transform", "scale(".concat(sx / ratio, ",").concat(sy / ratio, ")"));
|
|
362
283
|
}
|
|
363
284
|
};
|
|
364
|
-
|
|
365
285
|
var cloneWithParent = function cloneWithParent(node, outermostParent) {
|
|
366
286
|
var n = node;
|
|
367
287
|
var clone = n.cloneNode(true); // the end node should be copied deeply
|
|
368
|
-
|
|
369
288
|
while (n.parentNode && n.parentNode !== outermostParent) {
|
|
370
289
|
var child = clone;
|
|
371
290
|
n = n.parentNode;
|
|
372
291
|
clone = n.cloneNode();
|
|
373
292
|
clone.appendChild(child);
|
|
374
293
|
}
|
|
375
|
-
|
|
376
294
|
return clone;
|
|
377
295
|
};
|
|
378
|
-
|
|
379
296
|
var traverseDOM = function traverseDOM(node, cb) {
|
|
380
297
|
cb(node);
|
|
381
298
|
var childNodes = node.childNodes;
|
|
382
299
|
var length = childNodes.length;
|
|
383
|
-
|
|
384
300
|
if (length > 0) {
|
|
385
301
|
for (var i = 0; i < length; i++) {
|
|
386
302
|
traverseDOM(childNodes[i], cb);
|
|
387
303
|
}
|
|
388
304
|
}
|
|
389
305
|
};
|
|
390
|
-
|
|
391
306
|
var collectEndNodes = function collectEndNodes(node) {
|
|
392
307
|
var nodes = [];
|
|
393
308
|
traverseDOM(node, function (node) {
|
|
@@ -397,145 +312,119 @@ var collectEndNodes = function collectEndNodes(node) {
|
|
|
397
312
|
});
|
|
398
313
|
return nodes;
|
|
399
314
|
};
|
|
400
|
-
|
|
401
315
|
var getEffectKey = function getEffectKey(svgAsString, srcCanvas) {
|
|
402
316
|
var width = srcCanvas.width,
|
|
403
|
-
|
|
317
|
+
height = srcCanvas.height;
|
|
404
318
|
return [svgAsString, width, height].join("-");
|
|
405
319
|
};
|
|
406
|
-
|
|
407
320
|
var createEffectImg = function () {
|
|
408
321
|
var cache = (0, _createCache.createCache)(10);
|
|
409
322
|
return /*#__PURE__*/function () {
|
|
410
|
-
var _createEffectImg = _asyncToGenerator( /*#__PURE__*/
|
|
323
|
+
var _createEffectImg = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(svgAsString, srcCanvas) {
|
|
411
324
|
var key, cachedResult, svgDoc, svgElement, _getSizeValues3, _getSizeValues4, cWidth, cHeight, aspectRatio, width, height, _createWorkingCanvas11, _createWorkingCanvas12, imageCanvas, ctx, designerLayer, childNodes, image, _getScaleValues7, _getScaleValues8, sx, sy, resultImgPromise;
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
_context4.next = 30;
|
|
465
|
-
return resultImgPromise;
|
|
466
|
-
|
|
467
|
-
case 30:
|
|
468
|
-
return _context4.abrupt("return", _context4.sent);
|
|
469
|
-
|
|
470
|
-
case 31:
|
|
471
|
-
case "end":
|
|
472
|
-
return _context4.stop();
|
|
473
|
-
}
|
|
325
|
+
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
326
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
327
|
+
case 0:
|
|
328
|
+
key = getEffectKey(svgAsString, srcCanvas);
|
|
329
|
+
_context4.next = 3;
|
|
330
|
+
return cache.get(key);
|
|
331
|
+
case 3:
|
|
332
|
+
cachedResult = _context4.sent;
|
|
333
|
+
if (!cachedResult) {
|
|
334
|
+
_context4.next = 6;
|
|
335
|
+
break;
|
|
336
|
+
}
|
|
337
|
+
return _context4.abrupt("return", cachedResult);
|
|
338
|
+
case 6:
|
|
339
|
+
svgDoc = new DOMParser().parseFromString(svgAsString, "image/svg+xml");
|
|
340
|
+
svgElement = svgDoc.getElementsByTagName("svg")[0];
|
|
341
|
+
_getSizeValues3 = getSizeValues(svgElement), _getSizeValues4 = _slicedToArray(_getSizeValues3, 2), cWidth = _getSizeValues4[0], cHeight = _getSizeValues4[1];
|
|
342
|
+
aspectRatio = cWidth / cHeight;
|
|
343
|
+
width = srcCanvas.width;
|
|
344
|
+
height = Math.round(width / aspectRatio);
|
|
345
|
+
setSvgSize(svgElement, {
|
|
346
|
+
width: width,
|
|
347
|
+
height: height
|
|
348
|
+
});
|
|
349
|
+
_createWorkingCanvas11 = (0, _createCanvas.createWorkingCanvas)({
|
|
350
|
+
width: width,
|
|
351
|
+
height: height
|
|
352
|
+
}), _createWorkingCanvas12 = _slicedToArray(_createWorkingCanvas11, 2), imageCanvas = _createWorkingCanvas12[0], ctx = _createWorkingCanvas12[1];
|
|
353
|
+
designerLayer = svgElement.getElementById("designerLayer") || svgElement.firstElementChild;
|
|
354
|
+
childNodes = collectEndNodes(designerLayer);
|
|
355
|
+
_context4.next = 18;
|
|
356
|
+
return Promise.all(childNodes.map(applyOnChildNode(imageCanvas, ctx, svgElement)));
|
|
357
|
+
case 18:
|
|
358
|
+
// in case of SVGImageElements with non external source the onLoad event is not fired in every browser (eg. Safari)
|
|
359
|
+
// but it still does the operation sequentially so we can use it directly after setting the href attribute
|
|
360
|
+
image = document.createElementNS(svgElement.namespaceURI, "image");
|
|
361
|
+
image.width.baseVal.value = width;
|
|
362
|
+
image.height.baseVal.value = height;
|
|
363
|
+
image.href.baseVal = imageCanvas.toDataURL();
|
|
364
|
+
_getScaleValues7 = getScaleValues(findOutermostNode(designerLayer, svgElement)), _getScaleValues8 = _slicedToArray(_getScaleValues7, 2), sx = _getScaleValues8[0], sy = _getScaleValues8[1];
|
|
365
|
+
image.setAttribute("transform", "scale(".concat(1 / sx, ",").concat(1 / sy, ")"));
|
|
366
|
+
designerLayer.innerHTML = "";
|
|
367
|
+
designerLayer.appendChild(image);
|
|
368
|
+
resultImgPromise = svgToImg(svgDoc);
|
|
369
|
+
cache.set(key, resultImgPromise);
|
|
370
|
+
_context4.next = 30;
|
|
371
|
+
return resultImgPromise;
|
|
372
|
+
case 30:
|
|
373
|
+
return _context4.abrupt("return", _context4.sent);
|
|
374
|
+
case 31:
|
|
375
|
+
case "end":
|
|
376
|
+
return _context4.stop();
|
|
474
377
|
}
|
|
475
378
|
}, _callee4);
|
|
476
379
|
}));
|
|
477
|
-
|
|
478
380
|
function createEffectImg(_x7, _x8) {
|
|
479
381
|
return _createEffectImg.apply(this, arguments);
|
|
480
382
|
}
|
|
481
|
-
|
|
482
383
|
return createEffectImg;
|
|
483
384
|
}();
|
|
484
385
|
}();
|
|
485
|
-
|
|
486
386
|
function embroideryEffect(_x9) {
|
|
487
387
|
return _embroideryEffect.apply(this, arguments);
|
|
488
388
|
}
|
|
489
|
-
|
|
490
389
|
function _embroideryEffect() {
|
|
491
|
-
_embroideryEffect = _asyncToGenerator( /*#__PURE__*/
|
|
390
|
+
_embroideryEffect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(srcCanvas) {
|
|
492
391
|
var options,
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
return
|
|
501
|
-
while (1) {
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
width = img.width, height = img.height; // copy the created image over the src canvas
|
|
530
|
-
|
|
531
|
-
srcCtx = srcCanvas.getContext("2d");
|
|
532
|
-
srcCtx.clearRect(0, 0, width, height);
|
|
533
|
-
srcCtx.drawImage(img, 0, 0);
|
|
534
|
-
|
|
535
|
-
case 16:
|
|
536
|
-
case "end":
|
|
537
|
-
return _context5.stop();
|
|
538
|
-
}
|
|
392
|
+
getSvg,
|
|
393
|
+
svgAsString,
|
|
394
|
+
img,
|
|
395
|
+
width,
|
|
396
|
+
height,
|
|
397
|
+
srcCtx,
|
|
398
|
+
_args5 = arguments;
|
|
399
|
+
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
|
|
400
|
+
while (1) switch (_context5.prev = _context5.next) {
|
|
401
|
+
case 0:
|
|
402
|
+
options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
|
|
403
|
+
_context5.next = 3;
|
|
404
|
+
return imagePreloader.loadAll();
|
|
405
|
+
case 3:
|
|
406
|
+
getSvg = options.getSvg;
|
|
407
|
+
if (getSvg) {
|
|
408
|
+
_context5.next = 6;
|
|
409
|
+
break;
|
|
410
|
+
}
|
|
411
|
+
throw new Error("The getSvg function must be provided for the embroidery effect!");
|
|
412
|
+
case 6:
|
|
413
|
+
_context5.next = 8;
|
|
414
|
+
return getSvg();
|
|
415
|
+
case 8:
|
|
416
|
+
svgAsString = _context5.sent;
|
|
417
|
+
_context5.next = 11;
|
|
418
|
+
return createEffectImg(svgAsString, srcCanvas);
|
|
419
|
+
case 11:
|
|
420
|
+
img = _context5.sent;
|
|
421
|
+
width = img.width, height = img.height; // copy the created image over the src canvas
|
|
422
|
+
srcCtx = srcCanvas.getContext("2d");
|
|
423
|
+
srcCtx.clearRect(0, 0, width, height);
|
|
424
|
+
srcCtx.drawImage(img, 0, 0);
|
|
425
|
+
case 16:
|
|
426
|
+
case "end":
|
|
427
|
+
return _context5.stop();
|
|
539
428
|
}
|
|
540
429
|
}, _callee5);
|
|
541
430
|
}));
|