diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx index 35e978e2cc6a6616eaed6b119b7e6d830ce1920b..9d59adebdfac5c26fcaa2c8950bba76ebf210497 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}