///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define([ 'dojo/on',
|
'dojo/_base/declare',
|
'dojo/promise/all',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/_base/array',
|
'jimu/dijit/CheckBox',
|
'jimu/dijit/LayerChooserFromMap',
|
'jimu/LayerStructure'
|
],
|
function(on, declare, all, lang, html, array, CheckBox, LayerChooserFromMap, LayerStructure) {
|
|
var LayerChooser = declare([LayerChooserFromMap], {
|
templateString:'<div style="width:100%;">' +
|
'<div data-dojo-attach-point="errorTipSection" class="error-tip-section">' +
|
'<span class="jimu-icon jimu-icon-error"></span>' +
|
'<span class="jimu-state-error-text" data-dojo-attach-point="errTip">' +
|
'${nls.noLayersTip}</span>' +
|
'</div>' +
|
'<div data-dojo-attach-point="treeSection" class="tree-section">' +
|
'<ul data-dojo-attach-point="treeUl" class="tree-ul tree-root-ul"></ul>' +
|
'</div>' +
|
'</div>',
|
|
//constructor options:
|
//multiple: false, //Can select multiple layers or a single layer.
|
//onlyShowVisible: false, //optional
|
//updateWhenLayerInfosIsShowInMapChanged: false, //optional
|
map: null, //optional
|
layerStateController: null, //optional
|
layerState: null, //optional
|
customFilter: null, //optional
|
onlySelectLeafLayer: false, //optional
|
displayLayerTypeIcon: true, //optional
|
showTables: true, //optional
|
viewMode: false, //optional
|
onlyShowWebMapLayers: false, //optional
|
|
//public methods:
|
//getSelectedItems
|
|
//events:
|
//tree-click
|
//update
|
|
layerStructure: null,
|
_layerDatas: null,
|
_eventHandles: null,
|
|
postMixInProperties:function(){
|
this.nls = window.jimuNls.basicLayerChooserFromMap;
|
},
|
|
postCreate: function() {
|
//this.inherited(arguments);
|
html.addClass(this.domNode, 'jimu-basic-layer-chooser-from-map');
|
html.addClass(this.domNode, 'jimu-basic-layer-chooser-from-map-lite');
|
|
/*
|
this.shelter = new LoadingIndicator({hidden:true});
|
this.shelter.placeAt(this.domNode);
|
this.shelter.startup();
|
*/
|
|
// init properties
|
this._layerDatas = {};
|
this._eventHandles = [];
|
|
// init layerStructure
|
if(this.map){
|
this.layerStructure = LayerStructure.createInstance(this.map);
|
} else {
|
this.layerStructure = LayerStructure.getInstance();
|
}
|
this.layerInfosObj = this.layerStructure._layerInfos;
|
|
// clear layer state
|
this.layerState = this._clearLayerState(this.layerState) || {};
|
|
/*
|
this.own(on(this.layerStructure,
|
LayerStructure.EVENT_STRUCTURE_CHANGE,
|
lang.hitch(this, this._onLayerInfosChanged)));
|
if(this.updateWhenLayerInfosIsShowInMapChanged) {
|
this.own(on(this.layerStructure,
|
LayerStructure.EVENT_VISIBILITY_CHANGE,
|
lang.hitch(this, this._onLayerInfosIsShowInMapChanged)));
|
}
|
*/
|
|
// init layerStateController
|
if(!this.layerStateController) {
|
this.layerStateController = new LayerChooser.LayerStateController();
|
}
|
|
// init filter
|
var filter;
|
if(this.customFilter) {
|
filter = lang.hitch(this, this.customFilter);
|
} else {
|
filter = lang.hitch(this, this.filter);
|
}
|
this.filter = LayerChooserFromMap.andCombineFilters([this.basicFilter, filter]);
|
|
// create tree
|
this._createTree();
|
},
|
|
_createTree: function() {
|
var layerNodes, tableNodes;
|
if(this.onlyShowWebMapLayers) {
|
layerNodes = this.layerStructure.getWebmapLayerNodes();
|
tableNodes = this.layerStructure.getWebmapTableNodes();
|
} else {
|
layerNodes = this.layerStructure.getLayerNodes();
|
tableNodes = this.layerStructure.getTableNodes();
|
}
|
var createdCount = this._createLayerNodes(layerNodes.concat(this.showTables ? tableNodes : []), this.treeUl);
|
|
if(createdCount > 0) {
|
html.setStyle(this.errorTipSection, 'display', 'none');
|
this.layerStateController.restoreState(this.layerState, this.layerStructure);
|
}
|
},
|
|
_createLayerNodes: function(layerNodes, nodeUl) {
|
var filterDefs = array.map(layerNodes, function(layerNode) {
|
return this.filter(layerNode._layerInfo);
|
}, this);
|
|
var createdCount = 0;
|
all(filterDefs).then(lang.hitch(this, function(results) {
|
array.forEach(results, function(isPass, index) {
|
if(isPass) {
|
this._createLayerNode(layerNodes[index], nodeUl);
|
createdCount++;
|
}
|
}, this);
|
}));
|
|
return createdCount;
|
},
|
|
_createLayerNode: function(layerNode, nodeUl) {
|
var handle;
|
|
var layerNodeLi = html.create('li', {
|
'class': 'tree-node-li',
|
'id': 'layerchooserlite-tree-node-li-' + layerNode.id
|
//'style': 'display:none'
|
}, nodeUl);
|
|
var layerNodeDiv = html.create('div', {
|
'class': 'tree-node-div'
|
}, layerNodeLi);
|
|
var collapseSpan = html.create('span', {
|
'class': 'tree-node-column-span collapse-span'
|
}, layerNodeDiv);
|
|
var checkBoxSpan = html.create('span', {
|
'class': 'tree-node-column-span check-box-span'
|
}, layerNodeDiv);
|
|
var checkBoxDiv = html.create('div', {
|
'class': 'tree-node-column-div check-box-div'
|
}, checkBoxSpan);
|
|
var displayIconClass = this.displayLayerTypeIcon ? "display" : "";
|
var iconSpan = html.create('span', {
|
'class': 'tree-node-column-span icon-span ' + displayIconClass
|
}, layerNodeDiv);
|
|
/*
|
var iconDiv = html.create('div', {
|
'class': 'tree-node-column-div icon-div',
|
'style': iconSpanStyle
|
}, iconSpan);
|
*/
|
|
// restore layer state
|
var state;
|
var oldState = this.layerState[layerNode.id];
|
if(oldState) {
|
state = oldState.selected;
|
} else {
|
state = this.layerStateController.getState(layerNode);
|
}
|
|
var checkBox = new CheckBox({
|
'checked': state
|
}, checkBoxDiv);
|
|
var titleSpan = html.create('span', {
|
'class': 'tree-node-column-span title-span',
|
'innerHTML': layerNode.title
|
}, layerNodeDiv);
|
|
|
// create subLayerNode ul
|
var subLayerNodeUl = html.create('ul', {
|
'class': 'tree-ul tree-subnode-ul',
|
'style': 'display:none; '
|
}, layerNodeLi);
|
|
var layerData = {
|
layerNode: layerNode,
|
layerNodeLi: layerNodeLi,
|
layerNodeDiv: layerNodeDiv,
|
collapseSpan: collapseSpan,
|
iconSpan: iconSpan,
|
checkBox: checkBox,
|
subLayerNodeUl: subLayerNodeUl,
|
hasBeenOpened: false
|
};
|
|
this._layerDatas[layerNode.id] = layerData;
|
if(!layerNode.isLeaf()) {
|
html.addClass(collapseSpan, 'is-leaf');
|
html.addClass(titleSpan, 'is-leaf');
|
handle = on(collapseSpan, 'click', lang.hitch(this, this._onCollapse, layerData));
|
this._eventHandles.push(handle);
|
handle = on(titleSpan, 'click', lang.hitch(this, this._onCollapse, layerData));
|
this._eventHandles.push(handle);
|
if(this.onlySelectLeafLayer) {
|
checkBox.setStatus(false);
|
html.setStyle(checkBoxDiv, 'display', 'none');
|
}
|
}
|
|
if(this.viewMode === true) {
|
checkBox.setStatus(false);
|
}
|
|
//this.own(on(checkBox, 'change', lang.hitch(this, this._onCheckBoxChange, layerData)));
|
handle = on(checkBox.domNode, 'click', lang.hitch(this, this._onCheckBoxChange, layerData));
|
this._eventHandles.push(handle);
|
|
this._setIconImage(layerData, false);
|
|
return layerData;
|
},
|
|
_setIconImage: function(layerData, opened) {
|
if(!this.displayLayerTypeIcon) {
|
return;
|
}
|
|
var layerNode = layerData.layerNode;
|
var layerTypeDef = layerNode.getLayerType();
|
var layerObjectDef = layerNode.getLayerObject();
|
all({
|
layerType: layerTypeDef,
|
layerObject: layerObjectDef
|
}).then(lang.hitch(this, function(result) {
|
var item;
|
if(result.layerType && result.layerObject) {
|
item = {
|
type: result.layerType,
|
layerInfo: layerNode._layerInfo
|
};
|
|
var baseUrl = window.location.protocol + "//" + window.location.host + require.toUrl("jimu");
|
var imageName = this._getIconImageName(item, opened);
|
if (imageName) {
|
var backgroundImageUrl = "url(" + baseUrl + "/css/images/" + imageName + ")";
|
html.setStyle(layerData.iconSpan, 'background-image', backgroundImageUrl);
|
}
|
}
|
}));
|
},
|
|
_getCheckBoxValue: function(checkBox) {
|
return checkBox.getStatus() ? checkBox.getValue() : false;
|
},
|
|
_clearLayerState: function(layerState) {
|
var newLayerState = {};
|
if(layerState) {
|
this.layerStructure.traversal(lang.hitch(this, function(layerNode) {
|
if(layerState[layerNode.id]) {
|
newLayerState[layerNode.id] = {
|
selected: layerState[layerNode.id].selected
|
};
|
}
|
}));
|
}
|
return newLayerState;
|
},
|
|
|
_selectOrDeselectLayer: function(layerId, isSelect) {
|
var layerData = this._layerDatas[layerId];
|
if(layerData) {
|
layerData.checkBox.setValue(isSelect);
|
this._onCheckBoxChange(layerData);
|
}
|
},
|
|
selectLayer: function(layerId) {
|
this._selectOrDeselectLayer(layerId, true);
|
},
|
|
deselectLayer: function(layerId) {
|
this._selectOrDeselectLayer(layerId, false);
|
},
|
|
// layerState: {
|
// id: {
|
// selected: true/false
|
// }
|
// }
|
getState: function() {
|
var layerState = lang.clone(this.layerState);
|
|
for (var id in this._layerDatas) {
|
if(this._layerDatas.hasOwnProperty(id) && (typeof this._layerDatas[id] !== 'function')) {
|
var layerData = this._layerDatas[id];
|
var checkBox = layerData.checkBox;
|
if(this._getCheckBoxValue(checkBox)) {
|
layerState[id] = {selected: true};
|
} else {
|
layerState[id] = {selected: false};
|
}
|
}
|
}
|
return layerState;
|
},
|
|
// layerState: {
|
// id: {
|
// selected: true/false
|
// }
|
// }
|
restoreState: function(layerState) {
|
this.layerState = this._clearLayerState(layerState);
|
for (var id in this._layerDatas) {
|
if(this._layerDatas.hasOwnProperty(id) &&
|
(typeof this._layerDatas[id] !== 'function')) {
|
var layerData = this._layerDatas[id];
|
var checkBox = layerData && layerData.checkBox;
|
var state = this.layerState[id];
|
if(state) {
|
checkBox.setValue(state.selected);
|
} else {
|
checkBox.setValue(this.layerStateController.getState(layerData.layerNode));
|
}
|
}
|
}
|
this.layerStateController.restoreState(this.layerState, this.layerStructure);
|
},
|
|
setViewMode: function(viewMode) {
|
for (var id in this._layerDatas) {
|
if(this._layerDatas.hasOwnProperty(id) &&
|
(typeof this._layerDatas[id] !== 'function')) {
|
var layerData = this._layerDatas[id];
|
var checkBox = layerData && layerData.checkBox;
|
if(viewMode === true) {
|
this.viewMode = true;
|
checkBox.setStatus(false);
|
} else {
|
this.viewMode = false;
|
checkBox.setStatus(true);
|
}
|
}
|
}
|
},
|
|
getSelectedLayerNodes: function() {
|
// some selected layers may have not been loaded.
|
var selectedLayerNodes = [];
|
var layerState = this.getState();
|
for (var id in layerState) {
|
if(layerState.hasOwnProperty(id) && (typeof layerState[id] !== 'function')) {
|
if(layerState[id].selected) {
|
var layerNode = this.layerStructure.getNodeById(id);
|
if(layerNode) {
|
selectedLayerNodes.push(layerNode);
|
}
|
}
|
}
|
}
|
return selectedLayerNodes;
|
},
|
|
getLoadedLayerNodes: function() {
|
var loadedLayerNodes = [];
|
for(var id in this._layerDatas) {
|
if(this._layerDatas.hasOwnProperty(id) && (typeof this._layerDatas[id] !== 'function')) {
|
var layerNode = this.layerStructure.getNodeById(id);
|
if(layerNode) {
|
loadedLayerNodes.push(layerNode);
|
}
|
}
|
}
|
return loadedLayerNodes;
|
},
|
|
getLayerAssociateDomNodesById: function(layerId) {
|
var domNodes = null;
|
var layerData = this._layerDatas[layerId];
|
if(layerData) {
|
domNodes = {
|
collapseIcon: layerData.collapseSpan,
|
checkBox: layerData.checkBox.domNode,
|
layerTypeIcon: layerData.iconSpan
|
};
|
}
|
return domNodes;
|
},
|
|
//compatible with the LayerChooserFromMap
|
//return an array, each element has 'name', 'url' and 'layerInfo' attribute
|
getSelectedItems: function(){
|
var handledItems = [];
|
handledItems = array.map(this.getSelectedLayerNodes(), function(layerNode) {
|
return {
|
name: layerNode.title,
|
url: layerNode.getUrl(),
|
layerInfo: layerNode._layerInfo
|
};
|
}, this);
|
return handledItems;
|
},
|
|
//compatible with the LayerChooserFromMap
|
//return an array, each element has 'name', 'url' and 'layerInfo' attribute
|
getAllItems: function(){
|
var handledItems = [];
|
return handledItems;
|
},
|
|
|
_clear:function(){
|
// clear this._layerDatas
|
this._layerDatas = {};
|
|
// clear this._eventHandles
|
array.forEach(this._eventHandles, function(eventHandle) {
|
eventHandle.remove();
|
}, this);
|
this._eventHandles = [];
|
|
// clear tree
|
html.empty(this.treeUl);
|
},
|
|
destroy: function(){
|
this._clear();
|
|
if(this.map) {
|
this.layerStructure.destroy();
|
}
|
|
if(this.shelter){
|
this.shelter.destroy();
|
this.shelter = null;
|
}
|
|
this.inherited(arguments);
|
},
|
|
/*****************************
|
* Events
|
*****************************/
|
_onCollapse: function(layerData) {
|
var displayOfSubLayerUl = html.getStyle(layerData.subLayerNodeUl, 'display');
|
var collapsed = (displayOfSubLayerUl === "none") ? true : false;
|
if(collapsed) {
|
html.setStyle(layerData.subLayerNodeUl, 'display', 'block');
|
html.addClass(layerData.collapseSpan, 'opened');
|
} else {
|
html.setStyle(layerData.subLayerNodeUl, 'display', 'none');
|
html.removeClass(layerData.collapseSpan, 'opened');
|
}
|
|
this._setIconImage(layerData, collapsed);
|
|
if(!layerData.hasBeenOpened) {
|
this._createLayerNodes(layerData.layerNode.getSubNodes(), layerData.subLayerNodeUl);
|
layerData.hasBeenOpened = true;
|
}
|
|
},
|
|
_onCheckBoxChange: function(layerData, evt) {
|
this.layerStateController.setState(layerData.layerNode, this._getCheckBoxValue(layerData.checkBox));
|
this.emit('selection-change', layerData.layerNode, this._getCheckBoxValue(layerData.checkBox));
|
this._onTreeClick(layerData, evt);
|
},
|
|
_onLayerInfosChanged: function() {
|
/*jshint unused: false*/
|
// need to filter the layer.
|
this._createTree();
|
this.emit('update');
|
},
|
|
_onLayerInfosIsShowInMapChanged: function(){
|
/*jshint unused: false*/
|
// need to filter the layer.
|
this._createTree();
|
this.emit('update');
|
},
|
|
//to be override
|
//send 'tree-click' event for compatible with the LayerChooserFromMap
|
_onTreeClick: function(layerData, evt){
|
/*jshint unused: false*/
|
var item = {
|
name: layerData.layerNode.title || "",
|
parent: null,
|
layerInfo: layerData.layerNode._layerInfo,
|
type: null,
|
layerClass: null,
|
id: null,
|
isLeaf: layerData.layerNode.isLeaf(),
|
hasChildren: layerData.layerNode.isLeaf() ? false : true
|
};
|
this.emit('tree-click', item, null, evt);
|
}
|
});
|
|
LayerChooser.LayerStateController = declare(null, {
|
// get state for single layer
|
getState: function(layerNode) {
|
/*jshint unused: false*/
|
return true;
|
},
|
|
// set state for single layer
|
setState: function(layerNode, selected) {
|
/*jshint unused: false*/
|
return this;
|
},
|
|
restoreState: function(layerState, layerStructure) {
|
/*jshint unused: false*/
|
return this;
|
}
|
|
});
|
|
LayerChooser.LayerVisibilityStateController = declare(LayerChooser.LayerStateController, {
|
getState: function(layerNode) {
|
return layerNode.isToggledOn();
|
},
|
|
setState: function(layerNode, selected) {
|
/*jshint unused: false*/
|
layerNode.toggle();
|
return this;
|
},
|
|
restoreState: function(layerState, layerStructure) {
|
var options = {layerOptions: {}};
|
|
for (var id in layerState) {
|
if(layerState.hasOwnProperty(id) &&
|
(typeof layerState[id] !== 'function')) {
|
var state = layerState[id];
|
options.layerOptions[id] = {visible: state.selected};
|
}
|
}
|
|
layerStructure.restoreState(options);
|
return this;
|
}
|
});
|
LayerChooser.layerVisibilityStateController = new LayerChooser.LayerVisibilityStateController();
|
|
LayerChooser.LayerLegendStateController = declare(LayerChooser.LayerStateController, {
|
getState: function(layerNode) {
|
//return layerNode.isToggledOnLegendFromWebMap();
|
return layerNode.isShowLegend();
|
}
|
});
|
LayerChooser.layerLegendStateController = new LayerChooser.LayerLegendStateController();
|
|
return LayerChooser;
|
});
|
