use resize observer in formview

packages/web/src/formview/FormView.svelte

@@ -36,6 +36,7 @@
   import { getActiveTabId } from '../stores';
   import contextMenu from '../utility/contextMenu';
   import createReducer from '../utility/createReducer';
+  import resizeObserver from '../utility/resizeObserver';
 
   export let config;
   export let setConfig;
@@ -159,6 +160,8 @@
   function createMenu() {
     return [{ command: 'dataForm.switchToTable' }];
   }
+
+  $: console.log('rowHeight', rowHeight);
 </script>
 
 <div class="outer">
@@ -167,27 +170,20 @@
       <table on:mousedown={handleTableMouseDown}>
         {#each chunk as col, rowIndex}
           <tr>
-            {#if chunkIndex == 0 && rowIndex == 0}
+            <td
-              <td
+              class="header-cell"
-                class="header-cell"
+              data-row={rowIndex}
-                data-row={rowIndex}
+              data-col={chunkIndex * 2}
-                data-col={chunkIndex * 2}
+              style={`height: ${rowHeight}px`}
-                bind:clientHeight={rowHeight}
+              class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
-                style={`height: ${rowHeight}px`}
+              bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
-                bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
+              use:resizeObserver={chunkIndex == 0 && rowIndex == 0}
-                class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
+              on:resize={e => {
-              >
+                // @ts-ignore
-                <ColumnLabel {...col} headerText={col.columnName} />
+                if (rowHeight == 1) rowHeight = e.detail.height;
-              </td>
+              }}
-            {:else}
+            >
-              <td
+              <div class="header-cell-inner">
-                class="header-cell"
-                data-row={rowIndex}
-                data-col={chunkIndex * 2}
-                style={`height: ${rowHeight}px`}
-                class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
-                bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
-              >
                 {#if col.foreignKey}
                   <FontIcon
                     icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
@@ -201,8 +197,8 @@
                 {/if}
                 <span style={`margin-left: ${(col.uniquePath.length - 1) * 20}px`} />
                 <ColumnLabel {...col} headerText={col.columnName} />
-              </td>
+              </div>
-            {/if}
+            </td>
             <DataGridCell
               {rowIndex}
               {col}
@@ -289,6 +285,10 @@
     background: var(--theme-bg-selected);
   }
 
+  .header-cell-inner {
+    display: flex;
+  }
+
   .focus-field {
     position: absolute;
     left: -1000px;

packages/web/src/formview/SqlFormView.svelte

@@ -40,7 +40,6 @@
   let errorMessage = null;
 
   const handleLoadCurrentRow = async () => {
-    console.log('LOAD ROW');
     if (isLoadingData) return;
     let newLoadedRow = false;
     if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {

packages/web/src/utility/resizeObserver.ts

@@ -0,0 +1,47 @@
+import _ from 'lodash';
+
+export default function resizeObserver(node, observerEnabled) {
+  const measure = () => {
+    const rect = node.getBoundingClientRect();
+
+    node.dispatchEvent(
+      new CustomEvent('resize', {
+        detail: {
+          width: rect.width,
+          height: rect.height,
+        },
+      })
+    );
+  };
+
+  let resizeObserver = null;
+
+  function doUpdate() {
+    if (observerEnabled && !resizeObserver) {
+      resizeObserver = new window['ResizeObserver'](() => {
+        measure();
+      });
+      resizeObserver.observe(node);
+    }
+    if (!observerEnabled && resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  }
+
+  doUpdate();
+  if (observerEnabled) measure();
+
+  return {
+    destroy() {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+    },
+    update(value) {
+      observerEnabled = value;
+      doUpdate();
+    },
+  };
+}