UNPKG

@arcgis/core

Version:

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

js.arcgis.com

6 lines (5 loc) • 16.2 kB
1
2
3
4
5
6
/* All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.33/esri/copyright.txt for details. */ import{_ as e}from"../chunks/tslib.es6.js";import t from"../core/Collection.js";import i from"../core/Identifiable.js";import o from"../core/ReactiveMap.js";import{on as s,watch as l,initial as r}from"../core/reactiveUtils.js";import{property as a}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/Logger.js";import"../core/RandomLCG.js";import{subclass as n}from"../core/accessorSupport/decorators/subclass.js";import d from"./Widget.js";import{css as p}from"./LayerList/css.js";import c from"./LayerList/LayerListItem.js";import m from"./LayerList/LayerListViewModel.js";import h from"./LayerList/LayerListVisibleElements.js";import y from"./LayerList/ListItem.js";import{minDragEnabledItems as u,minFilterItems as g,getItem as _,getLayerType as L,removeDestroyedListItems as f,setFilterPredicate as v,sortLayersToIds as I,sortChildLayersToIds as w}from"./LayerList/support/layerListUtils.js";import{loadCalciteComponents as b}from"./support/componentsUtils.js";import{globalCss as C}from"./support/globalCss.js";import{calciteListFilterProps as E}from"./support/listUtils.js";import{setFocus as F}from"./support/widgetUtils.js";import{messageBundle as M}from"./support/decorators/messageBundle.js";import{vmEvent as O}from"./support/decorators/vmEvent.js";import{tsx as T}from"./support/jsxFactory.js";const P=t.ofType(y),A="nested";let j=class extends(i.IdentifiableMixin(d)){constructor(e,i){super(e,i),this._rootListEl=null,this._activeItem=null,this._tooltipReferenceMap=new o,this._focusRootFlowItem=!1,this._focusPanelFlowItem=!1,this._focusLayerFlowItem=null,this._layerListMap=new o,this._lastDragDetail=null,this._selectedDragItemLayerUid=null,this._rootGroupUid=`operational-${this.uid}`,this._openedLayersController=null,this.catalogLayerList=null,this.catalogOptions=null,this.collapsed=!1,this.dragEnabled=!1,this.filterPlaceholder="",this.filterPredicate=null,this.filterText="",this.headingLevel=2,this.knowledgeGraphOptions=null,this.layerTablesEnabled=new t(["knowledge-graph"]),this.listItemCanGiveFunction=null,this.listItemCanReceiveFunction=null,this.mapImageOptions=null,this.messages=null,this.messagesCommon=null,this.minDragEnabledItems=u,this.minFilterItems=g,this.openedLayers=new t,this.openedLayerLists=new t,this.selectedItems=new P,this.selectionMode="none",this.tableList=null,this.tileOptions=null,this.viewModel=new m,this.visibilityAppearance="default",this.visibleElements=new h,this._canMove=({dragEl:e,fromEl:t,toEl:i},o)=>{const s="pull"===o?this.listItemCanGiveFunction:this.listItemCanReceiveFunction,l=_(e);if(!l?.sortable)return!1;const r=_(t),a=L(t),n=_(i),d=L(i),p=!!a&&!!d&&a===d,c={selected:l,from:r,to:n},m=t.group,h=i.group,y=r?.layer?.type??"",u=n?.layer?.type??"",g=new Set(["map-image","catalog","knowledge-graph"]),f="sublayer";return m&&h&&"function"==typeof s?s.call(null,c):p&&!g.has(y)&&!g.has(u)&&l?.layer?.type!==f},this._onCatalogOpen=e=>{this.openedLayers.push(e.layer?.parent),this._focusLayerFlowItem=e.layer?.uid},this._onTablesOpen=e=>{this.openedLayers.push(e.layer),this._focusLayerFlowItem=e.layer?.uid},this._onPanelOpen=()=>{this._focusPanelFlowItem=!0},this._onTooltipReferenceChange=(e,t)=>{t?this._tooltipReferenceMap.set(e,t):this._tooltipReferenceMap.delete(e)},this._onSelectedDragItemLayerUidChange=e=>{this._selectedDragItemLayerUid=e},this._onTriggerAction=(e,t)=>{this.triggerAction(e,t)},this._clearActiveItem=()=>{this._activeItem=null},this._setActiveItem=e=>{if("default"!==this.visibilityAppearance)return;const t=Array.from(e.composedPath()).find((e=>e.classList?.contains(p.item)));this._activeItem=_(t)},this._onCalciteListOrderChange=e=>{const{_lastDragDetail:t}=this,{toEl:i,fromEl:o,dragEl:s,newIndex:l}=e;if(o&&i&&!(t?.newIndex===l&&t?.dragEl===s&&t?.toEl===i&&t?.fromEl===o))if(this._lastDragDetail=e,this._selectedDragItemLayerUid=s.value,o!==i)this._moveLayerFromChildList({toEl:i,fromEl:o,dragEl:s,newIndex:l});else{const e=Array.from(o.children).filter((e=>e?.matches("calcite-list-item"))).map((e=>e.value));this._sortLayers(o,e)}}}initialize(){this.addHandles([s((()=>this.openedLayers),"change",(()=>this._handleOpenedLayersChange()),r),s((()=>this.viewModel.operationalItems),"change",(()=>f(this.selectedItems)),r),l((()=>[this.filterPredicate,this._rootListEl]),(()=>v(this._rootListEl,this.filterPredicate)))])}loadDependencies(){return b({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),flow:()=>import("@esri/calcite-components/dist/components/calcite-flow"),"flow-item":()=>import("@esri/calcite-components/dist/components/calcite-flow-item"),list:()=>import("@esri/calcite-components/dist/components/calcite-list"),notice:()=>import("@esri/calcite-components/dist/components/calcite-notice"),tooltip:()=>import("@esri/calcite-components/dist/components/calcite-tooltip")})}destroy(){this._destroyOpenedLayerLists(),this._tooltipReferenceMap.clear()}get _totalItems(){return this.viewModel.operationalItems.flatten((e=>e.children.filter((e=>"catalog-dynamic-group"!==e.layer?.type)))).length}get _visibleItems(){return this.operationalItems?.filter((e=>!e.hidden&&(this.visibleElements.errors||!e.error)))}get _openedPanelItems(){return this._visibleItems.flatten((e=>e.children)).filter((({hidden:e,panel:t})=>!e&&t?.open&&!t.disabled&&t.flowEnabled))}get _dragEnabled(){return this._totalItems>=this.minDragEnabledItems&&this.dragEnabled}get _filterEnabled(){return this._totalItems>=this.minFilterItems&&this.visibleElements.filter}get _renderedOpenLayerFlowItems(){const{openedLayers:e}=this;return e.toArray().map(((t,i)=>this._renderLayerFlowItem(t,i===e.length-1)))}get icon(){return"layers"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get listItemCreatedFunction(){return this.viewModel.listItemCreatedFunction}set listItemCreatedFunction(e){this.viewModel.listItemCreatedFunction=e}get operationalItems(){return this.viewModel.operationalItems}set operationalItems(e){this.viewModel.operationalItems=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}triggerAction(e,t){return this.viewModel.triggerAction(e,t)}render(){const e=this.viewModel?.state,t={[C.hidden]:"loading"===e,[C.disabled]:"disabled"===e};return T("div",{class:this.classes(p.base,C.widget,C.panel,t)},this._renderItemTooltips(),this._renderItems())}async _createFlowList(e,t){const{_layerListMap:i}=this,o=i.get(e);if(o)return o;const s="catalog"===e.type?await this._createCatalogLayerList(e):await this._createTableList(e);return t.aborted||i.set(e,s),s}async _handleOpenedLayersChange(){const{_layerListMap:e,openedLayers:t,openedLayerLists:i}=this;this._openedLayersController?.abort();const o=new AbortController,{signal:s}=o;this._openedLayersController=o,e.forEach(((i,o)=>{t.includes(o)||(i.destroy(),e.delete(o))}));const l=await Promise.all(t.map((e=>this._createFlowList(e,s))));if(s.aborted)return;i.removeAll(),i.addMany(l);const r=i.at(-1);r?"catalogLayer"in r?(this._set("catalogLayerList",r),this._set("tableList",null)):(this._set("catalogLayerList",null),this._set("tableList",r)):(this._set("catalogLayerList",null),this._set("tableList",null))}_destroyOpenedLayerLists(){this.openedLayerLists.destroyAll(),this.openedLayers.removeAll(),this._layerListMap.clear()}_renderItemTooltip(e){const{_tooltipReferenceMap:t,messages:i}=this;return e?T("calcite-tooltip",{key:`tooltip-${e.layer?.uid}`,overlayPositioning:"fixed",referenceElement:t.get(e.layer?.uid)},i.layerIncompatibleTooltip):null}_renderItemTooltipNodes(e){return e.incompatible?this._renderItemTooltip(e):e.children?.filter((e=>!e.hidden)).toArray().map((e=>this._renderItemTooltipNodes(e)))}_renderItemTooltips(){return this._visibleItems?.toArray().map((e=>this._renderItemTooltipNodes(e)))}_renderNoItemsMessage(){return T("div",{slot:"message"},this.messages.noItemsToDisplay)}_renderNoItems(){return T("div",{class:p.itemMessage,key:"esri-layer-list__no-items"},T("calcite-notice",{icon:"information",kind:"info",open:!0,width:"full"},this._renderNoItemsMessage()))}async _createCatalogLayerList(e){const{default:t}=await import("./CatalogLayerList.js"),{headingLevel:i,catalogOptions:o,view:s,filterPlaceholder:l,listItemCreatedFunction:r,minFilterItems:a,selectionMode:n,visibilityAppearance:d,_onCatalogOpen:p,_onTablesOpen:c,layerTablesEnabled:m}=this;return new t({headingLevel:i,view:s,filterPlaceholder:l,listItemCreatedFunction:r,minFilterItems:a,selectionMode:n,visibilityAppearance:d,...o,catalogLayer:e,layerTablesEnabled:m,onCatalogOpen:p,onTablesOpen:c})}_getTableListParams(e){switch(e.type){case"knowledge-graph":return{...this.knowledgeGraphOptions,tables:e.tables};case"map-image":return{...this.mapImageOptions,tables:e.subtables};case"tile":return{...this.tileOptions,tables:e.subtables};default:return null}}async _createTableList(e){const{default:t}=await import("./TableList.js"),{headingLevel:i,selectionMode:o,dragEnabled:s}=this;return new t({headingLevel:i,selectionMode:o,dragEnabled:s,...this._getTableListParams(e)})}_renderLayerFlowItem(e,t){const{messages:i,openedLayers:o}=this,s=e.title||this.messages.untitledLayer;return T("calcite-flow-item",{afterCreate:this._focusLayerFlowItemNode,afterUpdate:this._focusLayerFlowItemNode,bind:this,"data-layer-uid":e.uid,description:s,heading:i["catalog"===e.type?"catalogLayers":"tables"],headingLevel:this.headingLevel,key:`flow-layer-list-${e.uid}`,selected:t,onCalciteFlowItemBack:e=>{e.preventDefault(),o.pop();const t=o.at(-1);t?this._focusLayerFlowItem=t.uid:this._focusRootFlowItem=!0}},this._layerListMap.get(e)?.render())}_renderPanelFlowItems(){const{_openedPanelItems:e,openedLayers:t}=this;return e.toArray().map((({title:i,panel:o},s)=>{const l=()=>this._handlePanelFlowItemBack(o);return T("calcite-flow-item",{afterCreate:this._focusPanelFlowItemNode,afterUpdate:this._focusPanelFlowItemNode,bind:this,description:i,heading:o.title,headingLevel:this.headingLevel,key:`flow-panel-${o.uid}`,selected:!t.length&&s===e.length-1,onCalciteFlowItemBack:e=>{e.preventDefault(),l()}},o.render(),T("calcite-button",{appearance:"transparent",onclick:l,slot:"footer-actions",width:"full"},this.messagesCommon.back))}))}_handlePanelFlowItemBack(e){e.open=!1,this._focusRootFlowItem=!0}_focusRootFlowItemNode(e){this._focusRootFlowItem&&(this._focusRootFlowItem=!1,F(e))}_focusLayerFlowItemNode(e){this._focusLayerFlowItem===e.dataset.layerUid&&(this._focusLayerFlowItem=null,F(e))}_focusPanelFlowItemNode(e){this._focusPanelFlowItem&&(this._focusPanelFlowItem=!1,F(e))}_renderItems(){const{visible:e,collapsed:t,_visibleItems:i,_openedPanelItems:o,_filterEnabled:s,_rootGroupUid:l,visibleElements:{closeButton:r,collapseButton:a,heading:n,flow:d},_dragEnabled:c,selectionMode:m,filterText:h,openedLayers:y,filterPlaceholder:u,messages:g}=this,_=[T("calcite-flow-item",{afterCreate:this._focusRootFlowItemNode,afterUpdate:this._focusRootFlowItemNode,bind:this,closable:r,closed:!e,collapsed:t,collapsible:a,heading:n?g.widgetLabel:void 0,headingLevel:this.headingLevel,key:"root-flow-item",selected:!y.length&&!o.length,onCalciteFlowItemClose:()=>this.visible=!1},i?.length?null:this._renderNoItems(),T("calcite-list",{afterCreate:e=>{this._rootListEl=e,e.addEventListener("focusin",this._setActiveItem),e.addEventListener("focusout",this._clearActiveItem)},afterRemoved:e=>{this._rootListEl=null,e.removeEventListener("focusin",this._setActiveItem),e.removeEventListener("focusout",this._clearActiveItem)},canPull:e=>this._canMove(e,"pull"),canPut:e=>this._canMove(e,"put"),"data-layer-type":l,displayMode:A,dragEnabled:c,filterEnabled:s,filterPlaceholder:u,filterProps:E,filterText:s?h:"",group:l,key:"root-list",label:g.widgetLabel,onmouseleave:this._clearActiveItem,onmouseover:this._setActiveItem,selectionAppearance:"border",selectionMode:m,onCalciteListChange:e=>this._handleCalciteListChange(e),onCalciteListDragEnd:e=>this._handleCalciteListDragEnd(e.detail),onCalciteListFilter:e=>this.filterText=e.currentTarget?.filterText??"",onCalciteListOrderChange:e=>this._onCalciteListOrderChange(e.detail)},i.toArray().map((e=>this._renderItem(e))),s?T("div",{class:p.filterNoResults,slot:"filter-no-results"},T("calcite-notice",{kind:"info",open:!0,width:"full"},this._renderNoItemsMessage())):null)),this._renderPanelFlowItems(),this._renderedOpenLayerFlowItems];return e?d?T("calcite-flow",{key:"root-flow"},_):_:null}_renderItem(e,t,i){return T(c,{activeItem:this._activeItem,canMove:this._canMove,css:p,displayMode:A,dragEnabled:this.dragEnabled,item:e,key:`layerListItem-${e.layer?.uid}`,layerTablesEnabled:this.layerTablesEnabled,listModeDisabled:this.viewModel.listModeDisabled,messages:this.messages,messagesCommon:this.messagesCommon,parent:t,parentTitles:i,rootGroupUid:this._rootGroupUid,selectedDragItemLayerUid:this._selectedDragItemLayerUid,selectedItems:this.selectedItems,selectionMode:this.selectionMode,visibilityAppearance:this.visibilityAppearance,visibleElements:this.visibleElements,onAction:this._onTriggerAction,onCatalogOpen:this._onCatalogOpen,onPanelOpen:this._onPanelOpen,onSelectedDragItemLayerUidChange:this._onSelectedDragItemLayerUidChange,onTablesOpen:this._onTablesOpen,onTooltipReferenceChange:this._onTooltipReferenceChange})}_moveLayerFromChildList({toEl:e,fromEl:t,dragEl:i,newIndex:o}){const s=_(i),l=_(e),r=_(t);this.viewModel.moveListItem(s,r,l,o)}_handleCalciteListDragEnd(e){const{fromEl:t,dragEl:i,oldIndex:o}=e;t.insertBefore(i,t.children[o])}_sortLayers(e,t){if(e)if(e===this._rootListEl)I(this.view?.map?.layers,t);else{const i=_(e);if(!i)return;w(i,t)}}_handleCalciteListChange(e){const{selectionMode:t,selectedItems:i}=this;if("none"===t)return;const o=e.target.selectedItems.map((e=>_(e))).filter(Boolean);i.removeAll(),i.addMany(o)}};e([a()],j.prototype,"_rootListEl",void 0),e([a()],j.prototype,"_activeItem",void 0),e([a()],j.prototype,"_tooltipReferenceMap",void 0),e([a()],j.prototype,"_focusRootFlowItem",void 0),e([a()],j.prototype,"_focusPanelFlowItem",void 0),e([a()],j.prototype,"_focusLayerFlowItem",void 0),e([a()],j.prototype,"_layerListMap",void 0),e([a()],j.prototype,"_totalItems",null),e([a()],j.prototype,"_visibleItems",null),e([a()],j.prototype,"_openedPanelItems",null),e([a()],j.prototype,"_dragEnabled",null),e([a()],j.prototype,"_filterEnabled",null),e([a()],j.prototype,"_renderedOpenLayerFlowItems",null),e([a({readOnly:!0})],j.prototype,"catalogLayerList",void 0),e([a()],j.prototype,"catalogOptions",void 0),e([a()],j.prototype,"collapsed",void 0),e([a()],j.prototype,"dragEnabled",void 0),e([a()],j.prototype,"filterPlaceholder",void 0),e([a()],j.prototype,"filterPredicate",void 0),e([a()],j.prototype,"filterText",void 0),e([a()],j.prototype,"headingLevel",void 0),e([a()],j.prototype,"icon",null),e([a()],j.prototype,"knowledgeGraphOptions",void 0),e([a()],j.prototype,"label",null),e([a()],j.prototype,"layerTablesEnabled",void 0),e([a()],j.prototype,"listItemCanGiveFunction",void 0),e([a()],j.prototype,"listItemCanReceiveFunction",void 0),e([a()],j.prototype,"listItemCreatedFunction",null),e([a()],j.prototype,"mapImageOptions",void 0),e([a(),M("esri/widgets/LayerList/t9n/LayerList")],j.prototype,"messages",void 0),e([a(),M("esri/t9n/common")],j.prototype,"messagesCommon",void 0),e([a()],j.prototype,"minDragEnabledItems",void 0),e([a()],j.prototype,"minFilterItems",void 0),e([a({readOnly:!0})],j.prototype,"openedLayers",void 0),e([a({readOnly:!0})],j.prototype,"openedLayerLists",void 0),e([a()],j.prototype,"operationalItems",null),e([a()],j.prototype,"selectedItems",void 0),e([a()],j.prototype,"selectionMode",void 0),e([a({readOnly:!0})],j.prototype,"tableList",void 0),e([a()],j.prototype,"tileOptions",void 0),e([a()],j.prototype,"view",null),e([O("trigger-action"),a({type:m})],j.prototype,"viewModel",void 0),e([a()],j.prototype,"visibilityAppearance",void 0),e([a({type:h,nonNullable:!0})],j.prototype,"visibleElements",void 0),j=e([n("esri.widgets.LayerList")],j);const D=j;export{D as default};