@elyra/canvas 12.10.1 → 12.11.1

package/src/color-picker/color-picker-panel.jsx

@@ -0,0 +1,61 @@
+/*
+ * 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 Logger from "../logging/canvas-logger.js";
+
+
+class ColorPickerPanel extends React.Component {
+	constructor(props) {
+		super(props);
+		this.logger = new Logger("CC-ContextMenu");
+
+		this.onClick = this.onClick.bind(this);
+	}
+
+	onClick(evt) {
+		const color = evt.target.dataset.color;
+		this.props.clickActionHandler(color);
+	}
+
+	render() {
+		this.logger.log("render");
+		return (
+			<div className="color-picker-panel" onClick={this.onClick}>
+				<div tabIndex="0" data-color={"bkg-col-white-0"} className="color-picker-item white-0" />
+				<div tabIndex="0" data-color={"bkg-col-yellow-20"} className="color-picker-item yellow-20" />
+				<div tabIndex="0" data-color={"bkg-col-gray-20"} className="color-picker-item gray-20" />
+				<div tabIndex="0" data-color={"bkg-col-green-20"} className="color-picker-item green-20" />
+				<div tabIndex="0" data-color={"bkg-col-teal-20"} className="color-picker-item teal-20" />
+				<div tabIndex="0" data-color={"bkg-col-cyan-20"} className="color-picker-item cyan-20" />
+
+				<div tabIndex="0" data-color={"bkg-col-red-50"} className="color-picker-item red-50" />
+				<div tabIndex="0" data-color={"bkg-col-orange-40"} className="color-picker-item orange-40" />
+				<div tabIndex="0" data-color={"bkg-col-gray-50"} className="color-picker-item gray-50" />
+				<div tabIndex="0" data-color={"bkg-col-green-50"} className="color-picker-item green-50" />
+				<div tabIndex="0" data-color={"bkg-col-teal-50"} className="color-picker-item teal-50" />
+				<div tabIndex="0" data-color={"bkg-col-cyan-50"} className="color-picker-item cyan-50" />
+			</div>);
+	}
+}
+
+ColorPickerPanel.propTypes = {
+	clickActionHandler: PropTypes.func.isRequired,
+	closeMenu: PropTypes.func
+};
+
+export default ColorPickerPanel;

package/src/color-picker/color-picker.jsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { OverflowMenu } from "carbon-components-react";
+import { ColorPalette32 } from "@carbon/icons-react";
+import ColorPickerPanel from "./color-picker-panel";
+
+class ColorPicker extends React.Component {
+	render() {
+		return (
+			<OverflowMenu renderIcon={ColorPalette32} className="color-menu">
+				<ColorPickerPanel clickActionHandler={this.props.clickActionHandler} />
+			</OverflowMenu>
+		);
+	}
+}
+
+ColorPicker.propTypes = {
+	clickActionHandler: PropTypes.func.isRequired
+};
+
+export default ColorPicker;

package/src/color-picker/color-picker.scss

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2017-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 "carbon-components/scss/globals/scss/_vars";
+
+.color-picker-panel {
+	width: 100%;
+	height: 55px;
+	display: flex;
+	flex-wrap: wrap;
+
+	.color-picker-item {
+		width: 20px;
+		height: 20px;
+		margin: 5px 0 0 5px;
+		cursor: pointer;
+		&.white-0 {
+			background-color: $white-0;
+			border: 1px solid $gray-50;
+		}
+		&.yellow-20 { background-color: $yellow-20; }
+		&.gray-20 { background-color: $gray-20; }
+		&.green-20 { background-color: $green-20; }
+		&.teal-20 { background-color: $teal-20; }
+		&.cyan-20 { background-color: $cyan-20; }
+		&.red-50 { background-color: $red-50; }
+		&.orange-40 { background-color: $orange-40; }
+		&.gray-50 { background-color: $gray-50; }
+		&.green-50 { background-color: $green-50; }
+		&.teal-50 { background-color: $teal-50; }
+		&.cyan-50 { background-color: $cyan-50; }
+	}
+}

package/src/command-actions/colorSelectedObjectsAction.js

@@ -0,0 +1,72 @@
+/*
+ * 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 Action from "../command-stack/action.js";
+import CanvasUtils from "../common-canvas/common-canvas-utils.js";
+
+export default class ColorSelectedObjectsAction extends Action {
+	constructor(data, objectModel, labelUtil) {
+		super(data);
+		this.data = data;
+		this.objectModel = objectModel;
+		this.labelUtil = labelUtil;
+		this.apiPipeline = this.objectModel.getAPIPipeline(data.pipelineId);
+		this.oldIds = this.data.selectedObjects.map((o) => o.id); // Copy the IDs
+		this.oldColors = this.getOldColors();
+		this.actionLabel = this.createActionLabel();
+	}
+
+	// Standard methods
+	do() {
+		this.apiPipeline.setObjectsColorClassName(this.oldIds, this.data.editParam.color);
+	}
+
+	undo() {
+		this.apiPipeline.setObjectsColorClassName(this.oldIds, this.oldColors);
+	}
+
+	redo() {
+		this.do();
+	}
+
+	getLabel() {
+		return this.actionLabel;
+	}
+
+	createActionLabel() {
+		return this.labelUtil.getActionLabel(this, "action.colorComments", {
+			comments_count: this.data.selectedObjectIds.length
+		});
+	}
+
+	getOldColors() {
+		const oldColors = [];
+		this.data.selectedObjects.forEach((o) => {
+			oldColors.push(this.getObjectColorClass(o));
+		});
+		return oldColors;
+	}
+
+	getObjectColorClass(o) {
+		if (o.class_name) {
+			const classes = o.class_name.split(" ");
+			if (classes) {
+				const colorClass = classes.find((c) => CanvasUtils.getBkgColorClass(c));
+				return colorClass;
+			}
+		}
+		return "";
+	}
+}

package/src/command-actions/deleteObjectsAction.js

@@ -172,16 +172,21 @@ export default class DeleteObjectsAction extends Action {
 	}
 
 	createActionLabel() {
-		if (this.areDetachableLinksSupported) {
-			return this.labelUtil.getActionLabel(this, "action.deleteNodesCommentsLinks",
-				{ nodes_count: this.nodesToDelete.length + this.supernodesToDelete.length,
-					comments_count: this.commentsToDelete.length,
-					links_count: this.linksToDelete.length
-				});
-		}
-		return this.labelUtil.getActionLabel(this, "action.deleteNodesComments", {
-			nodes_count: this.nodesToDelete.length + this.supernodesToDelete.length,
-			comments_count: this.commentsToDelete.length
-		});
+		const stringsList = [
+			{ label: "Nodes", val: this.nodesToDelete.length + this.supernodesToDelete.length },
+			{ label: "Comments", val: this.commentsToDelete.length },
+			{ label: "Links", val: this.linksToDelete.length }
+		];
+		const dynamicStringKey = "action.delete" + stringsList
+			.filter((v) => v.val)
+			.map((o) => o.label)
+			.join("");
+
+		return this.labelUtil.getActionLabel(this, dynamicStringKey,
+			{
+				nodes_count: this.nodesToDelete.length + this.supernodesToDelete.length,
+				comments_count: this.commentsToDelete.length,
+				links_count: this.linksToDelete.length
+			});
 	}
 }

package/src/command-actions/pasteAction.js

@@ -35,6 +35,14 @@ export default class PasteAction extends Action {
 		// with IDs the same as those already on the canvas.
 		this.clones = this.objectModel.cloneObjectsToPaste(
 			data.objects.nodes, data.objects.comments, data.objects.links);
+
+		const { nodes, pipelines } = this.objectModel.extractAddDataPipelines(this.clones.clonedNodes);
+		this.clones.clonedNodes = nodes;
+		this.pipelines = pipelines;
+
+		// Get the IDs of the objects to be selected after they are pasted. We
+		// automatically select pasted objects so they are easy to move by the user.
+		this.selectionIds = this.getSelectionIds(this.clones);
 	}
 
 	// Adjusts the positions of the cloned objects appropriately. If the data
@@ -121,6 +129,25 @@ export default class PasteAction extends Action {
 		}
 	}
 
+	// Return the IDs of the cloned objects to be selected after the
+	// paste is complete.
+	getSelectionIds(clones) {
+		const selectionIds = [];
+
+		clones.clonedNodes.forEach((cn) => {
+			selectionIds.push(cn.id);
+		});
+
+		clones.clonedComments.forEach((cc) => {
+			selectionIds.push(cc.id);
+		});
+
+		if (this.areDetachableLinksInUse) {
+			clones.clonedLinks.forEach((cl) => selectionIds.push(cl.id));
+		}
+		return selectionIds;
+	}
+
 	// Return augmented command object which will be passed to the
 	// client app.
 	getData() {
@@ -132,31 +159,33 @@ export default class PasteAction extends Action {
 
 	// Standard methods
 	do() {
-		const addedObjectIds = [];
-
-		this.clones.clonedNodes.forEach((cn) => {
-			this.apiPipeline.addNode(cn);
-			addedObjectIds.push(cn.id);
+		this.apiPipeline.addPastedObjects({
+			nodesToAdd: this.clones.clonedNodes,
+			commentsToAdd: this.clones.clonedComments,
+			linksToAdd: this.clones.clonedLinks,
+			pipelinesToAdd: this.pipelines,
+			selections: this.selectionIds
 		});
-
-		this.clones.clonedComments.forEach((cc) => {
-			this.apiPipeline.addComment(cc);
-			addedObjectIds.push(cc.id);
-		});
-
-
-		this.apiPipeline.addLinks(this.clones.clonedLinks);
-		if (this.areDetachableLinksInUse) {
-			this.clones.clonedLinks.forEach((cl) => addedObjectIds.push(cl.id));
-		}
-
-		this.objectModel.setSelections(addedObjectIds, this.apiPipeline.pipelineId);
 	}
 
 	undo() {
-		this.apiPipeline.deleteNodes(this.clones.clonedNodes);
-		this.apiPipeline.deleteComments(this.clones.clonedComments);
-		this.apiPipeline.deleteLinks(this.clones.clonedLinks);
+		// External pipelines may have been loaded in the do() function so we
+		// retrieve a full set of pipelines to delete from the object model.
+		const supernodes = CanvasUtils.filterSupernodes(this.clones.clonedNodes);
+		const pipelines = this.objectModel.getDescPipelinesToDelete(supernodes, this.data.pipelineId);
+
+		// We can also retrieve any external pipeline flows that might have been
+		// loaded while executing the do() method.
+		const oldExtPipelineFlows =
+			this.objectModel.getExternalPipelineFlowsForPipelines(pipelines);
+
+		this.apiPipeline.deletePastedObjects({
+			nodesToDelete: this.clones.clonedNodes,
+			commentsToDelete: this.clones.clonedComments,
+			linksToDelete: this.clones.clonedLinks,
+			pipelinesToDelete: pipelines,
+			extPipelineFlowsToDelete: oldExtPipelineFlows
+		});
 	}
 
 	redo() {

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

@@ -30,6 +30,7 @@ import CreateNodeOnLinkAction from "../command-actions/createNodeOnLinkAction.js
 import CreateNodeAttachLinksAction from "../command-actions/createNodeAttachLinksAction.js";
 import CreateSuperNodeAction from "../command-actions/createSuperNodeAction.js";
 import CollapseSuperNodeInPlaceAction from "../command-actions/collapseSuperNodeInPlaceAction.js";
+import ColorSelectedObjectsAction from "../command-actions/colorSelectedObjectsAction.js";
 import DeconstructSuperNodeAction from "../command-actions/deconstructSuperNodeAction.js";
 import DeleteLinkAction from "../command-actions/deleteLinkAction.js";
 import DeleteObjectsAction from "../command-actions/deleteObjectsAction.js";
@@ -67,7 +68,8 @@ export default class CanvasController {
 			defaultMenuEntries: {
 				saveToPalette: false,
 				createSupernode: true,
-				displaySupernodeFullPage: true
+				displaySupernodeFullPage: true,
+				colorBackground: true
 			}
 		};
 
@@ -171,7 +173,10 @@ export default class CanvasController {
 
 	setContextMenuConfig(contextMenuConfig) {
 		this.logger.log("Setting Context Menu Config");
-		this.contextMenuConfig = Object.assign(this.contextMenuConfig, contextMenuConfig);
+		if (contextMenuConfig) {
+			const defaultMenuEntries = Object.assign(this.contextMenuConfig.defaultMenuEntries, contextMenuConfig.defaultMenuEntries);
+			this.contextMenuConfig = Object.assign(this.contextMenuConfig, contextMenuConfig, { defaultMenuEntries });
+		}
 	}
 
 	setKeyboardConfig(keyboardConfig) {
@@ -1583,8 +1588,19 @@ export default class CanvasController {
 		return null;
 	}
 
-	setDragNodeTemplate(nodeTemplate) {
+	nodeTemplateDragStart(nodeTemplate) {
 		CanvasController.dragNodeTemplate = nodeTemplate;
+
+		if (this.canvasContents) {
+			this.getSVGCanvasD3().nodeTemplateDragStart(CanvasController.dragNodeTemplate);
+		}
+	}
+
+	nodeTemplateDragEnd() {
+		if (this.canvasContents && CanvasController.dragNodeTemplate) {
+			this.getSVGCanvasD3().nodeTemplateDragEnd(CanvasController.dragNodeTemplate);
+		}
+		CanvasController.dragNodeTemplate = null;
 	}
 
 	getDragNodeTemplate() {
@@ -1897,6 +1913,12 @@ export default class CanvasController {
 				menuDefinition = menuDefinition.concat({ divider: true });
 			}
 		}
+		// Color objects
+		if (source.type === "comment" &&
+				get(this, "contextMenuConfig.defaultMenuEntries.colorBackground", true)) {
+			menuDefinition = menuDefinition.concat({ submenu: true, menu: "colorPicker", label: this.labelUtil.getLabel("comment.colorBackground") });
+			menuDefinition = menuDefinition.concat({ divider: true });
+		}
 		// Edit submenu (cut, copy, paste)
 		if (source.type === "node" ||
 				source.type === "comment" ||
@@ -2099,10 +2121,10 @@ export default class CanvasController {
 		return { x: 0, y: 0 };
 	}
 
-	contextMenuActionHandler(action) {
+	contextMenuActionHandler(action, editParam) {
 		this.logger.log("contextMenuActionHandler - action: " + action);
 		this.logger.log(this.contextMenuSource);
-		const data = Object.assign({}, this.contextMenuSource, { "editType": action, "editSource": "contextmenu" });
+		const data = Object.assign({}, this.contextMenuSource, { "editType": action, "editParam": editParam, "editSource": "contextmenu" });
 		this.editActionHandler(data);
 
 		this.canvasContents.focusOnCanvas(); // Set focus on canvas so keybord events go there.
@@ -2357,6 +2379,11 @@ export default class CanvasController {
 				data = command.getData();
 				break;
 			}
+			case "colorSelectedObjects": {
+				command = new ColorSelectedObjectsAction(data, this.objectModel, this.labelUtil);
+				this.commandStack.do(command);
+				break;
+			}
 			case "deleteSelectedObjects": {
 				command = new DeleteObjectsAction(data, this.objectModel, this.labelUtil, this.areDetachableLinksInUse());
 				this.commandStack.do(command);

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

@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-/* eslint no-shadow: ["error", { "allow": ["Node", "Comment"] }] */
-
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { injectIntl } from "react-intl";
 import Logger from "../logging/canvas-logger.js";
 
 class CanvasBottomPanel extends React.Component {
@@ -30,50 +27,55 @@ class CanvasBottomPanel extends React.Component {
 			panelHeight: 393
 		};
 
-		this.resizing = false;
 		this.logger = new Logger("CC-Bottom-Panel");
 
-		this.startResize = this.startResize.bind(this);
-		this.stopResize = this.stopResize.bind(this);
-		this.resize = this.resize.bind(this);
-	}
-
-	componentDidMount() {
-		// document.addEventListener("mouseup", this.stopResize, true);
+		this.onMouseUp = this.onMouseUp.bind(this);
+		this.onMouseDown = this.onMouseDown.bind(this);
+		this.onMouseMoveY = this.onMouseMoveY.bind(this);
 	}
 
-	componentWillUnmount() {
-		// document.removeEventListener("mouseup", this.stopResize, true);
-	}
-
-	startResize(evt) {
-		this.resizing = true;
+	onMouseDown(e) {
+		if (e.button === 0) {
+			document.addEventListener("mousemove", this.onMouseMoveY, true);
+			document.addEventListener("mouseup", this.onMouseUp, true);
+			this.poseY = e.clientY;
+		}
 	}
 
-	stopResize(evt) {
-		this.resizing = false;
+	onMouseUp(e) {
+		document.removeEventListener("mousemove", this.onMouseMoveY, true);
+		document.removeEventListener("mouseup", this.onMouseUp, true);
 	}
 
-	resize(evt) {
-		if (this.resizing) {
-			this.setState({ "panelHeight": this.state.panelHeight + evt.movementY });
+	onMouseMoveY(e) {
+		if (e.clientY) {
+			const diff = e.clientY - this.poseY;
+			this.setState({
+				panelHeight: this.state.panelHeight - diff
+			});
+			this.poseY = e.clientY;
 		}
 	}
-
 	render() {
 		this.logger.log("render");
-
 		let bottomPanel = null;
 
-		const styleObj = {
-			height: this.state.panelHeight + "px"
-			// transition: transitionVariable,
-		};
-
 		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;
+
 			bottomPanel = (
-				<div className={"bottom-panel"} style={styleObj}>
-					{this.props.bottomPanelContent}
+				<div className="bottom-panel" style={{ height }} >
+					<div className="bottom-panel-drag" onMouseDown={this.onMouseDown} />
+					<div className="bottom-panel-contents">
+						{this.props.bottomPanelContent}
+					</div>
 				</div>
 			);
 		}
@@ -83,10 +85,6 @@ class CanvasBottomPanel extends React.Component {
 }
 
 CanvasBottomPanel.propTypes = {
-	// Provided by CommonCanvas
-	intl: PropTypes.object.isRequired,
-	canvasController: PropTypes.object.isRequired,
-
 	// Provided by Redux
 	bottomPanelIsOpen: PropTypes.bool,
 	bottomPanelContent: PropTypes.object
@@ -96,5 +94,4 @@ const mapStateToProps = (state, ownProps) => ({
 	bottomPanelIsOpen: state.bottompanel.isOpen,
 	bottomPanelContent: state.bottompanel.content
 });
-
-export default connect(mapStateToProps)(injectIntl(CanvasBottomPanel));
+export default connect(mapStateToProps)(CanvasBottomPanel);