@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 3.27 kB
JavaScript
import{Box as K}from"@expofp/geometry";import{update as v}from"@expofp/renderer";import{reaction as I}from"mobx";import{getBounds as y}from"../../../../engine/canvases";import{createImageDef as E}from"../../../../engine/defs";import l,{layersStore as R,uiState as N}from"../../../../store";import{setMarkerResolver as P}from"../../pointer";import{createImageCanvas as O}from"./canvases";const C="_selected";export const MARKER_LAYER_NAME="markers";function T(r,f){const{center:c,rotation:o,elevation:d}=r.bounds,{width:i,height:s}=r.source;return r.bounds=y(c.x,c.y,i,s,f,o,d),[r]}function V(r){L=r}export function configMarkers(r){const{scene:f}=r,c=[],o=new Map,d=new Map;let i=[];const s=f.rootLayer.children.find(e=>e.name===MARKER_LAYER_NAME);s.onScale=({pixelSize:e})=>V(e),P(markerAt),v(s);async function p(e){const n=[];e.forEach(u=>{const{name:a,content:t,width:h,height:D,scale:g}=u;if(o.has(a))return;const m=new Image,S=new Promise((M,b)=>{m.onload=()=>{o.set(a,{img:m,width:h,height:D,scale:g}),M()},m.onerror=x=>{b(x)}});n.push(S),m.src=t,m.crossOrigin="anonymous"}),await Promise.all(n)}const B=e=>{e.onScale=({pixelSize:n})=>T(e,n)},z=e=>{e.screenSpace||(e.onRoll=({roll:n})=>{if(n!==e.bounds.rotation)return e.bounds.rotate(n-e.bounds.rotation,e.bounds),[e]})};function w(e,n,u){const a=d.get(e);if(a)return a;const t=O(n.img,n.width,n.height,u);return d.set(e,t),t}function A(){const e=l.routeStore.markersData.markers;if(!e.length)return;i=[];const n=1,u=0,a=N.is3DView;e.forEach(t=>{const h=o.get(t.icon);if(!h)return;const D=o.get(t.selectedIcon);if(!D)return;const g=h.scale||window.devicePixelRatio,m=w(t.icon,h,g),S=w(t.selectedIcon,D,g),M=R.findLayer(t.z)?.visible??!0,b=y(t.x,t.y,m.width,m.height,n,u),x=y(t.x,t.y,S.width,S.height,n,u);let k;switch(t.position){case"lefttop":k=[0,0];break;case"centertop":k=[.5,0];break;case"centerbottom":k=[.5,1];break;default:k=[.5,.5]}const F={...E(m,b,{hidden:!M,origin:k}),id:t.id,scale:g,screenSpace:a},H={...E(S,x,{hidden:!(M&&t.active),origin:k}),id:`${t.id}${C}`,scale:g,screenSpace:a};i.push(F,H)}),s.children=i,i.forEach(t=>{B(t),z(t)})}function _(){s.children=[],i=[]}function $(){const e=l.routeStore.markersData.markers;e.length&&e.forEach(n=>{const u=i.find(h=>h.id===n.id),a=i.find(h=>h.id===`${n.id}${C}`);if(!u||!a)return;const t=R.findLayer(n.z)?.visible??!0;n.active?(u.hidden=!0,a.hidden=!(t&&n.active)):(u.hidden=!t,a.hidden=!0)})}return c.push(I(()=>[l.routeStore.selectedMarkers,l.layerStore.visible],()=>{if(!l.routeStore.markersData.markers.length){_(),v(s);return}$(),v(...i)})),c.push(I(()=>l.routeStore.markersData.markers,()=>{p(l.routeStore.markersData.icons).then(()=>{A(),v(s)})},{fireImmediately:!0})),function(){c.forEach(n=>n()),c.length=0,s.onScale=void 0,P(),v(s)}}export function markerAt(r,f){return getMarkerFromClick(r,f,L)}export function getMarkerFromClick(r,f,c){for(const o of l.routeStore.markersData.markers){const d=l.routeStore.markersData.icons.find(p=>p.name===o.icon);if(!d)continue;const i=d.width*c*devicePixelRatio,s=d.height*c*devicePixelRatio;if(W(r,f,o.x,o.y,i,s)){const p=l.layerStore.findLayer(o.z);if(!p||p&&p.visible)return o}}return null}function W(r,f,c,o,d,i){return K.fromCenter({x:c,y:o},{x:2*d,y:2*i}).containsPoint({x:r,y:f})}let L=1;