perspective designer

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { MultipleDatabaseInfo, PerspectiveConfig } from 'dbgate-datalib';
+  import _ from 'lodash';
+  import { onMount } from 'svelte';
+
+  import Designer from '../designer/Designer.svelte';
+  import QueryDesignerReference from '../designer/QueryDesignerReference.svelte';
+
+  export let config: PerspectiveConfig;
+  export let dbInfos: MultipleDatabaseInfo;
+
+  export let conid;
+  export let database;
+
+  export let onChange;
+
+  function createDesignerModel(config: PerspectiveConfig, dbInfos: MultipleDatabaseInfo) {
+    return {
+      ...config,
+      tables: _.compact(
+        config.nodes.map(node => {
+          const table = dbInfos?.[node.conid || conid]?.[node.database || database]?.tables?.find(
+            x => x.pureName == node.pureName && x.schemaName == node.schemaName
+          );
+          if (!table) return null;
+
+          const { designerId } = node;
+          return {
+            ...table,
+            left: node?.position?.x || 0,
+            top: node?.position?.y || 0,
+            designerId,
+          };
+        })
+      ),
+    };
+  }
+
+  function handleChange(value) {
+    onChange(oldValue => {
+      const newValue = _.isFunction(value) ? value(createDesignerModel(oldValue, dbInfos)) : value;
+      return {
+        ...oldValue,
+        nodes: oldValue.nodes.map(node => {
+          const table = newValue.tables?.find(x => x.designerId == node.designerId);
+          if (table) {
+            return {
+              ...node,
+              position: { x: table.left, y: table.top },
+            };
+          }
+          return node;
+        }),
+      };
+    });
+  }
+</script>
+
+<Designer
+  {...$$props}
+  settings={{
+    showTableCloseButton: true,
+    allowColumnOperations: true,
+    allowCreateRefByDrag: true,
+    allowTableAlias: true,
+    updateFromDbInfo: false,
+    useDatabaseReferences: false,
+    allowScrollColumns: true,
+    allowAddAllReferences: false,
+    canArrange: false,
+    canExport: false,
+    canSelectColumns: true,
+    canSelectTables: false,
+    allowChangeColor: false,
+    appendTableSystemMenu: false,
+    customizeStyle: false,
+    allowDefineVirtualReferences: false,
+  }}
+  referenceComponent={QueryDesignerReference}
+  value={createDesignerModel(config, dbInfos)}
+  onChange={handleChange}
+/>

packages/web/src/perspectives/PerspectiveView.svelte

@@ -55,6 +55,8 @@
   import SearchInput from '../elements/SearchInput.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { useMultipleDatabaseInfo } from '../utility/useMultipleDatabaseInfo';
+  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
+  import PerspectiveDesigner from './PerspectiveDesigner.svelte';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -94,7 +96,14 @@
     });
   }
 
-  $: dbInfos = useMultipleDatabaseInfo(extractPerspectiveDatabases({ conid, database }, config));
+  let perspectiveDatabases = extractPerspectiveDatabases({ conid, database }, config);
+  $: {
+    const newDatabases = extractPerspectiveDatabases({ conid, database }, config);
+    if (stableStringify(newDatabases) != stableStringify(newDatabases)) {
+      perspectiveDatabases = newDatabases;
+    }
+  }
+  $: dbInfos = useMultipleDatabaseInfo(perspectiveDatabases);
   $: rootObject = config?.nodes?.find(x => x.designerId == config?.rootDesignerId);
   $: tableInfo = useTableInfo({ conid, database, ...rootObject });
   $: viewInfo = useViewInfo({ conid, database, ...rootObject });
@@ -139,7 +148,14 @@
   </div>
 
   <svelte:fragment slot="2">
-    <PerspectiveTable {root} {loadedCounts} {config} {setConfig} {conid} {database} />
+    <VerticalSplitter>
+      <svelte:fragment slot="1">
+        <PerspectiveDesigner {config} {conid} {database} onChange={setConfig} dbInfos={$dbInfos} />
+      </svelte:fragment>
+      <svelte:fragment slot="2">
+        <PerspectiveTable {root} {loadedCounts} {config} {setConfig} {conid} {database} />
+      </svelte:fragment>
+    </VerticalSplitter>
   </svelte:fragment>
 </HorizontalSplitter>
 

packages/web/src/tabs/PerspectiveTab.svelte

@@ -107,8 +107,6 @@
     cache.clear();
     loadedCounts.set({});
   }
-
-  $: console.log('PERSPECTIVE', $modelState.value);
 </script>
 
 <ToolStripContainer>