perspective designer auto arrange

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