Hi,
While creating groups if there are more than 2 nodes in groups, then addition self links are getting generated.And while changing orientation, we are changing groups warping column as well at that time also additional links are getting generated,
Can you please suggest were are we going wrong
Below I have pasted the groupTemplate, linkTemplate, changing orientation function:
I have tried many approaches but links are getting created any how.
have also attached grouped and un-grouped images
//Node Template
dia.nodeTemplateMap.add('DataNode', $Go(go.Node, 'Position', {`
name: "BODY",
width: 150,
height: 32,
selectionAdorned: false,
toolTip:
$Go(go.Adornment, 'Auto',
$Go(go.Shape, 'RoundedRectangle', {
fill: '#ffffff',
strokeWidth: 0.5,
stroke: '#C7C7C7',
minSize: new go.Size(0, 48)
}),
$Go(go.TextBlock, {
margin: 8,
wrap: go.TextBlock.WrapFit,
font: '12px sans-serif',
stroke: '#333333'
},
new go.Binding('text', 'name'))
)
},
$Go(go.Shape, "RoundedRectangle",{
name: "SHAPE",
fromLinkable: true,
toLinkable: true,
fill: "#F0F0F0",
stroke: '#B4B4B4',
strokeWidth: 1,
maxSize: new go.Size(149, 31),
minSize: new go.Size(149, 31)
},
new go.Binding("fill", "isSelected", function(sel) {
return sel ? '#EDF7FF': '#F0F0F0';
}).ofObject(""),
new go.Binding("stroke", "isSelected", function(sel) {
return sel ? '#7198C9' : '#B4B4B4';
}).ofObject("")
),//End of Main Body
$Go(go.Panel, 'Horizontal',
{ position: new go.Point(6, 0) },
$Go(go.Panel, 'Table',
{
minSize: new go.Size(150, 32),
maxSize: new go.Size(150, 32),
defaultAlignment: go.Spot.Left
},
$Go(go.RowColumnDefinition, { column: 0, width: 118 }),
$Go(go.RowColumnDefinition, { column: 1, width: 22 }),
$Go(go.TextBlock, {
font: '10px Segoe UI,hydux', stroke: '#333333', minSize: new go.Size(123, 11), maxSize: new go.Size(123, 11)
},
{
row: 0, column: 0,
editable: true, isMultiline: false,
stretch: go.GraphObject.Horizontal,
wrap: go.TextBlock.WrapFit,
overflow: go.TextBlock.OverflowEllipsis
}, new go.Binding('text', 'name').makeTwoWay()),
$Go(go.Panel, 'Table',
{
minSize: new go.Size(22, 30),
maxSize: new go.Size(22, 30),
background: '#FFFFFF',
row: 0, column: 1,
defaultAlignment: go.Spot.Center
},
new go.Binding("background", "isSelected", function(sel) {
return sel ? '#CCEBFF' : '#FFFFFF';
}).ofObject(""),
$Go(go.RowColumnDefinition, { row: 0, height: 15 }),
$Go(go.RowColumnDefinition, { row: 1, height: 10 }),
$Go(go.TextBlock, '10',
{ row: 0, editable: false, isMultiline: false },
{ font: '12px Segoe UI,sans-serif', stroke: '#5d5d5d', minSize: new go.Size(22, 13), maxSize: new go.Size(22, 13) }
)
) // end Table Panel
),
) // end Horizontal Panel
)//End of Node
);
//Group Template
// Vertical Group Node
dia.groupTemplateMap.add('verticalGroup', $Go(go.Group, 'Auto',
{
// memberValidation: handleMemberValidation,
mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
// 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,
background: 'transparent',
ungroupable: true,
computesBoundsAfterDrag: true,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes
and Links
// Groups containing Nodes lay out their members vertically
layout:
$Go(go.GridLayout,
{
wrappingColumn: 1, alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4)
})
},
new go.Binding("layout", "vertical", function (isVertical) {
return $Go(go.GridLayout, { wrappingColumn: (isVertical ? 1 : 0) });
}),
new go.Binding('background', 'isHighlighted', function (h) { return h ? 'rgba(255,0,0,0.2)' : 'transparent'; }).ofObject(),
$Go(go.Shape, 'Rectangle',
{ fill: null, stroke: '#4A90E2', strokeWidth: 2 }),
$Go(go.Panel, 'Vertical', // title above Placeholder
$Go(go.Panel, 'Horizontal', // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: '#4A90E2' },
$Go('SubGraphExpanderButton',
{ alignment: go.Spot.Right, margin: 5 }),
$Go(go.TextBlock, 'New Group',
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: 'bold 16px sans-serif',
opacity: 0.75,
stroke: '#FFFFFF'
},
new go.Binding('text', 'text').makeTwoWay())
), // end Horizontal Panel
$Go(go.Placeholder,
{ padding: 5, alignment: go.Spot.TopLeft })
) // end Vertical Panel
) // end Group and call to add to template Map
);
//Link Template
dia.linkTemplate = $Go(go.Link, {
selectable: false, // links cannot be selected by the user
// curve: go.Link.Bezier,
routing: go.Link.AvoidsNodes,
corner: 15, // curve: go.Link.JumpOver,
toEndSegmentLength: 20,
layerName: 'Background' // don't cross in front of any nodes
}, $Go(go.Shape, // this shape only shows when it isHighlighted
{ isPanelMain: true, stroke: null, strokeWidth: 5 },
new go.Binding('stroke', 'isHighlighted', function (h) { return h ? 'red' : null; }).ofObject()
),
$Go(go.Shape,
// mark each Shape to get the link geometry with isPanelMain: true
{ isPanelMain: true, stroke: '#979797', strokeWidth: 1 },
new go.Binding('stroke', 'color')),
$Go(go.Shape, // the arrowhead
{ toArrow: 'Triangle', scale: 0.7, fill: '#979797', stroke: '#979797' })
);
//Flip View
public flipView() {
// @ts-ignore
this._flipToggle = !this._flipToggle;
this.goJsElement.diagram.commandHandler.archetypeGroupData.vertical == ( this._angle == 0);
this._angle = this._angle == 0 ? 90 : 0;
this.goJsElement.diagram.commit(function(diag) {
diag.findTopLevelGroups().each(function(g) {
diag.model.set(g.data, "vertical", !g.data.vertical);
});
}, "toggled layout direction");
this.goJsElement.diagram.startTransaction( "change Layout" );//This adds animation for transmision
this.goJsElement.diagram.layout.angle = this._angle; //value can be 0(left to right)/90(top to bottom)/180(right to left)/270(bottom to top)
this.goJsElement.diagram.commitTransaction("change Layout");
this.goJsElement.diagram.undoManager.clear();
}
var highlightGroup = function (e, grp, show) {
if (!grp) return;
e.handled = true;
if (show) {
// cannot depend on the grp.diagram.selection in the case of external drag-and-drops;
// instead depend on the DraggingTool.draggedParts or .copiedParts
var tool = grp.diagram.toolManager.draggingTool;
var map = tool.draggedParts || tool.copiedParts; // this is a Map
// now we can check to see if the Group will accept membership of the dragged Parts
if (grp.canAddMembers(map.toKeySet())) {
grp.isHighlighted = true;
return;
}
}
grp.isHighlighted = false;
}
//Add/Remove Node to/from group on drag-drop
var finishDrop = function (e, grp) {
var ok = (grp !== null ? grp.addMembers(grp.diagram.selection, true): e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
if (!ok) e.diagram.currentTool.doCancel();
}