fix: 修复变化的元素因为上次的缓存导致布局计算错误

antvis · Jun 8, 2021 · a5d4e97 · a5d4e97
1 parent cc51b46
commit a5d4e97
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/jsx/src/render.ts b/packages/jsx/src/render.ts
@@ -71,7 +71,8 @@ function createElement(node: any, container: any, parentLayout: any) {
 
   const elementAttrs = {
     ...getShapeAttrs(type, layout),
-    ...lastAttrs,
+    // 因为删除的元素不参与布局计算，所以只有在删除的时候才保留lastAttrs, 新增和更新的时候都让其重新计算
+    ...status === ELEMENT_DELETE ? lastAttrs : null,
     ...attrs,
   };
   // 缓存这次新的attrs

diff --git a/packages/jsx/test/render.test.tsx b/packages/jsx/test/render.test.tsx
@@ -386,8 +386,12 @@ describe('layout', () => {
           </group>
         </group>
       );
+      // 新增和变化的元素不保留上次的attrs
+      groupJSXElement.props.children[0]._cache = { attrs: { x: 100, y: 200, width: 10, height: 10 } };
       // 把中间的元素标记为删除
       groupJSXElement.props.children[1].status = ELEMENT_DELETE;
+      // 删除的元素保留attrs
+      groupJSXElement.props.children[1]._cache = { attrs: { x: 0, y: 200, width: 10, height: 10 } };
       groupJSXElement.props.children[2].props.children[1].status = ELEMENT_DELETE;
       const group = render(groupJSXElement, container);
       canvas.draw();
@@ -399,9 +403,9 @@ describe('layout', () => {
       expect(children[0].get('attrs').height).toBe(200);
 
       expect(children[1].get('attrs').x).toBe(0);
-      expect(children[1].get('attrs').y).toBe(0);
-      expect(children[1].get('attrs').width).toBe(0);
-      expect(children[1].get('attrs').height).toBe(0);
+      expect(children[1].get('attrs').y).toBe(200);
+      expect(children[1].get('attrs').width).toBe(10);
+      expect(children[1].get('attrs').height).toBe(10);
 
       expect(children[2].get('attrs').x).toBe(100);
       expect(children[2].get('attrs').y).toBe(0);
@@ -414,10 +418,10 @@ describe('layout', () => {
       expect(subChildren[0].get('attrs').width).toBe(100);
       expect(subChildren[0].get('attrs').height).toBe(200);
 
-      expect(children[1].get('attrs').x).toBe(0);
-      expect(children[1].get('attrs').y).toBe(0);
-      expect(children[1].get('attrs').width).toBe(0);
-      expect(children[1].get('attrs').height).toBe(0);
+      expect(subChildren[1].get('attrs').x).toBe(0);
+      expect(subChildren[1].get('attrs').y).toBe(0);
+      expect(subChildren[1].get('attrs').width).toBe(0);
+      expect(subChildren[1].get('attrs').height).toBe(0);
 
     });