From c352555b6474b80acfe6bc14e198941c0bd60531 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.a.c.collaris@uu.nl>
Date: Tue, 9 Jul 2024 09:59:41 +0000
Subject: [PATCH] fix: disable user interaction with popups during dragging
---
libs/shared/lib/components/tooltip/Tooltip.tsx | 9 +++++++--
.../vis/visualizations/nodelinkvis/components/NLPixi.tsx | 7 ++++++-
2 files changed, 13 insertions(+), 3 deletions(-)
diff --git a/libs/shared/lib/components/tooltip/Tooltip.tsx b/libs/shared/lib/components/tooltip/Tooltip.tsx
index 3541d2516..0a0676f98 100644
--- a/libs/shared/lib/components/tooltip/Tooltip.tsx
+++ b/libs/shared/lib/components/tooltip/Tooltip.tsx
@@ -26,6 +26,7 @@ interface TooltipOptions {
onOpenChange?: (open: boolean) => void;
boundaryElement?: React.RefObject<HTMLElement> | null;
showArrow?: boolean;
+ interactive?: boolean;
}
export function useTooltip({
@@ -34,12 +35,14 @@ export function useTooltip({
open: controlledOpen,
onOpenChange: setControlledOpen,
boundaryElement = null,
- showArrow = false
+ showArrow = false,
+ interactive = true,
}: TooltipOptions = {}): {
open: boolean;
setOpen: (open: boolean) => void;
interactions: ReturnType<typeof useInteractions>;
data: ReturnType<typeof useFloating>;
+ interactive: boolean;
} {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
@@ -97,8 +100,9 @@ export function useTooltip({
setOpen,
interactions: interactions,
data: data,
+ interactive: interactive,
}),
- [open, setOpen, interactions, data],
+ [open, setOpen, interactions, data, interactive],
);
}
@@ -207,6 +211,7 @@ export const TooltipContent = React.forwardRef<
...context.data.floatingStyles,
...style,
display: context.data.middlewareData.hide?.referenceHidden ? 'none' : 'block',
+ pointerEvents: context.interactive ? 'auto' : 'none',
}}
{...context.interactions.getFloatingProps(props)}
>
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 9d59adebd..ba9d39d82 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -69,6 +69,7 @@ export const NLPixi = (props: Props) => {
const layoutStoppedCount = useRef(0);
const ref = useRef<HTMLDivElement>(null);
const mouseInCanvas = useRef<boolean>(false);
+ const [dragging, setDragging] = useState<boolean>(false);
const isSetup = useRef(false);
const ml = useML();
const searchResults = useSearchResultData();
@@ -130,6 +131,7 @@ export const NLPixi = (props: Props) => {
if (props.configuration.showPopUpOnHover) return;
(event as any).mouseDownTimeStamp = event.timeStamp;
+ setDragging(true);
},
onMouseUpNode(event: FederatedPointerEvent) {
@@ -591,6 +593,9 @@ export const NLPixi = (props: Props) => {
viewport.current.on('moved', (event) => {
imperative.current.onMoved(event);
});
+ viewport.current.on('drag-end', (event) => {
+ setDragging(false);
+ });
app.stage.eventMode = 'dynamic';
app.stage.on('mousedown', (e) => imperative.current.onMouseDown(e));
@@ -629,7 +634,7 @@ export const NLPixi = (props: Props) => {
return (
<>
{popups.map((popup) => (
- <Tooltip key={popup.node._id} open={true} boundaryElement={ref} showArrow={true}>
+ <Tooltip key={popup.node._id} open={true} interactive={!dragging} boundaryElement={ref} showArrow={true}>
<TooltipTrigger x={popup.pos.x} y={popup.pos.y} />
<TooltipContent>
<NLPopup onClose={() => {}} data={{node: props.graph.nodes[popup.node._id], pos: popup.pos}} key={popup.node._id} />
--
GitLab