Additional space between RoundedRectange and RoundedTopRectangle shapes

GoJS
1

I am using gojs custom shape “RoundedTopRectange” from here. But it adds an addition space on top of this “RoundedTopRectange” shaped panel like shown in the screenshot.

image
image1101×331 17.8 KB

Instead i want to get something like this.

image
image1011×468 18.5 KB

I have tried adding zero padding and margin but that doesn’t work. How can we remove this space from top, right and left sides of “TopRoundedRectange” shaped panel.
The code for my node template looks like following.

const nodeTemplate = () =>
  $(
    Node,
    Node.Auto,
    {
      isShadowed: true,
      shadowColor: lineageDiagramConfig.colors.group.shadow,
      shadowOffset: new Point(0, 5),
      shadowBlur: 15,
      selectionAdorned: false,
      cursor: 'pointer',
      deletable: false,
      copyable: false,
    },
    locationBinding(),
    isLayoutPositionedBinding(),

    $(Shape, {
      figure: 'RoundedRectangle',
      fill: variableColors.gray1200,
      stroke: variableColors.gray700,
    }),
    $(
      Panel,
      Panel.Vertical,
      {
        width: 200,
      },
      //header
      $(
        Panel,
        Panel.Auto,
        { stretch: GraphObject.Horizontal },
        $(Shape, { figure: GOJS_CUSTOM_FIGURES.RoundedTopRectangle, fill: variableColors.gray700, stroke: null }),
        $(
          TextBlock,
          {
            alignment: Spot.Left,
            stroke: 'white',
            textAlign: 'center',
            font: 'bold 12pt sans-serif',
          },
          new Binding('text', 'name'),
        ),
      ),
      $(
        Panel,
        Panel.Auto,
        {
          stretch: GraphObject.Horizontal,
        },
        $(TextBlock, {
          alignment: Spot.Left,
          stroke: variableColors.green500,
          textAlign: 'left',
          font: ' 12pt sans-serif',
          text: 'ready',
        }),
        $(TextBlock, {
          alignment: Spot.Right,
          stroke: variableColors.green500,
          textAlign: 'right',
          font: ' 12pt sans-serif',
          text: '3/3 tests passed',
        }),
      ),
    ),
  );
2

Well, you probably do need to remove any Panel.padding (on the Panel) or GraphObject.margin (on the element) that you might have.

But in addition, you need to set Shape.spot1 and spot2 to have zero offsets. Those control the content area for the figure, to minimize having text (or whatever the content is) from overlapping with the geometry of the figure. If you look at how the figures are defined in https://gojs.net/latest/extensions/RoundedRectangles.js you can see how they set the Geometry.spot1 and spot2 which are used when you don’t override those values in the Shape.

Maybe something like:

    $(Shape, {
      figure: 'RoundedRectangle',
      fill: variableColors.gray1200,
      stroke: variableColors.gray700,
      spot1: go.Spot.TopLeft,
      spot2: go.Spot.BottomRight
    }),

If that isn’t quite right for your purposes, perhaps due to some unwanted overlaps, you can adjust the Spot values appropriately.