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

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

Browse Source
This commit is contained in:
Igor Kulikov 2017-04-18 19:05:46 +03:00
parent 8e51b5eb34
commit f93ef8b748
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 highlightedMode = false;
var highlightedWidget = null; var highlightedWidget = null;
var selectedWidget = null; var selectedWidget = null;
var mouseDownWidget = -1;
var widgetMouseMoved = false;
var gridsterParent = $('#gridster-parent', $element); var gridsterParent = $('#gridster-parent', $element);
var gridsterElement = angular.element($('#gridster-child', gridsterParent)); var gridsterElement = angular.element($('#gridster-child', gridsterParent));
@ -152,9 +150,9 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
vm.resetHighlight = resetHighlight; vm.resetHighlight = resetHighlight;
vm.onWidgetFullscreenChanged = onWidgetFullscreenChanged; vm.onWidgetFullscreenChanged = onWidgetFullscreenChanged;
vm.widgetMouseDown = widgetMouseDown; vm.widgetMouseDown = widgetMouseDown;
vm.widgetMouseMove = widgetMouseMove; vm.widgetClicked = widgetClicked;
vm.widgetMouseUp = widgetMouseUp;
vm.widgetSizeX = widgetSizeX; vm.widgetSizeX = widgetSizeX;
vm.widgetSizeY = widgetSizeY; vm.widgetSizeY = widgetSizeY;
@ -185,22 +183,22 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
vm.dashboardTimewindowApi = { vm.dashboardTimewindowApi = {
onResetTimewindow: function() { onResetTimewindow: function() {
if (vm.originalDashboardTimewindow) { if (vm.originalDashboardTimewindow) {
vm.dashboardTimewindow = angular.copy(vm.originalDashboardTimewindow); $timeout(function() {
vm.originalDashboardTimewindow = null; vm.dashboardTimewindow = angular.copy(vm.originalDashboardTimewindow);
vm.originalDashboardTimewindow = null;
}, 0);
} }
}, },
onUpdateTimewindow: function(startTimeMs, endTimeMs) { onUpdateTimewindow: function(startTimeMs, endTimeMs) {
if (!vm.originalDashboardTimewindow) { if (!vm.originalDashboardTimewindow) {
vm.originalDashboardTimewindow = angular.copy(vm.dashboardTimewindow); 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 //TODO: widgets visibility
/*gridsterParent.scroll(function () { /*gridsterParent.scroll(function () {
updateVisibleRect(); updateVisibleRect();
@ -350,7 +348,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
} }
function loadDashboard() { function loadDashboard() {
resetWidgetClick();
$timeout(function () { $timeout(function () {
if (vm.loadWidgets) { if (vm.loadWidgets) {
var promise = 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]; return gridsterElement && gridsterElement[0] === gridster.$element[0];
} }
function resetWidgetClick () {
mouseDownWidget = -1;
widgetMouseMoved = false;
}
function onWidgetFullscreenChanged(expanded, widget) { function onWidgetFullscreenChanged(expanded, widget) {
vm.isWidgetExpanded = expanded; vm.isWidgetExpanded = expanded;
$scope.$broadcast('onWidgetFullscreenChanged', vm.isWidgetExpanded, widget); $scope.$broadcast('onWidgetFullscreenChanged', vm.isWidgetExpanded, widget);
} }
function widgetMouseDown ($event, widget) { function widgetMouseDown ($event, widget) {
mouseDownWidget = widget;
widgetMouseMoved = false;
if (vm.onWidgetMouseDown) { if (vm.onWidgetMouseDown) {
vm.onWidgetMouseDown({event: $event, widget: widget}); 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) { function widgetClicked ($event, widget) {
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
@ -518,7 +490,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
} }
function editWidget ($event, widget) { function editWidget ($event, widget) {
resetWidgetClick();
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
@ -528,7 +499,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
} }
function exportWidget ($event, widget) { function exportWidget ($event, widget) {
resetWidgetClick();
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
@ -538,7 +508,6 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
} }
function removeWidget($event, widget) { function removeWidget($event, widget) {
resetWidgetClick();
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
@ -548,27 +517,21 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, t
} }
function highlightWidget(widget, delay) { function highlightWidget(widget, delay) {
highlightedMode = true; if (!highlightedMode || highlightedWidget != widget) {
highlightedWidget = widget; highlightedMode = true;
if (vm.gridster) { highlightedWidget = widget;
var item = $('.gridster-item', vm.gridster.$element)[vm.widgets.indexOf(widget)]; scrollToWidget(widget, delay);
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);
}
} }
} }
function selectWidget(widget, delay) { function selectWidget(widget, delay) {
selectedWidget = widget; if (selectedWidget != widget) {
selectedWidget = widget;
scrollToWidget(widget, delay);
}
}
function scrollToWidget(widget, delay) {
if (vm.gridster) { if (vm.gridster) {
var item = $('.gridster-item', vm.gridster.$element)[vm.widgets.indexOf(widget)]; var item = $('.gridster-item', vm.gridster.$element)[vm.widgets.indexOf(widget)];
if (item) { if (item) {

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

@ -37,9 +37,7 @@
'tb-not-highlighted': vm.isNotHighlighted(widget), 'tb-not-highlighted': vm.isNotHighlighted(widget),
'md-whiteframe-4dp': vm.dropWidgetShadow(widget)}" 'md-whiteframe-4dp': vm.dropWidgetShadow(widget)}"
tb-mousedown="vm.widgetMouseDown($event, widget)" tb-mousedown="vm.widgetMouseDown($event, widget)"
tb-mousemove="vm.widgetMouseMove($event, widget)" ng-click="vm.widgetClicked($event, widget)"
tb-mouseup="vm.widgetMouseUp($event, widget)"
ng-click=""
tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)" tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
ng-style="{cursor: 'pointer', ng-style="{cursor: 'pointer',
color: vm.widgetColor(widget), 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> <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> <tb-timewindow aggregation ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
</div> </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" <md-button id="expand-button"
ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)" ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)"
aria-label="{{ 'fullscreen.fullscreen' | translate }}" aria-label="{{ 'fullscreen.fullscreen' | translate }}"