Grouping with Freehand drawing

GoJS
1

I am creating a group with archetypeGroupData.
sample:
myDiagram.commandHandler.archetypeGroupData={category: “group”,LocalId:pLocalId,key:pLocalId, Text:“Group”, isGroup: true, BackColor:"#242e38",LineColor:"#7e8b8c"…

Once the group is created, now drop a free hand drawing tool on the group and validate it and add the freehand drawing to the group by finish drop event
sample:
if(grp != null && grp != undefined)
{
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
}

My group template looks like this.

groupTemplate = GOJS(go.Group, go.Panel.Spot,
{
computesBoundsIncludingLocation:true,
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,
},
new go.Binding(“location”, “loc”),
GOJS(go.Panel, go.Panel.Auto,
{ stretch: go.GraphObject.Horizontal, background: “#000c19” },
GOJS(go.Shape, “RoundedRectangle”,// surrounds the Placeholder
{strokeWidth: 2},
new go.Binding(“fill”, “BackColor”),new go.Binding(“stroke”, “LineColor”),new go.Binding(“key”, “LocalId”).makeTwoWay()),
GOJS(go.Panel, “Vertical”,
{ defaultAlignment: go.Spot.Left, margin: 4 },
GOJS(go.Panel, “Horizontal”,
{ defaultAlignment: go.Spot.Top },
// the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
GOJS(go.TextBlock, // group title
{ alignment: go.Spot.TopLeft, font: “400 24px Noto Sans CJK JP” , stroke: “#ebeff0”},
new go.Binding(“text”, “Text”))
),
// create a placeholder to represent the area where the contents of the group are
GOJS(go.Placeholder,
{ padding: new go.Margin(0, 4),background: “white” })
) // end Vertical Panel
));

Making groups and adding childs sample code:

$.each(BO.BusinessOrigami.Groups, function (i, group)
{
myDiagram.startTransaction(“make new group”);
GetLocalIdForObject(group);
myDiagram.model.addNodeData({Text:group.Text, key:group.LocalId, isGroup: true, group:group.ParentGroup, loc:new go.Point(group.GroupSymbols[i].LocationX,group.GroupSymbols[i].LocationY), BackColor:group.BackColor,LineColor:group.LineColor,Type:group.Type,category: “group”,Item:group});
myDiagram.commitTransaction(“make new group”);
});

myDiagram.startTransaction(“addchilds”);
if(group.LocalGroupSymbols != undefined && group.LocalGroupSymbols != null)
{
$.each(group.LocalGroupSymbols,function(j,xy)
{
//update group id for each child
if(myDiagram.findNodeForKey(xy) != null)
{
myDiagram.findNodeForKey(xy).data.group = group.LocalId;
var v = group.findSubGraphParts;
}
});
}
if(group.ParentGroup != undefined && group.ParentGroup != “”)
{
var grpObj = myDiagram.findNodeForKey(group.LocalId);
if(grpObj != undefined)
{
grpObj.data.group = grpObj.data.Item.ParentGroup;
}
}
myDiagram.commitTransaction(“addchilds”);
});

After saving the freehand drawing is coming out of the group !!

What am i missing here??

2

There are several issues with your code. But it’s hard to tell when the code is not indented. Paste your code inside triple-backquotes in the forum’s editor.

The major one might be that you are simply modifying the data.group property without calling GraphLinksModel.setGroupKeyForNodeData or Model.setDataProperty (which in this case would call setGroupKeyForNodeData for you).

Another thing I notice is that you are binding the Shape.key property – yet there is no such property defined, and making it a TwoWay binding seems pointless. I highly recommend using the go-debug.js library and watching the console log output for warnings and errors.

3

Walter,
My apologies for not indented code and delay in response.

Your suggestion to set data property worked like charm.

Thanks.