Location binding doesn't work

@marco.az wrote:

Hi, I am a new user and I am using the free evaluation version of GoJS.
I am experimenting with GoJS since a while and now I am trying to add location binding to my diagram but it doesn't work. I read carefully the 'dataBinding.html' tutorial and I added the parse function to my nodeTemplate:

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

but the nodes position is not affected. If I put some garbage data for loc property I can see the errors in the browser console, I think this means the binding is set up correctly, but with real Point values the nodes aren't positioned in the way I expected.

Can someone give me some hints? Following is my full code:

`
function draw_chart() {
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "nosOrganigrammaDiv",
{
initialContentAlignment: go.Spot.TopCenter, //center the diagram
"undoManager.isEnabled":true, /*activate Ctrl-Z*/
allowMove: false,
}); //end diagram

    var sfondoSfumato=$(go.Brush, "Linear", { 0: "white", 1: "#e4e8f0" });
    myDiagram.nodeTemplate=
	    $(go.Node, "Auto",
		/* add Bindings here */
		// example Node binding sets Node.location to the value of Node.data.loc
		new go.Binding("location", "loc",go.Point.parse),

		$(go.Panel,"Auto",
		    $(go.Shape, "RoundedRectangle",
			{stroke:"#A2B6DA", strokeWidth: 2 },
			    new go.Binding("figure","structureFigure"),
			    // rosso se highlighted, sfumato altrimenti
			    new go.Binding("fill", "isHighlighted", function(h) { return h ? "#F44336" : sfondoSfumato; }).ofObject()
		      ),

		    $(go.Panel, "Table",
			{ defaultAlignment: go.Spot.Left, margin: 4 },
			$(go.RowColumnDefinition, { column: 2, width: 4 }),

			$(go.TextBlock, "Nome Struttura",
			  {row:0, column:0, columnSpan:2, alignment:go.Spot.Center},
			  {margin: 2, stroke: "#6485C1", font: "bold 16px Roboto Regular" },
			  new go.Binding("text","structureName")),

			$(go.Picture,
			  {row:1, column:0,alignment:go.Spot.Left},
			  {margin: 5, width: 50, height: 50, background: "white"},
			  new go.Binding("source")),

			$(go.TextBlock, "Nome manager",
			  {row:1, column:1, columnSpan:2, alignment:go.Spot.Center},
			  {margin: 2, stroke: "#888888", font: "normal 16px Roboto Regular" },
			  new go.Binding("text","managerName"))
		    ),
		    $("TreeExpanderButton",
			{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
			{ visible: true })
		    )
	    );


    var myModel=new go.GraphLinksModel(); // $(go.TreeModel);
    myModel.nodeDataArray=
	    [{key:"3503",name:"StruturaWf2",loc:go.Point(600, 300),structureFigure:"StopSign",structureName:"StruturaWf2",type:"0",staff:false},
	      {key:"3603",name:"Struttura wf3",loc:go.Point(300, 500),structureFigure:"Ellipse",structureName:"Struttura wf3",type:"0",staff:false},
	      {key:"3502",name:"StruturaWf1",loc:go.Point(100, 100),structureFigure:"RoundedRectangle",structureName:"StruturaWf1",type:"0",staff:false},
	      {key:"3602",parent:"3502",name:"Figlio1",loc:go.Point(500, 500),structureFigure:"Rectangle",structureName:"Figlio1",type:"0",staff:false}
	      ];

    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      $(go.Link,
	{ routing: go.Link.Orthogonal, corner: 3 },
	$(go.Shape, { strokeWidth: 1, stroke: "#414853" })); // the link shape

	myDiagram.linkTemplateMap.add("Support",
	  $(go.Link,
	    {routing: go.Link.AvoidsNodes, corner: 15, curve: go.Link.JumpOver},
	    { isLayoutPositioned: false, isTreeLink: false, curviness: -75 },
	    { relinkableFrom: false, relinkableTo: false },
	    $(go.Shape,
	      { stroke: "green", strokeWidth: 2 }),
	    $(go.Shape,
	      { toArrow: "OpenTriangle", stroke: "green", strokeWidth: 2 }),
	    $(go.TextBlock,
	      new go.Binding("text", "text"),
	      { stroke: "green", background: "rgba(255,255,255,0.75)",
		maxSize: new go.Size(80, NaN)
	      })));

    /* get array for links*/
    myModel.linkDataArray=<%=chart.getJsonStringLinkDataArray(themeDisplay)%>;

    myDiagram.addDiagramListener("ObjectDoubleClicked",
	  function(e) {
	    var part = e.subject.part;
	    if (!(part instanceof go.Link)) {
		    <portlet:namespace/>viewStructure(part.data.key,part.data.structureName);
	    }
	  });

    myDiagram.addDiagramListener("InitialLayoutCompleted", function (e) {
	    console.info("inside InitialLayoutCompleted");
	    var nodes=e.diagram.nodes;
	      console.info("nodes.first="+nodes.first().data.name);
	    //nodes.first().expandTree(2);
	    var roots=e.diagram.findTreeRoots();
	    console.info("roots="+roots.count);
    roots.each(function (r) { r.expandTree(2); });
});

myDiagram.model=myModel;

// zoom
new go.Overview("nosOrganigrammaOverviewDiv").observed = myDiagram;

}

);
`

Posts: 3

Participants: 2

Read full topic