From 16363495c428a40b094a04d502236f4f6fcf16f9 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Sat, 19 Sep 2026 13:32:26 -0500 Subject: [PATCH] Fix an issue with GraphTool interval arrows at infinity disappearing. This is caused by a change in how JSXGraph sets opacity for arrow heads for version 1.13. It sets the opacity using the opacity of the line the arrow head is attached to, and reasserts this setting after creation. Since the line for the points at infinity is always completely transparent, and so this makes the arrows transparent as well, since the interval tool setting of the `fill` attribute is overridden. To fix this the fill is set via an inline style instead which overrides the JSXGraph attribute and so it doesn't matter what JSXGraph internally sets its attribute to. --- htdocs/js/GraphTool/intervaltools.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/htdocs/js/GraphTool/intervaltools.js b/htdocs/js/GraphTool/intervaltools.js index 9946f7ae11..5dfb8e6513 100644 --- a/htdocs/js/GraphTool/intervaltools.js +++ b/htdocs/js/GraphTool/intervaltools.js @@ -140,7 +140,7 @@ this.setFocusBlurPointAttributes(point); point.text?.setAttribute({ fontSize: 19, highlight: false, strokeColor: gt.color.curve }); point.arrow?.setAttribute({ strokeWidth: 4 }); - point.arrow?.rendNodeTriangleEnd.setAttribute('fill', gt.color.curve); + if (point.arrow) point.arrow.rendNodeTriangleEnd.style.fill = gt.color.curve; point.off('over'); point.off('out'); point.text?.off('down'); @@ -170,15 +170,17 @@ // The default layer for lines (of which arrows are a part) is 7. // Setting this moves the arrow to the front of arrows of other intervals. point.arrow?.setAttribute({ strokeWidth: 5, layer: 7 }); - point.arrow?.rendNodeTriangleEnd.setAttribute('fill', gt.color.point); + if (point.arrow) point.arrow.rendNodeTriangleEnd.style.fill = gt.color.point; // This makes it so that if the pointer is over the point and it is a hidden point at // infinity, then it looks like the pointer is over the arrow. The end arrows don't // actually receive hover events, so this has to be done this way. - point.on('over', () => - point.arrow?.rendNodeTriangleEnd.setAttribute('fill', gt.color.pointHighlightDarker) - ); - point.on('out', () => point.arrow?.rendNodeTriangleEnd.setAttribute('fill', gt.color.point)); + point.on('over', () => { + if (point.arrow) point.arrow.rendNodeTriangleEnd.style.fill = gt.color.pointHighlightDarker; + }); + point.on('out', () => { + if (point.arrow) point.arrow.rendNodeTriangleEnd.style.fill = gt.color.point; + }); point.text?.on('down', () => { point.text.setAttribute({ @@ -349,11 +351,11 @@ aria: { enabled: true, hidden: true, live: 'off' } } ); - this.definingPts[index].arrow.rendNodeTriangleEnd.setAttribute('fill', gt.color.curve); + this.definingPts[index].arrow.rendNodeTriangleEnd.style.fill = gt.color.curve; } if (this.focused && this.definingPts[index] === this.focusPoint) { - this.definingPts[index].arrow.rendNodeTriangleEnd.setAttribute('fill', gt.color.point); + this.definingPts[index].arrow.rendNodeTriangleEnd.style.fill = gt.color.point; this.definingPts[index].arrow.setAttribute({ strokeWidth: 5 }); } } @@ -854,7 +856,8 @@ // The default layer for lines (of which arrows are a part) is 7. // Setting this moves the arrow to the front of the segment created after it. this.hlObjs.hl_arrow?.setAttribute({ layer: 7 }); - this.hlObjs.hl_arrow?.rendNodeTriangleEnd.setAttribute('fill', gt.color.underConstructionFixed); + if (this.hlObjs.hl_arrow) + this.hlObjs.hl_arrow.rendNodeTriangleEnd.style.fill = gt.color.underConstructionFixed; } if (this.hlObjs.hl_segment) { @@ -901,10 +904,7 @@ aria: { enabled: true, hidden: true, live: 'off' } } ); - this.hlObjs.hl_arrow.rendNodeTriangleEnd.setAttribute( - 'fill', - gt.color.underConstruction - ); + this.hlObjs.hl_arrow.rendNodeTriangleEnd.style.fill = gt.color.underConstruction; if (gt.options.useBracketEnds) this.hlObjs.hl_text.setAttribute({ strokeOpacity: 0 }); else this.hlObjs.hl_point.setAttribute({ strokeOpacity: 0, fillOpacity: 0 });