Binding location problem

[satowine]

Hi, i’m in trouble with a binding location whe i add a new node to model…

This is my nodeTemplate:

myDiagram.nodeTemplate =
          $(go.Node, "Auto",
            {
              linkConnected: function (node, link, port) {
                if (link.fromNode !== null) link.fromNode.invalidateConnectedLinks();
                if (link.toNode !== null) link.toNode.invalidateConnectedLinks();
              },
              linkDisconnected: function (node, link, port) {
                if (link.fromNode !== null) link.fromNode.invalidateConnectedLinks();
                if (link.toNode !== null) link.toNode.invalidateConnectedLinks();
              },
              locationObjectName: "SHAPE",
              //locationSpot: go.Spot.Center,
              rotatable: true,
              resizable: true,
              resizeObjectName: 'SHAPE',
            },//node properties
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            new go.Binding("angle").makeTwoWay(),
            $(go.Shape,
              {
                name: "SHAPE",
                geometryString: "F M 0 0 H 50 V 50 H 0 V 0",
                fill: "gainsboro",
                stroke: "black",
                strokeWidth: 2,
                portId: "",
                height: 50,
                width: 50,
                fromSpot: go.Spot.AllSides, fromLinkable: true,
                fromLinkableDuplicates: false, fromLinkableSelfNode: true,
                toSpot: go.Spot.AllSides, toLinkable: true,
                toLinkableDuplicates: false, toLinkableSelfNode: true
              },
              new go.Binding("geometryString", "geo").makeTwoWay(),
              new go.Binding("key", "key").makeTwoWay(),
              new go.Binding("fill", "fillColor").makeTwoWay(),
              new go.Binding("stroke", "strokeColor").makeTwoWay(),
              new go.Binding("strokeWidth", "strokeWidth").makeTwoWay(),
              new go.Binding("stretch", "stretch").makeTwoWay(),
              new go.Binding("height", "height").makeTwoWay(),
              new go.Binding("width", "width").makeTwoWay(),
              new go.Binding("zIndex", "zIndex").makeTwoWay(),
              //Binding delle variabili di riferimento [SHAPE]
              new go.Binding("varFillColor", "varFillColor").makeTwoWay(), //fillColor
              new go.Binding("varStrokeColor", "varStrokeColor").makeTwoWay(), //strokeColor
              new go.Binding("varStrokeWidth", "varStrokeWidth").makeTwoWay(), //strokeWidth
              /*// Binding della visibilità
              new go.Binding("isVisible", "isVisible").makeTwoWay()*/
              //Binding per dbModel
              new go.Binding("modelUid", "modelUid")
            ),// shape
            $(go.TextBlock,
              {
                font: "12px sans-serif",
                margin: 8,
                isMultiline: false,
                text: " ",
                stroke: "black"
              },//text
              new go.Binding("text", "text").makeTwoWay(),
              new go.Binding("stroke", "textColor").makeTwoWay(),
              //Binding delle variabili di riferimento [TEXT]
              new go.Binding("varTextColor", "varTextColor").makeTwoWay() // textColor
            ),// text
            //$(go.Panel, "Spot",
            //{ alignment: go.Spot.Center, alignmentFocus: go.Spot.TopRight },
            $(go.Shape,
              {
                alignment: go.Spot.Center,
                alignmentFocus: go.Spot.TopRight,
                geometryString: "M 14.78 0.22 c -0.293 -0.293 -0.768 -0.293 -1.061 0 l -3.159 3.159 c -0.812 -0.246 -1.671 -0.378 -2.561 -0.378 c -3.489 0 -6.514 2.032 -8 5 c 0.643 1.283 1.573 2.391 2.703 3.236 l -2.484 2.484 c -0.293 0.293 -0.293 0.768 0 1.061 c 0.146 0.146 0.338 0.22 0.53 0.22 s 0.384 -0.073 0.53 -0.22 l 13.5 -13.5 c 0.293 -0.293 0.293 -0.768 0 -1.061 Z M 6.5 5 c 0.66 0 1.22 0.426 1.421 1.019 l -1.902 1.902 c -0.592 -0.201 -1.019 -0.761 -1.019 -1.421 c 0 -0.828 0.672 -1.5 1.5 -1.5 Z M 1.721 8 c 0.598 -0.946 1.395 -1.749 2.335 -2.348 c 0.061 -0.039 0.123 -0.077 0.185 -0.114 c -0.156 0.427 -0.241 0.888 -0.241 1.369 c 0 0.858 0.27 1.652 0.73 2.303 l -0.952 0.952 c -0.819 -0.576 -1.519 -1.311 -2.057 -2.162 Z M 12 6.906 c 0 -0.424 -0.066 -0.833 -0.189 -1.217 l -5.028 5.028 c 0.384 0.123 0.793 0.189 1.217 0.189 c 2.209 0 4 -1.791 4 -4 Z M 12.969 4.531 l -1.084 1.084 c 0.02 0.012 0.04 0.024 0.059 0.037 c 0.94 0.6 1.737 1.403 2.335 2.348 c -0.598 0.946 -1.395 1.749 -2.335 2.348 c -1.181 0.753 -2.545 1.152 -3.944 1.152 c -0.604 0 -1.202 -0.074 -1.781 -0.219 l -1.201 1.201 c 0.933 0.335 1.937 0.518 2.982 0.518 c 3.489 0 6.514 -2.032 8 -5 c -0.703 -1.405 -1.752 -2.6 -3.031 -3.469 Z",
                stroke: "black",
                visible: false
              },
              new go.Binding("visible", "isInvisible").makeTwoWay(),
              //Binding delle variabili di riferimento [VS_ICON]
              new go.Binding("varIsVisible", "varIsVisible").makeTwoWay()
            )// shape
            //)// panel-vertical
          )// myDiagram.nodeTemplate

Here i’m trying to add a new node:

let location = new go.Point(300, 200);
      let shape = {
        geo: "F M 0 0 H 50 V 50 H 0 V 0",
        loc: go.Point.stringify(location),
        height: 100,
        width: 100,
        fillColor: "gainsboro",
        strokeColor: "crimson"
      }
      $scope.model.addNodeData(shape);

But the node appear always on the top-left corner:

Some ideas?

Thanks in advice!

[satowine]

UPDATE
If i add, manually, a shape and after i call the function that insert the new node, the location binding work correctly… But i not want to add manually a first shape into model…

There is any solution?

[walter]

First, I should say that you should be using go-debug.js and watching the console output. There is no Shape.varTextColor property nor is there any Shape.varIsVisible property, so those Bindings are invalid.

Second, you are making all those Bindings TwoWay, when most of the bound GraphObject properties will not change. That means many of those TwoWay Bindings are unnecessarily complicated and inefficient. Please read GoJS Data Binding -- Northwoods Software.

The Binding on Node.location looks OK to me, so maybe the problem is that the Diagram is automatically scrolling so that the one-and-only Node is at the top-left corner of the viewport. What properties have you set on Diagram? Setting one or more of the properties named “initial…” might be causing that behavior.

[satowine]

Those bindings are correctly :) I use them when specific event trigger and in other function in the controller :) This is a part of a bigger project…

This is the diagram creation:

var myDiagram = $(go.Diagram, element[0],
          {
            initialContentAlignment: go.Spot.TopLeft,
            "allowDrop": true, // posso trascinare dal div delle palette
            "allowZoom": true,
            "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
            "linkingTool.isEnabled": false, // tengo disattivato perché lo gestisco in una funzione a parte
            "linkingTool.direction": go.LinkingTool.ForwardsOnly, // gestise solo i link della forma "from-to"
            /*"ChangedSelection": updateSelection, Trigger sulla selezione di un nodo
            "ModelChanged": updateShpProperties trigger sul cambiamento del model -> function(e){if(e.isTransactionFinished){do cose}} */
            "ModelChanged": function (e) {
              if (e.isTransactionFinished) {
                if (scope.model.nodeDataArray.length == 0) { // ho cancellato tute le forme (di conseguenza anche i link), non posso più salvare
                  postBrdBtn.disabled = true;
                } else {
                  postBrdBtn.disabled = false; // ho appena inserito una nuova forma alla board, posso, potenzialmente, salvare
                }// if - else
              }// if
            }, // modelChagned
            "SelectionDeleted": function () {
              if (scope.model.nodeDataArray.length == 0) { // ho cancellato tute le forme (di conseguenza anche i link), non posso più salvare
                postBrdBtn.disabled = true;
              }// if
            } // SelectionDeleted
          })// myDiagram

P.S it works unproperly also without initialContentAlignment: go.Spot.TopLeft, i’ve added it after

[walter]

Yes, that is exactly the behavior that you should be getting when Diagram.initialContentAlignment is go.Spot.TopLeft.

[walter]

And trying to bind non-existent properties on GraphObjects is not supported. Just leave those property values on the model data, and any other code can find them there by dereferencing Node.data.

[satowine]

But if i delete this property the behavior is the same… It ignore my location binding and create the object on the top left corner, with or without the initialContentAlignment property. I’ve also tried tot set it to center, and the behavior is the same.

Uhm… i use that binding to “track” a variable that manage the behavior of fillColor etc… But it works properly, i’ve done a lot of try.

P.S
Using go-debug the problem is “magically” solved:

It create the shapes correctly, in the right position and with the right property. Withou the inclusion of go-debug into project it not work. I see this ->

Wrong location ,wrong dimension etc…
How debug can correct the problem? And… what is the problem? :)

[walter]

I have no idea of what the problem is, except that it appears to be a case of your code doing something unsupported, which the debug library happens to check for.

Please check the output window for any warnings or error messages.

[satowine]

Maybe the missing call to beginFigure?

[satowine]

Or bindings… but i don’t understand the binding error…
I can’t bind a variable into a shape to track something?
For example:
-varFillColor track the fillColor property -> when varFillColor is 4, for example, fillColor become “red”. I need to save the varFillColor into an external database, that “give” the value to variable.
If i would to do something similar, i can’t use go bindings?

[walter]

OK, let’s say that you keep varFillColor as a property on your node data object, with value 4, in the Model.nodeDataArray:

    ...,
    { ..., varFillColor: 4, ... },
    ...

Now you can implement a Binding conversion function, GoJS Data Binding -- Northwoods Software. Maybe something like:

  $(go.Shape, . . .,
    { fill: "white", . . . },
    new go.Binding("fill", "varFillColor", function(c) {
        switch (c) {
          case 4: return "red";
          default: return "white";
        }
      }),
    . . .
  )

You might want to use the same conversion function elsewhere, so it might make sense to define it as a separate named function rather than be an anonymous function used by a single Binding.

Note that usually there will be no code that changes the value of that Shape.fill, so there is no reason to have the Binding be TwoWay. But if there is, you can specify a back-conversion function in the Binding. However, as I pointed out earlier, it’s unusual to need a TwoWay Binding on any properties other than listed in GoJS Data Binding -- Northwoods Software

[satowine]

Uh ok… i understand now.
Thanks a lot!!