Draggable textdraw bug

Hello,

First, thanks a lot for your wonderfull work ! I used it for a program that allows to draw zones on a map (image loadedd) and place detectors (technical application). Recently I had a problem with draggable elements.

I developped first the program with version v13.07.03. Since yesterday (the code has not been changed) it’s impossible to drag any of the elements (arc or text). The cursor change on mouseover but it’s impossible to drag things (click events are OK).

I then switch to v20.0.0. Elements are now draggable, but I have a problem with Y position of dragged text. When I drag texts horizontally, it’s ok. But when I drag them vertically, they move twice slower than the mouse (if yPos of the mouse is 500, Ypos of the drown text is 250). That problem only appear on drown text (I also draw arc, they move correctly).

Here is an exemple of the code I use. That exemple allow to draw a zone (with corners that are draggable) and set a zone name (that is also draggable). The section “DRAW ZONES” works properly : I can move the corners of the drown zone. The problem appear with text drawn in the “DRAW ZONE NUMBER” part

Thanks in advance for your help 😃 !

function drawZones() {
	// INIT
	$canvas.removeLayers();
	zoneIDs = $("#zoneIDs").val();
	zones = zoneIDs.split(';');
	nbZones = zones.length - 1;
	$canvas.clearCanvas();
	colorsBgrdTxt = $('#bgrd_colors').val();
	colorsBgrdTab = colorsBgrdTxt.split(';');
	radius = $('#d_poignee_zone').val();
	var couleurIndice = 1;
	
	// DRAW ZONES
	for (var zoneIndice = 0; zoneIndice < nbZones; zoneIndice += 1) {
		if (zones[zoneIndice] != selectedZone || selectedZone == 0) {
			$canvas.removeLayer("layer" + zones[zoneIndice]);
			elt = $("#zone" + zones[zoneIndice] + "Pts");
			var obj = {
				layer: true,
				name: "layer" + zones[zoneIndice],
				strokeStyle: colorsBgrdTab[zoneIndice],
				strokeWidth: 3,
				rounded: true,
				closed: true
			};
			ptsStr = $(elt).val();
			pts = ptsStr.split(';');
			nbPts = pts.length - 1;
			for (var p = 0; p < nbPts; p += 1) {
				coord = pts[p].split(',');
				obj['x' + (p + 1)] = parseFloat(coord[0]);
				obj['y' + (p + 1)] =  parseFloat(coord[1]);
			}
			$canvas.drawLine(obj);
			// Remove corners
			var line = $canvas.getLayer("layer" + zones[zoneIndice]);
			for (var i = 1; i <= nbPts; i += 1) {
				$canvas.removeLayer("arc" + zones[zoneIndice] + "_" + i);
			}
		}
		else {
			couleurIndice = zoneIndice;
		}
	}
	
	// DRAW SELECTED ZONE FOR IT TO GET THEI HEIGHER Z-INDEX
	if (selectedZone != 0) {
		$canvas.removeLayer("layer" + selectedZone);
		elt = $("#zone" + selectedZone + "Pts");
		var obj = {
			layer: true,
			name: "layer" + selectedZone,
			strokeStyle: colorsBgrdTab[couleurIndice],
			strokeWidth: 3,
			fillStyle: colorsBgrdTab[couleurIndice],
			opacity: .7,
			rounded: true,
			closed: true
		};
		ptsStr = $(elt).val();
		pts = ptsStr.split(';');
		nbPts = pts.length - 1;
		for (var p = 0; p < nbPts; p += 1) {
			coord = pts[p].split(',');
			obj['x' + (p + 1)] = parseFloat(coord[0]);
			obj['y' + (p + 1)] =  parseFloat(coord[1]);
		}
		$canvas.drawLine(obj);
		// Create corners
		var line = $canvas.getLayer("layer" + selectedZone);
		for (var i = 1; i <= nbPts; i += 1) {
			$canvas.removeLayer("arc" + selectedZone + "_" + i);
			// Use a circle as each "joint" of the line
			switch (i) {
				case 1 : var fillcolor = "#fff"; break;
				case nbPts : var fillcolor = "#fff"; break;
				default : var fillcolor = colorsBgrdTab[couleurIndice]; break;
			}
			$canvas.drawArc({
				layer: true,
				name: "arc" + selectedZone + "_" + i,
				draggable: true,
				data: {jointNumber: i},
				strokeStyle: colorsBgrdTab[couleurIndice],
				strokeWidth: 2,
				fillStyle: fillcolor,
				x: line["x" + i],
				y: line["y" + i],
				radius: radius,
				// Update line when a joint is dragged
				mouseover: function() {
					$(this).css('cursor', 'move');
				},
				mouseout: function() {
					$('body').css('cursor', 'default');
				},
				drag: function(joint) {
					// Retrieve joint number from its name
					var j = joint.data.jointNumber;
					// Update line coordinates based on joint's position
					line["x" + j] = joint.x;
					line["y" + j] = joint.y;
					var coordonnees = '';
					for (var k = 1; k <= nbPts; k += 1) {
						coordonnees += line["x" + k] + ',' + line["y" + k]+ ';';
						$(elt).val(coordonnees);
					}
				},
				dragstop : function(joint) {
					var j = joint.data.jointNumber;
					updateZone(j);
				}
			});
		}
		
		// DRAW ZONE NUMBER
		numZone = $("#zone" + selectedZone + "Num");
		nomZone = $("#zone" + selectedZone + "_block").html();
		fontSize = $('#fontsize_zone').val();
		coordNumZomStr = numZone.val();
		coordNumZom = coordNumZomStr.split(',');
		xNumZone = parseFloat(coordNumZom[0]);
		yNumZone = parseFloat(coordNumZom[1]);
		$canvas.drawText({
			layer: true,
			name: "zoneNum" + selectedZone,
			draggable: true,
			data: {zoneId: selectedZone},
			strokeStyle: '#000000',
			strokeWidth: 1,
			fillStyle: "#ffffff",
			x: xNumZone,
			y: yNumZone,
			align: "left",
			fontSize: fontSize,
			fontStyle: "bold",
			fontFamily: "Arial, Verdana, sans-serif",
			text: nomZone,
			// Drag events
			mouseover: function() {
				$(this).css('cursor', 'move');
			},
			mouseout: function() {
				$('body').css('cursor', 'default');
			},
			drag: function(joint) {
				var j = joint.data.zoneId;
				xNumZonePos = joint.x;
				yNumZonePos = joint.y;
				$("#zone" + j + "Num").val(xNumZonePos + ',' + yNumZonePos);
			},
			dragstop : function(joint) {
				recordNumZoneCoord();
			}
		});
		
		if (mouseEvent == 'deletePoint')
			$canvas.removeLayer("arc" + selectedZone + "_" + i);
		mouseEvent = '';
		drawDetectors(selectedZone);
	}
};

[Wazi38]

Hello Caleb,

I’m back pretty late… Sorry for that Actually, the problem has disapered for most of users (not for me). Very surprising !!! I tried many things but did not solved and mainly understood the problem. The application is used at the moment and then I don’t want to take any risk. It won’t be used this summer, and then I will try again to solve the problem.

Best regards,

Sébastien

[caleb531]

Alright, sure! I’ll close this issue for now, but if the problem persists after you change hosts, let me know and I’ll re-open the issue. 😃