redhotmagma-visualization 1.46.2 → 1.46.3

package/PrintingEffects/EmbroideryEffect.js

@@ -47,6 +47,49 @@ var getRotateValue = function getRotateValue(node) {
   }
   return 0;
 };
+var getTranslateValues = function getTranslateValues(node) {
+  var transform = node.getAttribute("transform") || "";
+  var matches = transform.match(/translate\(([^)]+)\)/);
+  if (matches) {
+    var _matches$1$split$map3 = matches[1].split(",").map(window.parseFloat),
+      _matches$1$split$map4 = _slicedToArray(_matches$1$split$map3, 2),
+      x = _matches$1$split$map4[0],
+      y = _matches$1$split$map4[1];
+    return [x, y || x];
+  }
+  return [0, 0];
+};
+var getPositionValues = function getPositionValues(node) {
+  var x = parseFloat(node.getAttribute("x")) || 0;
+  var y = parseFloat(node.getAttribute("y")) || 0;
+  return [x, y];
+};
+var getWorldTransformValues = function getWorldTransformValues(node) {
+  var _node$parentNode;
+  var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    translate: [0, 0],
+    scale: [1, 1],
+    rotate: 0
+  };
+  var _getScaleValues = getScaleValues(node),
+    _getScaleValues2 = _slicedToArray(_getScaleValues, 2),
+    sx = _getScaleValues2[0],
+    sy = _getScaleValues2[1];
+  var _getTranslateValues = getTranslateValues(node),
+    _getTranslateValues2 = _slicedToArray(_getTranslateValues, 2),
+    tx = _getTranslateValues2[0],
+    ty = _getTranslateValues2[1];
+  var r = getRotateValue(node);
+  values.translate[0] = values.translate[0] * sx + tx;
+  values.translate[1] = values.translate[1] * sy + ty;
+  values.scale[0] *= sx;
+  values.scale[1] *= sy;
+  values.rotate += r;
+  if ((_node$parentNode = node.parentNode) !== null && _node$parentNode !== void 0 && _node$parentNode.getAttribute) {
+    getWorldTransformValues(node.parentNode, values);
+  }
+  return values;
+};
 var getSizeValues = function getSizeValues(svgNode) {
   return [parseFloat(svgNode.getAttribute("width")) || 0, parseFloat(svgNode.getAttribute("height")) || 0];
 };
@@ -98,52 +141,51 @@ var svgToImg = /*#__PURE__*/function () {
 }();
 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;
+    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;
     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;
+          worldTransformValues = getWorldTransformValues(imageNode);
+          scaleX = worldTransformValues.scale[0] * svgToCanvasRatio;
+          scaleY = worldTransformValues.scale[1] * 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;
+          _context2.prev = 8;
           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;
+          _context2.next = 14;
           return Promise.all(Array.from(svgElement.childNodes).map(applyOnChildNode(tmpCanvas, tmpCtx, svgElement)));
-        case 16:
+        case 14:
           ctx.save();
 
           // apply element transformations
-          x = parseFloat(imageNode.getAttribute("x"));
-          y = parseFloat(imageNode.getAttribute("y"));
-          angle = getRotateValue(imageNode) / 180 * Math.PI;
+          _worldTransformValues = _slicedToArray(worldTransformValues.translate, 2), wx = _worldTransformValues[0], wy = _worldTransformValues[1];
+          _getPositionValues = getPositionValues(imageNode), _getPositionValues2 = _slicedToArray(_getPositionValues, 2), px = _getPositionValues2[0], py = _getPositionValues2[1];
+          angle = worldTransformValues.rotate / 180 * Math.PI;
+          ctx.translate(wx * svgToCanvasRatio, wy * svgToCanvasRatio);
           ctx.rotate(angle);
-          ctx.translate(x * scaleX, y * scaleY);
+          ctx.translate(px * scaleX, py * scaleY);
           ctx.drawImage(tmpCanvas, 0, 0);
           ctx.restore();
-          _context2.next = 29;
+          _context2.next = 28;
           break;
-        case 26:
-          _context2.prev = 26;
-          _context2.t0 = _context2["catch"](10);
+        case 25:
+          _context2.prev = 25;
+          _context2.t0 = _context2["catch"](8);
           // eslint-disable-next-line no-console
           console.error("Error during embedded svg image processing!", _context2.t0);
-        case 29:
+        case 28:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[10, 26]]);
+    }, _callee2, null, [[8, 25]]);
   }));
   return function applyOnEmbeddedSvg(_x2, _x3, _x4, _x5) {
     return _ref2.apply(this, arguments);
@@ -275,10 +317,10 @@ var setSvgSize = function setSvgSize(svgElement, _ref4) {
 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];
+    var _getScaleValues3 = getScaleValues(viewGroup),
+      _getScaleValues4 = _slicedToArray(_getScaleValues3, 2),
+      sx = _getScaleValues4[0],
+      sy = _getScaleValues4[1];
     viewGroup.setAttribute("transform", "scale(".concat(sx / ratio, ",").concat(sy / ratio, ")"));
   }
 };
@@ -321,7 +363,7 @@ 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;
+      var key, cachedResult, svgDoc, svgElement, _getSizeValues3, _getSizeValues4, cWidth, cHeight, aspectRatio, width, height, _createWorkingCanvas11, _createWorkingCanvas12, imageCanvas, ctx, designerLayer, childNodes, image, _getScaleValues5, _getScaleValues6, sx, sy, resultImgPromise;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -361,7 +403,7 @@ var createEffectImg = function () {
             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];
+            _getScaleValues5 = getScaleValues(findOutermostNode(designerLayer, svgElement)), _getScaleValues6 = _slicedToArray(_getScaleValues5, 2), sx = _getScaleValues6[0], sy = _getScaleValues6[1];
             image.setAttribute("transform", "scale(".concat(1 / sx, ",").concat(1 / sy, ")"));
             designerLayer.innerHTML = "";
             designerLayer.appendChild(image);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.46.2",
+  "version": "1.46.3",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.46.2",
+    "@configuratorware/scripts": "1.46.3",
     "@tweenjs/tween.js": "^17.6.0",
     "console-polyfill": "^0.3.0",
     "css-element-queries": "^1.2.3",

package/src/PrintingEffects/EmbroideryEffect.js

@@ -27,6 +27,37 @@ const getRotateValue = node => {
   return 0;
 };
 
+const getTranslateValues = node => {
+  const transform = node.getAttribute("transform") || "";
+  const matches = transform.match(/translate\(([^)]+)\)/);
+  if (matches) {
+    const [x, y] = matches[1].split(",").map(window.parseFloat);
+    return [x, y || x];
+  }
+  return [0, 0];
+};
+
+const getPositionValues = node => {
+  const x = parseFloat(node.getAttribute("x")) || 0;
+  const y = parseFloat(node.getAttribute("y")) || 0;
+  return [x, y];
+};
+
+const getWorldTransformValues = (node, values = { translate: [0, 0], scale: [1, 1], rotate: 0 }) => {
+  const [sx, sy] = getScaleValues(node);
+  const [tx, ty] = getTranslateValues(node);
+  const r = getRotateValue(node);
+  values.translate[0] = values.translate[0] * sx + tx;
+  values.translate[1] = values.translate[1] * sy + ty;
+  values.scale[0] *= sx;
+  values.scale[1] *= sy;
+  values.rotate += r;
+  if (node.parentNode?.getAttribute) {
+    getWorldTransformValues(node.parentNode, values);
+  }
+  return values;
+};
+
 const getSizeValues = svgNode => {
   return [
     parseFloat(svgNode.getAttribute("width")) || 0,
@@ -66,16 +97,14 @@ const svgToImg = async svgElement => {
 };
 
 const applyOnEmbeddedSvg = async (imageNode, imageCanvas, ctx, rootSvgElement) => {
-  const outermostGroup = findOutermostNode(imageNode, rootSvgElement);
-  const [rootScaleX, rootScaleY] = getScaleValues(outermostGroup);
-  const [imgScaleX, imgScaleY] = getScaleValues(imageNode);
-
   const [rootWidth] = getSizeValues(rootSvgElement);
   const { width: canvasWidth } = imageCanvas;
   const svgToCanvasRatio = canvasWidth / rootWidth;
 
-  const scaleX = imgScaleX * rootScaleX * svgToCanvasRatio;
-  const scaleY = imgScaleY * rootScaleY * svgToCanvasRatio;
+  const worldTransformValues = getWorldTransformValues(imageNode);
+
+  const scaleX = worldTransformValues.scale[0] * svgToCanvasRatio;
+  const scaleY = worldTransformValues.scale[1] * svgToCanvasRatio;
 
   const size = {
     width: parseFloat(imageNode.getAttribute("width")) * scaleX,
@@ -95,12 +124,13 @@ const applyOnEmbeddedSvg = async (imageNode, imageCanvas, ctx, rootSvgElement) =
     ctx.save();
 
     // apply element transformations
-    const x = parseFloat(imageNode.getAttribute("x"));
-    const y = parseFloat(imageNode.getAttribute("y"));
-    const angle = (getRotateValue(imageNode) / 180) * Math.PI;
+    const [wx, wy] = worldTransformValues.translate;
+    const [px, py] = getPositionValues(imageNode);
+    const angle = (worldTransformValues.rotate / 180) * Math.PI;
 
+    ctx.translate(wx * svgToCanvasRatio, wy * svgToCanvasRatio);
     ctx.rotate(angle);
-    ctx.translate(x * scaleX, y * scaleY);
+    ctx.translate(px * scaleX, py * scaleY);
 
     ctx.drawImage(tmpCanvas, 0, 0);
     ctx.restore();
@@ -114,7 +144,10 @@ const getImageSrc = imageNode =>
   imageNode.getAttribute("href") || imageNode.getAttribute("xlink:href");
 
 const applyOnChildNode = (imageCanvas, ctx, svgElement) => async node => {
-  if (node.nodeType === 3 /** ignore text nodes **/ || node.getAttribute("visibility") === "hidden") {
+  if (
+    node.nodeType === 3 /** ignore text nodes **/ ||
+    node.getAttribute("visibility") === "hidden"
+  ) {
     return;
   }
   if (node.tagName === "image") {