fix: 清理空图层的解析

Author: arvinxx

src/function/nodeToSketchLayers.ts

@@ -82,8 +82,11 @@ export const nodeToSketchLayers = (node: Element): AnyLayer[] => {
     if (isImage || isShape) {
       // 添加后继续执行,不终止
       const shape = transferToShape(node);
-      console.info('[nodeToSketchLayers]转换为 Rectangle: ', shape);
-      layers.push(shape);
+
+      if (shape) {
+        console.info('[nodeToSketchLayers]转换为 Rectangle: ', shape);
+        layers.push(shape);
+      }
     }
 
     // 判断一下是否有伪类

src/helpers/shape.ts

@@ -1,5 +1,6 @@
 import pseudoText from '../parser/pseudoText';
 import pseudoShape from '../parser/pseudoShape';
+import Rectangle from '../model/Layer/Rectangle';
 
 /**
  * 判断是否存在伪类
@@ -11,3 +12,30 @@ export const isExistPseudoText = (node: Element) =>
  */
 export const isExistPseudoShape = (node: Element) =>
   !!(pseudoShape(node, 'after') || pseudoShape(node, 'before'));
+
+export const isVisibleShape = (shape: Rectangle) => {
+  const isInvalidFills =
+    shape.style.fills.length === 0 ||
+    shape.style.fills.every((fill) => fill.opacity.toString() === '0');
+  const isInvalidBorders =
+    shape.style.borders.length === 0 ||
+    shape.style.borders.every(
+      (border) => border.opacity === 0 || border.thickness === 0
+    );
+
+  console.log(
+    shape.name,
+    'isInvalidFills',
+    isInvalidFills,
+    'isInvalidBorders',
+    isInvalidBorders
+  );
+  const isInvisible = shape.style.opacity === 0;
+
+  if (isInvisible) return false;
+
+  if (isInvalidFills && isInvalidBorders) {
+    return false;
+  }
+  return true;
+};

src/model/Style/Border.ts

@@ -45,6 +45,9 @@ class Border extends StyleBase {
         this.image = new Image(image);
     }
   }
+  get opacity() {
+    return this.color.alpha;
+  }
 
   /**
    * 颜色填充类型

src/model/Style/Fill.ts

@@ -56,6 +56,9 @@ class Fill extends StyleBase {
    */
   stops: Color[];
 
+  get opacity() {
+    return this.color.alpha;
+  }
   /**
    * 终点
    */

src/parser/pseudoShape.ts

@@ -1,5 +1,6 @@
 import { Style, Rectangle, Shadow } from '../model';
 import { defaultNodeStyle } from '../model/utils';
+import { isVisibleShape } from '../helpers/shape';
 
 /**
  * 解析图形类伪类
@@ -155,7 +156,7 @@ const parsePseudo = (node: Element, pseudoElt: 'before' | 'after') => {
 
   rect.cornerRadius = cornerRadius;
 
-  return rect;
+  if (isVisibleShape(rect)) return rect;
 };
 
 export default parsePseudo;

src/parser/shape.ts

@@ -4,6 +4,7 @@ import {
   parseBackgroundImage,
 } from '../helpers/background';
 import { defaultNodeStyle } from '../model/utils';
+import { isVisibleShape } from '../helpers/shape';
 
 const transferToShape = (node: Element): Group | Rectangle => {
   const bcr = node.getBoundingClientRect();
@@ -236,7 +237,7 @@ const transferToShape = (node: Element): Group | Rectangle => {
         break;
     }
   }
-  return rect;
+  if (isVisibleShape(rect)) return rect;
 };
 
 export default transferToShape;