• Rotating a Node Programmatically
• Storing rotation values in the backing data
• Reading rotation values from the backing data
• Implementation Details

Rotating Nodes

In version 2.2.6, support for rotating nodes has been introduced. This is a first pass at support for rotation and has a few limitations:

• only fixed anchors are reliably supported. Continuous/Dynamic anchors will mostly work on rotated nodes, but there may be edge cases in which they do not behave as you expect. All feedback is appreciated.
• The anchor dragging capabilities of editable connectors is not yet supported with rotated nodes
• Groups cannot be rotated. Or rather, they can be rotated, but the results are not guaranteed.
• Nodes inside Groups that are rotated will also give indeterminate results currently.

To rotate a node, you use the rotate method on a Surface:

const someNodeId = "foo"
surface.rotate(someNodeId, 90)

Here we provided the ID of the Node, but we can also supply the Node itself:

const someNode = aToolkitInstance.addNode({id:"foo}})
surface.rotate(someNode, 90)

The amount to rotate is a value in degrees. It can be negative, and it can be greater than 360 degrees.

When you rotate a Node, the Node's backing data is updated. For instance, in each of the above calls, you'd have this:

{
    id:"foo",
    rotation:90
}

If your node data has a value for rotation, the Node will be rotated by the specified amount when rendered:

toolkit.load({

    data:{
        nodes:[
            {
                id:"foo",
                rotation:90
            }
        ]
    }

})

Rotation is implemented via two CSS properties:

{
    transform:rotate(90deg);
    transform-origin: center center;
}

Transform origins other than center center are not supported.