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

Interactive floor plan library for expos and events

import{jsx as m}from"react/jsx-runtime";import c from"classnames";import{useLocalStore as d,useObserver as p}from"mobx-react-lite";import i,{layersStore as r,uiState as o}from"../store";import{LayerMode as l,LayersMode as u}from"../store/LayerStore";import{remsToPixels as a}from"../utils";import{t}from"../utils/i18n";import y from"./MapControls";export default function b(){const s=d(()=>({get className(){return c({controls:!0,container:!0,"-ready":!0,[o.responsiveClass]:!0})},get style(){return{[o.rtl?"left":"right"]:o.overlayPosition==="left"?o.overlayCollapsed?a(.9):(o.kiosk?10:0)+a(.7)+"px":"10px",bottom:o.kiosk?a(4):a(9.6)}},get layers(){return r.layers.filter(e=>e.mode!==l.AlwaysHidden&&e.mode!==l.AlwaysVisible).map(e=>({id:e.name,name:e.description,visible:e.visible})).concat([]).reverse()},get visible(){return r.layers.filter(e=>e.visible).map(e=>e.name)}}));return p(()=>m(y,{className:s.className,style:s.style,title:t("Map controls"),titles:[t("Find your location"),t("Zoom In"),t("Zoom Out"),t("View switch"),t("Fit to screen"),t("Layers")],onClickFindLocation:()=>i.routeStore.findLocation(),onClickZoomIn:()=>o.zoomIn(),onClickZoomOut:()=>o.zoomOut(),onClickByWidth:()=>o.fitBounds(),onViewModeSwitch:()=>i.maplibreStore.activateMaplibre(),viewModeSwitch:i.maplibreStore.maplibreEnabled&&!i.maplibreStore.hideModeSwitchButton,viewMode:i.maplibreStore.isMap3d,findLocation:i.routeStore.canFindLocation&&!o.setKioskModeEnabled,layersActiveItems:s.visible,layersList:r.mode===u.CheckBox?s.layers:null,onChangeLayers:e=>{r.updateVisibility(e,!r.layers.find(n=>n.name===e).visible)}}))}