feat: 添加解析伪类能力

Author: arvinxx

example/pages/index.tsx

@@ -1,28 +1,33 @@
 import React, { useState } from 'react';
-import { Button, Row, Col, Radio } from 'antd';
+import { Button, Row, Col, Radio, Switch } from 'antd';
 import ReactJson from 'react-json-view';
 
 import { nodeToSketchGroup, parserSymbol } from '../../lib';
 export default () => {
   const [json, setJSON] = useState({});
   const generate = () => {
     const el = document.getElementById('test');
-    const json = nodeToSketchGroup(el).toSketchJSON();
+    const switchObj = nodeToSketchGroup(el);
+
+    const json = switchObj.toSketchJSON();
+    json.name = 'Switch';
+    console.log(switchObj);
 
     setJSON(json);
   };
   const generateSymbol = () => {
     const el = document.getElementById('symbol');
     const json = parserSymbol(el).toSketchJSON();
 
+    json.name = 'Switch';
     setJSON(json);
   };
 
   return (
     <Row>
       <Col span={12}>
         <div id="test">
-          <Radio id="symbol">123</Radio>
+          <Switch defaultChecked />
           {/* <Button type={'dashed'} id="symbol">
             测试
           </Button> */}

src/function/nodeToSketchGroup.ts

@@ -4,6 +4,8 @@ import { getName } from '../helpers/name';
 import { Group, Style } from '../model';
 import { AnyLayer } from '../model/utils';
 
+import { isExistPseudo } from '../helpers/shape';
+
 /**
  * 获得可用的节点子级
  */
@@ -86,7 +88,7 @@ const nodeToSketchGroup = (node: Element, options?: any): AnyLayer => {
     return layer;
   }
 
-  if (group.layers.length === 0) {
+  if (group.layers.length === 0 && !isExistPseudo(node)) {
     console.log('该 group 是空的,丢弃...');
     return;
   }

src/function/nodeToSketchLayers.ts

@@ -3,10 +3,12 @@ import { defaultNodeStyle } from '../model/utils';
 import transferToSvg from '../parser/svg';
 import transferToShape from '../parser/shape';
 import transferToText from '../parser/text';
+import praserPseudo from '../parser/pseudo';
 
 import { isTextVisible } from '../helpers/visibility';
 import { isTextNode } from '../helpers/nodeType';
 import { AnyLayer } from '../model/utils';
+import { isExistPseudo } from '../helpers/shape';
 
 /**
  * 是否是默认样式
@@ -69,26 +71,28 @@ const nodeToSketchLayers = (node: Element): AnyLayer[] => {
   const isText = isTextNode(node);
 
   // 如果图层存在样式(阴影 边框等 返回 shape 节点
-  if (isImage || isShape) {
+  if (isImage || isShape || isExistPseudo(node)) {
     // 判断一下是否有伪类
-    const beforeElt: CSSStyleDeclaration = getComputedStyle(node, ':before');
-    if (beforeElt.content === 'none') {
-      console.log('No before Pseudo');
-    } else {
-      console.log('有伪类');
+    const afterEl = praserPseudo(node, 'after');
+    console.log(afterEl);
+
+    if (afterEl) {
+      layers.push(afterEl);
     }
 
-    const shape = transferToShape(node);
-    console.log('转换为 Rectangle: ', shape);
-    layers.push(shape);
-    // 添加后继续执行,不终止
+    if (isImage || isShape) {
+      // 添加后继续执行,不终止
+      const shape = transferToShape(node);
+      console.log('转换为 Rectangle: ', shape);
+      layers.push(shape);
+    }
 
-    const afterElt: CSSStyleDeclaration = getComputedStyle(node, ':after');
+    // 判断一下是否有伪类
+    const beforeEl = praserPseudo(node, 'before');
+    console.log(beforeEl);
 
-    if (afterElt.content === 'none') {
-      console.log('No after Pseudo');
-    } else {
-      console.log('有伪类');
+    if (beforeEl) {
+      layers.push(beforeEl);
     }
   }
 

src/helpers/shape.ts

@@ -0,0 +1,30 @@
+import parsePseudo from '../parser/pseudo';
+
+/**
+ * 解析圆角
+ * @param borderRadius
+ * @param width
+ * @param height
+ */
+export const parserBorderRadius = (
+  borderRadius: string,
+  width: number,
+  height: number
+) => {
+  const matches = borderRadius.match(/^([0-9.]+)(.+)$/);
+
+  // Sketch uses 'px' units for border radius, so we need to convert % to px
+  if (matches && matches[2] === '%') {
+    const baseVal = Math.max(width, height);
+    const percentageApplied = baseVal * (parseInt(matches[1], 10) / 100);
+
+    return Math.round(percentageApplied);
+  }
+  return parseInt(borderRadius, 10);
+};
+
+/**
+ * 判断是否存在伪类
+ */
+export const isExistPseudo = (node: Element) =>
+  !!(parsePseudo(node, 'after') || parsePseudo(node, 'before'));

src/parser/pseudo.ts

@@ -0,0 +1,155 @@
+import { Style, Rectangle } from '../model';
+import { parserBorderRadius } from '../helpers/shape';
+import { defaultNodeStyle } from '../model/utils';
+import { splitShadowString, shadowStringToObject } from '../helpers/shadow';
+
+/**
+ * 解析伪类
+ */
+const parsePseudo = (node: Element, pseudoElt: 'before' | 'after') => {
+  // 判断一下是否有伪类
+  const pseudoEl: CSSStyleDeclaration = getComputedStyle(node, ':' + pseudoElt);
+  if (pseudoEl.content === 'none') {
+    console.log(`No ${pseudoElt} Pseudo`);
+    return null;
+  }
+  console.log('有伪类');
+  const bcr = node.getBoundingClientRect();
+  const { left, top } = bcr;
+  const width = bcr.right - bcr.left;
+  const height = bcr.bottom - bcr.top;
+
+  const style = new Style();
+
+  const {
+    // 背景颜色
+    backgroundColor,
+
+    // 边框
+    borderColor,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStyle,
+    borderLeftStyle,
+    borderTopStyle,
+    borderRightStyle,
+    boxShadow,
+  } = pseudoEl;
+
+  if (backgroundColor) {
+    style.addColorFill(backgroundColor);
+  }
+
+  const rect: Rectangle | null = new Rectangle({
+    width,
+    height,
+
+    x: left,
+    y: top,
+  });
+  // support for one-side borders (using inner shadow because Sketch doesn't support that)
+  if (borderWidth.indexOf(' ') === -1) {
+    style.addBorder({
+      color: borderColor,
+      thickness: parseFloat(borderWidth),
+    });
+
+    // 如果是虚线
+    const isDashed =
+      borderBottomStyle === 'dashed' &&
+      borderLeftStyle === 'dashed' &&
+      borderTopStyle === 'dashed' &&
+      borderRightStyle === 'dashed';
+    if (isDashed) {
+      style.setBorderDashed({
+        dash: 3 * parseFloat(borderWidth),
+        spacing: 3 * parseFloat(borderWidth),
+      });
+    }
+    // 如果是点
+    const isDotted =
+      borderBottomStyle === 'dotted' &&
+      borderLeftStyle === 'dotted' &&
+      borderTopStyle === 'dotted' &&
+      borderRightStyle === 'dotted';
+
+    if (isDotted) {
+      style.setBorderDashed({
+        dash: parseFloat(borderWidth),
+        spacing: parseFloat(borderWidth),
+      });
+    }
+  } else {
+    const borderTopWidthFloat = parseFloat(borderTopWidth);
+    const borderRightWidthFloat = parseFloat(borderRightWidth);
+    const borderBottomWidthFloat = parseFloat(borderBottomWidth);
+    const borderLeftWidthFloat = parseFloat(borderLeftWidth);
+
+    if (borderTopWidthFloat !== 0) {
+      style.addInnerShadow({
+        color: borderTopColor,
+        offsetY: borderTopWidthFloat,
+      });
+    }
+    if (borderRightWidthFloat !== 0) {
+      style.addInnerShadow({
+        color: borderRightColor,
+        offsetX: -borderRightWidthFloat,
+      });
+    }
+    if (borderBottomWidthFloat !== 0) {
+      style.addInnerShadow({
+        color: borderBottomColor,
+        offsetY: -borderBottomWidthFloat,
+      });
+    }
+    if (borderLeftWidthFloat !== 0) {
+      style.addInnerShadow({
+        color: borderLeftColor,
+        offsetX: borderLeftWidthFloat,
+      });
+    }
+  }
+
+  if (boxShadow !== defaultNodeStyle.boxShadow) {
+    const shadowStrings = splitShadowString(boxShadow);
+
+    shadowStrings.forEach((shadowString: string) => {
+      const shadowObject = shadowStringToObject(shadowString);
+
+      if (shadowObject!.inset) {
+        if (borderWidth.indexOf(' ') === -1) {
+          shadowObject!.spread += parseFloat(borderWidth);
+        }
+        style.addInnerShadow(shadowObject);
+      } else {
+        style.addShadow(shadowObject);
+      }
+    });
+  }
+  rect.style = style;
+  //TODO borderRadius can be expressed in different formats and use various units - for simplicity we assume "X%"
+  const cornerRadius = {
+    topLeft: parserBorderRadius(borderTopLeftRadius, width, height),
+    topRight: parserBorderRadius(borderTopRightRadius, width, height),
+    bottomLeft: parserBorderRadius(borderBottomLeftRadius, width, height),
+    bottomRight: parserBorderRadius(borderBottomRightRadius, width, height),
+  };
+
+  rect.cornerRadius = cornerRadius;
+
+  return rect;
+};
+
+export default parsePseudo;

tsconfig.json

@@ -19,6 +19,6 @@
     "esModuleInterop": true,
     "lib": ["dom", "es2015", "es2016", "es2017"],
     "allowSyntheticDefaultImports": true,
-    "baseUrl": "."
+    "baseUrl": "./"
   }
 }