From ffbdf97478d72496b9ae235b8de35a9ac751cf93 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sun, 5 Sep 2021 00:08:24 +0800
Subject: [PATCH] improve heartbeat bar rendering in different dpi

---
 src/components/HeartbeatBar.vue | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index f49b8756..04d046bd 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -31,7 +31,7 @@ export default {
             beatWidth: 10,
             beatHeight: 30,
             hoverScale: 1.5,
-            beatMargin: 3,      // Odd number only, even = blurry
+            beatMargin: 4,
             move: false,
             maxBeat: -1,
         }
@@ -122,29 +122,26 @@ export default {
             this.$root.heartbeatList[this.monitorId] = [];
         }
     },
+
     mounted() {
         if (this.size === "small") {
+            this.beatWidth = 5;
             this.beatHeight = 16;
+            this.beatMargin = 2;
+        }
 
-            // Handle strange render problem in different DPI.
-            if (window.devicePixelRatio === 1.25) {
-                this.beatWidth = 5.6;
-                this.beatMargin = 2.4;
-
-            } else if (window.devicePixelRatio === 1.75) {
-                this.beatWidth = 5.7;
-                this.beatMargin = 2.4;
-
-            } else if (window.devicePixelRatio === 2.25) {
-                this.beatWidth = 5.8;
-                this.beatMargin = 2.4;
+        // Suddenly, have an idea how to handle it universally.
+        // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
+        const actualWidth = this.beatWidth * window.devicePixelRatio;
+        const actualMargin = this.beatMargin * window.devicePixelRatio;
 
-            } else {
-                // 100%, 150%, 200% ...
-                this.beatWidth = 6;
-                this.beatMargin = 2;
-            }
+        if (! Number.isInteger(actualWidth)) {
+            this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
+            console.log(this.beatWidth);
+        }
 
+        if (! Number.isInteger(actualMargin)) {
+            this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
         }
 
         window.addEventListener("resize", this.resize);