I have a tree view inside of a palette, and it is working marvelously! One thing I would like to change, however.
tl;dr: How can I have a custom node template used just for dragging from the palette to the main canvas area?
So I have a custom node template for the palette entries. It’s just a tree view, but each item has a little icon next to it and then the text obviously. I also have a custom node template for the eventual node that gets dropped on the main canvas. In other words, the text, when dragged over from the tree, turns into a pretty box :)
However, the node template used when dragging just shows the text (no icon even). A lot of times, people just assign the same node template to both the diagram and the palette. But in the case of a tree view, that isn’t really practical.
What I want to be able to do is have a node template used just for dragging (and that one can/should be the same as the one that is eventually placed on the diagram.
Not sure if this makes sense, but I would certainly welcome any guidance!
I haven’t tried this, but you could customize the Palette’s Model.copyNodeDataFunction to change the data category from “TreeNode” (or whatever you are calling it) to be the category that you want it to be in the destination Diagram (which might be the default category, an empty string).
Of course you would have both “TreeNode” and “” (default) templates defined in the Palette.
Basically I’m assuming that your nodes in the Palette have their own special template, named “TreeNode” or whatever, plus whatever node template(s) you have in the destination Diagram.
Copying the node data in the palette’s model should just change them to be just like the data in the destination model, which might just mean removing the “category” property from the copied data.
If you don’t want to implement your own Model.copyNodeDataFunction, it might be easiest to override Model.copyNodeData method:
myPalette.model.copyNodeData = function(nodedata) {
var copy = go.GraphLinksModel.prototype.copyNodeData.call(this, nodedata);
if (copy) delete copy['category'];
return copy;
}
Hmm, didn’t work. I threw in a console.log('here') at the top of the function and it doesn’t show up when I drag/drop a node from the palette to the diagram.
Now, of course, the question is “when” to call it. As far as I can tell, there is no event that I can listen for when something is dragged from outside to a diagram.
Yes, DraggingTool will make a copy of the selection, resulting in calls to Model.copyNodeData. Those copied nodes are what the user sees while dragging within the Palette, even though drops are not permitted there (assuming the default permissions for Palette).
The data gets copied again by the destination Diagram’s Model once the drag-and-drop enters that diagram, for the temporary nodes that you see, just as in the Palette itself.
And the data gets copied for real if a drop happens.
I just tried it, and it worked. Although in my situation I simply changed the copy.category rather than deleting it.
One potential complication is that Model.copyNodeData is called in the target diagram using that diagram’s model, not the palette’s model. So by default the target diagram will get a copy of the node data from the palette’s model. That might be OK in your situation – I don’t know. You can figure that out.
Thanks so much. I will refactor it a bit and start layering my stuff in and around yours to see if I can figure it out. Will follow up here for future reference by others once I figure it out lol.