jsxgraph 1.3.0 → 1.4.1

package/src/element/composition.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -153,7 +153,13 @@ define([
 
         t.update();
 
-        t.generatePolynomial = function () {
+        /**
+         * Used to generate a polynomial for the orthogonal projection
+         * @name Orthogonalprojection#generatePolynomial
+         * @returns {Array} An array containing the generated polynomial.
+         * @private
+         */
+         t.generatePolynomial = function () {
             /*
              *  Perpendicular takes point P and line L and creates point T and line M:
              *
@@ -353,7 +359,13 @@ define([
 
         t.update();
 
-        t.generatePolynomial = function () {
+        /**
+         * Used to generate a polynomial for the perpendicular point
+         * @name PerpendicularPoint#generatePolynomial
+         * @returns {Array} An array containing the generated polynomial.
+         * @private
+         */
+         t.generatePolynomial = function () {
             /*
              *  Perpendicular takes point P and line L and creates point T and line M:
              *
@@ -588,7 +600,13 @@ define([
 
         t.prepareUpdate().update();
 
-        t.generatePolynomial = function () {
+        /**
+         * Used to generate a polynomial for the midpoint.
+         * @name Midpoint#generatePolynomial
+         * @returns {Array} An array containing the generated polynomial.
+         * @private
+         */
+         t.generatePolynomial = function () {
             /*
              *  Midpoint takes two point A and B or line L (with points P and Q) and creates point T:
              *
@@ -1040,44 +1058,131 @@ define([
                 l = board.create('line', [
                     function () {
                         var i = Math.floor(p.position),
-                            lbda = p.position - i;
+                            lbda = p.position - i,
+                            p1, p2, t, A, B, C, D, dx, dy, d;
 
-                        if (i === c.numberPoints - 1) {
-                            i -= 1;
-                            lbda = 1;
+                        if (c.bezierdegree === 1) {
+                            if (i === c.numberPoints - 1) {
+                                i -= 1;
+                                lbda = 1;
+                            }
+                        } else if (c.bezierDegree === 3) {
+                            // i is start of the Bezier segment
+                            // t is the position in the Bezier segment
+                            i = Math.floor(p.position * (c.numberPoints - 1) / 3) * 3;
+                            t = (p.position * (c.numberPoints - 1) - i) / 3;
+                            if (i >= c.numberPoints - 1) {
+                                i = c.numberPoints - 4;
+                                t = 1;
+                            }
+                        } else {
+                            return 0;
                         }
 
                         if (i < 0) {
                             return 1;
                         }
 
-                        return (c.Y(i) + lbda * (c.Y(i + 1) - c.Y(i))) * (c.Y(i) - c.Y(i + 1)) - (c.X(i) + lbda * (c.X(i + 1) - c.X(i))) * (c.X(i + 1) - c.X(i));
+                        if (c.bezierDegree === 1) {
+                            return (c.Y(i) + lbda * (c.Y(i + 1) - c.Y(i))) * (c.Y(i) - c.Y(i + 1)) - (c.X(i) + lbda * (c.X(i + 1) - c.X(i))) * (c.X(i + 1) - c.X(i));
+                        } else {
+                            A = c.points[i].usrCoords;
+                            B = c.points[i + 1].usrCoords;
+                            C = c.points[i + 2].usrCoords;
+                            D = c.points[i + 3].usrCoords;
+                            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]) + 2 * (1 - t) * t * (C[2] - B[2]) + t * t * (D[2]- C[2]);
+                            d = Math.sqrt(dx * dx + dy * dy);
+                            dx /= d;
+                            dy /= d;
+                            p1 = p.coords.usrCoords;
+                            p2 = [1, p1[1] - dy, p1[2] + dx];
+                            return p1[2] * p2[1] - p1[1] * p2[2];
+                        }
                     },
                     function () {
-                        var i = Math.floor(p.position);
+                        var i = Math.floor(p.position),
+                            p1, p2, t, A, B, C, D, dx, dy, d;
 
-                        if (i === c.numberPoints - 1) {
-                            i -= 1;
+                        if (c.bezierdegree === 1) {
+                            if (i === c.numberPoints - 1) {
+                                i -= 1;
+                            }
+                        } else if (c.bezierDegree === 3) {
+                            // i is start of the Bezier segment
+                            // t is the position in the Bezier segment
+                            i = Math.floor(p.position * (c.numberPoints - 1) / 3) * 3;
+                            t = (p.position * (c.numberPoints - 1) - i) / 3;
+                            if (i >= c.numberPoints - 1) {
+                                i = c.numberPoints - 4;
+                                t = 1;
+                            }
+                        } else {
+                            return 0;
                         }
 
                         if (i < 0) {
                             return 0;
                         }
+                        if (c.bezierDegree === 1) {
+                            return c.X(i + 1) - c.X(i);
+                        } else {
+                            A = c.points[i].usrCoords;
+                            B = c.points[i + 1].usrCoords;
+                            C = c.points[i + 2].usrCoords;
+                            D = c.points[i + 3].usrCoords;
+                            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]) + 2 * (1 - t) * t * (C[2] - B[2]) + t * t * (D[2]- C[2]);
+                            d = Math.sqrt(dx * dx + dy * dy);
+                            dx /= d;
+                            dy /= d;
+                            p1 = p.coords.usrCoords;
+                            p2 = [1, p1[1] - dy, p1[2] + dx];
+                            return p2[2] - p1[2];
+                        }
 
-                        return c.X(i + 1) - c.X(i);
                     },
                     function () {
-                        var i = Math.floor(p.position);
+                        var i = Math.floor(p.position),
+                            p1, p2, t, A, B, C, D, dx, dy, d;
 
-                        if (i === c.numberPoints - 1) {
-                            i -= 1;
+                        if (c.bezierdegree === 1) {
+                            if (i === c.numberPoints - 1) {
+                                i -= 1;
+                            }
+                        } else if (c.bezierDegree === 3) {
+                            // i is start of the Bezier segment
+                            // t is the position in the Bezier segment
+                            i = Math.floor(p.position * (c.numberPoints - 1) / 3) * 3;
+                            t = (p.position * (c.numberPoints - 1) - i) / 3;
+                            if (i >= c.numberPoints - 1) {
+                                i = c.numberPoints - 4;
+                                t = 1;
+                            }
+                        } else {
+                            return 0;
                         }
 
                         if (i < 0) {
                             return 0;
                         }
 
-                        return c.Y(i + 1) - c.Y(i);
+                        if (c.bezierDegree === 1) {
+                            return c.Y(i + 1) - c.Y(i);
+                        } else {
+                            A = c.points[i].usrCoords;
+                            B = c.points[i + 1].usrCoords;
+                            C = c.points[i + 2].usrCoords;
+                            D = c.points[i + 3].usrCoords;
+                            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]) + 2 * (1 - t) * t * (C[2] - B[2]) + t * t * (D[2]- C[2]);
+                            d = Math.sqrt(dx * dx + dy * dy);
+                            dx /= d;
+                            dy /= d;
+                            p1 = p.coords.usrCoords;
+                            p2 = [1, p1[1] - dy, p1[2] + dx];
+                            return p1[1] - p2[1];
+                        }
                     }
                 ], attr);
             }
@@ -2189,7 +2294,7 @@ define([
      * within the interval <tt>i</tt>.
      * @example
      * var c1 = board.create('functiongraph', [function (t) { return t*t*t; }]);
-     * var i1 = board.create('integral', [[-1.0, 4.0], c1]);
+     * var i1 = board.create('integral', [[-2.0, 2.0], c1]);
      * </pre><div class="jxgbox" id="JXGd45d7188-6624-4d6e-bebb-1efa2a305c8a" style="width: 400px; height: 400px;"></div>
      * <script type="text/javascript">
      *   var intex1_board = JXG.JSXGraph.initBoard('JXGd45d7188-6624-4d6e-bebb-1efa2a305c8a', {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
@@ -2540,7 +2645,10 @@ define([
         c.elType = 'grid';
         c.type = Const.OBJECT_TYPE_GRID;
 
-        c.updateDataArray = function () {
+        /**
+         * @ignore
+         */
+         c.updateDataArray = function () {
             var start, end, i, topLeft, bottomRight,
                 gridX = Type.evaluate(this.visProp.gridx),
                 gridY = Type.evaluate(this.visProp.gridy);

package/src/element/conic.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -69,7 +69,8 @@ define([
      * numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
      * @param {JXG.Point,array_JXG.Point,array_number,function} point1,point2,number Parent elements can be two elements either of type {@link JXG.Point} or array of
      * numbers describing the coordinates of a point. The third parameter is a number/function which defines the length of the major axis
-     * Optional parameters four and five are numbers which define the curve length (e.g. start/end). Default values are -pi and pi.
+     * @param {Number} start (Optional) parameter of the curve start, default: 0.
+     * @param {Number} end (Optional) parameter for the curve end, default: 2π.
      * @example
      * // Create an Ellipse by three points
      * var A = board.create('point', [-1,4]);
@@ -78,12 +79,45 @@ define([
      * var el = board.create('ellipse',[A,B,C]);
      * </pre><div class="jxgbox" id="JXGa4d7fb6f-8708-4e45-87f2-2379ae2bd2c0" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     *   (function() {
      *   var glex1_board = JXG.JSXGraph.initBoard('JXGa4d7fb6f-8708-4e45-87f2-2379ae2bd2c0', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [-1,4]);
      *   var B = glex1_board.create('point', [-1,-4]);
      *   var C = glex1_board.create('point', [1,1]);
      *   var el = glex1_board.create('ellipse',[A,B,C]);
+     * })();
      * </script><pre>
+     *
+     * @example
+     * // Create an elliptical arc
+     * var p1 = board.create('point', [-1, 2]);
+     * var p2 = board.create('point', [ 1, 2]);
+     * var p3 = board.create('point', [0, 3]);
+     * 
+     * var ell = board.create('ellipse', [
+     *   p1, p2, p3, 0, Math.PI], {
+     *   lastArrow: {type: 7}
+     * });
+     * 
+     * </pre><div id="JXG950f7c07-27a4-4c67-9505-c73c22ce9345" class="jxgbox" style="width: 300px; height: 300px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXG950f7c07-27a4-4c67-9505-c73c22ce9345',
+     *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+     *     var p1 = board.create('point', [-1, 2]);
+     *     var p2 = board.create('point', [ 1, 2]);
+     *     var p3 = board.create('point', [0, 3]);
+     *     
+     *     var ell = board.create('ellipse', [
+     *       p1, p2, p3, 0, Math.PI], {
+     *       lastArrow: {type: 7}
+     *     });
+     * 
+     *     })();
+     * 
+     * </script><pre>
+     * 
+*
      */
     JXG.createEllipse = function (board, parents, attributes) {
         var polarForm, curve, M, C, majorAxis, i,
@@ -287,7 +321,8 @@ define([
      * numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
      * @param {JXG.Point,array_JXG.Point,array_number,function} point1,point2,number Parent elements can be two elements either of type {@link JXG.Point} or array of
      * numbers describing the coordinates of a point. The third parameter is a number/function which defines the length of the major axis
-     * Optional parameters four and five are numbers which define the curve length (e.g. start/end). Default values are -pi and pi.
+     * @param {Number} start (Optional) parameter of the curve start, default: -&pi;.
+     * @param {Number} end (Optional) parameter for the curve end, default: &pi;.
      * @example
      * // Create an Hyperbola by three points
      * var A = board.create('point', [-1,4]);
@@ -296,11 +331,13 @@ define([
      * var el = board.create('hyperbola',[A,B,C]);
      * </pre><div class="jxgbox" id="JXGcf99049d-a3fe-407f-b936-27d76550f8c4" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     *   (function(){
      *   var glex1_board = JXG.JSXGraph.initBoard('JXGcf99049d-a3fe-407f-b936-27d76550f8c4', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [-1,4]);
      *   var B = glex1_board.create('point', [-1,-4]);
      *   var C = glex1_board.create('point', [1,1]);
      *   var el = glex1_board.create('hyperbola',[A,B,C]);
+     * })();
      * </script><pre>
      */
     JXG.createHyperbola = function (board, parents, attributes) {
@@ -482,12 +519,14 @@ define([
      * var el = board.create('parabola',[C,l]);
      * </pre><div class="jxgbox" id="JXG524d1aae-217d-44d4-ac58-a19c7ab1de36" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     * (function() {
      *   var glex1_board = JXG.JSXGraph.initBoard('JXG524d1aae-217d-44d4-ac58-a19c7ab1de36', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [-1,4]);
      *   var B = glex1_board.create('point', [-1,-4]);
      *   var l = glex1_board.create('line', [A,B]);
      *   var C = glex1_board.create('point', [1,1]);
      *   var el = glex1_board.create('parabola',[C,l]);
+     * })();
      * </script><pre>
      *
      * @example
@@ -506,7 +545,7 @@ define([
      *
      */
     JXG.createParabola = function (board, parents, attributes) {
-        var polarForm, curve, M, i,
+        var polarForm, curve, M,
             // focus
             F1 = parents[0],
             // directrix
@@ -535,7 +574,7 @@ define([
         }
 
         // Create line if given as array of two points.
-        if (Type.isArray(l) && l.length == 2) {
+        if (Type.isArray(l) && l.length === 2) {
             attr_line = Type.copyAttributes(attributes, board.options, 'conic', 'line');
             l = board.create('line', l, attr_line);
         }
@@ -684,6 +723,7 @@ define([
      *  var conic = board.create('conic',[A,B,C,D,E]);
      * </pre><div class="jxgbox" id="JXG2d79bd6a-db9b-423c-9cba-2497f0b06320" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     * (function(){
      *   var glex1_board = JXG.JSXGraph.initBoard('JXG2d79bd6a-db9b-423c-9cba-2497f0b06320', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [1,5]);
      *   var B = glex1_board.create('point', [1,2]);
@@ -691,6 +731,7 @@ define([
      *   var D = glex1_board.create('point', [0,0]);
      *   var E = glex1_board.create('point', [-1,5]);
      *   var conic = glex1_board.create('conic',[A,B,C,D,E]);
+     * })();
      * </script><pre>
      *
      * @example

package/src/element/input.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -171,6 +171,7 @@ define([
         t.Value = function () {
             return this._value;
         };
+
         /**
          * Sets value of the input element.
          * @name set
@@ -180,6 +181,36 @@ define([
          * @param {String} val
          * @returns {JXG.GeometryElement} Reference to the element.
          *
+         * @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'});
+         *
+         * </pre><div id="JXG11cac8ff-2354-47e7-9da4-eb298e53de05" class="jxgbox" style="width: 300px; height: 300px;"></div>
+         * <script type="text/javascript">
+         *     (function() {
+         *         var board = JXG.JSXGraph.initBoard('JXG11cac8ff-2354-47e7-9da4-eb298e53de05',
+         *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+         *             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'});
+         *
+         *     })();
+         *
+         * </script><pre>
+         *
          */
         t.set = function (val) {
             this._value = val;

package/src/element/locus.js

@@ -1,5 +1,5 @@
 /*
- Copyright 2008-2021
+ Copyright 2008-2022
  Matthias Ehmann,
  Michael Gerhaeuser,
  Carsten Miller,
@@ -112,7 +112,7 @@ define([
         c.setParents([p.id]);
 
         /**
-         * should be documented in JXG.Curve
+         * Should be documented in JXG.Curve
          * @ignore
          */
         c.updateDataArray = function () {

package/src/element/measure.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -85,7 +85,7 @@ define([
      */
     JXG.createTapemeasure = function (board, parents, attributes) {
         var pos0, pos1,
-            attr, withTicks, withText, precision,
+            attr, withTicks, withText, digits,
             li, p1, p2, n, ti;
 
         pos0 = parents[0];
@@ -106,7 +106,12 @@ define([
         attr = Type.copyAttributes(attributes, board.options, 'tapemeasure');
         withTicks = attr.withticks;
         withText = attr.withlabel;
-        precision = attr.precision;
+        digits = attr.digits;
+
+        if (digits === 2 && attr.precision !== 2) {
+            // Backward compatibility
+            digits = attr.precision;
+        }
 
         // Below, we will replace the label by the measurement function.
         if (withText) {
@@ -122,7 +127,7 @@ define([
                 n = '';
             }
             li.label.setText(function () {
-                return n + Type.toFixed(p1.Dist(p2), precision);
+                return n + Type.toFixed(p1.Dist(p2), digits);
             });
         }
 

package/src/element/sector.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -198,7 +198,10 @@ define([
         };
 
         if (type === '2lines') {
-            el.Radius = function () {
+            /**
+             * @ignore
+             */
+             el.Radius = function () {
                 var r = Type.evaluate(parents[4]);
                 if (r === 'auto') {
                     return this.autoRadius();
@@ -299,8 +302,8 @@ define([
             };
 
             el.methodMap = JXG.deepCopy(el.methodMap, {
-                radius: 'getRadius',
-                getRadius: 'getRadius',
+                radius: 'Radius',
+                getRadius: 'Radius',
                 setRadius: 'setRadius'
             });
 
@@ -364,8 +367,8 @@ define([
                 center: 'center',
                 radiuspoint: 'radiuspoint',
                 anglepoint: 'anglepoint',
-                radius: 'getRadius',
-                getRadius: 'getRadius',
+                radius: 'Radius',
+                getRadius: 'Radius',
                 setRadius: 'setRadius'
             });
 
@@ -579,7 +582,10 @@ define([
          * @param {Number, Function} value New radius.
          */
         el.setRadius = function (val) {
-            el.Radius = function () {
+            /**
+             * @ignore
+             */
+             el.Radius = function () {
                 var r = Type.evaluate(val);
                 if (r === 'auto') {
                     return this.autoRadius();
@@ -965,8 +971,11 @@ define([
              */
             el.pointsquare = el.point3 = el.anglepoint = points[2];
 
-            // Set the angle radius, also @see @link Sector#autoRadius
+            /**
+             * @ignore
+             */
             el.Radius = function () {
+                // Set the angle radius, also @see @link Sector#autoRadius
                 var r = Type.evaluate(radius);
                 if (r === 'auto') {
                     return el.autoRadius();
@@ -1110,14 +1119,35 @@ define([
             *
             */
             el.setAngle = function (val) {
-                var t, t2,
+                var t1, t2, val2,
                     p = this.anglepoint,
                     q = this.radiuspoint;
 
                 if (p.draggable()) {
-                    t = this.board.create('transform', [val, this.center], {type: 'rotate'});
-                    p.addTransform(q, t);
-                    // p.isDraggable = false;
+                    t1 = this.board.create('transform', [val, this.center], {type: 'rotate'});
+                    p.addTransform(q, t1);
+                    // Immediately apply the transformation.
+                    // This prevents that jumping elements can be watched.
+                    t1.update();
+                    p.moveTo(Mat.matVecMult(t1.matrix, q.coords.usrCoords));
+
+                    if (Type.isFunction(val)) {
+                        /**
+                         * @ignore
+                         */
+                        val2 = function() { return Math.PI * 2 - val(); };
+                    } else {
+                        /**
+                         * @ignore
+                         */
+                         val2 = function() { return Math.PI * 2 - val; };
+                    }
+                    t2 = this.board.create('transform', [val2, this.center], {type: 'rotate'});
+                    p.coords.on('update', function() {
+                        t2.update();
+                        q.moveTo(Mat.matVecMult(t2.matrix, p.coords.usrCoords));
+                    });
+
                     p.setParents(q);
                 }
                 return this;
@@ -1134,11 +1164,15 @@ define([
             */
             el.free = function () {
                 var p = this.anglepoint;
+
                 if (p.transformations.length > 0) {
                     p.transformations.pop();
                     p.isDraggable = true;
                     p.parents = [];
+
+                    p.coords.off('update');
                 }
+
                 return this;
             };
 

package/src/element/slider.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -143,7 +143,7 @@ define([
      * @example
      * // Set colors
      * var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {
-     * 
+     *
      *   baseline: { strokeColor: 'blue'},
      *   highline: { strokeColor: 'red'},
      *   fillColor: 'yellow',
@@ -151,16 +151,16 @@ define([
      *   name: 'xyz', // Not shown, if suffixLabel is set
      *   suffixLabel: 'x = ',
      *   postLabel: ' u'
-     * 
+     *
      * });
-     * 
+     *
      * </pre><div id="JXGd96c9e2c-2c25-4131-b6cf-9dbb80819401" class="jxgbox" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
      *     (function() {
      *         var board = JXG.JSXGraph.initBoard('JXGd96c9e2c-2c25-4131-b6cf-9dbb80819401',
      *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
      *     var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {
-     *     
+     *
      *       baseline: { strokeColor: 'blue'},
      *       highline: { strokeColor: 'red'},
      *       fillColor: 'yellow',
@@ -168,24 +168,23 @@ define([
      *       name: 'xyz', // Not shown, if suffixLabel is set
      *       suffixLabel: 'x = ',
      *       postLabel: ' u'
-     *     
+     *
      *     });
-     * 
+     *
      *     })();
-     * 
+     *
      * </script><pre>
-     * 
+     *
  */
     JXG.createSlider = function (board, parents, attributes) {
         var pos0, pos1, smin, start, smax, sdiff,
             p1, p2, l1, ticks, ti, startx, starty, p3, l2, t,
-            withText, withTicks, snapWidth, sw, s, attr, precision;
+            withText, withTicks, snapWidth, sw, s, attr, digits;
 
         attr = Type.copyAttributes(attributes, board.options, 'slider');
         withTicks = attr.withticks;
         withText = attr.withlabel;
         snapWidth = attr.snapwidth;
-        precision = attr.precision;
 
         // start point
         attr = Type.copyAttributes(attributes, board.options, 'slider', 'point1');
@@ -324,10 +323,16 @@ define([
                 },
                 function () {
                     var n,
+                        d = Type.evaluate(p3.visProp.digits),
                         sl = Type.evaluate(p3.visProp.suffixlabel),
                         ul = Type.evaluate(p3.visProp.unitlabel),
                         pl = Type.evaluate(p3.visProp.postlabel);
 
+                    if (d === 2 && Type.evaluate(p3.visProp.precision) !== 2) {
+                        // Backwards compatibility
+                        d = Type.evaluate(p3.visProp.precision);
+                    }
+
                     if (sl !== null) {
                         n = sl;
                     } else if (p3.name && p3.name !== '') {
@@ -336,7 +341,7 @@ define([
                         n = '';
                     }
 
-                    n += Type.toFixed(p3.Value(), precision);
+                    n += Type.toFixed(p3.Value(), d);
 
                     if (ul !== null) {
                         n += ul;

package/src/element/slopetriangle.js

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