From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Thu, 18 Feb 2021 17:23:15 +0000 (+0200)
Subject: Add fixture for bar hide/show animation (#8453)
X-Git-Tag: v3.0.0-beta.11~11
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e2a47342ba8e20c3fc6ee09adb10af800046c1c6;p=thirdparty%2FChart.js.git

Add fixture for bar hide/show animation (#8453)

* Add fixture for bar hide/show animation

* Cleanup

* try using longer times
---

diff --git a/src/core/core.animations.js b/src/core/core.animations.js
index 09c577245..ff688b6c9 100644
--- a/src/core/core.animations.js
+++ b/src/core/core.animations.js
@@ -50,7 +50,7 @@ defaults.set('animation', {
     },
     visible: {
       type: 'boolean',
-      easing: 'easeInExpo' // for keeping the dataset visible almost all the way through the animation
+      fn: v => v < 1 ? 0 : 1 // for keeping the dataset visible all the way through the animation
     },
   }
 });
diff --git a/test/fixtures/controller.bar/bar-animation-hide-show.js b/test/fixtures/controller.bar/bar-animation-hide-show.js
new file mode 100644
index 000000000..d559e8ae4
--- /dev/null
+++ b/test/fixtures/controller.bar/bar-animation-hide-show.js
@@ -0,0 +1,84 @@
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+const ctx = canvas.getContext('2d');
+
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: [0],
+      datasets: [
+        {
+          data: [1],
+          backgroundColor: 'rgba(255,0,0,0.5)'
+        },
+        {
+          data: [2],
+          backgroundColor: 'rgba(0,0,255,0.5)'
+        },
+        {
+          data: [3],
+          backgroundColor: 'rgba(0,255,0,0.5)'
+        }
+      ]
+    },
+    options: {
+      animation: {
+        duration: 14000,
+        easing: 'linear'
+      },
+      events: [],
+      scales: {
+        x: {display: false},
+        y: {display: false, max: 4}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 512,
+      width: 512
+    },
+    run: function(chart) {
+      const animator = Chart.animator;
+      const anims = animator._getAnims(chart);
+      // disable animator
+      const backup = animator._refresh;
+      animator._refresh = function() { };
+
+      return new Promise((resolve) => {
+        window.requestAnimationFrame(() => {
+          // make sure previous animation is finished
+          animator._update(Date.now() * 2);
+
+          chart.hide(1);
+          let start = anims.items[0]._start;
+          for (let i = 0; i < 8; i++) {
+            animator._update(start + i * 2000);
+            let x = i % 4 * 128;
+            let y = Math.floor(i / 4) * 128;
+            ctx.drawImage(chart.canvas, x, y, 128, 128);
+          }
+
+          // make sure previous animation is finished
+          animator._update(Date.now() * 2);
+
+          chart.show(1);
+          start = anims.items[0]._start;
+          for (let i = 0; i < 8; i++) {
+            animator._update(start + i * 2000);
+            let x = i % 4 * 128;
+            let y = Math.floor(2 + i / 4) * 128;
+            ctx.drawImage(chart.canvas, x, y, 128, 128);
+          }
+          Chart.helpers.clearCanvas(chart.canvas);
+          chart.ctx.drawImage(canvas, 0, 0);
+
+          animator._refresh = backup;
+          resolve();
+        });
+      });
+    }
+  }
+};
diff --git a/test/fixtures/controller.bar/bar-animation-hide-show.png b/test/fixtures/controller.bar/bar-animation-hide-show.png
new file mode 100644
index 000000000..924e1d239
Binary files /dev/null and b/test/fixtures/controller.bar/bar-animation-hide-show.png differ