fix(svelte) removed the need to search through all nodes when moving mouse over node

This commit is contained in:
Peter
2023-09-20 15:34:19 +02:00
parent 4dd231a3c9
commit c7f62885aa
3 changed files with 8 additions and 10 deletions
@@ -17,6 +17,7 @@
interface $$Props extends NodeWrapperProps {} interface $$Props extends NodeWrapperProps {}
export let node: NodeWrapperProps['node'];
export let id: NodeWrapperProps['id']; export let id: NodeWrapperProps['id'];
export let data: NodeWrapperProps['data'] = {}; export let data: NodeWrapperProps['data'] = {};
export let selected: NodeWrapperProps['selected'] = false; export let selected: NodeWrapperProps['selected'] = false;
@@ -39,7 +40,7 @@
export { className as class }; export { className as class };
const store = useStore(); const store = useStore();
const { nodes, nodeTypes, addSelectedNodes } = store; const { nodeTypes, addSelectedNodes } = store;
let nodeRef: HTMLDivElement; let nodeRef: HTMLDivElement;
const nodeTypeValid = !!$nodeTypes[type!]; 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) { function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) { if (selectable && (!selectNodesOnDrag || !draggable)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true // this handler gets called within the drag start event when selectNodesOnDrag=true
@@ -81,7 +77,7 @@
} }
// @todo: support multiselection // @todo: support multiselection
dispatchEvent('nodeclick', event); dispatch('nodeclick', { node, event });
} }
// @todo: add selectable state // @todo: add selectable state
@@ -112,9 +108,9 @@
style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)" style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
{style} {style}
on:click={onSelectNodeHandler} on:click={onSelectNodeHandler}
on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)} on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)} on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
on:mousemove={(event) => dispatchEvent('nodemousemove', event)} on:mousemove={(event) => dispatch('nodemousemove', { node, event })}
> >
<svelte:component <svelte:component
this={nodeComponent} this={nodeComponent}
@@ -26,4 +26,5 @@ export type NodeWrapperProps = Pick<
resizeObserver?: ResizeObserver | null; resizeObserver?: ResizeObserver | null;
isParent?: boolean; isParent?: boolean;
zIndex: number; zIndex: number;
node: Node;
}; };
@@ -40,6 +40,7 @@
origin: node.origin origin: node.origin
})} })}
<NodeWrapper <NodeWrapper
{node}
id={node.id} id={node.id}
data={node.data} data={node.data}
selected={!!node.selected} selected={!!node.selected}