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

Interactive floor plan library for expos and events

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