redhotmagma-visualization 1.51.0 → 1.51.2
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 +21 -30
- package/CommonUtils/Deferred.js +11 -19
- package/CommonUtils/Observable.js +23 -30
- package/CommonUtils/PropertyObserver.js +4 -10
- package/CommonUtils/SyncCurrentFunction.js +25 -31
- package/CommonUtils/SyncObservableEvent.js +4 -10
- package/CommonUtils/pointerEvent.js +9 -15
- package/Constants.js +2 -8
- package/DevApp.js +224 -236
- package/ExposedModules.js +4 -19
- package/FallbackVisualization.js +5 -12
- package/PrintingEffects/ColorEmbossingEffect.js +13 -19
- package/PrintingEffects/DomingEffect.js +13 -19
- package/PrintingEffects/EmbossingEffect.js +14 -20
- package/PrintingEffects/EmbroideryEffect.js +113 -128
- package/PrintingEffects/EngravingEffect.js +14 -20
- package/PrintingEffects/PrintingEffects.js +40 -48
- package/PrintingEffects/PrintingEffectsUtils.js +4 -13
- package/React/ReactBase.js +29 -37
- package/Three/Exporters/glTFExporter.js +3 -10
- package/Three/Three2D.js +441 -470
- package/Three/Three2DLayers.js +136 -148
- package/Three/Three3D.js +285 -302
- package/Three/Three3DScene.js +326 -341
- package/Three/ThreeBase.js +92 -104
- package/Utils/DesignArea/getDesignAreaCanvasSize.js +3 -10
- package/Utils/TextureBuilder/createTextureBuilder.js +57 -69
- package/Utils/TextureBuilder/textureBuilderFunctions.js +4 -10
- package/Utils/canvasBlur.js +2 -8
- package/Utils/createAlphaMapFromAlphaChannel.js +8 -13
- package/Utils/createBakedShadow.js +18 -25
- package/Utils/createCache.js +1 -7
- package/Utils/createCanvas.js +1 -7
- package/Utils/createImageRepository.js +38 -53
- package/Utils/disposeMaterial.js +7 -12
- package/Utils/getImageSize.js +1 -7
- package/Utils/imagePreloader.js +22 -29
- package/Utils/initTextureCanvas.js +10 -17
- package/Utils/isMobileDevice.js +1 -7
- package/Utils/optimizeTextureImage.js +8 -13
- package/Utils/rememberCameraViewOffset.js +1 -7
- package/Utils/removeObject.js +3 -9
- package/Utils/restrictCameraMovement.js +5 -12
- package/Utils/setLightShadow.js +3 -9
- package/Utils/setOrthographicCameraSize.js +1 -7
- package/Utils/updateFitSizeToElement.js +5 -11
- package/VisualizationContainer.js +46 -55
- package/VisualizationInterface.js +42 -50
- package/VisualizationProvider.js +8 -15
- package/index.js +4 -7
- package/package.json +2 -2
- package/src/Three/Exporters/glTFExporter.js +1 -1
- package/src/Three/Three3D.js +4 -4
- package/src/Three/Three3DScene.js +13 -3
- package/src/Utils/restrictCameraMovement.js +1 -1
- package/visualizationAdapterCreator.js +18 -27
|
@@ -1,31 +1,25 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.embroideryEffect = embroideryEffect;
|
|
7
|
-
var _createCanvas = require("../Utils/createCanvas");
|
|
8
|
-
var _imagePreloader = require("../Utils/imagePreloader");
|
|
9
|
-
var _createCache = require("../Utils/createCache");
|
|
10
|
-
var _embroidery_screen = _interopRequireDefault(require("./resources/embroidery_screen.jpg"));
|
|
11
|
-
var _embroidery_multiply = _interopRequireDefault(require("./resources/embroidery_multiply.jpg"));
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
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; } } }; }
|
|
14
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
1
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
2
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
15
3
|
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."); }
|
|
16
|
-
function _iterableToArray(
|
|
17
|
-
function _arrayWithoutHoles(
|
|
18
|
-
function
|
|
4
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
5
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
6
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
7
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
19
8
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
20
|
-
function asyncGeneratorStep(
|
|
21
|
-
function _asyncToGenerator(
|
|
22
|
-
function _slicedToArray(
|
|
9
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
10
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
11
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
23
12
|
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."); }
|
|
24
|
-
function _unsupportedIterableToArray(
|
|
25
|
-
function _arrayLikeToArray(
|
|
13
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
14
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
26
15
|
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; } }
|
|
27
|
-
function _arrayWithHoles(
|
|
28
|
-
|
|
16
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
17
|
+
import { createWorkingCanvas } from "../Utils/createCanvas";
|
|
18
|
+
import { createImagePreloader } from "../Utils/imagePreloader";
|
|
19
|
+
import { createCache } from "../Utils/createCache";
|
|
20
|
+
import screenImageSrc from "./resources/embroidery_screen.jpg";
|
|
21
|
+
import multiplyImageSrc from "./resources/embroidery_multiply.jpg";
|
|
22
|
+
var imagePreloader = createImagePreloader([screenImageSrc, multiplyImageSrc]);
|
|
29
23
|
var SVG_DATA_URL_HDR = "data:image/svg+xml;base64,";
|
|
30
24
|
var getScaleValues = function getScaleValues(node) {
|
|
31
25
|
var transform = node.getAttribute("transform") || "";
|
|
@@ -64,7 +58,7 @@ var getPositionValues = function getPositionValues(node) {
|
|
|
64
58
|
var y = parseFloat(node.getAttribute("y")) || 0;
|
|
65
59
|
return [x, y];
|
|
66
60
|
};
|
|
67
|
-
var
|
|
61
|
+
var _getWorldTransformValues = function getWorldTransformValues(node) {
|
|
68
62
|
var _node$parentNode;
|
|
69
63
|
var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
70
64
|
translate: [0, 0],
|
|
@@ -86,23 +80,23 @@ var getWorldTransformValues = function getWorldTransformValues(node) {
|
|
|
86
80
|
values.scale[1] *= sy;
|
|
87
81
|
values.rotate += r;
|
|
88
82
|
if ((_node$parentNode = node.parentNode) !== null && _node$parentNode !== void 0 && _node$parentNode.getAttribute) {
|
|
89
|
-
|
|
83
|
+
_getWorldTransformValues(node.parentNode, values);
|
|
90
84
|
}
|
|
91
85
|
return values;
|
|
92
86
|
};
|
|
93
87
|
var getSizeValues = function getSizeValues(svgNode) {
|
|
94
88
|
return [parseFloat(svgNode.getAttribute("width")) || 0, parseFloat(svgNode.getAttribute("height")) || 0];
|
|
95
89
|
};
|
|
96
|
-
var
|
|
97
|
-
return node.parentNode ? node.parentNode === container ? node :
|
|
90
|
+
var _findOutermostNode = function findOutermostNode(node, container) {
|
|
91
|
+
return node.parentNode ? node.parentNode === container ? node : _findOutermostNode(node.parentNode, container) : node;
|
|
98
92
|
};
|
|
99
93
|
var svgToImg = /*#__PURE__*/function () {
|
|
100
|
-
var _ref = _asyncToGenerator(
|
|
94
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(svgElement) {
|
|
101
95
|
var svgImg;
|
|
102
|
-
return
|
|
103
|
-
while (1) switch (_context.
|
|
96
|
+
return _regenerator().w(function (_context) {
|
|
97
|
+
while (1) switch (_context.n) {
|
|
104
98
|
case 0:
|
|
105
|
-
_context.
|
|
99
|
+
_context.n = 1;
|
|
106
100
|
return new Promise(function (resolve, reject) {
|
|
107
101
|
var img = document.createElement("img");
|
|
108
102
|
img.onload = function () {
|
|
@@ -113,25 +107,22 @@ var svgToImg = /*#__PURE__*/function () {
|
|
|
113
107
|
var svg64 = btoa(xml);
|
|
114
108
|
img.src = "data:image/svg+xml;base64," + svg64;
|
|
115
109
|
});
|
|
116
|
-
case
|
|
117
|
-
svgImg = _context.
|
|
118
|
-
_context.
|
|
110
|
+
case 1:
|
|
111
|
+
svgImg = _context.v;
|
|
112
|
+
_context.n = 2;
|
|
119
113
|
return new Promise(function (resolve) {
|
|
120
114
|
setTimeout(function () {
|
|
121
115
|
// some browsers may have issues with applying effects on images with svg source
|
|
122
116
|
// therefore it has to be converted to a canvas before
|
|
123
117
|
// it also has to be performed in a new event to make sure the image content is available
|
|
124
|
-
var _createWorkingCanvas =
|
|
118
|
+
var _createWorkingCanvas = createWorkingCanvas(svgImg, true),
|
|
125
119
|
_createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 1),
|
|
126
120
|
svgCanvas = _createWorkingCanvas2[0];
|
|
127
121
|
resolve(svgCanvas);
|
|
128
122
|
});
|
|
129
123
|
});
|
|
130
|
-
case
|
|
131
|
-
return _context.
|
|
132
|
-
case 6:
|
|
133
|
-
case "end":
|
|
134
|
-
return _context.stop();
|
|
124
|
+
case 2:
|
|
125
|
+
return _context.a(2, _context.v);
|
|
135
126
|
}
|
|
136
127
|
}, _callee);
|
|
137
128
|
}));
|
|
@@ -140,29 +131,29 @@ var svgToImg = /*#__PURE__*/function () {
|
|
|
140
131
|
};
|
|
141
132
|
}();
|
|
142
133
|
var applyOnEmbeddedSvg = /*#__PURE__*/function () {
|
|
143
|
-
var _ref2 = _asyncToGenerator(
|
|
144
|
-
var _getSizeValues, _getSizeValues2, rootWidth, canvasWidth, svgToCanvasRatio, worldTransformValues, scaleX, scaleY, size, _createWorkingCanvas3, _createWorkingCanvas4, tmpCanvas, tmpCtx, svgAsString, svgDoc, svgElement, _worldTransformValues, wx, wy, _getPositionValues, _getPositionValues2, px, py, angle;
|
|
145
|
-
return
|
|
146
|
-
while (1) switch (_context2.
|
|
134
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(imageNode, imageCanvas, ctx, rootSvgElement) {
|
|
135
|
+
var _getSizeValues, _getSizeValues2, rootWidth, canvasWidth, svgToCanvasRatio, worldTransformValues, scaleX, scaleY, size, _createWorkingCanvas3, _createWorkingCanvas4, tmpCanvas, tmpCtx, svgAsString, svgDoc, svgElement, _worldTransformValues, wx, wy, _getPositionValues, _getPositionValues2, px, py, angle, _t;
|
|
136
|
+
return _regenerator().w(function (_context2) {
|
|
137
|
+
while (1) switch (_context2.p = _context2.n) {
|
|
147
138
|
case 0:
|
|
148
139
|
_getSizeValues = getSizeValues(rootSvgElement), _getSizeValues2 = _slicedToArray(_getSizeValues, 1), rootWidth = _getSizeValues2[0];
|
|
149
140
|
canvasWidth = imageCanvas.width;
|
|
150
141
|
svgToCanvasRatio = canvasWidth / rootWidth;
|
|
151
|
-
worldTransformValues =
|
|
142
|
+
worldTransformValues = _getWorldTransformValues(imageNode);
|
|
152
143
|
scaleX = worldTransformValues.scale[0] * svgToCanvasRatio;
|
|
153
144
|
scaleY = worldTransformValues.scale[1] * svgToCanvasRatio;
|
|
154
145
|
size = {
|
|
155
146
|
width: parseFloat(imageNode.getAttribute("width")) * scaleX,
|
|
156
147
|
height: parseFloat(imageNode.getAttribute("height")) * scaleY
|
|
157
148
|
};
|
|
158
|
-
_createWorkingCanvas3 =
|
|
159
|
-
_context2.
|
|
149
|
+
_createWorkingCanvas3 = createWorkingCanvas(size), _createWorkingCanvas4 = _slicedToArray(_createWorkingCanvas3, 2), tmpCanvas = _createWorkingCanvas4[0], tmpCtx = _createWorkingCanvas4[1];
|
|
150
|
+
_context2.p = 1;
|
|
160
151
|
svgAsString = window.atob(getImageSrc(imageNode).substring(SVG_DATA_URL_HDR.length));
|
|
161
152
|
svgDoc = new DOMParser().parseFromString(svgAsString, "image/svg+xml");
|
|
162
153
|
svgElement = svgDoc.getElementsByTagName("svg")[0];
|
|
163
|
-
_context2.
|
|
154
|
+
_context2.n = 2;
|
|
164
155
|
return Promise.all(Array.from(svgElement.childNodes).map(applyOnChildNode(tmpCanvas, tmpCtx, svgElement)));
|
|
165
|
-
case
|
|
156
|
+
case 2:
|
|
166
157
|
ctx.save();
|
|
167
158
|
|
|
168
159
|
// apply element transformations
|
|
@@ -174,18 +165,17 @@ var applyOnEmbeddedSvg = /*#__PURE__*/function () {
|
|
|
174
165
|
ctx.translate(px * scaleX, py * scaleY);
|
|
175
166
|
ctx.drawImage(tmpCanvas, 0, 0);
|
|
176
167
|
ctx.restore();
|
|
177
|
-
_context2.
|
|
168
|
+
_context2.n = 4;
|
|
178
169
|
break;
|
|
179
|
-
case
|
|
180
|
-
_context2.
|
|
181
|
-
|
|
170
|
+
case 3:
|
|
171
|
+
_context2.p = 3;
|
|
172
|
+
_t = _context2.v;
|
|
182
173
|
// eslint-disable-next-line no-console
|
|
183
|
-
console.error("Error during embedded svg image processing!",
|
|
184
|
-
case
|
|
185
|
-
|
|
186
|
-
return _context2.stop();
|
|
174
|
+
console.error("Error during embedded svg image processing!", _t);
|
|
175
|
+
case 4:
|
|
176
|
+
return _context2.a(2);
|
|
187
177
|
}
|
|
188
|
-
}, _callee2, null, [[
|
|
178
|
+
}, _callee2, null, [[1, 3]]);
|
|
189
179
|
}));
|
|
190
180
|
return function applyOnEmbeddedSvg(_x2, _x3, _x4, _x5) {
|
|
191
181
|
return _ref2.apply(this, arguments);
|
|
@@ -196,52 +186,52 @@ var getImageSrc = function getImageSrc(imageNode) {
|
|
|
196
186
|
};
|
|
197
187
|
var applyOnChildNode = function applyOnChildNode(imageCanvas, ctx, svgElement) {
|
|
198
188
|
return /*#__PURE__*/function () {
|
|
199
|
-
var _ref3 = _asyncToGenerator(
|
|
200
|
-
var partialSvg, img, rotation, _createWorkingCanvas5, _createWorkingCanvas6, multiplyPatternCanvas, multiplyPatternContext, patternSize, _createWorkingCanvas7, _createWorkingCanvas8, screenPatternCanvas, screenPatternContext, _createWorkingCanvas9,
|
|
201
|
-
return
|
|
202
|
-
while (1) switch (_context3.
|
|
189
|
+
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(node) {
|
|
190
|
+
var partialSvg, img, rotation, _createWorkingCanvas5, _createWorkingCanvas6, multiplyPatternCanvas, multiplyPatternContext, patternSize, _createWorkingCanvas7, _createWorkingCanvas8, screenPatternCanvas, screenPatternContext, _createWorkingCanvas9, _createWorkingCanvas0, ocvs, octx;
|
|
191
|
+
return _regenerator().w(function (_context3) {
|
|
192
|
+
while (1) switch (_context3.n) {
|
|
203
193
|
case 0:
|
|
204
194
|
if (!(node.nodeType === 3 /** ignore text nodes **/ || node.getAttribute("visibility") === "hidden")) {
|
|
205
|
-
_context3.
|
|
195
|
+
_context3.n = 1;
|
|
206
196
|
break;
|
|
207
197
|
}
|
|
208
|
-
return _context3.
|
|
209
|
-
case
|
|
198
|
+
return _context3.a(2);
|
|
199
|
+
case 1:
|
|
210
200
|
if (!(node.tagName === "image")) {
|
|
211
|
-
_context3.
|
|
201
|
+
_context3.n = 3;
|
|
212
202
|
break;
|
|
213
203
|
}
|
|
214
204
|
if (!getImageSrc(node).startsWith(SVG_DATA_URL_HDR)) {
|
|
215
|
-
_context3.
|
|
205
|
+
_context3.n = 3;
|
|
216
206
|
break;
|
|
217
207
|
}
|
|
218
|
-
_context3.
|
|
208
|
+
_context3.n = 2;
|
|
219
209
|
return applyOnEmbeddedSvg(node, imageCanvas, ctx, svgElement);
|
|
220
|
-
case
|
|
221
|
-
return _context3.
|
|
222
|
-
case
|
|
210
|
+
case 2:
|
|
211
|
+
return _context3.a(2);
|
|
212
|
+
case 3:
|
|
223
213
|
partialSvg = createSvgChunk(imageCanvas, svgElement, node);
|
|
224
214
|
if (partialSvg) {
|
|
225
|
-
_context3.
|
|
215
|
+
_context3.n = 4;
|
|
226
216
|
break;
|
|
227
217
|
}
|
|
228
|
-
return _context3.
|
|
229
|
-
case
|
|
230
|
-
_context3.
|
|
218
|
+
return _context3.a(2);
|
|
219
|
+
case 4:
|
|
220
|
+
_context3.n = 5;
|
|
231
221
|
return svgToImg(partialSvg);
|
|
232
|
-
case
|
|
233
|
-
img = _context3.
|
|
222
|
+
case 5:
|
|
223
|
+
img = _context3.v;
|
|
234
224
|
rotation = Math.random() * Math.PI;
|
|
235
|
-
_createWorkingCanvas5 =
|
|
236
|
-
multiplyPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(
|
|
225
|
+
_createWorkingCanvas5 = createWorkingCanvas(imageCanvas), _createWorkingCanvas6 = _slicedToArray(_createWorkingCanvas5, 2), multiplyPatternCanvas = _createWorkingCanvas6[0], multiplyPatternContext = _createWorkingCanvas6[1];
|
|
226
|
+
multiplyPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(multiplyImageSrc), "repeat");
|
|
237
227
|
patternSize = Math.max(img.width, img.height) * 4;
|
|
238
228
|
multiplyPatternContext.rotate(rotation);
|
|
239
229
|
multiplyPatternContext.fillRect(-patternSize / 2, -patternSize / 2, patternSize, patternSize);
|
|
240
|
-
_createWorkingCanvas7 =
|
|
241
|
-
screenPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(
|
|
230
|
+
_createWorkingCanvas7 = createWorkingCanvas(imageCanvas), _createWorkingCanvas8 = _slicedToArray(_createWorkingCanvas7, 2), screenPatternCanvas = _createWorkingCanvas8[0], screenPatternContext = _createWorkingCanvas8[1];
|
|
231
|
+
screenPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(screenImageSrc), "repeat");
|
|
242
232
|
screenPatternContext.rotate(rotation);
|
|
243
233
|
screenPatternContext.fillRect(-patternSize / 2, -patternSize / 2, patternSize, patternSize);
|
|
244
|
-
_createWorkingCanvas9 =
|
|
234
|
+
_createWorkingCanvas9 = createWorkingCanvas(imageCanvas), _createWorkingCanvas0 = _slicedToArray(_createWorkingCanvas9, 2), ocvs = _createWorkingCanvas0[0], octx = _createWorkingCanvas0[1]; // Add multiply Effect
|
|
245
235
|
octx.globalCompositeOperation = "destination-atop";
|
|
246
236
|
octx.drawImage(multiplyPatternCanvas, 0, 0);
|
|
247
237
|
octx.drawImage(img, 0, 0);
|
|
@@ -258,9 +248,8 @@ var applyOnChildNode = function applyOnChildNode(imageCanvas, ctx, svgElement) {
|
|
|
258
248
|
// Draw SVG again behind
|
|
259
249
|
ctx.globalCompositeOperation = "multiply";
|
|
260
250
|
ctx.drawImage(img, 0, 0);
|
|
261
|
-
case
|
|
262
|
-
|
|
263
|
-
return _context3.stop();
|
|
251
|
+
case 6:
|
|
252
|
+
return _context3.a(2);
|
|
264
253
|
}
|
|
265
254
|
}, _callee3);
|
|
266
255
|
}));
|
|
@@ -335,19 +324,19 @@ var cloneWithParent = function cloneWithParent(node, outermostParent) {
|
|
|
335
324
|
}
|
|
336
325
|
return clone;
|
|
337
326
|
};
|
|
338
|
-
var
|
|
327
|
+
var _traverseDOM = function traverseDOM(node, cb) {
|
|
339
328
|
cb(node);
|
|
340
329
|
var childNodes = node.childNodes;
|
|
341
330
|
var length = childNodes.length;
|
|
342
331
|
if (length > 0) {
|
|
343
332
|
for (var i = 0; i < length; i++) {
|
|
344
|
-
|
|
333
|
+
_traverseDOM(childNodes[i], cb);
|
|
345
334
|
}
|
|
346
335
|
}
|
|
347
336
|
};
|
|
348
337
|
var collectEndNodes = function collectEndNodes(node) {
|
|
349
338
|
var nodes = [];
|
|
350
|
-
|
|
339
|
+
_traverseDOM(node, function (node) {
|
|
351
340
|
if (node.tagName === "path" || node.tagName === "image") {
|
|
352
341
|
nodes.push(node);
|
|
353
342
|
}
|
|
@@ -360,24 +349,24 @@ var getEffectKey = function getEffectKey(svgAsString, srcCanvas) {
|
|
|
360
349
|
return [svgAsString, width, height].join("-");
|
|
361
350
|
};
|
|
362
351
|
var createEffectImg = function () {
|
|
363
|
-
var cache =
|
|
352
|
+
var cache = createCache(10);
|
|
364
353
|
return /*#__PURE__*/function () {
|
|
365
|
-
var _createEffectImg = _asyncToGenerator(
|
|
366
|
-
var key, cachedResult, svgDoc, svgElement, _getSizeValues3, _getSizeValues4, cWidth, cHeight, aspectRatio, width, height,
|
|
367
|
-
return
|
|
368
|
-
while (1) switch (_context4.
|
|
354
|
+
var _createEffectImg = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(svgAsString, srcCanvas) {
|
|
355
|
+
var key, cachedResult, svgDoc, svgElement, _getSizeValues3, _getSizeValues4, cWidth, cHeight, aspectRatio, width, height, _createWorkingCanvas1, _createWorkingCanvas10, imageCanvas, ctx, designerLayer, childNodes, image, _getScaleValues5, _getScaleValues6, sx, sy, resultImgPromise;
|
|
356
|
+
return _regenerator().w(function (_context4) {
|
|
357
|
+
while (1) switch (_context4.n) {
|
|
369
358
|
case 0:
|
|
370
359
|
key = getEffectKey(svgAsString, srcCanvas);
|
|
371
|
-
_context4.
|
|
360
|
+
_context4.n = 1;
|
|
372
361
|
return cache.get(key);
|
|
373
|
-
case
|
|
374
|
-
cachedResult = _context4.
|
|
362
|
+
case 1:
|
|
363
|
+
cachedResult = _context4.v;
|
|
375
364
|
if (!cachedResult) {
|
|
376
|
-
_context4.
|
|
365
|
+
_context4.n = 2;
|
|
377
366
|
break;
|
|
378
367
|
}
|
|
379
|
-
return _context4.
|
|
380
|
-
case
|
|
368
|
+
return _context4.a(2, cachedResult);
|
|
369
|
+
case 2:
|
|
381
370
|
svgDoc = new DOMParser().parseFromString(svgAsString, "image/svg+xml");
|
|
382
371
|
svgElement = svgDoc.getElementsByTagName("svg")[0];
|
|
383
372
|
_getSizeValues3 = getSizeValues(svgElement), _getSizeValues4 = _slicedToArray(_getSizeValues3, 2), cWidth = _getSizeValues4[0], cHeight = _getSizeValues4[1];
|
|
@@ -388,34 +377,31 @@ var createEffectImg = function () {
|
|
|
388
377
|
width: width,
|
|
389
378
|
height: height
|
|
390
379
|
});
|
|
391
|
-
|
|
380
|
+
_createWorkingCanvas1 = createWorkingCanvas({
|
|
392
381
|
width: width,
|
|
393
382
|
height: height
|
|
394
|
-
}),
|
|
383
|
+
}), _createWorkingCanvas10 = _slicedToArray(_createWorkingCanvas1, 2), imageCanvas = _createWorkingCanvas10[0], ctx = _createWorkingCanvas10[1];
|
|
395
384
|
designerLayer = svgElement.getElementById("designerLayer") || svgElement.firstElementChild;
|
|
396
385
|
childNodes = collectEndNodes(designerLayer);
|
|
397
|
-
_context4.
|
|
386
|
+
_context4.n = 3;
|
|
398
387
|
return Promise.all(childNodes.map(applyOnChildNode(imageCanvas, ctx, svgElement)));
|
|
399
|
-
case
|
|
388
|
+
case 3:
|
|
400
389
|
// in case of SVGImageElements with non external source the onLoad event is not fired in every browser (eg. Safari)
|
|
401
390
|
// but it still does the operation sequentially so we can use it directly after setting the href attribute
|
|
402
391
|
image = document.createElementNS(svgElement.namespaceURI, "image");
|
|
403
392
|
image.width.baseVal.value = width;
|
|
404
393
|
image.height.baseVal.value = height;
|
|
405
394
|
image.href.baseVal = imageCanvas.toDataURL();
|
|
406
|
-
_getScaleValues5 = getScaleValues(
|
|
395
|
+
_getScaleValues5 = getScaleValues(_findOutermostNode(designerLayer, svgElement)), _getScaleValues6 = _slicedToArray(_getScaleValues5, 2), sx = _getScaleValues6[0], sy = _getScaleValues6[1];
|
|
407
396
|
image.setAttribute("transform", "scale(".concat(1 / sx, ",").concat(1 / sy, ")"));
|
|
408
397
|
designerLayer.innerHTML = "";
|
|
409
398
|
designerLayer.appendChild(image);
|
|
410
399
|
resultImgPromise = svgToImg(svgDoc);
|
|
411
400
|
cache.set(key, resultImgPromise);
|
|
412
|
-
_context4.
|
|
401
|
+
_context4.n = 4;
|
|
413
402
|
return resultImgPromise;
|
|
414
|
-
case
|
|
415
|
-
return _context4.
|
|
416
|
-
case 31:
|
|
417
|
-
case "end":
|
|
418
|
-
return _context4.stop();
|
|
403
|
+
case 4:
|
|
404
|
+
return _context4.a(2, _context4.v);
|
|
419
405
|
}
|
|
420
406
|
}, _callee4);
|
|
421
407
|
}));
|
|
@@ -425,11 +411,11 @@ var createEffectImg = function () {
|
|
|
425
411
|
return createEffectImg;
|
|
426
412
|
}();
|
|
427
413
|
}();
|
|
428
|
-
function embroideryEffect(_x9) {
|
|
414
|
+
export function embroideryEffect(_x9) {
|
|
429
415
|
return _embroideryEffect.apply(this, arguments);
|
|
430
416
|
}
|
|
431
417
|
function _embroideryEffect() {
|
|
432
|
-
_embroideryEffect = _asyncToGenerator(
|
|
418
|
+
_embroideryEffect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(srcCanvas) {
|
|
433
419
|
var options,
|
|
434
420
|
getSvg,
|
|
435
421
|
svgAsString,
|
|
@@ -438,35 +424,34 @@ function _embroideryEffect() {
|
|
|
438
424
|
height,
|
|
439
425
|
srcCtx,
|
|
440
426
|
_args5 = arguments;
|
|
441
|
-
return
|
|
442
|
-
while (1) switch (_context5.
|
|
427
|
+
return _regenerator().w(function (_context5) {
|
|
428
|
+
while (1) switch (_context5.n) {
|
|
443
429
|
case 0:
|
|
444
430
|
options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
|
|
445
|
-
_context5.
|
|
431
|
+
_context5.n = 1;
|
|
446
432
|
return imagePreloader.loadAll();
|
|
447
|
-
case
|
|
433
|
+
case 1:
|
|
448
434
|
getSvg = options.getSvg;
|
|
449
435
|
if (getSvg) {
|
|
450
|
-
_context5.
|
|
436
|
+
_context5.n = 2;
|
|
451
437
|
break;
|
|
452
438
|
}
|
|
453
439
|
throw new Error("The getSvg function must be provided for the embroidery effect!");
|
|
454
|
-
case
|
|
455
|
-
_context5.
|
|
440
|
+
case 2:
|
|
441
|
+
_context5.n = 3;
|
|
456
442
|
return getSvg();
|
|
457
|
-
case
|
|
458
|
-
svgAsString = _context5.
|
|
459
|
-
_context5.
|
|
443
|
+
case 3:
|
|
444
|
+
svgAsString = _context5.v;
|
|
445
|
+
_context5.n = 4;
|
|
460
446
|
return createEffectImg(svgAsString, srcCanvas);
|
|
461
|
-
case
|
|
462
|
-
img = _context5.
|
|
447
|
+
case 4:
|
|
448
|
+
img = _context5.v;
|
|
463
449
|
width = img.width, height = img.height; // copy the created image over the src canvas
|
|
464
450
|
srcCtx = srcCanvas.getContext("2d");
|
|
465
451
|
srcCtx.clearRect(0, 0, width, height);
|
|
466
452
|
srcCtx.drawImage(img, 0, 0);
|
|
467
|
-
case
|
|
468
|
-
|
|
469
|
-
return _context5.stop();
|
|
453
|
+
case 5:
|
|
454
|
+
return _context5.a(2);
|
|
470
455
|
}
|
|
471
456
|
}, _callee5);
|
|
472
457
|
}));
|
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.engravingEffect = engravingEffect;
|
|
7
|
-
var _createCanvas = require("../Utils/createCanvas");
|
|
8
|
-
var _PrintingEffectsUtils = require("./PrintingEffectsUtils");
|
|
9
1
|
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); }
|
|
10
|
-
function _slicedToArray(
|
|
2
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
11
3
|
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."); }
|
|
12
|
-
function _unsupportedIterableToArray(
|
|
13
|
-
function _arrayLikeToArray(
|
|
4
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
5
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
14
6
|
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; } }
|
|
15
|
-
function _arrayWithHoles(
|
|
7
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
16
8
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
9
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
|
-
function _defineProperty(
|
|
19
|
-
function _toPropertyKey(
|
|
20
|
-
function _toPrimitive(
|
|
21
|
-
|
|
10
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
12
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
|
+
import { createWorkingCanvas } from "../Utils/createCanvas";
|
|
14
|
+
import { createBackgroundCanvas, createNegativeCanvas, createShadowCanvas } from "./PrintingEffectsUtils";
|
|
15
|
+
export function engravingEffect(srcCanvas, options) {
|
|
22
16
|
var _options$effectOption = _objectSpread({}, options.effectOptions),
|
|
23
17
|
_options$effectOption2 = _options$effectOption.fillColor,
|
|
24
18
|
fillColor = _options$effectOption2 === void 0 ? "rgba(200,200,200,1.0)" : _options$effectOption2,
|
|
@@ -34,14 +28,14 @@ function engravingEffect(srcCanvas, options) {
|
|
|
34
28
|
modifyImage(srcCanvas, shadows, fillColor);
|
|
35
29
|
}
|
|
36
30
|
function modifyImage(srcCanvas, shadows, fillColor) {
|
|
37
|
-
var _createWorkingCanvas =
|
|
31
|
+
var _createWorkingCanvas = createWorkingCanvas(srcCanvas),
|
|
38
32
|
_createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 2),
|
|
39
33
|
imageCanvas = _createWorkingCanvas2[0],
|
|
40
34
|
ctx = _createWorkingCanvas2[1];
|
|
41
35
|
if (fillColor !== undefined) {
|
|
42
|
-
var backgroundCanvas =
|
|
43
|
-
var negativeCanvas =
|
|
44
|
-
var shadowCanvas =
|
|
36
|
+
var backgroundCanvas = createBackgroundCanvas(srcCanvas, fillColor, imageCanvas.width, imageCanvas.height);
|
|
37
|
+
var negativeCanvas = createNegativeCanvas(srcCanvas, "#888", imageCanvas.width, imageCanvas.height);
|
|
38
|
+
var shadowCanvas = createShadowCanvas(negativeCanvas, shadows, imageCanvas.width, imageCanvas.height);
|
|
45
39
|
|
|
46
40
|
// Draw shadow on background
|
|
47
41
|
ctx.drawImage(backgroundCanvas, 0, 0);
|