@elyra/canvas 13.43.2 → 13.44.0

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@elyra/canvas",
-  "version": "13.43.2",
+  "version": "13.44.0",
   "description": "Elyra common-canvas",
-  "main": "dist/common-canvas.js",
-  "module": "dist/common-canvas.es.js",
+  "main": "dist/common-canvas.cjs",
+  "module": "dist/common-canvas.js",
   "exports": {
     ".": {
-      "import": "./dist/common-canvas.es.js",
-      "require": "./dist/common-canvas.js",
-      "types": "./types/index.d.ts"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/common-canvas.js"
+      },
+      "require": {
+        "types": "./types/index.d.cts",
+        "default": "./dist/common-canvas.cjs"
+      }
     },
     "./src/*": "./src/*",
     "./locales/*/locales": "./locales/*/locales/index.js",
@@ -24,6 +29,7 @@
   },
   "license": "Apache-2.0",
   "sideEffects": false,
+  "type": "module",
   "types": "./types/index.d.ts",
   "scripts": {
     "build": "npx stylelint '**/*.scss' && grunt && rollup -c",

package/rollup.config.js

@@ -42,14 +42,14 @@ export default {
 	},
 	output: [
 		{
-			entryFileNames: "[name].js",
+			entryFileNames: "[name].cjs",
 			dir: "./dist",
 			format: "cjs",
 			sourcemap: true,
 			exports: "auto"
 		},
 		{
-			entryFileNames: "[name].[format].js",
+			entryFileNames: "[name].js",
 			dir: "./dist",
 			format: "esm",
 			sourcemap: true

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

@@ -1353,6 +1353,14 @@ export default class CanvasController {
 		this.objectModel.getAPIPipeline(pipelineId).setLinkProperties(linkId, properties);
 	}
 
+	// Sets the link parameters
+	// linkId - The ID of the link
+	// parameters - An array of parameters
+	// pipelineId - The ID of the pipeline
+	setLinkParameters(linkId, parameters, pipelineId) {
+		this.objectModel.getAPIPipeline(pipelineId).setLinkParameters(linkId, parameters);
+	}
+
 	// Sets the source properties in the data link identified by the linkId. The
 	// srcNodeId and srcNodePortId will be set to the values provided. If
 	// srcNodePortId is set to null the current srcNodePortId will be removed

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

@@ -1913,7 +1913,7 @@ export default class SVGCanvasRenderer {
 		// Node Body
 		nonBindingNodeGrps
 			.selectChildren(".d3-node-body-outline")
-			.data((d) => (d.layout.nodeShapeDisplay ? [d] : []), (d) => d.id)
+			.data((d) => (d.layout.nodeShapeDisplay || CanvasUtils.isExpandedSupernode(d) ? [d] : []), (d) => d.id)
 			.join(
 				(enter) =>
 					enter
@@ -4724,20 +4724,26 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayLinksSubset(selection, linksArray) {
-		selection
-			.data(linksArray, (link) => link.id)
-			.join(
-				(enter) => this.createLinks(enter)
-			)
-			.attr("class", (d) => this.getLinkGroupClass(d))
-			.attr("tabindex", -1)
-			.attr("style", (d) => this.getLinkGrpStyle(d))
-			.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? true : null))
-			.attr("aria-label", (d) => CanvasUtils.getLinkAriaLabel(d, this.canvasController.labelUtil))
-			.attr("aria-roledescription", this.canvasController.labelUtil.getLabel("link.ariaRoleDescription"))
-			.call((joinedLinkGrps) => {
-				this.updateLinks(joinedLinkGrps, linksArray);
-			});
+		// The D3 join operation can sometimes cause focus to be lost from any
+		// currently focused object involved in the join (even if no new objects
+		// have been created or if no objects are removed) so we preserve and
+		// reinstate the focus after this operation is complete.
+		this.preserveFocus(() => {
+			selection
+				.data(linksArray, (link) => link.id)
+				.join(
+					(enter) => this.createLinks(enter)
+				)
+				.attr("class", (d) => this.getLinkGroupClass(d))
+				.attr("tabindex", -1)
+				.attr("style", (d) => this.getLinkGrpStyle(d))
+				.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? true : null))
+				.attr("aria-label", (d) => CanvasUtils.getLinkAriaLabel(d, this.canvasController.labelUtil))
+				.attr("aria-roledescription", this.canvasController.labelUtil.getLabel("link.ariaRoleDescription"))
+				.call((joinedLinkGrps) => {
+					this.updateLinks(joinedLinkGrps, linksArray);
+				});
+		});
 	}
 
 	// Creates all newly created links specified in the enter selection.
@@ -6578,11 +6584,8 @@ export default class SVGCanvasRenderer {
 			// appears in the viewport. If the event was a MouseEvent we don't zoom to reveal
 			// because it interferes with double-click events (also it's not necessary because
 			// the object will be at least partially visible in the view port for it to be clicked).
-			// Also, we don't zoom to reveal if the object is a link in a full-page subflow
-			// because a) they are almost always on display and b) if the link is to, or from, a
-			// binding node zoomToReveal will cause the nodes to be incorrectly moved.
-			if (CanvasUtils.isKeyboardEvent(evt) &&
-					!(type === "link" && this.dispUtils.isDisplayingSubFlowFullPage())) {
+			// Also, some objects should not cause a zoom, so check for them.
+			if (CanvasUtils.isKeyboardEvent(evt) && this.shouldObjectCauseZoom(obj, type)) {
 				const zoom = this.canvasController.getZoomToReveal([obj.id]);
 
 				if (zoom) {
@@ -6602,6 +6605,24 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Returns true if the object should cause a 'zoom to reveal' to occur when focus
+	// is moved to it. That is, if we are displaying a sub-flow full-page when:
+	// 1. The object is a link - because
+	//    a) they are almost always on display and
+	//    b) if the link is to, or from, a binding node zoomToReveal will cause the
+	//       nodes to be incorrectly moved.
+	// 2. The object is a binding node -- because they are always in a fixed position.
+	shouldObjectCauseZoom(obj, type) {
+		if (this.dispUtils.isDisplayingSubFlowFullPage()) {
+			if (type === "link") {
+				return false;
+			} else if (type === "node" && CanvasUtils.isSuperBindingNode(obj)) {
+				return false;
+			}
+		}
+		return true;
+	}
+
 	// Moves the focus highlighting to the next appropriate sub-object within
 	// the parent object.
 	setFocusNextSubObject(parentObj, evt) {

package/src/common-canvas/svg-canvas-utils-drag-objects.js

@@ -409,12 +409,6 @@ export default class SVGCanvasUtilsDragObjects {
 			this.ren.displayMovedLinks();
 			this.ren.displayCanvasAccoutrements();
 
-			if (CanvasUtils.isExpandedSupernode(resizeObj)) {
-				if (this.ren.dispUtils.isDisplayingSubFlow()) {
-					this.ren.displayBindingNodesToFitSVG();
-				}
-				this.ren.superRenderers.forEach((renderer) => renderer.displaySVGToFitSupernode());
-			}
 			this.logger.logEndTimer("displayObjects");
 		}
 	}

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

@@ -88,7 +88,7 @@ export default class SvgCanvasTextArea {
 	displayCommentTextArea(d, parentDomObj) {
 		this.editingTextData = {
 			id: d.id,
-			comment: d,
+			focusReturn: d,
 			text: d.content,
 			singleLine: false,
 			maxCharacters: null,
@@ -465,6 +465,7 @@ export default class SvgCanvasTextArea {
 
 		this.editingTextData = {
 			id: node.id,
+			focusReturn: node,
 			text: node.label,
 			singleLine: node.layout.labelSingleLine,
 			maxCharacters: node.layout.labelMaxCharacters,
@@ -538,6 +539,7 @@ export default class SvgCanvasTextArea {
 
 		this.editingTextData = {
 			id: dec.id,
+			focusReturn: obj,
 			text: dec.label,
 			singleLine: dec.label_single_line || false,
 			maxCharacters: dec.label_max_characters || null,
@@ -707,10 +709,10 @@ export default class SvgCanvasTextArea {
 			// Tidy up
 			this.foreignObjectComment.remove();
 			this.foreignObjectComment = null;
-			this.canvasController.setFocusObject(data.comment, null, true);
 		}
 		this.editingText = false;
 		this.editingTextId = "";
+		this.canvasController.setFocusObject(data.focusReturn, null, true);
 	}
 
 	// Returns true if one of the keys that are allowed in the text area, when

package/src/common-properties/controls/expression/expression.scss

@@ -69,7 +69,7 @@
 
 		&.cm-focused {
 			outline: 2px solid carbon.$focus;
-			outline-offset: -2px;
+			outline-offset: 0px;
 		}
 
 		.cm-gutters {
@@ -96,14 +96,27 @@
 		.cm-activeLine {
 			background-color: carbon.$background-selected; // works for both dark n light
 		}
-		.cm-activeLineGutter {
-			background-color: carbon.$text-placeholder;
+
+		.cm-lineNumbers .cm-gutterElement:not(.cm-activeLineGutter) {
 			color: carbon.$text-primary;
 		}
+
+		.cm-lineNumbers  .cm-activeLineGutter {
+			background-clip: padding-box;
+			background-color: carbon.$layer-accent-hover-02;
+			color: carbon.$text-primary;
+		}
+
+		.cm-gutter.cm-foldGutter > div.cm-gutterElement.cm-activeLineGutter {
+			background-color: carbon.$layer-accent-hover-02;
+			color: carbon.$text-primary;
+		}
+
 		&.cm-focused .cm-selectionBackground, ::selection {
 			/* stylelint-disable-next-line declaration-no-important */
 			background: carbon.$support-info-inverse !important; // add !important to override the selected text style
 		}
+
 		.cm-tooltip-autocomplete {
 			z-index: 1110;
 			background: carbon.$field-02; // Background color of the autocompletion menu to support dark mode

package/src/object-model/api-pipeline.js

@@ -1382,6 +1382,10 @@ export default class APIPipeline {
 		this.store.dispatch({ type: "SET_LINK_PROPERTIES", data: { linkId: linkId, linkProperties: linkProperties }, pipelineId: this.pipelineId });
 	}
 
+	setLinkParameters(linkId, parameters) {
+		this.store.dispatch({ type: "SET_LINK_PARAMETERS", data: { linkId: linkId, parameters: parameters }, pipelineId: this.pipelineId });
+	}
+
 	setNodeDataLinkSrcInfo(linkId, srcNodeId, srcNodePortId) {
 		this.store.dispatch({ type: "SET_LINK_SRC_INFO", data: { linkId: linkId, srcNodeId: srcNodeId, srcNodePortId: srcNodePortId }, pipelineId: this.pipelineId });
 	}

package/src/object-model/pipeline-in-handler.js

@@ -397,6 +397,9 @@ export default class PipelineInHandler {
 		if (link.description) { // description is also optional
 			newLink.description = link.description;
 		}
+		if (link.parameters) { // parameters is also optional
+			newLink.parameters = link.parameters;
+		}
 
 		return newLink;
 	}

package/src/object-model/pipeline-out-handler.js

@@ -483,6 +483,11 @@ export default class PipelineOutHandler {
 		if (link.description) {
 			newLink.description = link.description;
 		}
+
+		if (link.parameters) {
+			newLink.parameters = link.parameters;
+		}
+
 		return newLink;
 	}
 }

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

@@ -167,6 +167,7 @@ export default (state = {}, action) => {
 	case "SET_NODE_MESSAGES":
 	case "SET_NODE_DECORATIONS":
 	case "SET_LINK_DECORATIONS":
+	case "SET_LINK_PARAMETERS":
 	case "ADD_NODE_ATTR":
 	case "REMOVE_NODE_ATTR":
 	case "SET_NODE_LABEL":

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

@@ -135,6 +135,16 @@ export default (state = [], action) => {
 			return link;
 		});
 
+	case "SET_LINK_PARAMETERS":
+		return state.map((link, index) => {
+			if (action.data.linkId === link.id) {
+				const newLink = Object.assign({}, link);
+				newLink.parameters = action.data.parameters;
+				return newLink;
+			}
+			return link;
+		});
+
 	case "SET_LINK_SRC_INFO":
 		return state.map((link) => {
 			if (link.id === action.data.linkId) {