@expofp/floorplan 3.45.2 → 3.45.4

package/dist/esm/components/Maplibre/usePoiMarkers.js

@@ -1 +1 @@
-import{Box as $}from"@expofp/geometry";import{reaction as h}from"mobx";import{useEffect as J}from"react";import{POI_CLUSTER_COLOR as Q,POI_CLUSTER_MIN_POINTS as ee,POI_CLUSTER_RADIUS_PX as te,POI_CLUSTER_SIZE_PX as oe,POI_CLUSTER_STROKE_COLOR as re,POI_CLUSTER_STROKE_WIDTH_PX as ie,POI_CLUSTER_TEXT_SIZE_PX as ne,POI_MARKER_PIN_WIDTH_PX as ce,POI_SELECTED_PIN_WIDTH_PX as C}from"../../constants";import c from"../../store";import se from"../../tools/settings";import{DIM_INTENSITY as ae}from"../../utils/dimming";import{convertLocalToGps as v}from"../../utils/gps";import{isOutdoorMarkersEnabled as le}from"../Map/drawing/config/config-outdoor-poi";import{createPoiPinheadImage as pe}from"../Map/drawing/config/poi-pin.js";import{getPoiPinLayout as A,POI_MARKER_PIN_SHAPE as fe,POI_SELECTED_PIN_SHAPE as ue}from"../Map/drawing/config/poi-pin-shape.js";import{getMapDimTarget as U}from"./useDimming";import{getLocalRectGeoBounds as de,getVisibleRectFitPadding as me,isLngLatInVisibleViewport as Ie}from"./utils/geo-config";import{poiMarkerHitTest as N}from"./utils/poi-marker-hit-test";const s="expofp-poi",a="expofp-poi-clusters",S="expofp-poi-cluster-count",I="expofp-poi-unclustered",y="expofp-poi-selected",E="expofp-poi-pinhead-image",w=[a,S,I,y],ye=w.filter(p=>p!==S),b=p=>`expofp-poi-icon-${p}`;export function usePoiMarkers(p,k,u){J(()=>{if(!le())return;const e=k.current;if(!p||!e||!u)return;const{gpsConfig:L}=u,l=new Set,_=window.devicePixelRatio||1,F=se.colors?.booths?.selected||"#3b6ef5",H=pe(C,_,F),B=A(fe,ce,_).tipOffset,X=A(ue,C,_).tipOffset,O=t=>v(t.center.x,t.center.y,L),T=(t,o)=>{e.hasImage(t)&&e.removeImage(t),e.addImage(t,o,{pixelRatio:_}),l.add(t)},Y=t=>{const o=c.poiMarkerStore.markers,i=new Set(o.map(r=>b(r.boothId)));i.add(E);for(const r of[...l])i.has(r)||(e.hasImage(r)&&e.removeImage(r),l.delete(r));for(const r of o){const n=b(r.boothId);(t||!l.has(n))&&T(n,r.icon)}l.has(E)||T(E,H)},z=()=>{const t=c.poiMarkerStore.selectedMarkerId,o=c.poiMarkerStore.outdoorFilter,i=!o.active;let r=c.poiMarkerStore.markers;return t!==null?r=r.filter(n=>n.boothId===t):o.active&&(r=o.matchingMarkers),{cluster:i,data:{type:"FeatureCollection",features:r.map(n=>({type:"Feature",geometry:{type:"Point",coordinates:O(n)},properties:{boothId:n.boothId,icon:b(n.boothId),pinhead:n.boothId===t}}))}}},V=()=>{let t=null;for(const o of e.getStyle()?.layers??[]){if(o.type!=="symbol")continue;const i=o.layout?.["text-font"];if(!(!Array.isArray(i)||!i.every(r=>typeof r=="string"))){if(!i.some(r=>/italic/i.test(r)))return i;t??=i}}return t??["Noto Sans Regular"]};let g=null;const R=()=>{for(const t of w)e.getLayer(t)&&e.removeLayer(t);e.getSource(s)&&e.removeSource(s),g=null},Z=(t,o)=>{if(g!==null&&g!==o&&R(),e.getSource(s)||(e.addSource(s,{type:"geojson",data:t,cluster:o,clusterRadius:te,clusterMinPoints:ee}),g=o),e.getLayer(a))return;const i=["!",["has","point_count"]],r=["==",["coalesce",["get","pinhead"],!1],!0];e.addLayer({id:a,type:"circle",source:s,filter:["has","point_count"],paint:{"circle-radius":oe/2,"circle-color":Q,"circle-stroke-color":re,"circle-stroke-width":ie,"circle-pitch-alignment":"viewport"}}),e.addLayer({id:S,type:"symbol",source:s,filter:["has","point_count"],layout:{"text-field":["get","point_count_abbreviated"],"text-font":V(),"text-size":ne,"text-allow-overlap":!0,"text-ignore-placement":!0},paint:{"text-color":"#ffffff"}}),e.addLayer({id:I,type:"symbol",source:s,filter:["all",i,["!",r]],layout:{"icon-image":["get","icon"],"icon-anchor":"bottom","icon-offset":[0,B],"icon-allow-overlap":!0,"icon-ignore-placement":!0}}),e.addLayer({id:y,type:"symbol",source:s,filter:["all",i,r],layout:{"icon-image":E,"icon-anchor":"bottom","icon-offset":[0,X],"icon-allow-overlap":!0,"icon-ignore-placement":!0}})},M=()=>{if(!e.getLayer(a))return;const t=U()?1-ae:1;e.setPaintProperty(a,"circle-opacity",t),e.setPaintProperty(a,"circle-stroke-opacity",t),e.setPaintProperty(S,"text-opacity",t),e.setPaintProperty(I,"icon-opacity",t),e.setPaintProperty(y,"icon-opacity",t)},d=(t=!1)=>{Y(t);const{cluster:o,data:i}=z();Z(i,o),e.getSource(s)?.setData(i),M()},K=t=>{if(!t.length)return;const o=me(50);if(t.every(m=>Ie(e,O(m),o)))return;const r=$.fromPoints(t.map(m=>m.center)),n=de(r,L),f=e.cameraForBounds(n,{padding:o,bearing:u.bearing});!f?.center||typeof f.zoom!="number"||e.easeTo({center:f.center,zoom:Math.min(e.getZoom(),f.zoom),bearing:u.bearing,duration:500,essential:!0})},P=t=>{const o=t.features?.[0]?.properties?.boothId;if(typeof o!="number")return;const i=c.boothStore.boothById.get(o);i&&c.clickBooth(i)},D=t=>{const o=t.features?.[0],i=o?.properties?.cluster_id,r=e.getSource(s);if(typeof i!="number"||!r||o?.geometry?.type!=="Point")return;const[n=0,f=0]=o.geometry.coordinates;r.getClusterExpansionZoom(i).then(m=>{e.easeTo({center:[n,f],zoom:Math.min(m,e.getMaxZoom()),duration:500})})};e.on("click",I,P),e.on("click",y,P),e.on("click",a,D),N.set((t,o)=>{const i=ye.filter(n=>!!e.getLayer(n));if(!i.length)return!1;const r=e.project(v(t,o,L));return e.queryRenderedFeatures([r.x,r.y],{layers:i}).length>0});const x=()=>{l.clear(),d(!0)};e.on("style.load",x);const G=h(()=>c.poiMarkerStore.markers,()=>d(!0)),W=h(()=>c.poiMarkerStore.selectedMarkerId,()=>d()),j=h(()=>c.poiMarkerStore.outdoorFilter.key,()=>{d(),K(c.poiMarkerStore.outdoorFilter.matchingMarkers)}),q=h(()=>U(),()=>M());return d(!0),()=>{G(),W(),j(),q(),N.set(null),e.off("style.load",x),e.off("click",I,P),e.off("click",y,P),e.off("click",a,D);try{R();for(const t of l)e.hasImage(t)&&e.removeImage(t)}catch{}}},[p,k,u])}
+import{Box as q}from"@expofp/geometry";import{reaction as h}from"mobx";import{useEffect as $}from"react";import{POI_CLUSTER_COLOR as J,POI_CLUSTER_MIN_POINTS as Q,POI_CLUSTER_RADIUS_PX as ee,POI_CLUSTER_SIZE_PX as te,POI_CLUSTER_STROKE_COLOR as oe,POI_CLUSTER_STROKE_WIDTH_PX as re,POI_CLUSTER_TEXT_SIZE_PX as ie,POI_MARKER_PIN_WIDTH_PX as ne,POI_SELECTED_PIN_WIDTH_PX as x}from"../../constants";import c from"../../store";import ce from"../../tools/settings";import{DIM_INTENSITY as se}from"../../utils/dimming";import{convertLocalToGps as ae}from"../../utils/gps";import{isOutdoorMarkersEnabled as le}from"../Map/drawing/config/config-outdoor-poi";import{createPoiPinheadImage as pe}from"../Map/drawing/config/poi-pin.js";import{getPoiPinLayout as v,POI_MARKER_PIN_SHAPE as fe,POI_SELECTED_PIN_SHAPE as ue}from"../Map/drawing/config/poi-pin-shape.js";import{getMapDimTarget as A}from"./useDimming";import{getLocalRectGeoBounds as de,getVisibleRectFitPadding as me,isLngLatInVisibleViewport as Ie}from"./utils/geo-config";import{poiMarkerHitTest as U}from"./utils/poi-marker-hit-test";const s="expofp-poi",a="expofp-poi-clusters",S="expofp-poi-cluster-count",I="expofp-poi-unclustered",_="expofp-poi-selected",E="expofp-poi-pinhead-image",N=[a,S,I,_],_e=N.filter(p=>p!==S),L=p=>`expofp-poi-icon-${p}`;export function usePoiMarkers(p,b,u){$(()=>{if(!le())return;const e=b.current;if(!p||!e||!u)return;const{gpsConfig:k}=u,l=new Set,y=window.devicePixelRatio||1,w=ce.colors?.booths?.selected||"#3b6ef5",F=pe(x,y,w),B=v(fe,ne,y).tipOffset,H=v(ue,x,y).tipOffset,O=t=>ae(t.center.x,t.center.y,k),R=(t,o)=>{e.hasImage(t)&&e.removeImage(t),e.addImage(t,o,{pixelRatio:y}),l.add(t)},X=t=>{const o=c.poiMarkerStore.markers,i=new Set(o.map(r=>L(r.boothId)));i.add(E);for(const r of[...l])i.has(r)||(e.hasImage(r)&&e.removeImage(r),l.delete(r));for(const r of o){const n=L(r.boothId);(t||!l.has(n))&&R(n,r.icon)}l.has(E)||R(E,F)},Y=()=>{const t=c.poiMarkerStore.selectedMarkerId,o=c.poiMarkerStore.outdoorFilter,i=!o.active;let r=c.poiMarkerStore.markers;return t!==null?r=r.filter(n=>n.boothId===t):o.active&&(r=o.matchingMarkers),{cluster:i,data:{type:"FeatureCollection",features:r.map(n=>({type:"Feature",geometry:{type:"Point",coordinates:O(n)},properties:{boothId:n.boothId,icon:L(n.boothId),pinhead:n.boothId===t}}))}}},z=()=>{let t=null;for(const o of e.getStyle()?.layers??[]){if(o.type!=="symbol")continue;const i=o.layout?.["text-font"];if(!(!Array.isArray(i)||!i.every(r=>typeof r=="string"))){if(!i.some(r=>/italic/i.test(r)))return i;t??=i}}return t??["Noto Sans Regular"]};let g=null;const T=()=>{for(const t of N)e.getLayer(t)&&e.removeLayer(t);e.getSource(s)&&e.removeSource(s),g=null},V=(t,o)=>{if(g!==null&&g!==o&&T(),e.getSource(s)||(e.addSource(s,{type:"geojson",data:t,cluster:o,clusterRadius:ee,clusterMinPoints:Q}),g=o),e.getLayer(a))return;const i=["!",["has","point_count"]],r=["==",["coalesce",["get","pinhead"],!1],!0];e.addLayer({id:a,type:"circle",source:s,filter:["has","point_count"],paint:{"circle-radius":te/2,"circle-color":J,"circle-stroke-color":oe,"circle-stroke-width":re,"circle-pitch-alignment":"viewport"}}),e.addLayer({id:S,type:"symbol",source:s,filter:["has","point_count"],layout:{"text-field":["get","point_count_abbreviated"],"text-font":z(),"text-size":ie,"text-allow-overlap":!0,"text-ignore-placement":!0},paint:{"text-color":"#ffffff"}}),e.addLayer({id:I,type:"symbol",source:s,filter:["all",i,["!",r]],layout:{"icon-image":["get","icon"],"icon-anchor":"bottom","icon-offset":[0,B],"icon-allow-overlap":!0,"icon-ignore-placement":!0}}),e.addLayer({id:_,type:"symbol",source:s,filter:["all",i,r],layout:{"icon-image":E,"icon-anchor":"bottom","icon-offset":[0,H],"icon-allow-overlap":!0,"icon-ignore-placement":!0}})},M=()=>{if(!e.getLayer(a))return;const t=A()?1-se:1;e.setPaintProperty(a,"circle-opacity",t),e.setPaintProperty(a,"circle-stroke-opacity",t),e.setPaintProperty(S,"text-opacity",t),e.setPaintProperty(I,"icon-opacity",t),e.setPaintProperty(_,"icon-opacity",t)},d=(t=!1)=>{X(t);const{cluster:o,data:i}=Y();V(i,o),e.getSource(s)?.setData(i),M()},Z=t=>{if(!t.length)return;const o=me(50);if(t.every(m=>Ie(e,O(m),o)))return;const r=q.fromPoints(t.map(m=>m.center)),n=de(r,k),f=e.cameraForBounds(n,{padding:o,bearing:u.bearing});!f?.center||typeof f.zoom!="number"||e.easeTo({center:f.center,zoom:Math.min(e.getZoom(),f.zoom),bearing:u.bearing,duration:500,essential:!0})},P=t=>{const o=t.features?.[0]?.properties?.boothId;if(typeof o!="number")return;const i=c.boothStore.boothById.get(o);i&&c.clickBooth(i)},D=t=>{const o=t.features?.[0],i=o?.properties?.cluster_id,r=e.getSource(s);if(typeof i!="number"||!r||o?.geometry?.type!=="Point")return;const[n=0,f=0]=o.geometry.coordinates;r.getClusterExpansionZoom(i).then(m=>{e.easeTo({center:[n,f],zoom:Math.min(m,e.getMaxZoom()),duration:500})})};e.on("click",I,P),e.on("click",_,P),e.on("click",a,D),U.set((t,o)=>{const i=_e.filter(n=>!!e.getLayer(n));if(!i.length)return!1;const r=e.getCanvas().getBoundingClientRect();return e.queryRenderedFeatures([t-r.left,o-r.top],{layers:i}).length>0});const C=()=>{l.clear(),d(!0)};e.on("style.load",C);const K=h(()=>c.poiMarkerStore.markers,()=>d(!0)),G=h(()=>c.poiMarkerStore.selectedMarkerId,()=>d()),W=h(()=>c.poiMarkerStore.outdoorFilter.key,()=>{d(),Z(c.poiMarkerStore.outdoorFilter.matchingMarkers)}),j=h(()=>A(),()=>M());return d(!0),()=>{K(),G(),W(),j(),U.set(null),e.off("style.load",C),e.off("click",I,P),e.off("click",_,P),e.off("click",a,D);try{T();for(const t of l)e.hasImage(t)&&e.removeImage(t)}catch{}}},[p,b,u])}

package/dist/esm/components/Maplibre/utils/poi-marker-hit-test.d.ts

@@ -1,16 +1,16 @@
-type PoiMarkerHitTest = (x: number, y: number) => boolean;
+type PoiMarkerHitTest = (clientX: number, clientY: number) => boolean;
 /**
- * Model-space hit-test against the outdoor PoI symbol/cluster layers, set by
- * `usePoiMarkers` while active. The plan's click seam (`clickedPlan` in
- * Map/pointer.ts) consults it so a click handled by a native MapLibre layer
- * does not also select the booth underneath.
+ * Screen-space hit-test (viewport `clientX`/`clientY`) against the outdoor PoI
+ * symbol/cluster layers, set by `usePoiMarkers` while active. The plan's click
+ * seam (`clickedPlan` in Map/pointer.ts) consults it so a click handled by a
+ * native MapLibre layer does not also select the booth underneath.
  *
  * Deliberately a leaf module (no imports): it decouples the renderer click
  * pipeline from the Maplibre hook that owns the marker layers.
  */
 export declare const poiMarkerHitTest: {
     set(fn: PoiMarkerHitTest | null): void;
-    test(x: number, y: number): boolean;
+    test(clientX: number, clientY: number): boolean;
 };
 export {};
 //# sourceMappingURL=poi-marker-hit-test.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/floorplan",
-  "version": "3.45.2",
+  "version": "3.45.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/expofp/efp-app.git",
@@ -69,15 +69,15 @@
     "tslib": "^2.3.0",
     "uuid": "^9.0.1",
     "zod": "4.4.3",
-    "@expofp/config": "3.45.2",
-    "@expofp/debug": "3.45.2",
-    "@expofp/geometry": "3.45.2",
-    "@expofp/renderer": "3.45.2",
-    "@expofp/resolve": "3.45.2",
-    "@expofp/schema": "3.45.2",
-    "@expofp/ui": "3.45.2",
-    "@expofp/utils": "3.45.2",
-    "@expofp/wayfinding": "3.45.2"
+    "@expofp/config": "3.45.4",
+    "@expofp/debug": "3.45.4",
+    "@expofp/geometry": "3.45.4",
+    "@expofp/renderer": "3.45.4",
+    "@expofp/resolve": "3.45.4",
+    "@expofp/schema": "3.45.4",
+    "@expofp/ui": "3.45.4",
+    "@expofp/utils": "3.45.4",
+    "@expofp/wayfinding": "3.45.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^8.0.2",