@panoramax/web-viewer 4.3.1-develop-a796378e → 4.3.1-develop-e3b03c0c

package/build/photoviewer.js

@@ -9,7 +9,7 @@
  *   LICENSE file in the root directory of this source tree.
  *
  */
-!function(t,a){"object"===typeof exports&&"object"===typeof module?module.exports=a():"function"===typeof define&&define.amd?define("Panoramax",[],a):"object"===typeof exports?exports.Panoramax=a():t.Panoramax=a()}(this,(()=>(()=>{var t={9039:(t,a,A)=>{"use strict";A.d(a,{A:()=>Basic});var h=A(4542),p=A(5254),g=A(4964),m=A(7208),v=A(5995),_=A(7343),E=A(2614),x=A.n(E),w=A(8330);A(1865),A(3638);class Basic extends h.WF{constructor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];super(),this.users=["geovisio"],this["map-style"]=this.getAttribute("map-style")||(0,m.MapTiles)(),this.lang=this.getAttribute("lang")||null,this.endpoint=this.getAttribute("endpoint")||null,this.picture=this.getAttribute("picture")||null,this.sequence=this.getAttribute("sequence")||null,console.info(`\ud83d\udcf7 Panoramax ${this.getClassName()} - Version ${w.rE} (a796378)\n\n\ud83c\udd98 Issues can be reported at ${w.Jk.O}`),t||(this._isInternetFast=null,(0,_.isInternetFast)().then((t=>this._isInternetFast=t)))}connectedCallback(){super.connectedCallback(),this._t=(0,g.getTranslations)(this.lang),this.loader=(0,v.createWebComp)("pnx-loader",{_parent:this,"no-label":(0,_.isInIframe)()}),this._loadsAPI&&this.endpoint&&this._loadsAPI===this.endpoint||this.api&&this.api._endpoint===this.endpoint||!this.endpoint||((this._loadsAPI||this.api)&&(delete this.api,delete this._loadsAPI),this._setupAPI()),Object.entries({map:"map-options",psv:"psv-options",fetchOptions:"fetch-options",mapstyle:"map-style"}).forEach((t=>{let[a,A]=t;this.getAttribute(a)&&console.error(`Component attribute "${a}" has been renamed into "${A}". Old attribute "${a}" is ignored.`)})),(0,_.isInIframe)()&&this.classList.add("pnx-iframed")}_setupAPI(){if(this.loader=this.loader||(0,v.createWebComp)("pnx-loader",{_parent:this}),!this.endpoint)return void console.warn("No endpoint is defined");this._loadsAPI=this.endpoint;let t=this.endpoint;try{this["map-style"]=JSON.parse(this["map-style"])}catch(A){}try{this.api=new p.A(this.endpoint,{users:this.users,fetch:this["fetch-options"],style:this["map-style"]}),this.api.onceReady().then((()=>{if(t!=this._loadsAPI||!this.api)return;let a=this.api.getUnavailableFeatures(),A=this.api.getAvailableFeatures();A=0===a.length?"\u2705 All features available":"\u2705 Available features: "+A.join(", "),a=0===a.length?"":"\ud83d\udeab Unavailable features: "+a.join(", "),console.info(`\ud83c\udf10 Connected to API "${this.api._metadata.name}" (${this.api._endpoint})\n\u2139\ufe0f API runs STAC ${this.api._metadata.stac_version} ${this.api._metadata.geovisio_version?"& GeoVisio "+this.api._metadata.geovisio_version:""}\n   ${A}\n   ${a}\n`.trim())})).catch((t=>this.loader.dismiss(t,this._t.pnx.error_api))).finally((()=>delete this._loadsAPI))}catch(A){var a;delete this._loadsAPI,null!==(a=this.loader)&&void 0!==a&&a.dismiss?this.loader.dismiss(A,this._t.pnx.error_api):console.error(A)}}onceReady(){throw new Error("You must override this method on sub-class")}onceAPIReady(){return this.api?this.api.onceReady():new Promise((t=>setTimeout(t,100))).then(this.onceAPIReady.bind(this))}createRenderRoot(){return this}attributeChangedCallback(t,a,A){if(super.attributeChangedCallback(t,a,A),"endpoint"===t&&(this._loadsAPI&&A&&this._loadsAPI===A||this.api&&this.api._endpoint===A||!A||((this._loadsAPI||this.api)&&(delete this.api,delete this._loadsAPI),this._setupAPI())),["picture","sequence"].includes(t)){let h,p,g,m;"picture"===t?(h=this.sequence,g=this.sequence,p=A,m=a):(h=A,g=a,p=this.picture,m=this.picture),this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{seqId:h,picId:p,prevSeqId:g,prevPicId:m}}))}}getClassName(){return"Basic"}select(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;arguments.length>2&&void 0!==arguments[2]&&arguments[2]&&(this.picture=null,this.sequence=null),this.picture=a,this.sequence=t}isWidthSmall(){return(null===this||void 0===this?void 0:this.offsetWidth)<576}isHeightSmall(){return(null===this||void 0===this?void 0:this.offsetHeight)<400}render(){return h.qy`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`}getSubComponentsNames(){return["loader","api"]}addEventListener(t,a,A){let h=t.split(":").shift();if(h&&this.getSubComponentsNames().includes(h)){var p;const g=t.substring(h.length+1);null!==(p=this[h])&&void 0!==p&&p.addEventListener?this[h].addEventListener(g,a,A):setTimeout((()=>this.addEventListener(t,a,A)),50)}else super.addEventListener(t,a,A)}static GetJSONConverter(){return{fromAttribute:t=>null===t||""===t?null:"object"===typeof t||Array.isArray(t)?t:x().parse(t),toAttribute:t=>null===t||""===t?"":"string"===typeof t?t:x().stringify(t)}}}Basic.properties={picture:{type:String,reflect:!0},sequence:{type:String,reflect:!0},"fetch-options":{converter:Basic.GetJSONConverter()},users:{type:Array,reflect:!0},"map-style":{type:String},lang:{type:String},endpoint:{type:String}}},3407:(t,a,A)=>{"use strict";A.d(a,{$p:()=>w,Ay:()=>PhotoViewer});A(970);var h=A(1545),p=A(4451),g=A(9039),m=A(9048),v=A(5995),_=A(7343),E=A(2118),x=A(4207);const w=20,C=Math.PI/6,T=["pnx-mini","pnx-widget-player","pnx-widget-zoom"];class PhotoViewer extends g.A{constructor(){super(),this["psv-options"]={},this["url-parameters"]=this.getAttribute("url-parameters")||"true",this["keyboard-shortcuts"]=this.getAttribute("keyboard-shortcuts")||"true",this["skip-tags-menu-opening"]="true"!==(this.getAttribute("skip-tags-menu-opening")||"false"),this["share-base-url"]=this.getAttribute("share-base-url")||null,this.widgets=this.getAttribute("widgets")||"true",this.grid=(0,v.createWebComp)("pnx-cornered-grid"),this.psvContainer=document.createElement("div"),this.psvContainer.setAttribute("slot","bg"),this.grid.appendChild(this.psvContainer),this.popup=(0,v.createWebComp)("pnx-popup",{_parent:this,onclose:this._onPopupClose.bind(this)}),this.tabindex=0,this._sequencesMetadata={}}_createInitParamsHandler(){var t,a;this._initParams=new E.Ay(E.Ay.GetComponentProperties(PhotoViewer,this),Object.assign({},null===(t=this.urlHandler)||void 0===t?void 0:t.currentURLParams(),null===(a=this.urlHandler)||void 0===a?void 0:a.currentURLParams(!0)),{disableAnnotations:localStorage.getItem(_.DISABLE_ANNOTATIONS_PARAM)})}_initWidgets(){"false"!==this._initParams.getParentPostInit().widgets&&((0,_.isInIframe)()||(this.grid.appendChild((0,v.createWebComp)("pnx-widget-player",{slot:"top",_parent:this,class:"pnx-only-psv pnx-print-hidden",size:this.isHeightSmall()?"md":"xl"})),this.grid.appendChild((0,v.createWebComp)("pnx-annotations-switch",{slot:"top",_parent:this,class:"pnx-only-psv pnx-print-hidden",size:this.isHeightSmall()?"md":"xl"}))),(0,_.isInIframe)()?(this.legend=(0,v.createWebComp)("pnx-widget-legend",{slot:"bottom-right",light:!0,_parent:this,focus:this._initParams.getParentPostInit().focus,picture:this._initParams.getParentPostInit().picture}),this.grid.appendChild(this.legend)):this.isWidthSmall()?(this.legend=(0,v.createWebComp)("pnx-picture-legend",{_parent:this}),this.bottomDrawer=(0,v.createWebComp)("pnx-bottom-drawer",{slot:"bottom",_parent:this,class:this._initParams.getParentPostInit().willLoadPicture?void 0:"pnx-hidden"}),this.bottomDrawer.appendChild(this.legend),this.grid.appendChild(this.bottomDrawer),this.addEventListener("select",(t=>{(0,_.isNullId)(t.detail.picId)?this.bottomDrawer.classList.add("pnx-hidden"):this.bottomDrawer.classList.remove("pnx-hidden")}))):(this.legend=(0,v.createWebComp)("pnx-widget-legend",{slot:this.isWidthSmall()?void 0:"top-left",_parent:this,focus:this._initParams.getParentPostInit().focus,picture:this._initParams.getParentPostInit().picture}),this.grid.appendChild((0,v.createWebComp)("pnx-widget-zoom",{slot:"bottom-right",class:"pnx-print-hidden",_parent:this})),this.grid.appendChild(this.legend)))}connectedCallback(){super.connectedCallback(),this.presetsManager=new x.A(this.lang),"false"!==this["url-parameters"]&&(this.urlHandler=new p.A(this),this.onceReady().then((()=>{this.urlHandler.listenToChanges(),this.urlHandler._onParentChange()}))),this.onceAPIReady().then(this._postAPIInit.bind(this)),this._moveChildToGrid(),window.addEventListener("DOMContentLoaded",(()=>{this._moveChildToGrid()}),{once:!0})}disconnectedCallback(){var t,a;super.disconnectedCallback(),null===(t=this.urlHandler)||void 0===t||t.destroy(),null===(a=this.psv)||void 0===a||a.destroy(),document.body.removeEventListener("click",this._toggleKeyboardBasedOnFocus),window.removeEventListener("keypress",this._toggleKeyboardBasedOnFocus)}getClassName(){return"PhotoViewer"}onceReady(){return this.oncePSVReady().then((()=>this._initParams.getParentPostInit().willLoadPicture&&!this.psv.getPictureMetadata()?this.onceFirstPicLoaded():Promise.resolve()))}render(){return[this.loader,this.grid,this.popup]}getSubComponentsNames(){return super.getSubComponentsNames().concat(["psv","grid","popup","urlHandler"])}oncePSVReady(){let t;return new Promise((a=>{t=setInterval((()=>{this.psv&&"object"===typeof this.psv&&(this.psv.container?(clearInterval(t),a()):this.psv.addEventListener&&this.psv.addEventListener("ready",(()=>{clearInterval(t),a()}),{once:!0}))}),250)}))}onceFirstPicLoaded(){return this.oncePSVReady().then((()=>this.psv.getPictureMetadata()?Promise.resolve():new Promise((t=>{this.psv.addEventListener("picture-loaded",t,{once:!0})}))))}async _postAPIInit(){this.loader.setAttribute("value",30),this._createInitParamsHandler();const t=this._initParams.getParentPostInit();this._initPSV(),this._initWidgets(),(0,E.ai)(this,t),t.keyboardShortcuts&&this._handleKeyboardManagement(),t.willLoadPicture?this.psv.getPictureMetadata()?this.loader.dismiss():this.psv.addEventListener("picture-loaded",(()=>this.loader.dismiss()),{once:!0}):this.loader.dismiss()}_initPSV(){try{this.psv=new m.Ay(this,this.psvContainer,{shouldGoFast:this._psvShouldGoFast.bind(this),keyboard:"always",keyboardActions:{...h.zY.keyboardActions,8:"ROTATE_UP",2:"ROTATE_DOWN",4:"ROTATE_LEFT",6:"ROTATE_RIGHT",PageUp:()=>this.psv.goToNextPicture(),9:()=>this.psv.goToNextPicture(),PageDown:()=>this.psv.goToPrevPicture(),3:()=>this.psv.goToPrevPicture(),5:()=>this.moveCenter(),"*":()=>this.moveCenter(),Home:()=>{var t;return null===(t=this._toggleFocus)||void 0===t?void 0:t.call(this)},7:()=>{var t;return null===(t=this._toggleFocus)||void 0===t?void 0:t.call(this)},End:()=>this.mini.toggleAttribute("collapsed"),1:()=>this.mini.toggleAttribute("collapsed")," ":()=>this.psv.toggleSequencePlaying(),0:()=>this.psv.toggleSequencePlaying()},...this._initParams.getPSVInit()}),this.oncePSVReady().then((()=>{this.loader.setAttribute("value",50),(0,E.Vy)(this.psv,this._initParams.getPSVPostInit())})),this.psv.addEventListener("sequence-playing",(()=>this.classList.add("pnx-playing"))),this.psv.addEventListener("sequence-stopped",(()=>this.classList.remove("pnx-playing"))),this.psv.addEventListener("dblclick",(()=>clearTimeout(this._gridFocus))),this.psv.addEventListener("click",(t=>{clearTimeout(this._gridFocus),"CANVAS"===t.data.target.tagName&&(!this.isMapWide||this.isMapWide&&!this.isMapWide())&&(this._gridFocus=setTimeout((()=>{this.grid.toggleAway()?this.classList.add("pnx-grid-toggled"):this.classList.remove("pnx-grid-toggled")}),250))})),this.psvContainer.addEventListener("mousemove",(()=>{this.grid._hidden&&(clearTimeout(this._gridFocus),this.grid.toggleAway(!0),this.classList.remove("pnx-grid-toggled"))}))}catch(t){let a=h.IJ.isWebGLSupported?this._t.pnx.error_psv:this._t.pnx.error_webgl;this.loader.dismiss(t,a)}}_enableKeyboard(){this.psv.startKeyboardControl()}_disableKeyboard(){this.psv.stopKeyboardControl()}_toggleKeyboardBasedOnFocus(t){const a=(null===t||void 0===t?void 0:t.target)||document.activeElement;if(this.contains(a)){for(let t of this.grid.childNodes)if("bg"!==t.getAttribute("slot")&&!T.includes(t.tagName.toLowerCase())&&t.contains(a))return void this._disableKeyboard();this._enableKeyboard()}else this._disableKeyboard()}_handleKeyboardManagement(){window.addEventListener("click",(t=>this._toggleKeyboardBasedOnFocus(t))),window.addEventListener("keypress",this._toggleKeyboardBasedOnFocus.bind(this)),this.popup.addEventListener("open",this._disableKeyboard.bind(this)),this.popup.addEventListener("close",this._enableKeyboard.bind(this)),this.psv.addEventListener("click",this._enableKeyboard.bind(this));for(let t of this.grid.childNodes)"bg"===t.getAttribute("slot")||T.includes(t.tagName.toLowerCase())||(t.addEventListener("focusin",this._disableKeyboard.bind(this)),t.addEventListener("focusout",(()=>{null===this.popup.getAttribute("visible")&&this._enableKeyboard()})))}_psvShouldGoFast(){return this.psv._sequencePlaying&&this.psv.getTransitionDuration()<1e3}_moveChildToGrid(){Array.from(this.querySelectorAll("[slot]")).forEach((t=>{var a;null!==(a=t.tagName)&&void 0!==a&&a.toLowerCase().startsWith("pnx-")&&(t._parent=this,t._t=this._t),"editors"===t.getAttribute("slot")?this.onceReady().then((()=>{var a;return null===(a=this.legend)||void 0===a?void 0:a.appendChild(t)})):this.grid.appendChild(t)}))}setPopup(t){let a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;t?this.popup.setAttribute("visible",""):this.popup.removeAttribute("visible"),this.popup.innerHTML="","string"===typeof a?this.popup.innerHTML=a:Array.isArray(a)&&a.forEach((t=>this.popup.appendChild(t)))}_onPopupClose(){this.dispatchEvent(new CustomEvent("focus-changed",{detail:{focus:this.map&&this.isMapWide()?"map":"pic"}}))}_showQualityScoreDoc(){this.setPopup(!0,[(0,v.createWebComp)("pnx-quality-score-doc",{_t:this._t})])}_showReportForm(){if(!this.psv.getPictureMetadata())throw new Error("No picture currently selected");this.setPopup(!0,[(0,v.createWebComp)("pnx-report-form",{_parent:this})])}_showShareOptions(){this.setPopup(!0,[(0,v.createWebComp)("pnx-share-menu",{_parent:this,"base-url":this["share-base-url"]})])}_showSemanticsDoc(){this.setPopup(!0,[(0,v.createWebComp)("pnx-semantics-doc",{_t:this._t})])}_showSemanticsDownload(){this.setPopup(!0,[(0,v.createWebComp)("pnx-semantics-download",{_t:this._t})])}moveCenter(){this.psv.getPictureMetadata()&&this._psvAnimate({speed:m.LM,yaw:0,pitch:0,zoom:m.cS})}moveLeft(){this._moveToDirection("left")}moveRight(){this._moveToDirection("right")}moveUp(){this._moveToDirection("up")}moveDown(){this._moveToDirection("down")}_moveToDirection(t){let a=this.psv.getPosition();switch(t){case"up":a.pitch+=C;break;case"left":a.yaw-=C;break;case"down":a.pitch-=C;break;case"right":a.yaw+=C}this._psvAnimate({speed:m.LM,...a})}_psvAnimate(t){this._lastPsvAnim&&this._lastPsvAnim.cancel(),this._lastPsvAnim=this.psv.animate(t)}addEventListener(t,a,A){super.addEventListener(t,a,A)}}PhotoViewer.properties={"psv-options":{converter:g.A.GetJSONConverter()},widgets:{type:String},"url-parameters":{type:String},"keyboard-shortcuts":{type:String},tabindex:{type:Number},"skip-tags-menu-opening":{type:String},"share-base-url":{type:String},...g.A.properties},customElements.define("pnx-photo-viewer",PhotoViewer)},2504:(t,a,A)=>{"use strict";A.r(a),A.d(a,{layout:()=>h,menus:()=>p,ui:()=>g});var h=A(456),p=A(9015),g=A(6957)},6784:(t,a,A)=>{"use strict";A.d(a,{A:()=>BottomDrawer});var h=A(4542),p=A(1198),g=A(5995);const m={opened:0,"half-opened":.7,closed:1};class BottomDrawer extends h.WF{constructor(){super(),this._isDragging=!1,this.openness="half-opened"}firstUpdated(){super.firstUpdated(),this._boundTouchMove=this._onTouchMove.bind(this),this._boundTouchEnd=this._onTouchEnd.bind(this),this._drawerHeight=window.innerHeight-30;const t=this._getDrawer();t&&(t.style.height=`${this._drawerHeight}px`,t.style.maxHeight=`${this._drawerHeight}px`,(0,g.onceParentAvailable)(this).then((()=>this._parent.onceReady())).then((()=>{var t,a;null===(t=this._parent.map)||void 0===t||t.addEventListener("click",(()=>this.openness="closed")),null===(a=this._parent.psv)||void 0===a||a.addEventListener("click",(()=>this.openness="closed"))})))}attributeChangedCallback(t,a,A){if(super.attributeChangedCallback(t,a,A),"openness"===t){if("opened"!==A){const t=this.shadowRoot.querySelector(".content");t&&(t.scrollTop=0)}const t=this._getDrawer();t&&(t.style.transform=null)}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupTouchListeners()}_getDrawer(){var t;return null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".drawer")}_onHandleClick(){"opened"===this.openness?this.openness="closed":"half-opened"===this.openness?this.openness="opened":"closed"===this.openness&&(this.openness="half-opened")}_onTouchStart(t){this._isDragging=!0,this._startFingerY=t.touches[0].clientY,this._deltaFingerY=0,this._drawerY=this._drawerHeight*m[this.openness],window.addEventListener("touchmove",this._boundTouchMove,{passive:!0}),window.addEventListener("touchend",this._boundTouchEnd),window.addEventListener("touchcancel",this._boundTouchEnd)}_onTouchMove(t){if(!this._isDragging)return;const a=this.shadowRoot.querySelector(".content");a.scrollHeight>a.offsetHeight&&a.scrollTop>0?this._updateDrawerTransform(0):(this._deltaFingerY=t.touches[0].clientY-this._startFingerY,this._updateDrawerTransform(this._drawerY+this._deltaFingerY))}_onTouchEnd(t){(this._isDragging&&!(Math.abs(this._deltaFingerY)<30)||t.target.closest(".handle"))&&(t.preventDefault(),this._isDragging=!1,0===this._deltaFingerY&&"closed"===this.openness?this.openness="half-opened":this._updateDrawerTransform(this._drawerY+this._deltaFingerY,!0),this._cleanupTouchListeners(),this._startFingerY=null,this._deltaFingerY=null)}_cleanupTouchListeners(){window.removeEventListener("touchmove",this._boundTouchMove),window.removeEventListener("touchend",this._boundTouchEnd),window.removeEventListener("touchcancel",this._boundTouchCancel)}_updateDrawerTransform(t){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const A=this._getDrawer();A&&(t=Math.max(0,Math.min(t,this._drawerHeight-30)),a&&(this._deltaFingerY<0?"closed"===this.openness?Math.abs(this._deltaFingerY)>this._drawerHeight*(1-m["half-opened"])?this.openness="opened":this.openness="half-opened":this.openness="opened":this.openness="closed",this._drawerY=null,t=Math.max(0,Math.min(m[this.openness]*this._drawerHeight,this._drawerHeight-30))),A.style.transform=`translateY(${t}px)`)}render(){const t={drawer:!0,[this.openness]:!0,dragging:this._isDragging};return h.qy`
+!function(t,a){"object"===typeof exports&&"object"===typeof module?module.exports=a():"function"===typeof define&&define.amd?define("Panoramax",[],a):"object"===typeof exports?exports.Panoramax=a():t.Panoramax=a()}(this,(()=>(()=>{var t={9039:(t,a,A)=>{"use strict";A.d(a,{A:()=>Basic});var h=A(4542),p=A(5254),g=A(4964),m=A(7208),v=A(5995),_=A(7343),E=A(2614),x=A.n(E),w=A(8330);A(1865),A(3638);class Basic extends h.WF{constructor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];super(),this.users=["geovisio"],this["map-style"]=this.getAttribute("map-style")||(0,m.MapTiles)(),this.lang=this.getAttribute("lang")||null,this.endpoint=this.getAttribute("endpoint")||null,this.picture=this.getAttribute("picture")||null,this.sequence=this.getAttribute("sequence")||null,console.info(`\ud83d\udcf7 Panoramax ${this.getClassName()} - Version ${w.rE} (e3b03c0)\n\n\ud83c\udd98 Issues can be reported at ${w.Jk.O}`),t||(this._isInternetFast=null,(0,_.isInternetFast)().then((t=>this._isInternetFast=t)))}connectedCallback(){super.connectedCallback(),this._t=(0,g.getTranslations)(this.lang),this.loader=(0,v.createWebComp)("pnx-loader",{_parent:this,"no-label":(0,_.isInIframe)()}),this._loadsAPI&&this.endpoint&&this._loadsAPI===this.endpoint||this.api&&this.api._endpoint===this.endpoint||!this.endpoint||((this._loadsAPI||this.api)&&(delete this.api,delete this._loadsAPI),this._setupAPI()),Object.entries({map:"map-options",psv:"psv-options",fetchOptions:"fetch-options",mapstyle:"map-style"}).forEach((t=>{let[a,A]=t;this.getAttribute(a)&&console.error(`Component attribute "${a}" has been renamed into "${A}". Old attribute "${a}" is ignored.`)})),(0,_.isInIframe)()&&this.classList.add("pnx-iframed")}_setupAPI(){if(this.loader=this.loader||(0,v.createWebComp)("pnx-loader",{_parent:this}),!this.endpoint)return void console.warn("No endpoint is defined");this._loadsAPI=this.endpoint;let t=this.endpoint;try{this["map-style"]=JSON.parse(this["map-style"])}catch(A){}try{this.api=new p.A(this.endpoint,{users:this.users,fetch:this["fetch-options"],style:this["map-style"]}),this.api.onceReady().then((()=>{if(t!=this._loadsAPI||!this.api)return;let a=this.api.getUnavailableFeatures(),A=this.api.getAvailableFeatures();A=0===a.length?"\u2705 All features available":"\u2705 Available features: "+A.join(", "),a=0===a.length?"":"\ud83d\udeab Unavailable features: "+a.join(", "),console.info(`\ud83c\udf10 Connected to API "${this.api._metadata.name}" (${this.api._endpoint})\n\u2139\ufe0f API runs STAC ${this.api._metadata.stac_version} ${this.api._metadata.geovisio_version?"& GeoVisio "+this.api._metadata.geovisio_version:""}\n   ${A}\n   ${a}\n`.trim())})).catch((t=>this.loader.dismiss(t,this._t.pnx.error_api))).finally((()=>delete this._loadsAPI))}catch(A){var a;delete this._loadsAPI,null!==(a=this.loader)&&void 0!==a&&a.dismiss?this.loader.dismiss(A,this._t.pnx.error_api):console.error(A)}}onceReady(){throw new Error("You must override this method on sub-class")}onceAPIReady(){return this.api?this.api.onceReady():new Promise((t=>setTimeout(t,100))).then(this.onceAPIReady.bind(this))}createRenderRoot(){return this}attributeChangedCallback(t,a,A){if(super.attributeChangedCallback(t,a,A),"endpoint"===t&&(this._loadsAPI&&A&&this._loadsAPI===A||this.api&&this.api._endpoint===A||!A||((this._loadsAPI||this.api)&&(delete this.api,delete this._loadsAPI),this._setupAPI())),["picture","sequence"].includes(t)){let h,p,g,m;"picture"===t?(h=this.sequence,g=this.sequence,p=A,m=a):(h=A,g=a,p=this.picture,m=this.picture),this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{seqId:h,picId:p,prevSeqId:g,prevPicId:m}}))}}getClassName(){return"Basic"}select(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;arguments.length>2&&void 0!==arguments[2]&&arguments[2]&&(this.picture=null,this.sequence=null),this.picture=a,this.sequence=t}isWidthSmall(){return(null===this||void 0===this?void 0:this.offsetWidth)<576}isHeightSmall(){return(null===this||void 0===this?void 0:this.offsetHeight)<400}render(){return h.qy`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`}getSubComponentsNames(){return["loader","api"]}addEventListener(t,a,A){let h=t.split(":").shift();if(h&&this.getSubComponentsNames().includes(h)){var p;const g=t.substring(h.length+1);null!==(p=this[h])&&void 0!==p&&p.addEventListener?this[h].addEventListener(g,a,A):setTimeout((()=>this.addEventListener(t,a,A)),50)}else super.addEventListener(t,a,A)}static GetJSONConverter(){return{fromAttribute:t=>null===t||""===t?null:"object"===typeof t||Array.isArray(t)?t:x().parse(t),toAttribute:t=>null===t||""===t?"":"string"===typeof t?t:x().stringify(t)}}}Basic.properties={picture:{type:String,reflect:!0},sequence:{type:String,reflect:!0},"fetch-options":{converter:Basic.GetJSONConverter()},users:{type:Array,reflect:!0},"map-style":{type:String},lang:{type:String},endpoint:{type:String}}},3407:(t,a,A)=>{"use strict";A.d(a,{$p:()=>w,Ay:()=>PhotoViewer});A(970);var h=A(1545),p=A(4451),g=A(9039),m=A(9048),v=A(5995),_=A(7343),E=A(2118),x=A(4207);const w=20,C=Math.PI/6,T=["pnx-mini","pnx-widget-player","pnx-widget-zoom"];class PhotoViewer extends g.A{constructor(){super(),this["psv-options"]={},this["url-parameters"]=this.getAttribute("url-parameters")||"true",this["keyboard-shortcuts"]=this.getAttribute("keyboard-shortcuts")||"true",this["skip-tags-menu-opening"]="true"!==(this.getAttribute("skip-tags-menu-opening")||"false"),this["share-base-url"]=this.getAttribute("share-base-url")||null,this.widgets=this.getAttribute("widgets")||"true",this.grid=(0,v.createWebComp)("pnx-cornered-grid"),this.psvContainer=document.createElement("div"),this.psvContainer.setAttribute("slot","bg"),this.grid.appendChild(this.psvContainer),this.popup=(0,v.createWebComp)("pnx-popup",{_parent:this,onclose:this._onPopupClose.bind(this)}),this.tabindex=0,this._sequencesMetadata={}}_createInitParamsHandler(){var t,a;this._initParams=new E.Ay(E.Ay.GetComponentProperties(PhotoViewer,this),Object.assign({},null===(t=this.urlHandler)||void 0===t?void 0:t.currentURLParams(),null===(a=this.urlHandler)||void 0===a?void 0:a.currentURLParams(!0)),{disableAnnotations:localStorage.getItem(_.DISABLE_ANNOTATIONS_PARAM)})}_initWidgets(){"false"!==this._initParams.getParentPostInit().widgets&&((0,_.isInIframe)()||(this.grid.appendChild((0,v.createWebComp)("pnx-widget-player",{slot:"top",_parent:this,class:"pnx-only-psv pnx-print-hidden",size:this.isHeightSmall()?"md":"xl"})),this.grid.appendChild((0,v.createWebComp)("pnx-annotations-switch",{slot:"top",_parent:this,class:"pnx-only-psv pnx-print-hidden",size:this.isHeightSmall()?"md":"xl"}))),(0,_.isInIframe)()?(this.legend=(0,v.createWebComp)("pnx-widget-legend",{slot:"bottom-right",light:!0,_parent:this,focus:this._initParams.getParentPostInit().focus,picture:this._initParams.getParentPostInit().picture}),this.grid.appendChild(this.legend)):this.isWidthSmall()?(this.legend=(0,v.createWebComp)("pnx-picture-legend",{_parent:this}),this.bottomDrawer=(0,v.createWebComp)("pnx-bottom-drawer",{slot:"bottom",_parent:this,class:this._initParams.getParentPostInit().willLoadPicture?void 0:"pnx-hidden"}),this.bottomDrawer.appendChild(this.legend),this.grid.appendChild(this.bottomDrawer),this.addEventListener("select",(t=>{(0,_.isNullId)(t.detail.picId)?this.bottomDrawer.classList.add("pnx-hidden"):this.bottomDrawer.classList.remove("pnx-hidden")}))):(this.legend=(0,v.createWebComp)("pnx-widget-legend",{slot:this.isWidthSmall()?void 0:"top-left",_parent:this,focus:this._initParams.getParentPostInit().focus,picture:this._initParams.getParentPostInit().picture}),this.grid.appendChild((0,v.createWebComp)("pnx-widget-zoom",{slot:"bottom-right",class:"pnx-print-hidden",_parent:this})),this.grid.appendChild(this.legend)))}connectedCallback(){super.connectedCallback(),this.presetsManager=new x.A(this.lang),"false"!==this["url-parameters"]&&(this.urlHandler=new p.A(this),this.onceReady().then((()=>{this.urlHandler.listenToChanges(),this.urlHandler._onParentChange()}))),this.onceAPIReady().then(this._postAPIInit.bind(this)),this._moveChildToGrid(),window.addEventListener("DOMContentLoaded",(()=>{this._moveChildToGrid()}),{once:!0})}disconnectedCallback(){var t,a;super.disconnectedCallback(),null===(t=this.urlHandler)||void 0===t||t.destroy(),null===(a=this.psv)||void 0===a||a.destroy(),document.body.removeEventListener("click",this._toggleKeyboardBasedOnFocus),window.removeEventListener("keypress",this._toggleKeyboardBasedOnFocus)}getClassName(){return"PhotoViewer"}onceReady(){return this.oncePSVReady().then((()=>this._initParams.getParentPostInit().willLoadPicture&&!this.psv.getPictureMetadata()?this.onceFirstPicLoaded():Promise.resolve()))}render(){return[this.loader,this.grid,this.popup]}getSubComponentsNames(){return super.getSubComponentsNames().concat(["psv","grid","popup","urlHandler"])}oncePSVReady(){let t;return new Promise((a=>{t=setInterval((()=>{this.psv&&"object"===typeof this.psv&&(this.psv.container?(clearInterval(t),a()):this.psv.addEventListener&&this.psv.addEventListener("ready",(()=>{clearInterval(t),a()}),{once:!0}))}),250)}))}onceFirstPicLoaded(){return this.oncePSVReady().then((()=>this.psv.getPictureMetadata()?Promise.resolve():new Promise((t=>{this.psv.addEventListener("picture-loaded",t,{once:!0})}))))}async _postAPIInit(){this.loader.setAttribute("value",30),this._createInitParamsHandler();const t=this._initParams.getParentPostInit();this._initPSV(),this._initWidgets(),(0,E.ai)(this,t),t.keyboardShortcuts&&this._handleKeyboardManagement(),t.willLoadPicture?this.psv.getPictureMetadata()?this.loader.dismiss():this.psv.addEventListener("picture-loaded",(()=>this.loader.dismiss()),{once:!0}):this.loader.dismiss()}_initPSV(){try{this.psv=new m.Ay(this,this.psvContainer,{shouldGoFast:this._psvShouldGoFast.bind(this),keyboard:"always",keyboardActions:{...h.zY.keyboardActions,8:"ROTATE_UP",2:"ROTATE_DOWN",4:"ROTATE_LEFT",6:"ROTATE_RIGHT",PageUp:()=>this.psv.goToNextPicture(),9:()=>this.psv.goToNextPicture(),PageDown:()=>this.psv.goToPrevPicture(),3:()=>this.psv.goToPrevPicture(),5:()=>this.moveCenter(),"*":()=>this.moveCenter(),Home:()=>{var t;return null===(t=this._toggleFocus)||void 0===t?void 0:t.call(this)},7:()=>{var t;return null===(t=this._toggleFocus)||void 0===t?void 0:t.call(this)},End:()=>this.mini.toggleAttribute("collapsed"),1:()=>this.mini.toggleAttribute("collapsed")," ":()=>this.psv.toggleSequencePlaying(),0:()=>this.psv.toggleSequencePlaying()},...this._initParams.getPSVInit()}),this.oncePSVReady().then((()=>{this.loader.setAttribute("value",50),(0,E.Vy)(this.psv,this._initParams.getPSVPostInit())})),this.psv.addEventListener("sequence-playing",(()=>this.classList.add("pnx-playing"))),this.psv.addEventListener("sequence-stopped",(()=>this.classList.remove("pnx-playing"))),this.psv.addEventListener("dblclick",(()=>clearTimeout(this._gridFocus))),this.psv.addEventListener("click",(t=>{clearTimeout(this._gridFocus),"CANVAS"===t.data.target.tagName&&(!this.isMapWide||this.isMapWide&&!this.isMapWide())&&(this._gridFocus=setTimeout((()=>{this.grid.toggleAway()?this.classList.add("pnx-grid-toggled"):this.classList.remove("pnx-grid-toggled")}),250))})),this.psvContainer.addEventListener("mousemove",(()=>{this.grid._hidden&&(clearTimeout(this._gridFocus),this.grid.toggleAway(!0),this.classList.remove("pnx-grid-toggled"))}))}catch(t){let a=h.IJ.isWebGLSupported?this._t.pnx.error_psv:this._t.pnx.error_webgl;this.loader.dismiss(t,a)}}_enableKeyboard(){this.psv.startKeyboardControl()}_disableKeyboard(){this.psv.stopKeyboardControl()}_toggleKeyboardBasedOnFocus(t){const a=(null===t||void 0===t?void 0:t.target)||document.activeElement;if(this.contains(a)){for(let t of this.grid.childNodes)if("bg"!==t.getAttribute("slot")&&!T.includes(t.tagName.toLowerCase())&&t.contains(a))return void this._disableKeyboard();this._enableKeyboard()}else this._disableKeyboard()}_handleKeyboardManagement(){window.addEventListener("click",(t=>this._toggleKeyboardBasedOnFocus(t))),window.addEventListener("keypress",this._toggleKeyboardBasedOnFocus.bind(this)),this.popup.addEventListener("open",this._disableKeyboard.bind(this)),this.popup.addEventListener("close",this._enableKeyboard.bind(this)),this.psv.addEventListener("click",this._enableKeyboard.bind(this));for(let t of this.grid.childNodes)"bg"===t.getAttribute("slot")||T.includes(t.tagName.toLowerCase())||(t.addEventListener("focusin",this._disableKeyboard.bind(this)),t.addEventListener("focusout",(()=>{null===this.popup.getAttribute("visible")&&this._enableKeyboard()})))}_psvShouldGoFast(){return this.psv._sequencePlaying&&this.psv.getTransitionDuration()<1e3}_moveChildToGrid(){Array.from(this.querySelectorAll("[slot]")).forEach((t=>{var a;null!==(a=t.tagName)&&void 0!==a&&a.toLowerCase().startsWith("pnx-")&&(t._parent=this,t._t=this._t),"editors"===t.getAttribute("slot")?this.onceReady().then((()=>{var a;return null===(a=this.legend)||void 0===a?void 0:a.appendChild(t)})):this.grid.appendChild(t)}))}setPopup(t){let a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;t?this.popup.setAttribute("visible",""):this.popup.removeAttribute("visible"),this.popup.innerHTML="","string"===typeof a?this.popup.innerHTML=a:Array.isArray(a)&&a.forEach((t=>this.popup.appendChild(t)))}_onPopupClose(){this.dispatchEvent(new CustomEvent("focus-changed",{detail:{focus:this.map&&this.isMapWide()?"map":"pic"}}))}_showQualityScoreDoc(){this.setPopup(!0,[(0,v.createWebComp)("pnx-quality-score-doc",{_t:this._t})])}_showReportForm(){if(!this.psv.getPictureMetadata())throw new Error("No picture currently selected");this.setPopup(!0,[(0,v.createWebComp)("pnx-report-form",{_parent:this})])}_showShareOptions(){this.setPopup(!0,[(0,v.createWebComp)("pnx-share-menu",{_parent:this,"base-url":this["share-base-url"]})])}_showSemanticsDoc(){this.setPopup(!0,[(0,v.createWebComp)("pnx-semantics-doc",{_t:this._t})])}_showSemanticsDownload(){this.setPopup(!0,[(0,v.createWebComp)("pnx-semantics-download",{_t:this._t})])}moveCenter(){this.psv.getPictureMetadata()&&this._psvAnimate({speed:m.LM,yaw:0,pitch:0,zoom:m.cS})}moveLeft(){this._moveToDirection("left")}moveRight(){this._moveToDirection("right")}moveUp(){this._moveToDirection("up")}moveDown(){this._moveToDirection("down")}_moveToDirection(t){let a=this.psv.getPosition();switch(t){case"up":a.pitch+=C;break;case"left":a.yaw-=C;break;case"down":a.pitch-=C;break;case"right":a.yaw+=C}this._psvAnimate({speed:m.LM,...a})}_psvAnimate(t){this._lastPsvAnim&&this._lastPsvAnim.cancel(),this._lastPsvAnim=this.psv.animate(t)}addEventListener(t,a,A){super.addEventListener(t,a,A)}}PhotoViewer.properties={"psv-options":{converter:g.A.GetJSONConverter()},widgets:{type:String},"url-parameters":{type:String},"keyboard-shortcuts":{type:String},tabindex:{type:Number},"skip-tags-menu-opening":{type:String},"share-base-url":{type:String},...g.A.properties},customElements.define("pnx-photo-viewer",PhotoViewer)},2504:(t,a,A)=>{"use strict";A.r(a),A.d(a,{layout:()=>h,menus:()=>p,ui:()=>g});var h=A(456),p=A(9015),g=A(6957)},6784:(t,a,A)=>{"use strict";A.d(a,{A:()=>BottomDrawer});var h=A(4542),p=A(1198),g=A(5995);const m={opened:0,"half-opened":.7,closed:1};class BottomDrawer extends h.WF{constructor(){super(),this._isDragging=!1,this.openness="half-opened"}firstUpdated(){super.firstUpdated(),this._boundTouchMove=this._onTouchMove.bind(this),this._boundTouchEnd=this._onTouchEnd.bind(this),this._drawerHeight=window.innerHeight-30;const t=this._getDrawer();t&&(t.style.height=`${this._drawerHeight}px`,t.style.maxHeight=`${this._drawerHeight}px`,(0,g.onceParentAvailable)(this).then((()=>this._parent.onceReady())).then((()=>{var t,a;null===(t=this._parent.map)||void 0===t||t.addEventListener("click",(()=>this.openness="closed")),null===(a=this._parent.psv)||void 0===a||a.addEventListener("click",(()=>this.openness="closed"))})))}attributeChangedCallback(t,a,A){if(super.attributeChangedCallback(t,a,A),"openness"===t){if("opened"!==A){const t=this.shadowRoot.querySelector(".content");t&&(t.scrollTop=0)}const t=this._getDrawer();t&&(t.style.transform=null)}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupTouchListeners()}_getDrawer(){var t;return null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".drawer")}_onHandleClick(){"opened"===this.openness?this.openness="closed":"half-opened"===this.openness?this.openness="opened":"closed"===this.openness&&(this.openness="half-opened")}_onTouchStart(t){this._isDragging=!0,this._startFingerY=t.touches[0].clientY,this._deltaFingerY=0,this._drawerY=this._drawerHeight*m[this.openness],window.addEventListener("touchmove",this._boundTouchMove,{passive:!0}),window.addEventListener("touchend",this._boundTouchEnd),window.addEventListener("touchcancel",this._boundTouchEnd)}_onTouchMove(t){if(!this._isDragging)return;const a=this.shadowRoot.querySelector(".content");a.scrollHeight>a.offsetHeight&&a.scrollTop>0?this._updateDrawerTransform(0):(this._deltaFingerY=t.touches[0].clientY-this._startFingerY,this._updateDrawerTransform(this._drawerY+this._deltaFingerY))}_onTouchEnd(t){(this._isDragging&&!(Math.abs(this._deltaFingerY)<30)||t.target.closest(".handle"))&&(t.preventDefault(),this._isDragging=!1,0===this._deltaFingerY&&"closed"===this.openness?this.openness="half-opened":this._updateDrawerTransform(this._drawerY+this._deltaFingerY,!0),this._cleanupTouchListeners(),this._startFingerY=null,this._deltaFingerY=null)}_cleanupTouchListeners(){window.removeEventListener("touchmove",this._boundTouchMove),window.removeEventListener("touchend",this._boundTouchEnd),window.removeEventListener("touchcancel",this._boundTouchCancel)}_updateDrawerTransform(t){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const A=this._getDrawer();A&&(t=Math.max(0,Math.min(t,this._drawerHeight-30)),a&&(this._deltaFingerY<0?"closed"===this.openness?Math.abs(this._deltaFingerY)>this._drawerHeight*(1-m["half-opened"])?this.openness="opened":this.openness="half-opened":this.openness="opened":this.openness="closed",this._drawerY=null,t=Math.max(0,Math.min(m[this.openness]*this._drawerHeight,this._drawerHeight-30))),A.style.transform=`translateY(${t}px)`)}render(){const t={drawer:!0,[this.openness]:!0,dragging:this._isDragging};return h.qy`
 			<div
 				class=${(0,p.H)(t)}
 				@touchstart="${this._onTouchStart}"

package/docs/09_Develop.md

@@ -6,15 +6,15 @@ Here are some inputs about working with Panoramax web client code.
 
 !!! note
 
-	If something seems missing or incomplete, don't hesitate to contact us by [email](mailto:panoramax@panoramax.fr) or using [an issue](https://gitlab.com/panoramax/clients/web-viewer/-/issues). We really want Panoramax to be a collaborative project, so everyone is welcome (see our [code of conduct](https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/CODE_OF_CONDUCT.md)).
+    If something seems missing or incomplete, don't hesitate to contact us by [email](mailto:panoramax@panoramax.fr) or using [an issue](https://gitlab.com/panoramax/clients/web-viewer/-/issues). We really want Panoramax to be a collaborative project, so everyone is welcome (see our [code of conduct](https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/CODE_OF_CONDUCT.md)).
 
 ## Architecture
 
 The current code is split between various elements:
 
-- __Core components__: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [Photo Viewer](./reference/components/core/PhotoViewer.md) (picture only), [Coverage Map](./reference/components/core/CoverageMap.md) or [Editor](./reference/components/core/Editor.md). They share parts of code in [Basic](./reference/components/core/Basic.md) class. They specialized the behaviour of components depending on the needs.
-- __UI components, menus & widgets__: reusable web components, like [Map](./reference/components/ui/Map.md), [Photo](./reference/components/ui/Photo.md) or [Loader](./reference/components/ui/Loader.md). They are used in some views depending of the context.
-- __Utils__: utility functions, split into various files for clarity.
+- **Core components**: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [Photo Viewer](./reference/components/core/PhotoViewer.md) (picture only), [Coverage Map](./reference/components/core/CoverageMap.md) or [Editor](./reference/components/core/Editor.md). They share parts of code in [Basic](./reference/components/core/Basic.md) class. They specialized the behaviour of components depending on the needs.
+- **UI components, menus & widgets**: reusable web components, like [Map](./reference/components/ui/Map.md), [Photo](./reference/components/ui/Photo.md) or [Loader](./reference/components/ui/Loader.md). They are used in some views depending of the context.
+- **Utils**: utility functions, split into various files for clarity.
 
 ![Class diagram of Panoramax web viewer](./images/class_diagram.jpg)
 
@@ -32,7 +32,7 @@ The library is relies on various other libraries:
 In order to offer a coherent overlay of widgets, we follow this general `z-index` ordering:
 
 | Component type                    | Z-Index |
-|-----------------------------------|:-------:|
+| --------------------------------- | :-----: |
 | MapLibre GL & Photo Sphere Viewer | <= 110  |
 | Widgets / Cornered Grid's corners |   120   |
 | Togglable menus                   |   130   |
@@ -42,13 +42,13 @@ In order to offer a coherent overlay of widgets, we follow this general `z-index
 
 !!! note
 
-	This concerns only __Viewer__ component. Editor & Coverage Map read input parameters only from Web Components attributes.
+    This concerns only __Viewer__ component. Editor & Coverage Map read input parameters only from Web Components attributes.
 
 Viewer component can read parameters from 3 different sources:
 
-- Web Component __attributes__, passed through DOM
-- Browser __local storage__
-- __URL search__ parameters
+- Web Component **attributes**, passed through DOM
+- Browser **local storage**
+- **URL search** parameters
 
 This allows a flexible way to interact with viewer for users. Prioritization of parameters is managed by [InitParameters class](./reference/utils/InitParameters.md), URL parameters coming first, then local storage, to fallback with Web component attributes (and eventually some hard-coded defaults).
 
@@ -60,7 +60,7 @@ All third-party services URL (like geocoding API, OSM iD editor) are grouped int
 
 ### Presets for semantics
 
-The semantics system for sequences, pictures and annotations make use of __tagging presets__. These are JSON files hosted at [presets.panoramax.fr](https://presets.panoramax.fr/), they have their [dedicated Gitlab repository](https://gitlab.com/panoramax/server/tagging-presets).
+The semantics system for sequences, pictures and annotations make use of **tagging presets**. These are JSON files hosted at [presets.panoramax.fr](https://presets.panoramax.fr/), they have their [dedicated Gitlab repository](https://gitlab.com/panoramax/server/tagging-presets).
 
 In the viewer, they show up through icons and translated labels associated to pictures & annotations. If you want to change them, you have to edit them in Gitlab repository. Viewer automatically loads hosted files at start.
 
@@ -70,35 +70,45 @@ In order to improve performance, the 3D sphere used for projecting the picture o
 
 ![Comparative of mobile vs PC rendering](./images/comparative_3drender.jpg)
 
+### Widgets breakpoints
+
+To make default display more adaptative, many places in the _Viewer_ code uses breakpoints to have different rendering:
+
+- Display height: 400px
+- Display width: 576px
+- Shown in iframe or not
+
+These breakpoints are both used in CSS (with media-queries) or in JS (`isWidthSmall, isHeightSmall, isInIframe`).
+
 ## Testing
 
 We're trying to make Panoramax as reliable and secure as possible. To ensure this, we rely heavily on code testing. A variety of testing tools is made available:
 
-* `npm start` : launches a dev web server on [localhost:3000](http://localhost:3000)
-* `npm run test` : unit testing
-* `npm run lint` : syntax checks
-* `npm run coverage` : amount of tested code
+- `npm start` : launches a dev web server on [localhost:3000](http://localhost:3000)
+- `npm run test` : unit testing
+- `npm run lint` : syntax checks
+- `npm run coverage` : amount of tested code
 
-If you're working on bug fixes or new features, please __make sure to add appropriate tests__ to keep Panoramax level of quality.
+If you're working on bug fixes or new features, please **make sure to add appropriate tests** to keep Panoramax level of quality.
 
 ### Example pictures
 
 As Panoramax accepts all kind of picture, we have a large variety of troubles that can come to display them. Here is a list of very different images (various types, orientation, metadata) that can be useful to check if your rendering is working well:
 
-| UUID                                   | Type           | Heading | Comment                             |
-|----------------------------------------|----------------|---------|-------------------------------------|
-| `5bada38c-7cbc-4c81-a4d1-e39480fbec0b` | flat landscape | SE      |                                     |
-| `1d86cbbe-2293-4759-a4b6-23a815c49364` | flat portrait  | SW      |                                     |
-| `f21d15a7-7a48-4194-bef2-09f22db03225` | flat square    | NW      | roll/pitch                          |
-| `b13976d5-fb07-44be-b6b6-2a2356a23cb8` | 360°           | W       |                                     |
-| `03f220b4-28b2-4104-bc64-bb9e41a8aa5d` | 360°           | W       | picture tags + annotations          |
-| `5d1800fd-44f6-446f-92b9-250f737c4b14` | 360°           | NE      | roll/pitch                          |
-| `02b6dac1-6d6a-4568-9db4-f4b0219c03d3` | 360°           | E       | roll/pitch                          |
-| `0552bbac-6054-41c1-b0d7-f06ffce7a56d` | 360°           | SW      | roll/pitch                          |
-| `2f842858-2ada-4a25-a462-8d3bf256aca8` | H-cropped 360° | -       | annotations                         |
-| `66dbf066-cf13-4fe3-a32a-2210daaeb45d` | H-cropped 360° | ?       |                                     |
-| `adf47cb2-cddd-4a8b-a5c9-f64248b62f90` | H-cropped 360° | SW      |                                     |
-| `193245fa-3454-492a-b0fc-aa06feab772e` | 180°           | SE      |                                     |
+| UUID                                   | Type           | Heading | Comment                    |
+| -------------------------------------- | -------------- | ------- | -------------------------- |
+| `5bada38c-7cbc-4c81-a4d1-e39480fbec0b` | flat landscape | SE      |                            |
+| `1d86cbbe-2293-4759-a4b6-23a815c49364` | flat portrait  | SW      |                            |
+| `f21d15a7-7a48-4194-bef2-09f22db03225` | flat square    | NW      | roll/pitch                 |
+| `b13976d5-fb07-44be-b6b6-2a2356a23cb8` | 360°           | W       |                            |
+| `03f220b4-28b2-4104-bc64-bb9e41a8aa5d` | 360°           | W       | picture tags + annotations |
+| `5d1800fd-44f6-446f-92b9-250f737c4b14` | 360°           | NE      | roll/pitch                 |
+| `02b6dac1-6d6a-4568-9db4-f4b0219c03d3` | 360°           | E       | roll/pitch                 |
+| `0552bbac-6054-41c1-b0d7-f06ffce7a56d` | 360°           | SW      | roll/pitch                 |
+| `2f842858-2ada-4a25-a462-8d3bf256aca8` | H-cropped 360° | -       | annotations                |
+| `66dbf066-cf13-4fe3-a32a-2210daaeb45d` | H-cropped 360° | ?       |                            |
+| `adf47cb2-cddd-4a8b-a5c9-f64248b62f90` | H-cropped 360° | SW      |                            |
+| `193245fa-3454-492a-b0fc-aa06feab772e` | 180°           | SE      |                            |
 
 ## Documentation
 
@@ -123,8 +133,8 @@ mkdocs build
 
 Online versions are available at:
 
-- [docs.panoramax.fr](https://docs.panoramax.fr/web-viewer/) for __stable__ version
-- [viewer.geovisio.fr/docs](https://viewer.geovisio.fr/docs/) for __develop__ version
+- [docs.panoramax.fr](https://docs.panoramax.fr/web-viewer/) for **stable** version
+- [viewer.geovisio.fr/docs](https://viewer.geovisio.fr/docs/) for **develop** version
 
 ## Make a release
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.3.1-develop-a796378e",
+  "version": "4.3.1-develop-e3b03c0c",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/public/editor.html

@@ -37,7 +37,7 @@
       "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
     ],
     minzoom: 0,
-    maxzoom: 21,
+    maxzoom: 19,
     attribution: "© IGN",
     tileSize: 256
   }'

package/src/components/core/Editor.css

@@ -23,3 +23,11 @@ pnx-editor pnx-map-background {
 	left: 10px;
 	font-family: var(--font-family);
 }
+
+/* Player widget */
+pnx-editor pnx-widget-player {
+	margin-top: 10px;
+}
+pnx-editor pnx-widget-player #pnx-player-play {
+	display: none;
+}

package/src/components/core/Editor.js

@@ -160,6 +160,13 @@ export default class Editor extends Basic {
 		try {
 			this.psv = new Photo(this, this._psvContainer);
 			this.psv._myVTour.datasource.nodeResolver = this._getNode.bind(this);
+			this.grid.appendChild(createWebComp("pnx-widget-player", {
+				slot: "top",
+				_parent: this,
+				class: "pnx-only-psv pnx-print-hidden",
+				size: "xl",
+				more: "never"
+			}));
 		}
 		catch(e) {
 			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;