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