@elyra/canvas 12.12.3 → 12.15.0

package/locales/toolbar/locales/es.json

@@ -1,8 +1,8 @@
 {
-	"toolbar.label": "Barra de herramientas del lienzo",
-	"toolbar.overflowMenu": "Menú de desbordamiento",
-	"toolbar.palette": "Paleta",
-	"toolbar.zoomIn": "Acercar",
-	"toolbar.zoomOut": "Alejar",
-	"toolbar.zoomToFit": "Ajustar"
-}
+  "toolbar.palette": "Paleta",
+  "toolbar.zoomIn": "Aumentar",
+  "toolbar.zoomOut": "Alejar",
+  "toolbar.zoomToFit": "Ajustar",
+  "toolbar.overflowMenu": "Menú de desbordamiento",
+  "toolbar.label": "Barra de herramientas del lienzo"
+}

package/locales/toolbar/locales/fr.json

@@ -1,8 +1,8 @@
 {
-	"toolbar.label": "Barre d'outils de canevas",
-	"toolbar.overflowMenu": "Menu déroulant dynamique",
-	"toolbar.palette": "Palette",
-	"toolbar.zoomIn": "Zoom avant",
-	"toolbar.zoomOut": "Zoom arrière",
-	"toolbar.zoomToFit": "Zoom d'ajustement"
-}
+  "toolbar.palette": "Palette",
+  "toolbar.zoomIn": "Zoom avant",
+  "toolbar.zoomOut": "Zoom arrière",
+  "toolbar.zoomToFit": "Zoom d'ajustement",
+  "toolbar.overflowMenu": "Menu déroulant dynamique",
+  "toolbar.label": "Barre d'outils de canevas"
+}

package/locales/toolbar/locales/index.js

@@ -20,8 +20,8 @@ const fr = require("./fr.json");
 const itIT = require("./it.json");
 const ja = require("./ja.json");
 const ptBR = require("./pt-br.json");
-const zhTW = require("./zh-tw.json");
-const zhCN = require("./zh-cn.json");
+const zhTW = require("./zh-TW.json");
+const zhCN = require("./zh-CN.json");
 const ru = require("./ru.json");
 const eo = require("./eo.json");
 const ko = require("./ko.json");

package/locales/toolbar/locales/it.json

@@ -1,8 +1,8 @@
 {
-	"toolbar.label": "Barra degli strumenti area di disegno",
-	"toolbar.overflowMenu": "Menu overflow",
-	"toolbar.palette": "Tavolozza",
-	"toolbar.zoomIn": "Zoom avanti",
-	"toolbar.zoomOut": "Zoom indietro",
-	"toolbar.zoomToFit": "Adatta zoom"
-}
+  "toolbar.palette": "Tavolozza",
+  "toolbar.zoomIn": "Zoom avanti",
+  "toolbar.zoomOut": "Zoom indietro",
+  "toolbar.zoomToFit": "Adatta zoom",
+  "toolbar.overflowMenu": "Menu Overflow",
+  "toolbar.label": "Barra degli strumenti area di disegno"
+}

package/locales/toolbar/locales/ja.json

@@ -1,8 +1,8 @@
 {
-	"toolbar.label": "キャンバス・ツールバー",
-	"toolbar.overflowMenu": "オーバーフロー・メニュー",
-	"toolbar.palette": "パレット",
-	"toolbar.zoomIn": "ズームイン",
-	"toolbar.zoomOut": "ズームアウト",
-	"toolbar.zoomToFit": "適合ズーム"
-}
+  "toolbar.palette": "パレット",
+  "toolbar.zoomIn": "ズームイン",
+  "toolbar.zoomOut": "ズームアウト",
+  "toolbar.zoomToFit": "適合ズーム",
+  "toolbar.overflowMenu": "オーバーフロー・メニュー",
+  "toolbar.label": "キャンバス・ツールバー"
+}

package/locales/toolbar/locales/pt-br.json

@@ -1,8 +1,8 @@
 {
-	"toolbar.label": "Barra de ferramentas da tela",
-	"toolbar.overflowMenu": "Menu overflow",
-	"toolbar.palette": "Paleta",
-	"toolbar.zoomIn": "Aumentar zoom",
-	"toolbar.zoomOut": "Reduzir zoom",
-	"toolbar.zoomToFit": "Zoom para ajustar"
-}
+  "toolbar.palette": "Paleta",
+  "toolbar.zoomIn": "Aumentar zoom",
+  "toolbar.zoomOut": "Diminuir zoom",
+  "toolbar.zoomToFit": "Zoom para ajustar",
+  "toolbar.overflowMenu": "Menu overflow",
+  "toolbar.label": "Barra de ferramentas de tela"
+}

package/locales/toolbar/locales/zh-CN.json

@@ -0,0 +1,8 @@
+{
+  "toolbar.palette": "选用板",
+  "toolbar.zoomIn": "放大",
+  "toolbar.zoomOut": "缩小",
+  "toolbar.zoomToFit": "缩放至适当大小",
+  "toolbar.overflowMenu": "溢出菜单",
+  "toolbar.label": "画布工具栏"
+}

package/locales/toolbar/locales/zh-TW.json

@@ -0,0 +1,8 @@
+{
+  "toolbar.palette": "選用區",
+  "toolbar.zoomIn": "放大",
+  "toolbar.zoomOut": "縮小",
+  "toolbar.zoomToFit": "適當縮放",
+  "toolbar.overflowMenu": "溢位功能表",
+  "toolbar.label": "畫布工具列"
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.12.3",
+  "version": "12.15.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
   "homepage": "https://github.com/elyra-ai/canvas",
   "repository": {
     "type": "git",
-    "url": "https://github.com/elyra-ai/canvas/tree/master/canvas_modules/common-canvas"
+    "url": "https://github.com/elyra-ai/canvas/tree/main/canvas_modules/common-canvas"
   },
   "bugs": {
     "url": "https://github.com/elyra-ai/canvas/issues"
@@ -31,6 +31,7 @@
     "immutable": "^4.0.0",
     "jsonschema": "^1.4.0",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
     "prop-types": "^15.7.2",
     "react-codemirror2": "^7.2.1",
     "react-contextmenu": "^2.14.0",

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

@@ -406,7 +406,7 @@ export default class CanvasController {
 	// nodeTypeObj - must conform to the style of node used by the palette as
 	// described in the palette schema. See objects in nodeTypes array in the
 	// palette schema:
-	//  https://github.com/elyra-ai/pipeline-schemas/blob/master/common-canvas/palette/palette-v3-schema.json
+	//  https://github.com/elyra-ai/pipeline-schemas/blob/main/common-canvas/palette/palette-v3-schema.json
 	// category - is the name of the palette category where the node will be
 	// added. If the category doesn't exist it will be created.
 	// categoryLabel - Is an optional param. If a new category is created it will
@@ -423,7 +423,7 @@ export default class CanvasController {
 	// nodeTypeObjs - an array of nodetypes that must conform to the style of
 	// nodes used by the palette as described in the palette schema. See objects
 	// in nodeTypes array in the palette schema:
-	//  https://github.com/elyra-ai/pipeline-schemas/blob/master/common-canvas/palette/palette-v3-schema.json
+	//  https://github.com/elyra-ai/pipeline-schemas/blob/main/common-canvas/palette/palette-v3-schema.json
 	// category - is the name of the palette category where the node will be
 	// added. If the category doesn't exist it will be created.
 	// categoryLabel - is an optional param. If a new category is created it will
@@ -545,7 +545,7 @@ export default class CanvasController {
 		return this.objectModel.areSelectedNodesContiguous();
 	}
 
-	// Returns true if all the selected objcts are links.
+	// Returns true if all the selected objects are links.
 	areAllSelectedObjectsLinks() {
 		return this.objectModel.areAllSelectedObjectsLinks();
 	}
@@ -1405,6 +1405,10 @@ export default class CanvasController {
 		return this.getObjectModel().isBottomPanelOpen();
 	}
 
+	setBottomPanelHeight(ht) {
+		this.objectModel.setBottomPanelHeight(ht);
+	}
+
 	closeContextMenu() {
 		this.objectModel.closeContextMenu();
 	}
@@ -1776,6 +1780,18 @@ export default class CanvasController {
 		}
 	}
 
+	openTextToolbar(xPos, yPos, actionHandler, blurHandler) {
+		this.objectModel.setTextToolbarDef({ isOpen: true, pos_x: xPos, pos_y: yPos, actionHandler, blurHandler });
+	}
+
+	closeTextToolbar() {
+		this.objectModel.setTextToolbarDef({ isOpen: false });
+	}
+
+	moveTextToolbar(xPos, yPos) {
+		this.objectModel.setTextToolbarDef({ pos_x: xPos, pos_y: yPos });
+	}
+
 	// Processes the drop of an 'external' object, either from the desktop or
 	// elsewhere on the browser page, onto the canvas.
 	// dropData - The data describing the object being dropped

package/src/common-canvas/cc-bottom-panel.jsx

@@ -19,14 +19,13 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Logger from "../logging/canvas-logger.js";
 
+const MARGIN_TOP = 100;
+const MIN_HEIGHT = 75;
+
 class CanvasBottomPanel extends React.Component {
 	constructor(props) {
 		super(props);
 
-		this.state = {
-			panelHeight: 393
-		};
-
 		this.logger = new Logger("CC-Bottom-Panel");
 
 		this.onMouseUp = this.onMouseUp.bind(this);
@@ -38,7 +37,10 @@ class CanvasBottomPanel extends React.Component {
 		if (e.button === 0) {
 			document.addEventListener("mousemove", this.onMouseMoveY, true);
 			document.addEventListener("mouseup", this.onMouseUp, true);
-			this.poseY = e.clientY;
+			this.posY = e.clientY;
+			// Prevent panel contents being dragged in the test harness (which can
+			// happen even though draggable is false for the contents!)
+			e.preventDefault();
 		}
 	}
 
@@ -49,29 +51,37 @@ class CanvasBottomPanel extends React.Component {
 
 	onMouseMoveY(e) {
 		if (e.clientY) {
-			const diff = e.clientY - this.poseY;
-			this.setState({
-				panelHeight: this.state.panelHeight - diff
-			});
-			this.poseY = e.clientY;
+			const diff = e.clientY - this.posY;
+			const ht = this.props.panelHeight - diff;
+			this.props.canvasController.setBottomPanelHeight(this.limitHeight(ht));
+			this.posY = e.clientY;
+		}
+	}
+
+	// Returns a new height for the bottom panel limited by the need to enforce
+	// a minimum and maximum height.
+	limitHeight(ht) {
+		const canvasContainer = document.getElementById(this.props.containingDivId);
+		let height = ht;
+
+		// canvasContainer may not be available in some test situations
+		if (canvasContainer) {
+			const canvasHeight = canvasContainer.getBoundingClientRect().height;
+			const maxHeight = canvasHeight - MARGIN_TOP;
+			height = Math.min(Math.max(height, MIN_HEIGHT), maxHeight);
 		}
+		return height;
 	}
+
 	render() {
 		this.logger.log("render");
 		let bottomPanel = null;
 
 		if (this.props.bottomPanelIsOpen) {
-			const canvasContainer = document.querySelector(".common-canvas-drop-div");
-			const rectHeight = canvasContainer
-				? canvasContainer.getBoundingClientRect().height
-				: 0;
-			const marginTop = 60;
-			const height = this.state.panelHeight >= (rectHeight - marginTop)
-				? (rectHeight - marginTop)
-				: this.state.panelHeight;
+			const heightPx = this.limitHeight(this.props.panelHeight) + "px";
 
 			bottomPanel = (
-				<div className="bottom-panel" style={{ height }} >
+				<div className="bottom-panel" style={{ height: heightPx }} >
 					<div className="bottom-panel-drag" onMouseDown={this.onMouseDown} />
 					<div className="bottom-panel-contents">
 						{this.props.bottomPanelContent}
@@ -85,13 +95,19 @@ class CanvasBottomPanel extends React.Component {
 }
 
 CanvasBottomPanel.propTypes = {
+	// Provided by CommonCanvas
+	canvasController: PropTypes.object,
+	containingDivId: PropTypes.string,
+
 	// Provided by Redux
 	bottomPanelIsOpen: PropTypes.bool,
-	bottomPanelContent: PropTypes.object
+	bottomPanelContent: PropTypes.object,
+	panelHeight: PropTypes.number
 };
 
 const mapStateToProps = (state, ownProps) => ({
 	bottomPanelIsOpen: state.bottompanel.isOpen,
-	bottomPanelContent: state.bottompanel.content
+	bottomPanelContent: state.bottompanel.content,
+	panelHeight: state.bottompanel.panelHeight
 });
 export default connect(mapStateToProps)(CanvasBottomPanel);

package/src/common-canvas/cc-central-items.jsx

@@ -37,7 +37,7 @@ class CommonCanvasCentralItems extends React.Component {
 		const canvasToolbar = (<CommonCanvasToolbar canvasController={this.props.canvasController} />);
 		const notificationPanel = (<NotificationPanel canvasController={this.props.canvasController} />);
 		const canvasContents = (<CanvasContents canvasController={this.props.canvasController} />);
-		const bottomPanel = (<CanvasBottomPanel canvasController={this.props.canvasController} />);
+		const bottomPanel = (<CanvasBottomPanel canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
 
 		let centralItems = null;
 		if (this.props.enableRightFlyoutUnderToolbar) {

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

@@ -23,6 +23,7 @@ import { connect } from "react-redux";
 import { injectIntl } from "react-intl";
 import defaultMessages from "../../locales/common-canvas/locales/en.json";
 import CommonCanvasContextMenu from "./cc-context-menu.jsx";
+import CommonCanvasTextToolbar from "./cc-text-toolbar.jsx";
 import CommonCanvasStateTag from "./cc-state-tag.jsx";
 import CanvasUtils from "./common-canvas-utils.js";
 import { FlowData16 } from "@carbon/icons-react";
@@ -305,6 +306,13 @@ class CanvasContents extends React.Component {
 			/>);
 	}
 
+	getTextToolbar() {
+		return (
+			<CommonCanvasTextToolbar
+				canvasController={this.props.canvasController}
+			/>);
+	}
+
 	getDropZone() {
 		let dropZoneCanvas = null;
 		if (this.isDropZoneDisplayed()) {
@@ -416,9 +424,6 @@ class CanvasContents extends React.Component {
 			}
 			this.svgCanvasD3.externalObjectDropped(dropData, event.clientX, event.clientY);
 		}
-
-		// Also clear dataTransfer data for when we get external objects.
-		event.dataTransfer.clearData();
 	}
 
 	dragOver(event) {
@@ -485,6 +490,7 @@ class CanvasContents extends React.Component {
 		const stateTag = this.getStateTag();
 		const emptyCanvas = this.getEmptyCanvas();
 		const contextMenu = this.getContextMenu();
+		const textToolbar = this.getTextToolbar();
 		const dropZoneCanvas = this.getDropZone();
 		const svgCanvasDiv = this.getSVGCanvasDiv();
 
@@ -518,6 +524,7 @@ class CanvasContents extends React.Component {
 						{emptyCanvas}
 						{svgCanvasDiv}
 						{contextMenu}
+						{textToolbar}
 						{dropZoneCanvas}
 						{stateTag}
 					</div>

package/src/common-canvas/cc-text-toolbar.jsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { injectIntl } from "react-intl";
+import defaultMessages from "../../locales/common-canvas/locales/en.json";
+import defaultToolbarMessages from "../../locales/toolbar/locales/en.json";
+import Toolbar from "../toolbar/toolbar.jsx";
+import CanvasUtils from "../common-canvas/common-canvas-utils.js";
+import Logger from "../logging/canvas-logger.js";
+import { OverflowMenu, OverflowMenuItem } from "carbon-components-react";
+import { Code32, Link32, ListBulleted32, ListNumbered32, TextIndentMore32,
+	TextBold32, TextItalic32, TextScale32, TextStrikethrough32 } from "@carbon/icons-react";
+
+class CommonCanvasTextToolbar extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.getLabel = this.getLabel.bind(this);
+		this.logger = new Logger("CC-Toolbar");
+	}
+
+	getLabel(labelId, substituteObj) {
+		const defaultMessage = defaultMessages[labelId] ? defaultMessages[labelId] : defaultToolbarMessages[labelId];
+		return this.props.intl.formatMessage({ id: labelId, defaultMessage: defaultMessage }, substituteObj);
+	}
+
+	getJsxLabel(key, shortcutSuffix, shortcutSuffix2) {
+		const osKey = CanvasUtils.isMacintosh() ? "⌘" : "Ctrl";
+		const shortCut = shortcutSuffix ? (osKey + " + " + shortcutSuffix) : null;
+		const shortCut2 = shortcutSuffix2 ? (osKey + " + " + shortcutSuffix2) : null;
+		return (
+			<div>
+				{this.getLabel(key)}<br />{shortCut}<br />{shortCut2}
+			</div>
+		);
+	}
+
+	getTextToolbar() {
+		const headerLabel = this.getJsxLabel("texttoolbar.headerAction", ">", "<");
+		const boldLabel = this.getJsxLabel("texttoolbar.boldAction", "b");
+		const italicsLabel = this.getJsxLabel("texttoolbar.italicsAction", "i");
+		const strikethroughLabel = this.getJsxLabel("texttoolbar.strikethroughAction", "shift + x");
+		const codeLabel = this.getJsxLabel("texttoolbar.codeAction", "e");
+		const linkLabel = this.getJsxLabel("texttoolbar.linkAction", "k");
+		const quoteLabel = this.getJsxLabel("texttoolbar.quoteAction", "shift + >");
+		const numberedListLabel = this.getJsxLabel("texttoolbar.numberedListAction", "shift + 7");
+		const bulletedListLabel = this.getJsxLabel("texttoolbar.bulletedListAction", "shift + 8");
+		const headerOptions = (
+			<div>
+				<OverflowMenu id={"headerMenu"} iconDescription={""} renderIcon={TextScale32} >
+					<OverflowMenuItem itemText={this.getLabel("texttoolbar.titleAction")} onClick={(evt) => this.props.actionHandler("title", evt)} />
+					<OverflowMenuItem itemText={this.getLabel("texttoolbar.headerAction")} onClick={(evt) => this.props.actionHandler("header", evt)} />
+					<OverflowMenuItem itemText={this.getLabel("texttoolbar.subheaderAction")} onClick={(evt) => this.props.actionHandler("subheader", evt)} />
+					<OverflowMenuItem itemText={this.getLabel("texttoolbar.bodyAction")} onClick={(evt) => this.props.actionHandler("body", evt)} />
+				</OverflowMenu>
+				<svg className="text-toolbar-tick-svg">
+					<path d="M 39 39 L 39 33 33 39 Z" className="text-toolbar-tick-mark" />
+				</svg>
+			</div>
+		);
+
+		return {
+			leftBar: [
+				{ action: "header", tooltip: headerLabel, jsx: headerOptions },
+				{ divider: true },
+				{ action: "bold", label: boldLabel, enable: true, iconEnabled: (<TextBold32 />) },
+				{ action: "italics", label: italicsLabel, enable: true, iconEnabled: (<TextItalic32 />) },
+				{ action: "strikethrough", label: strikethroughLabel, enable: true, iconEnabled: (<TextStrikethrough32 />) },
+				{ divider: true },
+				{ action: "code", label: codeLabel, enable: true, iconEnabled: (<Code32 />) },
+				{ divider: true },
+				{ action: "link", label: linkLabel, enable: true, iconEnabled: (<Link32 />) },
+				{ divider: true },
+				{ action: "quote", label: quoteLabel, enable: true, iconEnabled: (<TextIndentMore32 />) },
+				{ divider: true },
+				{ action: "numberedList", label: numberedListLabel, enable: true, iconEnabled: (<ListNumbered32 />) },
+				{ action: "bulletedList", label: bulletedListLabel, enable: true, iconEnabled: (<ListBulleted32 />) }
+			]
+		};
+	}
+
+	render() {
+		this.logger.log("render");
+
+		let textToolbar = null;
+
+		if (this.props.isOpen) {
+			textToolbar = (
+				<div className={"text-toolbar"} style={{ left: this.props.pos_x, top: this.props.pos_y }} onBlur={this.props.blurHandler}>
+					<Toolbar
+						config={this.getTextToolbar()}
+						instanceId={this.props.canvasController.getInstanceId()}
+						toolbarActionHandler={this.props.actionHandler}
+						tooltipDirection={"top"}
+					/>
+				</div>
+			);
+		}
+
+		return textToolbar;
+	}
+}
+
+CommonCanvasTextToolbar.propTypes = {
+	// Provided by CommonCanvas
+	intl: PropTypes.object.isRequired,
+	canvasController: PropTypes.object.isRequired,
+
+	// Provided by redux
+	isOpen: PropTypes.bool.isRequired,
+	pos_x: PropTypes.number,
+	pos_y: PropTypes.number,
+	actionHandler: PropTypes.func,
+	blurHandler: PropTypes.func
+};
+
+const mapStateToProps = (state, ownProps) => ({
+	isOpen: state.texttoolbar.isOpen,
+	pos_x: state.texttoolbar.pos_x,
+	pos_y: state.texttoolbar.pos_y,
+	actionHandler: state.texttoolbar.actionHandler,
+	blurHandler: state.texttoolbar.blurHandler
+});
+
+export default connect(mapStateToProps)(injectIntl(CommonCanvasTextToolbar));

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

@@ -272,12 +272,14 @@ class CommonCanvasToolbar extends React.Component {
 
 		if (this.props.enableToolbarLayout === TOOLBAR_LAYOUT_TOP) {
 			canvasToolbar = (
-				<Toolbar
-					config={toolbarConfig}
-					instanceId={this.props.canvasController.getInstanceId()}
-					toolbarActionHandler={this.toolbarActionHandler}
-					additionalText={{ overflowMenuLabel: this.getLabel("toolbar.overflowMenu") }}
-				/>
+				<section aria-label={this.getLabel("toolbar.label")} role="toolbar">
+					<Toolbar
+						config={toolbarConfig}
+						instanceId={this.props.canvasController.getInstanceId()}
+						toolbarActionHandler={this.toolbarActionHandler}
+						additionalText={{ overflowMenuLabel: this.getLabel("toolbar.overflowMenu") }}
+					/>
+				</section>
 			);
 		}
 

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

@@ -27,7 +27,7 @@ import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK,
 export default class CanvasUtils {
 
 	static getObjectPositions(objects) {
-		const objectPositions = [];
+		const objectPositions = {};
 		objects.forEach((obj) => {
 			objectPositions[obj.id] = { x_pos: obj.x_pos, y_pos: obj.y_pos };
 		});
@@ -35,7 +35,7 @@ export default class CanvasUtils {
 	}
 
 	static getLinkPositions(links) {
-		const positions = [];
+		const positions = {};
 		links.forEach((l) => {
 			if (l.srcPos) {
 				set(positions[l.id], "srcPos.x_pos", l.srcPos.x_pos);
@@ -53,7 +53,7 @@ export default class CanvasUtils {
 	}
 
 	static moveSurroundingObjects(supernode, objects, nodeSizingDirection, newWidth, newHeight, updateNodePos) {
-		const newObjectPositions = [];
+		const newObjectPositions = {};
 		const incWidth = newWidth - supernode.width;
 		const incHeight = newHeight - supernode.height;
 		const superCenterX = supernode.x_pos + (supernode.width / 2);
@@ -88,7 +88,7 @@ export default class CanvasUtils {
 	}
 
 	static moveSurroundingDetachedLinks(supernode, links, nodeSizingDirection, newWidth, newHeight, updateLinkPos) {
-		const newLinkPositions = [];
+		const newLinkPositions = {};
 		const incWidth = newWidth - supernode.width;
 		const incHeight = newHeight - supernode.height;
 		const superCenterX = supernode.x_pos + (supernode.width / 2);
@@ -1186,4 +1186,37 @@ export default class CanvasUtils {
 		}
 		return null;
 	}
+
+	// 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.
+	static 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.
+	static isClassNameIncluded(el, className) {
+		return el.classList && el.classList.contains(className);
+	}
+
 }