svelte-mosaic

port of react-mosaic to Svelte.

API

A Node is compromised of two siblings, alpha and beta. These two homogeneous siblings are the only two children of Node. However, a sibling can be a Node itself, creating a recursive tree structure.

For example, the following creates a Node with the following structure:

+-----------------------+
| Element A | Element B |
|           |-----------+
|           | Element C |
+-----------+-----------+

<script>
    import { Mosaic, branch } from 'svelte-mosaic';

    const tree = branch({
        direction: "horizontal",
        alpha: { component: Window, props: { number: 1 } },
        beta: branch({
            direction: "vertical",
            alpha: { component: Window, props: { number: 2 } },
            beta: { component: Window, props: { number: 3 } }
        })
    })
</script>

<Mosaic {tree}>

Internals

Because the API is very simple and doesn't require child-parent passing, we need to keep track of the tree structure ourselves.

Whenever a Node is constructed, it backpropagates itself to its parents, giving each Node a reference to its parent.