Hello,

after looking at the custom node example I could create a very basic custom node with a second text property.

I brought the text to the bottom of the node. But how can I center the text in the node. My problem is that I dont know to get the real width of the text. And the x coordinate depends on the length and width of the text.

With the normal text i could simply use setTextAlignment method and no need to worry.

Here is what I have so far ...

OrgChartNode.prototype =
{
    // draw logic
    updateCanvasElements: function (node)
    {
        MindFusion.AbstractionLayer.callBaseMethod(OrgChartNode, this, 'updateCanvasElements');
        var titleFont = Font.copy(this.getEffectiveFont());
        titleFont.size = titleFont.size - 0.3;
        var titleLabel = new Text(this.getTitle(), new Rect(
                this.bounds.x,
                this.bounds.y + this.bounds.height - titleFont.size - 1,
                this.bounds.width,
                titleFont.size)
        );
        titleLabel.font = titleFont;

        if ( this.title !== "")
        console.log(titleLabel);
        this.graphicsContainer.content.push(titleLabel);
    },

    getTitle: function ()
    {
        return this.title;
    },

    setTitle: function (value)
    {
        if (this.title !== value)
        {
            this.title = value;
        }
    }
};
 

Lastly I'd like to change the measure unit from mm to px for everything in the framework: fontsizes, bounds, grid, etc

diagram.getMeasureUnit() returns 6.



In the meantime, thank you so much for your attention and participation.

Thank you very much. That worked very well. And super fast answer!!!

I nearly had this solution but I did not set fitInBounds ... looked strange 

It's me again ...

I have another question. Is is possible to change the rotation of text in a ShapeNode or the ShapeNode itself? I need to get the text rotated by 90°.

And I discovered a strange behavior regarding links and setting StrokeThickness. The link/headshape does not stop at the border of the connected node, instead it reaches into the node. Without StrokeThickness the headshape ends where expected/defined.

link.setStrokeThickness(3);
link.setHeadShapeSize(3);
link.setHeadShape("Triangle");
link.setHeadBrush("black");
 

Thank you sir.

Hello I tried two things to get the text rotated:

First I tried MindFusion.Drawing.Text and rotationAngle:

        diagramNode.setText("");
        var titleLabel = new Text(text, bounds);
        titleLabel.font = new Font(dfont, 4.1, false, false);
        titleLabel.textAlignment = MindFusion.Diagramming.Alignment.Center;
        titleLabel.lineAlignment = MindFusion.Diagramming.Alignment.Far;
        titleLabel.rotationAngle=270;
        titleLabel.fitInBounds = true;
        diagramNode.text = titleLabel;
 

The rotationAngle had no impact. The property rotationAngle of titleLabel stayed at 0 -> console.log(titleLabel).

My Second try was to create a new node and rotate the whole node. But i need to have the rotated node take up the same space as the unrotated version. I fliped the width and height of the bounds. But i dont know how to set x and y properly. 

    var textNode = new MindFusion.Diagramming.ShapeNode();
    textNode.setBounds(bounds);

    textNode.setText(text);
    textNode.setBrush('yellow');
    //textNode.setTransparent(true);
    textNode.setTextColor('black');

    textNode.setTextAlignment(1);
    textNode.setLineAlignment(1);

    textNode.setFont(new Font(dfont, 4.1, false, false));
    textNode.setZIndex(0);
    textNode.setShadowOffsetX(0);
    textNode.setShadowOffsetY(0);
    textNode.setRotationAngle(270);
    textNode.setLineAlignment(1);

    console.log(bounds);

    var newbounds = {}
    var temp = {};
    temp.width = textNode.getBounds().height;
    temp.height = textNode.getBounds().width;
    jQuery.extend( newbounds, textNode.getBounds(), temp);
    console.log(newbounds);
    textNode.setBounds(newbounds);
    diagram.addItem(textNode);
 

Thank you Sir.

Thank you very much,

setting rotationAngle in onUpdateVisuals worked.

Last question and then I think I am done:
I need to prevent line breaks for whitespaces for this special Text.

I did a dirty workaround and removed spaces with underscore. But I would rather keep the spaces and have the text in one line.

    if ( ( this.Tag == "swimlane" || this.Tag == "prozess" ) && this.getText() != "" && orientation == 0 ) {

        this.text.rotationAngle = 270;
        var text = this.getText();
        text = text.replace(" ", "_");
        this.setText(text);
}
 

I am really sorry for asking that often, but I keep having issues finding solutions in the online documentation.

Your code worked nicely. I overwrote the fuction just for the ShapeNodes that should not wrap the text.

Thank you very much again