🐛 fix: single child overflow should not be mask (#181)

ant-design · Feb 6, 2023 · 1acab12 · 1acab12
1 parent d2a0d8b
commit 1acab12
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/function/nodeToGroup.ts b/src/function/nodeToGroup.ts
@@ -99,6 +99,9 @@ const nodeToGroup = async (node: Element, options?: Options): Promise<Group> =>
     layer.x += group.x;
     layer.y += group.y;
 
+    // 只有一个形状时不需要裁剪
+    layer.hasClippingMask = false;
+
     return layer as Group;
   }
 

diff --git a/tests/__tests__/function/html/nodeToGroup.html b/tests/__tests__/function/html/nodeToGroup.html
@@ -177,4 +177,6 @@
       />
     </g>
   </svg>
+
+  <div style="overflow: hidden; width: 1px; height: 1px" id="overflow-only"></div>
 </div>
diff --git a/tests/__tests__/function/nodeToGroup.spec.ts b/tests/__tests__/function/nodeToGroup.spec.ts
@@ -1,14 +1,11 @@
-import { nodeToGroup } from 'html2sketch';
 import { setupTestNode } from '@test-utils';
 import { readFileSync } from 'fs';
+import { nodeToGroup } from 'html2sketch';
 import { resolve } from 'path';
 
 describe('nodeToGroup', () => {
   beforeAll(() => {
-    const innerHTML = readFileSync(
-      resolve(__dirname, './html/nodeToGroup.html'),
-      'utf-8',
-    );
+    const innerHTML = readFileSync(resolve(__dirname, './html/nodeToGroup.html'), 'utf-8');
     setupTestNode(innerHTML);
   });
   it('没有节点则报错', async () => {
@@ -17,6 +14,7 @@ describe('nodeToGroup', () => {
     try {
       await nodeToGroup(node);
     } catch (e) {
+      // eslint-disable-next-line jest/no-conditional-expect
       expect(e).toStrictEqual(Error('解析对象不存在 请检查传入对象'));
     }
   });
@@ -64,4 +62,11 @@ describe('nodeToGroup', () => {
     expect(g.class).toBe('group');
     expect(Math.round(g.rotation)).toBe(15);
   });
+
+  it('单个元素有 overflow 不需要蒙版', async () => {
+    const node = document.getElementById('overflow-only') as HTMLDivElement;
+    const group = await nodeToGroup(node);
+    expect(group.layers.length).toBe(0);
+    expect(group.hasClippingMask).toBeFalsy();
+  });
 });