@arcgis/core/views/DOMContainer.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as t}from"tslib";import{byId as e,reparent as i}from"../core/domUtils.js";import{on as s}from"../core/events.js";import{makeHandle as r}from"../core/handleUtils.js";import n from"../core/Logger.js";import{destroyMaybe as o,removeMaybe as a}from"../core/maybe.js";import{watch as h,initial as l,syncAndInitial as d}from"../core/reactiveUtils.js";import{addFrameTask as u}from"../core/scheduling.js";import{property as c,subclass as p}from"../core/accessorSupport/decorators.js";import{Attribution as m}from"./Attribution.js";import f from"./overlay/ViewOverlay.js";const _=[0,0];function y(t){const e=(t.ownerDocument||window.document).defaultView,i=t.getBoundingClientRect();return _[0]=i.left+(e?.pageXOffset??0),_[1]=i.top+(e?.pageYOffset??0),_}function g(t){t&&(t.textContent="",t.parentNode&&t.parentNode.removeChild(t))}const v="test"===process.env.NODE_ENV,b=v?0:16,w=v?0:750,C=v?0:512,H=2,O=_=>{const v=_;let O=class extends v{constructor(...t){super(...t),this._freqInfo={freq:b,time:w},this._overlayRenderTaskHandle=null,this.aria={},this.attributionMode=null,this.height=0,this.messagesCommon=null,this.overlay=null,this.position=null,this.resizing=!1,this.root=null,this.surface=null,this.suspended=!0,this.userContent=null,this.width=0,this.widthBreakpoint=null,this.addHandles([h(()=>this.cursor,t=>{const{surface:e}=this;e&&e.setAttribute("data-cursor",t)}),h(()=>this.navigating,t=>{const{surface:e}=this;e&&e.setAttribute("data-navigating",t.toString())}),h(()=>[this.aria,this.surface],()=>this._updateAria(),{initial:!0})])}initialize(){const t=this;this.addHandles([h(()=>this.ui,(t,e)=>this._handleUIChange(t,e),l),t.on("focus",()=>this.notifyChange("focused")),t.on("blur",()=>this.notifyChange("focused"))])}destroy(){this.destroyed||(this.ui?.destroy(),this.container=null)}get attributionHeight(){return this._attribution?.height??0}get container(){return this._get("container")??null}set container(t){const s=this._get("container"),r=e(t);if(r||"string"!=typeof t||n.getLogger(this).error("#container",`element with id '${t}' not found`),s===r)return;if(this._stopMeasuring(),this.removeHandles("container"),s&&(s.classList.remove("esri-view"),this._overlayRenderTaskHandle&&(this._overlayRenderTaskHandle.remove(),this._overlayRenderTaskHandle=null),this.overlay&&(this.overlay.destroy(),this._set("overlay",null)),this._attribution=o(this._attribution),this.root&&(g(this.root),this._set("root",null)),this.userContent&&(i(this.userContent,s),g(this.userContent),this._set("userContent",null))),!r)return this._set("width",0),this._set("height",0),this._set("position",null),this._set("suspended",!0),this._set("surface",null),void this._set("container",null);r.classList.add("esri-view");const l=document.createElement("div");l.className="esri-view-user-storage",i(r,l),r.appendChild(l),this._set("userContent",l);const c=document.createElement("div");c.className="esri-view-root",r.insertBefore(c,r.firstChild),this._set("root",c);const p=document.createElement("div");p.className="esri-view-surface",p.setAttribute("role","application"),p.tabIndex=0,c.appendChild(p),this._set("surface",p);const _=new f;c.appendChild(_.surface),this._set("overlay",_),this.addHandles(h(()=>_.needsRender,t=>{t&&!this._overlayRenderTaskHandle?this._overlayRenderTaskHandle=u({render:()=>this.overlay?.render()}):this._overlayRenderTaskHandle=a(this._overlayRenderTaskHandle)}),"container"),this.addHandles([h(()=>({visible:this.attributionVisible,items:this.attributionItems,mode:this.attributionMode}),({visible:t,items:e,mode:i})=>{t?(this._attribution||(this._attribution=new m({attributionItems:this.attributionItems,mode:this.attributionMode})),this._attribution.appendBefore(c,this.ui?.container??null),this._attribution.attributionItems=e,this._attribution.mode=i):this._attribution=o(this._attribution)},d)],"container"),this.forceDOMReadyCycle(),this._set("container",r),this._startMeasuring()}get focused(){const t=document.activeElement===this.surface;return document.hasFocus()&&t}get size(){return[this.width,this.height]}get ui(){return this._get("ui")}set ui(t){const e=this._get("ui");e!==t&&e?.destroy(),this._set("ui",t)}blur(){this.surface?.blur()}focus(){this.surface?.focus()}pageToContainer(t,e,i){const s=this.position;return t-=s?s[0]:0,e-=s?s[1]:0,i?(i[0]=t,i[1]=e):i=[t,e],i}containerToPage(t,e,i){const s=this.position;return t+=s?s[0]:0,e+=s?s[1]:0,i?(i[0]=t,i[1]=e):i=[t,e],i}_updateAria(){const{surface:t,aria:e}=this;t&&(t.ariaLabelledByElements=e?.labelledByElements??null,t.ariaDescribedByElements=e?.describedByElements??null,t.ariaLabel=e?.label??null,t.ariaDescription=e?.description??null)}_handleUIChange(t,e){this.removeHandles("ui"),e&&e!==t&&e.destroy(),t&&(t.view=this,this.addHandles(h(()=>this.root,e=>{if(e){const i=document.createElement("div");e.insertBefore(i,this._attribution?.surface??null),t.container=i}else t.container=null},l),"ui")),this._set("ui",t)}_stopMeasuring(){this.removeHandles("measuring"),this._get("resizing")&&this._set("resizing",!1)}_startMeasuring(){const t=this._freqInfo;t.freq=b,t.time=w;const e=u({prepare:t=>{const i=this._measure(),s=this._freqInfo;if(s.time+=t.deltaTime,i&&(s.freq=b,this._get("resizing")||this._set("resizing",!0)),s.time<s.freq)return;s.time=0;const r=this._position();s.freq=r||i?b:Math.min(w,s.freq*H),!i&&s.freq>=C&&(e.pause(),this._get("resizing")&&this._set("resizing",!1))}}),i=new ResizeObserver(i=>{t.freq=b,t.time=w,e.resume()});null!=this.container&&i.observe(this.container);const n=r(()=>i.disconnect());this.addHandles([s(window,"resize",()=>{t.freq=b,t.time=w,e.resume()}),n,e],"measuring"),this._measure(),this._position()}_measure(){const t=this.container,e=t?t.clientWidth:0,i=t?t.clientHeight:0;if(0===e||0===i)return this.suspended||this._set("suspended",!0),!1;const s=this.width,r=this.height;if(e===s&&i===r)return this.suspended&&this._set("suspended",!1),!1;this._set("width",e),this._set("height",i),this.suspended&&this._set("suspended",!1);return this.emit("resize",{oldWidth:s,oldHeight:r,width:e,height:i}),!0}_position(){const t=this.container,e=this.position,i=t&&y(t);return!!i&&((!e||i[0]!==e[0]||i[1]!==e[1])&&(this._set("position",[i[0],i[1]]),!0))}forceDOMReadyCycle(){}};return t([c()],O.prototype,"_attribution",void 0),t([c()],O.prototype,"aria",void 0),t([c()],O.prototype,"attributionHeight",null),t([c()],O.prototype,"attributionMode",void 0),t([c()],O.prototype,"container",null),t([c({readOnly:!0})],O.prototype,"focused",null),t([c({readOnly:!0})],O.prototype,"height",void 0),t([c()],O.prototype,"messagesCommon",void 0),t([c({type:f})],O.prototype,"overlay",void 0),t([c({readOnly:!0})],O.prototype,"position",void 0),t([c({readOnly:!0})],O.prototype,"resizing",void 0),t([c({readOnly:!0})],O.prototype,"root",void 0),t([c({value:null,readOnly:!0})],O.prototype,"size",null),t([c({readOnly:!0})],O.prototype,"surface",void 0),t([c({readOnly:!0})],O.prototype,"suspended",void 0),t([c({nonNullable:!0})],O.prototype,"ui",null),t([c({readOnly:!0})],O.prototype,"userContent",void 0),t([c({readOnly:!0})],O.prototype,"width",void 0),t([c()],O.prototype,"widthBreakpoint",void 0),O=t([p("esri.views.DOMContainer")],O),O};export{O as DOMContainer};