@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 3.35 kB
JavaScript
import{jsx as T}from"react/jsx-runtime";import"maplibre-gl/dist/maplibre-gl.css";import{Renderer as Z}from"@expofp/renderer";import{addProtocol as B,Map as N}from"maplibre-gl";import{Protocol as G}from"pmtiles";import{useEffect as R,useRef as s}from"react";export const MAP_DIM_LAYER_ID="expofp-map-dim";const y="expofp-map-dim-source",U="3d-expofp";let g=null;const Y=["coalesce",["get","name:en"],["get","name_en"],["get","name:latin"],["get","name"]],k={type:"Feature",geometry:{type:"Polygon",coordinates:[[[-180,-85],[180,-85],[180,85],[-180,85],[-180,-85]]]},properties:{}};function S(e){if(!e||typeof e!="object")return!1;const r=e.length;if(typeof r!="number"||r<16)return!1;const o=e[0];return typeof o=="number"&&Number.isFinite(o)}function H(e){if(S(e))return Array.from(e);const o=e?.defaultProjectionData?.mainMatrix;return S(o)?Array.from(o):(console.warn("Maplibre custom layer received an unsupported projection matrix payload.",e),null)}function b(e){return typeof e=="string"?e.includes("name"):Array.isArray(e)?e.some(r=>b(r)):!e||typeof e!="object"?!1:Object.values(e).some(r=>b(r))}function J(e){return e.type!=="symbol"||!e.id||!e.layout?!1:b(e.layout["text-field"])}function V(e){const r=e.getStyle();for(const o of r.layers??[])J(o)&&e.setLayoutProperty(o.id,"text-field",Y)}function W(){if(!g){g=new G;try{B("pmtiles",g.tile)}catch(e){console.warn("Maplibre PMTiles protocol registration failed.",e)}}}export default function X({sceneDef:e,geoConfig:r,staticTransform:o,tileSource:D,mapOptions:E,onRendererReady:x,onMapDimLayerReady:L,onMapLoadError:M}){const f=s(null),P=s(null),c=s(null),h=s(x),_=s(L),j=s(M),O=s({sceneDef:e,geoConfig:r,staticTransform:o,tileSource:D,mapOptions:E});return R(()=>{h.current=x,_.current=L,j.current=M}),R(()=>{if(!f.current)return;const{sceneDef:d,geoConfig:n,staticTransform:I,tileSource:w,mapOptions:u}=O.current;let p=!1;const l={...d};l.rootLayer={...d.rootLayer};const C=d.rootLayer.children;l.rootLayer.children=C.filter(i=>i?.name?.toString().toLowerCase()!=="areamap"),l.background=void 0,l.staticTransform=I,W();const F=n.bounds?{bounds:n.bounds,fitBoundsOptions:{padding:n.fitPadding,bearing:n.bearing}}:{center:n.center,zoom:n.zoom},t=new N({container:f.current,style:w.style,...F,bearing:n.bearing,pitch:u?.pitch??30,maxPitch:u?.maxPitch??70,minZoom:u?.minZoom,maxZoom:u?.maxZoom,maxBounds:u?.maxBounds,canvasContextAttributes:{antialias:!0}});n.zoomAdjustment&&t.jumpTo({zoom:t.getZoom()+n.zoomAdjustment}),P.current=t,t.once("error",i=>{t.isStyleLoaded()||j.current?.(i?.error??i)});const z={id:U,type:"custom",renderingMode:"3d",onAdd(i,m){if(p)return;const a=new Z({canvas:t.getCanvas(),gl:m});if(p){a.dispose();return}a.init(l),c.current=a,h.current?.(a,t,l,()=>t.triggerRepaint())},render(i,m){if(!c.current||c.current.isDisposed)return;const a=H(m??i);a&&c.current.render(a)}},A=()=>{V(t),t.getSource(y)||t.addSource(y,{type:"geojson",data:k}),t.getLayer(MAP_DIM_LAYER_ID)||t.addLayer({id:MAP_DIM_LAYER_ID,type:"fill",source:y,paint:{"fill-color":"#000000","fill-opacity":0,"fill-opacity-transition":{duration:0,delay:0}}}),_.current?.(t),t.addLayer(z)};return t.on("style.load",A),()=>{p=!0,t.off("style.load",A),c.current?.dispose(),c.current=null,t.remove(),P.current=null}},[]),T("div",{ref:f,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"}})}