BPMN Editor positioning drag and dropped custom node

GoJS
1

I have custom data as tree in one of the palettes of BPMN Editor and I used code from HTML Drag and Drop, and external Clipboard pasting sample to position the drag and dropped node to diagram.

My issue is all drag and dropped nodes are going to start position of the diagram that is left top. Below is the code used

var div = document.getElementById(this.BPMNDiagramId);
let _this:any=this;
div.addEventListener(“dragover”, function(event:any) {
if (this === _this.BPMNDiagram.div) {
var can = event.target;
var pixelratio = window.PIXELRATIO;

			// if the target is not the canvas, we may have trouble, so just quit:
			if (!(can instanceof HTMLCanvasElement)) return;

			var bbox = can.getBoundingClientRect();
			var bbw = bbox.width;
			if (bbw === 0) bbw = 0.001;
			var bbh = bbox.height;
			if (bbh === 0) bbh = 0.001;
			var mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
			var my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
			var point = _this.BPMNDiagram.transformViewToDoc(new go.Point(mx, my));
			var curnode = _thisBPMNDiagram.findPartAt(point, true);
			/*if (curnode instanceof go.Node) {
				highlight(curnode);
			} else {
				highlight(null);
			}*/
		}

		if (event.target.className === "dropzone") {
			// Disallow a drop by returning before a call to preventDefault:
			return;
		}

		// Allow a drop on everything else
		event.preventDefault();
	},false);
	div.addEventListener("drop", function(event:any) {
        event.preventDefault();
		// Dragging onto a Diagram
		console.log("Dragged")
			
		if (this === _this.BPMNDiagram.div) {
			var can = event.target;
			console.log(can)
			var pixelratio = window.PIXELRATIO;

			// if the target is not the canvas, we may have trouble, so just quit:
			if (!(can instanceof HTMLCanvasElement)) return;

			var bbox = can.getBoundingClientRect();
			var bbw = bbox.width;
			if (bbw === 0) bbw = 0.001;
			var bbh = bbox.height;
			if (bbh === 0) bbh = 0.001;
			var mx = event.clientX - bbox.left * ((can.width/pixelratio) / bbw);
			var my = event.clientY - bbox.top * ((can.height/pixelratio) / bbh);
			var point = _this.BPMNDiagram.transformViewToDoc(new go.Point(mx, my));
			console.log(point)
			_this.BPMNDiagram.startTransaction('new node');
			_thisBPMNDiagram.model.addNodeData({
				location: point,
				category:"dataobject",
				text:_this.draggedNode.displayName
			});
			_this.BPMNDiagram.commitTransaction('new node');
		}
	}, false);
2

If you started from the extensions/BPMN.html sample, the behavior you are seeing is due to the Group.layout which was set to an instance of LayeredDigraphLayout. Remove that setting from the group template, and nodes dropped into a group will not cause a layout to be performed again within the group.

3

Thanks for the reply. It was my mistake I should pass the location in string format. I fixed the issue by converting it to string.

I have one more issue, problem is I am highlighting the dropped node by using below code but highlight is not working.

Code posted above shows calling highlight method is commented out. It didn’t work so I commented out and also I tried calling this method from div.addEventListener(“drop”, function(event:any) but no luck.

function highlight(node) { // may be null
var oldskips = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
myDiagram.startTransaction(“highlight”);
if (node !== null) {
myDiagram.highlight(node);
} else {
myDiagram.clearHighlighteds();
}
myDiagram.commitTransaction(“highlight”);
myDiagram.skipsUndoManager = oldskips;
}

Any help on this is appreciated

4

That code is just fine. Maybe you need to extend your node template to show highlighting. Have you read GoJS Highlighting -- Northwoods Software ?