fix(editor): Implement canvas zoom UX improvements (#7376)

- Fix pinch-to-zoom
- Support command + scroll to zoom
- Improve accuracy of zooming (scroll more = zoom more)
- Zoom limits
- Zoom relative to mouse position

packages/editor-ui/src/composables/useCanvasMouseSelect.ts

@@ -3,12 +3,7 @@ import type { INodeUi, XYPosition } from '@/Interface';
 import useDeviceSupport from './useDeviceSupport';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import {
-	getMousePosition,
-	getRelativePosition,
-	SIDEBAR_WIDTH,
-	SIDEBAR_WIDTH_EXPANDED,
-} from '@/utils/nodeViewUtils';
+import { getMousePosition, getRelativePosition } from '@/utils/nodeViewUtils';
 import { ref, onMounted, computed } from 'vue';
 import { useCanvasStore } from '@/stores/canvas.store';
 
@@ -179,18 +174,9 @@ export default function useCanvasMouseSelect() {
 	}
 
 	function getMousePositionWithinNodeView(event: MouseEvent | TouchEvent): XYPosition {
-		const [mouseX, mouseY] = getMousePosition(event);
+		const mousePosition = getMousePosition(event);
 
-		const sidebarWidth = canvasStore.isDemo
-			? 0
-			: uiStore.sidebarMenuCollapsed
-			? SIDEBAR_WIDTH
-			: SIDEBAR_WIDTH_EXPANDED;
-
-		const relativeX = mouseX - sidebarWidth;
-		const relativeY = canvasStore.isDemo
-			? mouseY
-			: mouseY - uiStore.bannersHeight - uiStore.headerHeight;
+		const [relativeX, relativeY] = canvasStore.canvasPositionFromPagePosition(mousePosition);
 		const nodeViewScale = canvasStore.nodeViewScale;
 		const nodeViewOffsetPosition = uiStore.nodeViewOffsetPosition;