Fix widgets visibility detection.

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

@@ -161,10 +161,20 @@ function DashboardController($scope, $rootScope, $element, $timeout, $log, toast
 
     $scope.$watch('vm.columns', function () {
         vm.gridsterOpts.columns = vm.columns ? vm.columns : 24;
+        if (gridster) {
+            gridster.columns = vm.columns;
+            updateGridsterParams();
+        }
+        updateVisibleRect();
     });
 
     $scope.$watch('vm.margins', function () {
         vm.gridsterOpts.margins = vm.margins ? vm.margins : [10, 10];
+        if (gridster) {
+            gridster.margins = vm.margins;
+            updateGridsterParams();
+        }
+        updateVisibleRect();
     });
 
     $scope.$watch('vm.isEdit', function () {
@@ -230,6 +240,26 @@ function DashboardController($scope, $rootScope, $element, $timeout, $log, toast
         }, 0, false);
     }
 
+    function updateGridsterParams() {
+        if (gridster) {
+            if (gridster.colWidth === 'auto') {
+                gridster.curColWidth = (gridster.curWidth + (gridster.outerMargin ? -gridster.margins[1] : gridster.margins[1])) / gridster.columns;
+            } else {
+                gridster.curColWidth = gridster.colWidth;
+            }
+            gridster.curRowHeight = gridster.rowHeight;
+            if (angular.isString(gridster.rowHeight)) {
+                if (gridster.rowHeight === 'match') {
+                    gridster.curRowHeight = Math.round(gridster.curColWidth);
+                } else if (gridster.rowHeight.indexOf('*') !== -1) {
+                    gridster.curRowHeight = Math.round(gridster.curColWidth * gridster.rowHeight.replace('*', '').replace(' ', ''));
+                } else if (gridster.rowHeight.indexOf('/') !== -1) {
+                    gridster.curRowHeight = Math.round(gridster.curColWidth / gridster.rowHeight.replace('/', '').replace(' ', ''));
+                }
+            }
+        }
+    }
+
     function updateVisibleRect (force, containerResized) {
         if (gridster) {
             var position = $(gridster.$element).position()

ui/src/app/components/widget.controller.js

@@ -159,6 +159,7 @@ export default function WidgetController($scope, $timeout, $window, $element, $q
     };
 
     vm.gridsterItemInitialized = gridsterItemInitialized;
+    vm.visibleRectChanged = visibleRectChanged;
 
     function gridsterItemInitialized(item) {
         if (item) {
@@ -167,6 +168,11 @@ export default function WidgetController($scope, $timeout, $window, $element, $q
         }
     }
 
+    function visibleRectChanged(newVisibleRect) {
+        visibleRect = newVisibleRect;
+        updateVisibility();
+    }
+
     initWidget();
 
     function initWidget() {
@@ -221,11 +227,6 @@ export default function WidgetController($scope, $timeout, $window, $element, $q
             $scope.$emit("widgetPositionChanged", widget);
         });
 
-        $scope.$on('visibleRectChanged', function (event, newVisibleRect) {
-            visibleRect = newVisibleRect;
-            updateVisibility();
-        });
-
         $scope.$on('onWidgetFullscreenChanged', function(event, isWidgetExpanded, fullscreenWidget) {
             if (widget === fullscreenWidget) {
                 onRedraw(0);

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

@@ -34,12 +34,19 @@ function Widget($controller, $compile, widgetService) {
             var widget = locals.widget;
             var gridsterItem;
 
+            scope.$on('visibleRectChanged', function (event, newVisibleRect) {
+                locals.visibleRect = newVisibleRect;
+                if (widgetController) {
+                    widgetController.visibleRectChanged(newVisibleRect);
+                }
+            });
+
             scope.$on('gridster-item-initialized', function (event, item) {
                 gridsterItem = item;
                 if (widgetController) {
                     widgetController.gridsterItemInitialized(gridsterItem);
                 }
-            })
+            });
 
             elem.html('<div flex layout="column" layout-align="center center" style="height: 100%;">' +
                       '     <md-progress-circular md-mode="indeterminate" class="md-accent md-hue-2" md-diameter="120"></md-progress-circular>' +