Hi all,
I have the (default?) behavior in GoJS that allows the user to drag the diagram (move the viewport) by clicking the mouse’s left-button. It works well, but when this action is done over a group, the drag seems disabled. Is there any possibility to keep the precedence of the dragging function? I’m not implementing anything in the group node (or note) itself except when clicking, so click+drag should still be possible in my case.
Thanks in advance.
Are you saying that the Group is being dragged when the user is trying to pan the diagram when the mouse-down happens on the Group? What permissions does the group have?
If this is the situation, the problem is because the DraggingTool comes before the PanningTool in the ToolManager.mouseMoveTools list, therefore taking precedence. But I need to understand the situation and what you want better before I can recommend a solution.
Thank you.
No, the group is not moved: we don’t support that for now. We just want to allow the user to also move the viewport around by “dragging” from inside a group.
The GIF that I’m attaching doesn’t show my mouse pointer, but shows that outside any group, the user moves the viewport. Inside a group, the diagram (viewport) cannot be moved in any way…
What properties have you set on the Group, and to which values?
$(go.Group, 'Auto',
{
minSize: new go.Size(250, 40),
stretch: go.GraphObject.Horizontal,
layout: $(go.TreeLayout, {
angle: 90,
arrangement: go.TreeLayout.ArrangementHorizontal,
nodeSpacing: 10,
layerSpacing: 30,
}),
movable: false,
cursor: 'pointer',
click: modeParams.onClickNode, // tried w/o events, no difference
mouseEnter: ...,
mouseLeave: ...
},
I hope this helps :(
OK, I’ll assume those click, mouseEnter, and mouseLeave events don’t matter, since I don’t have their definitions anyway.
By the way, setting stretch probably doesn’t make any difference. Unless you are using a layout that cares about that.
Did you need the Group to be selectable? If not, just set that to false in your group template.
Did you want users to be able to click on the Group (not on a member Node or Link) and select the Group? Or to drop Parts into the Group? If not, you could set pickable to false on the Group. Or set pickable to false on the Shape surrounding the Placeholder. Users would still be able to interact with the member Parts (unless you set pickable to false on them too). Note that pickable only controls mouse events for that object (and for Panels their contained objects). It would not change the selectability of the Group.
If you want to do what you said originally in this forum topic, you could place the PanningTool in front of the DraggingTool in the ToolManager.mouseMoveTools list, so that the panning tool would take precedence over the dragging tool:
myDiagram.toolManager.mouseMoveTools.insertAt(1, myDiagram.toolManager.panningTool);
Now the user can start panning at any point in the diagram. I don’t know if that is what you want, though, since that effectively totally disables dragging.
Perhaps instead you want to customize the DraggngTool.canStart method so that it doesn’t start running if what it’s over is a Group. (Or choose any other predicate, as appropriate to your app.)
$(go.Diagram, . . .,
{
"draggingTool.findDraggablePart": function() {
const diagram = this.diagram;
const part = diagram.findPartAt(diagram.firstInput.documentPoint, false);
if (part === null) return null;
if (part instanceof go.Group) return null;
if (part.canMove() || part.canCopy()) return part;
return null;
},
. . .
Here I’m overriding the method by just setting it on the diagram’s instance of the DraggingTool, but you could define a separate subclass and override the method if you prefer.
Thank you Walter, adding selectable to the node and group properties gives us the expected behavior.