jsxgraph 1.9.0 → 1.9.2

package/src/base/line.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -330,7 +330,9 @@ JXG.extend(
             // Compute the actual length of the segment
             d = this.point1.Dist(this.point2);
             // Determine the length the segment ought to have
-            d_new = Math.abs(this.fixedLength());
+            d_new =  (Type.evaluate(this.visProp.nonnegativeonly)) ?
+                Math.max(0.0, this.fixedLength()) :
+                Math.abs(this.fixedLength());
 
             // Distances between the two points and their respective
             // position before the update
@@ -1010,6 +1012,8 @@ JXG.extend(
             }
 
             this.fixedLength = Type.createFunction(l, this.board);
+            this.hasFixedLength = true;
+            this.addParentsFromJCFunctions([this.fixedLength]);
             this.board.update();
 
             return this;
@@ -1475,15 +1479,22 @@ JXG.createSegment = function (board, parents, attributes) {
     el = board.create("line", parents.slice(0, 2), attr);
 
     if (parents.length === 3) {
-        el.hasFixedLength = true;
+        try {
+            el.hasFixedLength = true;
+            el.fixedLengthOldCoords = [];
+            el.fixedLengthOldCoords[0] = new Coords(
+                Const.COORDS_BY_USER,
+                el.point1.coords.usrCoords.slice(1, 3),
+                board
+            );
+            el.fixedLengthOldCoords[1] = new Coords(
+                Const.COORDS_BY_USER,
+                el.point2.coords.usrCoords.slice(1, 3),
+                board
+            );
 
-        if (Type.isNumber(parents[2])) {
-            el.fixedLength = function () {
-                return parents[2];
-            };
-        } else if (Type.isFunction(parents[2])) {
-            el.fixedLength = Type.createFunction(parents[2], this.board);
-        } else {
+            el.setFixedLength(parents[2]);
+        } catch (err) {
             throw new Error(
                 "JSXGraph: Can't create segment with third parent type '" +
                     typeof parents[2] +
@@ -1491,22 +1502,25 @@ JXG.createSegment = function (board, parents, attributes) {
                     "\nPossible third parent types: number or function"
             );
         }
+        // if (Type.isNumber(parents[2])) {
+        //     el.fixedLength = function () {
+        //         return parents[2];
+        //     };
+        // } else if (Type.isFunction(parents[2])) {
+        //     el.fixedLength = Type.createFunction(parents[2], this.board);
+        // } else {
+        //     throw new Error(
+        //         "JSXGraph: Can't create segment with third parent type '" +
+        //             typeof parents[2] +
+        //             "'." +
+        //             "\nPossible third parent types: number or function"
+        //     );
+        // }
 
         el.getParents = function () {
             return this.parents.concat(this.fixedLength());
         };
 
-        el.fixedLengthOldCoords = [];
-        el.fixedLengthOldCoords[0] = new Coords(
-            Const.COORDS_BY_USER,
-            el.point1.coords.usrCoords.slice(1, 3),
-            board
-        );
-        el.fixedLengthOldCoords[1] = new Coords(
-            Const.COORDS_BY_USER,
-            el.point2.coords.usrCoords.slice(1, 3),
-            board
-        );
     }
 
     el.elType = "segment";
@@ -1918,8 +1932,13 @@ JXG.createAxis = function (board, parents, attributes) {
 JXG.registerElement("axis", JXG.createAxis);
 
 /**
- * @class With the element tangent the slope of a line, circle, or curve in a certain point can be visualized. A tangent is always constructed
- * by a glider on a line, circle, or curve and describes the tangent in the glider point on that line, circle, or curve.
+ * @class With the element tangent the slope of a line, circle, conic, turtle, or curve in a certain point can be visualized. A tangent is always constructed
+ * by a point on a line, circle, or curve and describes the tangent in the point on that line, circle, or curve.
+ * <p>
+ * If the point is not on the object (line, circle, conic, curve, turtle) the output depends on the type of the object.
+ * For conics and circles, the polar line will be constructed. For function graphs,
+ * the tangent of the vertical projection of the point to the function graph is constructed. For all other objects, the tangent
+ * in the orthogonal projection of the point to the object will be constructed.
  * @pseudo
  * @name Tangent
  * @augments JXG.Line
@@ -1927,6 +1946,7 @@ JXG.registerElement("axis", JXG.createAxis);
  * @type JXG.Line
  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
  * @param {Glider} g A glider on a line, circle, or curve.
+ * @param {JXG.GeometryElement} [c] Optional element for which the tangent is constructed
  * @example
  * // Create a tangent providing a glider on a function graph
  *   var c1 = board.create('curve', [function(t){return t},function(t){return t*t*t;}]);
@@ -1944,12 +1964,13 @@ JXG.createTangent = function (board, parents, attributes) {
     var p, c, j, el, tangent, attr,
         getCurveTangentDir;
 
-    // One argument: glider on line, circle or curve
     if (parents.length === 1) {
+        // One argument: glider on line, circle or curve
         p = parents[0];
         c = p.slideObject;
-        // Two arguments: (point,F"|conic) or (line|curve|circle|conic,point). // Not yet: curve!
+
     } else if (parents.length === 2) {
+        // Two arguments: (point,line|curve|circle|conic) or (line|curve|circle|conic,point).
         // In fact, for circles and conics it is the polar
         if (Type.isPoint(parents[0])) {
             p = parents[0];
@@ -1964,7 +1985,7 @@ JXG.createTangent = function (board, parents, attributes) {
                     "' and '" +
                     typeof parents[1] +
                     "'." +
-                    "\nPossible parent types: [glider], [point,line|curve|circle|conic]"
+                    "\nPossible parent types: [glider|point], [point,line|curve|circle|conic]"
             );
         }
     } else {
@@ -1974,7 +1995,7 @@ JXG.createTangent = function (board, parents, attributes) {
                 "' and '" +
                 typeof parents[1] +
                 "'." +
-                "\nPossible parent types: [glider], [point,line|curve|circle|conic]"
+                "\nPossible parent types: [glider|point], [point,line|curve|circle|conic]"
         );
     }
 
@@ -1992,17 +2013,22 @@ JXG.createTangent = function (board, parents, attributes) {
                 [
                     function () {
                         var g = c.X,
-                            f = c.Y;
-                        return (
-                            -p.X() * Numerics.D(f)(p.position) +
-                            p.Y() * Numerics.D(g)(p.position)
-                        );
-                    },
-                    function () {
-                        return Numerics.D(c.Y)(p.position);
-                    },
-                    function () {
-                        return -Numerics.D(c.X)(p.position);
+                            f = c.Y,
+                            t;
+
+                        if (p.type === Const.OBJECT_TYPE_GLIDER) {
+                            t = p.position;
+                        } else if (Type.evaluate(c.visProp.curvetype) === 'functiongraph') {
+                            t = p.X();
+                        } else {
+                            t = Geometry.projectPointToCurve(p, c, board)[1];
+                        }
+
+                        return [
+                            -p.X() * Numerics.D(f)(t) + p.Y() * Numerics.D(g)(t),
+                            Numerics.D(c.Y)(t),
+                            -Numerics.D(c.X)(t)
+                        ];
                     }
                 ],
                 attr
@@ -2070,12 +2096,10 @@ JXG.createTangent = function (board, parents, attributes) {
                     B = points[i + 1].usrCoords;
                     C = points[i + 2].usrCoords;
                     D = points[i + 3].usrCoords;
-                    dx =
-                        (1 - t) * (1 - t) * (B[1] - A[1]) +
+                    dx = (1 - t) * (1 - t) * (B[1] - A[1]) +
                         2 * (1 - t) * t * (C[1] - B[1]) +
                         t * t * (D[1] - C[1]);
-                    dy =
-                        (1 - t) * (1 - t) * (B[2] - A[2]) +
+                    dy = (1 - t) * (1 - t) * (B[2] - A[2]) +
                         2 * (1 - t) * t * (C[2] - B[2]) +
                         t * t * (D[2] - C[2]);
                     d = Mat.hypot(dx, dy);
@@ -2092,21 +2116,28 @@ JXG.createTangent = function (board, parents, attributes) {
                         return p2[2] - p1[2];
                     case 2:
                         return p1[1] - p2[1];
+                    default:
+                        return [
+                            p1[2] * p2[1] - p1[1] * p2[2],
+                            p2[2] - p1[2],
+                            p1[1] - p2[1]
+                        ];
                 }
-                return 0;
             };
 
             tangent = board.create(
                 "line",
                 [
                     function () {
-                        return getCurveTangentDir(p.position, c, 0);
-                    },
-                    function () {
-                        return getCurveTangentDir(p.position, c, 1);
-                    },
-                    function () {
-                        return getCurveTangentDir(p.position, c, 2);
+                        var t;
+
+                        if (p.type === Const.OBJECT_TYPE_GLIDER) {
+                            t = p.position;
+                        } else {
+                            t = Geometry.projectPointToCurve(p, c, board)[1];
+                        }
+
+                        return getCurveTangentDir(t, c);
                     }
                 ],
                 attr
@@ -2121,33 +2152,14 @@ JXG.createTangent = function (board, parents, attributes) {
             "line",
             [
                 function () {
-                    var i = Math.floor(p.position);
-
-                    // run through all curves of this turtle
-                    for (j = 0; j < c.objects.length; j++) {
-                        el = c.objects[j];
-
-                        if (el.type === Const.OBJECT_TYPE_CURVE) {
-                            if (i < el.numberPoints) {
-                                break;
-                            }
-
-                            i -= el.numberPoints;
-                        }
-                    }
-
-                    if (i === el.numberPoints - 1) {
-                        i--;
-                    }
-
-                    if (i < 0) {
-                        return 1;
+                    var i, t;
+                    if (p.type === Const.OBJECT_TYPE_GLIDER) {
+                        t = p.position;
+                    } else {
+                        t = Geometry.projectPointToTurtle(p, c, board)[1];
                     }
 
-                    return el.Y(i) * el.X(i + 1) - el.X(i) * el.Y(i + 1);
-                },
-                function () {
-                    var i = Math.floor(p.position);
+                    i = Math.floor(t);
 
                     // run through all curves of this turtle
                     for (j = 0; j < c.objects.length; j++) {
@@ -2162,37 +2174,19 @@ JXG.createTangent = function (board, parents, attributes) {
                         }
                     }
 
-                    if (i === el.numberPoints - 1) {
-                        i--;
-                    }
-                    if (i < 0) {
-                        return 0;
-                    }
-
-                    return el.Y(i + 1) - el.Y(i);
-                },
-                function () {
-                    var i = Math.floor(p.position);
-
-                    // run through all curves of this turtle
-                    for (j = 0; j < c.objects.length; j++) {
-                        el = c.objects[j];
-                        if (el.type === Const.OBJECT_TYPE_CURVE) {
-                            if (i < el.numberPoints) {
-                                break;
-                            }
-                            i -= el.numberPoints;
-                        }
-                    }
                     if (i === el.numberPoints - 1) {
                         i--;
                     }
 
                     if (i < 0) {
-                        return 0;
+                        return [1, 0, 0];
                     }
 
-                    return el.X(i) - el.X(i + 1);
+                    return [
+                        el.Y(i) * el.X(i + 1) - el.X(i) * el.Y(i + 1),
+                        el.Y(i + 1) - el.Y(i),
+                        el.X(i) - el.X(i + 1)
+                    ];
                 }
             ],
             attr
@@ -2211,13 +2205,7 @@ JXG.createTangent = function (board, parents, attributes) {
             "line",
             [
                 function () {
-                    return Mat.matVecMult(c.quadraticform, p.coords.usrCoords)[0];
-                },
-                function () {
-                    return Mat.matVecMult(c.quadraticform, p.coords.usrCoords)[1];
-                },
-                function () {
-                    return Mat.matVecMult(c.quadraticform, p.coords.usrCoords)[2];
+                    return Mat.matVecMult(c.quadraticform, p.coords.usrCoords);
                 }
             ],
             attr

package/src/base/point.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/base/polygon.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -1533,7 +1533,7 @@ JXG.createParallelogram = function (board, parents, attributes) {
         );
     }
 
-    attr_pp = Type.copyAttributes(attributes, board.options, "parallelogram", ["parallelpoint"]);
+    attr_pp = Type.copyAttributes(attributes, board.options, "parallelogram", "parallelpoint");
     pp = board.create('parallelpoint', points, attr_pp);
     attr = Type.copyAttributes(attributes, board.options, "parallelogram");
     el = board.create('polygon', [points[0], points[1], pp, points[2]], attr);

package/src/base/text.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -1142,7 +1142,8 @@ JXG.extend(
         getNumberOfConflicts: function (x, y, w, h) {
             var count = 0,
                 i, obj, le,
-                savePointPrecision;
+                savePointPrecision,
+                saveHasInnerPoints;
 
             // Set the precision of hasPoint to half the max if label isn't too long
             savePointPrecision = this.board.options.precision.hasPoint;
@@ -1152,6 +1153,8 @@ JXG.extend(
             // Make it compatible with the objects' visProp.precision attribute
             for (i = 0, le = this.board.objectsList.length; i < le; i++) {
                 obj = this.board.objectsList[i];
+                saveHasInnerPoints = obj.visProp.hasinnerpoints;
+                obj.visProp.hasinnerpoints = false;
                 if (
                     obj.visPropCalc.visible &&
                     obj.elType !== "axis" &&
@@ -1162,6 +1165,7 @@ JXG.extend(
                 ) {
                     count++;
                 }
+                obj.visProp.hasinnerpoints = saveHasInnerPoints;
             }
             this.board.options.precision.hasPoint = savePointPrecision;
 

package/src/base/ticks.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/base/transformation.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/base/turtle.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/element/arc.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/element/button.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -52,9 +52,12 @@ var priv = {
 /**
  * @class This element is used to provide a constructor for special texts containing a
  * form button element.
- * <p>
  * For this element, the attribute "display" has to have the value 'html' (which is the default).
- * <p>
+ *
+ * <p><b>Setting a CSS class:</b> The attribute <tt>cssClass</tt> affects the HTML div element that contains the button element. To change the CSS properties of the HTML button element a selector of the form
+ * <tt>.mybutton > button { ... }</tt> has to be used. See the example below.
+ *
+ * <p><b>Access the button element with JavaScript:</b>
  * The underlying HTML button element can be accessed through the sub-object 'rendNodeButton', e.g. to
  * add event listeners.
  *
@@ -158,15 +161,15 @@ var priv = {
  * </script><pre>
  *
  * @example
- *         var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
- *         var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
- *         var b1 = board.create('button', [-3, -1, 'Change texts', function () {
- *                 i1.setText('g(x)');
- *                 i1.set('cos(x)');
- *                 c1.setText('label 2');
- *                 b1.setText('Texts are changed');
- *             }],
- *             {cssStyle: 'width:400px'});
+ * var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
+ * var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
+ * var b1 = board.create('button', [-3, -1, 'Change texts', function () {
+ *         i1.setText('g(x)');
+ *         i1.set('cos(x)');
+ *         c1.setText('label 2');
+ *         b1.setText('Texts are changed');
+ *     }],
+ *     {cssStyle: 'width:200px'});
  *
  * </pre><div id="JXG11cac8ff-2354-47e7-9da4-eb928e53de05" class="jxgbox" style="width: 300px; height: 300px;"></div>
  * <script type="text/javascript">
@@ -181,7 +184,54 @@ var priv = {
  *                     c1.setText('label 2');
  *                     b1.setText('Texts are changed');
  *                 }],
- *                 {cssStyle: 'width:400px'});
+ *                 {cssStyle: 'width:200px'});
+ *
+ *     })();
+ *
+ * </script><pre>
+ *
+ * @example
+ * // Set the CSS class of the button
+ *
+ * // CSS:
+ * &lt;style&gt;
+ * .mybutton > button {
+ *   background-color: #04AA6D;
+ *   border: none;
+ *   color: white;
+ *   padding: 1px 3px;
+ *   text-align: center;
+ *   text-decoration: none;
+ *   display: inline-block;
+ *   font-size: 16px;
+ * }
+ * &lt;/style&gt;
+ *
+ * // JavaScript:
+ * var button = board.create('button',
+ *     [1, 4, 'answers', function () {}],
+ *     {cssClass:'mybutton', highlightCssClass: 'mybutton'});
+ *
+ * </pre>
+ * <style>
+ * .mybutton > button {
+ *   background-color: #04AA6D;
+ *   border: none;
+ *   color: white;
+ *   padding: 1px 3px;
+ *   text-align: center;
+ *   text-decoration: none;
+ *   display: inline-block;
+ *   font-size: 16px;
+ * }
+ * </style>
+ * <div id="JXG2da6cf73-8c2e-495c-bd31-42de43b71cf8" class="jxgbox" style="width: 300px; height: 300px;"></div>
+ * <script type="text/javascript">
+ *     (function() {
+ *         var board = JXG.JSXGraph.initBoard('JXG2da6cf73-8c2e-495c-bd31-42de43b71cf8',
+ *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+ *       var button = board.create('button', [1, 4, 'answers', function () {
+ *       }], {cssClass:'mybutton', highlightCssClass: 'mybutton'});
  *
  *     })();
  *

package/src/element/checkbox.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -54,9 +54,13 @@ var priv = {
 /**
  * @class This element is used to provide a constructor for special texts containing a
  * form checkbox element.
- * <p>
  * For this element, the attribute "display" has to have the value 'html' (which is the default).
- * <p>
+ *
+ * <p><b>Setting a CSS class:</b> The attribute <tt>cssClass</tt> affects the HTML div element that contains the checkbox element. To change the CSS properties of the HTML checkbox element a selector of the form
+ * <tt>.mycheck > checkbox { ... }</tt> has to be used. See the analog example for buttons:
+ * {@link Button}.
+ *
+ * <p><b>Access the checkbox element with JavaScript:</b>
  * The underlying HTML checkbox element can be accessed through the sub-object 'rendNodeCheck', e.g. to
  * add event listeners.
  *

package/src/element/comb.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2018-2023
+    Copyright 2018-2024
         Alfred Wassermann,
         Tigran Saluev
 

package/src/element/composition.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/element/conic.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/element/grid.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -216,10 +216,10 @@ import Const from "../base/constants.js";
  * </script><pre>
  */
 JXG.createGrid = function (board, parents, attributes) {
-    const eps = Mat.eps,       // to avoid rounding errors
-        maxLines = 5000;    // maximum number of vertical or horizontal grid elements (abort criterion for performance reasons)
+    var eps = Mat.eps,       // to avoid rounding errors
+        maxLines = 5000,    // maximum number of vertical or horizontal grid elements (abort criterion for performance reasons)
 
-    var majorGrid,      // main object which will be returned as grid
+        majorGrid,      // main object which will be returned as grid
         minorGrid,      // sub-object
         parentAxes,     // {Array} array of user defined axes (allowed length 0, 1 or 2)
 
@@ -913,9 +913,9 @@ JXG.createGrid = function (board, parents, attributes) {
 
                 } else {
                     if ((
-                            YdisTo0 - minorRadius[1] - majorRadius[1] < eps ||
-                            YdisFrom0 - minorRadius[1] - majorRadius[1] < eps
-                        )) {
+                        YdisTo0 - minorRadius[1] - majorRadius[1] < eps ||
+                        YdisFrom0 - minorRadius[1] - majorRadius[1] < eps
+                    )) {
                         // if major grid elements (on 0 or axes) are not existing, minor grid elements have to exist. Otherwise:
                         if ((
                             majorDrawZeroOrigin ||

package/src/element/input.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -59,13 +59,16 @@ var priv = {
 /**
  * @class This element is used to provide a constructor for special texts containing a
  * HTML form input element.
- * <p>
- * If the width of element is set with the attribute "cssStyle", the width of the
- * label must be added.
- * <p>
  * For this element, the attribute "display" has to have the value 'html' (which is the default).
- * <p>
- * The underlying HTML input field can be accessed through the sub-object 'rendNodeInput', e.g. to
+ * If the width of element is set with the attribute "cssStyle", the width of the
+ * label must be added because cssStyle affects the surrounding div element.
+ *
+ * <p><b>Setting a CSS class:</b> The attribute <tt>cssClass</tt> affects the HTML div element that contains the input element. To change the CSS properties of the HTML input element a selector of the form
+ * <tt>.myinput > input { ... }</tt> has to be used. See the analog example for buttons:
+ * {@link Button}.
+ *
+ * <p><b>Access the input element with JavaScript:</b>
+ * The underlying HTML button element can be accessed through the sub-object 'rendNodeInput', e.g. to
  * add event listeners.
  *
  * @pseudo

package/src/element/locus.js

@@ -1,5 +1,5 @@
 /*
- Copyright 2008-2023
+ Copyright 2008-2024
  Matthias Ehmann,
  Michael Gerhaeuser,
  Carsten Miller,

package/src/element/measure.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/element/sector.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2023
+    Copyright 2008-2024
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,