Diagram Connection Routing

2 posts, 0 answers
  1. Bill
    Bill avatar
    9 posts
    Member since:
    Aug 2014

    Posted 21 Feb Link to this post

    I have a complex diagram that represents the flow through a document. The document has numerous cross references between sections and the connections are used to show those references. None of the default layouts worked well to represent the sections so I am setting the X and Y coordinates of each shape. The connections mostly look acceptable but there are a few that are routing over existing shapes. Is there anything I can do to prevent connections from routing over shapes?
  2. Bill
    Bill avatar
    9 posts
    Member since:
    Aug 2014

    Posted 21 Feb Link to this post

    Edit: I do see that there is a property called "connections.type" but I can't see from the documentation where to set this. I tried setting it to Cascading but it did not seem to have any effect on the diagram so I must have done it incorrectly.

    I am using (mostly) a set of javascript functions I got from the Telerik forums:

                (function(global, undefined) {
                    var diagram;
     
                    function pageLoad() {
                        capAllConnections(diagram.connections);
                        cleanUpShapesContent(diagram.shapes);
                    }
     
                    function diagram_load(sender) {
                        diagram = sender.get_kendoWidget();
                    }
     
                    function visualizeShape(options) {
                        var ns = kendo.dataviz.diagram,
                            diagramCanvas = getDiagramCanvasOnPage(),
                            lineHeight = 16,
                            type = options.type,
                            shapeGroup = new ns.Group({ autoSize: true }),
                            textGroup = new ns.Group(),
                            textLines = [];
     
                        if(options.type != "text" && options.content && options.content.text) {
                            text = options.content.text.split(" ");
     
                            var textHeight = options.height - (text.length - 1) * lineHeight;
     
                            for(var i = 0; i < text.length; i++) {
                                var y = (i * lineHeight);
     
                                textLines.push(new ns.TextBlock({
                                    autoSize: false,
                                    text: text[i],
                                    x: 0,
                                    y: y,
                                    width: options.width,
                                    height: textHeight + 2*y,
                                    color: options.stroke.color,
                                    fontFamily: "Arial"
                                }));
                            }
                            options.content.text = "";
                        }
     
                        if(type == "rectangle") {
                            var rectangle = new ns.Rectangle(options);
                            appendToGroupWithoutOffset(rectangle, shapeGroup);
                        }
             
                        if(options.type != "text") {
                            diagramCanvas.append(shapeGroup);
                            var lineHeight_x2 = 2 * lineHeight,
                                box = shapeGroup.drawingElement.bbox(),
                                largestTextContainerHeight = box.size.height + lineHeight * (textLines.length - 1);
     
                            for(var j = textLines.length - 1, textEdge = largestTextContainerHeight; j >= 0; j--, textEdge -= lineHeight_x2) {
                                var textLine = textLines[j];
                                shapeGroup.append(textLine);
                                var containerRect = new kendo.dataviz.diagram.Rect(box.origin.x, box.origin.y, box.size.width, textEdge);
                                alignTextShape(containerRect, textLine);
                            }
                            diagramCanvas.remove(shapeGroup);
                        }
     
                        return shapeGroup;
                    }
     
                    function appendToGroupWithoutOffset(shape, group) {
                        shape.position(0, 0);
                        group.append(shape);
                    }
     
                    function alignTextShape(containerRect, textLine) {
                        var aligner = new kendo.dataviz.diagram.RectAlign(containerRect);
                        var contentBounds = textLine.drawingElement.bbox(null);
     
                        var contentRect = new kendo.dataviz.diagram.Rect(0, 0, contentBounds.width(), contentBounds.height());
                        var alignedBounds = aligner.align(contentRect, "center middle");
     
                        textLine.position(alignedBounds.topLeft());
                    }
     
                    function createCustomMarker() {
                        return new kendo.dataviz.diagram.ArrowMarker({
                            path: "M 0 0 L 8 4 L 0 8 L 2 4 z",
                            fill: "#6c6c6c",
                            stroke: {
                                color: "#6c6c6c",
                                width: 0.5
                            },
                            id: "custom",
                            orientation: "auto",
                            width: 10,
                            height: 10,
                            anchor: new kendo.dataviz.diagram.Point(7, 4)
                        });
                    }
     
                    function capAllConnections(connections) {
                        connections.type = "cascading";
                        Array.forEach(connections, function (connection) {
                            var marker = createCustomMarker();
                            connection.path._markers.end = marker;
                            connection.path.drawingContainer().append(marker.drawingElement);
                            connection.path._redrawMarkers(true, connection.path.options);
                        });
                    }
                    function cleanUpShapesContent(shapes) {
                        Array.forEach(shapes, function(shape) {
                            if(!/Yes|No/.test(shape.content())) {
                                shape.visual.remove(shape._contentVisual);
                            }
                        });
                    }
     
                    function getDiagramCanvasOnPage() {
                        return $telerik.$(".k-diagram").getKendoDiagram().canvas;
                    }
     
                    global.pageLoad = pageLoad;
                    global.diagram_load = diagram_load;
                    global.visualizeShape = visualizeShape;
                })(window);

Back to Top