First onMouseDown event jumps because default initialClickPosition

[mrgrg]

Description

At the very first dragging interaction, the default initialClickPosition causes a jump. This jump is as large as the distance between my mouse and the default position, which is {x: 0, y: 0}. In other words, it doesn't matter where I place my cursor; the window's top-left position will jump to the cursor's exact location.

This issue occurs when I:

• start to pan within the canvas (using the mouse)
• or grab a Node to move it around.

Here is a video for demonstration:

IMPORTANT!
In the video there are jumps where the element is replaced to its starting position. It is becaues I am refreshing the browser. With this action the initialClickPosition is also resets to its default value: {x: 0, y: 0}. Other than that, when a circle appears around the cursor, it indicates a click. Those jumps are the indications of the bug.

output_video.mp4

Reproduction

I think this bug occurs because the initialClickPosition still has its default value when the first event fires. These lines are responsible for handling this event:

Inside: src/lib/containers/Graph :

    ```

function onMouseDown(e: MouseEvent) {
if (!pannable && !(e.shiftKey || e.metaKey)) return;
if (e.button === 2) return;
if ($graphDOMElement) $graphDOMElement.focus();

	const { clientX, clientY } = e;

	$initialClickPosition = get(cursor);

	if (e.shiftKey || e.metaKey) {
		e.preventDefault();
		selecting = true;
		const { top, left } = dimensions;
		anchor.y = clientY - top;
		anchor.x = clientX - left;
		anchor.top = top;
		anchor.left = left;
		if (e.shiftKey && e.metaKey) {
			creating = true;
		} else {
			creating = false;
		}

		if (e.metaKey && !e.shiftKey) {
			adding = true;
		} else {
			adding = false;
		}
	} else {
		isMovable = true;
		$selected = new Set();
		$selected = $selected;
	}
}

This event can be traced further, as it is where the initialClickPosition is handled. Therefore, this should be managed before the original event, so that by the time it is used, it already has the correct cursor position.

`src/lib/stores/CursorStore.ts:`

export const cursorPositionRaw = readable({ x: 0, y: 0 }, (set) => {
const updateCursorPosition = (e: MouseEvent) => {
set({ x: e.clientX, y: e.clientY });
};

document.addEventListener('mousemove', updateCursorPosition);

return () => {
	window.removeEventListener('mousemove', updateCursorPosition);
};

});

It focuses on the event that directly interacts with the mouse, but the issue might also occur during the touch event.

### System information

Both in:
- chrome
- firefox

With Svelte 5

### Additional information

_No response_

### 👨‍👧‍👦 Contributing

- [ ] 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!