[Bug]: I am trying to create a container and embed child's using react and typescript

[dkchaitanya92]

What happened?

I am trying to create a container and embed childs using react typescript. Taking reference of your https://www.jointjs.com/demos/container 

Getting error while creating child using joint.shapes.container.Base.define('container.Child',{}).

codesandbox reference code:

https://codesandbox.io/s/reactts-container-lqsb14?file=/src/Diagram.tsx

Version

joint js+ v3.4

What browsers are you seeing the problem on?

Firefox, Chrome

What operating system are you seeing the problem on?

Windows, Linux

[kumilingus]

You didn't define container.Base (it's defined here just before container.Child).

[kumilingus]

Please use our discussion forum for similar technical questions.

[MeAriJit]

Hello @kumilingus, I am facing the same issue with react. Could you please again take a look.

I can see he did define container.Base just before [container.child.] on line number 37 in https://codesandbox.io/s/reactts-container-lqsb14?file=/src/Diagram.tsx

Somehow you missed the code. please take a look.

[kumilingus]

Hi @MeAriJit , my bad. Here's updated example.

[MeAriJit]

Hello @kumilingus Thanks for your update. Now I am able to add contaier.Base. But facing some issue implementing your container example code. Issue:

1. Getting error at line no. 262 this.fitToCHildren of shapes.containers.Parent({}) error: // error : this.fitToCHildren not a function

Now I Bypassed the error through commenting the error generating code mentioned at Issues 1. But still facing following issues :

1. Output is not as expected but Code base is same as https://www.jointjs.com/demos/container your demo https://codesandbox.io/s/reactts-container-hcd37q?file=/src/Diagram.tsx

2. While trying to collapse the Base : error occuring as below this.fitParent is not a function child.fitAncestorElements /src/Diagram.tsx:64:17 61 | { 62 | fitAncestorElements: function () { 63 | var padding = 10;

   64 | this.fitParent({ | ^ 65 | deep: true, 66 | padding: { 67 | top: headerHeight + padding, Is it somehow we need to bind this? Please have a look.

with commented out error code codesandbox: https://codesandbox.io/s/reactts-container-hcd37q?file=/src/Diagram.tsx

with error at this.fitToCHildren or Parent codesandbox: https://codesandbox.io/s/reactts-container-lqsb14?file=/src/Diagram.tsx

we are in process of getting the license and this container and collapse feature is essential for us to use in jointjs+ with react. Please help on this poc.