perspective designer auto arrange

packages/web/src/designer/Designer.svelte

@@ -175,8 +175,8 @@
     canvasHeight = Math.max(3000, maxY + 50);
   }
 
-  function callChange(changeFunc, skipUndoChain = undefined) {
-    onChange(changeFunc, skipUndoChain);
+  function callChange(changeFunc, skipUndoChain = undefined, settings = undefined) {
+    onChange(changeFunc, skipUndoChain, settings);
     tick().then(recomputeReferencePositions);
   }
 
@@ -665,26 +665,30 @@
 
     // layout.print();
 
-    callChange(current => {
-      return {
-        ...current,
-        tables: (current?.tables || []).map(table => {
-          const node = layout.nodes[table.designerId];
-          // console.log('POSITION', position);
-          return node
-            ? {
-                ...table,
-                needsArrange: false,
-                left: node.left,
-                top: node.top,
-              }
-            : {
-                ...table,
-                needsArrange: false,
-              };
-        }),
-      };
-    }, skipUndoChain);
+    callChange(
+      current => {
+        return {
+          ...current,
+          tables: (current?.tables || []).map(table => {
+            const node = layout.nodes[table.designerId];
+            // console.log('POSITION', position);
+            return node
+              ? {
+                  ...table,
+                  needsArrange: false,
+                  left: node.left,
+                  top: node.top,
+                }
+              : {
+                  ...table,
+                  needsArrange: false,
+                };
+          }),
+        };
+      },
+      skipUndoChain,
+      { isCalledFromArrange: true }
+    );
   }
 
   export async function exportDiagram() {

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { MultipleDatabaseInfo, PerspectiveConfig } from 'dbgate-datalib';
   import _ from 'lodash';
-  import { onMount } from 'svelte';
+  import { tick } from 'svelte';
+  import runCommand from '../commands/runCommand';
 
   import Designer from '../designer/Designer.svelte';
   import QueryDesignerReference from '../designer/QueryDesignerReference.svelte';
@@ -36,14 +37,21 @@
     };
   }
 
-  function handleChange(value) {
+  function handleChange(value, skipUndoChain, settings) {
     onChange(oldValue => {
       const newValue = _.isFunction(value) ? value(createDesignerModel(oldValue, dbInfos)) : value;
-      return {
+      let isArranged = oldValue.isArranged;
+      if (settings?.isCalledFromArrange) {
+        isArranged = true;
+      }
+      const res = {
         ...oldValue,
         nodes: oldValue.nodes.map(node => {
           const table = newValue.tables?.find(x => x.designerId == node.designerId);
-          if (table) {
+          if (table && (table.left != node.position?.x || table.top != node.position?.y)) {
+            if (!settings?.isCalledFromArrange) {
+              isArranged = false;
+            }
             return {
               ...node,
               position: { x: table.left, y: table.top },
@@ -52,8 +60,19 @@
           return node;
         }),
       };
+      res.isArranged = isArranged;
+      return res;
     });
   }
+
+  async function detectAutoArrange(config: PerspectiveConfig, dbInfos) {
+    if (config.isArranged && config.nodes.find(x => !x.position)) {
+      await tick();
+      runCommand('designer.arrange');
+    }
+  }
+
+  $: detectAutoArrange(config, dbInfos);
 </script>
 
 <Designer

packages/web/src/perspectives/PerspectiveView.svelte

@@ -11,6 +11,17 @@
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().defineCustomJoin(),
   });
+
+  registerCommand({
+    id: 'perspective.arrange',
+    category: 'Perspective',
+    icon: 'icon arrange',
+    name: 'Arrange',
+    toolbar: true,
+    isRelatedToTab: true,
+    testEnabled: () => getCurrentEditor()?.canArrange(),
+    onClick: () => getCurrentEditor().arrange(),
+  });
 </script>
 
 <script lang="ts">
@@ -57,6 +68,7 @@
   import { useMultipleDatabaseInfo } from '../utility/useMultipleDatabaseInfo';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import PerspectiveDesigner from './PerspectiveDesigner.svelte';
+  import runCommand from '../commands/runCommand';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -96,6 +108,18 @@
     });
   }
 
+  export function canArrange() {
+    return !config.isArranged;
+  }
+
+  export function arrange() {
+    // setConfig(cfg => ({
+    //   ...cfg,
+    //   isArranged: true,
+    // }));
+    runCommand('designer.arrange');
+  }
+
   let perspectiveDatabases = extractPerspectiveDatabases({ conid, database }, config);
   $: {
     const newDatabases = extractPerspectiveDatabases({ conid, database }, config);

packages/web/src/tabs/PerspectiveTab.svelte

@@ -134,7 +134,7 @@
   />
 
   <svelte:fragment slot="toolstrip">
-    <ToolStripCommandButton command="designer.arrange" />
+    <ToolStripCommandButton command="perspective.arrange" />
     <ToolStripCommandButton command="perspective.refresh" />
     <ToolStripCommandButton command="perspective.customJoin" />
     <ToolStripSaveButton idPrefix="perspective" />