Display and Edit Node 's information

GoJS
1

Hi,

I want to display the Node’s information just like in the example (http://www.gojs.net/latest/samples/htmlInteraction.html) and i want to display the location of the selected node i.e, x and y position and the width, height of that node too.

How can i do that ? i.e, display the node x, y position and its width, height

One more question : I want to add some new information to some particular node , like, for each node i want to bind a list of comments( just text) . How can i add, manage, and retrieve and display that whenever that node is selected

Thanks,
Regards

Vu

2

You can use the Node.actualBounds to get a node’s X/Y/Width/Height for display: http://gojs.net/latest/api/symbols/GraphObject.html#actualBounds

For the second question, you can add arbitrary data to your model:

var nodeDataArray = [
  { key: 1, text: "Alpha", color: "lightblue", <b>extraData1: "ABC", extraData2: "DEF"</b> },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" }
];
3

Thanks a lot :)

Btw, one more question: i want to change to position of the selected node. I’ve tried doing like this

myDiagram.selection.first().data.loc.x = new value


This seem to be the wrong way, right? Could you suggest how to do that right?

4

Did you get an exception doing that?

Two ways to do it:

myDiagram.startTransaction(“move”);
var node = myDiagram.selection.first();
node.location = new go.Point(newval, node.location.y);
myDiagram.commitTransaction(“move”);

Or:

myDiagram.startTransaction(“move”);
var data = myDiagram.selection.first().data;
myDiagram.model.setDataProperty(data, “loc”, new go.Point(newval, data.loc.y));
myDiagram.commitTransaction(“move”);

That assumes there is a selected Node, your data property is named “loc” and it is of type Point (not string), and there is a TwoWay Binding on Node.location to “loc”.

5

I did as the first way u suggested but the console raised the error :Invalid arguments to Point constructor


I have no idea what’s wrong with the arguments here for point constructor. Can you help?

6
I did as the first way u suggested but the console raised the error :Invalid arguments to Point constructor
I have no idea what's wrong with the arguments here for point constructor. Can you help?
7

What were the values passed to the Point constructor?

8

Here is my code:

function moveX(val)
{

<span =“Apple-tab-span” style=“white-space:pre”> myDiagram.startTransaction(“move”);
var node = myDiagram.selection.first();
node.location = new go.Point(val,node.location.y)
myDiagram.commitTransaction(“move”);
}

9

OK, what is the value of “val” when moveX is called?

10

oh thanks , it works. It turns out the value of “val” is a string and i totally forget about that, my bad :D

11

OK. By the way, if you are calling moveX repeatedly, say in a loop, you will want to move those calls to start and commit transaction to be outside of the loop.

12

wow, didn’t know that :D thanks