      1 /*
      2     Copyright 2008-2025
      3         Matthias Ehmann,
      4         Michael Gerhaeuser,
      5         Carsten Miller,
      6         Bianca Valentin,
      7         Alfred Wassermann,
      8         Peter Wilfahrt
      9
     10     This file is part of JSXGraph.
     11
     12     JSXGraph is free software dual licensed under the GNU LGPL or MIT License.
     13
     14     You can redistribute it and/or modify it under the terms of the
     15
     16       * GNU Lesser General Public License as published by
     17         the Free Software Foundation, either version 3 of the License, or
     18         (at your option) any later version
     19       OR
     20       * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT
     21
     22     JSXGraph is distributed in the hope that it will be useful,
     23     but WITHOUT ANY WARRANTY; without even the implied warranty of
     24     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     25     GNU Lesser General Public License for more details.
     26
     27     You should have received a copy of the GNU Lesser General Public License and
     28     the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
     29     and <https://opensource.org/licenses/MIT/>.
     30  */
     31
     32 /*global JXG:true, define: true*/
     33 /*jslint nomen: true, plusplus: true*/
     34
     35 import JXG from "./jxg.js";
     36 import Const from "./base/constants.js";
     37 import Mat from "./math/math.js";
     38 import Color from "./utils/color.js";
     39 import Type from "./utils/type.js";
     40
     41 /**
     42  * Options Namespace
     43  * @description These are the default options of the board and of all geometry elements.
     44  * @namespace
     45  * @name JXG.Options
     46  */
     47 JXG.Options = {
     48
     49     jc: {
     50         enabled: true,
     51         compile: true
     52     },
     53
     54     /*
     55      * Options that are used directly within the board class
     56      */
     57     board: {
     58         /**#@+
     59          * @visprop
     60          */
     61
     62         //updateType: 'hierarchical', // 'all'
     63
     64         /**
     65          * Time (in msec) between two animation steps. Used in
     66          * {@link JXG.CoordsElement#moveAlong}, {@link JXG.CoordsElement#moveTo} and
     67          * {@link JXG.CoordsElement#visit}.
     68          *
     69          * @name JXG.Board#animationDelay
     70          * @type Number
     71          * @default 35
     72          * @see JXG.CoordsElement#moveAlong
     73          * @see JXG.CoordsElement#moveTo
     74          * @see JXG.CoordsElement#visit
     75          */
     76         animationDelay: 35,
     77
     78         /**
     79          * Show default axis.
     80          * If shown, the horizontal axis can be accessed via JXG.Board.defaultAxes.x, the
     81          * vertical axis can be accessed via JXG.Board.defaultAxes.y.
     82          * Both axes have a sub-element "defaultTicks".
     83          *
     84          * Value can be Boolean or an object containing axis attributes.
     85          *
     86          * @name JXG.Board#axis
     87          * @type Boolean
     88          * @default false
     89          */
     90         axis: false,
     91
     92         /**
     93          * Bounding box of the visible area in user coordinates.
     94          * It is an array consisting of four values:
     95          * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>]
     96          *
     97          * The canvas will be spanned from the upper left corner (x<sub>1</sub>, y<sub>1</sub>)
     98          * to the lower right corner (x<sub>2</sub>, y<sub>2</sub>).
     99          *
    100          * @name JXG.Board#boundingBox
    101          * @type Array
    102          * @see JXG.Board#maxBoundingBox
    103          * @see JXG.Board#keepAspectRatio
    104          *
    105          * @default [-5, 5, 5, -5]
    106          * @example
    107          * var board = JXG.JSXGraph.initBoard('jxgbox', {
    108          *         boundingbox: [-5, 5, 5, -5],
    109          *         axis: true
    110          *     });
    111          */
    112         boundingBox: [-5, 5, 5, -5],
    113
    114         /**
    115          * Enable browser scrolling on touch interfaces if the user double taps into an empty region
    116          * of the board. In turn, browser scrolling is deactivated as soon as a JSXGraph element is dragged.
    117          *
    118          * <ul>
    119          * <li> Implemented for pointer touch devices - not with mouse, pen or old iOS touch.
    120          * <li> It only works if browserPan:true
    121          * <li> One finger action by the settings "pan.enabled:true" and "pan.needTwoFingers:false" has priority.
    122          * </ul>
    123          *
    124          * @name JXG.Board#browserPan
    125          * @see JXG.Board#pan
    126          * @type Boolean
    127          * @default false
    128          *
    129          * @example
    130          * const board = JXG.JSXGraph.initBoard('jxgbox', {
    131          *     boundingbox: [-5, 5, 5, -5], axis: true,
    132          *     pan: {
    133          *         enabled: true,
    134          *         needTwoFingers: true,
    135          *     },
    136          *     browserPan: true,
    137          *     zoom: {
    138          *         enabled: false
    139          *     }
    140          * });
    141          *
    142          * var p1 = board.create('point', [1, -1]);
    143          * var p2 = board.create('point', [2.5, -2]);
    144          * var li1 = board.create('line', [p1, p2]);
    145          *
    146          * </pre><div id="JXGcd50c814-be81-4280-9458-d73e50cece8d" class="jxgbox" style="width: 300px; height: 300px;"></div>
    147          * <script type="text/javascript">
    148          *     (function() {
    149          *         var board = JXG.JSXGraph.initBoard('JXGcd50c814-be81-4280-9458-d73e50cece8d',
    150          *             {showcopyright: false, shownavigation: false,
    151          *              axis: true,
    152          *              pan: {
    153          *                enabled: true,
    154          *                needTwoFingers: true,
    155          *             },
    156          *             browserPan: true,
    157          *             zoom: {
    158          *               enabled: false
    159          *             }
    160          *          });
    161          *
    162          *     var p1 = board.create('point', [1, -1]);
    163          *     var p2 = board.create('point', [2.5, -2]);
    164          *     var li1 = board.create('line', [p1, p2]);
    165          *
    166          *     })();
    167          *
    168          * </script><pre>
    169          *
    170          *
    171          */
    172         browserPan: false,
    173
    174         /**
    175          *
    176          * Maximum time delay (in msec) between two clicks to be considered
    177          * as double click. This attribute is used together with {@link JXG.Board#dblClickSuppressClick}.
    178          * The JavaScript standard is that
    179          * a click event is preceded by two click events,
    180          * see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event}.
    181          * In case of {@link JXG.Board#dblClickSuppressClick} being true, the JavaScript standard is ignored and
    182          * this time delay is used to suppress the two click events if they are followed by a double click event.
    183          * <p>
    184          * In case of {@link JXG.Board#dblClickSuppressClick} being false, this attribute is used
    185          * to clear the list of clicked elements after the time specified by this attribute.
    186          * <p>
    187          * Recommendation: if {@link JXG.Board#dblClickSuppressClick} is true, use a value of approx. 300,
    188          * otherwise stay with the default 600.
    189          *
    190          * @name JXG.Board#clickDelay
    191          * @type Number
    192          * @default 600
    193          * @see JXG.Board#dblClickSuppressClick
    194          */
    195         clickDelay: 600,
    196
    197         /**
    198          * If false (default), JSXGraph follows the JavaScript standard and fires before a dblclick event two
    199          * click events.
    200          * <p>
    201          * If true, the click events are suppressed if there is a dblclick event.
    202          * The consequence is that in this case any click event is fired with a delay specified by
    203          * {@link JXG.Board#clickDelay}.
    204          *
    205          * @name JXG.Board#dblClickSuppressClick
    206          * @type Boolean
    207          * @default false
    208          * @see JXG.Board#clickDelay
    209          *
    210          */
    211         dblClickSuppressClick: false,
    212
    213         /**
    214          * Attributes for the default axes in case of the attribute
    215          * axis:true in {@link JXG.JSXGraph#initBoard}.
    216          *
    217          * @name JXG.Board#defaultAxes
    218          * @type Object
    219          * @default <tt>{x: {name:'x'}, y: {name: 'y'}}</tt>
    220          *
    221          * @example
    222          * const board = JXG.JSXGraph.initBoard('id', {
    223          *     boundingbox: [-5, 5, 5, -5], axis:true,
    224          *     defaultAxes: {
    225          *         x: {
    226          *           name: 'Distance (mi)',
    227          *           withLabel: true,
    228          *           label: {
    229          *             position: 'rt',
    230          *             offset: [-5, 15],
    231          *             anchorX: 'right'
    232          *           }
    233          *         },
    234          *         y: {
    235          *           withLabel: true,
    236          *           name: 'Y',
    237          *           label: {
    238          *             position: 'rt',
    239          *             offset: [-20, -5],
    240          *             anchorY: 'top'
    241          *           }
    242          *         }
    243          *     }
    244          * });
    245          *
    246          * </pre><div id="JXGc3af5eb8-7401-4476-80b5-379ecbd068c6" class="jxgbox" style="width: 300px; height: 300px;"></div>
    247          * <script type="text/javascript">
    248          *     (function() {
    249          *     var board = JXG.JSXGraph.initBoard('JXGc3af5eb8-7401-4476-80b5-379ecbd068c6', {
    250          *         showcopyright: false, shownavigation: false,
    251          *         boundingbox: [-5, 5, 5, -5], axis:true,
    252          *         defaultAxes: {
    253          *             x: {
    254          *               name: 'Distance (mi)',
    255          *               withLabel: true,
    256          *               label: {
    257          *                 position: 'rt',
    258          *                 offset: [-5, 15],
    259          *                 anchorX: 'right'
    260          *               }
    261          *             },
    262          *             y: {
    263          *               withLabel: true,
    264          *               name: 'Y',
    265          *               label: {
    266          *                 position: 'rt',
    267          *                 offset: [-20, -5],
    268          *                 anchorY: 'top'
    269          *               }
    270          *             }
    271          *         }
    272          *     });
    273          *
    274          *     })();
    275          *
    276          * </script><pre>
    277          *
    278          * @example
    279          *  // Display ticks labels as fractions
    280          *  var board = JXG.JSXGraph.initBoard('jxgbox', {
    281          *      boundingbox: [-1.2, 2.3, 1.2, -2.3],
    282          *      axis: true,
    283          *      defaultAxes: {
    284          *          x: {
    285          *              ticks: {
    286          *                  label: {
    287          *                      useMathJax: true,
    288          *                      display: 'html',
    289          *                      toFraction: true
    290          *                  }
    291          *              }
    292          *          },
    293          *          y: {
    294          *              ticks: {
    295          *                  label: {
    296          *                      useMathJax: true,
    297          *                      display: 'html',
    298          *                      toFraction: true
    299          *                  }
    300          *              }
    301          *          }
    302          *      }
    303          *  });
    304          *
    305          * </pre><div id="JXG484d2f00-c853-4acb-a8bd-46a9e232d13b" class="jxgbox" style="width: 300px; height: 300px;"></div>
    306          * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    307          * <script type="text/javascript">
    308          *     (function() {
    309          *         var board = JXG.JSXGraph.initBoard('JXG484d2f00-c853-4acb-a8bd-46a9e232d13b',
    310          *             {boundingbox: [-1.2, 2.3, 1.2, -2.3],
    311          *              axis: true, showcopyright: false, shownavigation: true,
    312          *                 defaultAxes: {
    313          *                     x: {
    314          *                         ticks: {
    315          *                             label: {
    316          *                                 useMathJax: true,
    317          *                                 display: 'html',
    318          *                                 toFraction: true
    319          *                             }
    320          *                         }
    321          *                     },
    322          *                     y: {
    323          *                         ticks: {
    324          *                             label: {
    325          *                                 useMathJax: true,
    326          *                                 display: 'html',
    327          *                                 toFraction: true
    328          *                             }
    329          *                         }
    330          *                     }
    331          *                 }
    332          *             });
    333          *     })();
    334          *
    335          * </script><pre>
    336          *
    337          */
    338         defaultAxes: {
    339             x: {
    340                 name: 'x',
    341                 fixed: true,
    342                 needsRegularUpdate: false,
    343                 ticks: {
    344                     label: {
    345                         visible: 'inherit',
    346                         anchorX: 'middle',
    347                         anchorY: 'top',
    348                         fontSize: 12,
    349                         offset: [0, -3]
    350                     },
    351                     tickEndings: [0, 1],
    352                     majorTickEndings: [1, 1],
    353                     drawZero: false,
    354                     visible: 'inherit'
    355                 }
    356             },
    357             y: {
    358                 name: 'y',
    359                 fixed: true,
    360                 needsRegularUpdate: false,
    361                 ticks: {
    362                     label: {
    363                         visible: 'inherit',
    364                         anchorX: 'right',
    365                         anchorY: 'middle',
    366                         fontSize: 12,
    367                         offset: [-6, 0]
    368                     },
    369                     tickEndings: [1, 0],
    370                     majorTickEndings: [1, 1],
    371                     drawZero: false,
    372                     visible: 'inherit'
    373                 }
    374             }
    375         },
    376
    377         /**
    378          * Supply the document object. Defaults to window.document
    379          *
    380          * @name JXG.Board#document
    381          * @type Object
    382          * @description DOM object
    383          * @default false (meaning window.document)
    384          */
    385         document: false,
    386
    387         /**
    388          * Control the possibilities for dragging objects.
    389          *
    390          * Possible sub-attributes with default values are:
    391          * <pre>
    392          * drag: {
    393          *   enabled: true   // Allow dragging
    394          * }
    395          * </pre>
    396          *
    397          * @name JXG.Board#drag
    398          * @type Object
    399          * @default <tt>{enabled: true}</tt>
    400          */
    401         drag: {
    402             enabled: true
    403         },
    404
    405         /**
    406          * Attribute(s) to control the fullscreen icon. The attribute "showFullscreen"
    407          * controls if the icon is shown.
    408          * The following attribute(s) can be set:
    409          * <ul>
    410          *  <li> symbol (String): Unicode symbol which is shown in the navigation bar.  Default: svg code for '\u26f6', other
    411          * possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
    412          *  <li> scale (number between 0 and 1): Relative size of the larger side of the JSXGraph board in the fullscreen window. 1.0 gives full width or height.
    413          * Default value is 0.85.
    414          *  <li> id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken.
    415          * 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.
    416          * </ul>
    417          *
    418          * @example
    419          * var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
    420          *             {boundingbox: [-8, 8, 8,-8], axis: true,
    421          *             showcopyright: false,
    422          *             showFullscreen: true,
    423          *             fullscreen: {
    424          *                  symbol: '\u22c7',
    425          *                  scale: 0.95
    426          *              }
    427          *             });
    428          * var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});
    429          *
    430          * </pre><div id="JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    431          * <script type="text/javascript">
    432          *     (function() {
    433          *         var board = JXG.JSXGraph.initBoard('JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
    434          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false,
    435          *              showFullscreen: true,
    436          *              fullscreen: {
    437          *                  symbol: '\u22c7',
    438          *                  scale: 0.95
    439          *                  }
    440          *             });
    441          *     var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});
    442          *     })();
    443          *
    444          * </script><pre>
    445          *
    446          * @name JXG.Board#fullscreen
    447          * @default svg code
    448          * @see JXG.Board#showFullscreen
    449          * @see JXG.AbstractRenderer#drawNavigationBar
    450          * @type Object
    451          */
    452         fullscreen: {
    453             symbol: '<svg height="1em" width="1em" version="1.1" viewBox="10 10 18 18"><path fill="#666" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path><path fill="#666" d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path><path fill="#666" d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path><path fill="#666" d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></svg>',
    454             // symbol: '\u26f6', // '\u26f6' (not supported by MacOS),
    455             scale: 0.85,
    456             id: null
    457         },
    458
    459         /**
    460          * If set true and
    461          * hasPoint() is true for both an element and it's label,
    462          * the element (and not the label) is taken as drag element.
    463          * <p>
    464          * If set false and hasPoint() is true for both an element and it's label,
    465          * the label is taken (if it is on a higher layer than the element)
    466          * <p>
    467          * Meanwhile, this feature might be irrelevant.
    468          * @name JXG.Board#ignoreLabels
    469          * @type Booelan
    470          * @default true
    471          */
    472         ignoreLabels: true,
    473
    474         /**
    475          * Support for internationalization of number formatting. This affects
    476          * <ul>
    477          *  <li> axis labels
    478          *  <li> infobox
    479          *  <li> texts consisting of numbers only
    480          *  <li> smartlabel elements
    481          *  <li> slider labels
    482          *  <li> tapemeasure elements
    483          *  <li> integral element labels
    484          * </ul>
    485          * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat</a>
    486          * for an overview on the possibilities and the options.
    487          * <p>
    488          * User generated texts consisting of texts AND numbers have to be internationalized by the user, see
    489          * {@link Text#intl}.
    490          * Language locale and options can be individually controlled for each element by its intl attribute.
    491          * If no locale is set, the default language of the browser is used.
    492          *
    493          * @name JXG.Board#intl
    494          * @type Object
    495          * @default <tt>{enabled: false}</tt>
    496          * @see Integral#label
    497          * @see Slider#intl
    498          * @see Text#intl
    499          * @see Ticks#intl
    500          * @see JXG.Board.infobox
    501          *
    502          * @example
    503          * // Set the board-wide locale and use individual
    504          * // options for a text.
    505          * const board = JXG.JSXGraph.initBoard(BOARDID, {
    506          *     axis: true,
    507          *     intl: {
    508          *         enabled: true,
    509          *         locale: 'de-DE'
    510          *     },
    511          *     boundingbox:[-0.5, 0.5, 0.5, -0.5]
    512          * });
    513          *
    514          * var t = board.create('text', [0.05, 0.2, -Math.PI*100], {
    515          *         digits: 2,
    516          *         intl: {
    517          *                 enabled: true,
    518          *                 options: {
    519          *                     style: 'unit',
    520          *                     unit: 'celsius'
    521          *                 }
    522          *             }
    523          *     });
    524          *
    525          * </pre><div id="JXGcbb0305d-92e2-4628-a58a-d0d515c8fec9" class="jxgbox" style="width: 300px; height: 300px;"></div>
    526          * <script type="text/javascript">
    527          *     (function() {
    528          *     var board = JXG.JSXGraph.initBoard('JXGcbb0305d-92e2-4628-a58a-d0d515c8fec9', {
    529          *         axis: true, showcopyright: false, shownavigation: false,
    530          *         intl: {
    531          *             enabled: true,
    532          *             locale: 'de-DE'
    533          *         },
    534          *     boundingbox:[-0.5, 0.5, 0.5, -0.5]
    535          *     });
    536          *     var t = board.create('text', [0.05, 0.2, -Math.PI*100], {
    537          *         digits: 2,
    538          *         intl: {
    539          *                 enabled: true,
    540          *                 options: {
    541          *                     style: 'unit',
    542          *                     unit: 'celsius'
    543          *                 }
    544          *             }
    545          *     });
    546          *
    547          *     })();
    548          *
    549          * </script><pre>
    550          *
    551          * @example
    552          * // Here, locale is disabled in general, but enabled for the horizontal
    553          * // axis and the infobox.
    554          * const board = JXG.JSXGraph.initBoard(BOARDID, {
    555          *     boundingbox: [-0.5, 0.5, 0.5, -0.5],
    556          *     intl: {
    557          *         enabled: false,
    558          *         locale: 'de-DE'
    559          *     },
    560          *     keepaspectratio: true,
    561          *     axis: true,
    562          *     defaultAxes: {
    563          *         x: {
    564          *             ticks: {
    565          *                 intl: {
    566          *                         enabled: true,
    567          *                         options: {
    568          *                             style: 'unit',
    569          *                             unit: 'kilometer-per-hour',
    570          *                             unitDisplay: 'narrow'
    571          *                         }
    572          *                 }
    573          *             }
    574          *         },
    575          *         y: {
    576          *             ticks: {
    577          *             }
    578          *         }
    579          *     },
    580          *     infobox: {
    581          *         fontSize: 12,
    582          *         intl: {
    583          *             enabled: true,
    584          *             options: {
    585          *                 minimumFractionDigits: 4,
    586          *                 maximumFractionDigits: 5
    587          *             }
    588          *         }
    589          *     }
    590          * });
    591          *
    592          * var p = board.create('point', [0.1, 0.1], {});
    593          *
    594          * </pre><div id="JXG07d5d95c-9324-4fc4-aad3-098e433f195f" class="jxgbox" style="width: 600px; height: 300px;"></div>
    595          * <script type="text/javascript">
    596          *     (function() {
    597          *     var board = JXG.JSXGraph.initBoard('JXG07d5d95c-9324-4fc4-aad3-098e433f195f', {
    598          *         boundingbox: [-0.5, 0.5, 0.5, -0.5], showcopyright: false, shownavigation: false,
    599          *         intl: {
    600          *             enabled: false,
    601          *             locale: 'de-DE'
    602          *         },
    603          *         keepaspectratio: true,
    604          *         axis: true,
    605          *         defaultAxes: {
    606          *             x: {
    607          *                 ticks: {
    608          *                     intl: {
    609          *                             enabled: true,
    610          *                             options: {
    611          *                                 style: 'unit',
    612          *                                 unit: 'kilometer-per-hour',
    613          *                                 unitDisplay: 'narrow'
    614          *                             }
    615          *                     }
    616          *                 }
    617          *             },
    618          *             y: {
    619          *                 ticks: {
    620          *                 }
    621          *             }
    622          *         },
    623          *         infobox: {
    624          *             fontSize: 12,
    625          *             intl: {
    626          *                 enabled: true,
    627          *                 options: {
    628          *                     minimumFractionDigits: 4,
    629          *                     maximumFractionDigits: 5
    630          *                 }
    631          *             }
    632          *         }
    633          *     });
    634          *
    635          *     var p = board.create('point', [0.1, 0.1], {});
    636          *
    637          *     })();
    638          *
    639          * </script><pre>
    640          *
    641          */
    642         intl: {
    643             enabled: false
    644         },
    645
    646         /**
    647          * If set to true, the ratio between horizontal and vertical unit sizes
    648          * stays constant - independent of size changes of the hosting HTML div element.
    649          * <p>
    650          * If the aspect ration of the hosting div changes, JSXGraphs will change
    651          * the user supplied bounding box accordingly.
    652          * This is necessary if circles should look like circles and not
    653          * like ellipses. It is recommended to set keepAspectRatio = true
    654          * for geometric applets.
    655          * <p>
    656          * For function plotting keepAspectRatio = false
    657          * might be the better choice.
    658          *
    659          * @name JXG.Board#keepAspectRatio
    660          * @see JXG.Board#boundingBox
    661          * @see JXG.Board#maxBoundingBox
    662          * @see JXG.Board#setBoundingBox
    663          * @type Boolean
    664          * @default false
    665          */
    666         keepAspectRatio: false,
    667
    668         /**
    669          * Control using the keyboard to change the construction.
    670          * <ul>
    671          * <li> enabled: true / false
    672          * <li> dx: horizontal shift amount per key press
    673          * <li> dy: vertical shift amount per key press
    674          * <li> panShift: zoom if shift key is pressed
    675          * <li> panCtrl: zoom if ctrl key is pressed
    676          * </ul>
    677          *
    678          * @example
    679          * var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5],
    680          *     axis: true,
    681          *     showCopyright:true,
    682          *     showNavigation:true,
    683          *     keyboard: {
    684          *         enabled: true,
    685          *         dy: 30,
    686          *         panShift: true,
    687          *         panCtrl: false
    688          *     }
    689          * });
    690          *
    691          * </pre><div id="JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266" class="jxgbox" style="width: 300px; height: 300px;"></div>
    692          * <script type="text/javascript">
    693          *     (function() {
    694          *         var board = JXG.JSXGraph.initBoard('JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266',
    695          *             {boundingbox: [-5,5,5,-5],
    696          *         axis: true,
    697          *         showCopyright:true,
    698          *         showNavigation:true,
    699          *         keyboard: {
    700          *             enabled: true,
    701          *             dy: 30,
    702          *             panShift: true,
    703          *             panCtrl: false
    704          *         }
    705          *     });
    706          *
    707          *     })();
    708          *
    709          * </script><pre>
    710          *
    711          *
    712          * @see JXG.Board#keyDownListener
    713          * @see JXG.Board#keyFocusInListener
    714          * @see JXG.Board#keyFocusOutListener
    715          *
    716          * @name JXG.Board#keyboard
    717          * @type Object
    718          * @default <tt>{enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}</tt>
    719          */
    720         keyboard: {
    721             enabled: true,
    722             dx: 10,
    723             dy: 10,
    724             panShift: true,
    725             panCtrl: false
    726         },
    727
    728         /**
    729          * If enabled, user activities are logged in array "board.userLog".
    730          *
    731          * @name JXG.Board#logging
    732          * @type Object
    733          * @default <tt>{enabled: false}</tt>
    734          *
    735          * @example
    736          * var board = JXG.JSXGraph.initBoard(BOARDID,
    737          *          {
    738          *              boundingbox: [-8, 8, 8,-8],
    739          *              axis: true,
    740          *              logging: {enabled: true},
    741          *              showcopyright: false,
    742          *              shownavigation: false
    743          *          });
    744          * var A = board.create('point', [-4, 0], { name: 'A' });
    745          * var B = board.create('point', [1, 2], { name: 'B' });
    746          * var showUserLog = function() {
    747          *     var txt = '';
    748          *
    749          *     for (let i = 0; i < board.userLog.length; i++) {
    750          *         txt += JSON.stringify(board.userLog[i]) + '\n';
    751          *     }
    752          *     alert(txt);
    753          * };
    754          * var but = board.create('button', [4, 4, 'Show user log', showUserLog]);
    755          *
    756          * </pre><div id="JXGe152375c-f478-41aa-a9e6-e104403fc75d" class="jxgbox" style="width: 300px; height: 300px;"></div>
    757          * <script type="text/javascript">
    758          *     (function() {
    759          *         var board = JXG.JSXGraph.initBoard('JXGe152375c-f478-41aa-a9e6-e104403fc75d',
    760          *             {boundingbox: [-8, 8, 8,-8], axis: true, logging: {enabled: true},
    761          *              showcopyright: false, shownavigation: false});
    762          *     var A = board.create('point', [-4, 0], { name: 'A' });
    763          *     var B = board.create('point', [1, 2], { name: 'B' });
    764          *     var showUserLog = function() {
    765          *         var txt = '';
    766          *
    767          *         for (let i = 0; i < board.userLog.length; i++) {
    768          *             txt += JSON.stringify(board.userLog[i]) + '\n';
    769          *         }
    770          *         alert(txt);
    771          *     };
    772          *     var but = board.create('button', [4, 4, 'Show user log', showUserLog]);
    773          *
    774          *     })();
    775          *
    776          * </script><pre>
    777          *
    778          *
    779          * @see JXG.Board#userLog
    780          */
    781         logging: {
    782             enabled: false
    783         },
    784
    785         /**
    786          * Change redraw strategy in SVG rendering engine.
    787          * <p>
    788          * This optimization seems to be <b>obsolete</b> in newer browsers (from 2021 on, at least)
    789          * and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4.
    790          * <p>
    791          * If set to 'svg', before every redrawing of the JSXGraph construction
    792          * the SVG sub-tree of the DOM tree is taken out of the DOM.
    793          *
    794          * If set to 'all', before every redrawing of the JSXGraph construction the
    795          * complete DOM tree is taken out of the DOM.
    796          * If set to 'none' the redrawing is done in-place.
    797          *
    798          * Using 'svg' or 'all' speeds up the update process considerably. The risk
    799          * is that if there is an exception, only a white div or window is left.
    800          *
    801          *
    802          * @name JXG.Board#minimizeReflow
    803          * @type String
    804          * @default 'none'
    805          */
    806         minimizeReflow: 'none',
    807
    808         /**
    809          * Maximal bounding box of the visible area in user coordinates.
    810          * It is an array consisting of four values:
    811          * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>]
    812          *
    813          * The bounding box of the canvas must be inside of this maximal
    814          * bounding box.
    815          *
    816          * @name JXG.Board#maxBoundingBox
    817          * @type Array
    818          * @see JXG.Board#boundingBox
    819          * @default [-Infinity, Infinity, Infinity, -Infinity]
    820          *
    821          * @example
    822          * var board = JXG.JSXGraph.initBoard('jxgbox', {
    823          *         boundingBox: [-5, 5, 5, -5],
    824          *         maxBoundingBox: [-8, 8, 8, -8],
    825          *         pan: {enabled: true},
    826          *         axis: true
    827          *     });
    828          *
    829          * </pre><div id="JXG065e2750-217c-48ed-a52b-7d7df6de7055" class="jxgbox" style="width: 300px; height: 300px;"></div>
    830          * <script type="text/javascript">
    831          *     (function() {
    832          *         var board = JXG.JSXGraph.initBoard('JXG065e2750-217c-48ed-a52b-7d7df6de7055', {
    833          *             showcopyright: false, shownavigation: false,
    834          *             boundingbox: [-5,5,5,-5],
    835          *             maxboundingbox: [-8,8,8,-8],
    836          *             pan: {enabled: true},
    837          *             axis:true
    838          *         });
    839          *
    840          *     })();
    841          *
    842          * </script><pre>
    843          *
    844          */
    845         maxBoundingBox: [-Infinity, Infinity, Infinity, -Infinity],
    846
    847         /**
    848          * Maximum frame rate of the board, i.e. maximum number of updates per second
    849          * triggered by move events.
    850          *
    851          * @name JXG.Board#maxFrameRate
    852          * @type Number
    853          * @default 40
    854          */
    855         maxFrameRate: 40,
    856
    857         /**
    858          * Maximum number of digits in automatic label generation.
    859          * For example, if set to 1 automatic point labels end at "Z".
    860          * If set to 2, point labels end at "ZZ".
    861          *
    862          * @name JXG.Board#maxNameLength
    863          * @see JXG.Board#generateName
    864          * @type Number
    865          * @default 1
    866          */
    867         maxNameLength: 1,
    868
    869         /**
    870          * Element which listens to move events of the pointing device.
    871          * This allows to drag elements of a JSXGraph construction outside of the board.
    872          * Especially, on mobile devices this enhances the user experience.
    873          * However, it is recommended to allow dragging outside of the JSXGraph board only
    874          * in certain constructions where users may not "loose" points outside of the board.
    875          * In such a case, points may become unreachable.
    876          * <p>
    877          * A situation where dragging outside of the board is uncritical is for example if
    878          * only sliders are used to interact with the construction.
    879          * <p>
    880          * Possible values for this attributes are:
    881          * <ul>
    882          * <li> an element specified by document.getElementById('some id');
    883          * <li> null: to use the JSXGraph container div element
    884          * <li> document
    885          * </ul>
    886          * <p>
    887          * Since the introduction of this attribute "moveTarget", the value "document" has become sort of
    888          * default on touch devices like smartphones. However, it is no longer the case that the document listens to
    889          * move events, but there is the new feature "setPointerCapture", which is also implicitly enabled on certain devices.
    890          * In future versions, JSXGraph may adopt this new standard and distinguish only two cases:
    891          * <ul>
    892          * <li>null: no pointerCapture
    893          * <li>document: use pointerCapture
    894          * </ul>
    895          * <p>
    896          * This attribute is immutable.
    897          * It can be changed as follows:
    898          *
    899          * @example
    900          * board.setAttribute({moveTarget: null});
    901          * board.removeEventHandlers();
    902          * board.addEventHandlers();
    903          *
    904          * @name JXG.Board#moveTarget
    905          * @type Object
    906          * @description HTML node or document
    907          * @default null
    908          *
    909          * @example
    910          *     var board = JXG.JSXGraph.initBoard('jxgbox', {
    911          *         boundingbox: [-5,5,5,-5],
    912          *         axis: true,
    913          *         moveTarget: document
    914          *     });
    915          *
    916          * </pre><div id="JXG973457e5-c63f-4516-8570-743f2cc560e1" class="jxgbox" style="width: 300px; height: 300px;"></div>
    917          * <script type="text/javascript">
    918          *     (function() {
    919          *         var board = JXG.JSXGraph.initBoard('JXG973457e5-c63f-4516-8570-743f2cc560e1',
    920          *             {boundingbox: [-5,5,5,-5],
    921          *             axis: true,
    922          *             moveTarget: document
    923          *         });
    924          *
    925          *     })();
    926          *
    927          * </script><pre>
    928          *
    929          *
    930          */
    931         moveTarget: null,
    932
    933         /**
    934          * A number that will be added to the absolute position of the board used in mouse coordinate
    935          * calculations in {@link JXG.Board#getCoordsTopLeftCorner}.
    936          *
    937          * @name JXG.Board#offsetX
    938          * @see JXG.Board#offsetY
    939          * @type Number
    940          * @default 0
    941          */
    942         offsetX: 0,
    943
    944         /**
    945          * A number that will be added to the absolute position of the board used in mouse coordinate
    946          * calculations in {@link JXG.Board#getCoordsTopLeftCorner}.
    947          *
    948          * @name JXG.Board#offsetY
    949          * @see JXG.Board#offsetX
    950          * @type Number
    951          * @default 0
    952          */
    953         offsetY: 0,
    954
    955         /**
    956          * Control the possibilities for panning interaction (i.e. moving the origin).
    957          *
    958          * Possible sub-attributes with default values are:
    959          * <pre>
    960          * pan: {
    961          *   enabled: true   // Allow panning
    962          *   needTwoFingers: false, // panning is done with two fingers on touch devices
    963          *   needShift: true, // mouse panning needs pressing of the shift key
    964          * }
    965          * </pre>
    966          *
    967          * @name JXG.Board#pan
    968          * @see JXG.Board#browserPan
    969          *
    970          * @type Object
    971          */
    972         pan: {
    973             enabled: true,
    974             needShift: true,
    975             needTwoFingers: false
    976         },
    977
    978         /**
    979          * Allow user interaction by registering pointer events (including mouse and
    980          * touch events), fullscreen, keyboard, resize, and zoom events.
    981          * The latter events are essentially mouse wheel events.
    982          * Decide if JSXGraph listens to these events.
    983          * <p>
    984          * Using a Boolean value turns on all events (or not), supplying an object of
    985          * the form
    986          * <pre>
    987          *  {
    988          *     fullscreen: true / false,
    989          *     keyboard: true / false,
    990          *     pointer: true / false,
    991          *     resize: true / false,
    992          *     wheel: true / false
    993          *  }
    994          * </pre>
    995          * activates individual event handlers. If an event is NOT given,
    996          * it will be activated.
    997          * <p>This attribute is immutable. Please use
    998          * {@link JXG.Board#addEventHandlers()} and
    999          * {@link JXG.Board#removeEventHandlers()} directly.
    1000          *
    1001          * @name JXG.Board.registerEvents
    1002          * @see JXG.Board#keyboard
    1003          * @see JXG.Board.registerResizeEvent
    1004          * @see JXG.Board.registerFullscreenEvent
    1005          * @type Boolean
    1006          * @default true
    1007          */
    1008         registerEvents: true,
    1009
    1010         // /**
    1011         //  * Listen to fullscreen event.
    1012         //  *
    1013         //  * <p>This attribute is immutable. Please use
    1014         //  * {@link JXG.Board#addFullscreenEventHandlers()} and
    1015         //  * {@link JXG.Board#removeEventHandlers()} directly.
    1016         //  *
    1017         //  * @name JXG.Board#registerFullscreenEvent
    1018         //  * @see JXG.Board#registerEvents
    1019         //  * @see JXG.Board#registerResizeEvent
    1020         //  * @type Boolean
    1021         //  * @default true
    1022         //  */
    1023         // registerFullscreenEvent: true,
    1024
    1025         // /**
    1026         //  * Listen to resize events, i.e. start "resizeObserver" or handle the resize event with
    1027         //  * "resizeListener". This is independent from the mouse, touch, pointer events.
    1028         //  *
    1029         //  * <p>This attribute is immutable. Please use
    1030         //  * {@link JXG.Board#addResizeEventHandlers()} and
    1031         //  * {@link JXG.Board#removeEventHandlers()} directly.
    1032         //  * <p>
    1033         //  * This attribute just starts a resizeObserver. If the resizeObserver reacts
    1034         //  * to size changed is controlled with {@link JXG.Board#resize}.
    1035         //  *
    1036         //  * @name JXG.Board#registerResizeEvent
    1037         //  * @see JXG.Board#resize
    1038         //  * @see JXG.Board#registerEvents
    1039         //  * @see JXG.Board#registerFullscreenEvent
    1040         //  * @type Boolean
    1041         //  * @default true
    1042         //  */
    1043         // registerResizeEvent: true,
    1044
    1045         /**
    1046          * Default rendering engine. Possible values are 'svg', 'canvas', 'vml', 'no', or 'auto'.
    1047          * If the rendering engine is not available JSXGraph tries to detect a different engine.
    1048          *
    1049          * <p>
    1050          * In case of 'canvas' it is advisable to call 'board.update()' after all elements have been
    1051          * constructed. This ensures that all elements are drawn with their intended visual appearance.
    1052          *
    1053          * <p>
    1054          * This attribute is immutable.
    1055          *
    1056          * @name JXG.Board#renderer
    1057          * @type String
    1058          * @default 'auto'
    1059          */
    1060         renderer: 'auto',
    1061
    1062         /**
    1063          * Control if JSXGraph reacts to resizing of the JSXGraph container element
    1064          * by the user / browser.
    1065          * The attribute "throttle" determines the minimal time in msec between to
    1066          * resize calls.
    1067          * <p>
    1068          * <b>Attention:</b> if the JSXGraph container has no CSS property like width or height and max-width or max-height set, but
    1069          * has a property like box-sizing:content-box, then the interplay between CSS and the resize attribute may result in an
    1070          * infinite loop with ever increasing JSXGraph container.
    1071          *
    1072          * @see JXG.Board#startResizeObserver
    1073          * @see JXG.Board#resizeListener
    1074          *
    1075          * @name JXG.Board#resize
    1076          * @type Object
    1077          * @default <tt>{enabled: true, throttle: 10}</tt>
    1078          *
    1079          * @example
    1080          *     var board = JXG.JSXGraph.initBoard('jxgbox', {
    1081          *         boundingbox: [-5,5,5,-5],
    1082          *         keepAspectRatio: true,
    1083          *         axis: true,
    1084          *         resize: {enabled: true, throttle: 200}
    1085          *     });
    1086          *
    1087          * </pre><div id="JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1088          * <script type="text/javascript">
    1089          *     (function() {
    1090          *         var board = JXG.JSXGraph.initBoard('JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3', {
    1091          *             boundingbox: [-5,5,5,-5],
    1092          *             keepAspectRatio: true,
    1093          *             axis: true,
    1094          *             resize: {enabled: true, throttle: 200}
    1095          *         });
    1096          *
    1097          *     })();
    1098          *
    1099          * </script><pre>
    1100          *
    1101          *
    1102          */
    1103         resize: {
    1104             enabled: true,
    1105             throttle: 10
    1106         },
    1107
    1108         /**
    1109          * Attributes to control the screenshot function.
    1110          * The following attributes can be set:
    1111          * <ul>
    1112          *  <li>scale: scaling factor (default=1.0)
    1113          *  <li>type: format of the screenshot image. Default: png
    1114          *  <li>symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318'
    1115          *  <li>css: CSS rules to format the div element containing the screen shot image
    1116          *  <li>cssButton: CSS rules to format the close button of the div element containing the screen shot image
    1117          * </ul>
    1118          * The screenshot will fail if the board contains text elements or foreign objects
    1119          * containing SVG again.
    1120          *
    1121          * @name JXG.Board#screenshot
    1122          * @type Object
    1123          */
    1124         screenshot: {
    1125             scale: 1,
    1126             type: 'png',
    1127             symbol: '\u2318', //'\u22b9', //'\u26f6',
    1128             css: 'background-color:#eeeeee; opacity:1.0; border:2px solid black; border-radius:10px; text-align:center',
    1129             cssButton: 'padding: 4px 10px; border: solid #356AA0 1px; border-radius: 5px; position: absolute; right: 2ex; top: 2ex; background-color: rgba(255, 255, 255, 0.3);'
    1130         },
    1131
    1132         /**
    1133          * Control the possibilities for a selection rectangle.
    1134          * Starting a selection event triggers the "startselecting" event.
    1135          * When the mouse pointer is released, the "stopselecting" event is fired.
    1136          * The "stopselecting" event is supplied by the user.
    1137          * <p>
    1138          * So far it works in SVG renderer only.
    1139          * <p>
    1140          * Possible sub-attributes with default values are:
    1141          * <pre>
    1142          * selection: {
    1143          *   enabled: false,
    1144          *   name: 'selectionPolygon',
    1145          *   needShift: false,  // mouse selection needs pressing of the shift key
    1146          *   needCtrl: true,    // mouse selection needs pressing of the shift key
    1147          *   fillColor: '#ffff00'
    1148          * }
    1149          * </pre>
    1150          * <p>
    1151          * Board events triggered by selection manipulation:
    1152          * 'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting',
    1153          * 'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'.
    1154          *
    1155          * @example
    1156          * board.on('stopselecting', function(){
    1157          *     var box = board.stopSelectionMode(),
    1158          *     // bbox has the coordinates of the selectionr rectangle.
    1159          *     // Attention: box[i].usrCoords have the form [1, x, y], i.e.
    1160          *     // are homogeneous coordinates.
    1161          *     bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));
    1162          *     // Set a new bounding box
    1163          *     board.setBoundingBox(bbox, false);
    1164          * });
    1165          *
    1166          * @name JXG.Board#selection
    1167          *
    1168          * @see JXG.Board#startSelectionMode
    1169          * @see JXG.Board#stopSelectionMode
    1170          *
    1171          * @type Object
    1172          * @default
    1173          */
    1174         selection: {
    1175             enabled: false,
    1176             name: 'selectionPolygon',
    1177             needShift: false,
    1178             needCtrl: true,
    1179             fillColor: '#ffff00',
    1180
    1181             // immutable:
    1182             visible: false,
    1183             withLines: false,
    1184             vertices: {
    1185                 visible: false
    1186             }
    1187         },
    1188
    1189         /**
    1190          * Show a button which allows to clear all traces of a board.
    1191          * This button can be accessed by JavaScript or CSS with
    1192          * the ID <tt>"{board_id}_navigation_button_cleartraces"</tt> or by the CSS classes
    1193          * <tt>JXG_navigation_button"</tt> or
    1194          * <tt>JXG_navigation_button_cleartraces"</tt>.
    1195          *
    1196          * @name JXG.Board#showClearTraces
    1197          * @type Boolean
    1198          * @default false
    1199          * @see JXG.AbstractRenderer#drawNavigationBar
    1200          */
    1201         showClearTraces: false,
    1202
    1203         /**
    1204          * Show copyright string in canvas.
    1205          *
    1206          * @name JXG.Board#showCopyright
    1207          * @type Boolean
    1208          * @default true
    1209          */
    1210         showCopyright: true,
    1211
    1212         /**
    1213          * Show a button in the navigation bar to start fullscreen mode.
    1214          * This button can be accessed by JavaScript or CSS with
    1215          * the ID <tt>"{board_id}_navigation_button_fullscreen"</tt> or by the CSS classes
    1216          * <tt>JXG_navigation_button"</tt> or
    1217          * <tt>JXG_navigation_button_fullscreen"</tt>.
    1218          *
    1219          * @name JXG.Board#showFullscreen
    1220          * @type Boolean
    1221          * @see JXG.Board#fullscreen
    1222          * @default false
    1223          * @see JXG.AbstractRenderer#drawNavigationBar
    1224          * @see JXG.AbstractRenderer#drawNavigationBar
    1225          */
    1226         showFullscreen: false,
    1227
    1228         /**
    1229          * If true, the infobox is shown on mouse/pen over for all points
    1230          * which have set their attribute showInfobox to 'inherit'.
    1231          * If a point has set its attribute showInfobox to false or true,
    1232          * that value will have priority over this value.
    1233          *
    1234          * @name JXG.Board#showInfobox
    1235          * @see Point#showInfobox
    1236          * @type Boolean
    1237          * @default true
    1238          */
    1239         showInfobox: true,
    1240
    1241         /**
    1242          * Display of navigation arrows and zoom buttons in the navigation bar.
    1243          * <p>
    1244          * The navigation bar has the
    1245          * the ID <tt>"{board_id}_navigation"</tt> and the CSS class
    1246          * <tt>JXG_navigation"</tt>.
    1247          * The individual buttons can be accessed by JavaScript or CSS with
    1248          * the ID <tt>"{board_id}_navigation_button_{type}"</tt> or by the CSS classes
    1249          * <tt>JXG_navigation_button"</tt> or
    1250          * <tt>JXG_navigation_button_{type}"</tt>, where <tt>{type}</tt>
    1251          * is one of <tt>left</tt>, <tt>right</tt>, or <tt>up</tt>, <tt>down</tt>,
    1252          * <tt>in</tt>, <tt>100</tt>, or <tt>out</tt>,
    1253          * <tt>fullscreen</tt>, <tt>screenshot</tt>, <tt>cleartraces</tt>, <tt>reload</tt>.
    1254          *
    1255          * @name JXG.Board#showNavigation
    1256          * @type Boolean
    1257          * @default true
    1258          * @see JXG.AbstractRenderer#drawNavigationBar
    1259          */
    1260         showNavigation: true,
    1261
    1262         /**
    1263          * Show a button in the navigation bar to force reload of a construction.
    1264          * Works only with the JessieCode tag.
    1265          * This button can be accessed by JavaScript or CSS with
    1266          * the ID <tt>"{board_id}_navigation_button_reload"</tt> or by the CSS classes
    1267          * <tt>JXG_navigation_button"</tt> or
    1268          * <tt>JXG_navigation_button_reload"</tt>.
    1269          *
    1270          * @name JXG.Board#showReload
    1271          * @type Boolean
    1272          * @default false
    1273          * @see JXG.AbstractRenderer#drawNavigationBar
    1274          */
    1275         showReload: false,
    1276
    1277         /**
    1278          * Show a button in the navigation bar to enable screenshots.
    1279          * This button can be accessed by JavaScript or CSS with
    1280          * the ID <tt>"{board_id}_navigation_button_screenshot"</tt> or by the CSS classes
    1281          * <tt>JXG_navigation_button"</tt> or
    1282          * <tt>JXG_navigation_button_screenshot"</tt>.
    1283          *
    1284          * @name JXG.Board#showScreenshot
    1285          * @type Boolean
    1286          * @default false
    1287          * @see JXG.AbstractRenderer#drawNavigationBar
    1288          */
    1289         showScreenshot: false,
    1290
    1291         /**
    1292          * Display of zoom buttons in the navigation bar. To show zoom buttons, additionally
    1293          * showNavigation has to be set to true.
    1294          * <p>
    1295          * The individual buttons can be accessed by JavaScript or CSS with
    1296          * the ID <tt>"{board_id}_navigation_button_{type}"</tt> or by the CSS classes
    1297          * <tt>JXG_navigation_button"</tt> or
    1298          * <tt>JXG_navigation_button_{type}"</tt>, where <tt>{type}</tt>
    1299          * is <tt>in</tt>, <tt>100</tt>, or <tt>out</tt>.
    1300          *
    1301          * @name JXG.Board#showZoom
    1302          * @type Boolean
    1303          * @default true
    1304          * @see JXG.AbstractRenderer#drawNavigationBar
    1305          */
    1306         showZoom: true,
    1307
    1308         /**
    1309          * If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element.
    1310          *
    1311          * @name JXG.Board#takeFirst
    1312          * @type Boolean
    1313          * @default false
    1314          */
    1315         takeFirst: false,
    1316
    1317         /**
    1318         * If true, when read from a file or string - the size of the div can be changed by the construction text.
    1319         *
    1320         * @name JXG.Board#takeSizeFromFile
    1321         * @type Boolean
    1322         * @default false
    1323         */
    1324         takeSizeFromFile: false,
    1325
    1326         /**
    1327          * Set a visual theme for a board. At the moment this attribute is immutable.
    1328          * Available themes are
    1329          * <ul>
    1330          * <li> 'default'
    1331          * <li> 'mono_thin': a black / white theme using thin strokes. Restricted to 2D.
    1332          * </ul>
    1333          *
    1334          * @name JXG.Board#theme
    1335          * @type String
    1336          * @default 'default'
    1337          * @example
    1338          *  const board = JXG.JSXGraph.initBoard('jxgbox', {
    1339          *      boundingbox: [-5, 5, 5, -5], axis: true,
    1340          *      theme: 'mono_thin'
    1341          *  });
    1342          *
    1343          *  var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]);
    1344          *  var p1 = board.create('point', [1, 2]);
    1345          *  var ci1 = board.create('circle', [p1, 0.7]);
    1346          *  var cu = board.create('functiongraph', ['x^2']);
    1347          *  var l1 = board.create('line', [2, 3, -1]);
    1348          *  var l2 = board.create('line', [-5, -3, -1], { dash: 2 });
    1349          *  var i1 = board.create('intersection', [l1, l2]);
    1350          *  var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]);
    1351          *  var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]);
    1352          *  var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]);
    1353          *  var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } });
    1354          *
    1355          * </pre><div id="JXG1c5f7a2a-176b-4410-ac06-8593f1a09879" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1356          * <script type="text/javascript">
    1357          *     (function() {
    1358          *         var board = JXG.JSXGraph.initBoard('JXG1c5f7a2a-176b-4410-ac06-8593f1a09879',
    1359          *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false,
    1360          *              theme: 'mono_thin' });
    1361          *
    1362          *    var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]);
    1363          *    var p1 = board.create('point', [1, 2]);
    1364          *    var ci1 = board.create('circle', [p1, 0.7]);
    1365          *    var cu = board.create('functiongraph', ['x^2']);
    1366          *    var l1 = board.create('line', [2, 3, -1]);
    1367          *    var l2 = board.create('line', [-5, -3, -1], { dash: 2 });
    1368          *    var i1 = board.create('intersection', [l1, l2]);
    1369          *    var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]);
    1370          *    var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]);
    1371          *    var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]);
    1372          *    var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } });
    1373          *
    1374          *     })();
    1375          *
    1376          * </script><pre>
    1377          *
    1378          */
    1379         theme: 'default',
    1380
    1381         /**
    1382          * Title string for the board.
    1383          * Primarily used in an invisible text element for assistive technologies.
    1384          * The title is implemented with the attribute 'aria-label' in the JSXGraph container.
    1385          *
    1386          * Content should be accessible to all users, not just to those with
    1387          * screen readers.  Consider instead adding a text element with the title and add the attribute
    1388          * <b>aria:{enable:true,label:"Your Title"}</b>
    1389          *
    1390          * @name JXG.Board#title
    1391          * @type String
    1392          * @default ''
    1393          *
    1394          */
    1395         title: '',
    1396
    1397         /**
    1398          * Control the possibilities for zoom interaction.
    1399          *
    1400          * Possible sub-attributes with default values are:
    1401          * <pre>
    1402          * zoom: {
    1403          *   enabled: true,  // turns off zooming completely, if set to false.
    1404          *   factorX: 1.25,  // horizontal zoom factor (multiplied to {@link JXG.Board#zoomX})
    1405          *   factorY: 1.25,  // vertical zoom factor (multiplied to {@link JXG.Board#zoomY})
    1406          *   wheel: true,    // allow zooming by mouse wheel
    1407          *   needShift: true,  // mouse wheel zooming needs pressing of the shift key
    1408          *   min: 0.001,       // minimal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomOut
    1409          *   max: 1000.0,      // maximal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomIn
    1410          *   center: 'auto',   // 'auto': the center of zoom is at the position of the mouse or at the midpoint of two fingers
    1411          *                     // 'board': the center of zoom is at the board's center
    1412          *   pinch: true,      // pinch-to-zoom gesture for proportional zoom
    1413          *   pinchHorizontal: true, // Horizontal pinch-to-zoom zooms horizontal axis. Only available if keepaspectratio:false
    1414          *   pinchVertical: true,   // Vertical pinch-to-zoom zooms vertical axis only. Only available if keepaspectratio:false
    1415          *   pinchSensitivity: 7    // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
    1416          * }
    1417          * </pre>
    1418          *
    1419          * If the zoom buttons are visible, zooming by clicking the buttons is still possible, regardless of zoom.enabled:true/false.
    1420          * If this should be prevented, set showZoom:false.
    1421          *
    1422          * Deprecated: zoom.eps which is superseded by zoom.min
    1423          *
    1424          * @name JXG.Board#zoom
    1425          * @type Object
    1426          * @default See above
    1427          * @see JXG.Board#showZoom
    1428          *
    1429          */
    1430         zoom: {
    1431             enabled: true,
    1432             factorX: 1.25,
    1433             factorY: 1.25,
    1434             wheel: true,
    1435             needShift: true,
    1436             center: 'auto',
    1437             min: 0.0001,
    1438             max: 10000.0,
    1439             pinch: true,
    1440             pinchHorizontal: true,
    1441             pinchVertical: true,
    1442             pinchSensitivity: 7
    1443         },
    1444
    1445         // /**
    1446         //  * Additional zoom factor multiplied to {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}.
    1447         //  *
    1448         //  * @name JXG.Board#zoomFactor
    1449         //  * @type Number
    1450         //  * @default 1.0
    1451         //  */
    1452         // zoomFactor: 1,
    1453
    1454         /**
    1455          * Zoom factor in horizontal direction.
    1456          *
    1457          * @name JXG.Board#zoomX
    1458          * @see JXG.Board#zoomY
    1459          * @type Number
    1460          * @default 1.0
    1461          */
    1462         zoomX: 1,
    1463
    1464         /**
    1465          * Zoom factor in vertical direction.
    1466          *
    1467          * @name JXG.Board#zoomY
    1468          * @see JXG.Board#zoomX
    1469          * @type Number
    1470          * @default 1.0
    1471          */
    1472         zoomY: 1
    1473
    1474         /**#@-*/
    1475     },
    1476
    1477     /**
    1478      * Options that are used by the navigation bar.
    1479      *
    1480      * Default values are
    1481      * <pre>
    1482      * JXG.Option.navbar: {
    1483      *   strokeColor: '#333333',
    1484      *   fillColor: 'transparent',
    1485      *   highlightFillColor: '#aaaaaa',
    1486      *   padding: '2px',
    1487      *   position: 'absolute',
    1488      *   fontSize: '14px',
    1489      *   cursor: 'pointer',
    1490      *   zIndex: '100',
    1491      *   right: '5px',
    1492      *   bottom: '5px'
    1493      * },
    1494      * </pre>
    1495      * These settings are overruled by the CSS class 'JXG_navigation'.
    1496      * @deprecated
    1497      * @type Object
    1498      * @name JXG.Options#navbar
    1499      *
    1500      */
    1501     navbar: {
    1502         strokeColor: '#333333', //'#aaaaaa',
    1503         fillColor: 'transparent', //#f5f5f5',
    1504         highlightFillColor: '#aaaaaa',
    1505         padding: '2px',
    1506         position: 'absolute',
    1507         fontSize: '14px',
    1508         cursor: 'pointer',
    1509         zIndex: '100',
    1510         right: '5px',
    1511         bottom: '5px'
    1512         //border: 'none 1px black',
    1513         //borderRadius: '4px'
    1514     },
    1515
    1516     /*
    1517      *  Generic options used by {@link JXG.GeometryElement}
    1518      */
    1519     elements: {
    1520         /**#@+
    1521          * @visprop
    1522          */
    1523         // This is a meta tag: http://code.google.com/p/jsdoc-toolkit/wiki/MetaTags
    1524
    1525         /**
    1526          * ARIA settings for JSXGraph elements.
    1527          * Besides 'label' and 'live', all available properties from
    1528          * <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA</a> may be set.
    1529          * In JSXGraph, the available properties are used without the leading 'aria-'.
    1530          * For example, the value of the JSXGraph attribute 'aria.label' will be set to the
    1531          * HTML attribute 'aria-label' (ignoring 'aria.enabled').
    1532          *
    1533          * @name aria
    1534          * @memberOf JXG.GeometryElement.prototype
    1535          * @type Object
    1536          * @default <pre>{
    1537          *   enabled: false,
    1538          *   label: '',
    1539          *   live: 'assertive'
    1540          *  }</pre>
    1541          */
    1542         aria: {
    1543             enabled: false,
    1544             label: '',
    1545             live: 'assertive' // 'assertive', 'polite', 'none'
    1546         },
    1547
    1548         /**
    1549          * Apply CSS classes to an element in non-highlighted view. It is possible to supply one or more
    1550          * CSS classes separated by blanks.
    1551          * <p>
    1552          * For non-text and non-image elements, this feature is available for the SVG renderer, only.
    1553          * <p>
    1554          * For text and image elements the specificity (priority) of JSXGraph attributes is higher than the CSS class properties, see
    1555          * {@link Text#cssDefaultStyle}
    1556          * For other elements, however, the specificity of a CSS class is higher than the corresponding JSXGraph attribute, see the example below.
    1557          * The fill-properties of a CSS class will be set only if the corresponding JSXGraph attributes are set (to a dummy value).
    1558          *
    1559          * @example
    1560          * // CSS class
    1561          * .line {
    1562          *     stroke: blue;
    1563          *     stroke-width: 10px;
    1564          *     fill: yellow;
    1565          * }
    1566          *
    1567          * // JavaScript
    1568          * var line = board.create('line', [[0, 0], [3, 3]], {
    1569          *   cssClass: 'line',
    1570          *   strokeColor: 'black',
    1571          *   strokeWidth: 2,
    1572          *   fillColor: '' // Necessary to enable the yellow fill color of the CSS class
    1573          * });
    1574          *
    1575          * // The line is blue and has stroke-width 10px;
    1576          *
    1577          *
    1578          * @name cssClass
    1579          * @memberOf JXG.GeometryElement.prototype
    1580          * @type String
    1581          * @default ''
    1582          * @see Text#cssClass
    1583          * @see JXG.GeometryElement#highlightCssClass
    1584          */
    1585         cssClass: '',
    1586
    1587         /**
    1588          * Apply CSS classes to an element in highlighted view. It is possible to supply one or more
    1589          * CSS classes separated by blanks.
    1590          * <p>
    1591          * For non-text and non-image elements, this feature is available for the SVG renderer, only.
    1592          *
    1593          * @name highlightCssClass
    1594          * @memberOf JXG.GeometryElement.prototype
    1595          * @type String
    1596          * @default ''
    1597          * @see Text#highlightCssClass
    1598          * @see JXG.GeometryElement#cssClass
    1599          */
    1600         highlightCssClass: '',
    1601
    1602         /**
    1603          * Determines the elements border-style.
    1604          * Possible values are:
    1605          * <ul><li>0 for a solid line</li>
    1606          * <li>1 for a dotted line</li>
    1607          * <li>2 for a line with small dashes</li>
    1608          * <li>3 for a line with medium dashes</li>
    1609          * <li>4 for a line with big dashes</li>
    1610          * <li>5 for a line with alternating medium and big dashes and large gaps</li>
    1611          * <li>6 for a line with alternating medium and big dashes and small gaps</li>
    1612          * <li>7 for a dotted line. Needs {@link JXG.GeometryElement#linecap} set to "round" for round dots.</li>
    1613          * </ul>
    1614          * The dash patterns are defined in {@link JXG.AbstractRenderer#dashArray}.
    1615          *
    1616          * @type Number
    1617          * @name JXG.GeometryElement#dash
    1618          * @default 0
    1619          *
    1620          * @see JXG.GeometryElement#lineCap
    1621          * @see JXG.AbstractRenderer#dashArray
    1622          */
    1623         dash: 0,
    1624
    1625         /**
    1626          * If true, the dash pattern is multiplied by strokeWidth / 2.
    1627          * @name JXG.GeometryElement#dashScale
    1628          * @type Boolean
    1629          * @default false
    1630          *
    1631          * @see JXG.GeometryElement#dash
    1632          * @see JXG.AbstractRenderer#dashArray
    1633          */
    1634         dashScale: false,
    1635
    1636         /**
    1637          * If draft.draft: true the element will be drawn in grey scale colors (as default)
    1638          * to visualize that it's only a draft.
    1639          *
    1640          * @name JXG.GeometryElement#draft
    1641          * @type Object
    1642          * @default <tt>{@link JXG.Options.elements.draft#draft}</tt>
    1643          */
    1644         draft: {
    1645             draft: false,
    1646             strokeColor: '#565656',
    1647             fillColor: '#565656',
    1648             strokeOpacity: 0.8,
    1649             fillOpacity: 0.8,
    1650             strokeWidth: 1
    1651         },
    1652
    1653         /**
    1654          * If the element is dragged it will be moved on mousedown or touchstart to the
    1655          * top of its layer. Works only for SVG renderer and for simple elements
    1656          * consisting of one SVG node.
    1657          * @example
    1658          * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
    1659          * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});
    1660          *
    1661          * </pre><div id="JXG38449fee-1ab4-44de-b7d1-43caa1f50f86" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1662          * <script type="text/javascript">
    1663          *     (function() {
    1664          *         var board = JXG.JSXGraph.initBoard('JXG38449fee-1ab4-44de-b7d1-43caa1f50f86',
    1665          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    1666          *     var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
    1667          *     var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});
    1668          *
    1669          *     })();
    1670          *
    1671          * </script><pre>
    1672          *
    1673          * @type Boolean
    1674          * @default false
    1675          * @name JXG.GeometryElement#dragToTopOfLayer
    1676          */
    1677         dragToTopOfLayer: false,
    1678
    1679         /**
    1680          * Links to the defining 3D element of a 2D element. Otherwise it is null.
    1681          *
    1682          * @name JXG.GeometryElement#element3D
    1683          * @default null
    1684          * @private
    1685          */
    1686         element3D: null,
    1687
    1688         /**
    1689          * The fill color of this geometry element.
    1690          * @type String
    1691          * @name JXG.GeometryElement#fillColor
    1692          * @see JXG.GeometryElement#highlightFillColor
    1693          * @see JXG.GeometryElement#fillOpacity
    1694          * @see JXG.GeometryElement#highlightFillOpacity
    1695          * @default JXG.palette.red
    1696          */
    1697         fillColor: Color.palette.red,
    1698
    1699         /**
    1700          * Opacity for fill color.
    1701          * @type Number
    1702          * @name JXG.GeometryElement#fillOpacity
    1703          * @see JXG.GeometryElement#fillColor
    1704          * @see JXG.GeometryElement#highlightFillColor
    1705          * @see JXG.GeometryElement#highlightFillOpacity
    1706          * @default 1
    1707          */
    1708         fillOpacity: 1,
    1709
    1710         /**
    1711          * If true the element is fixed and can not be dragged around. The element
    1712          * will be repositioned on zoom and moveOrigin events.
    1713          * @type Boolean
    1714          * @default false
    1715          * @name JXG.GeometryElement#fixed
    1716          */
    1717         fixed: false,
    1718
    1719         /**
    1720          * If true the element is fixed and can not be dragged around. The element
    1721          * will even stay at its position on zoom and moveOrigin events.
    1722          * Only free elements like points, texts, images, curves can be frozen.
    1723          * For slider elements, the subobjects point1 and point2 have to be "frozen".
    1724          *
    1725          * @type Boolean
    1726          * @default false
    1727          * @name JXG.GeometryElement#frozen
    1728          *
    1729          * @example
    1730          * var txt = board.create('text', [1, 2, 'Hello'], {frozen: true, fontSize: 24});
    1731          * var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], {
    1732          *     name:'a',
    1733          *     point1: {frozen: true},
    1734          *     point2: {frozen: true}
    1735          * });
    1736          *
    1737          * </pre><div id="JXG02f88c9d-8c0a-4174-9219-f0ea43749159" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1738          * <script type="text/javascript">
    1739          *     (function() {
    1740          *         var board = JXG.JSXGraph.initBoard('JXG02f88c9d-8c0a-4174-9219-f0ea43749159',
    1741          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    1742          *     var txt = board.create('text', [1, 2, 'Hello'], {frozen: true, fontSize: 24});
    1743          *     var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], {
    1744          *         name:'a',
    1745          *         point1: {frozen: true},
    1746          *         point2: {frozen: true}
    1747          *     });
    1748          *
    1749          *     })();
    1750          *
    1751          * </script><pre>
    1752          *
    1753          */
    1754         frozen: false,
    1755
    1756         /**
    1757          * Gradient type. Possible values are 'linear'. 'radial' or null.
    1758          *
    1759          * @example
    1760          *     var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'});
    1761          *     var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'});
    1762          *     var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'});
    1763          *
    1764          *     var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
    1765          *                 fillOpacity: 1,
    1766          *                 fillColor: 'yellow',
    1767          *                 gradient: 'linear',
    1768          *                 gradientSecondColor: 'blue',
    1769          *                 gradientAngle: function() { return a.Value(); },
    1770          *                 gradientStartOffset: function() { return b.Value(); },
    1771          *                 gradientEndOffset: function() { return c.Value(); },
    1772          *                 hasInnerPoints: true
    1773          *         });
    1774          *
    1775          * </pre><div id="JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1776          * <script type="text/javascript">
    1777          *     (function() {
    1778          *         var board = JXG.JSXGraph.initBoard('JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0',
    1779          *             {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false});
    1780          *         var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'});
    1781          *         var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'});
    1782          *         var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'});
    1783          *
    1784          *         var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
    1785          *                     fillOpacity: 1,
    1786          *                     fillColor: 'yellow',
    1787          *                     gradient: 'linear',
    1788          *                     gradientSecondColor: 'blue',
    1789          *                     gradientAngle: function() { return a.Value(); },
    1790          *                     gradientStartOffset: function() { return b.Value(); },
    1791          *                     gradientEndOffset: function() { return c.Value(); },
    1792          *                     hasInnerPoints: true
    1793          *             });
    1794          *
    1795          *     })();
    1796          *
    1797          * </script><pre>
    1798          *
    1799          * @example
    1800          *     var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'});
    1801          *     var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'});
    1802          *     var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'});
    1803          *     var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'});
    1804          *     var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'});
    1805          *     var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'});
    1806          *
    1807          *     var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
    1808          *                 fillOpacity: 1,
    1809          *                 fillColor: 'yellow',
    1810          *                 gradient: 'radial',
    1811          *                 gradientSecondColor: 'blue',
    1812          *                 gradientCX: function() { return cx.Value(); },
    1813          *                 gradientCY: function() { return cx.Value(); },
    1814          *                 gradientR: function() { return r.Value(); },
    1815          *                 gradientFX: function() { return fx.Value(); },
    1816          *                 gradientFY: function() { return fx.Value(); },
    1817          *                 gradientFR: function() { return fr.Value(); },
    1818          *                 gradientStartOffset: function() { return o1.Value(); },
    1819          *                 gradientEndOffset: function() { return o2.Value(); },
    1820          *                 hasInnerPoints: true
    1821          *     });
    1822          *
    1823          * </pre><div id="JXG6081ca7f-0d09-4525-87ac-325a02fe2225" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1824          * <script type="text/javascript">
    1825          *     (function() {
    1826          *         var board = JXG.JSXGraph.initBoard('JXG6081ca7f-0d09-4525-87ac-325a02fe2225',
    1827          *             {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false});
    1828          *         var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'});
    1829          *         var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'});
    1830          *         var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'});
    1831          *         var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'});
    1832          *         var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'});
    1833          *         var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'});
    1834          *
    1835          *         var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
    1836          *                     fillOpacity: 1,
    1837          *                     fillColor: 'yellow',
    1838          *                     gradient: 'radial',
    1839          *                     gradientSecondColor: 'blue',
    1840          *                     gradientCX: function() { return cx.Value(); },
    1841          *                     gradientCY: function() { return cx.Value(); },
    1842          *                     gradientR: function() { return r.Value(); },
    1843          *                     gradientFX: function() { return fx.Value(); },
    1844          *                     gradientFY: function() { return fx.Value(); },
    1845          *                     gradientFR: function() { return fr.Value(); },
    1846          *                     gradientStartOffset: function() { return o1.Value(); },
    1847          *                     gradientEndOffset: function() { return o2.Value(); },
    1848          *                     hasInnerPoints: true
    1849          *         });
    1850          *
    1851          *     })();
    1852          *
    1853          * </script><pre>
    1854          *
    1855          *
    1856          * @type String
    1857          * @name JXG.GeometryElement#gradient
    1858          * @see JXG.GeometryElement#gradientSecondColor
    1859          * @see JXG.GeometryElement#gradientSecondOpacity
    1860          * @default null
    1861          */
    1862         gradient: null,
    1863
    1864         /**
    1865          * Angle (in radians) of the gradiant in case the gradient is of type 'linear'.
    1866          * If the angle is 0, the first color is on the left and the second color is on the right.
    1867          * If the angle is π/2 the first color is on top and the second color at the
    1868          * bottom.
    1869          * @type Number
    1870          * @name JXG.GeometryElement#gradientAngle
    1871          * @see JXG.GeometryElement#gradient
    1872          * @default 0
    1873          */
    1874         gradientAngle: 0,
    1875
    1876         /**
    1877          * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient.
    1878          * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
    1879          * For radial gradients in canvas this is the value 'x1'.
    1880          * Takes a value between 0 and 1.
    1881          * @type Number
    1882          * @name JXG.GeometryElement#gradientCX
    1883          * @see JXG.GeometryElement#gradient
    1884          * @see JXG.GeometryElement#gradientCY
    1885          * @see JXG.GeometryElement#gradientR
    1886          * @default 0.5
    1887          */
    1888         gradientCX: 0.5,
    1889
    1890         /**
    1891          * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient.
    1892          * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
    1893          * For radial gradients in canvas this is the value 'y1'.
    1894          * Takes a value between 0 and 1.
    1895          * @type Number
    1896          * @name JXG.GeometryElement#gradientCY
    1897          * @see JXG.GeometryElement#gradient
    1898          * @see JXG.GeometryElement#gradientCX
    1899          * @see JXG.GeometryElement#gradientR
    1900          * @default 0.5
    1901          */
    1902         gradientCY: 0.5,
    1903
    1904         /**
    1905          * The gradientEndOffset attribute is a number (ranging from 0 to 1) which indicates where the second gradient stop is placed,
    1906          * see the SVG specification for more information.
    1907          * For linear gradients, this attribute represents a location along the gradient vector.
    1908          * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
    1909          * @type Number
    1910          * @name JXG.GeometryElement#gradientEndOffset
    1911          * @see JXG.GeometryElement#gradient
    1912          * @see JXG.GeometryElement#gradientStartOffset
    1913          * @default 1.0
    1914          */
    1915         gradientEndOffset: 1.0,
    1916
    1917         /**
    1918          * ‘fx’ and ‘fy’ define the focal point for the radial gradient.
    1919          * The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy).
    1920          * For radial gradients in canvas this is the value 'x0'.
    1921          * Takes a value between 0 and 1.
    1922          * @type Number
    1923          * @name JXG.GeometryElement#gradientFX
    1924          * @see JXG.GeometryElement#gradient
    1925          * @see JXG.GeometryElement#gradientFY
    1926          * @see JXG.GeometryElement#gradientFR
    1927          * @default 0.5
    1928          */
    1929         gradientFX: 0.5,
    1930
    1931         /**
    1932          * y-coordinate of the circle center for the second color in case of gradient 'radial'. (The attribute fy in SVG)
    1933          * For radial gradients in canvas this is the value 'y0'.
    1934          * Takes a value between 0 and 1.
    1935          * @type Number
    1936          * @name JXG.GeometryElement#gradientFY
    1937          * @see JXG.GeometryElement#gradient
    1938          * @see JXG.GeometryElement#gradientFX
    1939          * @see JXG.GeometryElement#gradientFR
    1940          * @default 0.5
    1941          */
    1942         gradientFY: 0.5,
    1943
    1944         /**
    1945          * This attribute defines the radius of the start circle of the radial gradient.
    1946          * The gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle.
    1947          * For radial gradients in canvas this is the value 'r0'.
    1948          * Takes a value between 0 and 1.
    1949          * @type Number
    1950          * @name JXG.GeometryElement#gradientFR
    1951          * @see JXG.GeometryElement#gradient
    1952          * @see JXG.GeometryElement#gradientFX
    1953          * @see JXG.GeometryElement#gradientFY
    1954          * @default 0.0
    1955          */
    1956         gradientFR: 0.0,
    1957
    1958         /**
    1959          * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient.
    1960          * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
    1961          * For radial gradients in canvas this is the value 'r1'.
    1962          * Takes a value between 0 and 1.
    1963          * @type Number
    1964          * @name JXG.GeometryElement#gradientR
    1965          * @see JXG.GeometryElement#gradient
    1966          * @see JXG.GeometryElement#gradientCX
    1967          * @see JXG.GeometryElement#gradientCY
    1968          * @default 0.5
    1969          */
    1970         gradientR: 0.5,
    1971
    1972         /**
    1973          * Second color for gradient.
    1974          * @type String
    1975          * @name JXG.GeometryElement#gradientSecondColor
    1976          * @see JXG.GeometryElement#gradient
    1977          * @see JXG.GeometryElement#gradientSecondOpacity
    1978          * @default '#ffffff'
    1979          */
    1980         gradientSecondColor: '#ffffff',
    1981
    1982         /**
    1983          * Opacity of second gradient color. Takes a value between 0 and 1.
    1984          * @type Number
    1985          * @name JXG.GeometryElement#gradientSecondOpacity
    1986          * @see JXG.GeometryElement#gradient
    1987          * @see JXG.GeometryElement#gradientSecondColor
    1988          * @default 1
    1989          */
    1990         gradientSecondOpacity: 1,
    1991
    1992         /**
    1993          * The gradientStartOffset attribute is a number (ranging from 0 to 1) which indicates where the first gradient stop is placed,
    1994          * see the SVG specification for more information.
    1995          * For linear gradients, this attribute represents a location along the gradient vector.
    1996          * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
    1997          * @type Number
    1998          * @name JXG.GeometryElement#gradientStartOffset
    1999          * @see JXG.GeometryElement#gradient
    2000          * @see JXG.GeometryElement#gradientEndOffset
    2001          * @default 0.0
    2002          */
    2003         gradientStartOffset: 0.0,
    2004
    2005         /**
    2006          * @type Boolean
    2007          * @default true
    2008          * @name JXG.GeometryElement#highlight
    2009          */
    2010         highlight: true,
    2011
    2012         /**
    2013          * The fill color of the given geometry element when the mouse is pointed over it.
    2014          * @type String
    2015          * @name JXG.GeometryElement#highlightFillColor
    2016          * @see JXG.GeometryElement#fillColor
    2017          * @see JXG.GeometryElement#fillOpacity
    2018          * @see JXG.GeometryElement#highlightFillOpacity
    2019          * @default 'none'
    2020          */
    2021         highlightFillColor: 'none',
    2022
    2023         /**
    2024          * Opacity for fill color when the object is highlighted.
    2025          * @type Number
    2026          * @name JXG.GeometryElement#highlightFillOpacity
    2027          * @see JXG.GeometryElement#fillColor
    2028          * @see JXG.GeometryElement#highlightFillColor
    2029          * @see JXG.GeometryElement#fillOpacity
    2030          * @default 1
    2031          */
    2032         highlightFillOpacity: 1,
    2033
    2034         /**
    2035          * The stroke color of the given geometry element when the user moves the mouse over it.
    2036          * @type String
    2037          * @name JXG.GeometryElement#highlightStrokeColor
    2038          * @see JXG.GeometryElement#strokeColor
    2039          * @see JXG.GeometryElement#strokeWidth
    2040          * @see JXG.GeometryElement#strokeOpacity
    2041          * @see JXG.GeometryElement#highlightStrokeOpacity
    2042          * @default '#c3d9ff'
    2043          */
    2044         highlightStrokeColor: '#c3d9ff',
    2045
    2046         /**
    2047          * Opacity for stroke color when the object is highlighted.
    2048          * @type Number
    2049          * @name JXG.GeometryElement#highlightStrokeOpacity
    2050          * @see JXG.GeometryElement#strokeColor
    2051          * @see JXG.GeometryElement#highlightStrokeColor
    2052          * @see JXG.GeometryElement#strokeWidth
    2053          * @see JXG.GeometryElement#strokeOpacity
    2054          * @default 1
    2055          */
    2056         highlightStrokeOpacity: 1,
    2057
    2058         /**
    2059          * Width of the element's stroke when the mouse is pointed over it.
    2060          * @type Number
    2061          * @name JXG.GeometryElement#highlightStrokeWidth
    2062          * @see JXG.GeometryElement#strokeColor
    2063          * @see JXG.GeometryElement#highlightStrokeColor
    2064          * @see JXG.GeometryElement#strokeOpacity
    2065          * @see JXG.GeometryElement#highlightStrokeOpacity
    2066          * @see JXG.GeometryElement#highlightFillColor
    2067          * @default 2
    2068          */
    2069         highlightStrokeWidth: 2,
    2070
    2071         /**
    2072          * @name JXG.GeometryElement#isLabel
    2073          * @default false
    2074          * @private
    2075         */
    2076         // By default, an element is not a label. Do not change this.
    2077         isLabel: false,
    2078
    2079         /**
    2080          * Display layer which will contain the element.
    2081          * @name JXG.GeometryElement#layer
    2082          * @see JXG.Options#layer
    2083          * @default See {@link JXG.Options#layer}
    2084          */
    2085         layer: 0,
    2086
    2087         /**
    2088          * Line endings (linecap) of a stroke element, i.e. line, circle, curve.
    2089          * Possible values are:
    2090          * <ul>
    2091          * <li> 'butt',
    2092          * <li> 'round',
    2093          * <li> 'square'.
    2094          * </ul>
    2095          * Not available for VML renderer.
    2096          *
    2097          * @name JXG.GeometryElement#lineCap
    2098          * @type String
    2099          * @default 'butt'
    2100          */
    2101         lineCap: 'butt',
    2102
    2103         /**
    2104          * If this is set to true, the element is updated in every update
    2105          * call of the board. If set to false, the element is updated only after
    2106          * zoom events or more generally, when the bounding box has been changed.
    2107          * Examples for the latter behavior should be axes.
    2108          * @type Boolean
    2109          * @default true
    2110          * @see JXG.GeometryElement#needsRegularUpdate
    2111          * @name JXG.GeometryElement#needsRegularUpdate
    2112          */
    2113         needsRegularUpdate: true,
    2114
    2115         /**
    2116          * If some size of an element is controlled by a function, like the circle radius
    2117          * or segments of fixed length, this attribute controls what happens if the value
    2118          * is negative. By default, the absolute value is taken. If true, the maximum
    2119          * of 0 and the value is used.
    2120          *
    2121          * @type Boolean
    2122          * @default false
    2123          * @name JXG.GeometryElement#nonnegativeOnly
    2124          * @example
    2125          * var slider = board.create('slider', [[4, -3], [4, 3], [-4, 1, 4]], { name: 'a'});
    2126          * var circle = board.create('circle', [[-1, 0], 1], {
    2127          *     nonnegativeOnly: true
    2128          * });
    2129          * circle.setRadius('a');         // Use JessieCode
    2130          * var seg = board.create('segment', [[-4, 3], [0, 3], () => slider.Value()], {
    2131          *     point1: {visible: true},
    2132          *     point2: {visible: true},
    2133          *     nonnegativeOnly: true
    2134          * });
    2135          *
    2136          * </pre><div id="JXG9cb76224-1f78-4488-b20f-800788768bc9" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2137          * <script type="text/javascript">
    2138          *     (function() {
    2139          *         var board = JXG.JSXGraph.initBoard('JXG9cb76224-1f78-4488-b20f-800788768bc9',
    2140          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2141          *     var slider = board.create('slider', [[4, -3], [4, 3], [-4, 1, 4]], { name: 'a'});
    2142          *     var circle = board.create('circle', [[-1, 0], 1], {
    2143          *         nonnegativeOnly: true
    2144          *     });
    2145          *     circle.setRadius('a');         // Use JessieCode
    2146          *     var seg = board.create('segment', [[-4, 3], [0, 3], () => slider.Value()], {
    2147          *         point1: {visible: true},
    2148          *         point2: {visible: true},
    2149          *         nonnegativeOnly: true
    2150          *     });
    2151          *
    2152          *     })();
    2153          *
    2154          * </script><pre>
    2155          *
    2156          */
    2157         nonnegativeOnly: false,
    2158
    2159         /**
    2160          * Precision options for JSXGraph elements.
    2161          * This attributes takes either the value 'inherit' or an object of the form:
    2162          * <pre>
    2163          * precision: {
    2164          *      touch: 30,
    2165          *      mouse: 4,
    2166          *      pen: 4
    2167          * }
    2168          * </pre>
    2169          *
    2170          * In the first case, the global, JSXGraph-wide values of JXGraph.Options.precision
    2171          * are taken.
    2172          *
    2173          * @type {String|Object}
    2174          * @name JXG.GeometryElement#precision
    2175          * @see JXG.Options#precision
    2176          * @default 'inherit'
    2177          */
    2178         precision: 'inherit',
    2179
    2180         /**
    2181          * A private element will be inaccessible in certain environments, e.g. a graphical user interface.
    2182          *
    2183          * @name JXG.GeometryElement#priv
    2184          * @type Boolean
    2185          * @default false
    2186          */
    2187         priv: false,
    2188
    2189         /**
    2190          * Determines whether two-finger manipulation may rotate this object.
    2191          * If set to false, the object can only be scaled and translated.
    2192          * <p>
    2193          * In case the element is a polygon or line and it has the attribute "rotatable:false",
    2194          * moving the element with two fingers results in a rotation or translation.
    2195          * <p>
    2196          * If an element is set to be neither scalable nor rotatable, it can only be translated.
    2197          * <p>
    2198          * In case of a polygon, scaling is only possible if <i>no</i> vertex has snapToGrid or snapToPoints
    2199          * enabled and no vertex is fixed by some other constraint. Also, the polygon itself has to have
    2200          * snapToGrid disabled.
    2201          *
    2202          * @type Boolean
    2203          * @default true
    2204          * @name JXG.GeometryElement#rotatable
    2205          * @see JXG.GeometryElement#scalable
    2206          */
    2207         rotatable: true,
    2208
    2209         /**
    2210          * Determines whether two-finger manipulation of this object may change its size.
    2211          * If set to false, the object is only rotated and translated.
    2212          * <p>
    2213          * In case the element is a horizontal or vertical line having ticks, "scalable:true"
    2214          * enables zooming of the board by dragging ticks lines. This feature is enabled,
    2215          * for the ticks element of the line element the attribute "fixed" has to be false
    2216          * and the line element's scalable attribute has to be true.
    2217          * <p>
    2218          * In case the element is a polygon or line and it has the attribute "scalable:false",
    2219          * moving the element with two fingers results in a rotation or translation.
    2220          * <p>
    2221          * If an element is set to be neither scalable nor rotatable, it can only be translated.
    2222          * <p>
    2223          * In case of a polygon, scaling is only possible if <i>no</i> vertex has snapToGrid or snapToPoints
    2224          * enabled and no vertex is fixed by some other constraint. Also, the polygon itself has to have
    2225          * snapToGrid disabled.
    2226          *
    2227          * @type Boolean
    2228          * @default true
    2229          * @name JXG.GeometryElement#scalable
    2230          * @see JXG.Ticks#fixed
    2231          * @see JXG.GeometryElement#rotatable
    2232          */
    2233         scalable: true,
    2234
    2235         /**
    2236          * If enabled:true the (stroke) element will get a customized shadow.
    2237          * <p>
    2238          * Customize <i>color</i> and <i>opacity</i>:
    2239          * If the object's RGB stroke color is <tt>[r,g,b]</tt> and its opacity is <tt>op</i>, and
    2240          * the shadow parameters <i>color</i> is given as <tt>[r', g', b']</tt> and <i>opacity</i> as <tt>op'</tt>
    2241          * the shadow will receive the RGB color
    2242          * <center>
    2243          * <tt>[blend*r + r', blend*g + g', blend*b + b'] </tt>
    2244          * </center>
    2245          * and its opacity will be equal to <tt>op * op'</tt>.
    2246          * Further, the parameters <i>blur</i> and <i>offset</i> can be adjusted.
    2247          * <p>
    2248          * This attribute is only available with SVG, not with canvas.
    2249          *
    2250          * @type Object
    2251          * @name JXG.GeometryElement#shadow
    2252          * @default shadow: {
    2253          *   enabled: false,
    2254          *   color: [0, 0, 0],
    2255          *   opacity: 1,
    2256          *   blur: 3,
    2257          *   blend: 0.1,
    2258          *   offset: [5, 5]
    2259          * }
    2260          *
    2261          * @example
    2262          * board.options.line.strokeWidth = 2
    2263          * // No shadow
    2264          * var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false});
    2265          *
    2266          * // Default shadow
    2267          * var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true});
    2268          *
    2269          * // No shadow
    2270          * var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}});
    2271          *
    2272          * // Shadow uses same color as line
    2273          * var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue',
    2274          *             shadow: {enabled: true, color: '#000000', blend: 1}
    2275          *         });
    2276          *
    2277          * // Shadow color as a mixture between black and the line color, additionally set opacity
    2278          * var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue',
    2279          *             shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5}
    2280          *         });
    2281          *
    2282          * // Use different value for blur and offset [dx, dy]
    2283          * var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue',
    2284          *             shadow: {enabled: true, offset:[0, 25], blur: 6}
    2285          *         });
    2286          *
    2287          * </pre><div id="JXG1185a9fa-0fa5-425f-8c15-55b56e1be958" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2288          * <script type="text/javascript">
    2289          *     (function() {
    2290          *         var board = JXG.JSXGraph.initBoard('JXG1185a9fa-0fa5-425f-8c15-55b56e1be958',
    2291          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2292          *     board.options.line.strokeWidth = 2
    2293          *     // No shadow
    2294          *     var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false});
    2295          *
    2296          *     // Default shadow
    2297          *     var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true});
    2298          *
    2299          *     // No shadow
    2300          *     var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}});
    2301          *
    2302          *     // Shadow uses same color as line
    2303          *     var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue',
    2304          *                 shadow: {enabled: true, color: '#000000', blend: 1}
    2305          *             });
    2306          *
    2307          *     // Shadow color as a mixture between black and the line color, additionally set opacity
    2308          *     var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue',
    2309          *                 shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5}
    2310          *             });
    2311          *
    2312          *     // Use different value for blur and offset [dx, dy]
    2313          *     var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue',
    2314          *                 shadow: {enabled: true, offset:[0, 25], blur: 6}
    2315          *             });
    2316          *
    2317          *     })();
    2318          *
    2319          * </script><pre>
    2320          *
    2321          */
    2322         shadow: {
    2323             enabled: false,
    2324             color: [0, 0, 0],
    2325             opacity: 1,
    2326             blur: 3,
    2327             blend: 0.1,
    2328             offset: [5, 5]
    2329         },
    2330
    2331         /**
    2332          * Snaps the element or its parents to the grid. Currently only relevant for points, circles,
    2333          * and lines. Points are snapped to grid directly, on circles and lines it's only the parent
    2334          * points that are snapped
    2335          * @type Boolean
    2336          * @default false
    2337          * @name JXG.GeometryElement#snapToGrid
    2338          */
    2339         snapToGrid: false,
    2340
    2341         /**
    2342          * The stroke color of the given geometry element.
    2343          * @type String
    2344          * @name JXG.GeometryElement#strokeColor
    2345          * @see JXG.GeometryElement#highlightStrokeColor
    2346          * @see JXG.GeometryElement#strokeWidth
    2347          * @see JXG.GeometryElement#strokeOpacity
    2348          * @see JXG.GeometryElement#highlightStrokeOpacity
    2349          * @default JXG.palette.blue
    2350          */
    2351         strokeColor: Color.palette.blue,
    2352
    2353         /**
    2354          * Opacity for element's stroke color.
    2355          * @type Number
    2356          * @name JXG.GeometryElement#strokeOpacity
    2357          * @see JXG.GeometryElement#strokeColor
    2358          * @see JXG.GeometryElement#highlightStrokeColor
    2359          * @see JXG.GeometryElement#strokeWidth
    2360          * @see JXG.GeometryElement#highlightStrokeOpacity
    2361          * @default 1
    2362          */
    2363         strokeOpacity: 1,
    2364
    2365         /**
    2366          * Width of the element's stroke.
    2367          * @type Number
    2368          * @name JXG.GeometryElement#strokeWidth
    2369          * @see JXG.GeometryElement#strokeColor
    2370          * @see JXG.GeometryElement#highlightStrokeColor
    2371          * @see JXG.GeometryElement#strokeOpacity
    2372          * @see JXG.GeometryElement#highlightStrokeOpacity
    2373          * @default 2
    2374          */
    2375         strokeWidth: 2,
    2376
    2377         /**
    2378          * Controls if an element can get the focus with the tab key.
    2379          * tabindex corresponds to the HTML attribute of the same name.
    2380          * See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">description at MDN</a>.
    2381          * The additional value "null" completely disables focus of an element.
    2382          * The value will be ignored if keyboard control of the board is not enabled or
    2383          * if the element is not visible.
    2384          *
    2385          * @name JXG.GeometryElement#tabindex
    2386          * @type Number
    2387          * @default 0
    2388          * @see JXG.Board#keyboard
    2389          * @see JXG.GeometryElement#fixed
    2390          * @see JXG.GeometryElement#visible
    2391          */
    2392         tabindex: -1,
    2393
    2394         /**
    2395          * If true the element will be traced, i.e. on every movement the element will be copied
    2396          * to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements.
    2397          *
    2398          * The calling of element.setAttribute({trace:false}) additionally
    2399          * deletes all traces of this element. By calling
    2400          * element.setAttribute({trace:'pause'})
    2401          * the removal of already existing traces can be prevented.
    2402          *
    2403          * The visual appearance of the trace can be influenced by {@link JXG.GeometryElement#traceAttributes}.
    2404          *
    2405          * @see JXG.GeometryElement#clearTrace
    2406          * @see JXG.GeometryElement#traces
    2407          * @see JXG.GeometryElement#numTraces
    2408          * @see JXG.GeometryElement#traceAttributes
    2409          * @type Boolean|String
    2410          * @default false
    2411          * @name JXG.GeometryElement#trace
    2412          */
    2413         trace: false,
    2414
    2415         /**
    2416          * Extra visual properties for traces of an element
    2417          * @type Object
    2418          * @see JXG.GeometryElement#trace
    2419          * @name JXG.GeometryElement#traceAttributes
    2420          * @default <tt>{}</tt>
    2421          *
    2422          * @example
    2423          * JXG.Options.elements.traceAttributes = {
    2424          *     size: 2
    2425          * };
    2426          *
    2427          * const board = JXG.JSXGraph.initBoard(BOARDID, {
    2428          *     boundingbox: [-4, 4, 4, -4],
    2429          *     keepaspectratio: true
    2430          * });
    2431          *
    2432          * var p = board.create('point', [0.0, 2.0], {
    2433          *     trace: true,
    2434          *     size: 10,
    2435          *     traceAttributes: {
    2436          *         color: 'black',
    2437          *         face: 'x'
    2438          *     }
    2439          * });
    2440          *
    2441          * </pre><div id="JXG504889cb-bb6f-4b65-85db-3ad555c08bcf" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2442          * <script type="text/javascript">
    2443          *     (function() {
    2444          *     JXG.Options.elements.traceAttributes = {
    2445          *         size: 2
    2446          *     };
    2447          *         var board = JXG.JSXGraph.initBoard('JXG504889cb-bb6f-4b65-85db-3ad555c08bcf',
    2448          *             {boundingbox: [-4, 4, 4, -4], axis: true, showcopyright: false, shownavigation: true, showClearTraces: true});
    2449          *
    2450          *     var p = board.create('point', [0.0, 2.0], {
    2451          *         trace: true,
    2452          *         size: 10,
    2453          *         traceAttributes: {
    2454          *             color: 'black',
    2455          *             face: 'x'
    2456          *         }
    2457          *     });
    2458          *
    2459          *     })();
    2460          *
    2461          * </script><pre>
    2462          *
    2463          */
    2464         traceAttributes: {},
    2465
    2466         /**
    2467          * Transition duration (in milliseconds) for certain cahnges of properties like color and opacity.
    2468          * The properties can be set in the attribute transitionProperties
    2469          * Works in SVG renderer, only.
    2470          * @type Number
    2471          * @name JXG.GeometryElement#transitionDuration
    2472          * @see JXG.GeometryElement#transitionProperties
    2473          * @see JXG.GeometryElement#strokeColor
    2474          * @see JXG.GeometryElement#highlightStrokeColor
    2475          * @see JXG.GeometryElement#strokeOpacity
    2476          * @see JXG.GeometryElement#highlightStrokeOpacity
    2477          * @see JXG.GeometryElement#fillColor
    2478          * @see JXG.GeometryElement#highlightFillColor
    2479          * @see JXG.GeometryElement#fillOpacity
    2480          * @see JXG.GeometryElement#highlightFillOpacity
    2481          * @default 100 {@link JXG.Options.elements#transitionDuration}
    2482          */
    2483         transitionDuration: 100,
    2484
    2485         /**
    2486          * Properties which change smoothly in the time set in transitionDuration.
    2487          * Possible values are
    2488          * ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width', 'width', 'height', 'rx', 'ry']
    2489          * (and maybe more) for geometry elements and
    2490          * ['color', 'opacity', 'all'] for HTML texts.
    2491          *
    2492          * @type Array
    2493          * @name JXG.GeometryElement#transitionProperties
    2494          * @see JXG.GeometryElement#transitionDuration
    2495          *
    2496          *
    2497          * @example
    2498          * var p1 = board.create("point", [0, 2], {
    2499          *     name: "A",
    2500          *     highlightStrokeWidth: 10,
    2501          *     transitionDuration: 1000,
    2502          *     transitionProperties: ['width', 'height', 'stroke-width',
    2503          *         'fill', 'fill-opacity', 'rx', 'ry', 'stroke', 'stroke-opacity'] });
    2504          *
    2505          * </pre><div id="JXGdf5230a1-5870-43db-b6ff-4d5b2f5b786b" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2506          * <script type="text/javascript">
    2507          *     (function() {
    2508          *         var board = JXG.JSXGraph.initBoard('JXGdf5230a1-5870-43db-b6ff-4d5b2f5b786b',
    2509          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2510          *     var p1 = board.create("point", [0, 2], {
    2511          *         name: "A",
    2512          *         highlightStrokeWidth: 20,
    2513          *         transitionDuration: 1000,
    2514          *         transitionProperties: ['width', 'height', 'stroke-width',
    2515          *             'fill', 'fill-opacity', 'rx', 'ry', 'stroke', 'stroke-opacity'] });
    2516          *
    2517          *     })();
    2518          *
    2519          * </script><pre>
    2520          *
    2521          */
    2522         transitionProperties: ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width'],
    2523
    2524         /**
    2525          * If false the element won't be visible on the board, otherwise it is shown.
    2526          * @type Boolean
    2527          * @name JXG.GeometryElement#visible
    2528          * @see JXG.GeometryElement#hideElement
    2529          * @see JXG.GeometryElement#showElement
    2530          * @default true
    2531          */
    2532         visible: true,
    2533
    2534         /**
    2535          * If true a label will display the element's name.
    2536          * Using this to suppress labels is more efficient than visible:false.
    2537          *
    2538          * @name JXG.GeometryElement#withLabel
    2539          * @type Boolean
    2540          * @default false
    2541          */
    2542         withLabel: false
    2543
    2544         // close the meta tag
    2545         /**#@-*/
    2546     },
    2547
    2548     /*
    2549      *  Generic options used by {@link JXG.Ticks}
    2550      */
    2551     ticks: {
    2552         /**#@+
    2553          * @visprop
    2554          */
    2555
    2556         /**
    2557          * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
    2558          * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
    2559          * The third parameter is a null, number or a string. In the latter two cases, this value is taken.
    2560          * Returns a string.
    2561          *
    2562          * @type function
    2563          * @name Ticks#generateLabelText
    2564          *
    2565          * @example
    2566          * const board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-10, 10, 10, -10], axis: true,
    2567          *     defaultAxes: {
    2568          *         x: {
    2569          *                 margin: -4,
    2570          *                 ticks: {
    2571          *                     minTicksDistance: 0,
    2572          *                     minorTicks:4,
    2573          *                     ticksDistance: 3,
    2574          *                     scale: Math.PI,
    2575          *                     scaleSymbol: 'π',
    2576          *                     insertTicks: true
    2577          *                 }
    2578          *              },
    2579          *         y: {}
    2580          *     }
    2581          * });
    2582          *
    2583          * // Generate a logarithmic labelling of the vertical axis.
    2584          * board.defaultAxes.y.ticks[0].generateLabelText = function (tick, zero) {
    2585          *     var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2])),
    2586          *         distance, labelText;
    2587          *     return this.formatLabelText(value);
    2588          * };
    2589          *
    2590          * </pre><div id="JXG3d2203ee-a797-416a-a33c-409581fafdd7" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2591          * <script type="text/javascript">
    2592          *     (function() {
    2593          *         var board = JXG.JSXGraph.initBoard('JXG3d2203ee-a797-416a-a33c-409581fafdd7',
    2594          *             {boundingbox: [-10, 10, 10, -10], axis: true, showcopyright: false, shownavigation: false,
    2595          *         defaultAxes: {
    2596          *             x: {
    2597          *                     margin: -4,
    2598          *                     ticks: {
    2599          *                         minTicksDistance: 0,
    2600          *                         minorTicks:4,
    2601          *                         ticksDistance: 3,
    2602          *                         scale: Math.PI,
    2603          *                         scaleSymbol: 'π',
    2604          *                         insertTicks: true
    2605          *                     }
    2606          *                  },
    2607          *             y: {}
    2608          *         }
    2609          *     });
    2610          *
    2611          *     // Generate a logarithmic labelling of the vertical axis.
    2612          *     board.defaultAxes.y.ticks[0].generateLabelText = function (tick, zero) {
    2613          *         var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2])),
    2614          *             distance, labelText;
    2615          *         return this.formatLabelText(value);
    2616          *     };
    2617          *
    2618          *     })();
    2619          *
    2620          * </script><pre>
    2621          *
    2622          */
    2623         generateLabelText: null,
    2624
    2625         /**
    2626          * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
    2627          * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
    2628          *
    2629          * @deprecated Use {@link JGX.Options@generateLabelText}
    2630          * @type function
    2631          * @name Ticks#generateLabelValue
    2632          */
    2633         generateLabelValue: null,
    2634
    2635         /**
    2636          * Draw labels yes/no
    2637          *
    2638          * @type Boolean
    2639          * @name Ticks#drawLabels
    2640          * @default false
    2641          */
    2642         drawLabels: false,
    2643
    2644         /**
    2645          * Attributes for the ticks labels.
    2646          *
    2647          * @name Ticks#label
    2648          * @type Object
    2649          * @default <pre>{
    2650          *   tabindex: null,
    2651          *   layer: 7, // line
    2652          *   highlight: false
    2653          *   }</pre>
    2654          *
    2655          */
    2656         label: {
    2657             tabindex: null,
    2658             layer: 7, // line
    2659             highlight: false
    2660         },
    2661
    2662         /**
    2663         * Format tick labels that were going to have scientific notation
    2664         * like 5.00e+6 to look like 5•10⁶.
    2665         *
    2666         * @example
    2667         * var board = JXG.JSXGraph.initBoard("jxgbox", {
    2668         *     boundingbox: [-500000, 500000, 500000, -500000],
    2669         *     axis: true,
    2670         *     defaultAxes: {
    2671         *         x: {
    2672         *             scalable: true,
    2673         *             ticks: {
    2674         *                 beautifulScientificTickLabels: true
    2675         *           },
    2676         *         },
    2677         *         y: {
    2678         *             scalable: true,
    2679         *             ticks: {
    2680         *                 beautifulScientificTickLabels: true
    2681         *           },
    2682         *         }
    2683         *     },
    2684         * });
    2685         *
    2686         * </pre><div id="JXGc1e46cd1-e025-4002-80aa-b450869fdaa2" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2687         * <script type="text/javascript">
    2688         *     (function() {
    2689         *     var board = JXG.JSXGraph.initBoard('JXGc1e46cd1-e025-4002-80aa-b450869fdaa2', {
    2690         *         boundingbox: [-500000, 500000, 500000, -500000],
    2691         *         showcopyright: false, shownavigation: false,
    2692         *         axis: true,
    2693         *         defaultAxes: {
    2694         *             x: {
    2695         *                 scalable: true,
    2696         *                 ticks: {
    2697         *                     beautifulScientificTickLabels: true
    2698         *               },
    2699         *             },
    2700         *             y: {
    2701         *                 scalable: true,
    2702         *                 ticks: {
    2703         *                     beautifulScientificTickLabels: true
    2704         *               },
    2705         *             }
    2706         *         },
    2707         *     });
    2708         *
    2709         *     })();
    2710         *
    2711         * </script><pre>
    2712         *
    2713         * @name Ticks#beautifulScientificTickLabels
    2714         * @type Boolean
    2715         * @default false
    2716         */
    2717         beautifulScientificTickLabels: false,
    2718
    2719         /**
    2720          * Use the unicode character 0x2212, i.e. the HTML entity &minus; as minus sign.
    2721          * That is −1 instead of -1.
    2722          *
    2723          * @type Boolean
    2724          * @name Ticks#useUnicodeMinus
    2725          * @default true
    2726          */
    2727         useUnicodeMinus: true,
    2728
    2729         /**
    2730          * Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2,
    2731          * and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent
    2732          * line is of type axis.
    2733          *
    2734          * @type String
    2735          * @name Ticks#anchor
    2736          * @default 'left'
    2737          *
    2738          * @example
    2739          * var li = board.create('segment', [[-4, -3], [4, 2]]);
    2740          * var t = board.create('ticks', [li], {
    2741          *     // drawZero: true,
    2742          *     anchor: 'left',
    2743          *     drawLabels: true,
    2744          *     minorTicks: 0,
    2745          *     label: {
    2746          *         anchorX: 'middle',
    2747          *         anchorY: 'top',
    2748          *         offset: [0, -5]
    2749          *     }
    2750          * });
    2751          *
    2752          *
    2753          * </pre><div id="JXG3dd23f77-a31d-4649-b0f0-7472722158d8" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2754          * <script type="text/javascript">
    2755          *     (function() {
    2756          *         var board = JXG.JSXGraph.initBoard('JXG3dd23f77-a31d-4649-b0f0-7472722158d8',
    2757          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2758          *     var li = board.create('segment', [[-4, -3], [4, 2]]);
    2759          *     var t = board.create('ticks', [li], {
    2760          *         // drawZero: true,
    2761          *         anchor: 'left',
    2762          *         drawLabels: true,
    2763          *         minorTicks: 0,
    2764          *         label: {
    2765          *             anchorX: 'middle',
    2766          *             anchorY: 'top',
    2767          *             offset: [0, -5]
    2768          *         }
    2769          *     });
    2770          *
    2771          *
    2772          *     })();
    2773          *
    2774          * </script><pre>
    2775          *
    2776          * @example
    2777          * var li = board.create('segment', [[-4, -3], [4, 2]]);
    2778          * var t = board.create('ticks', [li], {
    2779          *     drawZero: true,
    2780          *     anchor: 'middle',
    2781          *     drawLabels: true,
    2782          *     minorTicks: 0,
    2783          *     label: {
    2784          *         anchorX: 'middle',
    2785          *         anchorY: 'top',
    2786          *         offset: [0, -5]
    2787          *     }
    2788          * });
    2789          *
    2790          * </pre><div id="JXG430914fd-4e12-44de-b510-e3cc2fd473e0" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2791          * <script type="text/javascript">
    2792          *     (function() {
    2793          *         var board = JXG.JSXGraph.initBoard('JXG430914fd-4e12-44de-b510-e3cc2fd473e0',
    2794          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2795          *     var li = board.create('segment', [[-4, -3], [4, 2]]);
    2796          *     var t = board.create('ticks', [li], {
    2797          *         drawZero: true,
    2798          *         anchor: 'middle',
    2799          *         drawLabels: true,
    2800          *         minorTicks: 0,
    2801          *         label: {
    2802          *             anchorX: 'middle',
    2803          *             anchorY: 'top',
    2804          *             offset: [0, -5]
    2805          *         }
    2806          *     });
    2807          *
    2808          *     })();
    2809          *
    2810          * </script><pre>
    2811          *
    2812          */
    2813         anchor: 'left',
    2814
    2815         /**
    2816          * Draw the zero tick, that lies at line.point1?
    2817          *
    2818          * @type Boolean
    2819          * @name Ticks#drawZero
    2820          * @default false
    2821          *
    2822          * @example
    2823          * var li = board.create('segment', [[-4, 2], [4, 2]]);
    2824          * var t = board.create('ticks', [li], {
    2825          *     drawZero: false,
    2826          *     anchor: 'middle',
    2827          *     drawLabels: true,
    2828          *     minorTicks: 0,
    2829          *     label: {
    2830          *         anchorX: 'middle',
    2831          *         anchorY: 'top',
    2832          *         offset: [0, -5]
    2833          *     }
    2834          * });
    2835          *
    2836          * var li2 = board.create('segment', [[-4, -2], [4, -2]]);
    2837          * var t2 = board.create('ticks', [li2], {
    2838          *     drawZero: true,
    2839          *     anchor: 'middle',
    2840          *     drawLabels: true,
    2841          *     minorTicks: 0,
    2842          *     label: {
    2843          *         anchorX: 'middle',
    2844          *         anchorY: 'top',
    2845          *         offset: [0, -5]
    2846          *     }
    2847          * });
    2848          *
    2849          * </pre><div id="JXG91584dc4-0ca8-4b3e-841c-c877f2ccdcf1" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2850          * <script type="text/javascript">
    2851          *     (function() {
    2852          *         var board = JXG.JSXGraph.initBoard('JXG91584dc4-0ca8-4b3e-841c-c877f2ccdcf1',
    2853          *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
    2854          *     var li = board.create('segment', [[-4, 2], [4, 2]]);
    2855          *     var t = board.create('ticks', [li], {
    2856          *         drawZero: false,
    2857          *         anchor: 'middle',
    2858          *         drawLabels: true,
    2859          *         minorTicks: 0,
    2860          *         label: {
    2861          *             anchorX: 'middle',
    2862          *             anchorY: 'top',
    2863          *             offset: [0, -5]
    2864          *         }
    2865          *     });
    2866          *
    2867          *     var li2 = board.create('segment', [[-4, -2], [4, -2]]);
    2868          *     var t2 = board.create('ticks', [li2], {
    2869          *         drawZero: true,
    2870          *         anchor: 'middle',
    2871          *         drawLabels: true,
    2872          *         minorTicks: 0,
    2873          *         label: {
    2874          *             anchorX: 'middle',
    2875          *             anchorY: 'top',
    2876          *             offset: [0, -5]
    2877          *         }
    2878          *     });
    2879          *
    2880          *     })();
    2881          *
    2882          * </script><pre>
    2883          *
    2884          */
    2885         drawZero: false,
    2886
    2887         /**
    2888          * Let JSXGraph determine the distance between ticks automatically.
    2889          * If <tt>true</tt>, the attribute <tt>ticksDistance</tt> is ignored.
    2890          * The distance between ticks is affected by the size of the board and
    2891          * the attribute <tt>minTicksDistance</tt> (in pixel).
    2892          *
    2893          * @type Boolean
    2894          * @name Ticks#insertTicks
    2895          * @see Ticks#ticksDistance
    2896          * @see Ticks#minTicksDistance
    2897          * @default false
    2898          * @example
    2899          * // Create an axis providing two coord pairs.
    2900          *   var p1 = board.create('point', [0, 0]);
    2901          *   var p2 = board.create('point', [50, 25]);
    2902          *   var l1 = board.create('line', [p1, p2]);
    2903          *   var t = board.create('ticks', [l1], {
    2904          *      insertTicks: true,
    2905          *      majorHeight: -1,
    2906          *      label: {
    2907          *          offset: [4, -9]
    2908          *      },
    2909          *      drawLabels: true
    2910          *  });
    2911          * </pre><div class="jxgbox" id="JXG2f6fb842-40bd-4223-aa28-3e9369d2097f" style="width: 300px; height: 300px;"></div>
    2912          * <script type="text/javascript">
    2913          * (function () {
    2914          *   var board = JXG.JSXGraph.initBoard('JXG2f6fb842-40bd-4223-aa28-3e9369d2097f', {
    2915          *     boundingbox: [-100, 70, 70, -100], axis: true, showcopyright: false, shownavigation: true});
    2916          *   var p1 = board.create('point', [0, 0]);
    2917          *   var p2 = board.create('point', [50, 25]);
    2918          *   var l1 = board.create('line', [p1, p2]);
    2919          *   var t = board.create('ticks', [l1], {insertTicks: true, majorHeight: -1, label: {offset: [4, -9]}, drawLabels: true});
    2920          * })();
    2921          * </script><pre>
    2922          */
    2923         insertTicks: false,
    2924
    2925         /**
    2926          * Minimum distance in pixel of equidistant ticks in case insertTicks==true.
    2927          * @name Ticks#minTicksDistance
    2928          * @type Number
    2929          * @default 10
    2930          * @see Ticks#insertTicks
    2931          */
    2932         minTicksDistance: 10,
    2933
    2934         /**
    2935          * Total height of a minor tick. If negative the full height of the board is taken.
    2936          *
    2937          * @type Number
    2938          * @name Ticks#minorHeight
    2939          * @default 4
    2940          */
    2941         minorHeight: 4,
    2942
    2943         /**
    2944          * Total height of a major tick. If negative the full height of the board is taken.
    2945          *
    2946          * @type Number
    2947          * @name Ticks#majorHeight
    2948          * @default 10
    2949          */
    2950         majorHeight: 10,
    2951
    2952         /**
    2953          * Decides in which direction minor ticks are visible. Possible values are either the constants
    2954          * 0=false or 1=true or a function returning 0 or 1.
    2955          *
    2956          * In case of [0,1] the tick is only visible to the right of the line. In case of
    2957          * [1,0] the tick is only visible to the left of the line.
    2958          *
    2959          * @type Array
    2960          * @name Ticks#tickEndings
    2961          * @see Ticks#majorTickEndings
    2962          * @default [1, 1]
    2963          */
    2964         tickEndings: [1, 1],
    2965
    2966         /**
    2967          * Decides in which direction major ticks are visible. Possible values are either the constants
    2968          * 0=false or 1=true or a function returning 0 or 1.
    2969          *
    2970          * In case of [0,1] the tick is only visible to the right of the line. In case of
    2971          * [1,0] the tick is only visible to the left of the line.
    2972          *
    2973         * @example
    2974         *         var board = JXG.JSXGraph.initBoard("jxgbox", {
    2975         *             boundingbox: [-5, 5, 5, -5],
    2976         *             axis: true,
    2977         *             defaultAxes: {
    2978         *                 x: {
    2979         *                     ticks: {
    2980         *                         majorTickEndings: [1, 0],
    2981         *                         ignoreInfiniteTickEndings: false
    2982         *                     }
    2983         *                 },
    2984         *                 y: {
    2985         *                     ticks: {
    2986         *                         majorTickEndings: [0, 1],
    2987         *                         ignoreInfiniteTickEndings: false
    2988         *                     }
    2989         *                 }
    2990         *             }
    2991         *         });
    2992         *
    2993         *         var p = board.create('point', [1, 1]);
    2994         *         var l = board.create('line', [1, -1, 1]);
    2995         *
    2996         * </pre><div id="JXGf9ccb731-7a73-44d1-852e-f9c9c405a9d1" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2997         * <script type="text/javascript">
    2998         *     (function() {
    2999         *         var board = JXG.JSXGraph.initBoard('JXGf9ccb731-7a73-44d1-852e-f9c9c405a9d1',
    3000         *             {   showcopyright: false, shownavigation: false,
    3001         *                 boundingbox: [-5, 5, 5, -5],
    3002         *                 axis: true,
    3003         *                 defaultAxes: {
    3004         *                     x: {
    3005         *                         ticks: {
    3006         *                             majorTickEndings: [1, 0],
    3007         *                             ignoreInfiniteTickEndings: false
    3008         *                         }
    3009         *                     },
    3010         *                     y: {
    3011         *                         ticks: {
    3012         *                             majorTickEndings: [0, 1],
    3013         *                             ignoreInfiniteTickEndings: false
    3014         *                         }
    3015         *                     }
    3016         *                 }
    3017         *             });
    3018         *
    3019         *             var p = board.create('point', [1, 1]);
    3020         *             var l = board.create('line', [1, -1, 1]);
    3021         *
    3022         *     })();
    3023         *
    3024         * </script><pre>
    3025         *
    3026         * @type Array
    3027          * @name Ticks#majorTickEndings
    3028          * @see Ticks#tickEndings
    3029          * @see Ticks#ignoreInfiniteTickEndings
    3030          * @default [1, 1]
    3031          */
    3032         majorTickEndings: [1, 1],
    3033
    3034         /**
    3035          * If true, ignore the tick endings attribute for infinite (full height) ticks.
    3036          * This affects major and minor ticks.
    3037          *
    3038          * @type Boolean
    3039          * @name Ticks#ignoreInfiniteTickEndings
    3040          * @see Ticks#tickEndings
    3041          * @see Ticks#majorTickEndings
    3042          * @default true
    3043          */
    3044         ignoreInfiniteTickEndings: true,
    3045
    3046         /**
    3047          * The number of minor ticks between two major ticks.
    3048          * @type Number
    3049          * @name Ticks#minorTicks
    3050          * @default 4
    3051          */
    3052         minorTicks: 4,
    3053
    3054         /**
    3055          * By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only.
    3056          * If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks
    3057          * between two labels.
    3058          *
    3059          * @type {Number|Boolean}
    3060          * @name Ticks#ticksPerLabel
    3061          * @default false
    3062          *
    3063          * @example
    3064          * const board = JXG.JSXGraph.initBoard('jxgbox', {
    3065          *     boundingbox: [-4, 4, 4, -4],
    3066          *     axis: true,
    3067          *     defaultAxes: {
    3068          *         x: {
    3069          *             ticks: {
    3070          *                 minorTicks: 7,
    3071          *                 ticksPerLabel: 4,
    3072          *                 minorHeight: 20,
    3073          *             }
    3074          *         },
    3075          *         y: {
    3076          *             ticks: {
    3077          *                 minorTicks: 3,
    3078          *                 ticksPerLabel: 2,
    3079          *                 minorHeight: 20
    3080          *             }
    3081          *         }
    3082          *     }
    3083          * });
    3084          *
    3085          * </pre><div id="JXGbc45a421-c867-4b0a-9b8d-2b2576020690" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3086          * <script type="text/javascript">
    3087          *     (function() {
    3088          *         var board = JXG.JSXGraph.initBoard('JXGbc45a421-c867-4b0a-9b8d-2b2576020690',
    3089          *             {showcopyright: false, shownavigation: false,
    3090          *              boundingbox: [-4, 4, 4, -4],
    3091          *         axis: true,
    3092          *         defaultAxes: {
    3093          *             x: {
    3094          *                 ticks: {
    3095          *                     minorTicks: 7,
    3096          *                     ticksPerLabel: 4,
    3097          *                     minorHeight: 20,
    3098          *                 }
    3099          *             },
    3100          *             y: {
    3101          *                 ticks: {
    3102          *                     minorTicks: 3,
    3103          *                     ticksPerLabel: 2,
    3104          *                     minorHeight: 20
    3105          *                 }
    3106          *             }
    3107          *         }
    3108          *     });
    3109          *     })();
    3110          *
    3111          * </script><pre>
    3112          */
    3113         ticksPerLabel: false,
    3114
    3115         /**
    3116          * Scale the ticks but not the tick labels.
    3117          * @type Number
    3118          * @default 1
    3119          * @name Ticks#scale
    3120          * @see Ticks#scaleSymbol
    3121          *
    3122          * @example
    3123          * const board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-10, 10, 10, -10], axis: true,
    3124          *     defaultAxes: {
    3125          *         x : {
    3126          *                 margin: -4,
    3127          *                 ticks: {
    3128          *                     minTicksDistance: 0,
    3129          *                     minorTicks:4,
    3130          *                     ticksDistance: 3,
    3131          *                     scale: Math.PI,
    3132          *                     scaleSymbol: 'π',
    3133          *                     insertTicks: true
    3134          *                 }
    3135          *              },
    3136          *         y : {}
    3137          *     }
    3138          * });
    3139          *
    3140          * </pre><div id="JXG23bfda5d-4a85-4469-a552-aa9b4cf62b4a" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3141          * <script type="text/javascript">
    3142          *     (function() {
    3143          *         var board = JXG.JSXGraph.initBoard('JXG23bfda5d-4a85-4469-a552-aa9b4cf62b4a',
    3144          *             {boundingbox: [-10, 10, 10, -10], axis: true, showcopyright: false, shownavigation: false,
    3145          *         defaultAxes: {
    3146          *             x : {
    3147          *                     margin: -4,
    3148          *                     ticks: {
    3149          *                         minTicksDistance: 0,
    3150          *                         minorTicks:4,
    3151          *                         ticksDistance: 3,
    3152          *                         scale: Math.PI,
    3153          *                         scaleSymbol: 'π',
    3154          *                         insertTicks: true
    3155          *                     }
    3156          *                  },
    3157          *             y : {
    3158          *                  }
    3159          *         }
    3160          *     });
    3161          *
    3162          *     })();
    3163          *
    3164          * </script><pre>
    3165          */
    3166         scale: 1,
    3167
    3168         /**
    3169          * A string that is appended to every tick, used to represent the scale
    3170          * factor given in {@link Ticks#scale}.
    3171          *
    3172          * @type String
    3173          * @default ''
    3174          * @name Ticks#scaleSymbol
    3175          * @see Ticks#scale
    3176          */
    3177         scaleSymbol: '',
    3178
    3179         /**
    3180          * User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array
    3181          * is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is
    3182          * shown as a fallback.
    3183          *
    3184          * @type Array
    3185          * @name Ticks#labels
    3186          * @default []
    3187          */
    3188         labels: [],
    3189
    3190         /**
    3191          * The maximum number of characters a tick label can use.
    3192          *
    3193          * @type Number
    3194          * @name Ticks#maxLabelLength
    3195          * @see Ticks#digits
    3196          * @default 5
    3197          */
    3198         maxLabelLength: 5,
    3199
    3200         /**
    3201          * If a label exceeds {@link Ticks#maxLabelLength} this determines the precision used to shorten the tick label.
    3202          * Deprecated! Replaced by the attribute <tt>digits</tt>.
    3203          *
    3204          * @type Number
    3205          * @name Ticks#precision
    3206          * @see Ticks#maxLabelLength
    3207          * @see Ticks#digits
    3208          * @deprecated
    3209          * @default 3
    3210          */
    3211         precision: 3,
    3212
    3213         /**
    3214          * If a label exceeds {@link Ticks#maxLabelLength} this determines the number of digits used to shorten the tick label.
    3215          *
    3216          * @type Number
    3217          * @name Ticks#digits
    3218          * @see Ticks#maxLabelLength
    3219          * @deprecated
    3220          * @default 3
    3221          */
    3222         digits: 3,
    3223
    3224         /**
    3225          * The default distance (in user coordinates, not  pixels) between two ticks. Please be aware that this value is overruled
    3226          * if {@link Ticks#insertTicks} is set to true. In case, {@link Ticks#insertTicks} is false, the maximum number of ticks
    3227          * is hard coded to be less than 2048.
    3228          *
    3229          * @type Number
    3230          * @name Ticks#ticksDistance
    3231          * @see Ticks#insertTicks
    3232          * @default 1
    3233          */
    3234         ticksDistance: 1,
    3235
    3236         /**
    3237          * Tick face for major ticks of finite length.  By default (face: '|') this is a straight line.
    3238          * Possible other values are '<' and '>'. These faces are used in
    3239          * {@link JXG.Hatch} for hatch marking parallel lines.
    3240          * @type String
    3241          * @name Ticks#face
    3242          * @see hatch
    3243          * @default '|'
    3244          * @example
    3245          *   var p1 = board.create('point', [0, 3]);
    3246          *   var p2 = board.create('point', [1, 3]);
    3247          *   var l1 = board.create('line', [p1, p2]);
    3248          *   var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>', minorTicks: 0});
    3249          *
    3250          * </pre><div id="JXG950a568a-1264-4e3a-b61d-b6881feecf4b" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3251          * <script type="text/javascript">
    3252          *     (function() {
    3253          *         var board = JXG.JSXGraph.initBoard('JXG950a568a-1264-4e3a-b61d-b6881feecf4b',
    3254          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    3255          *       var p1 = board.create('point', [0, 3]);
    3256          *       var p2 = board.create('point', [1, 3]);
    3257          *       var l1 = board.create('line', [p1, p2]);
    3258          *       var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>', minorTicks: 0});
    3259          *
    3260          *     })();
    3261          *
    3262          * </script><pre>
    3263          *
    3264          */
    3265         face: '|',
    3266
    3267         strokeOpacity: 1,
    3268         strokeWidth: 1,
    3269         strokeColor: '#000000',
    3270         highlightStrokeColor: '#888888',
    3271         fillColor: 'none',
    3272         highlightFillColor: 'none',
    3273         visible: 'inherit',
    3274
    3275         /**
    3276          * Whether line boundaries should be included or not in the lower and upper bounds when
    3277          * creating ticks. In mathematical terms: if a segment considered as interval is open (includeBoundaries:false)
    3278          * or closed (includeBoundaries:true). In case of open interval, the interval is shortened by a small
    3279          * ε.
    3280          *
    3281          * @type Boolean
    3282          * @name Ticks#includeBoundaries
    3283          * @default false
    3284          *
    3285          * @example
    3286          * var li = board.create('segment', [[-4, 2], [4, 2]]);
    3287          * var t = board.create('ticks', [li], {
    3288          *     includeBoundaries: true,
    3289          *     drawZero: true,
    3290          *     anchor: 'middle',
    3291          *     drawLabels: true,
    3292          *     minorTicks: 0,
    3293          *     label: {
    3294          *         anchorX: 'middle',
    3295          *         anchorY: 'top',
    3296          *         offset: [0, -5]
    3297          *     }
    3298          * });
    3299          *
    3300          * var li2 = board.create('segment', [[-4, -2], [4, -2]]);
    3301          * var t2 = board.create('ticks', [li2], {
    3302          *     includeBoundaries: false,
    3303          *     drawZero: true,
    3304          *     anchor: 'middle',
    3305          *     drawLabels: true,
    3306          *     minorTicks: 0,
    3307          *     label: {
    3308          *         anchorX: 'middle',
    3309          *         anchorY: 'top',
    3310          *         offset: [0, -5]
    3311          *     }
    3312          * });
    3313          *
    3314          * </pre><div id="JXG08e79180-7c9a-4638-bb72-8aa7fd8a8b96" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3315          * <script type="text/javascript">
    3316          *     (function() {
    3317          *         var board = JXG.JSXGraph.initBoard('JXG08e79180-7c9a-4638-bb72-8aa7fd8a8b96',
    3318          *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
    3319          *     var li = board.create('segment', [[-4, 2], [4, 2]]);
    3320          *     var t = board.create('ticks', [li], {
    3321          *         includeBoundaries: true,
    3322          *         drawZero: true,
    3323          *         anchor: 'middle',
    3324          *         drawLabels: true,
    3325          *         minorTicks: 0,
    3326          *         label: {
    3327          *             anchorX: 'middle',
    3328          *             anchorY: 'top',
    3329          *             offset: [0, -5]
    3330          *         }
    3331          *     });
    3332          *
    3333          *     var li2 = board.create('segment', [[-4, -2], [4, -2]]);
    3334          *     var t2 = board.create('ticks', [li2], {
    3335          *         includeBoundaries: false,
    3336          *         drawZero: true,
    3337          *         anchor: 'middle',
    3338          *         drawLabels: true,
    3339          *         minorTicks: 0,
    3340          *         label: {
    3341          *             anchorX: 'middle',
    3342          *             anchorY: 'top',
    3343          *             offset: [0, -5]
    3344          *         }
    3345          *     });
    3346          *
    3347          *     })();
    3348          *
    3349          * </script><pre>
    3350          *
    3351          */
    3352         includeBoundaries: false,
    3353
    3354         /**
    3355          * Set the ticks type.
    3356          * Possible values are 'linear' or 'polar'.
    3357          *
    3358          * @type String
    3359          * @name Ticks#type
    3360          * @default 'linear'
    3361          *
    3362          * @example
    3363          * var ax = board.create('axis', [[0,0], [1,0]], {
    3364          *              needsRegularUpdate: false,
    3365          *              ticks: {
    3366          *                      type: 'linear',
    3367          *                      majorHeight: 0
    3368          *                  }
    3369          *              });
    3370          * var ay = board.create('axis', [[0,0], [0,1]], {
    3371          *              ticks: {
    3372          *                      type: 'polar'
    3373          *                  }
    3374          *              });
    3375          *
    3376          * var p = board.create('point', [3, 2]);
    3377          *
    3378          * </pre><div id="JXG9ab0b50c-b486-4f95-9698-c0dd276155ff" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3379          * <script type="text/javascript">
    3380          *     (function() {
    3381          *         var board = JXG.JSXGraph.initBoard('JXG9ab0b50c-b486-4f95-9698-c0dd276155ff',
    3382          *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
    3383          *     var ax = board.create('axis', [[0,0], [1,0]], { needsRegularUpdate: false, ticks: { type: 'linear', majorHeight: 0}});
    3384          *     var ay = board.create('axis', [[0,0], [0,1]], { ticks: { type: 'polar'}});
    3385          *
    3386          *     var p = board.create('point', [3, 2]);
    3387          *
    3388          *     })();
    3389          *
    3390          * </script><pre>
    3391          *
    3392          */
    3393         type: 'linear',
    3394
    3395         /**
    3396          * Internationalization support for ticks labels.
    3397          * @name intl
    3398          * @memberOf Ticks.prototype
    3399          * @default <pre>{
    3400          *    enabled: 'inherit',
    3401          *    options: {}
    3402          * }</pre>
    3403          * @see JXG.Board#intl
    3404          * @see Text#intl
    3405          *
    3406                   * @example
    3407          * // Here, locale is disabled in general, but enabled for the horizontal
    3408          * // axis and the infobox.
    3409          * const board = JXG.JSXGraph.initBoard(BOARDID, {
    3410          *     boundingbox: [-0.5, 0.5, 0.5, -0.5],
    3411          *     intl: {
    3412          *         enabled: false,
    3413          *         locale: 'de-DE'
    3414          *     },
    3415          *     keepaspectratio: true,
    3416          *     axis: true,
    3417          *     defaultAxes: {
    3418          *         x: {
    3419          *             ticks: {
    3420          *                 intl: {
    3421          *                         enabled: true,
    3422          *                         options: {
    3423          *                             style: 'unit',
    3424          *                             unit: 'kilometer-per-hour',
    3425          *                             unitDisplay: 'narrow'
    3426          *                         }
    3427          *                 }
    3428          *             }
    3429          *         },
    3430          *         y: {
    3431          *             ticks: {
    3432          *             }
    3433          *         }
    3434          *     },
    3435          *     infobox: {
    3436          *         fontSize: 12,
    3437          *         intl: {
    3438          *             enabled: true,
    3439          *             options: {
    3440          *                 minimumFractionDigits: 4,
    3441          *                 maximumFractionDigits: 5
    3442          *             }
    3443          *         }
    3444          *     }
    3445          * });
    3446          *
    3447          * var p = board.create('point', [0.1, 0.1], {});
    3448          *
    3449          * </pre><div id="JXG820b60ff-b453-4be9-a9d5-06c0342a9dbe" class="jxgbox" style="width: 600px; height: 300px;"></div>
    3450          * <script type="text/javascript">
    3451          *     (function() {
    3452          *     var board = JXG.JSXGraph.initBoard('JXG820b60ff-b453-4be9-a9d5-06c0342a9dbe', {
    3453          *         boundingbox: [-0.5, 0.5, 0.5, -0.5], showcopyright: false, shownavigation: false,
    3454          *         intl: {
    3455          *             enabled: false,
    3456          *             locale: 'de-DE'
    3457          *         },
    3458          *         keepaspectratio: true,
    3459          *         axis: true,
    3460          *         defaultAxes: {
    3461          *             x: {
    3462          *                 ticks: {
    3463          *                     intl: {
    3464          *                             enabled: true,
    3465          *                             options: {
    3466          *                                 style: 'unit',
    3467          *                                 unit: 'kilometer-per-hour',
    3468          *                                 unitDisplay: 'narrow'
    3469          *                             }
    3470          *                     }
    3471          *                 }
    3472          *             },
    3473          *             y: {
    3474          *                 ticks: {
    3475          *                 }
    3476          *             }
    3477          *         },
    3478          *         infobox: {
    3479          *             fontSize: 12,
    3480          *             intl: {
    3481          *                 enabled: true,
    3482          *                 options: {
    3483          *                     minimumFractionDigits: 4,
    3484          *                     maximumFractionDigits: 5
    3485          *                 }
    3486          *             }
    3487          *         }
    3488          *     });
    3489          *
    3490          *     var p = board.create('point', [0.1, 0.1], {});
    3491          *
    3492          *     })();
    3493          *
    3494          * </script><pre>
    3495          *
    3496          */
    3497         intl: {
    3498             enabled: 'inherit',
    3499             options: {}
    3500         },
    3501
    3502         // TODO implementation and documentation
    3503         minorTicksInArrow: false,
    3504         majorTicksInArrow: true,
    3505         labelInArrow: true,
    3506         minorTicksInMargin: false,
    3507         majorTicksInMargin: true,
    3508         labelInMargin: true
    3509
    3510         // close the meta tag
    3511         /**#@-*/
    3512     },
    3513
    3514     /*
    3515      *  Generic options used by {@link JXG.Hatch}
    3516      */
    3517     hatch: {
    3518         drawLabels: false,
    3519         drawZero: true,
    3520         majorHeight: 20,
    3521         anchor: 'middle',
    3522         face: '|',
    3523         strokeWidth: 2,
    3524         strokeColor: Color.palette.blue,
    3525         /**
    3526          * The default distance (in user coordinates, not  pixels) between two hatch symbols.
    3527          *
    3528          * @type Number
    3529          * @name Hatch#ticksDistance
    3530          * @default 0.2
    3531          */
    3532         ticksDistance: 0.2
    3533     },
    3534
    3535     /**
    3536      * Precision options, defining how close a pointer device (mouse, finger, pen) has to be
    3537      * to an object such that the object is highlighted or can be dragged.
    3538      * These values are board-wide and can be overwritten for individual elements by
    3539      * changing their precision attribute.
    3540      *
    3541      * The default values are
    3542      * <pre>
    3543      * JXG.Options.precision: {
    3544      *   touch: 30,
    3545      *   touchMax: 100,
    3546      *   mouse: 4,
    3547      *   pen: 4,
    3548      *   epsilon: 0.0001,
    3549      *   hasPoint: 4
    3550      * }
    3551      * </pre>
    3552      *
    3553      * @type Object
    3554      * @name JXG.Options#precision
    3555      * @see JXG.GeometryElement#precision
    3556      */
    3557     precision: {
    3558         touch: 30,
    3559         touchMax: 100,
    3560         mouse: 4,
    3561         pen: 4,
    3562         epsilon: 0.0001, // Unused
    3563         hasPoint: 4
    3564     },
    3565
    3566     /**
    3567      * Default ordering of the layers.
    3568      * The numbering starts from 0 and the highest layer number is numlayers-1.
    3569      *
    3570      * The default values are
    3571      * <pre>
    3572      * JXG.Options.layer: {
    3573      *   numlayers: 20, // only important in SVG
    3574      *   text: 9,
    3575      *   point: 9,
    3576      *   glider: 9,
    3577      *   arc: 8,
    3578      *   line: 7,
    3579      *   circle: 6,
    3580      *   curve: 5,
    3581      *   turtle: 5,
    3582      *   polygon: 3,
    3583      *   sector: 3,
    3584      *   angle: 3,
    3585      *   integral: 3,
    3586      *   axis: 2,
    3587      *   ticks: 2,
    3588      *   grid: 1,
    3589      *   image: 0,
    3590      *   trace: 0
    3591      * }
    3592      * </pre>
    3593      * @type Object
    3594      * @name JXG.Options#layer
    3595      */
    3596     layer: {
    3597         numlayers: 20, // only important in SVG
    3598         unused9: 19,
    3599         unused8: 18,
    3600         unused7: 17,
    3601         unused6: 16,
    3602         unused5: 15,
    3603         unused4: 14,
    3604         unused3: 13,
    3605         unused2: 12,
    3606         unused1: 11,
    3607         unused0: 10,
    3608         text: 9,
    3609         point: 9,
    3610         glider: 9,
    3611         arc: 8,
    3612         line: 7,
    3613         circle: 6,
    3614         curve: 5,
    3615         turtle: 5,
    3616         polygon: 3,
    3617         sector: 3,
    3618         angle: 3,
    3619         integral: 3,
    3620         axis: 2,
    3621         ticks: 2,
    3622         grid: 1,
    3623         image: 0,
    3624         trace: 0
    3625     },
    3626
    3627     /* special angle options */
    3628     angle: {
    3629         /**#@+
    3630          * @visprop
    3631          */
    3632
    3633         withLabel: true,
    3634
    3635         /**
    3636          * Radius of the sector, displaying the angle.
    3637          * The radius can be given as number (in user coordinates)
    3638          * or as string 'auto'. In the latter case, the angle
    3639          * is set to an value between 20 and 50 px.
    3640          *
    3641          * @type {Number|String}
    3642          * @name Angle#radius
    3643          * @default 'auto'
    3644          * @visprop
    3645          */
    3646         radius: 'auto',
    3647
    3648         /**
    3649          * Display type of the angle field. Possible values are
    3650          * 'sector' or 'sectordot' or 'square' or 'none'.
    3651          *
    3652          * @type String
    3653          * @default 'sector'
    3654          * @name Angle#type
    3655          * @visprop
    3656          */
    3657         type: 'sector',
    3658
    3659         /**
    3660          * Display type of the angle field in case of a right angle. Possible values are
    3661          * 'sector' or 'sectordot' or 'square' or 'none'.
    3662          *
    3663          * @type String
    3664          * @default square
    3665          * @name Angle#orthoType
    3666          * @see Angle#orthoSensitivity
    3667          * @visprop
    3668          */
    3669         orthoType: 'square',
    3670
    3671         /**
    3672          * Sensitivity (in degrees) to declare an angle as right angle.
    3673          * If the angle measure is inside this distance from a rigth angle, the orthoType
    3674          * of the angle is used for display.
    3675          *
    3676          * @type Number
    3677          * @default 1.0
    3678          * @name Angle#orthoSensitivity
    3679          * @see Angle#orthoType
    3680          * @visprop
    3681          */
    3682         orthoSensitivity: 1.0,
    3683
    3684         fillColor: Color.palette.orange,
    3685         highlightFillColor: Color.palette.orange,
    3686         strokeColor: Color.palette.orange,
    3687         // fillColor: '#ff7f00',
    3688         // highlightFillColor: '#ff7f00',
    3689         // strokeColor: '#ff7f00',
    3690
    3691         fillOpacity: 0.3,
    3692         highlightFillOpacity: 0.3,
    3693
    3694         /**
    3695          * @name Angle#radiuspoint
    3696          * @type Object
    3697          * @deprecated
    3698          */
    3699         radiuspoint: {
    3700             withLabel: false,
    3701             visible: false,
    3702             name: ''
    3703         },
    3704
    3705         /**
    3706          * @name Angle#pointsquare
    3707          * @type Object
    3708          * @deprecated
    3709          */
    3710         pointsquare: {
    3711             withLabel: false,
    3712             visible: false,
    3713             name: ''
    3714         },
    3715
    3716         /**
    3717          * Attributes of the dot point marking right angles.
    3718          * @name Angle#dot
    3719          * @type Object
    3720          * @default <tt>{face: 'o', size: 2}</tt>
    3721          */
    3722         dot: {
    3723             visible: false,
    3724             strokeColor: 'none',
    3725             fillColor: '#000000',
    3726             size: 2,
    3727             face: 'o',
    3728             withLabel: false,
    3729             name: ''
    3730         },
    3731
    3732         label: {
    3733             position: 'top',
    3734             offset: [0, 0],
    3735             strokeColor: Color.palette.blue
    3736         },
    3737
    3738         /**
    3739          * Attributes for sub-element arc. In general, the arc will run through the first point and
    3740          * thus will not have the same radius as the angle sector.
    3741          *
    3742          * @type Arc
    3743          * @name Angle#arc
    3744          * @default '{visible:false}'
    3745          */
    3746         arc: {
    3747             visible: false,
    3748             fillColor: 'none'
    3749         }
    3750
    3751         /**#@-*/
    3752     },
    3753
    3754     /* special arc options */
    3755     arc: {
    3756         /**#@+
    3757          * @visprop
    3758          */
    3759
    3760         /**
    3761          * Type of arc. Possible values are 'minor', 'major', and 'auto'.
    3762          *
    3763          * @type String
    3764          * @name Arc#selection
    3765          * @default 'auto'
    3766          */
    3767         selection: 'auto',
    3768
    3769         /**
    3770          * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
    3771          *
    3772          * @see JXG.GeometryElement#hasPoint
    3773          * @name Arc#hasInnerPoints
    3774          * @type Boolean
    3775          * @default false
    3776          */
    3777         hasInnerPoints: false,
    3778
    3779         label: {
    3780             anchorX: 'auto',
    3781             anchorY: 'auto'
    3782         },
    3783         firstArrow: false,
    3784         lastArrow: false,
    3785         fillColor: 'none',
    3786         highlightFillColor: 'none',
    3787         strokeColor: Color.palette.blue,
    3788         highlightStrokeColor: '#c3d9ff',
    3789
    3790         /**
    3791          * If true, there is a fourth parent point, i.e. the parents are [center, p1, p2, p3].
    3792          * p1 is still the radius point, p2 the angle point. The arc will be that part of the
    3793          * the circle with center 'center' which starts at p1, ends at the ray between center
    3794          * and p2, and passes p3.
    3795          * <p>
    3796          * This attribute is immutable (by purpose).
    3797          * This attribute is necessary for circumCircleArcs
    3798          *
    3799          * @type Boolean
    3800          * @name Arc#useDirection
    3801          * @default false
    3802          * @private
    3803          */
    3804         useDirection: false,
    3805
    3806         /**
    3807          * Attributes for center point.
    3808          *
    3809          * @type Point
    3810          * @name Arc#center
    3811          * @default {}
    3812          */
    3813         center: {
    3814         },
    3815
    3816         /**
    3817          * Attributes for radius point.
    3818          *
    3819          * @type Point
    3820          * @name Arc#radiusPoint
    3821          * @default {}
    3822          */
    3823         radiusPoint: {
    3824         },
    3825
    3826         /**
    3827          * Attributes for angle point.
    3828          *
    3829          * @type Point
    3830          * @name Arc#anglePoint
    3831          * @default {}
    3832          */
    3833         anglePoint: {
    3834         }
    3835
    3836         /**#@-*/
    3837     },
    3838
    3839     /* special arrow options */
    3840     arrow: {
    3841         /**#@+
    3842          * @visprop
    3843          */
    3844
    3845         firstArrow: false,
    3846
    3847         lastArrow: {
    3848             type: 1,
    3849             highlightSize: 6,
    3850             size: 6
    3851         }
    3852
    3853         /**#@-*/
    3854     },
    3855
    3856     /* special arrowparallel options */
    3857     arrowparallel: {
    3858         /**#@+
    3859          * @visprop
    3860          */
    3861
    3862         firstArrow: false,
    3863
    3864         lastArrow: {
    3865             type: 1,
    3866             highlightSize: 6,
    3867             size: 6
    3868         }
    3869
    3870         /**#@-*/
    3871     },
    3872
    3873     /* special axis options */
    3874     axis: {
    3875         /**#@+
    3876          * @visprop
    3877          */
    3878
    3879         name: '',                            // By default, do not generate names for axes.
    3880         needsRegularUpdate: false,           // Axes only updated after zooming and moving of the origin.
    3881         strokeWidth: 1,
    3882         lastArrow: {
    3883             type: 1,
    3884             highlightSize: 8,
    3885             size: 8
    3886         },
    3887         strokeColor: '#666666',
    3888         highlightStrokeWidth: 1,
    3889         highlightStrokeColor: '#888888',
    3890
    3891         /**
    3892          * Is used to define the behaviour of the axis.
    3893          * Settings in this attribute only have an effect if the axis is exactly horizontal or vertical.
    3894          * Possible values are:
    3895          * <ul>
    3896          *     <li><tt>'static'</tt>: Standard behavior of the axes as know in JSXGraph.
    3897          *     <li><tt>'fixed'</tt>: The axis is placed in a fixed position. Depending on the attribute <tt>anchor</tt>, it is positioned to the right or left of the edge of the board as seen from the axis with a distance defined in <tt>distanceBoarder</tt>. The axis will stay at the given position, when the user navigates through the board.
    3898          *     <li><tt>'sticky'</tt>: This mixes the two settings <tt>static</tt> and <tt>fixed</tt>. When the user navigates in the board, the axis remains in the visible area (taking into account <tt>anchor</tt> and <tt>anchorDist</tt>). If the axis itself is in the visible area, the axis can be moved by navigation.
    3899          * </ul>
    3900          *
    3901          * @type {String}
    3902          * @name Axis#position
    3903          * @default 'static'
    3904          * @see Axis#anchor
    3905          * @see Axis#anchorDist
    3906          *
    3907          * @example // Use navigation to see effect.
    3908          *  var axis1, axis2, circle;
    3909          *
    3910          *  board.create('axis', [[0,0],[1,0]],{
    3911          *      position: 'fixed',
    3912          *      anchor: 'right',
    3913          *      anchorDist: '0.1fr'
    3914          *  });
    3915          *
    3916          *  board.create('axis', [[0,0],[0,1]], {
    3917          *      position: 'fixed',
    3918          *      anchor: 'left',
    3919          *      anchorDist: 1
    3920          *  });
    3921          *
    3922          * </pre><div id="JXG6dff2f81-65ce-46a3-bea0-8ce25cc1cb4a" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3923          * <script type="text/javascript">
    3924          *     (function() {
    3925          *      var board = JXG.JSXGraph.initBoard('JXG6dff2f81-65ce-46a3-bea0-8ce25cc1cb4a',
    3926          *             {boundingbox: [-1, 10, 10,-1], axis: false, showcopyright: false, shownavigation: true});
    3927          *
    3928          *      board.create('axis', [[0,0],[1,0]],{
    3929          *          position: 'fixed',
    3930          *          anchor: 'right',
    3931          *          anchorDist: '0.1fr'
    3932          *      });
    3933          *
    3934          *      board.create('axis', [[0,0],[0,1]], {
    3935          *          position: 'fixed',
    3936          *          anchor: 'left',
    3937          *          anchorDist: 1
    3938          *      });
    3939          *
    3940          *      board.create('circle', [[5,5], 2.5]);
    3941          *     })();
    3942          *
    3943          * </script><pre>
    3944          *
    3945          * @example // Use navigation to see effect.
    3946          *      board.create('axis', [[0,0],[1,0]],{
    3947          *          position: 'sticky',
    3948          *          anchor: 'right',
    3949          *          anchorDist: '0.2fr'
    3950          *      });
    3951          *
    3952          *      board.create('axis', [[0,0],[0,1]], {
    3953          *          position: 'sticky',
    3954          *          anchor: 'right left',
    3955          *          anchorDist: '75px'
    3956          *      });
    3957          *
    3958          * </pre><div id="JXG42a90935-80aa-4a6b-8adf-279deef84485" class="jxgbox" style="width: 300px; height: 300px;"></div>
    3959          * <script type="text/javascript">
    3960          *     (function() {
    3961          *          var board = JXG.JSXGraph.initBoard('JXG42a90935-80aa-4a6b-8adf-279deef84485',
    3962          *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: true});
    3963          *          board.create('axis', [[0,0],[1,0]],{
    3964          *              position: 'sticky',
    3965          *              anchor: 'right',
    3966          *              anchorDist: '0.2fr'
    3967          *          });
    3968          *
    3969          *          board.create('axis', [[0,0],[0,1]], {
    3970          *              position: 'sticky',
    3971          *              anchor: 'right left',
    3972          *              anchorDist: '75px'
    3973          *          });
    3974          *
    3975          *          board.create('functiongraph', [function(x){ return 1/(x-5) + 2;}]);
    3976          *     })();
    3977          *
    3978          * </script><pre>
    3979          *
    3980          */
    3981         position: 'static',
    3982
    3983         /**
    3984          * Position is used in cases: <tt>position=='sticky'</tt> or <tt>position=='fixed'</tt>.
    3985          * Possible values are <tt>'right'</tt>, <tt>'left'</tt>, <tt>'right left'</tt>. Left and right indicate the side as seen from the axis.
    3986          * It is used in combination with the attribute position to decide on which side of the board the axis should stick or be fixed.
    3987          *
    3988          * @type {String}
    3989          * @name Axis#anchor
    3990          * @default ''
    3991          * @example
    3992          *  board.create('axis', [[0,0],[0,1]],{
    3993          *      position: 'fixed',
    3994          *      anchor: 'left',
    3995          *      anchorDist: 2,
    3996          *      strokeColor : 'green',
    3997          *      ticks: {
    3998          *          majorHeight: 7,
    3999          *          drawZero: true,
    4000          *      }
    4001          *  });
    4002          *
    4003          *  board.create('axis', [[0,0],[0,1]], {
    4004          *      position: 'fixed',
    4005          *      anchor: 'right',
    4006          *      anchorDist: 2,
    4007          *      strokeColor : 'blue',
    4008          *      ticks: {
    4009          *          majorHeight: 7,
    4010          *          drawZero: true,
    4011          *      }
    4012          *  });
    4013          *
    4014          *  board.create('axis', [[0,0],[0,-1]], {
    4015          *      position: 'fixed',
    4016          *      anchor: 'left',
    4017          *      anchorDist: 4,
    4018          *      strokeColor : 'red',
    4019          *      ticks:{
    4020          *          majorHeight: 7,
    4021          *          drawZero: true,
    4022          *      }
    4023          *  });
    4024          *
    4025          * </pre><div id="JXG11448b49-02b4-48d4-b0e0-8f06a94e909c" class="jxgbox" style="width: 300px; height: 300px;"></div>
    4026          * <script type="text/javascript">
    4027          *     (function() {
    4028          *      var board = JXG.JSXGraph.initBoard('JXG11448b49-02b4-48d4-b0e0-8f06a94e909c',
    4029          *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: true});
    4030          *
    4031          *      board.create('axis', [[0,0],[0,1]],{
    4032          *          position: 'fixed',
    4033          *          anchor: 'left',
    4034          *          anchorDist: 4,
    4035          *          strokeColor : 'green',
    4036          *          ticks: {
    4037          *              majorHeight: 7,
    4038          *              drawZero: true,
    4039          *          }
    4040          *      });
    4041          *
    4042          *      board.create('axis', [[0,0],[0,1]], {
    4043          *          position: 'fixed',
    4044          *          anchor: 'right',
    4045          *          anchorDist: 2,
    4046          *          strokeColor : 'blue',
    4047          *          ticks: {
    4048          *              majorHeight: 7,
    4049          *              drawZero: true,
    4050          *          }
    4051          *      });
    4052          *
    4053          *      board.create('axis', [[0,0],[0,-1]], {
    4054          *          position: 'fixed',
    4055          *          anchor: 'left',
    4056          *          anchorDist: 4,
    4057          *          strokeColor : 'red',
    4058          *          ticks:{
    4059          *              majorHeight: 7,
    4060          *              drawZero: true,
    4061          *          }
    4062          *      });
    4063          *
    4064          *     })();
    4065          *
    4066          * </script><pre>
    4067          */
    4068         anchor: '',
    4069
    4070         /**
    4071          * Used to define at which distance to the edge of the board the axis should stick or be fixed.
    4072          * This only has an effect if <tt>position=='sticky'</tt> or <tt>position=='fixed'</tt>.
    4073          * There are the following possibilities:
    4074          * <ul>
    4075          *     <li>Numbers or strings which are numbers (e.g. '10') are interpreted as usrCoords.
    4076          *     <li>Strings with the unit 'px' are interpreted as screen pixels.
    4077          *     <li>Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)
    4078          * </ul>
    4079          *
    4080          * @type {Number|String}
    4081          * @name Axis#anchorDist
    4082          * @default '10%'
    4083          */
    4084         anchorDist: '10%',
    4085
    4086         /**
    4087          * If set to true, the tick labels of the axis are automatically positioned in the narrower area between the axis and the side of the board.
    4088          * Settings in this attribute only have an effect if the axis is exactly horizontal or vertical.
    4089          * This option overrides <tt>offset</tt>, <tt>anchorX</tt> and <tt>anchorY</tt> of axis tick labels.
    4090          *
    4091          * @type {Boolean}
    4092          * @name Axis#ticksAutoPos
    4093          * @default false
    4094          * @example
    4095          * // Navigate to see an effect.
    4096          * board.create('axis', [[0, 0], [1, 0]], {
    4097          *     position: 'sticky',
    4098          *     anchor: 'left right',
    4099          *     anchorDist: '0.1',
    4100          *     ticksAutoPos: true,
    4101          * });
    4102          *
    4103          * board.create('axis', [[0, 0], [0, 1]], {
    4104          *     position: 'sticky',
    4105          *     anchor: 'left right',
    4106          *     anchorDist: '0.1',
    4107          *     ticksAutoPos: true,
    4108          * });
    4109          *
    4110          * </pre><div id="JXG557c9b5d-e1bd-4d3b-8362-ff7a863255f3" class="jxgbox" style="width: 300px; height: 300px;"></div>
    4111          * <script type="text/javascript">
    4112          *     (function() {
    4113          *         var board = JXG.JSXGraph.initBoard('JXG557c9b5d-e1bd-4d3b-8362-ff7a863255f3',
    4114          *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
    4115          *
    4116          *     board.create('axis', [[0, 0], [1, 0]], {
    4117          *         position: 'sticky',
    4118          *         anchor: 'left right',
    4119          *         anchorDist: '0.1',
    4120          *         ticksAutoPos: true,
    4121          *     });
    4122          *
    4123          *     board.create('axis', [[0, 0], [0, 1]], {
    4124          *         position: 'sticky',
    4125          *         anchor: 'left right',
    4126          *         anchorDist: '0.1',
    4127          *         ticksAutoPos: true,
    4128          *     });
    4129          *
    4130          *     })();
    4131          *
    4132          * </script><pre>
    4133          */
    4134         ticksAutoPos: false,
    4135
    4136         /**
    4137          * Defines, when <tt>ticksAutoPos</tt> takes effect.
    4138          * There are the following possibilities:
    4139          * <ul>
    4140          *     <li>Numbers or strings which are numbers (e.g. '10') are interpreted as usrCoords.
    4141          *     <li>Strings with the unit 'px' are interpreted as screen pixels.
    4142          *     <li>Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)
    4143          * </ul>
    4144          *
    4145          * @type {Number|String}
    4146          * @name Axis#ticksAutoPosThreshold
    4147          * @default '5%'
    4148          */
    4149         ticksAutoPosThreshold: '5%',
    4150
    4151         /**
    4152          * Show / hide ticks.
    4153          *
    4154          * Deprecated. Suggested alternative is "ticks: {visible: false}"
    4155          *
    4156          * @type Boolean
    4157          * @name Axis#withTicks
    4158          * @default true
    4159          * @deprecated
    4160          */
    4161         withTicks: true,
    4162         straightFirst: true,
    4163         straightLast: true,
    4164         margin: -4,
    4165         withLabel: false,
    4166         scalable: false,
    4167
    4168         /**
    4169          * Attributes for ticks of the axis.
    4170          *
    4171          * @type Ticks
    4172          * @name Axis#ticks
    4173          */
    4174         ticks: {
    4175             label: {
    4176                 offset: [4, -12 + 3],     // This seems to be a good offset for 12 point fonts
    4177                 parse: false,
    4178                 needsRegularUpdate: false,
    4179                 display: 'internal',
    4180                 visible: 'inherit',
    4181                 layer: 9
    4182             },
    4183             visible: 'inherit',
    4184             needsRegularUpdate: false,
    4185             strokeWidth: 1,
    4186             strokeColor: '#666666',
    4187             highlightStrokeColor: '#888888',
    4188             drawLabels: true,
    4189             drawZero: false,
    4190             insertTicks: true,
    4191             minTicksDistance: 5,
    4192             minorHeight: 10,          // if <0: full width and height
    4193             majorHeight: -1,          // if <0: full width and height
    4194             tickEndings: [0, 1],
    4195             majorTickEndings: [1, 1],
    4196             minorTicks: 4,
    4197             ticksDistance: 1,         // TODO doc
    4198             strokeOpacity: 0.25
    4199         },
    4200
    4201         /**
    4202          * Attributes for first point the axis.
    4203          *
    4204          * @type Point
    4205          * @name Axis#point1
    4206          */
    4207         point1: {                  // Default values for point1 if created by line
    4208             needsRegularUpdate: false,
    4209             visible: false
    4210         },
    4211
    4212         /**
    4213          * Attributes for second point the axis.
    4214          *
    4215          * @type Point
    4216          * @name Axis#point2
    4217          */
    4218         point2: {                  // Default values for point2 if created by line
    4219             needsRegularUpdate: false,
    4220             visible: false
    4221         },
    4222
    4223         tabindex: -1,
    4224
    4225         /**
    4226          * Attributes for the axis label.
    4227          *
    4228          * @type Label
    4229          * @name Axis#label
    4230          */
    4231         label: {
    4232             position: 'lft',
    4233             offset: [10, 10]
    4234         }
    4235
    4236         /**#@-*/
    4237     },
    4238
    4239     /* special options for angle bisector of 3 points */
    4240     bisector: {
    4241         /**#@+
    4242          * @visprop
    4243          */
    4244
    4245         strokeColor: '#000000', // Bisector line
    4246
    4247         /**
    4248          * Attributes for the helper point of the bisector.
    4249          *
    4250          * @type Point
    4251          * @name Bisector#point
    4252          */
    4253         point: {               // Bisector point
    4254             visible: false,
    4255             fixed: false,
    4256             withLabel: false,
    4257             name: ''
    4258         }
    4259
    4260         /**#@-*/
    4261     },
    4262
    4263     /* special options for the 2 bisectors of 2 lines */
    4264     bisectorlines: {
    4265         /**#@+
    4266          * @visprop
    4267          */
    4268
    4269         /**
    4270          * Attributes for first line.
    4271          *
    4272          * @type Line
    4273          * @name Bisectorlines#line1
    4274          */
    4275         line1: {               //
    4276             strokeColor: '#000000'
    4277         },
    4278
    4279         /**
    4280          * Attributes for second line.
    4281          *
    4282          * @type Line
    4283          * @name Bisectorlines#line2
    4284          */
    4285         line2: {               //
    4286             strokeColor: '#000000'
    4287         }
    4288
    4289         /**#@-*/
    4290     },
    4291
    4292     /* special options for boxplot curves */
    4293     boxplot: {
    4294         /**#@+
    4295          * @visprop
    4296          */
    4297
    4298         /**
    4299          *  Direction of the box plot: 'vertical' or 'horizontal'
    4300          *
    4301          * @type String
    4302          * @name Boxplot#dir
    4303          * @default 'vertical'
    4304          */
    4305         dir: 'vertical',
    4306
    4307         /**
    4308          * Relative width of the maximum and minimum quantile
    4309          *
    4310          * @type Number
    4311          * @name Boxplot#smallWidth
    4312          * @default 0.5
    4313          */
    4314         smallWidth: 0.5,
    4315
    4316         strokeWidth: 2,
    4317         strokeColor: Color.palette.blue,
    4318         fillColor: Color.palette.blue,
    4319         fillOpacity: 0.2,
    4320         highlightStrokeWidth: 2,
    4321         highlightStrokeColor: Color.palette.blue,
    4322         highlightFillColor: Color.palette.blue,
    4323         highlightFillOpacity: 0.1
    4324
    4325         /**#@-*/
    4326     },
    4327
    4328     /* special button options */
    4329     button: {
    4330         /**#@+
    4331          * @visprop
    4332          */
    4333
    4334         /**
    4335          * Control the attribute "disabled" of the HTML button.
    4336          *
    4337          * @name disabled
    4338          * @memberOf Button.prototype
    4339          *
    4340          * @type Boolean
    4341          * @default false
    4342          */
    4343         disabled: false,
    4344
    4345         display: 'html'
    4346
    4347         /**#@-*/
    4348     },
    4349
    4350     /* special cardinal spline options */
    4351     cardinalspline: {
    4352         /**#@+
    4353          * @visprop
    4354          */
    4355
    4356         /**
    4357          * Controls if the data points of the cardinal spline when given as
    4358          * arrays should be converted into {@link JXG.Points}.
    4359          *
    4360          * @name createPoints
    4361          * @memberOf Cardinalspline.prototype
    4362          *
    4363          * @see Cardinalspline#points
    4364          *
    4365          * @type Boolean
    4366          * @default true
    4367          */
    4368         createPoints: true,
    4369
    4370         /**
    4371          * If set to true, the supplied coordinates are interpreted as
    4372          * [[x_0, y_0], [x_1, y_1], p, ...].
    4373          * Otherwise, if the data consists of two arrays of equal length,
    4374          * it is interpreted as
    4375          * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]]
    4376          *
    4377          * @name isArrayOfCoordinates
    4378          * @memberOf Cardinalspline.prototype
    4379          * @type Boolean
    4380          * @default true
    4381          */
    4382         isArrayOfCoordinates: true,
    4383
    4384         /**
    4385          * Attributes for the points generated by Cardinalspline in cases
    4386          * {@link createPoints} is set to true
    4387          *
    4388          * @name points
    4389          * @memberOf Cardinalspline.prototype
    4390          *
    4391          * @see Cardinalspline#createPoints
    4392          * @type Object
    4393          */
    4394         points: {
    4395             strokeOpacity: 0.05,
    4396             fillOpacity: 0.05,
    4397             highlightStrokeOpacity: 1.0,
    4398             highlightFillOpacity: 1.0,
    4399             withLabel: false,
    4400             name: '',
    4401             fixed: false
    4402         }
    4403
    4404         /**#@-*/
    4405     },
    4406
    4407     /* special chart options */
    4408     chart: {
    4409         /**#@+
    4410          * @visprop
    4411          */
    4412
    4413         chartStyle: 'line',
    4414         colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
    4415         highlightcolors: null,
    4416         fillcolor: null,
    4417         highlightonsector: false,
    4418         highlightbysize: false,
    4419
    4420         fillOpacity: 0.6,
    4421         withLines: false,
    4422
    4423         label: {
    4424         }
    4425         /**#@-*/
    4426     },
    4427
    4428     /* special html slider options */
    4429     checkbox: {
    4430         /**#@+
    4431          * @visprop
    4432          */
    4433
    4434         /**
    4435          * Control the attribute "disabled" of the HTML checkbox.
    4436          *
    4437          * @name disabled
    4438          * @memberOf Checkbox.prototype
    4439          *
    4440          * @type Boolean
    4441          * @default false
    4442          */
    4443         disabled: false,
    4444
    4445         /**
    4446          * Control the attribute "checked" of the HTML checkbox.
    4447          *
    4448          * @name checked
    4449          * @memberOf Checkbox.prototype
    4450          *
    4451          * @type Boolean
    4452          * @default false
    4453          */
    4454         checked: false,
    4455
    4456         display: 'html'
    4457
    4458         /**#@-*/
    4459     },
    4460
    4461     /*special circle options */
    4462     circle: {
    4463         /**#@+
    4464          * @visprop
    4465          */
    4466
    4467         /**
    4468          * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
    4469          *
    4470          * @see JXG.GeometryElement#hasPoint
    4471          * @name Circle#hasInnerPoints
    4472          * @type Boolean
    4473          * @default false
    4474          */
    4475         hasInnerPoints: false,
    4476
    4477         fillColor: 'none',
    4478         highlightFillColor: 'none',
    4479         strokeColor: Color.palette.blue,
    4480         highlightStrokeColor: '#c3d9ff',
    4481
    4482         /**
    4483          * Attributes for center point.
    4484          *
    4485          * @type Point
    4486          * @name Circle#center
    4487          */
    4488         center: {
    4489             visible: false,
    4490             withLabel: false,
    4491             fixed: false,
    4492
    4493             fillColor: Color.palette.red,
    4494             strokeColor: Color.palette.red,
    4495             highlightFillColor: '#c3d9ff',
    4496             highlightStrokeColor: '#c3d9ff',
    4497             layer: 9,
    4498
    4499             name: ''
    4500         },
    4501
    4502         /**
    4503          * Attributes for center point.
    4504          *
    4505          * @type Point
    4506          * @name Circle#point2
    4507          */
    4508         point2: {
    4509             fillColor: Color.palette.red,
    4510             strokeColor: Color.palette.red,
    4511             highlightFillColor: '#c3d9ff',
    4512             highlightStrokeColor: '#c3d9ff',
    4513             layer: 9,
    4514
    4515             visible: false,
    4516             withLabel: false,
    4517             fixed: false,
    4518             name: ''
    4519         },
    4520
    4521         /**
    4522          * Attributes for circle label.
    4523          *
    4524          * @type Label
    4525          * @name Circle#label
    4526          */
    4527         label: {
    4528             position: 'urt'
    4529         }
    4530
    4531         /**#@-*/
    4532     },
    4533
    4534     /* special options for circumcircle of 3 points */
    4535     circumcircle: {
    4536         /**#@+
    4537          * @visprop
    4538          */
    4539
    4540         fillColor: 'none',
    4541         highlightFillColor: 'none',
    4542         strokeColor: Color.palette.blue,
    4543         highlightStrokeColor: '#c3d9ff',
    4544
    4545         /**
    4546          * Attributes for center point.
    4547          *
    4548          * @type Point
    4549          * @name Circumcircle#center
    4550          */
    4551         center: {               // center point
    4552             visible: false,
    4553             fixed: false,
    4554             withLabel: false,
    4555             fillColor: Color.palette.red,
    4556             strokeColor: Color.palette.red,
    4557             highlightFillColor: '#c3d9ff',
    4558             highlightStrokeColor: '#c3d9ff',
    4559             name: ''
    4560         }
    4561         /**#@-*/
    4562     },
    4563
    4564     circumcirclearc: {
    4565         /**#@+
    4566          * @visprop
    4567          */
    4568
    4569         fillColor: 'none',
    4570         highlightFillColor: 'none',
    4571         strokeColor: Color.palette.blue,
    4572         highlightStrokeColor: '#c3d9ff',
    4573         useDirection: true,
    4574
    4575         /**
    4576          * Attributes for center point.
    4577          *
    4578          * @type Point
    4579          * @name CircumcircleArc#center
    4580          */
    4581         center: {
    4582             visible: false,
    4583             withLabel: false,
    4584             fixed: false,
    4585             name: ''
    4586         }
    4587         /**#@-*/
    4588     },
    4589
    4590     /* special options for circumcircle sector of 3 points */
    4591     circumcirclesector: {
    4592         /**#@+
    4593          * @visprop
    4594          */
    4595
    4596         useDirection: true,
    4597         fillColor: Color.palette.yellow,
    4598         highlightFillColor: Color.palette.yellow,
    4599         fillOpacity: 0.3,
    4600         highlightFillOpacity: 0.3,
    4601         strokeColor: Color.palette.blue,
    4602         highlightStrokeColor: '#c3d9ff',
    4603
    4604         /**
    4605          * Attributes for center point.
    4606          *
    4607          * @type Point
    4608          * @name Circle#point
    4609          */
    4610         point: {
    4611             visible: false,
    4612             fixed: false,
    4613             withLabel: false,
    4614             name: ''
    4615         }
    4616         /**#@-*/
    4617     },
    4618
    4619     /* special options for comb */
    4620     comb: {
    4621         /**#@+
    4622          * @visprop
    4623          */
    4624
    4625         /**
    4626          * Frequency of comb elements.
    4627          *
    4628          * @type Number
    4629          * @name Comb#frequency
    4630          * @default 0.2
    4631          */
    4632         frequency: 0.2,
    4633
    4634         /**
    4635          * Width of the comb.
    4636          *
    4637          * @type Number
    4638          * @name Comb#width
    4639          * @default 0.4
    4640          */
    4641         width: 0.4,
    4642
    4643         /**
    4644          * Angle - given in radians - under which comb elements are positioned.
    4645          *
    4646          * @type Number
    4647          * @name Comb#angle
    4648          * @default Math.PI / 3 (i.e. π /3  or 60^° degrees)
    4649          */
    4650         angle: Math.PI / 3,
    4651
    4652         /**
    4653          * Should the comb go right to left instead of left to right.
    4654          *
    4655          * @type Boolean
    4656          * @name Comb#reverse
    4657          * @default false
    4658          */
    4659         reverse: false,
    4660
    4661         /**
    4662          * Attributes for first defining point of the comb.
    4663          *
    4664          * @type Point
    4665          * @name Comb#point1
    4666          */
    4667         point1: {
    4668             visible: false,
    4669             withLabel: false,
    4670             fixed: false,
    4671             name: ''
    4672         },
    4673
    4674         /**
    4675          * Attributes for second defining point of the comb.
    4676          *
    4677          * @type Point
    4678          * @name Comb#point2
    4679          */
    4680         point2: {
    4681             visible: false,
    4682             withLabel: false,
    4683             fixed: false,
    4684             name: ''
    4685         },
    4686
    4687         // /**
    4688         //  * Attributes for the curve displaying the comb.
    4689         //  *
    4690         //  * @type Curve
    4691         //  * @name Comb#curve
    4692         //  */
    4693         // curve: {
    4694         //     strokeWidth: 1,
    4695         //     strokeColor: '#0000ff',
    4696         //     fillColor: 'none'
    4697         // },
    4698         strokeWidth: 1,
    4699         strokeColor: '#0000ff',
    4700         fillColor: 'none'
    4701     },
    4702
    4703     /* special conic options */
    4704     conic: {
    4705         /**#@+
    4706          * @visprop
    4707          */
    4708
    4709         fillColor: 'none',
    4710         highlightFillColor: 'none',
    4711         strokeColor: Color.palette.blue,
    4712         highlightStrokeColor: '#c3d9ff',
    4713
    4714         /**
    4715          * Attributes for foci points.
    4716          *
    4717          * @type Point
    4718          * @name Conic#foci
    4719          */
    4720         foci: {
    4721             // points
    4722             fixed: false,
    4723             visible: false,
    4724             withLabel: false,
    4725             name: ''
    4726         },
    4727
    4728         /**
    4729          * Attributes for center point.
    4730          *
    4731          * @type Point
    4732          * @name Conic#center
    4733          */
    4734         center: {
    4735             visible: false,
    4736             withLabel: false,
    4737             name: ''
    4738         },
    4739
    4740         /**
    4741          * Attributes for five points defining the conic, if some of them are given as coordinates.
    4742          *
    4743          * @type Point
    4744          * @name Conic#point
    4745          */
    4746         point: {
    4747             withLabel: false,
    4748             name: ''
    4749         },
    4750
    4751         /**
    4752          * Attributes for parabola line in case the line is given by two
    4753          * points or coordinate pairs.
    4754          *
    4755          * @type Line
    4756          * @name Conic#line
    4757          */
    4758         line: {
    4759             visible: false
    4760         }
    4761
    4762         /**#@-*/
    4763     },
    4764
    4765     /* special curve options */
    4766     curve: {
    4767         /**#@+
    4768          * @visprop
    4769          */
    4770
    4771         strokeWidth: 1,
    4772         strokeColor: Color.palette.blue,
    4773         fillColor: 'none',
    4774         fixed: true,
    4775
    4776         /**
    4777          * The curveType is set in {@link JXG.Curve#generateTerm} and used in {@link JXG.Curve#updateCurve}.
    4778          * Possible values are <ul>
    4779          * <li>'none'</li>
    4780          * <li>'plot': Data plot</li>
    4781          * <li>'parameter': we can not distinguish function graphs and parameter curves</li>
    4782          * <li>'functiongraph': function graph</li>
    4783          * <li>'polar'</li>
    4784          * <li>'implicit' (not yet)</li></ul>
    4785          * Only parameter and plot are set directly. Polar is set with {@link JXG.GeometryElement#setAttribute} only.
    4786          * @name Curve#curveType
    4787          * @type String
    4788          * @default null
    4789          */
    4790         curveType: null,
    4791
    4792         /**
    4793          * If true use a recursive bisection algorithm.
    4794          * It is slower, but usually the result is better. It tries to detect jumps
    4795          * and singularities.
    4796          *
    4797          * @name Curve#doAdvancedPlot
    4798          * @type Boolean
    4799          * @default true
    4800          */
    4801         doAdvancedPlot: true,
    4802
    4803         /**
    4804          * If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98.
    4805          *
    4806          * @name Curve#doAdvancedPlotOld
    4807          * @see Curve#doAdvancedPlot
    4808          * @type Boolean
    4809          * @default false
    4810          * @deprecated
    4811          */
    4812         doAdvancedPlotOld: false,   // v1
    4813
    4814         /**
    4815          * Configure arrow head at the start position for curve.
    4816          * Recommended arrow head type is 7.
    4817          *
    4818          * @name Curve#firstArrow
    4819          * @type Boolean | Object
    4820          * @default false
    4821          * @see Line#firstArrow for options
    4822          */
    4823         firstArrow: false,
    4824
    4825         /**
    4826          * The data points of the curve are not connected with straight lines but with bezier curves.
    4827          * @name Curve#handDrawing
    4828          * @type Boolean
    4829          * @default false
    4830          */
    4831         handDrawing: false,
    4832
    4833         /**
    4834          * Attributes for curve label.
    4835          *
    4836          * @type Label
    4837          * @name Curve#label
    4838          */
    4839         label: {
    4840             position: 'lft'
    4841         },
    4842
    4843         /**
    4844          * Configure arrow head at the end position for curve.
    4845          * Recommended arrow head type is 7.
    4846          *
    4847          * @name Curve#lastArrow
    4848          * @see Line#lastArrow for options
    4849          * @type Boolean | Object
    4850          * @default false
    4851          */
    4852         lastArrow: false,
    4853
    4854         /**
    4855          * Line endings (linecap) of a curve stroke.
    4856          * Possible values are:
    4857          * <ul>
    4858          * <li> 'butt',
    4859          * <li> 'round',
    4860          * <li> 'square'.
    4861          * </ul>
    4862          *
    4863          * @name JXG.Curve#lineCap
    4864          * @type String
    4865          * @default 'round'
    4866          */
    4867         lineCap: 'round',
    4868
    4869         /**
    4870          * Number of points used for plotting triggered by up events
    4871          * (i.e. high quality plotting) in case
    4872          * {@link Curve#doAdvancedPlot} is false.
    4873          *
    4874          * @name Curve#numberPointsHigh
    4875          * @see Curve#doAdvancedPlot
    4876          * @type Number
    4877          * @default 1600
    4878          */
    4879         numberPointsHigh: 1600,  // Number of points on curves after mouseUp
    4880
    4881         /**
    4882          * Number of points used for plotting triggered by move events
    4883          * (i.e. lower quality plotting but fast) in case
    4884          * {@link Curve#doAdvancedPlot} is false.
    4885          *
    4886          * @name Curve#numberPointsLow
    4887          * @see Curve#doAdvancedPlot
    4888          * @type Number
    4889          * @default 400
    4890          */
    4891         numberPointsLow: 400,    // Number of points on curves after mousemove
    4892
    4893         /**
    4894          * Select the version of the plot algorithm.
    4895          * <ul>
    4896          * <li> Version 1 is very outdated
    4897          * <li> Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0
    4898          * <li> Version 3 is an internal version that was never published in  a stable version.
    4899          * <li> Version 4 is available since JSXGraph v1.2.0
    4900          * </ul>
    4901          * Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode)
    4902          *
    4903          * @example
    4904          *   var c = board.create('functiongraph', ["log(x)"]);
    4905          *
    4906          * @name Curve#plotVersion
    4907          * @type Number
    4908          * @default 2
    4909          */
    4910         plotVersion: 2,
    4911
    4912         /**
    4913          * Configure arrow head at the start position for curve.
    4914          * Recommended arrow head type is 7.
    4915          *
    4916          * @name Curve#recursionDepthHigh
    4917          * @see Curve#doAdvancedPlot
    4918          * @type Number
    4919          * @default 17
    4920          */
    4921         recursionDepthHigh: 17,
    4922
    4923         /**
    4924          * Number of points used for plotting triggered by move events in case
    4925          * (i.e. lower quality plotting but fast)
    4926          * {@link Curve#doAdvancedPlot} is true.
    4927          *
    4928          * @name Curve#recursionDepthLow
    4929          * @see Curve#doAdvancedPlot
    4930          * @type Number
    4931          * @default 13
    4932          */
    4933         recursionDepthLow: 15
    4934
    4935         /**#@-*/
    4936     },
    4937
    4938     /* special foreignObject options */
    4939     foreignobject: {
    4940         /**#@+
    4941          * @visprop
    4942          */
    4943
    4944         fixed: true,
    4945         visible: true,
    4946         needsRegularUpdate: false,
    4947
    4948         /**
    4949          * List of attractor elements. If the distance of the foreignobject is less than
    4950          * attractorDistance the foreignobject is made to glider of this element.
    4951          *
    4952          * @name ForeignObject#attractors
    4953          *
    4954          * @type Array
    4955          * @default empty
    4956          */
    4957         attractors: [],
    4958
    4959         /**
    4960          * If set to true, this object is only evaluated once and not re-evaluated on update.
    4961          * This is necessary if you want to have a bord within a foreignObject of another board.
    4962          *
    4963          * @name ForeignObject#evaluateOnlyOnce
    4964          *
    4965          * @type Boolean
    4966          * @default false
    4967          */
    4968         evaluateOnlyOnce: false
    4969
    4970         /**#@-*/
    4971     },
    4972
    4973     /* special functiongraph options */
    4974     functiongraph: {
    4975         /**#@+
    4976          * @visprop
    4977          */
    4978
    4979
    4980         /**#@-*/
    4981     },
    4982
    4983     /* special glider options */
    4984     glider: {
    4985         /**#@+
    4986          * @visprop
    4987          */
    4988
    4989         label: {}
    4990         /**#@-*/
    4991     },
    4992
    4993     /* special grid options */
    4994     grid: {
    4995         /**#@+
    4996          * @visprop
    4997          */
    4998
    4999         needsRegularUpdate: false,
    5000         hasGrid: false,  // Used in standardoptions
    5001         highlight: false,
    5002
    5003         /**
    5004          * Deprecated. Use {@link Grid#majorStep} instead.
    5005          *
    5006          * @deprecated
    5007          * @type {Number|String}
    5008          * @name Grid#gridX
    5009          * @default null
    5010          */
    5011         gridX: null,
    5012
    5013         /**
    5014          * Deprecated. Use {@link Grid#majorStep} instead.
    5015          *
    5016          * @deprecated
    5017          * @type {Number|String}
    5018          * @name Grid#gridY
    5019          * @default null
    5020          */
    5021         gridY: null,
    5022
    5023         /**
    5024          * Distance of major grid elements. There are three possibilities:
    5025          * <ul>
    5026          *     <li>If it is set to 'auto' the distance of the major grid equals the distance of majorTicks of the corresponding axis.
    5027          *     <li>Numbers or strings which are numbers (e.g. '10') are interpreted as distance in usrCoords.
    5028          *     <li>Strings with the unit 'px' are interpreted as distance in screen pixels.
    5029          *     <li>Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)
    5030          * </ul>
    5031          * Instead of one value you can provide two values as an array <tt>[x, y]</tt> here.
    5032          * These are used as distance in x- and y-direction.
    5033          *
    5034          * @type {Number|String|Array}
    5035          * @name Grid#majorStep
    5036          * @default 'auto'
    5037          * @see JXG.Ticks#getDistanceMajorTicks
    5038          */
    5039         majorStep: 'auto',
    5040
    5041         /**
    5042          * Number of elements in minor grid between elements of the major grid. There are three possibilities:
    5043          * <ul>
    5044          *     <li>If set to 'auto', the number minor elements is equal to the number of minorTicks of the corresponding axis.
    5045          *     <li>Numbers or strings which are numbers (e.g. '10') are interpreted as quantity.
    5046          * </ul>
    5047          * Instead of one value you can provide two values as an array <tt>[x, y]</tt> here.
    5048          * These are used as number in x- and y-direction.
    5049          *
    5050          * @type {Number|String|Array}
    5051          * @name Grid#minorElements
    5052          * @default 0
    5053          */
    5054         minorElements: 0,
    5055
    5056         /**
    5057          * To print a quadratic grid with same distance of major grid elements in x- and y-direction.
    5058          * <tt>'min'</tt> or <tt>true</tt> will set both distances of major grid elements in x- and y-direction to the primarily lesser value,
    5059          * <tt>'max'</tt> to the primarily greater value.
    5060          *
    5061          * @type {Boolean|String}
    5062          * @name Grid#forceSquare
    5063          * @default false
    5064          */
    5065         forceSquare: false,
    5066
    5067         /**
    5068          * To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
    5069          *
    5070          * @type {Boolean}
    5071          * @name Grid#includeBoundaries
    5072          * @default false
    5073          */
    5074         includeBoundaries: false,
    5075
    5076         /**
    5077          * Size of grid elements. There are the following possibilities:
    5078          * <ul>
    5079          *     <li>Numbers or strings which are numbers (e.g. '10') are interpreted as size in pixels.
    5080          *     <li>Strings with additional '%' (e.g. '95%') are interpreted as the ratio of used space for one element.
    5081          * </ul>
    5082          * Unused for 'line' which will use the value of strokeWidth.
    5083          * Instead of one value you can provide two values as an array <tt>[x, y]</tt> here.
    5084          * These are used as size in x- and y-direction.
    5085          *
    5086          * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>,
    5087          * e.g. <tt>major: {size: ...}</tt>
    5088          * For default values have a look there.</p>
    5089          *
    5090          * @type {Number|String|Array}
    5091          * @name Grid#size
    5092          */
    5093         // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor.
    5094         size: undefined,
    5095
    5096         /**
    5097          * Appearance of grid elements.
    5098          * There are different styles which differ in appearance.
    5099          * Possible values are (comparing to {@link Point#face}):
    5100          * <table>
    5101          * <tr><th>Input</th><th>Output</th><th>Fillable by fillColor,...</th></tr>
    5102          * <tr><td>point, .</td><td>.</td><td>no</td></tr>
    5103          * <tr><td>line</td><td>−</td><td>no</td></tr>
    5104          * <tr><td>cross, x</td><td>x</td><td>no</td></tr>
    5105          * <tr><td>circle, o</td><td>o</td><td>yes</td></tr>
    5106          * <tr><td>square, []</td><td>[]</td><td>yes</td></tr>
    5107          * <tr><td>plus, +</td><td>+</td><td>no</td></tr>
    5108          * <tr><td>minus, -</td><td>-</td><td>no</td></tr>
    5109          * <tr><td>divide, |</td><td>|</td><td>no</td></tr>
    5110          * <tr><td>diamond, <></td><td><></td><td>yes</td></tr>
    5111          * <tr><td>diamond2, <<>></td><td><> (bigger)</td><td>yes</td></tr>
    5112          * <tr><td>triangleup, ^, a, A</td><td>^</td><td>no</td></tr>
    5113          * <tr><td>triangledown, v</td><td>v</td><td>no</td></tr>
    5114          * <tr><td>triangleleft, <</td><td> <</td><td>no</td></tr>
    5115          * <tr><td>triangleright, ></td><td>></td><td>no</td></tr>
    5116          * <tr><td>regularPolygon, regpol</td><td>⬡</td><td>yes</td></tr>
    5117          * </table>
    5118          *
    5119          * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>,
    5120          * e.g. <tt>major: {face: ...}</tt>
    5121          * For default values have a look there.</p>
    5122          *
    5123          * @type {String}
    5124          * @name Grid#face
    5125          */
    5126          // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor.
    5127         face: undefined,
    5128
    5129         /**
    5130          * This number (pixel value) controls where grid elements end at the canvas edge. If zero, the line
    5131          * ends exactly at the end, if negative there is a margin to the inside, if positive the line
    5132          * ends outside of the canvas (which is invisible).
    5133          *
    5134          * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>,
    5135          * e.g. <tt>major: {margin: ...}</tt>
    5136          * For default values have a look there.</p>
    5137          *
    5138          * @name Grid#margin
    5139          * @type {Number}
    5140          */
    5141         // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor.
    5142         margin: undefined,
    5143
    5144         /**
    5145          * This attribute determines whether the grid elements located at <tt>x=0</tt>, <tt>y=0</tt>
    5146          * and (for major grid only) at <tt>(0, 0)</tt> are displayed.
    5147          * The main reason to set this attribute to "false", might be in combination with axes.
    5148          * <ul>
    5149          *     <li>If <tt>false</tt>, then all these elements are hidden.
    5150          *     <li>If <tt>true</tt>, all these elements are shown.
    5151          *     <li>If an object of the following form is given, the three cases can be distinguished individually:<br>
    5152          *     <tt>{x: true|false, y: true|false, origin: true|false}</tt>
    5153          * </ul>
    5154          *
    5155          * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>,
    5156          * e.g. <tt>major: {drawZero: ...}</tt>
    5157          * For default values have a look there.</p>
    5158          *
    5159          * @type {Boolean|Object}
    5160          * @name Grid#drawZero
    5161          */
    5162         // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor.
    5163         drawZero: undefined,
    5164
    5165         /**
    5166          * Number of vertices for face 'polygon'.
    5167          *
    5168          * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>,
    5169          * e.g. <tt>major: {polygonVertices: ...}</tt>
    5170          * For default values have a look there.</p>
    5171          *
    5172          * @type {Number}
    5173          * @name Grid#polygonVertices
    5174          */
    5175         // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor.
    5176         polygonVertices: undefined,
    5177
    5178         /**
    5179          * This object contains the attributes for major grid elements.
    5180          * You can override the following grid attributes individually here:
    5181          * <ul>
    5182          *     <li>{@link Grid#size}
    5183          *     <li>{@link Grid#face}
    5184          *     <li>{@link Grid#margin}
    5185          *     <li>{@link Grid#drawZero}
    5186          *     <li>{@link Grid#polygonVertices}
    5187          * </ul>
    5188          * Default values are:
    5189          * <pre>{
    5190          *      size: 5,
    5191          *      face: 'line',
    5192          *      margin: 0,
    5193          *      drawZero: true,
    5194          *      polygonVertices: 6
    5195          *  }</pre>
    5196          *
    5197          * @name Grid#major
    5198          * @type {Object}
    5199          */
    5200         major: {
    5201
    5202             /**
    5203              * Documented in Grid#size
    5204              * @class
    5205              * @ignore
    5206              */
    5207             size: 5,
    5208
    5209             /**
    5210              * Documented in Grid#face
    5211              * @class
    5212              * @ignore
    5213              */
    5214             face: 'line',
    5215
    5216             /**
    5217              * Documented in Grid#margin
    5218              * @class
    5219              * @ignore
    5220              */
    5221             margin: 0,
    5222
    5223             /**
    5224              * Documented in Grid#drawZero
    5225              * @class
    5226              * @ignore
    5227              */
    5228             drawZero: true,
    5229
    5230             /**
    5231              * Documented in Grid#polygonVertices
    5232              * @class
    5233              * @ignore
    5234              */
    5235             polygonVertices: 6
    5236         },
    5237
    5238         /**
    5239          * This object contains the attributes for minor grid elements.
    5240          * You can override the following grid attributes individually here:
    5241          * <ul>
    5242          *     <li>{@link Grid#size}
    5243          *     <li>{@link Grid#face}
    5244          *     <li>{@link Grid#margin}
    5245          *     <li>{@link Grid#drawZero}
    5246          *     <li>{@link Grid#polygonVertices}
    5247          * </ul>
    5248          * Default values are:
    5249          * <pre>{
    5250          *      size: 3,
    5251          *      face: 'point',
    5252          *      margin: 0,
    5253          *      drawZero: true,
    5254          *      polygonVertices: 6
    5255          *  }</pre>
    5256          *
    5257          * @name Grid#minor
    5258          * @type {Object}
    5259          */
    5260         minor: {
    5261
    5262             /**
    5263              * @class
    5264              * @ignore
    5265              */
    5266             visible: 'inherit',
    5267
    5268             /**
    5269              * Documented in Grid#size
    5270              * @class
    5271              * @ignore
    5272              */
    5273             size: 3,
    5274
    5275             /**
    5276              * Documented in Grid#face
    5277              * @class
    5278              * @ignore
    5279              */
    5280             face: 'point',
    5281
    5282             /**
    5283              * Documented in Grid#margin
    5284              * @class
    5285              * @ignore
    5286              */
    5287             margin: 0,
    5288
    5289             /**
    5290              * Documented in Grid#drawZero
    5291              * @class
    5292              * @ignore
    5293              */
    5294             drawZero: true,
    5295
    5296             /**
    5297              * Documented in Grid#polygonVertices
    5298              * @class
    5299              * @ignore
    5300              */
    5301             polygonVertices: 6
    5302         },
    5303
    5304         /**
    5305          * @class
    5306          * @ignore
    5307          * @deprecated
    5308          */
    5309         snapToGrid: false,
    5310
    5311         strokeColor: '#c0c0c0',
    5312         strokeWidth: 1,
    5313         strokeOpacity: 0.5,
    5314         dash: 0,
    5315
    5316         /**
    5317          * Use a predefined theme for grid.
    5318          * Attributes can be overwritten by explicitly set the specific value.
    5319          *
    5320          * @type {Number}
    5321          * @default 0
    5322          * @see Grid#themes
    5323          */
    5324         theme: 0,
    5325
    5326         /**
    5327          * Array of theme attributes.
    5328          * The index of the entry is the number of the theme.
    5329          *
    5330          * @type {Array}
    5331          * @name Grid#themes
    5332          * @private
    5333          *
    5334          * @example
    5335          * // Theme 1
    5336          * // quadratic grid appearance with distance of major grid elements set to the primarily greater one
    5337          *
    5338          * JXG.JSXGraph.initBoard('jxgbox', {
    5339          *     boundingbox: [-4, 4, 4, -4], axis: true,
    5340          *     defaultAxes: {
    5341          *         x: { ticks: {majorHeight: 10} },
    5342          *         y: { ticks: {majorHeight: 10} }
    5343          *     },
    5344          *     grid: { theme: 1 },
    5345          * });
    5346          * </pre> <div id="JXGb8d606c4-7c67-4dc0-9941-3b3bd0932898" class="jxgbox" style="width: 300px; height: 200px;"></div>
    5347          * <script type="text/javascript">
    5348          *     (function() {
    5349          *         JXG.JSXGraph.initBoard('JXGb8d606c4-7c67-4dc0-9941-3b3bd0932898',
    5350          *             {boundingbox: [-4, 4, 4, -4], axis: true, showcopyright: false, shownavigation: false,
    5351          *                 defaultAxes: {
    5352          *                     x: { ticks: {majorHeight: 10} },
    5353          *                     y: { ticks: {majorHeight: 10} }
    5354          *                 },
    5355          *                grid: { theme: 1 },
    5356          *             });
    5357          *     })();
    5358          * </script> <pre>
    5359          *
    5360          * @example
    5361          * // Theme 2
    5362          * // lines and points in between
    5363          *
    5364          * JXG.JSXGraph.initBoard('jxgbox', {
    5365          *     boundingbox: [-4, 4, 4, -4], axis: false,
    5366          *     grid: { theme: 2 },
    5367          * });
    5368          * </pre> <div id="JXG4e11e6e3-472a-48e0-b7d0-f80d397c769b" class="jxgbox" style="width: 300px; height: 300px;"></div>
    5369          * <script type="text/javascript">
    5370          *     (function() {
    5371          *         JXG.JSXGraph.initBoard('JXG4e11e6e3-472a-48e0-b7d0-f80d397c769b',
    5372          *             {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false,
    5373          *                 grid: { theme: 2 },
    5374          *             })
    5375          *     })();
    5376          * </script> <pre>
    5377          *
    5378          * @example
    5379          * // Theme 3
    5380          * // lines and thinner lines in between
    5381          *
    5382          * JXG.JSXGraph.initBoard('jxgbox', {
    5383          *     boundingbox: [-4, 4, 4, -4], axis: false,
    5384          *     grid: { theme: 3 },
    5385          * });
    5386          * </pre> <div id="JXG334814a3-03a7-4231-a5a7-a42d3b8dc2de" class="jxgbox" style="width: 300px; height: 300px;"></div>
    5387          * <script type="text/javascript">
    5388          *     (function() {
    5389          *         JXG.JSXGraph.initBoard('JXG334814a3-03a7-4231-a5a7-a42d3b8dc2de',
    5390          *             {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false,
    5391          *                 grid: { theme: 3 }
    5392          *         });
    5393          *     })();
    5394          * </script> <pre>
    5395          *
    5396          * @example
    5397          * // Theme 4
    5398          * // lines with grid of '+'s plotted in between
    5399          *
    5400          * JXG.JSXGraph.initBoard('jxgbox', {
    5401          *     boundingbox: [-4, 4, 4, -4], axis: false,
    5402          *     grid: { theme: 4 },
    5403          * });
    5404          * </pre> <div id="JXG9e2bb29c-d998-428c-9432-4a7bf6cd9222" class="jxgbox" style="width: 300px; height: 300px;"></div>
    5405          * <script type="text/javascript">
    5406          *     (function() {
    5407          *         JXG.JSXGraph.initBoard('JXG9e2bb29c-d998-428c-9432-4a7bf6cd9222',
    5408          *             {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false,
    5409          *                 grid: { theme: 4 },
    5410          *             });
    5411          *     })();
    5412          * </script> <pre>
    5413          *
    5414          * @example
    5415          * // Theme 5
    5416          * // grid of '+'s and points in between
    5417          *
    5418          * JXG.JSXGraph.initBoard('jxgbox', {
    5419          *     boundingbox: [-4, 4, 4, -4], axis: false,
    5420          *     grid: { theme: 5 },
    5421          * });
    5422          * </pre> <div id="JXG6a967d83-4179-4827-9e97-63fbf1e872c8" class="jxgbox" style="width: 300px; height: 300px;"></div>
    5423          * <script type="text/javascript">
    5424          *     (function() {
    5425          *         JXG.JSXGraph.initBoard('JXG6a967d83-4179-4827-9e97-63fbf1e872c8',
    5426          *             {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false,
    5427          *                 grid: { theme: 5 },
    5428          *         });
    5429          *     })();
    5430          * </script> <pre>
    5431          *
    5432          * @example
    5433          * // Theme 6
    5434          * // grid of circles with points in between
    5435          *
    5436          * JXG.JSXGraph.initBoard('jxgbox', {
    5437          *     boundingbox: [-4, 4, 4, -4], axis: false,
    5438          *     grid: { theme: 6 },
    5439          * });
    5440          * </pre> <div id="JXG28bee3da-a7ef-4590-9a18-38d1b99d09ce" class="jxgbox" style="width: 300px; height: 300px;"></div>
    5441          * <script type="text/javascript">
    5442          *     (function() {
    5443          *         JXG.JSXGraph.initBoard('JXG28bee3da-a7ef-4590-9a18-38d1b99d09ce',
    5444          *             {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false,
    5445          *                 grid: { theme: 6 },
    5446          *         });
    5447          *     })();
    5448          * </script> <pre>
    5449          */
    5450         themes: [
    5451             {
    5452                 // default values
    5453             },
    5454
    5455             {   // Theme 1: quadratic grid appearance with distance of major grid elements in x- and y-direction set to the primarily smaller one
    5456                 forceSquare: 'min',
    5457                 major: {
    5458                     face: 'line'
    5459                 }
    5460             },
    5461
    5462             {   // Theme 2: lines and points in between
    5463                 major: {
    5464                     face: 'line'
    5465                 },
    5466                 minor: {
    5467                     size: 3,
    5468                     face: 'point'
    5469                 },
    5470                 minorElements: 'auto'
    5471             },
    5472
    5473             {   // Theme 3: lines and thinner lines in between
    5474                 major: {
    5475                     face: 'line'
    5476                 },
    5477                 minor: {
    5478                     face: 'line',
    5479                     strokeOpacity: 0.25
    5480                 },
    5481                 minorElements: 'auto'
    5482             },
    5483
    5484             {   // Theme 4: lines with grid of '+'s plotted in between
    5485                 major: {
    5486                     face: 'line'
    5487                 },
    5488                 minor: {
    5489                     face: '+',
    5490                     size: '95%'
    5491                 },
    5492                 minorElements: 'auto'
    5493             },
    5494
    5495             {   // Theme 5: grid of '+'s and more points in between
    5496                 major: {
    5497                     face: '+',
    5498                     size: 10,
    5499                     strokeOpacity: 1
    5500                 },
    5501                 minor: {
    5502                     face: 'point',
    5503                     size: 3
    5504                 },
    5505                 minorElements: 'auto'
    5506             },
    5507
    5508             {   // Theme 6: grid of circles with points in between
    5509                 major: {
    5510                     face: 'circle',
    5511                     size: 8,
    5512                     fillColor: '#c0c0c0'
    5513                 },
    5514                 minor: {
    5515                     face: 'point',
    5516                     size: 3
    5517                 },
    5518                 minorElements: 'auto'
    5519             }
    5520         ]
    5521
    5522         /**#@-*/
    5523     },
    5524
    5525     group: {
    5526         needsRegularUpdate: true
    5527     },
    5528
    5529     /* special html slider options */
    5530     htmlslider: {
    5531         /**#@+
    5532          * @visprop
    5533          */
    5534
    5535         // /**
    5536         //  *
    5537         //  * These affect the DOM element input type="range".
    5538         //  * The other attributes affect the DOM element div containing the range element.
    5539         //  */
    5540         widthRange: 100,
    5541         widthOut: 34,
    5542         step: 0.01,
    5543
    5544         frozen: true,
    5545         isLabel: false,
    5546         strokeColor: '#000000',
    5547         display: 'html',
    5548         anchorX: 'left',
    5549         anchorY: 'middle',
    5550         withLabel: false
    5551
    5552         /**#@-*/
    5553     },
    5554
    5555     /* special image options */
    5556     image: {
    5557         /**#@+
    5558          * @visprop
    5559          */
    5560
    5561         imageString: null,
    5562         fillOpacity: 1.0,
    5563         highlightFillOpacity: 0.6,
    5564
    5565
    5566         /**
    5567          * Defines the CSS class used by the image. CSS attributes defined in
    5568          * this class will overwrite the corresponding JSXGraph attributes, e.g.
    5569          * opacity.
    5570          * The default CSS class is defined in jsxgraph.css.
    5571          *
    5572          * @name Image#cssClass
    5573          *
    5574          * @see Image#highlightCssClass
    5575          * @type String
    5576          * @default 'JXGimage'
    5577          * @see Image#highlightCssClass
    5578          * @see Text#cssClass
    5579          * @see JXG.GeometryElement#cssClass
    5580          */
    5581         cssClass: 'JXGimage',
    5582
    5583         /**
    5584          * Defines the CSS class used by the image when highlighted.
    5585          * CSS attributes defined in this class will overwrite the
    5586          * corresponding JSXGraph attributes, e.g. highlightFillOpacity.
    5587          * The default CSS class is defined in jsxgraph.css.
    5588          *
    5589          * @name Image#highlightCssClass
    5590          *
    5591          * @see Image#cssClass
    5592          * @type String
    5593          * @default 'JXGimageHighlight'
    5594          * @see Image#cssClass
    5595          * @see Image#highlightCssClass
    5596          * @see JXG.GeometryElement#highlightCssClass
    5597          */
    5598         highlightCssClass: 'JXGimageHighlight',
    5599
    5600         /**
    5601          * Image rotation in degrees.
    5602          *
    5603          * @name Image#rotate
    5604          * @type Number
    5605          * @default 0
    5606          */
    5607         rotate: 0,
    5608
    5609         /**
    5610          * Defines together with {@link Image#snapSizeY} the grid the image snaps on to.
    5611          * The image will only snap on user coordinates which are
    5612          * integer multiples to snapSizeX in x and snapSizeY in y direction.
    5613          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    5614          * of the default ticks of the default x axes of the board.
    5615          *
    5616          * @name Image#snapSizeX
    5617          *
    5618          * @see Point#snapToGrid
    5619          * @see Image#snapSizeY
    5620          * @see JXG.Board#defaultAxes
    5621          * @type Number
    5622          * @default 1
    5623          */
    5624         snapSizeX: 1,
    5625
    5626         /**
    5627          * Defines together with {@link Image#snapSizeX} the grid the image snaps on to.
    5628          * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    5629          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    5630          * of the default ticks of the default y axes of the board.
    5631          *
    5632          * @name Image#snapSizeY
    5633          *
    5634          * @see Point#snapToGrid
    5635          * @see Image#snapSizeX
    5636          * @see JXG.Board#defaultAxes
    5637          * @type Number
    5638          * @default 1
    5639          */
    5640         snapSizeY: 1,
    5641
    5642         /**
    5643          * List of attractor elements. If the distance of the image is less than
    5644          * attractorDistance the image is made to glider of this element.
    5645          *
    5646          * @name Image#attractors
    5647          *
    5648          * @type Array
    5649          * @default empty
    5650          */
    5651         attractors: []
    5652
    5653         /**#@-*/
    5654     },
    5655
    5656     /* special implicitcurve options */
    5657     implicitcurve: {
    5658         /**#@+
    5659          * @visprop
    5660          */
    5661
    5662         /**
    5663          * Defines the margin (in user coordinates) around the JSXGraph board in which the
    5664          * implicit curve is plotted.
    5665          *
    5666          * @name ImplicitCurve#margin
    5667          * @type {Number|Function}
    5668          * @default 1
    5669          */
    5670         margin: 1,
    5671
    5672         /**
    5673          * Horizontal resolution: distance (in pixel) between vertical lines to search for components of the implicit curve.
    5674          * A small number increases the running time. For large number components may be missed.
    5675          * Minimum value is 0.01.
    5676          *
    5677          * @name ImplicitCurve#resolution_outer
    5678          * @type {Number|Function}
    5679          * @default 5
    5680          */
    5681         resolution_outer: 5,
    5682
    5683         /**
    5684          * Vertical resolution (in pixel) to search for components of the implicit curve.
    5685          * A small number increases the running time. For large number components may be missed.
    5686          * Minimum value is 0.01.
    5687          *
    5688          * @name ImplicitCurve#resolution_inner
    5689          * @type {Number|Function}
    5690          * @default 5
    5691          */
    5692         resolution_inner: 5,
    5693
    5694         /**
    5695          * Maximum iterations for one component of the implicit curve.
    5696          *
    5697          * @name ImplicitCurve#max_steps
    5698          * @type {Number|Function}
    5699          * @default 1024
    5700          */
    5701         max_steps: 1024,
    5702
    5703         /**
    5704          * Angle α<sub>0</sub> between two successive tangents: determines the smoothness of
    5705          * the curve.
    5706          *
    5707          * @name ImplicitCurve#alpha_0
    5708          * @type {Number|Function}
    5709          * @default 0.05
    5710          */
    5711         alpha_0: 0.05,
    5712
    5713         /**
    5714          * Tolerance to find starting points for the tracing phase of a component.
    5715          *
    5716          * @name ImplicitCurve#tol_0
    5717          * @type {Number|Function}
    5718          * @default JXG.Math.eps
    5719          */
    5720         tol_u0: Mat.eps,
    5721
    5722         /**
    5723          * Tolerance for the Newton steps.
    5724          *
    5725          * @name ImplicitCurve#tol_newton
    5726          * @type {Number|Function}
    5727          * @default 1.0e-7
    5728          */
    5729         tol_newton: 1.0e-7,
    5730
    5731         /**
    5732          * Tolerance for cusp / bifurcation detection.
    5733          *
    5734          * @name ImplicitCurve#tol_cusp
    5735          * @type {Number|Function}
    5736          * @default 0.05
    5737          */
    5738         tol_cusp: 0.05,
    5739
    5740         /**
    5741          * If two points are closer than this value, we bail out of the tracing phase for that
    5742          * component.
    5743          *
    5744          * @name ImplicitCurve#tol_progress
    5745          * @type {Number|Function}
    5746          * @default 0.0001
    5747          */
    5748         tol_progress: 0.0001,
    5749
    5750         /**
    5751          * Half of the box size (in user units) to search for existing line segments in the quadtree.
    5752          *
    5753          * @name ImplicitCurve#qdt_box
    5754          * @type {Number|Function}
    5755          * @default 0.2
    5756          */
    5757         qdt_box: 0.2,
    5758
    5759         /**
    5760          * Inverse of desired number of Newton steps.
    5761          *
    5762          * @name ImplicitCurve#kappa_0
    5763          * @type {Number|Function}
    5764          * @default 0.2
    5765          */
    5766         kappa_0: 0.2,
    5767
    5768         /**
    5769          * Allowed distance (in user units) of predictor point to curve.
    5770          *
    5771          * @name ImplicitCurve#delta_0
    5772          * @type {Number|Function}
    5773          * @default 0.05
    5774          */
    5775         delta_0: 0.05,
    5776
    5777         /**
    5778          * Initial step width (in user units).
    5779          *
    5780          * @name ImplicitCurve#h_initial
    5781          * @type {Number|Function}
    5782          * @default 0.1
    5783          */
    5784         h_initial: 0.1,
    5785
    5786         /**
    5787          * If h is below this threshold (in user units), we bail out
    5788          * of the tracing phase of that component.
    5789          *
    5790          * @name ImplicitCurve#h_critical
    5791          * @type {Number|Function}
    5792          * @default 0.001
    5793          */
    5794         h_critical: 0.001,
    5795
    5796         /**
    5797          * Maximum step width (in user units).
    5798          *
    5799          * @name ImplicitCurve#h_max
    5800          * @type {Number|Function}
    5801          * @default 0.5
    5802          */
    5803         h_max: 0.5,
    5804
    5805         /**
    5806          * Allowed distance (in user units multiplied by actual step width) to detect loop.
    5807          *
    5808          * @name ImplicitCurve#loop_dist
    5809          * @type {Number|Function}
    5810          * @default 0.09
    5811          */
    5812         loop_dist: 0.09,
    5813
    5814         /**
    5815          * Minimum acos of angle to detect loop.
    5816          *
    5817          * @name ImplicitCurve#loop_dir
    5818          * @type {Number|Function}
    5819          * @default 0.99
    5820          */
    5821         loop_dir: 0.99,
    5822
    5823         /**
    5824          * Use Gosper's loop detector.
    5825          *
    5826          * @name ImplicitCurve#loop_detection
    5827          * @type {Boolean|Function}
    5828          * @default true
    5829          */
    5830         loop_detection: true
    5831
    5832         /**#@-*/
    5833     },
    5834
    5835     /* special options for incircle of 3 points */
    5836     incircle: {
    5837         /**#@+
    5838          * @visprop
    5839          */
    5840
    5841         fillColor: 'none',
    5842         highlightFillColor: 'none',
    5843         strokeColor: Color.palette.blue,
    5844         highlightStrokeColor: '#c3d9ff',
    5845
    5846         /**
    5847          * Attributes of circle center.
    5848          *
    5849          * @type Point
    5850          * @name Incircle#center
    5851          */
    5852         center: {               // center point
    5853             visible: false,
    5854             fixed: false,
    5855             withLabel: false,
    5856             fillColor: Color.palette.red,
    5857             strokeColor: Color.palette.red,
    5858             highlightFillColor: '#c3d9ff',
    5859             highlightStrokeColor: '#c3d9ff',
    5860             name: ''
    5861         }
    5862         /**#@-*/
    5863     },
    5864
    5865     inequality: {
    5866         /**#@+
    5867          * @visprop
    5868          */
    5869
    5870         fillColor: Color.palette.red,
    5871         fillOpacity: 0.2,
    5872         strokeColor: 'none',
    5873
    5874         /**
    5875          * By default an inequality is less (or equal) than. Set inverse to <tt>true</tt> will consider the inequality
    5876          * greater (or equal) than.
    5877          *
    5878          * @type Boolean
    5879          * @default false
    5880          * @name Inequality#inverse
    5881          * @visprop
    5882          */
    5883         inverse: false
    5884         /**#@-*/
    5885     },
    5886
    5887     infobox: {
    5888         /**#@+
    5889          * @visprop
    5890          */
    5891
    5892         /**
    5893          * Horizontal offset in pixel of the infobox text from its anchor point.
    5894          *
    5895          * @type Number
    5896          * @default -20
    5897          * @name JXG.Board.infobox#distanceX
    5898          * @visprop
    5899          */
    5900         distanceX: -20,
    5901
    5902         /**
    5903          * Vertical offset in pixel of the infobox text from its anchor point.
    5904          *
    5905          * @type Number
    5906          * @default 25
    5907          * @name JXG.Board.infobox#distanceY
    5908          * @visprop
    5909          */
    5910         distanceY: 25,
    5911
    5912         /**
    5913          * Internationalization support for infobox text.
    5914          *
    5915          * @name JXG.Board.infobox#intl
    5916          * @type object
    5917          * @default <pre>{
    5918          *    enabled: 'inherit',
    5919          *    options: {}
    5920          * }</pre>
    5921          * @visprop
    5922          * @see JXG.Board#intl
    5923          * @see Text#intl
    5924          */
    5925         intl: {
    5926             enabled: 'inherit',
    5927             options: {}
    5928         },
    5929
    5930         fontSize: 12,
    5931         isLabel: false,
    5932         strokeColor: '#bbbbbb',
    5933         display: 'html',             // 'html' or 'internal'
    5934         anchorX: 'left',             //  'left', 'middle', or 'right': horizontal alignment
    5935         //  of the text.
    5936         anchorY: 'middle',           //  'top', 'middle', or 'bottom': vertical alignment
    5937         //  of the text.
    5938         cssClass: 'JXGinfobox',
    5939         rotate: 0,                   // works for non-zero values only in combination
    5940         // with display=='internal'
    5941         visible: true,
    5942         parse: false,
    5943         transitionDuration: 0,
    5944         needsRegularUpdate: false,
    5945         tabindex: null,
    5946         viewport: [0, 0, 0, 0]
    5947
    5948         /**#@-*/
    5949     },
    5950
    5951     /* special options for integral */
    5952     integral: {
    5953         /**#@+
    5954          * @visprop
    5955          */
    5956
    5957         axis: 'x',        // 'x' or 'y'
    5958         withLabel: true,    // Show integral value as text
    5959         fixed: true,
    5960         strokeWidth: 0,
    5961         strokeOpacity: 0,
    5962         fillColor: Color.palette.red,
    5963         fillOpacity: 0.3,
    5964         highlightFillColor: Color.palette.red,
    5965         highlightFillOpacity: 0.2,
    5966
    5967         /**
    5968          * Attributes of the (left) starting point of the integral.
    5969          *
    5970          * @type Point
    5971          * @name Integral#curveLeft
    5972          * @see Integral#baseLeft
    5973          */
    5974         curveLeft: {    // Start point
    5975             visible: true,
    5976             withLabel: false,
    5977             color: Color.palette.red,
    5978             fillOpacity: 0.8,
    5979             layer: 9
    5980         },
    5981
    5982         /**
    5983          * Attributes of the (left) base point of the integral.
    5984          *
    5985          * @type Point
    5986          * @name Integral#baseLeft
    5987          * @see Integral#curveLeft
    5988          */
    5989         baseLeft: {    // Start point
    5990             visible: false,
    5991             fixed: false,
    5992             withLabel: false,
    5993             name: ''
    5994         },
    5995
    5996         /**
    5997          * Attributes of the (right) end point of the integral.
    5998          *
    5999          * @type Point
    6000          * @name Integral#curveRight
    6001          * @see Integral#baseRight
    6002          */
    6003         curveRight: {      // End point
    6004             visible: true,
    6005             withLabel: false,
    6006             color: Color.palette.red,
    6007             fillOpacity: 0.8,
    6008             layer: 9
    6009         },
    6010
    6011         /**
    6012          * Attributes of the (right) base point of the integral.
    6013          *
    6014          * @type Point
    6015          * @name Integral#baseRight
    6016          * @see Integral#curveRight
    6017          */
    6018         baseRight: {      // End point
    6019             visible: false,
    6020             fixed: false,
    6021             withLabel: false,
    6022             name: ''
    6023         },
    6024
    6025         /**
    6026          * Attributes for integral label.
    6027          *
    6028          * @type Label
    6029          * @name Integral#label
    6030          * @default <pre>{
    6031          *      fontSize: 20,
    6032          *      digits: 4,
    6033          *      intl: {
    6034          *          enabled: false,
    6035          *          options: {}
    6036          *      }
    6037          *    }</pre>
    6038          */
    6039         label: {
    6040             fontSize: 20,
    6041             digits: 4,
    6042             intl: {
    6043                 enabled: false,
    6044                 options: {}
    6045             }
    6046         }
    6047         /**#@-*/
    6048     },
    6049
    6050     /* special input options */
    6051     input: {
    6052         /**#@+
    6053          * @visprop
    6054          */
    6055
    6056         /**
    6057          * Control the attribute "disabled" of the HTML input field.
    6058          *
    6059          * @name disabled
    6060          * @memberOf Input.prototype
    6061          *
    6062          * @type Boolean
    6063          * @default false
    6064          */
    6065         disabled: false,
    6066
    6067         /**
    6068          * Control the attribute "maxlength" of the HTML input field.
    6069          *
    6070          * @name maxlength
    6071          * @memberOf Input.prototype
    6072          *
    6073          * @type Number
    6074          * @default 524288 (as in HTML)
    6075          */
    6076         maxlength: 524288,
    6077
    6078         display: 'html'
    6079
    6080         /**#@-*/
    6081     },
    6082
    6083     /* special intersection point options */
    6084     intersection: {
    6085         /**#@+
    6086          * @visprop
    6087          */
    6088
    6089         /**
    6090          * Used in {@link JXG.Intersection}.
    6091          * This flag sets the behaviour of intersection points of e.g.
    6092          * two segments. If true, the intersection is treated as intersection of lines. If false
    6093          * the intersection point exists if the segments intersect setwise.
    6094          *
    6095          * @name Intersection.alwaysIntersect
    6096          * @type Boolean
    6097          * @default true
    6098          */
    6099         alwaysIntersect: true
    6100
    6101         /**#@-*/
    6102     },
    6103
    6104     /* special label options */
    6105     label: {
    6106         /**#@+
    6107          * @visprop
    6108          */
    6109
    6110         visible: 'inherit',
    6111         strokeColor: '#000000',
    6112         strokeOpacity: 1,
    6113         highlightStrokeOpacity: 0.666666,
    6114         highlightStrokeColor: '#000000',
    6115
    6116         fixed: true,
    6117         tabindex: null,
    6118
    6119         /**
    6120          * Point labels are positioned by setting {@link Point#anchorX}, {@link Point#anchorY}
    6121          * and {@link Label#offset}.
    6122          * For line, circle and curve elements (and their derived objects)
    6123          * there are two possibilities to position labels.
    6124          * <ul>
    6125          * <li> The first (old) possibility uses the <a href="https://www.tug.org/metapost.html">MetaPost</a> system:
    6126          * Possible string values for the position of a label for
    6127          * label anchor points are:
    6128          * <ul>
    6129          * <li> 'first' (lines only)
    6130          * <li> 'last' (lines only)
    6131          * <li> 'lft'
    6132          * <li> 'rt'
    6133          * <li> 'top'
    6134          * <li> 'bot'
    6135          * <li> 'ulft'
    6136          * <li> 'urt'
    6137          * <li> 'llft'
    6138          * <li> 'lrt'
    6139          * </ul>
    6140          * <li> the second (preferred) possibility (since v1.9.0) is:
    6141          * with <tt>position: 'len side'</tt> the label can be positioned exactly along the
    6142          * element's path. Here,
    6143          * <ul>
    6144          * <li> 'len' is an expression of the form
    6145          *   <ul>
    6146          *     <li> xfr, denoting a fraction of the whole. x is expected to be a number between 0 and 1.
    6147          *     <li> x%, a percentage. x is expected to be a number between 0 and 100.
    6148          *     <li> x, a number: only possible for line elements and circles. For lines, the label is positioned x
    6149          *          user units from the starting point. For circles, the number is interpreted as degree, e.g. 45°.
    6150          *          For everything else, 0 is taken instead.
    6151          *     <li> xpx, a pixel value: only possible for line elements.
    6152          *          The label is positioned x pixels from the starting point.
    6153          *          For non-lines, 0% is taken instead.
    6154          *   </ul>
    6155          * <li> 'side' is either 'left' or 'right'. The label is positioned to the left or right of the path, when moving from the
    6156          * first point to the last. For circles, 'left' means inside of the circle, 'right' means outside of the circle.
    6157          * The distance of the label from the path can be controlled by {@link Label#distance}.
    6158          * </ul>
    6159          * Recommended for this second possibility is to use anchorX: 'middle' and 'anchorY: 'middle'.
    6160          * </ul>
    6161          *
    6162          * @example
    6163          * var l1 = board.create('segment', [[-3, 2], [3, 2]], {
    6164          *     name: 'l_1',
    6165          *     withLabel: true,
    6166          *     point1: { visible: true, name: 'A', withLabel: true },
    6167          *     point2: { visible: true, name: 'B', withLabel: true },
    6168          *     label: {
    6169          *         anchorX: 'middle',
    6170          *         anchorY: 'middle',
    6171          *         offset: [0, 0],
    6172          *         distance: 1.2,
    6173          *         position: '0.2fr left'
    6174          *     }
    6175          * });
    6176          *
    6177          * </pre><div id="JXG66395d34-fd7f-42d9-97dc-14ae8882c11f" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6178          * <script type="text/javascript">
    6179          *     (function() {
    6180          *         var board = JXG.JSXGraph.initBoard('JXG66395d34-fd7f-42d9-97dc-14ae8882c11f',
    6181          *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
    6182          *     var l1 = board.create('segment', [[-3, 2], [3, 2]], {
    6183          *         name: 'l_1',
    6184          *         withLabel: true,
    6185          *         point1: { visible: true, name: 'A', withLabel: true },
    6186          *         point2: { visible: true, name: 'B', withLabel: true },
    6187          *         label: {
    6188          *             anchorX: 'middle',
    6189          *             anchorY: 'middle',
    6190          *             offset: [0, 0],
    6191          *             distance: 1.2,
    6192          *             position: '0.2fr left'
    6193          *         }
    6194          *     });
    6195          *
    6196          *     })();
    6197          *
    6198          * </script><pre>
    6199          *
    6200          * @example
    6201          * var c1 = board.create('circle', [[0, 0], 3], {
    6202          *     name: 'c_1',
    6203          *     withLabel: true,
    6204          *     label: {
    6205          *         anchorX: 'middle',
    6206          *         anchorY: 'middle',
    6207          *         offset: [0, 0],
    6208          *         fontSize: 32,
    6209          *         distance: 1.5,
    6210          *         position: '50% right'
    6211          *     }
    6212          * });
    6213          *
    6214          * </pre><div id="JXG98ee16ab-fc5f-476c-bf57-0107ac69d91e" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6215          * <script type="text/javascript">
    6216          *     (function() {
    6217          *         var board = JXG.JSXGraph.initBoard('JXG98ee16ab-fc5f-476c-bf57-0107ac69d91e',
    6218          *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
    6219          *     var c1 = board.create('circle', [[0, 0], 3], {
    6220          *         name: 'c_1',
    6221          *         withLabel: true,
    6222          *         label: {
    6223          *             anchorX: 'middle',
    6224          *             anchorY: 'middle',
    6225          *             offset: [0, 0],
    6226          *             fontSize: 32,
    6227          *             distance: 1.5,
    6228          *             position: '50% right'
    6229          *         }
    6230          *     });
    6231          *
    6232          *     })();
    6233          *
    6234          * </script><pre>
    6235          *
    6236          * @example
    6237          * var cu1 = board.create('functiongraph', ['3 * sin(x)', -3, 3], {
    6238          *     name: 'cu_1',
    6239          *     withLabel: true,
    6240          *     label: {
    6241          *         anchorX: 'middle',
    6242          *         anchorY: 'middle',
    6243          *         offset: [0, 0],
    6244          *         distance: 2,
    6245          *         position: '0.8fr right'
    6246          *     }
    6247          * });
    6248          *
    6249          * </pre><div id="JXG65b2edee-12d8-48a1-94b2-d6e79995de8c" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6250          * <script type="text/javascript">
    6251          *     (function() {
    6252          *         var board = JXG.JSXGraph.initBoard('JXG65b2edee-12d8-48a1-94b2-d6e79995de8c',
    6253          *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
    6254          *     var cu1 = board.create('functiongraph', ['3 * sin(x)', -3, 3], {
    6255          *         name: 'cu_1',
    6256          *         withLabel: true,
    6257          *         label: {
    6258          *             anchorX: 'middle',
    6259          *             anchorY: 'middle',
    6260          *             offset: [0, 0],
    6261          *             distance: 2,
    6262          *             position: '0.8fr right'
    6263          *         }
    6264          *     });
    6265          *
    6266          *     })();
    6267          *
    6268          * </script><pre>
    6269          *
    6270          * @example
    6271          * var A = board.create('point', [-1, 4]);
    6272          * var B = board.create('point', [-1, -4]);
    6273          * var C = board.create('point', [1, 1]);
    6274          * var cu2 = board.create('ellipse', [A, B, C], {
    6275          *     name: 'cu_2',
    6276          *     withLabel: true,
    6277          *     label: {
    6278          *         anchorX: 'middle',
    6279          *         anchorY: 'middle',
    6280          *         offset: [0, 0],
    6281          *         fontSize: 20,
    6282          *         distance: 1.5,
    6283          *         position: '75% right'
    6284          *     }
    6285          * });
    6286          *
    6287          * </pre><div id="JXG9c3b2213-1b5a-4cb8-b547-a8d179b851f2" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6288          * <script type="text/javascript">
    6289          *     (function() {
    6290          *         var board = JXG.JSXGraph.initBoard('JXG9c3b2213-1b5a-4cb8-b547-a8d179b851f2',
    6291          *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
    6292          *     var A = board.create('point', [-1, 4]);
    6293          *     var B = board.create('point', [-1, -4]);
    6294          *     var C = board.create('point', [1, 1]);
    6295          *     var cu2 = board.create('ellipse', [A, B, C], {
    6296          *         name: 'cu_2',
    6297          *         withLabel: true,
    6298          *         label: {
    6299          *             anchorX: 'middle',
    6300          *             anchorY: 'middle',
    6301          *             offset: [0, 0],
    6302          *             fontSize: 20,
    6303          *             distance: 1.5,
    6304          *             position: '75% right'
    6305          *         }
    6306          *     });
    6307          *
    6308          *     })();
    6309          *
    6310          * </script><pre>
    6311          *
    6312          *
    6313          * @name Label#position
    6314          * @type String
    6315          * @default 'urt'
    6316          * @see Label#distance
    6317          * @see Label#offset
    6318          */
    6319         position: 'urt',
    6320
    6321         /**
    6322          * Distance of the label from a path element, like line, circle, curve.
    6323          * The true distance is this value multiplied by 0.5 times the size of the bounding box of the label text.
    6324          * That means, with a value of 1 the label will touch the path element.
    6325          * @name Label#distance
    6326          * @type Number
    6327          * @default 1.5
    6328          *
    6329          * @see Label#position
    6330          *
    6331          */
    6332         distance: 1.5,
    6333
    6334         /**
    6335          *  Label offset from label anchor.
    6336          *  The label anchor is determined by {@link Label#position}
    6337          *
    6338          * @name Label#offset
    6339          * @see Label#position
    6340          * @type Array
    6341          * @default [10,10]
    6342          */
    6343         offset: [10, 10],
    6344
    6345         /**
    6346          * Automatic position of label text. When called first, the positioning algorithm
    6347          * starts at the position defined by offset.
    6348          * The algorithm tries to find a position with the least number of
    6349          * overlappings with other elements, while retaining the distance
    6350          * to the anchor element.
    6351          *
    6352          * @name Label#autoPosition
    6353          * @see Label#offset
    6354          * @type Boolean
    6355          * @default false
    6356          *
    6357          * @example
    6358          * 	var p1 = board.create('point', [-2, 1], {id: 'A'});
    6359          * 	var p2 = board.create('point', [-0.85, 1], {
    6360          *      name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}
    6361          *  });
    6362          * 	var p3 = board.create('point', [-1, 1.2], {
    6363          *      name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}
    6364          *  });
    6365          *  var c = board.create('circle', [p1, p2]);
    6366          * 	var l = board.create('line', [p1, p2]);
    6367          *
    6368          * </pre><div id="JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6369          * <script type="text/javascript">
    6370          *     (function() {
    6371          *         var board = JXG.JSXGraph.initBoard('JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2',
    6372          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    6373          *     	var p1 = board.create('point', [-2, 1], {id: 'A'});
    6374          *     	var p2 = board.create('point', [-0.85, 1], {name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}});
    6375          *     	var p3 = board.create('point', [-1, 1.2], {name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}});
    6376          *      var c = board.create('circle', [p1, p2]);
    6377          *     	var l = board.create('line', [p1, p2]);
    6378          *
    6379          *     })();
    6380          *
    6381          * </script><pre>
    6382          *
    6383          *
    6384          */
    6385         autoPosition: false,
    6386
    6387         /**
    6388          * The auto position algorithm tries to put a label to a conflict-free
    6389          * position around it's anchor element. For this, the algorithm tests 12 positions
    6390          * around the anchor element starting at a distance from the anchor
    6391          * defined here (in pixel).
    6392          *
    6393          * @name Label#autoPositionMinDistance
    6394          * @see Label#autoPosition
    6395          * @see Label#autoPositionMaxDistance
    6396          * @type Number
    6397          * @default 12
    6398          *
    6399          */
    6400         autoPositionMinDistance: 12,
    6401
    6402         /**
    6403          * The auto position algorithm tries to put a label to a conflict-free
    6404          * position around it's anchor element. For this, the algorithm tests 12 positions
    6405          * around the anchor element up to a distance from the anchor
    6406          * defined here (in pixel).
    6407          *
    6408          * @name Label#autoPositionMaxDistance
    6409          * @see Label#autoPosition
    6410          * @see Label#autoPositionMinDistance
    6411          * @type Number
    6412          * @default 28
    6413          *
    6414          */
    6415         autoPositionMaxDistance: 28,
    6416
    6417         /**
    6418          * List of object ids which should be ignored on setting automatic position of label text.
    6419          *
    6420          * @name Label#autoPositionWhitelist
    6421          * @see Label#autoPosition
    6422          * @type Array
    6423          * @default []
    6424          */
    6425         autoPositionWhitelist: []
    6426
    6427         /**#@-*/
    6428     },
    6429
    6430     /* special legend options */
    6431     legend: {
    6432         /**#@+
    6433          * @visprop
    6434          */
    6435
    6436         /**
    6437          * Default style of a legend element. The only possible value is 'vertical'.
    6438          * @name Legend#style
    6439          * @type String
    6440          * @default 'vertical'
    6441          */
    6442         style: 'vertical',
    6443
    6444         /**
    6445          * Label names of a legend element.
    6446          * @name Legend#labels
    6447          * @type Array
    6448          * @default "['1', '2', '3', '4', '5', '6', '7', '8']"
    6449          */
    6450         labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
    6451
    6452         /**
    6453          * (Circular) array of label colors.
    6454          * @name Legend#colors
    6455          * @type Array
    6456          * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']"
    6457          */
    6458         colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
    6459
    6460         /**
    6461          * Length of line in one legend entry
    6462          * @name Legend#lineLength
    6463          * @type Number
    6464          * @default 1
    6465          *
    6466          */
    6467         lineLength: 1,
    6468
    6469         /**
    6470          * (Circular) array of opacity for legend line stroke color for one legend entry.
    6471          * @name Legend#strokeOpacity
    6472          * @type Array
    6473          * @default [1]
    6474          *
    6475          */
    6476         strokeOpacity: [1],
    6477
    6478         /**
    6479          * Height (in px) of one legend entry
    6480          * @name Legend#rowHeight
    6481          * @type Number
    6482          * @default 20
    6483          *
    6484          */
    6485         rowHeight: 20,
    6486
    6487         /**
    6488          * Height (in px) of one legend entry
    6489          * @name Legend#strokeWidth
    6490          * @type Number
    6491          * @default 5
    6492          *
    6493          */
    6494         strokeWidth: 5,
    6495
    6496         /**
    6497          * The element is fixed and can not be dragged around. The legend will even stay at its position on zoom and
    6498          * moveOrigin events.
    6499          * @name Legend#frozen
    6500          * @type Boolean
    6501          * @default false
    6502          * @see JXG.GeometryElement#frozen
    6503          *
    6504          */
    6505         frozen: false
    6506
    6507         /**#@-*/
    6508     },
    6509
    6510     /* special line options */
    6511     line: {
    6512         /**#@+
    6513          * @visprop
    6514          */
    6515
    6516         /**
    6517          * Configure the arrow head at the position of its first point or the corresponding
    6518          * intersection with the canvas border
    6519          *
    6520          * The attribute firstArrow can be a Boolean or an object with the following sub-attributes:
    6521          * <pre>
    6522          * {
    6523          *      type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
    6524          *      size: 6, // size of the arrow head. Default value is 6.
    6525          *               // This value is multiplied with the strokeWidth of the line
    6526          *               // Exception: for type=7 size is ignored
    6527          *      highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value
    6528          * }
    6529          * </pre>
    6530          * type=7 is the default for curves if firstArrow: true
    6531          * <p>
    6532          * An arrow head can be turned off with line.setAttribute({firstArrow: false}).
    6533          *
    6534          * @example
    6535          *     board.options.line.lastArrow = false;
    6536          *     board.options.line.firstArrow = {size: 10, highlightSize: 10};
    6537          *     board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
    6538          *     board.options.line.strokeWidth = 4;
    6539          *     board.options.line.highlightStrokeWidth = 4;
    6540          *
    6541          *     board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
    6542          *     board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
    6543          *     board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
    6544          *     board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
    6545          *     board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
    6546          *     board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
    6547          *     board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
    6548          *
    6549          * </pre><div id="JXGc94a93da-c942-4204-8bb6-b39726cbb09b" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6550          * <script type="text/javascript">
    6551          *     (function() {
    6552          *         var board = JXG.JSXGraph.initBoard('JXGc94a93da-c942-4204-8bb6-b39726cbb09b',
    6553          *             {boundingbox: [-6, 6, 4,-4], axis: false, showcopyright: false, shownavigation: false});
    6554          *         board.options.line.lastArrow = false;
    6555          *         board.options.line.firstArrow = {size: 10, highlightSize: 10};
    6556          *         board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
    6557          *         board.options.line.strokeWidth = 4;
    6558          *         board.options.line.highlightStrokeWidth = 4;
    6559          *
    6560          *         board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
    6561          *         board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
    6562          *         board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
    6563          *         board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
    6564          *         board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
    6565          *         board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
    6566          *         board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
    6567          *
    6568          *     })();
    6569          *
    6570          * </script><pre>
    6571          *
    6572          * @name Line#firstArrow
    6573          * @see Line#lastArrow
    6574          * @see Line#touchFirstPoint
    6575          * @type Boolean | Object
    6576          * @default false
    6577          */
    6578         firstArrow: false,
    6579
    6580         /**
    6581          * Configure the arrow head at the position of its second point or the corresponding
    6582          * intersection with the canvas border.
    6583          *
    6584          * The attribute lastArrow can be a Boolean or an object with the following sub-attributes:
    6585          * <pre>
    6586          * {
    6587          *      type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
    6588          *      size: 6, // size of the arrow head. Default value is 6.
    6589          *               // This value is multiplied with the strokeWidth of the line.
    6590          *               // Exception: for type=7 size is ignored
    6591          *      highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6.
    6592          * }
    6593          * </pre>
    6594          * type=7 is the default for curves if lastArrow: true
    6595          * <p>
    6596          * An arrow head can be turned off with line.setAttribute({lastArrow: false}).
    6597          *
    6598          * @example
    6599          *     var p1 = board.create('point', [-5, 2], {size:1});
    6600          *     var p2 = board.create('point', [5, 2], {size:10});
    6601          *     var li = board.create('segment', ['A','B'],
    6602          *         {name:'seg',
    6603          *          strokeColor:'#000000',
    6604          *          strokeWidth:1,
    6605          *          highlightStrokeWidth: 5,
    6606          *          lastArrow: {type: 2, size: 8, highlightSize: 6},
    6607          *          touchLastPoint: true,
    6608          *          firstArrow: {type: 3, size: 8}
    6609          *         });
    6610          *
    6611          * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6612          * <script type="text/javascript">
    6613          *     (function() {
    6614          *         var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3',
    6615          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    6616          *         var p1 = board.create('point', [-5, 2], {size:1});
    6617          *         var p2 = board.create('point', [5, 2], {size:10});
    6618          *         var li = board.create('segment', ['A','B'],
    6619          *             {name:'seg',
    6620          *              strokeColor:'#000000',
    6621          *              strokeWidth:1,
    6622          *              highlightStrokeWidth: 5,
    6623          *              lastArrow: {type: 2, size: 8, highlightSize: 6},
    6624          *              touchLastPoint: true,
    6625          *              firstArrow: {type: 3, size: 8}
    6626          *             });
    6627          *     })();
    6628          *
    6629          * </script>
    6630          *
    6631          * @example
    6632          *     board.options.line.strokeWidth = 4;
    6633          *     board.options.line.highlightStrokeWidth = 4;
    6634          *     board.options.line.firstArrow = false;
    6635          *     board.options.line.lastArrow = {size: 10, highlightSize: 10};
    6636          *     board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
    6637          *
    6638          *     board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
    6639          *     board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
    6640          *     board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
    6641          *     board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
    6642          *     board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
    6643          *     board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
    6644          *     board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
    6645          *
    6646          * </pre><div id="JXGca206b1c-e319-4899-8b90-778f53fd926d" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6647          * <script type="text/javascript">
    6648          *     (function() {
    6649          *         var board = JXG.JSXGraph.initBoard('JXGca206b1c-e319-4899-8b90-778f53fd926d',
    6650          *             {boundingbox: [-6, 6, 6,-4], axis: false, showcopyright: false, shownavigation: false});
    6651          *         board.options.line.strokeWidth = 4;
    6652          *         board.options.line.highlightStrokeWidth = 4;
    6653          *         board.options.line.firstArrow = false;
    6654          *         board.options.line.lastArrow = {size: 10, highlightSize: 10};
    6655          *         board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
    6656          *
    6657          *         board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
    6658          *         board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
    6659          *         board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
    6660          *         board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
    6661          *         board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
    6662          *         board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
    6663          *         board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
    6664          *     })();
    6665          *
    6666          * </script><pre>
    6667          *
    6668          * @name Line#lastArrow
    6669          * @see Line#firstArrow
    6670          * @see Line#touchLastPoint
    6671          * @type Boolean | Object
    6672          * @default false
    6673          */
    6674         lastArrow: false,
    6675
    6676         /**
    6677          * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line
    6678          * ends exactly at the border, if negative there is a margin to the inside, if positive the line
    6679          * ends outside of the canvas (which is invisible).
    6680          *
    6681          * @name Line#margin
    6682          * @type Number
    6683          * @default 0
    6684          */
    6685         margin: 0,
    6686
    6687         /**
    6688          * If true, line stretches infinitely in direction of its first point.
    6689          * Otherwise it ends at point1.
    6690          *
    6691          * @name Line#straightFirst
    6692          * @see Line#straightLast
    6693          * @type Boolean
    6694          * @default true
    6695          */
    6696         straightFirst: true,
    6697
    6698         /**
    6699          * If true, line stretches infinitely in direction of its second point.
    6700          * Otherwise it ends at point2.
    6701          *
    6702          * @name Line#straightLast
    6703          * @see Line#straightFirst
    6704          * @type Boolean
    6705          * @default true
    6706          */
    6707         straightLast: true,
    6708
    6709         fillColor: 'none',           // Important for VML on IE
    6710         highlightFillColor: 'none',  // Important for VML on IE
    6711         strokeColor: Color.palette.blue,
    6712         highlightStrokeColor: '#c3d9ff',
    6713         withTicks: false,
    6714
    6715         /**
    6716          * Attributes for first defining point of the line.
    6717          *
    6718          * @type Point
    6719          * @name Line#point1
    6720          */
    6721         point1: {                  // Default values for point1 if created by line
    6722             fillColor: Color.palette.red,
    6723             strokeColor: Color.palette.red,
    6724             highlightFillColor: '#c3d9ff',
    6725             highlightStrokeColor: '#c3d9ff',
    6726             layer: 9,
    6727
    6728             visible: false,
    6729             withLabel: false,
    6730             fixed: false,
    6731             name: ''
    6732         },
    6733
    6734         /**
    6735          * Attributes for second defining point of the line.
    6736          *
    6737          * @type Point
    6738          * @name Line#point2
    6739          */
    6740         point2: {                  // Default values for point2 if created by line
    6741             fillColor: Color.palette.red,
    6742             strokeColor: Color.palette.red,
    6743             highlightFillColor: '#c3d9ff',
    6744             highlightStrokeColor: '#c3d9ff',
    6745             layer: 9,
    6746
    6747             visible: false,
    6748             withLabel: false,
    6749             fixed: false,
    6750             name: ''
    6751         },
    6752
    6753         /**
    6754          * Attributes for ticks of the line.
    6755          *
    6756          * @name Line#ticks
    6757          * @type Object
    6758          * @see Ticks
    6759          */
    6760         ticks: {
    6761             drawLabels: true,
    6762             label: {
    6763                 offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts
    6764             },
    6765             drawZero: false,
    6766             insertTicks: false,
    6767             ticksDistance: 1,
    6768             minTicksDistance: 50,
    6769             minorHeight: 4,          // if <0: full width and height
    6770             majorHeight: -1,         // if <0: full width and height
    6771             minorTicks: 4,
    6772             strokeOpacity: 0.3,
    6773             visible: 'inherit'
    6774         },
    6775
    6776         /**
    6777          * Attributes for the line label.
    6778          *
    6779          * @type Object
    6780          * @name Line#label
    6781          * @see Label
    6782          */
    6783         label: {
    6784             position: 'llft'
    6785         },
    6786
    6787         /**
    6788          * If set to true, the point will snap to a grid defined by
    6789          * {@link Point#snapSizeX} and {@link Point#snapSizeY}.
    6790          *
    6791          * @see Point#snapSizeX
    6792          * @see Point#snapSizeY
    6793          * @type Boolean
    6794          * @name Line#snapToGrid
    6795          * @default false
    6796          */
    6797         snapToGrid: false,
    6798
    6799         /**
    6800          * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
    6801          * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    6802          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    6803          * of the default ticks of the default x axes of the board.
    6804          *
    6805          * @see Point#snapToGrid
    6806          * @see Point#snapSizeY
    6807          * @see JXG.Board#defaultAxes
    6808          * @type Number
    6809          * @name Line#snapSizeX
    6810          * @default 1
    6811          */
    6812         snapSizeX: 1,
    6813
    6814         /**
    6815          * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
    6816          * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    6817          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    6818          * of the default ticks of the default y axes of the board.
    6819          *
    6820          * @see Point#snapToGrid
    6821          * @see Point#snapSizeX
    6822          * @see JXG.Board#defaultAxes
    6823          * @type Number
    6824          * @name Line#snapSizeY
    6825          * @default 1
    6826          */
    6827         snapSizeY: 1,
    6828
    6829         /**
    6830          * If set to true, {@link Line#firstArrow} is set to true and the point is visible,
    6831          * the arrow head will just touch the circle line of the start point of the line.
    6832          *
    6833          * @see Line#firstArrow
    6834          * @type Boolean
    6835          * @name Line#touchFirstPoint
    6836          * @default false
    6837          */
    6838         touchFirstPoint: false,
    6839
    6840         /**
    6841          * If set to true, {@link Line#lastArrow} is set to true and the point is visible,
    6842          * the arrow head will just touch the circle line of the start point of the line.
    6843          * @see Line#firstArrow
    6844          * @type Boolean
    6845          * @name Line#touchLastPoint
    6846          * @default false
    6847          */
    6848         touchLastPoint: false
    6849
    6850         /**#@-*/
    6851     },
    6852
    6853     /* special options for locus curves */
    6854     locus: {
    6855         /**#@+
    6856          * @visprop
    6857          */
    6858
    6859         translateToOrigin: false,
    6860         translateTo10: false,
    6861         stretch: false,
    6862         toOrigin: null,
    6863         to10: null
    6864         /**#@-*/
    6865     },
    6866
    6867     /* special measurement options */
    6868     measurement: {
    6869         /**#@+
    6870          * @visprop
    6871          */
    6872
    6873         /**
    6874          * This specifies the unit of measurement in dimension 1 (e.g. length).
    6875          * A power is automatically added to the string.
    6876          * If you want to use different units for each dimension, see {@link Measurement#units}.
    6877          *
    6878          * @example
    6879          * var p1 = board.create("point", [0,1]),
    6880          *     p2 = board.create("point", [3,1]),
    6881          *     c = board.create("circle", [p1, p2]);
    6882          *
    6883          * board.create("measurement", [-2, -3, ["Perimeter", c]], {
    6884          *     baseUnit: " m"
    6885          * });
    6886          * board.create("measurement", [1, -3, ["Area", c]], {
    6887          *     baseUnit: " m"
    6888          * });
    6889          *
    6890          * </pre><div id="JXG6cb6a7e7-553b-4f2a-af99-ddd78b7ba118" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6891          * <script type="text/javascript">
    6892          *     (function() {
    6893          *         var board = JXG.JSXGraph.initBoard('JXG6cb6a7e7-553b-4f2a-af99-ddd78b7ba118',
    6894          *             {boundingbox: [-8, 8, 8,-8], axis: false, grid: false, showcopyright: false, shownavigation: false});
    6895          *
    6896          *     var p1 = board.create("point", [0,1]),
    6897          *         p2 = board.create("point", [3,1]),
    6898          *         c = board.create("circle", [p1, p2]);
    6899          *
    6900          *     board.create("measurement", [-2, -3, ["Perimeter", c]], {
    6901          *         baseUnit: " m"
    6902          *     });
    6903          *     board.create("measurement", [1, -3, ["Area", c]], {
    6904          *         baseUnit: " m"
    6905          *     });
    6906          *
    6907          *     })();
    6908          * </script><pre>
    6909          *
    6910          * @see Measurement#units
    6911          * @name Measurement#baseUnit
    6912          * @type String
    6913          * @default ''
    6914          */
    6915         baseUnit: '',
    6916
    6917         /**
    6918          * This attribute expects an object that has the dimension numbers as keys (as integer or in the form of "dimxx")
    6919          * and assigns a string to each dimension.
    6920          * If a dimension has no specification, {@link Measurement#baseUnit} is used.
    6921          *
    6922          * @example
    6923          * var p1 = board.create("point", [0,1]),
    6924          *     p2 = board.create("point", [3,1]),
    6925          *     c = board.create("circle", [p1, p2]);
    6926          *
    6927          * board.create("measurement", [-3, -3, ["Perimeter", c]], {
    6928          *     baseUnit: " m",
    6929          *     units: {
    6930          *          1: " length unit",
    6931          *       2: " area unit"
    6932          *     },
    6933          * });
    6934          * board.create("measurement", [1, -3, ["Area", c]], {
    6935          *     baseUnit: " m",
    6936          *     units: {
    6937          *          dim1: " length unit",
    6938          *       dim2: " area unit"
    6939          *     },
    6940          * });
    6941          *
    6942          * </pre><div id="JXGe06456d5-255e-459b-8c8e-4d7d2af7efb8" class="jxgbox" style="width: 300px; height: 300px;"></div>
    6943          * <script type="text/javascript">
    6944          *     (function() {
    6945          *         var board = JXG.JSXGraph.initBoard('JXGe06456d5-255e-459b-8c8e-4d7d2af7efb8',
    6946          *             {boundingbox: [-8, 8, 8,-8], axis: false, grid: false, showcopyright: false, shownavigation: false});
    6947          *     var p1 = board.create("point", [0,1]),
    6948          *         p2 = board.create("point", [3,1]),
    6949          *         c = board.create("circle", [p1, p2]);
    6950          *
    6951          *     board.create("measurement", [-3, -3, ["Perimeter", c]], {
    6952          *         baseUnit: " m",
    6953          *         units: {
    6954          *          1: " length unit",
    6955          *           2: " area unit"
    6956          *         },
    6957          *     });
    6958          *     board.create("measurement", [1, -3, ["Area", c]], {
    6959          *         baseUnit: " m",
    6960          *         units: {
    6961          *          dim1: " length unit",
    6962          *           dim2: " area unit"
    6963          *         },
    6964          *     });
    6965          *
    6966          *     })();
    6967          * </script><pre>
    6968          *
    6969          * @see Measurement#baseUnit
    6970          * @name Measurement#units
    6971          * @type Object
    6972          * @default {}
    6973          */
    6974         units: {},
    6975
    6976         /**
    6977          * Determines whether a prefix is displayed before the measurement value and unit.
    6978          *
    6979          * @see Measurement#prefix
    6980          * @name Measurement#showPrefix
    6981          * @type Boolean
    6982          * @default true
    6983          */
    6984         showPrefix: true,
    6985
    6986         /**
    6987          * Determines whether a suffix is displayed after the measurement value and unit.
    6988          *
    6989          * @see Measurement#suffix
    6990          * @name Measurement#showSuffix
    6991          * @type Boolean
    6992          * @default true
    6993          */
    6994         showSuffix: true,
    6995
    6996         /**
    6997          * String that is displayed before the measurement and its unit.
    6998          *
    6999          * @see Measurement#showPrefix
    7000          * @name Measurement#prefix
    7001          * @type String
    7002          * @default ''
    7003          */
    7004         prefix: '',
    7005
    7006         /**
    7007          * String that is displayed after the measurement and its unit.
    7008          *
    7009          * @see Measurement#showSuffix
    7010          * @name Measurement#suffix
    7011          * @type String
    7012          * @default ''
    7013          */
    7014         suffix: '',
    7015
    7016         /**
    7017          * Dimension of the measured data. This measurement can only be combined with a measurement of a suitable dimension.
    7018          * Overwrites the dimension returned by the Dimension() method.
    7019          * Normally, the default value null is used here to automatically determine the dimension.
    7020          *
    7021          * However, if the coordinates or a direction vector are measured, the value is usually returned as an array.
    7022          * To tell the measurement that the function {@link Measurement#formatCoords} or {@link Measurement#formatDirection} should be used
    7023          * to display the array properly, 'coords' or 'direction' must be specified here.
    7024          *
    7025          * @see Measurement#formatCoords
    7026          * @see Measurement#formatDirection
    7027          * @name Measurement#dim
    7028          * @type Number|'coords'|'direction'
    7029          * @default null
    7030          */
    7031         dim: null,
    7032
    7033         /**
    7034          * Function to format coordinates. Does only have an effect, if {@link Measurement#dim} is set to 'coords'.
    7035          *
    7036          * @example
    7037          * var p = board.create("point", [-2, 0]);
    7038          *
    7039          * board.create("measurement", [0, -3, ["Coords", p]], {
    7040          *     dim: 'coords',
    7041          *     formatCoords: function (_,x,y,z) {
    7042          *         if (parseFloat(z) !== 1)
    7043          *             return 'Infinit coords';
    7044          *         else
    7045          *             return '(' + x + ' | ' + y + ')';
    7046          *     }
    7047          * });
    7048          *
    7049          * </pre><div id="JXGa0606ad6-971b-47d4-9a72-ca7df65890f5" class="jxgbox" style="width: 300px; height: 300px;"></div>
    7050          * <script type="text/javascript">
    7051          *     (function() {
    7052          *         var board = JXG.JSXGraph.initBoard('JXGa0606ad6-971b-47d4-9a72-ca7df65890f5',
    7053          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    7054          *     var p = board.create("point", [-2, 0]);
    7055          *
    7056          *     board.create("measurement", [0, -3, ["Coords", p]], {
    7057          *         dim: 'coords',
    7058          *         formatCoords: function (_,x,y,z) {
    7059          *             if (parseFloat(z) !== 1)
    7060          *                 return 'Infinit coords';
    7061          *             else
    7062          *                 return '(' + x + ' | ' + y + ')';
    7063          *         }
    7064          *     });
    7065          *     })();
    7066          * </script><pre>
    7067          *
    7068          * @see Measurement#dim
    7069          * @name Measurement#formatCoords
    7070          * @type Function
    7071          * @param {Measurement} self Pointer to the measurement object itself
    7072          * @param {Number} x c-coordinate
    7073          * @param {Number} y c-coordinate
    7074          * @param {Number} z c-coordinate
    7075          * @returns String
    7076          */
    7077         formatCoords: function (self, x, y, z) {
    7078             if (parseFloat(z) !== 1)
    7079                 return 'Infinit coords';
    7080             else
    7081                 return '(' + x + ', ' + y + ')';
    7082         },
    7083
    7084         /**
    7085          * Function to format direction vector. Does only have an effect, if {@link Measurement#dim} is set to 'direction'.
    7086          *
    7087          * @example
    7088          * var p1 = board.create("point", [0,1]),
    7089          *     p2 = board.create("point", [3,1]),
    7090          *     s = board.create("segment", [p1, p2]);
    7091          *
    7092          * board.create("measurement", [0, -2, ["Direction", s]], {
    7093          *     dim: 'direction',
    7094          *     formatDirection: function (self,x,y) {
    7095          *        return '\\[\\frac{' + x + '}{' + y + '} = ' +
    7096          *            (!isFinite(x/y) ? '\\infty' : JXG.toFixed(x/y, self.visProp.digits)) +
    7097          *            '\\]';
    7098          *     },
    7099          *     useMathJax: true
    7100          * });
    7101          *
    7102          * </pre><div id="JXG57435de0-16f2-42be-94d8-3d2b31caefcd" class="jxgbox" style="width: 300px; height: 300px;"></div>
    7103          * <script type="text/javascript">
    7104          *     (function() {
    7105          *         var board = JXG.JSXGraph.initBoard('JXG57435de0-16f2-42be-94d8-3d2b31caefcd',
    7106          *             {boundingbox: [-8, 8, 8,-8], axis: false, grid: false, showcopyright: false, shownavigation: false});
    7107          *     var p1 = board.create("point", [0,1]),
    7108          *         p2 = board.create("point", [3,1]),
    7109          *         s = board.create("segment", [p1, p2]);
    7110          *
    7111          *     board.create("measurement", [0, -2, ["Direction", s]], {
    7112          *         dim: 'direction',
    7113          *         formatDirection: function (self,x,y) {
    7114          *            return '\\[\\frac{' + x + '}{' + y + '} = ' +
    7115          *                (!isFinite(x/y) ? '\\infty' : JXG.toFixed(x/y, self.visProp.digits)) +
    7116          *                '\\]';
    7117          *         },
    7118          *         useMathJax: true
    7119          *     });
    7120          *
    7121          *     })();
    7122          *
    7123          * </script><pre>
    7124          *
    7125          * @name Measurement#formatDirection
    7126          * @type Function
    7127          * @param {Measurement} self Pointer to the measurement object itself
    7128          * @param {Number} x c-coordinate
    7129          * @param {Number} y c-coordinate
    7130          * @returns String
    7131          */
    7132         formatDirection: function (self, x, y) {
    7133             return '(' + x + ', ' + y + ')';
    7134         }
    7135
    7136         /**#@-*/
    7137     },
    7138
    7139     /* special metapost spline options */
    7140     metapostspline: {
    7141         /**#@+
    7142          * @visprop
    7143          */
    7144
    7145         /**
    7146           * Controls if the data points of the cardinal spline when given as
    7147           * arrays should be converted into {@link JXG.Points}.
    7148           *
    7149           * @name createPoints
    7150           * @memberOf Metapostspline.prototype
    7151           *
    7152           * @see Metapostspline#points
    7153           *
    7154           * @type Boolean
    7155           * @default true
    7156           */
    7157         createPoints: true,
    7158
    7159         /**
    7160          * If set to true, the supplied coordinates are interpreted as
    7161          * [[x_0, y_0], [x_1, y_1], p, ...].
    7162          * Otherwise, if the data consists of two arrays of equal length,
    7163          * it is interpreted as
    7164          * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]]
    7165          *
    7166          * @name isArrayOfCoordinates
    7167          * @memberOf Metapostspline.prototype
    7168          * @type Boolean
    7169          * @default true
    7170          */
    7171         isArrayOfCoordinates: true,
    7172
    7173         /**
    7174          * Attributes for the points generated by Metapost spline in cases
    7175          * {@link createPoints} is set to true
    7176          *
    7177          * @name points
    7178          * @memberOf Metapostspline.prototype
    7179          *
    7180          * @see Metapostspline#createPoints
    7181          * @type Object
    7182          */
    7183         points: {
    7184             strokeOpacity: 0.5,
    7185             fillOpacity: 0.5,
    7186             highlightStrokeOpacity: 1.0,
    7187             highlightFillOpacity: 1.0,
    7188             withLabel: false,
    7189             name: '',
    7190             fixed: false
    7191         }
    7192
    7193         /**#@-*/
    7194     },
    7195
    7196     /* special mirrorelement options */
    7197     mirrorelement: {
    7198         /**#@+
    7199          * @visprop
    7200          */
    7201
    7202         fixed: true,
    7203
    7204         /**
    7205          * Attributes of mirror point, i.e. the point along which the element is mirrored.
    7206          *
    7207          * @type Point
    7208          * @name mirrorelement#point
    7209          */
    7210         point: {},
    7211
    7212         /**
    7213          * Attributes of circle center, i.e. the center of the circle,
    7214          * if a circle is the mirror element and the transformation type is 'Euclidean'
    7215          *
    7216          * @type Point
    7217          * @name mirrorelement#center
    7218          */
    7219         center: {},
    7220
    7221         /**
    7222          * Type of transformation. Possible values are 'Euclidean', 'projective'.
    7223          *
    7224          * If the value is 'Euclidean', the mirror element of a circle is again a circle,
    7225          * otherwise it is a conic section.
    7226          *
    7227          * @type String
    7228          * @name mirrorelement#type
    7229          * @default 'Euclidean'
    7230          */
    7231         type: 'Euclidean'
    7232
    7233         /**#@-*/
    7234     },
    7235
    7236     /* special nonreflexangle options */
    7237     nonreflexangle: {
    7238         /**#@+
    7239          * @visprop
    7240          */
    7241
    7242         /**#@-*/
    7243     },
    7244
    7245     // /* special options for Msector of 3 points */
    7246     // msector: {
    7247     //     strokeColor: '#000000', // Msector line
    7248     //     point: {               // Msector point
    7249     //         visible: false,
    7250     //         fixed: false,
    7251     //         withLabel: false,
    7252     //         name: ''
    7253     //     }
    7254     // },
    7255
    7256     /* special options for normal lines */
    7257     normal: {
    7258         /**#@+
    7259          * @visprop
    7260          */
    7261
    7262         strokeColor: '#000000', //  normal line
    7263
    7264         /**
    7265          * Attributes of helper point of normal.
    7266          *
    7267          * @type Point
    7268          * @name Normal#point
    7269          */
    7270         point: {
    7271             visible: false,
    7272             fixed: false,
    7273             withLabel: false,
    7274             name: ''
    7275         }
    7276         /**#@-*/
    7277     },
    7278
    7279     /* special options for orthogonal projection points */
    7280     orthogonalprojection: {
    7281         /**#@+
    7282          * @visprop
    7283          */
    7284         /**#@-*/
    7285     },
    7286
    7287     /* special otherintersection point options */
    7288     otherintersection: {
    7289         /**#@+
    7290          * @visprop
    7291          */
    7292
    7293         /**
    7294          * This flag sets the behavior of other intersection points of e.g.
    7295          * a circle and a segment. If true, the intersection is treated as intersection with a line. If false
    7296          * the intersection point exists if the segment intersects setwise.
    7297          *
    7298          * @name Otherintersection.alwaysIntersect
    7299          * @type Boolean
    7300          * @default true
    7301          */
    7302         alwaysIntersect: true,
    7303
    7304         /**
    7305          * Minimum distance (in user coordinates) for points to be defined as different.
    7306          * For implicit curves and other non approximate curves this number might have to be
    7307          * increased.
    7308          *
    7309          * @name Otherintersection.precision
    7310          * @type Number
    7311          * @default 0.001
    7312          */
    7313         precision: 0.001
    7314
    7315         /**#@-*/
    7316     },
    7317
    7318     /* special options for parallel lines */
    7319     parallel: {
    7320         /**#@+
    7321          * @visprop
    7322          */
    7323
    7324         strokeColor: '#000000', // Parallel line
    7325
    7326         /**
    7327          * Attributes of helper point of normal.
    7328          *
    7329          * @type Point
    7330          * @name Parallel#point
    7331          */
    7332         point: {
    7333             visible: false,
    7334             fixed: false,
    7335             withLabel: false,
    7336             name: ''
    7337         },
    7338
    7339         label: {
    7340             position: 'llft'
    7341         }
    7342         /**#@-*/
    7343     },
    7344
    7345     /* special parallelogram options */
    7346     parallelogram: {
    7347         parallelpoint: {
    7348             withLabel: false,
    7349             name: ''
    7350         }
    7351     },
    7352
    7353     /* special parallelpoint options */
    7354     parallelpoint: {
    7355     },
    7356
    7357     /* special perpendicular options */
    7358     perpendicular: {
    7359         /**#@+
    7360          * @visprop
    7361          */
    7362
    7363         strokeColor: '#000000', // Perpendicular line
    7364         straightFirst: true,
    7365         straightLast: true
    7366         /**#@-*/
    7367     },
    7368
    7369     /* special perpendicular options */
    7370     perpendicularsegment: {
    7371         /**#@+
    7372          * @visprop
    7373          */
    7374
    7375         strokeColor: '#000000', // Perpendicular segment
    7376         straightFirst: false,
    7377         straightLast: false,
    7378         point: {               // Perpendicular point
    7379             visible: false,
    7380             fixed: true,
    7381             withLabel: false,
    7382             name: ''
    7383         }
    7384         /**#@-*/
    7385     },
    7386
    7387     /* special point options */
    7388     point: {
    7389         /**#@+
    7390          * @visprop
    7391          */
    7392
    7393         withLabel: true,
    7394         label: {},
    7395
    7396         /**
    7397          * This attribute was used to determined the point layout. It was derived from GEONExT and was
    7398          * replaced by {@link Point#face} and {@link Point#size}.
    7399          *
    7400          * @name Point#style
    7401          *
    7402          * @see Point#face
    7403          * @see Point#size
    7404          * @type Number
    7405          * @default 5
    7406          * @deprecated
    7407          */
    7408         style: 5,
    7409
    7410         /**
    7411          * There are different point styles which differ in appearance.
    7412          * Posssible values are
    7413          * <table>
    7414          * <tr><th>Input</th><th>Output</th></tr>
    7415          * <tr><td>cross</td><td>x</td></tr>
    7416          * <tr><td>circle</td><td>o</td></tr>
    7417          * <tr><td>square, []</td><td>[]</td></tr>
    7418          * <tr><td>plus</td><td>+</td></tr>
    7419          * <tr><td>minus</td><td>-</td></tr>
    7420          * <tr><td>divide</td><td>|</td></tr>
    7421          * <tr><td>diamond</td><td><></td></tr>
    7422          * <tr><td>diamond2</td><td><> (bigger)</td></tr>
    7423          * <tr><td>triangleup</td><td>^, a, A</td></tr>
    7424          * <tr><td>triangledown</td><td>v</td></tr>
    7425          * <tr><td>triangleleft</td><td><</td></tr>
    7426          * <tr><td>triangleright</td><td>></td></tr>
    7427          * </table>
    7428          *
    7429          * @name Point#face
    7430          *
    7431          * @type String
    7432          * @see JXG.Point#setStyle
    7433          * @default circle
    7434          */
    7435         face: 'o',
    7436
    7437         /**
    7438          * Size of a point, either in pixel or user coordinates.
    7439          * Means radius resp. half the width of a point (depending on the face).
    7440          *
    7441          * @name Point#size
    7442          *
    7443          * @see Point#face
    7444          * @see JXG.Point#setStyle
    7445          * @see Point#sizeUnit
    7446          * @type Number
    7447          * @default 3
    7448          */
    7449         size: 3,
    7450
    7451         /**
    7452          * Unit for size.
    7453          * Possible values are 'screen' and 'user.
    7454          *
    7455          * @name Point#sizeUnit
    7456          *
    7457          * @see Point#size
    7458          * @type String
    7459          * @default 'screen'
    7460          */
    7461         sizeUnit: 'screen',
    7462
    7463         strokeWidth: 2,
    7464
    7465         transitionProperties: ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width', 'width', 'height', 'rx', 'ry'],
    7466         fillColor: Color.palette.red,
    7467         strokeColor: Color.palette.red,
    7468         highlightFillColor: '#c3d9ff',
    7469         highlightStrokeColor: '#c3d9ff',
    7470         // strokeOpacity: 1.0,
    7471         // fillOpacity: 1.0,
    7472         // highlightFillOpacity: 0.5,
    7473         // highlightStrokeOpacity: 0.5,
    7474
    7475         // fillColor: '#ff0000',
    7476         // highlightFillColor: '#eeeeee',
    7477         // strokeWidth: 2,
    7478         // strokeColor: '#ff0000',
    7479         // highlightStrokeColor: '#c3d9ff',
    7480
    7481         /**
    7482          * If true, the point size changes on zoom events.
    7483          *
    7484          * @type Boolean
    7485          * @name Point#zoom
    7486          * @default false
    7487          *
    7488          */
    7489         zoom: false,             // Change the point size on zoom
    7490
    7491         /**
    7492          * If true, the infobox is shown on mouse/pen over, if false not.
    7493          * If the value is 'inherit', the value of
    7494          * {@link JXG.Board#showInfobox} is taken.
    7495          *
    7496          * @name Point#showInfobox
    7497          * @see JXG.Board#showInfobox
    7498          * @type Boolean|String
    7499          * @description true | false | 'inherit'
    7500          * @default true
    7501          */
    7502         showInfobox: 'inherit',
    7503
    7504         /**
    7505          * Truncating rule for the digits in the infobox.
    7506          * <ul>
    7507          * <li>'auto': done automatically by JXG.autoDigits()
    7508          * <li>'none': no truncation
    7509          * <li>number: truncate after "number digits" with JXG.toFixed()
    7510          * </ul>
    7511          *
    7512          * @name Point#infoboxDigits
    7513          *
    7514          * @type String| Number
    7515          * @default 'auto'
    7516          * @see JXG#autoDigits
    7517          * @see JXG#toFixed
    7518          */
    7519         infoboxDigits: 'auto',
    7520
    7521         draft: false,
    7522
    7523         /**
    7524          * List of attractor elements. If the distance of the point is less than
    7525          * attractorDistance the point is made to glider of this element.
    7526          *
    7527          * @name Point#attractors
    7528          *
    7529          * @type Array
    7530          * @default empty
    7531          */
    7532         attractors: [],
    7533
    7534         /**
    7535          * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints.
    7536          * Possible values are 'screen' and 'user'.
    7537          *
    7538          * @name Point#attractorUnit
    7539          *
    7540          * @see Point#attractorDistance
    7541          * @see Point#snatchDistance
    7542          * @see Point#snapToPoints
    7543          * @see Point#attractors
    7544          * @type String
    7545          * @default 'user'
    7546          */
    7547         attractorUnit: 'user',    // 'screen', 'user'
    7548
    7549         /**
    7550          * If the distance of the point to one of its attractors is less
    7551          * than this number the point will be a glider on this
    7552          * attracting element.
    7553          * If set to zero nothing happens.
    7554          *
    7555          * @name Point#attractorDistance
    7556          *
    7557          * @type Number
    7558          * @default 0.0
    7559          */
    7560         attractorDistance: 0.0,
    7561
    7562         /**
    7563          * If the distance of the point to one of its attractors is at least
    7564          * this number the point will be released from being a glider on the
    7565          * attracting element.
    7566          * If set to zero nothing happens.
    7567          *
    7568          * @name Point#snatchDistance
    7569          *
    7570          * @type Number
    7571          * @default 0.0
    7572          */
    7573         snatchDistance: 0.0,
    7574
    7575         /**
    7576          * If set to true, the point will snap to a grid of integer multiples of
    7577          * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates).
    7578          * <p>
    7579          * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
    7580          * (given in user coordinates, not pixels) or are the intersection points
    7581          * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
    7582          *
    7583          * @name Point#snapToGrid
    7584          *
    7585          * @see Point#snapSizeX
    7586          * @see Point#snapSizeY
    7587          * @type Boolean
    7588          * @default false
    7589          */
    7590         snapToGrid: false,
    7591
    7592         /**
    7593          * If set to true, the point will only snap to (possibly invisibly) grid points
    7594          * when within {@link Point#attractorDistance} of such a grid point.
    7595          * <p>
    7596          * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
    7597          * (given in user coordinates, not pixels) or are the intersection points
    7598          * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
    7599          *
    7600          * @name Point#attractToGrid
    7601          *
    7602          * @see Point#attractorDistance
    7603          * @see Point#attractorUnit
    7604          * @see Point#snapToGrid
    7605          * @see Point#snapSizeX
    7606          * @see Point#snapSizeY
    7607          * @type Boolean
    7608          * @default false
    7609          *
    7610          * @example
    7611          * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
    7612          *
    7613          * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div>
    7614          * <script type="text/javascript">
    7615          *     (function() {
    7616          *         var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6',
    7617          *             {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false});
    7618          *     board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
    7619          *
    7620          *     })();
    7621          *
    7622          * </script><pre>
    7623          *
    7624          */
    7625         attractToGrid: false,
    7626
    7627         /**
    7628          * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
    7629          * It is given in user coordinates, not in pixels.
    7630          * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    7631          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    7632          * of the default ticks of the default x axes of the board.
    7633          *
    7634          * @name Point#snapSizeX
    7635          *
    7636          * @see Point#snapToGrid
    7637          * @see Point#snapSizeY
    7638          * @see JXG.Board#defaultAxes
    7639          * @type Number
    7640          * @default 1
    7641          */
    7642         snapSizeX: 1,
    7643
    7644         /**
    7645          * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
    7646          * It is given in user coordinates, not in pixels.
    7647          * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    7648          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    7649          * of the default ticks of the default y axes of the board.
    7650          *
    7651          * @name Point#snapSizeY
    7652          *
    7653          * @see Point#snapToGrid
    7654          * @see Point#snapSizeX
    7655          * @see JXG.Board#defaultAxes
    7656          * @type Number
    7657          * @default 1
    7658          */
    7659         snapSizeY: 1,
    7660
    7661         /**
    7662          * If set to true, the point will snap to the nearest point in distance of
    7663          * {@link Point#attractorDistance}.
    7664          *
    7665          * @name Point#snapToPoints
    7666          *
    7667          * @see Point#attractorDistance
    7668          * @type Boolean
    7669          * @default false
    7670          */
    7671         snapToPoints: false,
    7672
    7673         /**
    7674          * List of elements which are ignored by snapToPoints.
    7675          * @name Point#ignoredSnapToPoints
    7676          *
    7677          * @type Array
    7678          * @default empty
    7679          */
    7680         ignoredSnapToPoints: []
    7681
    7682         /**#@-*/
    7683     },
    7684
    7685     /* special polygon options */
    7686     polygon: {
    7687         /**#@+
    7688          * @visprop
    7689          */
    7690
    7691         /**
    7692          * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
    7693          *
    7694          * @see JXG.GeometryElement#hasPoint
    7695          * @name Polygon#hasInnerPoints
    7696          * @type Boolean
    7697          * @default false
    7698          */
    7699         hasInnerPoints: false,
    7700
    7701         fillColor: Color.palette.yellow,
    7702         highlightFillColor: Color.palette.yellow,
    7703         // fillColor: '#00ff00',
    7704         // highlightFillColor: '#00ff00',
    7705         fillOpacity: 0.3,
    7706         highlightFillOpacity: 0.2,
    7707
    7708         /**
    7709          * Is the polygon bordered by lines?
    7710          *
    7711          * @type Boolean
    7712          * @name Polygon#withLines
    7713          * @default true
    7714          */
    7715         withLines: true,
    7716
    7717         /**
    7718          * Attributes for the polygon border lines.
    7719          *
    7720          * @type Line
    7721          * @name Polygon#borders
    7722          */
    7723         borders: {
    7724             withLabel: false,
    7725             strokeWidth: 1,
    7726             highlightStrokeWidth: 1,
    7727             // Polygon layer + 1
    7728             layer: 5,
    7729             label: {
    7730                 position: 'top'
    7731             },
    7732             visible: 'inherit'
    7733         },
    7734
    7735         /**
    7736          * By default, the strokewidths of the borders of a polygon are not changed during highlighting (only strokeColor and strokeOpacity are changed
    7737          * to highlightStrokeColor, and highlightStrokeOpacity).
    7738          * However, strokewidth is changed to highlightStrokewidth if an individual border gets the focus.
    7739          * <p>
    7740          * With this attribute set to true, also the borders change strokeWidth if the polygon itself gets the focus.
    7741          *
    7742          * @type Boolean
    7743          * @name Polygon#highlightByStrokeWidth
    7744          * @default false
    7745          */
    7746         highlightByStrokeWidth: false,
    7747
    7748         /**
    7749          * Attributes for the polygon vertices.
    7750          *
    7751          * @type Point
    7752          * @name Polygon#vertices
    7753          */
    7754         vertices: {
    7755             layer: 9,
    7756             withLabel: false,
    7757             name: '',
    7758             strokeColor: Color.palette.red,
    7759             fillColor: Color.palette.red,
    7760             fixed: false,
    7761             visible: 'inherit'
    7762         },
    7763
    7764         /**
    7765          * Attributes for the polygon label.
    7766          *
    7767          * @type Label
    7768          * @name Polygon#label
    7769          */
    7770         label: {
    7771             offset: [0, 0]
    7772         }
    7773
    7774         /**#@-*/
    7775     },
    7776
    7777     /* special polygonal chain options
    7778     */
    7779     polygonalchain: {
    7780         /**#@+
    7781          * @visprop
    7782          */
    7783
    7784         fillColor: 'none',
    7785         highlightFillColor: 'none'
    7786
    7787         /**#@-*/
    7788     },
    7789
    7790     /* special prescribed angle options
    7791     * Not yet implemented. But angle.setAngle(val) is implemented.
    7792
    7793     */
    7794     prescribedangle: {
    7795         /**#@+
    7796          * @visprop
    7797          */
    7798
    7799         /**
    7800          * Attributes for the helper point of the prescribed angle.
    7801          *
    7802          * @type Point
    7803          * @name Prescribedangle#anglePoint
    7804          * @ignore
    7805          */
    7806         anglePoint: {
    7807             size: 2,
    7808             visible: false,
    7809             withLabel: false
    7810         }
    7811
    7812         /**#@-*/
    7813     },
    7814
    7815     /* special reflection options */
    7816     reflection: {
    7817         /**#@+
    7818          * @visprop
    7819          */
    7820
    7821         fixed: true,
    7822
    7823         /**
    7824          * Attributes of circle center, i.e. the center of the circle,
    7825          * if a circle is the mirror element and the transformation type is 'Euclidean'
    7826          *
    7827          * @type center
    7828          * @name Reflection#center
    7829          */
    7830         center: {},
    7831
    7832         /**
    7833          * Type of transformation. Possible values are 'Euclidean', 'projective'.
    7834          *
    7835          * If the value is 'Euclidean', the reflected element of a circle is again a circle,
    7836          * otherwise it is a conic section.
    7837          *
    7838          * @type String
    7839          * @name Reflection#type
    7840          * @default 'Euclidean'
    7841          */
    7842         type: 'Euclidean'
    7843
    7844         /**#@-*/
    7845     },
    7846
    7847     /* special reflexangle options */
    7848     reflexangle: {
    7849         /**#@+
    7850          * @visprop
    7851          */
    7852
    7853         /**#@-*/
    7854     },
    7855
    7856     /* special regular polygon options */
    7857     regularpolygon: {
    7858         /**#@+
    7859          * @visprop
    7860          */
    7861
    7862         /**
    7863          * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
    7864          * @see JXG.GeometryElement#hasPoint
    7865          *
    7866          * @name RegularPolygon#hasInnerPoints
    7867          * @type Boolean
    7868          * @default false
    7869          */
    7870         hasInnerPoints: false,
    7871         fillColor: Color.palette.yellow,
    7872         highlightFillColor: Color.palette.yellow,
    7873         fillOpacity: 0.3,
    7874         highlightFillOpacity: 0.2,
    7875
    7876         /**
    7877          * Is the polygon bordered by lines?
    7878          *
    7879          * @type Boolean
    7880          * @name RegularPolygon#withLines
    7881          * @default true
    7882          */
    7883         withLines: true,
    7884
    7885         /**
    7886          * Attributes for the polygon border lines.
    7887          *
    7888          * @type Line
    7889          * @name RegularPolygon#borders
    7890          */
    7891         borders: {
    7892             withLabel: false,
    7893             strokeWidth: 1,
    7894             highlightStrokeWidth: 1,
    7895             // Polygon layer + 1
    7896             layer: 5,
    7897             label: {
    7898                 position: 'top'
    7899             }
    7900         },
    7901
    7902         /**
    7903          * Attributes for the polygon vertices.
    7904          *
    7905          * @type Point
    7906          * @name RegularPolygon#vertices
    7907          */
    7908         vertices: {
    7909             layer: 9,
    7910             withLabel: true,
    7911             strokeColor: Color.palette.red,
    7912             fillColor: Color.palette.red,
    7913             fixed: false
    7914         },
    7915
    7916         /**
    7917          * Attributes for the polygon label.
    7918          *
    7919          * @type Label
    7920          * @name RegularPolygon#label
    7921          */
    7922         label: {
    7923             offset: [0, 0]
    7924         }
    7925
    7926         /**#@-*/
    7927     },
    7928
    7929     /* special options for riemann sums */
    7930     riemannsum: {
    7931         /**#@+
    7932          * @visprop
    7933          */
    7934
    7935         withLabel: false,
    7936         fillOpacity: 0.3,
    7937         fillColor: Color.palette.yellow
    7938
    7939         /**#@-*/
    7940     },
    7941
    7942     /* special sector options */
    7943     sector: {
    7944         /**#@+
    7945          * @visprop
    7946          */
    7947
    7948         fillColor: Color.palette.yellow,
    7949         highlightFillColor: Color.palette.yellow,
    7950         // fillColor: '#00ff00',
    7951         // highlightFillColor: '#00ff00',
    7952
    7953         fillOpacity: 0.3,
    7954         highlightFillOpacity: 0.3,
    7955         highlightOnSector: false,
    7956         highlightStrokeWidth: 0,
    7957
    7958         /**
    7959          * If true, there is a fourth parent point, i.e. the parents are [center, p1, p2, p3].
    7960          * p1 is still the radius point, p2 the angle point. The sector will be that part of the
    7961          * the circle with center 'center' which starts at p1, ends at the ray between center
    7962          * and p2, and passes p3.
    7963          * <p>
    7964          * This attribute is immutable (by purpose).
    7965          * This attribute is necessary for circumCircleSectors
    7966          *
    7967          * @type Boolean
    7968          * @name Arc#useDirection
    7969          * @default false
    7970          * @private
    7971          */
    7972         useDirection: false,
    7973
    7974         /**
    7975          * Type of sector. Possible values are 'minor', 'major', and 'auto'.
    7976          *
    7977          * @type String
    7978          * @name Sector#selection
    7979          * @default 'auto'
    7980          */
    7981         selection: 'auto',
    7982
    7983         /**
    7984          * Attributes for sub-element arc. It is only available, if the sector is defined by three points.
    7985          *
    7986          * @type Arc
    7987          * @name Sector#arc
    7988          * @default '{visible:false}'
    7989          */
    7990         arc: {
    7991             visible: false,
    7992             fillColor: 'none',
    7993             withLabel: false,
    7994             name: '',
    7995
    7996             center: {
    7997                 visible: false,
    7998                 withLabel: false,
    7999                 name: ''
    8000             },
    8001
    8002             radiusPoint: {
    8003                 visible: false,
    8004                 withLabel: false,
    8005                 name: ''
    8006             },
    8007
    8008             anglePoint: {
    8009                 visible: false,
    8010                 withLabel: false,
    8011                 name: ''
    8012             }
    8013         },
    8014
    8015         /**
    8016          * Attributes for helper point radiuspoint in case it is provided by coordinates.
    8017          *
    8018          * @type Point
    8019          * @name Sector#radiusPoint
    8020          */
    8021         radiusPoint: {
    8022             visible: false,
    8023             withLabel: false
    8024         },
    8025
    8026         /**
    8027          * Attributes for helper point center in case it is provided by coordinates.
    8028          *
    8029          * @type Point
    8030          * @name Sector#center
    8031          */
    8032         center: {
    8033             visible: false,
    8034             withLabel: false
    8035         },
    8036
    8037         /**
    8038          * Attributes for helper point anglepoint in case it is provided by coordinates.
    8039          *
    8040          * @type Point
    8041          * @name Sector#anglePoint
    8042          */
    8043         anglePoint: {
    8044             visible: false,
    8045             withLabel: false
    8046         },
    8047
    8048         /**
    8049          * Attributes for the sector label.
    8050          *
    8051          * @type Label
    8052          * @name Sector#label
    8053          */
    8054         label: {
    8055             offset: [0, 0],
    8056             anchorX: 'auto',
    8057             anchorY: 'auto'
    8058         }
    8059
    8060         /**#@-*/
    8061     },
    8062
    8063     /* special segment options */
    8064     segment: {
    8065         /**#@+
    8066          * @visprop
    8067          */
    8068
    8069         label: {
    8070             position: 'top'
    8071         }
    8072         /**#@-*/
    8073     },
    8074
    8075     semicircle: {
    8076         /**#@+
    8077          * @visprop
    8078          */
    8079
    8080         /**
    8081          * Attributes for center point of the semicircle.
    8082          *
    8083          * @type Point
    8084          * @name Semicircle#center
    8085          */
    8086         center: {
    8087             visible: false,
    8088             withLabel: false,
    8089             fixed: false,
    8090             fillColor: Color.palette.red,
    8091             strokeColor: Color.palette.red,
    8092             highlightFillColor: '#eeeeee',
    8093             highlightStrokeColor: Color.palette.red,
    8094             name: ''
    8095         }
    8096
    8097         /**#@-*/
    8098     },
    8099
    8100     /* special slider options */
    8101     slider: {
    8102         /**#@+
    8103          * @visprop
    8104          */
    8105
    8106         /**
    8107          * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For
    8108          * continuous results set this to <tt>-1</tt>.
    8109          *
    8110          * @memberOf Slider.prototype
    8111          * @name snapWidth
    8112          * @type Number
    8113          */
    8114         snapWidth: -1,      // -1 = deactivated
    8115
    8116         /**
    8117          * List of values to snap to. If the glider is within snapValueDistance
    8118          * (in user coordinate units) of one of these points,
    8119          * then the glider snaps to that point.
    8120          *
    8121          * @memberOf Slider.prototype
    8122          * @name snapValues
    8123          * @type Array
    8124          * @see Slider#snapValueDistance
    8125          * @default empty
    8126          *
    8127          * @example
    8128          *         var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], {
    8129          *             name: 'n',
    8130          *             snapWidth: 1,
    8131          *             snapValues: [1, 22, 77, 100],
    8132          *             snapValueDistance: 5
    8133          *         });
    8134          *
    8135          *         var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], {
    8136          *             name: 'k',
    8137          *             snapWidth: 0.1,
    8138          *             snapValues: [-3, -1, 1, 3],
    8139          *             snapValueDistance: 0.4
    8140          *         });
    8141          *
    8142          * </pre><div id="JXG9be68014-4e14-479a-82b4-e92d9b8f6eef" class="jxgbox" style="width: 300px; height: 300px;"></div>
    8143          * <script type="text/javascript">
    8144          *     (function() {
    8145          *         var board = JXG.JSXGraph.initBoard('JXG9be68014-4e14-479a-82b4-e92d9b8f6eef',
    8146          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    8147          *             var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], {
    8148          *                 name: 'n',
    8149          *                 snapWidth: 1,
    8150          *                 snapValues: [1, 22, 77, 100],
    8151          *                 snapValueDistance: 5
    8152          *             });
    8153          *
    8154          *             var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], {
    8155          *                 name: 'k',
    8156          *                 snapWidth: 0.1,
    8157          *                 snapValues: [-3, -1, 1, 3],
    8158          *                 snapValueDistance: 0.4
    8159          *             });
    8160          *
    8161          *     })();
    8162          *
    8163          * </script><pre>
    8164          *
    8165          */
    8166         snapValues: [],
    8167
    8168         /**
    8169          * If the difference between the slider value and one of the elements of snapValues is less
    8170          * than this number (in user coordinate units), the slider will snap to that value.
    8171          *
    8172          * @memberOf Slider.prototype
    8173          * @name snapValueDistance
    8174          * @type Number
    8175          * @see Slider#snapValues
    8176          * @default 0.0
    8177          */
    8178         snapValueDistance: 0.0,
    8179
    8180         /**
    8181          * The precision of the slider value displayed in the optional text.
    8182          * Replaced by the attribute "digits".
    8183          *
    8184          * @memberOf Slider.prototype
    8185          * @name precision
    8186          * @type Number
    8187          * @deprecated
    8188          * @see Slider#digits
    8189          * @default 2
    8190          */
    8191         precision: 2,
    8192
    8193         /**
    8194          * The number of digits of the slider value displayed in the optional text.
    8195          *
    8196          * @memberOf Slider.prototype
    8197          * @name digits
    8198          * @type Number
    8199          * @default 2
    8200          */
    8201         digits: 2,
    8202
    8203         /**
    8204          * Internationalization support for slider labels.
    8205          *
    8206          * @name intl
    8207          * @memberOf Slider.prototype
    8208          * @type object
    8209          * @default <pre>{
    8210          *    enabled: 'inherit',
    8211          *    options: {}
    8212          * }</pre>
    8213          * @see JXG.Board#intl
    8214          * @see Text#intl
    8215          *
    8216          * @example
    8217          * var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], {
    8218          *     name: 'α',
    8219          *     snapWidth: 1,
    8220          *     intl: {
    8221          *         enabled: true,
    8222          *         options: {
    8223          *             style: 'unit',
    8224          *             unit: 'degree',
    8225          *         }
    8226          *     }
    8227          * });
    8228          *
    8229          * </pre><div id="JXGb49a9779-c0c8-419d-9173-c67232cfd65c" class="jxgbox" style="width: 300px; height: 300px;"></div>
    8230          * <script type="text/javascript">
    8231          *     (function() {
    8232          *         var board = JXG.JSXGraph.initBoard('JXGb49a9779-c0c8-419d-9173-c67232cfd65c',
    8233          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    8234          *     var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], {
    8235          *         name: 'α',
    8236          *         snapWidth: 1,
    8237          *         intl: {
    8238          *             enabled: true,
    8239          *             options: {
    8240          *                 style: 'unit',
    8241          *                 unit: 'degree',
    8242          *             }
    8243          *         }
    8244          *     });
    8245          *
    8246          *     })();
    8247          *
    8248          * </script><pre>
    8249          *
    8250          */
    8251         intl: {
    8252             enabled: 'inherit',
    8253             options: {}
    8254         },
    8255
    8256         firstArrow: false,
    8257         lastArrow: false,
    8258
    8259         /**
    8260          * Show slider ticks.
    8261          *
    8262          * @type Boolean
    8263          * @name Slider#withTicks
    8264          * @default true
    8265          */
    8266         withTicks: true,
    8267
    8268         /**
    8269          * Show slider label.
    8270          *
    8271          * @type Boolean
    8272          * @name Slider#withLabel
    8273          * @default true
    8274          */
    8275         withLabel: true,
    8276
    8277         /**
    8278          * If not null, this replaces the part "name = " in the slider label.
    8279          * Possible types: string, number or function.
    8280          * @type String
    8281          * @name suffixLabel
    8282          * @memberOf Slider.prototype
    8283          * @default null
    8284          * @see JXG.Slider#unitLabel
    8285          * @see JXG.Slider#postLabel
    8286          */
    8287         suffixLabel: null,
    8288
    8289         /**
    8290          * If not null, this is appended to the value in the slider label.
    8291          * Possible types: string, number or function.
    8292          * @type String
    8293          * @name unitLabel
    8294          * @memberOf Slider.prototype
    8295          * @default null
    8296          * @see JXG.Slider#suffixLabel
    8297          * @see JXG.Slider#postLabel
    8298          */
    8299         unitLabel: null,
    8300
    8301         /**
    8302          * If not null, this is appended to the value and to unitLabel in the slider label.
    8303          * Possible types: string, number or function.
    8304          * @type String
    8305          * @name postLabel
    8306          * @memberOf Slider.prototype
    8307          * @default null
    8308          * @see JXG.Slider#suffixLabel
    8309          * @see JXG.Slider#unitLabel
    8310          */
    8311         postLabel: null,
    8312
    8313         layer: 9,
    8314         showInfobox: false,
    8315         name: '',
    8316         visible: true,
    8317         strokeColor: '#000000',
    8318         highlightStrokeColor: '#888888',
    8319         fillColor: '#ffffff',
    8320         highlightFillColor: 'none',
    8321
    8322         /**
    8323          * Size of slider point.
    8324          *
    8325          * @type Number
    8326          * @name Slider#size
    8327          * @default 6
    8328          * @see Point#size
    8329          */
    8330         size: 6,
    8331
    8332         /**
    8333          * Attributes for first (left) helper point defining the slider position.
    8334          *
    8335          * @type Point
    8336          * @name Slider#point1
    8337          */
    8338         point1: {
    8339             needsRegularUpdate: false,
    8340             showInfobox: false,
    8341             withLabel: false,
    8342             visible: false,
    8343             fixed: true,
    8344             name: ''
    8345         },
    8346
    8347         /**
    8348          * Attributes for second (right) helper point defining the slider position.
    8349          *
    8350          * @type Point
    8351          * @name Slider#point2
    8352          */
    8353         point2: {
    8354             needsRegularUpdate: false,
    8355             showInfobox: false,
    8356             withLabel: false,
    8357             visible: false,
    8358             fixed: true,
    8359             name: ''
    8360         },
    8361
    8362         /**
    8363          * Attributes for the base line of the slider.
    8364          *
    8365          * @type Line
    8366          * @name Slider#baseline
    8367          */
    8368         baseline: {
    8369             needsRegularUpdate: false,
    8370             visible: 'inherit',
    8371             fixed: true,
    8372             scalable: false,
    8373             tabindex: null,
    8374             name: '',
    8375             strokeWidth: 1,
    8376             strokeColor: '#000000',
    8377             highlightStrokeColor: '#888888'
    8378         },
    8379
    8380         /**
    8381          * Attributes for the ticks of the base line of the slider.
    8382          *
    8383          * @type Ticks
    8384          * @name Slider#ticks
    8385          */
    8386         ticks: {
    8387             needsRegularUpdate: false,
    8388             fixed: true,
    8389
    8390             // Label drawing
    8391             drawLabels: false,
    8392             digits: 2,
    8393             includeBoundaries: true,
    8394             drawZero: true,
    8395             label: {
    8396                 offset: [-4, -14],
    8397                 display: 'internal'
    8398             },
    8399
    8400             minTicksDistance: 30,
    8401             insertTicks: true,
    8402             ticksDistance: 1,      // Not necessary, since insertTicks = true
    8403             minorHeight: 4,        // if <0: full width and height
    8404             majorHeight: 5,        // if <0: full width and height
    8405             minorTicks: 0,
    8406             strokeOpacity: 1,
    8407             strokeWidth: 1,
    8408             tickEndings: [0, 1],
    8409             majortickEndings: [0, 1],
    8410             strokeColor: '#000000',
    8411             visible: 'inherit'
    8412         },
    8413
    8414         /**
    8415          * Attributes for the highlighting line of the slider.
    8416          *
    8417          * @type Line
    8418          * @name Slider#highline
    8419          */
    8420         highline: {
    8421             strokeWidth: 3,
    8422             visible: 'inherit',
    8423             fixed: true,
    8424             tabindex: null,
    8425             name: '',
    8426             strokeColor: '#000000',
    8427             highlightStrokeColor: '#888888'
    8428         },
    8429
    8430         /**
    8431          * Attributes for the slider label.
    8432          *
    8433          * @type Label
    8434          * @name Slider#label
    8435          */
    8436         label: {
    8437             visible: 'inherit',
    8438             strokeColor: '#000000'
    8439         },
    8440
    8441         /**
    8442          * If true, 'up' events on the baseline will trigger slider moves.
    8443          *
    8444          * @type Boolean
    8445          * @name Slider#moveOnUp
    8446          * @default true
    8447          */
    8448         moveOnUp: true
    8449
    8450         /**#@-*/
    8451     },
    8452
    8453     /* special vector field options */
    8454     slopefield: {
    8455         /**#@+
    8456          * @visprop
    8457          */
    8458
    8459         strokeWidth: 0.5,
    8460         highlightStrokeWidth: 0.5,
    8461         highlightStrokeColor: Color.palette.blue,
    8462         highlightStrokeOpacity: 0.8,
    8463
    8464         /**
    8465          * Set length of the vectors in user coordinates. This in contrast to vector fields, where this attribute just scales the vector.
    8466          * @name scale
    8467          * @memberOf Slopefield.prototype
    8468          * @type {Number|Function}
    8469          * @see Vectorfield.scale
    8470          * @default 1
    8471          */
    8472         scale: 1,
    8473
    8474         /**
    8475          * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance.
    8476          * Fields are:
    8477          * <ul>
    8478          *  <li> enabled: Boolean
    8479          *  <li> size: length of the arrow head legs (in pixel)
    8480          *  <li> angle: angle of the arrow head legs In radians.
    8481          * </ul>
    8482          * @name arrowhead
    8483          * @memberOf Slopefield.prototype
    8484          * @type {Object}
    8485          * @default <tt>{enabled: false, size: 5, angle: Math.PI * 0.125}</tt>
    8486          */
    8487         arrowhead: {
    8488             enabled: false,
    8489             size: 5,
    8490             angle: Math.PI * 0.125
    8491         }
    8492
    8493         /**#@-*/
    8494     },
    8495
    8496     /* special options for slope triangle */
    8497     slopetriangle: {
    8498         /**#@+
    8499          * @visprop
    8500          */
    8501
    8502         fillColor: Color.palette.red,
    8503         fillOpacity: 0.4,
    8504         highlightFillColor: Color.palette.red,
    8505         highlightFillOpacity: 0.3,
    8506
    8507         borders: {
    8508             lastArrow: {
    8509                 type: 1,
    8510                 size: 6
    8511             }
    8512         },
    8513
    8514         /**
    8515          * Attributes for the gliding helper point.
    8516          *
    8517          * @type Point
    8518          * @name Slopetriangle#glider
    8519          */
    8520         glider: {
    8521             fixed: true,
    8522             visible: false,
    8523             withLabel: false
    8524         },
    8525
    8526         /**
    8527          * Attributes for the base line.
    8528          *
    8529          * @type Line
    8530          * @name Slopetriangle#baseline
    8531          */
    8532         baseline: {
    8533             visible: false,
    8534             withLabel: false,
    8535             name: ''
    8536         },
    8537
    8538         /**
    8539          * Attributes for the base point.
    8540          *
    8541          * @type Point
    8542          * @name Slopetriangle#basepoint
    8543          */
    8544         basepoint: {
    8545             visible: false,
    8546             withLabel: false,
    8547             name: ''
    8548         },
    8549
    8550         /**
    8551          * Attributes for the tangent.
    8552          * The tangent is constructed by slop triangle if the construction
    8553          * is based on a glider, solely.
    8554          *
    8555          * @type Line
    8556          * @name Slopetriangle#tangent
    8557          */
    8558         tangent: {
    8559             visible: false,
    8560             withLabel: false,
    8561             name: ''
    8562         },
    8563
    8564         /**
    8565          * Attributes for the top point.
    8566          *
    8567          * @type Point
    8568          * @name Slopetriangle#toppoint
    8569          */
    8570         toppoint: {
    8571             visible: false,
    8572             withLabel: false,
    8573             name: ''
    8574         },
    8575
    8576         /**
    8577          * Attributes for the slope triangle label.
    8578          *
    8579          * @type Label
    8580          * @name Slopetriangle#label
    8581          */
    8582         label: {
    8583             visible: true,
    8584             position: 'first'
    8585         }
    8586         /**#@-*/
    8587     },
    8588
    8589     /* special options for smartlabel of angle */
    8590     smartlabelangle: {
    8591         cssClass: 'smart-label-solid smart-label-angle',
    8592         highlightCssClass:'smart-label-solid smart-label-angle',
    8593         anchorX: 'left',
    8594         anchorY: 'middle',
    8595
    8596         unit: '',
    8597         prefix: '',
    8598         suffix: '',
    8599
    8600         measure: 'deg',
    8601         useMathJax: true
    8602     },
    8603
    8604     /* special options for smartlabel of circle */
    8605     smartlabelcircle: {
    8606         /**#@+
    8607          * @visprop
    8608          */
    8609
    8610         /**
    8611          * CSS classes for the smart label. Available classes are:
    8612          * <ul>
    8613          * <li> 'smart-label-solid'
    8614          * <li> 'smart-label-outline'
    8615          * <li> 'smart-label-pure'
    8616          * </ul>
    8617          *
    8618          * By default, an additional class is given specific for the element type.
    8619          * Available classes are 'smart-label-angle', 'smart-label-circle',
    8620          * 'smart-label-line', 'smart-label-point', 'smart-label-polygon'.
    8621          *
    8622          * @example
    8623          *  cssClass: 'smart-label-solid smart-label-point'
    8624          *
    8625          * @type String
    8626          * @name Smartlabel#cssClass
    8627          * @see Smartlabel#highlightCssClass
    8628          * @default <ul>
    8629          *  <li> 'smart-label-solid smart-label-circle' for circles</li>
    8630          *  <li> 'smart-label-solid smart-label-point' for points</li>
    8631          *  <li> ...</li>
    8632          * </ul>
    8633          */
    8634         cssClass: 'smart-label-solid smart-label-circle',
    8635
    8636         /**
    8637          * CSS classes for the smart label when highlighted.
    8638          *
    8639          * @type String
    8640          * @name Smartlabel#highlightCssClass
    8641          * @see Smartlabel#cssClass
    8642          * @default <ul>
    8643          *  <li> 'smart-label-solid smart-label-circle' for circles</li>
    8644          *  <li> 'smart-label-solid smart-label-point' for points</li>
    8645          *  <li> ...</li>
    8646          * </ul>
    8647          */
    8648         highlightCssClass:'smart-label-solid smart-label-circle',
    8649         anchorX: 'middle',
    8650         useMathJax: true,
    8651
    8652         /**
    8653          * Measurement unit appended to the output text. For areas, the unit is squared automatically.
    8654          * Comes directly after the measurement value.
    8655          *
    8656          * @type {String|Function}
    8657          * @name Smartlabel#unit
    8658          * @default ''
    8659          */
    8660         unit: '',
    8661
    8662         /**
    8663          * Prefix text for the smartlabel. Comes before the measurement value.
    8664          *
    8665          * @type {String|Function}
    8666          * @name Smartlabel#prefix
    8667          * @default ''
    8668          */
    8669         prefix: '',
    8670
    8671         /**
    8672          * Suffix text for the smartlabel. Comes after unit.
    8673          *
    8674          * @type {String|Function}
    8675          * @name Smartlabel#suffix
    8676          * @default ''
    8677          */
    8678         suffix: '',
    8679
    8680         /**
    8681          * Type of measurement.
    8682          * Available values are:
    8683          *  <ul>
    8684          *  <li> 'deg', 'rad' for angles</li>
    8685          *  <li> 'area', 'perimeter', 'radius' for circles</li>
    8686          *  <li> 'length', 'slope' for lines</li>
    8687          *  <li> 'area', 'perimeter' for polygons</li>
    8688          * </ul>
    8689          * Dependent on this value, i.e. the type of measurement, the label is
    8690          * positioned differently on the object.
    8691          *
    8692          * @type String
    8693          * @name Smartlabel#measure
    8694          * @default <ul>
    8695          *   <li> 'radius' for circles</li>
    8696          *   <li> 'length' for lines</li>
    8697          *   <li> 'area' for polygons</li>
    8698          *   <li> 'deg' for angles</li>
    8699          * </ul>
    8700          */
    8701         measure: 'radius'
    8702
    8703         /**#@-*/
    8704     },
    8705
    8706     /* special options for smartlabel of line */
    8707     smartlabelline: {
    8708         cssClass: 'smart-label-solid smart-label-line',
    8709         highlightCssClass:'smart-label-solid smart-label-line',
    8710         anchorX: 'middle',
    8711
    8712         useMathJax: true,
    8713
    8714         unit: '',
    8715         measure: 'length'
    8716     },
    8717
    8718     /* special options for smartlabel of point */
    8719     smartlabelpoint: {
    8720         /**#@+
    8721          * @visprop
    8722          */
    8723
    8724         cssClass: 'smart-label-solid smart-label-point',
    8725         highlightCssClass:'smart-label-solid smart-label-point',
    8726         anchorX: 'middle',
    8727         anchorY: 'top',
    8728
    8729         useMathJax: true,
    8730
    8731         /**
    8732          * Display of point coordinates either as row vector or column vector.
    8733          * Available values are 'row' or 'column'.
    8734          * @type String
    8735          * @name Smartlabel#dir
    8736          * @default 'row'
    8737          */
    8738         dir: 'row',
    8739
    8740         /**
    8741          * Supply a unit suffix.
    8742          *
    8743          * @type String
    8744          * @name Smartlabel#unit
    8745          * @default ''
    8746          */
    8747         unit: ''
    8748
    8749         /**#@-*/
    8750     },
    8751
    8752     /* special options for smartlabel of polygon */
    8753     smartlabelpolygon: {
    8754         cssClass: 'smart-label-solid smart-label-polygon',
    8755         highlightCssClass:'smart-label-solid smart-label-polygon',
    8756         anchorX: 'middle',
    8757
    8758         useMathJax: true,
    8759
    8760         unit: '',
    8761         measure: 'area'
    8762     },
    8763
    8764     /* special options for step functions */
    8765     stepfunction: {
    8766         /**#@+
    8767          * @visprop
    8768          */
    8769
    8770         /**#@-*/
    8771     },
    8772
    8773     /* special tangent options */
    8774     tangent: {
    8775     },
    8776
    8777     /* special tangent options */
    8778     tangentto: {
    8779         /**#@+
    8780          * @visprop
    8781          */
    8782
    8783         /**
    8784          * Attributes for the polar line of the tangentto construction.
    8785          *
    8786          * @name polar
    8787          * @memberOf TangentTo.prototype
    8788          * @type JXG.Line
    8789          */
    8790         polar: {
    8791             visible: false,
    8792             strokeWidth: 1,
    8793             dash: 3
    8794         },
    8795
    8796         /**
    8797          * Attributes for the intersection point of the conic/circle with the polar line of the tangentto construction.
    8798          *
    8799          * @name point
    8800          * @memberOf TangentTo.prototype
    8801          * @type JXG.Point
    8802          */
    8803         point: {
    8804             visible: false
    8805         }
    8806
    8807         /**#@-*/
    8808     },
    8809
    8810     /* special tape measure options */
    8811     tapemeasure: {
    8812         /**#@+
    8813          * @visprop
    8814          */
    8815
    8816         strokeColor: '#000000',
    8817         strokeWidth: 2,
    8818         highlightStrokeColor: '#000000',
    8819
    8820         /**
    8821          * Show tape measure ticks.
    8822          *
    8823          * @type Boolean
    8824          * @name Tapemeasure#withTicks
    8825          * @default true
    8826          */
    8827         withTicks: true,
    8828
    8829         /**
    8830          * Show tape measure label.
    8831          *
    8832          * @type Boolean
    8833          * @name Tapemeasure#withLabel
    8834          * @default true
    8835          */
    8836         withLabel: true,
    8837
    8838         /**
    8839          * Text rotation in degrees.
    8840          *
    8841          * @name Tapemeasure#rotate
    8842          * @type Number
    8843          * @default 0
    8844          */
    8845         rotate: 0,
    8846
    8847         /**
    8848          * The precision of the tape measure value displayed in the optional text.
    8849          * Replaced by the attribute digits
    8850          *
    8851          * @memberOf Tapemeasure.prototype
    8852          * @name precision
    8853          * @type Number
    8854          * @deprecated
    8855          * @see Tapemeasure#digits
    8856          * @default 2
    8857          */
    8858         precision: 2,
    8859
    8860         /**
    8861          * The precision of the tape measure value displayed in the optional text.
    8862          * @memberOf Tapemeasure.prototype
    8863          * @name digits
    8864          * @type Number
    8865          * @default 2
    8866          */
    8867         digits: 2,
    8868
    8869         /**
    8870          * Attributes for first helper point defining the tape measure position.
    8871          *
    8872          * @type Point
    8873          * @name Tapemeasure#point1
    8874          */
    8875         point1: {
    8876             visible: true,
    8877             strokeColor: '#000000',
    8878             fillColor: '#ffffff',
    8879             fillOpacity: 0.0,
    8880             highlightFillOpacity: 0.1,
    8881             size: 6,
    8882             snapToPoints: true,
    8883             attractorUnit: 'screen',
    8884             attractorDistance: 20,
    8885             showInfobox: false,
    8886             withLabel: false,
    8887             name: ''
    8888         },
    8889
    8890         /**
    8891          * Attributes for second helper point defining the tape measure position.
    8892          *
    8893          * @type Point
    8894          * @name Tapemeasure#point2
    8895          */
    8896         point2: {
    8897             visible: true,
    8898             strokeColor: '#000000',
    8899             fillColor: '#ffffff',
    8900             fillOpacity: 0.0,
    8901             highlightFillOpacity: 0.1,
    8902             size: 6,
    8903             snapToPoints: true,
    8904             attractorUnit: 'screen',
    8905             attractorDistance: 20,
    8906             showInfobox: false,
    8907             withLabel: false,
    8908             name: ''
    8909         },
    8910
    8911         /**
    8912          * Attributes for the ticks of the tape measure.
    8913          *
    8914          * @type Ticks
    8915          * @name Tapemeasure#ticks
    8916          */
    8917         ticks: {
    8918             drawLabels: false,
    8919             drawZero: true,
    8920             insertTicks: true,
    8921             ticksDistance: 0.1, // Ignored, since insertTicks=true
    8922             minorHeight: 8,
    8923             majorHeight: 16,
    8924             minorTicks: 4,
    8925             tickEndings: [0, 1],
    8926             majorTickEndings: [0, 1],
    8927             strokeOpacity: 1,
    8928             strokeWidth: 1,
    8929             strokeColor: '#000000',
    8930             visible: 'inherit',
    8931             label: {
    8932                 anchorY: 'top',
    8933                 anchorX: 'middle',
    8934                 offset: [0, -10]
    8935             }
    8936         },
    8937
    8938         /**
    8939          * Attributes for the tape measure label.
    8940          *
    8941          * @type Label
    8942          * @name Tapemeasure#label
    8943          */
    8944         label: {
    8945             position: 'top'
    8946         }
    8947         /**#@-*/
    8948     },
    8949
    8950     /* special text options */
    8951     text: {
    8952         /**#@+
    8953          * @visprop
    8954          */
    8955
    8956         /**
    8957          * The font size in pixels.
    8958          *
    8959          * @name fontSize
    8960          * @memberOf Text.prototype
    8961          * @default 12
    8962          * @type Number
    8963          * @see Text#fontUnit
    8964          */
    8965         fontSize: 12,
    8966
    8967         /**
    8968          * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but
    8969          * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful.
    8970          *
    8971          * @name fontUnit
    8972          * @memberOf Text.prototype
    8973          * @default 'px'
    8974          * @type String
    8975          * @see Text#fontSize
    8976          *
    8977          * @example
    8978          * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
    8979          *
    8980          * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div>
    8981          * <script type="text/javascript">
    8982          *     (function() {
    8983          *         var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9',
    8984          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    8985          *     var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
    8986          *
    8987          *     })();
    8988          *
    8989          * </script><pre>
    8990          *
    8991          */
    8992         fontUnit: 'px',
    8993
    8994         /**
    8995          * If the text content is solely a number and
    8996          * this attribute is true (default) then the number is either formatted
    8997          * according to the number of digits
    8998          * given by the attribute 'digits' or converted into a fraction if 'toFraction'
    8999          * is true.
    9000          * <p>
    9001          * Otherwise, display the raw number.
    9002          *
    9003          * @name formatNumber
    9004          * @memberOf Text.prototype
    9005          * @default false
    9006          * @type Boolean
    9007          *
    9008          */
    9009         formatNumber: false,
    9010
    9011         /**
    9012          * Used to round texts given by a number.
    9013          *
    9014          * @name digits
    9015          * @memberOf Text.prototype
    9016          * @default 2
    9017          * @type Number
    9018          */
    9019         digits: 2,
    9020
    9021         /**
    9022          * Internationalization support for texts consisting of a number only.
    9023          * <p>
    9024          * Setting the local overwrites the board-wide locale set in the board attributes.
    9025          * The JSXGraph attribute digits is overruled by the
    9026          * Intl attributes "minimumFractionDigits" and "maximumFractionDigits".
    9027          * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat</a>
    9028          * for more information about possible options.
    9029          * <p>
    9030          * See below for an example where the text is composed from a string and a locale formatted number.
    9031          *
    9032          * @name intl
    9033          * @memberOf Text.prototype
    9034          * @type object
    9035          * @default <pre>{
    9036          *    enabled: 'inherit',
    9037          *    options: {
    9038          *      minimumFractionDigits: 0,
    9039          *      maximumFractionDigits: 2
    9040          *    }
    9041          * }</pre>
    9042          * @see JXG.Board#intl
    9043          *
    9044          * @example
    9045          * var t = board.create('text', [1, 2, -Math.PI*100], {
    9046          *         digits: 2,
    9047          *         intl: {
    9048          *                 enabled: true,
    9049          *                 options: {
    9050          *                     style: 'unit',
    9051          *                     unit: 'celsius'
    9052          *                 }
    9053          *             }
    9054          *     });
    9055          *
    9056          * </pre><div id="JXGb7162923-1beb-4e56-8817-19aa66e226d1" class="jxgbox" style="width: 300px; height: 300px;"></div>
    9057          * <script type="text/javascript">
    9058          *     (function() {
    9059          *         var board = JXG.JSXGraph.initBoard('JXGb7162923-1beb-4e56-8817-19aa66e226d1',
    9060          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    9061          *     var t = board.create('text', [1, 2, -Math.PI*100], {
    9062          *             digits: 2,
    9063          *             intl: {
    9064          *                     enabled: true,
    9065          *                     options: {
    9066          *                         style: 'unit',
    9067          *                         unit: 'celsius'
    9068          *                     }
    9069          *                 }
    9070          *         });
    9071          *
    9072          *     })();
    9073          *
    9074          * </script><pre>
    9075          *
    9076          *
    9077          * @example
    9078          * var t = board.create('text', [0.05, -0.2, ''], {
    9079          *     intl: {
    9080          *         enabled: true,
    9081          *         locale: 'it-IT',
    9082          *         options: {
    9083          *             style: 'unit',
    9084          *             unit: 'kilometer-per-hour',
    9085          *             unitDisplay: 'narrow',
    9086          *             maximumFractionDigits: 2
    9087          *         }
    9088          *     }
    9089          * });
    9090          *
    9091          * // Set dynamic text consisting of text and number.
    9092          * t.setText(function() {
    9093          *     var txt = 'Speed: ',
    9094          *         number = t.X();
    9095          *
    9096          *     // Add formatted number to variable txt
    9097          *     // with fallback if locale is not supported.
    9098          *     if (t.useLocale()) {
    9099          *         txt += t.formatNumberLocale(number);
    9100          *     } else {
    9101          *         txt += JXG.toFixed(number, 2);
    9102          *     }
    9103          *     return txt;
    9104          * });
    9105          *
    9106          * </pre><div id="JXG560aeb1c-55fb-45da-8ad5-d3ad26216056" class="jxgbox" style="width: 300px; height: 300px;"></div>
    9107          * <script type="text/javascript">
    9108          *     (function() {
    9109          *         var board = JXG.JSXGraph.initBoard('JXG560aeb1c-55fb-45da-8ad5-d3ad26216056',
    9110          *             {boundingbox: [-0.5, 0.5, 0.5, -0.5], axis: true, showcopyright: false, shownavigation: false});
    9111          *     var t = board.create('text', [0.3, -0.3, ''], {
    9112          *         intl: {
    9113          *             enabled: true,
    9114          *             locale: 'it-IT',
    9115          *             options: {
    9116          *                 style: 'unit',
    9117          *                 unit: 'kilometer-per-hour',
    9118          *                 unitDisplay: 'narrow',
    9119          *                 maximumFractionDigits: 2
    9120          *             }
    9121          *         }
    9122          *     });
    9123          *
    9124          *     // Set dynamic text consisting of text and number.
    9125          *     t.setText(function() {
    9126          *         var txt = 'Speed: ',
    9127          *             number = t.X();
    9128          *
    9129          *         // Add formatted number to variable txt
    9130          *         if (t.useLocale()) {
    9131          *             txt += t.formatNumberLocale(number);
    9132          *         } else {
    9133          *             txt += JXG.toFixed(number, 2);
    9134          *         }
    9135          *         return txt;
    9136          *     });
    9137          *
    9138          *     })();
    9139          *
    9140          * </script><pre>
    9141          *
    9142          */
    9143         intl: {
    9144             enabled: 'inherit',
    9145             options: {
    9146                 minimumFractionDigits: 0,
    9147                 maximumFractionDigits: 2
    9148             }
    9149         },
    9150
    9151         /**
    9152          * If set to true, the text is parsed and evaluated.
    9153          * For labels parse==true results in converting names of the form k_a to subscripts.
    9154          * If the text is given by string and parse==true, the string is parsed as
    9155          * JessieCode expression.
    9156          *
    9157          * @name parse
    9158          * @memberOf Text.prototype
    9159          * @default true
    9160          * @type Boolean
    9161          */
    9162         parse: true,
    9163
    9164         /**
    9165          * If set to true and caja's sanitizeHTML function can be found it
    9166          * will be used to sanitize text output.
    9167          *
    9168          * @name useCaja
    9169          * @memberOf Text.prototype
    9170          * @default false
    9171          * @type Boolean
    9172          */
    9173         useCaja: false,
    9174
    9175         /**
    9176          * If enabled, the text will be handled as label. Intended for internal use.
    9177          *
    9178          * @name isLabel
    9179          * @memberOf Text.prototype
    9180          * @default false
    9181          * @type Boolean
    9182          */
    9183         isLabel: false,
    9184
    9185         strokeColor: '#000000',
    9186         highlightStrokeColor: '#000000',
    9187         highlightStrokeOpacity: 0.666666,
    9188
    9189         /**
    9190          * Default CSS properties of the HTML text element.
    9191          * <p>
    9192          * The CSS properties which are set here, are handed over to the style property
    9193          * of the HTML text element. That means, they have higher property than any
    9194          * CSS class.
    9195          * <p>
    9196          * If a property which is set here should be overruled by a CSS class
    9197          * then this property should be removed here.
    9198          * <p>
    9199          * The reason, why this attribute should be kept to its default value at all,
    9200          * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt>
    9201          * will ignore the font-family if it is set in a CSS class.
    9202          * It has to be set explicitly as style attribute.
    9203          * <p>
    9204          * In summary, the order of priorities (specificity) from high to low is
    9205          * <ol>
    9206          *  <li> JXG.Options.text.cssStyle
    9207          *  <li> JXG.Options.text.cssDefaultStyle
    9208          *  <li> JXG.Options.text.cssClass
    9209          * </ol>
    9210          * @example
    9211          * If all texts should get its font-family from the default CSS class
    9212          * before initializing the board
    9213          * <pre>
    9214          *   JXG.Options.text.cssDefaultStyle = '';
    9215          *   JXG.Options.text.highlightCssDefaultStyle = '';
    9216          * </pre>
    9217          * should be called.
    9218          *
    9219          * @name cssDefaultStyle
    9220          * @memberOf Text.prototype
    9221          * @default  'font-family: Arial, Helvetica, Geneva, sans-serif;'
    9222          * @type String
    9223          * @see Text#highlightCssDefaultStyle
    9224          * @see Text#cssStyle
    9225          * @see Text#highlightCssStyle
    9226          */
    9227         cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;',
    9228
    9229         /**
    9230          * Default CSS properties of the HTML text element in case of highlighting.
    9231          * <p>
    9232          * The CSS properties which are set here, are handed over to the style property
    9233          * of the HTML text element. That means, they have higher property than any
    9234          * CSS class.
    9235          * @example
    9236          * If all texts should get its font-family from the default CSS class
    9237          * before initializing the board
    9238          * <pre>
    9239          *   JXG.Options.text.cssDefaultStyle = '';
    9240          *   JXG.Options.text.highlightCssDefaultStyle = '';
    9241          * </pre>
    9242          * should be called.
    9243          *
    9244          * @name highlightCssDefaultStyle
    9245          * @memberOf Text.prototype
    9246          * @default  'font-family: Arial, Helvetica, Geneva, sans-serif;'
    9247          * @type String
    9248          * @see Text#cssDefaultStyle
    9249          * @see Text#cssStyle
    9250          * @see Text#highlightCssStyle
    9251         */
    9252         highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;',
    9253
    9254         /**
    9255          * CSS properties of the HTML text element.
    9256          * <p>
    9257          * The CSS properties which are set here, are handed over to the style property
    9258          * of the HTML text element. That means, they have higher property (specificity) han any
    9259          * CSS class.
    9260          *
    9261          * @name cssStyle
    9262          * @memberOf Text.prototype
    9263          * @default  ''
    9264          * @type String
    9265          * @see Text#cssDefaultStyle
    9266          * @see Text#highlightCssDefaultStyle
    9267          * @see Text#highlightCssStyle
    9268         */
    9269         cssStyle: '',
    9270
    9271         /**
    9272          * CSS properties of the HTML text element in case of highlighting.
    9273          * <p>
    9274          * The CSS properties which are set here, are handed over to the style property
    9275          * of the HTML text element. That means, they have higher property (specificity) than any
    9276          * CSS class.
    9277          *
    9278          * @name highlightCssStyle
    9279          * @memberOf Text.prototype
    9280          * @default  ''
    9281          * @type String
    9282          * @see Text#cssDefaultStyle
    9283          * @see Text#highlightCssDefaultStyle
    9284          * @see Text#cssStyle
    9285         */
    9286         highlightCssStyle: '',
    9287
    9288         transitionProperties: ['color', 'opacity'],
    9289
    9290         /**
    9291          * If true, the input will be given to ASCIIMathML before rendering.
    9292          *
    9293          * @name useASCIIMathML
    9294          * @memberOf Text.prototype
    9295          * @default false
    9296          * @type Boolean
    9297          */
    9298         useASCIIMathML: false,
    9299
    9300         /**
    9301          * If true, MathJax will be used to render the input string.
    9302          * Supports MathJax 2 as well as Mathjax 3.
    9303          * It is recommended to use this option together with the option
    9304          * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed
    9305          * instead of two (e.g. \\alpha).
    9306          *
    9307          * @name useMathJax
    9308          * @memberOf Text.prototype
    9309          * @default false
    9310          * @type Boolean
    9311          * @see Text#parse
    9312          *
    9313          * @example
    9314          *  // Before loading MathJax, it has to be configured something like this:
    9315          * window.MathJax = {
    9316          *   tex: {
    9317          *     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    9318          *     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    9319          *     packages: ['base', 'ams']
    9320          *   },
    9321          *   options: {
    9322          *     ignoreHtmlClass: 'tex2jax_ignore',
    9323          *     processHtmlClass: 'tex2jax_process'
    9324          *   }
    9325          * };
    9326          *
    9327          * // Display style
    9328          * board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
    9329          *     fontSize: 15, color:'green', useMathJax: true});
    9330          *
    9331          * // Inline style
    9332          * board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
    9333          *     fontSize: 15, color:'green', useMathJax: true});
    9334          *
    9335          * var A = board.create('point', [-2, 0]);
    9336          * var B = board.create('point', [1, 0]);
    9337          * var C = board.create('point', [0, 1]);
    9338          *
    9339          * var graph = board.create('ellipse', [A, B, C], {
    9340          *         fixed: true,
    9341          *         withLabel: true,
    9342          *         strokeColor: 'black',
    9343          *         strokeWidth: 2,
    9344          *         fillColor: '#cccccc',
    9345          *         fillOpacity: 0.3,
    9346          *         highlightStrokeColor: 'red',
    9347          *         highlightStrokeWidth: 3,
    9348          *         name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
    9349          *         label: {useMathJax: true}
    9350          *     });
    9351          *
    9352          * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
    9353          * {
    9354          *   fontSize: 24, parse: false
    9355          * });
    9356          * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
    9357          * {
    9358          *   fontSize: 24, useMathJax: true
    9359          * });
    9360          *
    9361          * </pre>
    9362          * <script>
    9363          * window.MathJax = {
    9364          *   tex: {
    9365          *     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    9366          *     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    9367          *     packages: ['base', 'ams']
    9368          *   },
    9369          *   options: {
    9370          *     ignoreHtmlClass: 'tex2jax_ignore',
    9371          *     processHtmlClass: 'tex2jax_process'
    9372          *   }
    9373          * };
    9374          * </script>
    9375          * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    9376          * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div>
    9377          * <script type="text/javascript">
    9378          *     (function() {
    9379          *         var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9',
    9380          *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
    9381          *     // Display style
    9382          *     board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
    9383          *         fontSize: 15, color:'green', useMathJax: true});
    9384          *
    9385          *     // Inline style
    9386          *     board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
    9387          *         fontSize: 15, color:'green', useMathJax: true});
    9388          *
    9389          *     var A = board.create('point', [-2, 0]);
    9390          *     var B = board.create('point', [1, 0]);
    9391          *     var C = board.create('point', [0, 1]);
    9392          *
    9393          *     var graph = board.create('ellipse', [A, B, C], {
    9394          *             fixed: true,
    9395          *             withLabel: true,
    9396          *             strokeColor: 'black',
    9397          *             strokeWidth: 2,
    9398          *             fillColor: '#cccccc',
    9399          *             fillOpacity: 0.3,
    9400          *             highlightStrokeColor: 'red',
    9401          *             highlightStrokeWidth: 3,
    9402          *             name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
    9403          *             label: {useMathJax: true}
    9404          *         });
    9405          *
    9406          *     var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
    9407          *     {
    9408          *       fontSize: 24, parse: false
    9409          *     });
    9410          *     var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
    9411          *     {
    9412          *       fontSize: 24, useMathJax: true
    9413          *     });
    9414          *     })();
    9415          *
    9416          * </script><pre>
    9417          *
    9418          *
    9419          * @example
    9420          * // Load MathJax:
    9421          * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script>
    9422          *
    9423          * // function and its derivative
    9424          * var f1 = function(x) { return x * x * x; },
    9425          * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),
    9426          *
    9427          * A = board.create('glider', [0.5, f1(0.5), graph1], {
    9428          *             name: 'f(x)',
    9429          *             color: 'black',
    9430          *             face:'x',
    9431          *             fixed: true,
    9432          *             size: 3,
    9433          *             label: {offset: [-30, 10], fontSize: 15}
    9434          *         }),
    9435          * B = board.create('glider', [0.7, f1(0.7), graph1], {
    9436          *             name: 'f(x+Δx)',
    9437          *             size: 3,
    9438          *             label: {offset: [-60, 10], fontSize: 15}
    9439          *         }),
    9440          *
    9441          * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
    9442          * a_h_segment = board.create('segment', [A, [
    9443          *                     function(){ return B.X() > A.X() ? B.X() : A.X()},
    9444          *                     function(){ return B.X() > A.X() ? A.Y() : B.Y()}
    9445          *                 ]],{ name: 'Δx', dash: 1, color: 'black'});
    9446          *
    9447          * b_v_segment = board.create('segment', [B, [
    9448          *                     function(){ return B.X() > A.X() ? B.X() : A.X()},
    9449          *                     function(){ return B.X() > A.X() ? A.Y() : B.Y()}
    9450          *                 ]],{ name: 'Δy', dash: 1, color: 'black'}),
    9451          *
    9452          * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
    9453          *     ], {visible: false});
    9454          *
    9455          * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
    9456          *     anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
    9457          * });
    9458          *
    9459          * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
    9460          * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
    9461          *     anchor: mb, useMathJax: true, fixed: true, color: 'green'
    9462          * });
    9463          *
    9464          * dval = board.create('text',[0.1, 0.8,
    9465          *     function(){
    9466          *         return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
    9467          *             '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
    9468          *     }],{fontSize: 15, useMathJax: true});
    9469          *
    9470          * </pre>
    9471          * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    9472          * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div>
    9473          * <script type="text/javascript">
    9474          *     (function() {
    9475          *         var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621',
    9476          *             {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false});
    9477          *     // function and its derivative
    9478          *     var f1 = function(x) { return x * x * x; },
    9479          *     graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),
    9480          *
    9481          *     A = board.create('glider', [0.5, f1(0.5), graph1], {
    9482          *                 name: 'f(x)',
    9483          *                 color: 'black',
    9484          *                 face:'x',
    9485          *                 fixed: true,
    9486          *                 size: 3,
    9487          *                 label: {offset: [-30, 10], fontSize: 15}
    9488          *             }),
    9489          *     B = board.create('glider', [0.7, f1(0.7), graph1], {
    9490          *                 name: 'f(x+Δx)',
    9491          *                 size: 3,
    9492          *                 label: {offset: [-60, 10], fontSize: 15}
    9493          *             }),
    9494          *
    9495          *     secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
    9496          *     a_h_segment = board.create('segment', [A, [
    9497          *                         function(){ return B.X() > A.X() ? B.X() : A.X()},
    9498          *                         function(){ return B.X() > A.X() ? A.Y() : B.Y()}
    9499          *                     ]],{ name: 'Δx', dash: 1, color: 'black'});
    9500          *
    9501          *     b_v_segment = board.create('segment', [B, [
    9502          *                         function(){ return B.X() > A.X() ? B.X() : A.X()},
    9503          *                         function(){ return B.X() > A.X() ? A.Y() : B.Y()}
    9504          *                     ]],{ name: 'Δy', dash: 1, color: 'black'}),
    9505          *
    9506          *     ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
    9507          *         ], {visible: false});
    9508          *
    9509          *     board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
    9510          *         anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
    9511          *     });
    9512          *
    9513          *     mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
    9514          *     board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
    9515          *         anchor: mb, useMathJax: true, fixed: true, color: 'green'
    9516          *     });
    9517          *
    9518          *     dval = board.create('text',[0.1, 0.8,
    9519          *         function(){
    9520          *             return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
    9521          *                 '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
    9522          *         }],{fontSize: 15, useMathJax: true});
    9523          *
    9524          *     })();
    9525          *
    9526          * </script><pre>
    9527          *
    9528          * @example
    9529          * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    9530          * board.options.text.useMathjax = true;
    9531          *
    9532          * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
    9533          *     suffixlabel:'\\(t_1=\\)',
    9534          *     unitLabel: ' \\(\\text{ ms}\\)',
    9535          *     snapWidth:0.01}),
    9536          *
    9537          * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
    9538          * text1 = board.create('text', [5, 1, function(){
    9539          *             return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
    9540          *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
    9541          *
    9542          * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div>
    9543          * <script type="text/javascript">
    9544          *     (function() {
    9545          *         var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6',
    9546          *             {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false});
    9547          *     board.options.text.useMathjax = true;
    9548          *
    9549          *     a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
    9550          *         suffixlabel:'\\(t_1=\\)',
    9551          *         unitLabel: ' \\(\\text{ ms}\\)',
    9552          *         snapWidth:0.01}),
    9553          *
    9554          *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
    9555          *     text1 = board.create('text', [5, 1, function(){
    9556          *                 return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
    9557          *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
    9558          *
    9559          *     })();
    9560          *
    9561          * </script><pre>
    9562          *
    9563          */
    9564         useMathJax: false,
    9565
    9566         /**
    9567          *
    9568          * If true, KaTeX will be used to render the input string.
    9569          * For this feature, katex.min.js and katex.min.css have to be included.
    9570          * <p>
    9571          * The example below does not work, because there is a conflict with
    9572          * the MathJax library which is used below.
    9573          * </p>
    9574          *
    9575          * @name useKatex
    9576          * @memberOf Text.prototype
    9577          * @default false
    9578          * @type Boolean
    9579          *
    9580          *
    9581          * @example
    9582          * JXG.Options.text.useKatex = true;
    9583          *
    9584          * const board = JXG.JSXGraph.initBoard('jxgbox', {
    9585          *     boundingbox: [-2, 5, 8, -5], axis:true
    9586          * });
    9587          *
    9588          * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
    9589          *     suffixlabel:'t_1=',
    9590          *     unitLabel: ' \\text{ ms}',
    9591          *     snapWidth:0.01});
    9592          *
    9593          * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
    9594          * text1 = board.create('text', [5, 1, function(){
    9595          *             return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
    9596          *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
    9597          *
    9598          * </pre>
    9599          * <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">
    9600          * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script>
    9601          * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div>
    9602          * <script type="text/javascript">
    9603          *     (function() {
    9604          *         var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869',
    9605          *             {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false});
    9606          *     board.options.useKatex = true;
    9607          *     var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
    9608          *         suffixlabel:'t_1=',
    9609          *         unitLabel: ' \\text{ ms}',
    9610          *         snapWidth:0.01});
    9611          *
    9612          *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
    9613          *     text1 = board.create('text', [5, 1, function(){
    9614          *                 return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
    9615          *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
    9616          *
    9617          *     })();
    9618          *
    9619          * </script><pre>
    9620          */
    9621         useKatex: false,
    9622
    9623         /**
    9624          * Object or function returning an object that contains macros for KaTeX.
    9625          *
    9626          * @name katexMacros
    9627          * @memberOf Text.prototype
    9628          * @default <tt>{}</tt>
    9629          * @type Object
    9630          *
    9631          * @example
    9632          * // to globally apply macros to all text elements use:
    9633          * JXG.Options.text.katexMacros = {'\\jxg': 'JSXGraph is awesome'};
    9634          *
    9635          * const board = JXG.JSXGraph.initBoard('jxgbox', {
    9636          *     boundingbox: [-2, 5, 8, -5], axis:true
    9637          * });
    9638          *
    9639          * // This macro only get applied to the p ('text') element
    9640          * var p = board.create('text', [1, 0, '\\jsg \\sR '], { katexMacros: {'\\sR':'\\mathbb{R}'} });
    9641          */
    9642         katexMacros: {},
    9643
    9644         /**
    9645          * Display number as integer + nominator / denominator. Works together
    9646          * with MathJax, KaTex or as plain text.
    9647          * @name toFraction
    9648          * @memberOf Text.prototype
    9649          * @type Boolean
    9650          * @default false
    9651          * @see JXG#toFraction
    9652          *
    9653          * @example
    9654          *  board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true });
    9655          *  board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false });
    9656          *
    9657          * </pre><div id="JXGc10fe0b6-15ac-42b6-890f-2593b427d493" class="jxgbox" style="width: 300px; height: 300px;"></div>
    9658          * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    9659          * <script type="text/javascript">
    9660          *     (function() {
    9661          *         var board = JXG.JSXGraph.initBoard('JXGc10fe0b6-15ac-42b6-890f-2593b427d493',
    9662          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    9663          *             board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true });
    9664          *             board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false });
    9665          *
    9666          *     })();
    9667          *
    9668          * </script><pre>
    9669          *
    9670          */
    9671         toFraction: false,
    9672
    9673         /**
    9674          * Determines the rendering method of the text. Possible values
    9675          * include <tt>'html'</tt> and <tt>'internal</tt>.
    9676          *
    9677          * @name display
    9678          * @memberOf Text.prototype
    9679          * @default 'html'
    9680          * @type String
    9681          */
    9682         display: 'html',
    9683
    9684         /**
    9685          * Anchor element {@link Point}, {@link Text} or {@link Image} of the text.
    9686          * If it exists, the coordinates of the text are relative
    9687          * to this anchor element. In this case, only numbers are possible coordinates,
    9688          * functions are not supported.
    9689          *
    9690          * @name anchor
    9691          * @memberOf Text.prototype
    9692          * @default null
    9693          * @type Object
    9694          */
    9695         anchor: null,
    9696
    9697         /**
    9698          * The horizontal alignment of the text. Possible values include <tt>'auto'</tt>, <tt>'left'</tt>,
    9699          * <tt>'middle'</tt>, and <tt>'right'</tt>.
    9700          *
    9701          * @name anchorX
    9702          * @memberOf Text.prototype
    9703          * @default 'left'
    9704          * @type String
    9705          */
    9706         anchorX: 'left',
    9707
    9708         /**
    9709          * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and
    9710          * <tt>'bottom'</tt>.
    9711          * For MathJax or KaTeX, 'top' is recommended.
    9712          *
    9713          * @name anchorY
    9714          * @memberOf Text.prototype
    9715          * @default 'middle'
    9716          * @type String
    9717          */
    9718         anchorY: 'middle',
    9719
    9720         /**
    9721          * Apply CSS classes to the text in non-highlighted view. It is possible to supply one or more
    9722          * CSS classes separated by blanks.
    9723          *
    9724          * @name cssClass
    9725          * @memberOf Text.prototype
    9726          * @type String
    9727          * @default 'JXGtext'
    9728          * @see Text#highlightCssClass
    9729          * @see Image#cssClass
    9730          * @see JXG.GeometryElement#cssClass
    9731          */
    9732         cssClass: 'JXGtext',
    9733
    9734         /**
    9735          * Apply CSS classes to the text in highlighted view. It is possible to supply one or more
    9736          * CSS classes separated by blanks.
    9737          *
    9738          * @name highlightCssClass
    9739          * @memberOf Text.prototype
    9740          * @type String
    9741          * @default 'JXGtext'
    9742          * @see Text#cssClass
    9743          * @see Image#highlightCssClass
    9744          * @see JXG.GeometryElement#highlightCssClass
    9745          */
    9746         highlightCssClass: 'JXGtext',
    9747
    9748         /**
    9749          * Sensitive area for dragging the text.
    9750          * Possible values are 'all', or something else.
    9751          * If set to 'small', a sensitivity margin at the right and left border is taken.
    9752          * This may be extended to left, right, ... in the future.
    9753          *
    9754          * @name Text#dragArea
    9755          * @type String
    9756          * @default 'all'
    9757          */
    9758         dragArea: 'all',
    9759
    9760         withLabel: false,
    9761
    9762         /**
    9763          * Text rotation in degrees.
    9764          * Works for non-zero values only in combination with display=='internal'.
    9765          *
    9766          * @name Text#rotate
    9767          * @type Number
    9768          * @default 0
    9769          */
    9770         rotate: 0,
    9771
    9772         /**
    9773          * @name Text#visible
    9774          * @type Boolean
    9775          * @default true
    9776          */
    9777         visible: true,
    9778
    9779         /**
    9780          * Defines together with {@link Text#snapSizeY} the grid the text snaps on to.
    9781          * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    9782          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    9783          * of the default ticks of the default x axes of the board.
    9784          *
    9785          * @name snapSizeX
    9786          * @memberOf Text.prototype
    9787          *
    9788          * @see Point#snapToGrid
    9789          * @see Text#snapSizeY
    9790          * @see JXG.Board#defaultAxes
    9791          * @type Number
    9792          * @default 1
    9793          */
    9794         snapSizeX: 1,
    9795
    9796         /**
    9797          * Defines together with {@link Text#snapSizeX} the grid the text snaps on to.
    9798          * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
    9799          * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
    9800          * of the default ticks of the default y axes of the board.
    9801          *
    9802          * @name snapSizeY
    9803          * @memberOf Text.prototype
    9804          *
    9805          * @see Point#snapToGrid
    9806          * @see Text#snapSizeX
    9807          * @see JXG.Board#defaultAxes
    9808          * @type Number
    9809          * @default 1
    9810          */
    9811         snapSizeY: 1,
    9812
    9813         /**
    9814          * List of attractor elements. If the distance of the text is less than
    9815          * attractorDistance the text is made to glider of this element.
    9816          *
    9817          * @name attractors
    9818          * @memberOf Text.prototype
    9819          * @type Array
    9820          * @default empty
    9821          */
    9822         attractors: []
    9823
    9824         /**#@-*/
    9825     },
    9826
    9827     /* special options for trace curves */
    9828     tracecurve: {
    9829         /**#@+
    9830          * @visprop
    9831          */
    9832         strokeColor: '#000000',
    9833         fillColor: 'none',
    9834
    9835         /**
    9836          * The number of evaluated data points.
    9837          * @memberOf Tracecurve.prototype
    9838          * @default 100
    9839          * @name numberPoints
    9840          * @type Number
    9841          */
    9842         numberPoints: 100
    9843
    9844         /**#@-*/
    9845     },
    9846
    9847     /* special turtle options */
    9848     turtle: {
    9849         /**#@+
    9850          * @visprop
    9851          */
    9852
    9853         strokeWidth: 1,
    9854         fillColor: 'none',
    9855         strokeColor: '#000000',
    9856
    9857         /**
    9858          * Attributes for the turtle arrow.
    9859          *
    9860          * @type Curve
    9861          * @name Turtle#arrow
    9862          */
    9863         arrow: {
    9864             strokeWidth: 2,
    9865             withLabel: false,
    9866             strokeColor: Color.palette.red,
    9867             lastArrow: true
    9868         }
    9869         /**#@-*/
    9870     },
    9871
    9872     /* special vector field options */
    9873     vectorfield: {
    9874         /**#@+
    9875          * @visprop
    9876          */
    9877
    9878         strokeWidth: 0.5,
    9879         highlightStrokeWidth: 0.5,
    9880         highlightStrokeColor: Color.palette.blue,
    9881         highlightStrokeOpacity: 0.8,
    9882
    9883         /**
    9884          * Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length.
    9885          * @name scale
    9886          * @memberOf Vectorfield.prototype
    9887          * @type {Number|Function}
    9888          * @see Slopefield.scale
    9889          * @default 1
    9890          */
    9891         scale: 1,
    9892
    9893         /**
    9894          * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance.
    9895          * Fields are:
    9896          * <ul>
    9897          *  <li> enabled: Boolean
    9898          *  <li> size: length of the arrow head legs (in pixel)
    9899          *  <li> angle: angle of the arrow head legs In radians.
    9900          * </ul>
    9901          * @name arrowhead
    9902          * @memberOf Vectorfield.prototype
    9903          * @type {Object}
    9904          * @default <tt>{enabled: true, size: 5, angle: Math.PI * 0.125}</tt>
    9905          */
    9906         arrowhead: {
    9907             enabled: true,
    9908             size: 5,
    9909             angle: Math.PI * 0.125
    9910         }
    9911
    9912         /**#@-*/
    9913     },
    9914
    9915     /**
    9916      * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties
    9917      * to the same value.
    9918      * It is used in {@link JXG.GeometryElement#setAttribute} and in
    9919      * the constructor {@link JXG.GeometryElement}.
    9920      * Attention: In Options.js abbreviations are not allowed.
    9921      * @type Object
    9922      * @name JXG.Options#shortcuts
    9923      *
    9924      */
    9925     shortcuts: {
    9926         color: ['strokeColor', 'fillColor'],
    9927         opacity: ['strokeOpacity', 'fillOpacity'],
    9928         highlightColor: ['highlightStrokeColor', 'highlightFillColor'],
    9929         highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'],
    9930         strokeWidth: ['strokeWidth', 'highlightStrokeWidth']
    9931     }
    9932 };
    9933
    9934     /**
    9935      * Holds all possible properties and the according validators for geometry elements.
    9936      * A validator is either a function
    9937      * which takes one parameter and returns true, if the value is valid for the property,
    9938      * or it is false if no validator is required.
    9939      */
    9940     JXG.Validator = (function () {
    9941         var i,
    9942             validatePixel = function (v) {
    9943                 return (/^[0-9]+px$/).test(v);
    9944             },
    9945             validateDisplay = function (v) {
    9946                 return (v  === 'html' || v === 'internal');
    9947             },
    9948             validateColor = function (v) {
    9949                 // for now this should do it...
    9950                 return Type.isString(v);
    9951             },
    9952             validatePointFace = function (v) {
    9953                 return Type.exists(JXG.normalizePointFace(v));
    9954             },
    9955             validateNumber = function (v) {
    9956                 return Type.isNumber(v, true, false);
    9957             },
    9958             validateInteger = function (v) {
    9959                 return (Math.abs(v - Math.round(v)) < Mat.eps);
    9960             },
    9961             validateNotNegativeInteger = function (v) {
    9962                 return validateInteger(v) && v >= 0;
    9963             },
    9964             validatePositiveInteger = function (v) {
    9965                 return validateInteger(v) && v > 0;
    9966             },
    9967             // validateScreenCoords = function (v) {
    9968             //     return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]);
    9969             // },
    9970             validateRenderer = function (v) {
    9971                 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no');
    9972             },
    9973             validatePositive = function (v) {
    9974                 return v > 0;
    9975             },
    9976             validateNotNegative = function (v) {
    9977                 return v >= 0;
    9978             },
    9979             v = {},
    9980             validators = {
    9981                 attractorDistance: validateNotNegative,
    9982                 color: validateColor,
    9983                 // defaultDistance: validateNumber,
    9984                 display: validateDisplay,
    9985                 doAdvancedPlot: false,
    9986                 draft: false,
    9987                 drawLabels: false,
    9988                 drawZero: false,
    9989                 face: validatePointFace,
    9990                 factor: validateNumber,
    9991                 fillColor: validateColor,
    9992                 fillOpacity: validateNumber,
    9993                 firstArrow: false,
    9994                 fontSize: validateInteger,
    9995                 dash: validateInteger,
    9996                 gridX: validateNumber,
    9997                 gridY: validateNumber,
    9998                 // POI: Do we have to add something here?
    9999                 hasGrid: false,
    10000                 highlightFillColor: validateColor,
    10001                 highlightFillOpacity: validateNumber,
    10002                 highlightStrokeColor: validateColor,
    10003                 highlightStrokeOpacity: validateNumber,
    10004                 insertTicks: false,
    10005                 //: validateScreenCoords,
    10006                 lastArrow: false,
    10007                 layer: validateNotNegativeInteger,
    10008                 majorHeight: validateInteger,
    10009                 minorHeight: validateInteger,
    10010                 minorTicks: validateNotNegative,
    10011                 minTicksDistance: validatePositiveInteger,
    10012                 numberPointsHigh: validatePositiveInteger,
    10013                 numberPointsLow: validatePositiveInteger,
    10014                 opacity: validateNumber,
    10015                 radius: validateNumber,
    10016                 RDPsmoothing: false,
    10017                 renderer: validateRenderer,
    10018                 right: validatePixel,
    10019                 showCopyright: false,
    10020                 showInfobox: false,
    10021                 showNavigation: false,
    10022                 size: validateNotNegative, //validateInteger,
    10023                 snapSizeX: validatePositive,
    10024                 snapSizeY: validatePositive,
    10025                 snapWidth: validateNumber,
    10026                 snapToGrid: false,
    10027                 snatchDistance: validateNotNegative,
    10028                 straightFirst: false,
    10029                 straightLast: false,
    10030                 stretch: false,
    10031                 strokeColor: validateColor,
    10032                 strokeOpacity: validateNumber,
    10033                 strokeWidth: validateNotNegative, //validateInteger,
    10034                 takeFirst: false,
    10035                 takeSizeFromFile: false,
    10036                 to10: false,
    10037                 toOrigin: false,
    10038                 translateTo10: false,
    10039                 translateToOrigin: false,
    10040                 useASCIIMathML: false,
    10041                 useDirection: false,
    10042                 useMathJax: false,
    10043                 withLabel: false,
    10044                 withTicks: false,
    10045                 zoom: false
    10046             };
    10047
    10048         // this seems like a redundant step but it makes sure that
    10049         // all properties in the validator object have lower case names
    10050         // and the validator object is easier to read.
    10051         for (i in validators) {
    10052             if (validators.hasOwnProperty(i)) {
    10053                 v[i.toLowerCase()] = validators[i];
    10054             }
    10055         }
    10056
    10057         return v;
    10058     }());
    10059
    10060     /**
    10061      * All point faces can be defined with more than one name, e.g. a cross faced point can be given
    10062      * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to
    10063      * simplify if- and switch-clauses regarding point faces. The translation table is as follows:
    10064      * <table>
    10065      * <tr><th>Input</th><th>Output</th></tr>
    10066      * <tr><td>cross</td><td>x</td></tr>
    10067      * <tr><td>circle</td><td>o</td></tr>
    10068      * <tr><td>square, []</td><td>[]</td></tr>
    10069      * <tr><td>plus</td><td>+</td></tr>
    10070      * <tr><td>minus</td><td>-</td></tr>
    10071      * <tr><td>divide</td><td>|</td></tr>
    10072      * <tr><td>diamond</td><td><></td></tr>
    10073      * <tr><td>triangleup</td><td>^, a, A</td></tr>
    10074      * <tr><td>triangledown</td><td>v</td></tr>
    10075      * <tr><td>triangleleft</td><td><</td></tr>
    10076      * <tr><td>triangleright</td><td>></td></tr>
    10077      * </table>
    10078      * @param {String} s A string which should determine a valid point face.
    10079      * @returns {String} Returns a normalized string or undefined if the given string is not a valid
    10080      * point face.
    10081      */
    10082     JXG.normalizePointFace = function (s) {
    10083         var map = {
    10084             cross: 'x',
    10085             x: 'x',
    10086             circle: 'o',
    10087             o: 'o',
    10088             square: '[]',
    10089             '[]': '[]',
    10090             plus: '+',
    10091             '+': '+',
    10092             divide: '|',
    10093             '|': '|',
    10094             minus: '-',
    10095             '-': '-',
    10096             diamond: '<>',
    10097             '<>': '<>',
    10098             diamond2: '<<>>',
    10099             '<<>>': '<<>>',
    10100             triangleup: '^',
    10101             A: '^',
    10102             a: '^',
    10103             '^': '^',
    10104             triangledown: 'v',
    10105             v: 'v',
    10106             triangleleft: '<',
    10107             '<': '<',
    10108             triangleright: '>',
    10109             '>': '>'
    10110         };
    10111
    10112         return map[s];
    10113     };
    10114
    10115     /**
    10116      * Apply the options stored in this object to all objects on the given board.
    10117      * @param {JXG.Board} board The board to which objects the options will be applied.
    10118      */
    10119     JXG.useStandardOptions = function (board) {
    10120         var el, t, p, copyProps,
    10121             o = JXG.Options,
    10122             boardHadGrid = board.hasGrid;
    10123
    10124         board.options.grid.hasGrid = o.grid.hasGrid;
    10125         board.options.grid.gridX = o.grid.gridX;
    10126         board.options.grid.gridY = o.grid.gridY;
    10127         // POI: Do we have to add something here?
    10128         board.options.grid.gridColor = o.grid.gridColor;
    10129         board.options.grid.gridOpacity = o.grid.gridOpacity;
    10130         board.options.grid.gridDash = o.grid.gridDash;
    10131         board.options.grid.snapToGrid = o.grid.snapToGrid;
    10132         board.options.grid.snapSizeX = o.grid.SnapSizeX;
    10133         board.options.grid.snapSizeY = o.grid.SnapSizeY;
    10134         board.takeSizeFromFile = o.takeSizeFromFile;
    10135
    10136         copyProps = function (p, o) {
    10137             p.visProp.fillcolor = o.fillColor;
    10138             p.visProp.highlightfillcolor = o.highlightFillColor;
    10139             p.visProp.strokecolor = o.strokeColor;
    10140             p.visProp.highlightstrokecolor = o.highlightStrokeColor;
    10141         };
    10142
    10143         for (el in board.objects) {
    10144             if (board.objects.hasOwnProperty(el)) {
    10145                 p = board.objects[el];
    10146                 if (p.elementClass === Const.OBJECT_CLASS_POINT) {
    10147                     copyProps(p, o.point);
    10148                 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) {
    10149                     copyProps(p, o.line);
    10150
    10151                     for (t = 0; t < p.ticks.length; t++) {
    10152                         p.ticks[t].majorTicks = o.line.ticks.majorTicks;
    10153                         p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance;
    10154                         p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight;
    10155                         p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight;
    10156                     }
    10157                 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) {
    10158                     copyProps(p, o.circle);
    10159                 } else if (p.type === Const.OBJECT_TYPE_ANGLE) {
    10160                     copyProps(p, o.angle);
    10161                 } else if (p.type === Const.OBJECT_TYPE_ARC) {
    10162                     copyProps(p, o.arc);
    10163                 } else if (p.type === Const.OBJECT_TYPE_POLYGON) {
    10164                     copyProps(p, o.polygon);
    10165                 } else if (p.type === Const.OBJECT_TYPE_CONIC) {
    10166                     copyProps(p, o.conic);
    10167                 } else if (p.type === Const.OBJECT_TYPE_CURVE) {
    10168                     copyProps(p, o.curve);
    10169                 } else if (p.type === Const.OBJECT_TYPE_SECTOR) {
    10170                     p.arc.visProp.fillcolor = o.sector.fillColor;
    10171                     p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor;
    10172                     p.arc.visProp.fillopacity = o.sector.fillOpacity;
    10173                     p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity;
    10174                 }
    10175             }
    10176         }
    10177
    10178         board.fullUpdate();
    10179         if (boardHadGrid && !board.hasGrid) {
    10180             board.removeGrids(board);
    10181         } else if (!boardHadGrid && board.hasGrid) {
    10182             board.create('grid', []);
    10183         }
    10184     };
    10185
    10186     /**
    10187      * Converts all color values to greyscale and calls useStandardOption to put them onto the board.
    10188      * @param {JXG.Board} board The board to which objects the options will be applied.
    10189      * @see JXG.useStandardOptions
    10190      */
    10191     JXG.useBlackWhiteOptions = function (board) {
    10192         var o = JXG.Options;
    10193         o.point.fillColor = Color.rgb2bw(o.point.fillColor);
    10194         o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor);
    10195         o.point.strokeColor = Color.rgb2bw(o.point.strokeColor);
    10196         o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor);
    10197
    10198         o.line.fillColor = Color.rgb2bw(o.line.fillColor);
    10199         o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor);
    10200         o.line.strokeColor = Color.rgb2bw(o.line.strokeColor);
    10201         o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor);
    10202
    10203         o.circle.fillColor = Color.rgb2bw(o.circle.fillColor);
    10204         o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor);
    10205         o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor);
    10206         o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor);
    10207
    10208         o.arc.fillColor = Color.rgb2bw(o.arc.fillColor);
    10209         o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor);
    10210         o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor);
    10211         o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor);
    10212
    10213         o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor);
    10214         o.polygon.highlightFillColor  = Color.rgb2bw(o.polygon.highlightFillColor);
    10215
    10216         o.sector.fillColor = Color.rgb2bw(o.sector.fillColor);
    10217         o.sector.highlightFillColor  = Color.rgb2bw(o.sector.highlightFillColor);
    10218
    10219         o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor);
    10220         o.grid.gridColor = Color.rgb2bw(o.grid.gridColor);
    10221
    10222         JXG.useStandardOptions(board);
    10223     };
    10224
    10225 // needs to be exported
    10226 JXG.Options.normalizePointFace = JXG.normalizePointFace;
    10227
    10228 export default JXG.Options;
    10229