search

PiotrJustyna / drakon-renderer

svg drakon diagrams
https://youtube.com/playlist?list=PL9-WsOrOzOxSqWNqzhzyBGZsN0sOxEF6Q&si=GJAYWJvofPOZ9yPP
MIT License
1 stars 0 forks source link

layout type 3 - come up with more complex layouts to test the layout engine #53

Closed PiotrJustyna closed 1 month ago

PiotrJustyna commented 1 month ago

input 1

input

[
    {
        "iconDescription": "hello world title",
        "iconKind": "Title",
        "iconName": "1",
        "iconNamesOfDependentIcons": [
            "2"
        ]
    },
    {
        "iconDescription": "hello world icon 2",
        "iconKind": "Action",
        "iconName": "2",
        "iconNamesOfDependentIcons": [
            "3",
            "4"
        ]
    },
    {
        "iconDescription": "hello world icon 3",
        "iconKind": "Action",
        "iconName": "3",
        "iconNamesOfDependentIcons": [
            "5",
            "6",
            "7"
        ]
    },
    {
        "iconDescription": "hello world icon 4",
        "iconKind": "Action",
        "iconName": "4",
        "iconNamesOfDependentIcons": [
            "8"
        ]
    },
    {
        "iconDescription": "hello world icon 5",
        "iconKind": "Action",
        "iconName": "5",
        "iconNamesOfDependentIcons": [
            "8"
        ]
    },
    {
        "iconDescription": "hello world icon 6",
        "iconKind": "Action",
        "iconName": "6",
        "iconNamesOfDependentIcons": [
            "a",
            "b",
            "c"
        ]
    },
    {
        "iconDescription": "hello world icon a",
        "iconKind": "Action",
        "iconName": "a",
        "iconNamesOfDependentIcons": [
            "8"
        ]
    },
    {
        "iconDescription": "hello world icon b",
        "iconKind": "Action",
        "iconName": "b",
        "iconNamesOfDependentIcons": [
            "8"
        ]
    },
    {
        "iconDescription": "hello world icon c",
        "iconKind": "Action",
        "iconName": "c",
        "iconNamesOfDependentIcons": [
            "8"
        ]
    },
    {
        "iconDescription": "hello world icon 7",
        "iconKind": "Action",
        "iconName": "7",
        "iconNamesOfDependentIcons": [
            "8"
        ]
    },
    {
        "iconDescription": "hello world end",
        "iconKind": "End",
        "iconName": "8",
        "iconNamesOfDependentIcons": []
    }
]

expectation

x1
|
x2 --- --- --- --- --+
|                    |
x3 --+ --- --- --+   x4
|    |           |   |
x5   x6 -+ --+   x7  |
|    |   |   |   |   |
+--+ a   b   c   |   |
x8 | |   |   |   |   |
   +-+-- +-- +-- +-- +

Something like this. x8, a, b and c on the same level.

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": [
                "a",
                "b",
                "c"
            ]
        },
        "iconPositionX": 1,
        "iconPositionY": -3
    },
    {
        "icon": {
            "iconDescription": "hello world icon a",
            "iconKind": "Action",
            "iconName": "a",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 1,
        "iconPositionY": -4
    },
    {
        "icon": {
            "iconDescription": "hello world icon b",
            "iconKind": "Action",
            "iconName": "b",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 2,
        "iconPositionY": -4
    },
    {
        "icon": {
            "iconDescription": "hello world icon c",
            "iconKind": "Action",
            "iconName": "c",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 3,
        "iconPositionY": -4
    },
    {
        "icon": {
            "iconDescription": "hello world icon 7",
            "iconKind": "Action",
            "iconName": "7",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 4,
        "iconPositionY": -3
    },
    {
        "icon": {
            "iconDescription": "hello world icon 4",
            "iconKind": "Action",
            "iconName": "4",
            "iconNamesOfDependentIcons": [
                "8"
            ]
        },
        "iconPositionX": 5,
        "iconPositionY": -2
    }
]

positioned output

x1
|
x2 --- --- --- --- --+
|                    |
x3 --+ --- --- --+   x4
|    |           |   |
x5   x6 -+ --+   x7  |
|    |   |   |   |   |
+--+ a   b   c   |   |
x8 | |   |   |   |   |
   +-+-- +-- +-- +-- +

Very happy with this.

q&a:

  1. q: is it allowed for the end icon not to be the lowest one?

    a: yes and it is actually quite common: https://en.m.wikipedia.org/wiki/DRAKON#/media/File%3AA*_in_DRAKON.png