1 /*
  2     Copyright 2008-2022
  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 <http://www.gnu.org/licenses/>
 29     and <http://opensource.org/licenses/MIT/>.
 30  */
 31 
 32 
 33 /*global JXG:true, define: true*/
 34 /*jslint nomen: true, plusplus: true*/
 35 
 36 /* depends:
 37  jxg
 38  base/constants
 39  math/math
 40  utils/color
 41  utils/type
 42  */
 43 
 44 define([
 45     'jxg', 'base/constants', 'math/math', 'utils/color', 'utils/type'
 46 ], function (JXG, Const, Mat, Color, Type) {
 47 
 48     "use strict";
 49 
 50     /**
 51      * Options Namespace
 52      * @description These are the default options of the board and of all geometry elements.
 53      * @namespace
 54      * @name JXG.Options
 55      */
 56     JXG.Options = {
 57         jc: {
 58             enabled: true,
 59             compile: true
 60         },
 61 
 62         /*
 63          * Options that are used directly within the board class
 64          */
 65         board: {
 66             /**#@+
 67              * @visprop
 68              */
 69 
 70             //updateType: 'hierarchical', // 'all'
 71 
 72             /**
 73              * Bounding box of the visible area in user coordinates.
 74              * It is an array consisting of four values:
 75              * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>]
 76              *
 77              * The canvas will be spanned from the upper left corner (<sub>1</sub>, y<sub>1</sub>)
 78              * to the lower right corner (x<sub>2</sub>, y<sub>2</sub>).
 79              *
 80              * @name JXG.Board#boundingbox
 81              * @type Array
 82              * @default [-5, 5, 5, -5]
 83              * @example
 84              * var board = JXG.JSXGraph.initBoard('jxgbox', {
 85              *         boundingbox: [-5, 5, 5, -5],
 86              *         axis: true
 87              *     });
 88              */
 89             boundingBox: [-5, 5, 5, -5],
 90 
 91             /**
 92              * Maximal bounding box of the visible area in user coordinates.
 93              * It is an array consisting of four values:
 94              * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>]
 95              *
 96              * The bounding box of the canvas must be inside of this maximal
 97              * boundings box.
 98              * @name JXG.Board#maxboundingbox
 99              * @type Array
100              * @see JXG.Board#boundingbox
101              * @default [-Infinity, Infinity, Infinity, -Infinity]
102              *
103              * @example
104              * var board = JXG.JSXGraph.initBoard('jxgbox', {
105              *         boundingbox: [-5, 5, 5, -5],
106              *         maxboundingbox: [-8, 8, 8, -8],
107              *         pan: {enabled: true},
108              *         axis: true
109              *     });
110              *
111              * </pre><div id="JXG065e2750-217c-48ed-a52b-7d7df6de7055" class="jxgbox" style="width: 300px; height: 300px;"></div>
112              * <script type="text/javascript">
113              *     (function() {
114              *         var board = JXG.JSXGraph.initBoard('JXG065e2750-217c-48ed-a52b-7d7df6de7055', {
115              *             showcopyright: false, shownavigation: false,
116              *             boundingbox: [-5,5,5,-5],
117              *             maxboundingbox: [-8,8,8,-8],
118              *             pan: {enabled: true},
119              *             axis:true
120              *         });
121              *
122              *     })();
123              *
124              * </script><pre>
125              *
126              */
127             maxBoundingBox: [-Infinity, Infinity, Infinity, -Infinity],
128 
129             /**
130              * Additional zoom factor multiplied to {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}.
131              *
132              * @name JXG.Board#zoomFactor
133              * @type Number
134              * @default 1.0
135              */
136             zoomFactor: 1,
137 
138             /**
139              * Zoom factor in horizontal direction.
140              *
141              * @name JXG.Board#zoomX
142              * @see JXG.Board#zoomY
143              * @type Number
144              * @default 1.0
145              */
146             zoomX: 1,
147 
148             /**
149              * Zoom factor in vertical direction.
150              *
151              * @name JXG.Board#zoomY
152              * @see JXG.Board#zoomX
153              * @type Number
154              * @default 1.0
155              */
156             zoomY: 1,
157 
158             /**
159              * Title string for the board.
160              * Primarily used in an invisible text element which is adressed by
161              * the attribute 'aria-labelledby' from the JSXGraph container.
162              * JSXGraph creates a new div-element with id "{containerid}_ARIAlabel"
163              * containing this string.
164              *
165              * @name JXG.Board#title
166              * @see JXG.Board#description
167              * @type String
168              * @default ''
169              *
170              */
171             title: '',
172 
173             /**
174              * Description string for the board.
175              * Primarily used in an invisible text element which is adressed by
176              * the attribute 'aria-describedby' from the JSXGraph container.
177              * JSXGraph creates a new div-element with id "{containerid}_ARIAdescription"
178              * containing this string.
179              *
180              * @name JXG.Board#description
181              * @see JXG.Board#title
182              * @type String
183              * @default ''
184              *
185              */
186             description: '',
187 
188             /**
189              * Show copyright string in canvas.
190              *
191              * @name JXG.Board#showCopyright
192              * @type Boolean
193              * @default true
194              */
195             showCopyright: true,
196 
197             /**
198              * Show default axis.
199              * If shown, the horizontal axis can be accessed via JXG.Board.defaultAxes.x, the
200              * vertical axis can be accessed via JXG.Board.defaultAxes.y.
201              * Both axes have a sub-element "defaultTicks".
202              *
203              * Value can be Boolean or an object containing axis attributes.
204              *
205              * @name JXG.Board#axis
206              * @type Boolean
207              * @default false
208              */
209             axis: false,
210 
211             /**
212              * Attributes for the default axes in case of the attribute
213              * axis:true in {@link JXG.JSXGraph#initBoard}.
214              *
215              * @name JXG.Board#defaultAxes
216              * @type Object
217              * @default {x: {name:'x'}, y: {name: 'y'}}
218              *
219              */
220             defaultAxes: {
221                 x: {
222                     name: 'x',
223                     ticks: {
224                         label: {
225                             visible: 'inherit',
226                             anchorX: 'middle',
227                             anchorY: 'top',
228                             fontSize: 12,
229                             offset: [0, -3]
230                         },
231                         drawZero: false,
232                         visible: 'inherit'
233                     }
234                 },
235                 y: {
236                     name: 'y',
237                     ticks: {
238                         label: {
239                             visible: 'inherit',
240                             anchorX: 'right',
241                             anchorY: 'middle',
242                             fontSize: 12,
243                             offset: [-6, 0]
244                         },
245                         tickEndings: [1, 0],
246                         drawZero: false,
247                         visible: 'inherit'
248                     }
249                 }
250             },
251 
252             /**
253              * Display of navigation arrows and zoom buttons in the navigation bar.
254              *
255              * @name JXG.Board#showNavigation
256              * @type Boolean
257              * @default true
258              * @see JXG.AbstractRenderer#drawZoomBar
259              */
260             showNavigation: true,
261 
262             /**
263              * Display of zoom buttons in the navigation bar. To show zoom buttons, additionally
264              * showNavigation has to be set to true.
265              *
266              * @name JXG.Board#showZoom
267              * @type Boolean
268              * @default true
269              * @see JXG.AbstractRenderer#drawZoomBar
270              */
271             showZoom: true,
272 
273             /**
274              * Show a button in the navigation bar to force reload of a construction.
275              * Works only with the JessieCode tag.
276              *
277              * @name JXG.Board#showReload
278              * @type Boolean
279              * @default false
280              * @see JXG.AbstractRenderer#drawZoomBar
281              */
282             showReload: false,
283 
284             /**
285              * Show a button in the navigation bar to enable screenshots.
286              *
287              * @name JXG.Board#showScreenshot
288              * @type Boolean
289              * @default false
290              * @see JXG.AbstractRenderer#drawZoomBar
291              */
292             showScreenshot: false,
293 
294             /**
295              * Attributes to control the screenshot function.
296              * The following attributes can be set:
297              * <ul>
298              *  <li>scale: scaling factor (default=1.0)
299              *  <li>type: format of the screenshot image. Default: png
300              *  <li>symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318'
301              *  <li>css: CSS rules to format the div element containing the screen shot image
302              *  <li>cssButton: CSS rules to format the close button of the div element containing the screen shot image
303              * </ul>
304              *
305              * @name JXG.Board#screenshot
306              * @type Object
307              */
308             screenshot: {
309                 scale: 1.0,
310                 type: 'png',
311                 symbol: '\u2318', //'\u22b9', //'\u26f6',
312                 css: 'background-color:#eeeeee; opacity:1.0; border:2px solid black; border-radius:10px; text-align:center',
313                 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);'
314             },
315 
316             /**
317              * Show a button in the navigation bar to start fullscreen mode.
318              *
319              * @name JXG.Board#showFullscreen
320              * @type Boolean
321              * @see JXG.Board#fullscreen
322              * @default false
323              * @see JXG.AbstractRenderer#drawZoomBar
324              * @see JXG.AbstractRenderer#drawZoomBar
325              */
326             showFullscreen: false,
327 
328             /**
329              * Attribute(s) to control the fullscreen icon. The attribute "showFullscreen"
330              * controls if the icon is shown.
331              * The following attribute(s) can be set:
332              * <ul>
333              *  <li>symbol (String): Unicode symbol which is shown in the navigation bar.  Default: svg code for '\u26f6', other
334              * possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
335              *  <li>id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken.
336              * 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.
337              * </ul>
338              *
339              * @example
340              * var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
341              *             {boundingbox: [-8, 8, 8,-8], axis: true,
342              *             showcopyright: false,
343              *             showFullscreen: true,
344              *             fullscreen: {
345              *                  symbol: '\u22c7'
346              *              }
347              *             });
348              * var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});
349              *
350              * </pre><div id="JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
351              * <script type="text/javascript">
352              *     (function() {
353              *         var board = JXG.JSXGraph.initBoard('JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
354              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false,
355              *              showFullscreen: true,
356              *              fullscreen: {
357              *                  symbol: '\u22c7'
358              *                  }
359              *             });
360              *     var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});
361              *     })();
362              *
363              * </script><pre>
364              *
365              * @name JXG.Board#fullscreen
366              * @default svg code
367              * @see JXG.Board#showFullscreen
368              * @see JXG.AbstractRenderer#drawZoomBar
369              * @type Object
370              */
371             fullscreen: {
372                 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>', 
373                     // '\u25a1', // '\u26f6' (not supported by MacOS),
374                 id: null
375             },
376 
377             /**
378              * Show a button which allows to clear all traces of a board.
379              *
380              * @name JXG.Board#showClearTraces
381              * @type Boolean
382              * @default false
383              * @see JXG.AbstractRenderer#drawZoomBar
384              */
385             showClearTraces: false,
386 
387             /**
388              * If set to true the bounding box might be changed such that
389              * the ratio of width and height of the hosting HTML div is equal
390              * to the ratio of width and height of the bounding box.
391              *
392              * This is necessary if circles should look like circles and not
393              * like ellipses. It is recommended to set keepAspectRatio = true
394              * for geometric applets. For function plotting keepAspectRatio = false
395              * might be the better choice.
396              *
397              * @name JXG.Board#keepAspectRatio
398              * @see JXG.Board#boundingbox
399              * @see JXG.Board#setBoundingBox
400              * @type Boolean
401              * @default false
402              */
403             keepAspectRatio: false,
404 
405             /**
406              * If set true and
407              * hasPoint() is true for both an element and it's label,
408              * the element (and not the label) is taken as drag element.
409              *
410              * If set false and hasPoint() is true for both an element and it's label,
411              * the label is taken (if it is on a higher layer than the element)
412              *
413              * @name JXG.Board#ignoreLabels
414              * @type Booelan
415              * @default true
416              */
417             ignoreLabels: true,
418 
419             /**
420              * Maximum number of digits in automatic label generation.
421              * For example, if set to 1 automatic point labels end at "Z".
422              * If set to 2, point labels end at "ZZ".
423              *
424              * @name JXG.Board#maxNameLength
425              * @see JXG.Board#generateName
426              * @type Number
427              * @default 1
428              */
429             maxNameLength: 1,
430 
431             /**
432              * Supply the document object. Defaults to window.document
433              *
434              * @name JXG.Board#document
435              * @type DOM object
436              * @default false (meaning window.document)
437              */
438             document: false,
439 
440             /**
441              * If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element.
442              *
443              * @name JXG.Board#takeFirst
444              * @type Boolean
445              * @default false
446              */
447             takeFirst: false,
448 
449             /**
450             * If true, when read from a file or string - the size of the div can be changed by the construction text.
451             *
452             * @name JXG.Board#takeSizeFromFile
453             * @type Boolean
454             * @default false
455             */
456             takeSizeFromFile: false,
457 
458             /**
459              * Default rendering engine. Possible values are 'svg', 'canvas', 'vml', 'no', or 'auto'.
460              * If the rendering engine is not available JSXGraph tries to detect a different engine.
461              *
462              * <p>
463              * In case of 'canvas' it is advisable to call 'board.update()' after all elements have been
464              * constructed. This ensures that all elements are drawn with their intended visual appearance.
465              *
466              * @name JXG.Board#renderer
467              * @type String
468              * @default 'auto'
469              */
470             renderer: 'auto',
471 
472             /**
473              * Time (in msec) between two animation steps. Used in
474              * {@link JXG.CoordsElement#moveAlong}, {@link JXG.CoordsElement#moveTo} and
475              * {@link JXG.CoordsElement#visit}.
476              *
477              * @name JXG.Board#animationDelay
478              * @type Number
479              * @default 35
480              * @see JXG.CoordsElement#moveAlong
481              * @see JXG.CoordsElement#moveTo
482              * @see JXG.CoordsElement#visit
483              */
484             animationDelay: 35,
485 
486             /**
487              * Maximum frame rate of the board, i.e. maximum number of updates per second
488              * triggered by move events.
489              *
490              * @name JXG.Board#maxFrameRate
491              * @type Number
492              * @default 40
493              */
494             maxFrameRate: 40,
495 
496             /**
497              * Allow user interaction by registering mouse, pointer and touch events.
498              *
499              * @name JXG.Board#registerEvents
500              * @type Boolean
501              * @default true
502              */
503             registerEvents: true,
504 
505             /**
506              * Change redraw strategy in SVG rendering engine.
507              * <p>
508              * This optimization seems to be <b>obsolete</b> in newer browsers (from 2021 on, at least)
509              * and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4.
510              * <p>
511              * If set to 'svg', before every redrawing of the JSXGraph construction
512              * the SVG sub-tree of the DOM tree is taken out of the DOM.
513              *
514              * If set to 'all', before every redrawing of the JSXGraph construction the
515              * complete DOM tree is taken out of the DOM.
516              * If set to 'none' the redrawing is done in-place.
517              *
518              * Using 'svg' or 'all' speeds up the update process considerably. The risk
519              * is that if there is an exception, only a white div or window is left.
520              *
521              *
522              * @name JXG.Board#minimizeReflow
523              * @type String
524              * @default 'none'
525              */
526             minimizeReflow: 'none',
527 
528             /**
529              * A number that will be added to the absolute position of the board used in mouse coordinate
530              * calculations in {@link JXG.Board#getCoordsTopLeftCorner}.
531              *
532              * @name JXG.Board#offsetX
533              * @see JXG.Board#offsetY
534              * @type Number
535              * @default 0
536              */
537             offsetX: 0,
538 
539             /**
540              * A number that will be added to the absolute position of the board used in mouse coordinate
541              * calculations in {@link JXG.Board#getCoordsTopLeftCorner}.
542              *
543              * @name JXG.Board#offsetY
544              * @see JXG.Board#offsetX
545              * @type Number
546              * @default 0
547              */
548             offsetY: 0,
549 
550             /**
551              * Control the possibilities for zoom interaction.
552              *
553              * Possible sub-attributes with default values are:
554              * <pre>
555              * zoom: {
556              *   factorX: 1.25,  // horizontal zoom factor (multiplied to {@link JXG.Board#zoomX})
557              *   factorY: 1.25,  // vertical zoom factor (multiplied to {@link JXG.Board#zoomY})
558              *   wheel: true,     // allow zooming by mouse wheel or
559              *   				   // by pinch-to-toom gesture on touch devices
560              *   needShift: true,   // mouse wheel zooming needs pressing of the shift key
561              *   min: 0.001,        // minimal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomOut
562              *   max: 1000.0,       // maximal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomIn
563              *
564              *   pinchHorizontal: true, // Allow pinch-to-zoom to zoom only horizontal axis
565              *   pinchVertical: true,   // Allow pinch-to-zoom to zoom only vertical axis
566              *   pinchSensitivity: 7    // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
567              * }
568              * </pre>
569              *
570              * Deprecated: zoom.eps which is superseded by zoom.min
571              *
572              * @name JXG.Board#zoom
573              * @type Object
574              * @default
575              */
576             zoom: {
577                 enabled: true,
578                 factorX: 1.25,
579                 factorY: 1.25,
580                 wheel: true,
581                 needShift: true,
582                 min: 0.0001,
583                 max: 10000.0,
584                 pinchHorizontal: true,
585                 pinchVertical: true,
586                 pinchSensitivity: 7
587             },
588 
589             /**
590              * Control the possibilities for panning interaction (i.e. moving the origin).
591              *
592              * Possible sub-attributes with default values are:
593              * <pre>
594              * pan: {
595              *   enabled: true   // Allow panning
596              *   needTwoFingers: false, // panning is done with two fingers on touch devices
597              *   needShift: true, // mouse panning needs pressing of the shift key
598              * }
599              * </pre>
600              *
601              * @name JXG.Board#pan
602              * @type Object
603              */
604             pan: {
605                 needShift: true,
606                 needTwoFingers: false,
607                 enabled: true
608             },
609 
610             /**
611              * Control the possibilities for dragging objects.
612              *
613              * Possible sub-attributes with default values are:
614              * <pre>
615              * drag: {
616              *   enabled: true   // Allow dragging
617              * }
618              * </pre>
619              *
620              * @name JXG.Board#drag
621              * @type Object
622              * @default {enabled: true}
623              */
624             drag: {
625                 enabled: true
626             },
627 
628             /**
629              * Control using the keyboard to change the construction.
630              * <ul>
631              * <li> enabled: true / false
632              * <li> dx: horizontal shift amount per key press
633              * <li> dy: vertical shift amount per key press
634              * <li> panShift: zoom if shift key is pressed
635              * <li> panCtrl: zoom if ctrl key is pressed
636              * </ul>
637              *
638              * @example
639              * var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5],
640              *     axis: true,
641              *     showCopyright:true,
642              *     showNavigation:true,
643              *     keyboard: {
644              *         enabled: true,
645              *         dy: 30,
646              *         panShift: true,
647              *         panCtrl: false
648              *     }
649              * });
650              *
651              * </pre><div id="JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266" class="jxgbox" style="width: 300px; height: 300px;"></div>
652              * <script type="text/javascript">
653              *     (function() {
654              *         var board = JXG.JSXGraph.initBoard('JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266',
655              *             {boundingbox: [-5,5,5,-5],
656              *         axis: true,
657              *         showCopyright:true,
658              *         showNavigation:true,
659              *         keyboard: {
660              *             enabled: true,
661              *             dy: 30,
662              *             panShift: true,
663              *             panCtrl: false
664              *         }
665              *     });
666              *
667              *     })();
668              *
669              * </script><pre>
670              *
671              *
672              * @see JXG.Board#keyDownListener
673              * @see JXG.Board#keyFocusInListener
674              * @see JXG.Board#keyFocusOutListener
675              *
676              * @name JXG.Board#keyboard
677              * @type Object
678              * @default {enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}
679              */
680             keyboard: {
681                 enabled: true,
682                 dx: 10,
683                 dy: 10,
684                 panShift: true,
685                 panCtrl: false
686             },
687 
688             /**
689              * Control if JSXGraph reacts to resizing of the JSXGraph container element
690              * by the user / browser.
691              * The attribute "throttle" determines the minimal time in msec between to
692              * resize calls.
693              *
694              * @see JXG.Board#startResizeObserver
695              * @see JXG.Board#resizeListener
696              *
697              * @name JXG.Board#resize
698              * @type Object
699              * @default {enabled: true, throttle: 10}
700              *
701              * @example
702              *     var board = JXG.JSXGraph.initBoard('jxgbox', {
703              *         boundingbox: [-5,5,5,-5],
704              *         keepAspectRatio: true,
705              *         axis: true,
706              *         resize: {enabled: true, throttle: 200}
707              *     });
708              *
709              * </pre><div id="JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3" class="jxgbox" style="width: 300px; height: 300px;"></div>
710              * <script type="text/javascript">
711              *     (function() {
712              *         var board = JXG.JSXGraph.initBoard('JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3', {
713              *             boundingbox: [-5,5,5,-5],
714              *             keepAspectRatio: true,
715              *             axis: true,
716              *             resize: {enabled: true, throttle: 200}
717              *         });
718              *
719              *     })();
720              *
721              * </script><pre>
722              *
723              *
724              */
725             resize: {
726                 enabled: true,
727                 throttle: 10
728             },
729 
730             /**
731              * Element which listens to move events of the pointing device.
732              * This allows to drag elements of a JSXGraph construction outside of the board.
733              * Especially, on mobile devices this enhances the user experience.
734              * However, it is recommended to allow dragging outside of the JSXGraph board only
735              * in certain constructions where users may not "loose" points outside of the board.
736              * Then points may become unreachable.
737              * <p>
738              * A situation where dragging outside of the board is uncritical is for example if
739              * only sliders are used to interact with the construction.
740              * <p>
741              * Possible values for this attributes are:
742              * <ul>
743              * <li> an element specified by document.getElementById('some id');
744              * <li> null: to use the JSXgraph container div element
745              * <li> document
746              * </ul>
747              *
748              * @name JXG.Board#moveTarget
749              * @type HTML node or document
750              * @default null
751              *
752              * @example
753              *     var board = JXG.JSXGraph.initBoard('jxgbox', {
754              *         boundingbox: [-5,5,5,-5],
755              *         axis: true,
756              *         moveTarget: document
757              *     });
758              *
759              * </pre><div id="JXG973457e5-c63f-4516-8570-743f2cc560e1" class="jxgbox" style="width: 300px; height: 300px;"></div>
760              * <script type="text/javascript">
761              *     (function() {
762              *         var board = JXG.JSXGraph.initBoard('JXG973457e5-c63f-4516-8570-743f2cc560e1',
763              *             {boundingbox: [-5,5,5,-5],
764              *             axis: true,
765              *             moveTarget: document
766              *         });
767              *
768              *     })();
769              *
770              * </script><pre>
771              *
772              *
773              */
774             moveTarget: null,
775 
776             /**
777              * Control the possibilities for a selection rectangle.
778              * Starting a selection event triggers the "startselecting" event.
779              * When the mouse pointer is released, the "stopselecting" event is fired.
780              * The "stopselecting" event must be supplied by the user.
781              * <p>
782              * Possible sub-attributes with default values are:
783              * <pre>
784              * selection: {
785              *   enabled: false,
786              *   name: 'selectionPolygon',
787              *   needShift: false,  // mouse selection needs pressing of the shift key
788              *   needCtrl: true,    // mouse selection needs pressing of the shift key
789              *   withLines: false,  // Selection polygon has border lines
790              *   vertices: {
791              *       visible: false
792              *   },
793              *   fillColor: '#ffff00',
794              *   visible: false      // Initial visibility. Should be set to false always
795              * }
796              * </pre>
797              * <p>
798              * Board events triggered by selection manipulation:
799              * 'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting',
800              * 'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'.
801              *
802              * @example
803              * board.on('stopselecting', function(){
804              *     var box = board.stopSelectionMode(),
805              *     // bbox has the coordinates of the selectionr rectangle.
806              *     // Attention: box[i].usrCoords have the form [1, x, y], i.e.
807              *     // are homogeneous coordinates.
808              *     bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));
809              *     // Set a new bounding box
810              *     board.setBoundingBox(bbox, false);
811              * });
812              *
813              * @name JXG.Board#selection
814              *
815              * @see JXG.Board#startSelectionMode
816              * @see JXG.Board#stopSelectionMode
817              *
818              * @type Object
819              * @default
820              */
821             selection: {
822                 enabled: false,
823                 name: 'selectionPolygon',
824                 needShift: false,
825                 needCtrl: true,
826                 withLines: false,
827                 vertices: {
828                     visible: false
829                 },
830                 fillColor: '#ffff00',
831                 visible: false
832             },
833 
834             /**
835              * If true, the infobox is shown on mouse/pen over for all points
836              * which have set their attribute showInfobox to 'inherit'.
837              * If a point has set its attribute showInfobox to false or true,
838              * that value will have priority over this value.
839              *
840              * @name JXG.Board#showInfobox
841              * @see Point#showInfobox
842              * @type Boolean
843              * @default true
844              */
845             showInfobox: true
846 
847             /**#@-*/
848         },
849 
850         /**
851          * Options that are used by the navigation bar.
852          *
853          * Default values are
854          * <pre>
855          * JXG.Option.navbar: {
856          *   strokeColor: '#333333',
857          *   fillColor: 'transparent',
858          *   highlightFillColor: '#aaaaaa',
859          *   padding: '2px',
860          *   position: 'absolute',
861          *   fontSize: '14px',
862          *   cursor: 'pointer',
863          *   zIndex: '100',
864          *   right: '5px',
865          *   bottom: '5px'
866          * },
867          * </pre>
868          * These settings are overruled by the CSS class 'JXG_navigation'.
869          * @deprecated
870          * @type Object
871          * @name JXG.Options#navbar
872          *
873          */
874         navbar: {
875             strokeColor: '#333333', //'#aaaaaa',
876             fillColor: 'transparent', //#f5f5f5',
877             highlightFillColor: '#aaaaaa',
878             padding: '2px',
879             position: 'absolute',
880             fontSize: '14px',
881             cursor: 'pointer',
882             zIndex: '100',
883             right: '5px',
884             bottom: '5px'
885             //border: 'none 1px black',
886             //borderRadius: '4px'
887         },
888 
889          /*
890           *  Generic options used by {@link JXG.GeometryElement}
891           */
892         elements: {
893             // the following tag is a meta tag: http://code.google.com/p/jsdoc-toolkit/wiki/MetaTags
894 
895             /**#@+
896              * @visprop
897              */
898 
899             /**
900              * The stroke color of the given geometry element.
901              * @type String
902              * @name JXG.GeometryElement#strokeColor
903              * @see JXG.GeometryElement#highlightStrokeColor
904              * @see JXG.GeometryElement#strokeWidth
905              * @see JXG.GeometryElement#strokeOpacity
906              * @see JXG.GeometryElement#highlightStrokeOpacity
907              * @default {@link JXG.Options.elements.color#strokeColor}
908              */
909             strokeColor: Color.palette.blue,
910 
911             /**
912              * The stroke color of the given geometry element when the user moves the mouse over it.
913              * @type String
914              * @name JXG.GeometryElement#highlightStrokeColor
915              * @see JXG.GeometryElement#strokeColor
916              * @see JXG.GeometryElement#strokeWidth
917              * @see JXG.GeometryElement#strokeOpacity
918              * @see JXG.GeometryElement#highlightStrokeOpacity
919              * @default {@link JXG.Options.elements.color#highlightStrokeColor}
920              */
921             highlightStrokeColor: '#c3d9ff',
922 
923             /**
924              * The fill color of this geometry element.
925              * @type String
926              * @name JXG.GeometryElement#fillColor
927              * @see JXG.GeometryElement#highlightFillColor
928              * @see JXG.GeometryElement#fillOpacity
929              * @see JXG.GeometryElement#highlightFillOpacity
930              * @default {@link JXG.Options.elements.color#fillColor}
931              */
932             fillColor: Color.palette.red,
933 
934             /**
935              * The fill color of the given geometry element when the mouse is pointed over it.
936              * @type String
937              * @name JXG.GeometryElement#highlightFillColor
938              * @see JXG.GeometryElement#fillColor
939              * @see JXG.GeometryElement#fillOpacity
940              * @see JXG.GeometryElement#highlightFillOpacity
941              * @default {@link JXG.Options.elements.color#highlightFillColor}
942              */
943             highlightFillColor: 'none',
944 
945             /**
946              * Opacity for element's stroke color.
947              * @type Number
948              * @name JXG.GeometryElement#strokeOpacity
949              * @see JXG.GeometryElement#strokeColor
950              * @see JXG.GeometryElement#highlightStrokeColor
951              * @see JXG.GeometryElement#strokeWidth
952              * @see JXG.GeometryElement#highlightStrokeOpacity
953              * @default {@link JXG.Options.elements#strokeOpacity}
954              */
955             strokeOpacity: 1,
956 
957             /**
958              * Opacity for stroke color when the object is highlighted.
959              * @type Number
960              * @name JXG.GeometryElement#highlightStrokeOpacity
961              * @see JXG.GeometryElement#strokeColor
962              * @see JXG.GeometryElement#highlightStrokeColor
963              * @see JXG.GeometryElement#strokeWidth
964              * @see JXG.GeometryElement#strokeOpacity
965              * @default {@link JXG.Options.elements#highlightStrokeOpacity}
966              */
967             highlightStrokeOpacity: 1,
968 
969             /**
970              * Opacity for fill color.
971              * @type Number
972              * @name JXG.GeometryElement#fillOpacity
973              * @see JXG.GeometryElement#fillColor
974              * @see JXG.GeometryElement#highlightFillColor
975              * @see JXG.GeometryElement#highlightFillOpacity
976              * @default {@link JXG.Options.elements.color#fillOpacity}
977              */
978             fillOpacity: 1,
979 
980             /**
981              * Opacity for fill color when the object is highlighted.
982              * @type Number
983              * @name JXG.GeometryElement#highlightFillOpacity
984              * @see JXG.GeometryElement#fillColor
985              * @see JXG.GeometryElement#highlightFillColor
986              * @see JXG.GeometryElement#fillOpacity
987              * @default {@link JXG.Options.elements.color#highlightFillOpacity}
988              */
989             highlightFillOpacity: 1,
990 
991             /**
992              * Gradient type. Possible values are 'linear'. 'radial' or null.
993              *
994              * @example
995              *     var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'});
996              *     var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'});
997              *     var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'});
998              *
999              *     var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
1000              *                 fillOpacity: 1,
1001              *                 fillColor: 'yellow',
1002              *                 gradient: 'linear',
1003              *                 gradientSecondColor: 'blue',
1004              *                 gradientAngle: function() { return a.Value(); },
1005              *                 gradientStartOffset: function() { return b.Value(); },
1006              *                 gradientEndOffset: function() { return c.Value(); },
1007              *                 hasInnerPoints: true
1008              *         });
1009              *
1010              * </pre><div id="JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0" class="jxgbox" style="width: 300px; height: 300px;"></div>
1011              * <script type="text/javascript">
1012              *     (function() {
1013              *         var board = JXG.JSXGraph.initBoard('JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0',
1014              *             {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false});
1015              *         var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'});
1016              *         var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'});
1017              *         var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'});
1018              *
1019              *         var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
1020              *                     fillOpacity: 1,
1021              *                     fillColor: 'yellow',
1022              *                     gradient: 'linear',
1023              *                     gradientSecondColor: 'blue',
1024              *                     gradientAngle: function() { return a.Value(); },
1025              *                     gradientStartOffset: function() { return b.Value(); },
1026              *                     gradientEndOffset: function() { return c.Value(); },
1027              *                     hasInnerPoints: true
1028              *             });
1029              *
1030              *     })();
1031              *
1032              * </script><pre>
1033              *
1034              * @example
1035              *     var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'});
1036              *     var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'});
1037              *     var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'});
1038              *     var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'});
1039              *     var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'});
1040              *     var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'});
1041              *
1042              *     var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
1043              *                 fillOpacity: 1,
1044              *                 fillColor: 'yellow',
1045              *                 gradient: 'radial',
1046              *                 gradientSecondColor: 'blue',
1047              *                 gradientCX: function() { return cx.Value(); },
1048              *                 gradientCY: function() { return cx.Value(); },
1049              *                 gradientR: function() { return r.Value(); },
1050              *                 gradientFX: function() { return fx.Value(); },
1051              *                 gradientFY: function() { return fx.Value(); },
1052              *                 gradientFR: function() { return fr.Value(); },
1053              *                 gradientStartOffset: function() { return o1.Value(); },
1054              *                 gradientEndOffset: function() { return o2.Value(); },
1055              *                 hasInnerPoints: true
1056              *     });
1057              *
1058              * </pre><div id="JXG6081ca7f-0d09-4525-87ac-325a02fe2225" class="jxgbox" style="width: 300px; height: 300px;"></div>
1059              * <script type="text/javascript">
1060              *     (function() {
1061              *         var board = JXG.JSXGraph.initBoard('JXG6081ca7f-0d09-4525-87ac-325a02fe2225',
1062              *             {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false});
1063              *         var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'});
1064              *         var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'});
1065              *         var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'});
1066              *         var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'});
1067              *         var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'});
1068              *         var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'});
1069              *
1070              *         var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
1071              *                     fillOpacity: 1,
1072              *                     fillColor: 'yellow',
1073              *                     gradient: 'radial',
1074              *                     gradientSecondColor: 'blue',
1075              *                     gradientCX: function() { return cx.Value(); },
1076              *                     gradientCY: function() { return cx.Value(); },
1077              *                     gradientR: function() { return r.Value(); },
1078              *                     gradientFX: function() { return fx.Value(); },
1079              *                     gradientFY: function() { return fx.Value(); },
1080              *                     gradientFR: function() { return fr.Value(); },
1081              *                     gradientStartOffset: function() { return o1.Value(); },
1082              *                     gradientEndOffset: function() { return o2.Value(); },
1083              *                     hasInnerPoints: true
1084              *         });
1085              *
1086              *     })();
1087              *
1088              * </script><pre>
1089              *
1090              *
1091              * @type String
1092              * @name JXG.GeometryElement#gradient
1093              * @see JXG.GeometryElement#gradientSecondColor
1094              * @see JXG.GeometryElement#gradientSecondOpacity
1095              * @default null
1096              */
1097             gradient: null,
1098 
1099             /**
1100              * Second color for gradient.
1101              * @type String
1102              * @name JXG.GeometryElement#gradientSecondColor
1103              * @see JXG.GeometryElement#gradient
1104              * @see JXG.GeometryElement#gradientSecondOpacity
1105              * @default '#ffffff'
1106              */
1107             gradientSecondColor: '#ffffff',
1108 
1109             /**
1110              * Opacity of second gradient color. Takes a value between 0 and 1.
1111              * @type Number
1112              * @name JXG.GeometryElement#gradientSecondOpacity
1113              * @see JXG.GeometryElement#gradient
1114              * @see JXG.GeometryElement#gradientSecondColor
1115              * @default 1
1116              */
1117             gradientSecondOpacity: 1,
1118 
1119             /**
1120              * The gradientStartOffset attribute is a number (ranging from 0 to 1) which indicates where the first gradient stop is placed,
1121              * see the SVG specification for more information.
1122              * For linear gradients, this attribute represents a location along the gradient vector.
1123              * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
1124              * @type Number
1125              * @name JXG.GeometryElement#gradientStartOffset
1126              * @see JXG.GeometryElement#gradient
1127              * @see JXG.GeometryElement#gradientEndOffset
1128              * @default 0.0
1129              */
1130             gradientStartOffset: 0.0,
1131 
1132             /**
1133              * The gradientEndOffset attribute is a number (ranging from 0 to 1) which indicates where the second gradient stop is placed,
1134              * see the SVG specification for more information.
1135              * For linear gradients, this attribute represents a location along the gradient vector.
1136              * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
1137              * @type Number
1138              * @name JXG.GeometryElement#gradientEndOffset
1139              * @see JXG.GeometryElement#gradient
1140              * @see JXG.GeometryElement#gradientStartOffset
1141              * @default 1.0
1142              */
1143             gradientEndOffset: 1.0,
1144 
1145 
1146             /**
1147              * Angle (in radians) of the gradiant in case the gradient is of type 'linear'.
1148              * If the angle is 0, the first color is on the left and the second color is on the right.
1149              * If the angle is pi/4 the first color is on top and the second color at the
1150              * bottom.
1151              * @type Number
1152              * @name JXG.GeometryElement#gradientAngle
1153              * @see JXG.GeometryElement#gradient
1154              * @default 0
1155              */
1156             gradientAngle: 0,
1157 
1158             /**
1159              * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient.
1160              * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
1161              * For radial gradients in canvas this is the value 'x1'.
1162              * Takes a value between 0 and 1.
1163              * @type Number
1164              * @name JXG.GeometryElement#gradientCX
1165              * @see JXG.GeometryElement#gradient
1166              * @see JXG.GeometryElement#gradientCY
1167              * @see JXG.GeometryElement#gradientR
1168              * @default 0.5
1169              */
1170             gradientCX: 0.5,
1171 
1172             /**
1173              * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient.
1174              * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
1175              * For radial gradients in canvas this is the value 'y1'.
1176              * Takes a value between 0 and 1.
1177              * @type Number
1178              * @name JXG.GeometryElement#gradientCY
1179              * @see JXG.GeometryElement#gradient
1180              * @see JXG.GeometryElement#gradientCX
1181              * @see JXG.GeometryElement#gradientR
1182              * @default 0.5
1183              */
1184             gradientCY: 0.5,
1185 
1186             /**
1187              * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient.
1188              * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
1189              * For radial gradients in canvas this is the value 'r1'.
1190              * Takes a value between 0 and 1.
1191              * @type Number
1192              * @name JXG.GeometryElement#gradientR
1193              * @see JXG.GeometryElement#gradient
1194              * @see JXG.GeometryElement#gradientCX
1195              * @see JXG.GeometryElement#gradientCY
1196              * @default 0.5
1197              */
1198             gradientR: 0.5,
1199 
1200             /**
1201              * ‘fx’ and ‘fy’ define the focal point for the radial gradient.
1202              * The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy).
1203              * For radial gradients in canvas this is the value 'x0'.
1204              * Takes a value between 0 and 1.
1205              * @type Number
1206              * @name JXG.GeometryElement#gradientFX
1207              * @see JXG.GeometryElement#gradient
1208              * @see JXG.GeometryElement#gradientFY
1209              * @see JXG.GeometryElement#gradientFR
1210              * @default 0.5
1211              */
1212             gradientFX: 0.5,
1213 
1214             /**
1215              * y-coordinate of the circle center for the second color in case of gradient 'radial'. (The attribute fy in SVG)
1216              * For radial gradients in canvas this is the value 'y0'.
1217              * Takes a value between 0 and 1.
1218              * @type Number
1219              * @name JXG.GeometryElement#gradientFY
1220              * @see JXG.GeometryElement#gradient
1221              * @see JXG.GeometryElement#gradientFX
1222              * @see JXG.GeometryElement#gradientFR
1223              * @default 0.5
1224              */
1225             gradientFY: 0.5,
1226 
1227             /**
1228              * This attribute defines the radius of the start circle of the radial gradient.
1229              * The gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle.
1230              * For radial gradients in canvas this is the value 'r0'.
1231              * Takes a value between 0 and 1.
1232              * @type Number
1233              * @name JXG.GeometryElement#gradientFR
1234              * @see JXG.GeometryElement#gradient
1235              * @see JXG.GeometryElement#gradientFX
1236              * @see JXG.GeometryElement#gradientFY
1237              * @default 0.0
1238              */
1239             gradientFR: 0.0,
1240 
1241             /**
1242              * Transition duration (in milliseconds) for color and opacity
1243              * changes. Works in SVG renderer, only.
1244              * @type Number
1245              * @name JXG.GeometryElement#transitionDuration
1246              * @see JXG.GeometryElement#strokeColor
1247              * @see JXG.GeometryElement#highlightStrokeColor
1248              * @see JXG.GeometryElement#strokeOpacity
1249              * @see JXG.GeometryElement#highlightStrokeOpacity
1250              * @see JXG.GeometryElement#fillColor
1251              * @see JXG.GeometryElement#highlightFillColor
1252              * @see JXG.GeometryElement#fillOpacity
1253              * @see JXG.GeometryElement#highlightFillOpacity
1254              * @default {@link JXG.Options.elements#transitionDuration}
1255              */
1256             transitionDuration: 100,
1257 
1258             /**
1259              * Width of the element's stroke.
1260              * @type Number
1261              * @name JXG.GeometryElement#strokeWidth
1262              * @see JXG.GeometryElement#strokeColor
1263              * @see JXG.GeometryElement#highlightStrokeColor
1264              * @see JXG.GeometryElement#strokeOpacity
1265              * @see JXG.GeometryElement#highlightStrokeOpacity
1266              * @default {@link JXG.Options.elements#strokeWidth}
1267              */
1268             strokeWidth: 2,
1269 
1270             /**
1271              * Width of the element's stroke when the mouse is pointed over it.
1272              * @type Number
1273              * @name JXG.GeometryElement#highlightStrokeWidth
1274              * @see JXG.GeometryElement#strokeColor
1275              * @see JXG.GeometryElement#highlightStrokeColor
1276              * @see JXG.GeometryElement#strokeOpacity
1277              * @see JXG.GeometryElement#highlightStrokeOpacity
1278              * @see JXG.GeometryElement#highlightFillColor
1279              * @default {@link JXG.Options.elements#strokeWidth}
1280              */
1281             highlightStrokeWidth: 2,
1282 
1283             /**
1284              * If true the element is fixed and can not be dragged around. The element
1285              * will be repositioned on zoom and moveOrigin events.
1286              * @type Boolean
1287              * @default false
1288              * @name JXG.GeometryElement#fixed
1289              */
1290             fixed: false,
1291 
1292             /**
1293              * If true the element is fixed and can not be dragged around. The element
1294              * will even stay at its position on zoom and moveOrigin events.
1295              * Only free elements like points, texts, curves can be frozen.
1296              * @type Boolean
1297              * @default false
1298              * @name JXG.GeometryElement#frozen
1299              */
1300             frozen: false,
1301 
1302             /**
1303              * If true a label will display the element's name.
1304              * @type Boolean
1305              * @default false
1306              * @name JXG.GeometryElement#withLabel
1307              */
1308             withLabel: false,
1309 
1310             /**
1311              * If false the element won't be visible on the board, otherwise it is shown.
1312              * @type Boolean
1313              * @name JXG.GeometryElement#visible
1314              * @see JXG.GeometryElement#hideElement
1315              * @see JXG.GeometryElement#showElement
1316              * @default true
1317              */
1318             visible: true,
1319 
1320             /**
1321              * A private element will be inaccessible in certain environments, e.g. a graphical user interface.
1322              * @default false
1323              */
1324             priv: false,
1325 
1326             /**
1327              * Display layer which will contain the element.
1328              * @see JXG.Options#layer
1329              * @default See {@link JXG.Options#layer}
1330              */
1331             layer: 0,
1332 
1333             /**
1334              * Determines the elements border-style.
1335              * Possible values are:
1336              * <ul><li>0 for a solid line</li>
1337              * <li>1 for a dotted line</li>
1338              * <li>2 for a line with small dashes</li>
1339 
1340 
1341              * <li>3 for a line with medium dashes</li>
1342              * <li>4 for a line with big dashes</li>
1343              * <li>5 for a line with alternating medium and big dashes and large gaps</li>
1344              * <li>6 for a line with alternating medium and big dashes and small gaps</li></ul>
1345              * @type Number
1346              * @name JXG.GeometryElement#dash
1347              * @default 0
1348              */
1349             dash: 0,
1350 
1351             /**
1352              * If true the element will get a shadow.
1353              * @type Boolean
1354              * @name JXG.GeometryElement#shadow
1355              * @default false
1356              */
1357             shadow: false,
1358 
1359             shadowColor: 'black',
1360 
1361             /**
1362              * If true the element will be traced, i.e. on every movement the element will be copied
1363              * to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements.
1364              *
1365              * The calling of element.setAttribute({trace:false}) additionally
1366              * deletes all traces of this element. By calling
1367              * element.setAttribute({trace:'pause'})
1368              * the removal of already existing traces can be prevented.
1369              * @see JXG.GeometryElement#clearTrace
1370              * @see JXG.GeometryElement#traces
1371              * @see JXG.GeometryElement#numTraces
1372              * @type Boolean|String
1373              * @default false
1374              * @name JXG.GeometryElement#trace
1375              */
1376             trace: false,
1377 
1378             /**
1379              * Extra visual properties for traces of an element
1380              * @type Object
1381              * @see JXG.GeometryElement#trace
1382              * @name JXG.GeometryElement#traceAttributes
1383              */
1384             traceAttributes: {},
1385 
1386             /**
1387              *
1388              * @type Boolean
1389              * @default true
1390              * @name JXG.GeometryElement#highlight
1391              */
1392             highlight: true,
1393 
1394             /**
1395              * If this is set to true, the element is updated in every update
1396              * call of the board. If set to false, the element is updated only after
1397              * zoom events or more generally, when the bounding box has been changed.
1398              * Examples for the latter behaviour should be axes.
1399              * @type Boolean
1400              * @default true
1401              * @see JXG.GeometryElement#needsRegularUpdate
1402              * @name JXG.GeometryElement#needsRegularUpdate
1403              */
1404             needsRegularUpdate: true,
1405 
1406             /**
1407              * Snaps the element or its parents to the grid. Currently only relevant for points, circles,
1408              * and lines. Points are snapped to grid directly, on circles and lines it's only the parent
1409              * points that are snapped
1410              * @type Boolean
1411              * @default false
1412              * @name JXG.GeometryElement#snapToGrid
1413              */
1414             snapToGrid: false,
1415 
1416             /**
1417              * Determines whether two-finger manipulation of this object may change its size.
1418              * If set to false, the object is only rotated and translated.
1419              * <p>
1420              * In case the element is a horizontal or vertical line having ticks, "scalable:true"
1421              * enables zooming of the board by dragging ticks lines. This feature is enabled,
1422              * for the ticks element of the line element the attribute "fixed" has to be false
1423              * and the line element's scalable attribute has to be true.
1424              * <p>
1425              * In case the element is a polygon or line and it has the attribute "scalable:false",
1426              * moving the element with two fingers results in a rotation or translation.
1427              * <p>
1428              * If an element is set to be neither scalable nor rotatable, it can only be translated.
1429              *
1430              * @type Boolean
1431              * @default true
1432              * @name JXG.GeometryElement#scalable
1433              * @see JXG.Ticks#fixed
1434              * @see JXG.GeometryElement#rotatable
1435              */
1436             scalable: true,
1437 
1438             /**
1439              * Determines whether two-finger manipulation may rotate this object.
1440              * If set to false, the object can only be scaled and translated.
1441              * <p>
1442              * In case the element is a polygon or line and it has the attribute "rotatable:false",
1443              * moving the element with two fingers results in a rotation or translation.
1444              * <p>
1445              * If an element is set to be neither scalable nor rotatable, it can only be translated.
1446              *
1447              * @type Boolean
1448              * @default true
1449              * @name JXG.GeometryElement#rotatable
1450              * @see JXG.GeometryElement#scalable
1451              */
1452             rotatable: true,
1453 
1454             /**
1455              * If the element is dragged it will be moved on mousedown or touchstart to the
1456              * top of its layer. Works only for SVG renderer and for simple elements
1457              * consisting of one SVG node.
1458              * @example
1459              * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
1460              * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});
1461              *
1462              * </pre><div id="JXG38449fee-1ab4-44de-b7d1-43caa1f50f86" class="jxgbox" style="width: 300px; height: 300px;"></div>
1463              * <script type="text/javascript">
1464              *     (function() {
1465              *         var board = JXG.JSXGraph.initBoard('JXG38449fee-1ab4-44de-b7d1-43caa1f50f86',
1466              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1467              *     var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
1468              *     var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});
1469              *
1470              *     })();
1471              *
1472              * </script><pre>
1473              *
1474              * @type Boolean
1475              * @default false
1476              * @name JXG.GeometryElement#dragToTopOfLayer
1477              */
1478             dragToTopOfLayer: false,
1479 
1480             /**
1481              * Precision options for JSXGraph elements.
1482              * This attributes takes either the value 'inherit' or an object of the form:
1483              * <pre>
1484              * precision: {
1485              *      touch: 30,
1486              *      mouse: 4,
1487              *      pen: 4
1488              * }
1489              * </pre>
1490              *
1491              * In the first case, the global, JSXGraph-wide values of JXGraph.Options.precision
1492              * are taken.
1493              *
1494              * @type {String|Object}
1495              * @name JXG.GeometryElement#precision
1496              * @see JXG.Options#precision
1497              * @default 'inherit'
1498              */
1499             precision: 'inherit',
1500 
1501             /*draft options */
1502             draft: {
1503                 /**
1504                  * If true the element will be drawn in grey scale colors to visualize that it's only a draft.
1505                  * @type Boolean
1506                  * @name JXG.GeometryElement#draft
1507                  * @default {@link JXG.Options.elements.draft#draft}
1508                  */
1509                 draft: false,
1510                 strokeColor: '#565656',
1511                 fillColor: '#565656',
1512                 strokeOpacity: 0.8,
1513                 fillOpacity: 0.8,
1514                 strokeWidth: 1
1515             },
1516 
1517             /**
1518              * @private
1519              * By default, an element is not a label. Do not change this.
1520              */
1521             isLabel: false,
1522 
1523             /**
1524              * Controls if an element can get the focus with the tab key.
1525              * tabindex corresponds to the HTML attribute of the same name.
1526              * See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">descriptiona at MDN</a>.
1527              * The additional value null completely disables focus of an element.
1528              * The value will be ignored if keyboard control of the board is not enabled or
1529              * the element is fixed or not visible.
1530              *
1531              * @name JXG.GeometryElement#tabindex
1532              * @type Number
1533              * @default 0
1534              * @see JXG.Board#keyboard
1535              * @see JXG.GeometryElement#fixed
1536              * @see JXG.GeometryElement#visible
1537              */
1538             tabindex: 0
1539 
1540             // close the meta tag
1541             /**#@-*/
1542         },
1543 
1544          /*
1545           *  Generic options used by {@link JXG.Ticks}
1546           */
1547         ticks: {
1548             /**#@+
1549              * @visprop
1550              */
1551 
1552             /**
1553              * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
1554              * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
1555              * The third parameter is a null, number or a string. In the latter two cases, this value is taken.
1556              * Returns a string.
1557              *
1558              * @type function
1559              * @name Ticks#generateLabelText
1560              */
1561             generateLabelText: null,
1562 
1563             /**
1564              * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
1565              * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
1566              *
1567              * @deprecated Use {@link JGX.Options@generateLabelText}
1568              * @type function
1569              * @name Ticks#generateLabelValue
1570              */
1571             generateLabelValue: null,
1572 
1573             /**
1574              * Draw labels yes/no
1575              *
1576              * @type Boolean
1577              * @name Ticks#drawLabels
1578              * @default false
1579              */
1580             drawLabels: false,
1581 
1582             /**
1583              * Attributes for the ticks labels
1584              *
1585              * @name Ticks#label
1586              * @type Object
1587              * @default {}
1588              *
1589              */
1590             label: {
1591             },
1592 
1593             /**
1594             * Format tick labels that were going to have scientific notation
1595             * like 5.00e+6 to look like 5•10⁶.
1596             *
1597             * @example
1598             * var board = JXG.JSXGraph.initBoard("jxgbox", {
1599             *     boundingbox: [-500000, 500000, 500000, -500000],
1600             *     axis: true,
1601             *     defaultAxes: {
1602             *         x: {
1603             *             scalable: true,
1604             *             ticks: {
1605             *                 beautifulScientificTickLabels: true
1606             *           },
1607             *         },
1608             *         y: {
1609             *             scalable: true,
1610             *             ticks: {
1611             *                 beautifulScientificTickLabels: true
1612             *           },
1613             *         }
1614             *     },
1615             * });
1616             *
1617             * </pre><div id="JXGc1e46cd1-e025-4002-80aa-b450869fdaa2" class="jxgbox" style="width: 300px; height: 300px;"></div>
1618             * <script type="text/javascript">
1619             *     (function() {
1620             *     var board = JXG.JSXGraph.initBoard('JXGc1e46cd1-e025-4002-80aa-b450869fdaa2', {
1621             *         boundingbox: [-500000, 500000, 500000, -500000],
1622             *         showcopyright: false, shownavigation: false,
1623             *         axis: true,
1624             *         defaultAxes: {
1625             *             x: {
1626             *                 scalable: true,
1627             *                 ticks: {
1628             *                     beautifulScientificTickLabels: true
1629             *               },
1630             *             },
1631             *             y: {
1632             *                 scalable: true,
1633             *                 ticks: {
1634             *                     beautifulScientificTickLabels: true
1635             *               },
1636             *             }
1637             *         },
1638             *     });
1639             *
1640             *     })();
1641             *
1642             * </script><pre>
1643             *
1644             * @name Ticks#beautifulScientificTickLabels
1645             * @type Boolean
1646             * @default false
1647             */
1648             beautifulScientificTickLabels: false,
1649 
1650             /**
1651              * Use the unicode character 0x2212, i.e. the HTML entity &minus; as minus sign.
1652              * That is −1 instead of -1.
1653              *
1654              * @type Boolean
1655              * @name Ticks#useUnicodeMinus
1656              * @default true
1657              */
1658             useUnicodeMinus: true,
1659 
1660             /**
1661              * Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2,
1662              * and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent
1663              * line is of type axis.
1664              *
1665              * @type String
1666              * @name Ticks#anchor
1667              * @default 'left'
1668              */
1669             anchor: 'left',
1670 
1671             /**
1672              * Draw the zero tick, that lies at line.point1?
1673              *
1674              * @type Boolean
1675              * @name Ticks#drawZero
1676              * @default false
1677              */
1678             drawZero: false,
1679 
1680             /**
1681              * If the distance between two ticks is too big we could insert new ticks. If insertTicks
1682              * is <tt>true</tt>, we'll do so, otherwise we leave the distance as is.
1683              * This option is ignored if equidistant is false. In the example below the distance between
1684              * two ticks is given as <tt>1</tt> but because insertTicks is set to true many ticks will
1685              * be omitted in the rendering process to keep the display clear.
1686              *
1687              * @type Boolean
1688              * @name Ticks#insertTicks
1689              * @see Ticks#minTicksDistance
1690              * @default false
1691              * @example
1692              * // Create an axis providing two coord pairs.
1693              *   var p1 = board.create('point', [0, 0]);
1694              *   var p2 = board.create('point', [50, 25]);
1695              *   var l1 = board.create('line', [p1, p2]);
1696              *   var t = board.create('ticks', [l1, 1], {
1697              *      insertTicks: true,
1698              *      majorHeight: -1,
1699              *      label: {
1700              *          offset: [4, -9]
1701              *      },
1702              *      drawLabels: true
1703              *  });
1704              * </pre><div class="jxgbox" id="JXG2f6fb842-40bd-4223-aa28-3e9369d2097f" style="width: 300px; height: 300px;"></div>
1705              * <script type="text/javascript">
1706              * (function () {
1707              *   var board = JXG.JSXGraph.initBoard('JXG2f6fb842-40bd-4223-aa28-3e9369d2097f', {boundingbox: [-100, 70, 70, -100], showcopyright: false, shownavigation: false});
1708              *   var p1 = board.create('point', [0, 0]);
1709              *   var p2 = board.create('point', [50, 25]);
1710              *   var l1 = board.create('line', [p1, p2]);
1711              *   var t = board.create('ticks', [l1, 1], {insertTicks: true, majorHeight: -1, label: {offset: [4, -9]}, drawLabels: true});
1712              * })();
1713              * </script><pre>
1714              */
1715             insertTicks: false,
1716 
1717             /**
1718              * Minimum distance in pixel of equidistant ticks in case insertTicks==true.
1719              * @name Ticks#minTicksDistance
1720              * @type: Number
1721              * @default: 10
1722              * @see Ticks#insertTicks
1723              */
1724             minTicksDistance: 10,
1725 
1726             /**
1727              * Total height of a minor tick. If negative the full height of the board is taken.
1728              *
1729              * @type Number
1730              * @name Ticks#minorHeight
1731              * @default 4
1732              */
1733             minorHeight: 4,
1734 
1735             /**
1736              * Total height of a major tick. If negative the full height of the board is taken.
1737              *
1738              * @type Number
1739              * @name Ticks#majorHeight
1740              * @default 10
1741              */
1742             majorHeight: 10,
1743 
1744             /**
1745              * Decides in which direction finite ticks are visible. Possible values are either the constants
1746              * 0=false or 1=true or a function returning 0 or 1.
1747              *
1748              * In case of [0,1] the tick is only visible to the right of the line. In case of
1749              * [1,0] the tick is only visible to the left of the line.
1750              *
1751              * @type Array
1752              * @name Ticks#tickEndings
1753              * @default [1, 1]
1754              */
1755             tickEndings: [1, 1],
1756 
1757             /**
1758              * The number of minor ticks between two major ticks.
1759              * @type Number
1760              * @name Ticks#minorTicks
1761              * @default 4
1762              */
1763             minorTicks: 4,
1764 
1765             /**
1766              * By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only.
1767              * If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks
1768              * between two labels.
1769              *
1770              * @type {Number|Boolean}
1771              * @name Ticks#ticksPerLabel
1772              * @default false
1773              *
1774              * @example
1775              * const board = JXG.JSXGraph.initBoard('jxgbox', {
1776              *     boundingbox: [-4, 4, 4, -4],
1777              *     axis: true,
1778              *     defaultAxes: {
1779              *         x: {
1780              *             ticks: {
1781              *                 minorTicks: 7,
1782              *                 ticksPerLabel: 4,
1783              *                 minorHeight: 20,
1784              *             }
1785              *         },
1786              *         y: {
1787              *             ticks: {
1788              *                 minorTicks: 3,
1789              *                 ticksPerLabel: 2,
1790              *                 minorHeight: 20
1791              *             }
1792              *         }
1793              *     }
1794              * });
1795              *
1796              * </pre><div id="JXGbc45a421-c867-4b0a-9b8d-2b2576020690" class="jxgbox" style="width: 300px; height: 300px;"></div>
1797              * <script type="text/javascript">
1798              *     (function() {
1799              *         var board = JXG.JSXGraph.initBoard('JXGbc45a421-c867-4b0a-9b8d-2b2576020690',
1800              *             {showcopyright: false, shownavigation: false,
1801              *              boundingbox: [-4, 4, 4, -4],
1802              *         axis: true,
1803              *         defaultAxes: {
1804              *             x: {
1805              *                 ticks: {
1806              *                     minorTicks: 7,
1807              *                     ticksPerLabel: 4,
1808              *                     minorHeight: 20,
1809              *                 }
1810              *             },
1811              *             y: {
1812              *                 ticks: {
1813              *                     minorTicks: 3,
1814              *                     ticksPerLabel: 2,
1815              *                     minorHeight: 20
1816              *                 }
1817              *             }
1818              *         }
1819              *     });
1820              *     })();
1821              *
1822              * </script><pre>
1823              */
1824             ticksPerLabel: false,
1825 
1826             /**
1827              * Scale the ticks but not the tick labels.
1828              * @type Number
1829              * @default 1
1830              * @name Ticks#scale
1831              * @see Ticks#scaleSymbol
1832              */
1833             scale: 1,
1834 
1835             /**
1836              * A string that is appended to every tick, used to represent the scale
1837              * factor given in {@link Ticks#scaleSymbol}.
1838              *
1839              * @type String
1840              * @default ''
1841              * @name Ticks#scaleSymbol
1842              * @see Ticks#scale
1843              */
1844             scaleSymbol: '',
1845 
1846             /**
1847              * User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array
1848              * is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is
1849              * shown as a fallback.
1850              *
1851              * @type Array
1852              * @name Ticks#labels
1853              * @default []
1854              */
1855             labels: [],
1856 
1857             /**
1858              * The maximum number of characters a tick label can use.
1859              *
1860              * @type Number
1861              * @name Ticks#maxLabelLength
1862              * @see Ticks#precision
1863              * @default 5
1864              */
1865             maxLabelLength: 5,
1866 
1867             /**
1868              * If a label exceeds {@link Ticks#maxLabelLength} this determines the precision used to shorten the tick label.
1869              * Replaced by the digits attribute.
1870              *
1871              * @type Number
1872              * @name Ticks#precision
1873              * @see Ticks#maxLabelLength
1874              * @see Ticks#digits
1875              * @deprecated
1876              * @default 3
1877              */
1878             precision: 3,
1879 
1880             /**
1881              * If a label exceeds {@link Ticks#maxLabelLength} this determines the number of digits used to shorten the tick label.
1882              *
1883              * @type Number
1884              * @name Ticks#digits
1885              * @see Ticks#maxLabelLength
1886              * @deprecated
1887              * @default 3
1888              */
1889             digits: 3,
1890 
1891             /**
1892              * The default distance (in user coordinates, not  pixels) between two ticks. Please be aware that this value does not have
1893              * to be used if {@link Ticks#insertTicks} is set to true.
1894              *
1895              * @type Number
1896              * @name Ticks#ticksDistance
1897              * @see Ticks#insertTicks
1898              * @default 1
1899              */
1900             ticksDistance: 1,
1901 
1902             /**
1903              * Tick face for ticks of finite length.  By default (face: '|') this is a straight line.
1904              * Possible other values are '<' and '>'. These faces are used in
1905              * {@link JXG.Hatch} for hatch marking parallel lines.
1906              * @type String
1907              * @name{Ticks#face}
1908              * @see hatch
1909              * @default '|'
1910              * @example
1911              *   var p1 = board.create('point', [0, 3]);
1912              *   var p2 = board.create('point', [1, 3]);
1913              *   var l1 = board.create('line', [p1, p2]);
1914              *   var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'});
1915              *
1916              * </pre><div id="JXG950a568a-1264-4e3a-b61d-b6881feecf4b" class="jxgbox" style="width: 300px; height: 300px;"></div>
1917              * <script type="text/javascript">
1918              *     (function() {
1919              *         var board = JXG.JSXGraph.initBoard('JXG950a568a-1264-4e3a-b61d-b6881feecf4b',
1920              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1921              *       var p1 = board.create('point', [0, 3]);
1922              *       var p2 = board.create('point', [1, 3]);
1923              *       var l1 = board.create('line', [p1, p2]);
1924              *       var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'});
1925              *
1926              *     })();
1927              *
1928              * </script><pre>
1929              *
1930              */
1931             face: '|',
1932 
1933             strokeOpacity: 1,
1934             strokeWidth: 1,
1935             strokeColor: '#000000',
1936             highlightStrokeColor: '#888888',
1937             fillColor: 'none',
1938             highlightFillColor: 'none',
1939             visible: 'inherit',
1940 
1941             /**
1942              * Whether line boundaries should be counted or not in the lower and upper bounds when
1943              * creating ticks.
1944              *
1945              * @type Boolean
1946              * @name Ticks#includeBoundaries
1947              * @default false
1948              */
1949             includeBoundaries: false,
1950 
1951             /**
1952              * Set the ticks type.
1953              * Possible values are 'linear' or 'polar'.
1954              *
1955              * @type String
1956              * @name Ticks#type
1957              * @default 'linear'
1958              */
1959             type: 'linear'
1960 
1961             // close the meta tag
1962             /**#@-*/
1963         },
1964 
1965          /*
1966           *  Generic options used by {@link JXG.Hatch}
1967           */
1968         hatch: {
1969             drawLabels: false,
1970             drawZero: true,
1971             majorHeight: 20,
1972             anchor: 'middle',
1973             face: '|',
1974             strokeWidth: 2,
1975             strokeColor: Color.palette.blue,
1976             ticksDistance: 0.2
1977         },
1978 
1979         /**
1980          * Precision options, defining how close a pointer device (mouse, finger, pen) has to be
1981          * to an object such that the object is highlighted or can be dragged.
1982          * These values are board-wide and can be overwritten for individual elements by
1983          * changing their precision attribute.
1984          *
1985          * The default values are
1986          * <pre>
1987          * JXG.Options.precision: {
1988          *   touch: 30,
1989          *   touchMax: 100,
1990          *   mouse: 4,
1991          *   pen: 4,
1992          *   epsilon: 0.0001,
1993          *   hasPoint: 4
1994          * }
1995          * </pre>
1996          *
1997          * @type Object
1998          * @name JXG.Options#precision
1999          * @see JXG.GeometryElement#precision
2000          */
2001         precision: {
2002             touch: 30,
2003             touchMax: 100,
2004             mouse: 4,
2005             pen: 4,
2006             epsilon: 0.0001, // Unused
2007             hasPoint: 4
2008         },
2009 
2010         /**
2011          * Default ordering of the layers.
2012          * The numbering starts from 0 and the highest layer number is numlayers-1.
2013          *
2014          * The default values are
2015          * <pre>
2016          * JXG.Options.layer: {
2017          *   numlayers: 20, // only important in SVG
2018          *   text: 9,
2019          *   point: 9,
2020          *   glider: 9,
2021          *   arc: 8,
2022          *   line: 7,
2023          *   circle: 6,
2024          *   curve: 5,
2025          *   turtle: 5,
2026          *   polygon: 3,
2027          *   sector: 3,
2028          *   angle: 3,
2029          *   integral: 3,
2030          *   axis: 2,
2031          *   ticks: 2,
2032          *   grid: 1,
2033          *   image: 0,
2034          *   trace: 0
2035          * }
2036          * </pre>
2037          * @type Object
2038          * @name JXG.Options#layer
2039          */
2040         layer: {
2041             numlayers: 20, // only important in SVG
2042             unused9: 19,
2043             unused8: 18,
2044             unused7: 17,
2045             unused6: 16,
2046             unused5: 15,
2047             unused4: 14,
2048             unused3: 13,
2049             unused2: 12,
2050             unused1: 11,
2051             unused0: 10,
2052             text: 9,
2053             point: 9,
2054             glider: 9,
2055             arc: 8,
2056             line: 7,
2057             circle: 6,
2058             curve: 5,
2059             turtle: 5,
2060             polygon: 3,
2061             sector: 3,
2062             angle: 3,
2063             integral: 3,
2064             axis: 2,
2065             ticks: 2,
2066             grid: 1,
2067             image: 0,
2068             trace: 0
2069         },
2070 
2071         /* special angle options */
2072         angle: {
2073             /**#@+
2074              * @visprop
2075              */
2076 
2077             withLabel: true,
2078 
2079             /**
2080              * Radius of the sector, displaying the angle.
2081              * The radius can be given as number (in user coordinates)
2082              * or as string 'auto'. In the latter case, the angle
2083              * is set to an value between 20 and 50 px.
2084              *
2085              * @type {Number|String}
2086              * @name Angle#radius
2087              * @default 'auto'
2088              * @visprop
2089              */
2090             radius: 'auto',
2091 
2092             /**
2093              * Display type of the angle field. Possible values are
2094              * 'sector' or 'sectordot' or 'square' or 'none'.
2095              *
2096              * @type String
2097              * @default 'sector'
2098              * @name Angle#type
2099              * @visprop
2100              */
2101             type: 'sector',
2102 
2103             /**
2104              * Display type of the angle field in case of a right angle. Possible values are
2105              * 'sector' or 'sectordot' or 'square' or 'none'.
2106              *
2107              * @type String
2108              * @default square
2109              * @name Angle#orthoType
2110              * @see Angle#orthoSensitivity
2111              * @visprop
2112              */
2113             orthoType: 'square',
2114 
2115             /**
2116              * Sensitivity (in degrees) to declare an angle as right angle.
2117              * If the angle measure is inside this distance from a rigth angle, the orthoType
2118              * of the angle is used for display.
2119              *
2120              * @type Number
2121              * @default 1.0
2122              * @name Angle#orthoSensitivity
2123              * @see Angle#orthoType
2124              * @visprop
2125              */
2126             orthoSensitivity: 1.0,
2127 
2128             fillColor: Color.palette.orange,
2129             highlightFillColor: Color.palette.orange,
2130             strokeColor: Color.palette.orange,
2131             // fillColor: '#ff7f00',
2132             // highlightFillColor: '#ff7f00',
2133             // strokeColor: '#ff7f00',
2134 
2135             fillOpacity: 0.3,
2136             highlightFillOpacity: 0.3,
2137 
2138             /**
2139              * @deprecated
2140              */
2141             radiuspoint: {
2142                 withLabel: false,
2143                 visible: false,
2144                 name: ''
2145             },
2146 
2147             /**
2148              * @deprecated
2149              */
2150             pointsquare: {
2151                 withLabel: false,
2152                 visible: false,
2153                 name: ''
2154             },
2155 
2156             dot: {
2157                 visible: false,
2158                 strokeColor: 'none',
2159                 fillColor: '#000000',
2160                 size: 2,
2161                 face: 'o',
2162                 withLabel: false,
2163                 name: ''
2164             },
2165 
2166             label: {
2167                 position: 'top',
2168                 offset: [0, 0],
2169                 strokeColor: Color.palette.blue
2170             },
2171 
2172             /**
2173              * Attributes for sub-element arc. In general, the arc will run through the first point and
2174              * thus will not have the same radius as the angle sector.
2175              *
2176              * @type Arc
2177              * @name Angle#arc
2178              * @default '{visible:false}'
2179              */
2180             arc: {
2181                 visible: false,
2182                 fillColor: 'none'
2183             },
2184 
2185             /**#@-*/
2186         },
2187 
2188         /* special arc options */
2189         arc: {
2190             /**#@+
2191              * @visprop
2192              */
2193 
2194             /**
2195              * Type of arc. Possible values are 'minor', 'major', and 'auto'.
2196              *
2197              * @type String
2198              * @name Arc#selection
2199              * @default 'auto'
2200              */
2201             selection: 'auto',
2202 
2203             /**
2204              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
2205              *
2206              * @see JXG.GeometryElement#hasPoint
2207              * @name Arc#hasInnerPoints
2208              * @type Boolean
2209              * @default false
2210              */
2211             hasInnerPoints: false,
2212 
2213             label: {
2214                 anchorX: 'auto',
2215                 anchorY: 'auto'
2216             },
2217             firstArrow: false,
2218             lastArrow: false,
2219             fillColor: 'none',
2220             highlightFillColor: 'none',
2221             strokeColor: Color.palette.blue,
2222             highlightStrokeColor: '#c3d9ff',
2223             useDirection: false,
2224 
2225             /**
2226              * Attributes for center point.
2227              *
2228              * @type Point
2229              * @name Arc#center
2230              */
2231             center: {
2232             },
2233 
2234             /**
2235              * Attributes for radius point.
2236              *
2237              * @type Point
2238              * @name Arc#radiusPoint
2239              */
2240             radiusPoint: {
2241             },
2242 
2243             /**
2244              * Attributes for angle point.
2245              *
2246              * @type Point
2247              * @name Arc#anglePoint
2248              */
2249             anglePoint: {
2250             }
2251 
2252             /**#@-*/
2253         },
2254 
2255         /* special arrow options */
2256         arrow: {
2257             /**#@+
2258              * @visprop
2259              */
2260 
2261             firstArrow: false,
2262 
2263             lastArrow: {
2264                 type: 1,
2265                 highlightSize: 6,
2266                 size: 6
2267             }
2268 
2269             /**#@-*/
2270         },
2271 
2272         /* special axis options */
2273         axis: {
2274             /**#@+
2275              * @visprop
2276              */
2277 
2278             name: '',                            // By default, do not generate names for axes.
2279             needsRegularUpdate: false,           // Axes only updated after zooming and moving of the origin.
2280             strokeWidth: 1,
2281             lastArrow: {
2282                 type: 1,
2283                 highlightSize: 8,
2284                 size: 8
2285             },
2286             strokeColor: '#666666',
2287             highlightStrokeWidth: 1,
2288             highlightStrokeColor: '#888888',
2289 
2290 
2291             /**
2292              * Show / hide ticks.
2293              *
2294              * Deprecated. Suggested alternative is "ticks: {visible: false}"
2295              *
2296              * @type Boolean
2297              * @name Axis#withTicks
2298              * @default true
2299              * @deprecated
2300              */
2301             withTicks: true,
2302             straightFirst: true,
2303             straightLast: true,
2304             margin: -4,
2305             withLabel: false,
2306             scalable: false,
2307 
2308             /**
2309              * Attributes for ticks of the axis.
2310              *
2311              * @type Ticks
2312              * @name Axis#ticks
2313              */
2314             ticks: {
2315                 label: {
2316                     offset: [4, -12 + 3],     // This seems to be a good offset for 12 point fonts
2317                     parse: false,
2318                     needsRegularUpdate: false,
2319                     display: 'internal',
2320                     visible: 'inherit',
2321                     layer: 9
2322                 },
2323                 visible: 'inherit',
2324                 needsRegularUpdate: false,
2325                 strokeWidth: 1,
2326                 strokeColor: '#666666',
2327                 highlightStrokeColor: '#888888',
2328                 drawLabels: true,
2329                 drawZero: false,
2330                 insertTicks: true,
2331                 minTicksDistance: 5,
2332                 minorHeight: 10,          // if <0: full width and height
2333                 majorHeight: -1,          // if <0: full width and height
2334                 tickEndings: [0, 1],
2335                 minorTicks: 4,
2336                 ticksDistance: 1,         // TODO doc
2337                 strokeOpacity: 0.25
2338             },
2339 
2340             /**
2341              * Attributes for first point the axis.
2342              *
2343              * @type Point
2344              * @name Axis#point1
2345              */
2346             point1: {                  // Default values for point1 if created by line
2347                 needsRegularUpdate: false,
2348                 visible: false
2349             },
2350 
2351             /**
2352              * Attributes for second point the axis.
2353              *
2354              * @type Point
2355              * @name Axis#point2
2356              */
2357             point2: {                  // Default values for point2 if created by line
2358                 needsRegularUpdate: false,
2359                 visible: false
2360             },
2361 
2362             tabindex: -1,
2363 
2364             /**
2365              * Attributes for the axis label.
2366              *
2367              * @type Label
2368              * @name Axis#label
2369              */
2370             label: {
2371                 position: 'lft',
2372                 offset: [10, 10]
2373             }
2374             /**#@-*/
2375         },
2376 
2377         /* special options for angle bisector of 3 points */
2378         bisector: {
2379             /**#@+
2380              * @visprop
2381              */
2382 
2383             strokeColor: '#000000', // Bisector line
2384 
2385             /**
2386              * Attributes for the helper point of the bisector.
2387              *
2388              * @type Point
2389              * @name Bisector#point
2390              */
2391             point: {               // Bisector point
2392                 visible: false,
2393                 fixed: false,
2394                 withLabel: false,
2395                 name: ''
2396             }
2397 
2398             /**#@-*/
2399         },
2400 
2401         /* special options for the 2 bisectors of 2 lines */
2402         bisectorlines: {
2403             /**#@+
2404              * @visprop
2405              */
2406 
2407             /**
2408              * Attributes for first line.
2409              *
2410              * @type Line
2411              * @name Bisectorlines#line1
2412              */
2413             line1: {               //
2414                 strokeColor: '#000000'
2415             },
2416 
2417             /**
2418              * Attributes for second line.
2419              *
2420              * @type Line
2421              * @name Bisectorlines#line2
2422              */
2423             line2: {               //
2424                 strokeColor: '#000000'
2425             }
2426 
2427             /**#@-*/
2428         },
2429 
2430         /* special options for boxplot curves */
2431         boxplot: {
2432             /**#@+
2433              * @visprop
2434              */
2435 
2436             /**
2437              *  Direction of the box plot: 'vertical' or 'horizontal'
2438              *
2439              * @type String
2440              * @name Boxplot#dir
2441              * @default: 'vertical'
2442              */
2443             dir: 'vertical',
2444 
2445             /**
2446              * Relative width of the maximum and minimum quantile
2447              *
2448              * @type Number
2449              * @name Boxplot#smallWidth
2450              * @default: 0.5
2451              */
2452             smallWidth: 0.5,
2453 
2454             strokeWidth: 2,
2455             strokeColor: Color.palette.blue,
2456             fillColor: Color.palette.blue,
2457             fillOpacity: 0.2,
2458             highlightStrokeWidth: 2,
2459             highlightStrokeColor: Color.palette.blue,
2460             highlightFillColor: Color.palette.blue,
2461             highlightFillOpacity: 0.1
2462 
2463             /**#@-*/
2464         },
2465 
2466         /* special button options */
2467         button: {
2468             /**#@+
2469              * @visprop
2470              */
2471 
2472             /**
2473              * Control the attribute "disabled" of the HTML button.
2474              *
2475              * @name disabled
2476              * @memberOf Button.prototype
2477              *
2478              * @type Boolean
2479              * @default false
2480              */
2481             disabled: false,
2482 
2483             display: 'html'
2484 
2485             /**#@-*/
2486         },
2487 
2488         /* special cardinal spline options */
2489         cardinalspline: {
2490             /**#@+
2491              * @visprop
2492              */
2493 
2494              /**
2495               * Controls if the data points of the cardinal spline when given as
2496               * arrays should be converted into {@link JXG.Points}.
2497               *
2498               * @name createPoints
2499               * @memberOf Cardinalspline.prototype
2500               *
2501               * @see Cardinalspline#points
2502               *
2503               * @type Boolean
2504               * @default true
2505               */
2506             createPoints: true,
2507 
2508             /**
2509              * If set to true, the supplied coordinates are interpreted as
2510              * [[x_0, y_0], [x_1, y_1], p, ...].
2511              * Otherwise, if the data consists of two arrays of equal length,
2512              * it is interpreted as
2513              * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]]
2514              *
2515              * @name isArrayOfCoordinates
2516              * @memberOf Cardinalspline.prototype
2517              * @type Boolean
2518              * @default false
2519              */
2520             isArrayOfCoordinates: false,
2521 
2522             /**
2523              * Attributes for the points generated by Cardinalspline in cases
2524              * {@link createPoints} is set to true
2525              *
2526              * @name points
2527              * @memberOf Cardinalspline.prototype
2528              *
2529              * @see Cardinalspline#createPoints
2530              * @type Object
2531              */
2532             points: {
2533                 strokeOpacity: 0.05,
2534                 fillOpacity: 0.05,
2535                 highlightStrokeOpacity: 1.0,
2536                 highlightFillOpacity: 1.0,
2537                 withLabel: false,
2538                 name: '',
2539                 fixed: false
2540             }
2541 
2542             /**#@-*/
2543         },
2544 
2545         /* special chart options */
2546         chart: {
2547             /**#@+
2548              * @visprop
2549              */
2550 
2551             chartStyle: 'line',
2552             colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
2553             highlightcolors: null,
2554             fillcolor: null,
2555             highlightonsector: false,
2556             highlightbysize: false,
2557 
2558             fillOpacity: 0.6,
2559             withLines:  false,
2560 
2561             label: {
2562             }
2563             /**#@-*/
2564         },
2565 
2566         /* special html slider options */
2567         checkbox: {
2568             /**#@+
2569              * @visprop
2570              */
2571 
2572             /**
2573              * Control the attribute "disabled" of the HTML checkbox.
2574              *
2575              * @name disabled
2576              * @memberOf Checkbox.prototype
2577              *
2578              * @type Boolean
2579              * @default false
2580              */
2581             disabled: false,
2582 
2583             /**
2584              * Control the attribute "checked" of the HTML checkbox.
2585              *
2586              * @name checked
2587              * @memberOf Checkbox.prototype
2588              *
2589              * @type Boolean
2590              * @default false
2591              */
2592             checked: false,
2593 
2594             display: 'html'
2595 
2596             /**#@-*/
2597         },
2598 
2599         /*special circle options */
2600         circle: {
2601             /**#@+
2602              * @visprop
2603              */
2604 
2605             /**
2606              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
2607              *
2608              * @see JXG.GeometryElement#hasPoint
2609              * @name Circle#hasInnerPoints
2610              * @type Boolean
2611              * @default false
2612              */
2613             hasInnerPoints: false,
2614 
2615             fillColor: 'none',
2616             highlightFillColor: 'none',
2617             strokeColor: Color.palette.blue,
2618             highlightStrokeColor: '#c3d9ff',
2619 
2620             /**
2621              * Attributes for center point.
2622              *
2623              * @type Point
2624              * @name Circle#center
2625              */
2626             center: {
2627                 visible: false,
2628                 withLabel: false,
2629                 fixed: false,
2630 
2631                 fillColor: Color.palette.red,
2632                 strokeColor: Color.palette.red,
2633                 highlightFillColor: '#c3d9ff',
2634                 highlightStrokeColor: '#c3d9ff',
2635 
2636                 name: ''
2637             },
2638 
2639             /**
2640              * Attributes for center point.
2641              *
2642              * @type Point
2643              * @name Circle#center
2644              */
2645             point2: {
2646                 visible: false,
2647                 withLabel: false,
2648                 fixed: false,
2649                 name: ''
2650             },
2651 
2652             /**
2653              * Attributes for circle label.
2654              *
2655              * @type Label
2656              * @name Circle#label
2657              */
2658             label: {
2659                 position: 'urt'
2660             }
2661             /**#@-*/
2662         },
2663 
2664         /* special options for circumcircle of 3 points */
2665         circumcircle: {
2666             /**#@+
2667              * @visprop
2668              */
2669 
2670             fillColor: 'none',
2671             highlightFillColor: 'none',
2672             strokeColor: Color.palette.blue,
2673             highlightStrokeColor: '#c3d9ff',
2674 
2675             /**
2676              * Attributes for center point.
2677              *
2678              * @type Point
2679              * @name Circumcircle#center
2680              */
2681             center: {               // center point
2682                 visible: false,
2683                 fixed: false,
2684                 withLabel: false,
2685                 fillColor: Color.palette.red,
2686                 strokeColor: Color.palette.red,
2687                 highlightFillColor: '#c3d9ff',
2688                 highlightStrokeColor: '#c3d9ff',
2689                 name: ''
2690             }
2691             /**#@-*/
2692         },
2693 
2694         circumcirclearc: {
2695             /**#@+
2696              * @visprop
2697              */
2698 
2699             fillColor: 'none',
2700             highlightFillColor: 'none',
2701             strokeColor: Color.palette.blue,
2702             highlightStrokeColor: '#c3d9ff',
2703 
2704             /**
2705              * Attributes for center point.
2706              *
2707              * @type Point
2708              * @name CircumcircleArc#center
2709              */
2710             center: {
2711                 visible: false,
2712                 withLabel: false,
2713                 fixed: false,
2714                 name: ''
2715             }
2716             /**#@-*/
2717         },
2718 
2719         /* special options for circumcircle sector of 3 points */
2720         circumcirclesector: {
2721             /**#@+
2722              * @visprop
2723              */
2724 
2725             useDirection: true,
2726             fillColor: Color.palette.yellow,
2727             highlightFillColor: Color.palette.yellow,
2728             fillOpacity: 0.3,
2729             highlightFillOpacity: 0.3,
2730             strokeColor: Color.palette.blue,
2731             highlightStrokeColor: '#c3d9ff',
2732 
2733             /**
2734              * Attributes for center point.
2735              *
2736              * @type Point
2737              * @name Circle#point
2738              */
2739             point: {
2740                 visible: false,
2741                 fixed: false,
2742                 withLabel: false,
2743                 name: ''
2744             }
2745             /**#@-*/
2746         },
2747 
2748         /* special conic options */
2749         conic: {
2750             /**#@+
2751              * @visprop
2752              */
2753 
2754             fillColor: 'none',
2755             highlightFillColor: 'none',
2756             strokeColor: Color.palette.blue,
2757             highlightStrokeColor: '#c3d9ff',
2758 
2759             /**
2760              * Attributes for foci points.
2761              *
2762              * @type Point
2763              * @name Conic#foci
2764              */
2765             foci: {
2766                 // points
2767                 fixed: false,
2768                 visible: false,
2769                 withLabel: false,
2770                 name: ''
2771             },
2772 
2773             /**
2774              * Attributes for center point.
2775              *
2776              * @type Point
2777              * @name Conic#center
2778              */
2779             center: {
2780                 visible: false,
2781                 withLabel: false,
2782                 name: ''
2783             },
2784 
2785             /**
2786              * Attributes for five points defining the conic, if some of them are given as coordinates.
2787              *
2788              * @type Point
2789              * @name Conic#point
2790              */
2791             point: {
2792                 withLabel: false,
2793                 name: ''
2794             },
2795 
2796             /**
2797              * Attributes for parabola line in case the line is given by two
2798              * points or coordinate pairs.
2799              *
2800              * @type Line
2801              * @name Conic#line
2802              */
2803             line: {
2804                 visible: false
2805             }
2806 
2807             /**#@-*/
2808         },
2809 
2810         /* special curve options */
2811         curve: {
2812             strokeWidth: 1,
2813             strokeColor: Color.palette.blue,
2814             fillColor: 'none',
2815             fixed: true,
2816 
2817             useQDT: false,
2818 
2819             /**#@+
2820              * @visprop
2821              */
2822 
2823             /**
2824              * The data points of the curve are not connected with straight lines but with bezier curves.
2825              * @name Curve#handDrawing
2826              * @type Boolean
2827              * @default false
2828              */
2829             handDrawing: false,
2830 
2831             /**
2832              * The curveType is set in {@link JXG.Curve#generateTerm} and used in {@link JXG.Curve#updateCurve}.
2833              * Possible values are <ul>
2834              * <li>'none'</li>
2835              * <li>'plot': Data plot</li>
2836              * <li>'parameter': we can not distinguish function graphs and parameter curves</li>
2837              * <li>'functiongraph': function graph</li>
2838              * <li>'polar'</li>
2839              * <li>'implicit' (not yet)</li></ul>
2840              * Only parameter and plot are set directly. Polar is set with {@link JXG.GeometryElement#setAttribute} only.
2841              * @name Curve#curveType
2842              * @type String
2843              * @default null
2844              */
2845             curveType: null,
2846 
2847             /**
2848              * Apply Ramer-Douglas-Peuker smoothing.
2849              *
2850              * @type Boolean
2851              * @name Curve#RDPsmoothing
2852              * @default false
2853              */
2854             RDPsmoothing: false,     // Apply the Ramer-Douglas-Peuker algorithm
2855 
2856             /**
2857              * Number of points used for plotting triggered by up events
2858              * (i.e. high quality plotting) in case
2859              * {@link Curve#doAdvancedPlot} is false.
2860              *
2861              * @name Curve#numberPointsHigh
2862              * @see Curve#doAdvancedPlot
2863              * @type Number
2864              * @default 1600
2865              */
2866             numberPointsHigh: 1600,  // Number of points on curves after mouseUp
2867 
2868             /**
2869              * Number of points used for plotting triggered by move events
2870              * (i.e. lower quality plotting but fast) in case
2871              * {@link Curve#doAdvancedPlot} is false.
2872              *
2873              * @name Curve#numberPointsLow
2874              * @see Curve#doAdvancedPlot
2875              * @type Number
2876              * @default 400
2877              */
2878             numberPointsLow: 400,    // Number of points on curves after mousemove
2879 
2880             /**
2881              * If true use a recursive bisection algorithm.
2882              * It is slower, but usually the result is better. It tries to detect jumps
2883              * and singularities.
2884              *
2885              * @name Curve#doAdvancedPlot
2886              * @type Boolean
2887              * @default true
2888              */
2889             doAdvancedPlot: true,
2890 
2891             /**
2892              *
2893              * Recursion depth used for plotting triggered by up events
2894              * (i.e. high quality plotting) in case
2895              * {@link Curve#doAdvancedPlot} is true.
2896              *
2897              * @name Curve#recursionDepthHigh
2898              * @see Curve#doAdvancedPlot
2899              * @type Number
2900              * @default 17
2901              */
2902              recursionDepthHigh: 17,
2903 
2904             /**
2905              * Number of points used for plotting triggered by move events in case
2906              * (i.e. lower quality plotting but fast)
2907              * {@link Curve#doAdvancedPlot} is true.
2908              *
2909              * @name Curve#recursionDepthLow
2910              * @see Curve#doAdvancedPlot
2911              * @type Number
2912              * @default 13
2913              */
2914              recursionDepthLow: 15,
2915 
2916             /**
2917              * If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98.
2918              *
2919              * @name Curve#doAdvancedPlotOld
2920              * @see Curve#doAdvancedPlot
2921              * @type Boolean
2922              * @default false
2923              * @deprecated
2924              */
2925             doAdvancedPlotOld: false,   // v1
2926 
2927             /**
2928              * Select the version of the plot algorithm.
2929              * <ul>
2930              * <li> Version 1 is very outdated
2931              * <li> Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0
2932              * <li> Version 3 is an internal version that was never published in  a stable version.
2933              * <li> Version 4 is available since JSXGraph v1.2.0
2934              * </ul>
2935              * Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode)
2936              *
2937              * @example
2938              *   var c = board.create('functiongraph', ["log(x)"]);
2939              *
2940              * @name Curve#plotVersion
2941              * @type Number
2942              * @default 2
2943              */
2944             plotVersion: 2,
2945 
2946             /**
2947              * Attributes for circle label.
2948              *
2949              * @type Label
2950              * @name Circle#label
2951              */
2952             label: {
2953                 position: 'lft'
2954             },
2955 
2956             /**
2957              * Configure arrow head at the start position for curve.
2958              * Recommended arrow head type is 7.
2959              *
2960              * @name Curve#firstArrow
2961              * @type Boolean / Object
2962              * @default false
2963              * @see Line#firstArrow for options
2964              */
2965             firstArrow: false,
2966 
2967             /**
2968              * Configure arrow head at the end position for curve.
2969              * Recommended arrow head type is 7.
2970              *
2971              * @name Curve#lastArrow
2972              * @see Line#lastArrow for options
2973              * @type Boolean / Object
2974              * @default false
2975              */
2976             lastArrow: false
2977 
2978             /**#@-*/
2979         },
2980 
2981         /* special foreignObject options */
2982         foreignobject: {
2983 
2984             /**#@+
2985              * @visprop
2986              */
2987             attractors: [],
2988             fixed: true,
2989             visible: true
2990 
2991             /**#@-*/
2992         },
2993 
2994         glider: {
2995             /**#@+
2996              * @visprop
2997              */
2998 
2999             label: {}
3000             /**#@-*/
3001         },
3002 
3003         /* special grid options */
3004         grid: {
3005             /**#@+
3006              * @visprop
3007              */
3008 
3009             /* grid styles */
3010             needsRegularUpdate: false,
3011             hasGrid: false,
3012             gridX: 1,
3013             gridY: 1,
3014             //strokeColor: '#c0c0c0',
3015             strokeColor: '#c0c0c0',
3016             strokeOpacity: 0.5,
3017             strokeWidth: 1,
3018             dash: 0,    // dashed grids slow down the iPad considerably
3019             /* snap to grid options */
3020 
3021             /**
3022              * @deprecated
3023              */
3024             snapToGrid: false,
3025             /**
3026              * @deprecated
3027              */
3028             snapSizeX: 10,
3029             /**
3030              * @deprecated
3031              */
3032             snapSizeY: 10
3033 
3034             /**#@-*/
3035         },
3036 
3037         group: {
3038             needsRegularUpdate: true
3039         },
3040 
3041         /* special html slider options */
3042         htmlslider: {
3043             /**#@+
3044              * @visprop
3045              */
3046 
3047             /**
3048              *
3049              * These affect the DOM element input type="range".
3050              * The other attributes affect the DOM element div containing the range element.
3051              */
3052             widthRange: 100,
3053             widthOut: 34,
3054             step: 0.01,
3055 
3056             frozen: true,
3057             isLabel: false,
3058             strokeColor: '#000000',
3059             display: 'html',
3060             anchorX: 'left',
3061             anchorY: 'middle',
3062             withLabel: false
3063 
3064             /**#@-*/
3065         },
3066 
3067         /* special image options */
3068         image: {
3069             /**#@+
3070              * @visprop
3071              */
3072 
3073             imageString: null,
3074             fillOpacity: 1.0,
3075             highlightFillOpacity: 0.6,
3076 
3077 
3078             /**
3079              * Defines the CSS class used by the image. CSS attributes defined in
3080              * this class will overwrite the corresponding JSXGraph attributes, e.g.
3081              * opacity.
3082              * The default CSS class is defined in jsxgraph.css.
3083              *
3084              * @name Image#cssClass
3085              *
3086              * @see Image#highlightCssClass
3087              * @type String
3088              * @default 'JXGimage'
3089              */
3090             cssClass: 'JXGimage',
3091 
3092             /**
3093              * Defines the CSS class used by the image when highlighted.
3094              * CSS attributes defined in this class will overwrite the
3095              * corresponding JSXGraph attributes, e.g. highlightFillOpacity.
3096              * The default CSS class is defined in jsxgraph.css.
3097              *
3098              * @name Image#highlightCssClass
3099              *
3100              * @see Image#cssClass
3101              * @type String
3102              * @default 'JXGimageHighlight'
3103              */
3104             highlightCssClass: 'JXGimageHighlight',
3105 
3106             /**
3107              * Image rotation in degrees.
3108              *
3109              * @name Image#rotate
3110              * @type Number
3111              * @default 0
3112              */
3113             rotate: 0,
3114 
3115             /**
3116              * Defines together with {@link Image#snapSizeY} the grid the image snaps on to.
3117              * The image will only snap on user coordinates which are
3118              * integer multiples to snapSizeX in x and snapSizeY in y direction.
3119              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3120              * of the default ticks of the default x axes of the board.
3121              *
3122              * @name Image#snapSizeX
3123              *
3124              * @see Point#snapToGrid
3125              * @see Image#snapSizeY
3126              * @see JXG.Board#defaultAxes
3127              * @type Number
3128              * @default 1
3129              */
3130             snapSizeX: 1,
3131 
3132             /**
3133              * Defines together with {@link Image#snapSizeX} the grid the image snaps on to.
3134              * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
3135              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3136              * of the default ticks of the default y axes of the board.
3137              *
3138              * @name Image#snapSizeY
3139              *
3140              * @see Point#snapToGrid
3141              * @see Image#snapSizeX
3142              * @see JXG.Board#defaultAxes
3143              * @type Number
3144              * @default 1
3145              */
3146             snapSizeY: 1,
3147 
3148             /**
3149              * List of attractor elements. If the distance of the image is less than
3150              * attractorDistance the image is made to glider of this element.
3151              *
3152              * @name Image#attractors
3153              *
3154              * @type Array
3155              * @default empty
3156              */
3157             attractors: []
3158 
3159             /**#@-*/
3160         },
3161 
3162         /* special options for incircle of 3 points */
3163         incircle: {
3164             /**#@+
3165              * @visprop
3166              */
3167 
3168             fillColor: 'none',
3169             highlightFillColor: 'none',
3170             strokeColor: Color.palette.blue,
3171             highlightStrokeColor: '#c3d9ff',
3172 
3173             /**
3174              * Attributes of circle center.
3175              *
3176              * @type Point
3177              * @name Incircle#center
3178              */
3179             center: {               // center point
3180                 visible: false,
3181                 fixed: false,
3182                 withLabel: false,
3183                 fillColor: Color.palette.red,
3184                 strokeColor: Color.palette.red,
3185                 highlightFillColor: '#c3d9ff',
3186                 highlightStrokeColor: '#c3d9ff',
3187                 name: ''
3188             }
3189             /**#@-*/
3190         },
3191 
3192         inequality: {
3193             /**#@+
3194              * @visprop
3195              */
3196 
3197             fillColor: Color.palette.red,
3198             fillOpacity: 0.2,
3199             strokeColor: 'none',
3200 
3201             /**
3202              * By default an inequality is less (or equal) than. Set inverse to <tt>true</tt> will consider the inequality
3203              * greater (or equal) than.
3204              *
3205              * @type Boolean
3206              * @default false
3207              * @name Inequality#inverse
3208              * @visprop
3209              */
3210             inverse: false
3211             /**#@-*/
3212         },
3213 
3214         infobox: {
3215             /**#@+
3216              * @visprop
3217              */
3218 
3219             fontSize: 12,
3220             isLabel: false,
3221             strokeColor: '#bbbbbb',
3222             display: 'html',             // 'html' or 'internal'
3223             anchorX: 'left',             //  'left', 'middle', or 'right': horizontal alignment
3224                                          //  of the text.
3225             anchorY: 'middle',           //  'top', 'middle', or 'bottom': vertical alignment
3226                                          //  of the text.
3227             cssClass: 'JXGinfobox',
3228             rotate: 0,                   // works for non-zero values only in combination
3229                                          // with display=='internal'
3230             visible: true,
3231             parse: false,
3232             transitionDuration: 0,
3233             needsRegularUpdate: false
3234 
3235             /**#@-*/
3236         },
3237 
3238         /* special options for integral */
3239         integral: {
3240             /**#@+
3241              * @visprop
3242              */
3243 
3244             axis: 'x',        // 'x' or 'y'
3245             withLabel: true,    // Show integral value as text
3246             fixed: true,
3247             strokeWidth: 0,
3248             strokeOpacity: 0,
3249             fillColor: Color.palette.red,
3250             fillOpacity: 0.3,
3251             highlightFillColor: Color.palette.red,
3252             highlightFillOpacity: 0.2,
3253 
3254             /**
3255              * Attributes of the (left) starting point of the integral.
3256              *
3257              * @type Point
3258              * @name Integral#curveLeft
3259              * @see Integral#baseLeft
3260              */
3261             curveLeft: {    // Start point
3262                 visible: true,
3263                 withLabel: false,
3264                 color: Color.palette.red,
3265                 fillOpacity: 0.8,
3266                 layer: 9
3267             },
3268 
3269             /**
3270              * Attributes of the (left) base point of the integral.
3271              *
3272              * @type Point
3273              * @name Integral#baseLeft
3274              * @see Integral#curveLeft
3275              */
3276             baseLeft: {    // Start point
3277                 visible: false,
3278                 fixed: false,
3279                 withLabel: false,
3280                 name: ''
3281             },
3282 
3283             /**
3284              * Attributes of the (right) end point of the integral.
3285              *
3286              * @type Point
3287              * @name Integral#curveRight
3288              * @see Integral#baseRight
3289              */
3290             curveRight: {      // End point
3291                 visible: true,
3292                 withLabel: false,
3293                 color: Color.palette.red,
3294                 fillOpacity: 0.8,
3295                 layer: 9
3296             },
3297 
3298             /**
3299              * Attributes of the (right) base point of the integral.
3300              *
3301              * @type Point
3302              * @name Integral#baseRight
3303              * @see Integral#curveRight
3304              */
3305             baseRight: {      // End point
3306                 visible: false,
3307                 fixed: false,
3308                 withLabel: false,
3309                 name: ''
3310             },
3311 
3312             /**
3313              * Attributes for integral label.
3314              *
3315              * @type Label
3316              * @name Integral#label
3317              */
3318             label: {
3319                 fontSize: 20
3320             }
3321             /**#@-*/
3322         },
3323 
3324         /* special input options */
3325         input: {
3326             /**#@+
3327              * @visprop
3328              */
3329 
3330             /**
3331              * Control the attribute "disabled" of the HTML input field.
3332              *
3333              * @name disabled
3334              * @memberOf Input.prototype
3335              *
3336              * @type Boolean
3337              * @default false
3338              */
3339             disabled: false,
3340 
3341             /**
3342              * Control the attribute "maxlength" of the HTML input field.
3343              *
3344              * @name maxlength
3345              * @memberOf Input.prototype
3346              *
3347              * @type Number
3348              * @default 524288 (as in HTML)
3349              */
3350             maxlength: 524288,
3351 
3352             display: 'html'
3353 
3354             /**#@-*/
3355         },
3356 
3357         /* special intersection point options */
3358         intersection: {
3359             /**#@+
3360              * @visprop
3361              */
3362 
3363             /**
3364              * Used in {@link JXG.Intersection}.
3365              * This flag sets the behaviour of intersection points of e.g.
3366              * two segments. If true, the intersection is treated as intersection of lines. If false
3367              * the intersection point exists if the segments intersect setwise.
3368              *
3369              * @name Intersection.alwaysIntersect
3370              * @type Boolean
3371              * @default true
3372              */
3373             alwaysIntersect: true
3374 
3375             /**#@-*/
3376         },
3377 
3378         /* special label options */
3379         label: {
3380             /**#@+
3381              * @visprop
3382              */
3383 
3384             visible: 'inherit',
3385             strokeColor: '#000000',
3386             strokeOpacity: 1,
3387             highlightStrokeOpacity: 0.666666,
3388             highlightStrokeColor: '#000000',
3389 
3390             fixed: true,
3391 
3392             /**
3393              * Possible string values for the position of a label for
3394              * label anchor points are:
3395              * <ul>
3396              * <li> 'lft'
3397              * <li> 'rt'
3398              * <li> 'top'
3399              * <li> 'bot'
3400              * <li> 'ulft'
3401              * <li> 'urt'
3402              * <li> 'llft'
3403              * <li> 'lrt'
3404              * </ul>
3405              * This is relevant for non-points: line, circle, curve.
3406              *
3407              * The names have been borrowed from <a href="https://www.tug.org/metapost.html">MetaPost</a>.
3408              *
3409              * @name Label#position
3410              * @see Label#offset
3411              * @type String
3412              * @default 'urt'
3413              */
3414             position: 'urt',
3415 
3416             /**
3417              *  Label offset from label anchor.
3418              *  The label anchor is determined by {@link Label#position}
3419              *
3420              * @name Label#offset
3421              * @see Label#position
3422              * @type Array
3423              * @default [10,10]
3424              */
3425             offset: [10, 10],
3426 
3427             /**
3428              * Automatic position of label text. When called first, the positioning algorithm
3429              * starts at the position defined by offset.
3430              * The algorithm tries to find a position with the least number of
3431              * overlappings with other elements, while retaining the distance
3432              * to the anchor element.
3433              *
3434              * @name Label#autoPosition
3435              * @see Label#offset
3436              * @type Boolean
3437              * @default false
3438              *
3439              * @example
3440              * 	var p1 = board.create('point', [-2, 1], {id: 'A'});
3441              * 	var p2 = board.create('point', [-0.85, 1], {
3442              *      name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}
3443              *  });
3444              * 	var p3 = board.create('point', [-1, 1.2], {
3445              *      name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}
3446              *  });
3447              *  var c = board.create('circle', [p1, p2]);
3448              * 	var l = board.create('line', [p1, p2]);
3449              *
3450              * </pre><div id="JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2" class="jxgbox" style="width: 300px; height: 300px;"></div>
3451              * <script type="text/javascript">
3452              *     (function() {
3453              *         var board = JXG.JSXGraph.initBoard('JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2',
3454              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
3455              *     	var p1 = board.create('point', [-2, 1], {id: 'A'});
3456              *     	var p2 = board.create('point', [-0.85, 1], {name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}});
3457              *     	var p3 = board.create('point', [-1, 1.2], {name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}});
3458              *      var c = board.create('circle', [p1, p2]);
3459              *     	var l = board.create('line', [p1, p2]);
3460              *
3461              *     })();
3462              *
3463              * </script><pre>
3464              *
3465              *
3466              */
3467             autoPosition: false
3468 
3469             /**#@-*/
3470         },
3471 
3472         /* special legend options */
3473         legend: {
3474             /**
3475              * @visprop
3476              */
3477 
3478              /**
3479               * Default style of a legend element. The only possible value is 'vertical'.
3480               * @name: Legend#style
3481               * @type String
3482               * @default 'vertical'
3483               */
3484             style: 'vertical',
3485 
3486             /**
3487              * Label names of a legend element.
3488              * @name: Legend#labels
3489              * @type Array
3490              * @default "['1', '2', '3', '4', '5', '6', '7', '8']"
3491              */
3492             labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
3493 
3494             /**
3495              * (Circular) array of label colors.
3496              * @name: Legend#colors
3497              * @type Array
3498              * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']"
3499              */
3500             colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
3501 
3502             /**
3503              * Height (in px) of one legend entry
3504              * @name: Legend#rowHeight
3505              * @type Number
3506              * @default 20
3507              *
3508              */
3509             rowHeight: 20,
3510 
3511             strokeWidth: 5
3512 
3513             /**#@-*/
3514         },
3515 
3516         /* special line options */
3517         line: {
3518             /**#@+
3519              * @visprop
3520              */
3521 
3522             /**
3523              * Configure the arrow head at the position of its first point or the corresponding
3524              * intersection with the canvas border
3525              *
3526              * In case firstArrow is an object it has the sub-attributes:
3527              * <pre>
3528              * {
3529              *      type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
3530              *      size: 6, // size of the arrow head. Default value is 6.
3531              *               // This value is multiplied with the strokeWidth of the line
3532              *               // Exception: for type=7 size is ignored
3533              *      highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value
3534              * }
3535              * </pre>
3536              * type=7 is the default for curves if firstArrow: true
3537              *
3538              * @example
3539              *     board.options.line.lastArrow = false;
3540              *     board.options.line.firstArrow = {size: 10, highlightSize: 10};
3541              *     board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
3542              *     board.options.line.strokeWidth = 4;
3543              *     board.options.line.highlightStrokeWidth = 4;
3544              *
3545              *     board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
3546              *     board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
3547              *     board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
3548              *     board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
3549              *     board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
3550              *     board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
3551              *     board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
3552              *
3553              * </pre><div id="JXGc94a93da-c942-4204-8bb6-b39726cbb09b" class="jxgbox" style="width: 300px; height: 300px;"></div>
3554              * <script type="text/javascript">
3555              *     (function() {
3556              *         var board = JXG.JSXGraph.initBoard('JXGc94a93da-c942-4204-8bb6-b39726cbb09b',
3557              *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
3558              *         board.options.line.lastArrow = false;
3559              *         board.options.line.firstArrow = {size: 10, highlightSize: 10};
3560              *         board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
3561              *         board.options.line.strokeWidth = 4;
3562              *         board.options.line.highlightStrokeWidth = 4;
3563              *
3564              *         board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
3565              *         board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
3566              *         board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
3567              *         board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
3568              *         board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
3569              *         board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
3570              *         board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
3571              *
3572              *     })();
3573              *
3574              * </script><pre>
3575              *
3576              * @name Line#firstArrow
3577              * @see Line#lastArrow
3578              * @see Line#touchFirstPoint
3579              * @type Boolean / Object
3580              * @default false
3581              */
3582             firstArrow: false,
3583 
3584             /**
3585              * Configute the arrow head at the position of its second point or the corresponding
3586              * intersection with the canvas border.
3587              *
3588              * In case lastArrow is an object it has the sub-attributes:
3589              * <pre>
3590              * {
3591              *      type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
3592              *      size: 6, // size of the arrow head. Default value is 6.
3593              *               // This value is multiplied with the strokeWidth of the line.
3594              *               // Exception: for type=7 size is ignored
3595              *      highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6.
3596              * }
3597              * </pre>
3598              * type=7 is the default for curves if lastArrow: true
3599              *
3600              * @example
3601              *     var p1 = board.create('point', [-5, 2], {size:1});
3602              *     var p2 = board.create('point', [5, 2], {size:10});
3603              *     var li = board.create('segment', ['A','B'],
3604              *         {name:'seg',
3605              *          strokeColor:'#000000',
3606              *          strokeWidth:1,
3607              *          highlightStrokeWidth: 5,
3608              *          lastArrow: {type: 2, size: 8, highlightSize: 6},
3609              *          touchLastPoint: true,
3610              *          firstArrow: {type: 3, size: 8}
3611              *         });
3612              *
3613              * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div>
3614              * <script type="text/javascript">
3615              *     (function() {
3616              *         var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3',
3617              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
3618              *         var p1 = board.create('point', [-5, 2], {size:1});
3619              *         var p2 = board.create('point', [5, 2], {size:10});
3620              *         var li = board.create('segment', ['A','B'],
3621              *             {name:'seg',
3622              *              strokeColor:'#000000',
3623              *              strokeWidth:1,
3624              *              highlightStrokeWidth: 5,
3625              *              lastArrow: {type: 2, size: 8, highlightSize: 6},
3626              *              touchLastPoint: true,
3627              *              firstArrow: {type: 3, size: 8}
3628              *             });
3629              *     })();
3630              *
3631              * </script>
3632              *
3633              * @example
3634              *     board.options.line.strokeWidth = 4;
3635              *     board.options.line.highlightStrokeWidth = 4;
3636              *     board.options.line.firstArrow = false;
3637              *     board.options.line.lastArrow = {size: 10, highlightSize: 10};
3638              *     board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
3639              *
3640              *     board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
3641              *     board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
3642              *     board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
3643              *     board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
3644              *     board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
3645              *     board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
3646              *     board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
3647              *
3648              * </pre><div id="JXGca206b1c-e319-4899-8b90-778f53fd926d" class="jxgbox" style="width: 300px; height: 300px;"></div>
3649              * <script type="text/javascript">
3650              *     (function() {
3651              *         var board = JXG.JSXGraph.initBoard('JXGca206b1c-e319-4899-8b90-778f53fd926d',
3652              *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
3653              *         board.options.line.strokeWidth = 4;
3654              *         board.options.line.highlightStrokeWidth = 4;
3655              *         board.options.line.firstArrow = false;
3656              *         board.options.line.lastArrow = {size: 10, highlightSize: 10};
3657              *         board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
3658              *
3659              *         board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
3660              *         board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
3661              *         board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
3662              *         board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
3663              *         board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
3664              *         board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
3665              *         board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
3666              *     })();
3667              *
3668              * </script><pre>
3669              *
3670              * @name Line#lastArrow
3671              * @see Line#firstArrow
3672              * @see Line#touchLastPoint
3673              * @type Boolean / Object
3674              * @default false
3675              */
3676             lastArrow: false,
3677 
3678             /**
3679              * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line
3680              * ends exactly at the border, if negative there is a margin to the inside, if positive the line
3681              * ends outside of the canvas (which is invisible).
3682              *
3683              * @name: Line#margin
3684              * @type Number
3685              * @default 0
3686              */
3687             margin: 0,
3688 
3689             /**
3690              * If true, line stretches infinitely in direction of its first point.
3691              * Otherwise it ends at point1.
3692              *
3693              * @name Line#straightFirst
3694              * @see Line#straightLast
3695              * @type Boolean
3696              * @default true
3697              */
3698             straightFirst: true,
3699 
3700             /**
3701              * If true, line stretches infinitely in direction of its second point.
3702              * Otherwise it ends at point2.
3703              *
3704              * @name Line#straightLast
3705              * @see Line#straightFirst
3706              * @type Boolean
3707              * @default true
3708              */
3709             straightLast: true,
3710 
3711             fillColor: 'none',               // Important for VML on IE
3712             highlightFillColor: 'none',  // Important for VML on IE
3713             strokeColor: Color.palette.blue,
3714             highlightStrokeColor: '#c3d9ff',
3715             withTicks: false,
3716 
3717             /**
3718              * Attributes for first defining point of the line.
3719              *
3720              * @type Point
3721              * @name Line#point1
3722              */
3723             point1: {                  // Default values for point1 if created by line
3724                 visible: false,
3725                 withLabel: false,
3726                 fixed: false,
3727                 name: ''
3728             },
3729 
3730             /**
3731              * Attributes for second defining point of the line.
3732              *
3733              * @type Point
3734              * @name Line#point2
3735              */
3736             point2: {                  // Default values for point2 if created by line
3737                 visible: false,
3738                 withLabel: false,
3739                 fixed: false,
3740                 name: ''
3741             },
3742 
3743             /**
3744              * Attributes for ticks of the line.
3745              *
3746              * @type Ticks
3747              * @name Line#ticks
3748              */
3749             ticks: {
3750                 drawLabels: true,
3751                 label: {
3752                     offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts
3753                 },
3754                 drawZero: false,
3755                 insertTicks: false,
3756                 minTicksDistance: 50,
3757                 minorHeight: 4,          // if <0: full width and height
3758                 majorHeight: -1,         // if <0: full width and height
3759                 minorTicks: 4,
3760                 defaultDistance: 1,
3761                 strokeOpacity: 0.3,
3762                 visible: 'inherit'
3763             },
3764 
3765             /**
3766              * Attributes for the line label.
3767              *
3768              * @type Label
3769              * @name Line#label
3770              */
3771             label: {
3772                 position: 'llft'
3773             },
3774 
3775             /**
3776              * If set to true, the point will snap to a grid defined by
3777              * {@link Point#snapSizeX} and {@link Point#snapSizeY}.
3778              *
3779              * @see Point#snapSizeX
3780              * @see Point#snapSizeY
3781              * @type Boolean
3782              * @name Line#snapToGrid
3783              * @default false
3784              */
3785             snapToGrid: false,
3786 
3787             /**
3788              * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
3789              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
3790              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3791              * of the default ticks of the default x axes of the board.
3792              *
3793              * @see Point#snapToGrid
3794              * @see Point#snapSizeY
3795              * @see JXG.Board#defaultAxes
3796              * @type Number
3797              * @name Line#snapSizeX
3798              * @default 1
3799              */
3800             snapSizeX: 1,
3801 
3802             /**
3803              * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
3804              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
3805              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3806              * of the default ticks of the default y axes of the board.
3807              *
3808              * @see Point#snapToGrid
3809              * @see Point#snapSizeX
3810              * @see JXG.Board#defaultAxes
3811              * @type Number
3812              * @name Line#snapSizeY
3813              * @default 1
3814              */
3815             snapSizeY: 1,
3816 
3817             /**
3818              * If set to true and {@link Line#firstArrow} is set to true, the arrow head will just touch
3819              * the circle line of the start point of the line.
3820              *
3821              * @see Line#firstArrow
3822              * @type Boolean
3823              * @name Line#touchFirstPoint
3824              * @default false
3825              */
3826             touchFirstPoint: false,
3827 
3828             /**
3829              * If set to true and {@link Line#lastArrow} is set to true, the arrow head will just touch
3830              * the circle line of the start point of the line.
3831              * @see Line#firstArrow
3832              * @type Boolean
3833              * @name Line#touchLastPoint
3834              * @default false
3835              */
3836             touchLastPoint: false,
3837 
3838             /**
3839              * Line endings (linecap) of a straight line.
3840              * Possible values are:
3841              * <ul>
3842              * <li> 'butt',
3843              * <li> 'round',
3844              * <li> 'square'.
3845              * </ul>
3846              * Not available for VML renderer.
3847              * [lineCap description]
3848              * @name Line#lineCap
3849              * @type String
3850              * @default 'butt'
3851              */
3852             lineCap: 'butt'
3853 
3854             /**#@-*/
3855         },
3856 
3857         /* special options for locus curves */
3858         locus: {
3859             /**#@+
3860              * @visprop
3861              */
3862 
3863             translateToOrigin: false,
3864             translateTo10: false,
3865             stretch: false,
3866             toOrigin: null,
3867             to10: null
3868             /**#@-*/
3869         },
3870 
3871         /* special cardinal spline options */
3872         metapostspline: {
3873             /**#@+
3874              * @visprop
3875              */
3876 
3877              /**
3878               * Controls if the data points of the cardinal spline when given as
3879               * arrays should be converted into {@link JXG.Points}.
3880               *
3881               * @name createPoints
3882               * @memberOf Metapostspline.prototype
3883               *
3884               * @see Metapostspline#points
3885               *
3886               * @type Boolean
3887               * @default true
3888               */
3889             createPoints: true,
3890 
3891             /**
3892              * If set to true, the supplied coordinates are interpreted as
3893              * [[x_0, y_0], [x_1, y_1], p, ...].
3894              * Otherwise, if the data consists of two arrays of equal length,
3895              * it is interpreted as
3896              * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]]
3897              *
3898              * @name isArrayOfCoordinates
3899              * @memberOf Metapostspline.prototype
3900              * @type Boolean
3901              * @default false
3902              */
3903             isArrayOfCoordinates: false,
3904 
3905             /**
3906              * Attributes for the points generated by Metapostspline in cases
3907              * {@link createPoints} is set to true
3908              *
3909              * @name points
3910              * @memberOf Metapostspline.prototype
3911              *
3912              * @see Metapostspline#createPoints
3913              * @type Object
3914              */
3915             points: {
3916                 strokeOpacity: 0.05,
3917                 fillOpacity: 0.05,
3918                 highlightStrokeOpacity: 1.0,
3919                 highlightFillOpacity: 1.0,
3920                 withLabel: false,
3921                 name: '',
3922                 fixed: false
3923             }
3924 
3925             /**#@-*/
3926         },
3927 
3928         /* special mirrorelement options */
3929         mirrorelement: {
3930             /**#@+
3931              * @visprop
3932              */
3933 
3934             fixed: true,
3935 
3936             /**
3937              * Attributes of mirror point, i.e. the point along which the element is mirrored.
3938              *
3939              * @type Point
3940              * @name mirrorelement#point
3941              */
3942             point: {},
3943 
3944             /**
3945              * Attributes of circle center, i.e. the center of the circle,
3946              * if a circle is the mirror element and the transformation type is 'Euclidean'
3947              *
3948              * @type Point
3949              * @name mirrorelement#center
3950              */
3951             center: {},
3952 
3953             /**
3954              * Type of transformation. Possible values are 'Euclidean', 'projective'.
3955              *
3956              * If the value is 'Euclidean', the mirror element of a circle is again a circle,
3957              * otherwise it is a conic section.
3958              *
3959              * @type String
3960              * @name mirrorelement#type
3961              * @default 'Euclidean'
3962              */
3963             type: 'Euclidean'
3964 
3965             /**#@-*/
3966         },
3967 
3968         // /* special options for Msector of 3 points */
3969         // msector: {
3970         //     strokeColor: '#000000', // Msector line
3971         //     point: {               // Msector point
3972         //         visible: false,
3973         //         fixed: false,
3974         //         withLabel: false,
3975         //         name: ''
3976         //     }
3977         // },
3978 
3979         /* special options for normal lines */
3980         normal: {
3981             /**#@+
3982              * @visprop
3983              */
3984 
3985             strokeColor: '#000000', //  normal line
3986 
3987             /**
3988              * Attributes of helper point of normal.
3989              *
3990              * @type Point
3991              * @name Normal#point
3992              */
3993             point: {
3994                 visible: false,
3995                 fixed: false,
3996                 withLabel: false,
3997                 name: ''
3998             }
3999             /**#@-*/
4000         },
4001 
4002         /* special options for orthogonal projection points */
4003         orthogonalprojection: {
4004             /**#@+
4005              * @visprop
4006              */
4007 
4008 
4009             /**#@-*/
4010         },
4011 
4012         /* special options for parallel lines */
4013         parallel: {
4014             /**#@+
4015              * @visprop
4016              */
4017 
4018             strokeColor: '#000000', // Parallel line
4019 
4020             /**
4021              * Attributes of helper point of normal.
4022              *
4023              * @type Point
4024              * @name Parallel#point
4025              */
4026             point: {
4027                 visible: false,
4028                 fixed: false,
4029                 withLabel: false,
4030                 name: ''
4031             },
4032 
4033             label: {
4034                 position: 'llft'
4035             }
4036             /**#@-*/
4037         },
4038 
4039         /* special perpendicular options */
4040         perpendicular: {
4041             /**#@+
4042              * @visprop
4043              */
4044 
4045             strokeColor: '#000000', // Perpendicular line
4046             straightFirst: true,
4047             straightLast: true
4048             /**#@-*/
4049         },
4050 
4051         /* special perpendicular options */
4052         perpendicularsegment: {
4053             /**#@+
4054              * @visprop
4055              */
4056 
4057             strokeColor: '#000000', // Perpendicular segment
4058             straightFirst: false,
4059             straightLast: false,
4060             point: {               // Perpendicular point
4061                 visible: false,
4062                 fixed: true,
4063                 withLabel: false,
4064                 name: ''
4065             }
4066             /**#@-*/
4067         },
4068 
4069         /* special point options */
4070         point: {
4071             /**#@+
4072              * @visprop
4073              */
4074 
4075             withLabel: true,
4076             label: {},
4077 
4078             /**
4079              * This attribute was used to determined the point layout. It was derived from GEONExT and was
4080              * replaced by {@link Point#face} and {@link Point#size}.
4081              *
4082              * @name Point#style
4083              *
4084              * @see Point#face
4085              * @see Point#size
4086              * @type Number
4087              * @default 5
4088              * @deprecated
4089              */
4090             style: 5,
4091 
4092             /**
4093              * There are different point styles which differ in appearance.
4094              * Posssible values are
4095              * <table><tr><th>Value</th></tr>
4096              * <tr><td>cross</td></tr>
4097              * <tr><td>circle</td></tr>
4098              * <tr><td>square</td></tr>
4099              * <tr><td>plus</td></tr>
4100              * <tr><td>diamond</td></tr>
4101              * <tr><td>triangleUp</td></tr>
4102              * <tr><td>triangleDown</td></tr>
4103              * <tr><td>triangleLeft</td></tr>
4104              * <tr><td>triangleRight</td></tr>
4105              * </table>
4106              *
4107              * @name Point#face
4108              *
4109              * @type String
4110              * @see JXG.Point#setStyle
4111              * @default circle
4112              */
4113             face: 'o',
4114 
4115             /**
4116              * Size of a point, either in pixel or user coordinates.
4117              * Means radius resp. half the width of a point (depending on the face).
4118              *
4119              * @name Point#size
4120              *
4121              * @see Point#face
4122              * @see JXG.Point#setStyle
4123              * @see Point#sizeUnit
4124              * @type Number
4125              * @default 3
4126              */
4127             size: 3,
4128 
4129             /**
4130              * Unit for size.
4131              * Possible values are 'screen' and 'user.
4132              *
4133              * @name Point#sizeUnit
4134              *
4135              * @see Point#size
4136              * @type String
4137              * @default 'screen'
4138              */
4139             sizeUnit: 'screen',
4140 
4141             strokeWidth: 2,
4142 
4143             fillColor: Color.palette.red,
4144             strokeColor: Color.palette.red,
4145             highlightFillColor:'#c3d9ff',
4146             highlightStrokeColor: '#c3d9ff',
4147             // strokeOpacity: 1.0,
4148             // fillOpacity: 1.0,
4149             // highlightFillOpacity: 0.5,
4150             // highlightStrokeOpacity: 0.5,
4151 
4152             // fillColor: '#ff0000',
4153             // highlightFillColor: '#eeeeee',
4154             // strokeWidth: 2,
4155             // strokeColor: '#ff0000',
4156             // highlightStrokeColor: '#c3d9ff',
4157 
4158             /**
4159              * If true, the point size changes on zoom events.
4160              *
4161              * @type Boolean
4162              * @name Point#zoom
4163              * @default false
4164              *
4165              */
4166             zoom: false,             // Change the point size on zoom
4167 
4168             /**
4169              * If true, the infobox is shown on mouse/pen over, if false not.
4170              * If the value is 'inherit', the value of
4171              * {@link JXG.Board#showInfobox} is taken.
4172              *
4173              * @name Point#showInfobox
4174              * @see JXG.Board#showInfobox
4175              * @type {Boolean|String} true | false | 'inherit'
4176              * @default true
4177              */
4178             showInfobox: 'inherit',
4179 
4180             /**
4181              * Truncating rule for the digits in the infobox.
4182              * <ul>
4183              * <li>'auto': done automatically by JXG.autoDigits()
4184              * <li>'none': no truncation
4185              * <li>number: truncate after "number digits" with JXG.toFixed()
4186              * </ul>
4187              *
4188              * @name Point#infoboxDigits
4189              *
4190              * @type String, Number
4191              * @default 'auto'
4192              * @see JXG#autoDigits
4193              * @see JXG#toFixed
4194              */
4195             infoboxDigits: 'auto',
4196 
4197             draft: false,
4198 
4199             /**
4200              * List of attractor elements. If the distance of the point is less than
4201              * attractorDistance the point is made to glider of this element.
4202              *
4203              * @name Point#attractors
4204              *
4205              * @type Array
4206              * @default empty
4207              */
4208             attractors: [],
4209 
4210             /**
4211              * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints.
4212              * Possible values are 'screen' and 'user'.
4213              *
4214              * @name Point#attractorUnit
4215              *
4216              * @see Point#attractorDistance
4217              * @see Point#snatchDistance
4218              * @see Point#snapToPoints
4219              * @see Point#attractors
4220              * @type String
4221              * @default 'user'
4222              */
4223             attractorUnit: 'user',    // 'screen', 'user'
4224 
4225             /**
4226              * If the distance of the point to one of its attractors is less
4227              * than this number the point will be a glider on this
4228              * attracting element.
4229              * If set to zero nothing happens.
4230              *
4231              * @name Point#attractorDistance
4232              *
4233              * @type Number
4234              * @default 0.0
4235              */
4236             attractorDistance: 0.0,
4237 
4238             /**
4239              * If the distance of the point to one of its attractors is at least
4240              * this number the point will be released from being a glider on the
4241              * attracting element.
4242              * If set to zero nothing happens.
4243              *
4244              * @name Point#snatchDistance
4245              *
4246              * @type Number
4247              * @default 0.0
4248              */
4249             snatchDistance: 0.0,
4250 
4251             /**
4252              * If set to true, the point will snap to a grid of integer multiples of
4253              * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates).
4254              * <p>
4255              * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
4256              * (given in user coordinates, not pixels) or are the intersection points
4257              * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
4258              *
4259              * @name Point#snapToGrid
4260              *
4261              * @see Point#snapSizeX
4262              * @see Point#snapSizeY
4263              * @type Boolean
4264              * @default false
4265              */
4266             snapToGrid: false,
4267 
4268             /**
4269              * If set to true, the point will only snap to (possibly invisibly) grid points
4270              * when within {@link Point#attractorDistance} of such a grid point.
4271              * <p>
4272              * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
4273              * (given in user coordinates, not pixels) or are the intersection points
4274              * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
4275              *
4276              * @name Point#attractToGrid
4277              *
4278              * @see Point#attractorDistance
4279              * @see Point#attractorUnit
4280              * @see Point#snapToGrid
4281              * @see Point#snapSizeX
4282              * @see Point#snapSizeY
4283              * @type Boolean
4284              * @default false
4285              *
4286              * @example
4287              * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
4288              *
4289              * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div>
4290              * <script type="text/javascript">
4291              *     (function() {
4292              *         var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6',
4293              *             {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false});
4294              *     board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
4295              *
4296              *     })();
4297              *
4298              * </script><pre>
4299              *
4300              */
4301             attractToGrid: false,
4302 
4303             /**
4304              * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
4305              * It is given in user coordinates, not in pixels.
4306              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
4307              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
4308              * of the default ticks of the default x axes of the board.
4309              *
4310              * @name Point#snapSizeX
4311              *
4312              * @see Point#snapToGrid
4313              * @see Point#snapSizeY
4314              * @see JXG.Board#defaultAxes
4315              * @type Number
4316              * @default 1
4317              */
4318             snapSizeX: 1,
4319 
4320             /**
4321              * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
4322              * It is given in user coordinates, not in pixels.
4323              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
4324              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
4325              * of the default ticks of the default y axes of the board.
4326              *
4327              * @name Point#snapSizeY
4328              *
4329              * @see Point#snapToGrid
4330              * @see Point#snapSizeX
4331              * @see JXG.Board#defaultAxes
4332              * @type Number
4333              * @default 1
4334              */
4335             snapSizeY: 1,
4336 
4337             /**
4338              * If set to true, the point will snap to the nearest point in distance of
4339              * {@link Point#attractorDistance}.
4340              *
4341              * @name Point#snapToPoints
4342              *
4343              * @see Point#attractorDistance
4344              * @type Boolean
4345              * @default false
4346              */
4347             snapToPoints: false,
4348 
4349             /**
4350              * List of elements which are ignored by snapToPoints.
4351              * @name Point#ignoredSnapToPoints
4352              *
4353              * @type Array
4354              * @default empty
4355              */
4356             ignoredSnapToPoints: []
4357 
4358             /**#@-*/
4359         },
4360 
4361         /* special polygon options */
4362         polygon: {
4363             /**#@+
4364              * @visprop
4365              */
4366 
4367             /**
4368              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
4369              *
4370              * @see JXG.GeometryElement#hasPoint
4371              * @name Polygon#hasInnerPoints
4372              * @type Boolean
4373              * @default false
4374              */
4375             hasInnerPoints: false,
4376 
4377             fillColor: Color.palette.yellow,
4378             highlightFillColor: Color.palette.yellow,
4379             // fillColor: '#00ff00',
4380             // highlightFillColor: '#00ff00',
4381             fillOpacity: 0.3,
4382             highlightFillOpacity: 0.2,
4383 
4384             /**
4385              * Is the polygon bordered by lines?
4386              *
4387              * @type Boolean
4388              * @name Polygon#withLines
4389              * @default true
4390              */
4391             withLines: true,
4392 
4393             /**
4394              * Attributes for the polygon border lines.
4395              *
4396              * @type Line
4397              * @name Polygon#borders
4398              */
4399             borders: {
4400                 withLabel: false,
4401                 strokeWidth: 1,
4402                 highlightStrokeWidth: 1,
4403                 // Polygon layer + 1
4404                 layer: 5,
4405                 label: {
4406                     position: 'top'
4407                 },
4408                 visible: 'inherit'
4409             },
4410 
4411             /**
4412              * Attributes for the polygon vertices.
4413              *
4414              * @type Point
4415              * @name Polygon#vertices
4416              */
4417             vertices: {
4418                 layer: 9,
4419                 withLabel: false,
4420                 name: '',
4421                 strokeColor: Color.palette.red,
4422                 fillColor: Color.palette.red,
4423                 fixed: false,
4424                 visible: 'inherit'
4425             },
4426 
4427             /**
4428              * Attributes for the polygon label.
4429              *
4430              * @type Label
4431              * @name Polygon#label
4432              */
4433             label: {
4434                 offset: [0, 0]
4435             }
4436 
4437             /**#@-*/
4438         },
4439 
4440         /* special polygonal chain options
4441         */
4442         polygonalchain: {
4443             /**#@+
4444              * @visprop
4445              */
4446 
4447             fillColor: 'none',
4448             highlightFillColor: 'none'
4449 
4450             /**#@-*/
4451         },
4452 
4453         /* special prescribed angle options
4454         * Not yet implemented. But angle.setAngle(val) is implemented.
4455         */
4456         prescribedangle: {
4457             /**#@+
4458              * @visprop
4459              */
4460 
4461             /**
4462              * Attributes for the helper point of the prescribed angle.
4463              *
4464              * @type Point
4465              * @name PrescribedAngle#anglePoint
4466              */
4467             anglePoint: {
4468                 size: 2,
4469                 visible: false,
4470                 withLabel: false
4471             }
4472 
4473             /**#@-*/
4474         },
4475 
4476         /* special reflection options */
4477         reflection: {
4478             /**#@+
4479              * @visprop
4480              */
4481 
4482             fixed: true,
4483 
4484             /**
4485              * Attributes of circle center, i.e. the center of the circle,
4486              * if a circle is the mirror element and the transformation type is 'Euclidean'
4487              *
4488              * @type Point
4489              * @name mirrorelement#center
4490              */
4491             center: {},
4492 
4493             /**
4494              * Type of transformation. Possible values are 'Euclidean', 'projective'.
4495              *
4496              * If the value is 'Euclidean', the reflected element of a circle is again a circle,
4497              * otherwise it is a conic section.
4498              *
4499              * @type String
4500              * @name reflection#type
4501              * @default 'Euclidean'
4502              */
4503             type: 'Euclidean'
4504 
4505             /**#@-*/
4506         },
4507 
4508         /* special regular polygon options */
4509         regularpolygon: {
4510             /**#@+
4511              * @visprop
4512              */
4513 
4514             /**
4515              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
4516              * @see JXG.GeometryElement#hasPoint
4517              *
4518              * @name RegularPolygon#hasInnerPoints
4519              * @type Boolean
4520              * @default false
4521              */
4522             hasInnerPoints: false,
4523             fillColor: Color.palette.yellow,
4524             highlightFillColor: Color.palette.yellow,
4525             fillOpacity: 0.3,
4526             highlightFillOpacity: 0.2,
4527 
4528             /**
4529              * Is the polygon bordered by lines?
4530              *
4531              * @type Boolean
4532              * @name RegularPolygon#withLines
4533              * @default true
4534              */
4535             withLines: true,
4536 
4537             /**
4538              * Attributes for the polygon border lines.
4539              *
4540              * @type Line
4541              * @name RegularPolygon#borders
4542              */
4543             borders: {
4544                 withLabel: false,
4545                 strokeWidth: 1,
4546                 highlightStrokeWidth: 1,
4547                 // Polygon layer + 1
4548                 layer: 5,
4549                 label: {
4550                     position: 'top'
4551                 }
4552             },
4553 
4554             /**
4555              * Attributes for the polygon vertices.
4556              *
4557              * @type Point
4558              * @name RegularPolygon#vertices
4559              */
4560             vertices: {
4561                 layer: 9,
4562                 withLabel: true,
4563                 strokeColor: Color.palette.red,
4564                 fillColor: Color.palette.red,
4565                 fixed: false
4566             },
4567 
4568             /**
4569              * Attributes for the polygon label.
4570              *
4571              * @type Label
4572              * @name Polygon#label
4573              */
4574             label: {
4575                 offset: [0, 0]
4576             }
4577 
4578             /**#@-*/
4579         },
4580 
4581         /* special options for riemann sums */
4582         riemannsum: {
4583             /**#@+
4584              * @visprop
4585              */
4586 
4587             withLabel: false,
4588             fillOpacity: 0.3,
4589             fillColor: Color.palette.yellow
4590 
4591             /**#@-*/
4592         },
4593 
4594         /* special sector options */
4595         sector: {
4596             /**#@+
4597              * @visprop
4598              */
4599 
4600             fillColor: Color.palette.yellow,
4601             highlightFillColor: Color.palette.yellow,
4602             // fillColor: '#00ff00',
4603             // highlightFillColor: '#00ff00',
4604 
4605             fillOpacity: 0.3,
4606             highlightFillOpacity: 0.3,
4607             highlightOnSector: false,
4608             highlightStrokeWidth: 0,
4609 
4610             /**
4611              * Type of sector. Possible values are 'minor', 'major', and 'auto'.
4612              *
4613              * @type String
4614              * @name Sector#selection
4615              * @default 'auto'
4616              */
4617             selection: 'auto',
4618 
4619             /**
4620              * Attributes for sub-element arc. It is only available, if the sector is defined by three points.
4621              *
4622              * @type Arc
4623              * @name Sector#arc
4624              * @default '{visible:false}'
4625              */
4626             arc: {
4627                 visible: false,
4628                 fillColor: 'none'
4629             },
4630 
4631             /**
4632              * Attributes for helper point radiuspoint in case it is provided by coordinates.
4633              *
4634              * @type Point
4635              * @name Sector#radiusPoint
4636              */
4637             radiusPoint: {
4638                 visible: false,
4639                 withLabel: false
4640             },
4641 
4642             /**
4643              * Attributes for helper point center in case it is provided by coordinates.
4644              *
4645              * @type Point
4646              * @name Sector#center
4647              */
4648             center: {
4649                 visible: false,
4650                 withLabel: false
4651             },
4652 
4653             /**
4654              * Attributes for helper point anglepoint in case it is provided by coordinates.
4655              *
4656              * @type Point
4657              * @name Sector#anglePoint
4658              */
4659             anglePoint: {
4660                 visible: false,
4661                 withLabel: false
4662             },
4663 
4664             /**
4665              * Attributes for the sector label.
4666              *
4667              * @type Label
4668              * @name Sector#label
4669              */
4670             label: {
4671                 offset: [0, 0],
4672                 anchorX: 'auto',
4673                 anchorY: 'auto'
4674             }
4675 
4676             /**#@-*/
4677         },
4678 
4679         /* special segment options */
4680         segment: {
4681             /**#@+
4682              * @visprop
4683              */
4684 
4685             label: {
4686                 position: 'top'
4687             }
4688             /**#@-*/
4689         },
4690 
4691         semicircle: {
4692             /**#@+
4693              * @visprop
4694              */
4695 
4696             /**
4697              * Attributes for center point of the semicircle.
4698              *
4699              * @type Point
4700              * @name Semicircle#center
4701              */
4702             center: {
4703                 visible: false,
4704                 withLabel: false,
4705                 fixed: false,
4706                 fillColor: Color.palette.red,
4707                 strokeColor: Color.palette.red,
4708                 highlightFillColor:'#eeeeee',
4709                 highlightStrokeColor: Color.palette.red,
4710                 name: ''
4711             }
4712 
4713             /**#@-*/
4714         },
4715 
4716         /* special slider options */
4717         slider: {
4718             /**#@+
4719              * @visprop
4720              */
4721 
4722             /**
4723              * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For
4724              * continuous results set this to <tt>-1</tt>.
4725              *
4726              * @memberOf Slider.prototype
4727              * @name snapWidth
4728              * @type Number
4729              */
4730             snapWidth: -1,      // -1 = deactivated
4731 
4732             /**
4733              * The precision of the slider value displayed in the optional text.
4734              * Replaced by the attribute "digits".
4735              *
4736              * @memberOf Slider.prototype
4737              * @name precision
4738              * @type Number
4739              * @deprecated
4740              * @see Slider#digits
4741              * @default 2
4742              */
4743             precision: 2,
4744 
4745             /**
4746              * The number of digits of the slider value displayed in the optional text.
4747              *
4748              * @memberOf Slider.prototype
4749              * @name digits
4750              * @type Number
4751              * @default 2
4752              */
4753             digits: 2,
4754 
4755             firstArrow: false,
4756             lastArrow: false,
4757 
4758             /**
4759              * Show slider ticks.
4760              *
4761              * @type Boolean
4762              * @name Slider#withTicks
4763              * @default true
4764              */
4765             withTicks: true,
4766 
4767             /**
4768              * Show slider label.
4769              *
4770              * @type Boolean
4771              * @name Slider#withLabel
4772              * @default true
4773              */
4774             withLabel: true,
4775 
4776             /**
4777              * If not null, this replaces the part "name = " in the slider label.
4778              * Possible types: string, number or function.
4779              * @type String
4780              * @name suffixLabel
4781              * @memberOf Slider.prototype
4782              * @default null
4783              * @see JXG.Slider#unitLabel
4784              * @see JXG.Slider#postLabel
4785              */
4786             suffixLabel: null,
4787 
4788             /**
4789              * If not null, this is appended to the value in the slider label.
4790              * Possible types: string, number or function.
4791              * @type String
4792              * @name unitLabel
4793              * @memberOf Slider.prototype
4794              * @default null
4795              * @see JXG.Slider#suffixLabel
4796              * @see JXG.Slider#postLabel
4797              */
4798             unitLabel: null,
4799 
4800             /**
4801              * If not null, this is appended to the value and to unitLabel in the slider label.
4802              * Possible types: string, number or function.
4803              * @type String
4804              * @name postLabel
4805              * @memberOf Slider.prototype
4806              * @default null
4807              * @see JXG.Slider#suffixLabel
4808              * @see JXG.Slider#unitLabel
4809              */
4810             postLabel: null,
4811 
4812             layer: 9,
4813             showInfobox: false,
4814             name: '',
4815             visible: true,
4816             strokeColor: '#000000',
4817             highlightStrokeColor: '#888888',
4818             fillColor: '#ffffff',
4819             highlightFillColor: 'none',
4820 
4821             /**
4822              * Size of slider point.
4823              *
4824              * @type Number
4825              * @name Slider#size
4826              * @default 6
4827              * @see Point#size
4828              */
4829             size: 6,
4830 
4831             /**
4832              * Attributes for first (left) helper point defining the slider position.
4833              *
4834              * @type Point
4835              * @name Slider#point1
4836              */
4837             point1: {
4838                 needsRegularUpdate: false,
4839                 showInfobox: false,
4840                 withLabel: false,
4841                 visible: false,
4842                 fixed: true,
4843                 name: ''
4844             },
4845 
4846             /**
4847              * Attributes for second (right) helper point defining the slider position.
4848              *
4849              * @type Point
4850              * @name Slider#point2
4851              */
4852             point2: {
4853                 needsRegularUpdate: false,
4854                 showInfobox: false,
4855                 withLabel: false,
4856                 visible: false,
4857                 fixed: true,
4858                 name: ''
4859             },
4860 
4861             /**
4862              * Attributes for the base line of the slider.
4863              *
4864              * @type Line
4865              * @name Slider#baseline
4866              */
4867             baseline: {
4868                 needsRegularUpdate: false,
4869                 visible: 'inherit',
4870                 fixed: true,
4871                 scalable: false,
4872                 tabindex: null,
4873                 name: '',
4874                 strokeWidth: 1,
4875                 strokeColor: '#000000',
4876                 highlightStrokeColor: '#888888'
4877             },
4878 
4879             /**
4880              * Attributes for the ticks of the base line of the slider.
4881              *
4882              * @type Ticks
4883              * @name Slider#ticks
4884              */
4885             ticks: {
4886                 needsRegularUpdate: false,
4887                 fixed: true,
4888 
4889                 // Label drawing
4890                 drawLabels: false,
4891                 digits: 2,
4892                 includeBoundaries: 1,
4893                 drawZero: true,
4894                 label: {
4895                     offset: [-4, -14],
4896                     display: 'internal'
4897                 },
4898 
4899                 minTicksDistance: 30,
4900                 insertTicks: true,
4901                 minorHeight: 4,         // if <0: full width and height
4902                 majorHeight: 5,        // if <0: full width and height
4903                 minorTicks: 0,
4904                 defaultDistance: 1,
4905                 strokeOpacity: 1,
4906                 strokeWidth: 1,
4907                 tickEndings: [0, 1],
4908                 strokeColor: '#000000',
4909                 visible: 'inherit'
4910             },
4911 
4912             /**
4913              * Attributes for the highlighting line of the slider.
4914              *
4915              * @type Line
4916              * @name Slider#highline
4917              */
4918             highline: {
4919                 strokeWidth: 3,
4920                 visible: 'inherit',
4921                 fixed: true,
4922                 tabindex: null,
4923                 name: '',
4924                 strokeColor: '#000000',
4925                 highlightStrokeColor: '#888888'
4926             },
4927 
4928             /**
4929              * Attributes for the slider label.
4930              *
4931              * @type Label
4932              * @name Slider#label
4933              */
4934             label: {
4935                 visible: 'inherit',
4936                 strokeColor: '#000000'
4937             },
4938 
4939             /**
4940              * If true, 'up' events on the baseline will trigger slider moves.
4941              *
4942              * @type: Boolean
4943              * @name Slider#moveOnUp
4944              * @default: true
4945              */
4946             moveOnUp: true
4947 
4948             /**#@-*/
4949         },
4950 
4951         /* special options for comb */
4952         comb: {
4953             /**#@+
4954              * @visprop
4955              */
4956 
4957             /**
4958              * Frequency of comb elements.
4959              *
4960              * @type Number
4961              * @name Comb#frequency
4962              * @default 0.2
4963              */
4964             frequency: 0.2,
4965 
4966             /**
4967              * Width of the comb.
4968              *
4969              * @type Number
4970              * @name Comb#width
4971              * @default 0.4
4972              */
4973             width: 0.4,
4974 
4975             /**
4976              * Angle under which comb elements are positioned.
4977              *
4978              * @type Number
4979              * @name Comb#angle
4980              * @default 60 degrees
4981              */
4982             angle: Math.PI / 3,
4983 
4984             /**
4985              * Should the comb go right to left instead of left to right.
4986              *
4987              * @type Boolean
4988              * @name Comb#reverse
4989              * @default false
4990              */
4991             reverse: false,
4992 
4993             /**
4994              * Attributes for first defining point of the comb.
4995              *
4996              * @type Point
4997              * @name Comb#point1
4998              */
4999             point1: {
5000                 visible: false,
5001                 withLabel: false,
5002                 fixed: false,
5003                 name: ''
5004             },
5005 
5006             /**
5007              * Attributes for second defining point of the comb.
5008              *
5009              * @type Point
5010              * @name Comb#point2
5011              */
5012             point2: {
5013                 visible: false,
5014                 withLabel: false,
5015                 fixed: false,
5016                 name: ''
5017             },
5018 
5019             /**
5020              * Attributes for the curve displaying the comb.
5021              *
5022              * @type Curve
5023              * @name Comb#curve
5024              */
5025             curve: {
5026                 strokeWidth: 1,
5027                 strokeColor: '#000000',
5028                 fillColor: 'none'
5029             }
5030         },
5031 
5032         /* special options for slope triangle */
5033         slopetriangle: {
5034             /**#@+
5035              * @visprop
5036              */
5037 
5038             fillColor: Color.palette.red,
5039             fillOpacity: 0.4,
5040             highlightFillColor: Color.palette.red,
5041             highlightFillOpacity: 0.3,
5042 
5043             borders: {
5044                 lastArrow: {
5045                     type: 1,
5046                     size: 6
5047                 }
5048             },
5049 
5050             /**
5051              * Attributes for the gliding helper point.
5052              *
5053              * @type Point
5054              * @name Slopetriangle#glider
5055              */
5056             glider: {
5057                 fixed: true,
5058                 visible: false,
5059                 withLabel: false
5060             },
5061 
5062             /**
5063              * Attributes for the base line.
5064              *
5065              * @type Line
5066              * @name Slopetriangle#baseline
5067              */
5068             baseline: {
5069                 visible: false,
5070                 withLabel: false,
5071                 name: ''
5072             },
5073 
5074             /**
5075              * Attributes for the base point.
5076              *
5077              * @type Point
5078              * @name Slopetriangle#basepoint
5079              */
5080             basepoint: {
5081                 visible: false,
5082                 withLabel: false,
5083                 name: ''
5084             },
5085 
5086             /**
5087              * Attributes for the tangent.
5088              * The tangent is constructed by slop triangle if the construction
5089              * is based on a glider, solely.
5090              *
5091              * @type Line
5092              * @name Slopetriangle#tangent
5093              */
5094             tangent: {
5095                 visible: false,
5096                 withLabel: false,
5097                 name: ''
5098             },
5099 
5100             /**
5101              * Attributes for the top point.
5102              *
5103              * @type Point
5104              * @name Slopetriangle#toppoint
5105              */
5106             toppoint: {
5107                 visible: false,
5108                 withLabel: false,
5109                 name: ''
5110             },
5111 
5112             /**
5113              * Attributes for the slope triangle label.
5114              *
5115              * @type Label
5116              * @name Slopetriangle#label
5117              */
5118             label: {
5119                 visible: true
5120             }
5121             /**#@-*/
5122         },
5123 
5124         /* special options for step functions */
5125         stepfunction: {
5126             /**#@+
5127              * @visprop
5128              */
5129 
5130             /**#@-*/
5131         },
5132 
5133         /* special tape measure options */
5134         tapemeasure: {
5135             /**#@+
5136              * @visprop
5137              */
5138 
5139             strokeColor: '#000000',
5140             strokeWidth: 2,
5141             highlightStrokeColor: '#000000',
5142 
5143             /**
5144              * Show tape measure ticks.
5145              *
5146              * @type Boolean
5147              * @name Tapemeasure#withTicks
5148              * @default true
5149              */
5150             withTicks: true,
5151 
5152             /**
5153              * Show tape measure label.
5154              *
5155              * @type Boolean
5156              * @name Tapemeasure#withLabel
5157              * @default true
5158              */
5159             withLabel: true,
5160 
5161             /**
5162              * The precision of the tape measure value displayed in the optional text.
5163              * Replaced by the attribute digits
5164              *
5165              * @memberOf Tapemeasure.prototype
5166              * @name precision
5167              * @type Number
5168              * @deprecated
5169              * @see Tapemeasure#digits
5170              * @default 2
5171              */
5172             precision: 2,
5173 
5174             /**
5175              * The precision of the tape measure value displayed in the optional text.
5176              * @memberOf Tapemeasure.prototype
5177              * @name precision
5178              * @type Number
5179              * @default 2
5180              */
5181             digits: 2,
5182 
5183             /**
5184              * Attributes for first helper point defining the tape measure position.
5185              *
5186              * @type Point
5187              * @name Tapemeasure#point1
5188              */
5189             point1: {
5190                 visible: 'inherit',
5191                 strokeColor: '#000000',
5192                 fillColor: '#ffffff',
5193                 fillOpacity: 0.0,
5194                 highlightFillOpacity: 0.1,
5195                 size: 6,
5196                 snapToPoints: true,
5197                 attractorUnit: 'screen',
5198                 attractorDistance: 20,
5199                 showInfobox: false,
5200                 withLabel: false,
5201                 name: ''
5202             },
5203 
5204             /**
5205              * Attributes for second helper point defining the tape measure position.
5206              *
5207              * @type Point
5208              * @name Tapemeasure#point2
5209              */
5210             point2: {
5211                 visible: 'inherit',
5212                 strokeColor: '#000000',
5213                 fillColor: '#ffffff',
5214                 fillOpacity: 0.0,
5215                 highlightFillOpacity: 0.1,
5216                 size: 6,
5217                 snapToPoints: true,
5218                 attractorUnit: 'screen',
5219                 attractorDistance: 20,
5220                 showInfobox: false,
5221                 withLabel: false,
5222                 name: ''
5223             },
5224 
5225             /**
5226              * Attributes for the ticks of the tape measure.
5227              *
5228              * @type Ticks
5229              * @name Tapemeasure#ticks
5230              */
5231             ticks: {
5232                 drawLabels: false,
5233                 drawZero: true,
5234                 insertTicks: true,
5235                 minorHeight: 8,
5236                 majorHeight: 16,
5237                 minorTicks: 4,
5238                 tickEndings: [0, 1],
5239                 defaultDistance: 0.1,
5240                 strokeOpacity: 1,
5241                 strokeWidth: 1,
5242                 strokeColor: '#000000',
5243                 visible: 'inherit'
5244             },
5245 
5246             /**
5247              * Attributes for the tape measure label.
5248              *
5249              * @type Label
5250              * @name Tapemeasure#label
5251              */
5252             label: {
5253                 position: 'top'
5254             }
5255             /**#@-*/
5256         },
5257 
5258         /* special text options */
5259         text: {
5260             /**#@+
5261              * @visprop
5262              */
5263 
5264             /**
5265              * The font size in pixels.
5266              *
5267              * @name fontSize
5268              * @memberOf Text.prototype
5269              * @default 12
5270              * @type Number
5271              * @see Text#fontUnit
5272              */
5273             fontSize: 12,
5274 
5275             /**
5276              * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but
5277              * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful.
5278              *
5279              * @name fontUnit
5280              * @memberOf Text.prototype
5281              * @default 'px'
5282              * @type String
5283              * @see Text#fontSize
5284              *
5285              * @example
5286              * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
5287              *
5288              * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div>
5289              * <script type="text/javascript">
5290              *     (function() {
5291              *         var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9',
5292              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
5293              *     var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
5294              *
5295              *     })();
5296              *
5297              * </script><pre>
5298              *
5299              */
5300             fontUnit: 'px',
5301 
5302             /**
5303              * Used to round texts given by a number.
5304              *
5305              * @name digits
5306              * @memberOf Text.prototype
5307              * @default 2
5308              * @type Number
5309              */
5310             digits: 2,
5311 
5312             /**
5313              * If set to true, the text is parsed and evaluated.
5314              * For labels parse==true results in converting names of the form k_a to subscripts.
5315              * If the text is given by string and parse==true, the string is parsed as
5316              * JessieCode expression.
5317              *
5318              * @name parse
5319              * @memberOf Text.prototype
5320              * @default true
5321              * @type Boolean
5322              */
5323             parse: true,
5324 
5325             /**
5326              * If set to true and caja's sanitizeHTML function can be found it
5327              * will be used to sanitize text output.
5328              *
5329              * @name useCaja
5330              * @memberOf Text.prototype
5331              * @default false
5332              * @type Boolean
5333              */
5334             useCaja: false,
5335 
5336             /**
5337              * If enabled, the text will be handled as label. Intended for internal use.
5338              *
5339              * @name isLabel
5340              * @memberOf Text.prototype
5341              * @default false
5342              * @type Boolean
5343              */
5344             isLabel: false,
5345 
5346             strokeColor: '#000000',
5347             highlightStrokeColor: '#000000',
5348             highlightStrokeOpacity: 0.666666,
5349 
5350             /**
5351              * Default CSS properties of the HTML text element.
5352              * <p>
5353              * The CSS properties which are set here, are handed over to the style property
5354              * of the HTML text element. That means, they have higher property than any
5355              * CSS class.
5356              * <p>
5357              * If a property which is set here should be overruled by a CSS class
5358              * then this property should be removed here.
5359              * <p>
5360              * The reason, why this attribute should be kept to its default value at all,
5361              * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt>
5362              * will ignore the font-family if it is set in a CSS class.
5363              * It has to be set explicitly as style attribute.
5364              * <p>
5365              * In summary, the order of priorities from high to low is
5366              * <ol>
5367              *  <li> JXG.Options.text.cssStyle
5368              *  <li> JXG.Options.text.cssDefaultStyle
5369              *  <li> JXG.Options.text.cssClass
5370              * </ol>
5371              * @example
5372              * If all texts should get its font-family from the default CSS class
5373              * before initializing the board
5374              * <pre>
5375              *   JXG.Options.text.cssDefaultStyle = '';
5376              *   JXG.Options.text.highlightCssDefaultStyle = '';
5377              * </pre>
5378              * should be called.
5379              *
5380              * @name cssDefaultStyle
5381              * @memberOf Text.prototype
5382              * @default  'font-family: Arial, Helvetica, Geneva, sans-serif;'
5383              * @type String
5384              * @see Text#highlightCssDefaultStyle
5385              * @see Text#cssStyle
5386              * @see Text#highlightCssStyle
5387              */
5388             cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;',
5389 
5390             /**
5391              * Default CSS properties of the HTML text element in case of highlighting.
5392              * <p>
5393              * The CSS properties which are set here, are handed over to the style property
5394              * of the HTML text element. That means, they have higher property than any
5395              * CSS class.
5396              * @example
5397              * If all texts should get its font-family from the default CSS class
5398              * before initializing the board
5399              * <pre>
5400              *   JXG.Options.text.cssDefaultStyle = '';
5401              *   JXG.Options.text.highlightCssDefaultStyle = '';
5402              * </pre>
5403              * should be called.
5404              *
5405              * @name highlightCssDefaultStyle
5406              * @memberOf Text.prototype
5407              * @default  'font-family: Arial, Helvetica, Geneva, sans-serif;'
5408              * @type String
5409              * @see Text#cssDefaultStyle
5410              * @see Text#cssStyle
5411              * @see Text#highlightCssStyle
5412             */
5413             highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;',
5414 
5415             /**
5416              * CSS properties of the HTML text element.
5417              * <p>
5418              * The CSS properties which are set here, are handed over to the style property
5419              * of the HTML text element. That means, they have higher property than any
5420              * CSS class.
5421              *
5422              * @name cssStyle
5423              * @memberOf Text.prototype
5424              * @default  ''
5425              * @type String
5426              * @see Text#cssDefaultStyle
5427              * @see Text#highlightCssDefaultStyle
5428              * @see Text#highlightCssStyle
5429             */
5430             cssStyle: '',
5431 
5432             /**
5433              * CSS properties of the HTML text element in case of highlighting.
5434              * <p>
5435              * The CSS properties which are set here, are handed over to the style property
5436              * of the HTML text element. That means, they have higher property than any
5437              * CSS class.
5438              *
5439              * @name highlightCssStyle
5440              * @memberOf Text.prototype
5441              * @default  ''
5442              * @type String
5443              * @see Text#cssDefaultStyle
5444              * @see Text#highlightCssDefaultStyle
5445              * @see Text#cssStyle
5446             */
5447             highlightCssStyle: '',
5448 
5449             /**
5450              * If true, the input will be given to ASCIIMathML before rendering.
5451              *
5452              * @name useASCIIMathML
5453              * @memberOf Text.prototype
5454              * @default false
5455              * @type Boolean
5456              */
5457             useASCIIMathML: false,
5458 
5459             /**
5460              * If true, MathJax will be used to render the input string.
5461              * Supports MathJax 2 as well as Mathjax 3.
5462              * It is recommended to use this option together with the option
5463              * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed
5464              * instead of two (e.g. \\alpha).
5465              *
5466              * @name useMathJax
5467              * @memberOf Text.prototype
5468              * @default false
5469              * @type Boolean
5470              * @see Text#parse
5471              *
5472              * @example
5473              *  // Before loading MathJax, it has to be configured something like this:
5474              * window.MathJax = {
5475              *   tex: {
5476              *     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
5477              *     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
5478              *     packages: ['base', 'ams']
5479              *   },
5480              *   options: {
5481              *     ignoreHtmlClass: 'tex2jax_ignore',
5482              *     processHtmlClass: 'tex2jax_process'
5483              *   }
5484              * };
5485              *
5486              * // Display style
5487              * board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
5488              *     fontSize: 15, color:'green', useMathJax: true});
5489              *
5490              * // Inline style
5491              * board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
5492              *     fontSize: 15, color:'green', useMathJax: true});
5493              *
5494              * var A = board.create('point', [-2, 0]);
5495              * var B = board.create('point', [1, 0]);
5496              * var C = board.create('point', [0, 1]);
5497              *
5498              * var graph = board.create('ellipse', [A, B, C], {
5499              *         fixed: true,
5500              *         withLabel: true,
5501              *         strokeColor: 'black',
5502              *         strokeWidth: 2,
5503              *         fillColor: '#cccccc',
5504              *         fillOpacity: 0.3,
5505              *         highlightStrokeColor: 'red',
5506              *         highlightStrokeWidth: 3,
5507              *         name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
5508              *         label: {useMathJax: true}
5509              *     });
5510              *
5511              * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
5512              * {
5513              *   fontSize: 24, parse: false
5514              * });
5515              * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
5516              * {
5517              *   fontSize: 24, useMathJax: true
5518              * });
5519              *
5520              * </pre>
5521              * <script>
5522              * window.MathJax = {
5523              *   tex: {
5524              *     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
5525              *     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
5526              *     packages: ['base', 'ams']
5527              *   },
5528              *   options: {
5529              *     ignoreHtmlClass: 'tex2jax_ignore',
5530              *     processHtmlClass: 'tex2jax_process'
5531              *   }
5532              * };
5533              * </script>
5534              * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
5535              * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div>
5536              * <script type="text/javascript">
5537              *     (function() {
5538              *         var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9',
5539              *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
5540              *     // Display style
5541              *     board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
5542              *         fontSize: 15, color:'green', useMathJax: true});
5543              *
5544              *     // Inline style
5545              *     board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
5546              *         fontSize: 15, color:'green', useMathJax: true});
5547              *
5548              *     var A = board.create('point', [-2, 0]);
5549              *     var B = board.create('point', [1, 0]);
5550              *     var C = board.create('point', [0, 1]);
5551              *
5552              *     var graph = board.create('ellipse', [A, B, C], {
5553              *             fixed: true,
5554              *             withLabel: true,
5555              *             strokeColor: 'black',
5556              *             strokeWidth: 2,
5557              *             fillColor: '#cccccc',
5558              *             fillOpacity: 0.3,
5559              *             highlightStrokeColor: 'red',
5560              *             highlightStrokeWidth: 3,
5561              *             name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
5562              *             label: {useMathJax: true}
5563              *         });
5564              *
5565              *     var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
5566              *     {
5567              *       fontSize: 24, parse: false
5568              *     });
5569              *     var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
5570              *     {
5571              *       fontSize: 24, useMathJax: true
5572              *     });
5573              *     })();
5574              *
5575              * </script><pre>
5576              *
5577              *
5578              * @example
5579              * // Load MathJax:
5580              * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script>
5581              *
5582              * // function and its derivative
5583              * var f1 = function(x) { return x * x * x; },
5584              * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),
5585              *
5586              * A = board.create('glider', [0.5, f1(0.5), graph1], {
5587              *             name: 'f(x)',
5588              *             color: 'black',
5589              *             face:'x',
5590              *             fixed: true,
5591              *             size: 3,
5592              *             label: {offset: [-30, 10], fontSize: 15}
5593              *         }),
5594              * B = board.create('glider', [0.7, f1(0.7), graph1], {
5595              *             name: 'f(x+Δx)',
5596              *             size: 3,
5597              *             label: {offset: [-60, 10], fontSize: 15}
5598              *         }),
5599              *
5600              * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
5601              * a_h_segment = board.create('segment', [A, [
5602              *                     function(){ return B.X() > A.X() ? B.X() : A.X()},
5603              *                     function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5604              *                 ]],{ name: 'Δx', dash: 1, color: 'black'});
5605              *
5606              * b_v_segment = board.create('segment', [B, [
5607              *                     function(){ return B.X() > A.X() ? B.X() : A.X()},
5608              *                     function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5609              *                 ]],{ name: 'Δy', dash: 1, color: 'black'}),
5610              *
5611              * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
5612              *     ], {visible: false});
5613              *
5614              * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
5615              *     anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
5616              * });
5617              *
5618              * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
5619              * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
5620              *     anchor: mb, useMathJax: true, fixed: true, color: 'green'
5621              * });
5622              *
5623              * dval = board.create('text',[0.1, 0.8,
5624              *     function(){
5625              *         return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
5626              *             '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
5627              *     }],{fontSize: 15, useMathJax: true});
5628              *
5629              * </pre>
5630              * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
5631              * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div>
5632              * <script type="text/javascript">
5633              *     (function() {
5634              *         var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621',
5635              *             {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false});
5636              *     // function and its derivative
5637              *     var f1 = function(x) { return x * x * x; },
5638              *     graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),
5639              *
5640              *     A = board.create('glider', [0.5, f1(0.5), graph1], {
5641              *                 name: 'f(x)',
5642              *                 color: 'black',
5643              *                 face:'x',
5644              *                 fixed: true,
5645              *                 size: 3,
5646              *                 label: {offset: [-30, 10], fontSize: 15}
5647              *             }),
5648              *     B = board.create('glider', [0.7, f1(0.7), graph1], {
5649              *                 name: 'f(x+Δx)',
5650              *                 size: 3,
5651              *                 label: {offset: [-60, 10], fontSize: 15}
5652              *             }),
5653              *
5654              *     secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
5655              *     a_h_segment = board.create('segment', [A, [
5656              *                         function(){ return B.X() > A.X() ? B.X() : A.X()},
5657              *                         function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5658              *                     ]],{ name: 'Δx', dash: 1, color: 'black'});
5659              *
5660              *     b_v_segment = board.create('segment', [B, [
5661              *                         function(){ return B.X() > A.X() ? B.X() : A.X()},
5662              *                         function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5663              *                     ]],{ name: 'Δy', dash: 1, color: 'black'}),
5664              *
5665              *     ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
5666              *         ], {visible: false});
5667              *
5668              *     board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
5669              *         anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
5670              *     });
5671              *
5672              *     mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
5673              *     board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
5674              *         anchor: mb, useMathJax: true, fixed: true, color: 'green'
5675              *     });
5676              *
5677              *     dval = board.create('text',[0.1, 0.8,
5678              *         function(){
5679              *             return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
5680              *                 '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
5681              *         }],{fontSize: 15, useMathJax: true});
5682              *
5683              *     })();
5684              *
5685              * </script><pre>
5686              *
5687              * @example
5688              * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
5689              * board.options.text.useMathjax = true;
5690              *
5691              * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5692              *     suffixlabel:'\\(t_1=\\)',
5693              *     unitLabel: ' \\(\\text{ ms}\\)',
5694              *     snapWidth:0.01}),
5695              *
5696              * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5697              * text1 = board.create('text', [5, 1, function(){
5698              *             return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
5699              *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
5700              *
5701              * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div>
5702              * <script type="text/javascript">
5703              *     (function() {
5704              *         var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6',
5705              *             {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false});
5706              *     board.options.text.useMathjax = true;
5707              *
5708              *     a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5709              *         suffixlabel:'\\(t_1=\\)',
5710              *         unitLabel: ' \\(\\text{ ms}\\)',
5711              *         snapWidth:0.01}),
5712              *
5713              *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5714              *     text1 = board.create('text', [5, 1, function(){
5715              *                 return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
5716              *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
5717              *
5718              *     })();
5719              *
5720              * </script><pre>
5721              *
5722              */
5723             useMathJax: false,
5724 
5725             /**
5726              *
5727              * If true, KaTeX will be used to render the input string.
5728              * For this feature, katex.min.js and katex.min.css have to be included.
5729              * <p>
5730              * The example below does not work, because there is a conflict with
5731              * the MathJax library which is used below.
5732              * </p>
5733              *
5734              * @name useKatex
5735              * @memberOf Text.prototype
5736              * @default false
5737              * @type Boolean
5738              *
5739              *
5740              * @example
5741              * JXG.Options.text.useKatex = true;
5742              *
5743              * const board = JXG.JSXGraph.initBoard('jxgbox', {
5744              *     boundingbox: [-2, 5, 8, -5], axis:true
5745              * });
5746              *
5747              * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5748              *     suffixlabel:'t_1=',
5749              *     unitLabel: ' \\text{ ms}',
5750              *     snapWidth:0.01});
5751              *
5752              * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5753              * text1 = board.create('text', [5, 1, function(){
5754              *             return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
5755              *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
5756              *
5757              * </pre>
5758              * <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">
5759              * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script>
5760              * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div>
5761              * <script type="text/javascript">
5762              *     (function() {
5763              *         var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869',
5764              *             {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false});
5765              *     board.options.useKatex = true;
5766              *     var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5767              *         suffixlabel:'t_1=',
5768              *         unitLabel: ' \\text{ ms}',
5769              *         snapWidth:0.01});
5770              *
5771              *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5772              *     text1 = board.create('text', [5, 1, function(){
5773              *                 return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
5774              *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
5775              *
5776              *     })();
5777              *
5778              * </script><pre>
5779              */
5780             useKatex: false,
5781 
5782             /**
5783              * Determines the rendering method of the text. Possible values
5784              * include <tt>'html'</tt> and <tt>'internal</tt>.
5785              *
5786              * @name display
5787              * @memberOf Text.prototype
5788              * @default 'html'
5789              * @type String
5790              */
5791             display: 'html',
5792 
5793             /**
5794              * Anchor element {@link Point}, {@link Text} or {@link Image} of the text.
5795              * If it exists, the coordinates of the text are relative
5796              * to this anchor element. In this case, only numbers are possible coordinates,
5797              * functions are not supported.
5798              *
5799              * @name anchor
5800              * @memberOf Text.prototype
5801              * @default null
5802              * @type Object
5803              */
5804             anchor: null,
5805 
5806             /**
5807              * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>,
5808              * <tt>'middle'</tt>, and <tt>'right'</tt>.
5809              *
5810              * @name anchorX
5811              * @memberOf Text.prototype
5812              * @default 'left'
5813              * @type String
5814              */
5815             anchorX: 'left',
5816 
5817             /**
5818              * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and
5819              * <tt>'bottom'</tt>.
5820              * For MathJax or KaTeX, 'top' is recommended.
5821              *
5822              * @name anchorY
5823              * @memberOf Text.prototype
5824              * @default 'middle'
5825              * @type String
5826              */
5827             anchorY: 'middle',
5828 
5829             /**
5830              * CSS class of the text in non-highlighted view.
5831              *
5832              * @name cssClass
5833              * @memberOf Text.prototype
5834              * @type String
5835              * @default 'JXGtext'
5836              */
5837             cssClass: 'JXGtext',
5838 
5839             /**
5840              * CSS class of the text in highlighted view.
5841              *
5842              * @name highlightCssClass
5843              * @memberOf Text.prototype
5844              * @type String
5845              * @default 'JXGtext'
5846              */
5847             highlightCssClass: 'JXGtext',
5848 
5849             /**
5850              * Sensitive area for dragging the text.
5851              * Possible values are 'all', or something else.
5852              * If set to 'small', a sensitivity margin at the right and left border is taken.
5853              * This may be extended to left, right, ... in the future.
5854              *
5855              * @name Text#dragArea
5856              * @type String
5857              * @default 'all'
5858              */
5859             dragArea: 'all',
5860 
5861             withLabel: false,
5862 
5863             /**
5864              * Text rotation in degrees.
5865              * Works for non-zero values only in combination with display=='internal'.
5866              *
5867              * @name Text#rotate
5868              * @type Number
5869              * @default 0
5870              */
5871             rotate: 0,
5872 
5873             visible: true,
5874 
5875             /**
5876              * Defines together with {@link Text#snapSizeY} the grid the text snaps on to.
5877              * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
5878              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
5879              * of the default ticks of the default x axes of the board.
5880              *
5881              * @name snapSizeX
5882              * @memberOf Text.prototype
5883              *
5884              * @see Point#snapToGrid
5885              * @see Text#snapSizeY
5886              * @see JXG.Board#defaultAxes
5887              * @type Number
5888              * @default 1
5889              */
5890             snapSizeX: 1,
5891 
5892             /**
5893              * Defines together with {@link Text#snapSizeX} the grid the text snaps on to.
5894              * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
5895              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
5896              * of the default ticks of the default y axes of the board.
5897              *
5898              * @name snapSizeY
5899              * @memberOf Text.prototype
5900              *
5901              * @see Point#snapToGrid
5902              * @see Text#snapSizeX
5903              * @see JXG.Board#defaultAxes
5904              * @type Number
5905              * @default 1
5906              */
5907             snapSizeY: 1,
5908 
5909             /**
5910              * List of attractor elements. If the distance of the text is less than
5911              * attractorDistance the text is made to glider of this element.
5912              *
5913              * @name attractors
5914              * @memberOf Text.prototype
5915              * @type Array
5916              * @default empty
5917              */
5918             attractors: []
5919 
5920             /**#@-*/
5921         },
5922 
5923         /* special options for trace curves */
5924         tracecurve: {
5925             /**#@+
5926              * @visprop
5927              */
5928             strokeColor: '#000000',
5929             fillColor: 'none',
5930 
5931             /**
5932              * The number of evaluated data points.
5933              * @memberOf Tracecurve.prototype
5934              * @default 100
5935              * @name numberPoints
5936              * @type Number
5937              */
5938             numberPoints: 100
5939 
5940             /**#@-*/
5941         },
5942 
5943         /*special turtle options */
5944         turtle: {
5945             /**#@+
5946              * @visprop
5947              */
5948 
5949             strokeWidth: 1,
5950             fillColor: 'none',
5951             strokeColor: '#000000',
5952 
5953             /**
5954              * Attributes for the turtle arrow.
5955              *
5956              * @type Curve
5957              * @name Turtle#arrow
5958              */
5959             arrow: {
5960                 strokeWidth: 2,
5961                 withLabel: false,
5962                 strokeColor: Color.palette.red,
5963                 lastArrow: true
5964             }
5965             /**#@-*/
5966         },
5967 
5968         /**
5969          * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties
5970          * to the same value.
5971          * It is used in {@link JXG.GeometryElement#setAttribute} and in
5972          * the constructor {@link JXG.GeometryElement}.
5973          * Attention: In Options.js abbreviations are not allowed.
5974          * @type Object
5975          * @name JXG.Options#shortcuts
5976          *
5977          */
5978         shortcuts: {
5979             color: ['strokeColor', 'fillColor'],
5980             opacity: ['strokeOpacity', 'fillOpacity'],
5981             highlightColor: ['highlightStrokeColor', 'highlightFillColor'],
5982             highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'],
5983             strokeWidth: ['strokeWidth', 'highlightStrokeWidth']
5984         }
5985     };
5986 
5987     /**
5988      * Holds all possible properties and the according validators for geometry elements.
5989      * A validator is either a function
5990      * which takes one parameter and returns true, if the value is valid for the property,
5991      * or it is false if no validator is required.
5992      */
5993     JXG.Validator = (function () {
5994         var i,
5995             validatePixel = function (v) {
5996                 return (/^[0-9]+px$/).test(v);
5997             },
5998             validateDisplay = function (v) {
5999                 return (v  === 'html' || v === 'internal');
6000             },
6001             validateColor = function (v) {
6002                 // for now this should do it...
6003                 return Type.isString(v);
6004             },
6005             validatePointFace = function (v) {
6006                 return Type.exists(JXG.normalizePointFace(v));
6007             },
6008             validateInteger = function (v) {
6009                 return (Math.abs(v - Math.round(v)) < Mat.eps);
6010             },
6011             validateNotNegativeInteger = function (v) {
6012                 return validateInteger(v) && v >= 0;
6013             },
6014             validatePositiveInteger = function (v) {
6015                 return validateInteger(v) && v > 0;
6016             },
6017             validateScreenCoords = function (v) {
6018                 return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]);
6019             },
6020             validateRenderer = function (v) {
6021                 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no');
6022             },
6023             validatePositive = function (v) {
6024                 return v > 0;
6025             },
6026             validateNotNegative = function (v) {
6027                 return v >= 0;
6028             },
6029             v = {},
6030             validators = {
6031                 attractorDistance: validateNotNegative,
6032                 color: validateColor,
6033                 defaultDistance: Type.isNumber,
6034                 display: validateDisplay,
6035                 doAdvancedPlot: false,
6036                 draft: false,
6037                 drawLabels: false,
6038                 drawZero: false,
6039                 face: validatePointFace,
6040                 factor: Type.isNumber,
6041                 fillColor: validateColor,
6042                 fillOpacity: Type.isNumber,
6043                 firstArrow: false,
6044                 fontSize: validateInteger,
6045                 dash: validateInteger,
6046                 gridX: Type.isNumber,
6047                 gridY: Type.isNumber,
6048                 hasGrid: false,
6049                 highlightFillColor: validateColor,
6050                 highlightFillOpacity: Type.isNumber,
6051                 highlightStrokeColor: validateColor,
6052                 highlightStrokeOpacity: Type.isNumber,
6053                 insertTicks: false,
6054                 //: validateScreenCoords,
6055                 lastArrow: false,
6056                 layer: validateNotNegativeInteger,
6057                 majorHeight: validateInteger,
6058                 minorHeight: validateInteger,
6059                 minorTicks: validateNotNegative,
6060                 minTicksDistance: validatePositiveInteger,
6061                 numberPointsHigh: validatePositiveInteger,
6062                 numberPointsLow: validatePositiveInteger,
6063                 opacity: Type.isNumber,
6064                 radius: Type.isNumber,
6065                 RDPsmoothing: false,
6066                 renderer: validateRenderer,
6067                 right: validatePixel,
6068                 showCopyright: false,
6069                 showInfobox: false,
6070                 showNavigation: false,
6071                 size: validateNotNegative, //validateInteger,
6072                 snapSizeX: validatePositive,
6073                 snapSizeY: validatePositive,
6074                 snapWidth: Type.isNumber,
6075                 snapToGrid: false,
6076                 snatchDistance: validateNotNegative,
6077                 straightFirst: false,
6078                 straightLast: false,
6079                 stretch: false,
6080                 strokeColor: validateColor,
6081                 strokeOpacity: Type.isNumber,
6082                 strokeWidth: validateNotNegative, //validateInteger,
6083                 takeFirst: false,
6084                 takeSizeFromFile: false,
6085                 to10: false,
6086                 toOrigin: false,
6087                 translateTo10: false,
6088                 translateToOrigin: false,
6089                 useASCIIMathML: false,
6090                 useDirection: false,
6091                 useMathJax: false,
6092                 withLabel: false,
6093                 withTicks: false,
6094                 zoom: false
6095             };
6096 
6097         // this seems like a redundant step but it makes sure that
6098         // all properties in the validator object have lower case names
6099         // and the validator object is easier to read.
6100         for (i in validators) {
6101             if (validators.hasOwnProperty(i)) {
6102                 v[i.toLowerCase()] = validators[i];
6103             }
6104         }
6105 
6106         return v;
6107     }());
6108 
6109     /**
6110      * All point faces can be defined with more than one name, e.g. a cross faced point can be given
6111      * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to
6112      * simplify if- and switch-clauses regarding point faces. The translation table is as follows:
6113      * <table>
6114      * <tr><th>Input</th><th>Output</th></tr>
6115      * <tr><td>cross, x</td><td>x</td></tr>
6116      * <tr><td>circle, o</td><td>o</td></tr>
6117      * <tr><td>square, []</td><td>[]</td></tr>
6118      * <tr><td>plus, +</td><td>+</td></tr>
6119      * <tr><td>diamond, <></td><td><></td></tr>
6120      * <tr><td>triangleup, a, ^</td><td>A</td></tr>
6121      * <tr><td>triangledown, v</td><td>v</td></tr>
6122      * <tr><td>triangleleft, <</td><td><</td></tr>
6123      * <tr><td>triangleright, ></td><td>></td></tr>
6124      * </table>
6125      * @param {String} s A string which should determine a valid point face.
6126      * @returns {String} Returns a normalized string or undefined if the given string is not a valid
6127      * point face.
6128      */
6129     JXG.normalizePointFace = function (s) {
6130         var map = {
6131             cross: 'x',
6132             x: 'x',
6133             circle: 'o',
6134             o: 'o',
6135             square: '[]',
6136             '[]': '[]',
6137             plus: '+',
6138             '+': '+',
6139             diamond: '<>',
6140             '<>': '<>',
6141             triangleup: '^',
6142             a: '^',
6143             '^': '^',
6144             triangledown: 'v',
6145             v: 'v',
6146             triangleleft: '<',
6147             '<': '<',
6148             triangleright: '>',
6149             '>': '>'
6150         };
6151 
6152         return map[s];
6153     };
6154 
6155 
6156     /**
6157      * Apply the options stored in this object to all objects on the given board.
6158      * @param {JXG.Board} board The board to which objects the options will be applied.
6159      */
6160     JXG.useStandardOptions = function (board) {
6161         var el, t, p, copyProps,
6162             o = JXG.Options,
6163             boardHadGrid = board.hasGrid;
6164 
6165         board.options.grid.hasGrid = o.grid.hasGrid;
6166         board.options.grid.gridX = o.grid.gridX;
6167         board.options.grid.gridY = o.grid.gridY;
6168         board.options.grid.gridColor = o.grid.gridColor;
6169         board.options.grid.gridOpacity = o.grid.gridOpacity;
6170         board.options.grid.gridDash = o.grid.gridDash;
6171         board.options.grid.snapToGrid = o.grid.snapToGrid;
6172         board.options.grid.snapSizeX = o.grid.SnapSizeX;
6173         board.options.grid.snapSizeY = o.grid.SnapSizeY;
6174         board.takeSizeFromFile = o.takeSizeFromFile;
6175 
6176         copyProps = function (p, o) {
6177             p.visProp.fillcolor = o.fillColor;
6178             p.visProp.highlightfillcolor = o.highlightFillColor;
6179             p.visProp.strokecolor = o.strokeColor;
6180             p.visProp.highlightstrokecolor = o.highlightStrokeColor;
6181         };
6182 
6183         for (el in board.objects) {
6184             if (board.objects.hasOwnProperty(el)) {
6185                 p = board.objects[el];
6186                 if (p.elementClass === Const.OBJECT_CLASS_POINT) {
6187                     copyProps(p, o.point);
6188                 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) {
6189                     copyProps(p, o.line);
6190 
6191                     for (t = 0; t < p.ticks.length; t++) {
6192                         p.ticks[t].majorTicks = o.line.ticks.majorTicks;
6193                         p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance;
6194                         p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight;
6195                         p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight;
6196                     }
6197                 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) {
6198                     copyProps(p, o.circle);
6199                 } else if (p.type === Const.OBJECT_TYPE_ANGLE) {
6200                     copyProps(p, o.angle);
6201                 } else if (p.type === Const.OBJECT_TYPE_ARC) {
6202                     copyProps(p, o.arc);
6203                 } else if (p.type === Const.OBJECT_TYPE_POLYGON) {
6204                     copyProps(p, o.polygon);
6205                 } else if (p.type === Const.OBJECT_TYPE_CONIC) {
6206                     copyProps(p, o.conic);
6207                 } else if (p.type === Const.OBJECT_TYPE_CURVE) {
6208                     copyProps(p, o.curve);
6209                 } else if (p.type === Const.OBJECT_TYPE_SECTOR) {
6210                     p.arc.visProp.fillcolor = o.sector.fillColor;
6211                     p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor;
6212                     p.arc.visProp.fillopacity = o.sector.fillOpacity;
6213                     p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity;
6214                 }
6215             }
6216         }
6217 
6218         board.fullUpdate();
6219         if (boardHadGrid && !board.hasGrid) {
6220             board.removeGrids(board);
6221         } else if (!boardHadGrid && board.hasGrid) {
6222             board.create('grid', []);
6223         }
6224     };
6225 
6226     /**
6227      * Converts all color values to greyscale and calls useStandardOption to put them onto the board.
6228      * @param {JXG.Board} board The board to which objects the options will be applied.
6229      * @see #useStandardOptions
6230      */
6231     JXG.useBlackWhiteOptions = function (board) {
6232         var o = JXG.Options;
6233         o.point.fillColor = Color.rgb2bw(o.point.fillColor);
6234         o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor);
6235         o.point.strokeColor = Color.rgb2bw(o.point.strokeColor);
6236         o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor);
6237 
6238         o.line.fillColor = Color.rgb2bw(o.line.fillColor);
6239         o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor);
6240         o.line.strokeColor = Color.rgb2bw(o.line.strokeColor);
6241         o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor);
6242 
6243         o.circle.fillColor = Color.rgb2bw(o.circle.fillColor);
6244         o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor);
6245         o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor);
6246         o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor);
6247 
6248         o.arc.fillColor = Color.rgb2bw(o.arc.fillColor);
6249         o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor);
6250         o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor);
6251         o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor);
6252 
6253         o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor);
6254         o.polygon.highlightFillColor  = Color.rgb2bw(o.polygon.highlightFillColor);
6255 
6256         o.sector.fillColor = Color.rgb2bw(o.sector.fillColor);
6257         o.sector.highlightFillColor  = Color.rgb2bw(o.sector.highlightFillColor);
6258 
6259         o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor);
6260         o.grid.gridColor = Color.rgb2bw(o.grid.gridColor);
6261 
6262         JXG.useStandardOptions(board);
6263     };
6264 
6265     // needs to be exported
6266     JXG.Options.normalizePointFace = JXG.normalizePointFace;
6267 
6268     return JXG.Options;
6269 });
6270