Unable to Bind angle to Custom figure using Geometry string and Shape

GoJS
#1

I have “Custom” named object which is the same figure generated using defineFigureGenerator and only by using this object in combination with Shape.geometryString i am able to get angle of the rotation in the model. And also if i am not using Custom with shape then adornment is also not rotating.

 go.Shape.defineFigureGenerator("Custom", function(shape, w, h) {
      var geo = go.Geometry.parse(CustomFigures.Nx);
      geo.normalize();
      return geo;
  });

Without Custom:

        var NxTemplate =
            $(go.Node, 
              "Spot", nodeStyle(),  
              {
                selectionAdornmentTemplate:  // custom selection adornment
                $(go.Adornment, "Spot",        
                $(go.Placeholder),
                $(go.Shape,
                  {
                    geometryString: CustomFigures.ADNx,
                    alignment: go.Spot.Center,
                    alignmentFocus: go.Spot.Left,
                    stroke: "pink",
                  })
                )
              },
              $(go.Shape,
                {
                  name: "NX", 
                  geometryString: CustomFigures.Nx, 
                  width: 90, 
                  height:30,
                  stroke: "red",  
                  fill: "lightgray",
                  geometryStretch: go.GraphObject.Uniform
                },
              new go.Binding("figure", "key")),
              { rotatable: true, rotateObjectName: "NX" },
              { resizable: true, resizeObjectName: "NX" },      
              new go.Binding("angle").makeTwoWay(),
            );

image
“Model data : { “class”: “GraphLinksModel”,
“nodeDataArray”: [
{“category”:“NX”, “key”:-7, “loc”:“1001.9999999999993 142”}
],”

With Custom:

var NxTemplate =
    $(go.Node, 
      "Spot", nodeStyle(),  
      {
        selectionAdornmentTemplate:  // custom selection adornment
        $(go.Adornment, "Spot",        
        $(go.Placeholder),
        $(go.Shape,
          {
            geometryString: CustomFigures.ADNx,
            alignment: go.Spot.Center,
            alignmentFocus: go.Spot.Left,
            stroke: "pink",
          })
        )
      },
      $(go.Shape, "Custom",
        {
          name: "NX", 
          geometryString: CustomFigures.Nx, 
          width: 90, 
          height:30,
          stroke: "red",  
          fill: "lightgray",
          geometryStretch: go.GraphObject.Uniform
        },
      new go.Binding("figure", "key")),
      { rotatable: true, rotateObjectName: "Custom" },
      { resizable: true, resizeObjectName: "NX" },      
      new go.Binding("angle").makeTwoWay(),
    );

image

“Model data : { “class”: “GraphLinksModel”,
“nodeDataArray”: [
{“category”:“NX”, “key”:-7, “loc”:“642 131”, “angle”: 36.18477897677684 }
],”
Location with angle coming in model.

Rotation is only working fine with “Custom” and Resizing only working fine with “NX”

#2

You want to make sure any …Name that you refer to actually exists, or else it will use the whole Node.

So when you set Part.rotationObjectName to “NX”, the RotatingTool will rotate the node’s Shape. But the Adornment created from the Part.selectionAdornmentTemplate applies to the whole Node, which is not rotated. You thus need to set Part.selectionObjectName to “NX” as well.

Whatever GraphObject is being rotated or resized wants the TwoWay Binding on the modified property. So if the rotateObjectName is “NX”, then the object named “NX” should have the Binding on “angle”. If the resizeObjectName is “NX”, then the object named “NX” should have the Binding on “desiredSize”.

#3

Thanks it worked and also had to give the angle binding inside the Shape.

 var NxTemplate =
    $(go.Node, 
      "Spot", nodeStyle(),  
      {
        selectionAdornmentTemplate:  // custom selection adornment
        $(go.Adornment, "Spot",        
        $(go.Placeholder),
        $(go.Shape,
          {
            geometryString: CustomFigures.ADNx,
            alignment: go.Spot.Center,
            alignmentFocus: go.Spot.Left,
            stroke: "pink",
          })
        )
      },
      $(go.Shape,
        {
          name: "NX", 
          geometryString: CustomFigures.Nx, 
          width: 90, 
          height:30,
          stroke: "red",  
          fill: "lightgray",
          geometryStretch: go.GraphObject.Uniform
        },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),        
        new go.Binding("figure", "name"),           
        new go.Binding("angle").makeTwoWay(),
      ),
      { rotatable: true, rotateObjectName: "NX", selectionObjectName: "NX" },
      { resizable: true, resizeObjectName: "NX" },   
    );