@elyra/canvas 12.11.1 → 12.12.1

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

@@ -230,7 +230,12 @@ class CanvasContents extends React.Component {
 	// 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") {
+		if (e.target &&
+			e.target.className &&
+			(
+				e.target.className.baseVal === "svg-area" ||
+				e.target.className.baseVal === "d3-svg-background"
+			)) {
 			this.mousePos = {
 				x: e.clientX,
 				y: e.clientY

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

@@ -35,9 +35,9 @@ class CommonCanvasToolbar extends React.Component {
 		this.logger = new Logger("CC-Toolbar");
 	}
 
-	getLabel(labelId) {
+	getLabel(labelId, substituteObj) {
 		const defaultMessage = defaultMessages[labelId] ? defaultMessages[labelId] : defaultToolbarMessages[labelId];
-		return this.props.intl.formatMessage({ id: labelId, defaultMessage: defaultMessage });
+		return this.props.intl.formatMessage({ id: labelId, defaultMessage: defaultMessage }, substituteObj);
 	}
 
 	// Returns the default toolbar which is shown if the user does not specify
@@ -215,6 +215,10 @@ class CommonCanvasToolbar extends React.Component {
 			this.applyToolState("createAutoComment", toolbarConfig, editingAllowed);
 			this.applyToolState("arrangeHorizontally", toolbarConfig, editingAllowed);
 			this.applyToolState("arrangeVertically", toolbarConfig, editingAllowed);
+			// editingAllowed = false doesn't stop zoom capability
+			this.applyToolState("zoomIn", toolbarConfig, this.props.canZoomIn);
+			this.applyToolState("zoomOut", toolbarConfig, this.props.canZoomOut);
+			this.applyToolState("zoomToFit", toolbarConfig, this.props.canZoomToFit);
 		}
 		return toolbarConfig;
 	}
@@ -226,13 +230,13 @@ class CommonCanvasToolbar extends React.Component {
 		if (undoLabel) {
 			const undoTool = this.findTool("undo", toolbarConfig);
 			if (undoTool) {
-				undoTool.label += ": " + undoLabel;
+				undoTool.label = this.getLabel("canvas.undoCommand", { undo_command: undoLabel });
 			}
 		}
 		if (redoLabel) {
 			const redoTool = this.findTool("redo", toolbarConfig);
 			if (redoTool) {
-				redoTool.label += ": " + redoLabel;
+				redoTool.label = this.getLabel("canvas.redoCommand", { redo_command: redoLabel });
 			}
 		}
 		return toolbarConfig;
@@ -304,6 +308,9 @@ CommonCanvasToolbar.propTypes = {
 	canCutCopy: PropTypes.bool,
 	canPaste: PropTypes.bool,
 	canDelete: PropTypes.bool,
+	canZoomIn: PropTypes.bool,
+	canZoomOut: PropTypes.bool,
+	canZoomToFit: PropTypes.bool,
 	undoLabel: PropTypes.string,
 	redoLabel: PropTypes.string
 };
@@ -323,6 +330,9 @@ const mapStateToProps = (state, ownProps) => ({
 	canCutCopy: ownProps.canvasController.canCutCopy(),
 	canPaste: ownProps.canvasController.canPaste(),
 	canDelete: ownProps.canvasController.canDelete(),
+	canZoomIn: ownProps.canvasController.canZoomIn(),
+	canZoomOut: ownProps.canvasController.canZoomOut(),
+	canZoomToFit: ownProps.canvasController.canZoomToFit(),
 	undoLabel: ownProps.canvasController.getUndoLabel(),
 	redoLabel: ownProps.canvasController.getRedoLabel()
 });

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

@@ -19,7 +19,8 @@
 // the CanvasRender objects.
 
 import { get, set } from "lodash";
-import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK, LINK_TYPE_STRAIGHT, SUPER_NODE }
+import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK,
+	LINK_TYPE_STRAIGHT, SUPER_NODE, NORTH, SOUTH, EAST, WEST }
 	from "../common-canvas/constants/canvas-constants.js";
 
 
@@ -356,6 +357,56 @@ export default class CanvasUtils {
 		return { x: startPointX, y: startPointY };
 	}
 
+	// Returns a direction NORTH, SOUTH, EAST or WEST which is the direction
+	// from the origin position within the rectangle described by x, y, w and h
+	// to the end position described by endX and endY.
+	static getDir(x, y, w, h, originX, originY, endX, endY) {
+		const bottomEdge = y + h;
+
+		// The origin may not be in the center of the node rectangle so offset left
+		// and right may be different and also top and bottom.
+		const originTopOffsetY = originY - y;
+		const originLeftOffsetX = originX - x;
+
+		const originToEndX = originX - endX;
+		const originToEndY = originY - endY;
+
+		let dir = "";
+
+		if (originToEndX === 0) {
+			dir = (endY < originY) ? NORTH : SOUTH;
+
+		} else if (endX > originX) {
+			const rightEdge = x + w;
+			const topRightRatio = originTopOffsetY / (originX - rightEdge);
+			const botRightRatio = (originY - bottomEdge) / (originX - rightEdge);
+			const ratioRight = originToEndY / originToEndX;
+
+			if (ratioRight < topRightRatio) {
+				dir = NORTH;
+			} else if (ratioRight > botRightRatio) {
+				dir = SOUTH;
+			} else {
+				dir = EAST;
+			}
+		// End point is to the left of center
+		} else {
+			const topLeftRatio = originTopOffsetY / originLeftOffsetX;
+			const botLeftRatio = (originY - bottomEdge) / originLeftOffsetX;
+			const ratioLeft = originToEndY / originToEndX;
+
+			if (ratioLeft > topLeftRatio) {
+				dir = NORTH;
+			} else if (ratioLeft < botLeftRatio) {
+				dir = SOUTH;
+			} else {
+				dir = WEST;
+			}
+		}
+
+		return dir;
+	}
+
 	// Returns true if the line described by x1, y1, x2, y2 either intersects or
 	// is fully inside the rectangle described by rx1, ry1, rx2, ry2.
 	static lineIntersectRectangle(x1, y1, x2, y2, rx1, ry1, rx2, ry2) {
@@ -892,6 +943,9 @@ export default class CanvasUtils {
 		return this.isSupernode(node) && this.isExpanded(node);
 	}
 
+	static isCollapsedSupernode(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) {

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

@@ -95,9 +95,11 @@ $bottom-panel-height: 393px;
 }
 
 .bottom-panel-drag {
-	background: $palette-border-color;
+	border-top: $palette-border-color;
 	cursor: row-resize;
 	flex: 0 0 2px;
+	border-top-width: 1px;
+	background: $ui-01;
 	transition: all 0.2s ease-in;
 	&:hover {
 		background: $interactive-01;

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

@@ -74,6 +74,11 @@ export const STATE_TAG_NONE = "None";
 export const STATE_TAG_LOCKED = "Locked";
 export const STATE_TAG_READ_ONLY = "ReadOnly";
 
+// Values for enableSaveZoom
+export const SAVE_ZOOM_NONE = "None";
+export const SAVE_ZOOM_PIPELINE_FLOW = "Pipelineflow";
+export const SAVE_ZOOM_LOCAL_STORAGE = "LocalStorage";
+
 export const ERROR = "error";
 export const WARNING = "warning";
 export const INFO = "info";
@@ -141,6 +146,13 @@ export const SAVED_NODES_CATEGORY_ID = "savedNodes";
 export const USE_DEFAULT_ICON = "useDefaultIcon";
 export const USE_DEFAULT_EXT_ICON = "useDefaultExtIcon";
 
+// Directions
+export const NORTH = "n";
+export const SOUTH = "s";
+export const EAST = "e";
+export const WEST = "w";
+
+
 export const CONTEXT_MENU_BUTTON = 2;
 
 export const CANVAS_CARBON_ICONS = {

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

@@ -141,6 +141,14 @@ export default class SVGCanvasD3 {
 		this.renderer.zoomToFit();
 	}
 
+	isZoomedToMax() {
+		return this.renderer ? this.renderer.isZoomedToMax() : false;
+	}
+
+	isZoomedToMin() {
+		return this.renderer ? this.renderer.isZoomedToMin() : false;
+	}
+
 	getZoomToReveal(objectIds, xPos, yPos) {
 		return this.renderer ? this.renderer.getZoomToReveal(objectIds, xPos, yPos) : null;
 	}