jsxgraph 1.3.1 → 1.4.2

package/src/options.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -213,7 +213,7 @@ define([
              * axis:true in {@link JXG.JSXGraph#initBoard}.
              *
              * @name JXG.Board#defaultAxes
-             * @type {Object}
+             * @type Object
              * @default {x: {name:'x'}, y: {name: 'y'}}
              *
              */
@@ -299,7 +299,7 @@ define([
              * </ul>
              *
              * @name JXG.Board#screenshot
-             * @type {Object}
+             * @type Object
              */
             screenshot: {
                 scale: 1.0,
@@ -324,7 +324,9 @@ define([
              * controls if the icon is shown.
              * The following attribute(s) can be set:
              * <ul>
-             *  <li>symbol: Unicode symbol which is shown in the navigation bar. Default: '\u25a1'
+             *  <li>symbol (String): Unicode symbol which is shown in the navigation bar. Default: '\u25a1'
+             *  <li>id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken.
+             * It may be an outer div element, e.g. if the old aspect ratio trick is used. Default: null, i.e. use the JSXGraph div.
              * </ul>
              *
              * @example
@@ -355,10 +357,11 @@ define([
              *
              * @name JXG.Board#fullscreen
              * @see JXG.Board#showFullscreen
-             * @type {Object}
+             * @type Object
              */
             fullscreen: {
-                symbol: '\u26f6' //'\u25a1'
+                symbol: '\u25a1', // '\u26f6' (not supported by MacOS), // '\u25a1'
+                id: null
             },
 
             /**
@@ -543,13 +546,13 @@ define([
              *   factorY: 1.25,  // vertical zoom factor (multiplied to {@link JXG.Board#zoomY})
              *   wheel: true,     // allow zooming by mouse wheel or
              *   				   // by pinch-to-toom gesture on touch devices
-             *   needShift: true, // mouse wheel zooming needs pressing of the shift key
-             *   min: 0.001        // minimal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomOut
-             *   max: 1000.0       // maximal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomIn
+             *   needShift: true,   // mouse wheel zooming needs pressing of the shift key
+             *   min: 0.001,        // minimal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomOut
+             *   max: 1000.0,       // maximal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomIn
              *
-             *   pinchHorizontal: true // Allow pinch-to-zoom to zoom only horizontal axis
-             *   pinchVertical: true   // Allow pinch-to-zoom to zoom only vertical axis
-             *   pinchSensitivity: 7   // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
+             *   pinchHorizontal: true, // Allow pinch-to-zoom to zoom only horizontal axis
+             *   pinchVertical: true,   // Allow pinch-to-zoom to zoom only vertical axis
+             *   pinchSensitivity: 7    // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
              * }
              * </pre>
              *
@@ -649,11 +652,11 @@ define([
              *             panCtrl: false
              *         }
              *     });
-             * 
+             *
              *     })();
-             * 
+             *
              * </script><pre>
-             * 
+             *
              *
              * @see JXG.Board#keyDownListener
              * @see JXG.Board#keyFocusInListener
@@ -701,11 +704,11 @@ define([
              *             axis: true,
              *             resize: {enabled: true, throttle: 200}
              *         });
-             * 
+             *
              *     })();
-             * 
+             *
              * </script><pre>
-             * 
+             *
              *
              */
             resize: {
@@ -750,11 +753,11 @@ define([
              *             axis: true,
              *             moveTarget: document
              *         });
-             * 
+             *
              *     })();
-             * 
+             *
              * </script><pre>
-             * 
+             *
              *
              */
             moveTarget: null,
@@ -853,7 +856,7 @@ define([
          * </pre>
          * These settings are overruled by the CSS class 'JXG_navigation'.
          * @deprecated
-         * @type {Object}
+         * @type Object
          * @name JXG.Options#navbar
          *
          */
@@ -892,7 +895,7 @@ define([
              * @see JXG.GeometryElement#highlightStrokeOpacity
              * @default {@link JXG.Options.elements.color#strokeColor}
              */
-            strokeColor: '#0000ff',
+            strokeColor: Color.palette.blue,
 
             /**
              * The stroke color of the given geometry element when the user moves the mouse over it.
@@ -904,7 +907,7 @@ define([
              * @see JXG.GeometryElement#highlightStrokeOpacity
              * @default {@link JXG.Options.elements.color#highlightStrokeColor}
              */
-            highlightStrokeColor: '#C3D9FF',
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * The fill color of this geometry element.
@@ -915,7 +918,7 @@ define([
              * @see JXG.GeometryElement#highlightFillOpacity
              * @default {@link JXG.Options.elements.color#fillColor}
              */
-            fillColor: 'red',
+            fillColor: Color.palette.red,
 
             /**
              * The fill color of the given geometry element when the mouse is pointed over it.
@@ -1447,7 +1450,7 @@ define([
              * This attributes takes either the value 'inherit' or an object of the form:
              * <pre>
              * precision: {
-             *      touch: 15,
+             *      touch: 30,
              *      mouse: 4,
              *      pen: 4
              * }
@@ -1485,7 +1488,20 @@ define([
              */
             isLabel: false,
 
-
+            /**
+             * Controls if an element can get the focus with the tab key.
+             * See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">descriptiona at MDN</a>.
+             * The additional value null completely disables focus of an element.
+             * The value will be ignored if keyboard control of the board is not enabled or
+             * the element is fixed or not visible.
+             *
+             * @name JXG.GeometryElement#tabindex
+             * @type Number
+             * @default 0
+             * @see JXG.Board#keyboard
+             * @see JXG.GeometryElement#fixed
+             * @see JXG.GeometryElement#visible
+             */
             tabindex: 0
 
             // close the meta tag
@@ -1532,7 +1548,7 @@ define([
              * Attributes for the ticks labels
              *
              * @name Ticks#label
-             * @type {Object}
+             * @type Object
              * @default {}
              *
              */
@@ -1585,9 +1601,9 @@ define([
             *             }
             *         },
             *     });
-            * 
+            *
             *     })();
-            * 
+            *
             * </script><pre>
             *
             * @name Ticks#beautifulScientificTickLabels
@@ -1754,14 +1770,28 @@ define([
 
             /**
              * If a label exceeds {@link Ticks#maxLabelLength} this determines the precision used to shorten the tick label.
+             * Replaced by the digits attribute.
              *
              * @type Number
              * @name Ticks#precision
              * @see Ticks#maxLabelLength
+             * @see Ticks#digits
+             * @deprecated
              * @default 3
              */
             precision: 3,
 
+            /**
+             * If a label exceeds {@link Ticks#maxLabelLength} this determines the number of digits used to shorten the tick label.
+             *
+             * @type Number
+             * @name Ticks#digits
+             * @see Ticks#maxLabelLength
+             * @deprecated
+             * @default 3
+             */
+            digits: 3,
+
             /**
              * The default distance between two ticks. Please be aware that this value does not have
              * to be used if {@link Ticks#insertTicks} is set to true.
@@ -1777,7 +1807,7 @@ define([
              * Tick face for ticks of finite length.  By default (face: '|') this is a straight line.
              * Possible other values are '<' and '>'. These faces are used in
              * {@link JXG.Hatch} for hatch marking parallel lines.
-             * @type {String}
+             * @type String
              * @name{Ticks#face}
              * @see hatch
              * @default '|'
@@ -1806,7 +1836,7 @@ define([
 
             strokeOpacity: 1,
             strokeWidth: 1,
-            strokeColor: 'black',
+            strokeColor: '#000000',
             highlightStrokeColor: '#888888',
             fillColor: 'none',
             highlightFillColor: 'none',
@@ -1846,7 +1876,7 @@ define([
             anchor: 'middle',
             face: '|',
             strokeWidth: 2,
-            strokeColor: 'blue',
+            strokeColor: Color.palette.blue,
             ticksDistance: 0.2
         },
 
@@ -1868,12 +1898,12 @@ define([
          * }
          * </pre>
          *
-         * @type {Object}
+         * @type Object
          * @name JXG.Options#precision
          * @see JXG.GeometryElement#precision
          */
         precision: {
-            touch: 15,
+            touch: 30,
             touchMax: 100,
             mouse: 4,
             pen: 4,
@@ -1908,7 +1938,7 @@ define([
          *   trace: 0
          * }
          * </pre>
-         * @type {Object}
+         * @type Object
          * @name JXG.Options#layer
          */
         layer: {
@@ -1999,9 +2029,13 @@ define([
              */
             orthoSensitivity: 1.0,
 
-            fillColor: '#FF7F00',
-            highlightFillColor: '#FF7F00',
-            strokeColor: '#FF7F00',
+            fillColor: Color.palette.orange,
+            highlightFillColor: Color.palette.orange,
+            strokeColor: Color.palette.orange,
+            // fillColor: '#ff7f00',
+            // highlightFillColor: '#ff7f00',
+            // strokeColor: '#ff7f00',
+
             fillOpacity: 0.3,
             highlightFillOpacity: 0.3,
 
@@ -2026,7 +2060,7 @@ define([
             dot: {
                 visible: false,
                 strokeColor: 'none',
-                fillColor: 'black',
+                fillColor: '#000000',
                 size: 2,
                 face: 'o',
                 withLabel: false,
@@ -2036,7 +2070,7 @@ define([
             label: {
                 position: 'top',
                 offset: [0, 0],
-                strokeColor: '#0000FF'
+                strokeColor: Color.palette.blue
             },
 
             /**
@@ -2088,8 +2122,8 @@ define([
             lastArrow: false,
             fillColor: 'none',
             highlightFillColor: 'none',
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
             useDirection: false,
 
             /**
@@ -2281,7 +2315,7 @@ define([
              * @name Bisectorlines#line1
              */
             line1: {               //
-                strokeColor: 'black'
+                strokeColor: '#000000'
             },
 
             /**
@@ -2291,12 +2325,48 @@ define([
              * @name Bisectorlines#line2
              */
             line2: {               //
-                strokeColor: 'black'
+                strokeColor: '#000000'
             }
 
             /**#@-*/
         },
 
+        /* special options for boxplot curves */
+        boxplot: {
+            /**#@+
+             * @visprop
+             */
+
+            /**
+             *  Direction of the box plot: 'vertical' or 'horizontal'
+             *
+             * @type String
+             * @name Boxplot#dir
+             * @default: 'vertical'
+             */
+            dir: 'vertical',
+
+            /**
+             * Relative width of the maximum and minimum quantile
+             *
+             * @type Number
+             * @name Boxplot#smallWidth
+             * @default: 0.5
+             */
+            smallWidth: 0.5,
+
+            strokeWidth: 2,
+            strokeColor: Color.palette.blue,
+            fillColor: Color.palette.blue,
+            fillOpacity: 0.2,
+            highlightStrokeWidth: 2,
+            highlightStrokeColor: Color.palette.blue,
+            highlightFillColor: Color.palette.blue,
+            highlightFillOpacity: 0.1
+
+            /**#@-*/
+        },
+
         /* special button options */
         button: {
             /**#@+
@@ -2348,7 +2418,7 @@ define([
              *
              * @name isArrayOfCoordinates
              * @memberOf Cardinalspline.prototype
-             * @type {Boolean}
+             * @type Boolean
              * @default false
              */
             isArrayOfCoordinates: false,
@@ -2383,7 +2453,7 @@ define([
              */
 
             chartStyle: 'line',
-            colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#C3D9FF', '#4096EE', '#008C00'],
+            colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
             highlightcolors: null,
             fillcolor: null,
             highlightonsector: false,
@@ -2448,8 +2518,8 @@ define([
 
             fillColor: 'none',
             highlightFillColor: 'none',
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * Attributes for center point.
@@ -2461,6 +2531,12 @@ define([
                 visible: false,
                 withLabel: false,
                 fixed: false,
+
+                fillColor: Color.palette.red,
+                strokeColor: Color.palette.red,
+                highlightFillColor: '#c3d9ff',
+                highlightStrokeColor: '#c3d9ff',
+
                 name: ''
             },
 
@@ -2471,7 +2547,7 @@ define([
              * @name Circle#center
              */
             point2: {
-                visible: true,
+                visible: false,
                 withLabel: false,
                 fixed: false,
                 name: ''
@@ -2497,8 +2573,8 @@ define([
 
             fillColor: 'none',
             highlightFillColor: 'none',
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * Attributes for center point.
@@ -2510,6 +2586,10 @@ define([
                 visible: false,
                 fixed: false,
                 withLabel: false,
+                fillColor: Color.palette.red,
+                strokeColor: Color.palette.red,
+                highlightFillColor: '#c3d9ff',
+                highlightStrokeColor: '#c3d9ff',
                 name: ''
             }
             /**#@-*/
@@ -2522,8 +2602,8 @@ define([
 
             fillColor: 'none',
             highlightFillColor: 'none',
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * Attributes for center point.
@@ -2547,12 +2627,12 @@ define([
              */
 
             useDirection: true,
-            fillColor: '#00FF00',
-            highlightFillColor: '#00FF00',
+            fillColor: Color.palette.yellow,
+            highlightFillColor: Color.palette.yellow,
             fillOpacity: 0.3,
             highlightFillOpacity: 0.3,
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * Attributes for center point.
@@ -2577,8 +2657,8 @@ define([
 
             fillColor: 'none',
             highlightFillColor: 'none',
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * Attributes for foci points.
@@ -2634,7 +2714,7 @@ define([
         /* special curve options */
         curve: {
             strokeWidth: 1,
-            strokeColor: '#0000ff',
+            strokeColor: Color.palette.blue,
             fillColor: 'none',
             fixed: true,
 
@@ -2802,6 +2882,19 @@ define([
             /**#@-*/
         },
 
+        /* special foreignObject options */
+        foreignobject: {
+
+            /**#@+
+             * @visprop
+             */
+            attractors: [],
+            fixed: true,
+            visible: true
+
+            /**#@-*/
+        },
+
         glider: {
             /**#@+
              * @visprop
@@ -2822,8 +2915,8 @@ define([
             hasGrid: false,
             gridX: 1,
             gridY: 1,
-            //strokeColor: '#C0C0C0',
-            strokeColor: '#C0C0C0',
+            //strokeColor: '#c0c0c0',
+            strokeColor: '#c0c0c0',
             strokeOpacity: 0.5,
             strokeWidth: 1,
             dash: 0,    // dashed grids slow down the iPad considerably
@@ -2866,7 +2959,7 @@ define([
 
             frozen: true,
             isLabel: false,
-            strokeColor: 'black',
+            strokeColor: '#000000',
             display: 'html',
             anchorX: 'left',
             anchorY: 'middle',
@@ -2925,7 +3018,8 @@ define([
 
             /**
              * Defines together with {@link Image#snapSizeY} the grid the image snaps on to.
-             * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
+             * The image will only snap on user coordinates which are
+             * integer multiples to snapSizeX in x and snapSizeY in y direction.
              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
              * of the default ticks of the default x axes of the board.
              *
@@ -2977,8 +3071,8 @@ define([
 
             fillColor: 'none',
             highlightFillColor: 'none',
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#C3D9FF',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
 
             /**
              * Attributes of circle center.
@@ -2990,6 +3084,10 @@ define([
                 visible: false,
                 fixed: false,
                 withLabel: false,
+                fillColor: Color.palette.red,
+                strokeColor: Color.palette.red,
+                highlightFillColor: '#c3d9ff',
+                highlightStrokeColor: '#c3d9ff',
                 name: ''
             }
             /**#@-*/
@@ -3000,7 +3098,7 @@ define([
              * @visprop
              */
 
-            fillColor: 'red',
+            fillColor: Color.palette.red,
             fillOpacity: 0.2,
             strokeColor: 'none',
 
@@ -3052,9 +3150,9 @@ define([
             fixed: true,
             strokeWidth: 0,
             strokeOpacity: 0,
-            fillColor: 'red',
-            fillOpacity: 0.4,
-            highlightFillColor: 'red',
+            fillColor: Color.palette.red,
+            fillOpacity: 0.3,
+            highlightFillColor: Color.palette.red,
             highlightFillOpacity: 0.2,
 
             /**
@@ -3067,7 +3165,7 @@ define([
             curveLeft: {    // Start point
                 visible: true,
                 withLabel: false,
-                color: 'red',
+                color: Color.palette.red,
                 fillOpacity: 0.8,
                 layer: 9
             },
@@ -3096,7 +3194,7 @@ define([
             curveRight: {      // End point
                 visible: true,
                 withLabel: false,
-                color: 'red',
+                color: Color.palette.red,
                 fillOpacity: 0.8,
                 layer: 9
             },
@@ -3188,10 +3286,10 @@ define([
              */
 
             visible: 'inherit',
-            strokeColor: 'black',
+            strokeColor: '#000000',
             strokeOpacity: 1,
             highlightStrokeOpacity: 0.666666,
-            highlightStrokeColor: 'black',
+            highlightStrokeColor: '#000000',
 
             fixed: true,
 
@@ -3239,7 +3337,7 @@ define([
              *
              * @name Label#autoPosition
              * @see Label#offset
-             * @type {Boolean}
+             * @type Boolean
              * @default false
              *
              * @example
@@ -3301,9 +3399,9 @@ define([
              * (Circular) array of label colors.
              * @name: Legend#colors
              * @type Array
-             * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#C3D9FF', '#4096EE', '#008C00']"
+             * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']"
              */
-            colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#C3D9FF', '#4096EE', '#008C00'],
+            colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
 
             /**
              * Height (in px) of one legend entry
@@ -3443,8 +3541,8 @@ define([
 
             fillColor: 'none',               // Important for VML on IE
             highlightFillColor: 'none',  // Important for VML on IE
-            strokeColor: '#0000ff',
-            highlightStrokeColor: '#888888',
+            strokeColor: Color.palette.blue,
+            highlightStrokeColor: '#c3d9ff',
             withTicks: false,
 
             /**
@@ -3579,7 +3677,7 @@ define([
              * Not available for VML renderer.
              * [lineCap description]
              * @name Line#lineCap
-             * @type {String}
+             * @type String
              * @default 'butt'
              */
             lineCap: 'butt'
@@ -3631,7 +3729,7 @@ define([
              *
              * @name isArrayOfCoordinates
              * @memberOf Metapostspline.prototype
-             * @type {Boolean}
+             * @type Boolean
              * @default false
              */
             isArrayOfCoordinates: false,
@@ -3872,11 +3970,22 @@ define([
              */
             sizeUnit: 'screen',
 
-            fillColor: '#ff0000',
-            highlightFillColor: '#EEEEEE',
             strokeWidth: 2,
-            strokeColor: '#ff0000',
-            highlightStrokeColor: '#C3D9FF',
+
+            fillColor: Color.palette.red,
+            strokeColor: Color.palette.red,
+            highlightFillColor:'#c3d9ff',
+            highlightStrokeColor: '#c3d9ff',
+            // strokeOpacity: 1.0,
+            // fillOpacity: 1.0,
+            // highlightFillOpacity: 0.5,
+            // highlightStrokeOpacity: 0.5,
+
+            // fillColor: '#ff0000',
+            // highlightFillColor: '#eeeeee',
+            // strokeWidth: 2,
+            // strokeColor: '#ff0000',
+            // highlightStrokeColor: '#c3d9ff',
 
             /**
              * If true, the point size changes on zoom events.
@@ -3972,8 +4081,12 @@ define([
             snatchDistance: 0.0,
 
             /**
-             * If set to true, the point will snap to a grid defined by
-             * {@link Point#snapSizeX} and {@link Point#snapSizeY}.
+             * If set to true, the point will snap to a grid of integer multiples of
+             * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates).
+             * <p>
+             * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
+             * (given in user coordinates, not pixels) or are the intersection points
+             * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
              *
              * @name Point#snapToGrid
              *
@@ -3984,8 +4097,44 @@ define([
              */
             snapToGrid: false,
 
+            /**
+             * If set to true, the point will only snap to (possibly invisibly) grid points
+             * when within {@link Point#attractorDistance} of such a grid point.
+             * <p>
+             * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
+             * (given in user coordinates, not pixels) or are the intersection points
+             * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
+             *
+             * @name Point#attractToGrid
+             *
+             * @see Point#attractorDistance
+             * @see Point#attractorUnit
+             * @see Point#snapToGrid
+             * @see Point#snapSizeX
+             * @see Point#snapSizeY
+             * @type Boolean
+             * @default false
+             *
+             * @example
+             * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
+             *
+             * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div>
+             * <script type="text/javascript">
+             *     (function() {
+             *         var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6',
+             *             {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false});
+             *     board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
+             *
+             *     })();
+             *
+             * </script><pre>
+             *
+             */
+            attractToGrid: false,
+
             /**
              * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
+             * It is given in user coordinates, not in pixels.
              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
              * of the default ticks of the default x axes of the board.
@@ -4002,6 +4151,7 @@ define([
 
             /**
              * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
+             * It is given in user coordinates, not in pixels.
              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
              * of the default ticks of the default y axes of the board.
@@ -4056,10 +4206,12 @@ define([
              */
             hasInnerPoints: false,
 
-            fillColor: '#00FF00',
-            highlightFillColor: '#00FF00',
+            fillColor: Color.palette.yellow,
+            highlightFillColor: Color.palette.yellow,
+            // fillColor: '#00ff00',
+            // highlightFillColor: '#00ff00',
             fillOpacity: 0.3,
-            highlightFillOpacity: 0.3,
+            highlightFillOpacity: 0.2,
 
             /**
              * Is the polygon bordered by lines?
@@ -4098,8 +4250,8 @@ define([
                 layer: 9,
                 withLabel: false,
                 name: '',
-                strokeColor: '#ff0000',
-                fillColor: '#ff0000',
+                strokeColor: Color.palette.red,
+                fillColor: Color.palette.red,
                 fixed: false,
                 visible: 'inherit'
             },
@@ -4200,10 +4352,10 @@ define([
              * @default false
              */
             hasInnerPoints: false,
-            fillColor: '#00FF00',
-            highlightFillColor: '#00FF00',
+            fillColor: Color.palette.yellow,
+            highlightFillColor: Color.palette.yellow,
             fillOpacity: 0.3,
-            highlightFillOpacity: 0.3,
+            highlightFillOpacity: 0.2,
 
             /**
              * Is the polygon bordered by lines?
@@ -4240,8 +4392,8 @@ define([
             vertices: {
                 layer: 9,
                 withLabel: true,
-                strokeColor: '#ff0000',
-                fillColor: '#ff0000',
+                strokeColor: Color.palette.red,
+                fillColor: Color.palette.red,
                 fixed: false
             },
 
@@ -4266,7 +4418,7 @@ define([
 
             withLabel: false,
             fillOpacity: 0.3,
-            fillColor: '#ffff00'
+            fillColor: Color.palette.yellow
 
             /**#@-*/
         },
@@ -4277,8 +4429,11 @@ define([
              * @visprop
              */
 
-            fillColor: '#00FF00',
-            highlightFillColor: '#00FF00',
+            fillColor: Color.palette.yellow,
+            highlightFillColor: Color.palette.yellow,
+            // fillColor: '#00ff00',
+            // highlightFillColor: '#00ff00',
+
             fillOpacity: 0.3,
             highlightFillOpacity: 0.3,
             highlightOnSector: false,
@@ -4380,6 +4535,10 @@ define([
                 visible: false,
                 withLabel: false,
                 fixed: false,
+                fillColor: Color.palette.red,
+                strokeColor: Color.palette.red,
+                highlightFillColor:'#eeeeee',
+                highlightStrokeColor: Color.palette.red,
                 name: ''
             }
 
@@ -4404,13 +4563,27 @@ define([
 
             /**
              * The precision of the slider value displayed in the optional text.
+             * Replaced by the attribute "digits".
+             *
              * @memberOf Slider.prototype
              * @name precision
              * @type Number
+             * @deprecated
+             * @see Slider#digits
              * @default 2
              */
             precision: 2,
 
+            /**
+             * The number of digits of the slider value displayed in the optional text.
+             *
+             * @memberOf Slider.prototype
+             * @name digits
+             * @type Number
+             * @default 2
+             */
+            digits: 2,
+
             firstArrow: false,
             lastArrow: false,
 
@@ -4435,7 +4608,7 @@ define([
             /**
              * If not null, this replaces the part "name = " in the slider label.
              * Possible types: string, number or function.
-             * @type {String}
+             * @type String
              * @name suffixLabel
              * @memberOf Slider.prototype
              * @default null
@@ -4447,7 +4620,7 @@ define([
             /**
              * If not null, this is appended to the value in the slider label.
              * Possible types: string, number or function.
-             * @type {String}
+             * @type String
              * @name unitLabel
              * @memberOf Slider.prototype
              * @default null
@@ -4459,7 +4632,7 @@ define([
             /**
              * If not null, this is appended to the value and to unitLabel in the slider label.
              * Possible types: string, number or function.
-             * @type {String}
+             * @type String
              * @name postLabel
              * @memberOf Slider.prototype
              * @default null
@@ -4528,6 +4701,7 @@ define([
                 visible: 'inherit',
                 fixed: true,
                 scalable: false,
+                tabindex: null,
                 name: '',
                 strokeWidth: 1,
                 strokeColor: '#000000',
@@ -4546,7 +4720,7 @@ define([
 
                 // Label drawing
                 drawLabels: false,
-                precision: 2,
+                digits: 2,
                 includeBoundaries: 1,
                 drawZero: true,
                 label: {
@@ -4577,6 +4751,7 @@ define([
                 strokeWidth: 3,
                 visible: 'inherit',
                 fixed: true,
+                tabindex: null,
                 name: '',
                 strokeColor: '#000000',
                 highlightStrokeColor: '#888888'
@@ -4692,9 +4867,9 @@ define([
              * @visprop
              */
 
-            fillColor: 'red',
+            fillColor: Color.palette.red,
             fillOpacity: 0.4,
-            highlightFillColor: 'red',
+            highlightFillColor: Color.palette.red,
             highlightFillOpacity: 0.3,
 
             borders: {
@@ -4817,13 +4992,26 @@ define([
 
             /**
              * The precision of the tape measure value displayed in the optional text.
+             * Replaced by the attribute digits
+             *
              * @memberOf Tapemeasure.prototype
              * @name precision
              * @type Number
+             * @deprecated
+             * @see Tapemeasure#digits
              * @default 2
              */
             precision: 2,
 
+            /**
+             * The precision of the tape measure value displayed in the optional text.
+             * @memberOf Tapemeasure.prototype
+             * @name precision
+             * @type Number
+             * @default 2
+             */
+            digits: 2,
+
             /**
              * Attributes for first helper point defining the tape measure position.
              *
@@ -4935,11 +5123,11 @@ define([
              *         var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9',
              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
              *     var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
-             * 
+             *
              *     })();
-             * 
+             *
              * </script><pre>
-             * 
+             *
              */
             fontUnit: 'px',
 
@@ -4987,8 +5175,8 @@ define([
              */
             isLabel: false,
 
-            strokeColor: 'black',
-            highlightStrokeColor: 'black',
+            strokeColor: '#000000',
+            highlightStrokeColor: '#000000',
             highlightStrokeOpacity: 0.666666,
 
             /**
@@ -5221,7 +5409,7 @@ define([
              *
              * @example
              * // Load MathJax:
-             * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+             * // &lt;script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"&lt;&lt;/script&gt;
              *
              * // function and its derivative
              * var f1 = function(x) { return x * x * x; },
@@ -5328,9 +5516,99 @@ define([
              *
              * </script><pre>
              *
+             * @example
+             * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
+             * board.options.text.useMathjax = true;
+             *
+             * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
+             *     suffixlabel:'\\(t_1=\\)',
+             *     unitLabel: ' \\(\\text{ ms}\\)',
+             *     snapWidth:0.01}),
+             *
+             * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
+             * text1 = board.create('text', [5, 1, function(){
+             *             return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
+             *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
+             *
+             * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div>
+             * <script type="text/javascript">
+             *     (function() {
+             *         var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6',
+             *             {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false});
+             *     board.options.text.useMathjax = true;
+             *
+             *     a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
+             *         suffixlabel:'\\(t_1=\\)',
+             *         unitLabel: ' \\(\\text{ ms}\\)',
+             *         snapWidth:0.01}),
+             *
+             *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
+             *     text1 = board.create('text', [5, 1, function(){
+             *                 return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
+             *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
+             *
+             *     })();
+             *
+             * </script><pre>
+             *
              */
             useMathJax: false,
 
+            /**
+             *
+             * If true, KaTeX will be used to render the input string.
+             * For this feature, katex.min.js and katex.min.css have to be included.
+             * <p>
+             * The example below does not work, because there is a conflict with
+             * the MathJax library which is used below.
+             * </p>
+             *
+             * @name useKatex
+             * @memberOf Text.prototype
+             * @default false
+             * @type Boolean
+             *
+             *
+             * @example
+             * JXG.Options.text.useKatex = true;
+             *
+             * const board = JXG.JSXGraph.initBoard('jxgbox', {
+             *     boundingbox: [-2, 5, 8, -5], axis:true
+             * });
+             *
+             * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
+             *     suffixlabel:'t_1=',
+             *     unitLabel: ' \\text{ ms}',
+             *     snapWidth:0.01});
+             *
+             * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
+             * text1 = board.create('text', [5, 1, function(){
+             *             return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
+             *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
+             *
+             * </pre>
+             * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.css" integrity="sha384-0cCFrwW/0bAk1Z/6IMgIyNU3kfTcNirlObr4WjrUU7+hZeD6ravdYJ3kPWSeC31M" crossorigin="anonymous">
+             * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script>
+             * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div>
+             * <script type="text/javascript">
+             *     (function() {
+             *         var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869',
+             *             {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false});
+             *     board.options.useKatex = true;
+             *     var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
+             *         suffixlabel:'t_1=',
+             *         unitLabel: ' \\text{ ms}',
+             *         snapWidth:0.01});
+             *
+             *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
+             *     text1 = board.create('text', [5, 1, function(){
+             *                 return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
+             *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
+             *
+             *     })();
+             *
+             * </script><pre>
+             */
             useKatex: false,
 
             /**
@@ -5508,7 +5786,7 @@ define([
             arrow: {
                 strokeWidth: 2,
                 withLabel: false,
-                strokeColor: '#ff0000',
+                strokeColor: Color.palette.red,
                 lastArrow: true
             }
             /**#@-*/
@@ -5520,7 +5798,7 @@ define([
          * It is used in {@link JXG.GeometryElement#setAttribute} and in
          * the constructor {@link JXG.GeometryElement}.
          * Attention: In Options.js abbreviations are not allowed.
-         * @type {Object}
+         * @type Object
          * @name JXG.Options#shortcuts
          *
          */