Creating custom figures

GoJS
1

Hello,

How can I create custom shapes which consists of other shapes? For eg. we are trying to create the following, however the ellipse border is overlapping the text.
Ellipse in rectangle

Ideally, this is what it should like
indent preformatted text by 4 spaces

function getCustomShapes() {
        go.Shape.defineFigureGenerator("EllipseInRectangle", function (shape, w, h) {
        var geo = new go.Geometry();
              geo.add(new go.PathFigure(0,0)                             
             .add(new go.PathSegment(go.PathSegment.Line, w, 0))
             .add(new go.PathSegment(go.PathSegment.Line, w, h))
             .add(new go.PathSegment(go.PathSegment.Line, 0, h))
             .add(new go.PathSegment(go.PathSegment.Line, 0, 0))                          
         );
        geo.add(new go.PathFigure(0,0)
             .add(new go.PathSegment(go.PathSegment.Arc,0,360,w/2,h/2,w/2,h/2))
             );

        return geo;
       });
    }
2

Why do you need to define a new figure for that? Just use an “Ellipse” figure Shape:

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
        { background: "olivedrab", desiredSize: new go.Size(240, 80) },
        $(go.Shape, "Ellipse", { stroke: "darkgreen", fill: null }),
        $(go.TextBlock, { stroke: "white", font: "bold 10pt sans-serif" },
          new go.Binding("text", "key"))
    );

This produces:

3

We need a named figure so we can use data binding.

4

Also, I really like how out of the box shapes auto size based on the text when the panel is auto. It doesn’t seems to work for custom shapes. Is there a way we can do that with custom named shapes?

5

All of the predefined named figures are implemented using Shape.defineFigureGenerator, so if you are using a Shape as the main element of an “Auto” Panel, it will be sized to fit around the contents (such as some text).

You can set the Geometry.spot1 and/or Geometry.spot2 properties to control where the “Auto” Panel positions the content relative to the Shape figure.

6

Using spots as shown here solved my issue.

go.Shape.defineFigureGenerator("EllipseInRectangle", function (shape, w, h) {
    var geo = new go.Geometry();
    geo.add(new go.PathFigure(0, 0)
    .add(new go.PathSegment(go.PathSegment.Line, w, 0))
    .add(new go.PathSegment(go.PathSegment.Line, w, h))
    .add(new go.PathSegment(go.PathSegment.Line, 0, h))
    .add(new go.PathSegment(go.PathSegment.Line, 0, 0))
);
    geo.add(new go.PathFigure(0, 0)
            .add(new go.PathSegment(go.PathSegment.Arc, 180, 360, w / 2, h / 2, w / 2, h / 2))
            );
    geo.spot1 = new go.Spot(0, 0, 25, 25);
    geo.spot2 = new go.Spot(1, 1, -25, -25);
    return geo;
});