designer customization

packages/web/src/designer/QueryDesigner.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import _ from 'lodash';
+
   import Designer from './Designer.svelte';
+  import { isConnectedByReference, referenceIsConnecting } from './designerTools';
   import QueryDesignerReference from './QueryDesignerReference.svelte';
 </script>
 
@@ -12,6 +15,38 @@
     allowTableAlias: true,
     allowScrollColumns: true,
     canSelectColumns: true,
+    referenceMenu: ({ designer, reference, onChangeReference, onRemoveReference }) => {
+      const isConnected = isConnectedByReference(
+        designer,
+        { designerId: reference?.sourceId },
+        { designerId: reference?.targetId },
+        reference
+      );
+      const setJoinType = joinType => {
+        onChangeReference({
+          ...reference,
+          joinType,
+        });
+      };
+
+      return [
+        { text: 'Remove', onClick: () => onRemoveReference(reference) },
+        !isConnected && [
+          { divider: true },
+          { onClick: () => setJoinType('INNER JOIN'), text: 'Set INNER JOIN' },
+          { onClick: () => setJoinType('LEFT JOIN'), text: 'Set LEFT JOIN' },
+          { onClick: () => setJoinType('RIGHT JOIN'), text: 'Set RIGHT JOIN' },
+          { onClick: () => setJoinType('FULL OUTER JOIN'), text: 'Set FULL OUTER JOIN' },
+          { onClick: () => setJoinType('CROSS JOIN'), text: 'Set CROSS JOIN' },
+          { onClick: () => setJoinType('WHERE EXISTS'), text: 'Set WHERE EXISTS' },
+          { onClick: () => setJoinType('WHERE NOT EXISTS'), text: 'Set WHERE NOT EXISTS' },
+        ],
+      ];
+    },
+    createReferenceText: reference =>
+      _.snakeCase(reference?.joinType || 'CROSS JOIN')
+        .replace('_', '\xa0')
+        .replace('_', '\xa0'),
   }}
   referenceComponent={QueryDesignerReference}
 />

packages/web/src/designer/QueryDesignerReference.svelte

@@ -63,32 +63,14 @@
   }
 
   function createMenu() {
-    const isConnected = isConnectedByReference(
+    if (settings?.referenceMenu) {
+      return settings?.referenceMenu({
         designer,
-      { designerId: reference?.sourceId },
+        reference,
-      { designerId: reference?.targetId },
+        onChangeReference,
-      reference
+        onRemoveReference,
-    );
-    const setJoinType = joinType => {
-      onChangeReference({
-        ...reference,
-        joinType,
       });
-    };
+    }
-
-    return [
-      { text: 'Remove', onClick: () => onRemoveReference(reference) },
-      !isConnected && [
-        { divider: true },
-        { onClick: () => setJoinType('INNER JOIN'), text: 'Set INNER JOIN' },
-        { onClick: () => setJoinType('LEFT JOIN'), text: 'Set LEFT JOIN' },
-        { onClick: () => setJoinType('RIGHT JOIN'), text: 'Set RIGHT JOIN' },
-        { onClick: () => setJoinType('FULL OUTER JOIN'), text: 'Set FULL OUTER JOIN' },
-        { onClick: () => setJoinType('CROSS JOIN'), text: 'Set CROSS JOIN' },
-        { onClick: () => setJoinType('WHERE EXISTS'), text: 'Set WHERE EXISTS' },
-        { onClick: () => setJoinType('WHERE NOT EXISTS'), text: 'Set WHERE NOT EXISTS' },
-      ],
-    ];
   }
 </script>
 
@@ -127,9 +109,7 @@
             top: ${(src.y + dst.y) / 2 - 16}px`}
   >
     <div class="text">
-      {_.snakeCase(reference?.joinType || 'CROSS JOIN')
+      {settings?.createReferenceText ? settings?.createReferenceText(reference) : ''}
-        .replace('_', '\xa0')
-        .replace('_', '\xa0')}
     </div>
   </div>
 {/if}

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -86,6 +86,10 @@
     canSelectColumns: true,
     canCheckTables: true,
     arrangeAlg: 'tree',
+    referenceMenu: ({ designer, reference, onChangeReference, onRemoveReference }) => {
+      return [{ text: 'Remove', onClick: () => onRemoveReference(reference) }];
+    },
+    createReferenceText: reference => (reference.isAutoGenerated ? 'FK' : 'Custom'),
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos)}