From 9b666caf207cc4527e3c9446ba5d2805321c6a21 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 20 Jan 2022 18:32:43 +0100
Subject: [PATCH] feat(diagram): fixes for zoom

---
 packages/web/src/designer/Designer.svelte     | 22 ++++++++++---------
 .../web/src/designer/DesignerTable.svelte     |  5 +++--
 packages/web/src/utility/moveDrag.ts          | 12 +++++++---
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 4e6a0b61..9c0676a7 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/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,21 +874,21 @@
         {settings}
       />
     {/each}
-  </div>
 
-  {#if dragStartPoint && dragCurrentPoint}
-    <svg class="drag-rect">
-      <polyline
-        points={`
+    {#if dragStartPoint && dragCurrentPoint}
+      <svg class="drag-rect">
+        <polyline
+          points={`
         ${dragStartPoint.x},${dragStartPoint.y}
         ${dragStartPoint.x},${dragCurrentPoint.y}
         ${dragCurrentPoint.x},${dragCurrentPoint.y}
         ${dragCurrentPoint.x},${dragStartPoint.y}
         ${dragStartPoint.x},${dragStartPoint.y}
     `}
-      />
-    </svg>
-  {/if}
+        />
+      </svg>
+    {/if}
+  </div>
 </div>
 
 <style>
diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte
index fb20457b..d8fb21e0 100644
--- a/packages/web/src/designer/DesignerTable.svelte
+++ b/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.top += y;
+    movingPosition.left += x / zoomKoef;
+    movingPosition.top += y / zoomKoef;
   }
 
   export function moveEnd() {
diff --git a/packages/web/src/utility/moveDrag.ts b/packages/web/src/utility/moveDrag.ts
index eef0c1e6..8712398b 100644
--- a/packages/web/src/utility/moveDrag.ts
+++ b/packages/web/src/utility/moveDrag.ts
@@ -11,10 +11,12 @@ 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;
-    clientY = clientRect.top;
-  
+    clientX = clientRect.left * zoomKoef;
+    clientY = clientRect.top * zoomKoef;
+
     startX = e.clientX;
     startY = e.clientY;
     document.addEventListener('mousemove', handleMoveMove, true);
@@ -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;