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

Merge pull request #111 from thingsboard/bug/TB-53

Browse Source 
TB-53: Fixed handling of mouse events on dashboard widgets.
This commit is contained in:
Igor Kulikov 2017-04-18 19:07:08 +03:00 committed by GitHub
commit 6c6f348da0
2 changed files with 22 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) {

6
ui/src/app/components/dashboard.tpl.html
View File

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