Hi. I have a new palette component to my diagram. When I start dragging the shape from palette the cursor holds the shape fine. But as soon as the cursor leave the palette and enters the diagram canvas, the shape is gone from the cursor. The shape is no where visible on the diagram. When I bring back the cursor again to the palette, the shape reappears on the cursor.
Due to this I am not able to track the shape on the diagram and drop it accordingly. I have tried to search for this behaviour in flowgrammer and flowchart but could not find any related code.
Are you saying that when dragging a node from the Palette to the main Diagram in the FlowChart sample Flowchart | GoJS that you do not see the proposed new Node being dragged over the Diagram before the drop? That is very surprising. Do you encounted the same (non-)behavior in other browsers on the same machine or on other devices?
Or perhaps you really are talking about when the mouse/finger/stylus pointer is not within a Palette or Diagram, but outside them. When the pointer is not within a Diagram, GoJS intentionally does not drag any HTML element. Your app can implement its own drag-and-drop behavior when not dragging/dropping to another Diagram.
Are you saying that when dragging a node from the Palette to the main Diagram in the FlowChart sample Flowchart | GoJS that you do not see the proposed new Node being dragged over the Diagram before the drop?
– Yes Walter thats right. I am not able to see the node on the diagram that is being dragged over. I have tried with different browser as well. Behaviour is still the same.
Note: The nodes that you are seeing on the diagram in the screenshot are added using click to add functionality as a workaround as drag and drop is not working for me.
That’s very odd. Could you compare your target Diagram properties with those in the samples with a Palette or this example: Palette | GoJS ? Something must be preventing the drag-and-drop from proceeding.
I have set all these options for both diagram and palette Walter. Still the issue persists.
For diagram I have added these props:
handlesDragDropForTopLevelParts: true,
allowDragOut: false,
allowDrop: true,
allowInsert: true,
isReadOnly: false,
‘model.isReadOnly’: false,
For palette I have added these props:
allowDragOut: true,
‘draggingTool.isEnabled’: true,
Not that I can think of. Most of those properties default that way, so you don’t even need to set them. I assume you have checked that there is no other code inadvertantly disabling the functionality. You can check those property values in the debugger, just to be sure.
Precisely which version of GoJS are you using? Evaluate go.version
Do you have the same problem in different browsers or on different operating systems?
If the user completes the drop in the diagram, is something added as one would expect? Or does nothing happen?
If you use go-debug.js instead of go.js do you see any warnings or errors in the console? Or are you using ES modules: go-debug-module.js instead of go-module.js?
When I drop a node into the diagram, it adds the text instead of the shape as shown below.
I have added ExternalObjectsDropped event and I am able to get all the node information in the event fine. Still it drops the text instead of the actual node.
I do not see any warnings or errors. tried with all possible ways.
As I am already on higher version (v2.3.5) not sure if I need to downgrade to v2.3.17?
It looks like it’s not finding the right template. Is there a “category” property on the node data in the palette’s model? If so, is there a node template with that name in the target diagram’s Diagram.nodeTemplateMap, and is it the template that you want it to use?
Note how each diagram (including Palettes) can have different templates: Palette | GoJS
The default template just consists of a TextBlock, so if it can’t find a template for the given “category” value, it uses the default template. It appears you haven’t replaced the default template (i.e. with the name “”, the empty string), which is why you are just seeing some text for the node.
I do have category in the palette model. Below is my sample graphLinksModel,
{ name: “Circle”,
actionId: “123”,
category: “456” }
NodeTemplate is already available in the target diagram. Infact as mentioned in my first message in this post, I am using diagram’s (target) nodeTemplateMap as nodeTemplateMap of palette.
Does this have any impact on why the node is not showing up on the target diagram on the cursor while dragging ? [which is my main concern as below]
Do you have diagram initialization code of the form:
myDiagram.nodeTemplateMap.add("456",
new go.Node(...)...);
If you want the data.category property to just be a regular data property for your app’s information, and not have it specify the template to use (Template Maps | GoJS), set Model.nodeCategoryProperty to the property name you want to use to specify the template name to use for that node data object.
If you don’t want to use multiple templates at all, set nodeCategoryProperty to the empty string. Model | GoJS API
Thanks for the response Walter. I have set the target diagram’s Model.nodeCategoryProperty to “templateId”. Now I have used this same templateId in the paletteModel as well. Below is my palette’s updated GraphLinksModel :
{ name: “Circle”,
actionId: “123”,
category: “456”,
templateId: “456” }
This works fine and now I am able to drag and drop the node from Palette to the target diagram.
But still my original concern, which is, as soon as I start dragging, the node/shape from palette is not travelling along with my cursor until I drop the node. As soon as I drop the node in the canvas, I am able to see the node fine on the canvas.
Are you saying that your drag-and-drop behavior is different from what the user sees when they drag-and-drop from a Palette to a regular Diagram, such as in: Palette | GoJS Flowchart | GoJS
Yes Walter. Thats right. I am not able to see the node/shape on the cursor while I am dragging. I can see the node fine inside the palette while dragging. As soon as my cursor moves from Palette to Main Diagram, the node is going hidden from the cursor. And as soon as I drop the node (release the mouse click), the node drops on to the main diagram fine.
