diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx index a8ba593791..68b77d5b9c 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx @@ -33,10 +33,10 @@ import { PALETTE_LAYOUT_FLYOUT, PALETTE_LAYOUT_DIALOG, PALETTE_LAYOUT_NONE } from "../common-canvas/constants/canvas-constants"; -class CommonCanvasCentralItems extends React.Component { +class CommonCanvasPanels extends React.Component { constructor(props) { super(props); - this.logger = new Logger("CC-CentralItems"); + this.logger = new Logger("CC-Panels"); } // Prevent the default behavior (which is to show a plus-sign pointer) as @@ -261,7 +261,7 @@ class CommonCanvasCentralItems extends React.Component { } } -CommonCanvasCentralItems.propTypes = { +CommonCanvasPanels.propTypes = { // Provided by CommonCanvas canvasController: PropTypes.object.isRequired, containingDivId: PropTypes.string.isRequired, @@ -296,4 +296,4 @@ const mapStateToProps = (state, ownProps) => ({ rightFlyoutIsOpen: state.rightflyout.isOpen }); -export default connect(mapStateToProps)(CommonCanvasCentralItems); +export default connect(mapStateToProps)(CommonCanvasPanels); 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 d2c9a94309..75cb079963 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 @@ -498,6 +498,14 @@ export default class CanvasUtils { return null; } + // Returns the distance from the start point to finsih point of the link line. + static getLinkDistance(link) { + const x = link.x2 - link.x1; + const y = link.y2 - link.y1; + + return Math.sqrt((x * x) + (y * y)); + } + // Return the center point of a quadratic bezier curve where p0 is the // start point, p1 is the control point and p2 is the end point. // This works for either the x or y coordinate. 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 5a94b205bb..3b0d4ee73a 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 @@ -4189,7 +4189,10 @@ export default class SVGCanvasRenderer { joinedLinkGrps.each((d, i, linkGrps) => { if (d.type === NODE_LINK || d.type === ASSOCIATION_LINK) { const linkGrp = d3.select(linkGrps[i]).selectAll(".d3-link-decorations-group"); - this.displayDecorations(d, DEC_LINK, linkGrp, d.decorations); + const decorations = this.shouldDisplayAltDecorations(d) + ? this.canvasLayout.linkAltDecorations + : d.decorations; + this.displayDecorations(d, DEC_LINK, linkGrp, decorations); } }); @@ -4296,6 +4299,13 @@ export default class SVGCanvasRenderer { }); } + // Returns true if the alternative decorations for the link line + // should be displayed. + shouldDisplayAltDecorations(link) { + return (this.canvasLayout.linkAltDecorations && + CanvasUtils.getLinkDistance(link) < this.canvasLayout.linkDistanceForAltDecorations); + } + // Creates a new start handle and a new end handle for the link groups // passed in. createNewHandles(handlesGrp) { diff --git a/canvas_modules/common-canvas/src/object-model/layout-dimensions.js b/canvas_modules/common-canvas/src/object-model/layout-dimensions.js index 45020b2c4a..0479538090 100644 --- a/canvas_modules/common-canvas/src/object-model/layout-dimensions.js +++ b/canvas_modules/common-canvas/src/object-model/layout-dimensions.js @@ -346,6 +346,14 @@ const portsHorizontalDefaultLayout = { linkContextToolbarPosX: 0, linkContextToolbarPosY: 0, + // The distance in pixels between the start and end points of the link + // below which the alternative decorations for the link will be displayed. + linkDistanceForAltDecorations: 150, + + // Alternative decorations for the link. If specified, this should be an + // array of decoration objects. + linkAltDecorations: null, + // Link handle for input port can be "circle" or "image". linkStartHandleObject: "circle", @@ -761,6 +769,14 @@ const portsVerticalDefaultLayout = { linkContextToolbarPosX: 0, linkContextToolbarPosY: 0, + // The distance in pixels between the start and end points of the link, + // below which the alternative decorations for the link will be displayed. + linkDistanceForAltDecorations: 150, + + // Alternative decorations for the link. If specified, this should be an + // array of decoration objects. + linkAltDecorations: null, + // Link handle for input port can be "circle" or "image". linkStartHandleObject: "circle", diff --git a/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx b/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx index 68f2a1195e..704ab3ef64 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx +++ b/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx @@ -169,7 +169,14 @@ export default class StagesCanvas extends React.Component { linkEndHandleImage: "/images/custom-canvases/stages/decorations/dragStateArrow.svg", linkEndHandleWidth: 20, linkEndHandleHeight: 20, - linkHandleRaiseToTop: true + linkHandleRaiseToTop: true, + linkContextToolbarPosX: 0, + linkContextToolbarPosY: -15, + linkLengthForAltDecorations: 150, + linkAltDecorations: [ + { id: "alt-123", path: "M -25 -20 L -25 20 25 20 25 -20 Z", class_name: "det-link-label-background" }, + { id: "alt-456", label: "XXX", x_pos: -10, y_pos: -10 } + ] } }); return config; diff --git a/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx b/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx index ab70165105..c8fec8fbdf 100644 --- a/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx +++ b/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx @@ -653,7 +653,7 @@ export default class SidePanelForms extends React.Component { var enableShowLeftFlyout = (
Open Left Flyout
Only applicable whne Palette Layout is None
} + labelText="Open Left Flyout (Only applicable when Palette Layout is set to None)}" toggled={this.props.getStateValue("selectedShowLeftFlyout")} onToggle={(val) => this.setStateValue(val, "selectedShowLeftFlyout")} />