@arcgis/core/views/ui/UI.js

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{_ as t}from"../../chunks/tslib.es6.js";import"../../intl.js";import o from"../../core/Accessor.js";import{isSome as n}from"../../core/arrayUtils.js";import e from"../../core/Evented.js";import{makeHandle as i}from"../../core/handleUtils.js";import{watch as r,initial as s}from"../../core/reactiveUtils.js";import{property as a}from"../../core/accessorSupport/decorators/property.js";import{cast as p}from"../../core/accessorSupport/decorators/cast.js";import"../../core/has.js";import{subclass as d}from"../../core/accessorSupport/decorators/subclass.js";import{setCalciteModeClass as c}from"../../support/modeUtils.js";import l from"./Component.js";import{isRTL as m}from"../../widgets/support/widgetUtils.js";import{getLocale as h,onLocaleChange as u}from"../../intl/locale.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 b(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 w(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 P=class extends e.EventedAccessor{constructor(t){super(t),this._cornerNameToContainerLookup={},this._positionNameToContainerLookup={},this._components=new Array,this._componentMap=new Map,this._removeWidgetHandleKey=Symbol("componentOnRemoveSymbol"),this._locale=h(),this.view=null,this._applyViewPadding=()=>{const t=this.container;t&&w(t,this._toPixelPosition(this._getViewPadding()))},this._applyUIPadding=()=>{const t=this._innerContainer;t&&w(t,this._toPixelPosition(this.padding))},this._initContainers()}initialize(){this.addHandles([r((()=>[this.view?.padding,this.container]),this._applyViewPadding,s),r((()=>this.padding),this._applyUIPadding,s),r((()=>[this.container,this._locale]),(([t,o])=>{t&&t.setAttribute("lang",o)}),s),u((t=>{this._locale=t}))])}destroy(){this.container=null;for(const t of this._components)t.destroy();this._components.length=0,this._componentMap.clear()}set container(t){const o=this._get("container");t!==o&&(t&&(t.classList.add(y.ui),c(t),this._attachContainers(t)),o&&(o.classList.remove(y.ui),w(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=b(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=b(t)||b(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,n,e,r,s){t instanceof l||(t=new l({node:t}));const{widget:a}=t;null!=a&&a instanceof o&&a.addHandles(i((()=>{queueMicrotask((()=>this.remove(t)))})),this._removeWidgetHandleKey);this._components.some((t=>this._componentMap.get(t)?.position===n&&this._componentMap.get(t)?.index===e))&&this._components.forEach((t=>{const o=this._componentMap.get(t);o&&o.position===n&&o.index>=e&&o.index++})),this._place({component:t,position:n,index:e}),this._components.push(t),this._componentMap.set(t,{key:r,position:n,internal:s,index:e})}_find(t){return t?t instanceof l?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=m();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 e=this._positionNameToContainerLookup[t];return Array.prototype.slice.call(e.children).map((t=>this._findByNode(t))).filter(n).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([a()],P.prototype,"_locale",void 0),t([a()],P.prototype,"container",null),t([a()],P.prototype,"height",null),t([a({value:_})],P.prototype,"padding",null),t([p("padding")],P.prototype,"castPadding",null),t([a()],P.prototype,"view",void 0),t([a()],P.prototype,"width",null),P=t([d("esri.views.ui.UI")],P);const x=P;export{x as default};