From 152b842da69b052ef179d7601249246151a7fe8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ruiz?= Date: Tue, 16 Apr 2024 09:39:17 +0200 Subject: [PATCH 1/5] Fixed inconsistency problems when dragging and positioning elements --- src/pods/canvas/canvas-svg.component.tsx | 4 ++ src/pods/canvas/canvas.pod.tsx | 16 ++++--- .../table/database-table.component.tsx | 8 +++- .../components/table/table-drag.hook.tsx | 43 +++++++++++++------ .../add-collection.component.tsx | 10 +---- 5 files changed, 53 insertions(+), 28 deletions(-) diff --git a/src/pods/canvas/canvas-svg.component.tsx b/src/pods/canvas/canvas-svg.component.tsx index e060f05e..dabb5240 100644 --- a/src/pods/canvas/canvas-svg.component.tsx +++ b/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 => { const { viewBoxSize, canvasSize, + zoomFactor, canvasSchema, onUpdateTablePosition, onToggleCollapse, @@ -65,6 +67,8 @@ export const CanvasSvgComponent: React.FC = props => { isSelected={canvasSchema.selectedElementId === table.id} selectTable={onSelectElement} isTabletOrMobileDevice={isTabletOrMobileDevice} + viewBoxSize={viewBoxSize} + zoomFactor={zoomFactor} /> ))} diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index 9fe310c7..d5748617 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/src/pods/canvas/canvas.pod.tsx @@ -22,7 +22,7 @@ import { mFlix } from './m-flix.mock.data'; import { CanvasAccessible } from './components/canvas-accessible'; import useAutosave from '@/core/autosave/autosave.hook'; import { CANVAS_MAX_WIDTH } from '@/core/providers'; - +import { setOffSetZoomToCoords } from '@/common/helpers/set-off-set-zoom-to-coords.helper'; const HEIGHT_OFFSET = 200; export const CanvasPod: React.FC = () => { const { openModal, closeModal, modalDialog } = useModalDialogContext(); @@ -97,10 +97,15 @@ export const CanvasPod: React.FC = () => { const handleScroll = () => { if (containerRef.current) { - setScrollPosition({ - x: containerRef.current.scrollLeft, - y: containerRef.current.scrollTop, - }); + setScrollPosition( + setOffSetZoomToCoords( + containerRef.current.scrollLeft, + containerRef.current.scrollTop, + viewBoxSize, + canvasSize, + zoomFactor + ) + ); } }; @@ -213,6 +218,7 @@ export const CanvasPod: React.FC = () => { void; isTabletOrMobileDevice: boolean; + viewBoxSize: Size; + zoomFactor: number; } export const DatabaseTable: React.FC = ({ @@ -34,6 +36,8 @@ export const DatabaseTable: React.FC = ({ isSelected, selectTable, isTabletOrMobileDevice, + viewBoxSize, + zoomFactor, }) => { const rowHeight = TABLE_CONST.FONT_SIZE + TABLE_CONST.ROW_PADDING; @@ -62,7 +66,9 @@ export const DatabaseTable: React.FC = ({ tableInfo.y, updatePosition, totalHeight, - canvasSize + canvasSize, + viewBoxSize, + zoomFactor ); const handleSelectTable = () => { diff --git a/src/pods/canvas/components/table/table-drag.hook.tsx b/src/pods/canvas/components/table/table-drag.hook.tsx index b6b95209..235a2f14 100644 --- a/src/pods/canvas/components/table/table-drag.hook.tsx +++ b/src/pods/canvas/components/table/table-drag.hook.tsx @@ -1,29 +1,37 @@ import React, { useState, useCallback } from 'react'; import { Size } from '@/core/model'; import { UpdatePositionFn, UpdatePositionItemInfo } from '@/core/providers'; - +import { setOffSetZoomToCoords } from '@/common/helpers/set-off-set-zoom-to-coords.helper'; export const useDraggable = ( id: string, initialX: number, initialY: number, updatePosition: UpdatePositionFn, totalHeight: number, - canvasSize: Size + canvasSize: Size, + viewBoxSize: Size, + zoomFactor: number ) => { const [isDragging, setIsDragging] = useState(false); const [startDragPosition, setStartDragPosition] = useState({ x: 0, y: 0 }); const [finalInfoAfterDrag, setFinalInfoAfterDrag] = useState(null); const [node, setNode] = React.useState(null); - const ref = React.useCallback((nodeEle: SVGElement): void => { setNode(nodeEle); }, []); const startDrag = (x: number, y: number) => { + const { x: offsetX, y: offsetY } = setOffSetZoomToCoords( + x, + y, + viewBoxSize, + canvasSize, + zoomFactor + ); setStartDragPosition({ - x: x - initialX, - y: y - initialY, + x: offsetX - initialX, + y: offsetY - initialY, }); setIsDragging(true); }; @@ -32,7 +40,7 @@ export const useDraggable = ( (event: React.MouseEvent) => { startDrag(event.clientX, event.clientY); }, - [initialX, initialY] + [initialX, initialY, viewBoxSize] ); const onTouchStart = useCallback( @@ -41,23 +49,30 @@ export const useDraggable = ( const touch = event.touches[0]; startDrag(touch.clientX, touch.clientY); }, - [initialX, initialY] + [initialX, initialY, viewBoxSize] ); const updateDrag = (x: number, y: number) => { if (isDragging) { - const newX = x - startDragPosition.x; - const newY = y - startDragPosition.y; - - const currentItemInfo = { + const { x: offsetX, y: offsetY } = setOffSetZoomToCoords( + x, + y, + viewBoxSize, + canvasSize, + zoomFactor + ); + const newPosition = { id, - position: { x: newX, y: newY }, + position: { + x: offsetX - startDragPosition.x, + y: offsetY - startDragPosition.y, + }, totalHeight, canvasSize, }; - updatePosition(currentItemInfo, false); - setFinalInfoAfterDrag(currentItemInfo); + updatePosition(newPosition, false); + setFinalInfoAfterDrag(newPosition); } }; diff --git a/src/pods/toolbar/components/add-collection/add-collection.component.tsx b/src/pods/toolbar/components/add-collection/add-collection.component.tsx index 8e907f57..b52778a1 100644 --- a/src/pods/toolbar/components/add-collection/add-collection.component.tsx +++ b/src/pods/toolbar/components/add-collection/add-collection.component.tsx @@ -10,7 +10,6 @@ import { } from '@/core/providers/canvas-schema'; import { ADD_COLLECTION_TITLE } from '@/common/components/modal-dialog'; import { SHORTCUTS } from '../../shortcut/shortcut.const'; -import { useOffsetZoomToCoords } from './set-off-set-zoom-to-coords.hook'; const BORDER_MARGIN = 40; @@ -19,16 +18,11 @@ export const AddCollection = () => { const { canvasSchema, addTable } = useCanvasSchemaContext(); const { setLoadSample, scrollPosition } = useCanvasViewSettingsContext(); - const { x: scrollOffsetX, y: scrollOffsetY } = useOffsetZoomToCoords({ - x: scrollPosition.x + BORDER_MARGIN, - y: scrollPosition.y + BORDER_MARGIN, - }); - const handleAddTable = (newTable: TableVm) => { const updatedTable = { ...newTable, - x: scrollOffsetX, - y: scrollOffsetY, + x: scrollPosition.x + BORDER_MARGIN, + y: scrollPosition.y + BORDER_MARGIN, }; addTable(updatedTable); From 8c9ab2b38d628f9ef442c5ceb0e5014632752d41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ruiz?= Date: Tue, 16 Apr 2024 09:41:41 +0200 Subject: [PATCH 2/5] Added helper and its tests --- ...ff-set-zoom-to-coords.helper.spec copy.tsx | 224 ++++++++++++++++++ .../set-off-set-zoom-to-coords.helper.tsx | 26 ++ 2 files changed, 250 insertions(+) create mode 100644 src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx create mode 100644 src/common/helpers/set-off-set-zoom-to-coords.helper.tsx diff --git a/src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx new file mode 100644 index 00000000..110d4f50 --- /dev/null +++ b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx @@ -0,0 +1,224 @@ +import { Coords } from '@/core/model'; +import { setOffSetZoomToCoords } from './set-off-set-zoom-to-coords.helper'; +import { CanvasViewSettingsContextModel } from '@/core/providers/canvas-view-settings/canvas-view-settings.model'; + +describe('setOffSetZoomToCoords', () => { + it('should return correct coordinates after applying offset zoom (random normal value #1)', () => { + // Arrange + const inputCoords: Coords = { x: 10, y: 10 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 5000, height: 5000 }, + zoomFactor: 2, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 20000, height: 20000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (random normal value #2)', () => { + // Arrange + const inputCoords: Coords = { x: 200, y: 120 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 10000, height: 10000 }, + zoomFactor: 2, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 25000, height: 15000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (random normal value #3)', () => { + // Arrange + const inputCoords: Coords = { x: 200, y: 120 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 300, height: 100 }, + zoomFactor: 5, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 2000, height: 5000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (extreme value #1)', () => { + // Arrange + const inputCoords: Coords = { x: 612365, y: 5120002 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { + width: Number.MAX_SAFE_INTEGER, + height: Number.MAX_SAFE_INTEGER, + }, + zoomFactor: 5, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { + width: Number.MAX_SAFE_INTEGER, + height: Number.MAX_SAFE_INTEGER, + }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (extreme value #2)', () => { + // Arrange + const inputCoords: Coords = { x: 0, y: 0 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 5000, height: 5000 }, + zoomFactor: 2, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 20000, height: 20000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); +}); diff --git a/src/common/helpers/set-off-set-zoom-to-coords.helper.tsx b/src/common/helpers/set-off-set-zoom-to-coords.helper.tsx new file mode 100644 index 00000000..ee8109c5 --- /dev/null +++ b/src/common/helpers/set-off-set-zoom-to-coords.helper.tsx @@ -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 }; +}; From 45535dcd6a913643d71260090dd05bb6b5e5aec8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ruiz?= Date: Tue, 16 Apr 2024 10:04:18 +0200 Subject: [PATCH 3/5] Deleted old hook in add-collection --- .../set-off-set-zoom-to-coords.hook.spec.tsx | 240 ------------------ .../set-off-set-zoom-to-coords.hook.tsx | 23 -- 2 files changed, 263 deletions(-) delete mode 100644 src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.spec.tsx delete mode 100644 src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.tsx diff --git a/src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.spec.tsx b/src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.spec.tsx deleted file mode 100644 index 754317d2..00000000 --- a/src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.spec.tsx +++ /dev/null @@ -1,240 +0,0 @@ -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 { CanvasViewSettingsContextModel } from '@/core/providers/canvas-view-settings/canvas-view-settings.model'; - -describe('useOffsetZoomToCoords', () => { - it('should return correct coordinates after applying offset zoom (random normal value #1)', () => { - // Arrange - const inputCoords: Coords = { x: 10, y: 10 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 5000, height: 5000 }, - zoomFactor: 2, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 20000, height: 20000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - const wrapper = ({ children }: { children: React.ReactNode }) => ( - - {children} - - ); - - // Act - const { result } = renderHook( - () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }), - { wrapper } - ); - - const expected = { x: 20, y: 20 }; - - // Assert - expect({ x: result.current.x, y: result.current.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (random normal value #2)', () => { - // Arrange - const inputCoords: Coords = { x: 200, y: 120 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 10000, height: 10000 }, - zoomFactor: 2, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 25000, height: 15000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - const wrapper = ({ children }: { children: React.ReactNode }) => ( - - {children} - - ); - - // Act - const { result } = renderHook( - () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }), - { wrapper } - ); - - const expected = { x: 312.5, y: 67.5 }; - // Assert - expect({ x: result.current.x, y: result.current.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (random normal value #3)', () => { - // Arrange - const inputCoords: Coords = { x: 200, y: 120 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 300, height: 100 }, - zoomFactor: 5, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 2000, height: 5000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - const wrapper = ({ children }: { children: React.ReactNode }) => ( - - {children} - - ); - - // Act - const { result } = renderHook( - () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }), - { wrapper } - ); - - const expected = { x: 26.66666666666667, y: 300 }; - // Assert - expect({ x: result.current.x, y: result.current.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (extreme value #1)', () => { - // Arrange - const inputCoords: Coords = { x: 612365, y: 5120002 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { - width: Number.MAX_SAFE_INTEGER, - height: Number.MAX_SAFE_INTEGER, - }, - zoomFactor: 5, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { - width: Number.MAX_SAFE_INTEGER, - height: Number.MAX_SAFE_INTEGER, - }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - const wrapper = ({ children }: { children: React.ReactNode }) => ( - - {children} - - ); - - // Act - const { result } = renderHook( - () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }), - { wrapper } - ); - - const expected = { x: 55156935716294670, y: 461168781986723840 }; - // Assert - expect({ x: result.current.x, y: result.current.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (extreme value #2)', () => { - // Arrange - const inputCoords: Coords = { x: 0, y: 0 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 5000, height: 5000 }, - zoomFactor: 2, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 20000, height: 20000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - const wrapper = ({ children }: { children: React.ReactNode }) => ( - - {children} - - ); - - // Act - const { result } = renderHook( - () => useOffsetZoomToCoords({ x: inputCoords.x, y: inputCoords.y }), - { wrapper } - ); - - const expected = { x: 0, y: 0 }; - // Assert - expect({ x: result.current.x, y: result.current.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); -}); diff --git a/src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.tsx b/src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.tsx deleted file mode 100644 index d047b08c..00000000 --- a/src/pods/toolbar/components/add-collection/set-off-set-zoom-to-coords.hook.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useCanvasViewSettingsContext } from '@/core/providers/canvas-view-settings'; -import { CANVAS_MAX_HEIGHT, CANVAS_MAX_WIDTH } from '@/core/providers'; -import { Coords } from '@/core/model'; - -export const useOffsetZoomToCoords = ({ x, y }: Coords): Coords => { - const { canvasViewSettings, viewBoxSize } = useCanvasViewSettingsContext(); - - const MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_WIDTH = - CANVAS_MAX_WIDTH / canvasViewSettings.canvasSize.width; - const MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_HEIGHT = - CANVAS_MAX_WIDTH / canvasViewSettings.canvasSize.height; - const adjustedWidth = CANVAS_MAX_WIDTH / viewBoxSize.width; - const adjustedHeight = CANVAS_MAX_HEIGHT / viewBoxSize.height; - - const newX = - (x / (canvasViewSettings.zoomFactor * adjustedWidth) / adjustedWidth) * - MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_WIDTH; - const newY = - (y / (canvasViewSettings.zoomFactor * adjustedHeight) / adjustedHeight) * - MULTIPLIER_TO_SET_OFFSET_TO_CANVAS_DIMENSION_HEIGHT; - - return { x: newX, y: newY }; -}; From f08ae482a49c3e3caf85ec9a31cf16bda9196648 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ruiz?= Date: Tue, 16 Apr 2024 10:19:47 +0200 Subject: [PATCH 4/5] Changed helper test file name --- ...ff-set-zoom-to-coords.helper.spec copy.tsx | 224 ------------------ 1 file changed, 224 deletions(-) delete mode 100644 src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx diff --git a/src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx deleted file mode 100644 index 110d4f50..00000000 --- a/src/common/helpers/set-off-set-zoom-to-coords.helper.spec copy.tsx +++ /dev/null @@ -1,224 +0,0 @@ -import { Coords } from '@/core/model'; -import { setOffSetZoomToCoords } from './set-off-set-zoom-to-coords.helper'; -import { CanvasViewSettingsContextModel } from '@/core/providers/canvas-view-settings/canvas-view-settings.model'; - -describe('setOffSetZoomToCoords', () => { - it('should return correct coordinates after applying offset zoom (random normal value #1)', () => { - // Arrange - const inputCoords: Coords = { x: 10, y: 10 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 5000, height: 5000 }, - zoomFactor: 2, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 20000, height: 20000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - // Act - 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.x, y: result.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (random normal value #2)', () => { - // Arrange - const inputCoords: Coords = { x: 200, y: 120 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 10000, height: 10000 }, - zoomFactor: 2, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 25000, height: 15000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - // Act - 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.x, y: result.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (random normal value #3)', () => { - // Arrange - const inputCoords: Coords = { x: 200, y: 120 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 300, height: 100 }, - zoomFactor: 5, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 2000, height: 5000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - // Act - 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.x, y: result.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (extreme value #1)', () => { - // Arrange - const inputCoords: Coords = { x: 612365, y: 5120002 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { - width: Number.MAX_SAFE_INTEGER, - height: Number.MAX_SAFE_INTEGER, - }, - zoomFactor: 5, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { - width: Number.MAX_SAFE_INTEGER, - height: Number.MAX_SAFE_INTEGER, - }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - // Act - 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.x, y: result.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); - it('should return correct coordinates after applying offset zoom (extreme value #2)', () => { - // Arrange - const inputCoords: Coords = { x: 0, y: 0 }; - - const initialContextState: CanvasViewSettingsContextModel = { - canvasViewSettings: { - canvasSize: { width: 5000, height: 5000 }, - zoomFactor: 2, - scrollPosition: { x: 0, y: 0 }, - filename: '', - loadSample: true, - }, - scrollPosition: { x: 0, y: 0 }, - filename: '', - viewBoxSize: { width: 20000, height: 20000 }, - zoomIn: () => {}, - zoomOut: () => {}, - setCanvasSize: () => {}, - setScrollPosition: () => {}, - setFilename: () => {}, - setLoadSample: () => {}, - setViewBoxSize: () => {}, - autoSave: false, - setAutoSave: () => {}, - }; - - // Act - 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.x, y: result.y }).toEqual({ - x: expected.x, - y: expected.y, - }); - }); -}); From e631e6f7ed6e24ee03d6db61a0c841dc4d4b3451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ruiz?= Date: Tue, 16 Apr 2024 10:20:23 +0200 Subject: [PATCH 5/5] Changed helper test file name --- ...set-off-set-zoom-to-coords.helper.spec.tsx | 224 ++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx diff --git a/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx new file mode 100644 index 00000000..110d4f50 --- /dev/null +++ b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx @@ -0,0 +1,224 @@ +import { Coords } from '@/core/model'; +import { setOffSetZoomToCoords } from './set-off-set-zoom-to-coords.helper'; +import { CanvasViewSettingsContextModel } from '@/core/providers/canvas-view-settings/canvas-view-settings.model'; + +describe('setOffSetZoomToCoords', () => { + it('should return correct coordinates after applying offset zoom (random normal value #1)', () => { + // Arrange + const inputCoords: Coords = { x: 10, y: 10 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 5000, height: 5000 }, + zoomFactor: 2, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 20000, height: 20000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (random normal value #2)', () => { + // Arrange + const inputCoords: Coords = { x: 200, y: 120 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 10000, height: 10000 }, + zoomFactor: 2, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 25000, height: 15000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (random normal value #3)', () => { + // Arrange + const inputCoords: Coords = { x: 200, y: 120 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 300, height: 100 }, + zoomFactor: 5, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 2000, height: 5000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (extreme value #1)', () => { + // Arrange + const inputCoords: Coords = { x: 612365, y: 5120002 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { + width: Number.MAX_SAFE_INTEGER, + height: Number.MAX_SAFE_INTEGER, + }, + zoomFactor: 5, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { + width: Number.MAX_SAFE_INTEGER, + height: Number.MAX_SAFE_INTEGER, + }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); + it('should return correct coordinates after applying offset zoom (extreme value #2)', () => { + // Arrange + const inputCoords: Coords = { x: 0, y: 0 }; + + const initialContextState: CanvasViewSettingsContextModel = { + canvasViewSettings: { + canvasSize: { width: 5000, height: 5000 }, + zoomFactor: 2, + scrollPosition: { x: 0, y: 0 }, + filename: '', + loadSample: true, + }, + scrollPosition: { x: 0, y: 0 }, + filename: '', + viewBoxSize: { width: 20000, height: 20000 }, + zoomIn: () => {}, + zoomOut: () => {}, + setCanvasSize: () => {}, + setScrollPosition: () => {}, + setFilename: () => {}, + setLoadSample: () => {}, + setViewBoxSize: () => {}, + autoSave: false, + setAutoSave: () => {}, + }; + + // Act + 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.x, y: result.y }).toEqual({ + x: expected.x, + y: expected.y, + }); + }); +});