@elyra/canvas 12.23.1 → 12.24.0

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

@@ -58,8 +58,6 @@ import SvgCanvasDecs from "./svg-canvas-utils-decs.js";
 import SvgCanvasTextArea from "./svg-canvas-utils-textarea.js";
 import SVGCanvasPipeline from "./svg-canvas-pipeline";
 
-const showLinksTime = false;
-
 const NINETY_DEGREES = 90;
 
 const INPUT_TYPE = "input_type";
@@ -184,13 +182,14 @@ export default class SVGCanvasRenderer {
 		// Flag to indicate when a zoom is invoked programmatically.
 		this.zoomingAction = false;
 
-		// Allows us to track when the binding nodes in a subflow are being moved.
-		this.movingBindingNodes = false;
-
-		// Keep track of when the context menu has been closed so we don't remove
+		// Keep track of when the context menu has been closed, so we don't remove
 		// selections when a context menu is closed during a zoom gesture.
 		this.contextMenuClosedOnZoom = false;
 
+		// Keep track of when text editing has been closed, so we don't remove
+		// selections when that happens during a zoom gesture.
+		this.textEditingClosedfOnZoom = false;
+
 		// Used to monitor the region selection rectangle.
 		this.regionSelect = false;
 
@@ -419,7 +418,7 @@ export default class SVGCanvasRenderer {
 		// Ensure the SVG area is displayed, incase it was previously hidden.
 		this.canvasSVG.style("display", "inherit");
 
-		this.displayComments(); // Show comments first so they appear under nodes, if there is overlap.
+		this.displayComments();
 		this.displayNodes();
 		this.displayLinks();
 
@@ -433,6 +432,12 @@ export default class SVGCanvasRenderer {
 			this.displayPortsForSubFlowFullPage();
 		}
 
+		this.displayCanvasAccoutrements();
+
+		this.logger.logEndTimer("displayCanvas");
+	}
+
+	displayCanvasAccoutrements() {
 		if (this.config.enableBoundingRectangles) {
 			this.displayBoundingRectangles();
 		}
@@ -440,8 +445,6 @@ export default class SVGCanvasRenderer {
 		if (this.config.enableCanvasUnderlay !== "None" && this.dispUtils.isDisplayingPrimaryFlowFullPage()) {
 			this.setCanvasUnderlaySize();
 		}
-
-		this.logger.logEndTimer("displayCanvas");
 	}
 
 	// Ensures the binding ports for a full-page sub-flow are calculated
@@ -477,10 +480,10 @@ export default class SVGCanvasRenderer {
 		// moved to the right place.
 		this.setPortPositionsAllNodes();
 		this.moveSuperBindingNodes();
-		this.movingBindingNodes = true;
-		this.displayNodes();
-		this.displayLinks();
-		this.movingBindingNodes = false;
+
+		this.displayMovedNodes();
+		this.displayMovedLinks();
+
 		this.logger.log("displayBindingNodesToFitSVG - end");
 	}
 
@@ -680,11 +683,28 @@ export default class SVGCanvasRenderer {
 		return this.nodesLinksGrp.selectChildren(nodeGrpSelector);
 	}
 
-	getLinkGroupSelectionById(nodeId) {
-		const linkGrpSelector = this.getSelectorForId("link_grp", nodeId);
+	getLinkGroupSelectionById(linkId) {
+		const linkGrpSelector = this.getSelectorForId("link_grp", linkId);
 		return this.nodesLinksGrp.selectChildren(linkGrpSelector);
 	}
 
+	getCommentGroupSelectionById(comId) {
+		const selector = this.getSelectorForId("comment_grp", comId);
+		return this.commentsGrp.selectChildren(selector);
+	}
+
+	getNodeDecSelectionById(decId, nodeId) {
+		const nodeSel = this.getNodeGroupSelectionById(nodeId);
+		const selector = this.getSelectorForId("node_dec_group", decId);
+		return nodeSel.selectAll(selector);
+	}
+
+	getLinkDecSelectionById(decId, linkId) {
+		const linkSel = this.getLinkGroupSelectionById(linkId);
+		const selector = this.getSelectorForId("link_dec_group", decId);
+		return linkSel.selectAll(selector);
+	}
+
 	// Returns a selector for the ID string like one of the following:
 	// * [data-id='prefix_instanceID']
 	// * [data-id='prefix_instanceID_suffix']
@@ -961,13 +981,13 @@ export default class SVGCanvasRenderer {
 		// the Chrome browser userAgent contains the words "Chrome and "Safari"!
 		// However, with the Safari browser, userAgent only contains the word "Safari".
 		if (navigator.userAgent.includes("Chrome")) {
-			browserZoom = window.devicePixelRatio; // This works for Chrome
+			browserZoom = 1; // This works for Chrome
 
 		} else if (navigator.userAgent.includes("Safari")) {
 			browserZoom = (window.outerWidth - 8) / window.innerWidth; // This works for Safari
 
 		} else if (navigator.userAgent.includes("Firefox")) {
-			browserZoom = window.devicePixelRatio / 2; // This works for Firefox
+			browserZoom = 1; // This works for Firefox
 		}
 
 		return browserZoom;
@@ -1597,6 +1617,57 @@ export default class SVGCanvasRenderer {
 		feMerge.append("feMergeNode").attr("in", "SourceGraphic");
 	}
 
+	setNodeLabelEditingMode(nodeId, pipelineId) {
+		if (this.pipelineId === pipelineId) {
+			const node = this.activePipeline.getNode(nodeId);
+			if (node && node.layout.labelEditable && this.config.enableEditingActions) {
+				const nodeSel = this.getNodeGroupSelectionById(nodeId);
+				const nodeDomObj = nodeSel.node();
+				this.displayNodeLabelTextArea(node, nodeDomObj);
+			}
+		} else {
+			this.superRenderers.forEach((renderer) => {
+				renderer.setNodeLabelEditingMode(nodeId, pipelineId);
+			});
+		}
+	}
+
+	setNodeDecorationLabelEditingMode(decId, nodeId, pipelineId) {
+		if (this.pipelineId === pipelineId) {
+			const node = this.activePipeline.getNode(nodeId);
+			if (node && node.decorations) {
+				const dec = node.decorations.find((d) => d.id === decId);
+				if (dec && typeof dec.label !== "undefined" && dec.label_editable && this.config.enableEditingActions) {
+					const nodeDecSel = this.getNodeDecSelectionById(decId, nodeId);
+					const nodeDecDomObj = nodeDecSel.node();
+					this.displayDecLabelTextArea(dec, node, "node", nodeDecDomObj);
+				}
+			}
+		} else {
+			this.superRenderers.forEach((renderer) => {
+				renderer.setLinkDecorationLabelEditingMode(decId, nodeId, pipelineId);
+			});
+		}
+	}
+
+	setLinkDecorationLabelEditingMode(decId, linkId, pipelineId) {
+		if (this.pipelineId === pipelineId) {
+			const link = this.activePipeline.getLink(linkId);
+			if (link && link.decorations) {
+				const dec = link.decorations.find((d) => d.id === decId);
+				if (dec && typeof dec.label !== "undefined" && dec.label_editable && this.config.enableEditingActions) {
+					const linkDecSel = this.getLinkDecSelectionById(decId, linkId);
+					const linkDecDomObj = linkDecSel.node();
+					this.displayDecLabelTextArea(dec, link, "link", linkDecDomObj);
+				}
+			}
+		} else {
+			this.superRenderers.forEach((renderer) => {
+				renderer.setLinkDecorationLabelEditingMode(decId, linkId, pipelineId);
+			});
+		}
+	}
+
 	// Restores the zoom of the canvas, if it has changed, based on the type
 	// of 'save zoom' specified in the configuration and, if no saved zoom, was
 	// provided pans the canvas area so it is always visible.
@@ -1806,6 +1877,13 @@ export default class SVGCanvasRenderer {
 			this.contextMenuClosedOnZoom = true;
 		}
 
+		// Any text editing in progress will be closed by the textarea's blur event
+		// if the user clicks on the canvas background. So we set this flag to
+		// prevent the selection being lost in the zoomEnd (mouseup) event.
+		if (this.svgCanvasTextArea.isEditingText()) {
+			this.textEditingClosedfOnZoom = true;
+		}
+
 		this.regionSelect = this.shouldDoRegionSelect(d3Event);
 
 		if (this.regionSelect) {
@@ -1883,6 +1961,7 @@ export default class SVGCanvasRenderer {
 		this.resetCanvasCursor(d3Event);
 		this.removeTempCursorOverlay();
 		this.contextMenuClosedOnZoom = false;
+		this.textEditingClosedfOnZoom = false;
 		this.regionSelect = false;
 	}
 
@@ -1950,7 +2029,9 @@ export default class SVGCanvasRenderer {
 	zoomClick() {
 		// Only clear selections if clicked on the canvas of the current active pipeline.
 		// Clicking the canvas of an expanded supernode will select that node.
-		if (this.dispUtils.isDisplayingCurrentPipeline() && !this.contextMenuClosedOnZoom) {
+		// Also, don't clear selections if we have closed a context menu or
+		// closed text editing.
+		if (this.dispUtils.isDisplayingCurrentPipeline() && !this.contextMenuClosedOnZoom && !this.textEditingClosedfOnZoom) {
 			this.selecting = true;
 			this.canvasController.clearSelections();
 			this.selecting = false;
@@ -2315,7 +2396,15 @@ export default class SVGCanvasRenderer {
 			}
 		}
 
-		this.displayCanvas();
+		this.displayMovedComments();
+		this.displayMovedNodes();
+		this.displayMovedLinks();
+		this.displayCanvasAccoutrements();
+
+		if (this.dispUtils.isDisplayingSubFlowInPlace()) {
+			this.displaySVGToFitSupernode();
+		}
+
 
 		if (this.existingNodeInsertableIntoLink) {
 			const link = this.getLinkAtMousePos(d3Event.sourceEvent.clientX, d3Event.sourceEvent.clientY);
@@ -2524,15 +2613,7 @@ export default class SVGCanvasRenderer {
 		// redrawn which will need port positions to be set appropriately.
 		this.setPortPositionsAllNodes();
 
-		// For any of these activities we don't need to do anything to the nodes.
-		if (this.commentSizing) {
-			this.logger.logEndTimer("displayNodes " + this.getFlags());
-			return;
-
-		} else if ((this.dragging && !this.nodeSizing && !this.commentSizing) || this.movingBindingNodes) {
-			this.displayMovedNodes();
-
-		} else if (this.selecting) {
+		if (this.selecting) {
 			this.displayNodesSelectionStatus();
 
 		} else {
@@ -2542,6 +2623,7 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayMovedNodes() {
+		this.logger.logStartTimer("displayMovedNodes");
 		const nodeGroupSel = this.getAllNodeGroupsSelection();
 
 		nodeGroupSel
@@ -2560,6 +2642,7 @@ export default class SVGCanvasRenderer {
 					}
 				});
 		}
+		this.logger.logEndTimer("displayMovedNodes");
 	}
 
 	displayNodesSelectionStatus(nodeGroupSel) {
@@ -2577,8 +2660,25 @@ export default class SVGCanvasRenderer {
 	// Displays all the nodes on the canvas either by creating new nodes,
 	// updating existing nodes or removing unwanted nodes.
 	displayAllNodes() {
-		this.getAllNodeGroupsSelection()
-			.data(this.activePipeline.nodes, (d) => d.id)
+		this.logger.log("displayAllNodes");
+		const sel = this.getAllNodeGroupsSelection();
+		this.displayNodesSubset(sel, this.activePipeline.nodes);
+	}
+
+	displaySingleNode(d) {
+		this.logger.logStartTimer("displaySingleNode " + this.getFlags());
+
+		this.setPortPositionsForNode(d);
+
+		const selection = this.getNodeGroupSelectionById(d.id);
+		this.displayNodesSubset(selection, [d]);
+
+		this.logger.logEndTimer("displaySingleNode " + this.getFlags());
+	}
+
+	displayNodesSubset(selection, data) {
+		selection
+			.data(data, (d) => d.id)
 			.join(
 				(enter) => this.createNodes(enter)
 			)
@@ -2896,11 +2996,14 @@ export default class SVGCanvasRenderer {
 			})
 			// Use mouse down instead of click because it gets called before drag start.
 			.on("mousedown", (d3Event, d) => {
-				this.logger.log("Node Group - mouse down");
+				this.logger.logStartTimer("Node Group - mouse down");
+				if (this.svgCanvasTextArea.isEditingText()) {
+					this.svgCanvasTextArea.completeEditing();
+				}
 				if (!this.config.enableDragWithoutSelect) {
 					this.selectObjectD3Event(d3Event, d);
 				}
-				this.logger.log("Node Group - finished mouse down");
+				this.logger.logEndTimer("Node Group - mouse down");
 			})
 			.on("mousemove", (d3Event, d) => {
 				// this.logger.log("Node Group - mouse move");
@@ -3715,7 +3818,14 @@ export default class SVGCanvasRenderer {
 					if (!this.config.enableDragWithoutSelect) {
 						this.selectObjectD3Event(d3Event, d);
 					}
-					this.openContextMenu(d3Event, "node", d);
+					if (this.canvasController.isContextMenuDisplayed()) {
+						this.canvasController.closeContextMenu();
+					} else {
+						const rect = ellipsisGrp.node().getBoundingClientRect();
+						const rect2 = this.canvasSVG.node().getBoundingClientRect();
+						const pos = { x: rect.left - rect2.left, y: rect.bottom - rect2.top };
+						this.openContextMenu(d3Event, "node", d, null, pos);
+					}
 				});
 
 			ellipsisGrp
@@ -3873,14 +3983,16 @@ export default class SVGCanvasRenderer {
 
 	}
 
-	openContextMenu(d3Event, type, d, port) {
+	openContextMenu(d3Event, type, d, port, pos) {
 		CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stop the browser context menu appearing
 		this.canvasController.contextMenuHandler({
 			type: type,
 			targetObject: type === "canvas" ? null : d,
 			id: type === "canvas" ? null : d.id, // For historical puposes, we pass d.id as well as d as targetObject.
 			pipelineId: this.activePipeline.id,
-			cmPos: this.getMousePos(d3Event, this.canvasDiv.selectAll("svg")), // Get mouse pos relative to top most SVG area even in a subflow.
+			cmPos: pos
+				? pos
+				: this.getMousePos(d3Event, this.canvasDiv.selectAll("svg")), // Get mouse pos relative to top most SVG area even in a subflow.
 			mousePos: this.getMousePosSnapToGrid(this.getTransformedMousePos(d3Event)),
 			selectedObjectIds: this.objectModel.getSelectedObjectIds(),
 			addBreadcrumbs: (d && d.type === SUPER_NODE) ? this.getSupernodeBreadcrumbs(d3Event.currentTarget) : null,
@@ -4733,6 +4845,9 @@ export default class SVGCanvasRenderer {
 	// Returns a path string that will draw the selection outline shape of the node.
 	getNodeSelectionOutline(data) {
 		if (data.layout.selectionPath && !CanvasUtils.isExpanded(data)) {
+			if (typeof data.layout.selectionPath === "function") {
+				return data.layout.selectionPath(data);
+			}
 			return data.layout.selectionPath;
 
 		} else if (data.layout.nodeShape === "port-arcs") {
@@ -4745,6 +4860,10 @@ export default class SVGCanvasRenderer {
 	// Returns a path string that will draw the body shape of the node.
 	getNodeShapePath(data) {
 		if (data.layout.bodyPath && !CanvasUtils.isExpanded(data)) {
+			if (typeof data.layout.bodyPath === "function") {
+				return data.layout.bodyPath(data);
+			}
+
 			return data.layout.bodyPath;
 
 		} else if (data.layout.nodeShape === "port-arcs") {
@@ -5047,10 +5166,7 @@ export default class SVGCanvasRenderer {
 	displayComments() {
 		this.logger.logStartTimer("displayComments " + this.getFlags());
 
-		if (this.dragging && !this.commentSizing && !this.nodeSizing && !this.isCommentBeingUpdated) {
-			this.displayMovedComments();
-
-		} else if (this.selecting) {
+		if (this.selecting) {
 			this.displayCommentsSelectionStatus();
 
 		} else {
@@ -5061,9 +5177,13 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayMovedComments() {
+		this.logger.logStartTimer("displayMovedComments");
+
 		this.getAllCommentGroupsSelection()
 			.attr("transform", (c) => `translate(${c.x_pos}, ${c.y_pos})`)
 			.datum((d) => this.activePipeline.getComment(d.id));
+
+		this.logger.logEndTimer("displayMovedComments");
 	}
 
 	displayCommentsSelectionStatus() {
@@ -5078,9 +5198,19 @@ export default class SVGCanvasRenderer {
 		});
 	}
 
+	displaySingleComment(comment) {
+		const selection = this.getCommentGroupSelectionById(comment.id);
+		this.displayCommentsSubset(selection, [comment]);
+	}
+
 	displayAllComments() {
-		this.getAllCommentGroupsSelection()
-			.data(this.activePipeline.comments, (c) => c.id)
+		const selection = this.getAllCommentGroupsSelection();
+		this.displayCommentsSubset(selection, this.activePipeline.comments);
+	}
+
+	displayCommentsSubset(selection, data) {
+		selection
+			.data(data, (c) => c.id)
 			.join(
 				(enter) => this.createComments(enter)
 			)
@@ -5194,11 +5324,14 @@ export default class SVGCanvasRenderer {
 			})
 			// Use mouse down instead of click because it gets called before drag start.
 			.on("mousedown", (d3Event, d) => {
-				this.logger.log("Comment Group - mouse down");
+				this.logger.logStartTimer("Comment Group - mouse down");
+				if (this.svgCanvasTextArea.isEditingText()) {
+					this.svgCanvasTextArea.completeEditing();
+				}
 				if (!this.config.enableDragWithoutSelect) {
 					this.selectObjectD3Event(d3Event, d);
 				}
-				this.logger.log("Comment Group - finished mouse down");
+				this.logger.logEndTimer("Comment Group - mouse down");
 			})
 			.on("click", (d3Event, d) => {
 				this.logger.log("Comment Group - click");
@@ -5521,9 +5654,13 @@ export default class SVGCanvasRenderer {
 				this.nodeSizingDetLinksInfo = Object.assign(this.nodeSizingDetLinksInfo, linksInfo);
 			}
 
-			this.displayComments();
-			this.displayNodes();
-			this.displayLinks();
+			this.logger.logStartTimer("displayObjects");
+
+			this.displayMovedComments();
+			this.displayMovedNodes();
+			this.displaySingleNode(resizeObj);
+			this.displayMovedLinks();
+			this.displayCanvasAccoutrements();
 
 			if (CanvasUtils.isSupernode(resizeObj)) {
 				if (this.dispUtils.isDisplayingSubFlow()) {
@@ -5531,6 +5668,7 @@ export default class SVGCanvasRenderer {
 				}
 				this.superRenderers.forEach((renderer) => renderer.displaySVGToFitSupernode());
 			}
+			this.logger.logEndTimer("displayObjects");
 		}
 	}
 
@@ -5541,8 +5679,9 @@ export default class SVGCanvasRenderer {
 	resizeComment(d3Event, d) {
 		const resizeObj = this.activePipeline.getComment(d.id);
 		this.resizeObject(d3Event, resizeObj, this.commentSizingDirection, 20, 20);
-		this.displayComments();
-		this.displayLinks();
+		this.displaySingleComment(resizeObj);
+		this.displayMovedLinks();
+		this.displayCanvasAccoutrements();
 	}
 
 	// Sets the size and position of the object in the canvasInfo
@@ -5586,6 +5725,9 @@ export default class SVGCanvasRenderer {
 			width = CanvasUtils.snapToGrid(this.notSnappedWidth, this.canvasLayout.snapToGridXPx);
 			height = CanvasUtils.snapToGrid(this.notSnappedHeight, this.canvasLayout.snapToGridYPx);
 
+			width = Math.max(width, minWidth);
+			height = Math.max(height, minHeight);
+
 		} else {
 			xPos = canvasObj.x_pos + incrementX;
 			yPos = canvasObj.y_pos + incrementY;
@@ -5622,9 +5764,10 @@ export default class SVGCanvasRenderer {
 		let resizeObj = this.activePipeline.getNode(node.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
 			resizeObj = this.snapToGridObject(resizeObj);
+			resizeObj = this.restrictNodeSizingToMinimums(resizeObj);
 		}
 
-		// If the dimensions or position has changed, issue the command.
+		// If the dimensions or position has changed, issue the "resizeObjects" command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
 		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
@@ -5697,6 +5840,16 @@ export default class SVGCanvasRenderer {
 		this.commentSizing = false;
 	}
 
+	// Ensure the snap-to-grid does not make the width or height smaller than
+	// the minimums allowed.
+	restrictNodeSizingToMinimums(resizeObj) {
+		const minHeight = this.getMinHeight(resizeObj);
+		const minWidth = this.getMinWidth(resizeObj);
+		resizeObj.width = Math.max(resizeObj.width, minWidth);
+		resizeObj.height = Math.max(resizeObj.height, minHeight);
+		return resizeObj;
+	}
+
 	displayLinks() {
 		this.logger.logStartTimer("displayLinks " + this.getFlags());
 
@@ -5724,13 +5877,31 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayAllLinks() {
-		var startTimeDrawingLines = Date.now();
+		const linksArray = this.buildLinksArray();
+		const selection = this.getAllLinkGroupsSelection();
+		this.displayLinksSubset(selection, linksArray);
+	}
+
+	displayMovedLinks() {
+		this.logger.logStartTimer("displayMovedLinks");
 
-		const timeAfterDelete = Date.now();
 		const linksArray = this.buildLinksArray();
-		const afterLineArray = Date.now();
+		const movedLinks = linksArray.filter((l) => l.coordsUpdated);
+
+		movedLinks.forEach((l) => {
+			this.displaySingleLink(l);
+		});
+
+		this.logger.logEndTimer("displayMovedLinks");
+	}
 
-		this.getAllLinkGroupsSelection()
+	displaySingleLink(link) {
+		const selection = this.getLinkGroupSelectionById(link.id);
+		this.displayLinksSubset(selection, [link]);
+	}
+
+	displayLinksSubset(selection, linksArray) {
+		selection
 			.data(linksArray, (link) => link.id)
 			.join(
 				(enter) => this.createLinks(enter)
@@ -5741,13 +5912,6 @@ export default class SVGCanvasRenderer {
 			.call((joinedLinkGrps) => {
 				this.updateLinks(joinedLinkGrps, linksArray);
 			});
-
-		var endTimeDrawingLines = Date.now();
-
-		if (showLinksTime) {
-			this.logger.log("displayLinks R " + (timeAfterDelete - startTimeDrawingLines) +
-			" B " + (afterLineArray - timeAfterDelete) + " D " + (endTimeDrawingLines - afterLineArray));
-		}
 	}
 
 	// Creates all newly created links specified in the enter selection.
@@ -5831,7 +5995,8 @@ export default class SVGCanvasRenderer {
 		// Update decorations on the node-node or association links.
 		joinedLinkGrps.each((d, i, linkGrps) => {
 			if (d.type === NODE_LINK || d.type === ASSOCIATION_LINK) {
-				this.displayDecorations(d, DEC_LINK, d3.select(linkGrps[i]).selectAll(".d3-link-decorations-group"), d.decorations);
+				const linkGrp = d3.select(linkGrps[i]).selectAll(".d3-link-decorations-group");
+				this.displayDecorations(d, DEC_LINK, linkGrp, d.decorations);
 			}
 		});
 
@@ -5855,6 +6020,9 @@ export default class SVGCanvasRenderer {
 		linkGrps
 			.on("mousedown", (d3Event, d, index, links) => {
 				this.logger.log("Link Group - mouse down");
+				if (this.svgCanvasTextArea.isEditingText()) {
+					this.svgCanvasTextArea.completeEditing();
+				}
 				if (this.config.enableLinkSelection !== LINK_SELECTION_NONE) {
 					this.selectObjectD3Event(d3Event, d);
 				}
@@ -6067,7 +6235,8 @@ export default class SVGCanvasRenderer {
 
 	// Returns the class string to be appled to the node group object.
 	getNodeGroupClass(d) {
-		let customClass = "";
+		let customClass = " " + d.layout.className || "";
+
 		// If the node has a classname that isn't the default use it!
 		if (d.class_name &&
 				d.class_name !== "canvas-node" &&
@@ -6110,7 +6279,7 @@ export default class SVGCanvasRenderer {
 	// the side of the node and where those nodes may be positioned close to each
 	// other so it makes the ports appear on top of any adjacent node.
 	raiseNodeToTop(nodeGrp) {
-		if (this.drawingNewLinkData === null && !this.dragging && this.getSelectedLinks().length === 0) {
+		if (this.drawingNewLinkData === null && !this.dragging && this.getSelectedLinks().length === 0 && !this.isEditingText()) {
 			nodeGrp.raise();
 		}
 	}
@@ -6205,6 +6374,12 @@ export default class SVGCanvasRenderer {
 					: null;
 			const coords = this.linkUtils.getLinkCoords(link, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation);
 
+			link.coordsUpdated =
+				link.x1 !== coords.x1 ||
+				link.y1 !== coords.y1 ||
+				link.x2 !== coords.x2 ||
+				link.y2 !== coords.y2;
+
 			link.assocLinkVariation = assocLinkVariation;
 			link.srcPortId = srcPortId;
 			link.trgPortId = trgPortId;
@@ -6275,6 +6450,12 @@ export default class SVGCanvasRenderer {
 			}
 		}
 
+		link.coordsUpdated =
+			link.x1 !== coords.x1 ||
+			link.y1 !== coords.y1 ||
+			link.x2 !== coords.x2 ||
+			link.y2 !== coords.y2;
+
 		link.srcPortId = srcPortId;
 		link.trgPortId = trgPortId;
 		link.x1 = coords.x1;
@@ -6778,9 +6959,6 @@ export default class SVGCanvasRenderer {
 		if (this.commentSizing) {
 			str += " commentSizing = true";
 		}
-		if (this.movingBindingNodes) {
-			str += " movingBindingNodes = true";
-		}
 		if (this.selecting) {
 			str += " selecting = true";
 		}