TB-53: Fixed handling of mouse events on dashboard widgets.

Igor Kulikov · mp-loki
1 parent 12f0fd6c
Showing 2 changed files with 22 additions and 61 deletions
ui/src/app/components/dashboard.directive.js
ui/src/app/components/dashboard.tpl.html
--- a/ui/src/app/components/dashboard.directive.js
View file @4feb781
+++ b/ui/src/app/components/dashboard.directive.js
View file @4feb781
@@ -87,8 +87,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     var highlightedMode = false;
     var highlightedWidget = null;
     var selectedWidget = null;
-    var mouseDownWidget = -1;
-    var widgetMouseMoved = false;
     var gridsterParent = $('#gridster-parent', $element);
     var gridsterElement = angular.element($('#gridster-child', gridsterParent));
@@ -152,9 +150,9 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     vm.resetHighlight = resetHighlight;
     vm.onWidgetFullscreenChanged = onWidgetFullscreenChanged;
+
     vm.widgetMouseDown = widgetMouseDown;
-    vm.widgetMouseMove = widgetMouseMove;
-    vm.widgetMouseUp = widgetMouseUp;
+    vm.widgetClicked = widgetClicked;
     vm.widgetSizeX = widgetSizeX;
     vm.widgetSizeY = widgetSizeY;
@@ -185,22 +183,22 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     vm.dashboardTimewindowApi = {
         onResetTimewindow: function() {
             if (vm.originalDashboardTimewindow) {
-                vm.dashboardTimewindow = angular.copy(vm.originalDashboardTimewindow);
-                vm.originalDashboardTimewindow = null;
+                $timeout(function() {
+                    vm.dashboardTimewindow = angular.copy(vm.originalDashboardTimewindow);
+                    vm.originalDashboardTimewindow = null;
+                }, 0);
             }
         },
         onUpdateTimewindow: function(startTimeMs, endTimeMs) {
             if (!vm.originalDashboardTimewindow) {
                 vm.originalDashboardTimewindow = angular.copy(vm.dashboardTimewindow);
             }
-            vm.dashboardTimewindow = timeService.toHistoryTimewindow(vm.dashboardTimewindow, startTimeMs, endTimeMs);
+            $timeout(function() {
+                vm.dashboardTimewindow = timeService.toHistoryTimewindow(vm.dashboardTimewindow, startTimeMs, endTimeMs);
+            }, 0);
         }
     };
-    //$element[0].onmousemove=function(){
-    //    widgetMouseMove();
-   // }
-
     //TODO: widgets visibility
     /*gridsterParent.scroll(function () {
         updateVisibleRect();
@@ -350,7 +348,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     }
     function loadDashboard() {
-        resetWidgetClick();
         $timeout(function () {
             if (vm.loadWidgets) {
                 var promise = vm.loadWidgets();
@@ -434,42 +431,17 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
         return gridsterElement && gridsterElement[0] === gridster.$element[0];
     }
-    function resetWidgetClick () {
-        mouseDownWidget = -1;
-        widgetMouseMoved = false;
-    }
-
     function onWidgetFullscreenChanged(expanded, widget) {
         vm.isWidgetExpanded = expanded;
         $scope.$broadcast('onWidgetFullscreenChanged', vm.isWidgetExpanded, widget);
     }
     function widgetMouseDown ($event, widget) {
-        mouseDownWidget = widget;
-        widgetMouseMoved = false;
         if (vm.onWidgetMouseDown) {
             vm.onWidgetMouseDown({event: $event, widget: widget});
         }
     }
-    function widgetMouseMove () {
-        if (mouseDownWidget) {
-            widgetMouseMoved = true;
-        }
-    }
-
-    function widgetMouseUp ($event, widget) {
-        $timeout(function () {
-            if (!widgetMouseMoved && mouseDownWidget) {
-                if (widget === mouseDownWidget) {
-                    widgetClicked($event, widget);
-                }
-            }
-            mouseDownWidget = null;
-            widgetMouseMoved = false;
-        }, 0);
-    }
-
     function widgetClicked ($event, widget) {
         if ($event) {
             $event.stopPropagation();
@@ -518,7 +490,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     }
     function editWidget ($event, widget) {
-        resetWidgetClick();
         if ($event) {
             $event.stopPropagation();
         }
@@ -528,7 +499,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     }
     function exportWidget ($event, widget) {
-        resetWidgetClick();
         if ($event) {
             $event.stopPropagation();
         }
@@ -538,7 +508,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     }
     function removeWidget($event, widget) {
-        resetWidgetClick();
         if ($event) {
             $event.stopPropagation();
         }
@@ -548,27 +517,21 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
     }
     function highlightWidget(widget, delay) {
-        highlightedMode = true;
-        highlightedWidget = widget;
-        if (vm.gridster) {
-            var item = $('.gridster-item', vm.gridster.$element)[vm.widgets.indexOf(widget)];
-            if (item) {
-                var height = $(item).outerHeight(true);
-                var rectHeight = gridsterParent.height();
-                var offset = (rectHeight - height) / 2;
-                var scrollTop = item.offsetTop;
-                if (offset > 0) {
-                    scrollTop -= offset;
-                }
-                gridsterParent.animate({
-                    scrollTop: scrollTop
-                }, delay);
-            }
+        if (!highlightedMode || highlightedWidget != widget) {
+            highlightedMode = true;
+            highlightedWidget = widget;
+            scrollToWidget(widget, delay);
         }
     }
     function selectWidget(widget, delay) {
-        selectedWidget = widget;
+        if (selectedWidget != widget) {
+            selectedWidget = widget;
+            scrollToWidget(widget, delay);
+        }
+    }
+
+    function scrollToWidget(widget, delay) {
         if (vm.gridster) {
             var item = $('.gridster-item', vm.gridster.$element)[vm.widgets.indexOf(widget)];
             if (item) {
--- a/ui/src/app/components/dashboard.tpl.html
View file @4feb781
+++ b/ui/src/app/components/dashboard.tpl.html
View file @4feb781
@@ -37,9 +37,7 @@
 										           'tb-not-highlighted': vm.isNotHighlighted(widget),
 										           'md-whiteframe-4dp': vm.dropWidgetShadow(widget)}"
 										tb-mousedown="vm.widgetMouseDown($event, widget)"
-										tb-mousemove="vm.widgetMouseMove($event, widget)"
-										tb-mouseup="vm.widgetMouseUp($event, widget)"
-										ng-click=""
+										ng-click="vm.widgetClicked($event, widget)"
 										tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
 									    ng-style="{cursor: 'pointer',
             									   color: vm.widgetColor(widget),
@@ -49,7 +47,7 @@
 									<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead">{{widget.config.title}}</span>
 									<tb-timewindow aggregation ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
 								</div>
-								<div class="tb-widget-actions" layout="row" layout-align="start center">
+								<div class="tb-widget-actions" layout="row" layout-align="start center" tb-mousedown="$event.stopPropagation()">
 									<md-button id="expand-button"
 											   ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)"
 											   aria-label="{{ 'fullscreen.fullscreen' | translate }}"