SYNC: diagram settings more visible

packages/web/src/tabs/DiagramTab.svelte

@@ -15,24 +15,26 @@
 
 <script lang="ts">
   import useEditorData from '../query/useEditorData';
-  import { extensions } from '../stores';
-  import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
   import { registerFileCommands } from '../commands/stdCommands';
   import createUndoReducer from '../utility/createUndoReducer';
   import _ from 'lodash';
-  import { findEngineDriver } from 'dbgate-tools';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import DiagramDesigner from '../designer/DiagramDesigner.svelte';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import invalidateCommands from '../commands/invalidateCommands';
   import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
-  import VerticalSplitter from "../elements/VerticalSplitter.svelte";
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
+  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
+  import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
+  import DiagramSettings from '../designer/DiagramSettings.svelte';
+  import { derived } from 'svelte/store';
 
   export let tabid;
   export let conid;
   export let database;
-  export let initialArgs;
 
   export const activator = createActivator('DiagramTab', true);
 
@@ -87,6 +89,22 @@
     references: [],
   });
 
+  const setStyle = style =>
+    // @ts-ignore
+    dispatchModel({
+      type: 'compute',
+      compute: v => ({ ...v, style: _.isFunction(style) ? style(v.style) : style }),
+    });
+
+  const styleDerivedStore = derived(modelState, ($modelState: any) =>
+    $modelState.value ? $modelState.value.style || {} : {}
+  );
+  const styleStore = {
+    ...styleDerivedStore,
+    update: setStyle,
+    set: setStyle,
+  };
+
   function createMenu() {
     return [
       { command: 'diagram.save' },
@@ -98,20 +116,44 @@
       { command: 'diagram.redo' },
     ];
   }
+
+  $: console.log('$styleStore', $styleStore);
 </script>
 
 <ToolStripContainer>
-  <VerticalSplitter isSplitter={false}>
+  <HorizontalSplitter isSplitter={$styleStore.settingsVisible ?? true} initialSizeRight={300}>
     <svelte:fragment slot="1">
       <DiagramDesigner value={$modelState.value || {}} {conid} {database} onChange={handleChange} menu={createMenu} />
     </svelte:fragment>
-  </VerticalSplitter>
-  
+    <svelte:fragment slot="2">
+      <WidgetColumnBar>
+        <WidgetColumnBarItem
+          title="Settings"
+          name="diagramSettings"
+          storageName="diagramSettingsWidget"
+          onClose={() => {
+            styleStore.update(x => ({ ...x, settingsVisible: false }));
+          }}
+        >
+          <WidgetsInnerContainer skipDefineWidth>
+            <DiagramSettings values={styleStore} />
+          </WidgetsInnerContainer>
+        </WidgetColumnBarItem>
+      </WidgetColumnBar>
+    </svelte:fragment>
+  </HorizontalSplitter>
+
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandButton command="designer.arrange" />
     <ToolStripSaveButton idPrefix="diagram" />
     <ToolStripCommandButton command="diagram.export" />
     <ToolStripCommandButton command="diagram.undo" />
     <ToolStripCommandButton command="diagram.redo" />
+    <ToolStripButton
+      icon="icon settings"
+      on:click={() => {
+        styleStore.update(x => ({ ...x, settingsVisible: !x.settingsVisible }));
+      }}>Settings</ToolStripButton
+    >
   </svelte:fragment>
 </ToolStripContainer>