Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#2298 Drag interactions are too sensitive #2299

Merged
merged 1 commit into from
Jan 13, 2025
Merged

#2298 Drag interactions are too sensitive #2299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 1 addition & 7 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
16 changes: 11 additions & 5 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-objects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);

Expand Down
Loading