@elyra/canvas 12.23.1 → 12.24.0

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

@@ -61,7 +61,8 @@ export default class CanvasInHandler {
 				y_pos: typeof canvasNode.y_pos !== "undefined" ? canvasNode.y_pos : canvasNode.yPos, // Handle old field name yPos
 				class_name: canvasNode.className,
 				label: canvasNode.objectData.label,
-				type: nodeType
+				type: nodeType,
+				style: canvasNode.style
 			};
 			if (canvasNode.objectData && canvasNode.objectData.description) {
 				newNode.description = canvasNode.objectData.description;
@@ -178,7 +179,8 @@ export default class CanvasInHandler {
 				x_pos: typeof canvasComment.x_pos !== "undefined" ? canvasComment.x_pos : canvasComment.xPos, // Handle old field name xPos
 				y_pos: typeof canvasComment.y_pos !== "undefined" ? canvasComment.y_pos : canvasComment.yPos, // Handle old field name yPos
 				height: canvasComment.height,
-				width: canvasComment.width
+				width: canvasComment.width,
+				style: canvasComment.style
 			})
 		);
 	}
@@ -192,7 +194,8 @@ export default class CanvasInHandler {
 					class_name: canvasLink.className,
 					srcNodeId: canvasLink.source,
 					trgNodeId: canvasLink.target,
-					type: this.getLinkType(canvasLink)
+					type: this.getLinkType(canvasLink),
+					style: canvasLink.style
 				};
 				if (canvasLink.sourcePort) {
 					newLink.srcNodePortId = canvasLink.sourcePort;

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

@@ -21,6 +21,10 @@ const portsHorizontalDefaultLayout = {
 		defaultNodeWidth: 160,
 		defaultNodeHeight: 40,
 
+		// A space separated list of classes that will be added to the group <g>
+		// DOM element for the node.
+		className: "",
+
 		// Default node shape. Can be "rectangle" or "port-arcs"
 		nodeShape: "port-arcs",
 
@@ -61,6 +65,8 @@ const portsHorizontalDefaultLayout = {
 
 		// An array of decorations to be applied to the node. For details see:
 		// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
+		// These are added to the node at run time and will not be saved into
+		// the pipeline flow.
 		decorations: [],
 
 		// Positions and dimensions for 9 enumerated default decorator positions.
@@ -412,6 +418,10 @@ const portsVerticalDefaultLayout = {
 		defaultNodeWidth: 70,
 		defaultNodeHeight: 75,
 
+		// A space separated list of classes that will be added to the group <g>
+		// DOM element for the node.
+		className: "",
+
 		// Default node shape. Can be "rectangle" or "port-arcs"
 		nodeShape: "rectangle",
 
@@ -452,6 +462,8 @@ const portsVerticalDefaultLayout = {
 
 		// An array of decorations to be applied to the node. For details see:
 		// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
+		// These are added to the node at run time and will not be saved into
+		// the pipeline flow.
 		decorations: [],
 
 		// Positions and dimensions for 9 enumerated default decorator positions.

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

@@ -1573,54 +1573,23 @@ export default class ObjectModel {
 	// ---------------------------------------------------------------------------
 
 	getSelectedObjectIds() {
-		return this.getSelectionInfo().selections || [];
+		return this.store.getSelectedObjectIds();
 	}
 
 	getSelectedNodesIds() {
-		var objs = [];
-		const apiPipeline = this.getSelectedPipeline();
-		apiPipeline.getNodes().forEach((node) => {
-			if (this.getSelectedObjectIds().includes(node.id)) {
-				objs.push(node.id);
-			}
-		});
-		return objs;
+		return this.getSelectedNodes().map((n) => n.id);
 	}
 
 	getSelectedNodes() {
-		const objs = [];
-		const apiPipeline = this.getSelectedPipeline();
-		apiPipeline.getNodes().forEach((node) => {
-			if (this.getSelectedObjectIds().includes(node.id)) {
-				objs.push(node);
-			}
-		});
-
-		return objs;
+		return this.store.getSelectedNodes();
 	}
 
 	getSelectedComments() {
-		const objs = [];
-		const apiPipeline = this.getSelectedPipeline();
-		apiPipeline.getComments().forEach((com) => {
-			if (this.getSelectedObjectIds().includes(com.id)) {
-				objs.push(com);
-			}
-		});
-
-		return objs;
+		return this.store.getSelectedComments();
 	}
 
 	getSelectedLinks() {
-		const objs = [];
-		const apiPipeline = this.getSelectedPipeline();
-		apiPipeline.getLinks().forEach((lnk) => {
-			if (this.getSelectedObjectIds().includes(lnk.id)) {
-				objs.push(lnk);
-			}
-		});
-
-		return objs;
+		return this.store.getSelectedLinks();
 	}
 
 	getSelectedObjects() {
@@ -1638,7 +1607,7 @@ export default class ObjectModel {
 	}
 
 	getSelectedPipelineId() {
-		return this.getSelectionInfo().pipelineId;
+		return this.store.getSelectedPipelineId();
 	}
 
 	clearSelections() {
@@ -1770,8 +1739,7 @@ export default class ObjectModel {
 
 	// Returns true if all the selected objects are links.
 	areAllSelectedObjectsLinks() {
-		const nonLinkIndex = this.getSelectedObjects().findIndex((selObj) => !this.isLink(selObj));
-		return nonLinkIndex === -1;
+		return this.store.areAllSelectedObjectsLinks();
 	}
 
 	// Recursive function to add all connected nodes into the group.

package/src/object-model/redux/canvas-store.js

@@ -124,6 +124,17 @@ export default class CanavasStore {
 		return null;
 	}
 
+	isEmpty(pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+
+		if (pipeline.nodes && pipeline.nodes.length === 0 &&
+				pipeline.comments && pipeline.comments.length === 0 &&
+				pipeline.links && pipeline.links.length === 0) {
+			return true;
+		}
+		return false;
+	}
+
 	// This is a service method for retrieving the internal pipeline. It does NOT
 	// clone the pipeline therefore it should NOT be called from outside this
 	// class because we don't want to surface the intenal data in redux to
@@ -132,6 +143,23 @@ export default class CanavasStore {
 		return this.store.getState().canvasinfo.pipelines.find((p) => p.id === pipelineId);
 	}
 
+	// This is a service method for retrieving selected objects of the type passed
+	// in which can be "nodes", "comments" or "links". It does NOT clone the
+	// resultant array therefore it should NOT be called from outside this
+	// class because we don't want to surface the intenal data in redux to
+	// the outside world.
+	getNonClonedSelectedObjs(type) {
+		const selectedPipelineId = this.getSelectedPipelineId();
+		if (selectedPipelineId) {
+			const pipeline = this.getNonClonedPipeline(selectedPipelineId);
+			if (pipeline[type]) {
+				const selectedObjIds = this.getSelectedObjectIds();
+				return pipeline[type].filter((o) => selectedObjIds.includes(o.id));
+			}
+		}
+		return [];
+	}
+
 	getNodes(pipelineId) {
 		const pipeline = this.getNonClonedPipeline(pipelineId);
 		if (pipeline && pipeline.nodes) {
@@ -252,6 +280,33 @@ export default class CanavasStore {
 		return this.cloneData(this.store.getState().selectioninfo);
 	}
 
+	getSelectedPipelineId() {
+		return this.getSelectionInfo().pipelineId;
+	}
+
+	getSelectedObjectIds() {
+		const selectedObjIds = this.store.getState().selectioninfo.selections || [];
+		return this.cloneData(selectedObjIds);
+	}
+
+	getSelectedNodes() {
+		return cloneDeep(this.getNonClonedSelectedObjs("nodes"));
+	}
+
+	getSelectedComments() {
+		return cloneDeep(this.getNonClonedSelectedObjs("comments"));
+	}
+
+	getSelectedLinks() {
+		return cloneDeep(this.getNonClonedSelectedObjs("links"));
+	}
+
+	// Returns true if all the selected objects are links. That is, if the
+	// number of selected links is the same as the number of selected objects.
+	areAllSelectedObjectsLinks() {
+		return this.getNonClonedSelectedObjs("links").length === this.getSelectedObjectIds().length;
+	}
+
 	getExternalPipelineFlows() {
 		return this.cloneData(this.store.getState().externalpipelineflows);
 	}

package/src/toolbar/toolbar-action-item.jsx

@@ -184,6 +184,7 @@ class ToolbarActionItem extends React.Component {
 				disabled={!actionObj.enable}
 				onFocus={this.props.onFocus}
 				aria-label={actionObj.label}
+				size={this.props.size}
 			>
 				{buttonContent}
 			</Button>
@@ -291,7 +292,8 @@ ToolbarActionItem.propTypes = {
 	toolbarActionHandler: PropTypes.func.isRequired,
 	instanceId: PropTypes.number.isRequired,
 	overflow: PropTypes.bool,
-	onFocus: PropTypes.func
+	onFocus: PropTypes.func,
+	size: PropTypes.oneOf(["md", "sm"])
 };
 
 export default ToolbarActionItem;

package/src/toolbar/toolbar-overflow-item.jsx

@@ -53,6 +53,7 @@ class ToolbarOverflowItem extends React.Component {
 						onClick={this.toggleExtendedMenu}
 						onFocus={this.props.onFocus}
 						aria-label={this.props.label}
+						size={this.props.size}
 					>
 						<div className="toolbar-item-content default">
 							<div className="toolbar-icon">
@@ -73,7 +74,8 @@ ToolbarOverflowItem.propTypes = {
 	index: PropTypes.number.isRequired,
 	generateExtensionMenuItems: PropTypes.func,
 	onFocus: PropTypes.func,
-	label: PropTypes.string
+	label: PropTypes.string,
+	size: PropTypes.oneOf(["md", "sm"])
 };
 
 export default ToolbarOverflowItem;

package/src/toolbar/toolbar.jsx

@@ -208,6 +208,7 @@ class Toolbar extends React.Component {
 						overflow={overflow}
 						instanceId={this.props.instanceId}
 						onFocus={this.onFocus}
+						size={this.props.size}
 					/>
 				);
 			}
@@ -226,6 +227,7 @@ class Toolbar extends React.Component {
 				generateExtensionMenuItems={this.generateExtensionMenuItems}
 				onFocus={this.onFocus}
 				label={label}
+				size={this.props.size}
 			/>
 		);
 
@@ -280,9 +282,10 @@ class Toolbar extends React.Component {
 		const leftItems = this.generateToolbarItems(this.leftBar, false, true);
 		const rightItems = this.generateToolbarItems(this.rightBar, false, false);
 
+		const toolbarSizeClass = this.props.size === "sm" ? "toolbar-div toolbar-size-small" : "toolbar-div";
 		const canvasToolbar = (
 			<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>
-				<div className="toolbar-div" instanceid={this.props.instanceId}>
+				<div className={toolbarSizeClass} instanceid={this.props.instanceId}>
 					<div className="toolbar-left-bar" onScroll={this.onScroll}>
 						{leftItems}
 					</div>
@@ -301,7 +304,8 @@ Toolbar.propTypes = {
 	instanceId: PropTypes.number,
 	toolbarActionHandler: PropTypes.func,
 	tooltipDirection: PropTypes.string,
-	additionalText: PropTypes.object
+	additionalText: PropTypes.object,
+	size: PropTypes.oneOf(["md", "sm"])
 };
 
 export default Toolbar;

package/src/toolbar/toolbar.scss

@@ -35,6 +35,27 @@ $toolbar-divider-width: 1px;
 
 	/* Prevent elements from being dragged onto canvas */
 	-webkit-user-drag: none;
+
+	/* Small size toolbar used by common-properties */
+	&.toolbar-size-small {
+		height: $spacing-07;
+		.toolbar-left-bar {
+			padding: 0;
+		}
+		.toolbar-item button,
+		.toolbar-overflow-item > button {
+			padding: 0;
+			height: $spacing-07;
+		}
+		.toolbar-item-content {
+			padding: $spacing-02 $spacing-03;
+			height: $spacing-07;
+			align-items: center;
+		}
+		.toolbar-popover-list button {
+			padding: 0;
+		}
+	}
 }
 
 .toolbar-left-bar {