@elyra/canvas 12.40.1 → 12.42.0

package/src/common-canvas/svg-canvas-d3.scss

@@ -640,7 +640,7 @@ $link-highlight-color: $support-04;
 	}
 	.d3-comment-entry {
 		background-color: $background-color;
-		color: $gray-100;
+		color: $text-color;
 	}
 }
 

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

@@ -2773,7 +2773,7 @@ export default class SVGCanvasRenderer {
 	addContextToolbar(d3Event, d, objType) {
 		if (!this.isSizing() && !this.isDragging() &&
 				!this.svgCanvasTextArea.isEditingText() && !CanvasUtils.isSuperBindingNode(d)) {
-			this.canvasController.setMouseInObject(true);
+			this.canvasController.setMouseInObject(d.id);
 			let pos = this.getContextToolbarPos(objType, d);
 			pos = this.zoomUtils.unTransformPos(pos);
 			this.openContextMenu(d3Event, objType, d, null, pos);
@@ -2781,7 +2781,7 @@ export default class SVGCanvasRenderer {
 	}
 
 	removeContextToolbar() {
-		this.canvasController.setMouseInObject(false);
+		this.canvasController.setMouseInObject(null);
 		if (this.canvasController.isContextMenuDisplayed()) {
 			setTimeout(() => this.canvasController.closeContextToolbar(), 200);
 		}
@@ -2974,6 +2974,8 @@ export default class SVGCanvasRenderer {
 
 	}
 
+	// Opens either the context menu or the context toolbar depending on which is
+	// currently enabled.
 	openContextMenu(d3Event, type, d, port, pos) {
 		CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stop the browser context menu appearing
 		this.canvasController.contextMenuHandler({
@@ -2991,6 +2993,8 @@ export default class SVGCanvasRenderer {
 			zoom: this.zoomUtils.getZoomScale() });
 	}
 
+	// Closes the conetext menu if open. Called by various drag utility
+	// classes.
 	closeContextMenuIfOpen() {
 		if (this.canvasController.isContextMenuDisplayed()) {
 			this.canvasController.closeContextMenu();

package/src/common-canvas/svg-canvas-utils-drag-det-link.js

@@ -168,12 +168,19 @@ export default class SVGCanvasUtilsDragDetLink {
 			// If editSubType is set the user did a gesture that requires a change
 			// to the object model.
 			if (editSubType) {
-				this.ren.canvasController.editActionHandler({
+				const success = this.ren.canvasController.editActionHandler({
 					editType: "updateLink",
 					editSubType: editSubType,
 					editSource: "canvas",
 					newLink: newLink,
 					pipelineId: this.ren.activePipeline.id });
+
+				// The call to editActionHandler might "fail" if the host app
+				// uses beforeEditActionHandler to cancel the edit action. In
+				//  this case, we snap the link back to its old position.
+				if (!success) {
+					this.snapBackOldLink(draggingLinkData.oldLink);
+				}
 			// If editSubType is null, the user performed a gesture which should
 			// not be executed as an action so draw the link back in its old position.
 			} else {

package/src/common-canvas/svg-canvas-utils-drag-new-link.js

@@ -559,7 +559,7 @@ export default class SVGCanvasUtilsDragNewLink {
 	}
 
 	// Switches on or off node highlighting depending on whether a node is
-	// close to teh new link being dragged.
+	// close to the new link being dragged.
 	setNewLinkOverNode(d3Event) {
 		const nodeNearMouse = this.ren.getNodeNearMousePos(d3Event, this.ren.canvasLayout.nodeProximity);
 		const highlightState = nodeNearMouse && this.isNewLinkAllowedToNode(nodeNearMouse);

package/src/common-properties/components/table-buttons/table-buttons.scss

@@ -21,7 +21,6 @@
 		}
 	}
 	.toolbar-popover-list {
-		top: $spacing-07;
 		right: 0;
 	}
 }

package/src/common-properties/components/wide-flyout/wide-flyout.scss

@@ -24,12 +24,11 @@ $properties-modal-buttons-height: 64px;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: $text-01;
+	background-color: $overlay-01;
 	z-index: 1000;
 	cursor: default;
 	&.show {
 		display: block;
-		opacity: 0.5;
 	}
 }
 

package/src/common-properties/constants/form-constants.js

@@ -81,6 +81,7 @@ const ControlType = {
 	DATEFIELD: "datefield",
 	DATEPICKER: "datepicker",
 	DATEPICKERRANGE: "datepickerRange",
+	SLIDER: "slider",
 	TIMEFIELD: "timefield",
 	TIMESTAMP: "timestampfield",
 	CHECKBOX: "checkbox",

package/src/common-properties/controls/control-factory.js

@@ -48,6 +48,7 @@ import StructureEditorControl from "./structureeditor";
 import StructureTableControl from "./structuretable";
 import StructurelisteditorControl from "./structurelisteditor";
 import ReadonlyTableControl from "./readonlytable";
+import Slider from "./slider";
 
 import ControlItem from "./../components/control-item";
 import ActionFactory from "./../actions/action-factory.js";
@@ -82,7 +83,8 @@ const accessibleControls = [
 	ControlType.ONEOFSELECT,
 	ControlType.MULTISELECT,
 	ControlType.SELECTSCHEMA,
-	ControlType.SELECTCOLUMN
+	ControlType.SELECTCOLUMN,
+	ControlType.SLIDER
 ];
 
 const tableControls = [
@@ -337,6 +339,9 @@ export default class ControlFactory {
 				rightFlyout={this.rightFlyout}
 			/>);
 			break;
+		case (ControlType.SLIDER):
+			createdControl = (<Slider {...props} />);
+			break;
 		default:
 			createdControl = (<ReadonlyControl {...props} />);
 		}

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

@@ -32,6 +32,7 @@
 @import "./multiselect/multiselect";
 @import "./datepicker-range/datepicker-range";
 @import "./datepicker/datepicker";
+@import "./slider/slider";
 
 .properties-ctrl-wrapper {
 	padding-bottom: $spacing-05; // Adds padding to the control

package/src/common-properties/controls/expression/expression-builder/expression-builder.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,36 +31,40 @@ export default class ExpressionBuilder extends React.Component {
 		this.onChange = this.onChange.bind(this);
 		this.onBlur = this.onBlur.bind(this);
 		this.onSelectionChange = this.onSelectionChange.bind(this);
-		this.lastCursorPos = null;
-
+		this.getCodemirrorState = this.getCodemirrorState.bind(this);
 	}
 
 	onChange(newValue) {
 		const value = (typeof newValue === "string") ? newValue : newValue.toString();
-		let cursor = this.editor.getCursor();
+		const somethingSelected = this.getCodemirrorState()?.selection.ranges.some((r) => !r.empty);
+		let cursor = this.getCodemirrorState()?.selection.main.head;
+		if (cursor === 0 && !somethingSelected) { // TODO: Doesn't work when I explicitly set the cursor to 0
+			// When nothing selected, set cursor at the end of the line
+			this.editor.dispatch({ selection: { anchor: this.getCodemirrorState()?.doc.length } });
+			cursor = this.getCodemirrorState()?.selection.main.head;
+			this.editor.focus();
+		}
 		let selectionOffset = 1;
-		if (this.editor.somethingSelected()) {
+		if (somethingSelected) {
 			selectionOffset = 0;
-			this.editor.replaceSelection(value);
+			this.editor.dispatch(this.getCodemirrorState()?.replaceSelection(value), { scrollIntoView: true });
+			this.editor.focus();
 		} else {
 			let buffer = " ";
-			if (this.lastCursorPos) {
-				this.editor.setCursor(this.lastCursorPos);
-				cursor = this.lastCursorPos;
-			}
 			// if adding to a parenth/bracket/brace expression, no need for space
-			const charBefore = this.editor.getLine(cursor.line)[cursor.ch - 1];
+			const currentLineNumber = this.getCodemirrorState()?.doc.lineAt(this.getCodemirrorState()?.selection.main.head).number;
+			const charBefore = this.getCodemirrorState()?.doc.line(currentLineNumber).text[cursor - 1];
 			// edge case of cursor being at line 0, char 0 is still handled here
 			if (["(", "[", "{"].indexOf(charBefore) !== -1) {
 				buffer = "";
 			}
-			this.editor.replaceSelection(buffer + value);
+			this.editor.dispatch(this.getCodemirrorState()?.replaceSelection(buffer + value), { scrollIntoView: true });
+			this.editor.focus();
 		}
 		this._setSelection(value, cursor, selectionOffset);
 		// This is needed to generate a render so that the selection will appear.
-		const exprValue = this.editor.getValue();
+		const exprValue = this.getCodemirrorState()?.doc.toString();
 		this.props.controller.updatePropertyValue(this.props.propertyId, exprValue, true);
-		this.lastCursorPos = this.editor.getCursor();
 	}
 
 	onSelectionChange(selection) {
@@ -68,9 +72,8 @@ export default class ExpressionBuilder extends React.Component {
 	}
 
 	onBlur(editor, evt) {
-		this.lastCursorPos = editor.getCursor();
 		const currentValue = this.props.controller.getPropertyValue(this.props.propertyId);
-		const newValue = this.editor.getValue();
+		const newValue = editor?.viewState?.state?.doc.toString();
 		const skipValidate = this.expressionSelectionPanel && evt && this.expressionSelectionPanel.contains(evt.relatedTarget);
 		// update property value when value is updated OR value is to be validated
 		if (!isEqual(currentValue, newValue) || !skipValidate) {
@@ -78,38 +81,41 @@ export default class ExpressionBuilder extends React.Component {
 		}
 	}
 
-	editorDidMount(editor, next) {
-		this.editor = editor;
+	getCodemirrorState() {
+		return this.editor?.viewState?.state;
 	}
 
+	editorDidMount(editor) {
+		this.editor = editor;
+	}
 
 	_setSelection(value, cursor, selectionOffset) {
 		// first set the selection to the first param holder of new value
 		if (typeof value === "string") {
 			const firstParam = value.indexOf("?");
 			if (firstParam !== -1) {
-				const selection = { anchor: { line: cursor.line, ch: cursor.ch + firstParam + selectionOffset + 1 },
-					head: { line: cursor.line, ch: cursor.ch + firstParam + selectionOffset } };
+				const selection = { anchor: cursor + firstParam + selectionOffset + 1, head: cursor + firstParam + selectionOffset };
+				this.editor.dispatch({ selection: selection });
 				this.onSelectionChange([selection]);
 				return;
 			}
 		}
 		// if the newValue doesn't have a param holder
 		// set it to the first param holder found in the expression
-		const lineCount = this.editor.lineCount();
+		const lineCount = this.getCodemirrorState()?.doc.lines;
 		for (let index = 0; index < lineCount; index++) {
-			const line = this.editor.getLine(index);
+			const line = this.getCodemirrorState()?.doc.line(index + 1).text;
 			const paramOffset = line.indexOf("?");
 			if (paramOffset !== -1) {
-				const selection = { anchor: { line: index, ch: paramOffset + 1 },
-					head: { line: index, ch: paramOffset } };
+				const selection = { anchor: paramOffset + 1, head: paramOffset };
+				this.editor.dispatch({ selection: selection });
 				this.onSelectionChange([selection]);
 				return;
 			}
 		}
 		// if no parameter holders found then set it to end of insert string
-		const insertSelection = { anchor: { line: cursor.line, ch: cursor.ch + value.length + selectionOffset },
-			head: { line: cursor.line, ch: cursor.ch + value.length + selectionOffset } };
+		const insertSelection = { anchor: this.getCodemirrorState()?.selection.main.anchor,
+			head: this.getCodemirrorState()?.selection.main.head };
 		this.onSelectionChange([insertSelection]);
 		return;
 	}