@elyra/canvas 12.12.3 → 12.15.0

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

@@ -26,8 +26,13 @@ import * as d3Fetch from "d3-fetch";
 import * as d3Zoom from "./d3-zoom-extension/src";
 const d3 = Object.assign({}, d3Drag, d3Ease, d3Selection, d3Fetch, d3Zoom);
 
-import { cloneDeep, escape as escapeText, forOwn, get,
-	unescape as unescapeText } from "lodash";
+const markdownIt = require("markdown-it")({
+	html: false, // Don't allow HTML to be executed in comments.
+	linkify: false, // Don't convert strings, in URL format, to be links.
+	typographer: true
+});
+
+import { cloneDeep, escape as escapeText, forOwn, get } from "lodash";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
 	LINK_TYPE_CURVE, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT,
@@ -50,22 +55,11 @@ import SvgCanvasNodes from "./svg-canvas-utils-nodes.js";
 import SvgCanvasComments from "./svg-canvas-utils-comments.js";
 import SvgCanvasLinks from "./svg-canvas-utils-links.js";
 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 BACKSPACE_KEY = 8;
-const RETURN_KEY = 13;
-const ESC_KEY = 27;
-const LEFT_ARROW_KEY = 37;
-const UP_ARROW_KEY = 38;
-const RIGHT_ARROW_KEY = 39;
-const DOWN_ARROW_KEY = 40;
-const DELETE_KEY = 46;
-const A_KEY = 65;
-
-const SCROLL_PADDING = 12;
-
 const NINETY_DEGREES = 90;
 
 const INPUT_TYPE = "input_type";
@@ -99,6 +93,18 @@ export default class SVGCanvasRenderer {
 		this.commentUtils = new SvgCanvasComments();
 		this.linkUtils = new SvgCanvasLinks(this.config, this.canvasLayout, this.nodeUtils, this.commentUtils);
 		this.decUtils = new SvgCanvasDecs(this.canvasLayout);
+		this.svgCanvasTextArea = new SvgCanvasTextArea(
+			this.config,
+			this.dispUtils,
+			this.nodeUtils,
+			this.decUtils,
+			this.canvasController,
+			this.canvasDiv,
+			this.activePipeline,
+			this.displayComments.bind(this), // Function
+			this.displayLinks.bind(this), // Function
+			this.getCommentToolbarPos.bind(this) // Function
+		);
 
 		this.dispUtils.setDisplayState();
 		this.logger.log(this.dispUtils.getDisplayStateMsg());
@@ -117,8 +123,8 @@ export default class SVGCanvasRenderer {
 		// Allows us to track the sizing behavior of nodes
 		this.nodeSizing = false;
 		this.nodeSizingDirection = "";
-		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingDetLinksInfo = [];
+		this.nodeSizingObjectsInfo = {};
+		this.nodeSizingDetLinksInfo = {};
 
 		// Keeps track of the size and position, at the start of the sizing event,
 		// of the object (node or comment) being sized.
@@ -131,10 +137,6 @@ export default class SVGCanvasRenderer {
 		this.notSnappedWidth = 0;
 		this.notSnappedHeight = 0;
 
-		// Allows us to track the editing of text (either comments or node labels)
-		this.editingText = false;
-		this.editingTextId = "";
-
 		// Allows us to record the drag behavior or nodes and comments.
 		this.dragging = false;
 		this.dragOffsetX = 0;
@@ -164,13 +166,12 @@ export default class SVGCanvasRenderer {
 		// option is switched on.
 		this.dragNewLinkOverNode = null;
 
-
 		// Flag to indicate if the current drag operation is for a node that can
 		// be inserted into a link. Such a node would need input and output ports.
 		this.existingNodeInsertableIntoLink = false;
 
 		// Flag to indicate if the current drag operation is for a node that can
-		// be attachd to a a detachd link.
+		// be attached to a detached link.
 		this.existingNodeAttachableToDetachedLinks = false;
 
 		// Allow us to track when a selection is being made so there is
@@ -307,7 +308,7 @@ export default class SVGCanvasRenderer {
 	setCanvasInfoRenderer(canvasInfo) {
 		this.logger.logStartTimer("setCanvasInfoRenderer" + this.pipelineId.substring(0, 5));
 		this.canvasInfo = canvasInfo;
-		this.activePipeline = new SVGCanvasPipeline(this.pipelineId, canvasInfo);
+		this.activePipeline.initialize(this.pipelineId, canvasInfo);
 		this.canvasLayout = this.objectModel.getCanvasLayout(); // Refresh the canvas layout info in case it changed.
 
 		// Set the display state incase we changed from in-place to full-page
@@ -602,7 +603,7 @@ export default class SVGCanvasRenderer {
 
 	// Returns true when we are editing text. Called by svg-canvas-d3.
 	isEditingText() {
-		if (this.editingText) {
+		if (this.svgCanvasTextArea.isEditingText()) {
 			return true;
 		}
 		let state = false;
@@ -731,9 +732,9 @@ export default class SVGCanvasRenderer {
 		return this.transformPos({ x: x - Math.round(svgRect.left), y: y - Math.round(svgRect.top) });
 	}
 
-	// Transforms the x and y fields of the object passed in by the current zoom
+	// Transforms the x and y fields passed in by the current zoom
 	// transformation amounts to convert a coordinate position in screen pixels
-	// to a coordinate position in zoomed pixels.
+	// to a canvas coordinate position.
 	transformPos(pos) {
 		return {
 			x: (pos.x - this.zoomTransform.x) / this.zoomTransform.k,
@@ -741,6 +742,16 @@ export default class SVGCanvasRenderer {
 		};
 	}
 
+	// Transforms the x and y fields passed in by the current zoom
+	// transformation amounts to convert a canvas coordinate position
+	// to a coordinate position in screen pixels.
+	unTransformPos(pos) {
+		return {
+			x: (pos.x * this.zoomTransform.k) + this.zoomTransform.x,
+			y: (pos.y * this.zoomTransform.k) + this.zoomTransform.y
+		};
+	}
+
 	// Transforms the x, y, height and width fields of the object passed in by the
 	// current zoom transformation amounts to convert coordinate positions and
 	// dimensions in screen pixels to coordinate positions and dimensions in
@@ -851,7 +862,7 @@ export default class SVGCanvasRenderer {
 			.attr("y", this.nodeUtils.getNodeLabelPosY(node))
 			.attr("width", this.nodeUtils.getNodeLabelWidth(node))
 			.attr("height", this.nodeUtils.getNodeLabelHeight(node))
-			.attr("class", this.nodeUtils.getNodeLabelForeignClass(node));
+			.attr("class", "d3-foreign-object-ghost-label");
 
 		const fObjectDiv = fObject
 			.append("xhtml:div")
@@ -1840,6 +1851,7 @@ export default class SVGCanvasRenderer {
 			}
 		} else {
 			this.zoomCanvasBackground(d3Event);
+			this.zoomCommentToolbar();
 		}
 	}
 
@@ -1870,7 +1882,7 @@ export default class SVGCanvasRenderer {
 			this.isSelecting = true;
 
 			// Ensure the link objects in the active pipeline have their coordinate
-			// positions set. The coords might be set if the last object model
+			// positions set. The coords might not be set if the last object model
 			// update was a change in selections or some other operation that does
 			// not redraw link lines.
 			this.buildLinksArray();
@@ -1940,6 +1952,31 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Repositions the comment toolbar so it is always over the top of the
+	// comment being edited.
+	zoomCommentToolbar() {
+		if (this.config.enableMarkdownInComments &&
+				this.dispUtils.isDisplayingFullPage() &&
+				this.svgCanvasTextArea.isEditingText()) {
+			// If a node label or text decoration is being edited com will be undefined.
+			const com = this.activePipeline.getComment(this.svgCanvasTextArea.getEditingTextId());
+			if (com) {
+				const pos = this.getCommentToolbarPos(com);
+				this.canvasController.moveTextToolbar(pos.x, pos.y);
+			}
+		}
+	}
+
+	// Returns a position object that describes the position in page coordinates
+	// of the comment toolbar so that it is positioned above the comment being edited.
+	getCommentToolbarPos(com) {
+		const pos = this.unTransformPos({ x: com.x_pos, y: com.y_pos });
+		return {
+			x: pos.x + this.canvasLayout.commentToolbarPosX,
+			y: pos.y + this.canvasLayout.commentToolbarPosY
+		};
+	}
+
 	// Returns a new zoom which is the result of incrementing the current zoom
 	// by the amount since the previous d3Event transform amount.
 	// We calculate increments because d3Event.transform is not based on
@@ -2545,7 +2582,7 @@ export default class SVGCanvasRenderer {
 		// Node Label
 		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d))
 			.append("foreignObject")
-			.attr("class", "d3-foreign-object")
+			.attr("class", "d3-foreign-object-node-label")
 			.call(this.attachNodeLabelListeners.bind(this))
 			.append("xhtml:div") // Provide a namespace when div is inside foreignObject
 			.append("xhtml:span") // Provide a namespace when span is inside foreignObject
@@ -2588,13 +2625,12 @@ export default class SVGCanvasRenderer {
 			.attr("style", (d) => this.getNodeImageStyle(d, "default"));
 
 		// Node Label
-		joinedNodeGrps.selectChildren(".d3-foreign-object")
+		joinedNodeGrps.selectChildren(".d3-foreign-object-node-label")
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("x", (d) => this.nodeUtils.getNodeLabelPosX(d))
 			.attr("y", (d) => this.nodeUtils.getNodeLabelPosY(d))
 			.attr("width", (d) => this.nodeUtils.getNodeLabelWidth(d))
 			.attr("height", (d) => this.nodeUtils.getNodeLabelHeight(d))
-			.attr("class", (d) => this.nodeUtils.getNodeLabelForeignClass(d))
 			.select("div")
 			.attr("class", (d) => this.nodeUtils.getNodeLabelClass(d))
 			.attr("style", (d) => this.getNodeLabelStyle(d, "default"))
@@ -3332,7 +3368,7 @@ export default class SVGCanvasRenderer {
 			if (labelSel.empty()) {
 				labelSel = decSel
 					.append("foreignObject")
-					.attr("class", this.decUtils.getDecLabelForeignClass(dec))
+					.attr("class", "d3-foreign-object-dec-label")
 					.attr("x", 0)
 					.attr("y", 0)
 					.call(this.attachDecLabelListeners.bind(this, d, objType));
@@ -4487,13 +4523,6 @@ export default class SVGCanvasRenderer {
 		return this.getNodePortIdForElement(portElement);
 	}
 
-	// Returns an element, with the class name passed in, if one exists, at the
-	// position defined by x,y.
-	getElementAtPoint(x, y, className) {
-		const elements = document.elementsFromPoint(x, y);
-		return elements.find((el) => this.isClassNameIncluded(el, className));
-	}
-
 	// Returns a DOM element which either has the classNames passed in or
 	// has an ancestor with the className passed in, at the position
 	// indicated by the clientX and clientY coordinates in the d3Event.
@@ -4510,44 +4539,12 @@ export default class SVGCanvasRenderer {
 		let foundElement = null;
 		let count = 0;
 		while (!foundElement && count < elements.length) {
-			foundElement = this.getParentElementWithClass(elements[count], className);
+			foundElement = CanvasUtils.getParentElementWithClass(elements[count], className);
 			count++;
 		}
 		return foundElement;
 	}
 
-	// Returns the element passed in, or an ancestor of the element, if either
-	// contains the classNames passed in. Otherwise it returns null if the
-	// className cannot be found. For example, if this element is a child of the
-	// node group object and "d3-node-group" is passed in, this function will
-	// find the group element.
-	getParentElementWithClass(element, className) {
-		let el = element;
-		let foundElement = null;
-
-		while (el) {
-			// No need to proceed if we find either of these. Stopping at svg-area
-			// prevents the search transitioning from a sub-flow to a parent flow.
-			if (this.isClassNameIncluded(el, "d3-new-connection-guide") ||
-					this.isClassNameIncluded(el, "svg-area")) {
-				el = null;
-
-			} else if (this.isClassNameIncluded(el, className)) {
-				foundElement = el;
-				el = null;
-			} else {
-				el = el.parentNode;
-			}
-		}
-		return foundElement;
-	}
-
-	// Returns true if the class name passed in is one of the classes assigned
-	// to the element passed in.
-	isClassNameIncluded(el, className) {
-		return el.classList && el.classList.contains(className);
-	}
-
 	// Returns the node link object from the canvasInfo corresponding to the
 	// element passed in provided it is a 'path' DOM object. Returns null if
 	// a link cannot be found.
@@ -5064,7 +5061,7 @@ export default class SVGCanvasRenderer {
 		// Comment Text
 		newCommentGroups
 			.append("foreignObject")
-			.attr("class", "d3-foreign-object")
+			.attr("class", "d3-foreign-object-comment-text")
 			.attr("x", 0)
 			.attr("y", 0)
 			.append("xhtml:div") // Provide a namespace when div is inside foreignObject
@@ -5106,13 +5103,16 @@ export default class SVGCanvasRenderer {
 			.attr("style", (c) => this.getCommentBodyStyle(c, "default"));
 
 		// Comment Text
-		joinedCommentGrps.selectChildren(".d3-foreign-object")
+		joinedCommentGrps.selectChildren(".d3-foreign-object-comment-text")
 			.datum((c) => this.activePipeline.getComment(c.id))
 			.attr("width", (c) => c.width)
 			.attr("height", (c) => c.height)
 			.select("div")
 			.attr("style", (c) => this.getNodeLabelStyle(c, "default"))
-			.html((c) => escapeText(c.content));
+			.html((c) => (
+				this.config.enableMarkdownInComments
+					? markdownIt.render(c.content)
+					: escapeText(c.content)));
 	}
 
 	// Attaches the appropriate listeners to the comment groups.
@@ -5120,7 +5120,7 @@ export default class SVGCanvasRenderer {
 		commentGrps
 			.on("mouseenter", (d3Event, d) => {
 				this.setCommentStyles(d, "hover", d3.select(d3Event.currentTarget));
-				if (this.config.enableEditingActions) {
+				if (this.config.enableEditingActions && d.id !== this.svgCanvasTextArea.getEditingTextId()) {
 					this.createCommentPort(d3Event.currentTarget, d);
 				}
 			})
@@ -5147,6 +5147,7 @@ export default class SVGCanvasRenderer {
 				if (this.config.enableEditingActions) {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 
+					this.deleteCommentPort(d3Event.currentTarget);
 					this.displayCommentTextArea(d, d3Event.currentTarget);
 
 					this.canvasController.clickActionHandler({
@@ -5204,8 +5205,8 @@ export default class SVGCanvasRenderer {
 
 		commentGrp
 			.append("circle")
-			.attr("cx", 0 - this.canvasLayout.commentHighlightGap)
-			.attr("cy", 0 - this.canvasLayout.commentHighlightGap)
+			.attr("cx", (com) => com.width / 2)
+			.attr("cy", (com) => com.height + this.canvasLayout.commentHighlightGap)
 			.attr("r", this.canvasLayout.commentPortRadius)
 			.attr("class", "d3-comment-port-circle")
 			.on("mousedown", (d3Event, cd) => {
@@ -5248,7 +5249,7 @@ export default class SVGCanvasRenderer {
 
 	setCommentTextStyles(d, type, comGrp) {
 		const style = this.getCommentTextStyle(d, type);
-		comGrp.selectChildren(".d3-foreign-object").select("div")
+		comGrp.selectChildren(".d3-foreign-object-comment-text").select("div")
 			.attr("style", style);
 	}
 
@@ -5264,263 +5265,16 @@ export default class SVGCanvasRenderer {
 		return CanvasUtils.getObjectStyle(d, "text", type);
 	}
 
-	displayCommentTextArea(d, parentDomObj) {
-		this.displayTextArea({
-			id: d.id,
-			text: d.content,
-			singleLine: false,
-			maxCharacters: null,
-			allowReturnKey: true,
-			textCanBeEmpty: true,
-			xPos: 0,
-			yPos: 0,
-			width: d.width,
-			height: d.height,
-			className: "d3-comment-entry",
-			parentDomObj: parentDomObj,
-			autoSizeCallback: this.autoSizeComment.bind(this),
-			saveTextChangesCallback: this.saveCommentChanges.bind(this),
-			closeTextAreaCallback: null
-		});
-	}
-
-	autoSizeComment(textArea, foreignObject, data) {
-		this.logger.log("autoSizeComment - textAreaHt = " + this.textAreaHeight + " scroll ht = " + textArea.scrollHeight);
-
-		const scrollHeight = textArea.scrollHeight + SCROLL_PADDING;
-		if (this.textAreaHeight < scrollHeight) {
-			this.textAreaHeight = scrollHeight;
-			foreignObject.style("height", this.textAreaHeight + "px");
-			this.activePipeline.getComment(data.id).height = this.textAreaHeight;
-			this.displayComments();
-			this.displayLinks();
-		}
-	}
-
-	saveCommentChanges(id, newText, newHeight) {
-		const comment = this.activePipeline.getComment(id);
-		const data = {
-			editType: "editComment",
-			editSource: "canvas",
-			id: comment.id,
-			content: newText,
-			width: comment.width,
-			height: newHeight,
-			x_pos: comment.x_pos,
-			y_pos: comment.y_pos,
-			pipelineId: this.activePipeline.id
-		};
-		this.canvasController.editActionHandler(data);
+	displayCommentTextArea(comment, parentDomObj) {
+		this.svgCanvasTextArea.displayCommentTextArea(comment, parentDomObj);
 	}
 
 	displayNodeLabelTextArea(node, parentDomObj) {
-		d3.select(parentDomObj).selectAll("div")
-			.attr("style", "display:none;");
-		this.displayTextArea({
-			id: node.id,
-			text: node.label,
-			singleLine: node.layout.labelSingleLine,
-			maxCharacters: node.layout.labelMaxCharacters,
-			allowReturnKey: node.layout.labelAllowReturnKey,
-			textCanBeEmpty: false,
-			xPos: this.nodeUtils.getNodeLabelTextAreaPosX(node),
-			yPos: this.nodeUtils.getNodeLabelTextAreaPosY(node),
-			width: this.nodeUtils.getNodeLabelTextAreaWidth(node),
-			height: this.nodeUtils.getNodeLabelTextAreaHeight(node),
-			className: this.nodeUtils.getNodeLabelTextAreaClass(node),
-			parentDomObj: parentDomObj,
-			autoSizeCallback: this.autoSizeMultiLineLabel.bind(this),
-			saveTextChangesCallback: this.saveNodeLabelChanges.bind(this),
-			closeTextAreaCallback: this.closeNodeLabelTextArea.bind(this)
-		});
+		this.svgCanvasTextArea.displayNodeLabelTextArea(node, parentDomObj);
 	}
 
-	// Increases the size of the editable multi-line text area for a label based
-	//  on the characters entered, and also ensures the maximum number of
-	//  characters for the label, if one is provided, is not exceeded.
-	// This callback works for editable multi-line node labels and also
-	// editable multi-line text decorations for either nodes or links.
-	autoSizeMultiLineLabel(textArea, foreignObject, data) {
-		this.logger.log("autoSizeNodeLabel - textAreaHt = " + this.textAreaHeight + " scroll ht = " + textArea.scrollHeight);
-
-		// Restrict max characters in case text was pasted in to the text area.
-		if (data.maxCharacters &&
-				textArea.value.length > data.maxCharacters) {
-			textArea.value = textArea.value.substring(0, data.maxCharacters);
-		}
-		// Temporarily set the height to zero so the scrollHeight will get set to
-		// the full height of the text in the textarea. This allows us to close up
-		// the text area when the lines of text reduce.
-		foreignObject.style("height", 0);
-		const scrollHeight = textArea.scrollHeight + SCROLL_PADDING;
-		this.textAreaHeight = scrollHeight;
-		foreignObject.style("height", this.textAreaHeight + "px");
-	}
-
-	saveNodeLabelChanges(id, newText, newHeight, taData) {
-		const data = {
-			editType: "setNodeLabel",
-			editSource: "canvas",
-			nodeId: id,
-			label: newText,
-			pipelineId: this.activePipeline.id
-		};
-		this.canvasController.editActionHandler(data);
-	}
-
-	// Called when the node label text area is closed. Sets the style of the
-	// div for the node label so the label is displayed (because it was hidden
-	// when the text area opened).
-	closeNodeLabelTextArea(nodeId) {
-		this.getNodeGroupSelectionById(nodeId)
-			.selectAll("div")
-			.attr("style", null);
-	}
-
-	// Displays a text area for an editable text decoration on either a node
-	// or link.
 	displayDecLabelTextArea(dec, obj, objType, parentDomObj) {
-		this.displayTextArea({
-			id: dec.id,
-			text: dec.label,
-			singleLine: dec.label_single_line || true,
-			maxCharacters: dec.label_max_characters || null,
-			allowReturnKey: dec.label_allow_return_key || false,
-			textCanBeEmpty: false,
-			xPos: this.decUtils.getDecLabelTextAreaPosX(),
-			yPos: this.decUtils.getDecLabelTextAreaPosY(),
-			width: this.decUtils.getDecLabelTextAreaWidth(dec, obj, objType),
-			height: this.decUtils.getDecLabelTextAreaHeight(dec, obj, objType),
-			className: this.decUtils.getDecLabelTextAreaClass(dec),
-			parentDomObj: parentDomObj,
-			objId: obj.id,
-			objType: objType,
-			autoSizeCallback: this.autoSizeMultiLineLabel.bind(this),
-			saveTextChangesCallback: this.saveDecLabelChanges.bind(this),
-			closeTextAreaCallback: null
-		});
-	}
-
-	// Handles saved changes to editable text decorations.
-	saveDecLabelChanges(id, newText, newHeight, taData) {
-		const data = {
-			editType: "editDecorationLabel",
-			editSource: "canvas",
-			decId: id,
-			objId: taData.objId,
-			objType: taData.objType,
-			label: newText,
-			pipelineId: this.activePipeline.id
-		};
-		this.canvasController.editActionHandler(data);
-	}
-
-	// Displays a text area to allow text entry and editing for: comments;
-	// node labels; or text decorations on either a node or link.
-	displayTextArea(data) {
-		const that = this;
-
-		this.textAreaHeight = data.height; // Save for comparison during auto-resize
-		this.editingText = true;
-		this.editingTextId = data.id;
-
-		const foreignObject = d3.select(data.parentDomObj)
-			.append("foreignObject")
-			.attr("class", "d3-foreign-object")
-			.attr("width", data.width)
-			.attr("height", data.height)
-			.attr("x", data.xPos)
-			.attr("y", data.yPos);
-
-		const textArea = foreignObject
-			.append("xhtml:textarea")
-			.attr("class", data.className)
-			.text(unescapeText(data.text))
-			.on("keydown", function(d3Event) {
-				// Don't accept return key press when text is all on one line or
-				// if application doesn't want line feeds inserted in the label.
-				if ((data.singleLine || !data.allowReturnKey) &&
-						d3Event.keyCode === RETURN_KEY) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-				}
-				if (d3Event.keyCode === ESC_KEY) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					that.textAreaEscKeyPressed = true;
-					that.closeTextArea(foreignObject, data);
-				}
-				if (data.maxCharacters &&
-						this.value.length >= data.maxCharacters &&
-						!that.textAreaAllowedKeys(d3Event)) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-				}
-			})
-			.on("keyup", function(d3Event) {
-				data.autoSizeCallback(this, foreignObject, data);
-			})
-			.on("paste", function() {
-				that.logger.log("Text area - Paste - Scroll Ht = " + this.scrollHeight);
-				// Allow some time for pasted text (from context menu) to be
-				// loaded into the text area. Otherwise the text is not there
-				// and the auto size does not increase the height correctly.
-				setTimeout(data.autoSizeCallback, 500, this, foreignObject, data);
-			})
-			.on("blur", function(d3Event, d) {
-				that.logger.log("Text area - blur");
-				// If the esc key was pressed to cause the blur event just return
-				// so label returns to what it was before editing started.
-				if (that.textAreaEscKeyPressed) {
-					that.textAreaEscKeyPressed = false;
-					return;
-				}
-				// If there is no text for the label and textCanBeEmpty is false
-				// just return so label returns to what it was before editing started.
-				if (!this.value && !data.textCanBeEmpty) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					that.closeTextArea(foreignObject, data);
-					return;
-				}
-				const newText = this.value; // Save the text before closing the foreign object
-				that.closeTextArea(foreignObject, data);
-				if (data.text !== newText) {
-					that.isCommentBeingUpdated = true;
-					data.saveTextChangesCallback(data.id, newText, that.textAreaHeight, data);
-					that.isCommentBeingUpdatd = false;
-				}
-			})
-			.on("focus", function(d3Event, d) {
-				that.logger.log("Text area - focus");
-				data.autoSizeCallback(this, foreignObject, data);
-			})
-			.on("mousedown click dblclick contextmenu", (d3Event, d) => {
-				d3Event.stopPropagation(); // Allow default behavior to show system contenxt menu
-			});
-
-		textArea.node().focus();
-
-		// Set the cusrsor to the end of the text.
-		textArea.node().setSelectionRange(data.text.length, data.text.length);
-	}
-
-	// Closes the text area and resets the flags.
-	closeTextArea(foreignObject, data) {
-		if (data.closeTextAreaCallback) {
-			data.closeTextAreaCallback(data.id);
-		}
-		foreignObject.remove();
-		this.editingText = false;
-		this.editingTextId = "";
-	}
-
-	// Returns true if one of the keys that are allowed in the text area, when
-	// checking for maximum characters, has been pressed.
-	textAreaAllowedKeys(d3Event) {
-		return d3Event.keyCode === DELETE_KEY ||
-			d3Event.keyCode === BACKSPACE_KEY ||
-			d3Event.keyCode === LEFT_ARROW_KEY ||
-			d3Event.keyCode === RIGHT_ARROW_KEY ||
-			d3Event.keyCode === UP_ARROW_KEY ||
-			d3Event.keyCode === DOWN_ARROW_KEY ||
-			(d3Event.keyCode === A_KEY && CanvasUtils.isCmndCtrlPressed(d3Event));
+		this.svgCanvasTextArea.displayDecLabelTextArea(dec, obj, objType, parentDomObj);
 	}
 
 	// Adds a rectangle over the top of the canvas which is used to display a
@@ -5840,8 +5594,8 @@ export default class SVGCanvasRenderer {
 			});
 		}
 		this.nodeSizing = false;
-		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingDetLinksInfo = [];
+		this.nodeSizingObjectsInfo = {};
+		this.nodeSizingDetLinksInfo = {};
 	}
 
 	// Finalises the sizing of a comment by calling editActionHandler
@@ -6270,9 +6024,7 @@ export default class SVGCanvasRenderer {
 		return "d3-node-group" + supernodeClass + draggableClass + customClass;
 	}
 
-	// Pushes the links to be below nodes and then pushes comments to be below
-	// nodes and links. This lets the user put a large comment underneath a set
-	// of nodes and links for annotation purposes.
+	// Pushes the links to be below nodes within the nodesLinksGrp group.
 	setDisplayOrder(linkGroup) {
 		// Force those links without decorations to be behind those with decorations
 		// in case the links overlap we don't want the decorations to be overwritten.
@@ -6744,9 +6496,9 @@ export default class SVGCanvasRenderer {
 				});
 			});
 
-			// For NORTH and SOUTH links we sort linksDirArray by the x co-ordinate
+			// For NORTH and SOUTH links we sort linksDirArray by the x coordinate
 			// of the end of each link. For EAST and WEST we sort by the y
-			// co-ordinate.
+			// coordinate.
 			if (dir === NORTH || dir === SOUTH) {
 				linksDirArray = linksDirArray.sort((a, b) => (a.x > b.x ? 1 : -1));
 			} else {
@@ -6921,16 +6673,16 @@ export default class SVGCanvasRenderer {
 	// This is used when a new comment is created from the toolbar to make sure the
 	// new comment always appears in the view port.
 	getSvgViewportOffset() {
-		let xPos = this.canvasLayout.addCommentOffset;
-		let yPos = this.canvasLayout.addCommentOffset;
+		let xPos = this.canvasLayout.addCommentOffsetX;
+		let yPos = this.canvasLayout.addCommentOffsetY;
 
 		if (this.zoomTransform) {
 			xPos = this.zoomTransform.x / this.zoomTransform.k;
 			yPos = this.zoomTransform.y / this.zoomTransform.k;
 
 			// The window's viewport is in the opposite direction of zoomTransform
-			xPos = -xPos + this.canvasLayout.addCommentOffset;
-			yPos = -yPos + this.canvasLayout.addCommentOffset;
+			xPos = -xPos + this.canvasLayout.addCommentOffsetX;
+			yPos = -yPos + this.canvasLayout.addCommentOffsetY;
 		}
 
 		return {

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

@@ -30,11 +30,6 @@ export default class SvgCanvasDecs {
 		return null;
 	}
 
-	getDecLabelForeignClass(dec) {
-		const outlineClass = dec.label_outline ? " d3-node-label-outline" : "";
-		return "d3-foreign-object" + outlineClass;
-	}
-
 	getDecLabelClass(dec, objType) {
 		const lineTypeClass = dec.label_single_line ? " d3-label-single-line" : " d3-label-multi-line";
 		const justificationClass = dec.label_align === "center" ? " d3-label-center" : "";