Problem with RoundedRectangle radius

GoJS
1

Hi everyone,

I am trying to create a simple node template but I am struggeling with the behavior of the RoundedRectangle shape.

image
image1212×1105 63 KB

Everytime I change radius of the RoundedRectangle using parameter1, a margin (red in the picture) is added to the inner table making it much larger. Any suggestions?

Here’s my template:

    return go.GraphObject.make(go.Node, 'Auto',
      {
        fromSpot: go.Spot.AllSides,
        fromLinkable: true,
        fromLinkableSelfNode: true,
        toSpot: go.Spot.AllSides,
        toLinkable: true,
        toLinkableSelfNode: true
      },
        go.GraphObject.make(go.Shape, 'RoundedRectangle',
          {
            name: "Shape",
            stroke: '#e0e0e0',
            fill: '#f00',
            parameter1: 30
          }
        ),
        go.GraphObject.make(go.Panel, "Table",
          {
            row: 1,
            height: 30,
            stretch: go.GraphObject.Fill,
            background: 'white'
          },
          go.GraphObject.make(go.RowColumnDefinition, { column: 0, width: 30 }),
          go.GraphObject.make(go.RowColumnDefinition, { column: 1, minimum: 60 }),
          go.GraphObject.make(go.RowColumnDefinition, { column: 2, width: 30 }),
          new go.Panel("Horizontal",
            {
              column: 1,
              alignment: go.Spot.Center
            })
            .add(new go.Shape(
              {
                figure: "Circle",
                desiredSize: new go.Size(8, 8),
                margin: new go.Margin(0, 5, 0, 0),
                stroke: null,
              })
              .bind("fill", "color")
            )
            .add(new go.TextBlock(
              {
                name: "NameBlock",
                alignment: go.Spot.Center,
                verticalAlignment: go.Spot.LeftCenter,
                cursor: 'text',
                height: 24,
                editable: true,
                isMultiline: false,
                mouseEnter: (e, text: go.TextBlock) => {
                  text.background = "#f0f0f0";
                },
                mouseLeave: (e, text: go.TextBlock) => {
                  text.background = null;
                }
              })
              .bind(new go.Binding("text", "label").makeTwoWay())
            )
        )
    );
2

If you don’t set the background of the TextBlock and set the stroke of the Shape instead of its fill, do you like the results better?

3

Unfortunately not. I did the following as you suggested:

  • Removed the event handlers setting the background of the TextBlock
  • Removed the fill of the ‘RoundedRectangle’ Shape
  • Removed the fill of the Table

The shape stays the same but now everything is black.

image

4

Regarding the Shape.figure, you may be interested in the “Badge” figure from this forum post: Making badge from RoundedRectangle - #8 by estesbubba

It’s a bit closer to your provided image.

You should still set the Shape.fill to whatever background color you want for the Node, even if that’s “transparent”. The default fill color for a Shape is black.

5

@jhardy

Almost there:

image

Any idea what that line artefact in the lower left corner is? It seems that the path is not properly closed:

go.Shape.defineFigureGenerator('MyRoundedRectangle', function (shape, w, h) {
  const radius = h / 2;
  const geo = new go.Geometry();

  // a single figure consisting of straight lines and half-circle arcs
  geo.add(new go.PathFigure(0, radius)
    .add(new go.PathSegment(go.PathSegment.Arc, 90, 180, radius, radius, radius, radius))
    .add(new go.PathSegment(go.PathSegment.Line, w - radius, 0))
    .add(new go.PathSegment(go.PathSegment.Arc, 270, 180, w - radius, radius, radius, radius))
    .add(new go.PathSegment(go.PathSegment.Line, radius, h).close()));

  // don't intersect with two top corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.1 * radius, 0.1 * radius);
  geo.spot2 = new go.Spot(1, 1, -0.1 * radius, 0);

  return geo;
});
6

Try this:

go.Shape.defineFigureGenerator('MyRoundedRectangle', function (shape, w, h) {
  const radius = h / 2;
  const geo = new go.Geometry();

  // a single figure consisting of straight lines and half-circle arcs
  geo.add(new go.PathFigure(radius, h)
    .add(new go.PathSegment(go.PathSegment.Arc, 90, 180, radius, radius, radius, radius))
    .add(new go.PathSegment(go.PathSegment.Line, w - radius, 0))
    .add(new go.PathSegment(go.PathSegment.Arc, 270, 180, w - radius, radius, radius, radius))
    .add(new go.PathSegment(go.PathSegment.Line, radius, h).close()));

  // don't intersect with two top corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.1 * radius, 0.1 * radius);
  geo.spot2 = new go.Spot(1, 1, -0.1 * radius, 0);

  return geo;
});
7

That did it. Thank you.