@elyra/canvas 12.10.2 → 12.11.2

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) => {
@@ -291,7 +307,7 @@ export default class APIPipeline {
 	createNode(data) {
 		let nodeTemplate = data.nodeTemplate;
 		// If the nodeTemplate has app_data.ui_data field then it will be a
-		// teamplate that conforms to the pipelineFlow schema and needs to be
+		// template that conforms to the pipelineFlow schema and needs to be
 		// converted to the internal format for a node.
 		if (has(data.nodeTemplate, "app_data.ui_data")) {
 			nodeTemplate = this.objectModel.convertNodeTemplate(nodeTemplate);
@@ -624,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) {
@@ -977,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,
@@ -1001,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 });
 	}
 

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/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));
+}

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

@@ -15,6 +15,9 @@
  */
 /* eslint arrow-body-style: ["off"] */
 
+
+import CanvasUtils from "../../../common-canvas/common-canvas-utils.js";
+
 export default (state = [], action) => {
 	switch (action.type) {
 	case "MOVE_OBJECTS":
@@ -53,15 +56,7 @@ export default (state = [], action) => {
 
 
 	case "ADD_COMMENT": {
-		const newComment = {
-			id: action.data.id,
-			class_name: action.data.class_name,
-			content: action.data.content,
-			height: action.data.height,
-			width: action.data.width,
-			x_pos: action.data.x_pos,
-			y_pos: action.data.y_pos
-		};
+		const newComment = getCommentFromData(action.data);
 		return [
 			...state,
 			newComment
@@ -69,9 +64,10 @@ export default (state = [], action) => {
 	}
 
 	case "ADD_COMMENTS": {
+		const comments = action.data.commentsToAdd.map((cd) => getCommentFromData(cd));
 		return [
 			...state,
-			...action.data.commentsToAdd
+			...comments
 		];
 	}
 
@@ -139,6 +135,20 @@ export default (state = [], action) => {
 			return comment;
 		});
 
+	case "SET_OBJECTS_COLOR_CLASS_NAME":
+		return state.map((comment) => {
+			const idx = action.data.objIds.indexOf(comment.id);
+			if (idx > -1) {
+				const newColorClass =
+					Array.isArray(action.data.newColorClass) ? (action.data.newColorClass[idx] || null) : action.data.newColorClass;
+				const className = replaceColorClass(comment.class_name, newColorClass);
+				const newComment = Object.assign({}, comment, { class_name: className });
+				return newComment;
+			}
+			return comment;
+		});
+
+
 	case "SET_OBJECTS_CLASS_NAME":
 		return state.map((comment) => {
 			const idx = action.data.objIds.indexOf(comment.id);
@@ -201,3 +211,41 @@ export default (state = [], action) => {
 		return state;
 	}
 };
+
+function replaceColorClass(className, newColorClass) {
+	let cn = "";
+	if (className) {
+		cn = removeCurrentColorClass(className);
+		cn = addNewColorClass(cn, newColorClass);
+	} else {
+		cn = newColorClass;
+	}
+	return cn;
+}
+
+function removeCurrentColorClass(className) {
+	const cn = className
+		.split(" ")
+		.filter((tok) => !CanvasUtils.getBkgColorClass(tok))
+		.join(" ");
+	return cn;
+}
+
+function addNewColorClass(className, newColorClass) {
+	return className ? className + " " + newColorClass : newColorClass;
+}
+
+function getCommentFromData(data) {
+	const newComment = {
+		id: data.id,
+		content: data.content,
+		height: data.height,
+		width: data.width,
+		x_pos: data.x_pos,
+		y_pos: data.y_pos
+	};
+	if (typeof data.class_name !== "undefined") {
+		newComment.class_name = data.class_name;
+	}
+	return newComment;
+}

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

@@ -46,6 +46,7 @@ export default (state = [], action) => {
 		return [...state, ...action.data.extPipelineFlowsToAdd];
 	}
 
+	case "DELETE_PASTED_OBJECTS":
 	case "DELETE_OBJECTS_AND_UPDATE":
 	case "DELETE_SUPERNODES": {
 		return state.filter((epf) => {

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

@@ -287,14 +287,16 @@ export default (state = [], action) => {
 	// to each of the selected nodes.
 	case "ADD_COMMENT": {
 		const createdLinks = [];
-		action.data.selectedObjectIds.forEach((objId, i) => {
-			createdLinks.push({
-				id: action.data.linkIds[i],
-				srcNodeId: action.data.id,
-				trgNodeId: action.data.selectedObjectIds[i],
-				type: COMMENT_LINK
+		if (action.data.selectedObjectIds) {
+			action.data.selectedObjectIds.forEach((objId, i) => {
+				createdLinks.push({
+					id: action.data.linkIds[i],
+					srcNodeId: action.data.id,
+					trgNodeId: action.data.selectedObjectIds[i],
+					type: COMMENT_LINK
+				});
 			});
-		});
+		}
 		return [
 			...state,
 			...createdLinks

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

@@ -29,9 +29,10 @@ export default (state = {}, action) => {
 	case "CLEAR_SELECTIONS":
 		return {};
 
+	case "ADD_PASTED_OBJECTS":
 	case "SET_SELECTIONS":
 		return {
-			pipelineId: action.data.pipelineId,
+			pipelineId: action.pipelineId,
 			selections: [...action.data.selections]
 		};
 

package/src/palette/palette-content-list-item.jsx

@@ -42,6 +42,7 @@ class PaletteContentListItem extends React.Component {
 		this.showShortDescription = this.showShortDescription.bind(this);
 
 		this.onDragStart = this.onDragStart.bind(this);
+		this.onDragEnd = this.onDragEnd.bind(this);
 		this.onDoubleClick = this.onDoubleClick.bind(this);
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -61,7 +62,7 @@ class PaletteContentListItem extends React.Component {
 		// We cannot use the dataTransfer object for the nodeTemplate because
 		// the dataTransfer data is not available during dragOver events so we set
 		// the nodeTemplate into the canvas controller.
-		this.props.canvasController.setDragNodeTemplate(this.props.nodeTypeInfo.nodeType);
+		this.props.canvasController.nodeTemplateDragStart(this.props.nodeTypeInfo.nodeType);
 
 		// On firefox, the drag will not start unless something is written to
 		// the dataTransfer object so just write an empty string
@@ -72,6 +73,11 @@ class PaletteContentListItem extends React.Component {
 		}
 	}
 
+	// This is needed in-case the drag ends somewhere other than the canvas area.
+	onDragEnd() {
+		this.props.canvasController.nodeTemplateDragEnd();
+	}
+
 	onDoubleClick() {
 		if (this.props.canvasController.createAutoNode) {
 			this.props.canvasController.createAutoNode(this.props.nodeTypeInfo.nodeType);
@@ -295,6 +301,7 @@ class PaletteContentListItem extends React.Component {
 				onMouseLeave={this.onMouseLeave}
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
+				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 			>
 				{categoryLabel}

package/src/palette/palette-dialog-content-grid-node.jsx

@@ -36,6 +36,7 @@ class PaletteDialogContentGridNode extends React.Component {
 		this.ghostData = null;
 
 		this.onDragStart = this.onDragStart.bind(this);
+		this.onDragEnd = this.onDragEnd.bind(this);
 		this.onDoubleClick = this.onDoubleClick.bind(this);
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -55,7 +56,7 @@ class PaletteDialogContentGridNode extends React.Component {
 		// We cannot use the dataTransfer object for the nodeTemplate because
 		// the dataTransfer data is not available during dragOver events so we set
 		// the nodeTemplate into the canvas controller.
-		this.props.canvasController.setDragNodeTemplate(this.props.nodeTemplate);
+		this.props.canvasController.nodeTemplateDragStart(this.props.nodeTemplate);
 
 		// On firefox, the drag will not start unless something is written to
 		// the dataTransfer object so just write an empty string
@@ -66,6 +67,11 @@ class PaletteDialogContentGridNode extends React.Component {
 		}
 	}
 
+	// This is needed in-case the drag ends somewhere other than the canvas area.
+	onDragEnd() {
+		this.props.canvasController.nodeTemplateDragEnd();
+	}
+
 	onDoubleClick() {
 		if (this.props.canvasController.createAutoNode) {
 			this.props.canvasController.createAutoNode(this.props.nodeTemplate);
@@ -134,6 +140,7 @@ class PaletteDialogContentGridNode extends React.Component {
 				onMouseLeave={this.onMouseLeave}
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
+				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 				className="palette-dialog-grid-node-outer"
 			>