Rete.js do not render editor until window is resized

Question

I'm using Angular 7.1.4 and "rete": "^1.4.4". If I use editor inside components it renders ok, but if pass editor as child to another components with ng-content it does not render Nodes inside editor until window is resized. As a workaround I tried to trigger window resize in ngOnInit:

setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        });

and it renders nodes but do not render connection lines

Answer 1

Found the fix. I was initializing container in ngAfterViewInit and found out that not all style properties are attached after ngAfterViewInit event. So the fix was to set timeout

setTimeout(() => { const container = this.el.nativeElement; let editor = new NodeEditor("[email protected]", container); ... }, 10);

Answer 2

If you look at the examples that come with rete https://codepen.io/Ni55aN/pen/xzgQYq you can see that you can solve the problem also with calling manually resize and process at the end of your NodeEditor setup:

let editor = new NodeEditor("[email protected]", container)
... //Setting up node components
editor.view.resize()
editor.trigger('process')