🐛 fix: Fix single border

Author: arvinxx

e2e/__tests__/modal.e2e.ts

@@ -1,5 +1,5 @@
-import { initHtml2Sketch, isUpdate, outputJSONData } from './utils';
 import SketchFormat from '@sketch-hq/sketch-file-format-ts';
+import { initHtml2Sketch, isUpdate, outputJSONData } from './utils';
 
 describe('测试 Modal 类型', () => {
   test('Modal 正常', async () => {

e2e/docs/case/basic/demos/Tabs.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useElements, TestLayout } from '@e2e-utils';
+import { Tabs } from 'antd';
+import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
+
+const { TabPane } = Tabs;
+
+/**
+ *
+ */
+export default () => {
+  const { elements, ref } = useElements();
+
+  return (
+    <TestLayout elements={elements}>
+      <div ref={ref}>
+        <Tabs defaultActiveKey="2">
+          <TabPane
+            tab={
+              <span>
+                <AppleOutlined />
+                Tab 1
+              </span>
+            }
+            key="1"
+          >
+            Tab 1
+          </TabPane>
+          <TabPane
+            tab={
+              <span>
+                <AndroidOutlined />
+                Tab 2
+              </span>
+            }
+            key="2"
+          >
+            Tab 2
+          </TabPane>
+        </Tabs>
+      </div>
+    </TestLayout>
+  );
+};

e2e/docs/case/basic/tabs.md

@@ -0,0 +1,8 @@
+---
+title: Tabs 解析
+order: 20
+---
+
+解析 Tabs
+
+<code src="./demos/Tabs.tsx" />

e2e/utils/ToSketchLayout.tsx

@@ -2,7 +2,6 @@ import React, { FC, useState } from 'react';
 import { Button, Card, Col, Divider, Row, Space } from 'antd';
 import ReactJson from 'react-json-view';
 import useSketchJSON from './useSketchJSON';
-// import useAddBase64Url from './useAddBase64Url';
 
 interface FooterProps {
   elements: Element[] | Element;
@@ -13,10 +12,6 @@ const ToSketchLayout: FC<FooterProps> = ({ elements, children, buttons }) => {
   const { sketchJSON, generateGroup, generateSymbol } = useSketchJSON();
   const [showJSON, setShowJSON] = useState(false);
 
-  // const { isFinished } = useAddBase64Url();
-
-  // const disableToParse = !isFinished;
-
   return (
     <div>
       {children}
@@ -42,15 +37,13 @@ const ToSketchLayout: FC<FooterProps> = ({ elements, children, buttons }) => {
                   </Button>
                 ))}
                 <Button
-                  // disabled={disableToParse}
                   onClick={() => {
                     generateGroup(elements);
                   }}
                 >
                   转换为 Group
                 </Button>
                 <Button
-                  // disabled={disableToParse}
                   type="primary"
                   onClick={() => {
                     generateSymbol(elements);

e2e/utils/useAddBase64Url.ts

@@ -45,7 +45,7 @@
     "e2e:local": "jest --config=jest.e2e.config.js",
     "e2e:update": "UPDATE=1 jest --config=jest.e2e.config.js --update-snapshot",
     "---------   ": "",
-    "clean": "rm -rf es lib dist build coverage tests/dist src/.umi .eslintcache",
+    "clean": "rm -rf es lib dist build coverage e2e/dist src/.umi .eslintcache",
     "lint": "npm run lint-eslint",
     "tsc": "tsc -p tsconfig-check.json",
     "lint-eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
@@ -80,6 +80,7 @@
   "devDependencies": {
     "@ant-design/charts": "^0.9.13",
     "@ant-design/pro-skeleton": "^1.0.0-beta.7",
+    "@ant-design/pro-table": "^2.6.3",
     "@babel/core": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/preset-env": "^7.8.3",

package.json

@@ -74,6 +74,7 @@ const nodeToLayers = async (node: Element): Promise<AnyLayer[]> => {
 
   if (hasPseudoShape.before) {
     const beforeEl = await parsePseudoToShape(node, 'before');
+    console.info('转换为:', beforeEl);
     layers.push(beforeEl);
   }
 

src/function/nodeToLayers.ts

@@ -106,15 +106,27 @@ export const isVisibleShape = (shape: Rectangle) => {
 
   // 没任何样式的话,就返回不可见
   const hasNoStyle =
-    shape.style.fills.length === 0 && shape.style.borders.length === 0;
+    shape.style.fills.length === 0 &&
+    shape.style.borders.length === 0 &&
+    shape.style.innerShadows.length === 0 &&
+    shape.style.shadows.length === 0;
+
   if (hasNoStyle) return false;
 
   const isInvalidFills = shape.style.fills.every(
     (fill) => fill.opacity.toString() === '0',
   );
-  const isInvalidBorders = shape.style.borders.every(
-    (border) => border.opacity === 0 || border.thickness === 0,
-  );
+  const isInvalidBorders =
+    shape.style.borders.every(
+      (border) => border.opacity === 0 || border.thickness === 0,
+    ) &&
+    // TODO 需要用 tab 补一下测试用例
+    shape.style.innerShadows.every((shadow) => {
+      return (
+        shadow.opacity.toString() === '0' ||
+        shadow.color.hex.toLowerCase() === '#fffff'
+      );
+    });
 
   return !(isInvalidFills && isInvalidBorders);
 };