@elyra/canvas 12.10.1 → 12.11.1

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) {

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

@@ -79,9 +79,10 @@ $node-port-input-arrow-connected-stroke-color: $inverse-02;
 $node-port-input-arrow-connected-fill-color: transparent;
 
 // Comment colors
-$comment-outline-color: $ui-04;
-$comment-fill-color: $ui-01;
-$comment-text-color: $text-02;
+$comment-outline-color: $active-light-ui;
+$comment-outline-hover-color: $inverse-hover-ui;
+$comment-fill-color: $white-0;
+$comment-text-color: $gray-100;
 
 // Comment properties
 $comment-text-font-size: 12px;
@@ -293,7 +294,6 @@ $link-highlight-color: $support-04;
 	}
 }
 
-
 /* Node styles - Error indication */
 
 .d3-node-error-label {
@@ -473,7 +473,6 @@ $link-highlight-color: $support-04;
 	}
 }
 
-
 /* Error indicator */
 .d3-error-circle {
 	stroke: $canvas-background-color;
@@ -605,7 +604,14 @@ $link-highlight-color: $support-04;
 
 /* Comment styles */
 
-/* Style for comment background rectangle */
+.d3-comment-group:hover {
+	.d3-comment-rect {
+		stroke: $comment-outline-hover-color
+	}
+}
+
+
+/* Style for default comment background rectangle */
 .d3-comment-rect {
 	fill: $comment-fill-color;
 	stroke: $comment-outline-color;
@@ -616,6 +622,59 @@ $link-highlight-color: $support-04;
 	user-select: none;
 }
 
+@mixin comment-color-overrides($background-color) {
+	.d3-comment-rect {
+		fill: $background-color;
+	}
+	.d3-comment-entry {
+		background-color: $background-color;
+		color: $gray-100;
+	}
+
+}
+
+/* Styles for comments colored by the user */
+// We add g. at the front of each selector below to override any color set
+// by a class provided for the comment by the host application. The
+// assumption is, the user would prefer the color they set in the UI to
+// override any color provided by the host app.
+g.bkg-col-white-0 {
+	@include comment-color-overrides($white-0);
+}
+g.bkg-col-yellow-20 {
+	@include comment-color-overrides($yellow-20);
+}
+g.bkg-col-gray-20 {
+	@include comment-color-overrides($gray-20);
+}
+g.bkg-col-green-20 {
+	@include comment-color-overrides($green-20);
+}
+g.bkg-col-teal-20 {
+	@include comment-color-overrides($teal-20);
+}
+g.bkg-col-cyan-20 {
+	@include comment-color-overrides($cyan-20);
+}
+g.bkg-col-red-50 {
+	@include comment-color-overrides($red-50);
+}
+g.bkg-col-orange-40 {
+	@include comment-color-overrides($orange-40);
+}
+g.bkg-col-gray-50 {
+	@include comment-color-overrides($gray-50);
+}
+g.bkg-col-green-50 {
+	@include comment-color-overrides($green-50);
+}
+g.bkg-col-teal-50 {
+	@include comment-color-overrides($teal-50);
+}
+g.bkg-col-cyan-50 {
+	@include comment-color-overrides($cyan-50);
+}
+
 .d3-comment-selection-highlight {
 	stroke-width: 0;
 	fill: transparent;
@@ -632,6 +691,7 @@ $link-highlight-color: $support-04;
 
 @mixin d3-comment-mixin {
 	color: $comment-text-color;
+	background-color: transparent;
 	font-size: $comment-text-font-size;
 	font-weight: $comment-text-font-weight;
 	font-family: $comment-text-font-family;
@@ -653,6 +713,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. */

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

@@ -0,0 +1,201 @@
+/*
+ * Copyright 2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint brace-style: "off" */
+
+import { isEmpty } from "lodash";
+import Logger from "../logging/canvas-logger.js";
+import CanvasUtils from "./common-canvas-utils.js";
+import { COMMENT_LINK } from "./constants/canvas-constants";
+
+
+export default class SVGCanvasPipeline {
+	constructor(pipelineId, canvasInfo) {
+		this.logger = new Logger("SVGCanvasActivePipeline");
+		this.logger.logStartTimer("constructor");
+		this.canvasInfo = canvasInfo;
+		this.pipeline = this.getPipeline(pipelineId, canvasInfo);
+
+		// These variables are accessed directly by svg-canvas-renderer
+		this.id = this.pipeline.id;
+		this.zoom = this.pipeline.zoom;
+		this.nodes = this.pipeline.nodes;
+		this.comments = this.pipeline.comments;
+		this.links = this.pipeline.links;
+
+		// We create mapped arrays for quick lookup
+		this.mappedNodes = this.getMappedArray(this.pipeline.nodes);
+		this.mappedComments = this.getMappedArray(this.pipeline.comments);
+		this.mappedLinks = this.getMappedArray(this.pipeline.links);
+
+		// preProcessPipeline uses the mapped objects so this needs to be done
+		// after they have been created.
+		this.pipeline = this.preProcessPipeline(this.pipeline);
+
+		this.logger.logEndTimer("constructor");
+	}
+
+	getCanvasDimensions(gap) {
+		return CanvasUtils.getCanvasDimensions(
+			this.pipeline.nodes, this.pipeline.comments,
+			this.pipeline.links, gap);
+	}
+
+	// Returns the name of the type of object d.
+	getObjectTypeName(d) {
+		if (this.getComment(d.id)) {
+			return "comment";
+		} else if (this.getNode(d.id)) {
+			return "node";
+		}
+		return "link";
+	}
+
+	getNode(nodeId) {
+		const node = this.mappedNodes[nodeId];
+		return (typeof node === "undefined") ? null : node;
+	}
+
+	getNodes(nodeIds) {
+		const nodes = [];
+		nodeIds.forEach((nId) => {
+			const n = this.getNode(nId);
+			if (n) {
+				nodes.push(n);
+			}
+		});
+		return nodes;
+	}
+
+	getSupernodes() {
+		return this.pipeline.nodes.filter((node) => CanvasUtils.isSupernode(node));
+	}
+
+	// Returns true if the pipeline is empty except for any binding nodes.
+	isEmptyOrBindingsOnly() {
+		return (isEmpty(this.pipeline.nodes) || this.containsOnlyBindingNodes()) &&
+						isEmpty(this.pipeline.comments);
+	}
+
+	containsOnlyBindingNodes() {
+		return !this.pipeline.nodes.find((node) => !CanvasUtils.isSuperBindingNode(node));
+	}
+
+	getComment(commentId) {
+		const com = this.mappedComments[commentId];
+		return (typeof com === "undefined") ? null : com;
+	}
+
+	getNodesAndComments() {
+		return this.pipeline.nodes.concat(this.pipeline.comments);
+	}
+
+	getNodeOrComment(id) {
+		let obj = this.getNode(id);
+		if (obj === null) {
+			obj = this.getComment(id);
+		}
+		return obj;
+	}
+
+	getLink(linkId) {
+		const link = this.mappedLinks[linkId];
+		return (typeof link === "undefined") ? null : link;
+	}
+
+	// Replaces the link in the links array with the one passed in.
+	replaceLink(oldLink) {
+		const index = this.pipeline.links.findIndex((l) => l.id === oldLink.id);
+		this.pipeline.links.splice(index, 1, oldLink);
+		this.mappedLinks = this.getMappedArray(this.pipeline.links);
+	}
+
+	getPipeline(pipelineId, canvasInfo) {
+		const pipeline = canvasInfo.pipelines.find((p) => p.id === pipelineId);
+		if (pipeline) {
+			return pipeline;
+		}
+		return { id: pipelineId, nodes: [], comments: [], links: [] };
+	}
+
+	// Preprocesses the pipeline to set the connected attribute of the ports
+	// for each node. This is used when rendering the connection satus of ports.
+	preProcessPipeline(pipeline) {
+		this.setAllPortsDisconnected(pipeline);
+
+		pipeline.links.forEach((link) => {
+			if (link.type === COMMENT_LINK) {
+				link.srcObj = this.getComment(link.srcNodeId);
+				link.trgNode = this.getNode(link.trgNodeId);
+
+			} else {
+				link.srcObj = this.getNode(link.srcNodeId);
+				link.trgNode = this.getNode(link.trgNodeId);
+
+				if (link.srcObj) {
+					this.setOutputPortConnected(link.srcObj, link.srcNodePortId);
+				}
+				if (link.trgNode) {
+					this.setInputPortConnected(link.trgNode, link.trgNodePortId);
+				}
+			}
+		});
+		return pipeline;
+	}
+
+	// Sets the isConnected property of all ports in the pipeline to false.
+	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.
+	setInputPortConnected(trgNode, inPortId) {
+		const portId = inPortId || CanvasUtils.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.
+	setOutputPortConnected(srcNode, outPortId) {
+		const portId = outPortId || CanvasUtils.getDefaultOutputPortId(srcNode);
+		if (srcNode.outputs) {
+			srcNode.outputs.forEach((out) => {
+				if (out.id === portId) {
+					out.isConnected = true;
+				}
+			});
+		}
+	}
+
+	// Returns an object where each element in the array provided is indexed by
+	// the id property of the element.
+	getMappedArray(array) {
+		return array.reduce((map, o) => { map[o.id] = o; return map; }, {});
+	}
+}