|
|
|
|
@ -189,90 +189,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
module.directive('panelResizer', function($rootScope) { |
|
|
|
|
return { |
|
|
|
|
restrict: 'E', |
|
|
|
|
template: '<span class="resize-panel-handle icon-gf icon-gf-grabber"></span>', |
|
|
|
|
link: function(scope, elem) { |
|
|
|
|
var resizing = false; |
|
|
|
|
var lastPanel; |
|
|
|
|
var ctrl = scope.ctrl; |
|
|
|
|
var handleOffset; |
|
|
|
|
var originalHeight; |
|
|
|
|
var originalWidth; |
|
|
|
|
var maxWidth; |
|
|
|
|
|
|
|
|
|
function dragStartHandler(e) { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
resizing = true; |
|
|
|
|
|
|
|
|
|
handleOffset = $(e.target).offset(); |
|
|
|
|
originalHeight = parseInt(ctrl.row.height); |
|
|
|
|
originalWidth = ctrl.panel.span; |
|
|
|
|
maxWidth = $(document).width(); |
|
|
|
|
|
|
|
|
|
lastPanel = ctrl.row.panels[ctrl.row.panels.length - 1]; |
|
|
|
|
|
|
|
|
|
$('body').on('mousemove', moveHandler); |
|
|
|
|
$('body').on('mouseup', dragEndHandler); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function moveHandler(e) { |
|
|
|
|
ctrl.row.height = Math.round(originalHeight + (e.pageY - handleOffset.top)); |
|
|
|
|
ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12); |
|
|
|
|
ctrl.panel.span = Math.min(Math.max(ctrl.panel.span, 1), 12); |
|
|
|
|
|
|
|
|
|
ctrl.row.updateRowSpan(); |
|
|
|
|
var rowSpan = ctrl.row.span; |
|
|
|
|
|
|
|
|
|
// auto adjust other panels
|
|
|
|
|
if (Math.floor(rowSpan) < 14) { |
|
|
|
|
// last panel should not push row down
|
|
|
|
|
if (lastPanel === ctrl.panel && rowSpan > 12) { |
|
|
|
|
lastPanel.span -= rowSpan - 12; |
|
|
|
|
} else if (lastPanel !== ctrl.panel) { |
|
|
|
|
// reduce width of last panel so total in row is 12
|
|
|
|
|
lastPanel.span = lastPanel.span - (rowSpan - 12); |
|
|
|
|
lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ctrl.row.panelSpanChanged(true); |
|
|
|
|
|
|
|
|
|
scope.$apply(function() { |
|
|
|
|
ctrl.render(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function dragEndHandler() { |
|
|
|
|
ctrl.panel.span = Math.round(ctrl.panel.span); |
|
|
|
|
if (lastPanel) { |
|
|
|
|
lastPanel.span = Math.round(lastPanel.span); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// first digest to propagate panel width change
|
|
|
|
|
// then render
|
|
|
|
|
$rootScope.$apply(function() { |
|
|
|
|
ctrl.row.panelSpanChanged(); |
|
|
|
|
setTimeout(function() { |
|
|
|
|
$rootScope.$broadcast('render'); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('body').off('mousemove', moveHandler); |
|
|
|
|
$('body').off('mouseup', dragEndHandler); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
elem.on('mousedown', dragStartHandler); |
|
|
|
|
|
|
|
|
|
var unbind = scope.$on("$destroy", function() { |
|
|
|
|
elem.off('mousedown', dragStartHandler); |
|
|
|
|
unbind(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
module.directive('panelHelpCorner', function($rootScope) { |
|
|
|
|
return { |
|
|
|
|
restrict: 'E', |
|
|
|
|
|
Torkel Ödegaard
8 years ago