auto add reference on drop

packages/web/src/designer/Designer.js

@@ -41,10 +41,57 @@ export default function Designer({ value, onChange, conid, database }) {
     json.left = e.clientX - rect.left;
     json.top = e.clientY - rect.top;
 
-    onChange((current) => ({
+    onChange((current) => {
-      ...current,
+      const foreignKeys = _.compact([
-      tables: [...(current.tables || []), json],
+        ...json.foreignKeys.map((fk) => {
-    }));
+          const tables = (current.tables || []).filter(
+            (tbl) => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
+          );
+          if (tables.length == 1)
+            return {
+              ...fk,
+              sourceId: json.designerId,
+              targetId: tables[0].designerId,
+            };
+          return null;
+        }),
+        ..._.flatten(
+          (current.tables || []).map((tbl) =>
+            (tbl.foreignKeys || []).map((fk) => {
+              if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) {
+                return {
+                  ...fk,
+                  sourceId: tbl.designerId,
+                  targetId: json.designerId,
+                };
+              }
+              return null;
+            })
+          )
+        ),
+      ]);
+
+      return {
+        ...current,
+        tables: [...(current.tables || []), json],
+        references:
+          foreignKeys.length == 1
+            ? [
+                ...(current.references || []),
+                {
+                  designerId: uuidv1(),
+                  sourceId: foreignKeys[0].sourceId,
+                  targetId: foreignKeys[0].targetId,
+                  joinType: 'INNER JOIN',
+                  columns: foreignKeys[0].columns.map((col) => ({
+                    source: col.columnName,
+                    target: col.refColumnName,
+                  })),
+                },
+              ]
+            : current.references,
+      };
+    });
   };
 
   const changeTable = React.useCallback(
@@ -75,6 +122,7 @@ export default function Designer({ value, onChange, conid, database }) {
         references: (current.references || []).filter(
           (x) => x.sourceId != table.designerId && x.targetId != table.designerId
         ),
+        columns: (current.columns || []).filter((x) => x.designerId != table.designerId),
       }));
     },
     [onChange]

packages/web/src/designer/DesignerQueryDumper.ts

@@ -73,6 +73,7 @@ export class DesignerQueryDumper {
     for (const column of this.designer.columns || []) {
       if (!column.filter) continue;
       const table = (this.designer.tables || []).find((x) => x.designerId == column.designerId);
+      if (!table) continue;
       if (!tables.find((x) => x.designerId == table.designerId)) continue;
 
       const condition = parseFilter(column.filter, findDesignerFilterType(column, this.designer));