From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Tue, 13 Jul 2021 22:20:24 +0000 (+0300)
Subject: Bar: inflate rects by 0.33px to avoid artifacts (#9399)
X-Git-Tag: v3.5.0~21
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=58999ea7ac8deb4dc90464fa661d7ad26533f0ae;p=thirdparty%2FChart.js.git

Bar: inflate rects by 0.33px to avoid artifacts (#9399)

* Bar: inflate rects by 0.33px to avoid artifacts
* Update fixture
* YAGNI
---

diff --git a/src/elements/element.bar.js b/src/elements/element.bar.js
index c7e82309e..fc7ebd46b 100644
--- a/src/elements/element.bar.js
+++ b/src/elements/element.bar.js
@@ -1,5 +1,5 @@
 import Element from '../core/core.element';
-import {isObject} from '../helpers';
+import {isObject, _limitValue} from '../helpers';
 import {addRoundedRectPath} from '../helpers/helpers.canvas';
 import {toTRBL, toTRBLCorners} from '../helpers/helpers.options';
 
@@ -67,7 +67,7 @@ function startEnd(v, start, end) {
 }
 
 function skipOrLimit(skip, value, min, max) {
-  return skip ? 0 : Math.max(Math.min(value, max), min);
+  return skip ? 0 : _limitValue(value, min, max);
 }
 
 function parseBorderWidth(bar, maxW, maxH) {
@@ -156,6 +156,20 @@ function addNormalRectPath(ctx, rect) {
   ctx.rect(rect.x, rect.y, rect.w, rect.h);
 }
 
+function inflateRect(rect, amount, refRect = {}) {
+  const x = rect.x !== refRect.x ? -amount : 0;
+  const y = rect.y !== refRect.y ? -amount : 0;
+  const w = (rect.x + rect.w !== refRect.x + refRect.w ? amount : 0) - x;
+  const h = (rect.y + rect.h !== refRect.y + refRect.h ? amount : 0) - y;
+  return {
+    x: rect.x + x,
+    y: rect.y + y,
+    w: rect.w + w,
+    h: rect.h + h,
+    radius: rect.radius
+  };
+}
+
 export default class BarElement extends Element {
 
   constructor(cfg) {
@@ -176,20 +190,21 @@ export default class BarElement extends Element {
     const options = this.options;
     const {inner, outer} = boundingRects(this);
     const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
+    const inflateAmount = 0.33;
 
     ctx.save();
 
     if (outer.w !== inner.w || outer.h !== inner.h) {
       ctx.beginPath();
-      addRectPath(ctx, outer);
+      addRectPath(ctx, inflateRect(outer, inflateAmount, inner));
       ctx.clip();
-      addRectPath(ctx, inner);
+      addRectPath(ctx, inflateRect(inner, -inflateAmount, outer));
       ctx.fillStyle = options.borderColor;
       ctx.fill('evenodd');
     }
 
     ctx.beginPath();
-    addRectPath(ctx, inner);
+    addRectPath(ctx, inflateRect(inner, inflateAmount, outer));
     ctx.fillStyle = options.backgroundColor;
     ctx.fill();
 
diff --git a/test/fixtures/controller.bar/bar-base-value.png b/test/fixtures/controller.bar/bar-base-value.png
index 5d5986bdf..87219e676 100644
Binary files a/test/fixtures/controller.bar/bar-base-value.png and b/test/fixtures/controller.bar/bar-base-value.png differ
diff --git a/test/fixtures/controller.bar/baseLine/bottom.png b/test/fixtures/controller.bar/baseLine/bottom.png
index d7107153b..87e982e1e 100644
Binary files a/test/fixtures/controller.bar/baseLine/bottom.png and b/test/fixtures/controller.bar/baseLine/bottom.png differ
diff --git a/test/fixtures/controller.bar/baseLine/left.png b/test/fixtures/controller.bar/baseLine/left.png
index ca5e1227b..19b328c3b 100644
Binary files a/test/fixtures/controller.bar/baseLine/left.png and b/test/fixtures/controller.bar/baseLine/left.png differ
diff --git a/test/fixtures/controller.bar/baseLine/mid-x.png b/test/fixtures/controller.bar/baseLine/mid-x.png
index 1f4feb2e3..d6b377677 100644
Binary files a/test/fixtures/controller.bar/baseLine/mid-x.png and b/test/fixtures/controller.bar/baseLine/mid-x.png differ
diff --git a/test/fixtures/controller.bar/baseLine/mid-y.png b/test/fixtures/controller.bar/baseLine/mid-y.png
index 88c21a153..646fd8051 100644
Binary files a/test/fixtures/controller.bar/baseLine/mid-y.png and b/test/fixtures/controller.bar/baseLine/mid-y.png differ
diff --git a/test/fixtures/controller.bar/baseLine/right.png b/test/fixtures/controller.bar/baseLine/right.png
index 2ad1dfdb3..2f98f893a 100644
Binary files a/test/fixtures/controller.bar/baseLine/right.png and b/test/fixtures/controller.bar/baseLine/right.png differ
diff --git a/test/fixtures/controller.bar/baseLine/top.png b/test/fixtures/controller.bar/baseLine/top.png
index 8472c0fbf..e04b9b0bd 100644
Binary files a/test/fixtures/controller.bar/baseLine/top.png and b/test/fixtures/controller.bar/baseLine/top.png differ
diff --git a/test/fixtures/controller.bar/baseLine/value-x.png b/test/fixtures/controller.bar/baseLine/value-x.png
index 1fd0161a5..23ed06dd6 100644
Binary files a/test/fixtures/controller.bar/baseLine/value-x.png and b/test/fixtures/controller.bar/baseLine/value-x.png differ
diff --git a/test/fixtures/controller.bar/baseLine/value-y.png b/test/fixtures/controller.bar/baseLine/value-y.png
index 15fe78710..7063fd102 100644
Binary files a/test/fixtures/controller.bar/baseLine/value-y.png and b/test/fixtures/controller.bar/baseLine/value-y.png differ
diff --git a/test/fixtures/controller.bar/borderColor/border+dpr.js b/test/fixtures/controller.bar/borderColor/border+dpr.js
new file mode 100644
index 000000000..3fa0b53c0
--- /dev/null
+++ b/test/fixtures/controller.bar/borderColor/border+dpr.js
@@ -0,0 +1,35 @@
+module.exports = {
+  threshold: 0,
+  tolerance: 0,
+  config: {
+    type: 'bar',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5, 6],
+      datasets: [
+        {
+          // option in dataset
+          data: [5, 4, 3, 2, 3, 4, 5],
+        },
+      ]
+    },
+    options: {
+      events: [],
+      devicePixelRatio: 1.5,
+      barPercentage: 1,
+      categoryPercentage: 1,
+      backgroundColor: 'black',
+      borderColor: 'black',
+      borderWidth: 8,
+      scales: {
+        x: {display: false},
+        y: {display: false}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 501
+    }
+  }
+};
diff --git a/test/fixtures/controller.bar/borderColor/border+dpr.png b/test/fixtures/controller.bar/borderColor/border+dpr.png
new file mode 100644
index 000000000..0fae394e8
Binary files /dev/null and b/test/fixtures/controller.bar/borderColor/border+dpr.png differ
diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png
index 3aff7387b..0c96f07f5 100644
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png differ
diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png
index 24eb8e0ea..2635b2792 100644
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png differ
diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png
index 2b8af4bb8..13b82c32a 100644
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png differ
diff --git a/test/fixtures/controller.bar/borderRadius/border-radius.png b/test/fixtures/controller.bar/borderRadius/border-radius.png
index 68e7c0dd2..ec5e8a63d 100644
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius.png and b/test/fixtures/controller.bar/borderRadius/border-radius.png differ
diff --git a/test/fixtures/controller.bar/borderRadius/no-spacing.js b/test/fixtures/controller.bar/borderRadius/no-spacing.js
new file mode 100644
index 000000000..53a0fc47f
--- /dev/null
+++ b/test/fixtures/controller.bar/borderRadius/no-spacing.js
@@ -0,0 +1,33 @@
+module.exports = {
+  threshold: 0.01,
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      datasets: [
+        {
+          data: [9, 25, 13, 17, 12, 21, 20, 19, 6, 12, 14, 20],
+          categoryPercentage: 1,
+          barPercentage: 1,
+          backgroundColor: '#2E5C76',
+          borderWidth: 2,
+          borderColor: '#377395',
+          borderRadius: 5,
+        },
+      ]
+    },
+    options: {
+      devicePixelRatio: 1.25,
+      scales: {
+        x: {display: false},
+        y: {display: false}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};
diff --git a/test/fixtures/controller.bar/borderRadius/no-spacing.png b/test/fixtures/controller.bar/borderRadius/no-spacing.png
new file mode 100644
index 000000000..b630cf5ca
Binary files /dev/null and b/test/fixtures/controller.bar/borderRadius/no-spacing.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/indexable.png b/test/fixtures/controller.bar/borderWidth/indexable.png
index d3f1b85c8..88428927e 100644
Binary files a/test/fixtures/controller.bar/borderWidth/indexable.png and b/test/fixtures/controller.bar/borderWidth/indexable.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/object.png b/test/fixtures/controller.bar/borderWidth/object.png
index 04576006a..3b36d96cb 100644
Binary files a/test/fixtures/controller.bar/borderWidth/object.png and b/test/fixtures/controller.bar/borderWidth/object.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/value.png b/test/fixtures/controller.bar/borderWidth/value.png
index af89232e9..58fec25d8 100644
Binary files a/test/fixtures/controller.bar/borderWidth/value.png and b/test/fixtures/controller.bar/borderWidth/value.png differ
diff --git a/test/fixtures/controller.bar/horizontal-borders.png b/test/fixtures/controller.bar/horizontal-borders.png
index 73adeead5..96f16777a 100644
Binary files a/test/fixtures/controller.bar/horizontal-borders.png and b/test/fixtures/controller.bar/horizontal-borders.png differ
diff --git a/test/fixtures/scale.category/ticks-from-data.js b/test/fixtures/scale.category/ticks-from-data.js
index d00292742..a82f643a3 100644
--- a/test/fixtures/scale.category/ticks-from-data.js
+++ b/test/fixtures/scale.category/ticks-from-data.js
@@ -4,19 +4,13 @@ module.exports = {
     type: 'bar',
     data: {
       datasets: [{
-        data: [10, 5, 0, 25, 78]
+        data: [10, 5, 0, 25, 78],
+        backgroundColor: 'transparent'
       }],
       labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
     },
     options: {
       indexAxis: 'y',
-      elements: {
-        bar: {
-          backgroundColor: '#AAAAAA80',
-          borderColor: '#80808080',
-          borderWidth: {bottom: 6, left: 15, top: 6, right: 15}
-        }
-      },
       scales: {
         x: {display: false},
         y: {display: true}
@@ -24,6 +18,10 @@ module.exports = {
     }
   },
   options: {
-    spriteText: true
+    spriteText: true,
+    canvas: {
+      width: 128,
+      height: 256
+    }
   }
 };
diff --git a/test/fixtures/scale.category/ticks-from-data.png b/test/fixtures/scale.category/ticks-from-data.png
index 4a65b49fe..6ce9dc90c 100644
Binary files a/test/fixtures/scale.category/ticks-from-data.png and b/test/fixtures/scale.category/ticks-from-data.png differ