Getting error as Cannot read properties of undefined (reading 'lock')

[Rohit Swarup]

We are creating diagram by manually adding nodes and connectors using diagram.add() function.

We are using JSON file to create diagram (Please find attached folder for JSON and code file)

But sometimes diagram is not getting created and throwing error as - 

core.js:7376 ERROR TypeError: Cannot read properties of undefined (reading 'lock')

    at push../node_modules/@syncfusion/ej2-diagrams/src/diagram/diagram.js.Diagram.add (diagram.js:2847:1)

    at workflow-structure-manager.service.ts:83:25

    at Array.forEach (<anonymous>)

    at SafeSubscriber._next (workflow-structure-manager.service.ts:60:38)

    at push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192:1)

    at push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130:1)

    at push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76:1)

    at push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53:1)

    at push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47:1)

    at push../node_modules/rxjs/_esm5/internal/ReplaySubject.js.ReplaySubject.nextInfiniteTimeWindow (ReplaySubject.js:41:1)

We are not able to know what is the error.

Attachment: files_828011d5.zip

[Aravind Ravi]

Hi Rohit,

On analyzing the provided query, we found that issue occurs due to you have try to add nodes before diagram get created, so that reported issue occurs. To overcome this issue, after diagram gets created, diagram created event gets triggered. In the diagram created event, you can able to add nodes and connectors at runtime through add public method. Please refer to the below code snippet and sample

//HTML

<ejs-diagram

        #diagram

        id="diagram"

        width="100%"

        height="645px"

        [getConnectorDefaults]="connDefaults"

        [getNodeDefaults]="nodeDefaults"

        (created)="created()"

        [snapSettings]="snapSettings"

      >

      </ejs-diagram>

 

//TS

public created(): void {

    let node5: NodeModel = {

      id: 'node5',

      width: 100,

      height: 100,

      offsetX: 200,

      offsetY: 200,

      annotations: [{ content: 'Node5' }],

      constraints:

        (NodeConstraints.Default | NodeConstraints.Tooltip) &

        ~(NodeConstraints.Delete | NodeConstraints.InheritTooltip),

      tooltip: { content: 'Node_Tooltip' },

    };

    this.diagram.add(node5);

 

    let connector: ConnectorModel = {

      id: 'connector1',

      sourcePoint: { x: 300, y: 100 },

      targetPoint: { x: 400, y: 100 },

    };

    this.diagram.add(connector);

  }

Sample: https://stackblitz.com/edit/angular-a8enh4?file=app.component.html

Regards

Aravind Ravi