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