@mappedin/viewer 0.32.2-79d5869.0 → 0.32.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.32.2](https://github.com/MappedIn/viewer/compare/viewer-v0.32.1...viewer-v0.32.2) (2025-01-16)
+
+
+### Bug Fixes
+
+* **SRV-1964:** correct scale hover effect canvas with browser zoom ([#403](https://github.com/MappedIn/viewer/issues/403)) ([df422e5](https://github.com/MappedIn/viewer/commit/df422e5ad658a63fe8863d632adbaee7cec689c6))
+
 ## [0.32.1](https://github.com/MappedIn/viewer/compare/viewer-v0.32.0...viewer-v0.32.1) (2025-01-14)
 
 

package/dist/index.js

@@ -17064,7 +17064,7 @@ const Cr2 = function() {
   const e = lg(), [t, r] = i;
   e.capture(t, r);
 }, vr2 = (i = {}) => {
-  const e = "phc_vZrwt3z6JmdPnErvTgZoazTAGlCRMiz6c2NqWtBt8qz", t = "https://ph-api.mappedin.com";
+  const e = "phc_sRrjUwz9zicl4GeXtSnwcuKMr50SB76ma6NVi6zlPou", t = "https://ph-api.mappedin.com";
   B$2(i.captureEnabled ?? !0);
   const r = lg();
   if (!r.__loaded && e != null && t != null) {
@@ -74142,6 +74142,18 @@ class H6e {
     g2(this, "cursorPosition", { x: 0, y: 0 });
     g2(this, "enabled");
     g2(this, "frameCallback");
+    g2(this, "handleResize", () => {
+      this.updateCanvasResolution(this.containerRect.width, this.containerRect.height);
+    });
+    /**
+     * Update the canvas resolution to account for high DPR devices. DPR lower than 1 should work
+     * fine, but higher DPR's could cause blurriness without scaling.
+     */
+    g2(this, "updateCanvasResolution", (e, t) => {
+      var n;
+      const r = Math.max(devicePixelRatio, 1);
+      this.canvas.width = e * r, this.canvas.height = t * r, this.canvas.style.width = `${e}px`, this.canvas.style.height = `${t}px`, (n = this.context) == null || n.scale(r, r);
+    });
     /**
      * Scale the canvas whenever the container is resized.
      */
@@ -74151,7 +74163,7 @@ class H6e {
         if (r == null || (this.containerRect = r.target.getBoundingClientRect(), this.context == null))
           return;
         const { height: n, width: a } = r.contentRect;
-        this.canvas.height = n * devicePixelRatio, this.canvas.width = a * devicePixelRatio, this.canvas.style.height = `${n}px`, this.canvas.style.width = `${a}px`, this.context.scale(devicePixelRatio, devicePixelRatio);
+        this.updateCanvasResolution(a, n);
       }).observe(this.container);
     });
     g2(this, "handleMouseMove", (e) => {
@@ -74164,7 +74176,7 @@ class H6e {
      * If enabled, draw a frame then request another frame draw.
      */
     g2(this, "startDrawing", () => {
-      this.enabled && this.context != null && (this.hasMouseMoved && this.frameCallback(this.context, this.canvas, this.cursorPosition), requestAnimationFrame(this.startDrawing));
+      this.enabled && this.context != null && (this.hasMouseMoved && (this.clearCanvas(), this.frameCallback(this.context, this.canvas, this.cursorPosition)), requestAnimationFrame(this.startDrawing));
     });
     g2(this, "enable", () => {
       this.enabled || (this.enabled = !0, this.startDrawing());
@@ -74179,11 +74191,13 @@ class H6e {
       passive: !0
     }), document.addEventListener("mousedown", this.handleMouseMove, {
       passive: !0
+    }), window.addEventListener("resize", this.handleResize, {
+      passive: !0
     }), this.makeCanvasResponsive(), a.enabled && this.enable();
   }
   destroy() {
     var e;
-    this.disable(), this.canvas.remove(), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mousedown", this.handleMouseMove), (e = this.resizeObserver) == null || e.disconnect();
+    this.disable(), this.canvas.remove(), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mousedown", this.handleMouseMove), window.removeEventListener("resize", this.handleResize), (e = this.resizeObserver) == null || e.disconnect();
   }
 }
 const O6e = 4;
@@ -74252,7 +74266,7 @@ const B6e = ({
   const p = w2.useCallback(
     (f, m, y) => {
       var E, A;
-      f.clearRect(0, 0, m.width, m.height), (E = h.current) == null || E.setPosition({ ...y }), f.save();
+      (E = h.current) == null || E.setPosition({ ...y }), f.save();
       const g = ((A = h.current) == null ? void 0 : A.angle) ?? 0;
       f.transform(1, 0, 0, 1, y.x, y.y);
       const C = {
@@ -75036,7 +75050,7 @@ const f5e = (i, e) => (F4 != null || (cp == null && globalThis.OffscreenCanvas !
   const r = {
     fit: "fit",
     ...t
-  }, n = "https://image-proxy-staging.mappedin.net", a = g5e[e], s = encodeURIComponent(i);
+  }, n = "https://image-proxy.mappedin.com", a = g5e[e], s = encodeURIComponent(i);
   return `${n}/resize:${r.fit}:${a}:${a}:0/plain/${s}`.replaceAll(/\/+/g, "/").replace("/", "//");
 }, GQ = le.div`
 	display: flex;
@@ -76511,7 +76525,7 @@ class N5e {
   }
   async init(e) {
     this.container = e;
-    const t = this.rootStore.startupOptions.outdoorMapsKey ?? "f8fd42d9e1c2751f", r = {
+    const t = this.rootStore.startupOptions.outdoorMapsKey ?? "zixaliyV5cGjHU", r = {
       auto: !1,
       initialFloor: this.rootStore.currentFloor,
       watermark: this.getWatermarkOptions(),
@@ -96615,7 +96629,7 @@ const Sge = ({ color: i = bl.color, changeFrequency: e = bl.changeFrequency, rad
   ] });
 }), MA2 = () => {
   let i = document.querySelector("meta[name=app-version]");
-  i == null && (i = document.createElement("meta"), i.name = "app-version", document.head.appendChild(i)), i.content = "0.32.1";
+  i == null && (i = document.createElement("meta"), i.name = "app-version", document.head.appendChild(i)), i.content = "0.32.2";
   let e = document.querySelector("meta[name=viewport]");
   e == null && (e = document.createElement("meta"), e.name = "viewport", document.head.appendChild(e)), e.content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no";
 }, SA2 = (i) => {

package/dist/types/src/lib/canvas/hi-res-canvas.d.ts

@@ -16,6 +16,12 @@ declare class HighResCanvas {
     private enabled;
     private frameCallback;
     constructor(container: HTMLElement, frameCallback?: TCanvasFrameCallback, options?: THighResCanvasOptions);
+    private handleResize;
+    /**
+     * Update the canvas resolution to account for high DPR devices. DPR lower than 1 should work
+     * fine, but higher DPR's could cause blurriness without scaling.
+     */
+    private updateCanvasResolution;
     /**
      * Scale the canvas whenever the container is resized.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mappedin/viewer",
-  "version": "0.32.2-79d5869.0",
+  "version": "0.32.2",
   "type": "module",
   "browser": "./dist/index.js",
   "license": "UNLICENSED",