diff --git a/web/package-lock.json b/web/package-lock.json index 6a564dc..79ee4e4 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -15,7 +15,7 @@ "@codemirror/state": "^6.7.4", "@codemirror/view": "^6.43.11", "echarts": "^6.1.0", - "gridstack": "^11.5.0" + "gridstack": "^13.2.0" }, "devDependencies": { "@sveltejs/adapter-static": "^3.0.10", @@ -751,9 +751,9 @@ } }, "node_modules/gridstack": { - "version": "11.5.1", - "resolved": "https://registry.npmjs.org/gridstack/-/gridstack-11.5.1.tgz", - "integrity": "sha512-qgbH65F6TtyKyi9t6fCkrxLhiobgYR3RBjnK0AzZl+YO7hreMVlsZ1MFbkPV0+7ZhjXdvcaRSZp3UA1yAJqYBQ==", + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/gridstack/-/gridstack-13.2.0.tgz", + "integrity": "sha512-+ImmOx6qd1wiF0EagY7e/pPdngh/6s0FM+r9hh4d8AsXslO51iHEuoAF7CMrXCFr0Xqd0X4WS/bqRLXtEUThug==", "funding": [ { "type": "paypal", diff --git a/web/package.json b/web/package.json index 56dd8df..8a686de 100644 --- a/web/package.json +++ b/web/package.json @@ -29,7 +29,7 @@ "@codemirror/state": "^6.7.4", "@codemirror/view": "^6.43.11", "echarts": "^6.1.0", - "gridstack": "^11.5.0" + "gridstack": "^13.2.0" }, "overrides": { "cookie": "^0.7.2" diff --git a/web/src/routes/dashboards/[id]/+page.svelte b/web/src/routes/dashboards/[id]/+page.svelte index 5e17c3b..968ae04 100644 --- a/web/src/routes/dashboards/[id]/+page.svelte +++ b/web/src/routes/dashboards/[id]/+page.svelte @@ -167,7 +167,12 @@ function setupGrid() { if (!gridEl || !dashboard?.panels) return; grid?.destroy(false); - grid = GridStack.init({ float: true, cellHeight: 60, column: 12 }, gridEl); + // gridstack 13 returns null when it cannot bind to the element, where + // 11 always handed back a grid. `gridEl` is guarded above so this + // should not happen -- but the type says it can, and a missed drag is + // better than a thrown error inside an effect. + grid = GridStack.init({ float: true, cellHeight: 60, column: 12 }, gridEl) ?? undefined; + if (!grid) return; grid.on('change', (_event: Event, items: GridStackNode[]) => { for (const item of items) { const panel = dashboard?.panels?.find((p) => p.id === item.id);