redhotmagma-visualization 1.28.4 → 1.29.0

package/PrintingEffects/EmbroideryEffect.js

@@ -0,0 +1,541 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.embroideryEffect = embroideryEffect;
+
+var _createCanvas = require("../Utils/createCanvas");
+
+var _imagePreloader = require("../Utils/imagePreloader");
+
+var _createCache = require("../Utils/createCache");
+
+var _embroidery_screen = _interopRequireDefault(require("./resources/embroidery_screen.jpg"));
+
+var _embroidery_multiply = _interopRequireDefault(require("./resources/embroidery_multiply.jpg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; } } }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+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."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+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); } }
+
+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); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var imagePreloader = (0, _imagePreloader.createImagePreloader)([_embroidery_screen["default"], _embroidery_multiply["default"]]);
+var SVG_DATA_URL_HDR = "data:image/svg+xml;base64,";
+
+var getScaleValues = function getScaleValues(node) {
+  var transform = node.getAttribute("transform") || "";
+  var matches = transform.match(/scale\(([^)]+)\)/);
+
+  if (matches) {
+    var _matches$1$split$map = matches[1].split(",").map(window.parseFloat),
+        _matches$1$split$map2 = _slicedToArray(_matches$1$split$map, 2),
+        x = _matches$1$split$map2[0],
+        y = _matches$1$split$map2[1];
+
+    return [x, y || x];
+  }
+
+  return [1, 1];
+};
+
+var getRotateValue = function getRotateValue(node) {
+  var transform = node.getAttribute("transform") || "";
+  var matches = transform.match(/rotate\(([^)]+)\)/);
+
+  if (matches) {
+    return window.parseFloat(matches[1]);
+  }
+
+  return 0;
+};
+
+var getSizeValues = function getSizeValues(svgNode) {
+  return [parseFloat(svgNode.getAttribute("width")) || 0, parseFloat(svgNode.getAttribute("height")) || 0];
+};
+
+var findOutermostNode = function findOutermostNode(node, container) {
+  return node.parentNode ? node.parentNode === container ? node : findOutermostNode(node.parentNode, container) : node;
+};
+
+var svgToImg = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(svgElement) {
+    var svgImg;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return new Promise(function (resolve, reject) {
+              var img = document.createElement("img");
+
+              img.onload = function () {
+                return resolve(img);
+              };
+
+              img.onerror = reject;
+              var xml = _typeof(svgElement) === "object" ? new XMLSerializer().serializeToString(svgElement) : svgElement;
+              var svg64 = btoa(xml);
+              img.src = "data:image/svg+xml;base64," + svg64;
+            });
+
+          case 2:
+            svgImg = _context.sent;
+            _context.next = 5;
+            return new Promise(function (resolve) {
+              setTimeout(function () {
+                // some browsers may have issues with applying effects on images with svg source
+                // therefore it has to be converted to a canvas before
+                // it also has to be performed in a new event to make sure the image content is available
+                var _createWorkingCanvas = (0, _createCanvas.createWorkingCanvas)(svgImg, true),
+                    _createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 1),
+                    svgCanvas = _createWorkingCanvas2[0];
+
+                resolve(svgCanvas);
+              });
+            });
+
+          case 5:
+            return _context.abrupt("return", _context.sent);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function svgToImg(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var applyOnEmbeddedSvg = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(imageNode, imageCanvas, ctx, rootSvgElement) {
+    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;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            outermostGroup = findOutermostNode(imageNode, rootSvgElement);
+            _getScaleValues = getScaleValues(outermostGroup), _getScaleValues2 = _slicedToArray(_getScaleValues, 2), rootScaleX = _getScaleValues2[0], rootScaleY = _getScaleValues2[1];
+            _getScaleValues3 = getScaleValues(imageNode), _getScaleValues4 = _slicedToArray(_getScaleValues3, 2), imgScaleX = _getScaleValues4[0], imgScaleY = _getScaleValues4[1];
+            _getSizeValues = getSizeValues(rootSvgElement), _getSizeValues2 = _slicedToArray(_getSizeValues, 1), rootWidth = _getSizeValues2[0];
+            canvasWidth = imageCanvas.width;
+            svgToCanvasRatio = canvasWidth / rootWidth;
+            scaleX = imgScaleX * rootScaleX * svgToCanvasRatio;
+            scaleY = imgScaleY * rootScaleY * svgToCanvasRatio;
+            size = {
+              width: parseFloat(imageNode.getAttribute("width")) * scaleX,
+              height: parseFloat(imageNode.getAttribute("height")) * scaleY
+            };
+            _createWorkingCanvas3 = (0, _createCanvas.createWorkingCanvas)(size), _createWorkingCanvas4 = _slicedToArray(_createWorkingCanvas3, 2), tmpCanvas = _createWorkingCanvas4[0], tmpCtx = _createWorkingCanvas4[1];
+            _context2.prev = 10;
+            svgAsString = window.atob(getImageSrc(imageNode).substring(SVG_DATA_URL_HDR.length));
+            svgDoc = new DOMParser().parseFromString(svgAsString, "image/svg+xml");
+            svgElement = svgDoc.getElementsByTagName("svg")[0];
+            _context2.next = 16;
+            return Promise.all(Array.from(svgElement.childNodes).map(applyOnChildNode(tmpCanvas, tmpCtx, svgElement)));
+
+          case 16:
+            ctx.save(); // apply element transformations
+
+            x = parseFloat(imageNode.getAttribute("x"));
+            y = parseFloat(imageNode.getAttribute("y"));
+            angle = getRotateValue(imageNode) / 180 * Math.PI;
+            ctx.rotate(angle);
+            ctx.translate(x * scaleX, y * scaleY);
+            ctx.drawImage(tmpCanvas, 0, 0);
+            ctx.restore();
+            _context2.next = 29;
+            break;
+
+          case 26:
+            _context2.prev = 26;
+            _context2.t0 = _context2["catch"](10);
+            // eslint-disable-next-line no-console
+            console.error("Error during embedded svg image processing!", _context2.t0);
+
+          case 29:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[10, 26]]);
+  }));
+
+  return function applyOnEmbeddedSvg(_x2, _x3, _x4, _x5) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var getImageSrc = function getImageSrc(imageNode) {
+  return imageNode.getAttribute("href") || imageNode.getAttribute("xlink:href");
+};
+
+var applyOnChildNode = function applyOnChildNode(imageCanvas, ctx, svgElement) {
+  return /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(node) {
+      var partialSvg, img, rotation, _createWorkingCanvas5, _createWorkingCanvas6, multiplyPatternCanvas, multiplyPatternContext, patternSize, _createWorkingCanvas7, _createWorkingCanvas8, screenPatternCanvas, screenPatternContext, _createWorkingCanvas9, _createWorkingCanvas10, ocvs, octx;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(node.getAttribute("visibility") === "hidden")) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 2:
+              if (!(node.tagName === "image")) {
+                _context3.next = 7;
+                break;
+              }
+
+              if (!getImageSrc(node).startsWith(SVG_DATA_URL_HDR)) {
+                _context3.next = 7;
+                break;
+              }
+
+              _context3.next = 6;
+              return applyOnEmbeddedSvg(node, imageCanvas, ctx, svgElement);
+
+            case 6:
+              return _context3.abrupt("return");
+
+            case 7:
+              partialSvg = createSvgChunk(imageCanvas, svgElement, node);
+
+              if (partialSvg) {
+                _context3.next = 10;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 10:
+              _context3.next = 12;
+              return svgToImg(partialSvg);
+
+            case 12:
+              img = _context3.sent;
+              rotation = Math.random() * Math.PI;
+              _createWorkingCanvas5 = (0, _createCanvas.createWorkingCanvas)(imageCanvas), _createWorkingCanvas6 = _slicedToArray(_createWorkingCanvas5, 2), multiplyPatternCanvas = _createWorkingCanvas6[0], multiplyPatternContext = _createWorkingCanvas6[1];
+              multiplyPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(_embroidery_multiply["default"]), "repeat");
+              patternSize = Math.max(img.width, img.height) * 4;
+              multiplyPatternContext.rotate(rotation);
+              multiplyPatternContext.fillRect(-patternSize / 2, -patternSize / 2, patternSize, patternSize);
+              _createWorkingCanvas7 = (0, _createCanvas.createWorkingCanvas)(imageCanvas), _createWorkingCanvas8 = _slicedToArray(_createWorkingCanvas7, 2), screenPatternCanvas = _createWorkingCanvas8[0], screenPatternContext = _createWorkingCanvas8[1];
+              screenPatternContext.fillStyle = ctx.createPattern(imagePreloader.get(_embroidery_screen["default"]), "repeat");
+              screenPatternContext.rotate(rotation);
+              screenPatternContext.fillRect(-patternSize / 2, -patternSize / 2, patternSize, patternSize);
+              _createWorkingCanvas9 = (0, _createCanvas.createWorkingCanvas)(imageCanvas), _createWorkingCanvas10 = _slicedToArray(_createWorkingCanvas9, 2), ocvs = _createWorkingCanvas10[0], octx = _createWorkingCanvas10[1]; // Add multiply Effect
+
+              octx.globalCompositeOperation = "destination-atop";
+              octx.drawImage(multiplyPatternCanvas, 0, 0);
+              octx.drawImage(img, 0, 0);
+              ctx.globalCompositeOperation = "screen";
+              ctx.drawImage(ocvs, 0, 0); // Add Screen Effect
+
+              octx.globalCompositeOperation = "destination-atop";
+              octx.drawImage(screenPatternCanvas, 0, 0);
+              octx.drawImage(img, 0, 0);
+              ctx.globalCompositeOperation = "multiply";
+              ctx.drawImage(ocvs, 0, 0); // Draw SVG again behind
+
+              ctx.globalCompositeOperation = "multiply";
+              ctx.drawImage(img, 0, 0);
+
+            case 36:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function (_x6) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+};
+
+var createSvgChunk = function createSvgChunk(imageCanvas, svgRoot, endNode) {
+  var styleTags = ["style", "defs"];
+
+  if (endNode.nodeType === Node.TEXT_NODE || styleTags.indexOf(endNode.tagName) !== -1) {
+    return false;
+  }
+
+  var chunk = svgRoot.cloneNode();
+
+  for (var _i2 = 0, _styleTags = styleTags; _i2 < _styleTags.length; _i2++) {
+    var tagName = _styleTags[_i2];
+
+    var elements = _toConsumableArray(svgRoot.getElementsByTagName(tagName));
+
+    var _iterator = _createForOfIteratorHelper(elements),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var element = _step.value;
+        chunk.appendChild(element.cloneNode(true));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+
+  chunk.appendChild(cloneWithParent(endNode, svgRoot));
+  var width = imageCanvas.width,
+      height = imageCanvas.height;
+  chunk.setAttribute("width", width);
+  chunk.setAttribute("height", height);
+  return chunk;
+};
+
+var setSvgSize = function setSvgSize(svgElement, _ref4) {
+  var width = _ref4.width,
+      height = _ref4.height;
+  var scale = svgElement.getAttribute("width") / width;
+  svgElement.setAttribute("width", width);
+  svgElement.setAttribute("height", height);
+
+  if (svgElement.hasAttribute("viewBox")) {
+    var _svgElement$getAttrib = svgElement.getAttribute("viewBox").split(","),
+        _svgElement$getAttrib2 = _slicedToArray(_svgElement$getAttrib, 2),
+        x = _svgElement$getAttrib2[0],
+        y = _svgElement$getAttrib2[1];
+
+    svgElement.setAttribute("viewBox", [x, y, width, height].join(" "));
+  }
+
+  updateViewGroupScale(svgElement, scale);
+  return scale;
+};
+
+var updateViewGroupScale = function updateViewGroupScale(svgElement, ratio) {
+  var viewGroup = svgElement.getElementById("viewGroup");
+
+  if (viewGroup) {
+    var _getScaleValues5 = getScaleValues(viewGroup),
+        _getScaleValues6 = _slicedToArray(_getScaleValues5, 2),
+        sx = _getScaleValues6[0],
+        sy = _getScaleValues6[1];
+
+    viewGroup.setAttribute("transform", "scale(".concat(sx / ratio, ",").concat(sy / ratio, ")"));
+  }
+};
+
+var cloneWithParent = function cloneWithParent(node, outermostParent) {
+  var n = node;
+  var clone = n.cloneNode(true); // the end node should be copied deeply
+
+  while (n.parentNode && n.parentNode !== outermostParent) {
+    var child = clone;
+    n = n.parentNode;
+    clone = n.cloneNode();
+    clone.appendChild(child);
+  }
+
+  return clone;
+};
+
+var traverseDOM = function traverseDOM(node, cb) {
+  cb(node);
+  var childNodes = node.childNodes;
+  var length = childNodes.length;
+
+  if (length > 0) {
+    for (var i = 0; i < length; i++) {
+      traverseDOM(childNodes[i], cb);
+    }
+  }
+};
+
+var collectEndNodes = function collectEndNodes(node) {
+  var nodes = [];
+  traverseDOM(node, function (node) {
+    if (node.tagName === "path" || node.tagName === "image") {
+      nodes.push(node);
+    }
+  });
+  return nodes;
+};
+
+var getEffectKey = function getEffectKey(svgAsString, srcCanvas) {
+  var width = srcCanvas.width,
+      height = srcCanvas.height;
+  return [svgAsString, width, height].join("-");
+};
+
+var createEffectImg = function () {
+  var cache = (0, _createCache.createCache)(10);
+  return /*#__PURE__*/function () {
+    var _createEffectImg = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(svgAsString, srcCanvas) {
+      var key, cachedResult, svgDoc, svgElement, _getSizeValues3, _getSizeValues4, cWidth, cHeight, aspectRatio, width, height, _createWorkingCanvas11, _createWorkingCanvas12, imageCanvas, ctx, designerLayer, childNodes, image, _getScaleValues7, _getScaleValues8, sx, sy, resultImgPromise;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              key = getEffectKey(svgAsString, srcCanvas);
+              _context4.next = 3;
+              return cache.get(key);
+
+            case 3:
+              cachedResult = _context4.sent;
+
+              if (!cachedResult) {
+                _context4.next = 6;
+                break;
+              }
+
+              return _context4.abrupt("return", cachedResult);
+
+            case 6:
+              svgDoc = new DOMParser().parseFromString(svgAsString, "image/svg+xml");
+              svgElement = svgDoc.getElementsByTagName("svg")[0];
+              _getSizeValues3 = getSizeValues(svgElement), _getSizeValues4 = _slicedToArray(_getSizeValues3, 2), cWidth = _getSizeValues4[0], cHeight = _getSizeValues4[1];
+              aspectRatio = cWidth / cHeight;
+              width = srcCanvas.width;
+              height = Math.round(width / aspectRatio);
+              setSvgSize(svgElement, {
+                width: width,
+                height: height
+              });
+              _createWorkingCanvas11 = (0, _createCanvas.createWorkingCanvas)({
+                width: width,
+                height: height
+              }), _createWorkingCanvas12 = _slicedToArray(_createWorkingCanvas11, 2), imageCanvas = _createWorkingCanvas12[0], ctx = _createWorkingCanvas12[1];
+              designerLayer = svgElement.getElementById("designerLayer") || svgElement.firstElementChild;
+              childNodes = collectEndNodes(designerLayer);
+              _context4.next = 18;
+              return Promise.all(childNodes.map(applyOnChildNode(imageCanvas, ctx, svgElement)));
+
+            case 18:
+              // in case of SVGImageElements with non external source the onLoad event is not fired in every browser (eg. Safari)
+              // but it still does the operation sequentially so we can use it directly after setting the href attribute
+              image = document.createElementNS(svgElement.namespaceURI, "image");
+              image.width.baseVal.value = width;
+              image.height.baseVal.value = height;
+              image.href.baseVal = imageCanvas.toDataURL();
+              _getScaleValues7 = getScaleValues(findOutermostNode(designerLayer, svgElement)), _getScaleValues8 = _slicedToArray(_getScaleValues7, 2), sx = _getScaleValues8[0], sy = _getScaleValues8[1];
+              image.setAttribute("transform", "scale(".concat(1 / sx, ",").concat(1 / sy, ")"));
+              designerLayer.innerHTML = "";
+              designerLayer.appendChild(image);
+              resultImgPromise = svgToImg(svgDoc);
+              cache.set(key, resultImgPromise);
+              _context4.next = 30;
+              return resultImgPromise;
+
+            case 30:
+              return _context4.abrupt("return", _context4.sent);
+
+            case 31:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    function createEffectImg(_x7, _x8) {
+      return _createEffectImg.apply(this, arguments);
+    }
+
+    return createEffectImg;
+  }();
+}();
+
+function embroideryEffect(_x9) {
+  return _embroideryEffect.apply(this, arguments);
+}
+
+function _embroideryEffect() {
+  _embroideryEffect = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(srcCanvas) {
+    var options,
+        getSvg,
+        svgAsString,
+        img,
+        width,
+        height,
+        srcCtx,
+        _args5 = arguments;
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
+            _context5.next = 3;
+            return imagePreloader.loadAll();
+
+          case 3:
+            getSvg = options.getSvg;
+
+            if (getSvg) {
+              _context5.next = 6;
+              break;
+            }
+
+            throw new Error("The getSvg function must be provided for the embroidery effect!");
+
+          case 6:
+            _context5.next = 8;
+            return getSvg();
+
+          case 8:
+            svgAsString = _context5.sent;
+            _context5.next = 11;
+            return createEffectImg(svgAsString, srcCanvas);
+
+          case 11:
+            img = _context5.sent;
+            width = img.width, height = img.height; // copy the created image over the src canvas
+
+            srcCtx = srcCanvas.getContext("2d");
+            srcCtx.clearRect(0, 0, width, height);
+            srcCtx.drawImage(img, 0, 0);
+
+          case 16:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  }));
+  return _embroideryEffect.apply(this, arguments);
+}

package/PrintingEffects/EngravingEffect.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.engravingEffect = engravingEffect;
+
+var _createCanvas = require("../Utils/createCanvas");
+
+var _PrintingEffectsUtils = require("./PrintingEffectsUtils");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function engravingEffect(srcCanvas, options) {
+  var _options$effectOption = _objectSpread({}, options.effectOptions),
+      _options$effectOption2 = _options$effectOption.fillColor,
+      fillColor = _options$effectOption2 === void 0 ? "rgba(200,200,200,1.0)" : _options$effectOption2,
+      _options$effectOption3 = _options$effectOption.blur,
+      blur = _options$effectOption3 === void 0 ? 4 : _options$effectOption3;
+
+  var shadows = [];
+  shadows.push({
+    blur: Math.max(2, 1 / options.currentZoom) * blur * 4,
+    color: "rgba(0, 0, 0, 0.5)",
+    offsetX: 0,
+    offsetY: 1
+  });
+  modifyImage(srcCanvas, shadows, fillColor);
+}
+
+function modifyImage(srcCanvas, shadows, fillColor) {
+  var _createWorkingCanvas = (0, _createCanvas.createWorkingCanvas)(srcCanvas),
+      _createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 2),
+      imageCanvas = _createWorkingCanvas2[0],
+      ctx = _createWorkingCanvas2[1];
+
+  if (fillColor !== undefined) {
+    var backgroundCanvas = (0, _PrintingEffectsUtils.createBackgroundCanvas)(srcCanvas, fillColor, imageCanvas.width, imageCanvas.height);
+    var negativeCanvas = (0, _PrintingEffectsUtils.createNegativeCanvas)(srcCanvas, "#888", imageCanvas.width, imageCanvas.height);
+    var shadowCanvas = (0, _PrintingEffectsUtils.createShadowCanvas)(negativeCanvas, shadows, imageCanvas.width, imageCanvas.height); // Draw shadow on background
+
+    ctx.drawImage(backgroundCanvas, 0, 0);
+    ctx.drawImage(shadowCanvas, 0, 0);
+  }
+
+  var srcCtx = srcCanvas.getContext("2d");
+  srcCtx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
+  srcCtx.drawImage(imageCanvas, 0, 0);
+}