mirror of https://github.com/grafana/grafana
Torkel Ödegaard
8 years ago
parent
207773e07e
commit
10a3504309
@ -1,11 +1,62 @@ |
|||||||
|
import {Emitter} from 'app/core/core'; |
||||||
|
|
||||||
export interface PanelModel { |
export interface GridPos { |
||||||
id: number; |
|
||||||
x: number; |
x: number; |
||||||
y: number; |
y: number; |
||||||
width: number; |
w: number; |
||||||
height: number; |
h: number; |
||||||
|
} |
||||||
|
|
||||||
|
const notPersistedProperties: {[str: string]: boolean} = { |
||||||
|
"model": true, |
||||||
|
"events": true, |
||||||
|
}; |
||||||
|
|
||||||
|
export class PanelModel { |
||||||
|
id: number; |
||||||
|
gridPos: GridPos; |
||||||
type: string; |
type: string; |
||||||
title: string; |
title: string; |
||||||
|
events: Emitter; |
||||||
|
|
||||||
|
constructor(private model) { |
||||||
|
// copy properties from persisted model
|
||||||
|
for (var property in model) { |
||||||
|
this[property] = model[property]; |
||||||
|
} |
||||||
|
|
||||||
|
this.events = new Emitter(); |
||||||
|
} |
||||||
|
|
||||||
|
getSaveModel() { |
||||||
|
this.model = {}; |
||||||
|
for (var property in this) { |
||||||
|
if (notPersistedProperties[property] || !this.hasOwnProperty(property)) { |
||||||
|
console.log('PanelModel.getSaveModel() skiping property', property); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
this.model[property] = this[property]; |
||||||
|
} |
||||||
|
return this.model; |
||||||
|
} |
||||||
|
|
||||||
|
updateGridPos(newPos: GridPos) { |
||||||
|
let sizeChanged = false; |
||||||
|
|
||||||
|
if (this.gridPos.w !== newPos.w || this.gridPos.h !== newPos.h) { |
||||||
|
sizeChanged = true; |
||||||
|
} |
||||||
|
|
||||||
|
this.gridPos.x = newPos.x; |
||||||
|
this.gridPos.y = newPos.y; |
||||||
|
this.gridPos.w = newPos.w; |
||||||
|
this.gridPos.h = newPos.h; |
||||||
|
|
||||||
|
if (sizeChanged) { |
||||||
|
console.log('PanelModel sizeChanged event and render events fired'); |
||||||
|
this.events.emit('panel-size-changed'); |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
|
|||||||
@ -1,211 +0,0 @@ |
|||||||
// ///<reference path="../../../headers/common.d.ts" />
|
|
||||||
//
|
|
||||||
// import coreModule from 'app/core/core_module';
|
|
||||||
// import {CELL_HEIGHT, CELL_VMARGIN} from '../model';
|
|
||||||
//
|
|
||||||
// import 'jquery-ui';
|
|
||||||
// import 'gridstack/dist/jquery.jQueryUI';
|
|
||||||
// import 'gridstack';
|
|
||||||
//
|
|
||||||
// const template = `
|
|
||||||
// <div class="grid-stack">
|
|
||||||
// <dash-grid-item ng-repeat="panel in ctrl.dashboard.panels track by panel.id"
|
|
||||||
// class="grid-stack-item"
|
|
||||||
// grid-ctrl="ctrl"
|
|
||||||
// panel="panel">
|
|
||||||
// <plugin-component type="panel" class="grid-stack-item-content">
|
|
||||||
// </plugin-component>
|
|
||||||
// </dash-grid-item>
|
|
||||||
// </div>
|
|
||||||
// `;
|
|
||||||
//
|
|
||||||
// var rowIndex = 0;
|
|
||||||
//
|
|
||||||
// export class GridCtrl {
|
|
||||||
// options: any;
|
|
||||||
// dashboard: any;
|
|
||||||
// panels: any;
|
|
||||||
// gridstack: any;
|
|
||||||
// gridElem: any;
|
|
||||||
// isInitialized: boolean;
|
|
||||||
// isDestroyed: boolean;
|
|
||||||
// index: number;
|
|
||||||
// changeRenderPromise: any;
|
|
||||||
//
|
|
||||||
// #<{(|* @ngInject |)}>#
|
|
||||||
// constructor(private $scope, private $element, private $timeout) {
|
|
||||||
// console.log(this.dashboard);
|
|
||||||
// this.index = rowIndex;
|
|
||||||
// rowIndex += 1;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// init() {
|
|
||||||
// this.gridElem = this.$element.find('.grid-stack');
|
|
||||||
//
|
|
||||||
// this.gridstack = this.gridElem.gridstack({
|
|
||||||
// animate: true,
|
|
||||||
// cellHeight: CELL_HEIGHT,
|
|
||||||
// verticalMargin: CELL_VMARGIN,
|
|
||||||
// acceptWidgets: '.grid-stack-item',
|
|
||||||
// handle: '.grid-drag-handle'
|
|
||||||
// }).data('gridstack');
|
|
||||||
//
|
|
||||||
// this.isInitialized = true;
|
|
||||||
//
|
|
||||||
// this.gridElem.on('added', (e, items) => {
|
|
||||||
// for (let item of items) {
|
|
||||||
// this.onGridStackItemAdded(item);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// this.gridElem.on('removed', (e, items) => {
|
|
||||||
// for (let item of items) {
|
|
||||||
// this.onGridStackItemRemoved(item);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// this.gridElem.on('change', (e, items) => {
|
|
||||||
// this.$timeout(() => this.onGridStackItemsChanged(items), 50);
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// onGridStackItemAdded(item) {
|
|
||||||
// console.log('row: ' + this.index + ' item added', item);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// onGridStackItemRemoved(item) {
|
|
||||||
// console.log('row: ' + this.index + ' item removed', item.id, item);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// onGridStackItemsChanged(items) {
|
|
||||||
// console.log('onGridStackItemsChanged');
|
|
||||||
//
|
|
||||||
// for (let item of items) {
|
|
||||||
// // find panel
|
|
||||||
// var panel = this.dashboard.getPanelById(parseInt(item.id));
|
|
||||||
//
|
|
||||||
// if (!panel) {
|
|
||||||
// console.log('item change but no panel found for item', item);
|
|
||||||
// continue;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // update panel model position
|
|
||||||
// panel.x = item.x;
|
|
||||||
// panel.y = item.y;
|
|
||||||
// panel.width = item.width;
|
|
||||||
// panel.height = item.height;
|
|
||||||
//
|
|
||||||
// console.log('updating panel: ' + panel.id + ' x: ' + panel.x + ' y: ' + panel.y);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// this.dashboard.panels.sort(function (a, b) {
|
|
||||||
// let aScore = a.x + (a.y * 12);
|
|
||||||
// let bScore = b.x + (b.y * 12);
|
|
||||||
// if (aScore < bScore) { return -1; }
|
|
||||||
// if (aScore > bScore) { return 1; }
|
|
||||||
// return 0;
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// if (this.changeRenderPromise) {
|
|
||||||
// this.$timeout.cancel(this.changeRenderPromise);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// this.changeRenderPromise = this.$timeout(() => {
|
|
||||||
// console.log('broadcasting render');
|
|
||||||
// this.$scope.$broadcast('render');
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// destroy() {
|
|
||||||
// this.gridstack.destroy();
|
|
||||||
// this.gridstack = null;
|
|
||||||
// this.isDestroyed = true;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// #<{(|* @ngInject *|)}>#
|
|
||||||
// export function dashGrid($timeout) {
|
|
||||||
// return {
|
|
||||||
// restrict: 'E',
|
|
||||||
// template: template,
|
|
||||||
// controller: GridCtrl,
|
|
||||||
// bindToController: true,
|
|
||||||
// controllerAs: 'ctrl',
|
|
||||||
// scope: {
|
|
||||||
// dashboard: "=",
|
|
||||||
// },
|
|
||||||
// link: function(scope, elem, attrs, ctrl) {
|
|
||||||
// $timeout(function() {
|
|
||||||
// ctrl.init();
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// scope.$on('$destroy', () => {
|
|
||||||
// ctrl.destroy();
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// #<{(|* @ngInject *|)}>#
|
|
||||||
// export function dashGridItem($timeout, $rootScope) {
|
|
||||||
// return {
|
|
||||||
// restrict: "E",
|
|
||||||
// scope: {
|
|
||||||
// panel: '=',
|
|
||||||
// gridCtrl: '='
|
|
||||||
// },
|
|
||||||
// link: function (scope, element, attrs) {
|
|
||||||
// let gridCtrl = scope.gridCtrl;
|
|
||||||
// let panel = scope.panel;
|
|
||||||
// let gridStackNode = null;
|
|
||||||
//
|
|
||||||
// element.attr({
|
|
||||||
// 'data-gs-id': panel.id,
|
|
||||||
// 'data-gs-x': panel.x,
|
|
||||||
// 'data-gs-y': panel.y,
|
|
||||||
// 'data-gs-width': panel.width,
|
|
||||||
// 'data-gs-height': panel.height,
|
|
||||||
// 'data-gs-no-resize': panel.type === 'row',
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
|
|
||||||
// if (panel.id !== payload.panelId) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// gridCtrl.gridstack.locked(element, false);
|
|
||||||
// element.removeClass('panel-fullscreen');
|
|
||||||
// }, scope);
|
|
||||||
//
|
|
||||||
// $rootScope.onAppEvent('panel-fullscreen-enter', (evt, payload) => {
|
|
||||||
// if (panel.id !== payload.panelId) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// element.addClass('panel-fullscreen');
|
|
||||||
// }, scope);
|
|
||||||
//
|
|
||||||
// scope.$on('$destroy', () => {
|
|
||||||
// console.log('grid-item scope $destroy');
|
|
||||||
// if (gridCtrl.isDestroyed) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// if (gridStackNode) {
|
|
||||||
// console.log('grid-item scope $destroy removeWidget');
|
|
||||||
// gridStackNode._grid.removeWidget(element);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// if (gridCtrl.isInitialized) {
|
|
||||||
// gridCtrl.gridstack.makeWidget(element);
|
|
||||||
// gridStackNode = element.data('_gridstack_node');
|
|
||||||
// } else {
|
|
||||||
// setTimeout(function() {
|
|
||||||
// gridStackNode = element.data('_gridstack_node');
|
|
||||||
// }, 500);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// coreModule.directive('dashGrid', dashGrid);
|
|
||||||
// coreModule.directive('dashGridItem', dashGridItem);
|
|
||||||
@ -1,232 +0,0 @@ |
|||||||
Skip to content |
|
||||||
This repository |
|
||||||
Search |
|
||||||
Pull requests |
|
||||||
Issues |
|
||||||
Marketplace |
|
||||||
Gist |
|
||||||
@torkelo |
|
||||||
Sign out |
|
||||||
Unwatch 946 |
|
||||||
Unstar 17,021 |
|
||||||
Fork 2,862 grafana/grafana |
|
||||||
Code Issues 1,079 Pull requests 46 Projects 1 Wiki Settings Insights |
|
||||||
Branch: gridstack Find file Copy pathgrafana/public/app/core/components/dashgrid/dashgrid.ts |
|
||||||
a6bbcb8 on Jun 13 |
|
||||||
@torkelo torkelo ux: gridstack poc |
|
||||||
1 contributor |
|
||||||
RawBlameHistory |
|
||||||
213 lines (181 sloc) 5.45 KB |
|
||||||
///<reference path="../../../headers/common.d.ts" /> |
|
||||||
|
|
||||||
import $ from 'jquery'; |
|
||||||
import coreModule from '../../core_module'; |
|
||||||
|
|
||||||
import 'jquery-ui'; |
|
||||||
import 'gridstack'; |
|
||||||
import 'gridstack.jquery-ui'; |
|
||||||
|
|
||||||
const template = ` |
|
||||||
<div gridstack gridstack-handler="ctrl.gridstack" class="grid-stack" |
|
||||||
options="ctrl.options" |
|
||||||
on-change="ctrl.onChange(event,items)" |
|
||||||
on-drag-start="ctrl.onDragStart(event,ui)" |
|
||||||
on-drag-stop="ctrl.onDragStop(event, ui)" |
|
||||||
on-resize-start="ctrl.onResizeStart(event, ui)" |
|
||||||
on-resize-stop="ctrl.onResizeStop(event, ui)"> |
|
||||||
<div gridstack-item ng-repeat="panel in ctrl.panels" |
|
||||||
class="grid-stack-item" |
|
||||||
gs-item-id="panel.id" |
|
||||||
gs-item-x="panel.x" |
|
||||||
gs-item-y="panel.y" |
|
||||||
gs-item-width="panel.width" |
|
||||||
gs-item-height="panel.height" |
|
||||||
gs-item-autopos="1" |
|
||||||
on-item-added="ctrl.onItemAdded(item)" |
|
||||||
on-item-removed="ctrl.onItemRemoved(item)"> |
|
||||||
<plugin-component type="panel" class="panel-margin grid-stack-item-content"> |
|
||||||
</plugin-component> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
`; |
|
||||||
|
|
||||||
export class DashGridCtrl { |
|
||||||
options: any; |
|
||||||
|
|
||||||
/** @ngInject */ |
|
||||||
constructor(private $rootScope) { |
|
||||||
this.options = { |
|
||||||
animate: true, |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
onResizeStop() { |
|
||||||
this.$rootScope.$broadcast('render'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export function dashGrid($timeout) { |
|
||||||
return { |
|
||||||
restrict: 'E', |
|
||||||
template: template, |
|
||||||
controller: DashGridCtrl, |
|
||||||
bindToController: true, |
|
||||||
controllerAs: 'ctrl', |
|
||||||
scope: { |
|
||||||
dashboard: "=" |
|
||||||
}, |
|
||||||
link: function(scope, elem, attrs, ctrl) { |
|
||||||
|
|
||||||
ctrl.panels = []; |
|
||||||
ctrl.dashboard.forEachPanel((panel, panelIndex, row, rowIndex) => { |
|
||||||
panel.width = 4; |
|
||||||
panel.height = 4; |
|
||||||
panel.x = panelIndex * 4; |
|
||||||
panel.y = rowIndex * 4; |
|
||||||
ctrl.panels.push(panel); |
|
||||||
}); |
|
||||||
|
|
||||||
} |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
/** @ngInject */ |
|
||||||
coreModule.controller('GridstackController', ['$scope', function($scope) { |
|
||||||
|
|
||||||
var gridstack = null; |
|
||||||
|
|
||||||
this.init = function(element, options) { |
|
||||||
gridstack = element.gridstack(options).data('gridstack'); |
|
||||||
return gridstack; |
|
||||||
}; |
|
||||||
|
|
||||||
this.removeItem = function(element) { |
|
||||||
if (gridstack) { |
|
||||||
return gridstack.removeWidget(element, false); |
|
||||||
} |
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
||||||
this.addItem = function(element) { |
|
||||||
if (gridstack) { |
|
||||||
gridstack.makeWidget(element); |
|
||||||
return element; |
|
||||||
} |
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
||||||
}]); |
|
||||||
|
|
||||||
/** @ngInject */ |
|
||||||
coreModule.directive('gridstack', ['$timeout', function($timeout) { |
|
||||||
return { |
|
||||||
restrict: "A", |
|
||||||
controller: 'GridstackController', |
|
||||||
scope: { |
|
||||||
onChange: '&', |
|
||||||
onDragStart: '&', |
|
||||||
onDragStop: '&', |
|
||||||
onResizeStart: '&', |
|
||||||
onResizeStop: '&', |
|
||||||
gridstackHandler: '=', |
|
||||||
options: '=' |
|
||||||
}, |
|
||||||
link: function (scope, element, attrs, controller, ngModel) { |
|
||||||
|
|
||||||
var gridstack = controller.init(element, scope.options); |
|
||||||
scope.gridstackHandler = gridstack; |
|
||||||
|
|
||||||
element.on('change', function (e, items) { |
|
||||||
$timeout(function() { |
|
||||||
scope.$apply(); |
|
||||||
scope.onChange({event: e, items: items}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
element.on('dragstart', function(e, ui) { |
|
||||||
scope.onDragStart({event: e, ui: ui}); |
|
||||||
}); |
|
||||||
|
|
||||||
element.on('dragstop', function(e, ui) { |
|
||||||
$timeout(function() { |
|
||||||
scope.$apply(); |
|
||||||
scope.onDragStop({event: e, ui: ui}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
element.on('resizestart', function(e, ui) { |
|
||||||
scope.onResizeStart({event: e, ui: ui}); |
|
||||||
}); |
|
||||||
|
|
||||||
element.on('resizestop', function(e, ui) { |
|
||||||
$timeout(function() { |
|
||||||
scope.$apply(); |
|
||||||
scope.onResizeStop({event: e, ui: ui}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
} |
|
||||||
}; |
|
||||||
}]); |
|
||||||
|
|
||||||
/** @ngInject */ |
|
||||||
coreModule.directive('gridstackItem', ['$timeout', function($timeout) { |
|
||||||
|
|
||||||
return { |
|
||||||
restrict: "A", |
|
||||||
controller: 'GridstackController', |
|
||||||
require: '^gridstack', |
|
||||||
scope: { |
|
||||||
gridstackItem: '=', |
|
||||||
onItemAdded: '&', |
|
||||||
onItemRemoved: '&', |
|
||||||
gsItemId: '=', |
|
||||||
gsItemX: '=', |
|
||||||
gsItemY: '=', |
|
||||||
gsItemWidth: '=', |
|
||||||
gsItemHeight: '=', |
|
||||||
gsItemAutopos: '=' |
|
||||||
}, |
|
||||||
link: function (scope, element, attrs, controller) { |
|
||||||
$(element).attr('data-gs-id', scope.gsItemId); |
|
||||||
$(element).attr('data-gs-x', scope.gsItemX); |
|
||||||
$(element).attr('data-gs-y', scope.gsItemY); |
|
||||||
$(element).attr('data-gs-width', scope.gsItemWidth); |
|
||||||
$(element).attr('data-gs-height', scope.gsItemHeight); |
|
||||||
$(element).attr('data-gs-auto-position', scope.gsItemAutopos); |
|
||||||
var widget = controller.addItem(element); |
|
||||||
var item = element.data('_gridstack_node'); |
|
||||||
$timeout(function() { |
|
||||||
scope.onItemAdded({item: item}); |
|
||||||
}); |
|
||||||
scope.$watch(function () { return $(element).attr('data-gs-id'); }, function (val) { |
|
||||||
scope.gsItemId = val; |
|
||||||
}); |
|
||||||
scope.$watch(function(){ return $(element).attr('data-gs-x'); }, function(val) { |
|
||||||
scope.gsItemX = val; |
|
||||||
}); |
|
||||||
|
|
||||||
scope.$watch(function(){ return $(element).attr('data-gs-y'); }, function(val) { |
|
||||||
scope.gsItemY = val; |
|
||||||
}); |
|
||||||
|
|
||||||
scope.$watch(function(){ return $(element).attr('data-gs-width'); }, function(val) { |
|
||||||
scope.gsItemWidth = val; |
|
||||||
}); |
|
||||||
|
|
||||||
scope.$watch(function(){ return $(element).attr('data-gs-height'); }, function(val) { |
|
||||||
scope.gsItemHeight = val; |
|
||||||
}); |
|
||||||
|
|
||||||
element.bind('$destroy', function() { |
|
||||||
var item = element.data('_gridstack_node'); |
|
||||||
scope.onItemRemoved({item: item}); |
|
||||||
controller.removeItem(element); |
|
||||||
}); |
|
||||||
} |
|
||||||
}; |
|
||||||
}]); |
|
||||||
|
|
||||||
coreModule.directive('dashGrid', dashGrid); |
|
||||||
Contact GitHub API Training Shop Blog About |
|
||||||
© 2017 GitHub, Inc. Terms Privacy Security Status Help |
|
||||||
Loading…
Reference in new issue