javascript - Building path between nodes with possible scenarios

Question

I am trying to create link between two nodes with some possible scenarios as you can see in below image. The target will always be on right side in a row and target can be in the same row, next row or next to next row depend on number of shapes.

Single row contains 5 shapes including target shape. if we have 20 shapes and 1 target shape then there will be 5 rows, last will be target shape.

Below is the data model for the source and target which will be used to create nodes and paths between.

[
    {
        "shapeName": "rect1",
        "shapeId": "1.1",
        "coordinateData": {
            "height": 125,
            "width": 100,
            "xCoordinate": 300,
            "yCoordinate": 100
        },
        "ticks": [
            {
                "tickId": "1.1.1",
                "sourceTarget": [
                    {
                        "sourceTick": "1.1.1",
                        "targetTick": "1.4.11"
                    }
                ]
            }
        ]
    
    },
    {
        "shapeName": "rect2",
        "shapeId": "1.2",
        "coordinateData": {
            "height": 125,
            "width": 100,
            "xCoordinate": 850,
            "yCoordinate": 100
        },
        "ticks": [
            {
                "tickId": "1.2.1",
                "sourceTarget": [
                    {
                        "sourceTick": "1.2.1",
                        "targetTick": "1.4.12"
                    }
                ]
            }
        ]
    
    },
    {
        "shapeName": "rect3",
        "shapeId": "1.3",
        "coordinateData": {
            "height": 125,
            "width": 100,
            "xCoordinate": 1400,
            "yCoordinate": 100
        },
        "ticks": [
            {
                "tickId": "1.3.1",
                "sourceTarget": [
                    {
                        "sourceTick": "1.3.1",
                        "targetTick": "1.4.13"
                    }
                ]
            }
        ]
    
    },
    {
        "shapeName": "rect4",
        "shapeId": "1.4",
        "coordinateData": {
            "height": 375,
            "width": 100,
            "xCoordinate": 1750,
            "yCoordinate": 100
        },
        "ticks": [
            {
                "tickId": "1.4.11",
                "sourceTarget": null
            },
            {
                "tickId": "1.4.12",
                "sourceTarget": null
            },
            {
                "tickId": "1.4.13",
                "sourceTarget": null
            }
        ]
    
    }
]

Thanks

标签： javascriptangulard3.js