UI.js 6.9 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.25/esri/copyright.txt for details.
  4. */
  5. import{_ as t}from"../../chunks/tslib.es6.js";import{empty as o,insertBefore as i}from"../../core/domUtils.js";import e from"../../core/Evented.js";import n from"../../core/Handles.js";import{watch as r,initial as s}from"../../core/reactiveUtils.js";import{property as a}from"../../core/accessorSupport/decorators/property.js";import"../../core/arrayUtils.js";import{cast as d}from"../../core/accessorSupport/decorators/cast.js";import{subclass as p}from"../../core/accessorSupport/decorators/subclass.js";import{setCalciteThemeClass as c}from"../../support/themeUtils.js";import l from"./Component.js";import{isRTL as h}from"../../widgets/support/widgetUtils.js";const m={left:0,top:0,bottom:0,right:0},u={bottom:30,top:15,right:15,left:15},f="manual",_={ui:"esri-ui",corner:"esri-ui-corner",innerContainer:"esri-ui-inner-container",manualContainer:"esri-ui-manual-container",cornerContainer:"esri-ui-corner-container",topLeft:"esri-ui-top-left",topRight:"esri-ui-top-right",bottomLeft:"esri-ui-bottom-left",bottomRight:"esri-ui-bottom-right"};function g(t){return t&&!t._started&&"function"==typeof t.postMixInProperties&&"function"==typeof t.buildRendering&&"function"==typeof t.postCreate&&"function"==typeof t.startup}function y(t){const o=t,i="object"==typeof o&&null!==o&&Object.getPrototypeOf(o);return(null===i||i===Object.prototype)&&("component"in o||"index"in o||"position"in o)?t:null}function C(t,{top:o,bottom:i,left:e,right:n}){t.style.top=o,t.style.bottom=i,t.style.left=e,t.style.right=n}let v=class extends e.EventedAccessor{constructor(t){super(t),this._cornerNameToContainerLookup={},this._positionNameToContainerLookup={},this._components=new Array,this._componentToKey=new Map,this._handles=new n,this.view=null,this._applyViewPadding=()=>{const t=this.container;t&&C(t,this._toPxPosition(this._getViewPadding()))},this._applyUIPadding=()=>{const t=this._innerContainer;t&&C(t,this._toPxPosition(this.padding))},this._initContainers()}initialize(){this._handles.add([r((()=>[this.view?.padding,this.container]),this._applyViewPadding,s),r((()=>this.padding),this._applyUIPadding,s)])}destroy(){this.container=null;for(const t of this._components)t.destroy();this._components.length=0,this._handles.destroy(),this._componentToKey.clear()}set container(t){const i=this._get("container");t!==i&&(t&&(t.classList.add(_.ui),c(t),this._attachContainers(t)),i&&(i.classList.remove(_.ui),C(i,{top:"",bottom:"",left:"",right:""}),o(i)),this._set("container",t))}get height(){const t=this.get("view.height")||0;if(0===t)return t;const o=this._getViewPadding(),i=o.top+o.bottom;return Math.max(t-i,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}:{...u,...t}}get width(){const t=this.get("view.width")||0;if(0===t)return t;const o=this._getViewPadding(),i=o.left+o.right;return Math.max(t-i,0)}add(t,o){let i,e;if(Array.isArray(t))return void t.forEach((t=>this.add(t,o)));const n=y(t);n&&({index:i,position:o,component:t,key:e}=n),o&&"object"==typeof o&&({index:i,key:e,position:o}=o),!t||o&&!this._isValidPosition(o)||this._add(t,o,i,e)}remove(t,o){if(!t)return;if(Array.isArray(t))return t.map((t=>this.remove(t,o)));const i=this._find(t);if(i){const e=this._componentToKey;if(e.has(t)&&e.get(t)!==o)return;const n=this._components.indexOf(i);return i.node.parentNode&&i.node.parentNode.removeChild(i.node),this._componentToKey.delete(t),this._components.splice(n,1)[0]}}empty(t){if(Array.isArray(t))return t.map((t=>this.empty(t))).reduce(((t,o)=>t.concat(o)));if((t=t||f)===f){return Array.prototype.slice.call(this._manualContainer.children).filter((t=>!t.classList.contains(_.corner))).map((t=>this.remove(t)))}return this._isValidPosition(t)?Array.prototype.slice.call(this._cornerNameToContainerLookup[t].children).map(this.remove,this):null}move(t,o){if(Array.isArray(t)&&t.forEach((t=>this.move(t,o))),!t)return;let i;const e=y(t)||y(o);if(e&&(i=e.index,o=e.position,t=e.component||t),o&&!this._isValidPosition(o))return;const n=this.remove(t);n&&this.add(n,{position:o,index:i})}find(t){if(!t)return null;const o=this._findById(t);return o&&(o.widget||o.node)}getPosition(t){for(const o in this._positionNameToContainerLookup){if(this._positionNameToContainerLookup[o].contains(t))return o}return null}_add(t,o,i,e){t instanceof l||(t=new l({node:t})),this._place({component:t,position:o,index:i}),this._components.push(t),e&&this._componentToKey.set(t,e)}_find(t){return t?t instanceof l?this._findByComponent(t):"string"==typeof t?this._findById(t):this._findByNode(t.domNode||t):null}_getViewPadding(){return this.get("view.padding")||m}_attachContainers(t){t.appendChild(this._innerContainer),t.appendChild(this._manualContainer)}_initContainers(){const t=document.createElement("div");t.classList.add(_.innerContainer),t.classList.add(_.cornerContainer);const o=document.createElement("div");o.classList.add(_.innerContainer),o.classList.add(_.manualContainer);const i=document.createElement("div");i.classList.add(_.topLeft),i.classList.add(_.corner),t.appendChild(i);const e=document.createElement("div");e.classList.add(_.topRight),e.classList.add(_.corner),t.appendChild(e);const n=document.createElement("div");n.classList.add(_.bottomLeft),n.classList.add(_.corner),t.appendChild(n);const r=document.createElement("div");r.classList.add(_.bottomRight),r.classList.add(_.corner),t.appendChild(r),this._innerContainer=t,this._manualContainer=o;const s=h();this._cornerNameToContainerLookup={"top-left":i,"top-right":e,"bottom-left":n,"bottom-right":r,"top-leading":s?e:i,"top-trailing":s?i:e,"bottom-leading":s?r:n,"bottom-trailing":s?n:r},this._positionNameToContainerLookup={manual:o,...this._cornerNameToContainerLookup}}_isValidPosition(t){return!!this._positionNameToContainerLookup[t]}_place(t){const o=t.component,e=t.position||f,n=t.index,r=this._positionNameToContainerLookup[e],s=n>-1;if(g(o.widget)&&o.widget.startup(),!s)return void r.appendChild(o.node);const a=Array.prototype.slice.call(r.children);if(0===n)return void(r.firstChild?i(o.node,r.firstChild):r.appendChild(o.node));n>=a.length?r.appendChild(o.node):i(o.node,a[n])}_toPxPosition(t){return{top:this._toPxUnit(t.top),left:this._toPxUnit(t.left),right:this._toPxUnit(t.right),bottom:this._toPxUnit(t.bottom)}}_toPxUnit(t){return 0===t?"0":t+"px"}_findByComponent(t){let o,i=null;return this._components.some((e=>(o=e===t,o&&(i=e),o))),i}_findById(t){let o,i=null;return this._components.some((e=>(o=e.id===t,o&&(i=e),o))),i}_findByNode(t){let o,i=null;return this._components.some((e=>(o=e.node===t,o&&(i=e),o))),i}};t([a()],v.prototype,"container",null),t([a()],v.prototype,"height",null),t([a({value:u})],v.prototype,"padding",null),t([d("padding")],v.prototype,"castPadding",null),t([a()],v.prototype,"view",void 0),t([a()],v.prototype,"width",null),v=t([p("esri.views.ui.UI")],v);const L=v;export{L as default};