open-source-labs · Trackhe · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023
diff --git a/docs/components/node.mdx b/docs/components/node.mdx
@@ -152,8 +152,7 @@ detail.node.set.bgColor('red');
 <ResponseField name="on:nodeClicked">Fires when the node is clicked.</ResponseField>
 
 <ResponseField name="on:nodeReleased">
-	Fires when when a mouse up event occurs on the Node. Does not fire if the Node has been dragged
-	and then released.
+	Fires when when a mouse up event occurs on the Node.
 </ResponseField>
 
 <ResponseField name="on:connection">

diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
@@ -36,6 +36,7 @@
 	export let animate = false;
 	export let label = '';
 	export let enableHover = false;
+	export let enableDestroyOnClick = false;
 	export let edgeClick: null | (() => void) = null;
 
 	// Styling via props/objects will likely be deprecated
@@ -305,12 +306,17 @@
 			style:cursor={edgeClick || hovering ? 'pointer' : 'move'}
 			style:--prop-target-edge-color={edgeClick || hovering ? targetColor || null : 'transparent'}
 			d={path}
-			on:mousedown={edgeClick}
+			on:mousedown={() => {
+				edgeClick(edge);
+				if (enableDestroyOnClick) {
+					destroy();
+				}
+			}}
 			on:mouseenter={() => (hovering = true)}
 			on:mouseleave={() => (hovering = false)}
 			bind:this={DOMPath}
 		/>
-		<slot {path} {destroy} {hovering}>
+		<slot {path} {destroy} {hovering} {edge}>
 			<path
 				id={edgeKey}
 				class="edge"
@@ -367,15 +373,15 @@
 
 	.target {
 		pointer-events: stroke;
-		stroke: none;
-		stroke-width: calc(var(--edge-width, var(--default-edge-width)) + 8px);
-	}
-
-	.target:hover {
 		stroke: var(
 			--prop-target-edge-color,
 			var(--target-edge-color, var(--default-target-edge-color))
 		);
+		stroke-width: calc(var(--edge-width, var(--default-edge-width)) + 8px);
+		opacity: 0;
+	}
+
+	.target:hover {
 		opacity: 50%;
 	}
 

diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
@@ -215,10 +215,11 @@
 
 	function onMouseUp(e: MouseEvent) {
 		const cursorPosition = get(cursor);
-		const mouseDeltaX = cursorPosition.x - $initialClickPosition.x;
-		const mouseDeltaY = cursorPosition.y - $initialClickPosition.y;
-		const combinedDelta = Math.abs(mouseDeltaX) + Math.abs(mouseDeltaY);
-		if (combinedDelta < 4) dispatch('nodeReleased', { e, node });
+		node.moved.set({
+			x: cursorPosition.x - $initialClickPosition.x,
+			y: cursorPosition.y - $initialClickPosition.y
+		});
+		dispatch('nodeReleased', { e, node });
 
 		$nodeConnectEvent = e;
 	}

diff --git a/src/lib/types/node.ts b/src/lib/types/node.ts
@@ -9,6 +9,7 @@ export interface Node {
 	position: Writable<XYPair>;
 
 	moving: Writable<boolean>;
+	moved: Writable<XYPair>;
 	label: Writable<string>; // Primary label for default node
 	dimensions: Dimensions;
 	inputs: Writable<number>; //Number of default input anchors to render

diff --git a/src/lib/utils/creators/createNode.ts b/src/lib/utils/creators/createNode.ts
@@ -53,6 +53,10 @@ export function createNode(userNode: NodeConfig): Node {
 		rotation: writable(rotation || 0),
 		// hideable: writable(true),
 		moving: writable(false),
+		moved: writable({
+			x: 0,
+			y: 0
+		}),
 		resizingWidth: writable(false),
 		resizingHeight: writable(false),
 		rotating: writable(false),

diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Svelvet, Node, Anchor } from '$lib';
+	import Connector from '../../example-components/Connector.svelte';
+	import ThemeToggle from '$lib/components/ThemeToggle/ThemeToggle.svelte';
+	import { get } from 'svelte/store';
+
+	function addAndConnect(connect: (connections: string | number) => void) {
+		connect(totalNodes + 4);
+		totalNodes++;
+	}
+	let totalNodes = 0;
+	let widthCount = 1;
+
+	function nodeClicked(e: CustomEvent) {
+		console.log(e.type);
+	}
+
+	function nodeReleased(e: CustomEvent) {
+		console.log(e.type);
+		console.log('moved: ', get(e.detail.node.moved));
+	}
+</script>
+
+<body>
+	<Svelvet minimap title="test">
+		<Connector />
+		<Node bgColor="red" inputs={4} position={{ x: 600, y: 200 }}>
+			<button on:click={() => widthCount++} />
+			{#each { length: widthCount } as item}
+				<div>Height</div>
+			{/each}
+		</Node>
+		<Node
+			inputs={5}
+			position={{ x: 600, y: 600 }}
+			on:nodeClicked={nodeClicked}
+			on:nodeReleased={nodeReleased}
+		/>
+		<Node useDefaults dimensions={{ width: 400, height: 300 }} position={{ x: 100, y: 300 }}>
+			<div class="anchor">
+				<Anchor nodeConnect />
+			</div>
+			<Anchor nodeConnect />
+		</Node>
+		{#each { length: totalNodes } as node}
+			<Node let:connect useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
+		{/each}
+		<ThemeToggle slot="toggle" />
+	</Svelvet>
+</body>
+
+<style>
+	.anchor {
+		position: absolute;
+		right: 10px;
+	}
+	body {
+		width: 100vw;
+		height: 100vh;
+		margin: 0;
+		padding: 0;
+	}
+	:root[theme='dark'] {
+		--background-color: black;
+		--node-color: white;
+	}
+	:root[theme='light'] {
+		--background-color: purple;
+		--node-color: green;
+	}
+</style>