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