perspective designer auto arrange

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);