table system menu callable from designer

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -392,45 +392,15 @@
       a.schemaName == b.schemaName
     );
   }
-</script>
 
-<script lang="ts">
+  export function createDatabaseObjectMenu(data) {
-  import _ from 'lodash';
+    const getDriver = async () => {
-  import AppObjectCore from './AppObjectCore.svelte';
+      const conn = await getConnectionInfo(data);
-  import { currentDatabase, extensions, openedConnections, pinnedTables } from '../stores';
+      if (!conn) return;
-  import openNewTab from '../utility/openNewTab';
+      const driver = findEngineDriver(conn, getExtensions());
-  import { filterName, generateDbPairingId, getAlterDatabaseScript } from 'dbgate-tools';
+      return driver;
-  import { getConnectionInfo, getDatabaseInfo } from '../utility/metadataLoaders';
+    };
-  import fullDisplayName from '../utility/fullDisplayName';
-  import ImportExportModal from '../modals/ImportExportModal.svelte';
-  import { showModal } from '../modals/modalTools';
-  import { findEngineDriver } from 'dbgate-tools';
-  import uuidv1 from 'uuid/v1';
-  import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
-  import getConnectionLabel from '../utility/getConnectionLabel';
-  import getElectron from '../utility/getElectron';
-  import { exportElectronFile } from '../utility/exportElectronFile';
-  import createQuickExportMenu from '../utility/createQuickExportMenu';
-  import ConfirmSqlModal from '../modals/ConfirmSqlModal.svelte';
-  import { alterDatabaseDialog, renameDatabaseObjectDialog } from '../utility/alterDatabaseTools';
-  import ConfirmModal from '../modals/ConfirmModal.svelte';
-  import { apiCall } from '../utility/api';
 
-  export let data;
-  export let passProps;
-
-  function handleClick(forceNewTab = false) {
-    handleDatabaseObjectClick(data, forceNewTab);
-  }
-
-  const getDriver = async () => {
-    const conn = await getConnectionInfo(data);
-    if (!conn) return;
-    const driver = findEngineDriver(conn, $extensions);
-    return driver;
-  };
-
-  function createMenu() {
     const { objectTypeField } = data;
     return menus[objectTypeField]
       .filter(x => x)
@@ -438,7 +408,7 @@
         if (menu.divider) return menu;
 
         if (menu.isQuickExport) {
-          return createQuickExportMenu($extensions, fmt => async () => {
+          return createQuickExportMenu(getExtensions(), fmt => async () => {
             const coninfo = await getConnectionInfo(data);
             exportElectronFile(
               data.pureName,
@@ -609,6 +579,40 @@
         };
       });
   }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import AppObjectCore from './AppObjectCore.svelte';
+  import { currentDatabase, extensions, getExtensions, openedConnections, pinnedTables } from '../stores';
+  import openNewTab from '../utility/openNewTab';
+  import { filterName, generateDbPairingId, getAlterDatabaseScript } from 'dbgate-tools';
+  import { getConnectionInfo, getDatabaseInfo } from '../utility/metadataLoaders';
+  import fullDisplayName from '../utility/fullDisplayName';
+  import ImportExportModal from '../modals/ImportExportModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { findEngineDriver } from 'dbgate-tools';
+  import uuidv1 from 'uuid/v1';
+  import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
+  import getConnectionLabel from '../utility/getConnectionLabel';
+  import getElectron from '../utility/getElectron';
+  import { exportElectronFile } from '../utility/exportElectronFile';
+  import createQuickExportMenu from '../utility/createQuickExportMenu';
+  import ConfirmSqlModal from '../modals/ConfirmSqlModal.svelte';
+  import { alterDatabaseDialog, renameDatabaseObjectDialog } from '../utility/alterDatabaseTools';
+  import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import { apiCall } from '../utility/api';
+
+  export let data;
+  export let passProps;
+
+  function handleClick(forceNewTab = false) {
+    handleDatabaseObjectClick(data, forceNewTab);
+  }
+
+  function createMenu() {
+    return createDatabaseObjectMenu(data);
+  }
 
   $: isPinned = !!$pinnedTables.find(x => testEqual(data, x));
 </script>

packages/web/src/designer/Designer.svelte

@@ -751,6 +751,8 @@
         onChangeTableColor={handleChangeTableColor}
         onMoveReferences={recomputeReferencePositions}
         {table}
+        {conid}
+        {database}
         onChangeTable={changeTable}
         onBringToFront={bringToFront}
         onSelectTable={selectTable}

packages/web/src/designer/DesignerTable.svelte

@@ -2,6 +2,7 @@
   import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
 
   import { tick } from 'svelte';
+  import { createDatabaseObjectMenu } from '../appobj/DatabaseObjectAppObject.svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
   import InputTextModal from '../modals/InputTextModal.svelte';
@@ -12,6 +13,8 @@
   import ColumnLine from './ColumnLine.svelte';
   import DomTableRef from './DomTableRef';
 
+  export let conid;
+  export let database;
   export let table;
   export let onChangeTable;
   export let onBringToFront;
@@ -153,6 +156,7 @@
       ],
       settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) },
       settings?.allowChangeColor && { text: 'Change color', onClick: () => onChangeTableColor(table) },
+      settings?.appendTableSystemMenu && [{ divider: true }, createDatabaseObjectMenu({ ...table, conid, database })],
     ];
   }
 </script>

packages/web/src/designer/DiagramDesigner.svelte

@@ -19,6 +19,7 @@
     canSelectColumns: false,
     canSelectTables: true,
     allowChangeColor: true,
+    appendTableSystemMenu: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />

packages/web/src/designer/DiagramDesignerReference.svelte

@@ -93,6 +93,6 @@
   }
 
   polygon {
-    fill: var(--theme-bg-4);
+    fill: var(--theme-font-1);
   }
 </style>

packages/web/src/designer/QueryDesigner.svelte

@@ -19,6 +19,7 @@
     canSelectColumns: true,
     canSelectTables: false,
     allowChangeColor: false,
+    appendTableSystemMenu: false,
   }}
   referenceComponent={QueryDesignerReference}
 />