@elyra/canvas 12.10.0 → 12.11.0

package/src/context-menu/common-context-menu.jsx

@@ -20,6 +20,7 @@ import PropTypes from "prop-types";
 import { MenuItem, SubMenu } from "react-contextmenu";
 import Icon from "../icons/icon.jsx";
 import { CONTEXT_MENU_CARBON_ICONS } from "../common-canvas/constants/canvas-constants";
+import ColorPickerPanel from "../color-picker/color-picker-panel.jsx";
 
 // context-menu sizing
 const CONTEXT_MENU_WIDTH = 160; // see context-menu.css .react-context-menu margin
@@ -33,6 +34,7 @@ class CommonContextMenu extends React.Component {
 		super(props);
 		this.state = {};
 		this.itemSelected = this.itemSelected.bind(this);
+		this.colorClicked = this.colorClicked.bind(this);
 	}
 
 	onContextMenu(e) {
@@ -48,6 +50,10 @@ class CommonContextMenu extends React.Component {
 		}
 	}
 
+	colorClicked(color) {
+		this.props.contextHandler("colorSelectedObjects", { color });
+	}
+
 	calculateMenuSize(menu) {
 		var numDividers = 0;
 		for (let i = 0; i < menu.length; ++i) {
@@ -129,40 +135,28 @@ class CommonContextMenu extends React.Component {
 
 			} else if (submenu) {
 				previousDivider = false;
-				const submenuItems = this.buildMenu(menuDefinition[i].menu, menuSize, menuPos, canvasRect);
-				const disabled = { disabled: this.areAllSubmenuItemsDisabled(menuDefinition[i].menu) };
-				const submenuSize = this.calculateMenuSize(menuDefinition[i].menu);
-				let rtl = false;
-
-				// Ensure that the combined menu position, plus the menu width,
-				//  plus the submenu width, does not exceed the viewport bounds.
-				if (menuPos.x + menuSize.width + submenuSize.width > canvasRect.right) {
-					rtl = true;
-				}
+				if (menuDefinition[i].menu === "colorPicker") {
+					const disabled = false;
+					const subMenuSize = { width: CONTEXT_MENU_WIDTH, height: 50 };
+					const subMenuContent = this.buildColorPickerPanel();
 
-				// Does the submenu go below the bottom of the viewport?
-				const y = canvasRect.bottom - (menuPos.y + runningYPos + submenuSize.height);
+					const subMenu = this.buildSubMenu(
+						menuDefinition, i, subMenuContent, runningYPos, menuPos, menuSize, subMenuSize, canvasRect, disabled);
+					menuItems.push(subMenu);
 
-				// If submenu is not below the viewport bottom set offset to 0 so the
-				// submenu will not be moved. Otherwise, y will be used to move the
-				// submenu up fully into the view port.
-				const offset = (y > 0) ? 0 : y - EXTRA_OFFSET;
+					runningYPos += CONTEXT_MENU_LINK_HEIGHT;
 
-				const subMenuPosStyle = {
-					top: offset + "px" // Use negative to push the menu up
-				};
+				} else {
+					const disabled = { disabled: this.areAllSubmenuItemsDisabled(menuDefinition[i].menu) };
+					const subMenuSize = this.calculateMenuSize(menuDefinition[i].menu);
+					const subMenuContent = this.buildMenu(menuDefinition[i].menu, menuSize, menuPos, canvasRect);
 
-				const icon = <Icon type={CONTEXT_MENU_CARBON_ICONS.CHEVRONARROWS.RIGHT} disabled={false} className={"react-contextmenu-submenu-icon"} />;
-				const menuItem = <div>{menuDefinition[i].label}{icon} </div>;
+					const subMenu = this.buildSubMenu(
+						menuDefinition, i, subMenuContent, runningYPos, menuPos, menuSize, subMenuSize, canvasRect, disabled);
+					menuItems.push(subMenu);
 
-				menuItems.push(
-					<SubMenu title={menuItem} key={i + 1} className="contextmenu-submenu" rtl={rtl} {...disabled}>
-						<div key={i + 1} style={subMenuPosStyle} className="context-menu-popover">
-							{submenuItems}
-						</div>
-					</SubMenu>
-				);
-				runningYPos += CONTEXT_MENU_LINK_HEIGHT;
+					runningYPos += CONTEXT_MENU_LINK_HEIGHT;
+				}
 
 			} else {
 				previousDivider = false;
@@ -178,6 +172,57 @@ class CommonContextMenu extends React.Component {
 		return menuItems;
 	}
 
+	buildColorPickerPanel() {
+		return (
+			<ColorPickerPanel clickActionHandler={this.colorPickHandler} clickActionHandler={this.colorClicked} />
+		);
+	}
+
+	buildSubMenu(menuDefinition, index, subMenuContent, runningYPos, menuPos,
+		menuSize, subMenuSize, canvasRect, disabled) {
+		const rtl = this.buildRtlState(menuPos, menuSize, subMenuSize, canvasRect);
+		const subMenuPosStyle = this.buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect);
+
+		const icon = <Icon type={CONTEXT_MENU_CARBON_ICONS.CHEVRONARROWS.RIGHT} disabled={false} className={"react-contextmenu-submenu-icon"} />;
+		const menuItem = <div>{menuDefinition[index].label}{icon} </div>;
+
+		return (
+			<SubMenu title={menuItem} key={index + 1} className="contextmenu-submenu" rtl={rtl} {...disabled}>
+				<div key={index + 1} style={subMenuPosStyle} className="context-menu-popover">
+					{subMenuContent}
+				</div>
+			</SubMenu>
+		);
+	}
+
+	// Returns a boolean to indicate whether the submenu should appear on the
+	// right of the context menu (rtl === false) or on the left of the context
+	// menu (rtl === true).
+	buildRtlState(menuPos, menuSize, subMenuSize, canvasRect) {
+		// Ensure that the combined menu position, plus the menu width,
+		//  plus the submenu width, does not exceed the viewport bounds.
+		return (menuPos.x + menuSize.width + subMenuSize.width > canvasRect.right);
+
+	}
+
+	// Returns a style object that can be applied to the sub-menu to adjust
+	// its vertical (y) position. This may be necessary if the submenu is tall
+	// enough that it would be displayed off the bottom of the canvas area.
+	buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect) {
+		// Does the submenu go below the bottom of the viewport?
+		const y = canvasRect.bottom - (menuPos.y + runningYPos + subMenuSize.height);
+
+		// If submenu is not below the viewport bottom set offset to 0 so the
+		// submenu will not be moved. Otherwise, y will be used to move the
+		// submenu up fully into the view port.
+		const offset = (y > 0) ? 0 : y - EXTRA_OFFSET;
+
+		const subMenuPosStyle = {
+			top: offset + "px" // Use negative to push the menu up
+		};
+		return subMenuPosStyle;
+	}
+
 	render() {
 		// Reposition contextMenu so that it does not show off the screen
 		const menuSize = this.calculateMenuSize(this.props.menuDefinition);

package/src/context-menu/context-menu-wrapper.jsx

@@ -83,8 +83,8 @@ export default class ContextMenuWrapper extends React.Component {
 		}
 	}
 
-	contextMenuClicked(action) {
-		this.props.contextMenuActionHandler(action);
+	contextMenuClicked(action, param) {
+		this.props.contextMenuActionHandler(action, param);
 	}
 
 	render() {

package/src/icons/icon.jsx

@@ -19,30 +19,21 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import SVG from "react-inlinesvg";
 
-import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg";
-import ArrangeVertically from "./../../assets/images/arrange_vertically.svg";
 import Double from "./../../assets/images/double.svg";
 import Integer from "./../../assets/images/integer.svg";
 import StringIcon from "./../../assets/images/string.svg";
-import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg";
-import PaletteClose from "./../../assets/images/palette/palette_close.svg";
-import PaletteOpen from "./../../assets/images/palette/palette_open.svg";
-import ZoomToFit from "./../../assets/images/zoom_to_fit.svg";
 
 import { WarningFilled16, ErrorFilled16, CheckmarkFilled16, InformationFilled16, Information16,
 	ChevronDown16, ChevronUp16, ChevronLeft16, ChevronRight16,
-	OverflowMenuVertical16,
 	AddAlt16,
 	Settings16,
 	Search16,
 	Warning16,
 	Edit16,
-	StopFilledAlt16, Play16, Undo16, Redo16, Cut16, Copy16, Paste16, AddComment16, TrashCan16,
-	ZoomIn16, ZoomOut16,
 	CircleDash16, RulerAlt16, ListNumbered16, ListBulleted16, Flag16, ChartVennDiagram16,
 	Calendar16, Time16, EventSchedule16 } from "@carbon/icons-react";
 
-import { ERROR, WARNING, INFO, SUCCESS, CANVAS_CARBON_ICONS, CONTEXT_MENU_CARBON_ICONS, TOOLBAR_ACTIONS } from "../common-canvas/constants/canvas-constants";
+import { ERROR, WARNING, INFO, SUCCESS, CANVAS_CARBON_ICONS, CONTEXT_MENU_CARBON_ICONS } from "../common-canvas/constants/canvas-constants";
 import { CONDITION_MESSAGE_TYPE, CARBON_ICONS, DATA_TYPE } from "../common-properties/constants/constants";
 
 const iconClassName = "properties-icon";
@@ -51,20 +42,14 @@ export default class Icon extends React.Component {
 	constructor() {
 		super();
 		this.canvasIcons = {
-			arrangeHorizontally: ArrangeHorizontally,
-			arrangeVertically: ArrangeVertically,
 			double: Double,
 			integer: Integer,
-			string: StringIcon,
-			toggleNotificationPanel: ToggleNotificationPanel,
-			paletteClose: PaletteClose,
-			paletteOpen: PaletteOpen,
-			zoomToFit: ZoomToFit
+			string: StringIcon
 		};
 	}
 
 	getCarbonIcon(type, customClassName) {
-		const className = this.props.noAddedClasses ? null : iconClassName + " " + customClassName;
+		const className = iconClassName + " " + customClassName;
 
 		switch (type) {
 		case (ERROR):
@@ -97,8 +82,6 @@ export default class Icon extends React.Component {
 		case (CARBON_ICONS.EDIT):
 			return <Edit16 className={className} disabled={this.props.disabled} />;
 
-		case (CANVAS_CARBON_ICONS.OVERFLOWMENU):
-			return <OverflowMenuVertical16 className={className} disabled={this.props.disabled} />;
 		case (CANVAS_CARBON_ICONS.SEARCH):
 			return <Search16 className={className} disabled={this.props.disabled} />;
 		case (CANVAS_CARBON_ICONS.WARNING_UNFILLED):
@@ -107,29 +90,6 @@ export default class Icon extends React.Component {
 		case (CONTEXT_MENU_CARBON_ICONS.CHEVRONARROWS.RIGHT):
 			return <ChevronRight16 className={className} disabled={this.props.disabled} />;
 
-		case (TOOLBAR_ACTIONS.TOOLBAR_STOP):
-			return <StopFilledAlt16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_RUN):
-			return <Play16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_UNDO):
-			return <Undo16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_REDO):
-			return <Redo16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_CUT):
-			return <Cut16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_COPY):
-			return <Copy16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_PASTE):
-			return <Paste16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_CREATE_AUTO_COMMENT):
-			return <AddComment16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_DELETE_SELECTED_OBJECTS):
-			return <TrashCan16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_ZOOM_IN):
-			return <ZoomIn16 className={className} disabled={this.props.disabled} />;
-		case (TOOLBAR_ACTIONS.TOOLBAR_ZOOM_OUT):
-			return <ZoomOut16 className={className} disabled={this.props.disabled} />;
-
 		case (CARBON_ICONS.MEASUREMENTS.EMPTY):
 			return <CircleDash16 className={className} disabled={this.props.disabled} />;
 		case (CARBON_ICONS.MEASUREMENTS.SCALE):
@@ -163,7 +123,7 @@ export default class Icon extends React.Component {
 		if (!icon) {
 			icon = this.getCanvasIcon(this.props.type);
 			if (typeof icon !== "undefined") {
-				const className = this.props.noAddedClasses ? null : classNames("canvas-icon", iconClassName, this.props.className);
+				const className = classNames("canvas-icon", iconClassName, this.props.className);
 				icon = <SVG src={icon} className={className} disabled={this.props.disabled} />;
 			} else {
 				icon = <div />;
@@ -181,6 +141,5 @@ Icon.defaultProps = {
 Icon.propTypes = {
 	type: PropTypes.string.isRequired,
 	className: PropTypes.string,
-	disabled: PropTypes.bool,
-	noAddedClasses: PropTypes.bool
+	disabled: PropTypes.bool
 };

package/src/index.scss

@@ -26,3 +26,4 @@
 @import "./palette/palette.scss";
 @import "./common-canvas/common-canvas.scss";
 @import "./common-canvas/svg-canvas-d3.scss";
+@import "./color-picker/color-picker.scss";

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

@@ -100,6 +100,18 @@ export default class APIPipeline {
 		}, data);
 	}
 
+	addPastedObjects(data) {
+		this.objectModel.executeWithSelectionChange((inData) => {
+			this.store.dispatch({ type: "ADD_PASTED_OBJECTS", data: inData, pipelineId: this.pipelineId });
+		}, data);
+	}
+
+	deletePastedObjects(data) {
+		this.objectModel.executeWithSelectionChange((inData) => {
+			this.store.dispatch({ type: "DELETE_PASTED_OBJECTS", data: inData, pipelineId: this.pipelineId });
+		}, data);
+	}
+
 	// Returns an object containing and array of nodes and an array of comments
 	// that match the array of objectIds passed in.
 	filterNodesAndComments(objectIds) {
@@ -128,6 +140,10 @@ export default class APIPipeline {
 		this.store.dispatch({ type: "SET_OBJECTS_CLASS_NAME", data: { objIds: objectIds, newClassName: newClassName }, pipelineId: this.pipelineId });
 	}
 
+	setObjectsColorClassName(objectIds, newColorClass) {
+		this.store.dispatch({ type: "SET_OBJECTS_COLOR_CLASS_NAME", data: { objIds: objectIds, newColorClass: newColorClass }, pipelineId: this.pipelineId });
+	}
+
 	disconnectObjects(objectIds) {
 		let linksToDelete = [];
 		objectIds.forEach((id) => {
@@ -607,26 +623,16 @@ export default class APIPipeline {
 	}
 
 	getNodes() {
-		const pipeline = this.objectModel.getCanvasInfoPipeline(this.pipelineId);
-		if (pipeline) {
-			return pipeline.nodes;
-		}
-		return [];
+		return this.store.getNodes(this.pipelineId);
 	}
 
 	// Returns the IDs of all nodes in the pipeline.
 	getNodeIds() {
-		const pipeline = this.objectModel.getCanvasInfoPipeline(this.pipelineId);
-		if (pipeline) {
-			return pipeline.nodes.map((node) => node.id);
-		}
-		return [];
+		return this.getNodes().map((n) => n.id);
 	}
 
 	getNode(nodeId) {
-		return this.getNodes().find((node) => {
-			return (node.id === nodeId);
-		});
+		return this.store.getNode(nodeId, this.pipelineId);
 	}
 
 	getSupernodes() {
@@ -634,8 +640,7 @@ export default class APIPipeline {
 	}
 
 	isDataNode(objId) {
-		const node = this.getNode(objId);
-		return (typeof node !== "undefined"); // node will be undefined if objId references a comment
+		return this.getNode(objId);
 	}
 
 	sizeAndPositionObjects(objectsInfo, linksInfo) {
@@ -987,7 +992,6 @@ export default class APIPipeline {
 	createComment(source) {
 		let comment = {
 			id: this.objectModel.getUniqueId(CREATE_COMMENT),
-			class_name: "d3-comment-rect",
 			content: "",
 			height: 42,
 			width: 175,
@@ -1011,9 +1015,6 @@ export default class APIPipeline {
 	}
 
 	addComment(data) {
-		if (typeof data.selectedObjectIds === "undefined") {
-			data.selectedObjectIds = [];
-		}
 		this.store.dispatch({ type: "ADD_COMMENT", data: data, pipelineId: this.pipelineId });
 	}
 
@@ -1058,18 +1059,11 @@ export default class APIPipeline {
 	}
 
 	getComments() {
-		const pipeline = this.objectModel.getCanvasInfoPipeline(this.pipelineId);
-		if (pipeline) {
-			return pipeline.comments;
-		}
-		return [];
-
+		return this.store.getComments(this.pipelineId);
 	}
 
 	getComment(commentId) {
-		return this.getComments().find((comment) => {
-			return (comment.id === commentId);
-		});
+		return this.store.getComment(commentId, this.pipelineId);
 	}
 
 	editComment(data) {
@@ -1233,21 +1227,12 @@ export default class APIPipeline {
 	}
 
 	getLinks() {
-		const pipeline = this.objectModel.getCanvasInfoPipeline(this.pipelineId);
-		if (pipeline) {
-			return pipeline.links;
-		}
-		return [];
-
+		return this.store.getLinks(this.pipelineId);
 	}
 
 	// Returns the IDs of all links in the pipeline.
 	getLinkIds() {
-		const pipeline = this.objectModel.getCanvasInfoPipeline(this.pipelineId);
-		if (pipeline) {
-			return pipeline.links.map((link) => link.id);
-		}
-		return [];
+		return this.getLinks().map((l) => l.id);
 	}
 
 	// Returns an array of links from canvas info links which link
@@ -1419,9 +1404,7 @@ export default class APIPipeline {
 	}
 
 	getLink(linkId) {
-		return this.getLinks().find((link) => {
-			return (link.id === linkId);
-		});
+		return this.store.getLink(linkId, this.pipelineId);
 	}
 
 	setLinkProperties(linkId, linkProperties) {

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

@@ -246,6 +246,7 @@ export default class ObjectModel {
 				: PipelineInHandler.convertPipelinesToCanvasInfoPipelines(pd, this.getCanvasLayout());
 			// Need to make sure pipeline IDs are unique.
 			newPd = this.cloneSupernodeContents(supernode, newPd);
+			newPd = this.prepareNodes(newPd, this.getNodeLayout(), this.getCanvasLayout(), supernode);
 
 		} else {
 			const newPipeline = this.createEmptyPipeline();
@@ -256,6 +257,28 @@ export default class ObjectModel {
 		return supernode;
 	}
 
+	// Returns an object containing nodes and pipelines. The nodes are the
+	// same as the array of nodes passed in except that, any supernodes within
+	// the array will have their app_data.pipeline_data fields removed. The
+	// pipelines returned will be any pipelines that were contained within the
+	// app_data.pipeline_data fields.
+	extractAddDataPipelines(inNodes) {
+		const pipelines = [];
+		const nodes = [];
+		inNodes.forEach((n) => {
+			if (CanvasUtils.isSupernode(n)) {
+				const pDataArray = get(n, "app_data.pipeline_data");
+				if (pDataArray) {
+					pipelines.push(...pDataArray);
+					delete n.app_data.pipeline_data;
+				}
+			}
+			nodes.push(n);
+		});
+
+		return { nodes, pipelines };
+	}
+
 	getPaletteNode(nodeOpIdRef) {
 		let outNodeType = null;
 		if (nodeOpIdRef && !isEmpty(this.getPaletteData())) {
@@ -1636,7 +1659,9 @@ export default class ObjectModel {
 	setSelections(newSelections, pipelineId) {
 		// This will return the default API pipeline if a pipelineId is not provided.
 		const selPipelineId = this.getAPIPipeline(pipelineId).pipelineId;
-		this.executeWithSelectionChange(this.store.dispatch, { type: "SET_SELECTIONS", data: { pipelineId: selPipelineId, selections: newSelections } });
+		this.executeWithSelectionChange(
+			this.store.dispatch, { type: "SET_SELECTIONS", data: { selections: newSelections }, pipelineId: selPipelineId }
+		);
 	}
 
 	deleteSelectedObjects() {
@@ -1732,11 +1757,10 @@ export default class ObjectModel {
 		return connectedNodesIdsGroup.length === nodeIds.length;
 	}
 
-	// Returns true if all the selected objcts are links.
+	// Returns true if all the selected objects are links.
 	areAllSelectedObjectsLinks() {
 		const nonLinkIndex = this.getSelectedObjects().findIndex((selObj) => !this.isLink(selObj));
 		return nonLinkIndex === -1;
-
 	}
 
 	// Recursive function to add all connected nodes into the group.

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

@@ -105,6 +105,74 @@ export default class CanavasStore {
 		return cloneDeep(this.store.getState().canvasinfo);
 	}
 
+	// 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
+	// the outside world.
+	getNonClonedPipeline(pipelineId) {
+		return this.store.getState().canvasinfo.pipelines.find((p) => p.id === pipelineId);
+	}
+
+	getNodes(pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+		if (pipeline && pipeline.nodes) {
+			return cloneDeep(pipeline.nodes);
+		}
+		return [];
+	}
+
+	getNode(nodeId, pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+		let node = null;
+		if (pipeline && pipeline.nodes) {
+			const internalNode = pipeline.nodes.find((n) => (n.id === nodeId));
+			if (internalNode) {
+				node = cloneDeep(internalNode);
+			}
+		}
+		return node;
+	}
+
+	getComments(pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+		if (pipeline && pipeline.comments) {
+			return cloneDeep(pipeline.comments);
+		}
+		return [];
+	}
+
+	getComment(commentId, pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+		let com = null;
+		if (pipeline && pipeline.comments) {
+			const internalCom = pipeline.comments.find((c) => (c.id === commentId));
+			if (internalCom) {
+				com = cloneDeep(internalCom);
+			}
+		}
+		return com;
+	}
+
+	getLinks(pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+		if (pipeline && pipeline.links) {
+			return cloneDeep(pipeline.links);
+		}
+		return [];
+	}
+
+	getLink(linkId, pipelineId) {
+		const pipeline = this.getNonClonedPipeline(pipelineId);
+		let link = null;
+		if (pipeline && pipeline.links) {
+			const internalLink = pipeline.links.find((l) => (l.id === linkId));
+			if (internalLink) {
+				link = cloneDeep(internalLink);
+			}
+		}
+		return link;
+	}
+
 	getBreadcrumbs() {
 		return cloneDeep(this.store.getState().breadcrumbs);
 	}

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

@@ -162,6 +162,7 @@ export default (state = {}, action) => {
 	case "REMOVE_NODE_ATTR":
 	case "SET_NODE_LABEL":
 	case "SET_OBJECTS_CLASS_NAME":
+	case "SET_OBJECTS_COLOR_CLASS_NAME":
 	case "SET_INPUT_PORT_LABEL":
 	case "SET_OUTPUT_PORT_LABEL":
 	case "SET_INPUT_PORT_SUBFLOW_NODE_REF":
@@ -236,6 +237,7 @@ export default (state = {}, action) => {
 		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
 	}
 
+	case "ADD_PASTED_OBJECTS":
 	case "ADD_AND_UPDATE_OBJECTS": {
 		let canvasInfoPipelines = state.pipelines
 			.map((pipeline) => {
@@ -277,6 +279,36 @@ export default (state = {}, action) => {
 		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
 	}
 
+	case "DELETE_PASTED_OBJECTS": {
+		const canvasInfoPipelines = state.pipelines
+			// Filter out the pipelines to delete
+			.filter((pipeline) => (!isPipelineToDelete(pipeline, action.data.pipelinesToDelete)))
+			// Modify the pipeline to remove nodes, comments and links
+			.map((pipeline) => {
+				if (pipeline.id === action.pipelineId) {
+					// Remove pasted nodes
+					const newNodes = nodes(pipeline.nodes,
+						{ type: "DELETE_NODES", data: action.data });
+
+					// Remove pasted comments
+					const newComments = comments(pipeline.comments,
+						{ type: "DELETE_COMMENTS", data: action.data });
+
+					// Remove pasted links
+					const newLinks = links(pipeline.links,
+						{ type: "REMOVE_LINKS", data: action.data });
+
+					return Object.assign({}, pipeline, {
+						nodes: newNodes,
+						comments: newComments,
+						links: newLinks });
+				}
+				return pipeline;
+			});
+
+		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
+	}
+
 	case "SET_SUPERNODE_EXPAND_STATE": {
 		const canvasInfoPipelines = state.pipelines
 			.map((pipeline) => {
@@ -476,3 +508,7 @@ export default (state = {}, action) => {
 		return state;
 	}
 };
+
+function isPipelineToDelete(pipeline, pipelinesToDelete) {
+	return (pipelinesToDelete.some((p) => p.id === pipeline.id));
+}