Problem with corners in the RoundedRectangle

GoJS
1

Hi, everyone, I have a problem when I implement RoundedRectangle on a Shape. Border is added and I can modify it with the strokeWith, but in the corners, the original rectangular shape persists. I can’t find a way to get rid of that excess and get the corners rounded properly. The Shape is inside a Group. Thanks in advance.

Screenshot_6

This is my code:

  this.dia.groupTemplateMap.add("OfGroups",
      $(go.Group, "Auto",
        {
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true, 
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount,
          layout:
            $(go.GridLayout,
              {
                wrappingColumn: 1
              })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "RoundedRectangle",
          new go.Binding("background", "background"),
          { background: '#E2E2EA', fill: null, stroke: "#E2E2EA", strokeWidth: 1}),
          $(go.Panel, "Vertical",  // title above Placeholder
          $(go.Panel, "Horizontal",  // button next to TextBlock
            { stretch: go.GraphObject.Horizontal, background: "#E2E2EA" },
            new go.Binding("background", "background"),
            new go.Binding("width", "width"),
            new go.Binding("height", "height"),
          
            $(go.TextBlock,
              {
                alignment: go.Spot.Top,
                editable: false,
                margin: 5,
                font: "bold 18px sans-serif",
                opacity: 0.75,
              },
              new go.Binding("stroke", "stroke"),
              new go.Binding("text", "text").makeTwoWay())
          ),
          $(go.Placeholder,
            {padding: 12, alignment: go.Spot.TopLeft }),
         
        ),  // end Vertical Panel
      ));  // end Group and call to add to template Map
2

Set Shape.parameter1 to control the corner radius.

3

I already added it this way and it doesn’t work. It gives more curvature, but it still does if you take the bordering correctly.

Screenshot_8
Screenshot_8759×151 12.9 KB

Screenshot_7

4

The curve looks pretty good there, compared with it being too sharp in your first screenshot. The two corners are close to matching. What’s the problem?

5

Yes, the curve is fine, but I want to remove this part of the corner that’s left out of the border. That’s what I want to do.

Screenshot_9

6

Oh. That’s because you are setting or binding the GraphObject.background, which is always rectangular. Set or bind the Shape.fill instead.

7

Great! That worked. Thanks a lot.