@panoramax/web-viewer 4.1.0-develop-3a01c0a1 → 4.1.0-develop-5d0b0f0d

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),E=A(7343),_=A(2614),x=A.n(_),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} (3a01c0a)\n\n\ud83c\udd98 Issues can be reported at ${w.Jk.O}`),t||(this._isInternetFast=null,(0,E.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,E.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.`)}))}_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),E=A(7343),_=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")||!0,this["keyboard-shortcuts"]=this.getAttribute("keyboard-shortcuts")||!0,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}_createInitParamsHandler(){var t,a;this._initParams=new _.Ay(_.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(E.DISABLE_ANNOTATIONS_PARAM)})}_initWidgets(){"false"!==this._initParams.getParentPostInit().widgets&&((0,E.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,E.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,E.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),this["url-parameters"]&&"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,_.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,_.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")))}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})])}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},...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),E=A(7343),_=A(2614),x=A.n(_),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} (5d0b0f0)\n\n\ud83c\udd98 Issues can be reported at ${w.Jk.O}`),t||(this._isInternetFast=null,(0,E.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,E.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.`)}))}_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),E=A(7343),_=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")||!0,this["keyboard-shortcuts"]=this.getAttribute("keyboard-shortcuts")||!0,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}_createInitParamsHandler(){var t,a;this._initParams=new _.Ay(_.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(E.DISABLE_ANNOTATIONS_PARAM)})}_initWidgets(){"false"!==this._initParams.getParentPostInit().widgets&&((0,E.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,E.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,E.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),this["url-parameters"]&&"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,_.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,_.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")))}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})])}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},...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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.1.0-develop-3a01c0a1",
+  "version": "4.1.0-develop-5d0b0f0d",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/ui/Map.js

@@ -446,10 +446,9 @@ export default class Map extends maplibregl.Map {
 
 		// Move map to picture coordinates
 		if(!skipCenter && lon !== undefined && lat !== undefined) {
-			this.flyTo({
+			this.jumpTo({ // No animation to avoid conflict on seq=* load
 				center: [lon, lat],
 				zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
-				maxDuration: 2000
 			});
 		}
 	}

package/src/translations/uk.json

@@ -190,6 +190,59 @@
         "semantics_features_none": "На цьому зображенні ще не намальовано жодної особливості.",
         "semantics_show_annotations": "Функції зображення на дисплеї",
         "metadata_camera_focal_length": "Фокусна відстань",
-        "metadata_quality_missing": "на зображенні не встановлено значення"
+        "metadata_quality_missing": "на зображенні не встановлено значення",
+        "semantics_draw_annotation": "Спочатку клацніть на куті об'єкта, який ви хочете зобразити. Потім клацніть на протилежному куті. Ви можете знову клацнути на куті, щоб перемістити його.",
+        "semantics_save_drawn_annotation": "Зберегти позицію",
+        "semantics_undo_drawn_annotation": "Скасувати",
+        "semantics_delete_annotation": "Видалити цей об'єкт",
+        "semantics_hashtags": "Хештеги зображень",
+        "semantics_wikidata_properties": {
+            "P31": "приклад",
+            "P279": "підклас",
+            "P361": "частина"
+        },
+        "semantics_editor_error": "Синтаксис недійсний. Ваші теги можуть виглядати так:\nключ=значення\nпрефікс|ключ=значення\nпрефікс|ключ[кваліфікаційний_ключ=кваліфікаційне_значення]=значення\n\nМаксимальна довжина ключа — 256 символів, максимальна довжина значення — 2048 символів.",
+        "semantics_editor_example": "ключ=значення\nпрефікс|ключ=значення",
+        "semantics_edit": "Редагувати атрибути",
+        "semantics_save": "Збережіть зміни",
+        "semantics_undo": "Скасувати ваші зміни",
+        "semantics_cantsave_invalid": "Не вдалося зберегти зміни, введені дані недійсні",
+        "semantics_send_fail": "Не вдалося зберегти зміни, спробуйте пізніше",
+        "semantics_send_ok": "Ваші зміни успішно надіслано",
+        "report_details": "Додаткові деталі",
+        "report_details_placeholder": "За бажанням, ви можете додати деталі про проблему",
+        "semantics_zero_annotations": "На цьому зображенні немає намальованих рис",
+        "semantics_add_annotation": "Додати новий об'єкт",
+        "semantics_delete_annotation_confirm": "Ви справді хочете видалити цей об'єкт?",
+        "semantics_login_needed": "Щоб редагувати теги або об'єкти зображень, вам потрібно увійти в екземпляр Panoramax {n}. Ви хочете увійти?",
+        "report": "Звіт",
+        "report_auth": "Цей звіт буде надіслано з використанням вашого облікового запису \"{a}\"",
+        "report_nature_label": "Причина проблеми",
+        "report_nature": {
+            "blur_excess": "До об'єкта застосовано непотрібне розмиття",
+            "inappropriate": "Зображення недоречне (не стосується теми, оголене тіло…)",
+            "privacy": "Видно приватний шлях або власність",
+            "mislocated": "Зображення погано розташоване на карті",
+            "copyright": "Зображення порушує авторські права",
+            "other": "Будь-який інший вид проблеми",
+            "picture_low_quality": "Зображення низької якості",
+            "": "Виберіть характер проблеми…",
+            "blur_missing": "Видно обличчя людини або номерний знак автомобіля"
+        },
+        "report_email": "Ваша електронна адреса",
+        "report_email_placeholder": "Необов'язково",
+        "report_submit": "Надіслати",
+        "report_success": "Звіт успішно надіслано. Його буде розглянуто якомога швидше.",
+        "report_failure": "Під час створення звіту сталася помилка: {e}. Будь ласка, спробуйте пізніше.",
+        "report_whole_sequence": "Це стосується всієї послідовності",
+        "report_wait": "Надсилання звіту…",
+        "semantics_save_drawn_annotation_incomplete": "Перед перевіркою потрібно намалювати прямокутник, який поміститься на зображенні"
+    },
+    "map": {
+        "not_public": "Не публічно видиме",
+        "map_data": "Карта на основі {m}",
+        "more_panoramax": "Дізнайтеся більше про Panoramax",
+        "thumbnail": "Мініатюра зображення, на яке наведено курсор",
+        "slow_loading": "Карта повільно завантажується та може виглядати пошкодженою"
     }
 }