Smart routing manhattan not giving orthogonal lines

Two React element with top, bottom, right, left ports and elements are connected via link. Here i am using manhattan router. But i am not getting line segment 100% vertically & horizontally.

Elements port configuration

...
ports: {
    groups: {
        'left': {
            position: {
                name: 'left'
            }
        },
        'bottom': {
            position: {
                name: 'bottom'
            }
        },
        'top': {
            position: {
                name: 'top'
            }
        },
        'right': {
            position: {
                name: 'right'
            }
        }
    }
}
...

Link configugration

...
source: {
    id: iBlock.id,
    port: 'top'
},
target: {
    id: bBlock.id,
    port: 'right'
},
router: {
    name: 'manhattan',
}
...

Demo: https://jsfiddle.net/pathikdevani/8qkLbxad/ Expected result: link should be collection of orthogonal(horizontal & vertical) segments.

JointJS version: 2.0.1 Browser : Google Chrome, Mozilla Firefox

[vtalas]

I forgot to mention one more thing… In your example, there are node positions off the grid. When you have the grid size === 10, then you should have the nodes positions dividable by 10 as well.

You don’t need to care about this, just call the paper.snapToGrid function, it will adjust the position to be on the actual grid. So in your code, you would have:

(~line 380) block.set("position", paper.snapToGrid(node.position.x , node.position.y));

also, you can visualize the grid - check the http://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.Paper.prototype.options.drawGrid

[pathikdevani]

paper.snapToGrid is working fine in this problem.

Thanks @vtalas