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 { |
||||
id: number; |
||||
export interface GridPos { |
||||
x: number; |
||||
y: number; |
||||
width: number; |
||||
height: number; |
||||
w: number; |
||||
h: number; |
||||
} |
||||
|
||||
const notPersistedProperties: {[str: string]: boolean} = { |
||||
"model": true, |
||||
"events": true, |
||||
}; |
||||
|
||||
export class PanelModel { |
||||
id: number; |
||||
gridPos: GridPos; |
||||
type: 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