Hello,
I need to drag a textblocl from a node into the diagram empty space.
as a result I want to create a new node that is connected to the first one,
Is this possible?
Yes, of course this is possible. In fact there are so many ways to do what you want, I think you should provide two sketches showing before-and-after. This would allow us to give better advice.
I have a comonnet named Root with two fields (field1 and field2) both of them are textboxes
When I drag field2 into an empty place on the diagram
I will create anoteher node which is called filed2
both nodes should be connected.
First, you need to look at all of the samples to see what’s most similar to what you want, as a beginning. I assume you have looked at all of the samples shown at GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software and had at least seen Entity Relationship and UML Class Nodes and Record Mapper.
If you look more carefully, you would find a sample that I think exhibits the principal additional non-standard feature that you are looking for – dragging individual fields: Dragging Fields Between Records.
However, one difference is that that sample assumes each field acted as its own port. Your sketch seems to assume that there is only one port per node, which is the whole node. That’s the default behavior for GoJS, GoJS Ports in Nodes-- Northwoods Software, so we need to remove the GraphLinksModel.linkFromPortIdProperty and the GraphLinksModel.linkToPortIdProperty from the model and the Binding of GraphObject.portId from the item template used to define the visuals for each field.
But the main difference between the Drag Drop Fields sample and what you want is that when the user drops the field onto the diagram background, it creates a new node and link rather than just deleting the field from the original node. That behavior is determined in the FieldDraggingTool’s Tool.doMouseUp method override. In particular, this is what it should do:
} else { // no destination node
//create a new empty node and a link from the original node to the new one
var newdata = {
title: data.name,
fields: [],
loc: go.Point.stringify(diagram.lastInput.documentPoint)
};
diagram.model.addNodeData(newdata);
diagram.model.addLinkData({ from: src.data.key, to: newdata.key });
// if Shift modifier, delete the field from the original node's list
if (diagram.lastInput.shift) {
var sidx = src.data.fields.indexOf(data);
if (sidx >= 0) {
diagram.model.removeArrayItem(src.data.fields, sidx);
}
}
}
You can see the modified app at: Dragging Fields Into Background Creating New Node
Thanks @walter the example is execactly what I need ,
I will look at that code and implement it that way.