layout type #2

[PiotrJustyna]

I've covered simple layouts* like:

x
|
x
|
x

or

x
|
x --+
|   |
x   x
|   |
+ --+
|
x

now it's time for something a bit more complex like:

x
|
x --- --- --+
|           |
x --+ --+   |
|   |   |   |
x   x   x   x
|   |   |   |
+ --+ --+ --+
x

*the layouts are not rendered yet, just positioned (given cartesian plane coordinates), but if they were, they would look like that

[PiotrJustyna]

On first attempt I got something like this:

input

x1
|
x2 --- --- --+
|            |
x3 --+ --+   |
|    |   |   |
x5   x6  x7  x4
|    |   |   |
+ ---+ --+ --+
x8

output

x1

x2

x4* x3*

x8* x7* x6* x5*

*incorrectly positioned

Not exactly what I would call correct but I can see why certain decisions were made. Let's break it down and start fixing layout problems step by step. First thing is to swap icons 3 and 4.

[PiotrJustyna]

iteration 2

input

x1
|
x2 --- --- --+
|            |
x3 --+ --+   |
|    |   |   |
x5   x6  x7  x4
|    |   |   |
+ ---+ --+ --+
x8

output

x1
|
x2 - +
|    |
x3 - x4* +
|    |   |
x5   x6  x7
|    |   |
+ -- + - +
|
x8

Still not exactly correct but way better already. Almost there. Now just have to make sure x4 does not get in the way of x3's nodes.

[PiotrJustyna]

iteration 3

input

x1
|
x2 --- --- --+
|            |
x3 --+ --+   |
|    |   |   |
x5   x6  x7  x4
|    |   |   |
+ ---+ --+ --+
x8

output

x1
|
x2 --- --- --+
|            |
x3 --+ --+   |
|    |   |   |
x5   x6  x7  x4
|    |   |   |
+ ---+ --+ --+
x8

Looks good now, here is the json output:

[
    {
        "icon": {
            "iconDescription": "hello world title",
            "iconKind": "Title",
            "iconName": "1",
            "iconNamesOfDependentIcons": [
                "2"
            ]
        },
        "iconPositionX": 0,
        "iconPositionY": 0
    },
    {
        "icon": {
            "iconDescription": "hello world icon 2",
            "iconKind": "Action",
            "iconName": "2",
            "iconNamesOfDependentIcons": [
                "3",
                "4"
            ]
        },
        "iconPositionX": 0,
        "iconPositionY": -1
    },
    {
        "icon": {
            "iconDescription": "hello world icon 3",
            "iconKind": "Action",
            "iconName": "3",
            "iconNamesOfDependentIcons": [
                "5",
                "6",
                "7"
            ]
        },
        "iconPositionX": 0,
        "iconPositionY": -2
    },
    {
        "icon": {
            "iconDescription": "hello world icon 5",
            "iconKind": "Action",
            "iconName": "5",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 0,
        "iconPositionY": -3
    },
    {
        "icon": {
            "iconDescription": "hello world end",
            "iconKind": "End",
            "iconName": "8",
            "iconNamesOfDependentIcons": []
        },
        "iconPositionX": 0,
        "iconPositionY": -4
    },
    {
        "icon": {
            "iconDescription": "hello world icon 6",
            "iconKind": "Action",
            "iconName": "6",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 1,
        "iconPositionY": -3
    },
    {
        "icon": {
            "iconDescription": "hello world icon 7",
            "iconKind": "Action",
            "iconName": "7",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 2,
        "iconPositionY": -3
    },
    {
        "icon": {
            "iconDescription": "hello world icon 4",
            "iconKind": "Action",
            "iconName": "4",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 3,
        "iconPositionY": -2
    }
]