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,7 +302,9 @@
     json.top = e.clientY - rect.top;
 
     callChange(current => {
-      const foreignKeys = _.compact([
+      const foreignKeys = settings?.useDatabaseReferences
+        ? []
+        : _.compact([
             ...(json.foreignKeys || []).map(fk => {
               const tables = ((current || {}).tables || []).filter(
                 tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
@@ -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,8 +121,18 @@
 `}
       />
     {/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>
 
+  {#if settings?.showJoinType}
     <div
       use:contextMenu={createMenu}
       class="wrapper"
@@ -132,6 +146,7 @@
       </div>
     </div>
   {/if}
+{/if}
 
 <style>
   svg {

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,
   }}
 />