chore(example): add edge double click to overview

This commit is contained in:
moklick
2021-04-14 09:57:23 +02:00
parent ea37a525cd
commit d5b84afcc1
2 changed files with 9 additions and 4 deletions
+2
View File
@@ -45,6 +45,7 @@ const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge conte
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge);
const initialElements: Elements = [
{
@@ -187,6 +188,7 @@ const OverviewFlow = () => {
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeDoubleClick={onEdgeDoubleClick}
>
<MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
<Controls />
+7 -4
View File
@@ -96,6 +96,13 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
[elementsSelectable, edgeElement, onClick]
);
const onEdgeDoubleClickHandler = useCallback(
(event: React.MouseEvent<SVGGElement, MouseEvent>) => {
onEdgeDoubleClick?.(event, edgeElement);
},
[edgeElement, onEdgeDoubleClick]
);
const onEdgeContextMenu = useCallback(
(event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
onContextMenu?.(event, edgeElement);
@@ -163,10 +170,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]);
const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]);
const onEdgeDoubleClickHandler = useCallback((event: React.MouseEvent<SVGGElement, MouseEvent>) => {
onEdgeDoubleClick?.(event, edgeElement)
}, [edgeElement, onEdgeDoubleClick])
if (isHidden) {
return null;
}