@expofp/floorplan/dist/esm/components/Map/Map.js

Interactive floor plan library for expos and events

import{Fragment as te,jsx as C,jsxs as O}from"react/jsx-runtime";import{Box as k}from"@expofp/geometry";import re from"classnames";import ne from"color";import{observable as ie,reaction as ae}from"mobx";import{useObserver as se}from"mobx-react-lite";import{useEffect as le,useMemo as me,useRef as S,useState as ce}from"react";import{DEBUG_STORAGE_KEY as X}from"../../constants";import fe from"../../data";import{fpGeo as de}from"../../data/fpGeo";import{svgArea as U}from"../../data/svg";import{boxToRenderer as L,createSceneDef as ue,mapRollSetting as j}from"../../renderer";import{pickDefaultScene as A,pickDefaultScenePoint as pe}from"../../renderer/engine-core/defs";import a,{boothStore as he,layersStore as h,uiState as o}from"../../store";import{BoothBase as Z}from"../../store/BoothStore";import{Category as ve}from"../../store/CategoryStore";import{Exhibitor as $}from"../../store/ExhibitorStore";import{LayerMode as R}from"../../store/LayerStore";import{CurrentPosition as ye,Route as be}from"../../store/RouteStore";import B from"../../tools/logger";import p from"../../tools/settings";import ge from"../../ui/Draggable";import{areLayersEnabled as we}from"../../utils/areLayersEnabled";import{applyVenueDimValue as Se,createDimmingAnimator as Re}from"../../utils/dimming";import{convertGpsToLocal as xe}from"../../utils/gps";import y from"../../utils/is-debug";import{isPathwayLayer as K}from"../../utils/is-pathway-layer";import{useReaction as d}from"../../utils/mobx";import{createWayfinding as Te}from"../../wayfinding";import V from"./booth-by-xy";import Ce from"./drawing/config/config-all";import{configMarkers as ke,getMarkerFromClick as Le}from"./drawing/config/config-markers";import{loadLayersImages as Be}from"./drawing/config/loadBoothsImages";import{useBuildRoute as Ee}from"./traffic/useBuildRoute";import{useManageTraffic as Me}from"./traffic/useManageTraffic";const W=Number.isFinite(p.maxZoom);export default function Pe(){let E={};const H="#ebebeb",v=S(),b=me(()=>ie({moving:!1,prevLevel:a.layerStore.layers.find(e=>!e.frozen&&e.visible)}),[]),l=a.rendererService,x=S(Re(e=>Se(l,e)));let s;const g=S(null),M=S(null);let P=null,z=null,I=null,_=!1;function D(){h.layers.forEach(e=>{e.configured=!1,e.children=[],e.loaded=!1})}const[q,J]=ce(()=>typeof window<"u"&&window.localStorage?localStorage.getItem(X)!=="false":!0);d(()=>a.routeStore.currentRouteLayer,()=>{if(!l.scene||b.prevLevel===a.routeStore.currentRouteLayer)return;const e=l.scene.rootLayer.children.filter(t=>a.layerStore.floors.some(r=>t.name.includes(r.name)));let n=a.routeStore.currentRouteLayer.name;if(!e.find(t=>t.name===n))return;const i=e?.map(t=>(t.name===n&&(t.hidden=!1),t.name===b.prevLevel?.name&&(t.hidden=!0),t));b.prevLevel=a.routeStore.currentRouteLayer,l.update(...i)}),d(()=>o.centerMap,()=>{!o.centerMap||a.maplibreStore.showMaplibre||(s.controls.resetCamera({zoom:!!(o.list.type==="search"&&o.list.text)}),o.centerMap=!1)}),le(()=>{if(!v.current)return;async function e(){D(),h.layersLoaded=!1;let n={};try{if(y){const t=document.createElement("canvas").getContext("webgl2"),r=t&&t.getExtension("EXT_disjoint_timer_query_webgl2"),m=(await import("stats-gl")).default,f=new m({trackGPU:r,horizontal:!0}),u=M.current;if(!u)throw new Error("memoryInfoPanel not found.");f.dom.style.position="relative",u.style.width=`${90*(r?3:2)}px`,u.style.height="48px",u.appendChild(f.dom),n={stats:f,memoryInfoPanel:u}}}catch(i){console.error(i)}s=l.create({canvas:v.current,ui:n}),g.current=s,ae(()=>o.canvasVisibleRectPx,(i,t)=>{i&&(s.visibleRect=L(i)),t.dispose()},{fireImmediately:!0}),Ce(l).then(({layers:i,cleanup:t})=>{if(_||g.current!==s){t();return}I=t,y&&console.log("Renderer settings",s);const r=ne(p.backgroundColor==="none"?H:p.backgroundColor).string();E=ue(i,U,r),l.start(E),x.current.setTarget(o.dimmed,{immediate:!0}),j(s,a.fp.enableRotation?1:0),W&&s.viewport.setMaxZoom(p.maxZoom),h.layersLoaded=!0,a.fp.onFpConfigured&&a.fp?.onFpConfigured(),P=Te(l,a),z=ke(l),Be(l)}),s.events.addEventListener("pointer:move",({data:i})=>{if(o.setKioskModeEnabled)return;const{point:t,defs:r}=A(i),c=V(t.x,t.y),m=F(r[0]);o.hoveredBooth=c||m}),s.events.addEventListener("pointer:out",()=>{o.setKioskModeEnabled||(o.hoveredBooth=null)}),s.events.addEventListener("pointer:click",({data:i})=>{if(!o?.rootElement)return;window.__resett&&window.__resett(),o.overlayPosition==="bottom"&&o.overlaySize==="full"&&a.showMap();const{point:t,defs:r}=A(i),{x:c,y:m}=t;if(o.onGetCoordsClick){const w=a.layerStore.layers.find(T=>T.visible&&(T.mode===R.TurnedOn||T.mode===R.TurnedOff));o.onGetCoordsClick({x:c,y:m,z:w?.name||null})}if(o.setKioskModeEnabled)return;if(o.onMarkerClick){const w=Le(c,m,l.scale);y&&console.log("marker",w),o.onMarkerClick(w)}const f=V(t.x,t.y),u=F(r[0]);y&&console.log("boothIdFromClientXy",f,"boothByShape",u,"pointer:click point",t),a.clickBooth(f||u)}),s.events.addEventListener("navigation:change",()=>window.__resett&&window.__resett())}return e(),a.fp.getCenterCoordinates=Y,()=>Q()},[]);function Q(){_=!0,x.current.stop(),P?.(),z?.(),I?.(),D(),h.layersLoaded=!1,l.disposeIfCurrent(g.current),g.current=null}function Y(){const e=v.current;if(!v.current)throw new Error("Canvas not ready");const n=pe(s.viewport.canvasToSvg({x:e.clientWidth/2,y:e.clientHeight/2})),t=a.layerStore.visible.find(r=>r.mode===R.TurnedOff||r.mode===R.TurnedOn)?.name||null;return{...n,z:t}}function F(e){return!e||!e.shape?null:he.booths.find(n=>n.shapes?.find(i=>i.shape==e.shape))}d(()=>o.zoomBy,()=>{if(!o.zoomBy||a.maplibreStore.showMaplibre)return;const e=o.zoomBy;s.controls.zoomBy(e),o.zoomBy=null}),d(()=>o.dimmed,e=>{x.current.setTarget(e)}),d(()=>o.details,()=>{if(!o.onDetails)return;if(!o.details){o.onDetails(null);return}var e=o.details;if(p.EXPO==="wineparis"&&(e instanceof $&&(e=e.booths[0]),!e))return;let n=null,i=[];e instanceof $?(n="exhibitor",i=e.booths.map(r=>r.name).sort((r,c)=>r==a.routeStore.tempToBooth?.name?-1:c==a.routeStore.tempToBooth?.name?1:0)):e instanceof Z?(n="booth",i=[e.name]):e instanceof be?(n="route",i=[e.from?.name,e.to?.name].filter(r=>!!r)):e instanceof ve&&(n="category",i=e.exhibitors.map(r=>r.booths.map(c=>c.name)).flat());var t={type:n,name:e?.name,id:e?.id,externalId:e?.externalId,boothsNames:i};o.onDetails({...t,...n==="route"?{routeInfo:a.routeStore.routeInfo}:{}})}),d(()=>o.canvasVisibleRectPx,e=>{l.renderer&&(l.renderer.visibleRect=L(e))},{fireImmediately:!0}),d(()=>o.moveToRect,()=>{!o.moveToRect||a.maplibreStore.showMaplibre||(o.moveToRect&&o.moveToRect.size.height!==1/0&&o.moveToRect.size.width!==1/0&&o.moveToRect.size.height>0&&o.moveToRect.size.width>0&&N(o.moveToRect),o.moveToRect=null)}),d(()=>o.rollReset,e=>{e&&(s.controls.resetCamera({roll:!0}),o.rollReset=!1)}),d(()=>o.moveToBooths,()=>{if(B.log("this.moveToBooths",o.moveToBooths),!o.moveToBooths||a.maplibreStore.showMaplibre)return;B.log("watched moveToBooths",o.moveToBooths);const e=o.moveToBooths.filter(n=>n.rect).map(n=>n.rect);e.length!==0&&(N(k.fromUnion(...e)),o.moveToBooths=null)}),d(()=>o.mapSettings,({zoomtime:e,center:n,centerxy:i,bearing:t,roll:r,z:c})=>{if(!(a.maplibreStore.showMaplibre||!l.renderer))try{e&&e!==o.defaultMapSettings.zoomtime&&l.renderer.controls.configure({zoomTime:e/1e3}),a.fp.enableRotation&&j(s,r);let m;if(n){const f=n.split(",").map(Number),u=new ye(void 0,void 0,void 0,void 0,f[0],f[1]);m=xe(u,de.properties.config)}else if(i){const f=i.split(",").map(Number);m={x:f[0],y:f[1]}}c&&a.fp.activateFloor({name:c}),(m?.x||m?.y)&&l.renderer.controls.panTo(m.x,m.y),Number.isFinite(t)&&l.renderer.controls.rollTo(t)}catch(m){B.error("Error in mapSettings reaction",m)}}),Ee({enabled:h.layersLoaded&&o.buildRoute,rendererService:l});const G="routes-api.expofp.com",ee=fe.busRoutes??!1;Me({permission:h.layersLoaded&&ee,rendererService:l,dataJsonUrl:`https://${G}/v1/routes?expo=${p.EXPO}`,websocketUrl:`wss://${G}/locations?expo=${p.EXPO}`}),d(()=>a.layerStore.visible,e=>{if(!l.scene)return;const n=e.filter(r=>K(r.name)),t=l.scene.rootLayer.children.filter(r=>K(r.name));t.forEach(r=>{r.hidden=!n.find(c=>c.name===r.name)}),l.update(...t)});function N(e){let n=e;const i=oe(e,U),t=o.selectedRoute?.from,r=t instanceof Z?t.layer?.name:t?.layer;o.kioskData&&(!we()||r===a.routeStore.currentRouteLayer?.name)&&(n=k.fromUnion(e,new k(o.kioskData.x,o.kioskData.y,1,1)));const c=L(n),m={paddingPercent:i,maxZoom:W?void 0:10};if(o.shouldShiftMapRect){s.visibleRect.min={...s.visibleRect.min,x:s.visibleRect.min.x+o.overlayWidthPx},s.visibleRect=s.visibleRect;try{s.controls.zoomTo(c,m)}finally{s.visibleRect.min={...s.visibleRect.min,x:s.visibleRect.min.x-o.overlayWidthPx}}}else s.controls.zoomTo(c,m)}function oe(e,n){return!e||!n?0:(e.area/n.area>.1?15:25)/100}return se(()=>O(te,{children:[C("canvas",{style:{width:"100%",height:"100%"},ref:v,className:re({map:!0,moving:b.moving,hidden:a.maplibreStore.showMaplibre}),children:"ExpoFP.com"}),y&&q&&O(ge,{className:"debug-fps",children:[C("div",{ref:M}),C("button",{onClick:()=>{typeof window<"u"&&window.localStorage&&localStorage.setItem(X,"false"),J(!1)},style:{padding:"4px 8px",fontSize:"11px",cursor:"pointer",backgroundColor:"#333",color:"#fff",border:"1px solid #555",width:"100%"},children:"Hide debug"})]})]}))}