#2130 Link hover styles aren't applied in Firefox when using Handles (#…

…2131) Signed-off-by: srikant <[email protected]>
elyra-ai · Aug 30, 2024 · c9f5d64 · c9f5d64
1 parent 6306b7b
commit c9f5d64
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json
@@ -34,7 +34,7 @@
     "@codemirror/view": "^6.28.6",
     "@elyra/pipeline-schemas": "^3.0.68",
     "codemirror": "^6.0.1",
-    "d3": "^7.1.1",
+    "d3": "7.9.0",
     "dagre": "^0.8.5",
     "date-fns": "^2.28.0",
     "immutable": "^4.0.0",

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
@@ -1036,7 +1036,9 @@ g.bkg-col-cyan-50 {
 
 // When pointer hovers over the link this style will be applied.
 .d3-link-group:hover .d3-link-line,
-.d3-link-group:hover .d3-link-line-arrow-head {
+.d3-link-group:hover .d3-link-line-arrow-head,
+.d3-link-group.handles-detachable-hover .d3-link-line,
+.d3-link-group.handles-detachable-hover .d3-link-line-arrow-head {
 	stroke: $link-highlight-color;
 	stroke-width: 2;
 }
@@ -1066,6 +1068,7 @@ g.bkg-col-cyan-50 {
 }
 
 .d3-link-group:hover .d3-link-handle-start,
+.d3-link-group.handles-detachable-hover .d3-link-handle-start,
 .d3-link-group[data-selected] .d3-link-handle-start {
 	display: inherit;
 	stroke: $link-highlight-color;
@@ -1082,6 +1085,7 @@ g.bkg-col-cyan-50 {
 }
 
 .d3-link-group:hover .d3-link-handle-end,
+.d3-link-group.handles-detachable-hover .d3-link-handle-end,
 .d3-link-group[data-selected] .d3-link-handle-end {
 	display: inherit;
 	stroke: $link-highlight-color;

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
@@ -4562,13 +4562,17 @@ export default class SVGCanvasRenderer {
 	}
 
 	raiseLinkToTop(obj) {
+		// Add handles-detachable-hover class to avoid firefox hover issue
 		d3.select(obj)
-			.raise();
+			.raise()
+			.classed("handles-detachable-hover", true);
 	}
 
 	lowerLinkToBottom(obj) {
+		// Remove handles-detachable-hover class to avoid firefox hover issue
 		d3.select(obj)
-			.lower();
+			.lower()
+			.classed("handles-detachable-hover", false);
 	}
 
 	// Returns true if the link passed in has one or more decorations.