Merge pull request #292 from open-source-labs/dev

fix: scroll behavior on high resolution trackpads

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelvet",
-	"version": "7.0.28",
+	"version": "7.0.30",
 	"description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
 	"keywords": [
 		"svelte",

src/example-components/InputNode.svelte

@@ -18,7 +18,7 @@
 	let week = '';
 </script>
 
-<Node bgColor="black" label="StartNode" borderRadius={10}>
+<Node bgColor="black" label="StartNode" borderRadius={10} let:destroy>
 	<div class="node">
 		<input type="text" bind:value={text} />
 		<input type="checkbox" bind:checked />
@@ -33,7 +33,7 @@
 		<input type="range" bind:value={range} />
 		<input type="search" bind:value={search} />
 		<input type="tel" bind:value={tel} />
-		<button>Test</button>
+		<button on:click={destroy}>Test</button>
 	</div>
 </Node>
 

src/example-components/test-components/NodeWrapper.svelte

@@ -6,6 +6,7 @@
 	export let outputStore: ReturnType<typeof generateOutput> | null = null;
 	export let key = '';
 	export let destroy: null | (() => void) = null;
+	console.log(destroy);
 </script>
 
 <div class="node">
@@ -71,6 +72,7 @@
 		border: none;
 		color: inherit;
 		cursor: pointer;
+		pointer-events: auto;
 	}
 	.header {
 		display: flex;

src/example-components/test-components/Visualizer.svelte

@@ -73,7 +73,6 @@
 			r={circle.r}
 			style:--animation-speed={animation + 's'}
 			stroke={color}
-			style:transform-origin="50% 50%"
 			style:transform={`rotate(${circle.angle}deg)`}
 			fill="none"
 			style:--stroke-width={circle.strokeWidth + 'px'}

src/lib/components/Edge/Edge.svelte

@@ -127,7 +127,9 @@
 	}
 
 	onMount(() => {
-		calculatePath();
+		setTimeout(() => {
+			calculatePath();
+		}, 0);
 	});
 
 	onDestroy(() => {

src/lib/components/Minimap/Minimap.svelte

@@ -106,7 +106,7 @@
 		style:height="{boundsHeight}px"
 		style:transform="scale({boundsScale})"
 	>
-		{#each Object.values($nodes) as node}
+		{#each Object.entries($nodes) as [id, node] (id)}
 			{#if node.id !== 'N-editor'}
 				<MinimapNode
 					{node}

src/lib/components/Node/Node.svelte

@@ -16,6 +16,7 @@
 	import type { ComponentType } from 'svelte';
 
 	const graph = getContext<Graph>('graph');
+	const { nodes } = graph;
 
 	//const storedNode = JSON.parse(localStorage.getItem('state'))?.nodes?[id]
 	export let position = { x: 0, y: 0 };
@@ -164,7 +165,7 @@
 	}
 </script>
 
-{#if node}
+{#if node && $nodes[node.id]}
 	<InternalNode
 		{center}
 		isDefault={isDefault || useDefaults}

src/lib/containers/Graph/Graph.svelte

@@ -4,28 +4,13 @@
 	import GraphRenderer from '../../renderers/GraphRenderer/GraphRenderer.svelte';
 	import Editor from '$lib/components/Editor/Editor.svelte';
 	import { onMount, setContext, getContext, createEventDispatcher } from 'svelte';
-	import type {
-		ThemeGroup,
-		Graph,
-		GroupBox,
-		Arrow,
-		GroupKey,
-		Group,
-		GraphDimensions,
-		CSSColorString
-	} from '$lib/types';
-	import { writable } from 'svelte/store';
-	import { touchDistance, initialClickPosition, tracking } from '$lib/stores/CursorStore';
+	import type { ThemeGroup, Graph, GroupBox, GraphDimensions, CSSColorString } from '$lib/types';
+	import type { Arrow, GroupKey, Group } from '$lib/types';
 	import { isArrow } from '$lib/types';
-	import {
-		calculateFitView,
-		calculateTranslation,
-		calculateZoom,
-		generateKey,
-		zoomGraph
-	} from '$lib/utils';
+	import { touchDistance, initialClickPosition, tracking } from '$lib/stores/CursorStore';
+	import { calculateFitView, calculateTranslation, calculateZoom, generateKey } from '$lib/utils';
 	import { activeKeys } from '$lib/stores';
-	import { get } from 'svelte/store';
+	import { get, writable } from 'svelte/store';
 	import { getRandomColor, translateGraph } from '$lib/utils';
 	import type { Writable } from 'svelte/store';
 	import type { ComponentType } from 'svelte';
@@ -48,6 +33,7 @@
 	export let selectionColor: CSSColorString;
 	export let backgroundExists: boolean;
 	export let fitView: boolean | 'resize' = false;
+	export let trackpadPan: boolean;
 
 	setContext('snapTo', snapTo);
 	setContext<Graph>('graph', graph);
@@ -152,6 +138,7 @@
 		};
 
 		graph.dimensions.set(graphDimensions);
+		if (fitView === 'resize') fitIntoView();
 	}
 
 	function onMouseUp() {
@@ -324,14 +311,26 @@
 
 	function handleScroll(e: WheelEvent) {
 		if (fixedZoom) return;
+		const multiplier = e.shiftKey ? 0.15 : 1;
 		const { clientX, clientY, deltaY } = e;
 		const currentTranslation = { x: $translationX, y: $translationY };
 		const pointerPosition = { x: clientX, y: clientY };
 
+		// Check if deltaY has decimal places
+		// If it does, it means the user is using a trackpad
+		// If trackpadPan is enabled or the meta key is pressed
+		// Pan the graph instead of zooming
+		if ((trackpadPan || e.metaKey) && deltaY % 1 === 0) {
+			$translationX -= e.deltaX;
+			$translationY -= e.deltaY;
+			return;
+		}
+
 		if (($scale >= MAX_SCALE && deltaY < 0) || ($scale <= MIN_SCALE && deltaY > 0)) return;
 
 		// Calculate the scale adjustment
-		const newScale = calculateZoom($scale, Math.sign(deltaY), ZOOM_INCREMENT);
+		const scrollAdjustment = Math.min(0.009 * multiplier * Math.abs(deltaY), Infinity);
+		const newScale = calculateZoom($scale, Math.sign(deltaY), scrollAdjustment);
 
 		// Calculate the translation adjustment
 		const newTranslation = calculateTranslation(
@@ -343,7 +342,7 @@
 		);
 
 		// Apply transforms
-		zoomGraph(scale, newScale);
+		scale.set(newScale);
 		translateGraph(translation, newTranslation);
 	}
 
@@ -380,10 +379,10 @@
 	style:color={$themeStore.text || 'black'}
 	id={graph.id}
 	bind:this={graphDOMElement}
+	on:wheel|preventDefault={handleScroll}
 	on:mousedown|preventDefault|self={onMouseDown}
 	on:touchend|preventDefault={onTouchEnd}
 	on:touchstart|preventDefault|self={onTouchStart}
-	on:wheel|preventDefault={handleScroll}
 	on:keydown|self|preventDefault={handleKeyDown}
 	on:keyup={handleKeyUp}
 	tabindex={0}

src/lib/containers/Svelvet/Svelvet.svelte

@@ -38,6 +38,7 @@
 	export let disableSelection = false;
 	export let mermaidConfig: Record<string, NodeConfig> = {};
 	export let translation: XYPair = { x: 0, y: 0 };
+	export let trackpadPan = false;
 
 	let graph: GraphType;
 
@@ -85,6 +86,7 @@
 		{controls}
 		{selectionColor}
 		{disableSelection}
+		{trackpadPan}
 		on:edgeDrop
 	>
 		{#if mermaid.length}

src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte

@@ -6,24 +6,34 @@
 	import { get } from 'svelte/store';
 
 	const graph = getContext<Graph>('graph');
+	const transforms = graph.transforms;
+	const scale = transforms.scale;
+	const translationX = transforms.translation.x;
+	const translationY = transforms.translation.y;
+	const cursor = graph.cursor;
 
 	export let isMovable: boolean;
-
-	$: transforms = graph.transforms;
-	$: scale = transforms.scale;
-	$: translationX = transforms.translation.x;
-	$: translationY = transforms.translation.y;
-	$: cursor = graph.cursor;
+	let animationFrameId: number;
+	let moving = false;
 
 	// Reactive statement to update the transform attribute of the wrapper
 	$: transform = `translate(${$translationX}px, ${$translationY}px) scale(${$scale})`;
 
-	$: if (isMovable) {
+	$: if (isMovable && !moving) {
+		moving = true;
+		animationFrameId = requestAnimationFrame(translate);
+	} else if (!isMovable || !moving) {
+		moving = false;
+		cancelAnimationFrame(animationFrameId);
+	}
+
+	function translate() {
 		[$translationX, $translationY] = updateTranslation(
 			get(initialClickPosition),
 			$cursor,
 			transforms
 		);
+		animationFrameId = requestAnimationFrame(translate);
 	}
 </script>