bugfix/#433 Inconsistent behavior with zooming and dragging elements

index.html

@@ -120,13 +120,13 @@
       .info__detail {
         display: flex;
         justify-content: space-between;
-        padding: 4.5rem 3px 0 3px;
+        padding-top: 4.5rem;
+        gap: 2rem;
       }
       .info__text {
         padding-top: 0.9rem;
         width: 50%;
       }
-
       .info__text h3 {
         font-weight: 400;
         font-size: 30px;
@@ -138,7 +138,6 @@
         font-weight: 700;
         letter-spacing: 1px;
       }
-
       .info__link {
         display: block;
         padding: 0.6em 1.1em;
@@ -152,24 +151,33 @@
         font-size: 20px;
         margin-top: 3.5rem;
       }
-      .info__image {
-        width: 45%;
-        border-radius: 10px;
-        box-shadow:
-          -14px 14px 28px #0f1924,
-          14px -14px 28px #192b3e;
-      }
+
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 10px;
       }
+
+      iframe {
+        width: 100%;
+        aspect-ratio: 14.35 / 9;
+        border-radius: 10px;
+        box-shadow:
+          -14px 14px 28px #0f1924,
+          14px -14px 28px #192b3e;
+      }
+
+      .info__iframe {
+        width: 45%;
+        display: flex;
+        align-items: center;
+      }
+
       .github {
         background-color: var(--accent);
         color: var(--background-300);
       }
-
       .github p {
         padding: 1.5rem 0;
       }
@@ -203,6 +211,30 @@
         body {
           text-align: center;
         }
+        .info__detail {
+          flex-direction: column-reverse;
+          gap: 5rem;
+          padding-bottom: 4rem;
+        }
+        .info__text {
+          width: 100%;
+        }
+        .info__iframe {
+          width: 100%;
+        }
+        .info__link {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .header {
+          padding-bottom: 2rem;
+        }
+        .info__company {
+          justify-content: center;
+        }
+      }
+
+      @media screen and (max-width: 600px) {
         .info {
           padding: 0;
           padding-bottom: 2rem;
@@ -226,13 +258,9 @@
           width: 100%;
         }
         .info__link {
-          margin-left: auto;
-          margin-right: auto;
           font-size: 18px;
         }
-        .header {
-          padding-bottom: 2rem;
-        }
+
         .info__text h3 {
           font-size: 22px;
         }
@@ -244,12 +272,12 @@
           font-size: 17px;
         }
         .info__company {
-          display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           gap: 8px;
         }
+
         .info__company img {
           width: 70px;
           margin-top: 0;
@@ -284,8 +312,9 @@
           <path
             fill="currentColor"
             d="M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385c0-.191-.008-.821-.011-1.489c-2.226.484-2.695-.944-2.695-.944c-.364-.925-.888-1.171-.888-1.171c-.726-.497.055-.486.055-.486c.803.056 1.226.824 1.226.824c.714 1.223 1.872.869 2.328.665c.072-.517.279-.87.508-1.07c-1.777-.202-3.645-.888-3.645-3.954c0-.873.313-1.587.824-2.147c-.083-.202-.357-1.015.077-2.117c0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269c1.527-1.035 2.198-.82 2.198-.82c.435 1.102.162 1.916.079 2.117c.513.56.823 1.274.823 2.147c0 3.073-1.872 3.749-3.653 3.947c.287.248.543.735.543 1.481c0 1.07-.009 1.932-.009 2.195c0 .213.144.462.55.384A8 8 0 0 0 8.001.196z"
-          /></svg
-      ></a>
+          />
+        </svg>
+      </a>
     </header>
     <main class="main">
       <div class="info container">
@@ -313,11 +342,12 @@ <h3>
               >Launch MongoDB Designer</a
             >
           </div>
-          <div class="info__image">
-            <img
-              src="/mongo-modeler-app.jpg"
-              alt="Screenshot of the application displaying the navigation bar and organized collections with their relationships"
-            />
+          <div class="info__iframe">
+            <iframe
+              src="https://www.youtube.com/embed/87ZZbDZLido?si=fanae_ZvATEOIkHZ"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
           </div>
         </div>
       </div>

src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.spec.tsx → src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx

@@ -1,10 +1,8 @@
 import { Coords } from '@/core/model';
-import { useOffsetZoomToCoords } from './set-off-set-zoom-to-coords.hook';
-import { CanvasViewSettingsContext } from '@/core/providers/';
-import { renderHook } from '@testing-library/react';
+import { setOffSetZoomToCoords } from './set-off-set-zoom-to-coords.helper';
 import { CanvasViewSettingsContextModel } from '@/core/providers/canvas-view-settings/canvas-view-settings.model';
 
-describe('useOffsetZoomToCoords', () => {
+describe('setOffSetZoomToCoords', () => {
   it('should return correct coordinates after applying offset zoom (random normal value #1)', () => {
     // Arrange
     const inputCoords: Coords = { x: 10, y: 10 };
@@ -31,22 +29,19 @@ describe('useOffsetZoomToCoords', () => {
       setAutoSave: () => {},
     };
 
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <CanvasViewSettingsContext.Provider value={initialContextState}>
-        {children}
-      </CanvasViewSettingsContext.Provider>
-    );
-
     // Act
-    const { result } = renderHook(
-      () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }),
-      { wrapper }
+    const result = setOffSetZoomToCoords(
+      inputCoords.x,
+      inputCoords.y,
+      initialContextState.viewBoxSize,
+      initialContextState.canvasViewSettings.canvasSize,
+      initialContextState.canvasViewSettings.zoomFactor
     );
 
     const expected = { x: 20, y: 20 };
 
     // Assert
-    expect({ x: result.current.x, y: result.current.y }).toEqual({
+    expect({ x: result.x, y: result.y }).toEqual({
       x: expected.x,
       y: expected.y,
     });
@@ -77,21 +72,19 @@ describe('useOffsetZoomToCoords', () => {
       setAutoSave: () => {},
     };
 
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <CanvasViewSettingsContext.Provider value={initialContextState}>
-        {children}
-      </CanvasViewSettingsContext.Provider>
-    );
-
     // Act
-    const { result } = renderHook(
-      () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }),
-      { wrapper }
+    const result = setOffSetZoomToCoords(
+      inputCoords.x,
+      inputCoords.y,
+      initialContextState.viewBoxSize,
+      initialContextState.canvasViewSettings.canvasSize,
+      initialContextState.canvasViewSettings.zoomFactor
     );
 
     const expected = { x: 312.5, y: 67.5 };
     // Assert
-    expect({ x: result.current.x, y: result.current.y }).toEqual({
+
+    expect({ x: result.x, y: result.y }).toEqual({
       x: expected.x,
       y: expected.y,
     });
@@ -122,21 +115,18 @@ describe('useOffsetZoomToCoords', () => {
       setAutoSave: () => {},
     };
 
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <CanvasViewSettingsContext.Provider value={initialContextState}>
-        {children}
-      </CanvasViewSettingsContext.Provider>
-    );
-
     // Act
-    const { result } = renderHook(
-      () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }),
-      { wrapper }
+    const result = setOffSetZoomToCoords(
+      inputCoords.x,
+      inputCoords.y,
+      initialContextState.viewBoxSize,
+      initialContextState.canvasViewSettings.canvasSize,
+      initialContextState.canvasViewSettings.zoomFactor
     );
 
     const expected = { x: 26.66666666666667, y: 300 };
     // Assert
-    expect({ x: result.current.x, y: result.current.y }).toEqual({
+    expect({ x: result.x, y: result.y }).toEqual({
       x: expected.x,
       y: expected.y,
     });
@@ -173,21 +163,18 @@ describe('useOffsetZoomToCoords', () => {
       setAutoSave: () => {},
     };
 
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <CanvasViewSettingsContext.Provider value={initialContextState}>
-        {children}
-      </CanvasViewSettingsContext.Provider>
-    );
-
     // Act
-    const { result } = renderHook(
-      () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }),
-      { wrapper }
+    const result = setOffSetZoomToCoords(
+      inputCoords.x,
+      inputCoords.y,
+      initialContextState.viewBoxSize,
+      initialContextState.canvasViewSettings.canvasSize,
+      initialContextState.canvasViewSettings.zoomFactor
     );
 
     const expected = { x: 55156935716294670, y: 461168781986723840 };
     // Assert
-    expect({ x: result.current.x, y: result.current.y }).toEqual({
+    expect({ x: result.x, y: result.y }).toEqual({
       x: expected.x,
       y: expected.y,
     });
@@ -218,21 +205,18 @@ describe('useOffsetZoomToCoords', () => {
       setAutoSave: () => {},
     };
 
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <CanvasViewSettingsContext.Provider value={initialContextState}>
-        {children}
-      </CanvasViewSettingsContext.Provider>
-    );
-
     // Act
-    const { result } = renderHook(
-      () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }),
-      { wrapper }
+    const result = setOffSetZoomToCoords(
+      inputCoords.x,
+      inputCoords.y,
+      initialContextState.viewBoxSize,
+      initialContextState.canvasViewSettings.canvasSize,
+      initialContextState.canvasViewSettings.zoomFactor
     );
 
     const expected = { x: 0, y: 0 };
     // Assert
-    expect({ x: result.current.x, y: result.current.y }).toEqual({
+    expect({ x: result.x, y: result.y }).toEqual({
       x: expected.x,
       y: expected.y,
     });

src/common/helpers/set-off-set-zoom-to-coords.helper.ts

@@ -0,0 +1,26 @@
+import { Size } from '@/core/model';
+import { CANVAS_MAX_HEIGHT, CANVAS_MAX_WIDTH } from '@/core/providers';
+
+export const setOffSetZoomToCoords = (
+  x: number,
+  y: number,
+  viewBoxSize: Size,
+  canvasSize: Size,
+  zoomFactor: number
+) => {
+  const MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_WIDTH =
+    CANVAS_MAX_WIDTH / canvasSize.width;
+  const MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_HEIGHT =
+    CANVAS_MAX_WIDTH / canvasSize.height;
+  const adjustedWidth = CANVAS_MAX_WIDTH / viewBoxSize.width;
+  const adjustedHeight = CANVAS_MAX_HEIGHT / viewBoxSize.height;
+
+  const newX =
+    (x / (zoomFactor * adjustedWidth) / adjustedWidth) *
+    MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_WIDTH;
+  const newY =
+    (y / (zoomFactor * adjustedHeight) / adjustedHeight) *
+    MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_HEIGHT;
+
+  return { x: newX, y: newY };
+};

src/main.tsx

@@ -5,7 +5,6 @@ import { ThemeProvider } from './core/providers/theme-provider/theme-provider.ts
 import './App.css';
 import { DeviceProvider } from './core/providers/index.ts';
 
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ThemeProvider>

src/pods/canvas/canvas-svg.component.tsx

@@ -12,6 +12,7 @@ import { CANVAS_MAX_HEIGHT, CANVAS_MAX_WIDTH } from '@/core/providers';
 interface Props {
   viewBoxSize: Size;
   canvasSize: Size;
+  zoomFactor: number;
   canvasSchema: DatabaseSchemaVm;
   onUpdateTablePosition: UpdatePositionFn;
   onToggleCollapse: (tableId: GUID, fieldId: GUID) => void;
@@ -25,6 +26,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
   const {
     viewBoxSize,
     canvasSize,
+    zoomFactor,
     canvasSchema,
     onUpdateTablePosition,
     onToggleCollapse,
@@ -65,6 +67,8 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
           isSelected={canvasSchema.selectedElementId === table.id}
           selectTable={onSelectElement}
           isTabletOrMobileDevice={isTabletOrMobileDevice}
+          viewBoxSize={viewBoxSize}
+          zoomFactor={zoomFactor}
         />
       ))}
     </svg>

src/pods/canvas/canvas.pod.module.css

@@ -4,7 +4,7 @@
   height: 100%;
   overflow: scroll;
   position: relative;
-   overscroll-behavior: contain;
+  overscroll-behavior: contain;
   /* TODO: remove this color when canvas-accessible is ready */
   color: var(--text-color);
 }