[Solved] Centering Text in Rectangle Group

[Gregg]

The following code to generate some rectangles with text items (see attached).  What do I need to do to center each text item in its rectangle?  I see there's a Layout, but I'm not sure how to combine rectangles, paths and groups into on of those.
var vLines = [5, 90, 175, 260, 345, 430, 515, 600];

var vLines = [5, 90, 175, 260, 345, 430, 515, 600];

...

$.each(vLines, function (index, value) {
    var group = getBox("line " + count++, "line " + count++, "line " + count++);
    group.transform(geom.transform().translate(10, value));
    surface.draw(group);
});

....

function getBox(text1, text2, text3) {

    var lineColor = "#9999b6";
    var lineWidth = 2;
    var fontNormal = "12px Arial";

    var group = new draw.Group();
    var rect = new geom.Rect([0, 0], [160, 75]);
    var path = draw.Path.fromRect(rect, { stroke: { color: lineColor, width: lineWidth } });
    group.append(path);

    if (text1) {
        group.append(new draw.Text(text1, new geom.Point(10, 10), { font: fontNormal }));
    }

    if (text2) {
        group.append(new draw.Text(text2, new geom.Point(10, 30), { font: fontNormal }));
    }

    if (text3) {
        group.append(new draw.Text(text3, new geom.Point(10, 50), { font: fontNormal }));
    }

    return group;
}

 

Thanks

[Gregg]

So I guess maybe my first question should have been what is the best way to create a flowchart in Kendo UI for jQuery (see attached)?.  This isn't a flowchart that the user creates interactively, but it is dynamic based on the results of running some server code (mostly the text items).

Is it better to use the Drawing API, the DataViz Diagram functionality, or something else?

Thanks, Gregg

 

 

[Viktor Tachev]

Hi Gregg,

For creating a flowchart you can utilize the Kendo Diagram widget. We have a how-to article that describes how this functionality can be implemented. Check it out below and let me know how it works for you.

https://docs.telerik.com/kendo-ui/knowledge-base/diagram-create-flowchart


Regards,
Viktor Tachev
Progress Telerik

[Gregg]

Hi Viktor,

That would work nicely, but I was wondering if it's possible to have multiple lines of text within a symbol (via something like <br />, or \n\r)?

[Alex Hajigeorgieva]

Hello, Gregg,

We have a how-to article which shows how to achieve textwrapping here.

The approach is to append a number of TextBlocks in the same layout:



https://dojo.telerik.com/UrEfIfOY/5

var group = new diagram.Group();

 group.append(new diagram.Rectangle({
   width: 300,
   height: 60,
   stroke: {
     width: 0
   },
   fill: "#e8eff7"
 }));


 var layout = new diagram.Layout(new diagram.Rect(15, 0, 60, 60), {
   alignContent: "center",
   spacing: 4
 });

 group.append(layout);

 var texts = dataItem.text.split(" ");
 for (var i = 0; i < texts.length; i++) {
   layout.append(new diagram.TextBlock({
     text: texts[i]
   }));
 }

 layout.reflow();

Let us know if you need further assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik