fix(svelte) removed the need to search through all nodes when moving mouse over node
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user