From 24632768cc604c1b595440d1f4cbb34ccb3b9636 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 15 May 2020 17:39:17 +0200
Subject: [PATCH] enable rendering cache

---
 src/elements/geoFeature.js | 58 +++++++++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/elements/geoFeature.js b/src/elements/geoFeature.js
index 4b795ab..28ae8db 100644
--- a/src/elements/geoFeature.js
+++ b/src/elements/geoFeature.js
@@ -84,25 +84,63 @@ export const GeoFeature = (Chart.elements.GeoFeature = Chart.Element.extend({
     return this.getCenterPoint();
   },
 
-  draw() {
-    if (!this.feature) {
+  _drawInCache(doc) {
+    const bounds = this.getBounds();
+    if (!Number.isFinite(bounds.x)) {
       return;
     }
+    const canvas = this.cache && this.cache.canvas ? this.cache.canvas : doc.createElement('canvas');
+    canvas.width = Math.max(Math.ceil(bounds.width), 1);
+    canvas.height = Math.max(Math.ceil(bounds.height), 1);
 
-    const vm = this._view;
-    const ctx = this._chart.ctx;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.save();
+    ctx.translate(-bounds.x, -bounds.y);
+    this._drawImpl(ctx);
+    ctx.restore();
+
+    this.cache = Object.assign({}, this.cache || {}, {
+      canvas,
+      canvasKey: this._optionsToKey(),
+    });
+  },
+
+  _optionsToKey() {
+    const options = this._view;
+    return `${options.backgroundColor};${options.borderColor};${options.borderWidth}`;
+  },
+
+  _drawImpl(ctx) {
+    const options = this._view;
     ctx.beginPath();
     this._xScale.geoPath.context(ctx)(this.feature);
-    if (vm.backgroundColor) {
-      ctx.fillStyle = vm.backgroundColor;
+    if (options.backgroundColor) {
+      ctx.fillStyle = options.backgroundColor;
       ctx.fill();
     }
-    if (vm.borderColor) {
-      ctx.strokeStyle = vm.borderColor;
-      ctx.lineWidth = vm.borderWidth;
+    if (options.borderColor) {
+      ctx.strokeStyle = options.borderColor;
+      ctx.lineWidth = options.borderWidth;
       ctx.stroke();
     }
-    ctx.restore();
+  },
+
+  draw() {
+    if (!this.feature) {
+      return;
+    }
+    const ctx = this._chart.ctx;
+    if (!this.cache || this.cache.canvasKey !== this._optionsToKey()) {
+      this._drawInCache(ctx.canvas.ownerDocument);
+    }
+    const bounds = this.getBounds();
+    if (this.cache && this.cache.canvas) {
+      ctx.drawImage(this.cache.canvas, bounds.x, bounds.y, bounds.width, bounds.height);
+    } else if (Number.isFinite(bounds.x)) {
+      ctx.save();
+      this._drawImpl(ctx);
+      ctx.restore();
+    }
   },
 }));