#2115 Support collapsed super node resizing (#2116)

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/src/common-canvas/canvas-controller.js

@@ -1819,7 +1819,7 @@ export default class CanvasController {
 	// the viewport, a zoom object will be returned that can be used to zoom them
 	// so they appear at the nearest side of the viewport to where they are
 	// currently positioned.
-	// The zoom object retuurned has three fields:
+	// The zoom object returned has three fields:
 	// x: Is the horizontal translate amount which is a number indicating the
 	//    pixel amount to move. Negative left and positive right
 	// y: Is the vertical translate amount which is a number indicating the

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

@@ -522,6 +522,17 @@ export default class CanvasUtils {
 		return (1 - t) * (1 - t) * (1 - t) * p0 + 3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t * p3;
 	}
 
+	// Returns true if the node passed in should be resizeable. All nodes are resizabele
+	// except binding nodes in a sub-flow when enableResizableNodes is switched on.
+	static isNodeResizable(node, config) {
+		if (!config.enableEditingActions ||
+				this.isSuperBindingNode(node) ||
+				(!config.enableResizableNodes && !this.isExpandedSupernode(node))) {
+			return false;
+		}
+		return true;
+	}
+
 	// Returns true if a link of type `type` can be created between the two
 	// node/port combinations provided given the set of current links provided.
 	static isConnectionAllowed(srcNodePortId, trgNodePortId, srcNode, trgNode, links, type, selfRefLinkAllowed) {

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

@@ -642,14 +642,6 @@ export default class SVGCanvasRenderer {
 		this.dragObjectUtils.isMoving();
 	}
 
-	// Returns true if the node should have a resizing area. We should display
-	// a sizing area even for collapsed supernodes so it is available if/when
-	// the supernode is expanded
-	shouldDisplayNodeSizingArea(node) {
-		return !CanvasUtils.isSuperBindingNode(node) &&
-			(CanvasUtils.isSupernode(node) || this.config.enableResizableNodes);
-	}
-
 	getAllNodeGroupsSelection() {
 		return this.nodesLinksGrp.selectChildren(".d3-node-group");
 	}
@@ -1616,7 +1608,7 @@ export default class SVGCanvasRenderer {
 		// Node Sizing Area
 		nonBindingNodeGrps
 			.selectChildren(".d3-node-sizing")
-			.data((d) => (this.shouldDisplayNodeSizingArea(d) ? [d] : []), (d) => d.id)
+			.data((d) => (CanvasUtils.isNodeResizable(d, this.config) ? [d] : []), (d) => d.id)
 			.join(
 				(enter) =>
 					enter

canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-objects.js

@@ -91,8 +91,7 @@ export default class SVGCanvasUtilsDragObjects {
 	}
 
 	mouseEnterNodeSizingArea(d3Event, d) {
-		if (this.ren.config.enableEditingActions && // Only set cursor when we are able to resize nodes
-				this.isNodeResizable(d) &&
+		if (CanvasUtils.isNodeResizable(d, this.ren.config) &&
 				!this.ren.isRegionSelectOrSizingInProgress()) { // Don't switch sizing direction if we are already sizing
 			let cursorType = "default";
 			if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
@@ -105,7 +104,7 @@ export default class SVGCanvasUtilsDragObjects {
 	}
 
 	mouseDownNodeSizingArea(d) {
-		if (this.isNodeResizable(d)) {
+		if (CanvasUtils.isNodeResizable(d, this.ren.config)) {
 			this.nodeSizing = true;
 			// Note - node resizing and finalization of size is handled by drag functions.
 			this.ren.addTempCursorOverlay(this.nodeSizingCursor);
@@ -279,19 +278,6 @@ export default class SVGCanvasUtilsDragObjects {
 		return cursorType;
 	}
 
-	// Returns true if the node should be resizeable. Expanded supernodes are
-	// always resizabele and all other nodes, except collapsed supernodes, are
-	// resizeable when enableResizableNodes is switched on.
-	isNodeResizable(node) {
-		if (!this.ren.config.enableEditingActions ||
-				CanvasUtils.isSuperBindingNode(node) ||
-				CanvasUtils.isCollapsedSupernode(node) ||
-				(!this.ren.config.enableResizableNodes && !CanvasUtils.isExpandedSupernode(node))) {
-			return false;
-		}
-		return true;
-	}
-
 	// Sets the size and position of the node in the canvasInfo.nodes
 	// array based on the position of the pointer during the resize action
 	// then redraws the nodes and links (the link positions may move based
@@ -305,7 +291,7 @@ export default class SVGCanvasUtilsDragObjects {
 			this.nodeSizingDirection, minWidth, minHeight);
 
 		if (delta && (delta.x_pos !== 0 || delta.y_pos !== 0 || delta.width !== 0 || delta.height !== 0)) {
-			if (CanvasUtils.isSupernode(resizeObj) &&
+			if (CanvasUtils.isExpandedSupernode(resizeObj) &&
 					this.ren.config.enableMoveNodesOnSupernodeResize) {
 				const objectsInfo = CanvasUtils.moveSurroundingObjects(
 					oldSupernode,
@@ -338,7 +324,7 @@ export default class SVGCanvasUtilsDragObjects {
 			this.ren.displayMovedLinks();
 			this.ren.displayCanvasAccoutrements();
 
-			if (CanvasUtils.isSupernode(resizeObj)) {
+			if (CanvasUtils.isExpandedSupernode(resizeObj)) {
 				if (this.ren.dispUtils.isDisplayingSubFlow()) {
 					this.ren.displayBindingNodesToFitSVG();
 				}
@@ -530,7 +516,7 @@ export default class SVGCanvasUtilsDragObjects {
 	// bottom of the frame. Then the bigger of that height versus the default
 	// supernode minimum height is retunred.
 	getMinHeight(node) {
-		if (CanvasUtils.isSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			const minHt = Math.max(node.inputPortsHeight, node.outputPortsHeight) +
 				this.ren.canvasLayout.supernodeTopAreaHeight + this.ren.canvasLayout.supernodeSVGAreaPadding;
 			return Math.max(this.ren.canvasLayout.supernodeMinHeight, minHt);
@@ -540,7 +526,7 @@ export default class SVGCanvasUtilsDragObjects {
 
 	// Returns the minimum allowed width for the node passed in.
 	getMinWidth(node) {
-		if (CanvasUtils.isSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.ren.canvasLayout.supernodeMinWidth;
 		}
 		return node.layout.defaultNodeWidth;

canvas_modules/common-canvas/src/object-model/pipeline-out-handler.js

@@ -157,10 +157,12 @@ export default class PipelineOutHandler {
 			uiData.expanded_width = ciNode.expanded_width;
 			uiData.expanded_height = ciNode.expanded_height;
 
-		} else if (ciNode.isResized) {
+		}
+
+		if (ciNode.isResized) {
 			uiData.is_resized = ciNode.isResized;
-			uiData.resize_width = ciNode.width;
-			uiData.resize_height = ciNode.height;
+			uiData.resize_width = ciNode.resizeWidth;
+			uiData.resize_height = ciNode.resizeHeight;
 		}
 
 		if (ciNode.messages && !isEmpty(ciNode.messages)) {

canvas_modules/harness/cypress/support/canvas/node-cmds.js

@@ -225,7 +225,7 @@ Cypress.Commands.add("hoverOverNodeLabel", (nodeName) => {
 	cy.wait(10);
 	cy.getNodeWithLabel(nodeName)
 		.find("> foreignObject > .d3-node-label > span")
-		.trigger("mouseenter");
+		.trigger("mouseenter", { force: true });
 });
 
 Cypress.Commands.add("hoverOverNodeInSupernode", (nodeName, supernodeName) => {

docs/pages/03.04-canvas-controller.md

@@ -974,7 +974,7 @@ getZoom()
 // the viewport, a zoom object will be returned that can be used to zoom them
 // so they appear at the nearest side of the viewport to where they are
 // currently positioned.
-// The zoom object retuurned has three fields:
+// The zoom object returned has three fields:
 // x: Is the horizontal translate amount which is a number indicating the
 //    pixel amount to move. Negative left and positive right
 // y: Is the vertical translate amount which is a number indicating the