UI: Improve dashboard layout calculations.

ui/src/app/components/dashboard.directive.js

@@ -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;
     }