sunag / flow

JavaScript UI library
MIT License
90 stars 15 forks source link

Feature: Possible Way to create GroupElements #6

Closed egimata closed 1 year ago

egimata commented 1 year ago

I was wondering if there is a way to create Grouped elements, basically you create a main element ( new Element() ), and then you add() from this mainElement other elements inside, which will serve as LabelElements.

I tried this and it actually works, but the problem is the connectivity of ports. If there are input / output ports for the child elements (LabelElements), they cannot connect to other Elements (which may or may not be grouped elements).

The GroupElements can also serve similarly to TreeViewNode, with a dropdown arrow, which can open / close the group.

If there is not another way, a simpler way to do this, i can create a PR and submit my changed code to make this somehow work, but I still have a lot of bugs to solve.

Thank you

egimata commented 1 year ago

How I managed to implement this:

Getting Started:

class GroupElement extends Element {
    constructor() {
        super();

        const dom = document.createElement( 'f-group-element' );
        dom.element = this;

        this.dom = dom;
        this.inputsDOM = dom;
        this.lioLength = 0;
        this.rioLength = 0;

        this.elements = [];
    }

    add( element ) {
        debugger
        this.elements.push( element );

        element.node = this.node;

        this.dom.append( element.dom );

        return this;

    }

}
egimata commented 1 year ago

I will close this issue, and create a pull request for the full new code related to this issue, (create grouped elements).

sunag commented 1 year ago

I will close this issue, and create a pull request for the full new code related to this issue, (create grouped elements).

Okay, we don't have that feature yet, I think a PR could help 👍