Free Support Forum - aspose.com

How to avoid connector overlap with Right Angle and Flow Chart Layout Style

I’m trying to create a network map using Right Angle Connectors and LayoutStyle FLOW_CHART + TOP_TO_BOTTOM. I need these connectors to not overlap making it clear what is connected to what, which is always a unique connection. I am trying to use pageLayout to prevent overlaps but these values seem to be ignored when the layoutStyle is being applied.nonFunctioningOverlapAvoid.zip (79.8 KB)

@Jordan_Friendshuh

We have logged an investigation ticket as DIAGRAMJAVA-50704 in our issue tracking system for the sake of further analysis. We will look into details of this scenario and keep you posted with the status of ticket resolution. Please be patient and spare us some time.

We are sorry for the inconvenience.

@Jordan_Friendshuh

Would you please also share the sample source files used in the code snippet that you have shared.

const importedMasters = [];
//https://apireference.aspose.com/diagram/nodejs/aspose.diagram/Diagram
const diagram = new aspose.Diagram();
diagram.addMaster(connectorMaster, “Dynamic connector”);
const page = diagram.getPages().getPage(0);
const pageLayout = page.getPageSheet().getPageLayout();

pageLayout.getRouteStyle().setValue(aspose.RouteStyleValue.NETWORK);
pageLayout.getLineAdjustFrom().setValue(aspose.LineAdjustFromValue.ALL_LINES);
pageLayout.getLineAdjustTo().setValue(aspose.LineAdjustToValue.NO_LINES);
pageLayout.getLineJumpCode().setValue(aspose.LineJumpCodeValue.LAST_DISPLAYED_LINE);
pageLayout.getLineToLineX().setValue(1.0);
pageLayout.getLineToLineY().setValue(1.0);
pageLayout.getLineJumpFactorX().setValue(1);
pageLayout.getLineJumpFactorY().setValue(1);

_.each(payload.nodes, (host, idx) => {
    //https://apireference.aspose.com/diagram/nodejs/aspose.diagram/master#Shapes
    const shape = new aspose.Shape();
    //https://apireference.aspose.com/diagram/nodejs/aspose.diagram/Txt
    if (!_.isBlank(host.label)) {
        shape.getText().getValue().add(new aspose.Txt(host.label));
    }
    if (!_.includes(importedMasters, host.type)) {
        importedMasters.push(host.type);
        diagram.addMaster(bsMaster, host.type);
    }
    host.visioId = page.addShape(shape, host.type);
});
//https://apireference.aspose.com/diagram/nodejs/aspose.diagram/Connect

const connectors = [];
_.each(payload.edges, (edge) => {
    //https://docs.aspose.com/diagram/net/working-with-connector-type-shape/
    const connector = new aspose.Shape();
    const from = findVisioId(payload.nodes, edge.from);
    const to = findVisioId(payload.nodes, edge.to);
    if (!_.isBlank(edge.label)) {
        connector.getText().getValue().add(new aspose.Txt(edge.label));
        connectors.push({connector, from, to, text: edge.label});
    }
    connector.getLine().getLineWeight().setValue(0.01388);
    const connecter1Id = diagram.addShape(connector, "Dynamic connector", 0);
    connector.setConnectorsType(aspose.ConnectorsTypeValue.RIGHT_ANGLE);
    connector.getLayout().getConFixedCode().setValue(aspose.ConFixedCodeValue.REROUTE_FREELY);
    connector.sendToBack();

    if (_.isBlank(from) || _.isBlank(to)) return;
    page.connectShapesViaConnector(from, aspose.ConnectionPointPlace.CENTER, to, aspose.ConnectionPointPlace.CENTER,
        connecter1Id);
});
//https://docs.aspose.com/diagram/java/create-layout-and-auto-fit-shapes/
const flowChartOptions = new aspose.LayoutOptions();
flowChartOptions.setLayoutStyle(aspose.LayoutStyle.FLOW_CHART);
flowChartOptions.setDirection(aspose.LayoutDirection.TOP_TO_BOTTOM);
flowChartOptions.setSpaceShapes(2);
flowChartOptions.setEnlargePage(true);
diagram.layout(flowChartOptions);


const options = new aspose.DiagramSaveOptions(aspose.SaveFileFormat.VSDX);
// set Auto fit page property
options.setAutoFitPageToDrawingContent(true);
diagram.save(fileName, options);
console.debug(`[buildDiagram] ${fileName} done`);
return fileName;

I have also tried not using the page settings but instead using curved lines, the layoutStyle does not seem to respect that either but the minute I edit it and move something, then I get curved lines.

@Jordan_Friendshuh

We are checking the code snippet which you have shared and will inform you as soon as we have some updates.