elyra-ai#2298 Drag interactions are too sensitive (elyra-ai#2299)

Signed-off-by: CTomlyn <tomlyn@us.ibm.com>

Author: tomlyn

canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js

@@ -506,10 +506,18 @@ export default class CanvasUtils {
 		return null;
 	}
 
-	// Returns true if point 1 is inside a circle of the specified radius whose
-	// center is point 2.
-	static isInside(point1, point2, radius) {
-		return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)) < radius;
+	// Returns true if the distance between the two positions is smaller than
+	// 3px which is considered to be a tiny movement. This can be used to define
+	// whether a mouse pointer gesture is considered to be a click on an object or, if
+	// outside the 3px distance, a drag.
+	static isTinyMovement(startPos, endPos) {
+		return CanvasUtils.isInside(startPos, endPos, 3);
+	}
+
+	// Returns true if the distance from point 1 to point 2 is less than the
+	// distance passed in.
+	static isInside(point1, point2, distance) {
+		return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)) < distance;
 	}
 
 	// Returns the distance from the start point to finish point of the link line.

canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js

@@ -354,7 +354,7 @@ export default class SVGCanvasUtilsDragNewLink {
 
 		// If the user has not dragged the mouse far enough to create a new link, we
 		// treat it as a click on the port.
-		if (this.isClicked(drawingNewLinkData.mousePos, d3Event)) {
+		if (CanvasUtils.isTinyMovement(drawingNewLinkData.mousePos, { x: d3Event.x, y: d3Event.y })) {
 			this.removeNewLink();
 			this.ren.canvasController.clickActionHandler({
 				clickType: SINGLE_CLICK,
@@ -386,12 +386,6 @@ export default class SVGCanvasUtilsDragNewLink {
 		}
 	}
 
-	// Returns true if the mouse position is inside a circle with a radius of
-	// 3px centred at the d3Event x and y.
-	isClicked(mousePos, d3Event) {
-		return CanvasUtils.isInside(mousePos, { x: d3Event.x, y: d3Event.y }, 3);
-	}
-
 	// Handles the creation of a link when the end of a new link
 	// being drawn from a source node is dropped on a target node.
 	createNewLinkFromDragData(d3Event, trgNode, drawingNewLinkData) {

canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-objects.js

@@ -725,6 +725,13 @@ export default class SVGCanvasUtilsDragObjects {
 			}
 		}
 
+		// If enableDragWithoutSelect is enabled and the mouse pointer
+		// hasn't moved very much, we don't move the objects.
+		if (this.ren.config.enableDragWithoutSelect &&
+			CanvasUtils.isTinyMovement({ x: 0, y: 0 }, { x: this.draggingObjectData.dragOffsetX, y: this.draggingObjectData.dragOffsetY })) {
+			return;
+		}
+
 		this.ren.displayMovedComments();
 		this.ren.displayMovedNodes();
 		this.ren.displayMovedLinks();
@@ -784,11 +791,10 @@ export default class SVGCanvasUtilsDragObjects {
 		// Remove the 'd3-is-moving' class from the objects being dragged.
 		this.switchIsMovingClass(draggingObjectData.dragObjects, false);
 
-		// If the pointer hasn't moved and enableDragWithoutSelect is enabled we interpret
-		// that as a select on the object.
-		if (draggingObjectData.dragOffsetX === 0 &&
-				draggingObjectData.dragOffsetY === 0 &&
-				this.ren.config.enableDragWithoutSelect) {
+		// If enableDragWithoutSelect is enabled and the pointer hasn't moved
+		// very much, we interpret that as a select on the object.
+		if (this.ren.config.enableDragWithoutSelect &&
+				CanvasUtils.isTinyMovement({ x: 0, y: 0 }, { x: draggingObjectData.dragOffsetX, y: draggingObjectData.dragOffsetY })) {
 			const objType = this.ren.activePipeline.getObjectTypeName(d);
 			this.ren.selectObject(eventType, d, objType, range, augment);