When I try to hover on a connecter, the popup disappears soon before its clicked or my cursor is moved.
The issue happens only in firefox, works fine on chrome and other browsers.
Could you please help me with some pointers to understand how to fix it.
How did you implement it?
My guess is that you hide it in a mouseLeave event handler and you don’t make sure the mouse doesn’t leave the Link before entering the Adornment.
An alternative design: Buttons that show on Hover
I have tried to implement the same issue in pure GoJS and html.
I am also sharing the code that I have used. Please help me to understand how can I check whether the mouse leave the link before entering the toolbar.
<body>
<div
id="myDiagramDiv"
style="border: solid 1px black; width: 100%; height: 700px"
></div>
<div class="toolbar">
<button id="add">Add Nodes</button>
</div>
<div id="decorator"> test toolbar</div>
<script src="../site/release/go-debug.js"></script>
<script src="constants.js"></script>
<script src="decorator.js"></script>
<script src="node-template.js"></script>
<script src="link-template.js"></script>
<script src="index.js"></script>
<!-- <script src="sample.js"></script> -->
</body>
Link Template is as follows:
function formLink($) {
return $(
go.Link, // the whole link panel
{
mouseEnter: function (e, link) { highlightLink(link, true); },
mouseLeave: function (e, link) { highlightLink(link, false);}
},
{ relinkableFrom: true, relinkableTo: true },
{ routing: go.Link.AvoidsNodes, corner: 10 },
$(
go.Shape, // the link shape
{
name: "LINE",
stroke: "#D9DCDF",
strokeWidth: 1,
},
),
$(
go.Shape, // the arrowhead
{ name: "ARROW", toArrow: "Standard", fill: "#D9DCDF", stroke: null },
),
{
selectionAdornmentTemplate: $(
go.Adornment,
"Link",
$(go.Shape, { isPanelMain: true, stroke: "#01778E", strokeWidth: 2 }),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", fill: "#01778E", stroke: null },
),
),
},
);
}
function highlightLink(link, over) {
x = link.points.last().x + 200;
const decorator = document.getElementById("decorator");
decorator.style.left = `${x}px`;
decorator.style.display = over ? "block": "none";
}
Here is the recording of the issue which was implemented only in GojS and HTML
Oh, the mouse is actually leaving the Diagram when it goes into that HTMLElement that is your “decorator”. So of course it leaves the Link too.
I guess you cannot use the mouseLeave event handler. Perhaps you want to add an event listener or two to your “decorator” element.
If I don’t use mouseLeave event handler on the link, then how would the hide the decorator once the mouse moves to some other position outside of the link or the decorator.
Is there a way to increase the area around the link , so that the decorator and that extra area overlap hence when mouse moves to decorater from the link it doesn’t disappear as the mouseLeave event won’t be triggered.
Yes, you could use a second path Shape with an appropriate strokeWidth and a “transparent” stroke. Both that Shape and the regular Shape would need to have isPanelMain set to true, so that the Link knows that both (or all) Shapes that are isPanelMain should get the link path geometry.
However that (by itself) won’t help you because the mouse is still leaving the Link and the Diagram when the mouse passes into the “decorator” element. You could implement a Diagram.mouseOver event handler to detect when the mouse is in the background of the diagram viewport.
We have already implemented something similar by having a larger strokeWidth + transparent.
But this only happens in firefox. It works fine on chrome.
That’s interesting. Is there any way that you could give us a stand-alone reproducible sample case for us to debug?