Why is the selected area greater than the actual graphics area?

GoJS
1 
function makeArc(data) {
return new go.Geometry()
  .add(new go.PathFigure(data.radius + data.radius * Math.cos(data.start * Math.PI / 180),
                         data.radius + data.radius * Math.sin(data.start * Math.PI / 180),
                         false)
    .add(new go.PathSegment(go.PathSegment.Arc,
                            data.start, data.sweep,
                            data.radius, data.radius,
                            data.radius, data.radius)
  ));
}
var arc_sketchTemplate = g_(go.Node, "Viewbox",{
	resizable: true,
        resizeObjectName: "LAMP",
	rotatable: true,
	locationSpot: go.Spot.Center, 
	locationObjectName: "LAMP",
	//selectionAdorned: false,
        selectionObjectName: "LAMP",
        background: null
  },
  new go.Binding("angle","angle").makeTwoWay(),
  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
  new go.Binding("layerName", "isSelected", function(s) { return s ? "Foreground" : ""; }).ofObject(),
  g_(go.Panel, "Spot",        
    g_(go.Shape,  // arc
      { 
    	name: "LAMP",
    	fill: null, 
    	stroke: "rgba(0,0,0,1)", 
    	strokeWidth: 2,
        alignment: new go.Spot(0,0,0,0)
      },
      new go.Binding("stroke","color"), 
      new go.Binding("strokeWidth","thickness").makeTwoWay(),
      new go.Binding("geometry", "", makeArc),
      new go.Binding("desiredSize","desiredSize",go.Size.parse).makeTwoWay(go.Size.stringify)),
  g_(go.TextBlock,
    {
	  editable: true,
	  _isNodeLabel: true,
	  alignment: new go.Spot(0.5,1,0,20),
	  cursor: "pointer",
      stroke: "rgba(0,0,0,1)", background: "transparent"
    },
    new go.Binding("font","font"), 
    new go.Binding("stroke","text_color"),
    new go.Binding("alignment").makeTwoWay(), 
    new go.Binding("text", "text"))
));


As shown in the figure, the graphics area is significantly smaller than the selected area.
I want the selected region to be exactly the actual area. What should I do?

2

That is because the Geometry returned by makeArc has the arc centered at (75,70) or so, and by default the Geometry keeps the origin within the Geometry.bounds. You can look at the value of calling Geometry.computeBoundsWithoutOrigin, to confirm that.

If you change the makeArc function to call Geometry.normalize , ignore the offset that it returns, and just return the normalized Geometry, I think you’ll get what you want.

For example, here’s the modified Pie Charts sample:

      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,
          nodeTemplate:
            $(go.Node,
              $(go.Shape,
                { fill: "lightgreen", isGeometryPositioned: true },
                new go.Binding("fill", "color"),
                new go.Binding("geometry", "", makeGeo))
            ),
          model: new go.GraphLinksModel([  // node data
              { start: -30, sweep: 60, color: "white" },
              { start: 30, sweep: 300, color: "red" },
              { start: 0, sweep: 120, color: "lightgreen" },
              { start: 120, sweep: 70, color: "blue" },
              { start: 250, sweep: 20, color: "yellow" }
            ])
        }
      );

    function makeGeo(data) {
      // this is much more efficient than calling go.GraphObject.make:
      var geo = new go.Geometry()
            .add(new go.PathFigure(50, 50)  // start point
                 .add(new go.PathSegment(go.PathSegment.Arc,
                                         data.start, data.sweep,  // angles
                                         50, 50,  // center
                                         50, 50)  // radius
            .close()));
      geo.normalize();
      return geo;
    }

Selecting all of the resulting nodes produces: