diff --git a/client/app/components/dashboards/gridstack/index.js b/client/app/components/dashboards/gridstack/index.js index cd1c16c85b..89c960aef5 100644 --- a/client/app/components/dashboards/gridstack/index.js +++ b/client/app/components/dashboards/gridstack/index.js @@ -69,6 +69,7 @@ function gridstack($parse, dashboardGridOptions) { scope: { editing: '=', batchUpdate: '=', // set by directive - for using in wrapper components + onLayoutChanged: '=', isOneColumnMode: '=', }, controller() { @@ -121,67 +122,6 @@ function gridstack($parse, dashboardGridOptions) { }); }; - this.batchUpdateWidgets = (items) => { - // This method is used to update multiple widgets with a single - // reflow (for example, restore positions when dashboard editing cancelled). - // "dirty" part of code: updating grid and DOM nodes directly. - // layout reflow is triggered by `batchUpdate`/`commit` calls - this.update((grid) => { - _.each(grid.grid.nodes, (node) => { - const item = items[node.id]; - if (item) { - if (_.isNumber(item.col)) { - node.x = parseFloat(item.col); - node.el.attr('data-gs-x', node.x); - node._dirty = true; - } - - if (_.isNumber(item.row)) { - node.y = parseFloat(item.row); - node.el.attr('data-gs-y', node.y); - node._dirty = true; - } - - if (_.isNumber(item.sizeX)) { - node.width = parseFloat(item.sizeX); - node.el.attr('data-gs-width', node.width); - node._dirty = true; - } - - if (_.isNumber(item.sizeY)) { - node.height = parseFloat(item.sizeY); - node.el.attr('data-gs-height', node.height); - node._dirty = true; - } - - if (_.isNumber(item.minSizeX)) { - node.minWidth = parseFloat(item.minSizeX); - node.el.attr('data-gs-min-width', node.minWidth); - node._dirty = true; - } - - if (_.isNumber(item.maxSizeX)) { - node.maxWidth = parseFloat(item.maxSizeX); - node.el.attr('data-gs-max-width', node.maxWidth); - node._dirty = true; - } - - if (_.isNumber(item.minSizeY)) { - node.minHeight = parseFloat(item.minSizeY); - node.el.attr('data-gs-min-height', node.minHeight); - node._dirty = true; - } - - if (_.isNumber(item.maxSizeY)) { - node.maxHeight = parseFloat(item.maxSizeY); - node.el.attr('data-gs-max-height', node.maxHeight); - node._dirty = true; - } - } - }); - }); - }; - this.removeWidget = ($element) => { const grid = this.grid(); if (grid) { @@ -300,6 +240,7 @@ function gridstack($parse, dashboardGridOptions) { $(node.el).trigger('gridstack.changed', node); } }); + $scope.onLayoutChanged(); changedNodes = {}; }); diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html index 9246b02c5e..3bc39e448d 100644 --- a/client/app/pages/dashboards/dashboard.html +++ b/client/app/pages/dashboards/dashboard.html @@ -15,17 +15,15 @@