// tell gridster to add the panel, and create additional meatadata like $scope
function addPanel(panel) {
PanelUtils.initializeDefaults(panel);
const panelHtml = `
<li>
<dashboard-panel
remove="removePanel(${panel.panelIndex})"
panel="findPanelByPanelIndex(${panel.panelIndex}, panels)"
is-full-screen-mode="isFullScreenMode"
is-expanded="false"
dashboard-view-mode="dashboardViewMode"
get-vis-click-handler="getVisClickHandler"
get-vis-brush-handler="getVisBrushHandler"
save-state="saveState"
app-state="appState"
register-panel-index-pattern="registerPanelIndexPattern"
toggle-expand="toggleExpand(${panel.panelIndex})"
create-child-ui-state="createChildUiState"
on-filter="onFilter">
</li>`;
const panelElement = $compile(panelHtml)($scope);
panelElementMapping[panel.panelIndex] = panelElement;
// Store the panelIndex on the widget so it can be used to retrieve the panelElement
// from the mapping.
panelElement[0].panelIndex = panel.panelIndex;
// tell gridster to use the widget
gridster.add_widget(panelElement, panel.size_x, panel.size_y, panel.col, panel.row);
// Gridster may change the position of the widget when adding it, make sure the panel
// contains the latest info.
PanelUtils.refreshSizeAndPosition(panel, panelElement);
}
el => {
const panel = PanelUtils.findPanelByPanelIndex(el.panelIndex, $scope.panels);
if (panel) {
// A panel may have had its state updated, refresh gridster with the latest values.
const panelElement = panelElementMapping[panel.panelIndex];
PanelUtils.refreshElementSizeAndPosition(panel, panelElement);
return panel;
} else {
return { panelIndex: el.panelIndex };
}
}
gridster.$widgets.each(function (i, widget) {
const panel = PanelUtils.findPanelByPanelIndex(widget.panelIndex, $scope.panels);
const panelElement = panelElementMapping[panel.panelIndex];
PanelUtils.refreshSizeAndPosition(panel, panelElement);
});
el => PanelUtils.findPanelByPanelIndex(el.panelIndex, $scope.panels)