dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve dashboard layout calculations.

Browse Source
This commit is contained in:
Igor Kulikov 2017-12-13 20:32:08 +02:00
parent ab34473224
commit 1b525cfed7
1 changed files with 77 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
ui/src/app/components/dashboard.directive.js
View File

@ -140,6 +140,8 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
vm.widgetLayoutInfo = {
};
vm.widgetIds = [];
vm.widgetItemMap = {
sizeX: 'vm.widgetLayoutInfo[widget.id].sizeX',
sizeY: 'vm.widgetLayoutInfo[widget.id].sizeY',
@ -233,7 +235,60 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
removeResizeListener(gridsterParent[0], onGridsterParentResize); // eslint-disable-line no-undef
});
watchWidgets();
$scope.$watchCollection('vm.widgets', function () {
var ids = [];
for (var i=0;i<vm.widgets.length;i++) {
var widget = vm.widgets[i];
if (!widget.id) {
widget.id = utils.guid();
}
ids.push(widget.id);
}
ids.sort(function (id1, id2) {
return id1.localeCompare(id2);
});
if (angular.equals(ids, vm.widgetIds)) {
return;
}
vm.widgetIds = ids;
for (i=0;i<vm.widgets.length;i++) {
widget = vm.widgets[i];
var layoutInfoObject = vm.widgetLayoutInfo[widget.id];
if (!layoutInfoObject) {
layoutInfoObject = {
widget: widget
};
Object.defineProperty(layoutInfoObject, 'sizeX', {
get: function() { return widgetSizeX(this.widget) },
set: function(newSizeX) { setWidgetSizeX(this.widget, newSizeX)}
});
Object.defineProperty(layoutInfoObject, 'sizeY', {
get: function() { return widgetSizeY(this.widget) },
set: function(newSizeY) { setWidgetSizeY(this.widget, newSizeY)}
});
Object.defineProperty(layoutInfoObject, 'row', {
get: function() { return widgetRow(this.widget) },
set: function(newRow) { setWidgetRow(this.widget, newRow)}
});
Object.defineProperty(layoutInfoObject, 'col', {
get: function() { return widgetCol(this.widget) },
set: function(newCol) { setWidgetCol(this.widget, newCol)}
});
vm.widgetLayoutInfo[widget.id] = layoutInfoObject;
}
}
for (var widgetId in vm.widgetLayoutInfo) {
if (ids.indexOf(widgetId) === -1) {
delete vm.widgetLayoutInfo[widgetId];
}
}
sortWidgets();
$mdUtil.nextTick(function () {
if (autofillHeight()) {
updateMobileOpts();
}
});
});
function onGridsterParentResize() {
if (gridsterParent.height() && autofillHeight()) {
@ -241,65 +296,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
}
}
function watchWidgets() {
$scope.widgetsCollectionWatch = $scope.$watchCollection('vm.widgets', function () {
if (vm.skipInitialWidgetsWatch) {
$timeout(function() { vm.skipInitialWidgetsWatch = false; });
return;
}
var ids = [];
for (var i=0;i<vm.widgets.length;i++) {
var widget = vm.widgets[i];
if (!widget.id) {
widget.id = utils.guid();
}
ids.push(widget.id);
var layoutInfoObject = vm.widgetLayoutInfo[widget.id];
if (!layoutInfoObject) {
layoutInfoObject = {
widget: widget
};
Object.defineProperty(layoutInfoObject, 'sizeX', {
get: function() { return widgetSizeX(this.widget) },
set: function(newSizeX) { setWidgetSizeX(this.widget, newSizeX)}
});
Object.defineProperty(layoutInfoObject, 'sizeY', {
get: function() { return widgetSizeY(this.widget) },
set: function(newSizeY) { setWidgetSizeY(this.widget, newSizeY)}
});
Object.defineProperty(layoutInfoObject, 'row', {
get: function() { return widgetRow(this.widget) },
set: function(newRow) { setWidgetRow(this.widget, newRow)}
});
Object.defineProperty(layoutInfoObject, 'col', {
get: function() { return widgetCol(this.widget) },
set: function(newCol) { setWidgetCol(this.widget, newCol)}
});
vm.widgetLayoutInfo[widget.id] = layoutInfoObject;
}
}
for (var widgetId in vm.widgetLayoutInfo) {
if (ids.indexOf(widgetId) === -1) {
delete vm.widgetLayoutInfo[widgetId];
}
}
$mdUtil.nextTick(function () {
sortWidgets();
if (autofillHeight()) {
updateMobileOpts();
}
});
});
}
function stopWatchWidgets() {
if ($scope.widgetsCollectionWatch) {
$scope.widgetsCollectionWatch();
$scope.widgetsCollectionWatch = null;
}
}
//TODO: widgets visibility
/*gridsterParent.scroll(function () {
updateVisibleRect();
@ -346,10 +342,12 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
$scope.$watch(function() { return $mdMedia('gt-sm'); }, function() {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.isMobile', function () {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.autofillHeight', function () {
@ -366,6 +364,12 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
$scope.$watch('vm.isMobileDisabled', function () {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.widgetLayouts', function () {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.columns', function () {
@ -410,6 +414,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
$scope.$on('gridster-resized', function (event, sizes, theGridster) {
if (checkIsLocalGridsterElement(theGridster)) {
vm.gridster = theGridster;
setupGridster(vm.gridster);
vm.isResizing = false;
//TODO: widgets visibility
//updateVisibleRect(false, true);
@ -419,6 +424,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
$scope.$on('gridster-mobile-changed', function (event, theGridster) {
if (checkIsLocalGridsterElement(theGridster)) {
vm.gridster = theGridster;
setupGridster(vm.gridster);
detectRowSize(vm.gridster.isMobile).then(
function(rowHeight) {
if (vm.gridsterOpts.rowHeight != rowHeight) {
@ -517,18 +523,15 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
loadDashboard();
function sortWidgets() {
stopWatchWidgets();
vm.widgets.sort(function (widget1, widget2) {
var row1 = widgetOrder(widget1);
var row2 = widgetOrder(widget2);
var res = row1 - row2;
if (res === 0) {
res = widget1.col - widget2.col;
res = widgetCol(widget1) - widgetCol(widget2);
}
return res;
});
vm.skipInitialWidgetsWatch = true;
watchWidgets();
}
function reload() {
@ -1037,6 +1040,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
$scope.gridsterScopeWatcher = null;
var gridsterScope = gridsterElement.scope();
vm.gridster = gridsterScope.gridster;
setupGridster(vm.gridster);
if (vm.onInit) {
vm.onInit({dashboard: vm});
}
@ -1046,6 +1050,15 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
});
}
function setupGridster(gridster) {
if (gridster) {
if (!gridster.origMoveOverlappingItems) {
gridster.origMoveOverlappingItems = gridster.moveOverlappingItems;
gridster.moveOverlappingItems = () => {};
}
}
}
function loading() {
return !vm.ignoreLoading && $rootScope.loading;
}