@elyra/canvas 12.10.0 → 12.11.0

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