From 836a8c7816bcf4e626ddc18ce908f75bf16d164f Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Wed, 3 Jul 2024 13:10:40 +0200
Subject: [PATCH] feat: re-enable popup on hover
---
.../nodelinkvis/components/NLPixi.tsx | 22 ++++++++++++++++++-
1 file changed, 21 insertions(+), 1 deletion(-)
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 35e978e2c..9d59adebd 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -127,10 +127,14 @@ export const NLPixi = (props: Props) => {
useImperativeHandle(imperative, () => ({
onMouseDown(event: FederatedPointerEvent) {
+ if (props.configuration.showPopUpOnHover) return;
+
(event as any).mouseDownTimeStamp = event.timeStamp;
},
onMouseUpNode(event: FederatedPointerEvent) {
+ if (props.configuration.showPopUpOnHover) return;
+
// If its a short click (not a drag) on the stage but not on a node: clear the selection and remove all popups.
const holdDownTime = event.timeStamp - (event as any).mouseDownTimeStamp;
if (holdDownTime > mouseClickThreshold) {
@@ -158,6 +162,8 @@ export const NLPixi = (props: Props) => {
},
onMouseUpStage(event: FederatedPointerEvent) {
+ if (props.configuration.showPopUpOnHover) return;
+
// If its a short click (not a drag) on the stage but not on a node: clear the selection and remove all popups.
const holdDownTime = event.timeStamp - (event as any).mouseDownTimeStamp;
if (holdDownTime < mouseClickThreshold) {
@@ -171,6 +177,8 @@ export const NLPixi = (props: Props) => {
},
onHover(event: FederatedPointerEvent) {
+ if (!props.configuration.showPopUpOnHover) return;
+
const sprite = event.target as Sprite;
const node = (sprite as any).node as NodeTypeD3;
if (
@@ -184,9 +192,13 @@ export const NLPixi = (props: Props) => {
}
},
onUnHover() {
+ if (!props.configuration.showPopUpOnHover) return;
+
setQuickPopup(undefined);
},
onMoved(event: MovedEvent) {
+ if (props.configuration.showPopUpOnHover) return;
+
for (const popup of popups) {
if (popup.node.x == null || popup.node.y == null) continue;
popup.pos.x = event.viewport.transform.position.x + popup.node.x * event.viewport.scale.x;
@@ -616,7 +628,7 @@ export const NLPixi = (props: Props) => {
return (
<>
- {popups.map((popup, index) => (
+ {popups.map((popup) => (
<Tooltip key={popup.node._id} open={true} boundaryElement={ref} showArrow={true}>
<TooltipTrigger x={popup.pos.x} y={popup.pos.y} />
<TooltipContent>
@@ -624,6 +636,14 @@ export const NLPixi = (props: Props) => {
</TooltipContent>
</Tooltip>
))}
+ {quickPopup != null &&
+ <Tooltip key={quickPopup.node._id} open={true} boundaryElement={ref} showArrow={true}>
+ <TooltipTrigger x={quickPopup.pos.x} y={quickPopup.pos.y} />
+ <TooltipContent>
+ <NLPopup onClose={() => {}} data={{node: props.graph.nodes[quickPopup.node._id], pos: quickPopup.pos}} key={quickPopup.node._id} />
+ </TooltipContent>
+ </Tooltip>
+ }
<div
className="h-full w-full overflow-hidden"
ref={ref}
--
GitLab