Text Alignment with Font Size Changes

[Jim Jacobs]

Hi,

As usual, please watch the attached video to see a demonstration of the issue.

The question is: how do I maintain the desired text alignment after the font size has been changed?

I'm still confused about why I have to play with the offset. 
I would have expected the left and right X offsets to be 0 and 1 respectively, but if I do that the text falls outside the node!
Hence my settings of 0.25 and 0.75 which seem to work.

Here's the code that I am using to set the text alignment:

function AlignText(alignment) {
    var obj = new Object();
    obj.textAlign = alignment; // left, right or center

    for (var i = 0; i < diagram.model.selectedItems.children.length; i++) {
        var object = diagram.model.selectedItems.children[i];
        if (diagram.getObjectType(object) == 'node') { // A node or a text object
            if (diagram.getObjectType(object) == 'text') { // text object
                if (object.textBlock) {
                    if (alignment == 'left') {
                        obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Left;
                        obj.offset = ej.datavisualization.Diagram.Point(0.25, 0.5);
                    } else if (alignment == 'right') {
                        obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Right;
                        obj.offset = ej.datavisualization.Diagram.Point(0.76, 0.5);
                    } else {
                        obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Center;
                        obj.offset = ej.datavisualization.Diagram.Point(0.5, 0.5);
                    }
                    diagram.updateLabel(object.name, object.textBlock, obj);
                }
            } else { // node
                if (object.labels[0]) {
                    if (alignment == 'left') {
                        obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Left;
                        obj.offset = ej.datavisualization.Diagram.Point(0.25, 0.5);
                    } else if (alignment == 'right') {
                        obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Right;
                        obj.offset = ej.datavisualization.Diagram.Point(0.75, 0.5);
                    } else {
                        obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Center;
                        obj.offset = ej.datavisualization.Diagram.Point(0.5, 0.5);
                    }
                    diagram.updateLabel(object.name, object.labels[0], obj);
                }
            }
        } else { // Must be a connector
            if (object.labels[0]) {
                if (alignment == 'left') {
                    obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Left;
                    obj.offset = ej.datavisualization.Diagram.Point(0.25, 0.5);
                } else if (alignment == 'right') {
                    obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Right;
                    obj.offset = ej.datavisualization.Diagram.Point(0.75, 0.5);
                } else {
                    obj.horizontalAlign = ej.datavisualization.Diagram.HorizontalAlignment.Center;
                    obj.offset = ej.datavisualization.Diagram.Point(0.5, 0.5);
                }
                diagram.updateLabel(object.name, object.labels[0], obj);
            }
        }
    }
}

Thanks in advance for any advice on how to fix this.

Jim

Attachment: Syncfusion__Text_Alignment_with_Font_Change__07Jun2015_644655f.zip

[Shyam G]

Hi Jim

Thanks for using Syncfusion products.

Please note that we use label’s offset property to position the label. However we have provided the drafted version of our documentation which represents how to position the label based on the horizontal and vertical alignments.

Documentation link:http://www.syncfusion.com/downloads/support/forum/119336/ze/Labels_offset1098564394

Please let me know if any concerns.

Regards,
Shyam G

[Jim Jacobs]

Hi Shyam,

I've looked at the doc and I think it's pretty straightforward, but I just cannot get it to work.

I've attached a PowerPoint with a slide showing my code and the results.
Why is the text outside of the node?

I am also setting the width of the node's label on the textChange event as follows:

diagram.updateLabel(node.name, node.labels[0], { width: node.width - 4 });  // Ensure that the label occupies most of the width of the node - 08Jun2015

Thanks for clearing this up for me.

Attachment: Syncfusion__Horizontal_Text_Alignment_Challenge__08Jun2015_d6067057.zip

[Shyam G]

Hi Jim

Thanks for your update.

Please note that we use an offset property to position the label. We suggest you to follow the below table to resolve your reported issue.

Offset	Horizontal Alignment	Vertical Alignment
(0,0.5)	Left	Center
(0.5,0.5)	Center	Center
(1,0.5)	Right	Center

Please note that if we set an label’s offset value X and Y as a 0, then the value doesn’t gets serialized properly. So we suggest you to set an offset X value as 0.1 for the left alignment. However we consider this an issue and logged a defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.


https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents


please refer the sample below

Sample:http://www.syncfusion.com/downloads/support/forum/119336/ze/labelhandlehiddensample-2092890442

Please let me know if any concerns.

Regards,
Shyam G