diagram reference drawing

packages/web/src/designer/Designer.svelte

@@ -57,7 +57,8 @@
     }
   }
 
-  function updateFromDbInfo(db) {
+  function updateFromDbInfo(db = 'auto') {
+    if (db == 'auto' && dbInfo) db = $dbInfo;
     if (!settings?.updateFromDbInfo || !db) return;
 
     onChange(current => {
@@ -301,34 +302,36 @@
     json.top = e.clientY - rect.top;
 
     callChange(current => {
-      const foreignKeys = _.compact([
+      const foreignKeys = settings?.useDatabaseReferences
-        ...(json.foreignKeys || []).map(fk => {
+        ? []
-          const tables = ((current || {}).tables || []).filter(
+        : _.compact([
-            tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
+            ...(json.foreignKeys || []).map(fk => {
-          );
+              const tables = ((current || {}).tables || []).filter(
-          if (tables.length == 1)
+                tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
-            return {
+              );
-              ...fk,
+              if (tables.length == 1)
-              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,
+                  sourceId: json.designerId,
-                  targetId: 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;
+                })
+              )
+            ),
+          ]);
 
       const alias = getNewTableAlias(json, current?.tables);
       if (alias && !settings?.allowTableAlias) return current;
@@ -360,6 +363,7 @@
             : (current || {}).references,
       };
     });
+    updateFromDbInfo();
   };
 
   function recomputeReferencePositions() {
@@ -383,6 +387,7 @@
         onChangeReference={changeReference}
         onRemoveReference={removeReference}
         designer={value}
+        {settings}
       />
     {/each}
     <!-- 

packages/web/src/designer/DesignerReference.svelte

@@ -8,6 +8,7 @@
   export let onChangeReference;
   export let designer;
   export let domTables;
+  export let settings;
 
   let src = null;
   let dst = null;
@@ -17,6 +18,9 @@
 
   const buswi = 10;
   const extwi = 25;
+  const arwi = 12;
+  const arhi = 12;
+  const arpad = 3;
 
   export function recomputePosition() {
     const { designerId, sourceId, targetId, columns, joinType } = reference;
@@ -117,20 +121,31 @@
 `}
       />
     {/each}
+    {#if settings?.showReferenceArrow}
+      <polygon
+        points={`
+      ${dst.x - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y}
+      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y + arhi / 2}
+      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y - arhi / 2}
+      `}
+      />
+    {/if}
   </svg>
 
-  <div
+  {#if settings?.showJoinType}
-    use:contextMenu={createMenu}
+    <div
-    class="wrapper"
+      use:contextMenu={createMenu}
-    style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
+      class="wrapper"
+      style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
             top: ${(src.y + dst.y) / 2 - 16}px`}
-  >
+    >
-    <div class="text">
+      <div class="text">
-      {_.snakeCase(reference?.joinType || 'CROSS JOIN')
+        {_.snakeCase(reference?.joinType || 'CROSS JOIN')
-        .replace('_', '\xa0')
+          .replace('_', '\xa0')
-        .replace('_', '\xa0')}
+          .replace('_', '\xa0')}
+      </div>
     </div>
-  </div>
+  {/if}
 {/if}
 
 <style>

packages/web/src/designer/DiagramDesigner.svelte

@@ -11,5 +11,7 @@
     allowTableAlias: false,
     updateFromDbInfo: true,
     useDatabaseReferences: true,
+    showJoinType: false,
+    showReferenceArrow: true,
   }}
 />

packages/web/src/designer/QueryDesigner.svelte

@@ -11,5 +11,7 @@
     allowTableAlias: true,
     updateFromDbInfo: false,
     useDatabaseReferences: false,
+    showJoinType: true,
+    showReferenceArrow: false,
   }}
 />