How to use [alignmentConstraint]?

[Heidernlee]

Thanks for providing such a good JavaScript Library for creating workflow.

I'm trying to use [alignmentConstraint] to create a more-good-looking fcose layout workflow.

Did I use it wrong way ? Here's the Code , It's based on Html and JavaScript only :

      var cy = window.cy = cytoscape({
        container: document.getElementById('cy'),
        ready: function(){
          .....
          this.layout({name: 'fcose', animationEasing: 'ease-out'}).run();
        },
        layout: {
          name: 'grid'
        },
        alignmentConstraint: {
          vertical: [['2', '3', '4']]
        },
        style: [
          .....
        ],  
        elements: [
           { group:'nodes', data:{ id: '1', ...... }},
           { group:'nodes', data:{ id: '2', ...... }},
           { group:'nodes', data:{ id: '3', ...... }},
           { group:'nodes', data:{ id: '4', ...... }},
           .....
           .....

and it's not vertical alignment for node 2,3,4

Thanks.

[hasanbalci]

Hi @Heidernlee, alignmentConstraint is an option of fCoSE so you must use it in that way. So change the corresponding line as follows: this.layout({name: 'fcose', animationEasing: 'ease-out', alignmentConstraint: {vertical: [['2', '3', '4']]}}).run();

[Heidernlee]

@hasanbalci Thanks for the response. now [alignmentConstraint] is good for me.

I also tried [relativePlacementConstraint] option, is it the only way to sort 3 nodes like : relativePlacementConstraint: [{top: '2', bottom: '3'},{top: '3', bottom: '4'}] and cannot sort them with one option like : relativePlacementConstraint: [{order: '2', '3', '4'}] ?

[hasanbalci]

Yes, relativePlacementConstraint: [{top: '2', bottom: '3'},{top: '3', bottom: '4'}] is currently the only way.

[Heidernlee]

@hasanbalci

And then I noticed [alignmentConstraint] and [relativePlacementConstraint] doesn't work for parent-nodes , like

There's 4 nodes : Node1 , Node2 contains Node2-1 and Node2-2 (using group option)

That seems cannot do relativePlacementConstraint: [{top: 'Node1', bottom: 'Node2'}] but {top: 'Node1', bottom: 'Node2-1'} worked.....

Is it a bug or to-be-improved ？

[hasanbalci]

Constraints are not supported on parent nodes currently.

[Heidernlee]

Got it, But Cytoscape fCose is still the only one Library I found that can draw an edge from Child to Parent Nodes.

Thanks for the response.