@collabdt/core 0.0.40

package/dist/core/components/viewers/map/src/MapLayers/src/CommentLayer/index.js

@@ -0,0 +1,323 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MapContext, MenusContext } from "../../../../../../../store";
+import * as React from "react";
+import { Source, Layer, Popup, Marker } from "react-map-gl/maplibre";
+import Comment from "../../../../../../ui/Comments/Comment";
+import { Avatar } from "../../../../../../ui/Avatar";
+import { UserAvatar } from "../../../../../../ui/UserAvatar";
+import { ViewerNames } from "../../../../../../../types/dbTypes";
+import { MapLayerClickPriority } from "../../../../utils/MapEventManager/MapClickManager";
+import { extractCoordinatesFromFeature } from "../../../../utils/extractCoordinates";
+import { useComment, useComments } from "../../../../../../../hooks/comments/comments";
+import { useUser, useUsers } from "../../../../../../../hooks/users/users";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { useSession } from "next-auth/react";
+import { createClusterLayer, createClusterCountLayer, createUnclusteredPointLayer } from "../mapLayersUtils";
+const CommentAvatarMarker = ({ feature, isHighlighted, onMouseEnter, onMouseLeave }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const authorId = (_a = feature.properties) == null ? void 0 : _a.authorId;
+  const { user: author } = useUser(authorId != null ? String(authorId) : "");
+  const userName = (_b = feature.properties) == null ? void 0 : _b.authorName;
+  const userImageFileId = (_c = feature.properties) == null ? void 0 : _c.imageFileId;
+  const resolvedImageFileId = (_e = (_d = author == null ? void 0 : author.imageFileId) != null ? _d : userImageFileId) != null ? _e : null;
+  const coords = extractCoordinatesFromFeature(feature);
+  if (!coords) return null;
+  return /* @__PURE__ */ jsx(Marker, { longitude: coords.lng, latitude: coords.lat, anchor: "center", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "36px",
+        height: "36px",
+        borderRadius: "50%",
+        boxShadow: isHighlighted ? "0 0 0 3px #73cee2, 0 0 8px rgba(115, 206, 226, 0.5)" : "0 0 0 2px white ",
+        transition: "all 0.2s ease-in-out",
+        transform: isHighlighted ? "scale(1.2)" : "scale(1)",
+        overflow: "hidden"
+      },
+      onMouseEnter,
+      onMouseLeave,
+      children: /* @__PURE__ */ jsx(Avatar, { className: "h-full w-full", children: /* @__PURE__ */ jsx(
+        UserAvatar,
+        {
+          imageFileId: resolvedImageFileId,
+          name: userName,
+          className: "h-full w-full rounded-full object-cover"
+        }
+      ) })
+    }
+  ) }, String((_g = (_f = feature.properties) == null ? void 0 : _f.id) != null ? _g : `${coords.lng},${coords.lat}`));
+};
+const CommentLayer = () => {
+  var _a, _b;
+  const [hoveredCommentId, setHoveredCommentId] = React.useState(null);
+  const clusterLayer = createClusterLayer("comments");
+  const clusterCountLayer = createClusterCountLayer("comments");
+  const unclusteredPointLayer = createUnclusteredPointLayer("comments");
+  const t = useTranslations("CommentLayers");
+  const { state: mapState } = React.useContext(MapContext);
+  const { map, mapClickManager } = mapState.map;
+  const { comments } = useComments();
+  const { users } = useUsers();
+  const user = (_a = useSession().data) == null ? void 0 : _a.user;
+  const [popupInfo, setPopUpInfo] = React.useState(null);
+  const { user: popupAuthor } = useUser((popupInfo == null ? void 0 : popupInfo.authorId) != null ? String(popupInfo.authorId) : "");
+  const { deleteComment } = useComment((_b = popupInfo == null ? void 0 : popupInfo.id) != null ? _b : null);
+  const { state: menusState } = React.useContext(MenusContext);
+  const { commentsVisibleInViewer, currentCommentId } = menusState.menus;
+  const eligibleComments = comments.filter((comment) => comment.viewer === ViewerNames.map).map((comment) => {
+    var _a2, _b2;
+    const user2 = users.find((u) => u.id === comment.authorId);
+    return __spreadProps(__spreadValues({}, comment), {
+      authorName: (_a2 = user2 == null ? void 0 : user2.name) != null ? _a2 : "Unknown User",
+      imageFileId: (_b2 = user2 == null ? void 0 : user2.imageFileId) != null ? _b2 : null
+    });
+  });
+  React.useEffect(() => {
+    if (popupInfo && !comments.find((c) => c.id === popupInfo.id)) {
+      setPopUpInfo(null);
+    }
+  }, [comments, popupInfo]);
+  const geojsonCommentData = React.useMemo(() => {
+    const convertDataToGeojson = (commentData) => {
+      const commentFeatures = commentData.map((comment) => {
+        const { longitude, latitude, id, text, createdAt, authorId, organizationId, visible, authorName, imageFileId } = comment;
+        return {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [longitude, latitude]
+          },
+          properties: {
+            id: Number(id),
+            organizationId,
+            visible,
+            longitude,
+            latitude,
+            authorId: Number(authorId),
+            authorName,
+            imageFileId,
+            text,
+            createdAt,
+            viewer: ViewerNames.map
+          }
+        };
+      });
+      const commentFC = {
+        type: "FeatureCollection",
+        features: commentFeatures
+      };
+      return commentFC;
+    };
+    return convertDataToGeojson(eligibleComments);
+  }, [eligibleComments]);
+  React.useEffect(() => {
+    if (!map) return;
+    const showCommentPopUp = (e, features) => {
+      var _a2, _b2;
+      const feature = features == null ? void 0 : features[0];
+      if (!feature || feature.properties.point_count) return;
+      if (feature.geometry.type != "Point") return;
+      const [longitude, latitude] = feature.geometry.coordinates;
+      const featureProperties = feature.properties;
+      const { id, authorId, text, createdAt, authorName, imageFileId } = featureProperties;
+      setPopUpInfo({
+        id: Number(id),
+        authorId: Number(authorId),
+        organizationId: (_a2 = feature.properties) == null ? void 0 : _a2.organizationId,
+        visible: (_b2 = feature.properties) == null ? void 0 : _b2.visible,
+        longitude,
+        latitude,
+        text,
+        createdAt,
+        authorName,
+        imageFileId,
+        viewer: ViewerNames.map
+      });
+    };
+    const mouseEnterChangeCursor = () => {
+      map.getCanvas().style.cursor = "pointer";
+    };
+    const mouseLeaveChangeCursor = () => {
+      map.getCanvas().style.cursor = "";
+    };
+    mapClickManager.register("comments-unclustered-points", MapLayerClickPriority.CommentLayersClickPriority, showCommentPopUp);
+    map.on("mouseenter", "comments-unclustered-points", mouseEnterChangeCursor);
+    map.on("mouseleave", "comments-unclustered-points", mouseLeaveChangeCursor);
+    return () => {
+      mapClickManager.unregister("comments-unclustered-points");
+      map.off("mouseenter", "comments-unclustered-points", mouseEnterChangeCursor);
+      map.off("mouseleave", "comments-unclustered-points", mouseLeaveChangeCursor);
+    };
+  }, [map, mapClickManager]);
+  const handleRemoveComment = () => {
+    toast.success(t("commentDeleted"));
+    deleteComment();
+    setPopUpInfo(null);
+  };
+  React.useEffect(() => {
+    if (!map) return;
+    const zoomInToDecluster = (e) => {
+      var _a2;
+      const feature = (_a2 = e.features) == null ? void 0 : _a2[0];
+      if (!feature || !feature.properties.cluster_id) return;
+      const clusterId = feature.properties.cluster_id;
+      if (!("coordinates" in feature.geometry)) return;
+      const [lng, lat] = feature.geometry.coordinates;
+      const source = map.getSource("comments");
+      console.log(source);
+      console.log(clusterId);
+      source.getClusterExpansionZoom(clusterId).then(
+        (zoom) => {
+          console.log("easing to");
+          map.easeTo({ center: [lng, lat], zoom });
+        }
+      ).catch((error) => {
+        console.error(error);
+      });
+    };
+    const mouseEnterChangeCursor = () => {
+      map.getCanvas().style.cursor = "pointer";
+    };
+    const mouseLeaveChangeCursor = () => {
+      map.getCanvas().style.cursor = "";
+    };
+    map.on("click", "comments-clusters", zoomInToDecluster);
+    map.on("mouseenter", "comments-clusters", mouseEnterChangeCursor);
+    map.on("mouseleave", "comments-clusters", mouseLeaveChangeCursor);
+    return () => {
+      map.off("click", "comments-clusters", zoomInToDecluster);
+      map.off("mouseenter", "comments-clusters", mouseEnterChangeCursor);
+      map.off("mouseleave", "comments-clusters", mouseLeaveChangeCursor);
+    };
+  }, [map]);
+  const renderPopup = () => {
+    var _a2, _b2, _c, _d;
+    if (!popupInfo) return null;
+    return /* @__PURE__ */ jsxs(
+      Popup,
+      {
+        className: "noBorderPopup",
+        longitude: popupInfo.longitude,
+        latitude: popupInfo.latitude,
+        closeOnClick: false,
+        onClose: () => setPopUpInfo(null),
+        anchor: "bottom",
+        style: { height: "50px", border: "none", boxShadow: "none" },
+        offset: [0, 10],
+        children: [
+          /* @__PURE__ */ jsx(
+            Comment,
+            {
+              userName: popupInfo.authorName || "",
+              userImage: (_b2 = (_a2 = popupAuthor == null ? void 0 : popupAuthor.imageFileId) != null ? _a2 : popupInfo.imageFileId) != null ? _b2 : null,
+              userImageFileId: (_d = (_c = popupAuthor == null ? void 0 : popupAuthor.imageFileId) != null ? _c : popupInfo.imageFileId) != null ? _d : null,
+              text: popupInfo.text,
+              createdAt: popupInfo.createdAt,
+              onRemove: user.id === String(popupInfo.authorId) ? handleRemoveComment : null,
+              onClose: () => setPopUpInfo(null)
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { children: `
+              .noBorderPopup .maplibregl-popup-content {
+                border: none !important;
+                box-shadow: none !important;
+                background: transparent !important;
+              }
+              .noBorderPopup .maplibregl-popup-tip {
+                display: none !important;
+              }
+            ` })
+        ]
+      }
+    );
+  };
+  const [unclusteredFeatures, setUnclusteredFeatures] = React.useState([]);
+  React.useEffect(() => {
+    if (!map) return;
+    const updateUnclusteredFeatures = () => {
+      const allFeatures = map.querySourceFeatures("comments");
+      const unclusteredOnly = allFeatures.filter(
+        (f) => {
+          var _a2, _b2;
+          return !((_a2 = f.properties) == null ? void 0 : _a2.cluster) && !((_b2 = f.properties) == null ? void 0 : _b2.point_count);
+        }
+      );
+      const uniqueFeatures = /* @__PURE__ */ new Map();
+      unclusteredOnly.forEach((f) => uniqueFeatures.set(f.properties.id, f));
+      setUnclusteredFeatures(Array.from(uniqueFeatures.values()));
+    };
+    const onSourceData = (e) => {
+      if ((e == null ? void 0 : e.sourceId) === "comments") updateUnclusteredFeatures();
+    };
+    map.on("sourcedata", onSourceData);
+    map.on("moveend", updateUnclusteredFeatures);
+    map.on("zoomend", updateUnclusteredFeatures);
+    updateUnclusteredFeatures();
+    return () => {
+      map.off("sourcedata", onSourceData);
+      map.off("moveend", updateUnclusteredFeatures);
+      map.off("zoomend", updateUnclusteredFeatures);
+    };
+  }, [map]);
+  return /* @__PURE__ */ jsx(Fragment, { children: commentsVisibleInViewer.includes(ViewerNames.map) && /* @__PURE__ */ jsxs(
+    Source,
+    {
+      id: "comments",
+      type: "geojson",
+      data: geojsonCommentData,
+      cluster: true,
+      clusterMaxZoom: 14,
+      clusterRadius: 40,
+      children: [
+        /* @__PURE__ */ jsx(Layer, __spreadValues({}, clusterLayer)),
+        /* @__PURE__ */ jsx(Layer, __spreadValues({}, clusterCountLayer)),
+        /* @__PURE__ */ jsx(Layer, __spreadValues({}, unclusteredPointLayer)),
+        renderPopup(),
+        unclusteredFeatures.filter((feature) => {
+          var _a2;
+          return ((_a2 = feature.properties) == null ? void 0 : _a2.id) !== (popupInfo == null ? void 0 : popupInfo.id);
+        }).map((feature) => {
+          var _a2, _b2, _c;
+          return /* @__PURE__ */ jsx(
+            CommentAvatarMarker,
+            {
+              feature,
+              isHighlighted: currentCommentId === ((_b2 = feature.properties) == null ? void 0 : _b2.id) || hoveredCommentId === ((_c = feature.properties) == null ? void 0 : _c.id),
+              onMouseEnter: () => {
+                var _a3;
+                return setHoveredCommentId((_a3 = feature.properties) == null ? void 0 : _a3.id);
+              },
+              onMouseLeave: () => setHoveredCommentId(null)
+            },
+            String((_a2 = feature.properties) == null ? void 0 : _a2.id)
+          );
+        })
+      ]
+    }
+  ) });
+};
+export {
+  CommentLayer
+};
+//# sourceMappingURL=index.js.map

package/dist/core/components/viewers/map/src/MapLayers/src/CommentLayer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/core/components/viewers/map/src/MapLayers/src/CommentLayer/index.tsx"],"sourcesContent":["'use client'\r\nimport { MapContext, MenusContext } from '../../../../../../../store'\r\nimport * as React from 'react'\r\nimport { Source, Layer, Popup, Marker } from 'react-map-gl/maplibre'\r\nimport type { MapGeoJSONFeature, MapLayerMouseEvent } from 'maplibre-gl'\r\nimport Comment from '../../../../../../ui/Comments/Comment'\r\nimport { Avatar } from '../../../../../../ui/Avatar'\r\nimport { UserAvatar } from '../../../../../../ui/UserAvatar'\r\nimport { ViewerNames, type Comment as IComment } from '../../../../../../../types/dbTypes'\r\n\r\nimport { MapLayerClickPriority, ClickCallback } from '../../../../utils/MapEventManager/MapClickManager'\r\nimport { extractCoordinatesFromFeature } from '../../../../utils/extractCoordinates'\r\nimport { useComment, useComments } from '../../../../../../../hooks/comments/comments'\r\nimport { useUser, useUsers } from '../../../../../../../hooks/users/users'\r\nimport { toast } from 'sonner'\r\nimport { useTranslations } from 'next-intl'\r\nimport { useSession } from 'next-auth/react'\r\nimport { createClusterLayer, createClusterCountLayer, createUnclusteredPointLayer } from '../mapLayersUtils'\r\n\r\ntype MapComment = IComment & {\r\n  authorName?: string\r\n  imageFileId?: number | null\r\n}\r\n\r\nconst CommentAvatarMarker = ({ feature, isHighlighted, onMouseEnter, onMouseLeave }: { feature: MapGeoJSONFeature; isHighlighted?: boolean; onMouseEnter?: () => void; onMouseLeave?: () => void }) => {\r\n  const authorId = feature.properties?.authorId\r\n  const { user: author } = useUser(authorId != null ? String(authorId) : '')\r\n  const userName = feature.properties?.authorName\r\n  const userImageFileId = feature.properties?.imageFileId\r\n  const resolvedImageFileId = author?.imageFileId ?? userImageFileId ?? null\r\n\r\n  const coords = extractCoordinatesFromFeature(feature)\r\n  if (!coords) return null\r\n\r\n  return (\r\n    <Marker key={String(feature.properties?.id ?? `${coords.lng},${coords.lat}`)} longitude={coords.lng} latitude={coords.lat} anchor=\"center\">\r\n      <div\r\n        style={{\r\n          width: '36px',\r\n          height: '36px',\r\n          borderRadius: '50%',\r\n          boxShadow: isHighlighted\r\n            ? '0 0 0 3px #73cee2, 0 0 8px rgba(115, 206, 226, 0.5)'\r\n            : '0 0 0 2px white ',\r\n          transition: 'all 0.2s ease-in-out',\r\n          transform: isHighlighted ? 'scale(1.2)' : 'scale(1)',\r\n          overflow: 'hidden',\r\n        }}\r\n        onMouseEnter={onMouseEnter}\r\n        onMouseLeave={onMouseLeave}\r\n      >\r\n        <Avatar className=\"h-full w-full\">\r\n          <UserAvatar\r\n            imageFileId={resolvedImageFileId}\r\n            name={userName}\r\n            className=\"h-full w-full rounded-full object-cover\"\r\n          />\r\n        </Avatar>\r\n      </div>\r\n    </Marker>\r\n  )\r\n}\r\n\r\nexport const CommentLayer = () => {\r\n    const [hoveredCommentId, setHoveredCommentId] = React.useState<number | null>(null)\r\n  const clusterLayer = createClusterLayer('comments')\r\n  const clusterCountLayer = createClusterCountLayer('comments')\r\n  const unclusteredPointLayer = createUnclusteredPointLayer('comments')\r\n\r\n  // global map state\r\n\r\n  const t = useTranslations('CommentLayers')\r\n\r\n  const { state: mapState } = React.useContext(MapContext)\r\n  const { map, mapClickManager } = mapState.map\r\n  const { comments } = useComments()\r\n  const { users } = useUsers()\r\n  const user = useSession().data?.user\r\n\r\n  const [popupInfo, setPopUpInfo] = React.useState<(Partial<IComment> & { authorName?: string; imageFileId?: number | null }) | null>(null)\r\n  const { user: popupAuthor } = useUser(popupInfo?.authorId != null ? String(popupInfo.authorId) : '')\r\n  const { deleteComment } = useComment(popupInfo?.id ?? null)\r\n  const { state: menusState } = React.useContext(MenusContext)\r\n  const { commentsVisibleInViewer, currentCommentId } = menusState.menus\r\n\r\n  const eligibleComments = comments\r\n    .filter((comment) => comment.viewer === ViewerNames.map)\r\n    .map((comment) => {\r\n      const user = users.find(u => u.id === comment.authorId)\r\n      return {\r\n        ...comment,\r\n        authorName: user?.name ?? 'Unknown User',\r\n        imageFileId: user?.imageFileId ?? null,\r\n      }\r\n    })\r\n\r\n  // Close popup if the comment was deleted\r\n  React.useEffect(() => {\r\n    if (popupInfo && !comments.find((c) => c.id === popupInfo.id)) {\r\n      setPopUpInfo(null)\r\n    }\r\n  }, [comments, popupInfo])\r\n\r\n  const geojsonCommentData = React.useMemo(() => {\r\n    const convertDataToGeojson = (commentData: MapComment[]): GeoJSON.FeatureCollection<GeoJSON.Point, { [key: string]: any }> => {\r\n      const commentFeatures: GeoJSON.Feature<GeoJSON.Point, { [key: string]: any }>[] = commentData\r\n        .map((comment: MapComment) => {\r\n          const { longitude, latitude, id, text, createdAt, authorId, organizationId, visible, authorName, imageFileId } = comment\r\n\r\n          return {\r\n            type: 'Feature',\r\n            geometry: {\r\n              type: 'Point',\r\n              coordinates: [longitude, latitude],\r\n            },\r\n            properties: {\r\n              id: Number(id),\r\n              organizationId,\r\n              visible,\r\n              longitude,\r\n              latitude,\r\n              authorId: Number(authorId),\r\n              authorName,\r\n              imageFileId,\r\n              text,\r\n              createdAt,\r\n              viewer: ViewerNames.map,\r\n            },\r\n          }\r\n        })\r\n\r\n      const commentFC: GeoJSON.FeatureCollection<GeoJSON.Point, { [key: string]: any }> = {\r\n        type: 'FeatureCollection',\r\n        features: commentFeatures,\r\n      }\r\n      return commentFC\r\n    }\r\n    return convertDataToGeojson(eligibleComments)\r\n  }, [eligibleComments])\r\n\r\n  // event listeners for comment unclustered points\r\n  React.useEffect(() => {\r\n    if (!map) return\r\n    const showCommentPopUp: ClickCallback = (e: MapLayerMouseEvent, features: MapGeoJSONFeature[]) => {\r\n      const feature = features?.[0]\r\n\r\n      if (!feature || feature.properties.point_count) return\r\n\r\n      if (feature.geometry.type != 'Point') return\r\n      const [longitude, latitude] = feature.geometry.coordinates\r\n      const featureProperties = feature.properties as MapComment\r\n      const { id, authorId, text, createdAt, authorName, imageFileId } = featureProperties\r\n      setPopUpInfo({\r\n        id: Number(id),\r\n        authorId: Number(authorId),\r\n        organizationId: feature.properties?.organizationId,\r\n        visible: feature.properties?.visible,\r\n        longitude,\r\n        latitude,\r\n        text,\r\n        createdAt,\r\n        authorName,\r\n        imageFileId,\r\n        viewer: ViewerNames.map,\r\n      })\r\n    }\r\n\r\n    const mouseEnterChangeCursor = () => {\r\n      map.getCanvas().style.cursor = 'pointer'\r\n    }\r\n    const mouseLeaveChangeCursor = () => {\r\n      map.getCanvas().style.cursor = ''\r\n    }\r\n\r\n    // event listener for clicking on single point to show comment, hover to change cursor\r\n    mapClickManager.register('comments-unclustered-points', MapLayerClickPriority.CommentLayersClickPriority, showCommentPopUp)\r\n\r\n    map.on('mouseenter', 'comments-unclustered-points', mouseEnterChangeCursor)\r\n    map.on('mouseleave', 'comments-unclustered-points', mouseLeaveChangeCursor)\r\n    return () => {\r\n      mapClickManager.unregister('comments-unclustered-points')\r\n      map.off('mouseenter', 'comments-unclustered-points', mouseEnterChangeCursor)\r\n      map.off('mouseleave', 'comments-unclustered-points', mouseLeaveChangeCursor)\r\n    }\r\n  }, [map, mapClickManager])\r\n\r\n  const handleRemoveComment = () => {\r\n    toast.success(t('commentDeleted'))\r\n    deleteComment()\r\n    setPopUpInfo(null)\r\n  }\r\n\r\n  // event listeners for clustered points\r\n  React.useEffect(() => {\r\n    if (!map) return\r\n\r\n    const zoomInToDecluster = (e: MapLayerMouseEvent) => {\r\n      const feature = e.features?.[0] // only proceed if this is actually a cluster\r\n      if (!feature || !feature.properties.cluster_id) return\r\n\r\n      const clusterId = feature.properties.cluster_id as number\r\n\r\n      // Check if geometry has coordinates (not a GeometryCollection)\r\n      if (!('coordinates' in feature.geometry)) return\r\n      const [lng, lat] = feature.geometry.coordinates as [number, number]\r\n\r\n      const source = map.getSource('comments') as any\r\n      console.log(source)\r\n      console.log(clusterId)\r\n      source.getClusterExpansionZoom(clusterId).then(\r\n        (zoom: number) => {\r\n          console.log('easing to')\r\n          map.easeTo({ center: [lng, lat], zoom })\r\n        },\r\n      )\r\n        .catch((error) => {\r\n          console.error(error)\r\n        })\r\n    }\r\n\r\n    const mouseEnterChangeCursor = () => { map.getCanvas().style.cursor = 'pointer' }\r\n    const mouseLeaveChangeCursor = () => { map.getCanvas().style.cursor = '' }\r\n\r\n    // event listener for clicking on single point to zoom in and decluster, hover to change cursor\r\n    map.on('click', 'comments-clusters', zoomInToDecluster)\r\n    map.on('mouseenter', 'comments-clusters', mouseEnterChangeCursor)\r\n    map.on('mouseleave', 'comments-clusters', mouseLeaveChangeCursor)\r\n    return () => {\r\n      map.off('click', 'comments-clusters', zoomInToDecluster)\r\n      map.off('mouseenter', 'comments-clusters', mouseEnterChangeCursor)\r\n      map.off('mouseleave', 'comments-clusters', mouseLeaveChangeCursor)\r\n    }\r\n  }, [map])\r\n\r\n  const renderPopup = () => {\r\n    if (!popupInfo) return null\r\n    return (\r\n      <Popup\r\n        className=\"noBorderPopup\"\r\n        longitude={popupInfo.longitude}\r\n        latitude={popupInfo.latitude}\r\n        closeOnClick={false}\r\n        onClose={() => setPopUpInfo(null)}\r\n        anchor=\"bottom\"\r\n        style={{ height: '50px', border: 'none', boxShadow: 'none' }}\r\n        offset={[0, 10]}\r\n      >\r\n        <Comment\r\n          userName={popupInfo.authorName || ''}\r\n          userImage={popupAuthor?.imageFileId ?? popupInfo.imageFileId ?? null}\r\n          userImageFileId={popupAuthor?.imageFileId ?? popupInfo.imageFileId ?? null}\r\n          text={popupInfo.text}\r\n          createdAt={popupInfo.createdAt}\r\n          onRemove={user.id === String(popupInfo.authorId) ? handleRemoveComment : null}\r\n          onClose={() => setPopUpInfo(null)}\r\n        />\r\n        {/* inline styles to override MapLibre’s Pop up CSS */}\r\n        <style>\r\n          {`\r\n              .noBorderPopup .maplibregl-popup-content {\r\n                border: none !important;\r\n                box-shadow: none !important;\r\n                background: transparent !important;\r\n              }\r\n              .noBorderPopup .maplibregl-popup-tip {\r\n                display: none !important;\r\n              }\r\n            `}\r\n        </style>\r\n      </Popup>\r\n    )\r\n  }\r\n\r\n  // Track unclustered comments to display avatars\r\n  const [unclusteredFeatures, setUnclusteredFeatures] = React.useState<MapGeoJSONFeature[]>([])\r\n\r\n  React.useEffect(() => {\r\n    if (!map) return\r\n\r\n    const updateUnclusteredFeatures = () => {\r\n      const allFeatures = map.querySourceFeatures('comments')\r\n      const unclusteredOnly = allFeatures.filter(\r\n        (f) => !f.properties?.cluster && !f.properties?.point_count\r\n      )\r\n\r\n      // Deduplicate by id\r\n      const uniqueFeatures = new Map()\r\n      unclusteredOnly.forEach((f) => uniqueFeatures.set(f.properties.id, f))\r\n      setUnclusteredFeatures(Array.from(uniqueFeatures.values()))\r\n    }\r\n\r\n    const onSourceData = (e: any) => {\r\n      if (e?.sourceId === 'comments') updateUnclusteredFeatures()\r\n    }\r\n\r\n    map.on('sourcedata', onSourceData)\r\n    map.on('moveend', updateUnclusteredFeatures)\r\n    map.on('zoomend', updateUnclusteredFeatures)\r\n\r\n    updateUnclusteredFeatures()\r\n\r\n    return () => {\r\n      map.off('sourcedata', onSourceData)\r\n      map.off('moveend', updateUnclusteredFeatures)\r\n      map.off('zoomend', updateUnclusteredFeatures)\r\n    }\r\n  }, [map])\r\n\r\n  return (\r\n    <>\r\n  {commentsVisibleInViewer.includes(ViewerNames.map) &&\r\n    <Source\r\n      id=\"comments\"\r\n      type=\"geojson\"\r\n      data={geojsonCommentData}\r\n      cluster={true}\r\n      clusterMaxZoom={14}\r\n      clusterRadius={40}\r\n    >\r\n      <Layer {...clusterLayer} />\r\n      <Layer {...clusterCountLayer} />\r\n      <Layer {...unclusteredPointLayer} />\r\n\r\n      {renderPopup()}\r\n      {unclusteredFeatures\r\n        .filter((feature) => feature.properties?.id !== popupInfo?.id)\r\n        .map((feature) => (\r\n          <CommentAvatarMarker\r\n            key={String(feature.properties?.id)}\r\n            feature={feature}\r\n            isHighlighted={currentCommentId === feature.properties?.id || hoveredCommentId === feature.properties?.id}\r\n            onMouseEnter={() => setHoveredCommentId(feature.properties?.id)}\r\n            onMouseLeave={() => setHoveredCommentId(null)}\r\n          />\r\n        ))}\r\n    </Source>}\r\n    </>\r\n  )\r\n}\r\n"],"mappings":"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","names":["_a","_b","user"]}

package/dist/core/components/viewers/map/src/MapLayers/src/CountryLayer/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const CountryLayer: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/core/components/viewers/map/src/MapLayers/src/CountryLayer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/core/components/viewers/map/src/MapLayers/src/CountryLayer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoK9B,eAAO,MAAM,YAAY,yBA4IxB,CAAA"}

package/dist/core/components/viewers/map/src/MapLayers/src/CountryLayer/index.js

@@ -0,0 +1,281 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Source, Layer } from "react-map-gl/maplibre";
+import { MapContext } from "../../../../../../../store/Map/context";
+import { useAppConfigContext } from "../../../../../../../store/AppConfig/context";
+import { useSearchParams, useRouter } from "next/navigation";
+const ARCGIS_BASE = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Administrative_Divisions/FeatureServer/0/query";
+const DEFAULT_BORDER_COLOR = "#73cee2";
+const BOUNDARIES_SOURCE_ID = "openmaptiles-boundaries";
+const MAPTILER_KEY = process.env.NEXT_PUBLIC_MAPTILER_KEY;
+const BOUNDARIES_TILESET_URL = `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`;
+const GLOBAL_LAYER_IDS = [
+  "global-borders-country",
+  "global-borders-region",
+  "global-labels-country",
+  "global-labels-state",
+  "global-labels-city"
+];
+function addGlobalBorderLayer(map, color) {
+  try {
+    if (!map.getSource(BOUNDARIES_SOURCE_ID)) {
+      map.addSource(BOUNDARIES_SOURCE_ID, {
+        type: "vector",
+        url: BOUNDARIES_TILESET_URL
+      });
+    }
+    if (!map.getLayer("global-borders-country")) {
+      map.addLayer({
+        id: "global-borders-country",
+        type: "line",
+        source: BOUNDARIES_SOURCE_ID,
+        "source-layer": "boundary",
+        filter: ["all", ["==", "admin_level", 2], ["==", "maritime", 0]],
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": color,
+          "line-width": { base: 1, stops: [[0, 0.8], [4, 1.4], [10, 1.4], [14, 1]] }
+        }
+      });
+    }
+    if (!map.getLayer("global-borders-region")) {
+      map.addLayer({
+        id: "global-borders-region",
+        type: "line",
+        source: BOUNDARIES_SOURCE_ID,
+        "source-layer": "boundary",
+        filter: ["all", ["in", "admin_level", 3, 4], ["==", "maritime", 0]],
+        minzoom: 2,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": color,
+          "line-width": { base: 1, stops: [[2, 0], [4, 0.5], [8, 1.4], [14, 2.4]] },
+          "line-opacity": { base: 1, stops: [[2, 0], [4, 0.7], [6, 1]] }
+        }
+      });
+    }
+    if (!map.getLayer("global-labels-country")) {
+      map.addLayer({
+        id: "global-labels-country",
+        type: "symbol",
+        source: BOUNDARIES_SOURCE_ID,
+        "source-layer": "place",
+        filter: ["==", "class", "country"],
+        minzoom: 1,
+        maxzoom: 8,
+        layout: {
+          "text-field": ["coalesce", ["get", "name:latin"], ["get", "name"]],
+          "text-font": ["Noto Sans Regular"],
+          "text-size": { base: 1, stops: [[1, 10], [4, 13], [6, 16]] },
+          "text-letter-spacing": 0.1,
+          "text-max-width": 8,
+          "text-transform": "uppercase"
+        },
+        paint: {
+          "text-color": "#ffffff",
+          "text-halo-color": "rgba(0,0,0,0.7)",
+          "text-halo-width": 1.2,
+          "text-opacity": { base: 1, stops: [[5, 1], [7, 0]] }
+        }
+      });
+    }
+    if (!map.getLayer("global-labels-state")) {
+      map.addLayer({
+        id: "global-labels-state",
+        type: "symbol",
+        source: BOUNDARIES_SOURCE_ID,
+        "source-layer": "place",
+        filter: ["in", "class", "state", "province"],
+        minzoom: 3,
+        maxzoom: 9,
+        layout: {
+          "text-field": ["coalesce", ["get", "name:latin"], ["get", "name"]],
+          "text-font": ["Noto Sans Regular"],
+          "text-size": { base: 1, stops: [[3, 9], [6, 12], [8, 14]] },
+          "text-letter-spacing": 0.05,
+          "text-max-width": 8
+        },
+        paint: {
+          "text-color": "#e8e8e8",
+          "text-halo-color": "rgba(0,0,0,0.6)",
+          "text-halo-width": 1,
+          "text-opacity": { base: 1, stops: [[3, 0], [4, 1], [8, 1], [9, 0]] }
+        }
+      });
+    }
+    if (!map.getLayer("global-labels-city")) {
+      map.addLayer({
+        id: "global-labels-city",
+        type: "symbol",
+        source: BOUNDARIES_SOURCE_ID,
+        "source-layer": "place",
+        filter: ["in", "class", "city", "town"],
+        minzoom: 5,
+        maxzoom: 13,
+        layout: {
+          "text-field": ["coalesce", ["get", "name:latin"], ["get", "name"]],
+          "text-font": ["Noto Sans Regular"],
+          "text-size": { base: 1, stops: [[5, 10], [9, 13], [12, 15]] },
+          "text-max-width": 8
+        },
+        paint: {
+          "text-color": "#dcdcdc",
+          "text-halo-color": "rgba(0,0,0,0.7)",
+          "text-halo-width": 1.1
+        }
+      });
+    }
+  } catch (e) {
+  }
+}
+function hexToRgba(hex, opacity) {
+  const clean = hex.replace("#", "");
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+const buildSubdivisionUrl = (countryCode) => {
+  const params = new URLSearchParams({
+    outFields: "NAME,ISO_CC,ISO_CODE,ADMINTYPE",
+    where: `ISO_CC='${countryCode}'`,
+    f: "geojson"
+  });
+  return `${ARCGIS_BASE}?${params.toString()}`;
+};
+const CountryLayer = () => {
+  const { state: mapState, dispatch: mapDispatch } = React.useContext(MapContext);
+  const { map, currentLocation } = mapState.map;
+  const { state: appConfigState } = useAppConfigContext();
+  const organization = appConfigState.appConfig.organization;
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const debounceRef = React.useRef(null);
+  const countryCode = ((organization == null ? void 0 : organization.country) || "CA").toUpperCase();
+  const borderColor = hexToRgba((organization == null ? void 0 : organization.mainColor) || DEFAULT_BORDER_COLOR, 0.7);
+  const subdivisionUrl = buildSubdivisionUrl(countryCode);
+  React.useEffect(() => {
+    if (!map) return;
+    const addNow = () => addGlobalBorderLayer(map, borderColor);
+    if (map.isStyleLoaded()) addNow();
+    map.on("styledata", addNow);
+    return () => {
+      try {
+        map.off("styledata", addNow);
+        for (const id of GLOBAL_LAYER_IDS) {
+          if (map.getLayer(id)) map.removeLayer(id);
+        }
+      } catch (e) {
+      }
+    };
+  }, [map, borderColor]);
+  const orgHasLocation = !!((organization == null ? void 0 : organization.countrySubdivision) || (organization == null ? void 0 : organization.municipality));
+  React.useEffect(() => {
+    var _a, _b;
+    if (!orgHasLocation) return;
+    mapDispatch({
+      type: "UPDATE_LOCATION",
+      payload: {
+        currentLocation: __spreadProps(__spreadValues({}, currentLocation != null ? currentLocation : {}), {
+          countrySubdivision: (_a = organization == null ? void 0 : organization.countrySubdivision) != null ? _a : currentLocation == null ? void 0 : currentLocation.countrySubdivision,
+          municipality: (_b = organization == null ? void 0 : organization.municipality) != null ? _b : currentLocation == null ? void 0 : currentLocation.municipality
+        })
+      }
+    });
+  }, [orgHasLocation]);
+  React.useEffect(() => {
+    if (orgHasLocation) return;
+    if (!(map && currentLocation)) return;
+    const currentCountrySubdivision = currentLocation.countrySubdivision || null;
+    const currentMunicipality = currentLocation.municipality || null;
+    function onMouseMove(e) {
+      if (!map.isStyleLoaded()) return;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      const eventPoint = e.point;
+      debounceRef.current = setTimeout(() => {
+        var _a, _b, _c;
+        const features = map.queryRenderedFeatures(eventPoint, {
+          layers: ["admin-subdivisions-fill"]
+        });
+        let newCountrySubdivision = null;
+        if (features.length > 0) {
+          const f = features[0];
+          const isoCC = (_a = f.properties) == null ? void 0 : _a.ISO_CC;
+          const isoCode = (_b = f.properties) == null ? void 0 : _b.ISO_CODE;
+          if (isoCC && isoCode && isoCode.startsWith(isoCC)) {
+            newCountrySubdivision = `${isoCC}-${isoCode.slice(isoCC.length)}`;
+          } else {
+            newCountrySubdivision = isoCode || ((_c = f.properties) == null ? void 0 : _c.NAME) || null;
+          }
+        }
+        const finalCountrySubdivision = newCountrySubdivision || currentCountrySubdivision;
+        if (finalCountrySubdivision !== currentCountrySubdivision) {
+          mapDispatch({
+            type: "UPDATE_LOCATION",
+            payload: {
+              currentLocation: __spreadProps(__spreadValues({}, currentLocation), {
+                countrySubdivision: finalCountrySubdivision,
+                municipality: currentMunicipality
+              })
+            }
+          });
+          const params = new URLSearchParams(searchParams.toString());
+          params.set("countrySubdivision", finalCountrySubdivision || "");
+          router.replace(`?${params.toString()}`, { scroll: false });
+        }
+      }, 300);
+    }
+    if (map.isStyleLoaded()) {
+      map.on("mousemove", onMouseMove);
+    } else {
+      map.once("styledata", () => {
+        map.on("mousemove", onMouseMove);
+      });
+    }
+    return () => {
+      map.off("mousemove", onMouseMove);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [map, mapDispatch, currentLocation, searchParams, router]);
+  if (orgHasLocation) return null;
+  return /* @__PURE__ */ jsx(
+    Source,
+    {
+      id: "admin-subdivisions-source",
+      type: "geojson",
+      data: subdivisionUrl,
+      children: /* @__PURE__ */ jsx(
+        Layer,
+        {
+          id: "admin-subdivisions-fill",
+          type: "fill",
+          paint: { "fill-color": "transparent", "fill-opacity": 0 }
+        }
+      )
+    }
+  );
+};
+export {
+  CountryLayer
+};
+//# sourceMappingURL=index.js.map