From 133a3af195518f612ae2f2644fc75192bfee4136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= <fuping.dfp@antfin.com>
Date: Mon, 21 Oct 2019 17:56:32 +0800
Subject: [PATCH] fix(g-canvas): clip animation should be effective, close #218

---
 packages/g-base/src/abstract/element.ts       |  3 +
 packages/g-canvas/src/shape/base.ts           |  1 +
 .../bugs/issue-202-spec.js                    |  2 +-
 .../bugs/issue-206-spec.js                    |  0
 .../bugs/issue-210-spec.js                    |  0
 .../g-canvas/tests/bugs/issue-218-spec.js     | 59 +++++++++++++++++++
 6 files changed, 64 insertions(+), 1 deletion(-)
 rename packages/g-canvas/{__tests__ => tests}/bugs/issue-202-spec.js (91%)
 rename packages/g-canvas/{__tests__ => tests}/bugs/issue-206-spec.js (100%)
 rename packages/g-canvas/{__tests__ => tests}/bugs/issue-210-spec.js (100%)
 create mode 100644 packages/g-canvas/tests/bugs/issue-218-spec.js

diff --git a/packages/g-base/src/abstract/element.ts b/packages/g-base/src/abstract/element.ts
index 6d4669701..d3ab2631e 100644
--- a/packages/g-base/src/abstract/element.ts
+++ b/packages/g-base/src/abstract/element.ts
@@ -343,6 +343,7 @@ abstract class Element extends Base implements IElement {
   setClip(clipCfg: ClipCfg) {
     const preShape = this.get('clipShape');
     if (preShape) {
+      // 将之前的 clipShape 销毁
       preShape.destroy();
     }
     let clipShape = null;
@@ -359,11 +360,13 @@ abstract class Element extends Base implements IElement {
           type: clipCfg.type,
           isClipShape: true, // 增加一个标记
           attrs: clipCfg.attrs,
+          canvas, // 设置 canvas
         });
       }
     }
     this.set('clipShape', clipShape);
     this.onCanvasChange('clip');
+    return clipShape;
   }
 
   getClip(): IShape {
diff --git a/packages/g-canvas/src/shape/base.ts b/packages/g-canvas/src/shape/base.ts
index a94e7fa55..4378bd278 100644
--- a/packages/g-canvas/src/shape/base.ts
+++ b/packages/g-canvas/src/shape/base.ts
@@ -61,6 +61,7 @@ class ShapeBase extends AbstractShape {
     if (clip) {
       clip.createPath(context);
       context.clip();
+      clip._afterDraw(); // clip 绘制完成后，需要缓存包围盒以及清除标记
     }
   }
 
diff --git a/packages/g-canvas/__tests__/bugs/issue-202-spec.js b/packages/g-canvas/tests/bugs/issue-202-spec.js
similarity index 91%
rename from packages/g-canvas/__tests__/bugs/issue-202-spec.js
rename to packages/g-canvas/tests/bugs/issue-202-spec.js
index b8955b0b5..159aed900 100644
--- a/packages/g-canvas/__tests__/bugs/issue-202-spec.js
+++ b/packages/g-canvas/tests/bugs/issue-202-spec.js
@@ -12,7 +12,7 @@ describe('#202', () => {
     height: 500,
   });
 
-  it.only('the transformation from canvas coordinates to relative coordinates should be effective', (done) => {
+  it('the transformation from canvas coordinates to relative coordinates should be effective', (done) => {
     const group = canvas.addGroup();
     const circle = group.addShape('circle', {
       attrs: {
diff --git a/packages/g-canvas/__tests__/bugs/issue-206-spec.js b/packages/g-canvas/tests/bugs/issue-206-spec.js
similarity index 100%
rename from packages/g-canvas/__tests__/bugs/issue-206-spec.js
rename to packages/g-canvas/tests/bugs/issue-206-spec.js
diff --git a/packages/g-canvas/__tests__/bugs/issue-210-spec.js b/packages/g-canvas/tests/bugs/issue-210-spec.js
similarity index 100%
rename from packages/g-canvas/__tests__/bugs/issue-210-spec.js
rename to packages/g-canvas/tests/bugs/issue-210-spec.js
diff --git a/packages/g-canvas/tests/bugs/issue-218-spec.js b/packages/g-canvas/tests/bugs/issue-218-spec.js
new file mode 100644
index 000000000..91ed29e9a
--- /dev/null
+++ b/packages/g-canvas/tests/bugs/issue-218-spec.js
@@ -0,0 +1,59 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+import { getColor } from '../get-color';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#218', () => {
+  const canvas = new Canvas({
+    container: dom,
+    pixelRatio: 1,
+    width: 500,
+    height: 500,
+  });
+  const context = canvas.get('context');
+
+  it('the animation of clip shape should be effective', (done) => {
+    const group = canvas.addGroup();
+    const shape = group.addShape('rect', {
+      attrs: {
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        fill: 'red',
+      },
+    });
+    const clipShape = shape.setClip({
+      type: 'circle',
+      attrs: {
+        x: 150,
+        y: 150,
+        r: 20,
+      },
+    });
+    clipShape.animate(
+      {
+        r: 50,
+      },
+      {
+        duration: 500,
+      }
+    );
+    setTimeout(() => {
+      expect(getColor(context, 150, 150)).eqls('#ff0000');
+      expect(getColor(context, 150, 160)).eqls('#ff0000');
+      expect(getColor(context, 150, 190)).eqls('#000000');
+      setTimeout(() => {
+        expect(getColor(context, 150, 150)).eqls('#ff0000');
+        expect(getColor(context, 150, 160)).eqls('#ff0000');
+        expect(getColor(context, 150, 190)).eqls('#ff0000');
+        shape.setClip(null);
+        expect(clipShape.get('destroyed')).eqls(true);
+        done();
+      }, 600);
+    }, 25);
+  });
+});