html2figma - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

lib/node2Frame.js

@@ -8,2 +8,3 @@ import { __assign, __awaiter, __generator } from "tslib";
 import { createSvgLayer } from './parser/svg';
+import { parseUnits } from './parser/parsers';
 import { buildTextNode } from './parser/text';
@@ -26,3 +27,3 @@ import { isFrameNode, isTextNode } from './utils/nodeType';
     return __awaiter(this, void 0, void 0, function () {
-        var layers, rect, parentRect, computedStyle, fills, cssColor, isGradient, color, lineGradientArray, positionDeg, rad, colors, colorStops, colorStops, gradientPaint, solidPaint, childrenLayer, currentLayer, textFills, textColor, textLayers, solidPaint, imagePaint, borderRadii, strokes, shadowEffects, overflowHidden, childrens, childrenLayers, frame;
+        var layers, rect, parentRect, computedStyle, fills, cssColor, isGradient, color, lineGradientArray, positionDeg, rad, colors, colorStops, colorStops, gradientPaint, solidPaint, childrenLayer, currentLayer, textFills, textColor, textLayers, solidPaint, imagePaint, borderRadii, strokes, shadowEffects, overflowHidden, childrens, childrenLayers, layoutMode, primaryAxisAlignItems, counterAxisAlignItems, frame;
         var _this = this;
@@ -47,3 +48,3 @@ return __generator(this, function (_a) {
                         if (cssColor.indexOf('rad,') !== -1) {
-                            rad = Number(lineGradientArray[0].split('gradient(')[1].replace('rad, ', ''));
+                            rad = Number(lineGradientArray[0].split('gradient(')[1].split('rad')[0].replace('rad, ', ''));
                             positionDeg = rad * (180 / Math.PI);
@@ -74,3 +75,3 @@ }
                         }
-                        positionDeg = isNaN(positionDeg) ? 0 : (positionDeg / 180) * Math.PI;
+                        positionDeg = isNaN(positionDeg) ? 0 : Math.round(positionDeg / 180) * Math.PI;
                         gradientPaint = {
@@ -164,3 +165,35 @@ type: 'GRADIENT_LINEAR',
                     childrenLayers.forEach(function (layer) { return layers.push(layer); });
-                    frame = __assign(__assign({ type: 'FRAME', clipsContent: overflowHidden, x: rect.left - parentRect.left, y: rect.top - parentRect.top, width: rect.width, height: rect.height, fills: fills, children: [], effects: shadowEffects }, strokes), borderRadii);
+                    layoutMode = 'NONE';
+                    primaryAxisAlignItems = 'MIN';
+                    counterAxisAlignItems = 'MIN';
+                    if (computedStyle.justifyContent === 'center') {
+                        primaryAxisAlignItems = 'CENTER';
+                    }
+                    else if (computedStyle.justifyContent === 'flex-end') {
+                        primaryAxisAlignItems = 'MAX';
+                    }
+                    else if (computedStyle.justifyContent === 'space-between') {
+                        primaryAxisAlignItems = 'SPACE_BETWEEN';
+                    }
+                    if (computedStyle.alignItems === 'center') {
+                        counterAxisAlignItems = 'CENTER';
+                    }
+                    else if (computedStyle.alignItems === 'flex-end') {
+                        counterAxisAlignItems = 'MAX';
+                    }
+                    else if (computedStyle.alignItems === 'space-between') {
+                        primaryAxisAlignItems = 'SPACE_BETWEEN';
+                    }
+                    // todo: 未支持margin, 暂时只针对居中使用自动布局
+                    if (computedStyle.display === 'flex' &&
+                        computedStyle.justifyContent === 'center' &&
+                        computedStyle.alignItems === 'center') {
+                        if (computedStyle.flexDirection === 'column') {
+                            layoutMode = 'VERTICAL';
+                        }
+                        else {
+                            layoutMode = 'HORIZONTAL';
+                        }
+                    }
+                    frame = __assign(__assign({ type: 'FRAME', clipsContent: overflowHidden, x: rect.left - parentRect.left, y: rect.top - parentRect.top, width: rect.width, height: rect.height, fills: fills, layoutMode: layoutMode, primaryAxisSizingMode: 'FIXED', counterAxisSizingMode: 'FIXED', primaryAxisAlignItems: primaryAxisAlignItems, counterAxisAlignItems: counterAxisAlignItems, paddingLeft: parseUnits(computedStyle.paddingLeft).value, paddingRight: parseUnits(computedStyle.paddingRight).value, paddingTop: parseUnits(computedStyle.paddingTop).value, paddingBottom: parseUnits(computedStyle.paddingBottom).value, children: [], effects: shadowEffects }, strokes), borderRadii);
                     frame.children = layers;
@@ -167,0 +200,0 @@ return [2 /*return*/, frame];

lib/parser/text.js

@@ -6,3 +6,3 @@ import { isHidden } from './nodes';
 export var buildTextNode = function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var node = _a.node, parent = _a.parent;
@@ -50,13 +50,6 @@ var parentPos = parent.getBoundingClientRect();
         }
-        // 文字居中;
-        var y = rect.top - parentPos.top;
-        if (parent.children.length <= 1 && parentComputedStyles.alignItems === 'center') {
-            y = (parentPos.height - height) / 2;
-        }
-        // console.log('y', parentPos.height, computedStyles.height, height, y);
         var textNode = {
             // ref: node,
-            y: y,
             x: rect.left - parentPos.left,
-            // y: rect.top - parentPos.top,
+            y: rect.top - parentPos.top < 0 ? 0 : rect.top - parentPos.top,
             width: rect.width,
@@ -67,2 +60,3 @@ height: height,
         };
+        console.log(333, node, rect.top, parentPos.top, computedStyles.top, computedStyles.textIndent, parentComputedStyles.textIndent, parentComputedStyles.top);
         var fills = [];
@@ -88,2 +82,5 @@ var rgb = getRgb(computedStyles.color);
         }
+        if (computedStyles.textIndent) {
+            textNode.paragraphIndent = (_d = parseUnits(computedStyles.textIndent)) === null || _d === void 0 ? void 0 : _d.value;
+        }
         if (lineHeight) {
@@ -123,3 +120,2 @@ textNode.lineHeight = lineHeight;
         if (computedStyles.fontFamily) {
-            // const font = computedStyles.fontFamily.split(/\s*,\s*/);
             // 转换采用平方字体
@@ -148,14 +144,5 @@ textNode.fontName = {
         };
-        // console.log(111, 222, parentComputedStyles.alignItems);
         if (['flex-start', 'start', 'center', 'flex-end', 'end', 'stretch'].includes(parentComputedStyles.alignItems)) {
             textNode.textAlignVertical = map[parentComputedStyles.alignItems].toUpperCase();
         }
-        // console.log(
-        //   111,
-        //   333,
-        //   textNode.characters,
-        //   textNode.width,
-        //   textNode.textAlignVertical,
-        //   parentComputedStyles.alignItems,
-        // );
         return textNode;
@@ -162,0 +149,0 @@ }

lib/render.js

@@ -155,22 +155,2 @@ import { __awaiter, __generator } from "tslib";
                                         }
-                                        // text.textAutoResize = 'HEIGHT';
-                                        // let adjustments = 0;
-                                        // while (
-                                        //   typeof text.fontSize === 'number' &&
-                                        //   typeof layer.fontSize === 'number' &&
-                                        //   (text.height > Math.max(layer.height, lineHeight) * 1.2 ||
-                                        //     text.width > layer.width * 1.2)
-                                        // ) {
-                                        //   // Don't allow changing more than ~30%
-                                        //   if (adjustments++ > layer.fontSize * 0.3) {
-                                        //     console.warn('Too many font adjustments', text, layer);
-                                        //     // debugger
-                                        //     break;
-                                        //   }
-                                        //   try {
-                                        //     text.fontSize = text.fontSize - 1;
-                                        //   } catch (err) {
-                                        //     console.warn('Error on resize text:', layer, text, err);
-                                        //   }
-                                        // }
                                         rects.push(text);
@@ -177,0 +157,0 @@ ((parent && parent.ref) || baseFrame).appendChild(text);

package.json

 {
   "name": "html2figma",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "convert HTML to figma Layers",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

129322

increased by1.14%

Lines of code

1744

increased by0.11%

No dependency changes