Drag from palette to diagram is not showing the shape

[tejeshguggilla]

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.

I have tried setting allowDragOut: true on palette and allowDrop: true on diagram, but no luck. I have also tried setting handlesDragDropForTopLevelParts: true to diagram, still the same issue.

My palette node template is set to as that of diagram :
nodeTemplateMap: diagram.nodeTemplateMap

Attaching screenshot for reference:

Can someone help me with this please.

[walter]

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.

[tejeshguggilla]

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.

[walter]

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.

Check these properties in particular: User Permissions | GoJS

[tejeshguggilla]

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,

Am I still missing anything?

[walter]

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?

[tejeshguggilla]

This is the version I am using “gojs”: “2.3.5”

I have tried debugging for the same and I found that all the property values are in place (Screenshots attached)

I have tried with different browsers (chrome, firefox, edge), same issue across all the browsers. Issue exists on windows as well along with mac.

[walter]

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?

Also, what happens if you update to v2.3.17?

What JavaScript framework(s) are you using?

[tejeshguggilla]

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?

[walter]

17 > 5, so 2.3.17 is later than 2.3.5.

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.

[tejeshguggilla]

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.

@tejeshguggilla

My palette node template is set to as that of diagram :
nodeTemplateMap: diagram.nodeTemplateMap

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]

@tejeshguggilla

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?

[walter]

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

[tejeshguggilla]

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.

[walter]

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

[tejeshguggilla]

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.

Attached screenshots below for reference,

[walter]

But when on your machine you try those Palette samples that I referenced above, does drag-and-drop work as you’d expect?

If so, I don’t know what’s going on. I suppose you could try using go-debug.js or go-debug.mjs and look for any warnings or errors in the console.

[tejeshguggilla]

Those palette samples are working fine Walter. I can drag-and-drop as expected. I will try with go-debug.js once then.

[tejeshguggilla]

Hi Walter,

We’re still facing issues with the ghost node in our development diagrams. One difference I’ve noticed is that we’re loading our canvas diagram within a shadow root. This is how we are applying to the shadow root,

const vnode = host.shadowRoot.querySelector('.gojs');

// Create the diagram
	const diagram = /** @type {NowDiagram.DiagramExtended} */ (new Diagram(vnode, {
		contentAlignment: Spot.Center,
		'animationManager.isEnabled': Boolean(options.animationEnabled),
		click: (event) => {
			options.onClick(event);
		},
		mouseDragOver: (event) => {
			options.onDrag(event);
		},
		...options.diagramOptions,
	}));

Could this be causing the ghost node problem? I’ve attached a screenshot below for reference.

Another difference I’ve noticed is that the cursor: auto; style on the diagram canvas tag isn’t switching to cursor: copy when a node is moved from the Palette to the target diagram, as it does in the sample palette examples.

[walter]

I’m not sure about this, but the GoJS code is aware of shadow trees and hosts and possible coordinate system changes, so I don’t understand why you are hosting the Diagram explicitly in a shadow tree. Shouldn’t the component defining that shadow tree be responsible for setting up the Diagram?

[tejeshguggilla]

We are using a React-like framework that relies on lifecycle events to manage the DOM’s state. Specifically, we initiate the diagram in the COMPONENT_DOM_READY lifecycle stage. At this point, the DOM isn’t fully loaded but is accessible as a draft DOM.

When using shadowRoot, we’re able to load the canvas diagram fine with the following code:

const element = host.shadowRoot.querySelector('.gojs');

However, if we pass actual div element instead of shadowdom element, the the diagram doesn’t load

const test = document.getElementsByClassName('gojs');

or

const newElement = document.createElement('div');newElement.className = 'gojs';document.body.appendChild(newElement);

Our approach relies on creating and referencing the .gojs element for rendering the diagram instance:

const diagram = new go.Diagram(vnode, {  ...options.diagramOptions,}); 

This setup applies to our main diagram (not the palette). Due to these constraints, we’re utilizing shadowRoot to ensure we avoid errors in locating the .gojs element.

We suspect that the reliance on shadowRoot might be linked to the “ghost node” issue we’re experiencing, where a node dragged from the palette temporarily disappears during the drag process before reappearing correctly on drop. Given GoJS’s awareness of shadow trees, hosts, and coordinate system adjustments, could you offer guidance on how GoJS manages shadowRoot-related elements?

This “ghost node” issue has been persistent, and any insights into its root cause and possible solutions would be invaluable. We’d greatly appreciate any guidance you can provide to help us resolve this.