From f9417db5205df3f0f815216f7f02bda1cdd1dec9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Wed, 19 Apr 2023 12:15:07 +0200
Subject: [PATCH] add pixel ratio change listener.

---
 src/component/cursors.vue | 26 +++++++++++++++++++++++++-
 src/component/overlay.vue | 24 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/component/cursors.vue b/src/component/cursors.vue
index d2261bf1..396e35b4 100644
--- a/src/component/cursors.vue
+++ b/src/component/cursors.vue
@@ -69,11 +69,35 @@
       const { width, height } = this._overlay.getBoundingClientRect()
       this.canvasResize({ width, height })
 
+      // react to pixel ratio changes
+      this.onPixelRatioChange()
+
       // store last drawing points
       this._last_points = {}
     }
 
-    beforeDestroy() {}
+    beforeDestroy() {
+      // stop pixel ratio change listener
+      if (this.unsubscribePixelRatioChange) {
+        this.unsubscribePixelRatioChange()
+      }
+    }
+
+    private unsubscribePixelRatioChange?: () => void
+    private onPixelRatioChange() {
+      if (this.unsubscribePixelRatioChange) {
+        this.unsubscribePixelRatioChange()
+      }
+
+      const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+      media.addEventListener('change', this.onPixelRatioChange)
+      this.unsubscribePixelRatioChange = () => {
+        media.removeEventListener('change', this.onPixelRatioChange)
+      }
+
+      this.canvasScale = window.devicePixelRatio
+      this.onCanvasSizeChange(this.canvasSize)
+    }
 
     @Watch('canvasSize')
     onCanvasSizeChange({ width, height }: Dimension) {
diff --git a/src/component/overlay.vue b/src/component/overlay.vue
index 7a2b7a1c..7d259e41 100644
--- a/src/component/overlay.vue
+++ b/src/component/overlay.vue
@@ -138,6 +138,9 @@
       const { width, height } = this._overlay.getBoundingClientRect()
       this.canvasResize({ width, height })
 
+      // react to pixel ratio changes
+      this.onPixelRatioChange()
+
       let ctrlKey = 0
       let noKeyUp = {} as Record<number, boolean>
 
@@ -209,6 +212,11 @@
 
       // stop inactive cursor interval if exists
       this.clearInactiveCursorInterval()
+
+      // stop pixel ratio change listener
+      if (this.unsubscribePixelRatioChange) {
+        this.unsubscribePixelRatioChange()
+      }
     }
 
     getMousePos(clientX: number, clientY: number) {
@@ -499,6 +507,22 @@
     private canvasRequestedFrame = false
     private canvasRenderTimeout: number | null = null
 
+    private unsubscribePixelRatioChange?: () => void
+    private onPixelRatioChange() {
+      if (this.unsubscribePixelRatioChange) {
+        this.unsubscribePixelRatioChange()
+      }
+
+      const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+      media.addEventListener('change', this.onPixelRatioChange)
+      this.unsubscribePixelRatioChange = () => {
+        media.removeEventListener('change', this.onPixelRatioChange)
+      }
+
+      this.canvasScale = window.devicePixelRatio
+      this.onCanvasSizeChange(this.canvasSize)
+    }
+
     @Watch('canvasSize')
     onCanvasSizeChange({ width, height }: Dimension) {
       this.canvasResize({ width, height })