While drag and drop, how to set position of node to specific viewport?

GoJS
#1

When user drag and drop triangle node any where on circular group node from pallet, I want to position that triangle node to the top left of that circular group node, in bellow example you can see triangle node is placed on top left/ on that particular spot of the circular node.

image
image758×466 31.2 KB

This image is created for example only.

another example to understand

image
image922×680 117 KB

Currently we have feature where user drops triangle node on circular group node and on dropping location that new triangle node gets added.

Please let me know the way to achive this, thanks in advance.

#2

So, you do not want the user to position the node manually – you want the layout to do so automatically? It sounds like you want to customize the layout to treat such dropped nodes specially. Is that correct? Do you know how to identify such nodes?

#3

Yes, I don’t want to allow users to position node manually.
That triangle is a group node and only one triangle per circular group is allowed to drop, so when user drop triangle node from pallet, on drop I have handling method which also identify such node and with current implementation it creates new node at dropped position. So instead of creating node at dropped location I want to create that node on top left of circular group node.

#4

Maybe one way is to have the layout ignore that triangle node if your code is positioning it where you want. Is your code in an “ExternalObjectsDropped” listener? Have it set Part.isLayoutPositioned to false on that triangle node.

#5

No, it is not “ExternalObjectsDropped” listener. On drag and drop we add node into diagram using either “addNodeData()” OR by setting dropped node data using “diagram.model.setDataProperty()”.

It is not working with this change,

#6

So, how are you setting Part.isLayoutPositioned?

#7

Not setting Part.isLayoutPositioned.

In drop event of circular group node I get dropped node using

var draggedNode = myDiagram.selection.first();

then I add node using addNodeData() and in this method currently I pass dropping location,

var nodeDropLocation = draggedNode.data.loc;
diagram.model.addNodeData({ key: "T1", text: "Triangle Text", category: "TriangleGroup", group: CircularGroupKey, isGroup: true, height: 45, width: 57, loc: nodeDropLocation });
#8

Unless your node template has a Binding on Part.isLayoutPositioned, then that new node will be laid out automatically. Since it appears that the new node will be a member of a group, it will be the Group.layout that performs that layout.

But if you set { isLayoutPositioned: false } on your “TriangleGroup” node template,
then those nodes will not be laid out by the layout but will retain whatever location/position that you have assigned via a binding.