[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

[Roman Bruckner]

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

[Roman Bruckner]

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.

[Roman Bruckner]

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.