diagram improvements

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -85,6 +85,34 @@
       });
     };
 
+    const handleShowDiagram = async () => {
+      const db = await getDatabaseInfo({
+        conid: connection._id,
+        database: name,
+      });
+      openNewTab(
+        {
+          title: 'Diagram #',
+          icon: 'img diagram',
+          tabComponent: 'DiagramTab',
+          props: {
+            conid: connection._id,
+            database: name,
+          },
+        },
+        {
+          editor: {
+            tables: db.tables.map(table => ({
+              ...table,
+              designerId: `${table.pureName}-${uuidv1()}`,
+            })),
+            references: [],
+            autoLayout: true,
+          },
+        }
+      );
+    };
+
     const handleDisconnect = () => {
       const electron = getElectron();
       if (electron) {
@@ -138,6 +166,7 @@
       { divider: true },
       { onClick: handleImport, text: 'Import' },
       { onClick: handleExport, text: 'Export' },
+      { onClick: handleShowDiagram, text: 'Show diagram' },
       { onClick: handleSqlGenerator, text: 'SQL Generator' },
       { onClick: handleOpenJsonModel, text: 'Open model as JSON' },
       { onClick: handleExportModel, text: 'Export DB model - experimental' },
@@ -157,6 +186,7 @@
 
 <script lang="ts">
   import getConnectionLabel from '../utility/getConnectionLabel';
+  import uuidv1 from 'uuid/v1';
 
   import _, { find } from 'lodash';
   import ImportExportModal from '../modals/ImportExportModal.svelte';

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -551,7 +551,7 @@
                     tables: [
                       {
                         ...data,
-                        designerId: uuidv1(),
+                        designerId: `${data.pureName}-${uuidv1()}`,
                         autoAddReferences: true,
                       },
                     ],

packages/web/src/designer/Designer.svelte

@@ -53,6 +53,8 @@
   export const activator = createActivator('Designer', true);
 
   let domCanvas;
+  let canvasWidth = 3000;
+  let canvasHeight = 3000;
 
   const sourceDragColumn$ = writable(null);
   const targetDragColumn$ = writable(null);
@@ -87,6 +89,10 @@
     }
   }
 
+  $: {
+    detectSize(tables, domTables);
+  }
+
   $: {
     if (dbInfo && value?.autoLayout) {
       performAutoActions($dbInfo);
@@ -145,6 +151,16 @@
     }, true);
   }
 
+  async function detectSize(tables, domTables) {
+    await tick();
+    const rects = _.values(domTables).map(x => x.getRect());
+    const maxX = _.max(rects.map(x => x.right));
+    const maxY = _.max(rects.map(x => x.bottom));
+
+    canvasWidth = Math.max(3000, maxX + 50);
+    canvasHeight = Math.max(3000, maxY + 50);
+  }
+
   function callChange(changeFunc, skipUndoChain = undefined) {
     onChange(changeFunc, skipUndoChain);
     tick().then(recomputeReferencePositions);
@@ -556,7 +572,13 @@
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}
 
-  <div class="canvas" bind:this={domCanvas} on:dragover={e => e.preventDefault()} on:drop={handleDrop}>
+  <div
+    class="canvas"
+    bind:this={domCanvas}
+    on:dragover={e => e.preventDefault()}
+    on:drop={handleDrop}
+    style={`width:${canvasWidth}px;height:${canvasHeight}px;`}
+  >
     {#each references || [] as ref (ref.designerId)}
       <svelte:component
         this={referenceComponent}
@@ -614,8 +636,6 @@
     font-size: 20px;
   }
   .canvas {
-    width: 3000px;
-    height: 3000px;
     position: relative;
   }
 </style>

packages/web/src/designer/GraphLayout.ts

@@ -368,6 +368,7 @@ export class GraphLayout {
   doMoveSteps() {
     let res: GraphLayout = this;
     let score = res.score();
+    const start = new Date().getTime();
     for (let step = 0; step < MOVE_STEP_COUNT; step++) {
       const lastRes = res;
       res = res.tryMoveElement();
@@ -377,7 +378,7 @@ export class GraphLayout {
       }
       const newScore = res.score();
       // console.log('STEP, SCORE, NEW SCORE', step, score, newScore);
-      if (score - newScore < MINIMAL_SCORE_BENEFIT) {
+      if (score - newScore < MINIMAL_SCORE_BENEFIT || new Date().getTime() - start > 1000) {
         lastRes.fillEdges();
         return lastRes;
       }