react-figma - npm Package Compare versions

Comparing version 0.0.35 to 0.0.36

package.json

 {
   "name": "react-figma",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "Render React components to Figma",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -129,4 +129,2 @@ # React Figma
 
-## [Roadmap](docs/roadmap.md)
-
 ## Become a Contributor 🎖
@@ -133,0 +131,0 @@

styleTransformers/transformBorderProperties.js

@@ -29,8 +29,3 @@ "use strict";
     if (styles.borderColor) {
-        props.strokes = [
-            {
-                type: 'SOLID',
-                color: transformColors_1.colorToRGB(styles.borderColor)
-            }
-        ];
+        props.strokes = [transformColors_1.colorToPaint(styles.borderColor)];
     }
@@ -37,0 +32,0 @@ if (styles.borderWidth) {

styleTransformers/transformColors.d.ts

 export declare const colorToRGB: (color: string) => RGB;
-export declare const colorToRGBA: (color: string, opacity: number) => RGBA;
+export declare const colorToRGBA: (color: string, opacity?: number) => RGBA;
+export declare const colorToPaint: (color: string) => Paint;

styleTransformers/transformColors.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var parse = require("color-parse");
+var gradientParser_1 = require("../helpers/gradientParser");
 exports.colorToRGB = function (color) {
@@ -26,4 +16,67 @@ var parsed = parse(color);
 exports.colorToRGBA = function (color, opacity) {
-    return __assign({}, exports.colorToRGB(color), { a: opacity });
+    var parsed = parse(color);
+    if (parsed && parsed.space === 'rgb') {
+        return {
+            r: parsed.values[0] / 255.0,
+            g: parsed.values[1] / 255.0,
+            b: parsed.values[2] / 255.0,
+            a: typeof opacity === 'number' ? opacity : parsed.alpha
+        };
+    }
 };
+var transformAngleToFigmaTransformation = function (value) {
+    var angle = value - Math.PI / 2;
+    // **
+    // There is rotation relative to center through affine transformation
+    // (xc, yc) is a center of the imaginary 1x1 quad
+    // (dxc, dyc) is a delta between the old center and the new center (after transformation)
+    // Transformation matrix has transform to the delta value, because center position should not change.
+    // **
+    var xc = 0.5;
+    var yc = 0.5;
+    var dxc = xc - (Math.cos(angle) * xc + Math.sin(angle) * yc);
+    var dyc = yc - (-Math.sin(angle) * xc + Math.cos(angle) * yc);
+    return [[Math.cos(angle), Math.sin(angle), dxc], [-Math.sin(angle), Math.cos(angle), dyc]];
+};
+exports.colorToPaint = function (color) {
+    var parsedGradients;
+    try {
+        parsedGradients = gradientParser_1.default.parse(color);
+    }
+    catch (e) { }
+    var parsedGradient = parsedGradients && parsedGradients[0];
+    if (parsedGradient && parsedGradient.type === 'linear-gradient') {
+        var gradientTransform = transformAngleToFigmaTransformation(Math.PI);
+        if (parsedGradient.orientation) {
+            var orientation_1 = parsedGradient.orientation;
+            if (orientation_1.type === 'directional') {
+                if (orientation_1.value === 'right') {
+                    gradientTransform = transformAngleToFigmaTransformation(Math.PI / 2);
+                }
+                else if (orientation_1.value === 'left') {
+                    gradientTransform = transformAngleToFigmaTransformation(-Math.PI / 2);
+                }
+                else if (orientation_1.value === 'top') {
+                    gradientTransform = transformAngleToFigmaTransformation(0);
+                }
+            }
+            else if (orientation_1.type == 'angular') {
+                var angle = (parseFloat(orientation_1.value) / 180) * Math.PI;
+                gradientTransform = transformAngleToFigmaTransformation(angle);
+            }
+        }
+        return {
+            type: 'GRADIENT_LINEAR',
+            gradientTransform: gradientTransform,
+            gradientStops: parsedGradient.colorStops.map(function (_a, index) {
+                var type = _a.type, value = _a.value, length = _a.length;
+                return ({
+                    position: length && length.type === '%' ? parseFloat(length.value) / 100 : index === 0 ? 0 : 1,
+                    color: exports.colorToRGBA(type === 'hex' ? "#" + value : value)
+                });
+            })
+        };
+    }
+    return { type: 'SOLID', color: exports.colorToRGB(color) };
+};
 //# sourceMappingURL=transformColors.js.map

styleTransformers/transformGeometryStyleProperties.js

@@ -31,3 +31,3 @@ "use strict";
     if (style.backgroundColor) {
-        fills.push({ type: 'SOLID', color: transformColors_1.colorToRGB(style.backgroundColor) });
+        fills.push(transformColors_1.colorToPaint(style.backgroundColor));
     }
@@ -34,0 +34,0 @@ if (style.backgroundImage) {

styleTransformers/transformTextStyleProperties.js

@@ -33,3 +33,3 @@ "use strict";
     }
-    return __assign({}, ((style && style.color && { fills: [{ type: 'SOLID', color: transformColors_1.colorToRGB(style.color) }] }) || {}), (style &&
+    return __assign({}, ((style && style.color && { fills: [transformColors_1.colorToPaint(style.color)] }) || {}), (style &&
         style.fontFamily && {
@@ -36,0 +36,0 @@ fontName: { family: style.fontFamily, style: converFontStyle_1.convertFontStyle(style.fontWeight, style.fontStyle) }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

297293

increased by7.24%

Number of package files

240

increased by1.27%

Lines of code

4537

increased by7.26%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of lines in readme file

174

decreased by-1.14%

No dependency changes