Differentiate between a node click and a drag event

[justinmccann14]

First, I want to start of by saying this may not be a bug and may very well be working as intended.

We currently have a scenario where we are needing a node click event as well as the ability to drag and move nodes around. We are using the latest version of Svelvet. Right now, when I click to drag and move a node around, it fires off the click event as well which is undesirable in our case as it opens a drawer up.

Is there a way to consume the event when dragging or differentiate between dragging and clicking?

I also want to point out that I am brand new to Svelte so there may be something obvious I am missing :).

const dispatch = createEventDispatcher();

const onNodeClicked = () => {
     dispatch('onNodeClicked', person);
};
	
<Node {id} {position} {dimensions} let:grabHandle let:selected on:nodeClicked={onNodeClicked}>
	<div use:grabHandle class:selected class="person-card">
		<h2>{fullName}</h2>
		<p>{person.company.name}</p>
		<div class="top">
			<Anchor id="top" let:linked let:hovering let:connecting multiple />
		</div>
		<div class="right">
			<Anchor id="right" let:linked let:hovering let:connecting multiple />
		</div>
		<div class="bottom">
			<Anchor id="bottom" let:linked let:hovering let:connecting multiple />
		</div>
		<div class="left">
			<Anchor id="left" let:linked let:hovering let:connecting multiple />
		</div>
	</div>
</Node>

[briangregoryholmes]

Hi, Justin. I think I understand what you're looking for. I'll play around with adding some more fine grained events like on:nodeGrab or on:nodeMove and see if I can find something that is consistent and logical. To be honest, I think we really only intended those events to be used on default Nodes, since you can manage more use-case specific logic locally when creating custom Nodes.

Try throwing an event listener on your outermost div and toggle the drawer that way. Based on your description, it sounds like you'd want it to be fired on:mouseup or on:click. I'm happy to take a look at a sandbox. We generally end up finding better solutions when we can test them against specific projects/needs.

[briangregoryholmes]

I added an on:nodeReleased event in v7.0.26 that fires when a mouse up event occurs on a Node that has moved less than 4 pixels. While I recommend handling your drawer trigger on your custom elements, this should cover the use case you described.

Converting this to a discussion as a more robust approach still needs some thought. Thanks so much for bringing this to our attention.

[justinmccann14]

Wow, thank you so much for getting back to me so quickly! I will give it a shot.

BTW, this library is awesome (especially version 7). Keep up the good work!