tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Improve dashboard layout calculations.

pull/481/head
Igor Kulikov 9 years ago
parent
ab34473224
commit
1b525cfed7
1 changed files with 75 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 137
      ui/src/app/components/dashboard.directive.js

137
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,73 +235,67 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
removeResizeListener(gridsterParent[0], onGridsterParentResize); // eslint-disable-line no-undef
});
watchWidgets();
function onGridsterParentResize() {
if (gridsterParent.height() && autofillHeight()) {
updateMobileOpts();
$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);
}
}
function watchWidgets() {
$scope.widgetsCollectionWatch = $scope.$watchCollection('vm.widgets', function () {
if (vm.skipInitialWidgetsWatch) {
$timeout(function() { vm.skipInitialWidgetsWatch = false; });
return;
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;
}
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];
}
for (var widgetId in vm.widgetLayoutInfo) {
if (ids.indexOf(widgetId) === -1) {
delete vm.widgetLayoutInfo[widgetId];
}
}
sortWidgets();
$mdUtil.nextTick(function () {
if (autofillHeight()) {
updateMobileOpts();
}
$mdUtil.nextTick(function () {
sortWidgets();
if (autofillHeight()) {
updateMobileOpts();
}
});
});
}
});
function stopWatchWidgets() {
if ($scope.widgetsCollectionWatch) {
$scope.widgetsCollectionWatch();
$scope.widgetsCollectionWatch = null;
function onGridsterParentResize() {
if (gridsterParent.height() && autofillHeight()) {
updateMobileOpts();
}
}
//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;
}

Write Preview
Loading…
Cancel
Save