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 [
-      { text: 'Sort ascending', onClick: () => setSortOrder(1) },
-      { text: 'Sort descending', onClick: () => setSortOrder(-1) },
-      { text: 'Unsort', onClick: () => setSortOrder(0) },
+      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,30 +97,32 @@
     })}
   use:contextMenu={createMenu}
 >
-  <CheckboxField
-    checked={!!(designer.columns || []).find(
-      x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
-    )}
-    on:change={e => {
-      if (e.target.checked) {
-        onChangeColumn(
-          {
-            ...column,
-            designerId,
-          },
-          col => ({ ...col, isOutput: true })
-        );
-      } else {
-        onChangeColumn(
-          {
-            ...column,
-            designerId,
-          },
-          col => ({ ...col, isOutput: false })
-        );
-      }
-    }}
-  />
+  {#if settings?.allowColumnOperations}
+    <CheckboxField
+      checked={!!(designer.columns || []).find(
+        x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
+      )}
+      on:change={e => {
+        if (e.target.checked) {
+          onChangeColumn(
+            {
+              ...column,
+              designerId,
+            },
+            col => ({ ...col, isOutput: true })
+          );
+        } else {
+          onChangeColumn(
+            {
+              ...column,
+              designerId,
+            },
+            col => ({ ...col, isOutput: false })
+          );
+        }
+      }}
+    />
+  {/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,16 +87,18 @@
   function createMenu() {
     return [
       { text: 'Remove', onClick: () => onRemoveTable({ designerId }) },
-      { divider: true },
-      { text: 'Set table alias', onClick: handleSetTableAlias },
-      alias && {
-        text: 'Remove table alias',
-        onClick: () =>
-          onChangeTable({
-            ...table,
-            alias: null,
-          }),
-      },
+      settings?.allowTableAlias && [
+        { divider: true },
+        { text: 'Set table alias', onClick: handleSetTableAlias },
+        alias && {
+          text: 'Remove table alias',
+          onClick: () =>
+            onChangeTable({
+              ...table,
+              alias: null,
+            }),
+        },
+      ],
     ];
   }
 </script>
@@ -114,9 +117,11 @@
     use:contextMenu={createMenu}
   >
     <div>{alias || pureName}</div>
-    <div class="close" on:click={() => onRemoveTable(table)}>
-      <FontIcon icon="icon close" />
-    </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}