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)
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.
Would you please also share the sample source files used in the code snippet that you have shared.
const importedMasters = [];
//https://reference.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://reference.aspose.com/diagram/nodejs/aspose.diagram/master#Shapes
const shape = new aspose.Shape();
//https://reference.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://reference.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.
We are checking the code snippet which you have shared and will inform you as soon as we have some updates.
Did you ever get back to finding a solution for preventing overlapping connectors and shapes?
We are sorry that we could not support creating curved lines as connector at that moment and no feasibility for this was made yet. We will be updating this forum thread as soon as the attached ticket is resolved. We apologize for your inconvenience.
I am not having any issues with curved lines. The issue is with the originally stated issue, “I need these connectors to not overlap making it clear what is connected to what”.
Is there a status on being able to set lines to not be intersecting? We have tried using another stated example, but it also fail to prevent intersecting lines:
diagram
.getPages()
.getPage(0)
.getPageSheet()
.getPageLayout()
.getLineAdjustFrom()
.setValue(aspose.LineAdjustFromValue.ALL_LINES);
Thank you for your response, please let me know.
Would you kindly share the sample stencil and diagram file for our reference along with complete sample code snippet that we can use to reproduce the intersecting issue? We will investigate and address the case accordingly.
Yes. I have posted them here, trying to solve the issue I was having with using RADIAL and CIRCULAR options, but the snippet and uploaded template are the same.
A ticket has already been logged in our issue tracking system for corresponding thread and you will receive updates in there accordingly.
Hi @hinkley.dev, we have researched this issue, but didn’t find a resolution to produce satisfactory results. Later, we will conduct in-depth research.
By the way method diagram.layout(flowChartOptions) shouldn’t work with connectors setting RIGHT_ANGLE and LineJumpCodeValue.LAST_DISPLAYED_LINE etc. Method diagram.layout(flowChartOptions) simply layout shapes in the page as a flowchart style diagram, and using RouteStyleValue.FlowchartLeftToRight/FlowchartRightToLeft/FlowchartBottomToTop/FlowchartTopToBottom and don’t handle ConFixedCode, LineAdjustFrom, LineAdjustTo or LineJumpCode, it produce a result like this image. flowchart.png (4.2 KB)
We are sorry for the inconvenience and thank you for the patience and trying our product.