#2207 Scrollbar for WYSIWYG annotation note can not be clicked to scr…

…oll (#2208) Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Oct 15, 2024 · 958067f · 958067f
1 parent 9ed6d70
commit 958067f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 26 deletions.
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
@@ -118,12 +118,6 @@ $link-highlight-color: $support-info;
 	overflow: visible;
 }
 
-.d3-foreign-object-comment-text {
-	// Don't handle events - let objects inside foreign object handle them.
-	pointer-events: none;
-	overflow: hidden;
-}
-
 // Declare our own focus highlighting for text entry.
 @mixin d3-text-entry-focus-mixin {
 	// Supress the default focus highlighting with non-carbon color and round corners.
@@ -923,7 +917,6 @@ g.bkg-col-cyan-50 {
 	word-break: break-word;
 }
 
-/* Style for comment text entry when shown in an HTML textarea control. */
 .d3-comment-text-scroll,
 .d3-comment-text-entry-scroll {
 	pointer-events: unset;
@@ -934,47 +927,41 @@ g.bkg-col-cyan-50 {
 	border-style: solid;
 	height: 100%;
 	width: 100%;
+	scrollbar-color: $layer-active-02 $layer-02;
 }
 
-.d3-comment-text-outer {
+.d3-comment-text-outer,
+.d3-comment-text-entry-outer {
 	display: table;
 	pointer-events: none;
 	overflow: hidden;
 	width: 100%;
 	height: 100%;
+	outline: none;
 }
 
-.d3-comment-text {
+.d3-comment-text,
+.d3-comment-text-entry {
 	@include d3-comment-mixin;
-	background-color: $comment-fill-color;
 	padding: $comment-text-display-border;
+	border-width: $comment-border-width;
+	background-color: $comment-fill-color;
+	outline: none;
 	user-select: none;
 	overflow: hidden;
 	display: table-cell;
 
+	// Only applicable to d3-comment-text
 	&.markdown {
 		@include d3-comment-markdown;
 	}
 }
 
-.d3-comment-text-entry-outer {
-	display: table;
-	pointer-events: none;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	outline: none;
+.d3-comment-text {
+	cursor: default;
 }
 
 .d3-comment-text-entry {
-	@include d3-comment-mixin;
-	padding: $comment-text-display-border;
-	border-width: $comment-border-width;
-	background-color: $field-01;
-	outline: none;
-	user-select: none;
-	overflow: hidden;
-	display: table-cell;
 	cursor: text;
 }
 

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-textarea.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-textarea.js
@@ -727,6 +727,12 @@ export default class SvgCanvasTextArea {
 		this.foreignObjectComment
 			.append("xhtml:div") // Provide a namespace when div is inside foreignObject
 			.attr("class", "d3-comment-text-entry-scroll")
+			.on("mousedown", (d3Event) => {
+				// This is triggered when the user 'mousedown's on the scrollbar. In this
+				// case, prevent propogation otherwise it causes a 'blur' event and ends
+				// the edit mode.
+				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+			})
 			.each((d, i, commentTexts) => {
 				const commentElement = d3.select(commentTexts[i]);
 				CanvasUtils.applyOutlineStyle(commentElement, d.formats); // Only apply outlineStyle format here

diff --git a/canvas_modules/harness/cypress/support/canvas/comments-cmds.js b/canvas_modules/harness/cypress/support/canvas/comments-cmds.js
@@ -196,7 +196,7 @@ Cypress.Commands.add("moveCommentToPosition", (commentText, canvasX, canvasY) =>
 				.then((transform) => {
 					cy.window().then((win) => {
 						cy.get(srcSelector)
-							.trigger("mousedown", "topLeft", { which: 1, view: win });
+							.trigger("mousedown", "topLeft", { which: 1, view: win, force: true });
 						cy.get("#canvas-div-0")
 							.trigger("mousemove", canvasX + transform.x, canvasY + transform.y, { view: win });
 						cy.get("#canvas-div-0")