Canvas2D and Shape2D

[massimiliano-mantione]

AFAICS in Akkad the Canvas2D has been implemented to support rendering DOM on it, using SVG to "do the trick".

Are there plans to implement the various Babylon Shape2D classes as components so that they can be rendered on a Canvas but managed by React (like every other Akkad component)?

I could help in doing it but I'd need some help in getting started...

[brochington]

@massimiliano-mantione

Hello!

Canvas2D is absolutely something I would like to integrate. I haven't looked too deeply in the Canvas2D API, but I think it would not be too tricky to add.

Any help on Akkad is always welcome! I will be happy to support you in any way I can =)

[massimiliano-mantione]

First of all a question about Canvas2D: do you know if there is a way to have a group of nodes (a subtree of groups and shapes) "clipped" to a rectangle when rendered? I cannot imagine how to implement a list view without clipping...

That said: I have troubles understanding how exactly Akkad interacts with React. I guess I'd need to implement something similar to the RenderShape component, but for Prim2DBase. And then I think I'd need a few new systems, for the 2d position and scale, margins, padding...

But there are too many details that I'm not getting. In which timezone are you? I am in CEST (Italy).

[brochington]

@massimiliano-mantione

I haven't used Canvas2D as of yet, so I'm not sure. I will try and take a closer look at it this week.

Concerning Akkad: I can totally understand how Akkad's structure might be confusing. Akkad mostly just uses the React diffing structure to call lifecycle methods on components at the right time. Internally is also uses a modified ECS structure. Before you look into RenderShape, let's look at part of the Box component:

render() {
        const {
            size = 1,
            height = 1,
            width = 1,
            updatable = false,
            children
        } = this.props;

        return (
            <Entity>
                <RenderShape
                    type="box"
                    size={size}
                    height={height}
                    width={width}
                    updatable={updatable || false}
                />
                <EntityLoaded>
                    {children}
                </EntityLoaded>
            </Entity>
        );
    }

The <Entity /> component is really just an id that the <RenderShape /> component uses. In the first "pass" <Entity /> passes down its ID, and <RenderShape /> calls an action that creates a bablyon shape in a hash map at the ID. After this the React tree is rerendered. The <EntityLoaded /> component sees that the hash map has the ID, and loads it's children. These children will be the systems, and they will have access to the entity ID on the react context. Pretty simple, right ;)

I can add a lot more later, but it's pretty late where I am (Los Angeles, so Pacific time zone). Cheers!