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 {}
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}
@@ -26,4 +26,5 @@ export type NodeWrapperProps = Pick<
resizeObserver?: ResizeObserver | null;
isParent?: boolean;
zIndex: number;
node: Node;
};
@@ -40,6 +40,7 @@
origin: node.origin
})}
<NodeWrapper
{node}
id={node.id}
data={node.data}
selected={!!node.selected}