feat(diagram): fixes for zoom

packages/web/src/designer/Designer.svelte

@@ -70,6 +70,7 @@
 
   $: tables = value?.tables as any[];
   $: references = value?.references as any[];
+  $: zoomKoef = settings?.customizeStyle && value?.style?.zoomKoef ? value?.style?.zoomKoef : 1;
 
   $: isMultipleTableSelection = tables.filter(x => x.isSelectedTable).length >= 2;
 
@@ -580,10 +581,10 @@
   };
 
   const handleMoveStart = (x, y) => {
-    dragStartPoint = { x, y };
+    dragStartPoint = { x: x / zoomKoef, y: y / zoomKoef };
   };
   const handleMove = (dx, dy, x, y) => {
-    dragCurrentPoint = { x, y };
+    dragCurrentPoint = { x: x / zoomKoef, y: y / zoomKoef };
   };
   const handleMoveEnd = (x, y) => {
     if (dragStartPoint && dragCurrentPoint) {
@@ -857,6 +858,7 @@
         {table}
         {conid}
         {database}
+        {zoomKoef}
         {isMultipleTableSelection}
         onChangeTable={changeTable}
         onBringToFront={bringToFront}
@@ -872,7 +874,6 @@
         {settings}
       />
     {/each}
-  </div>
 
     {#if dragStartPoint && dragCurrentPoint}
       <svg class="drag-rect">
@@ -888,6 +889,7 @@
       </svg>
     {/if}
   </div>
+</div>
 
 <style>
   .wrapper {

packages/web/src/designer/DesignerTable.svelte

@@ -17,6 +17,7 @@
   export let conid;
   export let database;
   export let table;
+  export let zoomKoef;
   export let onChangeTable;
   export let onBringToFront;
   export let onSelectTable;
@@ -74,8 +75,8 @@
   }
 
   export function move(x, y) {
-    movingPosition.left += x;
+    movingPosition.left += x / zoomKoef;
-    movingPosition.top += y;
+    movingPosition.top += y / zoomKoef;
   }
 
   export function moveEnd() {

packages/web/src/utility/moveDrag.ts

@@ -11,9 +11,11 @@ export default function moveDrag(node, dragEvents) {
   const handleMoveDown = e => {
     if (e.button != 0) return;
 
+    const zoomKoef = window.getComputedStyle(node)['zoom'];
+
     const clientRect = node.getBoundingClientRect();
-    clientX = clientRect.left;
+    clientX = clientRect.left * zoomKoef;
-    clientY = clientRect.top;
+    clientY = clientRect.top * zoomKoef;
 
     startX = e.clientX;
     startY = e.clientY;
@@ -23,6 +25,8 @@ export default function moveDrag(node, dragEvents) {
   };
 
   const handleMoveMove = e => {
+    const zoomKoef = window.getComputedStyle(node)['zoom'];
+
     e.preventDefault();
     const diffX = e.clientX - startX;
     startX = e.clientX;
@@ -32,6 +36,8 @@ export default function moveDrag(node, dragEvents) {
     onMove(diffX, diffY, e.clientX - clientX, e.clientY - clientY);
   };
   const handleMoveEnd = e => {
+    const zoomKoef = window.getComputedStyle(node)['zoom'];
+
     e.preventDefault();
     startX = null;
     startY = null;