SYNC: zoom diagram by wheel

packages/tools/src/diagramTools.ts

@@ -39,3 +39,5 @@ export function chooseTopTables(tables: TableInfo[], count: number) {
 
   return sorted.slice(0, count);
 }
+
+export const DIAGRAM_ZOOMS = [0.1, 0.15, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2];

packages/tools/src/index.ts

@@ -26,4 +26,4 @@ export * from './filterBehaviours';
 export * from './schemaInfoTools';
 export * from './dbKeysLoader';
 export * from './rowProgressReporter';
-export * from './chooseTopTables';
+export * from './diagramTools';

packages/web/src/designer/Designer.svelte

@@ -47,7 +47,7 @@
   import { showModal } from '../modals/modalTools';
   import ChooseColorModal from '../modals/ChooseColorModal.svelte';
   import { currentThemeDefinition } from '../stores';
-  import { chooseTopTables, extendDatabaseInfoFromApps } from 'dbgate-tools';
+  import { chooseTopTables, DIAGRAM_ZOOMS, extendDatabaseInfoFromApps } from 'dbgate-tools';
   import SearchInput from '../elements/SearchInput.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import DragColumnMemory from './DragColumnMemory.svelte';
@@ -821,56 +821,10 @@
         },
         {
           text: `Zoom - ${(value?.style?.zoomKoef || 1) * 100}%`,
-          submenu: [
+          submenu: DIAGRAM_ZOOMS.map(koef => ({
-            {
+            text: `${koef * 100} %`,
-              text: `10 %`,
+            onClick: changeStyleFunc('zoomKoef', koef.toString()),
-              onClick: changeStyleFunc('zoomKoef', '0.1'),
+          })),
-            },
-            {
-              text: `15 %`,
-              onClick: changeStyleFunc('zoomKoef', '0.15'),
-            },
-            {
-              text: `20 %`,
-              onClick: changeStyleFunc('zoomKoef', '0.2'),
-            },
-            {
-              text: `40 %`,
-              onClick: changeStyleFunc('zoomKoef', '0.4'),
-            },
-            {
-              text: `60 %`,
-              onClick: changeStyleFunc('zoomKoef', '0.6'),
-            },
-            {
-              text: `80 %`,
-              onClick: changeStyleFunc('zoomKoef', '0.8'),
-            },
-            {
-              text: `100 %`,
-              onClick: changeStyleFunc('zoomKoef', '1'),
-            },
-            {
-              text: `120 %`,
-              onClick: changeStyleFunc('zoomKoef', '1.2'),
-            },
-            {
-              text: `140 %`,
-              onClick: changeStyleFunc('zoomKoef', '1.4'),
-            },
-            {
-              text: `160 %`,
-              onClick: changeStyleFunc('zoomKoef', '1.6'),
-            },
-            {
-              text: `180 %`,
-              onClick: changeStyleFunc('zoomKoef', '1.8'),
-            },
-            {
-              text: `200 %`,
-              onClick: changeStyleFunc('zoomKoef', '2'),
-            },
-          ],
         },
       ],
     ];
@@ -897,9 +851,43 @@
       });
     }
   }
+
+  function handleWheel(event) {
+    if (event.ctrlKey) {
+      event.preventDefault();
+      const zoomIndex = DIAGRAM_ZOOMS.findIndex(x => x == value?.style?.zoomKoef);
+      if (zoomIndex < 0) DIAGRAM_ZOOMS.findIndex(x => x == 1);
+
+      let newZoomIndex = zoomIndex;
+      if (event.deltaY < 0) {
+        newZoomIndex += 1;
+      }
+      if (event.deltaY > 0) {
+        newZoomIndex -= 1;
+      }
+      if (newZoomIndex < 0) {
+        newZoomIndex = 0;
+      }
+      if (newZoomIndex >= DIAGRAM_ZOOMS.length) {
+        newZoomIndex = DIAGRAM_ZOOMS.length - 1;
+      }
+      const newZoomKoef = DIAGRAM_ZOOMS[newZoomIndex];
+
+      callChange(
+        current => ({
+          ...current,
+          style: {
+            ...current?.style,
+            zoomKoef: newZoomKoef.toString(),
+          },
+        }),
+        true
+      );
+    }
+  }
 </script>
 
-<div class="wrapper noselect" use:contextMenu={createMenu}>
+<div class="wrapper noselect" use:contextMenu={createMenu} on:wheel={handleWheel}>
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}

packages/web/src/designer/DiagramSettings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { DIAGRAM_ZOOMS } from 'dbgate-tools';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
 
@@ -47,56 +48,10 @@
     data-testid="DiagramSettings_zoomKoef"
     label="Zoom"
     isNative
-    options={[
+    options={DIAGRAM_ZOOMS.map(koef => ({
-      {
+      value: koef.toString(),
-        value: '0.1',
+      label: `${Math.round(koef * 100)} %`,
-        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" data-testid="DiagramSettings_showNullability" />