@arcgis/core/views/ui/UI.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{getLocale as o,onLocaleChange as n}from"../../intl.js";import e from"../../core/Accessor.js";import{isSome as i}from"../../core/arrayUtils.js";import{EventedAccessor as r}from"../../core/Evented.js";import{makeHandle as s}from"../../core/handleUtils.js";import{watch as a,initial as p}from"../../core/reactiveUtils.js";import{property as d,cast as l,subclass as c}from"../../core/accessorSupport/decorators.js";import{setCalciteModeClass as h}from"../../support/modeUtils.js";import m from"./Component.js";import{isRTL as u}from"../../widgets/support/widget.js";const f={left:0,top:0,bottom:0,right:0},_={bottom:30,top:15,right:15,left:15},g="esri-ui",y={ui:g,corner:`${g}-corner`,innerContainer:`${g}-inner-container`,manualContainer:`${g}-manual-container`,cornerContainer:`${g}-corner-container`,topLeft:`${g}-top-left`,topRight:`${g}-top-right`,bottomLeft:`${g}-bottom-left`,bottomRight:`${g}-bottom-right`};function C(t){return t&&!t._started&&"function"==typeof t.postMixInProperties&&"function"==typeof t.buildRendering&&"function"==typeof t.postCreate&&"function"==typeof t.startup}function v(t){return 0===t?"0":`${t}px`}function w(t){const o="object"==typeof t&&null!==t&&Object.getPrototypeOf(t);return(null===o||o===Object.prototype)&&("component"in t||"index"in t||"position"in t)?t:null}function b(t,{top:o,bottom:n,left:e,right:i}){t.style.top=o,t.style.bottom=n,t.style.left=e,t.style.right=i}let L=class extends r{constructor(t){super(t),this._cornerNameToContainerLookup={},this._positionNameToContainerLookup={},this._components=new Array,this._componentMap=new Map,this._removeWidgetHandleKey=Symbol("componentOnRemoveSymbol"),this._locale=o(),this.view=null,this._applyViewPadding=()=>{const t=this.container;t&&b(t,this._toPixelPosition(this._getViewPadding()))},this._applyUIPadding=()=>{const t=this._innerContainer;t&&b(t,this._toPixelPosition(this.padding))},this._initContainers()}initialize(){this.addHandles([a(()=>[this.view?.padding,this.container],this._applyViewPadding,p),a(()=>this.padding,this._applyUIPadding,p),a(()=>[this.container,this._locale],([t,o])=>{t&&t.setAttribute("lang",o)},p),n(t=>{this._locale=t})])}destroy(){this.removeAllHandles(),this.container=null;for(const t of this._components)t.destroy();this._components.length=0,this._componentMap.clear(),this.view=null,this._set("view",null)}set container(t){const o=this._get("container");t!==o&&(t&&(t.classList.add(y.ui),h(t),this._attachContainers(t)),o&&(o.classList.remove(y.ui),b(o,{top:"",bottom:"",left:"",right:""}),o.textContent=""),this._set("container",t))}get height(){const t=this.view?.height??0;if(0===t)return t;const o=this._getViewPadding(),{top:n,bottom:e}=o;return Math.max(t-n-e,0)}get padding(){return this._get("padding")}set padding(t){this._overrideIfSome("padding",t)}castPadding(t){return"number"==typeof t?{bottom:t,top:t,right:t,left:t}:{..._,...t}}get width(){const t=this.view?.width??0;if(0===t)return t;const o=this._getViewPadding(),{left:n,right:e}=o;return Math.max(t-n-e,0)}add(t,o){let n,e,i;if(Array.isArray(t))return void t.forEach(t=>this.add(t,o));const r=w(t);r&&({index:n,position:o,component:t,key:e}=r),o&&"object"==typeof o&&({index:n,key:e,position:o,internal:i}=o),!t||o&&!this._isValidPosition(o)||this._add(t,o,n??this._getNumComponentsAtPosition(o),e,i)}remove(t,o){if(!t)return;if(Array.isArray(t))return t.map(t=>this.remove(t,o));const n=this._find(t);if(n){const t=this._componentMap.get(n);if(!t||t.key!==o)return;const e=this._components.indexOf(n),i=n.node.parentNode;return i?.removeChild(n.node),this._componentMap.delete(n),n.widget?.removeHandlesReference(this._removeWidgetHandleKey),this._components.forEach(o=>{const n=this._componentMap.get(o);n&&n.position===t.position&&n.index>t.index&&n.index--}),this._components.splice(e,1)[0]}}empty(t,o={removeInternal:!1}){if(Array.isArray(t)){for(const n of t)this.empty(n,o);return}const n=this._positionNameToContainerLookup[t??"manual"],e=Array.prototype.slice.call(n.children).map(t=>this._findByNode(t)).filter(t=>{if(null==t)return!1;return!(this._componentMap.get(t)?.internal??!1)||o.removeInternal});for(const i of e)this.remove(i)}move(t,o){if(Array.isArray(t)&&t.forEach(t=>this.move(t,o)),!t)return;let n;const e=w(t)||w(o);if(e&&(n=e.index,o=e.position,t=e.component||t),o&&!this._isValidPosition(o))return;const i=this.remove(t);i&&this.add(i,{position:o,index:n})}find(t){if(!t)return null;const o=this._findById(t);return o&&(o.widget||o.node)}getComponents(t,o={includeInternal:!1}){return t?Array.isArray(t)?t.flatMap(t=>this._getComponentsAtPosition(t,o)):this._getComponentsAtPosition(t,o):this._components.filter(t=>o.includeInternal||!this._componentMap.get(t)?.internal).map(({widget:t,node:o})=>t??o)}getPosition(t){for(const o in this._positionNameToContainerLookup){if(this._positionNameToContainerLookup[o].contains(t))return o}return null}_add(t,o,n,i,r){t instanceof m||(t=new m({node:t}));const{widget:a}=t;null!=a&&a instanceof e&&a.addHandles(s(()=>{queueMicrotask(()=>this.remove(t))}),this._removeWidgetHandleKey);const p=this._positionNameToContainerLookup[o];this._components.some(t=>{const o=this._componentMap.get(t)?.position,e=o?this._positionNameToContainerLookup[o]:null;return p===e&&this._componentMap.get(t)?.index===n})&&this._components.forEach(t=>{const o=this._componentMap.get(t),e=o?.position,i=e?this._positionNameToContainerLookup[e]:null;o&&i===p&&o.index>=n&&o.index++}),this._place({component:t,position:o,index:n}),this._components.push(t),this._componentMap.set(t,{key:i,position:o,internal:r,index:n})}_find(t){return t?t instanceof m?this._findByComponent(t):"string"==typeof t?this._findById(t):"domNode"in t?this._findByNode(t.domNode):this._findByNode(t):null}_getViewPadding(){return this.view?.padding??f}_attachContainers(t){t.appendChild(this._innerContainer),t.appendChild(this._manualContainer)}_initContainers(){const t=document.createElement("div");t.classList.add(y.innerContainer,y.cornerContainer);const o=document.createElement("div");o.classList.add(y.innerContainer,y.manualContainer);const n=document.createElement("div");n.classList.add(y.topLeft,y.corner),t.appendChild(n);const e=document.createElement("div");e.classList.add(y.topRight,y.corner),t.appendChild(e);const i=document.createElement("div");i.classList.add(y.bottomLeft,y.corner),t.appendChild(i);const r=document.createElement("div");r.classList.add(y.bottomRight,y.corner),t.appendChild(r),this._innerContainer=t,this._manualContainer=o;const s=u();this._cornerNameToContainerLookup={"top-left":n,"top-right":e,"bottom-left":i,"bottom-right":r,"top-leading":s?e:n,"top-trailing":s?n:e,"bottom-leading":s?r:i,"bottom-trailing":s?i:r},this._positionNameToContainerLookup={manual:o,...this._cornerNameToContainerLookup}}_isValidPosition(t){return!!this._positionNameToContainerLookup[t]}_place(t){const o=t.position??"manual",{component:n,index:e}=t,i=this._positionNameToContainerLookup[o],r=null!=e&&e>-1;if(C(n.widget)&&n.widget.startup(),!r)return void i.appendChild(n.node);const s=Array.from(i.children);if(0!==s.length){for(const t of s){const o=this._findByNode(t);if(o&&e<(this._componentMap.get(o)?.index??0))return void t.parentNode?.insertBefore(n.node,t)}i.appendChild(n.node)}else i.appendChild(n.node)}_toPixelPosition(t){return{top:v(t.top),left:v(t.left),right:v(t.right),bottom:v(t.bottom)}}_findByComponent(t){return this._components.find(o=>o===t)??null}_findById(t){return this._components.find(({id:o})=>o===t)??null}_findByNode(t){return t?this._components.find(({node:o})=>o===t):null}_getComponentsAtPosition(t,o){const n=this._positionNameToContainerLookup[t];return Array.prototype.slice.call(n.children).map(t=>this._findByNode(t)).filter(i).filter(t=>o.includeInternal||!this._componentMap.get(t)?.internal).map(({widget:t,node:o})=>t??o)}_getNumComponentsAtPosition(t){const o=this._positionNameToContainerLookup[t];return o?.children.length??0}};t([d()],L.prototype,"_locale",void 0),t([d()],L.prototype,"container",null),t([d()],L.prototype,"height",null),t([d({value:_})],L.prototype,"padding",null),t([l("padding")],L.prototype,"castPadding",null),t([d()],L.prototype,"view",void 0),t([d()],L.prototype,"width",null),L=t([c("esri.views.ui.UI")],L);const N=L;export{N as default};