diagram - add references

packages/web/src/designer/Designer.svelte

@@ -247,6 +247,44 @@
           : current.references,
       };
     });
+    updateFromDbInfo();
+  };
+
+  const handleAddTableReferences = table => {
+    if (!dbInfo) return;
+    const db = $dbInfo;
+    if (!db) return;
+    const dbTable = db.tables?.find(x => x.pureName == table.pureName && x.schemaName == table.schemaName);
+    if (!dbTable) return;
+    callChange(current => {
+      const newTables = [];
+      for (const fk of dbTable.foreignKeys || []) {
+        const existing = current.tables.find(x => x.pureName == fk.refTableName && x.schemaName == fk.refSchemaName);
+        if (!existing) {
+          const dst = db.tables.find(x => x.pureName == fk.refTableName && x.schemaName == fk.refSchemaName);
+          if (dst) newTables.push(dst);
+        }
+      }
+      for (const fk of dbTable.dependencies || []) {
+        const existing = current.tables.find(x => x.pureName == fk.pureName && x.schemaName == fk.schemaName);
+        if (!existing) {
+          const dst = db.tables.find(x => x.pureName == fk.pureName && x.schemaName == fk.schemaName);
+          if (dst) newTables.push(dst);
+        }
+      }
+      
+      return {
+        ...current,
+        tables: [
+          ...current.tables,
+          ...newTables.map(x => ({
+            ...x,
+            designerId: uuidv1(),
+          })),
+        ],
+      };
+    });
+    updateFromDbInfo();
   };
 
   const handleSelectColumn = column => {
@@ -408,6 +446,7 @@
         onSelectColumn={handleSelectColumn}
         onChangeColumn={handleChangeColumn}
         onAddReferenceByColumn={handleAddReferenceByColumn}
+        onAddAllReferences={handleAddTableReferences}
         onMoveReferences={recomputeReferencePositions}
         {table}
         onChangeTable={changeTable}

packages/web/src/designer/DesignerTable.svelte

@@ -13,6 +13,7 @@
   export let onChangeTable;
   export let onBringToFront;
   export let onRemoveTable;
+  export let onAddAllReferences;
   export let onCreateReference;
   export let onAddReferenceByColumn;
   export let onSelectColumn;
@@ -87,8 +88,8 @@
   function createMenu() {
     return [
       { text: 'Remove', onClick: () => onRemoveTable({ designerId }) },
-      settings?.allowTableAlias && [
       { divider: true },
+      settings?.allowTableAlias && [
         { text: 'Set table alias', onClick: handleSetTableAlias },
         alias && {
           text: 'Remove table alias',
@@ -99,6 +100,7 @@
             }),
         },
       ],
+      settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) },
     ];
   }
 </script>
@@ -123,7 +125,7 @@
       </div>
     {/if}
   </div>
-  <div class="columns" on:scroll={() => tick().then(onMoveReferences)}>
+  <div class="columns" on:scroll={() => tick().then(onMoveReferences)} class:scroll={settings?.allowScrollColumns}>
     {#each columns || [] as column}
       <ColumnLine
         {column}
@@ -175,9 +177,11 @@
     background: var(--theme-bg-3);
   }
   .columns {
-    max-height: 400px;
-    overflow-y: auto;
     width: calc(100% - 10px);
     padding: 5px;
   }
+  .columns.scroll {
+    max-height: 400px;
+    overflow-y: auto;
+  }
 </style>

packages/web/src/designer/DiagramDesigner.svelte

@@ -13,5 +13,7 @@
     useDatabaseReferences: true,
     showJoinType: false,
     showReferenceArrow: true,
+    allowScrollColumns: false,
+    allowAddAllReferences: true,
   }}
 />

packages/web/src/designer/QueryDesigner.svelte

@@ -13,5 +13,7 @@
     useDatabaseReferences: false,
     showJoinType: true,
     showReferenceArrow: false,
+    allowScrollColumns: true,
+    allowAddAllReferences: false,
   }}
 />