Possible to have tree structured model?

[spersson]

I tried this

struct Node := {
    name: string,
    children: [Node],
}
//...
property<[Node]> model;

But that gives error "Unknown type 'Node'" in the online editor. Is there currently any way to do what I want? If not, is support planned?

[ogoffart]

The problem is the children member, which uses the Node recursively. But Node is not yet registered (or "visible") to the type system until it is fully defined. That looks like something we should fix.

What exactly are you trying to do?

[spersson]

I was thinking of making an editor for a visual programming language, so that means a visual tree structure where the user can modify the tree.

I also realized now that even if models would be able to contain models, the component system probably has the same limitation now? That a named component can't contain a for loop that generates more instances of itself?

[ogoffart]

Right, one cannot include a Component in itself at the moment, even in a for.

Maybe you want to "flatten" the tree to display it.

I'm not sure how you want the final code to look like, but if it is a tree view, you could flatten the tree, and have a level integer that specify how much indentation the item should have in a ListView (that's probably how i'd do a tree view right now.)

[spersson]

Ok, thanks for the answer! I was imagining child items to the right of their parent, not below with more indentation. Otherwise your idea would have worked nicely! If grid layout could accept a model then I think that could have worked for me, each node would set its row span based on the breadth of the subtree below itself.

[spersson]

You made me think of another way. Bypassing the nice layouting system completely by using the fact that elements can draw outside of their parent element.

struct Node := {
    name: string,
    x: int,
    y: int,
    width: int,
    height: int,
}

export App := Window {
    width:  500px;   
    height: 500px;
    property<[Node]> model: [
        {name: "Boo", x: 0, y: 0, width: 100, height: 100},
        {name: "Bah", x: 110, y: 50, width: 80, height: 50},
    ];
    Rectangle {
    VerticalLayout {
        padding: 0;
        spacing: 0;
        for node in model: Rectangle {
            width: 0; height: 0;
            Rectangle {
                background: #aaaaff;
                x: node.x *1px;
                y: node.y *1px;
                width: node.width *1px;
                height: node.height *1px;
                Text {text: node.name; }
            }
        }
    }
    }
}

Looks like this:

So there are two "extra" rectangles here. One to stop the layout from changing the size of the window. The other to stop the layout setting the x coordinate of the inner rectangle (the one I am trying to position explicitly) and also by setting the height to zero that means all explicitly positioned rectangles will have their y coordinate relative to the layout top, not relative to bottom of previous item.

This could actually work well enough that I might give sixtyfps a try for bigger prototype. Again, thanks for the replies! Always fascinating what a help it can be to just discuss with someone. And of course, thanks for the amazing work you have done with this project. The online editor was perfect for this quick prototyping/evaluation. If only I had some more time for programming, I would have liked to help out. The best help I can be is probably as a casual user and reporter of issues and occasional ideas for improvements.