Save the position of a node

GoJS
#1

Hi, I am using GoJs to show the tables map of a restaurant. I use a Mysql table to store the data of the position, colour, etc. I need to save the position when the user moves the table in the mouseup event.

I am using this format to show the nodes:
{ ‘key’: ‘1’, ‘pos’: ‘30 50’, ‘size’: ‘40 30’, ‘color’: ‘red’ }

The example that I used to read the positions is this
“ModelChanged”: function(e) { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page’s TextArea
document.getElementById(“mySavedModel”).textContent = e.model.toJson();
var mesas=document.getElementById(“mySavedModel”).textContent;

		  //var mesas=mesas1.nodeDataArray.key(1);  	
		 <?php [tables] = " document.write(tables) "; save_tables();?>
}

I appreciate if someone can help me. Bye. Guillermo

#2

Note that the tableStyle in the Seating Chart sample, Seating Chart, includes a TwoWay Binding on the Node.location:

    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

This ensures that whenever a user moves a “table” Node, its location is automatically saved in the model data. So you need to save the model. Note how many of the samples do something like this:

  // Show the diagram's model in JSON format
  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }

Of course the samples do that just to make it clear that the serialized Model can be seen to be fairly simple JSON-formatted text. Call the method Model.toJson and the static function Model.fromJson.

If your question is about how to save the model to your database, then one solution is to do what that sample does with implementing a “ModelChanged” listener that checks for a finished transaction. Replace saving the serialized Model to a <textarea> with sending it to the server where your code can save it into your database.

#3

Walter,thanks for your answer.
I have this Json array. How can I extract node items to save the pos in database?

{ “class”: “go.GraphLinksModel”, “nodeDataArray”: [ {“key”:“1”, “pos”:“30 50”, “size”:“40 30”, “color”:“red”},
{“key”:“2”, “pos”:“13 285”, “size”:“40 30”, “color”:“yellow”},
{“key”:“3”, “pos”:“45 400”, “size”:“40 30”, “color”:“red”},
{“key”:“4”, “pos”:“132 50”, “size”:“40 30”, “color”:“chartreuse”},
{“key”:“5”, “pos”:“179 70”, “size”:“40 30”, “color”:“chartreuse”},
{“key”:“6”, “pos”:“155 35”, “size”:“40 30”, “color”:“chartreuse”},
{“key”:“7”, “pos”:“210 180”, “size”:“40 30”, “color”:“chartreuse”} ], “linkDataArray”: []}

#4

I don’t understand your question. What you are showing is a text string. Maybe you just want to look at the Model.nodeDataArray on what is the value of Diagram.model?

#5

I am using this example Absolute positioning within the viewport to show nodes with the number of the restaurant table. I have a Mysql table with the id of the node, status (used for the colour of node), size, etc. The status is changing dynamically by other users so I cant save the model as text content because the color changes by the status. I must save the new position when the admin user change the node to other position.

For example
This data is from table 2 {“key”:“2”, “pos”:“13 285”, “size”:“40 30”, “color”:“yellow”}
if the admin user moves to another position “pos”:“100 200” for example I need to save in the database 100 and 200 for the id 2

If I save all data from this way , me be colors were change by other users. So I must extract data from here to save only the pos coordinates

{ “class”: “go.GraphLinksModel”, “nodeDataArray”: [ {“key”:“1”, “pos”:“30 50”, “size”:“40 30”, “color”:“red”},
{“key”:“2”, “pos”:“13 285”, “size”:“40 30”, “color”:“yellow”},
{“key”:“3”, “pos”:“45 400”, “size”:“40 30”, “color”:“red”},
{“key”:“4”, “pos”:“132 50”, “size”:“40 30”, “color”:“chartreuse”},
{“key”:“5”, “pos”:“179 70”, “size”:“40 30”, “color”:“chartreuse”},
{“key”:“6”, “pos”:“155 35”, “size”:“40 30”, “color”:“chartreuse”},
{“key”:“7”, “pos”:“210 180”, “size”:“40 30”, “color”:“chartreuse”} ], “linkDataArray”: []}

Hope you understand.

image

#6

Yes, it sounds as if some properties are not meant to be stored with the information about the locations of the nodes. So I agree that you do not want to save a model just by saving the string produced by serialization. But you could parse the JSON and then save only those properties that you do care about?

Another possibility is for you to name the property so that its first character is an underscore, for example “_color”. That way the property is not written out by Model.toJson.

Yet another possibility is not to use Model.toJson and Model.fromJson at all, and implement your own serialization. I know that some customers do this because they always had their own and didn’t want to adopt the schema that GoJS models use. If you go this route you’ll need to remember not to serialize or deserialize the “__gohashid” property.

#7

When I see the content of Part in this function with Alert it has Node#558(15) for example the node number and the key or text of the node. How can I get the number that is in parenthesis 15 for example that is the number of the table.

// this function is the Node.dragComputation, to limit the movement of the parts
function stayInFixedArea(part, pt, gridpt) {
var diagram = part.diagram;
if (diagram === null) return pt;
// compute the document area without padding
var v = diagram.documentBounds.copy();
v.subtractMargin(diagram.padding);
// get the bounds of the part being dragged
var b = part.actualBounds;
var loc = part.location;
// now limit the location appropriately
var x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
var y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
nodo = part;
alert(nodo);
pos_x= x;
pos_y= y;

  return new go.Point(x, y);
#8

I don’t know exactly what properties your data has. You’ll want to look at the part.data object.

#9

Genius. Thank you very much !!!