How to give size to adornment and can give custom shape to it

Setting both Shape.geometryString and Shape.figure to your custom figure named “Custom” conflict with each other.

The “rotat…” and “resiz…” properties are on Part, not on Shape. If you are using go-debug.js, you would get warnings about that in the console. Actually, I think you will get those warnings even when using go.js, but I haven’t checked that.

And you don’t have an object named “Custom” – it requires setting GraphObject.name. Don’t you want to use “NX”?

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”

I do want to use NX but it’s not binding angle of rotation and also Adornment is not rotating with figure.

You have errors in your templates. Please use go-debug.js and make dure there are no warnings or error messages in the console window. I listed some of the problems in my previous reply.

The only error was

property set error: Error: Shape.figure value is not an instance of string: -7

and when i changed figure binding. There were no errors but Rotation angle binding was still not Working for “Without custom”
from new go.Binding("figure", "key")), to new go.Binding("figure", "name")), there was no error, for “With Custom” there was no error after changing this figure binding.

Also getting following error’s on selecting the element and adornment is getting visible

Change not within a transaction: !dEnumValue.Insert parts: Layer “” new: Adornment()Node#4785(-7) 11
go-debug.js:14 Change not within a transaction: !d data: -7 new: -7
go-debug.js:14 Change not within a transaction: !d category: -7 old: new: Selection
go-debug.js:14 Change not within a transaction: !d angle: -7 old: 0 new: 2.4002144608566387
go-debug.js:14 Change not within a transaction: !d location: -7 old: Point(NaN,NaN) new: Point(894,180)

I Already explained why i am setting Both geometryString and Shape.Figure and also explained What is the problem that i am getting if i won’t do that. Please refer following post again.

There are 2 separate sections in it with Custom and without Custom, which means in one I am using that custom figure and in another i am not using it and making go.shape that you explained in post 31 but for that i am not able to bind angle with the figure. please also refer screen shots attached.

Sorry, but I was unable to understand what you were trying to say.

How does the following not do what you want? You can substitute your SVG path string for the simple V that it draws, as the value of Shape.geometryString.

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          rotatable: true,
          rotationSpot: go.Spot.Center,
          resizable: true,
          selectionAdornmentTemplate:
            $(go.Adornment, "Spot",
              $(go.Placeholder),
              $(go.Shape,
                {
                  geometryString: "M100 0 L0 50 100 100",
                  alignment: go.Spot.Right,
                  alignmentFocus: go.Spot.Left,
                  stroke: "red",
                  fill: null
                })
            )
        },
        // THE DETAILS OF THE NODE DO NOT MATTER:
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );

image

Your example is not using a custom figure that is made from geo String, and the problem is with the figure/node and not with the adornment. And also even after giving it a geo string you are also using “TraingleLeft” like i am using “Custom”.

Oops, that was a mistake when I was trying different things as you were. I have fixed it, above.

So what about the template that I just provided is not doing what you need? Do you want the Adornment’s Shape to change size based on the size of the adorned object? If so, you could add a binding on the desiredSize.

I just want to rotate the figure that we made using Go.Shape and setting its GeometryString like in Post 31. for this kind of shape which we are generating from geo String in Shape and not through figure generator i am unable to bind the angle.

Please refer to this post again. here i am not able to get its angle in Model even after binding the angle property two way.

If you are not asking about how to customize an Adornment, as indicated in the title that you provided for this topic, please start a new topic. If you explain everything without any reference to the posts in this topic, I hope it will be less confusing.

well i was also referring to your posts also where you explained the desired functionality any how will create that.