itowns/dist/itowns_widgets.js

A JS/WebGL framework for 3D geospatial data visualization

"use strict";!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("itowns_widgets",[],e):"object"==typeof exports?exports.itowns_widgets=e():t.itowns_widgets=e()}(self,(()=>(self.webpackChunk=self.webpackChunk||[]).push([[605],{36099:(t,e,o)=>{o.r(e),o.d(e,{C3DTilesStyle:()=>x,Minimap:()=>p,Navigation:()=>c,Scale:()=>g,Searchbar:()=>b,Widget:()=>n});var i=o(30458);const n=class{#t;constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;this.parentElement=e.parentElement||t.domElement,this.position=e.position||o.position,["top-left","top-right","bottom-left","bottom-right","top","bottom","left","right"].includes(this.position)||(console.warn(`'position' optional parameter for 'Widget' constructor is not a valid option. It will be set to '${o.position}'.`),this.position=o.position),this.domElement=document.createElement("div"),this.parentElement.appendChild(this.domElement),this.domElement.style.width=`${e.width||e.size||o.width}px`,this.domElement.style.height=`${e.height||e.size||o.height}px`;const i=this.position.split("-");if(this.domElement.classList.add(`${i[0]}-widget`),i[1])this.domElement.classList.add(`${i[1]}-widget`);else switch(i[0]){case"top":case"bottom":this.domElement.style.left=`calc(50% - ${this.domElement.offsetWidth/2}px)`;break;case"left":case"right":this.domElement.style.top=`calc(50% - ${this.domElement.offsetHeight/2}px)`}e.translate&&(this.domElement.style.transform=`translate(${e.translate.x||0}px, ${e.translate.y||0}px)`),this.domElement.addEventListener("pointerdown",(t=>{t.stopPropagation()})),this.domElement.addEventListener("mousedown",(t=>{t.stopPropagation()}))}show(){this.domElement.style.display=this.#t}hide(){this.#t=window.getComputedStyle(this.domElement).display,this.domElement.style.display="none"}},s={displayCompass:!0,display3DToggle:!0,displayZoomIn:!0,displayZoomOut:!0,animationDuration:500,position:"bottom-left",direction:"column"},a={id:"compass",content:"",info:"Rotate the camera to face North",parentId:"widgets"},l={id:"3d-button",content:"3D",info:"Tilt the camera"},r={id:"zoom-in-button",content:'<span class="widget-zoom-button-logo"></span>',info:"Zoom in",parentId:"zoom-button-bar"},d={id:"zoom-out-button",content:'<span id="zoom-out-logo" class="widget-zoom-button-logo"></span>',info:"Zoom out",parentId:"zoom-button-bar"},c=class extends n{#e;#o(t){return t.time=this.animationDuration,this.#e.controls.lookAtCoordinate(t)}#i(t,e){return this.addButton(t.id,t.content,t.info,e,t.parentId)}constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t.isGlobeView)throw new Error("'Navigation' plugin only supports 'GlobeView'. Therefore, the 'view' parameter must be a 'GlobeView'.");["top","bottom","left","right"].includes(e.position)&&(console.warn(`'position' optional parameter for 'Navigation' is not a valid option. It will be set to '${s.position}'.`),e.position=s.position),super(t,e,s),this.#e=t,this.direction=e.direction||s.direction,["column","row"].includes(this.direction)||(console.warn(`'direction' optional parameter for 'Navigation' constructor is not a valid option. It will be set to '${s.direction}'.`),this.direction=s.direction),this.animationDuration=void 0===e.animationDuration?s.animationDuration:e.animationDuration,this.domElement.id="widgets-navigation",this.domElement.classList.add(`${this.direction}-widget`),(e.displayCompass??s.displayCompass)&&(this.compass=this.#i(a,(()=>{this.#o({heading:0,tilt:89.5})})),t.addEventListener(i.GQ.CAMERA_MOVED,(t=>{this.compass.style.transform=`rotate(${-t.heading}deg)`}))),(e.display3DToggle??s.display3DToggle)&&(this.toggle3D=this.#i(l,(()=>{this.#o({tilt:this.#e.controls.getTilt()<89?89.5:40})})),t.addEventListener(i.GQ.CAMERA_MOVED,(t=>{this.toggle3D.innerHTML=t.tilt<89?"2D":"3D"}))),(e.displayZoomIn??s.displayZoomIn)&&(this.zoomIn=this.#i(r,(()=>{this.#o({zoom:Math.min(20,this.#e.controls.getZoom()+1)})}))),(e.displayZoomOut??s.displayZoomOut)&&(this.zoomOut=this.#i(d,(()=>{this.#o({zoom:Math.max(3,this.#e.controls.getZoom()-1)})})))}addButton(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:()=>{},n=arguments.length>4?arguments[4]:void 0,s=document.getElementById(n);s||(s=this.addButtonBar(n));const a=document.createElement("button");return a.className="widget-button",a.id=t,a.innerHTML=e,a.title=o,a.onclick=i,s.appendChild(a),a.tabIndex=-1,window.addEventListener("pointerup",(()=>{document.activeElement===a&&this.#e.domElement.focus()})),a}addButtonBar(t){const e=document.createElement("div");return e.className="widget-button-bar",t&&(e.id=t),this.domElement.appendChild(e),e}};var m=o(80353);const h={minScale:2e-6,maxScale:2e-9,zoomRatio:1/30,width:150,height:150,position:"bottom-left"},p=class extends n{constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!t.isGlobeView)throw new Error("'Minimap' plugin only supports 'GlobeView'. Therefore, the 'view' parameter must be a 'GlobeView'.");if(!e.isColorLayer)throw new Error("'layer' parameter form 'Minimap' constructor should be a 'ColorLayer'.");if(super(t,o,h),this.minScale=o.minScale||h.minScale,this.maxScale=o.maxScale||h.maxScale,this.zoomRatio=o.zoomRatio||h.zoomRatio,this.domElement.id="widgets-minimap",o.cursor){const t=document.createElement("div");t.id="cursor-wrapper",this.domElement.appendChild(t),"string"==typeof o.cursor?t.innerHTML=o.cursor:o.cursor instanceof HTMLElement&&t.appendChild(o.cursor)}this.view=new i._i(this.domElement,e.source.extent,{camera:{type:i.df.ORTHOGRAPHIC},placement:e.source.extent,noControls:!0,maxSubdivisionLevel:t.tileLayer.maxSubdivisionLevel,disableFocusOnStart:!0}),this.view.addLayer(e),this.domElement.addEventListener("pointerdown",(t=>{t.preventDefault()}));const n=this.view.getScale(o.pitch),s=this.view.camera3D.zoom*this.maxScale/n,a=this.view.camera3D.zoom*this.minScale/n,l=new m.E$(t.referenceCrs),r=new m.E$(this.view.referenceCrs),d=t.controls.getCameraTargetPosition();t.addFrameRequester(i.n7.AFTER_RENDER,(()=>{const e=t.camera3D.position.distanceTo(d),i=t.getScaleFromDistance(o.pitch,e);this.view.camera3D.zoom=this.zoomRatio*a*i/this.minScale,this.view.camera3D.zoom=Math.min(Math.max(this.view.camera3D.zoom,s),a),this.view.camera3D.updateProjectionMatrix(),l.setFromVector3(t.controls.getCameraTargetPosition()),l.as(this.view.referenceCrs,r),this.view.camera3D.position.x=r.x,this.view.camera3D.position.y=r.y,this.view.camera3D.updateMatrixWorld(!0),this.view.notifyChange(this.view.camera3D)}))}},u={width:200,height:30,position:"bottom-left"},g=class extends n{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e,u),this.domElement.id="widgets-scale",this.view=t,this.domElement.innerHTML="Scale",this.width=e.width||u.width,this.view.isGlobeView?(this.view.addEventListener(i.SF.GLOBE_INITIALIZED,(()=>{this.update()})),this.view.controls.addEventListener(i.WZ.RANGE_CHANGED,(()=>{this.update()}))):this.view.isPlanarView?(this.view.addEventListener(i.GQ.INITIALIZED,(()=>{this.update()})),this.view.addEventListener(i.w7.MOVED,(()=>{this.update()}))):console.warn("The 'view' linked to scale widget is neither a 'GlobeView' nor a 'PlanarView'. The scale wont automatically update. You can implement its update automation using 'Scale.update' method.")}addEventListeners(){}update(){let t=Math.round(this.view.getPixelsToMeters(this.width));const e=10**(t.toString().length-1);t=Math.round(t/e)*e;const o=this.view.getMetersToPixels(t);let i="m";t>=1e3&&(t/=1e3,i="km"),this.domElement.innerHTML=`${t} ${i}`,this.domElement.style.width=`${o}px`}},f={width:300,height:38,position:"top",maxSuggestionNumber:10,fontSize:16,placeholder:"Search location"};function w(t,e){return t?(E(t),e>=t.length?e=0:e<0&&(e=t.length-1),t[e]?.classList.add("active"),e):e}function E(t){for(let e=0;e<t.length;e++)t[e].classList.remove("active")}function v(t){for(;t.children.length>1;)t.removeChild(t.lastChild)}const b=class extends n{#n;constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(super(t,o,f),!e||!e.url||!e.parser||"function"!=typeof e.parser)throw new Error("'geocodingOptions' parameter for 'Searchbar' constructor is not a valid option. Please refer to the documentation.");this.#n=e.onSelected??(()=>{}),this.domElement.id="widgets-searchbar",this.domElement.style.height="auto";const n=document.createElement("form");n.setAttribute("autocomplete","off"),n.id="searchbar-autocompletion-form",this.domElement.appendChild(n);const s=document.createElement("input");let a;s.setAttribute("type","text"),s.setAttribute("name","mySearch"),s.setAttribute("placeholder",o.placeholder||f.placeholder),s.style.height=`${o.height||o.size||f.height}px`,s.style.fontSize=`${o.fontSize||f.fontSize}px`,n.appendChild(s),s.addEventListener("input",(()=>{const t=s.value;if(v(n),a=-1,!t)return!1;e.url.searchParams.set("text",t),i.eI.json(e.url).then((i=>{const l=e.parser(i);let r=0;l.forEach(((e,i)=>{if(r===Math.min(l.size,o.maxSuggestionNumber||f.maxSuggestionNumber))return;const d=r;r++;const c=i.toUpperCase().indexOf(t.toUpperCase());if(c>-1){const l=document.createElement("div");l.style.minHeight=s.style.height,l.style.fontSize=`${o.fontSize||f.fontSize}px`;const r=i.slice(0,c),m=i.slice(c,c+t.length),h=i.slice(c+t.length,i.length);l.innerHTML=`<p>${r}<strong>${m}</strong>${h}</p>`,l.setAttribute("location",i),n.appendChild(l),l.addEventListener("mouseover",(()=>{E(n.children),a=d,l.classList.add("active")})),l.addEventListener("click",(()=>{this.#n(e),s.value=l.getAttribute("location"),v(n)}))}}))}))}));const l=(o.position||f.position).includes("top")?1:-1;s.addEventListener("keydown",(e=>{e.stopPropagation();const o=n.getElementsByTagName("div");switch(e.code){case"Escape":v(n),s.value="",t.domElement.focus();break;case"ArrowDown":e.preventDefault(),a=w(o,a+l);break;case"ArrowUp":e.preventDefault(),a=w(o,a-l);break;case"Enter":e.preventDefault(),o[Math.max(a,0)]&&(o[Math.max(a,0)].click(),t.domElement.focus())}})),s.addEventListener("focus",(()=>{n.classList.add("focus")})),s.addEventListener("blur",(()=>{n.classList.remove("focus"),E(n.children)})),n.addEventListener("mouseleave",(()=>{E(n.children),a=-1}))}},y={width:200,position:"top-right"};class C extends n{constructor(t,e){super(t,e,y),this.domElement.onclick=t=>t.stopImmediatePropagation();const o=document.createElement("select");this.domElement.appendChild(o);const n=new Map,s=()=>{for(const[t,e]of n)e.hidden=t!==o.selectedOptions[0]};o.onchange=s,t.getLayers().filter((t=>!0===t.isC3DTilesLayer)).forEach((e=>{const s=document.createElement("option");s.innerText=e.name,o.add(s);const a=document.createElement("div");this.domElement.appendChild(a),n.set(s,a),e.addEventListener(i.s9.ON_TILE_CONTENT_LOADED,(()=>{for(;a.firstChild;)a.firstChild.remove();const o=new Map;for(const[,t]of e.tilesC3DTileFeatures)for(const[,e]of t)for(const t in e.getInfo().batchTable){o.has(t)||o.set(t,[]);const i=e.getInfo().batchTable[t];o.get(t).includes(i)||o.get(t).push(i)}const i=new Map,n=new Map,s=(o,s,l)=>{const r=document.createElement("input");r.setAttribute("type","color"),a.appendChild(r),r.onchange=()=>{const n=o();if(!l.includes(n))return;const a=r.value;i.set(n,(t=>t.getInfo().batchTable[s]==n?a:null)),e.updateStyle(),t.notifyChange()};const d=document.createElement("input");return d.setAttribute("type","range"),d.min=0,d.max=1,d.step=.1,d.value=1,a.appendChild(d),d.onchange=()=>{const i=o();if(!l.includes(i))return;const a=d.value;n.set(i,(t=>t.getInfo().batchTable[s]==i?a:null)),e.updateStyle(),t.notifyChange()},{inputColor:r,opacityElement:d}},l=(t,e)=>{const o=document.createElement("label");o.innerText=t,a.appendChild(o);const i=document.createElement("select");a.appendChild(i),e.forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,i.add(e)})),s((()=>i.selectedOptions[0].value),t,e)},r=(o,l)=>{const r=document.createElement("label");r.innerText=o,a.appendChild(r);const d=document.createElement("input");d.setAttribute("type","text"),a.appendChild(d);const{inputColor:c,opacityElement:m}=s((()=>d.value),o,l);d.onchange=()=>{if(!l.includes(d.value))return;const s=c.value,a=d.value;i.set(a,(t=>t.getInfo().batchTable[o]==a?s:null));const r=m.value;n.set(a,(t=>t.getInfo().batchTable[o]==a?r:null)),e.updateStyle(),t.notifyChange()}};for(const[t,e]of o)e.length<C.MAX_SELECT_VALUE?l(t,e):r(t,e);e.style={fill:{color:t=>{let e=null;for(const[,o]of i)e=o(t)||e;return e},opacity:t=>{let e=1;for(const[,o]of n)e=o(t)||e;return e}}}}))})),s()}static get MAX_SELECT_VALUE(){return 10}}const x=C}},t=>t(t.s=36099)])));
//# sourceMappingURL=itowns_widgets.js.map