Please find the attached clip to know the issue. Also at the end the group template is shown.
https://1drv.ms/v/s!AoQLkDN195srsBz9xUlHxlei7y0K
At the start moving on node to right and bottom is possible. When moved out of the group is also possible.
But when user tries to move Left OR Top , the group node also gets moved - Moving left and top should be possible without moving the group node.
What needs to be fixed in template ?
At the beginning of the video, is that Node actually a member of the Group? If so, I can’t explain why the Group isn’t automatically getting bigger as you drag the member node towards the right or downwards.
You’ve set Group.computesBoundsAfterDrag to false.
If you want to keep the node in the group when you are dragging it towards the top or towards the left, because you are using a Placeholder the Group has to stay surrounding all of its member nodes. So the Group has to extend up or left if you are dragging the node there.
Afterwards the layout moves the group back where it belongs, which would include moving all of its member nodes along.
[Update : I guess it has to do with PlaceHolder. My outermost container is also group and uses placeholder. Working on same ]
Hi Walter,
Removing PlaceHolder, resolved issue of moving node top/left . :)
With same template, I have another issue as shown in following video.
As shown, when node which do not have any link Or link with node which is in same group, moving node in all direction is possible. Even moving node out of main container is possible (which shows invalid drop cursor as expected).
But when I move node either Test1 OR Test2, which are part of two different groups but have link in between them, then when node moved outside the main container, (towards right or bottom) line from main container starts occuring (this is due to the relation link some part go out of main container between these two node ) OR when move upward or left, main node starts shifting. ( Issue is shown in video clip starting location at 00.00.38 )
How this can be prevented ?
Yes. It was due to PlaceHolder. I removed the place holder and movement of node works as expected.
Removing the place holder, now when header “Test Process 2”, the node selection shown in at the corner (highlighted in red box). I need to highlight complete outermost line.
My topmost group template is -
BPMNMileStoneDiagramManager.prototype.getPoolTemplate = function() {
var current = this;
var poolTemplate = current.goObj(go.Group, “Auto”,
{
layout: current.goObj(TableLayout, current.goObj(go.RowColumnDefinition, { row: 1, height: 25 }),
current.goObj(go.RowColumnDefinition, { column: 1, width: 50 })
),
resizable: false, selectionObjectName: “SHAPE”,
layerName: “swimLaneLayer”,
selectable: true //,
//mouseDrop: function (e, object) { current.createLane(e, object, false); }
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify),
current.goObj(go.Shape,
{ name: “SHAPE”, fill: “red”, strokeWidth: 3 }
),
current.goObj(go.Panel, “Table”,
{ defaultColumnSeparatorStroke: “red” }
)
); // end poolGroupTemplate
return poolTemplate;
}
Previously, the last Panel (“Table”) contains placeholder. With it, it shows proper border and gets hightlighted also.
This I removed for the moving issue
If you were to properly indent your code you would see that the Group is an Auto Panel that uses a red-filled Shape surrounding a Table Panel. But the Table Panel has nothing in it, so that Panel is zero sized and thus the Shape has no area inside it. The total size of the Shape should be 3x3 due to the strokeWidth being 3.
Note that there is nothing in row 1 column 1 of the Table Panel, otherwise that would be at 50x25 and thus the Group would be 53x28.
What I did is taken the example of
In this example, the layout - TableLayout is applied to diagram and all the nodes with row & col are part of model.
With this diagram there can be only one main object is possible.
Since, my diagram needs to support multiple main object, I used that for Group node and in model all the nodes can have group set from one of the parent objects ( As shown in fig . Step 1, Step 2 represent columns and default represent the row and there values are set. ( so i guess the values for same are coming from model and based on TableLayout calculation row, columns get there height & width.
Update : What i did now is removed the last panel and provided some default size to shape. So shape get displayed.
I think , what i need now is when child nodes of group rendered by layout (TableLayout) , it should calculate the height/width required by the tablelayout and that one should be used by the shape.
That’s exactly what the Placeholder will do for you.
What is your Diagram.layout?
My diagram do not have any layout specified. it uses the default one.
As mentioned about , from sample available on gojs site, i need to provide it for mutliple Pools in my diagram.
Using PlaceHolder, when there are links between nodes which are part of multiple group(point 3 below) then the issue occurs like shown in video.
My Structure is
1. Pool (Group node) - the one specified above uses TableLayout.
2 For hightlighting row and columns uses the templates as shown in your example (site example)
3. Also there is another group node which contains row & cols and member of Pool node.
4. Each activity is member of second group (above 3)
Do those “Task” nodes belong to any group?
You’ll note that the Table.html sample sets Group.computesBoundsAfterDrag to true. Do you need to do the same on your “Pool” Groups?
Thanks. Working now. Applied computesBoundsAfterDrag to PoolTemplate.
But why the issues is not occuring with node without link or node with links which are in same group.
And problem was occuring only for node with link in different groups.
