diagram designer

packages/web/public/global.css

@@ -45,6 +45,9 @@ body {
 .nowrap {
   white-space: nowrap;
 }
+.noselect {
+  user-select: none;
+}
 .bold {
   font-weight: bold;
 }

packages/web/src/designer/ColumnLine.svelte

@@ -17,6 +17,7 @@
   export let onCreateReference;
   export let onAddReferenceByColumn;
   export let onSelectColumn;
+  export let settings;
 
   $: designerColumn = (designer.columns || []).find(
     x => x.designerId == designerId && x.columnName == column.columnName
@@ -38,9 +39,11 @@
     };
 
     return [
+      settings?.allowColumnOperations && [
         { text: 'Sort ascending', onClick: () => setSortOrder(1) },
         { text: 'Sort descending', onClick: () => setSortOrder(-1) },
         { text: 'Unsort', onClick: () => setSortOrder(0) },
+      ],
       foreignKey && { text: 'Add reference', onClick: addReference },
     ];
   }
@@ -49,8 +52,10 @@
 <div
   class="line"
   bind:this={domLine}
-  draggable={true}
+  draggable={!!settings?.allowCreateRefByDrag}
   on:dragstart={e => {
+    if (!settings?.allowCreateRefByDrag) return;
+
     const dragData = {
       ...column,
       designerId,
@@ -92,6 +97,7 @@
     })}
   use:contextMenu={createMenu}
 >
+  {#if settings?.allowColumnOperations}
     <CheckboxField
       checked={!!(designer.columns || []).find(
         x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
@@ -116,6 +122,7 @@
         }
       }}
     />
+  {/if}
   <ColumnLabel {...column} foreignKey={findForeignKeyForColumn(table, column)} forceIcon />
   {#if designerColumn?.filter}
     <FontIcon icon="img filter" />

packages/web/src/designer/Designer.svelte

@@ -19,6 +19,7 @@
   export let conid;
   export let database;
   export let menu;
+  export let settings;
 
   let domCanvas;
 
@@ -153,7 +154,9 @@
     const newTableDesignerId = uuidv1();
     callChange(current => {
       const fromTable = (current.tables || []).find(x => x.designerId == designerId);
-      if (!fromTable) return;
+      if (!fromTable) return current;
+      const alias = getNewTableAlias(toTable, current.tables);
+      if (alias && !settings?.allowTableAlias) return current;
       return {
         ...current,
         tables: [
@@ -163,7 +166,7 @@
             left: fromTable.left + 300,
             top: fromTable.top + 50,
             designerId: newTableDesignerId,
-            alias: getNewTableAlias(toTable, current.tables),
+            alias,
           },
         ],
         references: [
@@ -265,13 +268,16 @@
         ),
       ]);
 
+      const alias = getNewTableAlias(json, current?.tables);
+      if (alias && !settings?.allowTableAlias) return current;
+
       return {
         ...current,
         tables: [
           ...((current || {}).tables || []),
           {
             ...json,
-            alias: getNewTableAlias(json, current?.tables),
+            alias,
           },
         ],
         references:
@@ -301,7 +307,7 @@
   }
 </script>
 
-<div class="wrapper" use:contextMenu={menu}>
+<div class="wrapper noselect" use:contextMenu={menu}>
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}
@@ -344,6 +350,7 @@
         designer={value}
         {sourceDragColumn$}
         {targetDragColumn$}
+        {settings}
       />
     {/each}
   </div>

packages/web/src/designer/DesignerTable.svelte

@@ -31,6 +31,7 @@
   // export let domTablesRef;
   export let designer;
   export let onMoveReferences;
+  export let settings;
 
   let movingPosition = null;
   let domWrapper;
@@ -86,6 +87,7 @@
   function createMenu() {
     return [
       { text: 'Remove', onClick: () => onRemoveTable({ designerId }) },
+      settings?.allowTableAlias && [
         { divider: true },
         { text: 'Set table alias', onClick: handleSetTableAlias },
         alias && {
@@ -96,6 +98,7 @@
               alias: null,
             }),
         },
+      ],
     ];
   }
 </script>
@@ -114,9 +117,11 @@
     use:contextMenu={createMenu}
   >
     <div>{alias || pureName}</div>
+    {#if settings?.showTableCloseButton}
       <div class="close" on:click={() => onRemoveTable(table)}>
         <FontIcon icon="icon close" />
       </div>
+    {/if}
   </div>
   <div class="columns" on:scroll={() => tick().then(onMoveReferences)}>
     {#each columns || [] as column}
@@ -131,6 +136,7 @@
         {targetDragColumn$}
         {onCreateReference}
         {onAddReferenceByColumn}
+        {settings}
         bind:domLine={columnRefs[column.columnName]}
       />
     {/each}

packages/web/src/designer/DiagramDesigner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Designer from './Designer.svelte';
+</script>
+
+<Designer
+  {...$$props}
+  settings={{
+    showTableCloseButton: false,
+    allowColumnOperations: false,
+    allowCreateRefByDrag: false,
+    allowTableAlias: false,
+  }}
+/>

packages/web/src/designer/QueryDesigner.svelte

@@ -2,4 +2,12 @@
   import Designer from './Designer.svelte';
 </script>
 
-<Designer {...$$props} />
+<Designer
+  {...$$props}
+  settings={{
+    showTableCloseButton: true,
+    allowColumnOperations: true,
+    allowCreateRefByDrag: true,
+    allowTableAlias: true,
+  }}
+/>

packages/web/src/tabs/DiagramTab.svelte

@@ -22,7 +22,7 @@
   import _ from 'lodash';
   import { findEngineDriver } from 'dbgate-tools';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
-  import Designer from '../designer/Designer.svelte';
+  import DiagramDesigner from '../designer/DiagramDesigner.svelte';
 
   export let tabid;
   export let conid;
@@ -92,7 +92,7 @@
   }
 </script>
 
-<Designer
+<DiagramDesigner
   value={$modelState.value || {}}
   {conid}
   {database}