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

Interactive floor plan library for expos and events

import{jsx as y,jsxs as H}from"react/jsx-runtime";import"./Wayfinding.scss";import L from"classnames";import{useObserver as O}from"mobx-react-lite";import{useEffect as R,useMemo as B,useRef as Q,useState as F}from"react";import{DEFAULT_UNITS as X}from"../constants";import q from"../data";import{getLayerSvg as G}from"../data/svg";import l,{boothStore as w,exhibitorStore as k,uiState as e}from"../store";import{BoothBase as S,RegularBooth as D}from"../store/BoothStore";import{Route as I}from"../store/RouteStore";import P from"../tools/settings";import{calcSpeed as J}from"../utils/calcSpeed";import{calcTravelTime as Y}from"../utils/calcTravelTime";import{t as v}from"../utils/i18n";import{CURRENT_POSITION_POINT_ID as A,KIOSK_ANCHOR_POINT_ID as Z}from"../wayfinding/adapters";import ee from"./EntityList";import te from"./WayfindingTemplate";function oe(){const M=Q(null),b=B(()=>{const o=l.routeStore.pathLayers;return o.map((i,c)=>{const u=o[c+1],a=i.layer?.basePriority??0,r=u?.layer?.basePriority??0,d=u?r<a?"up":"down":void 0;return{id:i.id,name:i.layer?.shortName,description:i.layer?.description,directionToNext:d}})},[l.routeStore.pathLayers]),[C,E]=F(),[g,_]=F({}),N=o=>{o&&_(i=>({...i,[o.value]:o}))};R(()=>{C||E(b[0])},[l.routeStore.pathLayers,b]),R(()=>{const o=b.find(i=>i.description?.toLowerCase()===l.routeStore.currentRouteLayer?.description?.toLowerCase());o&&E(o)},[l.routeStore.currentRouteLayer,b]),R(()=>{const o=e.selectedRoute;if(!o){e.setIsMultiPointRoute(!1);return}const c=(o.waypoints?.length||0)>0;e.setIsMultiPointRoute(c)},[e.selectedRoute]);const W=()=>{const{from:o,to:i}=e.selectedRoute;return!!(o&&i)},U=()=>e.overlaySize==="full",V=()=>!!(W()&&!U()),T=()=>{const o=e.selectedRoute;return o?(o.waypoints?.length||0)>0?"multi":"simple":"none"};R(()=>{T()==="multi"&&e.selectedRoute},[e.selectedRoute]);const x=B(()=>{const o=[],i=w.booths,c=i.filter(r=>r instanceof D),u=i.filter(r=>!(r instanceof D));let a=[];return k.exhibitors.forEach(r=>{o.push(...r.booths.map(d=>d.id)),a.push(...r.booths.map(d=>({value:d.id.toString(),label:r.name+" - "+d.fullName,exhibitorId:r.id})))}),u.filter(r=>o.indexOf(r.id)===-1).forEach(r=>{a.push({value:r.id.toString(),label:r.fullName})}),a=a.sort((r,d)=>r.label.localeCompare(d.label,void 0,{sensitivity:"base"})),c.filter(r=>o.indexOf(r.id)===-1).forEach(r=>{a.push({value:r.id.toString(),label:r.fullName})}),a},[k.exhibitors.length,w.booths.length]);return R(()=>{const o=e.selectedRoute?.to?.id?.toString(),i=l.routeStore.currentRouteExhibitor;if(!i)return;const c=x.find(u=>u.value===o&&u.exhibitorId===i.id);l.routeStore.currentRouteExhibitor=null,N(c)},[l.routeStore.currentRouteExhibitor,e.selectedRoute?.to?.id,x]),O(()=>{if(T()==="multi")return H("div",{className:L("main-wayfinding",{hidden:e.kiosk&&e.selectedRoute?.from&&e.selectedRoute?.to}),children:[e.routeDescription&&y("div",{className:"efp-wayfinding-description",children:e.routeDescription}),y(ee,{updatedScrollableRef:M})]});const i=e.selectedRoute?.from&&!(e.selectedRoute.from instanceof S)?e.selectedRoute.from:null,c=e.selectedRoute?.to&&!(e.selectedRoute.to instanceof S)?e.selectedRoute.to:null,u=[];i&&u.push({value:i.id,label:i.name}),c&&c.id!==i?.id&&u.push({value:c.id,label:c.name}),u.push(...x);const a=(t,s=!0)=>{const n=t?.value;if(n===A||n===Z)return;const f=w.booths.find(h=>h.id.toString()===n)??null,{from:m,to:p}=e.selectedRoute;N(t),s?l.routeStore.selectRoute(new I(f,p)):l.routeStore.selectRoute(new I(m,f))},r=t=>{const s=[],n=G().getAttribute("units")||X,f=Y(t,J(n));let m=new Date;m.setMinutes(m.getMinutes()+f/60);const p=m.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});return s.push({title:v("Travel time"),text:f<60?"< 1 min":`~ ${Math.round(f/60)} min`},{title:v("Distance"),text:Math.round(t)+` ${n}`},{title:v("Est arrival"),text:p}),s},d=()=>{const{from:t,to:s}=e.selectedRoute;t?.id!==A&&l.routeStore.selectRoute(new I(s,t))},j=e.selectedRoute?.from&&e.selectedRoute?.to&&!l.routeStore.routeLines.length;function K(){const t=e.selectedRoute?.from?.id?.toString(),s=t?g[t]:void 0;return u.find(n=>s?n.value===s.value&&n.label===s.label:n.value===t)}function z(){const t=e.selectedRoute?.to?.id?.toString(),s=t?g[t]:void 0;return u.find(n=>s?n.value===s.value&&n.label===s.label:n.value===t)}const $=!!(!q.hideWayInformation&&P.EXPO!=="bloomberg"&&e.selectedRoute?.from&&e.selectedRoute?.to);return y("div",{className:L("main-wayfinding",{hidden:e.kiosk&&e.selectedRoute?.from&&e.selectedRoute?.to}),children:y(te,{showForm:!V(),showInfo:$,floors:b,currentFloor:C,onClickFloor:t=>{const s=l.routeStore.pathLayers.find(n=>n.id===t.id);s?.layer&&l.layerStore.updateVisibility(s.layer,!0)},routeFound:!j,options:u,fromValue:K(),toValue:z(),onChangeFrom:t=>a(t,!0),onChangeTo:t=>a(t,!1),onSwitch:d,infoItems:r(l.routeStore.routeDistance),infoAccessible:l.routeStore.onlyAccessible,showAccessible:l.routeStore.showAccessible,onAccessibleCheck:t=>l.routeStore.setOnlyAccessible(t),onClickInfo:()=>l.showOverlay(),routeUrl:e.routeQRCodeUrl,isKiosk:e.kiosk,showDetailsIcon:e.showRouteInstantly,onDetailsIconClick:()=>{const{from:t,to:s}=e.selectedRoute||{},n=(s instanceof S?s:null)??(t instanceof S?t:null);if(n){const f=n.id.toString(),m=g[f]??u.find(h=>h.value===f),p=m?.exhibitorId!=null?n.exhibitors.find(h=>h.id===m.exhibitorId):n.exhibitors.find(h=>m?.label.includes(h.name));e.details=p||n}}})})})}function re(){return O(()=>P.wayfinding&&!e.menu&&e.selectedRoute&&e.list.type!=="route-planner"&&y(oe,{}))}export default re;