Skip to content

Commit

Permalink
Fix coordinate hints during any restricted point drag.
Browse files Browse the repository at this point in the history 
Any time that a point's drag is restricted the coordinate hints can be
wrong. This happens if the drag is in a range that the point can't be
moved to and can happen for both mouse or keyboard drags.

For an extreme example where this is easy to see, with the 4-point cubic
tool graph the points (-1, 0), (0, 0), (1, 0), and (2, 0).  Then click
on the point at (2, 0) and slowly drag it to the left. Without this pull
request you will see the coordinate hints show (1, 0), then (0, 0),
etc., even though that is not where the point being dragged is.
  • Loading branch information
@drgrice1
drgrice1 committed Jan 29, 2025
1 parent ca354ce commit 6f67f37
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 32 deletions.
14 changes: 12 additions & 2 deletions htdocs/js/GraphTool/cubictool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@
preInit(gt, point1, point2, point3, point4, solid) {
[point1, point2, point3, point4].forEach((point) => {
point.setAttribute(gt.definingPointAttributes);
point.on('down', () => (gt.board.containerObj.style.cursor = 'none'));
point.on('up', () => (gt.board.containerObj.style.cursor = 'auto'));
if (!gt.isStatic) {
point.on('down', () => {
point.dragging = true;
gt.board.containerObj.style.cursor = 'none';
});
point.on('up', () => {
delete point.dragging;
gt.board.containerObj.style.cursor = 'auto';
});
}
});
return gt.graphObjectTypes.cubic.createCubic(point1, point2, point3, point4, solid, gt.color.curve);
},
Expand Down Expand Up @@ -163,6 +171,7 @@

groupedPointDrag(gt, e) {
gt.graphObjectTypes.cubic.adjustDragPosition(e, this, this.grouped_points);
gt.setTextCoords(this.X(), this.Y());
gt.updateObjects();
gt.updateText();
},
Expand Down Expand Up @@ -439,6 +448,7 @@

gt.setTextCoords(this.hlObjs.hl_point.X(), this.hlObjs.hl_point.Y());
gt.board.update();
return true;
},

deactivate(gt) {
Expand Down
34 changes: 25 additions & 9 deletions htdocs/js/GraphTool/graphtool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -686,7 +686,8 @@ window.graphTool = (containerId, options) => {
// degenerate.
gt.adjustDragPosition = (e, point, pairedPoint) => {
if (
(Math.abs(point.X() - pairedPoint?.X()) < JXG.Math.eps &&
(pairedPoint &&
Math.abs(point.X() - pairedPoint?.X()) < JXG.Math.eps &&
Math.abs(point.Y() - pairedPoint?.Y()) < JXG.Math.eps) ||
!gt.boardHasPoint(point.X(), point.Y())
) {
Expand Down Expand Up @@ -732,6 +733,7 @@ window.graphTool = (containerId, options) => {

gt.pairedPointDrag = (e, point) => {
gt.adjustDragPosition(e, point, point.paired_point);
gt.setTextCoords(point.X(), point.Y());
gt.updateObjects();
gt.updateText();
};
Expand All @@ -741,8 +743,9 @@ window.graphTool = (containerId, options) => {
// already been moved by JSXGraph. This prevents parabolas from being made degenerate.
gt.adjustDragPositionRestricted = (e, point, pairedPoint) => {
if (
Math.abs(point.X() - pairedPoint?.X()) < JXG.Math.eps ||
Math.abs(point.Y() - pairedPoint?.Y()) < JXG.Math.eps ||
(pairedPoint &&
(Math.abs(point.X() - pairedPoint.X()) < JXG.Math.eps ||
Math.abs(point.Y() - pairedPoint.Y()) < JXG.Math.eps)) ||
!gt.boardHasPoint(point.X(), point.Y())
) {
const bbox = gt.board.getBoundingBox();
Expand Down Expand Up @@ -782,6 +785,7 @@ window.graphTool = (containerId, options) => {

gt.pairedPointDragRestricted = (e, point) => {
gt.adjustDragPositionRestricted(e, point, point.paired_point);
gt.setTextCoords(point.X(), point.Y());
gt.updateObjects();
gt.updateText();
};
Expand All @@ -794,8 +798,14 @@ window.graphTool = (containerId, options) => {
});
point.setAttribute({ snapToGrid: true });
if (!gt.isStatic) {
point.on('down', () => (gt.board.containerObj.style.cursor = 'none'));
point.on('up', () => (gt.board.containerObj.style.cursor = 'auto'));
point.on('down', () => {
point.dragging = true;
gt.board.containerObj.style.cursor = 'none';
});
point.on('up', () => {
delete point.dragging;
gt.board.containerObj.style.cursor = 'auto';
});
if (typeof paired_point !== 'undefined') {
point.paired_point = paired_point;
paired_point.paired_point = point;
Expand Down Expand Up @@ -893,13 +903,19 @@ window.graphTool = (containerId, options) => {
onResize() {}

updateTextCoords(coords) {
return !this.definingPts.every((point) => {
for (const point of this.definingPts) {
if (point.dragging) {
gt.setTextCoords(point.X(), point.Y());
return true;
}
}
for (const point of this.definingPts) {
if (point.hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
gt.setTextCoords(point.X(), point.Y());
return false;
return true;
}
return true;
});
}
return false;
}

static restore(string) {
Expand Down
11 changes: 9 additions & 2 deletions htdocs/js/GraphTool/intervaltools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,7 @@
pairedPointDrag(gt, e, point) {
gt.adjustDragPositionRestricted(e, point, point.paired_point);
if (point.Y() !== 0) point.setPosition(JXG.COORDS_BY_USER, [point.X(), 0]);
gt.setTextCoords(this.X(), 0);
gt.updateObjects();
gt.updateText();
},
Expand All @@ -368,8 +369,14 @@
point.setAttribute({ snapToGrid: true });

if (!gt.isStatic) {
point.on('down', () => gt.graphObjectTypes.interval.pointDown(point));
point.on('up', () => gt.graphObjectTypes.interval.pointUp(point));
point.on('down', () => {
point.dragging = true;
gt.graphObjectTypes.interval.pointDown(point);
});
point.on('up', () => {
delete point.dragging;
gt.graphObjectTypes.interval.pointUp(point);
});
if (typeof paired_point !== 'undefined') {
point.paired_point = paired_point;
paired_point.paired_point = point;
Expand Down
10 changes: 8 additions & 2 deletions htdocs/js/GraphTool/pointtool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,14 @@
this.focusPoint = this.baseObj;

if (!gt.isStatic) {
this.on('down', () => (gt.board.containerObj.style.cursor = 'none'));
this.on('up', () => (gt.board.containerObj.style.cursor = 'auto'));
this.on('down', () => {
this.baseObj.dragging = true;
gt.board.containerObj.style.cursor = 'none';
});
this.on('up', () => {
delete this.baseObj.dragging;
gt.board.containerObj.style.cursor = 'auto';
});
this.on('drag', (e) => {
gt.adjustDragPosition(e, this.baseObj);
gt.updateText();
Expand Down
13 changes: 11 additions & 2 deletions htdocs/js/GraphTool/quadratictool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@
preInit(gt, point1, point2, point3, solid) {
[point1, point2, point3].forEach((point) => {
point.setAttribute(gt.definingPointAttributes);
point.on('down', () => (gt.board.containerObj.style.cursor = 'none'));
point.on('up', () => (gt.board.containerObj.style.cursor = 'auto'));
if (!gt.isStatic) {
point.on('down', () => {
point.dragging = true;
gt.board.containerObj.style.cursor = 'none';
});
point.on('up', () => {
delete point.dragging;
gt.board.containerObj.style.cursor = 'auto';
});
}
});
return gt.graphObjectTypes.quadratic.createQuadratic(point1, point2, point3, solid, gt.color.curve);
},
Expand Down Expand Up @@ -123,6 +131,7 @@

groupedPointDrag(gt, e) {
gt.graphObjectTypes.quadratic.adjustDragPosition(e, this, this.grouped_points);
gt.setTextCoords(this.X(), this.Y());
gt.updateObjects();
gt.updateText();
},
Expand Down
26 changes: 11 additions & 15 deletions htdocs/js/GraphTool/sinewavetool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@
preInit(gt, shiftPoint, periodPoint, amplitudePoint, solid) {
[shiftPoint, periodPoint, amplitudePoint].forEach((point) => {
point.setAttribute(gt.definingPointAttributes);
point.on('down', () => (gt.board.containerObj.style.cursor = 'none'));
point.on('up', () => (gt.board.containerObj.style.cursor = 'auto'));
if (!gt.isStatic) {
point.on('down', () => {
point.dragging = true;
gt.board.containerObj.style.cursor = 'none';
});
point.on('up', () => {
delete point.dragging;
gt.board.containerObj.style.cursor = 'auto';
});
}
});
return gt.graphObjectTypes.sineWave.createSineWave(
shiftPoint,
Expand All @@ -25,17 +33,6 @@
this.focusPoint = shiftPoint;
},

updateTextCoords(gt, coords) {
for (const point of this.definingPts) {
if (point.dragged || point.hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
delete point.dragged;
gt.setTextCoords(point.X(), point.Y());
return true;
}
}
return false;
},

stringify(gt) {
return [
this.baseObj.getAttribute('dash') == 0 ? 'solid' : 'dashed',
Expand Down Expand Up @@ -194,8 +191,7 @@

if (shiftPoint) periodPoint?.setPosition(JXG.COORDS_BY_USER, [periodPoint.X(), shiftPoint.Y()]);

if (e.type === 'pointermove') this.dragged = true;

gt.setTextCoords(this.X(), this.Y());
gt.updateObjects();
gt.updateText();
},
Expand Down

0 comments on commit 6f67f37

Please sign in to comment.