From c7f62885aacdf17499c3ee38f77f12030689f467 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Wed, 20 Sep 2023 15:34:19 +0200
Subject: [PATCH] fix(svelte) removed the need to search through all nodes when
 moving mouse over node

---
 .../components/NodeWrapper/NodeWrapper.svelte    | 16 ++++++----------
 .../src/lib/components/NodeWrapper/types.ts      |  1 +
 .../container/NodeRenderer/NodeRenderer.svelte   |  1 +
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 17c8e4ce..3d14c4a6 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -17,6 +17,7 @@
 
   interface $$Props extends NodeWrapperProps {}
 
+  export let node: NodeWrapperProps['node'];
   export let id: NodeWrapperProps['id'];
   export let data: NodeWrapperProps['data'] = {};
   export let selected: NodeWrapperProps['selected'] = false;
@@ -39,7 +40,7 @@
   export { className as class };
 
   const store = useStore();
-  const { nodes, nodeTypes, addSelectedNodes } = store;
+  const { nodeTypes, addSelectedNodes } = store;
 
   let nodeRef: HTMLDivElement;
   const nodeTypeValid = !!$nodeTypes[type!];
@@ -69,11 +70,6 @@
     };
   });
 
-  function dispatchEvent(eventName: string, event?: MouseEvent | TouchEvent) {
-    const node = $nodes.find((n) => n.id === id);
-    dispatch(eventName, { node, event });
-  }
-
   function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
     if (selectable && (!selectNodesOnDrag || !draggable)) {
       // this handler gets called within the drag start event when selectNodesOnDrag=true
@@ -81,7 +77,7 @@
     }
 
     // @todo: support multiselection
-    dispatchEvent('nodeclick', event);
+    dispatch('nodeclick', { node, event });
   }
 
   // @todo: add selectable state
@@ -112,9 +108,9 @@
     style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
     {style}
     on:click={onSelectNodeHandler}
-    on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)}
-    on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)}
-    on:mousemove={(event) => dispatchEvent('nodemousemove', event)}
+    on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
+    on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
+    on:mousemove={(event) => dispatch('nodemousemove', { node, event })}
   >
     <svelte:component
       this={nodeComponent}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts
index 02788d7a..83d27e84 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/types.ts
+++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts
@@ -26,4 +26,5 @@ export type NodeWrapperProps = Pick<
   resizeObserver?: ResizeObserver | null;
   isParent?: boolean;
   zIndex: number;
+  node: Node;
 };
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index bc30ea1a..7c59373f 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -40,6 +40,7 @@
       origin: node.origin
     })}
     <NodeWrapper
+      {node}
       id={node.id}
       data={node.data}
       selected={!!node.selected}