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

Interactive floor plan library for expos and events

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