@elyra/canvas 12.21.0 → 12.23.0

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

@@ -41,7 +41,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, LEFT_ARROW_ICON, EDIT_ICON,
 	NODE_MENU_ICON, SUPER_NODE_EXPAND_ICON, PORT_OBJECT_CIRCLE, PORT_OBJECT_IMAGE,
 	TIP_TYPE_NODE, TIP_TYPE_PORT, TIP_TYPE_DEC, TIP_TYPE_LINK,
-	INTERACTION_MOUSE, INTERACTION_TRACKPAD,
+	INTERACTION_MOUSE, INTERACTION_TRACKPAD, INTERACTION_CARBON,
 	USE_DEFAULT_ICON, USE_DEFAULT_EXT_ICON,
 	SUPER_NODE, SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
 	NORTH, SOUTH, EAST, WEST }
@@ -178,6 +178,12 @@ export default class SVGCanvasRenderer {
 		// no need to re-render whole canvas
 		this.selecting = false;
 
+		// Flag to indicate when the space key is down (used when dragging).
+		this.spaceKeyPressed = false;
+
+		// Flag to indicate when a zoom is invoked programmatically.
+		this.zoomingAction = false;
+
 		// Allows us to track when the binding nodes in a subflow are being moved.
 		this.movingBindingNodes = false;
 
@@ -187,7 +193,9 @@ export default class SVGCanvasRenderer {
 
 		// Used to monitor the region selection rectangle.
 		this.regionSelect = false;
-		this.region = { startX: 0, startY: 0, width: 0, height: 0 };
+
+		// Used to track the start of the zoom.
+		this.zoomStartPoint = { x: 0, y: 0, k: 0, startX: 0, startY: 0 };
 
 		// I was not able to figure out how to use the zoom filter method to
 		// allow mousedown and mousemove messages to go through to the canvas to
@@ -273,6 +281,27 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("constructor" + pipelineId.substring(0, 5));
 	}
 
+	setSpaceKeyPressed(state) {
+		this.spaceKeyPressed = state;
+		this.resetCanvasCursor();
+	}
+
+	// Returns true if the space bar is pressed and held down. This is called
+	// from outside canvas via svg-canvas-d3 as well as internally.
+	isSpaceKeyPressed() {
+		return this.spaceKeyPressed;
+	}
+
+	// Returns true if the event indicates that a drag is in action. This means
+	// with regular Mouse interation that the space bar is pressed or with
+	// legacy interation it means the shift key is NOT pressed.
+	isDragActivated(d3Event) {
+		if (this.config.enableInteractionType === INTERACTION_CARBON) {
+			return this.isSpaceKeyPressed();
+		}
+		return (d3Event && d3Event.sourceEvent && !d3Event.sourceEvent.shiftKey);
+	}
+
 	// Returns the data object for the parent supernode that references the
 	// active pipeline (managed by this renderer). We get the supernode by
 	// looking through the overall canvas info objects.
@@ -300,9 +329,6 @@ export default class SVGCanvasRenderer {
 	initializeZoomVariables() {
 		// Allows us to record the current zoom amounts.
 		this.zoomTransform = d3.zoomIdentity.translate(0, 0).scale(1);
-
-		// Allows us to record the start point of the current zoom.
-		this.zoomStartPoint = { x: 0, y: 0, k: 0 };
 	}
 
 	setCanvasInfoRenderer(canvasInfo) {
@@ -322,10 +348,6 @@ export default class SVGCanvasRenderer {
 		// need the zoom behavior, or vice versa.
 		this.resetCanvasSVGBehaviors();
 
-		// Reset the canvas cursor, in case we went from an empty canvas
-		// (default cursor) to one with nodes and/or comments (hand cursor).
-		this.resetCanvasCursor();
-
 		// If a supernode and its corresponding pipeline has been deleted in the
 		// object model we need to make sure the renderer is removed.
 		this.superRenderers = this.cleanUpSuperRenderers();
@@ -1364,7 +1386,7 @@ export default class SVGCanvasRenderer {
 			.attr("data-pipeline-id", this.activePipeline.id)
 			.attr("class", "d3-svg-background")
 			.attr("pointer-events", "all")
-			.style("cursor", this.getCanvasCursor());
+			.style("cursor", "default");
 
 		// Only attach the 'defs' to the top most SVG area when we are displaying
 		// either the primary pipeline full page or a sub-pipeline full page.
@@ -1433,15 +1455,7 @@ export default class SVGCanvasRenderer {
 			})
 			.on("click.zoom", (d3Event) => {
 				this.logger.log("Canvas - click-zoom");
-				this.selecting = true;
-				// Only clear selections if clicked on the canvas of the current active pipeline.
-				// Clicking the canvas of an expanded supernode will select that node.
-				if (this.dispUtils.isDisplayingCurrentPipeline() && !this.contextMenuClosedOnZoom) {
-					this.canvasController.clearSelections();
-				}
-				this.contextMenuClosedOnZoom = false;
-				// Ensure 'selecting' flag is off before calling click action callback.
-				this.selecting = false;
+
 				this.canvasController.clickActionHandler({
 					clickType: d3Event.type === "contextmenu" ? "SINGLE_CLICK_CONTEXTMENU" : "SINGLE_CLICK",
 					objectType: "canvas",
@@ -1464,19 +1478,7 @@ export default class SVGCanvasRenderer {
 	// Resets the pointer cursor on the background rectangle in the Canvas SVG area.
 	resetCanvasCursor() {
 		const selector = ".d3-svg-background[data-pipeline-id='" + this.activePipeline.id + "']";
-		this.canvasSVG.select(selector).style("cursor", this.getCanvasCursor());
-	}
-
-	// Retuens the appropriate cursor for the canvas SVG area.
-	getCanvasCursor() {
-		if (this.dispUtils.isDisplayingFullPage()) {
-			if (this.config.enableInteractionType === INTERACTION_TRACKPAD ||
-					this.activePipeline.isEmptyOrBindingsOnly()) {
-				return "default";
-			}
-			return "grab";
-		}
-		return "pointer";
+		this.canvasSVG.select(selector).style("cursor", this.isDragActivated() && this.dispUtils.isDisplayingFullPage() ? "grab" : "default");
 	}
 
 	createCanvasGroup(canvasObj, className) {
@@ -1622,6 +1624,7 @@ export default class SVGCanvasRenderer {
 		if (isFinite(newZoomTransform.x) &&
 				isFinite(newZoomTransform.y) &&
 				isFinite(newZoomTransform.k)) {
+			this.zoomingAction = true;
 			const zoomTransform = d3.zoomIdentity.translate(newZoomTransform.x, newZoomTransform.y).scale(newZoomTransform.k);
 			if (animateTime) {
 				this.canvasSVG.call(this.zoom).transition()
@@ -1630,6 +1633,7 @@ export default class SVGCanvasRenderer {
 			} else {
 				this.canvasSVG.call(this.zoom.transform, zoomTransform);
 			}
+			this.zoomingAction = false;
 		}
 	}
 
@@ -1649,9 +1653,7 @@ export default class SVGCanvasRenderer {
 			x -= newScale * canvasDimensions.left;
 			y -= newScale * canvasDimensions.top;
 
-			this.zoomingToFit = true;
 			this.zoomCanvasInvokeZoomBehavior({ x: x, y: y, k: newScale });
-			this.zoomingToFit = false;
 		}
 	}
 
@@ -1795,47 +1797,28 @@ export default class SVGCanvasRenderer {
 			this.contextMenuClosedOnZoom = true;
 		}
 
-		// this.zoomingToFit flag is used to avoid redo actions initialized
-		// by Cmd+Shift+Z (where the shift key has been pressed) causing a region
-		// selection to start. So whenever it is set, make sure we do a scale
-		// operation.
-		// Also, below, we must check the d3Event.sourceEvent because for a zoom
-		// operation d3Event does not contain info about the shift key.
-		if (this.zoomingToFit) {
-			this.regionSelect = false;
-		} else if ((this.config.enableInteractionType === INTERACTION_TRACKPAD &&
-								d3Event.sourceEvent && d3Event.sourceEvent.buttons === 1) || // Main button is pressed
-							(this.config.enableInteractionType === INTERACTION_MOUSE &&
-								d3Event.sourceEvent && d3Event.sourceEvent.shiftKey)) { // Shift key is pressed
-			this.regionSelect = true;
-		} else {
-			this.regionSelect = false;
-		}
+		this.regionSelect = this.shouldDoRegionSelect(d3Event);
 
 		if (this.regionSelect) {
+			// Add a delay so, if the user just clicks, they don't see the crosshair.
+			// This will be cleared in zoomEnd if the user's click takes less than 200 ms.
+			this.addingCrossHairCursor = setTimeout(() => this.addTempCursorOverlay("crosshair"), 200);
 			this.regionStartTransformX = d3Event.transform.x;
 			this.regionStartTransformY = d3Event.transform.y;
-			const transPos = this.getTransformedMousePos(d3Event);
-			this.region = {
-				startX: transPos.x,
-				startY: transPos.y,
-				width: 0,
-				height: 0
-			};
-		}
 
-		// To make the new cursor style appear *immediately* on mousedown we set the
-		// appropriate cursor style on the SVG background rectanagle. The cursor
-		// overlay will handle the cursor style as the mouse is moved.
-		const selector = ".d3-svg-background[data-pipeline-id='" + this.activePipeline.id + "']";
-		if (this.regionSelect) {
-			this.canvasSVG.select(selector).style("cursor", "crosshair");
 		} else {
-			this.canvasSVG.select(selector).style("cursor", "grabbing");
+			if (this.isDragActivated(d3Event)) {
+				this.addTempCursorOverlay("grabbing");
+			} else {
+				this.addTempCursorOverlay("default");
+			}
 		}
 
-		this.zoomStartPoint = { x: d3Event.transform.x, y: d3Event.transform.y, k: d3Event.transform.k };
+		const transPos = this.getTransformedMousePos(d3Event);
+		this.zoomStartPoint = { x: d3Event.transform.x, y: d3Event.transform.y, k: d3Event.transform.k, startX: transPos.x, startY: transPos.y };
 		this.previousD3Event = { x: d3Event.transform.x, y: d3Event.transform.y, k: d3Event.transform.k };
+		// Calculate the canvas dimensions here, so we don't have to recalculate
+		// them for every zoom action event.
 		this.zoomCanvasDimensions = CanvasUtils.getCanvasDimensions(
 			this.activePipeline.nodes, this.activePipeline.comments,
 			this.activePipeline.links, this.canvasLayout.commentHighlightGap);
@@ -1847,14 +1830,13 @@ export default class SVGCanvasRenderer {
 		// If the scale amount is the same we are not zooming, so we must be panning.
 		if (d3Event.transform.k === this.zoomStartPoint.k) {
 			if (this.regionSelect) {
-				this.addTempCursorOverlay("crosshair");
 				this.drawRegionSelector(d3Event);
 
 			} else {
-				this.addTempCursorOverlay("grabbing");
 				this.zoomCanvasBackground(d3Event);
 			}
 		} else {
+			this.addTempCursorOverlay("default");
 			this.zoomCanvasBackground(d3Event);
 			this.zoomCommentToolbar();
 		}
@@ -1863,62 +1845,60 @@ export default class SVGCanvasRenderer {
 	zoomEnd(d3Event) {
 		this.logger.log("zoomEnd - " + JSON.stringify(d3Event.transform));
 
+		// Clears the display of the crosshair cursor if the user clicks within 200 ms
+		clearTimeout(this.addingCrossHairCursor);
+
+		const transPos = this.getTransformedMousePos(d3Event);
+
 		if (this.drawingNewLinkData) {
 			this.stopDrawingNewLink();
-			this.drawingNewLinkData = null;
-		}
 
-		if (this.draggingLinkData) {
+		} else if (this.draggingLinkData) {
 			this.stopDraggingLink();
-			this.draggingLinkData = null;
-		}
-
-		if (d3Event.transform.k === this.zoomStartPoint.k &&
-				this.regionSelect === true) {
-			this.removeRegionSelector();
-
-			// Reset the transform x and y to what they were before the region
-			// selection action was started. This directly sets the x and y values
-			// in the __zoom property of the svgCanvas DOM object.
-			d3Event.transform.x = this.regionStartTransformX;
-			d3Event.transform.y = this.regionStartTransformY;
-
-			var { startX, startY, width, height } = this.getRegionDimensions();
-			this.isSelecting = true;
 
-			// Ensure the link objects in the active pipeline have their coordinate
-			// positions set. The coords might not be set if the last object model
-			// update was a change in selections or some other operation that does
-			// not redraw link lines.
-			this.buildLinksArray();
+		// The user just clicked -- with no drag.
+		} else if (transPos.x === this.zoomStartPoint.startX &&
+							transPos.y === this.zoomStartPoint.startY &&
+							!this.zoomChanged()) {
+			this.zoomClick();
 
-			const region = { x1: startX, y1: startY, x2: startX + width, y2: startY + height };
-			const selections =
-				CanvasUtils.selectInRegion(region, this.activePipeline,
-					this.config.enableLinkSelection !== LINK_SELECTION_NONE,
-					this.config.enableLinkType,
-					this.config.enableAssocLinkType);
-			this.canvasController.setSelections(selections, this.activePipeline.id);
-			this.regionSelect = false;
+		} else if (this.regionSelect) {
+			this.zoomEndRegionSelect(d3Event);
 
 		} else if (this.dispUtils.isDisplayingFullPage() && this.zoomChanged()) {
-			// Set the internal zoom value for canvasSVG used by D3. This will be
-			// used by d3Event next time a zoom action is initiated.
-			this.canvasSVG.property("__zoom", this.zoomTransform);
-
-			const data = {
-				editType: "setZoom",
-				editSource: "canvas",
-				zoom: this.zoomTransform,
-				pipelineId: this.activePipeline.id
-			};
-			this.canvasController.editActionHandler(data);
+			this.zoomSave();
 		}
 
 		// Remove the cursor overlay and reset the SVG background rectangle
 		// cursor style, which was set in the zoom start method.
-		this.resetCanvasCursor();
+		this.resetCanvasCursor(d3Event);
 		this.removeTempCursorOverlay();
+		this.contextMenuClosedOnZoom = false;
+		this.regionSelect = false;
+	}
+
+	// Returns true if the region select gesture is requested by the user.
+	shouldDoRegionSelect(d3Event) {
+		// The this.zoomingAction flag indicates zooming is being invoked
+		// programmatically.
+		if (this.zoomingAction) {
+			return false;
+
+		} else if (this.config.enableInteractionType === INTERACTION_MOUSE &&
+				(d3Event && d3Event.sourceEvent && d3Event.sourceEvent.shiftKey)) {
+			return true;
+
+		} else if (this.config.enableInteractionType === INTERACTION_CARBON &&
+							!this.isSpaceKeyPressed(d3Event)) {
+			return true;
+
+		} else if (this.config.enableInteractionType === INTERACTION_TRACKPAD &&
+				(d3Event.sourceEvent && d3Event.sourceEvent.buttons === 1) && // Main button is pressed
+				!this.spaceKeyPressed) {
+			return true;
+		}
+
+		return false;
 	}
 
 	// Returns true if the current zoom transform is different from the
@@ -1957,6 +1937,63 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Handles a zoom operation that is just a click on the canvas background.
+	zoomClick() {
+		// Only clear selections if clicked on the canvas of the current active pipeline.
+		// Clicking the canvas of an expanded supernode will select that node.
+		if (this.dispUtils.isDisplayingCurrentPipeline() && !this.contextMenuClosedOnZoom) {
+			this.selecting = true;
+			this.canvasController.clearSelections();
+			this.selecting = false;
+		}
+	}
+
+	// Handles the behavior when the user stops doing a region select.
+	zoomEndRegionSelect(d3Event) {
+		this.removeRegionSelector();
+
+		// Reset the transform x and y to what they were before the region
+		// selection action was started. This directly sets the x and y values
+		// in the __zoom property of the svgCanvas DOM object.
+		d3Event.transform.x = this.regionStartTransformX;
+		d3Event.transform.y = this.regionStartTransformY;
+
+		const { startX, startY, width, height } = this.getRegionDimensions(d3Event);
+
+		// Ensure the link objects in the active pipeline have their coordinate
+		// positions set. The coords might not be set if the last object model
+		// update was a change in selections or some other operation that does
+		// not redraw link lines.
+		this.buildLinksArray();
+
+		const region = { x1: startX, y1: startY, x2: startX + width, y2: startY + height };
+		const selections =
+			CanvasUtils.selectInRegion(region, this.activePipeline,
+				this.config.enableLinkSelection !== LINK_SELECTION_NONE,
+				this.config.enableLinkType,
+				this.config.enableAssocLinkType);
+		this.selecting = true;
+		this.canvasController.setSelections(selections, this.activePipeline.id);
+		this.selecting = false;
+	}
+
+	// Save the zoom amount. The canvas controller/object model will decide
+	// how this info is saved.
+	zoomSave() {
+		// Set the internal zoom value for canvasSVG used by D3. This will be
+		// used by d3Event next time a zoom action is initiated.
+		this.canvasSVG.property("__zoom", this.zoomTransform);
+
+		const data = {
+			editType: "setZoom",
+			editSource: "canvas",
+			zoom: this.zoomTransform,
+			pipelineId: this.activePipeline.id
+		};
+		this.canvasController.editActionHandler(data);
+
+	}
+
 	// Repositions the comment toolbar so it is always over the top of the
 	// comment being edited.
 	zoomCommentToolbar() {
@@ -2061,12 +2098,8 @@ export default class SVGCanvasRenderer {
 	}
 
 	drawRegionSelector(d3Event) {
-		const transPos = this.getTransformedMousePos(d3Event);
-		this.region.width = transPos.x - this.region.startX;
-		this.region.height = transPos.y - this.region.startY;
-
 		this.removeRegionSelector();
-		var { startX, startY, width, height } = this.getRegionDimensions();
+		const { startX, startY, width, height } = this.getRegionDimensions(d3Event);
 
 		this.canvasGrp
 			.append("rect")
@@ -2081,22 +2114,23 @@ export default class SVGCanvasRenderer {
 		this.canvasGrp.selectAll(".d3-region-selector").remove();
 	}
 
-	// Returns the startX, startY, width and height of the selction region
+	// Returns the startX, startY, width and height of the selection region
 	// where startX and startY are always the top left corner of the region
 	// and width and height are therefore always positive.
-	getRegionDimensions() {
-		var startX = this.region.startX;
-		var startY = this.region.startY;
-		var width = this.region.width;
-		var height = this.region.height;
+	getRegionDimensions(d3Event) {
+		const transPos = this.getTransformedMousePos(d3Event);
+		let startX = this.zoomStartPoint.startX;
+		let startY = this.zoomStartPoint.startY;
+		let width = transPos.x - startX;
+		let height = transPos.y - startY;
 
 		if (width < 0) {
 			width = Math.abs(width);
-			startX = this.region.startX - width;
+			startX -= width;
 		}
 		if (height < 0) {
 			height = Math.abs(height);
-			startY = this.region.startY - height;
+			startY -= height;
 		}
 
 		return { startX, startY, width, height };
@@ -2489,7 +2523,7 @@ export default class SVGCanvasRenderer {
 		} else if ((this.dragging && !this.nodeSizing && !this.commentSizing) || this.movingBindingNodes) {
 			this.displayMovedNodes();
 
-		} else if (this.selecting || this.regionSelect) {
+		} else if (this.selecting) {
 			this.displayNodesSelectionStatus();
 
 		} else {
@@ -2922,7 +2956,7 @@ export default class SVGCanvasRenderer {
 			.on("mousemove mouseenter", (d3Event, d) => {
 				if (this.isNodeResizable(d) &&
 						!this.isRegionSelectOrSizingInProgress()) { // Don't switch sizing direction if we are already sizing
-					let cursorType = "pointer";
+					let cursorType = "default";
 					if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
 						this.nodeSizingDirection = this.getSizingDirection(d3Event, d, d.layout.nodeCornerResizeArea);
 						this.nodeSizingCursor = this.getCursorBasedOnDirection(this.nodeSizingDirection);
@@ -2932,7 +2966,7 @@ export default class SVGCanvasRenderer {
 				}
 			})
 			.on("mouseleave", (d3Event, d) => {
-				d3.select(d3Event.currentTarget).style("cursor", "pointer");
+				d3.select(d3Event.currentTarget).style("cursor", "default");
 			});
 	}
 
@@ -4193,6 +4227,7 @@ export default class SVGCanvasRenderer {
 		}
 
 		this.stopDrawingNewLinkForPorts();
+		this.drawingNewLinkData = null;
 	}
 
 	stopDrawingNewLinkForPorts() {
@@ -5006,7 +5041,7 @@ export default class SVGCanvasRenderer {
 		if (this.dragging && !this.commentSizing && !this.nodeSizing && !this.isCommentBeingUpdated) {
 			this.displayMovedComments();
 
-		} else if (this.selecting || this.regionSelect) {
+		} else if (this.selecting) {
 			this.displayCommentsSelectionStatus();
 
 		} else {
@@ -5204,7 +5239,7 @@ export default class SVGCanvasRenderer {
 				if (this.config.enableEditingActions && // Only set cursor when we are able to edit comments
 					!this.isRegionSelectOrSizingInProgress()) // Don't switch sizing direction if we are already sizing
 				{
-					let cursorType = "pointer";
+					let cursorType = "default";
 					if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
 						this.commentSizingDirection = this.getSizingDirection(d3Event, d, this.canvasLayout.commentCornerResizeArea);
 						this.commentSizingCursor = this.getCursorBasedOnDirection(this.commentSizingDirection);
@@ -5656,7 +5691,7 @@ export default class SVGCanvasRenderer {
 	displayLinks() {
 		this.logger.logStartTimer("displayLinks " + this.getFlags());
 
-		if (this.selecting || this.regionSelect) {
+		if (this.selecting) {
 			this.displayLinksSelectionStatus();
 
 		} else {

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

@@ -183,11 +183,12 @@ export default class SvgCanvasDecs {
 	}
 
 	getDecLabelEditIconPosX(dec, obj, objType, spanObj, zoomScale) {
+		const minWidth = Math.min(spanObj.getBoundingClientRect().width, this.getDecLabelWidth(dec, obj, objType));
 		if (dec.label_align === "center") {
 			const halfWid = this.getDecLabelWidth(dec, obj, objType) / 2;
-			return halfWid + (spanObj.getBoundingClientRect().width / 2) / zoomScale;
+			return halfWid + (minWidth / 2) / zoomScale;
 		}
-		return spanObj.getBoundingClientRect().width / zoomScale;
+		return minWidth / zoomScale;
 	}
 
 	getDecLabelEditIconPosY(dec) {

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

@@ -365,11 +365,18 @@ export default class SvgCanvasTextArea {
 			.attr("class", data.className)
 			.text(unescapeText(data.text))
 			.on("keydown", (d3Event) => {
-				// Don't accept return key press when text is all on one line or
-				// if application doesn't want line feeds inserted in the label.
-				if ((data.singleLine || !data.allowReturnKey) &&
-						d3Event.keyCode === RETURN_KEY) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+				// If user hits return/enter
+				if (d3Event.keyCode === RETURN_KEY) {
+					if (data.allowReturnKey === "save") {
+						this.textAreaLabelSaved = true;
+						this.saveAndCloseTextArea(foreignObject, data, d3Event.target.value, d3Event);
+						return;
+
+					// Don't accept return key press when text is all on one line or
+					// if application doesn't want line feeds inserted in the label.
+					} else if (data.singleLine || !data.allowReturnKey) {
+						CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+					}
 				}
 				// If user presses ESC key revert back to original text by just
 				// closing the text area.
@@ -409,6 +416,13 @@ export default class SvgCanvasTextArea {
 					return;
 				}
 
+				// If the text label has been saved by the user hitting the return key
+				// we just return since there's nothing further to do.
+				if (this.textAreaLabelSaved) {
+					this.textAreaLabelSaved = false;
+					return;
+				}
+
 				// If the user clicked on an element in the text toolbar to cause the
 				// blur event, just return.
 				if (d3Event.relatedTarget && CanvasUtils.getParentElementWithClass(d3Event.relatedTarget, "text-toolbar")) {

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -41,9 +41,9 @@ import ActionPanel from "./../../panels/action-panel";
 
 import ActionFactory from "./../../actions/action-factory";
 import Icon from "./../../../icons/icon";
+import { ItemType } from "../../constants/form-constants";
 
 const ALERT_TAB_GROUP = "alertMsgs";
-
 class EditorForm extends React.Component {
 
 	constructor(props) {
@@ -70,6 +70,10 @@ class EditorForm extends React.Component {
 
 		this.actionFactory = new ActionFactory(this.props.controller);
 
+		this.FIRST_TEARSHEET_ID = null;
+		this.TEARSHEETS = {};
+		this.visibleTearsheet = null;
+
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -129,9 +133,12 @@ class EditorForm extends React.Component {
 		const tabContent = [];
 		let hasAlertsTab = false;
 		let modalSelected = 0;
+		const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET);
+		const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET);
+		const totalTabs = tearsheetTabs.concat(nonTearsheetTabs);
 
-		for (let i = 0; i < tabs.length; i++) {
-			const tab = tabs[i];
+		for (let i = 0; i < totalTabs.length; i++) {
+			const tab = totalTabs[i];
 			const tabState = this.props.controller.getPanelState({ name: tab.group });
 			if (tabState === STATES.HIDDEN) {
 				continue;
@@ -144,8 +151,9 @@ class EditorForm extends React.Component {
 			if (this.props.additionalComponents) {
 				additionalComponent = this.props.additionalComponents[tab.group];
 			}
-			// if only 1 tab don't show any tabs
-			if (tabs.length === 1) {
+			// if only 1 tab AND
+			// if total non-tearsheet tabs is 1; don't show any tabs
+			if (totalTabs.length === 1 && nonTearsheetTabs.length === 1) {
 				return (
 					<div key={"cat." + key} className="properties-category">
 						{panelItems}
@@ -160,20 +168,31 @@ class EditorForm extends React.Component {
 					panelArrow = <Icon type={CARBON_ICONS.CHEVRONARROWS.UP} className="properties-category-caret-up" />;
 					categoryOpen = true;
 				}
-				tabContent.push(
-					<div key={this._getContainerIndex(hasAlertsTab, i) + "-" + key} className="properties-category-container">
-						<button type="button" onClick={this._showCategoryPanel.bind(this, tab.group)}
-							className={classNames("properties-category-title", { "properties-light-enabled": this.props.controller.getLight() }) }
-						>
-							{tab.text}{this._getMessageCountForCategory(tab)}
-							{panelArrow}
-						</button>
-						<div className={classNames("properties-category-content", { "show": categoryOpen }) }>
+				if (tab.content.itemType !== ItemType.TEARSHEET && nonTearsheetTabs.length === 1) {
+					tabContent.push(
+						<div key={"cat." + key} className="properties-category">
 							{panelItems}
 							{additionalComponent}
 						</div>
-					</div>
-				);
+					);
+				} else {
+					tabContent.push(
+						<div key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
+							className={classNames("properties-category-container", { "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
+						>
+							<button type="button" onClick={this._showCategoryPanel.bind(this, tab.group)}
+								className={classNames("properties-category-title", { "properties-light-enabled": this.props.controller.getLight() }) }
+							>
+								{tab.text}{this._getMessageCountForCategory(tab)}
+								{panelArrow}
+							</button>
+							<div className={classNames("properties-category-content", { "show": categoryOpen }) }>
+								{panelItems}
+								{additionalComponent}
+							</div>
+						</div>
+					);
+				}
 			} else {
 				if (this.props.activeTab === tab.group) {
 					modalSelected = i;
@@ -183,6 +202,7 @@ class EditorForm extends React.Component {
 						key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
 						tabIndex={i}
 						label={tab.text}
+						className={classNames({ "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
 						onClick={this._modalTabsOnClick.bind(this, tab.group)}
 					>
 						{panelItems}
@@ -434,15 +454,26 @@ class EditorForm extends React.Component {
 					{content}
 				</TwistyPanel>);
 		case ("tearsheet"):
-			if (this.props.controller.getActiveTearsheet() === panel.id) {
+			this.TEARSHEETS[panel.id] = {
+				panel: panel,
+				title: panel.label,
+				description: panel.description ? panel.description.text : null,
+				content: content
+			};
+			if (this.props.controller.getActiveTearsheet() !== null) {
+				this.visibleTearsheet = this.TEARSHEETS[this.props.controller.getActiveTearsheet()];
+			} else {
+				this.visibleTearsheet = null;
+			}
+			if (!this.FIRST_TEARSHEET_ID || this.FIRST_TEARSHEET_ID === panel.id) {
+				this.FIRST_TEARSHEET_ID = panel.id;
 				return (
 					<TearSheet
+						open={this.props.controller.getActiveTearsheet() !== null}
 						key={panel.id}
 						controller={this.props.controller}
-						panel={panel}
-					>
-						{content}
-					</TearSheet>
+						tearsheet={this.visibleTearsheet}
+					/>
 				);
 			}
 			return null;