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 {}
|
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}
|
||||||
|
|||||||
Reference in New Issue
Block a user