Icon cut in group corner

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.


Here’s the group’s code.

      $(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,
                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"),
                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())
            {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" })

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

Still cutting it with the switch to Spot


    $(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" })

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.

Changing the group to spot doesn’t work either.

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"
    Panel, "Auto",
        Shape, "Circle",

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.

Thanks! That’s works