///////////////////////////////////////////////////////////////////////////
|
// 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/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dijit/_WidgetBase',
|
'dojo/dom-geometry',
|
'dojo/dom-class',
|
'dojo/Evented',
|
'dojo/debounce'
|
],
|
function(declare, lang, array, _WidgetBase, domGeometry, domClass, Evented, debounce) {
|
var COMPONENT_NAME = 'jimu grid';
|
/**
|
* The structure of the this layout has one limitation:
|
* A stack only contains one component.
|
*/
|
return declare([_WidgetBase, Evented], {
|
'baseClass': 'jimu-dijit-gridlayout',
|
declaredClass: 'jimu.dijit.GridLayout',
|
|
container: null, // the container domNode of golden layout
|
layoutDefinition: null, // configuration of golden layout
|
components: null, // array of {id: string, dijit: dijit instance}
|
editable: false,
|
|
_layout: null, // instance of goldenLayout
|
_coordinates: null, // an object whose key is component id and value is component coordinate.
|
_isCreatingLayout: null,
|
|
postCreate: function(){
|
this.inherited(arguments);
|
this._isCreatingLayout = false;
|
this._createLayout(this.layoutDefinition);
|
},
|
|
restoreLayout: function(layoutDefinition) {
|
layoutDefinition = layoutDefinition || this.layoutDefinition;
|
this._createLayout(layoutDefinition);
|
},
|
|
destroy: function() {
|
array.forEach(this.components, function(component) {
|
component.dijit.destroy();
|
});
|
this._layout.destroy();
|
this.inherited(arguments);
|
},
|
|
getLayoutDefinition: function() {
|
var currentConfig = this._layout.toConfig();
|
return currentConfig.content;
|
},
|
|
resize: function() {
|
var box = domGeometry.getMarginBox(this.container);
|
this._layout.updateSize(box.w, box.h);
|
},
|
|
getComponentSize: function(componentId) {
|
var rootElem = this._layout.root.contentItems[0];
|
var contentItem = rootElem.getItemsById(componentId), container;
|
if (contentItem && contentItem.length > 0) {
|
container = contentItem[0].container;
|
return {
|
w: container.width,
|
h: container.height
|
};
|
}
|
return {
|
w: 0,
|
h: 0
|
};
|
},
|
|
getSize: function() {
|
return {
|
w: this._layout.width,
|
h: this._layout.height
|
};
|
},
|
|
/**
|
*
|
*/
|
setVisible: function(componentId, visible) {
|
var rootElem = this._layout.root.contentItems[0];
|
var contentItem = rootElem.getItemsById(componentId);
|
if (contentItem && contentItem.length > 0 && visible === false) {
|
this._hideComponent(contentItem[0]);
|
} else if ((!contentItem || contentItem.length === 0) && visible === true) {
|
this._showComponent(componentId);
|
}
|
},
|
|
highlightItem: function(componentId) {
|
var rootElem = this._layout.root.contentItems[0];
|
var contentItem = rootElem.getItemsById(componentId);
|
if (contentItem && contentItem.length > 0) {
|
contentItem[0].highlight();
|
}
|
},
|
|
unhighlightItem: function(componentId) {
|
var rootElem = this._layout.root.contentItems[0];
|
var contentItem = rootElem.getItemsById(componentId);
|
if (contentItem && contentItem.length > 0) {
|
contentItem[0].unhighlight();
|
}
|
},
|
|
_createLayout: function(layoutDefinition) {
|
if (this._isCreatingLayout) {
|
return;
|
}
|
this._coordinates = {};
|
this._isCreatingLayout = true;
|
var config = {
|
settings: {
|
hasHeaders: false,
|
resizeEnabled: this.editable,
|
reorderEnabled: this.editable,
|
selectionEnabled: this.editable,
|
highlightEnabled: this.editable
|
},
|
dimensions: {
|
borderWidth: 1,
|
dragProxyWidth: 0,
|
dragProxyHeight: 0
|
},
|
content: layoutDefinition
|
};
|
var oldLayout = this._layout;
|
|
require(['libs/goldenlayout/goldenlayout'], lang.hitch(this, function(GoldenLayout){
|
this._layout = new GoldenLayout(config, this.container);
|
this._layout.registerComponent(COMPONENT_NAME, lang.hitch(this, function(container, componentState){
|
var targetDijit;
|
container.parent.config.id = componentState.id;
|
array.some(this.components, function(item) {
|
if (item.id === componentState.id) {
|
targetDijit = item.dijit;
|
container.getElement().html(item.dijit.domNode);
|
return true;
|
}
|
}, this);
|
container.on('resize', debounce(lang.hitch(this, function() {
|
if (container.width > 0 && container.height > 0 && targetDijit &&
|
typeof targetDijit.resize === 'function') {
|
targetDijit.resize(container.width, container.height);
|
}
|
}), 200));
|
container.on('select', lang.hitch(this, function() {
|
if(this.editable) {
|
container.parent.select();
|
}
|
this.emit('mask-click', container.parent.config.id);
|
}));
|
}));
|
this._layout.on( 'initialised', lang.hitch(this, function(){
|
this._resetCoordinate();
|
this.emit("initialised");
|
this._isCreatingLayout = false;
|
if (oldLayout) {
|
oldLayout.destroy();
|
}
|
}));
|
this._layout.on('stateChanged', lang.hitch(this, function(){
|
this._resetCoordinate();
|
}));
|
this._layout.init();
|
|
if (!this.editable) {
|
domClass.add(this._layout.root.childElementContainer[0], 'viewonly');
|
}
|
domClass.add(this._layout.root.childElementContainer[0], 'jimu-dijit-gridlayout');
|
setTimeout(lang.hitch(this, this.resize), 100);
|
}));
|
},
|
|
_hideComponent: function(contentItem) {
|
if (contentItem.parent) {
|
// remove component but won't destroy it
|
contentItem.parent.removeChild(contentItem, true);
|
}
|
},
|
|
_showComponent: function(componentId) {
|
var component, coordinates, currentNode, config, rootItem, rootContentItem, actualIndex;
|
array.some(this.components, function(item) {
|
if (item.id === componentId) {
|
component = item;
|
return true;
|
}
|
}, this);
|
|
if (component) {
|
config = {
|
id: componentId,
|
type: 'component',
|
componentName: COMPONENT_NAME,
|
componentState: {
|
id: componentId
|
}
|
};
|
coordinates = this._coordinates[componentId];
|
rootItem = this._layout.root;
|
if (coordinates) {
|
// rootItem.type may be stack is there is only one component
|
if (coordinates[0].type !== rootItem.contentItems[0].type) {
|
rootContentItem = rootItem.contentItems[0];
|
rootItem.replaceChild(rootContentItem, {
|
type: coordinates[0].type,
|
content: []
|
});
|
rootItem.contentItems[0].addChild(rootContentItem);
|
}
|
|
currentNode = rootItem;
|
array.forEach(coordinates, function(pos) {
|
actualIndex = pos.index <= currentNode.contentItems.length ?
|
pos.index : currentNode.contentItems.length;
|
if (pos.type === 'component') {
|
currentNode.addChild(config, actualIndex);
|
} else { //stack, column or row
|
if (pos.type === 'stack' ||
|
currentNode.contentItems[pos.index].type !== pos.type) {
|
currentNode.addChild({
|
type: pos.type,
|
content: []
|
}, actualIndex);
|
}
|
currentNode = currentNode.contentItems[actualIndex];
|
}
|
}, this);
|
} else {
|
if (rootItem.contentItems[0].type === 'stack') {
|
rootContentItem = rootItem.contentItems[0];
|
rootItem.replaceChild(rootContentItem, {
|
type: 'column',
|
content: []
|
});
|
rootItem.contentItems[0].addChild(rootContentItem);
|
}
|
rootItem.contentItems[0].addChild(config);
|
}
|
}
|
},
|
|
/**
|
* Calculate the coordinate of each component
|
*/
|
_resetCoordinate: function() {
|
var components = this._layout.root.getItemsByType('component');
|
var next = function(item, coordinates) {
|
var parent = item.parent;
|
if (!parent) {
|
return;
|
}
|
// get the index of the item in the contentItems array of its parent
|
array.some(parent.contentItems, function(sibliingItem, index) {
|
if (sibliingItem === item) {
|
coordinates.push({
|
type: sibliingItem.type,
|
index: index
|
});
|
return true;
|
}
|
});
|
next(parent, coordinates);
|
};
|
array.forEach(components, function(component) {
|
var coordinates = [];
|
next(component, coordinates);
|
this._coordinates[component.config.id] = coordinates.reverse();
|
}, this);
|
}
|
});
|
});
|
