GoJS Diagram Fails to Initialize when myDiagram Div is Nested in an Angular Layout Row

@johnknelson wrote:

I noticed after modifying my HTML where my Go diagram lives, I was receiving many "Change not within a transaction" errors and the diagram never "initialized" with GoJS functionality. Below are some of the initial errors:

Change not within a transaction: !mChangedEvent.Insert nodeDataArray:  GraphLinksModel  new: node3 0
go-debug.js:34 Change not within a transaction: !dChangedEvent.Insert parts: Layer ""  new: Node#1141(node3 ) 0
go-debug.js:34 Change not within a transaction: !d data: Node#1141(node3 )  new: node3
Change not within a transaction: !d element: Picture(https://demo1-icommand.demo1.aisdev.com/Symbology/Cyber/Monitor_green.png)#1144  new:
go-debug.js:34 Change not within a transaction: !d source: Picture([symbolpath])#1144  old:   new: symbolpath
go-debug.js:34 Change not within a transaction: !d background: Picture(symbolpath)#1144  old: white  new: #FFFFFF
go-debug.js:34 Change not within a transaction: !d text: node3 old: Default Text  new: node3

These and more spew out it seems for each node I attempt to add, there are also similar errors .

Below is a snippet of my HTML containing the GoJS diagram div. I've tracked the culprit of the errors (although I do not know why this is so) down to a layout="row" tag in the parent div. That is, this works:

    <div>
          <div id="myDiagramDiv"
                  style="width:auto; height:600px; background-color: #DAE4E4;">
           </div>
     </div>

while this does not work:

    <div layout="row"layout-align="start center">
          <div id="myDiagramDiv"
                  style="width:auto; height:600px; background-color: #DAE4E4;">
           </div>
     </div>

I assume there is some underlying GoJS rule I'm breaking, but the direct cause I've found for all my errors is the inclusion of the layout="row" in the parent div. For context, I am wanting to add an adjacent div to the left of my diagram with some new functionality for my app, which is why the layout="row" tag is there. This error is something I can work around, but am nonetheless confused by it and interested in the reason behind it.

I am using GoJS v1.6.20 within Google Chrome Version 56.0.2924.87. Thanks for any help or insight!

Posts: 6

Participants: 2

Read full topic