We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Text Alignment with Font Size Changes

Thread ID:

Created:

Updated:

Platform:

Replies:

119336 Jun 7,2015 10:58 AM Jun 9,2015 08:44 AM ASP.NET Web Forms 3
loading
Tags: Diagram
Jim Jacobs
Asked On June 7, 2015 10:58 AM

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 [Syncfusion]
Replied On June 8, 2015 09:05 AM

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
Replied On June 8, 2015 04:04 PM

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 [Syncfusion]
Replied On June 9, 2015 08:44 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;