From a5d4e9798e3acfbee70dc0d30bba508b8f69667c Mon Sep 17 00:00:00 2001
From: zengyue <yezengyue@gmail.com>
Date: Tue, 8 Jun 2021 12:22:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E7=9A=84=E5=85=83=E7=B4=A0=E5=9B=A0=E4=B8=BA=E4=B8=8A=E6=AC=A1?=
 =?UTF-8?q?=E7=9A=84=E7=BC=93=E5=AD=98=E5=AF=BC=E8=87=B4=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jsx/src/render.ts        |  3 ++-
 packages/jsx/test/render.test.tsx | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/jsx/src/render.ts b/packages/jsx/src/render.ts
index e6b1b4e2f..d17d34228 100644
--- 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
index 74f857213..fbab377bd 100644
--- 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);
 
     });