Create port for group node was not rendered nicely

GoJS
1

Hi,

I was trying to create a port for a group node. I did this by combining the samples provided from Regrouping Demo and Logic Circuit.

The port was rendered but its position was inside the round rectangle. Is there a way to push it out a little bit and like we saw in the logic circuit example?

Thanks.

Below is the code snippet:

myDiagram.groupTemplateMap.add(“OfGroups”,
$(go.Group, go.Panel.Auto,
{
background: ‘transparent’,
// highlight when dragging into the Group
//mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
//mouseDragLeave: function(e, grp, next) { highlightGroup(grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop:
function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// Groups containing Groups lay out their members horizontally
layout:
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) })
},
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal,
{ stretch: go.GraphObject.Horizontal, background: “orange” },
$(“SubGraphExpanderButton”,
{ alignment: go.Spot.Right, margin: 2 }),
$(go.TextBlock,
{ alignment: go.Spot.Left, editable: true,
margin: 2, wrap: go.TextBlock.None },
new go.Binding(“text”, “text”).makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5 })
), // end Vertical Panel
$(go.Shape, “RoundedRectangle”,
{
isPanelMain: true, // the RoundedRectangle Shape is in front of the Vertical Panel
fill: null,
spot1: new go.Spot(0, 0, 1, 1), // the Vertical Panel is placed
spot2: new go.Spot(1, 1, -1, -1) // slightly inside the rounded rectangle
}),
<span =“Apple-tab-span” style=“white-space:pre”> $(go.Shape, “Rectangle”, portStyle(false),
{ portId: “out”, alignment: new go.Spot(1, 0.5) })
)); // end Group and call to add to template Map

function portStyle(input) {
return {
desiredSize: new go.Size(6, 6),
fill: “black”,
fromSpot: go.Spot.Right,
fromLinkable: !input,
toSpot: go.Spot.Left,
toLinkable: input,
toMaxLinks: 1,
cursor: “pointer”
};
}

2

You just need to wrap the existing “Auto” Panel with a “Spot” Panel so that you can position the port Shape where you want it relative to the original “Auto” Panel. Something like:

[code] myDiagram.groupTemplateMap.add(“OfGroups”,
$(go.Group, go.Panel.Spot,
{ // NOTE: these properties and Binding belong to the Group, not to the Auto Panel
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop:
function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// Groups containing Groups lay out their members horizontally
layout:
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) })
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),

  // NOTE: this is the original Group Panel definition, minus the Group-specific properties and Binding:
  $(go.Panel, go.Panel.Auto,
    { background: 'transparent' },
    $(go.Panel, go.Panel.Vertical,
      $(go.Panel, go.Panel.Horizontal,
        { stretch: go.GraphObject.Horizontal, background: "orange" },
        $("SubGraphExpanderButton",
          { alignment: go.Spot.Right, margin: 2 }),
        $(go.TextBlock,
          { alignment: go.Spot.Left, editable: true,
            margin: 2, wrap: go.TextBlock.None
          },
          new go.Binding("text", "text").makeTwoWay())
      ),  // end Horizontal Panel
      $(go.Placeholder,
        { padding: 5 })
    ),  // end Vertical Panel
    $(go.Shape, "RoundedRectangle",
      {
        isPanelMain: true,  // the RoundedRectangle Shape is in front of the Vertical Panel
        fill: null,
        spot1: new go.Spot(0, 0, 1, 1),   // the Vertical Panel is placed
        spot2: new go.Spot(1, 1, -1, -1)  // slightly inside the rounded rectangle
      })),  // end of original Group definition

  // add the port element:
  $(go.Shape, "Rectangle", portStyle(false),
    // NOTE: horizontal offset add to the Spot to position it outside of the Auto Panel
    { portId: "out", alignment: new go.Spot(1, 0.5, 3, 0) })
));  // end Group and call to add to template Map[/code]