TypeError: undefined is not an object (evaluating 'currentMousePosition.x')

[JannisDev]

Hello,

I've previously used this library with great success, but am currently encountering an issue when trying to implement it in another part of my project. The error message I'm receiving is TypeError: undefined is not an object (evaluating 'currentMousePosition.x') , and I'm unsure of how to resolve it.

Here's the relevant code:

Grid.svelte

<script lang="ts">
	import { dndzone } from 'svelte-dnd-action';

	export let items : Array<any>;
	export let onDrop : any;
	export let itemComponent : any;

	let dragDisabled = true;

	function handleConsider(e : any) {
		items = e.detail.items;
	}

	function handleFinalize(e : any) {
		onDrop(e.detail.items);
		dragDisabled = true;
	}

	function startDrag(e : any) {
		dragDisabled = false;
	}
</script>

<section
	use:dndzone="{({items, dragDisabled, type: 'category', dropTargetClasses: ['border', 'border-accent', 'rounded-btn'], dropTargetStyle: {}})}"
	on:consider="{handleConsider}"
	on:finalize="{handleFinalize}">
	{#each items as item (item.id)}
		<svelte:component this={itemComponent} {item} onStartDrag={startDrag}/>
	{/each}
</section>

Category.svelte

<script lang="ts">
	import type { Category } from '$lib/types';
	import { openContentWizard } from '../modals/contentWizard';
	import IconParkOutlineDelete from 'virtual:icons/icon-park-outline/delete';
	import IconParkOutlineDrag from  'virtual:icons/icon-park-outline/drag';
	import { openDeleteConfirmation } from '../modals/deleteConfirmation';
	import { invalidateAll } from '$app/navigation';
	import { LinkGrid } from '$lib/components';

	export let item: Category;
	export let onStartDrag : any;

	const deleteCategory = async () => {
		const formData = new FormData();
		formData.append('type', 'category');
		formData.append('id', item.id);

		await fetch('/?/delete', { method: 'POST', body: formData });
		await invalidateAll();
	};

	$: items = item.links.sort((a, b) => a.sortIndex - b.sortIndex);

	const onLinkDrop = async (droppedLinks: any) => {
		for (const link of droppedLinks) {
			link.sortIndex = droppedLinks.indexOf(link);
			link.parentId = item.id

			const formData = new FormData();
			formData.append('type', 'link');
			formData.append('object', JSON.stringify(link));

			await fetch('/?/update', { method: 'POST', body: formData });
		}

		item.links = droppedLinks;

		const formData = new FormData();
		formData.append('type', 'category');
		formData.append('object', JSON.stringify(item));

		await fetch('/?/update', { method: 'POST', body: formData });

		items = droppedLinks;
	}
</script>

<div class="collapse bg-base-200 mb-3 w-full {item.links.length > 0 ? 'collapse-arrow' : 'collapse-close'}">
	<input type="checkbox" />
	<div class="collapse-title text-xl font-medium flex flex-row justify-between">
		<div class="flex flex-row items-center gap-3">
			<div class="h-min text-sm z-[50] cursor-move" on:mousedown={onStartDrag}>
				<IconParkOutlineDrag/>
			</div>
			{item.name}
		</div>

		...
</div>

Please let me know if you need any additional information to help troubleshoot the problems I'm experiencing.

[isaacHagoel]

Sorry, I missed this one somehow. Can you make a minimal reprod using a REPL?

[JannisDev]

I'm currently working on something else. As soon as I get back to the subject, I'll see what I can do.

[isaacHagoel]

From a brief look it seems like the issue might be that your finalize handler does not update the items (it calls ondrop which might do it asynchronously)

On Tue, Jan 2, 2024, 01:05 Jannis @.***> wrote:

I'm currently working on something else. As soon as I get back to the subject, I'll see what I can do.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/521#issuecomment-1873341589, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCY4YIT6XE77YUIFOXLYMK7BRAVCNFSM6AAAAAA726KIV6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZTGM2DCNJYHE . You are receiving this because you commented.Message ID: @.***>