Skip to content

Upgrade JSXGraph to the latest version and fix the graphtool for that. #1357

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

Open
drgrice1 wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Upgrade JSXGraph to the latest version and fix the graphtool for that. #1357

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
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/circletool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
const center = this.center;
delete this.center;

center.setAttribute(gt.definingPointAttributes);
center.setAttribute(gt.definingPointAttributes());
center.on('down', () => gt.onPointDown(center));
center.on('up', () => gt.onPointUp(center));

Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/cubictool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

constructor(point1, point2, point3, point4, solid) {
for (const point of [point1, point2, point3, point4]) {
point.setAttribute(gt.definingPointAttributes);
point.setAttribute(gt.definingPointAttributes());
if (!gt.isStatic) {
point.on('down', () => gt.onPointDown(point));
point.on('up', () => gt.onPointUp(point));
Expand Down
116 changes: 112 additions & 4 deletions htdocs/js/GraphTool/graphtool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ window.graphTool = (containerId, options) => {
underConstructionFixed: JXG.palette.red // defined to be '#d55e00'
};

gt.definingPointAttributes = {
gt.definingPointAttributes = () => ({
size: 3,
fixed: false,
highlight: true,
Expand All @@ -49,8 +49,9 @@ window.graphTool = (containerId, options) => {
fillColor: gt.color.point,
highlightStrokeWidth: 1,
highlightStrokeColor: gt.color.focusCurve,
highlightFillColor: gt.color.pointHighlight
};
highlightFillColor: gt.color.pointHighlight,
tabindex: gt.isStatic ? -1 : 0
});

gt.options = options;
gt.snapSizeX = options.snapSizeX ? options.snapSizeX : 1;
Expand Down Expand Up @@ -262,6 +263,113 @@ window.graphTool = (containerId, options) => {
gt.board.highlightInfobox = (_x, _y, el) => gt.board.highlightCustomInfobox('', el);

if (!gt.isStatic) {
// This is a mess to work around an issue with JSXGraph versions 1.11.1 or later. Their keyDownListener
// calls preventDefault on the keydown event when shift-tab is pressed. That prevents keyboard focus from
// moving backward in the tab order. So this removes the JSXGraph keyboard event handlers, then overrides
// the board's keyDownListener with essentially the same code with the exception that when the tab key is
// pressed, preventDefault is not called. Then the keyboard event listeners are added back, using this
// keydownListener.
gt.board.removeKeyboardEventHandlers();
gt.board.keyDownListener = function (evt) {
const id_node = evt.target.id;
let done = true;

if (!this.attr.keyboard.enabled || id_node === '') return false;

const doc = this.containerObj.shadowRoot || document;
if (doc.activeElement) {
if (doc.activeElement.tagName === 'INPUT' || doc.activeElement.tagName === 'textarea') return false;
}

const id = id_node.replace(this.containerObj.id + '_', '');
const el = this.select(id);

if (
(JXG.evaluate(this.attr.keyboard.panshift) && evt.shiftKey) ||
(JXG.evaluate(this.attr.keyboard.panctrl) && evt.ctrlKey)
) {
const doZoom = JXG.evaluate(this.attr.zoom.enabled) === true;
if (evt.keyCode === 38) this.clickUpArrow();
else if (evt.keyCode === 40) this.clickDownArrow();
else if (evt.keyCode === 37) this.clickLeftArrow();
else if (evt.keyCode === 39) this.clickRightArrow();
else if (doZoom && evt.keyCode === 171) this.zoomIn();
else if (doZoom && evt.keyCode === 173) this.zoomOut();
else if (doZoom && evt.keyCode === 79) this.zoom100();
else done = false;
} else if (!evt.shiftKey && !evt.ctrlKey) {
let dx = JXG.evaluate(this.attr.keyboard.dx) / this.unitX;
let dy = JXG.evaluate(this.attr.keyboard.dy) / this.unitY;
if (JXG.exists(el.visProp)) {
if (
JXG.exists(el.visProp.snaptogrid) &&
el.visProp.snaptogrid &&
el.evalVisProp('snapsizex') &&
el.evalVisProp('snapsizey')
) {
const res = el.getSnapSizes();
dx = res[0];
dy = res[1];
} else if (
JXG.exists(el.visProp.attracttogrid) &&
el.visProp.attracttogrid &&
el.evalVisProp('attractordistance') &&
el.evalVisProp('attractorunit')
) {
let sX = 1.1 * el.evalVisProp('attractordistance');
let sY = sX;
if (el.evalVisProp('attractorunit') === 'screen') {
sX /= this.unitX;
sY /= this.unitX;
}
dx = Math.max(sX, dx);
dy = Math.max(sY, dy);
}
}

let dir;
if (evt.keyCode === 38) dir = [0, dy];
else if (evt.keyCode === 40) dir = [0, -dy];
else if (evt.keyCode === 37) dir = [-dx, 0];
else if (evt.keyCode === 39) dir = [dx, 0];
else done = false;

if (
dir &&
el.isDraggable &&
el.visPropCalc.visible &&
((this.geonextCompatibilityMode &&
(JXG.isPoint(el) || el.elementClass === Const.OBJECT_CLASS_TEXT)) ||
!this.geonextCompatibilityMode) &&
!el.evalVisProp('fixed')
) {
this.mode = this.BOARD_MODE_DRAG;
if (JXG.exists(el.coords)) {
const actPos = el.coords.usrCoords.slice(1);
dir[0] += actPos[0];
dir[1] += actPos[1];
el.setPosition(JXG.COORDS_BY_USER, dir);
this.updateInfobox(el);
} else {
this.displayInfobox(false);
el.setPositionDirectly(Const.COORDS_BY_USER, dir, [0, 0]);
}

this.triggerEventHandlers(['keymove', 'move'], [evt, this.mode]);
el.triggerEventHandlers(['keydrag', 'drag'], [evt]);
this.mode = this.BOARD_MODE_NONE;
}
} else if (evt.key === 'Tab') {
done = false;
}

this.update();

if (done && JXG.exists(evt.preventDefault)) evt.preventDefault();
return done;
};
gt.board.addKeyboardEventHandlers();

gt.graphContainer.tabIndex = -1;
gt.board.containerObj.tabIndex = -1;

Expand Down Expand Up @@ -805,7 +913,7 @@ window.graphTool = (containerId, options) => {
const point = gt.board.create('point', [gt.snapRound(x, gt.snapSizeX), gt.snapRound(y, gt.snapSizeY)], {
snapSizeX: gt.snapSizeX,
snapSizeY: gt.snapSizeY,
...gt.definingPointAttributes
...gt.definingPointAttributes()
});
point.setAttribute({ snapToGrid: true });
if (!gt.isStatic) {
Expand Down
3 changes: 2 additions & 1 deletion htdocs/js/GraphTool/intervaltools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,8 @@
highlightStrokeWidth: 3,
highlightStrokeColor: gt.color.pointHighlightDarker,
// highlightFillColor is gt.color.pointHighlight if not included.
highlightFillColor: gt.color.pointHighlightDarker
highlightFillColor: gt.color.pointHighlightDarker,
tabindex: gt.isStatic ? -1 : 0
};
}

Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/linetool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
const point1 = this.point1;
delete this.point1;

point1.setAttribute(gt.definingPointAttributes);
point1.setAttribute(gt.definingPointAttributes());
point1.on('down', () => gt.onPointDown(point1));
point1.on('up', () => gt.onPointUp(point1));

Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/parabolatool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@
const vertex = this.vertex;
delete this.vertex;

vertex.setAttribute(gt.definingPointAttributes);
vertex.setAttribute(gt.definingPointAttributes());
vertex.on('down', () => gt.onPointDown(vertex));
vertex.on('up', () => gt.onPointUp(vertex));

Expand Down
3 changes: 2 additions & 1 deletion htdocs/js/GraphTool/pointtool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
strokeColor: gt.color.curve,
fixed: gt.isStatic,
highlightStrokeColor: gt.color.underConstruction,
highlightFillColor: gt.color.pointHighlight
highlightFillColor: gt.color.pointHighlight,
tabindex: gt.isStatic ? -1 : 0
})
);

Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/quadratictool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

constructor(point1, point2, point3, solid) {
for (const point of [point1, point2, point3]) {
point.setAttribute(gt.definingPointAttributes);
point.setAttribute(gt.definingPointAttributes());
if (!gt.isStatic) {
point.on('down', () => gt.onPointDown(point));
point.on('up', () => gt.onPointUp(point));
Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/quadrilateral.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

constructor(point1, point2, point3, point4, solid) {
for (const point of [point1, point2, point3, point4]) {
point.setAttribute(gt.definingPointAttributes);
point.setAttribute(gt.definingPointAttributes());
if (!gt.isStatic) {
point.on('down', () => gt.onPointDown(point));
point.on('up', () => gt.onPointUp(point));
Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/sinewavetool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

constructor(shiftPoint, periodPoint, amplitudePoint, solid) {
for (const point of [shiftPoint, periodPoint, amplitudePoint]) {
point.setAttribute(gt.definingPointAttributes);
point.setAttribute(gt.definingPointAttributes());
if (!gt.isStatic) {
point.on('down', () => gt.onPointDown(point));
point.on('up', () => gt.onPointUp(point));
Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/GraphTool/triangle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

constructor(point1, point2, point3, solid) {
for (const point of [point1, point2, point3]) {
point.setAttribute(gt.definingPointAttributes);
point.setAttribute(gt.definingPointAttributes());
if (!gt.isStatic) {
point.on('down', () => gt.onPointDown(point));
point.on('up', () => gt.onPointUp(point));
Expand Down
14 changes: 7 additions & 7 deletions htdocs/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion htdocs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"dependencies": {
"@openwebwork/mathquill": "^0.11.1",
"jsxgraph": "^1.11.1",
"jsxgraph": "^1.12.2",
"jszip": "^3.10.1",
"jszip-utils": "^0.1.0",
"plotly.js-dist-min": "^3.1.0",
Expand Down