@elyra/canvas 12.44.0 → 12.45.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.44.0",
+  "version": "12.45.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
-  "homepage": "https://github.com/elyra-ai/canvas",
+  "homepage": "https://elyra-ai.github.io/canvas/",
   "repository": {
     "type": "git",
     "url": "https://github.com/elyra-ai/canvas/tree/main/canvas_modules/common-canvas"

package/src/command-actions/sizeAndPositionObjectsAction.js

@@ -40,6 +40,10 @@ export default class SizeAndPositionObjectsAction extends Action {
 	}
 
 	getLabel() {
+		const com = this.apiPipeline.getComment(this.data.selectedObjectIds[0]);
+		if (com) {
+			return this.labelUtil.getActionLabel(this, "action.sizeComment");
+		}
 		return this.labelUtil.getActionLabel(this, "action.sizeAndPositionObjects");
 	}
 

package/src/command-stack/command-stack.js

@@ -47,6 +47,10 @@ export default class CommandStack {
 		return null;
 	}
 
+	getAllUndoCommands() {
+		return this.commands.getUndoCommands().toArray();
+	}
+
 	// need this for validation on unit tests
 	getStack() {
 		return {

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

@@ -1385,20 +1385,32 @@ export default class CanvasController {
 	}
 
 	// Calls the undo() method of the next available command on the command
-	// stack that can be undone, if one is available.
+	// stack that can be undone, if one is available. Uses the editActionHandler
+	// method which will cause the app's editActionHandler to be called.
 	undo() {
 		if (this.canUndo()) {
-			this.getCommandStack().undo();
-			this.objectModel.refreshToolbar();
+			this.editActionHandler({ editType: "undo", editSource: "controller" });
 		}
 	}
 
+	// Undoes a number of commands on the command stack as indicated by the
+	// 'count' parameter. If 'count' is bigger than the number of commands
+	// on the stack, all undoable commands currently on the command stack
+	// will be undone. Uses the editActionHandler method which will cause
+	// the app's editActionHandler to be called.
+	undoMulti(count) {
+		for (let i = 0; i < count && this.canUndo(); i++) {
+			this.editActionHandler({ editType: "undo", editSource: "controller" });
+		}
+	}
+
+
 	// Calls the redo() method of the next available command on the command
-	// stack that can be redone, if one is available.
+	// stack that can be redone, if one is available. Uses the editActionHandler
+	// method which will cause the app's editActionHandler to be called.
 	redo() {
 		if (this.canRedo()) {
-			this.getCommandStack().redo();
-			this.objectModel.refreshToolbar();
+			this.editActionHandler({ editType: "redo", editSource: "controller" });
 		}
 	}
 
@@ -1414,6 +1426,12 @@ export default class CanvasController {
 		return this.getCommandStack().canRedo();
 	}
 
+	// Returns an array of all undoable commands currently on the
+	// command stack.
+	getAllUndoCommands() {
+		return this.getCommandStack().getAllUndoCommands();
+	}
+
 	// Returns a string which is the label that descibes the next undoable
 	// command.
 	getUndoLabel() {
@@ -1724,11 +1742,13 @@ export default class CanvasController {
 	//    pixel amount to move. Negative left and positive right
 	// y: Is the vertical translate amount which is a number indicating the
 	//    pixel amount to move. Negative up and positive down.
-	// k: is the scale amount which is a number greater than 0 where 1 is the
+	// k: Is the scale amount which is a number greater than 0 where 1 is the
 	//    default scale size.
-	zoomTo(zoomObject) {
+	// animateTime is a number of milliseconds that the animation should take.
+	// It defaults to 500ms. Set to 0 for no animation.
+	zoomTo(zoomObject, animateTime) {
 		if (this.canvasContents) {
-			this.getSVGCanvasD3().zoomTo(zoomObject);
+			this.getSVGCanvasD3().zoomTo(zoomObject, animateTime);
 		}
 	}
 

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

@@ -25,6 +25,8 @@ import ColorPicker from "../color-picker";
 const CM_TOOLBAR_GAP = 2;
 const CM_ICON_SIZE = 32;
 const CM_ICON_PAD = 2;
+const ICON_SIZE_PLUS_GAP = CM_ICON_SIZE + CM_TOOLBAR_GAP;
+const PADDING = 2;
 
 class CommonCanvasContextToolbar extends React.Component {
 	constructor(props) {
@@ -162,6 +164,46 @@ class CommonCanvasContextToolbar extends React.Component {
 				!this.props.contextSource.targetObject.is_expanded);
 	}
 
+	// Returns adjusted x, y  coordinates for the context menu to ensure it appears
+	// fully within the containing div (viewport).
+	adjustPosToFit(x, y, width, height) {
+		const containingDiv = document.getElementById(this.props.containingDivId);
+		const divRect = containingDiv
+			? containingDiv.getBoundingClientRect()
+			: { top: -1000, bottom: 1000, left: -1000, right: 1000 }; // To enable Jest tests.
+
+		const rect = {
+			left: 0,
+			right: divRect.right - divRect.left,
+			top: 0,
+			bottom: divRect.bottom - divRect.top
+		};
+
+		let newX = x;
+		let newY = y;
+
+		const rightOver = (x + width) - rect.right;
+		const leftOver = rect.left - x;
+		const bottomOver = (y + height) - rect.bottom;
+		const topOver = rect.top - y;
+
+		if (rightOver > 0) {
+			newX -= rightOver + PADDING;
+
+		} else if (leftOver > 0) {
+			newX += leftOver + PADDING;
+		}
+
+		if (bottomOver > 0) {
+			newY -= bottomOver + PADDING;
+
+		} else if (topOver > 0) {
+			newY += topOver + PADDING;
+		}
+
+		return { x: newX, y: newY };
+	}
+
 	render() {
 		this.logger.log("render");
 
@@ -177,10 +219,12 @@ class CommonCanvasContextToolbar extends React.Component {
 			// Note: cmPos is already adjusted as a starting point for the context
 			// toolbar position by a calculation in svg-canvas-renderer.js.
 			const pos = this.props.contextSource.cmPos || { x: 0, y: 0 };
-			const x = this.shouldCenterJustifyToolbar()
+			let x = this.shouldCenterJustifyToolbar()
 				? pos.x - (toolbarWidth / 2)
 				: pos.x - toolbarWidth;
-			const y = (pos.y - CM_ICON_SIZE) - CM_TOOLBAR_GAP;
+			let y = pos.y - ICON_SIZE_PLUS_GAP;
+
+			({ x, y } = this.adjustPosToFit(x, y, toolbarWidth, ICON_SIZE_PLUS_GAP));
 
 			contextToolbar = (
 				<div className={"context-toolbar"} style={{ left: x, top: y, width: toolbarWidth }}

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

@@ -223,6 +223,7 @@ class CommonCanvasToolbar extends React.Component {
 
 		if (typeof toolbarConfig !== "undefined") {
 			const editingAllowed = this.props.enableEditingActions;
+			this.applyToolState("multiUndo", toolbarConfig, editingAllowed && this.props.canMultiUndo);
 			this.applyToolState("undo", toolbarConfig, editingAllowed && this.props.canUndo);
 			this.applyToolState("redo", toolbarConfig, editingAllowed && this.props.canRedo);
 			this.applyToolState("cut", toolbarConfig, editingAllowed && this.props.canCutCopy);
@@ -326,6 +327,7 @@ CommonCanvasToolbar.propTypes = {
 	notificationConfigKeepOpen: PropTypes.bool,
 	enableInternalObjectModel: PropTypes.bool,
 	enableEditingActions: PropTypes.bool,
+	canMultiUndo: PropTypes.bool,
 	canUndo: PropTypes.bool,
 	canRedo: PropTypes.bool,
 	canCutCopy: PropTypes.bool,
@@ -351,6 +353,7 @@ const mapStateToProps = (state, ownProps) => ({
 	notificationMessages: state.notifications,
 	enableInternalObjectModel: state.canvasconfig.enableInternalObjectModel,
 	enableEditingActions: state.canvasconfig.enableEditingActions,
+	canMultiUndo: ownProps.canvasController.getAllUndoCommands().length > 1,
 	canUndo: ownProps.canvasController.canUndo(),
 	canRedo: ownProps.canvasController.canRedo(),
 	canCutCopy: ownProps.canvasController.canCutCopy(),

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

@@ -130,8 +130,8 @@ export default class SVGCanvasD3 {
 		this.renderer.externalObjectDropped(dropData, x, y);
 	}
 
-	zoomTo(zoomObject) {
-		this.renderer.zoomTo(zoomObject);
+	zoomTo(zoomObject, animateTime) {
+		this.renderer.zoomTo(zoomObject, animateTime);
 	}
 
 	translateBy(x, y, animateTime) {

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

@@ -100,7 +100,7 @@ export default class SVGCanvasPipeline {
 	// Returns true if the pipeline is empty except for any binding nodes.
 	isEmptyOrBindingsOnly() {
 		return (isEmpty(this.pipeline.nodes) || this.containsOnlyBindingNodes()) &&
-						isEmpty(this.pipeline.comments);
+						isEmpty(this.pipeline.comments) && isEmpty(this.pipeline.links);
 	}
 
 	containsOnlyBindingNodes() {

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

@@ -187,8 +187,8 @@ export default class SVGCanvasRenderer {
 		return this.zoomUtils.isSpaceKeyPressed();
 	}
 
-	zoomTo(zoomObject) {
-		this.zoomUtils.zoomTo(zoomObject);
+	zoomTo(zoomObject, animateTime) {
+		this.zoomUtils.zoomTo(zoomObject, animateTime);
 	}
 
 	translateBy(x, y, animateTime) {

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

@@ -474,6 +474,9 @@ export default class SVGCanvasUtilsDragObjects {
 				detachedLinksInfo: this.nodeSizingDetLinksInfo,
 				pipelineId: this.ren.activePipeline.id
 			});
+
+			// Clear the objects ready for next sizing action.
+			this.nodeSizingObjectsInfo = {};
 		}
 	}
 

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

@@ -132,10 +132,11 @@ export default class SVGCanvasUtilsZoom {
 		this.zoomTransform = d3.zoomIdentity.translate(0, 0).scale(1);
 	}
 
-	// Zooms the canvas to the extent specified in the zoom object.
-	zoomTo(zoomObject) {
-		const animateTime = 500;
-		this.zoomCanvasInvokeZoomBehavior(zoomObject, animateTime);
+	// Zooms the canvas to the extent specified in the zoom object. Animate
+	// the zoom by the time specified (in milliseconds) or by 500ms by default.
+	zoomTo(zoomObject, animateTime) {
+		const at = typeof animateTime === "undefined" ? 500 : animateTime;
+		this.zoomCanvasInvokeZoomBehavior(zoomObject, at);
 	}
 
 	// Pans the canvas by the x and y amount specified in the time specified.

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

@@ -648,7 +648,7 @@ export default class ObjectModel {
 	// layout, dimension and supernode binding status info. This uses the redux
 	// layout information.
 	setNodeAttributes(node) {
-		return setNodeAttributesWithLayout(node, this.getNodeLayout(), this.getCanvasLayout());
+		return setNodeAttributesWithLayout(node, this.getNodeLayout(), this.getCanvasLayout(), this.layoutHandler);
 	}
 
 	// Returns a copy of the comment passed in with position adjusted for

package/src/toolbar/toolbar.jsx

@@ -345,7 +345,7 @@ class Toolbar extends React.Component {
 		const ref = this.findFirstRightItemRefNotOnTopRow();
 
 		const index = ref === null
-			? this.rightBar.length - 1
+			? this.rightBar.length
 			: this.rightBar.findIndex((ri) => ri.action === this.getRefAction(ref));
 
 		return index;

package/src/toolbar/toolbar.scss

@@ -103,7 +103,17 @@ $toolbar-divider-width: 1px;
 	background-color: $ui-01;
 	display: inline-block;
 
-	& button {
+	&.toolbar-item-selected {
+		&.default,
+		&.ghost {
+			& > div > button {
+				background-color: $ui-03;
+				border-bottom: 2px solid $interactive-01;
+			}
+		}
+	}
+
+	& > div > button {
 		padding: 0;
 		min-height: 30px;
 		height: $toolbar-button-height;
@@ -111,37 +121,34 @@ $toolbar-divider-width: 1px;
 
 	&.default,
 	&.ghost {
-		& button {
+		& > div > button {
 			background-color: $ui-01;
-		}
 
-		& button:hover {
-			background-color: $hover-field;
-		}
-
-		& button:focus {
-			background-color: $hover-field;
-		}
+			&:hover,
+			&:focus {
+				background-color: $hover-field;
+			}
 
-		& button:disabled:hover {
-			background-color: $ui-01;
+			&:disabled:hover {
+				background-color: $ui-01;
+			}
 		}
 	}
 
 	&.tertiary {
-		& button {
+		& > div > button {
 			color: $brand-03;
 			background-color: $ui-01;
-		}
 
-		& button:hover {
-			background-color: $hover-field;
-		}
+			&:hover {
+				background-color: $hover-field;
+			}
 
-		& button:disabled,
-		& button:disabled:hover {
-			color: $disabled-02;
-			background-color: $ui-01;
+			&:disabled,
+			&:disabled:hover {
+				color: $disabled-02;
+				background-color: $ui-01;
+			}
 		}
 	}
 }
@@ -286,16 +293,6 @@ $toolbar-divider-width: 1px;
 	padding: 0;
 }
 
-.toolbar-item-selected {
-	&.default,
-	&.ghost {
-		& button {
-			background-color: $ui-03;
-			border-bottom: 2px solid $interactive-01;
-		}
-	}
-}
-
 .toolbar-divider {
 	border-right: $toolbar-divider-width solid $ui-03;
 	background-color: $ui-01;