Hi,
I think my code has some problem for place holder area.
I think if 2 nodes with separate height are put into it, some vacant space is created in it between the two nodes but if height is same it works fine.
I am using a panel with vertical alignment and want to pile/stack up the nodes in the place-holder.
////////////////////////////////////////////// **definition of containing group** /////////////////////
// define the group template
myDiagram.groupTemplateMap.add("CommandSectionGroup",
GO(go.Group, "Auto",
// new go.Binding("location", "location", function (location) {
// return new go.Point(location.x, location.y)
//}).makeTwoWay(),
{ // define the group's internal layout
mouseDrop: fnGroupDrop,
mouseEnter: function (e, node) {
groupMouseIn(node, node);
},
mouseLeave: function (e, node) {
groupMouseOut(node);
//shiftNodePosition();
},
ungroupable: false,
layout: GO(go.GridLayout,
{ wrappingColumn: 1, spacing: 1, alignment: go.GridLayout.Position }),
// the group begins unexpanded;
// upon expansion, a Diagram Listener will generate contents for the group
isSubGraphExpanded: true,
// when a group is expanded, if it contains no parts, generate a subGraph inside of it
subGraphExpandedChanged: function (group) {
if (group.memberParts.count === 0) {
//randomGroup(group.data.key);
}
}
},
new go.Binding("visible", "isHidden", function (isHidden) {
return !isHidden
}),
GO(go.Shape, "Rectangle",
{
stroke: "#fff",
strokeWidth: 1,
fill: "#fff",
cursor: "pointer",
stretch: go.GraphObject.Fill,
portId: "",
// fromLinkable: true,
// toLinkable: true
}
),
GO(go.Panel, "Vertical",
{ defaultAlignment: go.Spot.Center, margin: 0, stretch: go.GraphObject.Fill },
GO(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.Top, width: OrgChartConfig.GroupWidth },
// new go.Binding("location", "loc").makeTwoWay(), // TwoWay Binding
//new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
//GO("SubGraphExpanderButton"),
GO(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.Top, width: 16, margin: 3 },
GO(go.TextBlock,
{ font: "Bold 18px Sans-Serif", margin: 1, stroke: "#000", alignment: go.Spot.Center, isMultiline: false, },
new go.Binding("text", "level", function (level) {
return fnGetCommandSectionIconTextFromLevelId(level);
})
),
new go.Binding("background", "CommandSectionType", function (CommandSectionType) {
return commandSectionColorMap[CommandSectionType].bodyColor.toString();
})
),
//
GO(go.Panel, "Horizontal",
{
defaultAlignment: go.Spot.Center,
width: 155,
},
// GO(go.Panel, "Horizontal",
// {
// defaultAlignment: go.Spot.MiddleTop,
// width: 20,
// },
// GO("SubGraphExpanderButton")
//),
GO(go.TextBlock,
{
font: "normal 18px Sans-Serif",
margin: 4,
stroke: "#000",
isMultiline: false,
width: 150,
editable: true,
textAlign: "center",
textValidation: checkMaxLength,
},
new go.Binding("text", "Title").makeTwoWay(),
new go.Binding("stroke", "forecolor")
)
),
GO(go.Panel, "Horizontal",
{
name: "groupAddChildButton",
defaultAlignment: go.Spot.Top, width: 20,
visible: false
},
GO(go.Picture, {
margin: 4,
width: 10,
height: 10,
source: "../../images/OrgChartGojs/arrow.png",
cursor: "pointer",
click: showAddChildPanel
})
),
// binding color based on CommandSection type
new go.Binding("background", "color")// function (CommandSectionType) {
// Is better to use switch here only if there are approx 1000 or more cases
// http: //jsperf.com/switch-from-switches/2
// http: //stackoverflow.com/questions/13383798/using-object-literal-rather-than-switch-statement
//return commandSectionColorMap[CommandSectionType].headerColor.toString();
//})
),
GO(go.Panel, "Vertical",
{
name: "commandSectionPanel",
defaultAlignment: go.Spot.Top,
margin: 2,
//height: OrgChartConfig.GroupHeight,
//width: OrgChartConfig.GroupWidth,
minSize: new go.Size(OrgChartConfig.GroupWidth, OrgChartConfig.GroupHeight),
background: OrgChartConfig.NodeBodyColor
},
// create a placeholder to represent the area where the contents of the group are
GO(go.Placeholder,
{
name: "commandSectionPlaceHolder",
margin: 1,
background: "transparent",
alignment: go.Spot.TopLeft,
minSize: new go.Size(OrgChartConfig.GroupWidth, OrgChartConfig.GroupHeight)
}
)
)
), // end Vertical Panel
GO("TreeExpanderButton", {
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Bottom
}, { visible: false }
)
) // End Group
);// End GroupTemplateMap<div style="line-height: 16.7999992370605px;">
//////////////////////////////////////////////
Please help me with this.. the contained node are in different height
Thanks in advance