mouseDrop event executing from one go.Node but not another go.Node

GoJS
1

Hi! I’m quite confused as to why a mouseDrop event is executing from one Node but not another Node when I drop a Palette Node onto them… and the mouseDrags work on both as expected…

One thing to note, if it matters, is that the Palette and Diagram Node templates (white background) are the same.

image
image1240×502 62.4 KB


This Node executes as expected (white background):

const docletTypeNodes = $(
		go.Node,
		'Auto',
		new go.Binding(
			'copyable',
			'',
			(event: go.ObjectData) => event.state !== GoJsNodeState.Copied
		),
		{
			mouseDrop,
			mouseDragEnter: (ev: go.InputEvent, obj: go.Node) => {
				const node = obj.elt(0) as go.Shape;
				node.stroke = '#ffc74c';
			},
			mouseDragLeave: (ev: go.InputEvent, obj: go.Node) => {
				const node = obj.elt(0) as go.Shape;
				node.stroke = '#1776D2';
			},
			selectionChanged,
		},
		$(
			go.Shape,
			new go.Binding('fill', '', (event: any) => {
				if (event.state === GoJsNodeState.Copied) return '#ccc';

				if (
					event.state === GoJsNodeState.Palette ||
					event.state === GoJsNodeState.Diagram
				)
					return 'white';
			}),
			new go.Binding('stroke', '', (event: any) => {
				if (event.state === GoJsNodeState.Copied) return '#ccc';

				if (
					event.state === GoJsNodeState.Palette ||
					event.state === GoJsNodeState.Diagram
				)
					return '#1776D2';
			}),
			{
				strokeWidth: 1,
				figure: 'RoundedRectangle',
				alignment: go.Spot.Center,
			}
		),
		$(
			go.Panel,
			{
				stretch: go.GraphObject.Horizontal,
				alignment: go.Spot.Center,
			},
			'Horizontal',
			$(
				go.TextBlock,
				{
					margin: new go.Margin(2, 10, 0, 5),
					font: 'bold 10pt Barlow, sans-serif',
				},
				new go.Binding('text', 'title')
			),
			$(
				'Button',
				new go.Binding(
					'visible',
					'',
					(event: any) => event.part.data.state === GoJsNodeState.Diagram
				).ofObject(),
				{
					width: 22,
					height: 22,
					'ButtonBorder.stroke': null,
					_buttonStrokeOver: null,
					'ButtonBorder.fill': null,
					_buttonFillOver: null,
					click: deleteFromTemplate,
				},
				$(go.Picture, {
					desiredSize: new go.Size(17, 17),
					source: '/icons/circle-xmark-regular-black.png',
				})
			)
		)
	);

This one does not execute the callback (orange background):

const dropDocletType = $(
		go.Node,
		'Auto',
		{
			selectionChanged,
			mouseDrop,
			mouseDragEnter: (ev: go.InputEvent, obj: go.Node) => {
				const node = obj.elt(0) as go.Shape;
				node.strokeWidth = 1;
				node.stroke = '#1776D2';
			},
			mouseDragLeave: (ev: go.InputEvent, obj: go.Node) => {
				const node = obj.elt(0) as go.Shape;
				node.strokeWidth = 0;
			},
		},
		$(go.Shape, {
			strokeWidth: 0,
			figure: 'Ellipse',
			fill: '#ffc74c',
		}),
		$(
			go.TextBlock,
			{
				margin: new go.Margin(3, 0, 3, 0),
				alignment: go.Spot.Center,
			},
			new go.Binding('text', 'text')
		)
	);
2

In both template you don’t explicitly set the mouseDrop property. That means the Node.mouseDrop property will get the value of what the mouseDrop variable has at the time that you construct the template. Might you be setting mouseDrop between the two templates?

3

I’m using new JS syntax, the function name is the same as the prop. I did try declaring a new function and setting a break point but it won’t fire. Also, selectionChanged does fire…

mouseDrop: () => { mouseDrop() }
4

When I use your templates, providing definitions where needed, I don’t encounter any problems with dragging either kind of node onto either kind of node in the main Diagram.

Try running with go-debug.js and see if there are any messages or errors in the console output.

5

How do I run it in debug in ReactDiagram?

Thank you

6

It might be easiest to temporarily replace the node_modules/gojs/release/go.js file with the go-debug.js file.

1 Like
7

It turns out the mouseDrags strokeWidth line is causing the mouseDrop to not fire…

mouseDragEnter: (ev: go.InputEvent, obj: go.Node) => {
				const node = obj.elt(0) as go.Shape;
				if (node) {
					//node.strokeWidth = 1;
					node.stroke = '#1776D2';
				}
			},
			mouseDragLeave: (ev: go.InputEvent, obj: go.Node) => {
				const node = obj.elt(0) as go.Shape;
				if (node) {
					//node.strokeWidth = 0;
					node.stroke = '#ffc74c';
				}
			}

And so my solution was to always have a stroke and only change its color… whereas before it started off with strokeWidth: 0.

$(go.Shape, {
			strokeWidth: 1,
			stroke: '#ffc74c',
			figure: 'Ellipse',
			fill: '#ffc74c',
		})