Accessing Node data for a Picture

Hello I have the following Node Template

var myTemplate = Go(go.Node, "Horizontal",
   new go.Binding("key", "key"),
   GO(go.Picture, 
      new go.Binding("angle", "rotation"), 
      new go.Binding("width", "width"),
      new go.Binding("height, "height")
     )
  )

My question is if I have a reference to the node, how can I access the member data on the Picture object within it?

For example writing node.data.width does not successfully access the picture’s width and returns undefined. But as does node.data.picture.width. I feel like I just don’t have the write reference name to the picture but I don’t know what that is.

Excuse me ignorance but i couldn’t find it in the documentation.

Thanks!

I assume you have already read http://gojs.net/latest/intro/dataBinding.html.

As long as your Bindings are not inside item templates, and as long as your Bindings are not ofObject(), the source will be the Part.data.

So, yes, you are binding Picture.angle to node.data.rotation, and Picture.width to node.data.width. If your model data object for that Node does not have those properties, the value will indeed be undefined and the Picture properties will not be set. That’s why one often sets the properties explicitly in the template, to provide a default value in case there’s no source property or in case there’s an error doing a conversion.

However there is no Node.key property, so that Binding should be causing warning messages in the console output, especially if you are using the debug library, go-debug.js.

I do I ensure my model data object for this Node has those properties?

My trouble is that, I am successfully adding a Picture to a Node with the following template, but I can’t seem to acesss the natural width of the picture, let alone any width, when I save the properties of the Node to the database.

Here is the full unabridged Node Template:

        var imagetemplate = GO(go.Node, "Horizontal",
                                                         new go.Binding("location", "shapePosition"),
                                                         new go.Binding("key", "key"),
                      GO(go.Picture,
                                                    { width: 200, height: 200},
                                                    new go.Binding("angle", "rotation"),
                                                  new go.Binding("width", "width"),
                                                    new go.Binding("source", "text"),
                                                  new go.Binding("height", "height"),
                                                    new go.Binding("maxSize", "bounds")
                                                )
                                            )

And here is where I add the Picture to the above template:

                ticketMasterDiagram.startTransaction("add node");
                ticketMasterDiagram.model.addNodeData({
                key:"tes",
                category:"image",
                rotation:0,
                text:SecureURL+ res.substring(1, res.length)});
                ticketMasterDiagram.commitTransaction("add node");

I am pretty sure i have a width in the “model data object”. As this is what I set the image model data to:

{    key:Layout[j],
                            shapePosition:new go.Point(Number(Layout[j+1]), Number(Layout[j+2])),
                                    width:Number(Layout[j+3]), 
                                    height:Number(Layout[j+4]), 
                                  rotation:Number(Layout[j+8]), 
                                            text: imageSource, 
                                            category:"image"};

When I alert currently the node.data.width it is getting a 0. Does this mean that I need to explicitly tell the Node that I am setting the width to the Picture’s natural width? And if so, how can i accomplish this?

So Number(Layout[j+3]) is returning a non-zero number? What value does that produce in this case? Or maybe I should just ask: what’s the value of Layout?

Sorry I posted that snippet somewhat unnecessarily, as it is not evoked in the example I am working on. That code is executed when loading a new Diagram based on saved Node data on the database.

What is happening in my case is that the startTransaction code block adds a new Picture URL to the diagram, it successfully creates a new node of the image template, but when I try to grab the width of the Picture I get zero, not undefined. Sorry for the confusion.

Your Picture has a default width because you explicitly set width: 200. (If you don’t set or bind it, the value would be NaN.)

The only way that Picture.width gets a value of 0 is because of the Binding, which implies that the Node.data.width must be zero. Unless you have some other code that is setting the Picture.width or Picture.desiredSize.

So you need to ask yourself how the data got a zero value for the width property.