diagram zoom

packages/web/src/designer/Designer.svelte

@@ -717,7 +717,7 @@
   function createMenu() {
     return [
       menu,
-      settings?.chooseColumnProperties && [
+      settings?.customizeStyle && [
         { divider: true },
         {
           text: 'Column properties',
@@ -755,7 +755,39 @@
               text: 'Keys And Not Null',
               onClick: changeStyleFunc('filterColumns', 'keysAndNotNull'),
             },
-            
+          ],
+        },
+        {
+          text: `Zoom - ${(value?.style?.zoomKoef || 1) * 100}%`,
+          submenu: [
+            {
+              text: `10 %`,
+              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),
+            },
           ],
         },
       ],
@@ -773,7 +805,9 @@
     bind:this={domCanvas}
     on:dragover={e => e.preventDefault()}
     on:drop={handleDrop}
-    style={`width:${canvasWidth}px;height:${canvasHeight}px;`}
+    style={`width:${canvasWidth}px;height:${canvasHeight}px;
+      ${settings?.customizeStyle && value?.style?.zoomKoef ? `zoom:${value?.style?.zoomKoef};` : ''}
+    `}
     on:mousedown={e => {
       if (e.button == 0 && settings?.canSelectTables) {
         callChange(

packages/web/src/designer/DesignerTable.svelte

@@ -85,7 +85,7 @@
   }
 
   function shouldShowColumn(table, column, style) {
-    if (!settings?.chooseColumnProperties) {
+    if (!settings?.customizeStyle) {
       return true;
     }
     switch (style?.filterColumns || 'all') {

packages/web/src/designer/DiagramDesigner.svelte

@@ -20,7 +20,7 @@
     canSelectTables: true,
     allowChangeColor: true,
     appendTableSystemMenu: true,
-    chooseColumnProperties: true,
+    customizeStyle: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />

packages/web/src/designer/QueryDesigner.svelte

@@ -20,7 +20,7 @@
     canSelectTables: false,
     allowChangeColor: false,
     appendTableSystemMenu: false,
-    chooseColumnProperties: false,
+    customizeStyle: false,
   }}
   referenceComponent={QueryDesignerReference}
 />