From ed337f2232c10f87d09d04f461dbf7e0bcf40023 Mon Sep 17 00:00:00 2001
From: Kacper Kula <kulak@kulak.at>
Date: Wed, 2 Apr 2025 15:23:40 +0100
Subject: [PATCH] feat: resizing grid on layout resizes

---
 src/codeblockHandler/CodeblockProcessor.ts |  3 ++
 src/renderer/GridRenderer.ts               | 35 +++++++++++++++++++++-
 src/renderer/rendererRegistry.ts           |  1 +
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/codeblockHandler/CodeblockProcessor.ts b/src/codeblockHandler/CodeblockProcessor.ts
index 8b3bc01..6271996 100644
--- a/src/codeblockHandler/CodeblockProcessor.ts
+++ b/src/codeblockHandler/CodeblockProcessor.ts
@@ -86,6 +86,9 @@ export class CodeblockProcessor extends MarkdownRenderChild {
 
     onunload() {
         this.registrator.offAll()
+        if (this.renderer?.cleanup) {
+            this.renderer.cleanup()
+        }
     }
 
     async render() {
diff --git a/src/renderer/GridRenderer.ts b/src/renderer/GridRenderer.ts
index aa34120..1f120ee 100644
--- a/src/renderer/GridRenderer.ts
+++ b/src/renderer/GridRenderer.ts
@@ -6,6 +6,7 @@ import { parse } from 'json5'
 import { ViewDefinition } from "../grammar/parser";
 import SqlSealPlugin from "../main";
 import { ModernCellParser } from "../cellParser/ModernCellParser";
+import { EventRef } from "obsidian";
 
 const getCurrentTheme = () => {
     return document.body.classList.contains('theme-dark') ? 'dark' : 'light';
@@ -34,16 +35,45 @@ class GridRendererCommunicator {
         private cellParser: ModernCellParser
     ) {
         this.initialize()
+        this.setupLayoutObservers()
     }
 
     private _gridApi: GridApi<any>
     private errorEl: HTMLElement
     private errorOverlay: HTMLElement
+    private resizeObserver: ResizeObserver
+    private unregisterLeafChange: EventRef | null = null
 
     get gridApi(): GridApi<any> {
         return this._gridApi
     }
 
+    private setupLayoutObservers() {
+        // Observe resize changes
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this._gridApi) {
+                this._gridApi.autoSizeAllColumns()
+            }
+        })
+        this.resizeObserver.observe(this.el)
+
+        // Observe tab switches
+        this.unregisterLeafChange = this.app.workspace.on('active-leaf-change', () => {
+            if (this._gridApi) {
+                this._gridApi.autoSizeAllColumns()
+            }
+        })
+    }
+
+    cleanup() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+        }
+        if (this.unregisterLeafChange) {
+            this.app.workspace.offref(this.unregisterLeafChange)
+        }
+    }
+
     private showError(message: string) {
         this.gridApi.setGridOption('loading', false)
         this.errorEl.textContent = message //.replace(`TTT${prefix}_`, '');
@@ -151,10 +181,13 @@ export class GridRenderer implements RendererConfig {
             render: (data: any) => {
                 communicator.setData(data.columns, data.data)
                 communicator.gridApi.autoSizeAllColumns()
-
             },
             error: (message: string) => {
                 communicator.showInfo('error', message)
+            },
+            cleanup: () => {
+                communicator.cleanup()
+                communicator.gridApi.destroy()
             }
         }
     }
diff --git a/src/renderer/rendererRegistry.ts b/src/renderer/rendererRegistry.ts
index e254d68..34f9011 100644
--- a/src/renderer/rendererRegistry.ts
+++ b/src/renderer/rendererRegistry.ts
@@ -13,6 +13,7 @@ export interface RendererContext {
 export interface RenderReturn {
     render: (data: any) => void;
     error: (errorMessage: string) => void;
+    cleanup?: () => void;
 }
 export interface RendererConfig<T extends Record<string, any> = Record<string, any>> {
 	rendererKey: string;