Icon cut in group corner

GoJS
1

Hi, everybody. I have a problem. I’m adding an icon via a Panel in the upper right-hand corner of a group. But it gets cut off and doesn’t come out completely. I tried changing the padding of the Placeholder and the alignment of the Panel, but it still doesn’t work. Thanks in advance.

Screenshot_13

Here’s the group’s code.

this.dia.groupTemplateMap.add("OfGroups",
      $(go.Group,  "Auto",
        {
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true,
          memberValidation: samePrefix,
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { 
            highlightGroup(e, grp, false); 
          },
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount,
          computesBoundsAfterDrag: true,
          movable: true,
          groupable: false,
          copyable: false,
          layout:  
            $(go.GridLayout,
              {
                wrappingWidth: 1, alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1), spacing: new go.Size(12, 12)
              })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "background"),
          new go.Binding("spot1", "spot1"),
          new go.Binding("spot2", "spot2"),
          { stroke: "#E2E2EA", strokeWidth: 1, parameter1: 15}),
          $(go.Panel, "Vertical",  
          $(go.Panel, "Horizontal",  
            new go.Binding("width", "width"),
            new go.Binding("height", "height"),
          
            $(go.TextBlock,
              {
                alignment: go.Spot.Top,
                editable: false,
                margin: 12,
                opacity: 0.75,
              },
              new go.Binding("font", "font"),
              new go.Binding("stroke", "stroke"),
              new go.Binding("text", "text").makeTwoWay())
          ),
          $(go.Placeholder,
            {padding: 10, alignment: go.Spot.Center}),
         
        ),  
        $(go.Panel, "Auto",
          { alignment: new go.Spot(1, 0, -4, -10) },
          $(go.Shape, "Circle", { fill: "#FFFFFF", strokeWidth: 0}),
          $(go.TextBlock, { name: "COUNT" })
        )
      ));
2

“Auto” Panels clip; by default “Spot” Panels do not clip.

3

Still cutting it with the switch to Spot

Screenshot_14

    $(go.Panel, "Spot",
          { alignment: new go.Spot(1, 0, -4, -10) },
          $(go.Shape, "Circle", { fill: "#FFFFFF",width: 30, height: 30,  strokeWidth: 0}),
          $(go.TextBlock, { name: "COUNT" })
        )
4

I haven’t looked at your code carefully, but I would guess that it is the Group panel being “Auto” that is doing the clipping.

5

Changing the group to spot doesn’t work either.

6

You are going to have to figure out exactly what structure you want your group to have. My guess is it should be something like:

Group, "Spot",
    Panel, "Auto",
        Shape, "RoundedRectangle"
        Placeholder
    Panel, "Auto",
        Shape, "Circle",
        TextBlock

There’s other stuff in your code that I can’t figure out because it isn’t indented properly. But I think this is the basic idea of what you want.

7

Thanks! That’s works

Screenshot_15