@elyra/canvas 12.9.0 → 12.10.2

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * 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.
@@ -66,7 +66,8 @@ export default class CanvasController {
 			enableCreateSupernodeNonContiguous: false,
 			defaultMenuEntries: {
 				saveToPalette: false,
-				createSupernode: true
+				createSupernode: true,
+				displaySupernodeFullPage: true
 			}
 		};
 
@@ -100,8 +101,9 @@ export default class CanvasController {
 		this.objectModel = new ObjectModel();
 		this.commandStack = new CommandStack();
 
-		// Cretae a util object to serve up translated messages when needed.
-		// The intl object will be provded to it when we get ot from common-canvas.jsx.
+		// Create a util object to serve up translated messages when needed.
+		// The intl object will be provided to labelUtil when we get it from
+		// common-canvas.jsx.
 		this.labelUtil = new LabelUtil();
 
 		// The following two functions must bind to this so that the correct canvas
@@ -1995,7 +1997,52 @@ export default class CanvasController {
 			menuDefinition = menuDefinition.concat({ divider: true },
 				{ action: "saveToPalette", label: this.labelUtil.getLabel("node.saveToPalette") });
 		}
-		return (menuDefinition);
+
+		return menuDefinition;
+	}
+
+	// Returns a new menu based, on the menu passed in, where all actions that
+	// might alter the canvas have been removed.
+	filterOutEditingActions(menuDefinition) {
+		const newMenuDefinition = [];
+		menuDefinition.forEach((menuEntry) => {
+			if (menuEntry.submenu) {
+				const newSubMenu = this.filterOutEditingActions(menuEntry.menu);
+				if (newSubMenu && newSubMenu.length > 0) {
+					menuEntry.menu = newSubMenu;
+					newMenuDefinition.push(menuEntry);
+				}
+
+			} else if (!this.isEditingAction(menuEntry.action)) {
+				newMenuDefinition.push(menuEntry);
+			}
+		});
+		return newMenuDefinition;
+	}
+
+	// Returns true if the action string passed in is one of the actions
+	// that would alter the canvas objects. This is useful for filtering
+	// out editing actions that should be unavailable with a read-only canvas.
+	isEditingAction(action) {
+		return (
+			action === "createComment" ||
+			action === "disconnectNode" ||
+			action === "cut" ||
+			action === "copy" ||
+			action === "paste" ||
+			action === "undo" ||
+			action === "redo" ||
+			action === "deleteSelectedObjects" ||
+			action === "createSuperNode" ||
+			action === "createSuperNodeExternal" ||
+			action === "deconstructSuperNode" ||
+			action === "collapseSuperNodeInPlace" ||
+			action === "expandSuperNodeInPlace" ||
+			action === "convertSuperNodeExternalToLocal" ||
+			action === "convertSuperNodeLocalToExternal" ||
+			action === "deleteLink" ||
+			action === "saveToPalette"
+		);
 	}
 
 	// Returns whether the 'Create Supernode' context menu option is required or
@@ -2011,16 +2058,38 @@ export default class CanvasController {
 	}
 
 	contextMenuHandler(source) {
-		const defMenu = this.createDefaultMenu(source);
 		this.contextMenuSource = source;
+		const defMenu = this.createDefaultMenu(source);
+		let menuDefinition;
+
 		if (typeof this.handlers.contextMenuHandler === "function") {
-			const menuDef = this.handlers.contextMenuHandler(source, defMenu);
-			if (menuDef && menuDef.length > 0) {
-				this.openContextMenu(menuDef);
+			const menuCustom = this.handlers.contextMenuHandler(source, defMenu);
+			if (menuCustom && menuCustom.length > 0) {
+				menuDefinition = menuCustom;
 			}
 		} else {
-			this.openContextMenu(defMenu);
+			menuDefinition = defMenu;
+		}
+
+		// If we are NOT allowing editing actions (perhaps because we are showing a
+		// read-only canvas), remove any actions from the context menu that might
+		// alter the canvas objects.
+		if (menuDefinition && menuDefinition.length > 0 &&
+				this.getCanvasConfig().enableEditingActions === false) {
+			menuDefinition = this.filterOutEditingActions(menuDefinition);
 		}
+
+		if (menuDefinition && menuDefinition.length > 0 &&
+				!this.allDividers(menuDefinition)) {
+			this.openContextMenu(menuDefinition);
+		}
+	}
+
+	// Returns true if the menu only contains dividers. This might happen if
+	// action items have been removed from a menu and left only dividers behind.
+	allDividers(menu) {
+		const dividers = menu.filter((m) => m.divider);
+		return menu.length === dividers.length;
 	}
 
 	getContextMenuPos() {

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * 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.
@@ -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,49 @@ 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.logger = new Logger("CC-Bottom-Panel");
 
-	componentWillUnmount() {
-		// document.removeEventListener("mouseup", this.stopResize, true);
+		this.onMouseUp = this.onMouseUp.bind(this);
+		this.onMouseDown = this.onMouseDown.bind(this);
+		this.onMouseMoveY = this.onMouseMoveY.bind(this);
 	}
 
-	startResize(evt) {
-		this.resizing = true;
+	onMouseDown(e) {
+		if (e.button === 0) {
+			document.addEventListener("mousemove", this.onMouseMoveY);
+			this.poseY = e.clientY;
+		}
 	}
 
-	stopResize(evt) {
-		this.resizing = false;
+	onMouseUp(e) {
+		document.removeEventListener("mousemove", this.onMouseMoveY);
 	}
 
-	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 style = {
+				height: this.state.panelHeight
+			};
 			bottomPanel = (
-				<div className={"bottom-panel"} style={styleObj}>
-					{this.props.bottomPanelContent}
+				<div className="bottom-panel" style={style} >
+					<div className="bottom-panel-drag" onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} />
+					<div className="bottom-panel-contents">
+						{this.props.bottomPanelContent}
+					</div>
 				</div>
 			);
 		}
@@ -83,10 +79,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 +88,4 @@ const mapStateToProps = (state, ownProps) => ({
 	bottomPanelIsOpen: state.bottompanel.isOpen,
 	bottomPanelContent: state.bottompanel.content
 });
-
-export default connect(mapStateToProps)(injectIntl(CanvasBottomPanel));
+export default connect(mapStateToProps)(CanvasBottomPanel);

package/src/common-canvas/cc-central-items.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Elyra Authors
+ * 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.

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

@@ -119,21 +119,24 @@ class CanvasContents extends React.Component {
 	}
 
 	onCut(evt) {
-		if (evt.currentTarget.activeElement.id === this.svgCanvasDivId) {
+		if (evt.currentTarget.activeElement.id === this.svgCanvasDivId &&
+				this.props.canvasConfig.enableEditingActions) {
 			evt.preventDefault();
 			this.props.canvasController.cutToClipboard();
 		}
 	}
 
 	onCopy(evt) {
-		if (evt.currentTarget.activeElement.id === this.svgCanvasDivId) {
+		if (evt.currentTarget.activeElement.id === this.svgCanvasDivId &&
+				this.props.canvasConfig.enableEditingActions) {
 			evt.preventDefault();
 			this.props.canvasController.copyToClipboard();
 		}
 	}
 
 	onPaste(evt) {
-		if (evt.currentTarget.activeElement.id === this.svgCanvasDivId) {
+		if (evt.currentTarget.activeElement.id === this.svgCanvasDivId &&
+				this.props.canvasConfig.enableEditingActions) {
 			evt.preventDefault();
 			this.props.canvasController.pasteFromClipboard();
 		}
@@ -278,9 +281,14 @@ class CanvasContents extends React.Component {
 
 	drop(event) {
 		event.preventDefault();
+		this.setIsDropZoneDisplayed(false);
+
 		this.first = false;
 		this.second = false;
-		this.setIsDropZoneDisplayed(false);
+
+		if (!this.props.canvasConfig.enableEditingActions) {
+			return;
+		}
 
 		const nodeTemplate = this.props.canvasController.getDragNodeTemplate();
 		if (nodeTemplate) {

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Elyra Authors
+ * 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.

package/src/common-canvas/cc-right-flyout.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Elyra Authors
+ * 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.

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * 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.
@@ -184,6 +184,7 @@ class CommonCanvasToolbar extends React.Component {
 				{ action: TOOLBAR_ACTIONS.TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
 					label: this.props.notificationConfig.label,
 					enable: true,
+					isSelected: this.props.isNotificationOpen,
 					className: this.getNotificationClassName(),
 					textContent: (notificationCount > 9) ? "9+" : notificationCount.toString()
 				}
@@ -203,12 +204,16 @@ class CommonCanvasToolbar extends React.Component {
 		}
 
 		if (typeof toolbarConfig !== "undefined") {
-			this.applyToolState("undo", toolbarConfig, this.props.canUndo);
-			this.applyToolState("redo", toolbarConfig, this.props.canRedo);
-			this.applyToolState("cut", toolbarConfig, this.props.canCutCopy);
-			this.applyToolState("copy", toolbarConfig, this.props.canCutCopy);
-			this.applyToolState("paste", toolbarConfig, this.props.canPaste);
-			this.applyToolState("deleteSelectedObjects", toolbarConfig, this.props.canDelete);
+			const editingAllowed = this.props.enableEditingActions;
+			this.applyToolState("undo", toolbarConfig, editingAllowed && this.props.canUndo);
+			this.applyToolState("redo", toolbarConfig, editingAllowed && this.props.canRedo);
+			this.applyToolState("cut", toolbarConfig, editingAllowed && this.props.canCutCopy);
+			this.applyToolState("copy", toolbarConfig, editingAllowed && this.props.canCutCopy);
+			this.applyToolState("paste", toolbarConfig, editingAllowed && this.props.canPaste);
+			this.applyToolState("deleteSelectedObjects", toolbarConfig, editingAllowed && this.props.canDelete);
+			this.applyToolState("createAutoComment", toolbarConfig, editingAllowed);
+			this.applyToolState("arrangeHorizontally", toolbarConfig, editingAllowed);
+			this.applyToolState("arrangeVertically", toolbarConfig, editingAllowed);
 		}
 		return toolbarConfig;
 	}
@@ -267,8 +272,6 @@ class CommonCanvasToolbar extends React.Component {
 					instanceId={this.props.canvasController.getInstanceId()}
 					toolbarActionHandler={this.toolbarActionHandler}
 					additionalText={{ overflowMenuLabel: this.getLabel("toolbar.overflowMenu") }}
-					isAssociatedPanelOpen={this.props.isNotificationOpen}
-					associatedPanelAction={TOOLBAR_ACTIONS.TOOLBAR_TOGGLE_NOTIFICATION_PANEL}
 				/>
 			);
 		}
@@ -294,6 +297,7 @@ CommonCanvasToolbar.propTypes = {
 	notificationMessages: PropTypes.array,
 	notificationConfig: PropTypes.object,
 	enableInternalObjectModel: PropTypes.bool,
+	enableEditingActions: PropTypes.bool,
 	canUndo: PropTypes.bool,
 	canRedo: PropTypes.bool,
 	canCutCopy: PropTypes.bool,
@@ -312,6 +316,7 @@ const mapStateToProps = (state, ownProps) => ({
 	notificationConfig: state.notificationpanel.config,
 	notificationMessages: state.notifications,
 	enableInternalObjectModel: state.canvasconfig.enableInternalObjectModel,
+	enableEditingActions: state.canvasconfig.enableEditingActions,
 	canUndo: ownProps.canvasController.canUndo(),
 	canRedo: ownProps.canvasController.canRedo(),
 	canCutCopy: ownProps.canvasController.canCutCopy(),

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * 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.

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * 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.
@@ -85,6 +85,28 @@ class CommonCanvas extends React.Component {
 		this.logger.logEndTimer("initializeController");
 	}
 
+	generateClass() {
+		let className = "common-canvas";
+
+		className += (
+			!this.isEditingAllowed()
+				? " config-editing-actions-false"
+				: "");
+
+		className += (
+			this.props.config && this.props.config.enableParentClass
+				? " " + this.props.config.enableParentClass
+				: "");
+
+		return className;
+	}
+
+	isEditingAllowed() {
+		return this.props.config &&
+			(typeof this.props.config.enableEditingActions === "undefined" ||
+				this.props.config.enableEditingActions === true);
+	}
+
 	render() {
 		this.logger.log("render");
 
@@ -92,10 +114,7 @@ class CommonCanvas extends React.Component {
 		const palette = (<Palette canvasController={this.props.canvasController} containingDivId={this.containingDivId} />);
 		const centralItems = (<CommonCanvasCentralItems canvasController={this.props.canvasController} containingDivId={this.containingDivId} />);
 
-		const className = "common-canvas" + (
-			this.props.config && this.props.config.enableParentClass
-				? " " + this.props.config.enableParentClass
-				: "");
+		const className = this.generateClass();
 
 		return (
 			<Provider store={this.props.canvasController.getStore()}>
@@ -129,6 +148,7 @@ CommonCanvas.propTypes = {
 	layoutHandler: PropTypes.func,
 	idGeneratorHandler: PropTypes.func,
 	selectionChangeHandler: PropTypes.func,
+	actionLabelHandler: PropTypes.func,
 	rightFlyoutContent: PropTypes.object,
 	showRightFlyout: PropTypes.bool,
 	bottomPanelContent: PropTypes.object,

package/src/common-canvas/common-canvas.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * 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.
@@ -65,17 +65,12 @@ $bottom-panel-height: 393px;
 	top: $toolbar-button-height;
 	overflow: hidden;
 
-	&.common-canvas-bottom-panel-is-open {
-		height: calc(100% - #{$toolbar-button-height} - #{$bottom-panel-height});
-	}
-
 	&.common-canvas-toolbar-none {
 		height: 100%;
 		top: 0;
 	}
 
 	&.common-canvas-toolbar-none.common-canvas-bottom-panel-is-open {
-		height: calc(100% - #{$toolbar-button-height} - #{$bottom-panel-height});
 		top: 0;
 	}
 }
@@ -88,13 +83,32 @@ $bottom-panel-height: 393px;
 }
 
 .bottom-panel {
+	display: flex;
+	flex-direction: column;
+	height: $bottom-panel-height;
 	position: absolute;
+	left:0;
+	right:0;
 	bottom: 0;
-	width: 100%;
-	height: $bottom-panel-height;
-	user-select: none; /* Prevent elements from being selectable */
-	background-color: $ui-01;
 	border-top: $palette-border-width solid $palette-border-color;
+	min-height: 75px;
+}
+
+.bottom-panel-drag {
+	background: $palette-border-color;
+	cursor: row-resize;
+	flex: 0 0 2px;
+	transition: all 0.2s ease-in;
+	&:hover {
+		background: $interactive-01;
+	}
+}
+
+.bottom-panel-contents {
+	background-color: $ui-01;
+	width: 100%;
+	user-select: none;
+	height: 100%;
 }
 
 /* Alternative layout for common-canvas components where canvas and right-side

package/src/common-canvas/d3-zoom-extension/.eslintrc.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * 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.

package/src/common-canvas/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * 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.

package/src/common-canvas/label-util.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Elyra Authors
+ * 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.

package/src/common-canvas/local-storage.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * 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.

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * 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.
@@ -146,41 +146,48 @@ export default class SVGCanvasD3 {
 					return;
 				}
 
-				if ((d3Event.keyCode === BACKSPACE_KEY || d3Event.keyCode === DELETE_KEY) && actions.delete) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Some browsers interpret Delete as 'Back to previous page'. So prevent that.
-					this.canvasController.keyboardActionHandler("deleteSelectedObjects");
-
-				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) &&
-						!d3Event.shiftKey && d3Event.keyCode === Z_KEY && actions.undo) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					this.canvasController.keyboardActionHandler("undo");
-
-				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) &&
-						((d3Event.shiftKey && d3Event.keyCode === Z_KEY) || d3Event.keyCode === Y_KEY && actions.redo)) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					this.canvasController.keyboardActionHandler("redo");
-
-				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === A_KEY && actions.selectAll) {
+				// These actions alter the canvas objects so we need to check
+				// this.config.enableEditingActions before calling them.
+				if (this.config.enableEditingActions) {
+					if ((d3Event.keyCode === BACKSPACE_KEY || d3Event.keyCode === DELETE_KEY) && actions.delete) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Some browsers interpret Delete as 'Back to previous page'. So prevent that.
+						this.canvasController.keyboardActionHandler("deleteSelectedObjects");
+
+					} else if (CanvasUtils.isCmndCtrlPressed(d3Event) &&
+							!d3Event.shiftKey && d3Event.keyCode === Z_KEY && actions.undo) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+						this.canvasController.keyboardActionHandler("undo");
+
+					} else if (CanvasUtils.isCmndCtrlPressed(d3Event) &&
+							((d3Event.shiftKey && d3Event.keyCode === Z_KEY) || d3Event.keyCode === Y_KEY && actions.redo)) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+						this.canvasController.keyboardActionHandler("redo");
+
+					} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === C_KEY && actions.copyToClipboard) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+						this.canvasController.keyboardActionHandler("copy");
+
+					} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === X_KEY && actions.cutToClipboard) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+						this.canvasController.keyboardActionHandler("cut");
+
+					} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === V_KEY && actions.pasteFromClipboard) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+						if (this.mousePos) {
+							this.mousePos = this.renderer.convertPageCoordsToCanvasCoords(this.mousePos.x, this.mousePos.y);
+							this.mousePos = this.renderer.getMousePosSnapToGrid(this.mousePos);
+							this.canvasController.keyboardActionHandler("paste", this.mousePos);
+						} else {
+							this.canvasController.keyboardActionHandler("paste");
+						}
+					}
+				}
+				// These last two keyboard actions do not alter the canvas objects so we
+				// do not need to check this.config.enableEditingActions before calling them.
+				if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === A_KEY && actions.selectAll) {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 					this.canvasController.keyboardActionHandler("selectAll");
 
-				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === C_KEY && actions.copyToClipboard) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					this.canvasController.keyboardActionHandler("copy");
-
-				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === X_KEY && actions.cutToClipboard) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					this.canvasController.keyboardActionHandler("cut");
-
-				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.keyCode === V_KEY && actions.pasteFromClipboard) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					if (this.mousePos) {
-						this.mousePos = this.renderer.convertPageCoordsToCanvasCoords(this.mousePos.x, this.mousePos.y);
-						this.mousePos = this.renderer.getMousePosSnapToGrid(this.mousePos);
-						this.canvasController.keyboardActionHandler("paste", this.mousePos);
-					} else {
-						this.canvasController.keyboardActionHandler("paste");
-					}
 				} else if (CanvasUtils.isCmndCtrlPressed(d3Event) && d3Event.shiftKey && d3Event.altKey && d3Event.keyCode === P_KEY) {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 					Logger.switchLoggingState(); // Switch the logging on and off

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * 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.
@@ -293,7 +293,6 @@ $link-highlight-color: $support-04;
 	}
 }
 
-
 /* Node styles - Error indication */
 
 .d3-node-error-label {
@@ -473,7 +472,6 @@ $link-highlight-color: $support-04;
 	}
 }
 
-
 /* Error indicator */
 .d3-error-circle {
 	stroke: $canvas-background-color;
@@ -653,6 +651,7 @@ $link-highlight-color: $support-04;
 .d3-comment-text {
 	@include d3-comment-mixin;
 	border-width: $comment-text-display-border;
+	user-select: none;
 }
 
 /* Style for comment text entry when shown in an HTML textarea control. */