itowns 2.42.1-next.12 → 2.42.1-next.14

package/dist/itowns_widgets.js

@@ -1,2 +1,2 @@
-"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.webpackChunkitowns=self.webpackChunkitowns||[]).push([[318],{81499:(t,e,o)=>{o.r(e),o.d(e,{C3DTilesStyle:()=>A,Minimap:()=>f,Navigation:()=>c,Scale:()=>y,Searchbar:()=>T,Widget:()=>n});var i=o(36873);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.b.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.b.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(60145),h=o(49469),p=o(48682),u=o(800);const g={minScale:2e-6,maxScale:2e-9,zoomRatio:1/30,width:150,height:150,position:"bottom-left"},f=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,g),this.minScale=o.minScale||g.minScale,this.maxScale=o.maxScale||g.maxScale,this.zoomRatio=o.zoomRatio||g.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 p.Z(this.domElement,e.source.extent,{camera:{type:u.P.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 i=this.view.getScale(o.pitch),n=this.view.camera3D.zoom*this.maxScale/i,s=this.view.camera3D.zoom*this.minScale/i,a=new m.Z(t.referenceCrs),l=new m.Z(this.view.referenceCrs),r=t.controls.getCameraTargetPosition();t.addFrameRequester(h.Ao.AFTER_RENDER,(()=>{const e=t.camera3D.position.distanceTo(r),i=t.getScaleFromDistance(o.pitch,e);this.view.camera3D.zoom=this.zoomRatio*s*i/this.minScale,this.view.camera3D.zoom=Math.min(Math.max(this.view.camera3D.zoom,n),s),this.view.camera3D.updateProjectionMatrix(),a.setFromVector3(t.controls.getCameraTargetPosition()),a.as(this.view.referenceCrs,l),this.view.camera3D.position.x=l.x,this.view.camera3D.position.y=l.y,this.view.camera3D.updateMatrixWorld(!0),this.view.notifyChange(this.view.camera3D)}))}};var w=o(11925),v=o(91742),E=o(44450);const b={width:200,height:30,position:"bottom-left"},y=class extends n{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e,b),this.domElement.id="widgets-scale",this.view=t,this.domElement.innerHTML="Scale",this.width=e.width||b.width,this.view.isGlobeView?(this.view.addEventListener(v.b.GLOBE_INITIALIZED,(()=>{this.update()})),this.view.controls.addEventListener(w.Q.RANGE_CHANGED,(()=>{this.update()}))):this.view.isPlanarView?(this.view.addEventListener(i.b.INITIALIZED,(()=>{this.update()})),this.view.addEventListener(E.uZ.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`}};var C=o(33347);const x={width:300,height:38,position:"top",maxSuggestionNumber:10,fontSize:16,placeholder:"Search location"};function L(t,e){var o;return t?(D(t),e>=t.length?e=0:e<0&&(e=t.length-1),null===(o=t[e])||void 0===o||o.classList.add("active"),e):e}function D(t){for(let e=0;e<t.length;e++)t[e].classList.remove("active")}function S(t){for(;t.children.length>1;)t.removeChild(t.lastChild)}const T=class extends n{#n;constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(super(t,o,x),!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 i=document.createElement("form");i.setAttribute("autocomplete","off"),i.id="searchbar-autocompletion-form",this.domElement.appendChild(i);const n=document.createElement("input");let s;n.setAttribute("type","text"),n.setAttribute("name","mySearch"),n.setAttribute("placeholder",o.placeholder||x.placeholder),n.style.height=`${o.height||o.size||x.height}px`,n.style.fontSize=`${o.fontSize||x.fontSize}px`,i.appendChild(n),n.addEventListener("input",(()=>{const t=n.value;if(S(i),s=-1,!t)return!1;e.url.searchParams.set("text",t),C.Z.json(e.url).then((a=>{const l=e.parser(a);let r=0;l.forEach(((e,a)=>{if(r===Math.min(l.size,o.maxSuggestionNumber||x.maxSuggestionNumber))return;const d=r;r++;const c=a.toUpperCase().indexOf(t.toUpperCase());if(c>-1){const l=document.createElement("div");l.style.minHeight=n.style.height,l.style.fontSize=`${o.fontSize||x.fontSize}px`;const r=a.slice(0,c),m=a.slice(c,c+t.length),h=a.slice(c+t.length,a.length);l.innerHTML=`<p>${r}<strong>${m}</strong>${h}</p>`,l.setAttribute("location",a),i.appendChild(l),l.addEventListener("mouseover",(()=>{D(i.children),s=d,l.classList.add("active")})),l.addEventListener("click",(()=>{this.#n(e),n.value=l.getAttribute("location"),S(i)}))}}))}))}));const a=(o.position||x.position).includes("top")?1:-1;n.addEventListener("keydown",(e=>{e.stopPropagation();const o=i.getElementsByTagName("div");switch(e.code){case"Escape":S(i),n.value="",t.domElement.focus();break;case"ArrowDown":e.preventDefault(),s=L(o,s+a);break;case"ArrowUp":e.preventDefault(),s=L(o,s-a);break;case"Enter":e.preventDefault(),o[Math.max(s,0)]&&(o[Math.max(s,0)].click(),t.domElement.focus())}})),n.addEventListener("focus",(()=>{i.classList.add("focus")})),n.addEventListener("blur",(()=>{i.classList.remove("focus"),D(i.children)})),i.addEventListener("mouseleave",(()=>{D(i.children),s=-1}))}};var _=o(48891),M=o(24266);const z={width:200,position:"top-right"};class I extends n{constructor(t,e){super(t,e,z),this.domElement.onclick=t=>t.stopImmediatePropagation();const o=document.createElement("select");this.domElement.appendChild(o);const i=new Map,n=()=>{for(const[t,e]of i)e.hidden=t!==o.selectedOptions[0]};o.onchange=n,t.getLayers().filter((t=>!0===t.isC3DTilesLayer)).forEach((e=>{const n=document.createElement("option");n.innerText=e.name,o.add(n);const s=document.createElement("div");this.domElement.appendChild(s),i.set(n,s),e.addEventListener(M.y.ON_TILE_CONTENT_LOADED,(()=>{for(;s.firstChild;)s.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,a=(o,a,l)=>{const r=document.createElement("input");r.setAttribute("type","color"),s.appendChild(r),r.onchange=()=>{const n=o();if(!l.includes(n))return;const s=r.value;i.set(n,(t=>t.getInfo().batchTable[a]==n?s: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,s.appendChild(d),d.onchange=()=>{const i=o();if(!l.includes(i))return;const s=d.value;n.set(i,(t=>t.getInfo().batchTable[a]==i?s:null)),e.updateStyle(),t.notifyChange()},{inputColor:r,opacityElement:d}},l=(t,e)=>{const o=document.createElement("label");o.innerText=t,s.appendChild(o);const i=document.createElement("select");s.appendChild(i),e.forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,i.add(e)})),a((()=>i.selectedOptions[0].value),t,e)},r=(o,l)=>{const r=document.createElement("label");r.innerText=o,s.appendChild(r);const d=document.createElement("input");d.setAttribute("type","text"),s.appendChild(d);const{inputColor:c,opacityElement:m}=a((()=>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<I.MAX_SELECT_VALUE?l(t,e):r(t,e);e.style=new _.ZP({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}}})}))})),n()}static get MAX_SELECT_VALUE(){return 10}}const A=I}},t=>(81499,t(t.s=81499))])));
+"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.webpackChunkitowns=self.webpackChunkitowns||[]).push([[318],{81499:(t,e,o)=>{o.r(e),o.d(e,{C3DTilesStyle:()=>A,Minimap:()=>f,Navigation:()=>c,Scale:()=>y,Searchbar:()=>T,Widget:()=>n});var i=o(42293);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.b.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.b.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(60145),h=o(49469),p=o(48682),u=o(800);const g={minScale:2e-6,maxScale:2e-9,zoomRatio:1/30,width:150,height:150,position:"bottom-left"},f=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,g),this.minScale=o.minScale||g.minScale,this.maxScale=o.maxScale||g.maxScale,this.zoomRatio=o.zoomRatio||g.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 p.Z(this.domElement,e.source.extent,{camera:{type:u.P.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 i=this.view.getScale(o.pitch),n=this.view.camera3D.zoom*this.maxScale/i,s=this.view.camera3D.zoom*this.minScale/i,a=new m.Z(t.referenceCrs),l=new m.Z(this.view.referenceCrs),r=t.controls.getCameraTargetPosition();t.addFrameRequester(h.Ao.AFTER_RENDER,(()=>{const e=t.camera3D.position.distanceTo(r),i=t.getScaleFromDistance(o.pitch,e);this.view.camera3D.zoom=this.zoomRatio*s*i/this.minScale,this.view.camera3D.zoom=Math.min(Math.max(this.view.camera3D.zoom,n),s),this.view.camera3D.updateProjectionMatrix(),a.setFromVector3(t.controls.getCameraTargetPosition()),a.as(this.view.referenceCrs,l),this.view.camera3D.position.x=l.x,this.view.camera3D.position.y=l.y,this.view.camera3D.updateMatrixWorld(!0),this.view.notifyChange(this.view.camera3D)}))}};var w=o(11925),v=o(91742),E=o(44450);const b={width:200,height:30,position:"bottom-left"},y=class extends n{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e,b),this.domElement.id="widgets-scale",this.view=t,this.domElement.innerHTML="Scale",this.width=e.width||b.width,this.view.isGlobeView?(this.view.addEventListener(v.b.GLOBE_INITIALIZED,(()=>{this.update()})),this.view.controls.addEventListener(w.Q.RANGE_CHANGED,(()=>{this.update()}))):this.view.isPlanarView?(this.view.addEventListener(i.b.INITIALIZED,(()=>{this.update()})),this.view.addEventListener(E.uZ.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`}};var C=o(33347);const x={width:300,height:38,position:"top",maxSuggestionNumber:10,fontSize:16,placeholder:"Search location"};function L(t,e){var o;return t?(D(t),e>=t.length?e=0:e<0&&(e=t.length-1),null===(o=t[e])||void 0===o||o.classList.add("active"),e):e}function D(t){for(let e=0;e<t.length;e++)t[e].classList.remove("active")}function S(t){for(;t.children.length>1;)t.removeChild(t.lastChild)}const T=class extends n{#n;constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(super(t,o,x),!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 i=document.createElement("form");i.setAttribute("autocomplete","off"),i.id="searchbar-autocompletion-form",this.domElement.appendChild(i);const n=document.createElement("input");let s;n.setAttribute("type","text"),n.setAttribute("name","mySearch"),n.setAttribute("placeholder",o.placeholder||x.placeholder),n.style.height=`${o.height||o.size||x.height}px`,n.style.fontSize=`${o.fontSize||x.fontSize}px`,i.appendChild(n),n.addEventListener("input",(()=>{const t=n.value;if(S(i),s=-1,!t)return!1;e.url.searchParams.set("text",t),C.Z.json(e.url).then((a=>{const l=e.parser(a);let r=0;l.forEach(((e,a)=>{if(r===Math.min(l.size,o.maxSuggestionNumber||x.maxSuggestionNumber))return;const d=r;r++;const c=a.toUpperCase().indexOf(t.toUpperCase());if(c>-1){const l=document.createElement("div");l.style.minHeight=n.style.height,l.style.fontSize=`${o.fontSize||x.fontSize}px`;const r=a.slice(0,c),m=a.slice(c,c+t.length),h=a.slice(c+t.length,a.length);l.innerHTML=`<p>${r}<strong>${m}</strong>${h}</p>`,l.setAttribute("location",a),i.appendChild(l),l.addEventListener("mouseover",(()=>{D(i.children),s=d,l.classList.add("active")})),l.addEventListener("click",(()=>{this.#n(e),n.value=l.getAttribute("location"),S(i)}))}}))}))}));const a=(o.position||x.position).includes("top")?1:-1;n.addEventListener("keydown",(e=>{e.stopPropagation();const o=i.getElementsByTagName("div");switch(e.code){case"Escape":S(i),n.value="",t.domElement.focus();break;case"ArrowDown":e.preventDefault(),s=L(o,s+a);break;case"ArrowUp":e.preventDefault(),s=L(o,s-a);break;case"Enter":e.preventDefault(),o[Math.max(s,0)]&&(o[Math.max(s,0)].click(),t.domElement.focus())}})),n.addEventListener("focus",(()=>{i.classList.add("focus")})),n.addEventListener("blur",(()=>{i.classList.remove("focus"),D(i.children)})),i.addEventListener("mouseleave",(()=>{D(i.children),s=-1}))}};var _=o(48891),M=o(24266);const z={width:200,position:"top-right"};class I extends n{constructor(t,e){super(t,e,z),this.domElement.onclick=t=>t.stopImmediatePropagation();const o=document.createElement("select");this.domElement.appendChild(o);const i=new Map,n=()=>{for(const[t,e]of i)e.hidden=t!==o.selectedOptions[0]};o.onchange=n,t.getLayers().filter((t=>!0===t.isC3DTilesLayer)).forEach((e=>{const n=document.createElement("option");n.innerText=e.name,o.add(n);const s=document.createElement("div");this.domElement.appendChild(s),i.set(n,s),e.addEventListener(M.y.ON_TILE_CONTENT_LOADED,(()=>{for(;s.firstChild;)s.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,a=(o,a,l)=>{const r=document.createElement("input");r.setAttribute("type","color"),s.appendChild(r),r.onchange=()=>{const n=o();if(!l.includes(n))return;const s=r.value;i.set(n,(t=>t.getInfo().batchTable[a]==n?s: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,s.appendChild(d),d.onchange=()=>{const i=o();if(!l.includes(i))return;const s=d.value;n.set(i,(t=>t.getInfo().batchTable[a]==i?s:null)),e.updateStyle(),t.notifyChange()},{inputColor:r,opacityElement:d}},l=(t,e)=>{const o=document.createElement("label");o.innerText=t,s.appendChild(o);const i=document.createElement("select");s.appendChild(i),e.forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,i.add(e)})),a((()=>i.selectedOptions[0].value),t,e)},r=(o,l)=>{const r=document.createElement("label");r.innerText=o,s.appendChild(r);const d=document.createElement("input");d.setAttribute("type","text"),s.appendChild(d);const{inputColor:c,opacityElement:m}=a((()=>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<I.MAX_SELECT_VALUE?l(t,e):r(t,e);e.style=new _.ZP({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}}})}))})),n()}static get MAX_SELECT_VALUE(){return 10}}const A=I}},t=>(81499,t(t.s=81499))])));
 //# sourceMappingURL=itowns_widgets.js.map

package/lib/Core/Style.js

@@ -19,10 +19,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const itowns_stroke_single_before = ".itowns-stroke-single:before {\n    display: var(--text_stroke_display);\n    content: attr(data-before);\n    opacity: 1;\n    position: absolute;\n    -webkit-text-stroke-width: var(--text_stroke_width);\n    -webkit-text-stroke-color: var(--text_stroke_color);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: -1;\n    white-space: inherit;\n    overflow-wrap: inherit;\n    letter-spacing: inherit;\n    text-align: inherit;\n    padding: inherit;\n    font-family: inherit;\n    text-transform: inherit;\n    max-width: inherit;\n    font-size: inherit;\n}\n";
 const cacheStyle = new _Cache.default();
 exports.cacheStyle = cacheStyle;
-const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-const matrix = svg.createSVGMatrix();
+const matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
+const canvas = document.createElement('canvas');
 const inv255 = 1 / 255;
-const canvas = typeof document !== 'undefined' ? document.createElement('canvas') : {};
 function baseAltitudeDefault(properties, ctx) {
   var _ctx$coordinates;
   return (ctx === null || ctx === void 0 ? void 0 : (_ctx$coordinates = ctx.coordinates) === null || _ctx$coordinates === void 0 ? void 0 : _ctx$coordinates.z) || 0;
@@ -1131,7 +1130,7 @@ class Style {
 const CustomStyle = {
   itowns_stroke_single_before
 };
-const customStyleSheet = typeof document !== 'undefined' ? document.createElement('style') : {};
+const customStyleSheet = document.createElement('style');
 customStyleSheet.type = 'text/css';
 Object.keys(CustomStyle).forEach(key => {
   customStyleSheet.innerHTML += `${CustomStyle[key]}\n\n`;

package/lib/Layer/C3DTilesLayer.js

@@ -39,8 +39,8 @@ const update = (0, _dTilesProcessing.process3dTilesNode)();
 
 /**
  * Find tileId of object
- *
  * @param {THREE.Object3D} object - object
+ *
  * @returns {number} tileId
  */
 function findTileID(object) {
@@ -55,8 +55,8 @@ function findTileID(object) {
 
 /**
  * Check if object3d has feature
- *
  * @param {THREE.Object3D} object3d - object3d to check
+ *
  * @returns {boolean} - true if object3d has feature
  */
 function object3DHasFeature(object3d) {
@@ -229,6 +229,7 @@ class C3DTilesLayer extends _GeometryLayer.default {
    * targets picked under specified coordinates. Intersects can be
    * computed with view.pickObjectsAt(..). See fillHTMLWithPickingInfo()
    * in 3dTilesHelper.js for an example.
+   *
    * @returns {C3DTileFeature} - the closest C3DTileFeature of the intersects array
    */
   getC3DTileFeatureFromIntersectsArray(intersects) {
@@ -274,7 +275,6 @@ class C3DTilesLayer extends _GeometryLayer.default {
 
   /**
    * Initialize C3DTileFeatures from tileContent
-   *
    * @param {THREE.Object3D} tileContent - tile as THREE.Object3D
    */
   initC3DTileFeatures(tileContent) {
@@ -339,8 +339,8 @@ class C3DTilesLayer extends _GeometryLayer.default {
   /**
    * Update style of the C3DTFeatures, an allowList of tile id can be passed to only update certain tile.
    * Note that this function only update THREE.Object3D materials, in order to see style changes you should call view.notifyChange()
-   *
    * @param {Array<number>|null} [allowTileIdList] - tile ids to allow in updateStyle computation if null all tiles are updated
+   *
    * @returns {boolean} true if style updated false otherwise
    */
   updateStyle() {

package/lib/Main.js

@@ -58,6 +58,12 @@ Object.defineProperty(exports, "C3DTilesBoundingVolumeTypes", {
     return _C3DTilesEnums.C3DTilesBoundingVolumeTypes;
   }
 });
+Object.defineProperty(exports, "C3DTilesGoogleSource", {
+  enumerable: true,
+  get: function () {
+    return _C3DTilesGoogleSource.default;
+  }
+});
 Object.defineProperty(exports, "C3DTilesIonSource", {
   enumerable: true,
   get: function () {
@@ -268,6 +274,12 @@ Object.defineProperty(exports, "GLOBE_VIEW_EVENTS", {
     return _GlobeView.GLOBE_VIEW_EVENTS;
   }
 });
+Object.defineProperty(exports, "GLTFParser", {
+  enumerable: true,
+  get: function () {
+    return _GLTFParser.default;
+  }
+});
 Object.defineProperty(exports, "GTXParser", {
   enumerable: true,
   get: function () {
@@ -578,13 +590,13 @@ Object.defineProperty(exports, "ellipsoidSizes", {
 Object.defineProperty(exports, "enableDracoLoader", {
   enumerable: true,
   get: function () {
-    return _B3dmParser.enableDracoLoader;
+    return _GLTFParser.enableDracoLoader;
   }
 });
 Object.defineProperty(exports, "enableKtx2Loader", {
   enumerable: true,
   get: function () {
-    return _B3dmParser.enableKtx2Loader;
+    return _GLTFParser.enableKtx2Loader;
   }
 });
 Object.defineProperty(exports, "getMaxColorSamplerUnitsCount", {
@@ -596,13 +608,13 @@ Object.defineProperty(exports, "getMaxColorSamplerUnitsCount", {
 Object.defineProperty(exports, "glTFLoader", {
   enumerable: true,
   get: function () {
-    return _B3dmParser.glTFLoader;
+    return _GLTFParser.glTFLoader;
   }
 });
 Object.defineProperty(exports, "legacyGLTFLoader", {
   enumerable: true,
   get: function () {
-    return _B3dmParser.legacyGLTFLoader;
+    return _GLTFParser.legacyGLTFLoader;
   }
 });
 Object.defineProperty(exports, "process3dTilesNode", {
@@ -682,6 +694,7 @@ var _OrientedImageSource = _interopRequireDefault(require("./Source/OrientedImag
 var _PotreeSource = _interopRequireDefault(require("./Source/PotreeSource"));
 var _C3DTilesSource = _interopRequireDefault(require("./Source/C3DTilesSource"));
 var _C3DTilesIonSource = _interopRequireDefault(require("./Source/C3DTilesIonSource"));
+var _C3DTilesGoogleSource = _interopRequireDefault(require("./Source/C3DTilesGoogleSource"));
 var _EntwinePointTileSource = _interopRequireDefault(require("./Source/EntwinePointTileSource"));
 var _GpxParser = _interopRequireDefault(require("./Parser/GpxParser"));
 var _GeoJsonParser = _interopRequireDefault(require("./Parser/GeoJsonParser"));
@@ -692,7 +705,7 @@ var _LASParser = _interopRequireDefault(require("./Parser/LASParser"));
 var _ISGParser = _interopRequireDefault(require("./Parser/ISGParser"));
 var _GDFParser = _interopRequireDefault(require("./Parser/GDFParser"));
 var _GTXParser = _interopRequireDefault(require("./Parser/GTXParser"));
-var _B3dmParser = require("./Parser/B3dmParser");
+var _GLTFParser = _interopRequireWildcard(require("./Parser/GLTFParser"));
 var _C3DTFeature = _interopRequireDefault(require("./Core/3DTiles/C3DTFeature"));
 var _C3DTileset = _interopRequireDefault(require("./Core/3DTiles/C3DTileset"));
 var _C3DTBoundingVolume = _interopRequireDefault(require("./Core/3DTiles/C3DTBoundingVolume"));

package/lib/Parser/B3dmParser.js

@@ -5,29 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.enableDracoLoader = enableDracoLoader;
-exports.enableKtx2Loader = enableKtx2Loader;
-exports.legacyGLTFLoader = exports.glTFLoader = void 0;
 var THREE = _interopRequireWildcard(require("three"));
+var _C3DTBatchTable = _interopRequireDefault(require("../Core/3DTiles/C3DTBatchTable"));
 var _Capabilities = _interopRequireDefault(require("../Core/System/Capabilities"));
-var _GLTFLoader = require("../ThreeExtended/loaders/GLTFLoader");
-var _DRACOLoader = require("../ThreeExtended/loaders/DRACOLoader");
-var _KTX2Loader = require("../ThreeExtended/loaders/KTX2Loader");
-var _LegacyGLTFLoader = _interopRequireDefault(require("./deprecated/LegacyGLTFLoader"));
+var _ThreeUtils = _interopRequireDefault(require("../Utils/ThreeUtils"));
 var _ShaderUtils = _interopRequireDefault(require("../Renderer/Shader/ShaderUtils"));
-var _C3DTBatchTable = _interopRequireDefault(require("../Core/3DTiles/C3DTBatchTable"));
 var _ReferencingLayerProperties = _interopRequireDefault(require("../Layer/ReferencingLayerProperties"));
-var _ThreeUtils = _interopRequireDefault(require("../Utils/ThreeUtils"));
+var _GLTFParser = _interopRequireDefault(require("./GLTFParser"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const matrixChangeUpVectorZtoY = new THREE.Matrix4().makeRotationX(Math.PI / 2);
-// For gltf rotation
-const matrixChangeUpVectorZtoX = new THREE.Matrix4().makeRotationZ(-Math.PI / 2);
+const matrixChangeUpVectorYtoZInv = new THREE.Matrix4().makeRotationX(-Math.PI / 2);
+const matrixChangeUpVectorXtoZ = new THREE.Matrix4().makeRotationZ(-Math.PI / 2);
 const utf8Decoder = new TextDecoder();
-const glTFLoader = new _GLTFLoader.GLTFLoader();
-exports.glTFLoader = glTFLoader;
-const legacyGLTFLoader = new _LegacyGLTFLoader.default();
-exports.legacyGLTFLoader = legacyGLTFLoader;
+
+/**
+ * 3D Tiles pre-1.0 contain not standardized and specific uniforms that we filter out to avoid shader compilation errors
+ * This method is passed to scene.traverse and applied to all 3D objects of the loaded gltf.
+ * @param {THREE.Object3D} obj - 3D object of the gltf hierarchy
+ */
 function filterUnsupportedSemantics(obj) {
   // see GLTFLoader GLTFShader.prototype.update function
   const supported = ['MODELVIEW', 'MODELVIEWINVERSETRANSPOSE', 'PROJECTION', 'JOINTMATRIX'];
@@ -47,67 +42,35 @@ function filterUnsupportedSemantics(obj) {
 }
 
 /**
- * @module B3dmParser
- */
-/**
- * Enable Draco decoding for gltf.
- *
- * The Draco library files are in folder itowns/examples/libs/draco/.
- * You must indicate this path when you want to enable Draco Decoding.
- * For more information on Draco, read /itowns/examples/libs/draco/README.md.
- *
- * @example <caption>Enable draco decoder</caption>
- * // if you copied /itowns/examples/libs/draco/ to the root folder of your project,you can set the path to './'.
- * itowns.enableDracoLoader('./');
- *
- *  @param {string} path path to draco library folder.
- * This library is mandatory to load b3dm and gltf with Draco compression.
- * @param {object} config optional configuration for Draco compression.
+ * 3D Tiles pre-1.0 had a gltfUpAxis parameter that defined the up vector of the gltf file that might be different from
+ * the standard y-up for gltf. Manage the case when this gltfUpAxis is defined (i.e. apply the correct rotation to the
+ * gltf file to have it z-up in the end).
+ * @param {THREE.Object3D} gltfScene - the parsed glTF scene
+ * @param {String} gltfUpAxis - the gltfUpAxis parameter
  */
-function enableDracoLoader(path, config) {
-  if (!path) {
-    throw new Error('Path to draco folder is mandatory');
-  }
-  const dracoLoader = new _DRACOLoader.DRACOLoader();
-  dracoLoader.setDecoderPath(path);
-  if (config) {
-    dracoLoader.setDecoderConfig(config);
+function applyDeprecatedGltfUpAxis(gltfScene, gltfUpAxis) {
+  if (gltfUpAxis === 'Z') {
+    // If gltf up was already z-up, apply the inverse transform matrix that was applied in the glTFParser
+    gltfScene.applyMatrix4(matrixChangeUpVectorYtoZInv);
+  } else if (gltfUpAxis === 'X') {
+    gltfScene.applyMatrix4(matrixChangeUpVectorYtoZInv);
+    gltfScene.applyMatrix4(matrixChangeUpVectorXtoZ);
   }
-  glTFLoader.setDRACOLoader(dracoLoader);
 }
 
 /**
- * Enable KTX2 decoding for gltf. This library is mandatory to load b3dm and gltf with KTX2 compression.
- *
- * The KTX2 library files are in folder itowns/examples/libs/basis/.
- * You must indicate this path when you want to enable KTX2 decoding.
- * For more information about KTX2, read /itowns/examples/libs/basis/README.md.
- *
- * @example <caption>Enable ktx2 decoder</caption>
- * // if you copied /itowns/examples/libs/draco/ to the root folder of your project,you can set the path to './'.
- * itowns.enableKtx2Loader('./', view.mainLoop.gfxEngine.renderer);
- *
- * @param {string} path path to KTX2 library folder.
- * @param {THREE.WebGLRenderer} renderer the threejs renderer
+ * @module B3dmParser
  */
-function enableKtx2Loader(path, renderer) {
-  if (!path || !renderer) {
-    throw new Error('Path to ktx2 folder and renderer are mandatory');
-  }
-  const ktx2Loader = new _KTX2Loader.KTX2Loader();
-  ktx2Loader.setTranscoderPath(path);
-  ktx2Loader.detectSupport(renderer);
-  glTFLoader.setKTX2Loader(ktx2Loader);
-}
 var _default = {
   /** Parse b3dm buffer and extract THREE.Scene and batch table
    * @param {ArrayBuffer} buffer - the b3dm buffer.
    * @param {Object} options - additional properties.
    * @param {string=} [options.gltfUpAxis='Y'] - embedded glTF model up axis.
    * @param {string} options.urlBase - the base url of the b3dm file (used to fetch textures for the embedded glTF model).
-   * @param {boolean=} [options.doNotPatchMaterial='false'] - disable patching material with logarithmic depth buffer support.
+   * @param {boolean=} [options.doNotPatchMaterial=false] - disable patching material with logarithmic depth buffer support.
    * @param {float} [options.opacity=1.0] - the b3dm opacity.
-   * @param {boolean|Material=} [options.overrideMaterials='false'] - override b3dm's embedded glTF materials. If
+   * @param {boolean=} [options.frustumCulled=false] - enable frustum culling.
+   * @param {boolean|Material=} [options.overrideMaterials=false] - override b3dm's embedded glTF materials. If
    * true, a threejs [MeshBasicMaterial](https://threejs.org/docs/index.html?q=meshbasic#api/en/materials/MeshBasicMaterial)
    * is set up. config.overrideMaterials can also be a threejs [Material](https://threejs.org/docs/index.html?q=material#api/en/materials/Material)
    * in which case it will be the material used to override.
@@ -115,8 +78,7 @@ var _default = {
    *
    */
   parse(buffer, options) {
-    const gltfUpAxis = options.gltfUpAxis;
-    const urlBase = options.urlBase;
+    const frustumCulled = options.frustumCulled === true;
     if (!buffer) {
       throw new Error('No array buffer provided.');
     }
@@ -173,61 +135,56 @@ var _default = {
       const posGltf = headerByteLength + b3dmHeader.FTJSONLength + b3dmHeader.FTBinaryLength + b3dmHeader.BTJSONLength + b3dmHeader.BTBinaryLength;
       const gltfBuffer = buffer.slice(posGltf);
       const headerView = new DataView(gltfBuffer, 0, 20);
-      promises.push(new Promise((resolve /* , reject */) => {
-        const onload = gltf => {
-          for (const scene of gltf.scenes) {
-            scene.traverse(filterUnsupportedSemantics);
-          }
-          // Rotation managed
-          if (gltfUpAxis === undefined || gltfUpAxis === 'Y') {
-            gltf.scene.applyMatrix4(matrixChangeUpVectorZtoY);
-          } else if (gltfUpAxis === 'X') {
-            gltf.scene.applyMatrix4(matrixChangeUpVectorZtoX);
+      const init_mesh = function (mesh) {
+        mesh.frustumCulled = frustumCulled;
+        if (mesh.material) {
+          if (options.overrideMaterials) {
+            const oldMat = mesh.material;
+            // Set up new material
+            if (typeof options.overrideMaterials === 'object' && options.overrideMaterials.isMaterial) {
+              mesh.material = options.overrideMaterials;
+            } else {
+              mesh.material = new THREE.MeshBasicMaterial();
+            }
+            (0, _ThreeUtils.default)(oldMat);
+          } else if (_Capabilities.default.isLogDepthBufferSupported() && mesh.material.isRawShaderMaterial && !options.doNotPatchMaterial) {
+            _ShaderUtils.default.patchMaterialForLogDepthSupport(mesh.material);
+            console.warn('glTF shader has been patched to add log depth buffer support');
           }
+          (0, _ReferencingLayerProperties.default)(mesh.material, options.layer);
+        }
+      };
+      promises.push(_GLTFParser.default.parse(gltfBuffer, options).then(gltf => {
+        for (const scene of gltf.scenes) {
+          scene.traverse(filterUnsupportedSemantics);
+        }
+        applyDeprecatedGltfUpAxis(gltf.scene, options.gltfUpAxis);
+        const shouldBePatchedForLogDepthSupport = _Capabilities.default.isLogDepthBufferSupported() && !options.doNotPatchMaterial;
+        if (options.frustumCulling === false || options.overrideMaterials || shouldBePatchedForLogDepthSupport || options.layer) {
+          gltf.scene.traverse(init_mesh);
+        }
 
-          // Apply relative center from Feature table.
-          gltf.scene.position.copy(FT_RTC);
+        // Apply relative center from Feature table.
+        gltf.scene.position.copy(FT_RTC);
 
-          // Apply relative center from gltf json.
-          const contentArray = new Uint8Array(gltfBuffer, 20, headerView.getUint32(12, true));
-          const content = utf8Decoder.decode(new Uint8Array(contentArray));
-          const json = JSON.parse(content);
-          if (json.extensions && json.extensions.CESIUM_RTC) {
-            gltf.scene.position.fromArray(json.extensions.CESIUM_RTC.center);
-            gltf.scene.updateMatrixWorld(true);
-          }
-          gltf.scene.traverse(function (mesh) {
-            mesh.frustumCulled = false;
-            if (mesh.material) {
-              if (options.overrideMaterials) {
-                const oldMat = mesh.material;
-                // Set up new material
-                if (typeof options.overrideMaterials === 'object' && options.overrideMaterials.isMaterial) {
-                  mesh.material = options.overrideMaterials;
-                } else {
-                  mesh.material = new THREE.MeshBasicMaterial();
-                }
-                (0, _ThreeUtils.default)(oldMat);
-              } else if (_Capabilities.default.isLogDepthBufferSupported() && mesh.material.isRawShaderMaterial && !options.doNotPatchMaterial) {
-                _ShaderUtils.default.patchMaterialForLogDepthSupport(mesh.material);
-                console.warn('b3dm shader has been patched to add log depth buffer support');
-              }
-              (0, _ReferencingLayerProperties.default)(mesh.material, options.layer);
-            }
-          });
-          resolve(gltf);
-        };
-        const version = headerView.getUint32(4, true);
-        if (version === 1) {
-          legacyGLTFLoader.parse(gltfBuffer, urlBase, onload);
-        } else {
-          glTFLoader.parse(gltfBuffer, urlBase, onload);
+        // Apply relative center from gltf json.
+        const contentArray = new Uint8Array(gltfBuffer, 20, headerView.getUint32(12, true));
+        const content = utf8Decoder.decode(new Uint8Array(contentArray));
+        const json = JSON.parse(content);
+        if (json.extensions && json.extensions.CESIUM_RTC) {
+          gltf.scene.position.fromArray(json.extensions.CESIUM_RTC.center);
+          gltf.scene.updateMatrixWorld(true);
         }
+        return gltf;
+      }).catch(e => {
+        throw new Error(e);
       }));
       return Promise.all(promises).then(values => ({
         gltf: values[1],
         batchTable: values[0]
-      }));
+      })).catch(e => {
+        throw new Error(e);
+      });
     } else {
       throw new Error('Invalid b3dm file.');
     }

package/lib/Parser/GLTFParser.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.enableDracoLoader = enableDracoLoader;
+exports.enableKtx2Loader = enableKtx2Loader;
+exports.legacyGLTFLoader = exports.glTFLoader = void 0;
+var THREE = _interopRequireWildcard(require("three"));
+var _GLTFLoader = require("../ThreeExtended/loaders/GLTFLoader");
+var _DRACOLoader = require("../ThreeExtended/loaders/DRACOLoader");
+var _KTX2Loader = require("../ThreeExtended/loaders/KTX2Loader");
+var _LegacyGLTFLoader = _interopRequireDefault(require("./deprecated/LegacyGLTFLoader"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const matrixChangeUpVectorYtoZ = new THREE.Matrix4().makeRotationX(Math.PI / 2);
+const glTFLoader = new _GLTFLoader.GLTFLoader();
+exports.glTFLoader = glTFLoader;
+const legacyGLTFLoader = new _LegacyGLTFLoader.default();
+
+/**
+ * @module GLTFParser
+ * @description Parses [glTF](https://www.khronos.org/gltf/) 1.0 and 2.0 files.
+ *
+ * Under the hood, glTF 2.0 files are parsed with THREE.GltfLoader() and GLTF 1.0 are parsed with the previous THREE
+ * GltfLoader (for 1.0 glTF) that has been kept and maintained in iTowns.
+ */
+
+/**
+ * Enable loading gltf files with [Draco](https://google.github.io/draco/) geometry extension.
+ *
+ * @param {String} path path to draco library folder containing the JS and WASM decoder libraries. They can be found in
+ * [itowns examples](https://github.com/iTowns/itowns/tree/master/examples/libs/draco).
+ * @param {Object} [config] optional configuration for Draco decoder (see threejs'
+ * [setDecoderConfig](https://threejs.org/docs/index.html?q=draco#examples/en/loaders/DRACOLoader.setDecoderConfig) that
+ * is called under the hood with this configuration for details.
+ */
+exports.legacyGLTFLoader = legacyGLTFLoader;
+function enableDracoLoader(path, config) {
+  if (!path) {
+    throw new Error('Path to draco folder is mandatory');
+  }
+  const dracoLoader = new _DRACOLoader.DRACOLoader();
+  dracoLoader.setDecoderPath(path);
+  if (config) {
+    dracoLoader.setDecoderConfig(config);
+  }
+  glTFLoader.setDRACOLoader(dracoLoader);
+}
+
+/**
+ * Enable loading gltf files with [KTX2](https://www.khronos.org/ktx/) texture extension.
+ *
+ * @param {String} path path to ktx2 library folder containing the JS and WASM decoder libraries. They can be found in
+ * [itowns examples](https://github.com/iTowns/itowns/tree/master/examples/libs/basis).
+ * @param {THREE.WebGLRenderer} renderer the threejs renderer
+ */
+function enableKtx2Loader(path, renderer) {
+  if (!path || !renderer) {
+    throw new Error('Path to ktx2 folder and renderer are mandatory');
+  }
+  const ktx2Loader = new _KTX2Loader.KTX2Loader();
+  ktx2Loader.setTranscoderPath(path);
+  ktx2Loader.detectSupport(renderer);
+  glTFLoader.setKTX2Loader(ktx2Loader);
+}
+var _default = {
+  /** Parses a gltf buffer to an object with threejs structures and applies a y-up to z-up conversion to align with
+   * itowns convention. Essentially calls THREE.GltfLoader.parse() for glTF 2.0 files and the legacy threejs parser
+   * for gtTF 1.0 files.
+   * @param {ArrayBuffer} buffer - the glTF asset to parse, as an ArrayBuffer, JSON string or object.
+   * @param {String} path - the base path from which to find subsequent glTF resources such as textures and .bin data files.
+   * @return {Promise} - a promise that resolves with an object containing an Object that contains loaded parts:
+   * .scene, .scenes, .cameras, .animations, and .asset.
+   */
+  parse(buffer, path) {
+    return new Promise((resolve, reject) => {
+      if (!buffer || !path) {
+        reject(new Error('[GLTFParser]: Buffer and path are mandatory to parse a glTF.'));
+        return;
+      }
+
+      // Apply y-up (gltf convention) to z-up (itowns convention) conversion
+      const onload = gltf => {
+        gltf.scene.applyMatrix4(matrixChangeUpVectorYtoZ);
+        resolve(gltf);
+      };
+      const onError = e => {
+        reject(new Error(`[GLTFParser]: Failed to parse gltf with error: ${e}`));
+      };
+      const headerView = new DataView(buffer, 0, 20);
+      const version = headerView.getUint32(4, true);
+      if (version === 1) {
+        legacyGLTFLoader.parse(buffer, path, onload, onError);
+      } else {
+        glTFLoader.parse(buffer, path, onload, onError);
+      }
+    });
+  }
+};
+exports.default = _default;

package/lib/Provider/3dTilesProvider.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var THREE = _interopRequireWildcard(require("three"));
 var _B3dmParser = _interopRequireDefault(require("../Parser/B3dmParser"));
 var _PntsParser = _interopRequireDefault(require("../Parser/PntsParser"));
+var _GLTFParser = _interopRequireDefault(require("../Parser/GLTFParser"));
 var _Fetcher = _interopRequireDefault(require("./Fetcher"));
 var _ReferencingLayerProperties = _interopRequireDefault(require("../Layer/ReferencingLayerProperties"));
 var _PointsMaterial = _interopRequireDefault(require("../Renderer/PointsMaterial"));
@@ -22,7 +23,6 @@ function b3dmToMesh(data, layer, url) {
     urlBase,
     overrideMaterials: layer.overrideMaterials,
     doNotPatchMaterial: layer.doNotPatchMaterial,
-    opacity: layer.opacity,
     registeredExtensions: layer.registeredExtensions,
     layer
   };
@@ -36,6 +36,12 @@ function b3dmToMesh(data, layer, url) {
     };
   });
 }
+function gltfToMesh(data, layer, url) {
+  const urlBase = THREE.LoaderUtils.extractUrlBase(url);
+  return _GLTFParser.default.parse(data, urlBase).then(result => ({
+    object3d: result.scene
+  }));
+}
 function pntsParse(data, layer) {
   return _PntsParser.default.parse(data, layer.registeredExtensions).then(result => {
     const material = layer.material ? layer.material.clone() : new _PointsMaterial.default({
@@ -96,10 +102,14 @@ function executeCommand(command) {
   };
   if (path) {
     // Check if we have relative or absolute url (with tileset's lopocs for example)
-    const url = path.startsWith('http') ? path : metadata.baseURL + path;
+    let url = path.startsWith('http') ? path : metadata.baseURL + path;
+    if (layer.source.isC3DTilesGoogleSource) {
+      url = layer.source.getTileUrl(url);
+    }
     const supportedFormats = {
       b3dm: b3dmToMesh,
-      pnts: pntsParse
+      pnts: pntsParse,
+      gltf: gltfToMesh
     };
     return _Fetcher.default.arrayBuffer(url, layer.source.networkOptions).then(result => {
       if (result !== undefined) {
@@ -107,12 +117,16 @@ function executeCommand(command) {
         const magic = utf8Decoder.decode(new Uint8Array(result, 0, 4));
         if (magic[0] === '{') {
           result = JSON.parse(utf8Decoder.decode(new Uint8Array(result)));
-          const newPrefix = url.slice(0, url.lastIndexOf('/') + 1);
+          // Another specifics of 3D tiles from Google: tilesets in tilesets are required from the root base
+          // url and not from their parent base url
+          const newPrefix = layer.source.isC3DTilesGoogleSource ? layer.source.baseUrl : url.slice(0, url.lastIndexOf('/') + 1);
           layer.tileset.extendTileset(result, metadata.tileId, newPrefix, layer.registeredExtensions);
         } else if (magic == 'b3dm') {
           func = supportedFormats.b3dm;
         } else if (magic == 'pnts') {
           func = supportedFormats.pnts;
+        } else if (magic == 'glTF') {
+          func = supportedFormats.gltf;
         } else {
           return Promise.reject(`Unsupported magic code ${magic}`);
         }