Merge pull request #13 from makamekm/develop

Midnight fixes

.github/workflows/npm_notify_release.yml

@@ -1,7 +1,9 @@
 name: Node.js Public Release Notes
 
 on:
-  release:
+  push:
+    tags:
+    - 'v*'
 
 jobs:
   test_develop:
@@ -12,11 +14,12 @@ jobs:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
       - name: Extract tag name
         id: tag
-        uses: actions/github-script@0.2.0
+        uses: actions/github-script@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          result-encoding: string
           script: |
-            return context.payload.ref.replace(/\/refs\/tags\//, '');
+            return context.payload.ref.replace(/refs\/tags\//, '');
       - name: send release notes
         uses: appleboy/telegram-action@master
         with:

content.plugins.js

@@ -49,7 +49,7 @@ async function setComponentFromCache(state, shared) {
 
 function renderVector(state, { imgMap, genClassName, additionalStyles }) {
   const { node, content } = state;
-  if (node.type === 'VECTOR') {
+  if (node.type === 'VECTOR' && imgMap[node.id]) {
     emptyChildren(state);
 
     const currentClass = genClassName();

index.js

@@ -67,8 +67,8 @@ async function runFigmaReact(options = {}) {
   const pngImages = await loadURLPNGImages(fileKey, headers);
 
   // Debug
-  const fs = require('fs');
-  fs.writeFileSync('./temp.json', JSON.stringify(canvas, null, 4));
+  // const fs = require('fs');
+  // fs.writeFileSync('./temp.json', JSON.stringify(canvas, null, 4));
 
   // Create components
   await createComponents(canvas, {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "figma-react",
   "description": "This is a tool to help you export Figma project into React mockups",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": false,
   "author": "Maxim Karpov <[email protected]>",
   "repository": {

style.plugins.js

@@ -29,10 +29,12 @@ function setMiddleOrder({ node, middleStyle }) {
   }
 }
 
-function setTransformation({ middleStyle, bounds }) {
-  if (bounds && Math.abs(bounds.angle) > 0.01) {
-    middleStyle.transform = `rotate(${-bounds.angle}deg)`;
-    middleStyle.transformOrigin = '50% 50%';
+function setTransformation({ middleStyle, bounds, node }) {
+  if (node.type !== 'VECTOR') {
+    if (bounds && Math.abs(bounds.angle) > 0.01) {
+      middleStyle.transform = `rotate(${-bounds.angle}deg)`;
+      middleStyle.transformOrigin = '50% 50%';
+    }
   }
 }
 
@@ -206,8 +208,9 @@ async function setFrameStyles(state, { pngImages, headers, options }) {
       middleStyle.backgroundColor = colorString(node.backgroundColor);
       if (node.clipsContent) middleStyle.overflow = 'hidden';
     } else if (node.type === 'RECTANGLE') {
+      // TODO: Foreach fills
       const lastFill = getPaint(node.fills);
-      if (lastFill) {
+      if (lastFill && lastFill.visible !== false) {
         if (lastFill.type === 'SOLID') {
           middleStyle.backgroundColor = colorString(lastFill.color);
           middleStyle.opacity = lastFill.opacity;
@@ -233,9 +236,8 @@ async function setFrameStyles(state, { pngImages, headers, options }) {
             middleStyle.backgroundSize = `${lastFill.scalingFactor * imageSize.width}px ${lastFill.scalingFactor * imageSize.height}px`;
           } else if (lastFill.scaleMode === 'STRETCH') {
             middleStyle.backgroundRepeat = 'no-repeat';
-            middleStyle.backgroundSize = `${imageSize.width}px ${imageSize.height}px`;
-            middleStyle.backgroundPosition = `-${imageSize.width * lastFill.imageTransform[0][2]}px -${imageSize.height *
-              lastFill.imageTransform[1][2]}px`;
+            middleStyle.backgroundSize = 'cover';
+            middleStyle.backgroundPosition = `${100 * lastFill.imageTransform[0][2]}% ${100 * lastFill.imageTransform[1][2]}%`;
           }
         } else if (lastFill.type === 'GRADIENT_LINEAR') {
           middleStyle.background = paintToLinearGradient(lastFill);