Hi Walter,
I need to automatically resize a group on heights when dragging a node inside (can be also another group). Now the group automatically resize on x dimension but not on y dimension. What I really need is to show always the ports contained in a right vertical panels, which ports are positioned on the bottom right of the group. Is possible to keep always a distance between a dragged object and the ports? I don’t want the object to cover the ports after dragging.
Here’s an example (complex let me say…):
I put a fixed height (250px) but it could be better to calculate it dinamically in order to show ports…
Here’s the code for group:
myDiagram.groupTemplate =
$gj(go.Group, "Spot",
{
background: "transparent",
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, 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: finishDrop,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
// Groups containing Groups lay out their members horizontally
layout: makeLayout(),
cursor: "move",
dragComputation: stayInGroup,
containingGroupChanged: function(prt, oldgroup, newgroup) {
processParentGroup(prt); //non recursive
CheckAllInfoTab(false);
},
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("layout", "horiz", makeLayout),
new go.Binding("background", "isHighlighted", function(h) {
return h ? "rgba(0,255,0,0.6)" : "white";
}).ofObject(),
$gj(go.Panel, "Auto",
$gj(go.Shape, "RoundedRectangle",
{
fill: null,
strokeWidth: 3
},
new go.Binding("stroke", "horiz", defaultColor),
new go.Binding("stroke", "color")),
$gj(go.Panel, "Vertical", // title above Placeholder
$gj(go.Panel, "Horizontal", // button next to TextBlock
{
name: "hover-screenshot-panel",
stretch: go.GraphObject.Horizontal,
//background: defaultColor(false),
portId: "totale",
// allows links to/from all sides
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left,
fromLinkable: true,
toLinkable: true,
toMaxLinks: 1,
cursor:"pointer"
},
new go.Binding("background", "horiz", defaultColor),
new go.Binding("background", "color"),
$gj(go.TextBlock,
{
alignment: go.Spot.Left,
editable: false,
margin: 5,
font: defaultFont(false),
//opacity: 0.75, // allow some color to show through
//stroke: "#404040"
stroke: "white"
},
new go.Binding("font", "horiz", defaultFont),
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$gj(go.Panel, "Table",{},
$gj(go.Placeholder,
{
padding: 15,
alignment: go.Spot.TopLeft,
minSize: new go.Size(250, 150)
}),
$gj(go.Picture,
{
width: 200, height: 250, scale: 1.0,
alignment: go.Spot.Center,
opacity:0.3
},
new go.Binding("source", "source")
)
)
) // end Vertical Panel
), // end of Panel Auto
$gj(go.Panel, "Vertical",
{
//alignment: new go.Spot(1,0.6,50,0), outer right
alignment: new go.Spot(1,1,-50,-50), //bottom right
name: "VPANEL"
},
new go.Binding("itemArray", "rightArray"),
{
itemTemplate:
$gj(go.Panel,
{
_side: "right",
fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
fromLinkable: false, toLinkable: false,
cursor: "pointer"
//contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$gj(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(3, 0),
fill: "blue"
}
),
$gj(go.TextBlock,
{ margin: new go.Margin(5, 0, 0, 25),
font: "bold 12px sans-serif",
stroke:"white",
alignment: go.Spot.Left,
fromLinkable: false,
toLinkable: false,
shadowVisible: false
},
new go.Binding("text", "portId")
),
$gj("CheckBox", "checked",
{ "ButtonIcon.stroke": "green",
"_buttonFillOver": "lightgreen",
"_buttonStrokeOver": "green",
"Button.width": 20, "Button.height": 20,
margin:new go.Margin(3, 0),
"_doClick": function(e, obj) {
if(obj.part.ports.count==2){
return;
}
processParentGroupRec(obj.part);
CheckAllInfoTab(false);
}
}
)
) // end itemTemplate
}
) // end Vertical Panel
);
Thank you in advance