@elyra/canvas 12.10.0 → 12.11.0

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

@@ -24,12 +24,29 @@ import { injectIntl } from "react-intl";
 import defaultMessages from "../../locales/common-canvas/locales/en.json";
 import CommonCanvasContextMenu from "./cc-context-menu.jsx";
 import CommonCanvasStateTag from "./cc-state-tag.jsx";
+import CanvasUtils from "./common-canvas-utils.js";
 import { FlowData16 } from "@carbon/icons-react";
 import { DND_DATA_TEXT, STATE_TAG_LOCKED, STATE_TAG_READ_ONLY } from "./constants/canvas-constants";
 
 import Logger from "../logging/canvas-logger.js";
 import SVGCanvasD3 from "./svg-canvas-d3.js";
 
+const BACKSPACE_KEY = 8;
+const DELETE_KEY = 46;
+const A_KEY = 65;
+const C_KEY = 67;
+const P_KEY = 80;
+const V_KEY = 86;
+const X_KEY = 88;
+const Y_KEY = 89;
+const Z_KEY = 90;
+
+// TODO - Implement nudge behavior for moving nodes and comments
+// const LEFT_ARROW_KEY = 37;
+// const UP_ARROW_KEY = 38;
+// const RIGHT_ARROW_KEY = 39;
+// const DOWN_ARROW_KEY = 40;
+
 class CanvasContents extends React.Component {
 	constructor(props) {
 		super(props);
@@ -53,6 +70,10 @@ class CanvasContents extends React.Component {
 		// Record whether we added the event listeners or not.
 		this.eventListenersAdded = false;
 
+		// Keeps track of mouse position to enable us to paste at mouse position
+		// using keyboard.
+		this.mousePos = { x: 0, y: 0 };
+
 		this.drop = this.drop.bind(this);
 		this.focusOnCanvas = this.focusOnCanvas.bind(this);
 		this.setIsDropZoneDisplayed = this.setIsDropZoneDisplayed.bind(this);
@@ -65,6 +86,8 @@ class CanvasContents extends React.Component {
 		this.onCut = this.onCut.bind(this);
 		this.onCopy = this.onCopy.bind(this);
 		this.onPaste = this.onPaste.bind(this);
+		this.onKeyDown = this.onKeyDown.bind(this);
+		this.onMouseMove = this.onMouseMove.bind(this);
 
 		// Variables to handle strange HTML drag and drop behaviors. That is, pairs
 		// of dragEnter/dragLeave events are fired as an external object is
@@ -115,7 +138,6 @@ class CanvasContents extends React.Component {
 
 	componentWillUnmount() {
 		this.removeEventListeners();
-		this.svgCanvasD3.close();
 	}
 
 	onCut(evt) {
@@ -142,6 +164,82 @@ class CanvasContents extends React.Component {
 		}
 	}
 
+	onKeyDown(evt) {
+		// Make sure no tip is displayed, because having one displayed
+		// will interfere with drawing of the canvas as the result of any
+		// keyboard action.
+		this.props.canvasController.closeTip();
+		const actions = this.props.canvasController.getKeyboardConfig().actions;
+		// We don't handle key presses when:
+		// 1. We are editng text, because the text area needs to receive key
+		//    presses for undo, redo, delete etc.
+		// 2. Dragging objects
+		if (this.svgCanvasD3.isEditingText() ||
+				this.svgCanvasD3.isDragging()) {
+			return;
+		}
+
+		// These actions alter the canvas objects so we need to check
+		// this.config.enableEditingActions before calling them.
+		if (this.props.canvasConfig.enableEditingActions) {
+			if ((evt.keyCode === BACKSPACE_KEY || evt.keyCode === DELETE_KEY) && actions.delete) {
+				CanvasUtils.stopPropagationAndPreventDefault(evt); // Some browsers interpret Delete as 'Back to previous page'. So prevent that.
+				this.props.canvasController.keyboardActionHandler("deleteSelectedObjects");
+
+			} else if (CanvasUtils.isCmndCtrlPressed(evt) &&
+					!evt.shiftKey && evt.keyCode === Z_KEY && actions.undo) {
+				CanvasUtils.stopPropagationAndPreventDefault(evt);
+				this.props.canvasController.keyboardActionHandler("undo");
+
+			} else if (CanvasUtils.isCmndCtrlPressed(evt) &&
+					((evt.shiftKey && evt.keyCode === Z_KEY) || evt.keyCode === Y_KEY && actions.redo)) {
+				CanvasUtils.stopPropagationAndPreventDefault(evt);
+				this.props.canvasController.keyboardActionHandler("redo");
+
+			} else if (CanvasUtils.isCmndCtrlPressed(evt) && evt.keyCode === C_KEY && actions.copyToClipboard) {
+				CanvasUtils.stopPropagationAndPreventDefault(evt);
+				this.props.canvasController.keyboardActionHandler("copy");
+
+			} else if (CanvasUtils.isCmndCtrlPressed(evt) && evt.keyCode === X_KEY && actions.cutToClipboard) {
+				CanvasUtils.stopPropagationAndPreventDefault(evt);
+				this.props.canvasController.keyboardActionHandler("cut");
+
+			} else if (CanvasUtils.isCmndCtrlPressed(evt) && evt.keyCode === V_KEY && actions.pasteFromClipboard) {
+				CanvasUtils.stopPropagationAndPreventDefault(evt);
+				if (this.mousePos) {
+					const mousePos = this.svgCanvasD3.convertPageCoordsToSnappedCanvasCoords(this.mousePos);
+					this.props.canvasController.keyboardActionHandler("paste", mousePos);
+				} else {
+					this.props.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(evt) && evt.keyCode === A_KEY && actions.selectAll) {
+			CanvasUtils.stopPropagationAndPreventDefault(evt);
+			this.props.canvasController.keyboardActionHandler("selectAll");
+
+		} else if (CanvasUtils.isCmndCtrlPressed(evt) && evt.shiftKey && evt.altKey && evt.keyCode === P_KEY) {
+			CanvasUtils.stopPropagationAndPreventDefault(evt);
+			Logger.switchLoggingState(); // Switch the logging on and off
+		}
+	}
+
+	// Records in mousePos the mouse pointer position when the pointer is inside
+	// the boundaries of the canvas or sets the mousePos to null. This position
+	// info can be used with keyboard operations.
+	onMouseMove(e) {
+		if (e.target.className.baseVal === "svg-area" || e.target.className.baseVal === "d3-svg-background") {
+			this.mousePos = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		} else {
+			this.mousePos = null;
+		}
+	}
+
 	getLabel(labelId) {
 		return this.props.intl.formatMessage({ id: labelId, defaultMessage: defaultMessages[labelId] });
 	}
@@ -223,7 +321,7 @@ class CanvasContents extends React.Component {
 		// the div (which allows keyboard events to go there) and using -1 means
 		// the user cannot tab to the div. Keyboard events are handled in svg-canvas-d3.js.
 		// https://stackoverflow.com/questions/32911355/whats-the-tabindex-1-in-bootstrap-for
-		return (<div tabIndex="-1" className="d3-svg-canvas-div" id={this.svgCanvasDivId} />);
+		return (<div tabIndex="-1" className="d3-svg-canvas-div" id={this.svgCanvasDivId} onKeyDown={this.onKeyDown} />);
 	}
 
 	setIsDropZoneDisplayed(isDropZoneDisplayed) {
@@ -266,6 +364,7 @@ class CanvasContents extends React.Component {
 			document.addEventListener("cut", this.onCut, true);
 			document.addEventListener("copy", this.onCopy, true);
 			document.addEventListener("paste", this.onPaste, true);
+			document.addEventListener("mousemove", this.onMouseMove, true);
 			this.eventListenersAdded = true;
 		}
 	}
@@ -275,24 +374,26 @@ class CanvasContents extends React.Component {
 			document.removeEventListener("cut", this.onCut, true);
 			document.removeEventListener("copy", this.onCopy, true);
 			document.removeEventListener("paste", this.onPaste, true);
+			document.removeEventListener("mousemove", this.onMouseMove, true);
 			this.eventListenersAdded = false;
 		}
 	}
 
 	drop(event) {
 		event.preventDefault();
+		this.setIsDropZoneDisplayed(false);
+
+		this.first = false;
+		this.second = false;
 
 		if (!this.props.canvasConfig.enableEditingActions) {
 			return;
 		}
 
-		this.first = false;
-		this.second = false;
-		this.setIsDropZoneDisplayed(false);
-
 		const nodeTemplate = this.props.canvasController.getDragNodeTemplate();
 		if (nodeTemplate) {
 			this.svgCanvasD3.nodeTemplateDropped(nodeTemplate, event.clientX, event.clientY);
+			this.props.canvasController.nodeTemplateDragEnd();
 
 		} else {
 			let dropData = this.getDNDJson(event);
@@ -311,19 +412,20 @@ class CanvasContents extends React.Component {
 			this.svgCanvasD3.externalObjectDropped(dropData, event.clientX, event.clientY);
 		}
 
-		// Clear the drag template.
-		this.props.canvasController.setDragNodeTemplate(null);
-
 		// Also clear dataTransfer data for when we get external objects.
 		event.dataTransfer.clearData();
 	}
 
 	dragOver(event) {
-		const nodeTemplate = this.props.canvasController.getDragNodeTemplate();
-		if (nodeTemplate && (this.dragX !== event.clientX || this.dragY !== event.clientY)) {
+		// Drag over is continually fired so only pass on the event when the mouse
+		// cursor moves a reasonable distance.
+		if (Math.abs(this.dragX - event.clientX) > 5 || Math.abs(this.dragY - event.clientY) > 5) {
 			this.dragX = event.clientX;
 			this.dragY = event.clientY;
-			this.svgCanvasD3.nodeTemplateDraggedOver(nodeTemplate, event.clientX, event.clientY);
+			const nodeTemplate = this.props.canvasController.getDragNodeTemplate();
+			if (nodeTemplate) {
+				this.svgCanvasD3.nodeTemplateDragOver(nodeTemplate, event.clientX, event.clientY);
+			}
 		}
 	}
 

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

@@ -23,7 +23,8 @@ import defaultToolbarMessages from "../../locales/toolbar/locales/en.json";
 import Toolbar from "../toolbar/toolbar.jsx";
 import Logger from "../logging/canvas-logger.js";
 import { ERROR, WARNING, SUCCESS, INFO, PALETTE_LAYOUT_NONE,
-	NOTIFICATION_ICON_CLASS, TOOLBAR_ACTIONS, TOOLBAR_LAYOUT_TOP } from "../common-canvas/constants/canvas-constants";
+	NOTIFICATION_ICON_CLASS, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, TOOLBAR_LAYOUT_TOP }
+	from "../common-canvas/constants/canvas-constants";
 
 class CommonCanvasToolbar extends React.Component {
 	constructor(props) {
@@ -181,7 +182,7 @@ class CommonCanvasToolbar extends React.Component {
 			const notificationCount = this.props.notificationMessages.length;
 			const notificationTools = [
 				{ divider: true },
-				{ action: TOOLBAR_ACTIONS.TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
+				{ action: TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
 					label: this.props.notificationConfig.label,
 					enable: true,
 					isSelected: this.props.isNotificationOpen,

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

@@ -247,12 +247,13 @@ export default class CanvasUtils {
 	}
 
 	// Returns true if either the Command Key on Mac or Control key on Windows
-	// is pressed.
-	static isCmndCtrlPressed(d3Event) {
+	// is pressed. evnt can be either a regular event object OR the
+	// d3event object provided by d3.
+	static isCmndCtrlPressed(evnt) {
 		if (this.isMacintosh()) {
-			return d3Event.metaKey;
+			return evnt.metaKey;
 		}
-		return d3Event.ctrlKey;
+		return evnt.ctrlKey;
 	}
 
 	// Returns whether user platform is Mac.
@@ -261,10 +262,11 @@ export default class CanvasUtils {
 	}
 
 	// Stops propagation of events and prevents any default behavior from
-	// being executed.
-	static stopPropagationAndPreventDefault(d3Event) {
-		d3Event.stopPropagation();
-		d3Event.preventDefault();
+	// being executed. evnt can be either a regular event object OR the
+	// d3event object provided by d3.
+	static stopPropagationAndPreventDefault(evnt) {
+		evnt.stopPropagation();
+		evnt.preventDefault();
 	}
 
 	// Returns a snap-to-grid value for the value passed in based on a grid
@@ -856,6 +858,18 @@ export default class CanvasUtils {
 			pos.y_pos < area.y2 + pad;
 	}
 
+	static isSupernode(node) {
+		return node.type === SUPER_NODE;
+	}
+
+	static isExpanded(node) {
+		return node.is_expanded === true;
+	}
+
+	static isExpandedSupernode(node) {
+		return this.isSupernode(node) && this.isExpanded(node);
+	}
+
 	// Returns true if the node passed in is a binding node in a subflow
 	// for a supernode.
 	static isSuperBindingNode(d) {
@@ -1077,76 +1091,23 @@ export default class CanvasUtils {
 		return outLinks;
 	}
 
-	// Preprocesses the pipeline to set the connected attribute of the ports
-	// for each node. This is used when rendering the connection satus of ports.
-	static preProcessPipeline(pipeline) {
-		this.setAllPortsDisconnected(pipeline);
-
-		pipeline.links.forEach((link) => {
-			if (link.type === COMMENT_LINK) {
-				link.srcObj = this.getComment(link.srcNodeId, pipeline);
-				link.trgNode = this.getNode(link.trgNodeId, pipeline);
-
-			} else {
-				link.srcObj = this.getNode(link.srcNodeId, pipeline);
-				link.trgNode = this.getNode(link.trgNodeId, pipeline);
-
-				if (link.srcObj) {
-					this.setOutputPortConnected(link.srcObj, link.srcNodePortId);
-				}
-				if (link.trgNode) {
-					this.setInputPortConnected(link.trgNode, link.trgNodePortId);
-				}
-			}
-		});
-		return pipeline;
-	}
-
-	// Returns the node, from the pipeline passed in, identfied by the node ID.
-	static getNode(nodeId, pipeline) {
-		return pipeline.nodes.find((nd) => nd.id === nodeId);
-	}
-
-	// Returns the comment, from the pipeline passed in, identfied by the comment ID.
-	static getComment(commentId, pipeline) {
-		return pipeline.comments.find((com) => com.id === commentId);
-	}
-
-	// Sets the isConnected property of all ports in the pipeline to fasle.
-	static setAllPortsDisconnected(pipeline) {
-		pipeline.nodes.forEach((n) => {
-			if (n.inputs) {
-				n.inputs.forEach((inp) => (inp.isConnected = false));
-			}
-			if (n.outputs) {
-				n.outputs.forEach((out) => (out.isConnected = false));
-			}
-		});
-	}
-
-	// Sets the isConnected property of the port, identified by inPortId,
-	// for the trgNode to true.
-	static setInputPortConnected(trgNode, inPortId) {
-		const portId = inPortId || this.getDefaultInputPortId(trgNode);
-		if (trgNode.inputs) {
-			trgNode.inputs.forEach((inp) => {
-				if (inp.id === portId) {
-					inp.isConnected = true;
-				}
-			});
-		}
-	}
-
-	// Sets the isConnected property of the port, identified by outPortId,
-	// for the srcNode to true.
-	static setOutputPortConnected(srcNode, outPortId) {
-		const portId = outPortId || this.getDefaultOutputPortId(srcNode);
-		if (srcNode.outputs) {
-			srcNode.outputs.forEach((out) => {
-				if (out.id === portId) {
-					out.isConnected = true;
-				}
-			});
+	// Returns the color class in the className parameter, if one is found,
+	// otherwise returns null.
+	static getBkgColorClass(className) {
+		if (className === "bkg-col-white-0" ||
+				className === "bkg-col-yellow-20" ||
+				className === "bkg-col-gray-20" ||
+				className === "bkg-col-green-20" ||
+				className === "bkg-col-teal-20" ||
+				className === "bkg-col-cyan-20" ||
+				className === "bkg-col-red-50" ||
+				className === "bkg-col-orange-40" ||
+				className === "bkg-col-gray-50" ||
+				className === "bkg-col-green-50" ||
+				className === "bkg-col-teal-50" ||
+				className === "bkg-col-cyan-50") {
+			return className;
 		}
+		return null;
 	}
 }

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

@@ -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
@@ -186,17 +200,17 @@ $bottom-panel-height: 393px;
 	border-width: 2px;
 }
 
-.toolbar-icon.notificationCounterIcon {
-	&.error > svg > .dot {
+.toolbar-item-content.notificationCounterIcon {
+	&.error > div > svg > .dot {
 		fill: $support-01;
 	}
-	&.warning > svg > .dot {
+	&.warning > div > svg > .dot {
 		fill: $support-03;
 	}
-	&.success > svg > .dot {
+	&.success > div > svg > .dot {
 		fill: $support-02;
 	}
-	&.info > svg > .dot {
+	&.info > div > svg > .dot {
 		fill: $support-04;
 	}
 }

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

@@ -148,7 +148,6 @@ export const CANVAS_CARBON_ICONS = {
 		UP: "chevron-up",
 		DOWN: "chevron-down"
 	},
-	OVERFLOWMENU: "overflow-menu",
 	SEARCH: "search",
 	WARNING_UNFILLED: "warning16"
 };
@@ -159,21 +158,23 @@ export const CONTEXT_MENU_CARBON_ICONS = {
 	}
 };
 
-export const TOOLBAR_ACTIONS = {
-	TOOLBAR_STOP: "stop",
-	TOOLBAR_RUN: "run",
-	TOOLBAR_UNDO: "undo",
-	TOOLBAR_REDO: "redo",
-	TOOLBAR_CUT: "cut",
-	TOOLBAR_COPY: "copy",
-	TOOLBAR_PASTE: "paste",
-	TOOLBAR_CREATE_AUTO_COMMENT: "createAutoComment",
-	TOOLBAR_DELETE_SELECTED_OBJECTS: "deleteSelectedObjects",
-	TOOLBAR_ZOOM_IN: "zoomIn",
-	TOOLBAR_ZOOM_OUT: "zoomOut",
-	TOOLBAR_ZOOM_FIT: "zoomToFit",
-	TOOLBAR_TOGGLE_NOTIFICATION_PANEL: "toggleNotificationPanel"
-};
+export const TOOLBAR_STOP = "stop";
+export const TOOLBAR_RUN = "run";
+export const TOOLBAR_UNDO = "undo";
+export const TOOLBAR_REDO = "redo";
+export const TOOLBAR_CUT = "cut";
+export const TOOLBAR_COPY = "copy";
+export const TOOLBAR_PASTE = "paste";
+export const TOOLBAR_CREATE_AUTO_COMMENT = "createAutoComment";
+export const TOOLBAR_DELETE_SELECTED_OBJECTS = "deleteSelectedObjects";
+export const TOOLBAR_ZOOM_IN = "zoomIn";
+export const TOOLBAR_ZOOM_OUT = "zoomOut";
+export const TOOLBAR_ZOOM_FIT = "zoomToFit";
+export const TOOLBAR_ARRANGE_HORIZONALLY = "arrangeHorizontally";
+export const TOOLBAR_ARRANGE_VERTICALLY = "arrangeVertically";
+export const TOOLBAR_TOGGLE_NOTIFICATION_PANEL = "toggleNotificationPanel";
+export const TOOLBAR_OPEN_PALETTE = "paletteOpen";
+export const TOOLBAR_CLOSE_PALETTE = "paletteClose";
 
 export const EDIT_ICON =
 	"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">" +

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

@@ -34,7 +34,7 @@ export default class LabelUtil {
 
 	getActionLabel(action, key, substituteObj) {
 		if (this.actionLabelHandler) {
-			const label = this.actionLabelHandler(action);
+			const label = this.actionLabelHandler(action, substituteObj);
 			if (label) {
 				return label;
 			}

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

@@ -19,42 +19,17 @@
 import * as d3 from "d3-selection";
 import { cloneDeep } from "lodash";
 import SVGCanvasRenderer from "./svg-canvas-renderer.js";
-import CanvasUtils from "./common-canvas-utils.js";
 import ConfigUtils from "../object-model/config-utils.js";
 import Logger from "../logging/canvas-logger.js";
 
-const BACKSPACE_KEY = 8;
-const DELETE_KEY = 46;
-const A_KEY = 65;
-const C_KEY = 67;
-const P_KEY = 80;
-const V_KEY = 86;
-const X_KEY = 88;
-const Y_KEY = 89;
-const Z_KEY = 90;
-// TODO - Implement nudge behavior for moving nodes and comments
-// const LEFT_ARROW_KEY = 37;
-// const UP_ARROW_KEY = 38;
-// const RIGHT_ARROW_KEY = 39;
-// const DOWN_ARROW_KEY = 40;
-
 export default class SVGCanvasD3 {
 
 	constructor(canvasInfo, canvasDivSelector, config, canvasController) {
 		this.logger = new Logger(["SVGCanvasD3", "FlowId", canvasInfo.id]);
 		this.logger.logStartTimer("constructor");
-		this.mousePos = {
-			x: 0,
-			y: 0
-		};
 		this.canvasController = canvasController;
-		this.canvasDiv = this.initializeCanvasDiv(canvasDivSelector);
+		this.canvasDiv = d3.select(canvasDivSelector);
 		this.logger.logEndTimer("constructor", true);
-		document.addEventListener("mousemove", this.onMouseUpdate.bind(this), true);
-	}
-
-	close() {
-		document.removeEventListener("mousemove", this.onMouseUpdate, true);
 	}
 
 	setCanvasInfo(canvasInfo, config) {
@@ -112,92 +87,30 @@ export default class SVGCanvasD3 {
 		return cloneDeep(canvasInfo);
 	}
 
-	// Records in mousePos the mouse pointer position when the pointer is inside
-	// the boundaries of the canvas or sets the mousePos to null. This position
-	// info can be used with keyboard operations.
-	onMouseUpdate(e) {
-		if (e.target.className.baseVal === "svg-area" || e.target.className.baseVal === "d3-svg-background") {
-			this.mousePos = {
-				x: e.clientX,
-				y: e.clientY
-			};
-		} else {
-			this.mousePos = null;
-		}
+	isEditingText() {
+		return this.renderer.isEditingText();
 	}
 
-	initializeCanvasDiv(canvasDivSelector) {
-
-		// Add a listener to canvas div to catch key presses. The containing
-		// canvas div must have tabindex set and the focus set on the div.
-		const canvasDiv = d3.select(canvasDivSelector)
-			.on("keydown", (d3Event) => {
-				// Make sure no tip is displayed, because having one displayed
-				// will interfere with drawing of the canvas as the result of any
-				// keyboard action.
-				this.canvasController.closeTip();
-				const actions = this.canvasController.getKeyboardConfig().actions;
-				// We don't handle key presses when:
-				// 1. We are editng text, because the text area needs to receive key
-				//    presses for undo, redo, delete etc.
-				// 2. Dragging objects
-				if (this.renderer.isEditingText() ||
-						this.renderer.isDragging()) {
-					return;
-				}
+	isDragging() {
+		return this.renderer.isDragging();
+	}
 
-				// 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.shiftKey && d3Event.altKey && d3Event.keyCode === P_KEY) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					Logger.switchLoggingState(); // Switch the logging on and off
-				}
-			});
-		return canvasDiv;
+	convertPageCoordsToSnappedCanvasCoords(pos) {
+		let positon = this.renderer.convertPageCoordsToCanvasCoords(pos.x, pos.y);
+		positon = this.renderer.getMousePosSnapToGrid(positon);
+		return positon;
+	}
+
+	nodeTemplateDragStart(nodeTemplate) {
+		this.renderer.nodeTemplateDragStart(nodeTemplate);
+	}
+
+	nodeTemplateDragOver(nodeTemplate, x, y) {
+		this.renderer.nodeTemplateDragOver(nodeTemplate, x, y);
 	}
 
-	nodeTemplateDraggedOver(nodeTemplate, x, y) {
-		this.renderer.nodeTemplateDraggedOver(nodeTemplate, x, y);
+	nodeTemplateDragEnd(nodeTemplate) {
+		this.renderer.nodeTemplateDragEnd(nodeTemplate);
 	}
 
 	nodeTemplateDropped(nodeTemplate, x, y) {