Dragging from tree view palette, improve the final node template?

GoJS
#1

My evaluation continues, and I must say, while I am still overwhelmed by the sheer number of options available in GoJS, I am blown away by its capabilities! Not sure if my title on this post makes sense or not, but here is what I am trying to do:

So I have a tree view in a palette, and I can drag/drop from there onto the main diagram with no problems. Got that part figured out! However, when I drag it over, I get a simple rectangular node with some editable text in it. What I would like to do is to override the template of what actually gets plopped down onto the diagram. In other words, I want the tree view for its simplicity in listing simple items by name/folder, but when one of those tree nodes gets dragged onto the diagram, I want to spice it up with its own template (for ports, text, color, etc).

Is this possible? I’ve poked around through the many samples on the site, but didn’t see anything that fit that description or what not. Thanks in advance for any words of wisdom and guidance for this GoJS noob. :)

Cheers.

#2

Well, I’m pretty sure it is possible, after some more research and tinkering, but I’m not quite there yet. Am I on the right track by hooking into this:

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
 }

My thought was to catch the event where the node gets dropped (confirmed as working!), but I’m not really sure how to override the default nodeTemplate. I need it to be dynamic, based on what they’ve dragged over. (e.g. uniquely named ports, color, text in the node, etc.) I will keep tinkering - thoughts welcome, though!

Cheers.

#3

Yaaaaaaas! Success! Not sure if this is the recommended way of achieving this, but this bit seems to work great!

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {

    myDiagram.selection.each(function( part ) 
    {
       if (part instanceof go.Node) 
       {
           myDiagram.model.setCategoryForNodeData(part.data, part.data.parent);
           myDiagram.commitTransaction("changeCategory");
       }
    });
});

For future reference by others, this is from the docs:

To change the representation of a data object, call Model.setCategoryForNodeData or GraphLinksModel.setCategoryForLinkData. (If you set the Part.category of a data bound Part, it will call the Model method for you.) This causes the diagram to discard any existing Part for the data and re-create it using the new template that is associated with the new category value.

#4

So the data.parent property holds category names, yes?

That’s about right – except you should not be calling commitTransaction at all in the listener, and especially not once per Node.

#5

Yes, the parent property holds the parent category name. And thanks for that last tidbit! Will take a peek.

Also, kind of a related question, but once I drag a tree view node over to the diagram and drop it, the cosmetics update accordingly, but … since it isn’t initially linked to anything (I’m guessing), it sort of flies off to the bottom right of the diagram (along with any other unlinked elements). Any way to prevent that behavior and just have the node stay at the location where the user dropped it?

Thanks!

#6

Looks like this is a behavior of LayeredDigraphLayout. I’ll just comment out the layout for now since really I am relying on the user to lay the nodes out accordingly.

#7

Yes, that’s right – in that case it’s the Diagram.layout that is assigning a location to the new node, after the DraggingTool assigns it initially for the newly created node.