From de7bb8cb625c8367920c214c5236bd92359d6190 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 4 Aug 2017 10:47:23 +0200 Subject: [PATCH] feat: new grid system progressW --- public/app/core/core.ts | 2 - public/app/features/dashboard/all.js | 1 + .../app/features/dashboard/dashboard_ctrl.ts | 8 +- .../features/dashboard/dashgrid/dashgrid.ts | 121 ++++++++++++++++++ .../dashboard/dashgrid/ref.txt} | 22 +++- public/app/features/dashboard/model.ts | 58 +++++++-- public/app/features/panel/panel_ctrl.ts | 7 +- public/sass/components/_gridstack.scss | 26 ++-- 8 files changed, 215 insertions(+), 30 deletions(-) create mode 100644 public/app/features/dashboard/dashgrid/dashgrid.ts rename public/app/{core/components/dashgrid/dashgrid.ts => features/dashboard/dashgrid/ref.txt} (91%) diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 670adc30191..6037ff430d5 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -46,7 +46,6 @@ import {contextSrv} from './services/context_srv'; import {KeybindingSrv} from './services/keybindingSrv'; import {helpModal} from './components/help/help'; import {NavModelSrv, NavModel} from './nav_model_srv'; -import {dashGrid} from './components/dashgrid/dashgrid'; export { arrayJoin, @@ -72,5 +71,4 @@ export { helpModal, NavModelSrv, NavModel, - dashGrid, }; diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index cdea7aab3c6..256b7ff288e 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -24,4 +24,5 @@ define([ './ad_hoc_filters', './row/row_ctrl', './repeat_option/repeat_option', + './dashgrid/dashgrid', ], function () {}); diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index c07f84e820c..51138cfbf06 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -113,10 +113,10 @@ export class DashboardCtrl { }; $scope.registerWindowResizeEvent = function() { - angular.element(window).bind('resize', function() { - $timeout.cancel(resizeEventTimeout); - resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200); - }); + // angular.element(window).bind('resize', function() { + // $timeout.cancel(resizeEventTimeout); + // resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200); + // }); $scope.$on('$destroy', function() { angular.element(window).unbind('resize'); diff --git a/public/app/features/dashboard/dashgrid/dashgrid.ts b/public/app/features/dashboard/dashgrid/dashgrid.ts new file mode 100644 index 00000000000..747e73fd812 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/dashgrid.ts @@ -0,0 +1,121 @@ +/// + +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; +import {DashboardModel, CELL_HEIGHT, CELL_VMARGIN} from '../model'; + +import 'jquery-ui'; +import 'gridstack'; +import 'gridstack.jquery-ui'; + +const template = ` +
+ + + + +
+`; + +export class GridCtrl { + options: any; + dashboard: any; + panels: any; + gridstack: any; + gridElem: any; + + /** @ngInject */ + constructor(private $rootScope, private $element, private $timeout) { + this.panels = this.dashboard.panels; + } + + init() { + this.gridElem = this.$element.find('.grid-stack'); + + this.gridstack = this.gridElem.gridstack({ + animate: true, + cellHeight: CELL_HEIGHT, + verticalMargin: CELL_VMARGIN, + }).data('gridstack'); + + this.gridElem.on('change', (e, items) => { + this.$timeout(() => this.itemsChanged(items), 50); + }); + } + + itemsChanged(items) { + for (let item of items) { + var panel = this.dashboard.getPanelById(parseInt(item.id)); + panel.x = item.x; + panel.y = item.y; + panel.width = item.width; + panel.height = item.height; + console.log('update panel', panel.id, panel.height); + } + this.$rootScope.$broadcast('render'); + console.log('broadcast render'); + } + + bindItem(element) { + this.gridstack.makeWidget(element); + } +} + +/** @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() { + console.log(elem.html()); + ctrl.init(); + }); + } + }; +} + +/** @ngInject **/ +export function dashGridItem($timeout) { + return { + restrict: "E", + scope: { + panel: '=', + gridCtrl: '=' + }, + link: function (scope, element, attrs) { + let gridCtrl = scope.gridCtrl; + let panel = scope.panel; + + 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, + }); + + //var item = element.data('_gridstack_node'); + //console.log('link item', item); + //gridCtrl.bindItem(element); + + // element.bind('$destroy', function() { + // var item = element.data('_gridstack_node'); + // scope.onItemRemoved({item: item}); + // ctrl.removeItem(element); + // }); + } + }; +} + +coreModule.directive('dashGrid', dashGrid); +coreModule.directive('dashGridItem', dashGridItem); diff --git a/public/app/core/components/dashgrid/dashgrid.ts b/public/app/features/dashboard/dashgrid/ref.txt similarity index 91% rename from public/app/core/components/dashgrid/dashgrid.ts rename to public/app/features/dashboard/dashgrid/ref.txt index db15ce32dbb..81b1da9e1df 100644 --- a/public/app/core/components/dashgrid/dashgrid.ts +++ b/public/app/features/dashboard/dashgrid/ref.txt @@ -1,3 +1,22 @@ +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 /// import $ from 'jquery'; @@ -15,7 +34,6 @@ const template = ` on-drag-stop="ctrl.onDragStop(event, ui)" on-resize-start="ctrl.onResizeStart(event, ui)" on-resize-stop="ctrl.onResizeStop(event, ui)"> -
.ui-resizable-handle { +.grid-stack-item > .ui-resizable-handle { filter: none; } @@ -19,8 +19,8 @@ margin: 0; position: absolute; top: 0; - left: 10px; - right: 10px; + left: 5px; + right: 5px; bottom: 0; width: auto; z-index: 0 !important; @@ -37,8 +37,8 @@ margin: 0; position: absolute; top: 0; - left: 10px; - right: 10px; + left: 7px; + right: 7px; bottom: 0; width: auto; z-index: 0 !important; @@ -92,8 +92,8 @@ .grid-stack > .grid-stack-item > .ui-resizable-nw { cursor: nw-resize; - width: 20px; - height: 20px; + width: 16px; + height: 16px; left: 10px; top: 0; } @@ -108,8 +108,8 @@ .grid-stack > .grid-stack-item > .ui-resizable-ne { cursor: ne-resize; - width: 20px; - height: 20px; + width: 16px; + height: 16px; right: 10px; top: 0; } @@ -124,8 +124,8 @@ .grid-stack > .grid-stack-item > .ui-resizable-se { cursor: se-resize; - width: 20px; - height: 20px; + width: 16px; + height: 16px; right: 10px; bottom: 0; } @@ -140,8 +140,8 @@ .grid-stack > .grid-stack-item > .ui-resizable-sw { cursor: sw-resize; - width: 20px; - height: 20px; + width: 16px; + height: 16px; left: 10px; bottom: 0; }