diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js b/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js index 592bfdb894..ec5789bb17 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js @@ -835,6 +835,53 @@ export default class CanvasUtils { return false; } + // Returns a source port Id if one exists in the link, otherwise defaults + // to the first available port on the source node. + static getSourcePortId(link, srcNode) { + var srcPortId; + if (link.srcNodePortId) { + srcPortId = link.srcNodePortId; + } else if (srcNode.outputs && srcNode.outputs.length > 0) { + srcPortId = srcNode.outputs[0].id; + } else { + srcPortId = null; + } + return srcPortId; + } + + // Returns a target port Id if one exists in the link, otherwise defaults + // to the first available port on the target node. + static getTargetPortId(link, trgNode) { + var trgPortId; + if (link.trgNodePortId) { + trgPortId = link.trgNodePortId; + } else if (trgNode.inputs && trgNode.inputs.length > 0) { + trgPortId = trgNode.inputs[0].id; + } else { + trgPortId = null; + } + return trgPortId; + } + + + // Returns the port referenced by srcPortId from the node referenced + // by srcNode. + static getOutputPort(srcPortId, srcNode) { + if (srcNode && srcNode.outputs) { + return srcNode.outputs.find((p) => p.id === srcPortId); + } + return null; + } + + // Returns the port referenced by trgPortId from the node referenced + // by trgNode. + static getInputPort(trgPortId, trgNode) { + if (trgNode && trgNode.inputs) { + return trgNode.inputs.find((p) => p.id === trgPortId); + } + return null; + } + // Returns the port from the port array indicated by the portId or null // if no port can be found. static getPort(portId, portArray) { diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js index 50a4dd71db..980fb789c8 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js @@ -34,7 +34,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK, ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_RIGHT, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT, LINK_DIR_LEFT_RIGHT, LINK_DIR_RIGHT_LEFT, LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP, - LINK_METHOD_FREEFORM, + LINK_METHOD_FREEFORM, LINK_METHOD_PORTS, LINK_SELECTION_NONE, LINK_SELECTION_HANDLES, LINK_SELECTION_DETACHABLE, CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, EDIT_ICON, NODE_MENU_ICON, SUPER_NODE_EXPAND_ICON, PORT_OBJECT_IMAGE, @@ -4510,6 +4510,35 @@ export default class SVGCanvasRenderer { return link.decorations && link.decorations.length > 0; } + // Returns an array of links taken from the active pipeline, that contain + // additional fields to describe how the link line should be drawn. + // Additional fields + // ----------------- + // These are added by the updateFreeformLinksForNodes function: + // srcFreeformInfo - Added for freeform links. Indicates the starting point of the + // link line used so the starts don't bunch up together if more + // than one link enters or exits on one side of the node. + // trgFreeformInfo - Added for freeform links. Indicates the ending point of the + // link line used so the ends don't bunch up together if more + // than one link enters or exists on one side of the node. + // + // These are added by the getAttachedLinkObj and getDetachedLinkObj functions: + // x1 and y1 - Coordinates of the start of the line + // x2 and y2 - Coordinates of the end of the line + // coordsUpdated - A booelan - true means the cordinates are different to before. + // Used for performance to prevent unneccessary line drawing. + // srcDir - Direction ("n", "s", "e" or "W") of the source of the line + // trgDir - Direction ("n", "s", "e" or "W") of the target of the line + // originX and originY - The theoretical origin in the source node of the line + // assocLinkVariation - Either "curveRight", "curveLeft" or "doubleBack". Indicates + // the style used for drawing association links + // + // These fields are added by the addConnectionPaths function: + // pathinfo - an object containing: + // - elements - An array of elements that make up the path of the link line + // - path - The SVG path used to draw the link line + // - centerPoint - The x,y cordinate of the center of the link line. Used for + // positioning decorations and the context toolbar. buildLinksArray() { this.logger.logStartTimer("buildLinksArray"); @@ -4526,10 +4555,10 @@ export default class SVGCanvasRenderer { this.dragDetLinkUtils.isLinkBeingDragged(link)) || this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE) && (!link.srcObj || !link.trgNode)) { - linkObj = this.getDetachedLineObj(link); + linkObj = this.getDetachedLinkObj(link); } else { - linkObj = this.getAttachedLineObj(link); + linkObj = this.getAttachedLinkObj(link); } if (linkObj) { linksArray.push(linkObj); @@ -4550,7 +4579,10 @@ export default class SVGCanvasRenderer { return linksArray; } - getAttachedLineObj(link) { + // Returns the link object passed in with additional fields to descibe an fully + // attached link. This is called when both srcNode AND trgNode set to node + // objects indicating a link that is attached at the source and taget ends. + getAttachedLinkObj(link) { const srcObj = link.srcObj; const trgNode = link.trgNode; @@ -4569,8 +4601,8 @@ export default class SVGCanvasRenderer { // Only proceed if we have a source and a target node/comment and the // conditions are right for displaying the link. if (srcObj && trgNode && this.shouldDisplayLink(srcObj, trgNode, link.type)) { - const srcPortId = this.getSourcePortId(link, srcObj); - const trgPortId = this.getTargetPortId(link, trgNode); + const srcPortId = CanvasUtils.getSourcePortId(link, srcObj); + const trgPortId = CanvasUtils.getTargetPortId(link, trgNode); const assocLinkVariation = link.type === ASSOCIATION_LINK && this.config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE ? this.getAssocLinkVariation(srcObj, trgNode) @@ -4599,70 +4631,60 @@ export default class SVGCanvasRenderer { return null; } - // Returns a line object describing the detached (or semi-detached) link - // passed in. This will only ever be called when either srcNode OR trgNode - // are null (indicating a semi-detached link) or when both are null indicating - // a fully-detached link. - getDetachedLineObj(link) { + // Returns the link object passed in with additional fields to describe + // a fully-detached or semi-detached link. This will only ever + // be called when either srcNode OR trgNode are null indicating a + // semi-detached link, or when both are null, indicating a fully-detached link. + getDetachedLinkObj(link) { const srcObj = link.srcObj; const trgNode = link.trgNode; - let srcPortId = null; - let trgPortId = null; - const coords = {}; + const coords = { x1: link.x1, y1: link.y1, x2: link.x2, y2: link.y2 }; - if (!srcObj) { - coords.x1 = link.srcPos.x_pos; - coords.y1 = link.srcPos.y_pos; - coords.srcDir = this.getSrcDirForDetachedLink(link, coords.x1, coords.y1); + // Fully-detached link. + if (!srcObj && !trgNode) { + link.x1 = link.srcPos.x_pos; + link.y1 = link.srcPos.y_pos; + link.x2 = link.trgPos.x_pos; + link.y2 = link.trgPos.y_pos; + link.originX = 0; + link.originY = 0; - } else { if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) { - const endPos = { x: link.trgPos.x_pos, y: link.trgPos.y_pos }; - const startPos = this.linkUtils.getNewFreeformNodeLinkStartPos(srcObj, endPos, link.srcOriginInfo); - coords.x1 = startPos.x; - coords.y1 = startPos.y; - coords.originX = startPos.originX; - coords.originY = startPos.originY; - coords.srcDir = startPos.dir; - + link.srcDir = CanvasUtils.getPortDir((link.x2 - link.x1), (link.y2 - link.y1), { width: 10, height: 10, }); // Pass in a dummy node + link.trgDir = this.reverseDir(link.srcDir); } else { - srcPortId = this.getSourcePortId(link, srcObj); - let port = this.getOutputPort(srcObj, srcPortId); - if (!port) { - port = this.getInputPort(srcObj, srcPortId); - } - - if (port) { - coords.x1 = srcObj.x_pos + port.cx; - coords.y1 = srcObj.y_pos + port.cy; - coords.srcDir = port.dir; - } + link.srcDir = this.getDefaultSrcDirForPorts(); + link.trgDir = this.reverseDir(link.srcDir); } - } - if (!trgNode) { - coords.x2 = link.trgPos.x_pos; - coords.y2 = link.trgPos.y_pos; - coords.trgDir = this.getTrgDirForDetachedLink(link, coords.x2, coords.y2); + // Semi-detached at source end. + } else if (trgNode) { + const trgInfo = this.getTargetEndInfo(link, trgNode); + link.x1 = link.srcPos.x_pos; + link.y1 = link.srcPos.y_pos; + link.x2 = trgInfo.x2; + link.y2 = trgInfo.y2; + link.trgDir = trgInfo.trgDir; + link.originX = 0; + link.originY = 0; + + link.srcDir = this.getSrcDirForDetachedLink(link, link.x1, link.y1); + + // Semi-detached at target end. } else { - if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) { - const endPos = { x: link.srcPos.x_pos, y: link.srcPos.y_pos }; - const startPos = this.linkUtils.getNewFreeformNodeLinkStartPos(trgNode, endPos, link.trgOriginInfo); - coords.x2 = startPos.x; - coords.y2 = startPos.y; - coords.trgDir = startPos.dir; + const srcInfo = this.getSourceEndInfo(link, srcObj); - } else { - trgPortId = this.getTargetPortId(link, trgNode); - const port = this.getInputPort(trgNode, trgPortId); - if (port) { - coords.x2 = trgNode.x_pos + port.cx; - coords.y2 = trgNode.y_pos + port.cy; - coords.trgDir = port.dir; - } - } + link.x1 = srcInfo.x1; + link.y1 = srcInfo.y1; + link.x2 = link.trgPos.x_pos; + link.y2 = link.trgPos.y_pos; + link.srcDir = srcInfo.srcDir; + link.originX = srcInfo.originX; + link.originY = srcInfo.originY; + + link.trgDir = this.getTrgDirForDetachedLink(link, link.x2, link.y2); } // Set additional calculated fields on link object. @@ -4672,35 +4694,103 @@ export default class SVGCanvasRenderer { link.x2 !== coords.x2 || link.y2 !== coords.y2; - link.x1 = coords.x1; - link.y1 = coords.y1; - link.x2 = coords.x2; - link.y2 = coords.y2; - link.originX = coords.originX; - link.originY = coords.originY; - link.srcDir = coords.srcDir; - link.trgDir = coords.trgDir; - return link; } + // Returns an info object for the source end of the link, with: + // x1 and y1 - Coordinate of the start of the link line. + // srcDir - Direction ("n", "s", "e" or "w") the link line should be drawn. + // originX and originY = The theoretical start point of the link line from. + getSourceEndInfo(link, srcObj) { + const info = {}; + + if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) { + const endPos = { x: link.trgPos.x_pos, y: link.trgPos.y_pos }; + const startPos = this.linkUtils.getNewFreeformNodeLinkStartPos(srcObj, endPos, link.srcFreeformInfo); + info.x1 = startPos.x; + info.y1 = startPos.y; + info.originX = startPos.originX; + info.originY = startPos.originY; + info.srcDir = startPos.dir; + + } else { + const srcPortId = CanvasUtils.getSourcePortId(link, srcObj); + let port = CanvasUtils.getOutputPort(srcPortId, srcObj); + // If no port, we must be handling a new association link being drawn from an input port. + if (!port) { + port = CanvasUtils.getInputPort(srcPortId, srcObj); + } + + if (port) { + info.x1 = srcObj.x_pos + port.cx; + info.y1 = srcObj.y_pos + port.cy; + info.srcDir = port.dir; + } + } + return info; + } + + // Returns an info object for the target end of the link, with: + // x1 and y1 - Coordinate of the end of the link line. + // srcDir - Direction ("n", "s", "e" or "w") the link line should be drawn to. + getTargetEndInfo(link, trgNode) { + const info = {}; + + if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) { + const endPos = { x: link.srcPos.x_pos, y: link.srcPos.y_pos }; + const startPos = this.linkUtils.getNewFreeformNodeLinkStartPos(trgNode, endPos, link.trgFreeformInfo); + info.x2 = startPos.x; + info.y2 = startPos.y; + info.trgDir = startPos.dir; + + } else { + const trgPortId = CanvasUtils.getTargetPortId(link, trgNode); + const port = CanvasUtils.getInputPort(trgPortId, trgNode); + if (port) { + info.x2 = trgNode.x_pos + port.cx; + info.y2 = trgNode.y_pos + port.cy; + info.trgDir = port.dir; + } + } + return info; + } + + // Returns a default source direction. + getDefaultSrcDirForPorts() { + if (this.canvasLayout.linkDirection === LINK_DIR_LEFT_RIGHT) { + return EAST; + + } else if (this.canvasLayout.linkDirection === LINK_DIR_RIGHT_LEFT) { + return WEST; + + } else if (this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) { + return NORTH; + + } else if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) { + return SOUTH; + } + return EAST; + } + // Returns a direction ("n", "s", "e" or "w") for the source end of a detached link. getSrcDirForDetachedLink(link, x, y) { if (link.trgNode) { - // If we have a trgDir and it fits with the linkDirection currently employed we - // can set the srcDir accordingly. These will be the default cases for ports that - // are positioned based on link direction. - if (link.trgDir === WEST && this.canvasLayout.linkDirection === LINK_DIR_LEFT_RIGHT) { - return EAST; + if (this.canvasLayout.linkMethod === LINK_METHOD_PORTS) { + // If we have a trgDir and it fits with the linkDirection currently employed we + // can set the srcDir accordingly. These will be the default cases for ports that + // are positioned based on link direction. + if (link.trgDir === WEST && this.canvasLayout.linkDirection === LINK_DIR_LEFT_RIGHT) { + return EAST; - } else if (link.trgDir === EAST && this.canvasLayout.linkDirection === LINK_DIR_RIGHT_LEFT) { - return WEST; + } else if (link.trgDir === EAST && this.canvasLayout.linkDirection === LINK_DIR_RIGHT_LEFT) { + return WEST; - } else if (link.trgDir === SOUTH && this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) { - return NORTH; + } else if (link.trgDir === SOUTH && this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) { + return NORTH; - } else if (link.trgDir === NORTH && this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) { - return SOUTH; + } else if (link.trgDir === NORTH && this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) { + return SOUTH; + } } // If the trgDir does not fit with one of the link directions then the trgDir @@ -4710,7 +4800,7 @@ export default class SVGCanvasRenderer { return this.reverseDir(srcDir); } // If there is no target node then this is a fully detached link so set the source - // direction based on the position relative to the + // direction based on the position relative to the target. const dir = CanvasUtils.getPortDir((x - link.trgPos.x_pos), (y - link.trgPos.y_pos), { width: 10, height: 10, }); // Pass in a dummy node return this.reverseDir(dir); } @@ -4718,20 +4808,21 @@ export default class SVGCanvasRenderer { // Returns a direction ("n", "s", "e" or "w") for the target end of a detached link. getTrgDirForDetachedLink(link, x, y) { if (link.srcObj) { - // If we have a trgDir and it fits with the linkDirection currently employed we - // can set the srcDir accordingly. These will be the default cases for ports that - // are positioned based on link direction. - if (link.srcDir === EAST && this.canvasLayout.linkDirection === LINK_DIR_LEFT_RIGHT) { - return WEST; + if (this.canvasLayout.linkMethod === LINK_METHOD_PORTS) { + // If there is a srcDir for the link we return a trgDir if the srcDir matches the + // linkDirection (port placement) currently in use. + if (link.srcDir === EAST && this.canvasLayout.linkDirection === LINK_DIR_LEFT_RIGHT) { + return WEST; - } else if (link.srcDir === WEST && this.canvasLayout.linkDirection === LINK_DIR_RIGHT_LEFT) { - return EAST; + } else if (link.srcDir === WEST && this.canvasLayout.linkDirection === LINK_DIR_RIGHT_LEFT) { + return EAST; - } else if (link.srcDir === NORTH && this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) { - return SOUTH; + } else if (link.srcDir === NORTH && this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) { + return SOUTH; - } else if (link.srcDir === SOUTH && this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) { - return NORTH; + } else if (link.srcDir === SOUTH && this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) { + return NORTH; + } } // If the srcDir does not fit with one of the link directions then the srcDir @@ -4744,6 +4835,7 @@ export default class SVGCanvasRenderer { return this.reverseDir(dir); } + // Returns the reverse of the direction passed in. reverseDir(dir) { switch (dir) { case NORTH: @@ -4758,48 +4850,6 @@ export default class SVGCanvasRenderer { } } - getOutputPort(srcNode, srcPortId) { - if (srcNode && srcNode.outputs) { - return srcNode.outputs.find((p) => p.id === srcPortId); - } - return null; - } - - getInputPort(trgNode, trgPortId) { - if (trgNode && trgNode.inputs) { - return trgNode.inputs.find((p) => p.id === trgPortId); - } - return null; - } - - // Returns a source port Id if one exists in the link, otherwise defaults - // to the first available port on the source node. - getSourcePortId(link, srcNode) { - var srcPortId; - if (link.srcNodePortId) { - srcPortId = link.srcNodePortId; - } else if (srcNode.outputs && srcNode.outputs.length > 0) { - srcPortId = srcNode.outputs[0].id; - } else { - srcPortId = null; - } - return srcPortId; - } - - // Returns a target port Id if one exists in the link, otherwise defaults - // to the first available port on the target node. - getTargetPortId(link, trgNode) { - var trgPortId; - if (link.trgNodePortId) { - trgPortId = link.trgNodePortId; - } else if (trgNode.inputs && trgNode.inputs.length > 0) { - trgPortId = trgNode.inputs[0].id; - } else { - trgPortId = null; - } - return trgPortId; - } - // Returns true if a link should be displayed and false if not. The link // should not be displayed if: // * it is a comment link and comment links are switched off (comments are hiding) @@ -4920,7 +4970,7 @@ export default class SVGCanvasRenderer { } // Updates the data links for all the nodes with two optional fields - // (called srcOriginInfo and trgOriginInfo) based on the location of the + // (called srcFreeformInfo and trgFreeformInfo) based on the location of the // nodes the links go from and to. The info in these fields is used to // calculate the starting and ending position of freeform line links. // This ensures that input and output links that go in a certain direction @@ -4931,7 +4981,7 @@ export default class SVGCanvasRenderer { } // Updates the links going into and out of the node passed in with up to - // two new fields (called srcOriginInfo and trgOriginInfo). + // two new fields (called srcFreeformInfo and trgFreeformInfo). updateFreeformLinksForNode(node) { const linksInfo = {}; linksInfo.n = []; @@ -5088,13 +5138,13 @@ export default class SVGCanvasRenderer { updateLinksInfo(linksDirArray, dir) { linksDirArray.forEach((li, i) => { if (li.type === "out") { - li.link.srcOriginInfo = { + li.link.srcFreeformInfo = { dir: dir, idx: i, len: linksDirArray.length }; } else { - li.link.trgOriginInfo = { + li.link.trgFreeformInfo = { dir: dir, idx: i, len: linksDirArray.length diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js index 5d3f33fe20..78f06b82ce 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js @@ -270,7 +270,7 @@ export default class SVGCanvasUtilsDragNewLink { } }; - const link = this.ren.getDetachedLineObj(inLink); + const link = this.ren.getDetachedLinkObj(inLink); this.drawingNewLinkData.linkArray = this.ren.linkUtils.addConnectionPaths([link]); if (this.ren.config.enableAssocLinkCreation) { diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-links.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-links.js index 58d5e8efa8..d72f075c39 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-links.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-links.js @@ -119,8 +119,8 @@ export default class SvgCanvasLinks { srcCenterX = this.nodeUtils.getNodeImageCenterPosX(srcNode); srcCenterY = this.nodeUtils.getNodeImageCenterPosY(srcNode); } else { - if (link && link.srcOriginInfo) { - ({ x: srcCenterX, y: srcCenterY } = this.getCenterOffset(srcNode, link.srcOriginInfo, selfRefLink)); + if (link && link.srcFreeformInfo) { + ({ x: srcCenterX, y: srcCenterY } = this.getCenterOffset(srcNode, link.srcFreeformInfo, selfRefLink)); } else { srcCenterX = this.nodeUtils.getNodeCenterPosX(srcNode); srcCenterY = this.nodeUtils.getNodeCenterPosY(srcNode); @@ -133,8 +133,8 @@ export default class SvgCanvasLinks { trgCenterX = this.nodeUtils.getNodeImageCenterPosX(trgNode); trgCenterY = this.nodeUtils.getNodeImageCenterPosY(trgNode); } else { - if (link && link.trgOriginInfo) { - ({ x: trgCenterX, y: trgCenterY } = this.getCenterOffset(trgNode, link.trgOriginInfo, selfRefLink)); + if (link && link.trgFreeformInfo) { + ({ x: trgCenterX, y: trgCenterY } = this.getCenterOffset(trgNode, link.trgFreeformInfo, selfRefLink)); } else { trgCenterX = this.nodeUtils.getNodeCenterPosX(trgNode); trgCenterY = this.nodeUtils.getNodeCenterPosY(trgNode); @@ -176,29 +176,29 @@ export default class SvgCanvasLinks { let y1; let x2; let y2; - if (link.srcOriginInfo.dir === EAST) { + if (link.srcFreeformInfo.dir === EAST) { x1 = srcCenterX + this.canvasLayout.linkGap; y1 = srcCenterY; - } else if (link.srcOriginInfo.dir === WEST) { + } else if (link.srcFreeformInfo.dir === WEST) { x1 = srcCenterX - this.canvasLayout.linkGap; y1 = srcCenterY; - } else if (link.srcOriginInfo.dir === SOUTH) { + } else if (link.srcFreeformInfo.dir === SOUTH) { x1 = srcCenterX; y1 = srcCenterY + this.canvasLayout.linkGap; - } else if (link.srcOriginInfo.dir === NORTH) { + } else if (link.srcFreeformInfo.dir === NORTH) { x1 = srcCenterX; y1 = srcCenterY - this.canvasLayout.linkGap; } - if (link.trgOriginInfo.dir === EAST) { + if (link.trgFreeformInfo.dir === EAST) { x2 = trgCenterX + this.canvasLayout.linkGap; y2 = trgCenterY; - } else if (link.trgOriginInfo.dir === WEST) { + } else if (link.trgFreeformInfo.dir === WEST) { x2 = trgCenterX - this.canvasLayout.linkGap; y2 = trgCenterY; - } else if (link.trgOriginInfo.dir === SOUTH) { + } else if (link.trgFreeformInfo.dir === SOUTH) { x2 = trgCenterX; y2 = trgCenterY + this.canvasLayout.linkGap; - } else if (link.trgOriginInfo.dir === NORTH) { + } else if (link.trgFreeformInfo.dir === NORTH) { x2 = trgCenterX; y2 = trgCenterY - this.canvasLayout.linkGap; } @@ -206,8 +206,8 @@ export default class SvgCanvasLinks { originX: 0, originY: 0, x1: x1, y1: y1, x2: x2, y2: y2, - srcDir: link.srcOriginInfo.dir, - trgDir: link.trgOriginInfo.dir + srcDir: link.srcFreeformInfo.dir, + trgDir: link.trgFreeformInfo.dir }; } } diff --git a/canvas_modules/harness/cypress/e2e/canvas/auto-layout-dagre.cy.js b/canvas_modules/harness/cypress/e2e/canvas/auto-layout-dagre.cy.js index 5dfdd76674..96a2002344 100644 --- a/canvas_modules/harness/cypress/e2e/canvas/auto-layout-dagre.cy.js +++ b/canvas_modules/harness/cypress/e2e/canvas/auto-layout-dagre.cy.js @@ -138,11 +138,11 @@ describe("Test for toolbar horizontal and vertical layout for a detached link", // Verify the original positions of the three semi-detached links. cy.verifyDetachedLinkPathFromSource("Binding (entry) node", "outPort", 1, [ - "M 140 194 Q 220 194 220 350" + "M 140 194 C 180 194 180 350 220 350" ]); cy.verifyDetachedLinkPathToTarget("Execution node", "inPort", 1, [ - "M 260 360 Q 260 194 332.5 194" + "M 260 360 C 296.25 360 296.25 194 332.5 194" ]); cy.verifyDetachedLinkPathFromSource("Binding (exit) node", "outPort", 1, [ @@ -177,15 +177,18 @@ describe("Test for toolbar horizontal and vertical layout for a detached link", // Verify the vertical positions of the three semi-detached links. cy.verifyDetachedLinkPathFromSource("Binding (entry) node", "outPort", 1, [ - "M 270 79 Q 300 79 300 145.75 Q 300 212.5 250 212.5 L 250 212.5 Q 200 212.5 200 242.5" + "M 270 79 Q 300 79 300 119.875 Q 300 160.75 235 160.75 L 235 160.75 " + + "Q 170 160.75 170 201.625 Q 170 242.5 200 242.5" ]); cy.verifyDetachedLinkPathToTarget("Execution node", "inPort", 1, [ - "M 350 87.5 Q 350 117.5 335 117.5 Q 320 117.5 320 175.75 L 320 175.75 Q 320 234 350 234" + "M 350 87.5 Q 380 87.5 380 124.125 Q 380 160.75 350 160.75 " + + "L 350 160.75 Q 320 160.75 320 197.375 Q 320 234 350 234" ]); cy.verifyDetachedLinkPathFromSource("Binding (exit) node", "outPort", 1, [ - "M 495 544 Q 525 544 525 610.75 Q 525 677.5 517.5 677.5 L 517.5 677.5 Q 510 677.5 510 707.5" + "M 495 544 Q 525 544 525 584.875 Q 525 625.75 502.5 625.75 " + + "L 502.5 625.75 Q 480 625.75 480 666.625 Q 480 707.5 510 707.5" ]); };