@mappedin/viewer 0.32.2-a6589fc.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

@@ -9452,7 +9452,8 @@ const g0 = new BV2("[Mappedin Viewer]"), x5 = "embedded", Zs = "you-are-here", y
     xlarge: 20
   },
   borderRadius: {
-    primary: 4
+    primary: 4,
+    large: 8
   },
   fontWeight: {
     light: 300,
@@ -17063,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) {
@@ -74141,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.
      */
@@ -74150,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) => {
@@ -74163,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());
@@ -74178,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;
@@ -74251,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 = {
@@ -75035,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;
@@ -76510,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(),
@@ -93884,7 +93899,9 @@ const tA2 = le.div`
 
 	&&.left {
 		left: 10px;
-		top: calc(50% - 10px);
+		// Center the chevron vertically
+		top: calc(50% - ${(i) => i.$offsetY ?? 0}px);
+		transform: translateY(-50%);
 		&& svg {
 			transform: rotate(90deg);
 		}
@@ -93892,19 +93909,29 @@ const tA2 = le.div`
 
 	&&.right {
 		right: 10px;
-		top: calc(50% - 10px);
+		// Center the chevron vertically
+		top: calc(50% - ${(i) => i.$offsetY ?? 0}px);
+		transform: translateY(-50%);
 		&& svg {
 			transform: rotate(-90deg);
 		}
 	}
-`, ae2 = ({ size: i, onNext: e, onPrevious: t, backgroundStyle: r = {}, tabIndex: n }) => {
-  const a = nt();
+`, ae2 = ({
+  size: i,
+  onNext: e,
+  onPrevious: t,
+  backgroundStyle: r = {},
+  tabIndex: n,
+  offsetY: a
+}) => {
+  const s = nt();
   return /* @__PURE__ */ Z.jsxs(Z.Fragment, { children: [
     /* @__PURE__ */ Z.jsx(
       s7,
       {
+        $offsetY: a,
         style: {
-          backgroundColor: `${a.colors.background.inverted}${Zh(0.25)}`,
+          backgroundColor: `${s.colors.background.inverted}${Zh(0.25)}`,
           ...r
         },
         className: "left",
@@ -93916,8 +93943,9 @@ const tA2 = le.div`
     /* @__PURE__ */ Z.jsx(
       s7,
       {
+        $offsetY: a,
         style: {
-          backgroundColor: `${a.colors.background.inverted}${Zh(0.25)}`,
+          backgroundColor: `${s.colors.background.inverted}${Zh(0.25)}`,
           ...r
         },
         className: "right",
@@ -94824,63 +94852,72 @@ const bme = (i) => {
 	img {
 		object-fit: contain;
 	}
-`, Dme = ({ imageURLs: i, onFullScreenGalleryOpen: e, proxy: t }) => {
-  const { fullscreenRootRef: r, isMobile: n } = Yt(), {
-    imgIndex: a,
-    previousImage: s,
-    nextImage: o,
-    setImgIndex: l,
-    currentImageSources: u,
-    showNavigationControls: c,
-    handleKeyDown: h,
-    allowFullscreenImages: p,
-    handleCarouselClick: f,
-    fullscreen: m,
-    handleCloseFullscreen: y,
-    wrapperRef: g
+`, Dme = ({
+  children: i,
+  imageURLs: e,
+  onFullScreenGalleryOpen: t,
+  proxy: r,
+  width: n,
+  height: a,
+  navChevronOffsetY: s
+}) => {
+  const { fullscreenRootRef: o, isMobile: l } = Yt(), {
+    imgIndex: u,
+    previousImage: c,
+    nextImage: h,
+    setImgIndex: p,
+    currentImageSources: f,
+    showNavigationControls: m,
+    handleKeyDown: y,
+    allowFullscreenImages: g,
+    handleCarouselClick: C,
+    fullscreen: x,
+    handleCloseFullscreen: _,
+    wrapperRef: w
   } = Mme({
-    imageURLs: i,
-    onFullScreenGalleryOpen: e,
-    proxy: t
+    imageURLs: e,
+    onFullScreenGalleryOpen: t,
+    proxy: r
   });
   return (
     // Need a wrapper around the tabIndex 0 element so we can trap focus
-    /* @__PURE__ */ Z.jsx(Eme, { id: Qt("image-carousel"), role: "tablist", ref: g, $mobile: n, children: /* @__PURE__ */ Z.jsxs("div", { className: "focus-wrapper", tabIndex: 0, onKeyDown: h, children: [
+    /* @__PURE__ */ Z.jsx(Eme, { id: Qt("image-carousel"), role: "tablist", ref: w, $mobile: l, style: { width: n, height: a }, children: /* @__PURE__ */ Z.jsxs("div", { className: "focus-wrapper", tabIndex: 0, onKeyDown: y, style: { borderRadius: "inherit" }, children: [
       /* @__PURE__ */ Z.jsx(
         "div",
         {
-          onClick: f,
+          onClick: C,
           style: {
             display: "block",
             borderRadius: "8px 8px 0 0",
-            cursor: p ? "pointer" : "auto"
+            cursor: g ? "pointer" : "auto"
           },
-          children: u ? /* @__PURE__ */ Z.jsx(
+          children: f ? /* @__PURE__ */ Z.jsx(
             se2,
             {
-              style: { width: "100%", height: 180 },
+              style: { width: n ?? "100%", height: a ?? 180 },
               role: "option",
-              src: [u.medium ?? "", u.original]
+              src: [f.medium ?? "", f.original]
             }
           ) : null
         }
       ),
-      (r == null ? void 0 : r.current) != null ? DC.createPortal(
-        /* @__PURE__ */ Z.jsxs(Ame, { $visible: m, children: [
+      i,
+      (o == null ? void 0 : o.current) != null ? DC.createPortal(
+        /* @__PURE__ */ Z.jsxs(Ame, { $visible: x, children: [
           /* @__PURE__ */ Z.jsx(
             se2,
             {
               role: "option",
-              src: u == null ? void 0 : u.original,
+              src: f == null ? void 0 : f.original,
               style: {
                 background: "transparent",
-                maxWidth: n ? "100%" : "80%",
+                maxWidth: l ? "100%" : "80%",
                 maxHeight: "80%"
                 // Always leave room for the close button
               }
             }
           ),
-          c ? (
+          m ? (
             // These controls should not be directly focusable. Instead, the container should be focusable.
             /* @__PURE__ */ Z.jsxs(Z.Fragment, { children: [
               /* @__PURE__ */ Z.jsx("div", { className: "nav-wrapper", children: /* @__PURE__ */ Z.jsx(
@@ -94888,37 +94925,46 @@ const bme = (i) => {
                 {
                   tabIndex: -1,
                   size: 18,
-                  count: i.length,
-                  activeIndex: a,
-                  onClick: l
+                  count: e.length,
+                  activeIndex: u,
+                  onClick: p
                 }
               ) }),
               /* @__PURE__ */ Z.jsx(
                 ae2,
                 {
                   tabIndex: -1,
-                  size: n ? 24 : 36,
-                  onNext: o,
-                  onPrevious: s,
+                  size: l ? 24 : 36,
+                  onNext: h,
+                  onPrevious: c,
                   backgroundStyle: { background: "transparent", opacity: 0.4 }
                 }
               )
             ] })
           ) : null,
-          /* @__PURE__ */ Z.jsx(dS, { onClickOrPress: y, children: /* @__PURE__ */ Z.jsx(ti, { icon: "close-16x16", width: 24, height: 24, color: "#ffffff" }) })
+          /* @__PURE__ */ Z.jsx(dS, { onClickOrPress: _, children: /* @__PURE__ */ Z.jsx(ti, { icon: "close-16x16", width: 24, height: 24, color: "#ffffff" }) })
         ] }),
         // This is definitely defined because of the check for allowFullscreenImages
-        r.current
+        o.current
       ) : null,
-      c ? /* @__PURE__ */ Z.jsxs(Z.Fragment, { children: [
-        /* @__PURE__ */ Z.jsx(ae2, { size: 24, onNext: o, onPrevious: s, tabIndex: -1 }),
+      m ? /* @__PURE__ */ Z.jsxs(Z.Fragment, { children: [
+        /* @__PURE__ */ Z.jsx(
+          ae2,
+          {
+            size: 24,
+            onNext: h,
+            onPrevious: c,
+            tabIndex: -1,
+            offsetY: s
+          }
+        ),
         /* @__PURE__ */ Z.jsx(Sme, { children: /* @__PURE__ */ Z.jsx(
           ne2,
           {
             size: 16,
-            count: i.length,
-            activeIndex: a,
-            onClick: l,
+            count: e.length,
+            activeIndex: u,
+            onClick: p,
             tabIndex: -1
           }
         ) })
@@ -95226,7 +95272,14 @@ const bme = (i) => {
         backgroundColor: u.colors.background.primary
       },
       children: [
-        m ? /* @__PURE__ */ Z.jsx(Dme, { imageURLs: r, onFullScreenGalleryOpen: s }) : null,
+        m ? /* @__PURE__ */ Z.jsx(
+          Dme,
+          {
+            navChevronOffsetY: -20,
+            imageURLs: r,
+            onFullScreenGalleryOpen: s
+          }
+        ) : null,
         y ? /* @__PURE__ */ Z.jsx(
           Vme,
           {
@@ -96576,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/components/carousel/index.d.ts

@@ -1,7 +1,11 @@
+import { PropsWithChildren } from 'react';
 type TCarouselProps = {
     imageURLs: string[];
     onFullScreenGalleryOpen?: () => void;
     proxy?: boolean;
+    width?: number | string;
+    height?: number | string;
+    navChevronOffsetY?: number;
 };
-declare const Carousel: React.FC<TCarouselProps>;
+declare const Carousel: React.FC<PropsWithChildren<TCarouselProps>>;
 export default Carousel;

package/dist/types/src/components/carousel/nav-chevrons.d.ts

@@ -1,5 +1,5 @@
 import { TTheme } from '../../lib/types/theme';
-export declare const SideNavButton: import("styled-components").IStyledComponent<"web", {
+export declare const SideNavButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
     hidden?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
     security?: string | undefined | undefined;
@@ -275,13 +275,16 @@ export declare const SideNavButton: import("styled-components").IStyledComponent
     outlineOffset?: number | undefined;
     outlineColor?: string | undefined;
     outlineWidth?: number | undefined;
-}>;
+}, {
+    $offsetY?: number;
+}>>;
 type TNavChevronProps = {
     size: number;
     onNext: () => void;
     onPrevious: () => void;
     backgroundStyle?: React.CSSProperties;
     tabIndex?: number;
+    offsetY?: number;
 };
 declare const NavChevrons: React.FC<TNavChevronProps>;
 export default NavChevrons;

package/dist/types/src/components/logo-box/index.d.ts

@@ -3,6 +3,7 @@ type TLogoBoxProps = {
     height?: number;
     proxy?: boolean;
     padding?: number;
+    boxShadow?: boolean;
 };
 declare const LogoBox: React.FC<TLogoBoxProps>;
 export default LogoBox;

package/dist/types/src/components/metadata-card/index.d.ts

@@ -0,0 +1,3 @@
+import { TMetadataCardProps } from './utils';
+declare const MetadataCard: React.FC<TMetadataCardProps>;
+export default MetadataCard;

package/dist/types/src/components/metadata-card/metadata-card.stories.d.ts

@@ -0,0 +1,3 @@
+export declare const Default: () => import("react").JSX.Element;
+export declare const NoHero: () => import("react").JSX.Element;
+export declare const LongName: () => import("react").JSX.Element;

package/dist/types/src/components/metadata-card/utils.d.ts

@@ -0,0 +1,75 @@
+import { TOnClickOrPressPayload } from '../button';
+export declare const METADATA_CARD_WIDTH = 320;
+export declare const METADATA_CARD_PADDING = 20;
+export declare const HERO_IMAGE_HEIGHT = 200;
+export type TMetadataCardProps = {
+    /**
+     * The name of the place.
+     */
+    name?: string;
+    /**
+     * Logo image URL.
+     */
+    logoImage?: string;
+    /**
+     * A description of the place.
+     */
+    description?: string;
+    /**
+     * Links to show. Links can optionally be named. Unnamed links will show up as the link URL.
+     */
+    links?: {
+        url: string;
+        name?: string;
+    }[];
+    /**
+     * Image URLs to show in the hero gallery at the top of the card.
+     */
+    heroImages?: string[];
+    /**
+     * Categories to show in the card.
+     */
+    categories?: {
+        id: string;
+        name: string;
+    }[];
+    /**
+     * Callback when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Callback when the directions button is clicked.
+     */
+    onDirectionsClick?: (e: TOnClickOrPressPayload) => void;
+    /**
+     * Callback when the full screen gallery is opened.
+     */
+    onFullScreenGalleryOpen?: () => void;
+    /**
+     * Callback when a link is clicked. The link itself will open by default in a new tab. This
+     * callback can be used to handle an extra functionality, e.g. analytics.
+     */
+    onLinkClick?: (url: string) => void;
+    /**
+     * Callback when the location link is clicked to copy a deep link to the location.
+     */
+    onCopyLocationLink?: () => void;
+    /**
+     * Optionally disable the directions button.
+     */
+    directionsButtonDisabled?: boolean;
+    /**
+     * Whether to use the image proxy to resize the images, defaults to true.
+     */
+    proxyImages?: boolean;
+};
+export declare const useMetadataCard: (options: TMetadataCardProps) => {
+    heroImageURLs: (Pick<string[], 0> & string[]) | null;
+    categoriesList: (Pick<{
+        id: string;
+        name: string;
+    }[], 0> & {
+        id: string;
+        name: string;
+    }[]) | null;
+};

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/dist/types/src/lib/types/theme.d.ts

@@ -72,6 +72,7 @@ export type TTheme = {
     font: string;
     borderRadius: {
         primary: number;
+        large: number;
     };
     fontSize: {
         xsmall: number;

package/package.json

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