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