SYNC: diagram settings more visible

packages/web/src/designer/Designer.svelte

@@ -792,7 +792,7 @@
           submenu: [
             {
               text: 'All',
-              onClick: changeStyleFunc('filterColumns', null),
+              onClick: changeStyleFunc('filterColumns', ''),
             },
             {
               text: 'Primary Key',
@@ -817,51 +817,51 @@
           submenu: [
             {
               text: `10 %`,
-              onClick: changeStyleFunc('zoomKoef', 0.1),
+              onClick: changeStyleFunc('zoomKoef', '0.1'),
             },
             {
               text: `15 %`,
-              onClick: changeStyleFunc('zoomKoef', 0.15),
+              onClick: changeStyleFunc('zoomKoef', '0.15'),
             },
             {
               text: `20 %`,
-              onClick: changeStyleFunc('zoomKoef', 0.2),
+              onClick: changeStyleFunc('zoomKoef', '0.2'),
             },
             {
               text: `40 %`,
-              onClick: changeStyleFunc('zoomKoef', 0.4),
+              onClick: changeStyleFunc('zoomKoef', '0.4'),
             },
             {
               text: `60 %`,
-              onClick: changeStyleFunc('zoomKoef', 0.6),
+              onClick: changeStyleFunc('zoomKoef', '0.6'),
             },
             {
               text: `80 %`,
-              onClick: changeStyleFunc('zoomKoef', 0.8),
+              onClick: changeStyleFunc('zoomKoef', '0.8'),
             },
             {
               text: `100 %`,
-              onClick: changeStyleFunc('zoomKoef', 1),
+              onClick: changeStyleFunc('zoomKoef', '1'),
             },
             {
               text: `120 %`,
-              onClick: changeStyleFunc('zoomKoef', 1.2),
+              onClick: changeStyleFunc('zoomKoef', '1.2'),
             },
             {
               text: `140 %`,
-              onClick: changeStyleFunc('zoomKoef', 1.4),
+              onClick: changeStyleFunc('zoomKoef', '1.4'),
             },
             {
               text: `160 %`,
-              onClick: changeStyleFunc('zoomKoef', 1.6),
+              onClick: changeStyleFunc('zoomKoef', '1.6'),
             },
             {
               text: `180 %`,
-              onClick: changeStyleFunc('zoomKoef', 1.8),
+              onClick: changeStyleFunc('zoomKoef', '1.8'),
             },
             {
               text: `200 %`,
-              onClick: changeStyleFunc('zoomKoef', 2),
+              onClick: changeStyleFunc('zoomKoef', '2'),
             },
           ],
         },

packages/web/src/designer/DiagramSettings.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+
+  export let values;
+</script>
+
+<FormProviderCore {values}>
+  <FormSelectField
+    defaultValue=""
+    name="filterColumns"
+    label="Show columns"
+    isNative
+    options={[
+      {
+        value: '',
+        label: 'All',
+      },
+      {
+        value: 'primaryKey',
+        label: 'Primary Key',
+      },
+      {
+        value: 'allKeys',
+        label: 'All Keys',
+      },
+      {
+        value: 'notNull',
+        label: 'Not Null',
+      },
+      {
+        value: 'keysAndNotNull',
+        label: 'Keys And Not Null',
+      },
+
+      //   {
+      //           text: 'All',
+      //           onClick: changeStyleFunc('filterColumns', ''),
+      //         },
+      //         {
+      //           text: 'Primary Key',
+      //           onClick: changeStyleFunc('filterColumns', 'primaryKey'),
+      //         },
+      //         {
+      //           text: 'All Keys',
+      //           onClick: changeStyleFunc('filterColumns', 'allKeys'),
+      //         },
+      //         {
+      //           text: 'Not Null',
+      //           onClick: changeStyleFunc('filterColumns', 'notNull'),
+      //         },
+      //         {
+      //           text: 'Keys And Not Null',
+      //           onClick: changeStyleFunc('filterColumns', 'keysAndNotNull'),
+      //         },
+    ]}
+  />
+
+  <FormSelectField
+    defaultValue="1"
+    name="zoomKoef"
+    label="Zoom"
+    isNative
+    options={[
+      {
+        value: '0.1',
+        label: '10 %',
+      },
+      {
+        value: '0.15',
+        label: '15 %',
+      },
+      {
+        value: '0.2',
+        label: '20 %',
+      },
+      {
+        value: '0.4',
+        label: '40 %',
+      },
+      {
+        value: '0.6',
+        label: '60 %',
+      },
+      {
+        value: '0.8',
+        label: '80 %',
+      },
+      {
+        value: '1',
+        label: '100 %',
+      },
+      {
+        value: '1.2',
+        label: '120 %',
+      },
+      {
+        value: '1.4',
+        label: '140 %',
+      },
+      {
+        value: '1.6',
+        label: '160 %',
+      },
+      {
+        value: '1.8',
+        label: '180 %',
+      },
+      {
+        value: '2',
+        label: '200 %',
+      },
+    ]}
+  />
+
+  <FormCheckboxField name="showNullability" label="Show NULL/NOT NULL" />
+  <FormCheckboxField name="showDataType" label="Show data type" />
+</FormProviderCore>

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>

packages/web/src/widgets/WidgetsInnerContainer.svelte

@@ -3,6 +3,7 @@
 
   export let hideContent = false;
   export let fixedWidth = 0;
+  export let skipDefineWidth = false;
 
   export function scrollTop() {
     domDiv.scrollTop = 0;
@@ -13,7 +14,7 @@
   on:drop
   bind:this={domDiv}
   class:hideContent
-  class:leftFixedWidth={!fixedWidth}
+  class:leftFixedWidth={!fixedWidth && !skipDefineWidth}
   data-testid={$$props['data-testid']}
   style:width={fixedWidth ? `${fixedWidth}px` : undefined}
 >