refactor(svelte): use same data passing convention for all custom events

This commit is contained in:
moklick
2023-09-19 15:43:37 +02:00
parent accfc9d200
commit a33351fb9f
4 changed files with 20 additions and 21 deletions
@@ -41,13 +41,13 @@
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
function onClick() {
function onClick(event: MouseEvent | TouchEvent) {
if (selectable) {
addSelectedEdges([id]);
}
const edge = $edges.find((e) => e.id === id);
dispatch('edgeclick', edge);
dispatch('edgeclick', { event, edge });
}
</script>
@@ -69,21 +69,21 @@
};
});
function dispatchEvent(eventName: string) {
function dispatchEvent(eventName: string, event?: MouseEvent | TouchEvent) {
const node = $nodes.find((n) => n.id === id);
dispatch(eventName, node);
dispatch(eventName, { node, event });
}
function onSelectNodeHandler(event: MouseEvent) {
function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true
addSelectedNodes([id]);
}
// @todo: support multiselection
dispatchEvent('nodeclick');
dispatchEvent('nodeclick', event);
}
// @todo: add selectable state
</script>
@@ -112,9 +112,9 @@
style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
{style}
on:click={onSelectNodeHandler}
on:mouseenter={() => dispatchEvent('nodemouseenter')}
on:mouseleave={() => dispatchEvent('nodemouseleave')}
on:mousemove={() => dispatchEvent('nodemousemove')}
on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)}
on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)}
on:mousemove={(event) => dispatchEvent('nodemousemove', event)}
>
<svelte:component
this={nodeComponent}