@elyra/canvas 13.36.0 → 13.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "13.36.0",
+  "version": "13.37.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",

package/src/common-canvas/canvas-controller.js

@@ -1260,8 +1260,9 @@ export default class CanvasController {
 		return this.objectModel.isHidingComments();
 	}
 
-	// Sets text to be highlighted in the comments identified by the commentIds array passed in.
-	// pipelineId is optional. If highlightText is null or undefined the highlighting text will
+	// Sets text to be highlighted in the comments identified by the commentIds array passed in
+	// or, if set to a falsy value, the highlight text will be applied to all comments. The
+	// pipelineId is optional. If highlightText is a falsy value, the highlighting will
 	// be removed from the comments.
 	setCommentHighlightText(commentIds, highlightText, pipelineId) {
 		this.objectModel.getAPIPipeline(pipelineId).setCommentHighlighText(commentIds, highlightText);

package/src/common-canvas/cc-contents.jsx

@@ -104,10 +104,14 @@ class CanvasContents extends React.Component {
 
 	componentDidMount() {
 		this.logger.log("componentDidMount");
-		this.svgCanvasD3 =
-			new SVGCanvasD3(this.props.canvasInfo.id,
-				this.svgCanvasDivSelector,
-				this.props.canvasController);
+		// componentDidMount may be called twice in StrictMode so only
+		// create the svgCanvasD3 when necessary.
+		if (!this.svgCanvasD3) {
+			this.svgCanvasD3 =
+				new SVGCanvasD3(this.props.canvasInfo.id,
+					this.svgCanvasDivSelector,
+					this.props.canvasController);
+		}
 		this.setCanvasInfo();
 
 		if (this.props.canvasConfig.enableBrowserEditMenu) {

package/src/common-canvas/keyboard-utils.js

@@ -30,6 +30,10 @@ const SPACE_KEY = "Space";
 const SPACE_CHAR_KEY = " ";
 const COMMA_CHAR_KEY = ",";
 
+// WARNING when adding a new letter constant below: If the shortcut requires the Meta
+// key AND Shift key to be pressed, on Windows, if the user presses 'Ctrl' as the Meta
+// key, the Shift will cause an upper case letter to be returned. See code below where
+// toLowerCase() is called before comparison.
 const A_KEY = "a";
 const B_KEY = "b";
 const C_KEY = "c";
@@ -247,7 +251,8 @@ export default class KeyboardUtils {
 	/* Link creation */
 
 	static createLink(d3Event) {
-		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.key === L_KEY;
+		// When meta key is 'Ctrl' on Windows, shift key will cause 'key' property to contain uppercase 'L' - so lowercase it!
+		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.key?.toLowerCase() === L_KEY;
 	}
 
 	/* Comment display */
@@ -293,7 +298,8 @@ export default class KeyboardUtils {
 	}
 
 	static strikethroughCommand(d3Event) {
-		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.key === X_KEY;
+		// When meta key is 'Ctrl' on Windows, shift key will cause 'key' property to contain uppercase 'X' - so lowercase it!
+		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.key?.toLowerCase() === X_KEY;
 	}
 
 	static numberedListCommand(d3Event) {
@@ -313,7 +319,8 @@ export default class KeyboardUtils {
 	}
 
 	static quoteCommand(d3Event) {
-		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.key === I_KEY;
+		// When meta key is 'Ctrl' on Windows, shift key will cause 'key' property to contain uppercase 'I' - so lowercase it!
+		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.key?.toLowerCase() === I_KEY;
 	}
 
 	static incHashesCommand(d3Event) {
@@ -479,7 +486,7 @@ export default class KeyboardUtils {
 
 	// Returns true if either the 'Command Key' on Mac or
 	// 'Control Key' or 'Windows key' on Windows is pressed.
-	// evnt can be either a regular event object OR the
+	// evt can be either a regular event object OR the
 	// d3event object provided by d3.
 	static isMetaKey(evt) {
 		if (CanvasUtils.isMacintosh()) {

package/src/common-canvas/svg-canvas-renderer.js

@@ -68,7 +68,7 @@ import SVGCanvasPipeline from "./svg-canvas-pipeline";
 export default class SVGCanvasRenderer {
 	constructor(pipelineId, canvasDiv, canvasController, canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout, config, supernodeInfo = {}) {
 		this.logger = new Logger(["SVGCanvasRenderer", "PipeId", pipelineId]);
-		this.logger.logStartTimer("constructor" + pipelineId.substring(0, 5));
+		this.logger.logStartTimer("constructor - " + pipelineId.substring(0, 5));
 		this.pipelineId = pipelineId;
 		this.supernodeInfo = supernodeInfo; // Contents will be 'empty object' in case of primary pipeline renderer
 		this.canvasDiv = canvasDiv;
@@ -188,7 +188,7 @@ export default class SVGCanvasRenderer {
 			this.supernodeInfo.d3Selection.selectAll(".d3-node-port-output").raise();
 		}
 
-		this.logger.logEndTimer("constructor" + pipelineId.substring(0, 5));
+		this.logger.logEndTimer("constructor - " + pipelineId.substring(0, 5));
 	}
 
 	// Sets the pressed state of the space bar. This is called
@@ -1886,7 +1886,6 @@ export default class SVGCanvasRenderer {
 		// Optional foreign object to contain a React object
 		nonBindingNodeGrps
 			.selectChildren(".d3-foreign-object-external-node")
-			.attr("tabindex", -1)
 			.data((d) => (d.layout.nodeExternalObject ? [d] : []), (d) => d.id)
 			.join(
 				(enter) =>
@@ -1901,6 +1900,7 @@ export default class SVGCanvasRenderer {
 				}
 			)
 			.datum((d) => this.activePipeline.getNode(d.id))
+			.attr("tabindex", -1)
 			.attr("width", (d) => d.width)
 			.attr("height", (d) => d.height)
 			.attr("x", 0)
@@ -2298,7 +2298,6 @@ export default class SVGCanvasRenderer {
 							linkInfosAll.forEach((li) => (li.link.navObject = d));
 							this.setFocusObject(linkInfos[0].link, d3Event);
 						}
-						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 
 					} else if (KeyboardUtils.previousObjectInGroup(d3Event)) {
 						const linkInfos = this.activePipeline.getPreviousLinksToNode(d);
@@ -2467,9 +2466,7 @@ export default class SVGCanvasRenderer {
 					this.svgCanvasTextArea.completeEditing(d3Event);
 				}
 				if (!this.config.enableDragWithoutSelect) {
-					if (this.config.enableKeyboardNavigation) {
-						this.setFocusObject(d, d3Event);
-					}
+					this.setFocusObject(d, d3Event, d.layout.onFocusAllowDefaultAction);
 					const clickType = d3Event.button === 2 ? SINGLE_CLICK_CONTEXTMENU : SINGLE_CLICK;
 					this.selectObjectD3Event(d3Event, d, clickType);
 				}
@@ -4910,17 +4907,14 @@ export default class SVGCanvasRenderer {
 						if (d.type === NODE_LINK) {
 							const node = this.activePipeline.getNextNodeFromDataLink(d);
 							this.setFocusObject(node, d3Event);
-							CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 
 						} else if (d.type === ASSOCIATION_LINK) {
 							const node = this.activePipeline.getNextNodeFromAssocLink(d);
 							this.setFocusObject(node, d3Event);
-							CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 
 						} else if (d.type === COMMENT_LINK) {
 							const obj = this.activePipeline.getNextObjectFromCommentLink(d);
 							this.setFocusObject(obj, d3Event);
-							CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 						}
 
 					} else if (KeyboardUtils.previousObjectInGroup(d3Event)) {
@@ -5218,7 +5212,7 @@ export default class SVGCanvasRenderer {
 						this.setFocusPreviousSubObject(link, d3Event);
 
 					} else if (KeyboardUtils.cancelFocusOnSubObject(d3Event)) {
-						this.canvasController.setFocusObject(link);
+						this.canvasController.restoreFocus();
 
 					} else if (KeyboardUtils.moveLinkHandleUp(d3Event)) {
 						if (this.config.enableEditingActions) {
@@ -6370,12 +6364,22 @@ export default class SVGCanvasRenderer {
 		return objElement;
 	}
 
-	setFocusObject(focusObj, evt) {
+	// Sets the focus object passed in.
+	setFocusObject(focusObj, evt, allowDefaultAction = false) {
 		if (!this.config.enableKeyboardNavigation) {
 			return;
 		}
 
-		CanvasUtils.stopPropagationAndPreventDefault(evt);
+		// If allowDefaultAction is specified as true, we do not 'preventDefault'
+		// only stop propagation. Setting allowDefaultAction to true is useful for
+		// applications that provide a React object for the node body and they want
+		// the default action to go through to the React, perhaps to initiate a drag event.
+		if (allowDefaultAction) {
+			evt.stopPropagation();
+
+		} else {
+			CanvasUtils.stopPropagationAndPreventDefault(evt);
+		}
 
 		this.canvasController.setFocusObject(focusObj, evt);
 	}

package/src/common-canvas/svg-canvas-utils-comments.js

@@ -34,19 +34,23 @@ export default class SvgCanvasUtilsComments {
 		// Parse the HTML string.
 		const parser = new DOMParser();
 		const doc = parser.parseFromString(htmlString, "text/html");
+
+		// Get the raw text from the body element.
 		const bodies = doc.getElementsByTagName("body");
 		const body = bodies[0];
-
-		// Look for the search string in the text only (no HTML tags) version of
-		// the text.
-		const searchStart = body?.innerText?.indexOf(searchStr);
-
-		// If the search string was found, insert the <mark> tags
-		if (searchStart > -1) {
-			const elementInfos = [];
-			this.searchForElementInfos(body, searchStart, searchStart + searchStr.length, 0, elementInfos);
-			this.insertMarkElements(elementInfos);
-
+		const innerText = body?.innerText || "";
+
+		// Search for all matches of the search string.
+		const regex = new RegExp(searchStr, "gi");
+		const matches = innerText.matchAll(regex);
+
+		// If any matches of the search string were found, insert the <mark> tags
+		if (matches) {
+			for (const match of matches) {
+				const elementInfos = [];
+				this.searchForElementInfos(body, match.index, match.index + searchStr.length, 0, elementInfos);
+				this.insertMarkElements(elementInfos);
+			}
 			return body.outerHTML;
 		}
 
@@ -64,28 +68,22 @@ export default class SvgCanvasUtilsComments {
 		let textStart = runStart;
 		let textEnd = runStart;
 
-		for (let i = 0; i < element.childNodes.length; i++) {
-			const node = element.childNodes[i];
-
+		for (const node of element.childNodes) {
 			if (node.nodeType === Node.TEXT_NODE) {
 				const textLen = node?.textContent?.length;
 				textEnd = textStart + textLen;
 
-				if (!(textStart >= searchEnd || textEnd <= searchStart)) {
-					let splitStart = 0;
-					let splitEnd = textLen;
-					if (searchStart > textStart) {
-						splitStart = searchStart - textStart;
-					}
-					if (searchEnd < textEnd) {
-						splitEnd = searchEnd - textStart;
-					}
+				if (textStart < searchEnd && textEnd > searchStart) {
+					// Calculate split positions **within** the text node.
+					const splitStart = (searchStart > textStart) ? searchStart - textStart : 0;
+					const splitEnd = (searchEnd < textEnd) ? searchEnd - textStart : textLen;
 
 					elementInfos.push({ splitStart, splitEnd, node });
 				}
 
 			} else if (node.nodeType === Node.ELEMENT_NODE) {
 				textStart = this.searchForElementInfos(node, searchStart, searchEnd, textEnd, elementInfos);
+				textEnd = textStart;
 			}
 		}
 		return textEnd;

package/src/object-model/layout-dimensions.js

@@ -53,6 +53,10 @@ const horizontalDefaultLayout = {
 		// Displays the external object specified, as the body of the node
 		nodeExternalObject: false,
 
+		// When set to true and the focus is being set on the node, the event
+		// is allowed to perform the default action on the node.
+		onFocusAllowDefaultAction: false,
+
 		// Display image
 		imageDisplay: true,
 
@@ -543,6 +547,10 @@ const verticalDefaultLayout = {
 		// Displays the external object specified, as the body of the node
 		nodeExternalObject: false,
 
+		// When set to true and the focus is being set on the node, the event
+		// is allowed to perform the default action on the node.
+		onFocusAllowDefaultAction: false,
+
 		// Display image
 		imageDisplay: true,
 

package/src/object-model/redux/reducers/comments.js

@@ -165,8 +165,7 @@ export default (state = [], action) => {
 
 	case "SET_COMMENT_HIGHLIGHT_TEXT":
 		return state.map((comment) => {
-			const idx = action.data.commentIds.indexOf(comment.id);
-			if (idx > -1) {
+			if (!action.data.commentIds || action.data.commentIds.indexOf(comment.id) > -1) {
 				const newComment = { ...comment };
 				if (action.data.highlightText) {
 					newComment.highlightText = action.data.highlightText;