Links between cells are not “flat” - JointJS

问题

When I drag my "table" cells around, most of the time connections are flat / leveled (like the vertical portion of the link or the small bit that comes out of ORDERLINE table), but sometimes they end up being under a slight angle (the left bit of the link). Is there a way to prevent this?

If I inspect the element in devtools it then shows that the rotate has some small-ish offset instead of the values I would expect to see instead (i.e. 0, 90, 180, -90, -180).. An example of what currently gets rendered for that left bit of the link:

<path class="marker-source" fill="white" stroke="#c5d8e5" d="M 6 0 L 6 10 M 6 5 L 0 5 z" id="v-29" stroke-width="2" transform="translate(318.204758999181,420.00417997801776) scale(1,1) rotate(2.34686279296875)"></path>

Is there any way to do something about this perhaps?

回答1:

is this the manhattan router? if so, there there is a trick how to improve this. Try to set the same value to paper.option.gridSize and to router.option.step like in the example below where is set to 20.

var paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 600,
    gridSize: 20,
    perpendicularLinks: true,
    model: graph,
    defaultLink: new joint.dia.Link({
        router: { name: 'manhattan', args: { step: 20 } },
        connection: { name: 'orthogonal' },
        attrs: {
            '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#fff', stroke: '#000' },
            '.link-tools .tool-remove circle, .marker-vertex': { r: 8 },
            '.connection': {
                stroke: '#000', 'stroke-width': 1
            }
        }
    }),
    interactive: {
        vertexAdd: false
    }
});

来源：https://stackoverflow.com/questions/39140597/links-between-cells-are-not-flat-jointjs

标签

javascript

svg

jointjs