Swimlanes that is used for rendering BPMN Diagram

What is the value of coll then?

A better question: why is a layout being done at all just because the user switched windows? Might something be reinitializing the window and the layout is happening too early, before everything has been set up?

Hi Walter,

I think col1 is the lanes, what I am doing is sample I have 2 buttons on the menu, button A goes to the one with the Swimlane, at first it will load but if I go back and then push the button B which goes to another window, then go back again to press button A, It will have this error.

Im confused also on why does it happen, and one thing when I am in button A window then go back to the menu, then go again to button A it will load.

Thank You. Hope you can help me again with this problem :(

The first thing I would do in your situation is find out why it is loading again. That sounds like it lost whatever state you had before. Were the contents of the tab discarded and then completely re-created when it got focus again?

On the other hand, if that is the situation, you could focus on why it is unable to re-create the diagram again the second time. Make sure that at the time the CustomFlowchartLayout.doLayout method is called that the Diagram.model has all of the data that you are expecting, both for nodes and for links. And that the Diagram.nodes and Diagram.links collections are what you expect too.

Hi Walter,

Yes it is supposed to lost the state I had before since I have to select the nodes and links to be loaded again that is why it is reloaded. But why isnt it reloading again after I went to button B?

I have checked the modeldata that Ive set and it is the same as before. It is stuck on the go js part when FlowchartLayout js is calling it.

Thank You I am confused on what should be done with this error.

I don’t recall the implementation of makeNetwork ever getting an exception.

You still haven’t told me what the value of coll is in the debugger at the call to makeNetwork. Is it the Diagram or is it a Group or is it an Iterable or is it neither?

What code is calling doLayout in your stack trace? That is what is being passed to makeNetwork. If it’s not the right kind of object, that would explain the exception.

Hi Walter,

Tried to debug coll for both working and not working here are the values, it is a Diagram I believe

Working:

Not Working:

Code that is calling doLayout on my stack trace for both working and not working is
image

So is it possible my CustomFlowchartLayout here is not the right kind of object? since it has an error on go js iterator?

Thank You always for replying walter

Could you check the value of this.getDivID() in both situations?
And then check whether document.getElementById(this.getDivID()) returns the expected HTMLDivElement?

I’m guessing that the ids are different from what you expect. It’s better to pass the HTMLDivElement reference rather than the id.

Hi Walter,

Here is the getDivId for both working and non working situations:

Working:

Non Working:

It can identify the div ID, what is the iterator on the go js? the error is always like that

Thank you always walter :)

OK, so it wasn’t a confusion regarding the id of the Div element.

The iterator property is: Iterable | GoJS API
So for some reason the collection is undefined for which the code is getting the iterator.

I suspect that the object is the argument to makeNetwork. Layout | GoJS API
The reason is that the implementation of makeNetwork is quite straightforward – there is only one use of the iterator property:

  public makeNetwork(coll: Diagram | Group | Iterable<Part>): LayoutNetwork {
    const net = this.createNetwork();
    if (coll instanceof Diagram) {
      net.addParts(coll.nodes, true);
      net.addParts(coll.links, true);
    } else if (coll instanceof Group) {
      net.addParts(coll.memberParts);
    } else {
      net.addParts(coll.iterator);
    }
    return net;
  }

But as you can see in your copy of FlowchartLayout.js, the call to makeNetwork is just passing the coll collection from the call to doLayout:

FlowchartLayout.prototype.doLayout = function(coll) {  // override
  if (this.network === null) {
    this.network = this.makeNetwork(coll);
  }
  . . .

That’s why I was asking you to verify that the argument to doLayout or makeNetwork was in fact either an instance of Diagram or of some kind of collection. And I hope you can now see why I was wondering if the Diagram wasn’t set up correctly, thus resulting in undefined being passed to doLayout.

I would expect that the value be a reference to a Diagram, and because it isn’t, it’s dropping through and causing the error. But only you can check that in both working and non-working situations. I’m guessing now that there is an app building/packing error, which would account for your app working in debug mode but not in release mode.

Hi Walter,

Regarding the screenshots I’ve shown you that shows the value of coll how can I know if there is an instance/reference of a Diagram there?

Thank You walter :)

coll instanceof go.Diagram ?

Hi Walter,

Yes, and I checked again CustomFlowchartLayout commitLanes and commitLayers are not fired up in non working state

image

Thank you always :)

Hi Walter,

I just want to follow up my question here. Apologies for the disturbance.

Thank You.

Hope you can still help me with this.

I really don’t know. We know that the code can work, but somehow in your environment something is wrong.

You converted some code to be a UMD module – maybe there is something wrong there.

I don’t know what kind of build settings you have, but maybe there is something wrong there too. Or your packaging tool isn’t doing the right thing.

Could you check in the debugger to make sure that there is only one copy of the GoJS library that is ever loaded? If there are two of them, perhaps compiled to use different names, then there can be all kinds of subtle problems.