Nodes and Events for dragging a node from panel to diagram

Using the flowchart diagram as a starting point…

…I am wondering if I can format a node to have one shape when it is in the side panel, and then a different shape once it “enters” the main diagram. And I mean right away, not once “ExternalObjectsDropped” happens. As far as I can tell, there is not an event handler for this event.

Probably I am missing one or more aspects of the api functionality, because in the flowchart example, the cursor style (I can’t tell where it is being set?) is one way (a “cancel” sign)…

…and then upon “entering” the main panel, the cursor becomes a pointer with a plus sign, and this behavior appears to be unique to this gojs example.

Take a look at the example in GoJS Palette -- Northwoods Software. The same model data object can appear completely differently by the use of different templates in different diagrams.

Note how in that example there are three different node templates, one for each diagram. That results in the behavior that you see while dragging between diagrams.

I don’t understand how this explains the differences in cursor appearance:
is the difference due to some built-in properties related to “different templates in different diagrams”?

I am trying to examine the examples you pointed to, and the simple palette examples look straightforward enough, but that is not quite the same approach nodes templates are built in the flowchart example.

I’m sorry, but when reading your post I thought you were asking about the appearance of the node, not about the cursor. The templates define the nodes; so that’s one explanation. Are you now only asking about the cursor? What behavior do you want?

The “not-allowed” cursor while dragging in the Palette and the “copy” cursor while dragging in the target Diagram is the standard behavior, as you can see in multiple samples in multiple browsers. And you can see the behavior in Two Diagrams that the the “not-allowed” cursor only appears when the Diagram does not allowCopy or allowMove within the Diagram.

In general you can control the cursor by setting Diagram.currentCursor in some Tool method. I don’t know exactly what behavior that you want, so I can’t say exactly how you want to override methods in order to change the cursors that the user sees when using certain tools.

Sorry, I asked about both.

RE: cursors
I have forked the angularjs example from the samples and replaced the diagram with the flowchart.html example.
For whatever reason, I am actually not seeing the default cursor behavior when I select an item in the panel and drag the node into the diagram.

RE: node appearance
So the palette example you pointed to is useful, but I am running into issues of not being clear about what’s going on. The template setup in the flowchart.html example is different than the much simpler setup seen in the palette.html example.

Perhaps there is some styling forcing the cursor to be something?

I believe the initialization of the palette in the FlowChart sample is fundamentally the same as for any other Diagram. Collect the node data (and maybe link data), create and initialize a Model, and then assign Diagram.model.