HTML-Drag and Drop: How to manipulate created Object

GoJS
1

So I recreated the HTML Drag and Drop - Example (http://gojs.net/latest/samples/htmlDragDrop.html) and managed to get it to work: After the HTML-div is dropped over the canvas a new Node and a corresponding GraphObject get created by calling diagram.model.addNodeData({…}).

But what I want to do now is the following:

a) After the GraphObject is created, I want it to immediately select the text inside and make it editable.
b) I want the new graphObject to fade-in instead of just popping-up.

I think what I need is to get a hold on the GraphObject that gets created by addNodeDate, but I don’t know how…

Best regards,
Markus

2 
// this DiagramEvent is raised when the user has drag-and-dropped something
// from another Diagram (a Palette in this case) into this Diagram
myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
  // stop any ongoing text editing
  if (myDiagram.currentTool instanceof go.TextEditingTool) {
    myDiagram.currentTool.acceptText(go.TextEditingTool.LostFocus);
  }
  // start editing the first node that was dropped
  var tb = myDiagram.selection.first().findObject('TEXT');
  if (tb) myDiagram.commandHandler.editTextBlock(tb);
});

Note that this code is assuming that the particular TextBlock that you want the user to edit is named “TEXT”.

You will need to program the “fade-in” yourself, by varying the new node’s GraphObject.opacity from 0 to 1.

3

Hi walter,

unfortunately this event-listener only seems to work in the HTML Interaction - Demo (http://gojs.net/latest/samples/htmlInteraction.html), where you drag an element from one canvas to another, but it doesn’t seem to fire in the Drag and Drop Example where the Node/graphObject gets created from the drop coordinates of the HTML-Element.

Or am I missing something?

4

Yes, you are right about that. Sorry.

Still, if you are implementing your own “drop” handler, you can schedule starting the text editor on the TextBlock in the new Node. Call Diagram.findNodeForData or Diagram.findNodeForKey to find the Node, and then Panel.findObject to find the particular TextBlock that you want the user to start editing.