How to achieve panel grow to parent panel with shape rounded corner

GoJS
1

image
image450×564 41.5 KB

this is what I’ve achieved so far

but Im trying to achieve, blue stroke around the picture (left, top, right) only with picture fills to the containing roundedRectangle, and bottom textblock filled with solid color to the roundedRectangle

diagram.nodeTemplate = $(go.Node, 'Vertical', 
      { locationSpot: go.Spot.Center },
      new go.Binding('location', 'loc'),
      $(go.Panel, 'Auto',
        $(go.Shape, 'RoundedRectangle', { fill: '#2a3042', stroke: 'blue'}),
        $(go.Panel, "Vertical",
          $(go.Picture,
            { width: 50, height: 50, background: 'white'},
            new go.Binding('source', 'img')),
          $(go.TextBlock,
            { stroke: "white", 
              margin: new go.Margin(5,0,0,0),
              width: 50, 
              font: '13px, "Poppins", sans-serif', 
              textAlign: 'center', 
              overflow: go.TextBlock.OverflowEllipsis, 
              maxLines: 2,
              isMultiline: true,
              wrap: go.TextBlock.WrapDesiredSize
            },
            new go.Binding('text', 'name')
          )
        )
      )
    );
2 
    $(go.Node, 'Vertical', 
      { locationSpot: go.Spot.Center },
      new go.Binding('location', 'loc'),
      $(go.Panel, 'Auto',
        $(go.Shape, 'RoundedRectangle',
          { fill: '#2a3042', stroke: 'blue', spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
        $(go.Panel, "Vertical",
          $(go.Panel, "Spot",
            { isClipping: true },
            $(go.Shape, "RoundedRectangle",
              { width: 50, height: 50, strokeWidth: 0 }),
            $(go.Picture,
              { width: 50, height: 50, background: 'white'},
              new go.Binding('source', 'img')),
          ),
          $(go.TextBlock,
            { stroke: "white", 
              margin: new go.Margin(5,0,0,0),
              width: 50, 
              font: '13px sans-serif', 
              textAlign: 'center', 
              overflow: go.TextBlock.OverflowEllipsis, 
              maxLines: 2,
              isMultiline: true,
              wrap: go.TextBlock.WrapDesiredSize
            },
            new go.Binding('text')
          )
        )
      )
    );

https://gojs.net/latest/intro/panels.html#ClippingWithSpotPanels

3

though this wasn’t what I’m looking for exactly but it definitely gave me directions!
this is what I’ve achieved so far. Not exactly what I had envision but close enough.
what I had imagine would be the bottom half border (stroke) would be of color #2a3042

image
image412×606 31.5 KB

go.Shape.defineFigureGenerator("RoundedHalfRectangle", function(shape, w, h) {  // predefined in 2.0
      var param1 = shape ? shape.parameter1 : NaN;
      if (isNaN(param1) || param1 < 0) param1 = 5;  // default corner
      param1 = Math.min(param1, w / 3);
      param1 = Math.min(param1, h / 3);
    
      var cpOffset = param1 * 4 * ((Math.sqrt(2) - 1) / 3);
      var geo = new go.Geometry()
             .add(new go.PathFigure(param1, 0, true)
                  .add(new go.PathSegment(go.PathSegment.Line, w - param1, 0))
                  .add(new go.PathSegment(go.PathSegment.Bezier, w, param1, w - cpOffset, 0, w, cpOffset))
                  .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, param1))
                  .add(new go.PathSegment(go.PathSegment.Bezier, param1, 0, 0, cpOffset, cpOffset, 0).close()));
      if (cpOffset > 1) {
        geo.spot1 = new go.Spot(0, 0, cpOffset, cpOffset);
        geo.spot2 = new go.Spot(1, 1, -cpOffset, -cpOffset);
      }
      return geo;
    });

$(go.Node, 'Vertical', 
      { locationSpot: go.Spot.Center },
      new go.Binding('location', 'loc'),
      $(go.Panel, 'Auto',
        $(go.Shape, 'RoundedRectangle',
          { fill: '#2a3042', stroke: 'lightgray', spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
        $(go.Panel, "Vertical",
          $(go.Panel, "Spot",
            { isClipping: true },
            $(go.Shape, "RoundedHalfRectangle",
              { width: 55, height: 55, strokeWidth: 0 }),
            $(go.Picture,
              { width: 55, height: 55, background: 'white'},
              new go.Binding('source', 'img')),
          ),
          $(go.TextBlock,
            { stroke: "white", 
              width: 55,
              height: 30,
              font: '13px, "Poppins", sans-serif', 
              textAlign: 'center',
              verticalAlignment: go.Spot.Center,
              overflow: go.TextBlock.OverflowEllipsis, 
              maxLines: 2,
              isMultiline: true,
              wrap: go.TextBlock.WrapDesiredSize
            },
            new go.Binding('text', 'name')
          )
        )
      )
    );
4

Set or bind the Shape.fill property.