BPMN Editor positioning drag and dropped custom node

@mohanr.k wrote:

I have custom data as tree in one of the palettes of BPMN Editor and I used code from http://gojs.net/latest/samples/htmldragdrop.html 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);

Posts: 4

Participants: 2

Read full topic