Merge pull request #19 from makamekm/develop

Fixes

content.plugins.js

@@ -1,5 +1,5 @@
 const { emptyChildren, getComponentName, createComponent, getDescriptionStyles, saveSvgToDisk } = require('./lib');
-const svgtojsx = require('svg-to-jsx');
+const svgtojsx = require('./svg-to-jsx');
 
 const contentPlugins = [
   applyStyles,

lib.js

@@ -535,6 +535,7 @@ function preprocessTree(node, shared) {
   // }
 
   const children = node.children && node.children.filter(child => child.visible !== false);
+
   if (children) {
     for (let j = 0; j < children.length; j++) {
       if (!VECTOR_TYPES.includes(children[j].type)) {

package.json

@@ -45,9 +45,12 @@
   "dependencies": {
     "dotenv": "^8.2.0",
     "node-fetch": "^2.6.0",
+    "object-assign": "^4.1.1",
     "prettier": "^1.19.1",
+    "q": "^1.5.1",
     "request-image-size": "^2.1.0",
-    "svg-to-jsx": "^1.0.2"
+    "xml2js": "^0.4.23",
+    "xmlbuilder": "^14.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",

style.plugins.js

@@ -279,23 +279,22 @@ async function setFrameStyles(state, shared) {
     if (images[node.id] != null && !Object.keys(props).includes('gbg')) {
       const url = `url(${await loadImageFromImagesToDisk(node, shared)})`;
 
-      if (bounds && Math.abs(bounds.angle) > 0) {
-        const left = (parent.absoluteBoundingBox.width - bounds.width) / 2 / bounds.width;
-        const top = (parent.absoluteBoundingBox.height - bounds.height) / 2 / bounds.height;
+      if (bounds && Math.abs(bounds.angle)) {
+        middleStyle.display = 'flex';
+        middleStyle.justifyContent = 'center';
+        middleStyle.alignItems = 'center';
 
         const afterId = genClassName();
         classNames.push(afterId);
         additionalStyles.push(`
           .${afterId}::after {
             position: absolute;
             pointer-events: none;
-            left: -${left * 100}%;
-            right: -${left * 100}%;
-            top: -${top * 100}%;
-            bottom: -${top * 100}%;
+            width: ${(node.absoluteBoundingBox.width / bounds.width) * 100}%;
+            height: ${(node.absoluteBoundingBox.height / bounds.height) * 100}%;
             content: '';
             background: ${url} center center no-repeat;
-            background-size: contain;
+            background-size: cover;
             transform: rotate(${bounds.angle}deg);
             transform-origin: 50% 50%;
           }