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

Interactive floor plan library for expos and events

import{jsx as h,jsxs as w}from"react/jsx-runtime";import{Renderer as F,update as b}from"@expofp/renderer";import O from"classnames";import{observable as D}from"mobx";import{useObserver as g}from"mobx-react-lite";import{useEffect as y,useMemo as I,useRef as v,useState as N}from"react";import k from"../../data";import{getSvgArea as z}from"../../data/svg.js";import{createSceneDef as Z}from"../../engine/defs";import i,{layersStore as l,uiState as a}from"../../store";import{ZOOM_IN_FACTOR as j}from"../../store/UIState";import u from"../../tools/settings";import{applyVenueDim as V,createDimmingAnimator as $}from"../../utils/dimming";import x from"../../utils/is-debug";import{isPathwayLayer as C}from"../../utils/is-pathway-layer";import{useReaction as R}from"../../utils/mobx";import{createWayfinding as U}from"../../wayfinding";import W from"./drawing/config/config-all";import{configMarkers as B}from"./drawing/config/config-markers";import{loadLayersImages as H}from"./drawing/config/loadBoothsImages";import{MapCamera as X}from"./MapCamera";import{MapCursorCoords as G}from"./MapCursorCoords";import{MapViewport as J}from"./MapViewport";import{clearSelection as q}from"./pointer";import{setMapScene as E}from"./scene";import{useBuildRoute as K}from"./traffic/useBuildRoute";import{useManageTraffic as Q}from"./traffic/useManageTraffic";import{centerCoordinates as Y}from"./viewport";const ee="#ebebeb",T="routes-api.expofp.com",re=1e4;function oe(n){return Number.isFinite(u.maxZoom)?u.maxZoom:n.viewbox.size.width>re?100:35}function te(){const{zoomtime:n,pitchtime:f}=a.mapSettings;return{zoomTime:n===void 0?void 0:n/1e3,pitchTime:f===void 0?void 0:f/1e3}}export default function ne(){const n=v(null),f=I(()=>D({moving:!1,prevLevel:i.layerStore.layers.find(r=>!r.frozen&&r.visible)}),[]),[o,M]=N(void 0),d=v(null),p=v(null);function L(){l.layers.forEach(r=>{r.configured=!1,r.children=[],r.loaded=!1})}y(()=>{let r=!1;return L(),l.layersLoaded=!1,W().then(({layers:s,cleanup:m})=>{if(r){m();return}p.current=m;const t=u.backgroundColor==="none"?ee:u.backgroundColor,e=Z(s,z(),t);M(e),E(e),d.current=$(c=>{V(e,c)&&b(e.rootLayer)}),d.current.setTarget(a.dimmed,{immediate:!0}),l.layersLoaded=!0,i.fp.onFpConfigured&&i.fp.onFpConfigured(),H()}),()=>{r=!0,p.current?.(),p.current=null,d.current?.stop(),d.current=null,E(void 0),L()}},[]),R(()=>a.dimmed,r=>{d.current?.setTarget(r)}),y(()=>{i.fp.getCenterCoordinates=()=>Y(n.current)},[]),y(()=>{if(!o)return;const r=U({scene:o,store:i,canvas:n}),s=B({scene:o});return()=>{r(),s()}},[o]),R(()=>i.routeStore.currentRouteLayer,()=>{const r=i.routeStore.currentRouteLayer;if(!o||!r||f.prevLevel===r)return;const s=o.rootLayer.children.filter(e=>i.layerStore.floors.some(c=>e.name.includes(c.name))),m=r.name;if(!s.find(e=>e.name===m))return;const t=[];s.forEach(e=>{e.name===m&&e.hidden!==!1&&(e.hidden=!1,t.push(e)),e.name===f.prevLevel?.name&&e.hidden!==!0&&(e.hidden=!0,t.push(e))}),f.prevLevel=r,t.length&&b(...t)},{fireImmediately:!0},[o]),R(()=>i.layerStore.visible,r=>{if(!o)return;const s=r.filter(e=>C(e.name)),m=o.rootLayer.children,t=[];for(const e of m){if(!C(e.name))continue;const c=!s.find(P=>P.name===e.name);e.hidden!==c&&(e.hidden=c,t.push(e))}t.length&&b(...t)},{fireImmediately:!0},[o]);const S=g(()=>l.layersLoaded),_=g(()=>!!a.buildRoute);K({enabled:S&&_,scene:o});const A=k.busRoutes??!1;return Q({permission:S&&A,scene:o,dataJsonUrl:`https://${T}/v1/routes?expo=${u.EXPO}`,websocketUrl:`wss://${T}/locations?expo=${u.EXPO}`}),g(()=>o?w(F,{debug:x,style:{width:"100%",height:"100%"},ref:n,className:O({map:!0}),scene:o,maxZoom:oe(o),maxPitch:a.maxPitch,bounds:l.bounds,controls:{roll:a.rollEnabled,pitch:a.pitchEnabled,zoom:{dblclick:j}},smoothTime:te(),visibleRect:a.canvasVisibleRectPx,onPointerMissed:q,children:[h(X,{}),h(J,{}),x&&h(G,{canvas:n})]}):null)}