From 9facd0601490a80dac5e8032023320b4651438e8 Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Fri, 10 Jan 2025 18:33:46 -0800 Subject: [PATCH] #2298 Drag interactions are too sensitive Signed-off-by: CTomlyn --- .../src/common-canvas/common-canvas-utils.js | 16 ++++++++++++---- .../svg-canvas-utils-drag-new-link.js | 8 +------- .../svg-canvas-utils-drag-objects.js | 16 +++++++++++----- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js b/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js index 30d393d5a..49eb9259c 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js +++ b/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. diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js index fcbde4c97..55212c64a 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js +++ b/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) { diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-objects.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-objects.js index c3a28e2f1..6e038e731 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-objects.js +++ b/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);