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: {

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              * <p>
1415              * If an element is set to be neither scalable nor rotatable, it can only be translated.
1416              *
1417              * @type Boolean
1418              * @default true
1419              * @name JXG.GeometryElement#scalable
1420              * @see JXG.Ticks#fixed
1421              * @see JXG.GeometryElement#rotatable
1422              */
1423             scalable: true,
1424 
1425             /**
1426              * Determines whether two-finger manipulation may rotate this object.
1427              * If set to false, the object can only be scaled and translated.
1428              * <p>
1429              * In case the element is a polygon or line and it has the attribute "rotatable:false",
1430              * moving the element with two fingers results in a rotation or translation.
1431              * <p>
1432              * If an element is set to be neither scalable nor rotatable, it can only be translated.
1433              *
1434              * @type Boolean
1435              * @default true
1436              * @name JXG.GeometryElement#rotatable
1437              * @see JXG.GeometryElement#scalable
1438              */
1439             rotatable: true,
1440 
1441             /**
1442              * If the element is dragged it will be moved on mousedown or touchstart to the
1443              * top of its layer. Works only for SVG renderer and for simple elements
1444              * consisting of one SVG node.
1445              * @example
1446              * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
1447              * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});
1448              *
1449              * </pre><div id="JXG38449fee-1ab4-44de-b7d1-43caa1f50f86" class="jxgbox" style="width: 300px; height: 300px;"></div>
1450              * <script type="text/javascript">
1451              *     (function() {
1452              *         var board = JXG.JSXGraph.initBoard('JXG38449fee-1ab4-44de-b7d1-43caa1f50f86',
1453              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1454              *     var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
1455              *     var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});
1456              *
1457              *     })();
1458              *
1459              * </script><pre>
1460              *
1461              * @type Boolean
1462              * @default false
1463              * @name JXG.GeometryElement#dragToTopOfLayer
1464              */
1465             dragToTopOfLayer: false,
1466 
1467             /**
1468              * Precision options for JSXGraph elements.
1469              * This attributes takes either the value 'inherit' or an object of the form:
1470              * <pre>
1471              * precision: {
1472              *      touch: 30,
1473              *      mouse: 4,
1474              *      pen: 4
1475              * }
1476              * </pre>
1477              *
1478              * In the first case, the global, JSXGraph-wide values of JXGraph.Options.precision
1479              * are taken.
1480              *
1481              * @type {String|Object}
1482              * @name JXG.GeometryElement#precision
1483              * @see JXG.Options#precision
1484              * @default 'inherit'
1485              */
1486             precision: 'inherit',
1487 
1488             /*draft options */
1489             draft: {
1490                 /**
1491                  * If true the element will be drawn in grey scale colors to visualize that it's only a draft.
1492                  * @type Boolean
1493                  * @name JXG.GeometryElement#draft
1494                  * @default {@link JXG.Options.elements.draft#draft}
1495                  */
1496                 draft: false,
1497                 strokeColor: '#565656',
1498                 fillColor: '#565656',
1499                 strokeOpacity: 0.8,
1500                 fillOpacity: 0.8,
1501                 strokeWidth: 1
1502             },
1503 
1504             /**
1505              * @private
1506              * By default, an element is not a label. Do not change this.
1507              */
1508             isLabel: false,
1509 
1510             /**
1511              * Controls if an element can get the focus with the tab key.
1512              * tabindex corresponds to the HTML attribute of the same name.
1513              * See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">descriptiona at MDN</a>.
1514              * The additional value null completely disables focus of an element.
1515              * The value will be ignored if keyboard control of the board is not enabled or
1516              * the element is fixed or not visible.
1517              *
1518              * @name JXG.GeometryElement#tabindex
1519              * @type Number
1520              * @default 0
1521              * @see JXG.Board#keyboard
1522              * @see JXG.GeometryElement#fixed
1523              * @see JXG.GeometryElement#visible
1524              */
1525             tabindex: 0
1526 
1527             // close the meta tag
1528             /**#@-*/
1529         },
1530 
1531          /*
1532           *  Generic options used by {@link JXG.Ticks}
1533           */
1534         ticks: {
1535             /**#@+
1536              * @visprop
1537              */
1538 
1539             /**
1540              * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
1541              * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
1542              * The tird parameter is a null, number or a string. In the latter two cases, this value is taken.
1543              * Returns a string.
1544              *
1545              * @type function
1546              * @name Ticks#generateLabelText
1547              */
1548             generateLabelText: null,
1549 
1550             /**
1551              * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
1552              * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
1553              *
1554              * @deprecated Use {@link JGX.Options@generateLabelText}
1555              * @type function
1556              * @name Ticks#generateLabelValue
1557              */
1558             generateLabelValue: null,
1559 
1560             /**
1561              * Draw labels yes/no
1562              *
1563              * @type Boolean
1564              * @name Ticks#drawLabels
1565              * @default false
1566              */
1567             drawLabels: false,
1568 
1569             /**
1570              * Attributes for the ticks labels
1571              *
1572              * @name Ticks#label
1573              * @type Object
1574              * @default {}
1575              *
1576              */
1577             label: {
1578             },
1579 
1580             /**
1581             * Format tick labels that were going to have scientific notation
1582             * like 5.00e+6 to look like 5•10⁶.
1583             *
1584             * @example
1585             * var board = JXG.JSXGraph.initBoard("jxgbox", {
1586             *     boundingbox: [-500000, 500000, 500000, -500000],
1587             *     axis: true,
1588             *     defaultAxes: {
1589             *         x: {
1590             *             scalable: true,
1591             *             ticks: {
1592             *                 beautifulScientificTickLabels: true
1593             *           },
1594             *         },
1595             *         y: {
1596             *             scalable: true,
1597             *             ticks: {
1598             *                 beautifulScientificTickLabels: true
1599             *           },
1600             *         }
1601             *     },
1602             * });
1603             *
1604             * </pre><div id="JXGc1e46cd1-e025-4002-80aa-b450869fdaa2" class="jxgbox" style="width: 300px; height: 300px;"></div>
1605             * <script type="text/javascript">
1606             *     (function() {
1607             *     var board = JXG.JSXGraph.initBoard('JXGc1e46cd1-e025-4002-80aa-b450869fdaa2', {
1608             *         boundingbox: [-500000, 500000, 500000, -500000],
1609             *         showcopyright: false, shownavigation: false,
1610             *         axis: true,
1611             *         defaultAxes: {
1612             *             x: {
1613             *                 scalable: true,
1614             *                 ticks: {
1615             *                     beautifulScientificTickLabels: true
1616             *               },
1617             *             },
1618             *             y: {
1619             *                 scalable: true,
1620             *                 ticks: {
1621             *                     beautifulScientificTickLabels: true
1622             *               },
1623             *             }
1624             *         },
1625             *     });
1626             *
1627             *     })();
1628             *
1629             * </script><pre>
1630             *
1631             * @name Ticks#beautifulScientificTickLabels
1632             * @type Boolean
1633             * @default false
1634             */
1635             beautifulScientificTickLabels: false,
1636 
1637             /**
1638              * Use the unicode character 0x2212, i.e. the HTML entity &minus; as minus sign.
1639              * That is −1 instead of -1.
1640              *
1641              * @type Boolean
1642              * @name Ticks#useUnicodeMinus
1643              * @default true
1644              */
1645             useUnicodeMinus: true,
1646 
1647             /**
1648              * Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2,
1649              * and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent
1650              * line is of type axis.
1651              *
1652              * @type String
1653              * @name Ticks#anchor
1654              * @default 'left'
1655              */
1656             anchor: 'left',
1657 
1658             /**
1659              * Draw the zero tick, that lies at line.point1?
1660              *
1661              * @type Boolean
1662              * @name Ticks#drawZero
1663              * @default false
1664              */
1665             drawZero: false,
1666 
1667             /**
1668              * If the distance between two ticks is too big we could insert new ticks. If insertTicks
1669              * is <tt>true</tt>, we'll do so, otherwise we leave the distance as is.
1670              * This option is ignored if equidistant is false. In the example below the distance between
1671              * two ticks is given as <tt>1</tt> but because insertTicks is set to true many ticks will
1672              * be omitted in the rendering process to keep the display clear.
1673              *
1674              * @type Boolean
1675              * @name Ticks#insertTicks
1676              * @see Ticks#minTicksDistance
1677              * @default false
1678              * @example
1679              * // Create an axis providing two coord pairs.
1680              *   var p1 = board.create('point', [0, 0]);
1681              *   var p2 = board.create('point', [50, 25]);
1682              *   var l1 = board.create('line', [p1, p2]);
1683              *   var t = board.create('ticks', [l1, 1], {
1684              *      insertTicks: true,
1685              *      majorHeight: -1,
1686              *      label: {
1687              *          offset: [4, -9]
1688              *      },
1689              *      drawLabels: true
1690              *  });
1691              * </pre><div class="jxgbox" id="JXG2f6fb842-40bd-4223-aa28-3e9369d2097f" style="width: 300px; height: 300px;"></div>
1692              * <script type="text/javascript">
1693              * (function () {
1694              *   var board = JXG.JSXGraph.initBoard('JXG2f6fb842-40bd-4223-aa28-3e9369d2097f', {boundingbox: [-100, 70, 70, -100], showcopyright: false, shownavigation: false});
1695              *   var p1 = board.create('point', [0, 0]);
1696              *   var p2 = board.create('point', [50, 25]);
1697              *   var l1 = board.create('line', [p1, p2]);
1698              *   var t = board.create('ticks', [l1, 1], {insertTicks: true, majorHeight: -1, label: {offset: [4, -9]}, drawLabels: true});
1699              * })();
1700              * </script><pre>
1701              */
1702             insertTicks: false,
1703 
1704             /**
1705              * Minimum distance in pixel of equidistant ticks in case insertTicks==true.
1706              * @name Ticks#minTicksDistance
1707              * @type: Number
1708              * @default: 10
1709              * @see Ticks#insertTicks
1710              */
1711             minTicksDistance: 10,
1712 
1713             /**
1714              * Total height of a minor tick. If negative the full height of the board is taken.
1715              *
1716              * @type Number
1717              * @name Ticks#minorHeight
1718              * @default 4
1719              */
1720             minorHeight: 4,
1721 
1722             /**
1723              * Total height of a major tick. If negative the full height of the board is taken.
1724              *
1725              * @type Number
1726              * @name Ticks#majorHeight
1727              * @default 10
1728              */
1729             majorHeight: 10,
1730 
1731             /**
1732              * Decides in which direction finite ticks are visible. Possible values are either the constants
1733              * 0=false or 1=true or a function returning 0 or 1.
1734              *
1735              * In case of [0,1] the tick is only visible to the right of the line. In case of
1736              * [1,0] the tick is only visible to the left of the line.
1737              *
1738              * @type Array
1739              * @name Ticks#tickEndings
1740              * @default [1, 1]
1741              */
1742             tickEndings: [1, 1],
1743 
1744             /**
1745              * The number of minor ticks between two major ticks.
1746              * @type Number
1747              * @name Ticks#minorTicks
1748              * @default 4
1749              */
1750             minorTicks: 4,
1751 
1752             /**
1753              * Scale the ticks but not the tick labels.
1754              * @type Number
1755              * @default 1
1756              * @name Ticks#scale
1757              * @see Ticks#scaleSymbol
1758              */
1759             scale: 1,
1760 
1761             /**
1762              * A string that is appended to every tick, used to represent the scale
1763              * factor given in {@link Ticks#scaleSymbol}.
1764              *
1765              * @type String
1766              * @default ''
1767              * @name Ticks#scaleSymbol
1768              * @see Ticks#scale
1769              */
1770             scaleSymbol: '',
1771 
1772             /**
1773              * User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array
1774              * is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is
1775              * shown as a fallback.
1776              *
1777              * @type Array
1778              * @name Ticks#labels
1779              * @default []
1780              */
1781             labels: [],
1782 
1783             /**
1784              * The maximum number of characters a tick label can use.
1785              *
1786              * @type Number
1787              * @name Ticks#maxLabelLength
1788              * @see Ticks#precision
1789              * @default 5
1790              */
1791             maxLabelLength: 5,
1792 
1793             /**
1794              * If a label exceeds {@link Ticks#maxLabelLength} this determines the precision used to shorten the tick label.
1795              * Replaced by the digits attribute.
1796              *
1797              * @type Number
1798              * @name Ticks#precision
1799              * @see Ticks#maxLabelLength
1800              * @see Ticks#digits
1801              * @deprecated
1802              * @default 3
1803              */
1804             precision: 3,
1805 
1806             /**
1807              * If a label exceeds {@link Ticks#maxLabelLength} this determines the number of digits used to shorten the tick label.
1808              *
1809              * @type Number
1810              * @name Ticks#digits
1811              * @see Ticks#maxLabelLength
1812              * @deprecated
1813              * @default 3
1814              */
1815             digits: 3,
1816 
1817             /**
1818              * The default distance between two ticks. Please be aware that this value does not have
1819              * to be used if {@link Ticks#insertTicks} is set to true.
1820              *
1821              * @type Number
1822              * @name Ticks#ticksDistance
1823              * @see Ticks#insertTicks
1824              * @default 1
1825              */
1826             ticksDistance: 1,
1827 
1828             /**
1829              * Tick face for ticks of finite length.  By default (face: '|') this is a straight line.
1830              * Possible other values are '<' and '>'. These faces are used in
1831              * {@link JXG.Hatch} for hatch marking parallel lines.
1832              * @type String
1833              * @name{Ticks#face}
1834              * @see hatch
1835              * @default '|'
1836              * @example
1837              *   var p1 = board.create('point', [0, 3]);
1838              *   var p2 = board.create('point', [1, 3]);
1839              *   var l1 = board.create('line', [p1, p2]);
1840              *   var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'});
1841              *
1842              * </pre><div id="JXG950a568a-1264-4e3a-b61d-b6881feecf4b" class="jxgbox" style="width: 300px; height: 300px;"></div>
1843              * <script type="text/javascript">
1844              *     (function() {
1845              *         var board = JXG.JSXGraph.initBoard('JXG950a568a-1264-4e3a-b61d-b6881feecf4b',
1846              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1847              *       var p1 = board.create('point', [0, 3]);
1848              *       var p2 = board.create('point', [1, 3]);
1849              *       var l1 = board.create('line', [p1, p2]);
1850              *       var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'});
1851              *
1852              *     })();
1853              *
1854              * </script><pre>
1855              *
1856              */
1857             face: '|',
1858 
1859             strokeOpacity: 1,
1860             strokeWidth: 1,
1861             strokeColor: '#000000',
1862             highlightStrokeColor: '#888888',
1863             fillColor: 'none',
1864             highlightFillColor: 'none',
1865             visible: 'inherit',
1866 
1867             /**
1868              * Whether line boundaries should be counted or not in the lower and upper bounds when
1869              * creating ticks.
1870              *
1871              * @type Boolean
1872              * @name Ticks#includeBoundaries
1873              * @default false
1874              */
1875             includeBoundaries: false,
1876 
1877             /**
1878              * Set the ticks type.
1879              * Possible values are 'linear' or 'polar'.
1880              *
1881              * @type String
1882              * @name Ticks#type
1883              * @default 'linear'
1884              */
1885             type: 'linear'
1886 
1887             // close the meta tag
1888             /**#@-*/
1889         },
1890 
1891          /*
1892           *  Generic options used by {@link JXG.Hatch}
1893           */
1894         hatch: {
1895             drawLabels: false,
1896             drawZero: true,
1897             majorHeight: 20,
1898             anchor: 'middle',
1899             face: '|',
1900             strokeWidth: 2,
1901             strokeColor: Color.palette.blue,
1902             ticksDistance: 0.2
1903         },
1904 
1905         /**
1906          * Precision options, defining how close a pointer device (mouse, finger, pen) has to be
1907          * to an object such that the object is highlighted or can be dragged.
1908          * These values are board-wide and can be overwritten for individual elements by
1909          * changing their precision attribute.
1910          *
1911          * The default values are
1912          * <pre>
1913          * JXG.Options.precision: {
1914          *   touch: 30,
1915          *   touchMax: 100,
1916          *   mouse: 4,
1917          *   pen: 4,
1918          *   epsilon: 0.0001,
1919          *   hasPoint: 4
1920          * }
1921          * </pre>
1922          *
1923          * @type Object
1924          * @name JXG.Options#precision
1925          * @see JXG.GeometryElement#precision
1926          */
1927         precision: {
1928             touch: 30,
1929             touchMax: 100,
1930             mouse: 4,
1931             pen: 4,
1932             epsilon: 0.0001, // Unused
1933             hasPoint: 4
1934         },
1935 
1936         /**
1937          * Default ordering of the layers.
1938          * The numbering starts from 0 and the highest layer number is numlayers-1.
1939          *
1940          * The default values are
1941          * <pre>
1942          * JXG.Options.layer: {
1943          *   numlayers: 20, // only important in SVG
1944          *   text: 9,
1945          *   point: 9,
1946          *   glider: 9,
1947          *   arc: 8,
1948          *   line: 7,
1949          *   circle: 6,
1950          *   curve: 5,
1951          *   turtle: 5,
1952          *   polygon: 3,
1953          *   sector: 3,
1954          *   angle: 3,
1955          *   integral: 3,
1956          *   axis: 2,
1957          *   ticks: 2,
1958          *   grid: 1,
1959          *   image: 0,
1960          *   trace: 0
1961          * }
1962          * </pre>
1963          * @type Object
1964          * @name JXG.Options#layer
1965          */
1966         layer: {
1967             numlayers: 20, // only important in SVG
1968             unused9: 19,
1969             unused8: 18,
1970             unused7: 17,
1971             unused6: 16,
1972             unused5: 15,
1973             unused4: 14,
1974             unused3: 13,
1975             unused2: 12,
1976             unused1: 11,
1977             unused0: 10,
1978             text: 9,
1979             point: 9,
1980             glider: 9,
1981             arc: 8,
1982             line: 7,
1983             circle: 6,
1984             curve: 5,
1985             turtle: 5,
1986             polygon: 3,
1987             sector: 3,
1988             angle: 3,
1989             integral: 3,
1990             axis: 2,
1991             ticks: 2,
1992             grid: 1,
1993             image: 0,
1994             trace: 0
1995         },
1996 
1997         /* special angle options */
1998         angle: {
1999             /**#@+
2000              * @visprop
2001              */
2002 
2003             withLabel: true,
2004 
2005             /**
2006              * Radius of the sector, displaying the angle.
2007              * The radius can be given as number (in user coordinates)
2008              * or as string 'auto'. In the latter case, the angle
2009              * is set to an value between 20 and 50 px.
2010              *
2011              * @type {Number|String}
2012              * @name Angle#radius
2013              * @default 'auto'
2014              * @visprop
2015              */
2016             radius: 'auto',
2017 
2018             /**
2019              * Display type of the angle field. Possible values are
2020              * 'sector' or 'sectordot' or 'square' or 'none'.
2021              *
2022              * @type String
2023              * @default 'sector'
2024              * @name Angle#type
2025              * @visprop
2026              */
2027             type: 'sector',
2028 
2029             /**
2030              * Display type of the angle field in case of a right angle. Possible values are
2031              * 'sector' or 'sectordot' or 'square' or 'none'.
2032              *
2033              * @type String
2034              * @default square
2035              * @name Angle#orthoType
2036              * @see Angle#orthoSensitivity
2037              * @visprop
2038              */
2039             orthoType: 'square',
2040 
2041             /**
2042              * Sensitivity (in degrees) to declare an angle as right angle.
2043              * If the angle measure is inside this distance from a rigth angle, the orthoType
2044              * of the angle is used for display.
2045              *
2046              * @type Number
2047              * @default 1.0
2048              * @name Angle#orthoSensitivity
2049              * @see Angle#orthoType
2050              * @visprop
2051              */
2052             orthoSensitivity: 1.0,
2053 
2054             fillColor: Color.palette.orange,
2055             highlightFillColor: Color.palette.orange,
2056             strokeColor: Color.palette.orange,
2057             // fillColor: '#ff7f00',
2058             // highlightFillColor: '#ff7f00',
2059             // strokeColor: '#ff7f00',
2060 
2061             fillOpacity: 0.3,
2062             highlightFillOpacity: 0.3,
2063 
2064             /**
2065              * @deprecated
2066              */
2067             radiuspoint: {
2068                 withLabel: false,
2069                 visible: false,
2070                 name: ''
2071             },
2072 
2073             /**
2074              * @deprecated
2075              */
2076             pointsquare: {
2077                 withLabel: false,
2078                 visible: false,
2079                 name: ''
2080             },
2081 
2082             dot: {
2083                 visible: false,
2084                 strokeColor: 'none',
2085                 fillColor: '#000000',
2086                 size: 2,
2087                 face: 'o',
2088                 withLabel: false,
2089                 name: ''
2090             },
2091 
2092             label: {
2093                 position: 'top',
2094                 offset: [0, 0],
2095                 strokeColor: Color.palette.blue
2096             },
2097 
2098             /**
2099              * Attributes for sub-element arc. In general, the arc will run through the first point and
2100              * thus will not have the same radius as the angle sector.
2101              *
2102              * @type Arc
2103              * @name Angle#arc
2104              * @default '{visible:false}'
2105              */
2106             arc: {
2107                 visible: false,
2108                 fillColor: 'none'
2109             },
2110 
2111             /**#@-*/
2112         },
2113 
2114         /* special arc options */
2115         arc: {
2116             /**#@+
2117              * @visprop
2118              */
2119 
2120             /**
2121              * Type of arc. Possible values are 'minor', 'major', and 'auto'.
2122              *
2123              * @type String
2124              * @name Arc#selection
2125              * @default 'auto'
2126              */
2127             selection: 'auto',
2128 
2129             /**
2130              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
2131              *
2132              * @see JXG.GeometryElement#hasPoint
2133              * @name Arc#hasInnerPoints
2134              * @type Boolean
2135              * @default false
2136              */
2137             hasInnerPoints: false,
2138 
2139             label: {
2140                 anchorX: 'auto',
2141                 anchorY: 'auto'
2142             },
2143             firstArrow: false,
2144             lastArrow: false,
2145             fillColor: 'none',
2146             highlightFillColor: 'none',
2147             strokeColor: Color.palette.blue,
2148             highlightStrokeColor: '#c3d9ff',
2149             useDirection: false,
2150 
2151             /**
2152              * Attributes for center point.
2153              *
2154              * @type Point
2155              * @name Arc#center
2156              */
2157             center: {
2158             },
2159 
2160             /**
2161              * Attributes for radius point.
2162              *
2163              * @type Point
2164              * @name Arc#radiusPoint
2165              */
2166             radiusPoint: {
2167             },
2168 
2169             /**
2170              * Attributes for angle point.
2171              *
2172              * @type Point
2173              * @name Arc#anglePoint
2174              */
2175             anglePoint: {
2176             }
2177 
2178             /**#@-*/
2179         },
2180 
2181         /* special arrow options */
2182         arrow: {
2183             /**#@+
2184              * @visprop
2185              */
2186 
2187             firstArrow: false,
2188 
2189             lastArrow: {
2190                 type: 1,
2191                 highlightSize: 6,
2192                 size: 6
2193             }
2194 
2195             /**#@-*/
2196         },
2197 
2198         /* special axis options */
2199         axis: {
2200             /**#@+
2201              * @visprop
2202              */
2203 
2204             name: '',                            // By default, do not generate names for axes.
2205             needsRegularUpdate: false,           // Axes only updated after zooming and moving of the origin.
2206             strokeWidth: 1,
2207             lastArrow: {
2208                 type: 1,
2209                 highlightSize: 8,
2210                 size: 8
2211             },
2212             strokeColor: '#666666',
2213             highlightStrokeWidth: 1,
2214             highlightStrokeColor: '#888888',
2215 
2216 
2217             /**
2218              * Show / hide ticks.
2219              *
2220              * Deprecated. Suggested alternative is "ticks: {visible: false}"
2221              *
2222              * @type Boolean
2223              * @name Axis#withTicks
2224              * @default true
2225              * @deprecated
2226              */
2227             withTicks: true,
2228             straightFirst: true,
2229             straightLast: true,
2230             margin: -4,
2231             withLabel: false,
2232             scalable: false,
2233 
2234             /**
2235              * Attributes for ticks of the axis.
2236              *
2237              * @type Ticks
2238              * @name Axis#ticks
2239              */
2240             ticks: {
2241                 label: {
2242                     offset: [4, -12 + 3],     // This seems to be a good offset for 12 point fonts
2243                     parse: false,
2244                     needsRegularUpdate: false,
2245                     display: 'internal',
2246                     visible: 'inherit',
2247                     layer: 9
2248                 },
2249                 visible: 'inherit',
2250                 needsRegularUpdate: false,
2251                 strokeWidth: 1,
2252                 strokeColor: '#666666',
2253                 highlightStrokeColor: '#888888',
2254                 drawLabels: true,
2255                 drawZero: false,
2256                 insertTicks: true,
2257                 minTicksDistance: 5,
2258                 minorHeight: 10,          // if <0: full width and height
2259                 majorHeight: -1,          // if <0: full width and height
2260                 tickEndings: [0, 1],
2261                 minorTicks: 4,
2262                 ticksDistance: 1,         // TODO doc
2263                 strokeOpacity: 0.25
2264             },
2265 
2266             /**
2267              * Attributes for first point the axis.
2268              *
2269              * @type Point
2270              * @name Axis#point1
2271              */
2272             point1: {                  // Default values for point1 if created by line
2273                 needsRegularUpdate: false,
2274                 visible: false
2275             },
2276 
2277             /**
2278              * Attributes for second point the axis.
2279              *
2280              * @type Point
2281              * @name Axis#point2
2282              */
2283             point2: {                  // Default values for point2 if created by line
2284                 needsRegularUpdate: false,
2285                 visible: false
2286             },
2287 
2288             tabindex: -1,
2289 
2290             /**
2291              * Attributes for the axis label.
2292              *
2293              * @type Label
2294              * @name Axis#label
2295              */
2296             label: {
2297                 position: 'lft',
2298                 offset: [10, 10]
2299             }
2300             /**#@-*/
2301         },
2302 
2303         /* special options for angle bisector of 3 points */
2304         bisector: {
2305             /**#@+
2306              * @visprop
2307              */
2308 
2309             strokeColor: '#000000', // Bisector line
2310 
2311             /**
2312              * Attributes for the helper point of the bisector.
2313              *
2314              * @type Point
2315              * @name Bisector#point
2316              */
2317             point: {               // Bisector point
2318                 visible: false,
2319                 fixed: false,
2320                 withLabel: false,
2321                 name: ''
2322             }
2323 
2324             /**#@-*/
2325         },
2326 
2327         /* special options for the 2 bisectors of 2 lines */
2328         bisectorlines: {
2329             /**#@+
2330              * @visprop
2331              */
2332 
2333             /**
2334              * Attributes for first line.
2335              *
2336              * @type Line
2337              * @name Bisectorlines#line1
2338              */
2339             line1: {               //
2340                 strokeColor: '#000000'
2341             },
2342 
2343             /**
2344              * Attributes for second line.
2345              *
2346              * @type Line
2347              * @name Bisectorlines#line2
2348              */
2349             line2: {               //
2350                 strokeColor: '#000000'
2351             }
2352 
2353             /**#@-*/
2354         },
2355 
2356         /* special options for boxplot curves */
2357         boxplot: {
2358             /**#@+
2359              * @visprop
2360              */
2361 
2362             /**
2363              *  Direction of the box plot: 'vertical' or 'horizontal'
2364              *
2365              * @type String
2366              * @name Boxplot#dir
2367              * @default: 'vertical'
2368              */
2369             dir: 'vertical',
2370 
2371             /**
2372              * Relative width of the maximum and minimum quantile
2373              *
2374              * @type Number
2375              * @name Boxplot#smallWidth
2376              * @default: 0.5
2377              */
2378             smallWidth: 0.5,
2379 
2380             strokeWidth: 2,
2381             strokeColor: Color.palette.blue,
2382             fillColor: Color.palette.blue,
2383             fillOpacity: 0.2,
2384             highlightStrokeWidth: 2,
2385             highlightStrokeColor: Color.palette.blue,
2386             highlightFillColor: Color.palette.blue,
2387             highlightFillOpacity: 0.1
2388 
2389             /**#@-*/
2390         },
2391 
2392         /* special button options */
2393         button: {
2394             /**#@+
2395              * @visprop
2396              */
2397 
2398             /**
2399              * Control the attribute "disabled" of the HTML button.
2400              *
2401              * @name disabled
2402              * @memberOf Button.prototype
2403              *
2404              * @type Boolean
2405              * @default false
2406              */
2407             disabled: false,
2408 
2409             display: 'html'
2410 
2411             /**#@-*/
2412         },
2413 
2414         /* special cardinal spline options */
2415         cardinalspline: {
2416             /**#@+
2417              * @visprop
2418              */
2419 
2420              /**
2421               * Controls if the data points of the cardinal spline when given as
2422               * arrays should be converted into {@link JXG.Points}.
2423               *
2424               * @name createPoints
2425               * @memberOf Cardinalspline.prototype
2426               *
2427               * @see Cardinalspline#points
2428               *
2429               * @type Boolean
2430               * @default true
2431               */
2432             createPoints: true,
2433 
2434             /**
2435              * If set to true, the supplied coordinates are interpreted as
2436              * [[x_0, y_0], [x_1, y_1], p, ...].
2437              * Otherwise, if the data consists of two arrays of equal length,
2438              * it is interpreted as
2439              * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]]
2440              *
2441              * @name isArrayOfCoordinates
2442              * @memberOf Cardinalspline.prototype
2443              * @type Boolean
2444              * @default false
2445              */
2446             isArrayOfCoordinates: false,
2447 
2448             /**
2449              * Attributes for the points generated by Cardinalspline in cases
2450              * {@link createPoints} is set to true
2451              *
2452              * @name points
2453              * @memberOf Cardinalspline.prototype
2454              *
2455              * @see Cardinalspline#createPoints
2456              * @type Object
2457              */
2458             points: {
2459                 strokeOpacity: 0.05,
2460                 fillOpacity: 0.05,
2461                 highlightStrokeOpacity: 1.0,
2462                 highlightFillOpacity: 1.0,
2463                 withLabel: false,
2464                 name: '',
2465                 fixed: false
2466             }
2467 
2468             /**#@-*/
2469         },
2470 
2471         /* special chart options */
2472         chart: {
2473             /**#@+
2474              * @visprop
2475              */
2476 
2477             chartStyle: 'line',
2478             colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
2479             highlightcolors: null,
2480             fillcolor: null,
2481             highlightonsector: false,
2482             highlightbysize: false,
2483 
2484             fillOpacity: 0.6,
2485             withLines:  false,
2486 
2487             label: {
2488             }
2489             /**#@-*/
2490         },
2491 
2492         /* special html slider options */
2493         checkbox: {
2494             /**#@+
2495              * @visprop
2496              */
2497 
2498             /**
2499              * Control the attribute "disabled" of the HTML checkbox.
2500              *
2501              * @name disabled
2502              * @memberOf Checkbox.prototype
2503              *
2504              * @type Boolean
2505              * @default false
2506              */
2507             disabled: false,
2508 
2509             /**
2510              * Control the attribute "checked" of the HTML checkbox.
2511              *
2512              * @name checked
2513              * @memberOf Checkbox.prototype
2514              *
2515              * @type Boolean
2516              * @default false
2517              */
2518             checked: false,
2519 
2520             display: 'html'
2521 
2522             /**#@-*/
2523         },
2524 
2525         /*special circle options */
2526         circle: {
2527             /**#@+
2528              * @visprop
2529              */
2530 
2531             /**
2532              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
2533              *
2534              * @see JXG.GeometryElement#hasPoint
2535              * @name Circle#hasInnerPoints
2536              * @type Boolean
2537              * @default false
2538              */
2539             hasInnerPoints: false,
2540 
2541             fillColor: 'none',
2542             highlightFillColor: 'none',
2543             strokeColor: Color.palette.blue,
2544             highlightStrokeColor: '#c3d9ff',
2545 
2546             /**
2547              * Attributes for center point.
2548              *
2549              * @type Point
2550              * @name Circle#center
2551              */
2552             center: {
2553                 visible: false,
2554                 withLabel: false,
2555                 fixed: false,
2556 
2557                 fillColor: Color.palette.red,
2558                 strokeColor: Color.palette.red,
2559                 highlightFillColor: '#c3d9ff',
2560                 highlightStrokeColor: '#c3d9ff',
2561 
2562                 name: ''
2563             },
2564 
2565             /**
2566              * Attributes for center point.
2567              *
2568              * @type Point
2569              * @name Circle#center
2570              */
2571             point2: {
2572                 visible: false,
2573                 withLabel: false,
2574                 fixed: false,
2575                 name: ''
2576             },
2577 
2578             /**
2579              * Attributes for circle label.
2580              *
2581              * @type Label
2582              * @name Circle#label
2583              */
2584             label: {
2585                 position: 'urt'
2586             }
2587             /**#@-*/
2588         },
2589 
2590         /* special options for circumcircle of 3 points */
2591         circumcircle: {
2592             /**#@+
2593              * @visprop
2594              */
2595 
2596             fillColor: 'none',
2597             highlightFillColor: 'none',
2598             strokeColor: Color.palette.blue,
2599             highlightStrokeColor: '#c3d9ff',
2600 
2601             /**
2602              * Attributes for center point.
2603              *
2604              * @type Point
2605              * @name Circumcircle#center
2606              */
2607             center: {               // center point
2608                 visible: false,
2609                 fixed: false,
2610                 withLabel: false,
2611                 fillColor: Color.palette.red,
2612                 strokeColor: Color.palette.red,
2613                 highlightFillColor: '#c3d9ff',
2614                 highlightStrokeColor: '#c3d9ff',
2615                 name: ''
2616             }
2617             /**#@-*/
2618         },
2619 
2620         circumcirclearc: {
2621             /**#@+
2622              * @visprop
2623              */
2624 
2625             fillColor: 'none',
2626             highlightFillColor: 'none',
2627             strokeColor: Color.palette.blue,
2628             highlightStrokeColor: '#c3d9ff',
2629 
2630             /**
2631              * Attributes for center point.
2632              *
2633              * @type Point
2634              * @name CircumcircleArc#center
2635              */
2636             center: {
2637                 visible: false,
2638                 withLabel: false,
2639                 fixed: false,
2640                 name: ''
2641             }
2642             /**#@-*/
2643         },
2644 
2645         /* special options for circumcircle sector of 3 points */
2646         circumcirclesector: {
2647             /**#@+
2648              * @visprop
2649              */
2650 
2651             useDirection: true,
2652             fillColor: Color.palette.yellow,
2653             highlightFillColor: Color.palette.yellow,
2654             fillOpacity: 0.3,
2655             highlightFillOpacity: 0.3,
2656             strokeColor: Color.palette.blue,
2657             highlightStrokeColor: '#c3d9ff',
2658 
2659             /**
2660              * Attributes for center point.
2661              *
2662              * @type Point
2663              * @name Circle#point
2664              */
2665             point: {
2666                 visible: false,
2667                 fixed: false,
2668                 withLabel: false,
2669                 name: ''
2670             }
2671             /**#@-*/
2672         },
2673 
2674         /* special conic options */
2675         conic: {
2676             /**#@+
2677              * @visprop
2678              */
2679 
2680             fillColor: 'none',
2681             highlightFillColor: 'none',
2682             strokeColor: Color.palette.blue,
2683             highlightStrokeColor: '#c3d9ff',
2684 
2685             /**
2686              * Attributes for foci points.
2687              *
2688              * @type Point
2689              * @name Conic#foci
2690              */
2691             foci: {
2692                 // points
2693                 fixed: false,
2694                 visible: false,
2695                 withLabel: false,
2696                 name: ''
2697             },
2698 
2699             /**
2700              * Attributes for center point.
2701              *
2702              * @type Point
2703              * @name Conic#center
2704              */
2705             center: {
2706                 visible: false,
2707                 withLabel: false,
2708                 name: ''
2709             },
2710 
2711             /**
2712              * Attributes for five points defining the conic, if some of them are given as coordinates.
2713              *
2714              * @type Point
2715              * @name Conic#point
2716              */
2717             point: {
2718                 withLabel: false,
2719                 name: ''
2720             },
2721 
2722             /**
2723              * Attributes for parabola line in case the line is given by two
2724              * points or coordinate pairs.
2725              *
2726              * @type Line
2727              * @name Conic#line
2728              */
2729             line: {
2730                 visible: false
2731             }
2732 
2733             /**#@-*/
2734         },
2735 
2736         /* special curve options */
2737         curve: {
2738             strokeWidth: 1,
2739             strokeColor: Color.palette.blue,
2740             fillColor: 'none',
2741             fixed: true,
2742 
2743             useQDT: false,
2744 
2745             /**#@+
2746              * @visprop
2747              */
2748 
2749             /**
2750              * The data points of the curve are not connected with straight lines but with bezier curves.
2751              * @name Curve#handDrawing
2752              * @type Boolean
2753              * @default false
2754              */
2755             handDrawing: false,
2756 
2757             /**
2758              * The curveType is set in {@link JXG.Curve#generateTerm} and used in {@link JXG.Curve#updateCurve}.
2759              * Possible values are <ul>
2760              * <li>'none'</li>
2761              * <li>'plot': Data plot</li>
2762              * <li>'parameter': we can not distinguish function graphs and parameter curves</li>
2763              * <li>'functiongraph': function graph</li>
2764              * <li>'polar'</li>
2765              * <li>'implicit' (not yet)</li></ul>
2766              * Only parameter and plot are set directly. Polar is set with {@link JXG.GeometryElement#setAttribute} only.
2767              * @name Curve#curveType
2768              * @type String
2769              * @default null
2770              */
2771             curveType: null,
2772 
2773             /**
2774              * Apply Ramer-Douglas-Peuker smoothing.
2775              *
2776              * @type Boolean
2777              * @name Curve#RDPsmoothing
2778              * @default false
2779              */
2780             RDPsmoothing: false,     // Apply the Ramer-Douglas-Peuker algorithm
2781 
2782             /**
2783              * Number of points used for plotting triggered by up events
2784              * (i.e. high quality plotting) in case
2785              * {@link Curve#doAdvancedPlot} is false.
2786              *
2787              * @name Curve#numberPointsHigh
2788              * @see Curve#doAdvancedPlot
2789              * @type Number
2790              * @default 1600
2791              */
2792             numberPointsHigh: 1600,  // Number of points on curves after mouseUp
2793 
2794             /**
2795              * Number of points used for plotting triggered by move events
2796              * (i.e. lower quality plotting but fast) in case
2797              * {@link Curve#doAdvancedPlot} is false.
2798              *
2799              * @name Curve#numberPointsLow
2800              * @see Curve#doAdvancedPlot
2801              * @type Number
2802              * @default 400
2803              */
2804             numberPointsLow: 400,    // Number of points on curves after mousemove
2805 
2806             /**
2807              * If true use a recursive bisection algorithm.
2808              * It is slower, but usually the result is better. It tries to detect jumps
2809              * and singularities.
2810              *
2811              * @name Curve#doAdvancedPlot
2812              * @type Boolean
2813              * @default true
2814              */
2815             doAdvancedPlot: true,
2816 
2817             /**
2818              *
2819              * Recursion depth used for plotting triggered by up events
2820              * (i.e. high quality plotting) in case
2821              * {@link Curve#doAdvancedPlot} is true.
2822              *
2823              * @name Curve#recursionDepthHigh
2824              * @see Curve#doAdvancedPlot
2825              * @type Number
2826              * @default 17
2827              */
2828              recursionDepthHigh: 17,
2829 
2830             /**
2831              * Number of points used for plotting triggered by move events in case
2832              * (i.e. lower quality plotting but fast)
2833              * {@link Curve#doAdvancedPlot} is true.
2834              *
2835              * @name Curve#recursionDepthLow
2836              * @see Curve#doAdvancedPlot
2837              * @type Number
2838              * @default 13
2839              */
2840              recursionDepthLow: 15,
2841 
2842             /**
2843              * If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98.
2844              *
2845              * @name Curve#doAdvancedPlotOld
2846              * @see Curve#doAdvancedPlot
2847              * @type Boolean
2848              * @default false
2849              * @deprecated
2850              */
2851             doAdvancedPlotOld: false,   // v1
2852 
2853             /**
2854              * Select the version of the plot algorithm.
2855              * <ul>
2856              * <li> Version 1 is very outdated
2857              * <li> Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0
2858              * <li> Version 3 is an internal version that was never published in  a stable version.
2859              * <li> Version 4 is available since JSXGraph v1.2.0
2860              * </ul>
2861              * Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode)
2862              *
2863              * @example
2864              *   var c = board.create('functiongraph', ["log(x)"]);
2865              *
2866              * @name Curve#plotVersion
2867              * @type Number
2868              * @default 2
2869              */
2870             plotVersion: 2,
2871 
2872             /**
2873              * Attributes for circle label.
2874              *
2875              * @type Label
2876              * @name Circle#label
2877              */
2878             label: {
2879                 position: 'lft'
2880             },
2881 
2882             /**
2883              * Configure arrow head at the start position for curve.
2884              * Recommended arrow head type is 7.
2885              *
2886              * @name Curve#firstArrow
2887              * @type Boolean / Object
2888              * @default false
2889              * @see Line#firstArrow for options
2890              */
2891             firstArrow: false,
2892 
2893             /**
2894              * Configure arrow head at the end position for curve.
2895              * Recommended arrow head type is 7.
2896              *
2897              * @name Curve#lastArrow
2898              * @see Line#lastArrow for options
2899              * @type Boolean / Object
2900              * @default false
2901              */
2902             lastArrow: false
2903 
2904             /**#@-*/
2905         },
2906 
2907         /* special foreignObject options */
2908         foreignobject: {
2909 
2910             /**#@+
2911              * @visprop
2912              */
2913             attractors: [],
2914             fixed: true,
2915             visible: true
2916 
2917             /**#@-*/
2918         },
2919 
2920         glider: {
2921             /**#@+
2922              * @visprop
2923              */
2924 
2925             label: {}
2926             /**#@-*/
2927         },
2928 
2929         /* special grid options */
2930         grid: {
2931             /**#@+
2932              * @visprop
2933              */
2934 
2935             /* grid styles */
2936             needsRegularUpdate: false,
2937             hasGrid: false,
2938             gridX: 1,
2939             gridY: 1,
2940             //strokeColor: '#c0c0c0',
2941             strokeColor: '#c0c0c0',
2942             strokeOpacity: 0.5,
2943             strokeWidth: 1,
2944             dash: 0,    // dashed grids slow down the iPad considerably
2945             /* snap to grid options */
2946 
2947             /**
2948              * @deprecated
2949              */
2950             snapToGrid: false,
2951             /**
2952              * @deprecated
2953              */
2954             snapSizeX: 10,
2955             /**
2956              * @deprecated
2957              */
2958             snapSizeY: 10
2959 
2960             /**#@-*/
2961         },
2962 
2963         group: {
2964             needsRegularUpdate: true
2965         },
2966 
2967         /* special html slider options */
2968         htmlslider: {
2969             /**#@+
2970              * @visprop
2971              */
2972 
2973             /**
2974              *
2975              * These affect the DOM element input type="range".
2976              * The other attributes affect the DOM element div containing the range element.
2977              */
2978             widthRange: 100,
2979             widthOut: 34,
2980             step: 0.01,
2981 
2982             frozen: true,
2983             isLabel: false,
2984             strokeColor: '#000000',
2985             display: 'html',
2986             anchorX: 'left',
2987             anchorY: 'middle',
2988             withLabel: false
2989 
2990             /**#@-*/
2991         },
2992 
2993         /* special image options */
2994         image: {
2995             /**#@+
2996              * @visprop
2997              */
2998 
2999             imageString: null,
3000             fillOpacity: 1.0,
3001             highlightFillOpacity: 0.6,
3002 
3003 
3004             /**
3005              * Defines the CSS class used by the image. CSS attributes defined in
3006              * this class will overwrite the corresponding JSXGraph attributes, e.g.
3007              * opacity.
3008              * The default CSS class is defined in jsxgraph.css.
3009              *
3010              * @name Image#cssClass
3011              *
3012              * @see Image#highlightCssClass
3013              * @type String
3014              * @default 'JXGimage'
3015              */
3016             cssClass: 'JXGimage',
3017 
3018             /**
3019              * Defines the CSS class used by the image when highlighted.
3020              * CSS attributes defined in this class will overwrite the
3021              * corresponding JSXGraph attributes, e.g. highlightFillOpacity.
3022              * The default CSS class is defined in jsxgraph.css.
3023              *
3024              * @name Image#highlightCssClass
3025              *
3026              * @see Image#cssClass
3027              * @type String
3028              * @default 'JXGimageHighlight'
3029              */
3030             highlightCssClass: 'JXGimageHighlight',
3031 
3032             /**
3033              * Image rotation in degrees.
3034              *
3035              * @name Image#rotate
3036              * @type Number
3037              * @default 0
3038              */
3039             rotate: 0,
3040 
3041             /**
3042              * Defines together with {@link Image#snapSizeY} the grid the image snaps on to.
3043              * The image will only snap on user coordinates which are
3044              * integer multiples to snapSizeX in x and snapSizeY in y direction.
3045              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3046              * of the default ticks of the default x axes of the board.
3047              *
3048              * @name Image#snapSizeX
3049              *
3050              * @see Point#snapToGrid
3051              * @see Image#snapSizeY
3052              * @see JXG.Board#defaultAxes
3053              * @type Number
3054              * @default 1
3055              */
3056             snapSizeX: 1,
3057 
3058             /**
3059              * Defines together with {@link Image#snapSizeX} the grid the image snaps on to.
3060              * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
3061              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3062              * of the default ticks of the default y axes of the board.
3063              *
3064              * @name Image#snapSizeY
3065              *
3066              * @see Point#snapToGrid
3067              * @see Image#snapSizeX
3068              * @see JXG.Board#defaultAxes
3069              * @type Number
3070              * @default 1
3071              */
3072             snapSizeY: 1,
3073 
3074             /**
3075              * List of attractor elements. If the distance of the image is less than
3076              * attractorDistance the image is made to glider of this element.
3077              *
3078              * @name Image#attractors
3079              *
3080              * @type Array
3081              * @default empty
3082              */
3083             attractors: []
3084 
3085             /**#@-*/
3086         },
3087 
3088         /* special options for incircle of 3 points */
3089         incircle: {
3090             /**#@+
3091              * @visprop
3092              */
3093 
3094             fillColor: 'none',
3095             highlightFillColor: 'none',
3096             strokeColor: Color.palette.blue,
3097             highlightStrokeColor: '#c3d9ff',
3098 
3099             /**
3100              * Attributes of circle center.
3101              *
3102              * @type Point
3103              * @name Incircle#center
3104              */
3105             center: {               // center point
3106                 visible: false,
3107                 fixed: false,
3108                 withLabel: false,
3109                 fillColor: Color.palette.red,
3110                 strokeColor: Color.palette.red,
3111                 highlightFillColor: '#c3d9ff',
3112                 highlightStrokeColor: '#c3d9ff',
3113                 name: ''
3114             }
3115             /**#@-*/
3116         },
3117 
3118         inequality: {
3119             /**#@+
3120              * @visprop
3121              */
3122 
3123             fillColor: Color.palette.red,
3124             fillOpacity: 0.2,
3125             strokeColor: 'none',
3126 
3127             /**
3128              * By default an inequality is less (or equal) than. Set inverse to <tt>true</tt> will consider the inequality
3129              * greater (or equal) than.
3130              *
3131              * @type Boolean
3132              * @default false
3133              * @name Inequality#inverse
3134              * @visprop
3135              */
3136             inverse: false
3137             /**#@-*/
3138         },
3139 
3140         infobox: {
3141             /**#@+
3142              * @visprop
3143              */
3144 
3145             fontSize: 12,
3146             isLabel: false,
3147             strokeColor: '#bbbbbb',
3148             display: 'html',             // 'html' or 'internal'
3149             anchorX: 'left',             //  'left', 'middle', or 'right': horizontal alignment
3150                                          //  of the text.
3151             anchorY: 'middle',           //  'top', 'middle', or 'bottom': vertical alignment
3152                                          //  of the text.
3153             cssClass: 'JXGinfobox',
3154             rotate: 0,                   // works for non-zero values only in combination
3155                                          // with display=='internal'
3156             visible: true,
3157             parse: false,
3158             transitionDuration: 0,
3159             needsRegularUpdate: false
3160 
3161             /**#@-*/
3162         },
3163 
3164         /* special options for integral */
3165         integral: {
3166             /**#@+
3167              * @visprop
3168              */
3169 
3170             axis: 'x',        // 'x' or 'y'
3171             withLabel: true,    // Show integral value as text
3172             fixed: true,
3173             strokeWidth: 0,
3174             strokeOpacity: 0,
3175             fillColor: Color.palette.red,
3176             fillOpacity: 0.3,
3177             highlightFillColor: Color.palette.red,
3178             highlightFillOpacity: 0.2,
3179 
3180             /**
3181              * Attributes of the (left) starting point of the integral.
3182              *
3183              * @type Point
3184              * @name Integral#curveLeft
3185              * @see Integral#baseLeft
3186              */
3187             curveLeft: {    // Start point
3188                 visible: true,
3189                 withLabel: false,
3190                 color: Color.palette.red,
3191                 fillOpacity: 0.8,
3192                 layer: 9
3193             },
3194 
3195             /**
3196              * Attributes of the (left) base point of the integral.
3197              *
3198              * @type Point
3199              * @name Integral#baseLeft
3200              * @see Integral#curveLeft
3201              */
3202             baseLeft: {    // Start point
3203                 visible: false,
3204                 fixed: false,
3205                 withLabel: false,
3206                 name: ''
3207             },
3208 
3209             /**
3210              * Attributes of the (right) end point of the integral.
3211              *
3212              * @type Point
3213              * @name Integral#curveRight
3214              * @see Integral#baseRight
3215              */
3216             curveRight: {      // End point
3217                 visible: true,
3218                 withLabel: false,
3219                 color: Color.palette.red,
3220                 fillOpacity: 0.8,
3221                 layer: 9
3222             },
3223 
3224             /**
3225              * Attributes of the (right) base point of the integral.
3226              *
3227              * @type Point
3228              * @name Integral#baseRight
3229              * @see Integral#curveRight
3230              */
3231             baseRight: {      // End point
3232                 visible: false,
3233                 fixed: false,
3234                 withLabel: false,
3235                 name: ''
3236             },
3237 
3238             /**
3239              * Attributes for integral label.
3240              *
3241              * @type Label
3242              * @name Integral#label
3243              */
3244             label: {
3245                 fontSize: 20
3246             }
3247             /**#@-*/
3248         },
3249 
3250         /* special input options */
3251         input: {
3252             /**#@+
3253              * @visprop
3254              */
3255 
3256             /**
3257              * Control the attribute "disabled" of the HTML input field.
3258              *
3259              * @name disabled
3260              * @memberOf Input.prototype
3261              *
3262              * @type Boolean
3263              * @default false
3264              */
3265             disabled: false,
3266 
3267             /**
3268              * Control the attribute "maxlength" of the HTML input field.
3269              *
3270              * @name maxlength
3271              * @memberOf Input.prototype
3272              *
3273              * @type Number
3274              * @default 524288 (as in HTML)
3275              */
3276             maxlength: 524288,
3277 
3278             display: 'html'
3279 
3280             /**#@-*/
3281         },
3282 
3283         /* special intersection point options */
3284         intersection: {
3285             /**#@+
3286              * @visprop
3287              */
3288 
3289             /**
3290              * Used in {@link JXG.Intersection}.
3291              * This flag sets the behaviour of intersection points of e.g.
3292              * two segments. If true, the intersection is treated as intersection of lines. If false
3293              * the intersection point exists if the segments intersect setwise.
3294              *
3295              * @name Intersection.alwaysIntersect
3296              * @type Boolean
3297              * @default true
3298              */
3299             alwaysIntersect: true
3300 
3301             /**#@-*/
3302         },
3303 
3304         /* special label options */
3305         label: {
3306             /**#@+
3307              * @visprop
3308              */
3309 
3310             visible: 'inherit',
3311             strokeColor: '#000000',
3312             strokeOpacity: 1,
3313             highlightStrokeOpacity: 0.666666,
3314             highlightStrokeColor: '#000000',
3315 
3316             fixed: true,
3317 
3318             /**
3319              * Possible string values for the position of a label for
3320              * label anchor points are:
3321              * <ul>
3322              * <li> 'lft'
3323              * <li> 'rt'
3324              * <li> 'top'
3325              * <li> 'bot'
3326              * <li> 'ulft'
3327              * <li> 'urt'
3328              * <li> 'llft'
3329              * <li> 'lrt'
3330              * </ul>
3331              * This is relevant for non-points: line, circle, curve.
3332              *
3333              * The names have been borrowed from <a href="https://www.tug.org/metapost.html">MetaPost</a>.
3334              *
3335              * @name Label#position
3336              * @see Label#offset
3337              * @type String
3338              * @default 'urt'
3339              */
3340             position: 'urt',
3341 
3342             /**
3343              *  Label offset from label anchor.
3344              *  The label anchor is determined by {@link Label#position}
3345              *
3346              * @name Label#offset
3347              * @see Label#position
3348              * @type Array
3349              * @default [10,10]
3350              */
3351             offset: [10, 10],
3352 
3353             /**
3354              * Automatic position of label text. When called first, the positioning algorithm
3355              * starts at the position defined by offset.
3356              * The algorithm tries to find a position with the least number of
3357              * overlappings with other elements, while retaining the distance
3358              * to the anchor element.
3359              *
3360              * @name Label#autoPosition
3361              * @see Label#offset
3362              * @type Boolean
3363              * @default false
3364              *
3365              * @example
3366              * 	var p1 = board.create('point', [-2, 1], {id: 'A'});
3367              * 	var p2 = board.create('point', [-0.85, 1], {
3368              *      name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}
3369              *  });
3370              * 	var p3 = board.create('point', [-1, 1.2], {
3371              *      name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}
3372              *  });
3373              *  var c = board.create('circle', [p1, p2]);
3374              * 	var l = board.create('line', [p1, p2]);
3375              *
3376              * </pre><div id="JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2" class="jxgbox" style="width: 300px; height: 300px;"></div>
3377              * <script type="text/javascript">
3378              *     (function() {
3379              *         var board = JXG.JSXGraph.initBoard('JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2',
3380              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
3381              *     	var p1 = board.create('point', [-2, 1], {id: 'A'});
3382              *     	var p2 = board.create('point', [-0.85, 1], {name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}});
3383              *     	var p3 = board.create('point', [-1, 1.2], {name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}});
3384              *      var c = board.create('circle', [p1, p2]);
3385              *     	var l = board.create('line', [p1, p2]);
3386              *
3387              *     })();
3388              *
3389              * </script><pre>
3390              *
3391              *
3392              */
3393             autoPosition: false
3394 
3395             /**#@-*/
3396         },
3397 
3398         /* special legend options */
3399         legend: {
3400             /**
3401              * @visprop
3402              */
3403 
3404              /**
3405               * Default style of a legend element. The only possible value is 'vertical'.
3406               * @name: Legend#style
3407               * @type String
3408               * @default 'vertical'
3409               */
3410             style: 'vertical',
3411 
3412             /**
3413              * Label names of a legend element.
3414              * @name: Legend#labels
3415              * @type Array
3416              * @default "['1', '2', '3', '4', '5', '6', '7', '8']"
3417              */
3418             labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
3419 
3420             /**
3421              * (Circular) array of label colors.
3422              * @name: Legend#colors
3423              * @type Array
3424              * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']"
3425              */
3426             colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'],
3427 
3428             /**
3429              * Height (in px) of one legend entry
3430              * @name: Legend#rowHeight
3431              * @type Number
3432              * @default 20
3433              *
3434              */
3435             rowHeight: 20,
3436 
3437             strokeWidth: 5
3438 
3439             /**#@-*/
3440         },
3441 
3442         /* special line options */
3443         line: {
3444             /**#@+
3445              * @visprop
3446              */
3447 
3448             /**
3449              * Configure the arrow head at the position of its first point or the corresponding
3450              * intersection with the canvas border
3451              *
3452              * In case firstArrow is an object it has the sub-attributes:
3453              * <pre>
3454              * {
3455              *      type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
3456              *      size: 6, // size of the arrow head. Default value is 6.
3457              *               // This value is multiplied with the strokeWidth of the line
3458              *               // Exception: for type=7 size is ignored
3459              *      highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value
3460              * }
3461              * </pre>
3462              * type=7 is the default for curves if firstArrow: true
3463              *
3464              * @name Line#firstArrow
3465              * @see Line#lastArrow
3466              * @see Line#touchFirstPoint
3467              * @type Boolean / Object
3468              * @default false
3469              */
3470             firstArrow: false,
3471 
3472             /**
3473              * Configute the arrow head at the position of its second point or the corresponding
3474              * intersection with the canvas border.
3475              *
3476              * In case lastArrow is an object it has the sub-attributes:
3477              * <pre>
3478              * {
3479              *      type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
3480              *      size: 6, // size of the arrow head. Default value is 6.
3481              *               // This value is multiplied with the strokeWidth of the line.
3482              *               // Exception: for type=7 size is ignored
3483              *      highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6.
3484              * }
3485              * </pre>
3486              * type=7 is the default for curves if lastArrow: true
3487              *
3488              * @example
3489              *     var p1 = board.create('point', [-5, 2], {size:1});
3490              *     var p2 = board.create('point', [5, 2], {size:10});
3491              *     var li = board.create('segment', ['A','B'],
3492              *         {name:'seg',
3493              *          strokeColor:'#000000',
3494              *          strokeWidth:1,
3495              *          highlightStrokeWidth: 5,
3496              *          lastArrow: {type: 2, size: 8, highlightSize: 6},
3497              *          touchLastPoint: true,
3498              *          firstArrow: {type: 3, size: 8}
3499              *         });
3500              *
3501              * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div>
3502              * <script type="text/javascript">
3503              *     (function() {
3504              *         var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3',
3505              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
3506              *         var p1 = board.create('point', [-5, 2], {size:1});
3507              *         var p2 = board.create('point', [5, 2], {size:10});
3508              *         var li = board.create('segment', ['A','B'],
3509              *             {name:'seg',
3510              *              strokeColor:'#000000',
3511              *              strokeWidth:1,
3512              *              highlightStrokeWidth: 5,
3513              *              lastArrow: {type: 2, size: 8, highlightSize: 6},
3514              *              touchLastPoint: true,
3515              *              firstArrow: {type: 3, size: 8}
3516              *             });
3517              *
3518              *     })();
3519              *
3520              * </script>
3521              *
3522              * @name Line#lastArrow
3523              * @see Line#firstArrow
3524              * @see Line#touchLastPoint
3525              * @type Boolean / Object
3526              * @default false
3527              */
3528             lastArrow: false,
3529 
3530             /**
3531              * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line
3532              * ends exactly at the border, if negative there is a margin to the inside, if positive the line
3533              * ends outside of the canvas (which is invisible).
3534              *
3535              * @name: Line#margin
3536              * @type Number
3537              * @default 0
3538              */
3539             margin: 0,
3540 
3541             /**
3542              * If true, line stretches infinitely in direction of its first point.
3543              * Otherwise it ends at point1.
3544              *
3545              * @name Line#straightFirst
3546              * @see Line#straightLast
3547              * @type Boolean
3548              * @default true
3549              */
3550             straightFirst: true,
3551 
3552             /**
3553              * If true, line stretches infinitely in direction of its second point.
3554              * Otherwise it ends at point2.
3555              *
3556              * @name Line#straightLast
3557              * @see Line#straightFirst
3558              * @type Boolean
3559              * @default true
3560              */
3561             straightLast: true,
3562 
3563             fillColor: 'none',               // Important for VML on IE
3564             highlightFillColor: 'none',  // Important for VML on IE
3565             strokeColor: Color.palette.blue,
3566             highlightStrokeColor: '#c3d9ff',
3567             withTicks: false,
3568 
3569             /**
3570              * Attributes for first defining point of the line.
3571              *
3572              * @type Point
3573              * @name Line#point1
3574              */
3575             point1: {                  // Default values for point1 if created by line
3576                 visible: false,
3577                 withLabel: false,
3578                 fixed: false,
3579                 name: ''
3580             },
3581 
3582             /**
3583              * Attributes for second defining point of the line.
3584              *
3585              * @type Point
3586              * @name Line#point2
3587              */
3588             point2: {                  // Default values for point2 if created by line
3589                 visible: false,
3590                 withLabel: false,
3591                 fixed: false,
3592                 name: ''
3593             },
3594 
3595             /**
3596              * Attributes for ticks of the line.
3597              *
3598              * @type Ticks
3599              * @name Line#ticks
3600              */
3601             ticks: {
3602                 drawLabels: true,
3603                 label: {
3604                     offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts
3605                 },
3606                 drawZero: false,
3607                 insertTicks: false,
3608                 minTicksDistance: 50,
3609                 minorHeight: 4,          // if <0: full width and height
3610                 majorHeight: -1,         // if <0: full width and height
3611                 minorTicks: 4,
3612                 defaultDistance: 1,
3613                 strokeOpacity: 0.3,
3614                 visible: 'inherit'
3615             },
3616 
3617             /**
3618              * Attributes for the line label.
3619              *
3620              * @type Label
3621              * @name Line#label
3622              */
3623             label: {
3624                 position: 'llft'
3625             },
3626 
3627             /**
3628              * If set to true, the point will snap to a grid defined by
3629              * {@link Point#snapSizeX} and {@link Point#snapSizeY}.
3630              *
3631              * @see Point#snapSizeX
3632              * @see Point#snapSizeY
3633              * @type Boolean
3634              * @name Line#snapToGrid
3635              * @default false
3636              */
3637             snapToGrid: false,
3638 
3639             /**
3640              * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
3641              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
3642              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3643              * of the default ticks of the default x axes of the board.
3644              *
3645              * @see Point#snapToGrid
3646              * @see Point#snapSizeY
3647              * @see JXG.Board#defaultAxes
3648              * @type Number
3649              * @name Line#snapSizeX
3650              * @default 1
3651              */
3652             snapSizeX: 1,
3653 
3654             /**
3655              * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
3656              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
3657              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
3658              * of the default ticks of the default y axes of the board.
3659              *
3660              * @see Point#snapToGrid
3661              * @see Point#snapSizeX
3662              * @see JXG.Board#defaultAxes
3663              * @type Number
3664              * @name Line#snapSizeY
3665              * @default 1
3666              */
3667             snapSizeY: 1,
3668 
3669             /**
3670              * If set to true and {@link Line#firstArrow} is set to true, the arrow head will just touch
3671              * the circle line of the start point of the line.
3672              *
3673              * @see Line#firstArrow
3674              * @type Boolean
3675              * @name Line#touchFirstPoint
3676              * @default false
3677              */
3678             touchFirstPoint: false,
3679 
3680             /**
3681              * If set to true and {@link Line#lastArrow} is set to true, the arrow head will just touch
3682              * the circle line of the start point of the line.
3683              * @see Line#firstArrow
3684              * @type Boolean
3685              * @name Line#touchLastPoint
3686              * @default false
3687              */
3688             touchLastPoint: false,
3689 
3690             /**
3691              * Line endings (linecap) of a straight line.
3692              * Possible values are:
3693              * <ul>
3694              * <li> 'butt',
3695              * <li> 'round',
3696              * <li> 'square'.
3697              * </ul>
3698              * Not available for VML renderer.
3699              * [lineCap description]
3700              * @name Line#lineCap
3701              * @type String
3702              * @default 'butt'
3703              */
3704             lineCap: 'butt'
3705 
3706             /**#@-*/
3707         },
3708 
3709         /* special options for locus curves */
3710         locus: {
3711             /**#@+
3712              * @visprop
3713              */
3714 
3715             translateToOrigin: false,
3716             translateTo10: false,
3717             stretch: false,
3718             toOrigin: null,
3719             to10: null
3720             /**#@-*/
3721         },
3722 
3723         /* special cardinal spline options */
3724         metapostspline: {
3725             /**#@+
3726              * @visprop
3727              */
3728 
3729              /**
3730               * Controls if the data points of the cardinal spline when given as
3731               * arrays should be converted into {@link JXG.Points}.
3732               *
3733               * @name createPoints
3734               * @memberOf Metapostspline.prototype
3735               *
3736               * @see Metapostspline#points
3737               *
3738               * @type Boolean
3739               * @default true
3740               */
3741             createPoints: true,
3742 
3743             /**
3744              * If set to true, the supplied coordinates are interpreted as
3745              * [[x_0, y_0], [x_1, y_1], p, ...].
3746              * Otherwise, if the data consists of two arrays of equal length,
3747              * it is interpreted as
3748              * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]]
3749              *
3750              * @name isArrayOfCoordinates
3751              * @memberOf Metapostspline.prototype
3752              * @type Boolean
3753              * @default false
3754              */
3755             isArrayOfCoordinates: false,
3756 
3757             /**
3758              * Attributes for the points generated by Metapostspline in cases
3759              * {@link createPoints} is set to true
3760              *
3761              * @name points
3762              * @memberOf Metapostspline.prototype
3763              *
3764              * @see Metapostspline#createPoints
3765              * @type Object
3766              */
3767             points: {
3768                 strokeOpacity: 0.05,
3769                 fillOpacity: 0.05,
3770                 highlightStrokeOpacity: 1.0,
3771                 highlightFillOpacity: 1.0,
3772                 withLabel: false,
3773                 name: '',
3774                 fixed: false
3775             }
3776 
3777             /**#@-*/
3778         },
3779 
3780         /* special mirrorelement options */
3781         mirrorelement: {
3782             /**#@+
3783              * @visprop
3784              */
3785 
3786             fixed: true,
3787 
3788             /**
3789              * Attributes of mirror point, i.e. the point along which the element is mirrored.
3790              *
3791              * @type Point
3792              * @name mirrorelement#point
3793              */
3794             point: {},
3795 
3796             /**
3797              * Attributes of circle center, i.e. the center of the circle,
3798              * if a circle is the mirror element and the transformation type is 'Euclidean'
3799              *
3800              * @type Point
3801              * @name mirrorelement#center
3802              */
3803             center: {},
3804 
3805             /**
3806              * Type of transformation. Possible values are 'Euclidean', 'projective'.
3807              *
3808              * If the value is 'Euclidean', the mirror element of a circle is again a circle,
3809              * otherwise it is a conic section.
3810              *
3811              * @type String
3812              * @name mirrorelement#type
3813              * @default 'Euclidean'
3814              */
3815             type: 'Euclidean'
3816 
3817             /**#@-*/
3818         },
3819 
3820         // /* special options for Msector of 3 points */
3821         // msector: {
3822         //     strokeColor: '#000000', // Msector line
3823         //     point: {               // Msector point
3824         //         visible: false,
3825         //         fixed: false,
3826         //         withLabel: false,
3827         //         name: ''
3828         //     }
3829         // },
3830 
3831         /* special options for normal lines */
3832         normal: {
3833             /**#@+
3834              * @visprop
3835              */
3836 
3837             strokeColor: '#000000', //  normal line
3838 
3839             /**
3840              * Attributes of helper point of normal.
3841              *
3842              * @type Point
3843              * @name Normal#point
3844              */
3845             point: {
3846                 visible: false,
3847                 fixed: false,
3848                 withLabel: false,
3849                 name: ''
3850             }
3851             /**#@-*/
3852         },
3853 
3854         /* special options for orthogonal projection points */
3855         orthogonalprojection: {
3856             /**#@+
3857              * @visprop
3858              */
3859 
3860 
3861             /**#@-*/
3862         },
3863 
3864         /* special options for parallel lines */
3865         parallel: {
3866             /**#@+
3867              * @visprop
3868              */
3869 
3870             strokeColor: '#000000', // Parallel line
3871 
3872             /**
3873              * Attributes of helper point of normal.
3874              *
3875              * @type Point
3876              * @name Parallel#point
3877              */
3878             point: {
3879                 visible: false,
3880                 fixed: false,
3881                 withLabel: false,
3882                 name: ''
3883             },
3884 
3885             label: {
3886                 position: 'llft'
3887             }
3888             /**#@-*/
3889         },
3890 
3891         /* special perpendicular options */
3892         perpendicular: {
3893             /**#@+
3894              * @visprop
3895              */
3896 
3897             strokeColor: '#000000', // Perpendicular line
3898             straightFirst: true,
3899             straightLast: true
3900             /**#@-*/
3901         },
3902 
3903         /* special perpendicular options */
3904         perpendicularsegment: {
3905             /**#@+
3906              * @visprop
3907              */
3908 
3909             strokeColor: '#000000', // Perpendicular segment
3910             straightFirst: false,
3911             straightLast: false,
3912             point: {               // Perpendicular point
3913                 visible: false,
3914                 fixed: true,
3915                 withLabel: false,
3916                 name: ''
3917             }
3918             /**#@-*/
3919         },
3920 
3921         /* special point options */
3922         point: {
3923             /**#@+
3924              * @visprop
3925              */
3926 
3927             withLabel: true,
3928             label: {},
3929 
3930             /**
3931              * This attribute was used to determined the point layout. It was derived from GEONExT and was
3932              * replaced by {@link Point#face} and {@link Point#size}.
3933              *
3934              * @name Point#style
3935              *
3936              * @see Point#face
3937              * @see Point#size
3938              * @type Number
3939              * @default 5
3940              * @deprecated
3941              */
3942             style: 5,
3943 
3944             /**
3945              * There are different point styles which differ in appearance.
3946              * Posssible values are
3947              * <table><tr><th>Value</th></tr>
3948              * <tr><td>cross</td></tr>
3949              * <tr><td>circle</td></tr>
3950              * <tr><td>square</td></tr>
3951              * <tr><td>plus</td></tr>
3952              * <tr><td>diamond</td></tr>
3953              * <tr><td>triangleUp</td></tr>
3954              * <tr><td>triangleDown</td></tr>
3955              * <tr><td>triangleLeft</td></tr>
3956              * <tr><td>triangleRight</td></tr>
3957              * </table>
3958              *
3959              * @name Point#face
3960              *
3961              * @type String
3962              * @see JXG.Point#setStyle
3963              * @default circle
3964              */
3965             face: 'o',
3966 
3967             /**
3968              * Size of a point, either in pixel or user coordinates.
3969              * Means radius resp. half the width of a point (depending on the face).
3970              *
3971              * @name Point#size
3972              *
3973              * @see Point#face
3974              * @see JXG.Point#setStyle
3975              * @see Point#sizeUnit
3976              * @type Number
3977              * @default 3
3978              */
3979             size: 3,
3980 
3981             /**
3982              * Unit for size.
3983              * Possible values are 'screen' and 'user.
3984              *
3985              * @name Point#sizeUnit
3986              *
3987              * @see Point#size
3988              * @type String
3989              * @default 'screen'
3990              */
3991             sizeUnit: 'screen',
3992 
3993             strokeWidth: 2,
3994 
3995             fillColor: Color.palette.red,
3996             strokeColor: Color.palette.red,
3997             highlightFillColor:'#c3d9ff',
3998             highlightStrokeColor: '#c3d9ff',
3999             // strokeOpacity: 1.0,
4000             // fillOpacity: 1.0,
4001             // highlightFillOpacity: 0.5,
4002             // highlightStrokeOpacity: 0.5,
4003 
4004             // fillColor: '#ff0000',
4005             // highlightFillColor: '#eeeeee',
4006             // strokeWidth: 2,
4007             // strokeColor: '#ff0000',
4008             // highlightStrokeColor: '#c3d9ff',
4009 
4010             /**
4011              * If true, the point size changes on zoom events.
4012              *
4013              * @type Boolean
4014              * @name Point#zoom
4015              * @default false
4016              *
4017              */
4018             zoom: false,             // Change the point size on zoom
4019 
4020             /**
4021              * If true, the infobox is shown on mouse/pen over, if false not.
4022              * If the value is 'inherit', the value of
4023              * {@link JXG.Board#showInfobox} is taken.
4024              *
4025              * @name Point#showInfobox
4026              * @see JXG.Board#showInfobox
4027              * @type {Boolean|String} true | false | 'inherit'
4028              * @default true
4029              */
4030             showInfobox: 'inherit',
4031 
4032             /**
4033              * Truncating rule for the digits in the infobox.
4034              * <ul>
4035              * <li>'auto': done automatically by JXG.autoDigits()
4036              * <li>'none': no truncation
4037              * <li>number: truncate after "number digits" with JXG.toFixed()
4038              * </ul>
4039              *
4040              * @name Point#infoboxDigits
4041              *
4042              * @type String, Number
4043              * @default 'auto'
4044              * @see JXG#autoDigits
4045              * @see JXG#toFixed
4046              */
4047             infoboxDigits: 'auto',
4048 
4049             draft: false,
4050 
4051             /**
4052              * List of attractor elements. If the distance of the point is less than
4053              * attractorDistance the point is made to glider of this element.
4054              *
4055              * @name Point#attractors
4056              *
4057              * @type Array
4058              * @default empty
4059              */
4060             attractors: [],
4061 
4062             /**
4063              * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints.
4064              * Possible values are 'screen' and 'user'.
4065              *
4066              * @name Point#attractorUnit
4067              *
4068              * @see Point#attractorDistance
4069              * @see Point#snatchDistance
4070              * @see Point#snapToPoints
4071              * @see Point#attractors
4072              * @type String
4073              * @default 'user'
4074              */
4075             attractorUnit: 'user',    // 'screen', 'user'
4076 
4077             /**
4078              * If the distance of the point to one of its attractors is less
4079              * than this number the point will be a glider on this
4080              * attracting element.
4081              * If set to zero nothing happens.
4082              *
4083              * @name Point#attractorDistance
4084              *
4085              * @type Number
4086              * @default 0.0
4087              */
4088             attractorDistance: 0.0,
4089 
4090             /**
4091              * If the distance of the point to one of its attractors is at least
4092              * this number the point will be released from being a glider on the
4093              * attracting element.
4094              * If set to zero nothing happens.
4095              *
4096              * @name Point#snatchDistance
4097              *
4098              * @type Number
4099              * @default 0.0
4100              */
4101             snatchDistance: 0.0,
4102 
4103             /**
4104              * If set to true, the point will snap to a grid of integer multiples of
4105              * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates).
4106              * <p>
4107              * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
4108              * (given in user coordinates, not pixels) or are the intersection points
4109              * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
4110              *
4111              * @name Point#snapToGrid
4112              *
4113              * @see Point#snapSizeX
4114              * @see Point#snapSizeY
4115              * @type Boolean
4116              * @default false
4117              */
4118             snapToGrid: false,
4119 
4120             /**
4121              * If set to true, the point will only snap to (possibly invisibly) grid points
4122              * when within {@link Point#attractorDistance} of such a grid point.
4123              * <p>
4124              * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY
4125              * (given in user coordinates, not pixels) or are the intersection points
4126              * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative.
4127              *
4128              * @name Point#attractToGrid
4129              *
4130              * @see Point#attractorDistance
4131              * @see Point#attractorUnit
4132              * @see Point#snapToGrid
4133              * @see Point#snapSizeX
4134              * @see Point#snapSizeY
4135              * @type Boolean
4136              * @default false
4137              *
4138              * @example
4139              * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
4140              *
4141              * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div>
4142              * <script type="text/javascript">
4143              *     (function() {
4144              *         var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6',
4145              *             {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false});
4146              *     board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' });
4147              *
4148              *     })();
4149              *
4150              * </script><pre>
4151              *
4152              */
4153             attractToGrid: false,
4154 
4155             /**
4156              * Defines together with {@link Point#snapSizeY} the grid the point snaps on to.
4157              * It is given in user coordinates, not in pixels.
4158              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
4159              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
4160              * of the default ticks of the default x axes of the board.
4161              *
4162              * @name Point#snapSizeX
4163              *
4164              * @see Point#snapToGrid
4165              * @see Point#snapSizeY
4166              * @see JXG.Board#defaultAxes
4167              * @type Number
4168              * @default 1
4169              */
4170             snapSizeX: 1,
4171 
4172             /**
4173              * Defines together with {@link Point#snapSizeX} the grid the point snaps on to.
4174              * It is given in user coordinates, not in pixels.
4175              * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
4176              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
4177              * of the default ticks of the default y axes of the board.
4178              *
4179              * @name Point#snapSizeY
4180              *
4181              * @see Point#snapToGrid
4182              * @see Point#snapSizeX
4183              * @see JXG.Board#defaultAxes
4184              * @type Number
4185              * @default 1
4186              */
4187             snapSizeY: 1,
4188 
4189             /**
4190              * If set to true, the point will snap to the nearest point in distance of
4191              * {@link Point#attractorDistance}.
4192              *
4193              * @name Point#snapToPoints
4194              *
4195              * @see Point#attractorDistance
4196              * @type Boolean
4197              * @default false
4198              */
4199             snapToPoints: false,
4200 
4201             /**
4202              * List of elements which are ignored by snapToPoints.
4203              * @name Point#ignoredSnapToPoints
4204              *
4205              * @type Array
4206              * @default empty
4207              */
4208             ignoredSnapToPoints: []
4209 
4210             /**#@-*/
4211         },
4212 
4213         /* special polygon options */
4214         polygon: {
4215             /**#@+
4216              * @visprop
4217              */
4218 
4219             /**
4220              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
4221              *
4222              * @see JXG.GeometryElement#hasPoint
4223              * @name Polygon#hasInnerPoints
4224              * @type Boolean
4225              * @default false
4226              */
4227             hasInnerPoints: false,
4228 
4229             fillColor: Color.palette.yellow,
4230             highlightFillColor: Color.palette.yellow,
4231             // fillColor: '#00ff00',
4232             // highlightFillColor: '#00ff00',
4233             fillOpacity: 0.3,
4234             highlightFillOpacity: 0.2,
4235 
4236             /**
4237              * Is the polygon bordered by lines?
4238              *
4239              * @type Boolean
4240              * @name Polygon#withLines
4241              * @default true
4242              */
4243             withLines: true,
4244 
4245             /**
4246              * Attributes for the polygon border lines.
4247              *
4248              * @type Line
4249              * @name Polygon#borders
4250              */
4251             borders: {
4252                 withLabel: false,
4253                 strokeWidth: 1,
4254                 highlightStrokeWidth: 1,
4255                 // Polygon layer + 1
4256                 layer: 5,
4257                 label: {
4258                     position: 'top'
4259                 },
4260                 visible: 'inherit'
4261             },
4262 
4263             /**
4264              * Attributes for the polygon vertices.
4265              *
4266              * @type Point
4267              * @name Polygon#vertices
4268              */
4269             vertices: {
4270                 layer: 9,
4271                 withLabel: false,
4272                 name: '',
4273                 strokeColor: Color.palette.red,
4274                 fillColor: Color.palette.red,
4275                 fixed: false,
4276                 visible: 'inherit'
4277             },
4278 
4279             /**
4280              * Attributes for the polygon label.
4281              *
4282              * @type Label
4283              * @name Polygon#label
4284              */
4285             label: {
4286                 offset: [0, 0]
4287             }
4288 
4289             /**#@-*/
4290         },
4291 
4292         /* special polygonal chain options
4293         */
4294         polygonalchain: {
4295             /**#@+
4296              * @visprop
4297              */
4298 
4299             fillColor: 'none',
4300             highlightFillColor: 'none'
4301 
4302             /**#@-*/
4303         },
4304 
4305         /* special prescribed angle options
4306         * Not yet implemented. But angle.setAngle(val) is implemented.
4307         */
4308         prescribedangle: {
4309             /**#@+
4310              * @visprop
4311              */
4312 
4313             /**
4314              * Attributes for the helper point of the prescribed angle.
4315              *
4316              * @type Point
4317              * @name PrescribedAngle#anglePoint
4318              */
4319             anglePoint: {
4320                 size: 2,
4321                 visible: false,
4322                 withLabel: false
4323             }
4324 
4325             /**#@-*/
4326         },
4327 
4328         /* special reflection options */
4329         reflection: {
4330             /**#@+
4331              * @visprop
4332              */
4333 
4334             fixed: true,
4335 
4336             /**
4337              * Attributes of circle center, i.e. the center of the circle,
4338              * if a circle is the mirror element and the transformation type is 'Euclidean'
4339              *
4340              * @type Point
4341              * @name mirrorelement#center
4342              */
4343             center: {},
4344 
4345             /**
4346              * Type of transformation. Possible values are 'Euclidean', 'projective'.
4347              *
4348              * If the value is 'Euclidean', the reflected element of a circle is again a circle,
4349              * otherwise it is a conic section.
4350              *
4351              * @type String
4352              * @name reflection#type
4353              * @default 'Euclidean'
4354              */
4355             type: 'Euclidean'
4356 
4357             /**#@-*/
4358         },
4359 
4360         /* special regular polygon options */
4361         regularpolygon: {
4362             /**#@+
4363              * @visprop
4364              */
4365 
4366             /**
4367              * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.
4368              * @see JXG.GeometryElement#hasPoint
4369              *
4370              * @name RegularPolygon#hasInnerPoints
4371              * @type Boolean
4372              * @default false
4373              */
4374             hasInnerPoints: false,
4375             fillColor: Color.palette.yellow,
4376             highlightFillColor: Color.palette.yellow,
4377             fillOpacity: 0.3,
4378             highlightFillOpacity: 0.2,
4379 
4380             /**
4381              * Is the polygon bordered by lines?
4382              *
4383              * @type Boolean
4384              * @name RegularPolygon#withLines
4385              * @default true
4386              */
4387             withLines: true,
4388 
4389             /**
4390              * Attributes for the polygon border lines.
4391              *
4392              * @type Line
4393              * @name RegularPolygon#borders
4394              */
4395             borders: {
4396                 withLabel: false,
4397                 strokeWidth: 1,
4398                 highlightStrokeWidth: 1,
4399                 // Polygon layer + 1
4400                 layer: 5,
4401                 label: {
4402                     position: 'top'
4403                 }
4404             },
4405 
4406             /**
4407              * Attributes for the polygon vertices.
4408              *
4409              * @type Point
4410              * @name RegularPolygon#vertices
4411              */
4412             vertices: {
4413                 layer: 9,
4414                 withLabel: true,
4415                 strokeColor: Color.palette.red,
4416                 fillColor: Color.palette.red,
4417                 fixed: false
4418             },
4419 
4420             /**
4421              * Attributes for the polygon label.
4422              *
4423              * @type Label
4424              * @name Polygon#label
4425              */
4426             label: {
4427                 offset: [0, 0]
4428             }
4429 
4430             /**#@-*/
4431         },
4432 
4433         /* special options for riemann sums */
4434         riemannsum: {
4435             /**#@+
4436              * @visprop
4437              */
4438 
4439             withLabel: false,
4440             fillOpacity: 0.3,
4441             fillColor: Color.palette.yellow
4442 
4443             /**#@-*/
4444         },
4445 
4446         /* special sector options */
4447         sector: {
4448             /**#@+
4449              * @visprop
4450              */
4451 
4452             fillColor: Color.palette.yellow,
4453             highlightFillColor: Color.palette.yellow,
4454             // fillColor: '#00ff00',
4455             // highlightFillColor: '#00ff00',
4456 
4457             fillOpacity: 0.3,
4458             highlightFillOpacity: 0.3,
4459             highlightOnSector: false,
4460             highlightStrokeWidth: 0,
4461 
4462             /**
4463              * Type of sector. Possible values are 'minor', 'major', and 'auto'.
4464              *
4465              * @type String
4466              * @name Sector#selection
4467              * @default 'auto'
4468              */
4469             selection: 'auto',
4470 
4471             /**
4472              * Attributes for sub-element arc. It is only available, if the sector is defined by three points.
4473              *
4474              * @type Arc
4475              * @name Sector#arc
4476              * @default '{visible:false}'
4477              */
4478             arc: {
4479                 visible: false,
4480                 fillColor: 'none'
4481             },
4482 
4483             /**
4484              * Attributes for helper point radiuspoint in case it is provided by coordinates.
4485              *
4486              * @type Point
4487              * @name Sector#radiusPoint
4488              */
4489             radiusPoint: {
4490                 visible: false,
4491                 withLabel: false
4492             },
4493 
4494             /**
4495              * Attributes for helper point center in case it is provided by coordinates.
4496              *
4497              * @type Point
4498              * @name Sector#center
4499              */
4500             center: {
4501                 visible: false,
4502                 withLabel: false
4503             },
4504 
4505             /**
4506              * Attributes for helper point anglepoint in case it is provided by coordinates.
4507              *
4508              * @type Point
4509              * @name Sector#anglePoint
4510              */
4511             anglePoint: {
4512                 visible: false,
4513                 withLabel: false
4514             },
4515 
4516             /**
4517              * Attributes for the sector label.
4518              *
4519              * @type Label
4520              * @name Sector#label
4521              */
4522             label: {
4523                 offset: [0, 0],
4524                 anchorX: 'auto',
4525                 anchorY: 'auto'
4526             }
4527 
4528             /**#@-*/
4529         },
4530 
4531         /* special segment options */
4532         segment: {
4533             /**#@+
4534              * @visprop
4535              */
4536 
4537             label: {
4538                 position: 'top'
4539             }
4540             /**#@-*/
4541         },
4542 
4543         semicircle: {
4544             /**#@+
4545              * @visprop
4546              */
4547 
4548             /**
4549              * Attributes for center point of the semicircle.
4550              *
4551              * @type Point
4552              * @name Semicircle#center
4553              */
4554             center: {
4555                 visible: false,
4556                 withLabel: false,
4557                 fixed: false,
4558                 fillColor: Color.palette.red,
4559                 strokeColor: Color.palette.red,
4560                 highlightFillColor:'#eeeeee',
4561                 highlightStrokeColor: Color.palette.red,
4562                 name: ''
4563             }
4564 
4565             /**#@-*/
4566         },
4567 
4568         /* special slider options */
4569         slider: {
4570             /**#@+
4571              * @visprop
4572              */
4573 
4574             /**
4575              * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For
4576              * continuous results set this to <tt>-1</tt>.
4577              *
4578              * @memberOf Slider.prototype
4579              * @name snapWidth
4580              * @type Number
4581              */
4582             snapWidth: -1,      // -1 = deactivated
4583 
4584             /**
4585              * The precision of the slider value displayed in the optional text.
4586              * Replaced by the attribute "digits".
4587              *
4588              * @memberOf Slider.prototype
4589              * @name precision
4590              * @type Number
4591              * @deprecated
4592              * @see Slider#digits
4593              * @default 2
4594              */
4595             precision: 2,
4596 
4597             /**
4598              * The number of digits of the slider value displayed in the optional text.
4599              *
4600              * @memberOf Slider.prototype
4601              * @name digits
4602              * @type Number
4603              * @default 2
4604              */
4605             digits: 2,
4606 
4607             firstArrow: false,
4608             lastArrow: false,
4609 
4610             /**
4611              * Show slider ticks.
4612              *
4613              * @type Boolean
4614              * @name Slider#withTicks
4615              * @default true
4616              */
4617             withTicks: true,
4618 
4619             /**
4620              * Show slider label.
4621              *
4622              * @type Boolean
4623              * @name Slider#withLabel
4624              * @default true
4625              */
4626             withLabel: true,
4627 
4628             /**
4629              * If not null, this replaces the part "name = " in the slider label.
4630              * Possible types: string, number or function.
4631              * @type String
4632              * @name suffixLabel
4633              * @memberOf Slider.prototype
4634              * @default null
4635              * @see JXG.Slider#unitLabel
4636              * @see JXG.Slider#postLabel
4637              */
4638             suffixLabel: null,
4639 
4640             /**
4641              * If not null, this is appended to the value in the slider label.
4642              * Possible types: string, number or function.
4643              * @type String
4644              * @name unitLabel
4645              * @memberOf Slider.prototype
4646              * @default null
4647              * @see JXG.Slider#suffixLabel
4648              * @see JXG.Slider#postLabel
4649              */
4650             unitLabel: null,
4651 
4652             /**
4653              * If not null, this is appended to the value and to unitLabel in the slider label.
4654              * Possible types: string, number or function.
4655              * @type String
4656              * @name postLabel
4657              * @memberOf Slider.prototype
4658              * @default null
4659              * @see JXG.Slider#suffixLabel
4660              * @see JXG.Slider#unitLabel
4661              */
4662             postLabel: null,
4663 
4664             layer: 9,
4665             showInfobox: false,
4666             name: '',
4667             visible: true,
4668             strokeColor: '#000000',
4669             highlightStrokeColor: '#888888',
4670             fillColor: '#ffffff',
4671             highlightFillColor: 'none',
4672 
4673             /**
4674              * Size of slider point.
4675              *
4676              * @type Number
4677              * @name Slider#size
4678              * @default 6
4679              * @see Point#size
4680              */
4681             size: 6,
4682 
4683             /**
4684              * Attributes for first (left) helper point defining the slider position.
4685              *
4686              * @type Point
4687              * @name Slider#point1
4688              */
4689             point1: {
4690                 needsRegularUpdate: false,
4691                 showInfobox: false,
4692                 withLabel: false,
4693                 visible: false,
4694                 fixed: true,
4695                 name: ''
4696             },
4697 
4698             /**
4699              * Attributes for second (right) helper point defining the slider position.
4700              *
4701              * @type Point
4702              * @name Slider#point2
4703              */
4704             point2: {
4705                 needsRegularUpdate: false,
4706                 showInfobox: false,
4707                 withLabel: false,
4708                 visible: false,
4709                 fixed: true,
4710                 name: ''
4711             },
4712 
4713             /**
4714              * Attributes for the base line of the slider.
4715              *
4716              * @type Line
4717              * @name Slider#baseline
4718              */
4719             baseline: {
4720                 needsRegularUpdate: false,
4721                 visible: 'inherit',
4722                 fixed: true,
4723                 scalable: false,
4724                 tabindex: null,
4725                 name: '',
4726                 strokeWidth: 1,
4727                 strokeColor: '#000000',
4728                 highlightStrokeColor: '#888888'
4729             },
4730 
4731             /**
4732              * Attributes for the ticks of the base line of the slider.
4733              *
4734              * @type Ticks
4735              * @name Slider#ticks
4736              */
4737             ticks: {
4738                 needsRegularUpdate: false,
4739                 fixed: true,
4740 
4741                 // Label drawing
4742                 drawLabels: false,
4743                 digits: 2,
4744                 includeBoundaries: 1,
4745                 drawZero: true,
4746                 label: {
4747                     offset: [-4, -14],
4748                     display: 'internal'
4749                 },
4750 
4751                 minTicksDistance: 30,
4752                 insertTicks: true,
4753                 minorHeight: 4,         // if <0: full width and height
4754                 majorHeight: 5,        // if <0: full width and height
4755                 minorTicks: 0,
4756                 defaultDistance: 1,
4757                 strokeOpacity: 1,
4758                 strokeWidth: 1,
4759                 tickEndings: [0, 1],
4760                 strokeColor: '#000000',
4761                 visible: 'inherit'
4762             },
4763 
4764             /**
4765              * Attributes for the highlighting line of the slider.
4766              *
4767              * @type Line
4768              * @name Slider#highline
4769              */
4770             highline: {
4771                 strokeWidth: 3,
4772                 visible: 'inherit',
4773                 fixed: true,
4774                 tabindex: null,
4775                 name: '',
4776                 strokeColor: '#000000',
4777                 highlightStrokeColor: '#888888'
4778             },
4779 
4780             /**
4781              * Attributes for the slider label.
4782              *
4783              * @type Label
4784              * @name Slider#label
4785              */
4786             label: {
4787                 visible: 'inherit',
4788                 strokeColor: '#000000'
4789             },
4790 
4791             /**
4792              * If true, 'up' events on the baseline will trigger slider moves.
4793              *
4794              * @type: Boolean
4795              * @name Slider#moveOnUp
4796              * @default: true
4797              */
4798             moveOnUp: true
4799 
4800             /**#@-*/
4801         },
4802 
4803         /* special options for comb */
4804         comb: {
4805             /**#@+
4806              * @visprop
4807              */
4808 
4809             /**
4810              * Frequency of comb elements.
4811              *
4812              * @type Number
4813              * @name Comb#frequency
4814              * @default 0.2
4815              */
4816             frequency: 0.2,
4817 
4818             /**
4819              * Width of the comb.
4820              *
4821              * @type Number
4822              * @name Comb#width
4823              * @default 0.4
4824              */
4825             width: 0.4,
4826 
4827             /**
4828              * Angle under which comb elements are positioned.
4829              *
4830              * @type Number
4831              * @name Comb#angle
4832              * @default 60 degrees
4833              */
4834             angle: Math.PI / 3,
4835 
4836             /**
4837              * Should the comb go right to left instead of left to right.
4838              *
4839              * @type Boolean
4840              * @name Comb#reverse
4841              * @default false
4842              */
4843             reverse: false,
4844 
4845             /**
4846              * Attributes for first defining point of the comb.
4847              *
4848              * @type Point
4849              * @name Comb#point1
4850              */
4851             point1: {
4852                 visible: false,
4853                 withLabel: false,
4854                 fixed: false,
4855                 name: ''
4856             },
4857 
4858             /**
4859              * Attributes for second defining point of the comb.
4860              *
4861              * @type Point
4862              * @name Comb#point2
4863              */
4864             point2: {
4865                 visible: false,
4866                 withLabel: false,
4867                 fixed: false,
4868                 name: ''
4869             },
4870 
4871             /**
4872              * Attributes for the curve displaying the comb.
4873              *
4874              * @type Curve
4875              * @name Comb#curve
4876              */
4877             curve: {
4878                 strokeWidth: 1,
4879                 strokeColor: '#000000',
4880                 fillColor: 'none'
4881             }
4882         },
4883 
4884         /* special options for slope triangle */
4885         slopetriangle: {
4886             /**#@+
4887              * @visprop
4888              */
4889 
4890             fillColor: Color.palette.red,
4891             fillOpacity: 0.4,
4892             highlightFillColor: Color.palette.red,
4893             highlightFillOpacity: 0.3,
4894 
4895             borders: {
4896                 lastArrow: {
4897                     type: 1,
4898                     size: 6
4899                 }
4900             },
4901 
4902             /**
4903              * Attributes for the gliding helper point.
4904              *
4905              * @type Point
4906              * @name Slopetriangle#glider
4907              */
4908             glider: {
4909                 fixed: true,
4910                 visible: false,
4911                 withLabel: false
4912             },
4913 
4914             /**
4915              * Attributes for the base line.
4916              *
4917              * @type Line
4918              * @name Slopetriangle#baseline
4919              */
4920             baseline: {
4921                 visible: false,
4922                 withLabel: false,
4923                 name: ''
4924             },
4925 
4926             /**
4927              * Attributes for the base point.
4928              *
4929              * @type Point
4930              * @name Slopetriangle#basepoint
4931              */
4932             basepoint: {
4933                 visible: false,
4934                 withLabel: false,
4935                 name: ''
4936             },
4937 
4938             /**
4939              * Attributes for the tangent.
4940              * The tangent is constructed by slop triangle if the construction
4941              * is based on a glider, solely.
4942              *
4943              * @type Line
4944              * @name Slopetriangle#tangent
4945              */
4946             tangent: {
4947                 visible: false,
4948                 withLabel: false,
4949                 name: ''
4950             },
4951 
4952             /**
4953              * Attributes for the top point.
4954              *
4955              * @type Point
4956              * @name Slopetriangle#toppoint
4957              */
4958             toppoint: {
4959                 visible: false,
4960                 withLabel: false,
4961                 name: ''
4962             },
4963 
4964             /**
4965              * Attributes for the slope triangle label.
4966              *
4967              * @type Label
4968              * @name Slopetriangle#label
4969              */
4970             label: {
4971                 visible: true
4972             }
4973             /**#@-*/
4974         },
4975 
4976         /* special options for step functions */
4977         stepfunction: {
4978             /**#@+
4979              * @visprop
4980              */
4981 
4982             /**#@-*/
4983         },
4984 
4985         /* special tape measure options */
4986         tapemeasure: {
4987             /**#@+
4988              * @visprop
4989              */
4990 
4991             strokeColor: '#000000',
4992             strokeWidth: 2,
4993             highlightStrokeColor: '#000000',
4994 
4995             /**
4996              * Show tape measure ticks.
4997              *
4998              * @type Boolean
4999              * @name Tapemeasure#withTicks
5000              * @default true
5001              */
5002             withTicks: true,
5003 
5004             /**
5005              * Show tape measure label.
5006              *
5007              * @type Boolean
5008              * @name Tapemeasure#withLabel
5009              * @default true
5010              */
5011             withLabel: true,
5012 
5013             /**
5014              * The precision of the tape measure value displayed in the optional text.
5015              * Replaced by the attribute digits
5016              *
5017              * @memberOf Tapemeasure.prototype
5018              * @name precision
5019              * @type Number
5020              * @deprecated
5021              * @see Tapemeasure#digits
5022              * @default 2
5023              */
5024             precision: 2,
5025 
5026             /**
5027              * The precision of the tape measure value displayed in the optional text.
5028              * @memberOf Tapemeasure.prototype
5029              * @name precision
5030              * @type Number
5031              * @default 2
5032              */
5033             digits: 2,
5034 
5035             /**
5036              * Attributes for first helper point defining the tape measure position.
5037              *
5038              * @type Point
5039              * @name Tapemeasure#point1
5040              */
5041             point1: {
5042                 visible: 'inherit',
5043                 strokeColor: '#000000',
5044                 fillColor: '#ffffff',
5045                 fillOpacity: 0.0,
5046                 highlightFillOpacity: 0.1,
5047                 size: 6,
5048                 snapToPoints: true,
5049                 attractorUnit: 'screen',
5050                 attractorDistance: 20,
5051                 showInfobox: false,
5052                 withLabel: false,
5053                 name: ''
5054             },
5055 
5056             /**
5057              * Attributes for second helper point defining the tape measure position.
5058              *
5059              * @type Point
5060              * @name Tapemeasure#point2
5061              */
5062             point2: {
5063                 visible: 'inherit',
5064                 strokeColor: '#000000',
5065                 fillColor: '#ffffff',
5066                 fillOpacity: 0.0,
5067                 highlightFillOpacity: 0.1,
5068                 size: 6,
5069                 snapToPoints: true,
5070                 attractorUnit: 'screen',
5071                 attractorDistance: 20,
5072                 showInfobox: false,
5073                 withLabel: false,
5074                 name: ''
5075             },
5076 
5077             /**
5078              * Attributes for the ticks of the tape measure.
5079              *
5080              * @type Ticks
5081              * @name Tapemeasure#ticks
5082              */
5083             ticks: {
5084                 drawLabels: false,
5085                 drawZero: true,
5086                 insertTicks: true,
5087                 minorHeight: 8,
5088                 majorHeight: 16,
5089                 minorTicks: 4,
5090                 tickEndings: [0, 1],
5091                 defaultDistance: 0.1,
5092                 strokeOpacity: 1,
5093                 strokeWidth: 1,
5094                 strokeColor: '#000000',
5095                 visible: 'inherit'
5096             },
5097 
5098             /**
5099              * Attributes for the tape measure label.
5100              *
5101              * @type Label
5102              * @name Tapemeasure#label
5103              */
5104             label: {
5105                 position: 'top'
5106             }
5107             /**#@-*/
5108         },
5109 
5110         /* special text options */
5111         text: {
5112             /**#@+
5113              * @visprop
5114              */
5115 
5116             /**
5117              * The font size in pixels.
5118              *
5119              * @name fontSize
5120              * @memberOf Text.prototype
5121              * @default 12
5122              * @type Number
5123              * @see Text#fontUnit
5124              */
5125             fontSize: 12,
5126 
5127             /**
5128              * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but
5129              * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful.
5130              *
5131              * @name fontUnit
5132              * @memberOf Text.prototype
5133              * @default 'px'
5134              * @type String
5135              * @see Text#fontSize
5136              *
5137              * @example
5138              * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
5139              *
5140              * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div>
5141              * <script type="text/javascript">
5142              *     (function() {
5143              *         var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9',
5144              *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
5145              *     var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
5146              *
5147              *     })();
5148              *
5149              * </script><pre>
5150              *
5151              */
5152             fontUnit: 'px',
5153 
5154             /**
5155              * Used to round texts given by a number.
5156              *
5157              * @name digits
5158              * @memberOf Text.prototype
5159              * @default 2
5160              * @type Number
5161              */
5162             digits: 2,
5163 
5164             /**
5165              * If set to true, the text is parsed and evaluated.
5166              * For labels parse==true results in converting names of the form k_a to subscripts.
5167              * If the text is given by string and parse==true, the string is parsed as
5168              * JessieCode expression.
5169              *
5170              * @name parse
5171              * @memberOf Text.prototype
5172              * @default true
5173              * @type Boolean
5174              */
5175             parse: true,
5176 
5177             /**
5178              * If set to true and caja's sanitizeHTML function can be found it
5179              * will be used to sanitize text output.
5180              *
5181              * @name useCaja
5182              * @memberOf Text.prototype
5183              * @default false
5184              * @type Boolean
5185              */
5186             useCaja: false,
5187 
5188             /**
5189              * If enabled, the text will be handled as label. Intended for internal use.
5190              *
5191              * @name isLabel
5192              * @memberOf Text.prototype
5193              * @default false
5194              * @type Boolean
5195              */
5196             isLabel: false,
5197 
5198             strokeColor: '#000000',
5199             highlightStrokeColor: '#000000',
5200             highlightStrokeOpacity: 0.666666,
5201 
5202             /**
5203              * Default CSS properties of the HTML text element.
5204              * <p>
5205              * The CSS properties which are set here, are handed over to the style property
5206              * of the HTML text element. That means, they have higher property than any
5207              * CSS class.
5208              * <p>
5209              * If a property which is set here should be overruled by a CSS class
5210              * then this property should be removed here.
5211              * <p>
5212              * The reason, why this attribute should be kept to its default value at all,
5213              * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt>
5214              * will ignore the font-family if it is set in a CSS class.
5215              * It has to be set explicitly as style attribute.
5216              * <p>
5217              * In summary, the order of priorities from high to low is
5218              * <ol>
5219              *  <li> JXG.Options.text.cssStyle
5220              *  <li> JXG.Options.text.cssDefaultStyle
5221              *  <li> JXG.Options.text.cssClass
5222              * </ol>
5223              * @example
5224              * If all texts should get its font-family from the default CSS class
5225              * before initializing the board
5226              * <pre>
5227              *   JXG.Options.text.cssDefaultStyle = '';
5228              *   JXG.Options.text.highlightCssDefaultStyle = '';
5229              * </pre>
5230              * should be called.
5231              *
5232              * @name cssDefaultStyle
5233              * @memberOf Text.prototype
5234              * @default  'font-family: Arial, Helvetica, Geneva, sans-serif;'
5235              * @type String
5236              * @see Text#highlightCssDefaultStyle
5237              * @see Text#cssStyle
5238              * @see Text#highlightCssStyle
5239              */
5240             cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;',
5241 
5242             /**
5243              * Default CSS properties of the HTML text element in case of highlighting.
5244              * <p>
5245              * The CSS properties which are set here, are handed over to the style property
5246              * of the HTML text element. That means, they have higher property than any
5247              * CSS class.
5248              * @example
5249              * If all texts should get its font-family from the default CSS class
5250              * before initializing the board
5251              * <pre>
5252              *   JXG.Options.text.cssDefaultStyle = '';
5253              *   JXG.Options.text.highlightCssDefaultStyle = '';
5254              * </pre>
5255              * should be called.
5256              *
5257              * @name highlightCssDefaultStyle
5258              * @memberOf Text.prototype
5259              * @default  'font-family: Arial, Helvetica, Geneva, sans-serif;'
5260              * @type String
5261              * @see Text#cssDefaultStyle
5262              * @see Text#cssStyle
5263              * @see Text#highlightCssStyle
5264             */
5265             highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;',
5266 
5267             /**
5268              * CSS properties of the HTML text element.
5269              * <p>
5270              * The CSS properties which are set here, are handed over to the style property
5271              * of the HTML text element. That means, they have higher property than any
5272              * CSS class.
5273              *
5274              * @name cssStyle
5275              * @memberOf Text.prototype
5276              * @default  ''
5277              * @type String
5278              * @see Text#cssDefaultStyle
5279              * @see Text#highlightCssDefaultStyle
5280              * @see Text#highlightCssStyle
5281             */
5282             cssStyle: '',
5283 
5284             /**
5285              * CSS properties of the HTML text element in case of highlighting.
5286              * <p>
5287              * The CSS properties which are set here, are handed over to the style property
5288              * of the HTML text element. That means, they have higher property than any
5289              * CSS class.
5290              *
5291              * @name highlightCssStyle
5292              * @memberOf Text.prototype
5293              * @default  ''
5294              * @type String
5295              * @see Text#cssDefaultStyle
5296              * @see Text#highlightCssDefaultStyle
5297              * @see Text#cssStyle
5298             */
5299             highlightCssStyle: '',
5300 
5301             /**
5302              * If true, the input will be given to ASCIIMathML before rendering.
5303              *
5304              * @name useASCIIMathML
5305              * @memberOf Text.prototype
5306              * @default false
5307              * @type Boolean
5308              */
5309             useASCIIMathML: false,
5310 
5311             /**
5312              * If true, MathJax will be used to render the input string.
5313              * Supports MathJax 2 as well as Mathjax 3.
5314              * It is recommended to use this option together with the option
5315              * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed
5316              * instead of two (e.g. \\alpha).
5317              *
5318              * @name useMathJax
5319              * @memberOf Text.prototype
5320              * @default false
5321              * @type Boolean
5322              * @see Text#parse
5323              *
5324              * @example
5325              *  // Before loading MathJax, it has to be configured something like this:
5326              * window.MathJax = {
5327              *   tex: {
5328              *     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
5329              *     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
5330              *     packages: ['base', 'ams']
5331              *   },
5332              *   options: {
5333              *     ignoreHtmlClass: 'tex2jax_ignore',
5334              *     processHtmlClass: 'tex2jax_process'
5335              *   }
5336              * };
5337              *
5338              * // Display style
5339              * board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
5340              *     fontSize: 15, color:'green', useMathJax: true});
5341              *
5342              * // Inline style
5343              * board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
5344              *     fontSize: 15, color:'green', useMathJax: true});
5345              *
5346              * var A = board.create('point', [-2, 0]);
5347              * var B = board.create('point', [1, 0]);
5348              * var C = board.create('point', [0, 1]);
5349              *
5350              * var graph = board.create('ellipse', [A, B, C], {
5351              *         fixed: true,
5352              *         withLabel: true,
5353              *         strokeColor: 'black',
5354              *         strokeWidth: 2,
5355              *         fillColor: '#cccccc',
5356              *         fillOpacity: 0.3,
5357              *         highlightStrokeColor: 'red',
5358              *         highlightStrokeWidth: 3,
5359              *         name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
5360              *         label: {useMathJax: true}
5361              *     });
5362              *
5363              * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
5364              * {
5365              *   fontSize: 24, parse: false
5366              * });
5367              * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
5368              * {
5369              *   fontSize: 24, useMathJax: true
5370              * });
5371              *
5372              * </pre>
5373              * <script>
5374              * window.MathJax = {
5375              *   tex: {
5376              *     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
5377              *     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
5378              *     packages: ['base', 'ams']
5379              *   },
5380              *   options: {
5381              *     ignoreHtmlClass: 'tex2jax_ignore',
5382              *     processHtmlClass: 'tex2jax_process'
5383              *   }
5384              * };
5385              * </script>
5386              * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
5387              * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div>
5388              * <script type="text/javascript">
5389              *     (function() {
5390              *         var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9',
5391              *             {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
5392              *     // Display style
5393              *     board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
5394              *         fontSize: 15, color:'green', useMathJax: true});
5395              *
5396              *     // Inline style
5397              *     board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
5398              *         fontSize: 15, color:'green', useMathJax: true});
5399              *
5400              *     var A = board.create('point', [-2, 0]);
5401              *     var B = board.create('point', [1, 0]);
5402              *     var C = board.create('point', [0, 1]);
5403              *
5404              *     var graph = board.create('ellipse', [A, B, C], {
5405              *             fixed: true,
5406              *             withLabel: true,
5407              *             strokeColor: 'black',
5408              *             strokeWidth: 2,
5409              *             fillColor: '#cccccc',
5410              *             fillOpacity: 0.3,
5411              *             highlightStrokeColor: 'red',
5412              *             highlightStrokeWidth: 3,
5413              *             name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
5414              *             label: {useMathJax: true}
5415              *         });
5416              *
5417              *     var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
5418              *     {
5419              *       fontSize: 24, parse: false
5420              *     });
5421              *     var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
5422              *     {
5423              *       fontSize: 24, useMathJax: true
5424              *     });
5425              *     })();
5426              *
5427              * </script><pre>
5428              *
5429              *
5430              * @example
5431              * // Load MathJax:
5432              * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script>
5433              *
5434              * // function and its derivative
5435              * var f1 = function(x) { return x * x * x; },
5436              * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),
5437              *
5438              * A = board.create('glider', [0.5, f1(0.5), graph1], {
5439              *             name: 'f(x)',
5440              *             color: 'black',
5441              *             face:'x',
5442              *             fixed: true,
5443              *             size: 3,
5444              *             label: {offset: [-30, 10], fontSize: 15}
5445              *         }),
5446              * B = board.create('glider', [0.7, f1(0.7), graph1], {
5447              *             name: 'f(x+Δx)',
5448              *             size: 3,
5449              *             label: {offset: [-60, 10], fontSize: 15}
5450              *         }),
5451              *
5452              * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
5453              * a_h_segment = board.create('segment', [A, [
5454              *                     function(){ return B.X() > A.X() ? B.X() : A.X()},
5455              *                     function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5456              *                 ]],{ name: 'Δx', dash: 1, color: 'black'});
5457              *
5458              * b_v_segment = board.create('segment', [B, [
5459              *                     function(){ return B.X() > A.X() ? B.X() : A.X()},
5460              *                     function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5461              *                 ]],{ name: 'Δy', dash: 1, color: 'black'}),
5462              *
5463              * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
5464              *     ], {visible: false});
5465              *
5466              * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
5467              *     anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
5468              * });
5469              *
5470              * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
5471              * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
5472              *     anchor: mb, useMathJax: true, fixed: true, color: 'green'
5473              * });
5474              *
5475              * dval = board.create('text',[0.1, 0.8,
5476              *     function(){
5477              *         return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
5478              *             '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
5479              *     }],{fontSize: 15, useMathJax: true});
5480              *
5481              * </pre>
5482              * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
5483              * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div>
5484              * <script type="text/javascript">
5485              *     (function() {
5486              *         var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621',
5487              *             {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false});
5488              *     // function and its derivative
5489              *     var f1 = function(x) { return x * x * x; },
5490              *     graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),
5491              *
5492              *     A = board.create('glider', [0.5, f1(0.5), graph1], {
5493              *                 name: 'f(x)',
5494              *                 color: 'black',
5495              *                 face:'x',
5496              *                 fixed: true,
5497              *                 size: 3,
5498              *                 label: {offset: [-30, 10], fontSize: 15}
5499              *             }),
5500              *     B = board.create('glider', [0.7, f1(0.7), graph1], {
5501              *                 name: 'f(x+Δx)',
5502              *                 size: 3,
5503              *                 label: {offset: [-60, 10], fontSize: 15}
5504              *             }),
5505              *
5506              *     secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
5507              *     a_h_segment = board.create('segment', [A, [
5508              *                         function(){ return B.X() > A.X() ? B.X() : A.X()},
5509              *                         function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5510              *                     ]],{ name: 'Δx', dash: 1, color: 'black'});
5511              *
5512              *     b_v_segment = board.create('segment', [B, [
5513              *                         function(){ return B.X() > A.X() ? B.X() : A.X()},
5514              *                         function(){ return B.X() > A.X() ? A.Y() : B.Y()}
5515              *                     ]],{ name: 'Δy', dash: 1, color: 'black'}),
5516              *
5517              *     ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
5518              *         ], {visible: false});
5519              *
5520              *     board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
5521              *         anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
5522              *     });
5523              *
5524              *     mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
5525              *     board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
5526              *         anchor: mb, useMathJax: true, fixed: true, color: 'green'
5527              *     });
5528              *
5529              *     dval = board.create('text',[0.1, 0.8,
5530              *         function(){
5531              *             return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
5532              *                 '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
5533              *         }],{fontSize: 15, useMathJax: true});
5534              *
5535              *     })();
5536              *
5537              * </script><pre>
5538              *
5539              * @example
5540              * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
5541              * board.options.text.useMathjax = true;
5542              *
5543              * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5544              *     suffixlabel:'\\(t_1=\\)',
5545              *     unitLabel: ' \\(\\text{ ms}\\)',
5546              *     snapWidth:0.01}),
5547              *
5548              * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5549              * text1 = board.create('text', [5, 1, function(){
5550              *             return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
5551              *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
5552              *
5553              * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div>
5554              * <script type="text/javascript">
5555              *     (function() {
5556              *         var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6',
5557              *             {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false});
5558              *     board.options.text.useMathjax = true;
5559              *
5560              *     a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5561              *         suffixlabel:'\\(t_1=\\)',
5562              *         unitLabel: ' \\(\\text{ ms}\\)',
5563              *         snapWidth:0.01}),
5564              *
5565              *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5566              *     text1 = board.create('text', [5, 1, function(){
5567              *                 return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
5568              *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
5569              *
5570              *     })();
5571              *
5572              * </script><pre>
5573              *
5574              */
5575             useMathJax: false,
5576 
5577             /**
5578              *
5579              * If true, KaTeX will be used to render the input string.
5580              * For this feature, katex.min.js and katex.min.css have to be included.
5581              * <p>
5582              * The example below does not work, because there is a conflict with
5583              * the MathJax library which is used below.
5584              * </p>
5585              *
5586              * @name useKatex
5587              * @memberOf Text.prototype
5588              * @default false
5589              * @type Boolean
5590              *
5591              *
5592              * @example
5593              * JXG.Options.text.useKatex = true;
5594              *
5595              * const board = JXG.JSXGraph.initBoard('jxgbox', {
5596              *     boundingbox: [-2, 5, 8, -5], axis:true
5597              * });
5598              *
5599              * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5600              *     suffixlabel:'t_1=',
5601              *     unitLabel: ' \\text{ ms}',
5602              *     snapWidth:0.01});
5603              *
5604              * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5605              * text1 = board.create('text', [5, 1, function(){
5606              *             return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
5607              *         }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
5608              *
5609              * </pre>
5610              * <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">
5611              * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script>
5612              * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div>
5613              * <script type="text/javascript">
5614              *     (function() {
5615              *         var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869',
5616              *             {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false});
5617              *     board.options.useKatex = true;
5618              *     var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
5619              *         suffixlabel:'t_1=',
5620              *         unitLabel: ' \\text{ ms}',
5621              *         snapWidth:0.01});
5622              *
5623              *     func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
5624              *     text1 = board.create('text', [5, 1, function(){
5625              *                 return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
5626              *             }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
5627              *
5628              *     })();
5629              *
5630              * </script><pre>
5631              */
5632             useKatex: false,
5633 
5634             /**
5635              * Determines the rendering method of the text. Possible values
5636              * include <tt>'html'</tt> and <tt>'internal</tt>.
5637              *
5638              * @name display
5639              * @memberOf Text.prototype
5640              * @default 'html'
5641              * @type String
5642              */
5643             display: 'html',
5644 
5645             /**
5646              * Anchor element {@link Point}, {@link Text} or {@link Image} of the text.
5647              * If it exists, the coordinates of the text are relative
5648              * to this anchor element. In this case, only numbers are possible coordinates,
5649              * functions are not supported.
5650              *
5651              * @name anchor
5652              * @memberOf Text.prototype
5653              * @default null
5654              * @type Object
5655              */
5656             anchor: null,
5657 
5658             /**
5659              * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>, <tt>'middle'</tt>, and
5660              * <tt>'right'</tt>.
5661              *
5662              * @name anchorX
5663              * @memberOf Text.prototype
5664              * @default 'left'
5665              * @type String
5666              */
5667             anchorX: 'left',
5668 
5669             /**
5670              * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and
5671              * <tt>'bottom'</tt>.
5672              *
5673              * @name anchorY
5674              * @memberOf Text.prototype
5675              * @default 'auto'
5676              * @type String
5677              */
5678             anchorY: 'middle',
5679 
5680             /**
5681              * CSS class of the text in non-highlighted view.
5682              *
5683              * @name cssClass
5684              * @memberOf Text.prototype
5685              * @type String
5686              */
5687             cssClass: 'JXGtext',
5688 
5689             /**
5690              * CSS class of the text in highlighted view.
5691              *
5692              * @name highlightCssClass
5693              * @memberOf Text.prototype
5694              * @type String
5695              */
5696             highlightCssClass: 'JXGtext',
5697 
5698             /**
5699              * Sensitive area for dragging the text.
5700              * Possible values are 'all', or something else.
5701              * If set to 'small', a sensitivity margin at the right and left border is taken.
5702              * This may be extended to left, right, ... in the future.
5703              *
5704              * @name Text#dragArea
5705              * @type String
5706              * @default 'all'
5707              */
5708             dragArea: 'all',
5709 
5710             withLabel: false,
5711 
5712             /**
5713              * Text rotation in degrees.
5714              * Works for non-zero values only in combination with display=='internal'.
5715              *
5716              * @name Text#rotate
5717              * @type Number
5718              * @default 0
5719              */
5720             rotate: 0,
5721 
5722             visible: true,
5723 
5724             /**
5725              * Defines together with {@link Text#snapSizeY} the grid the text snaps on to.
5726              * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
5727              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
5728              * of the default ticks of the default x axes of the board.
5729              *
5730              * @name snapSizeX
5731              * @memberOf Text.prototype
5732              *
5733              * @see Point#snapToGrid
5734              * @see Text#snapSizeY
5735              * @see JXG.Board#defaultAxes
5736              * @type Number
5737              * @default 1
5738              */
5739             snapSizeX: 1,
5740 
5741             /**
5742              * Defines together with {@link Text#snapSizeX} the grid the text snaps on to.
5743              * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction.
5744              * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks
5745              * of the default ticks of the default y axes of the board.
5746              *
5747              * @name snapSizeY
5748              * @memberOf Text.prototype
5749              *
5750              * @see Point#snapToGrid
5751              * @see Text#snapSizeX
5752              * @see JXG.Board#defaultAxes
5753              * @type Number
5754              * @default 1
5755              */
5756             snapSizeY: 1,
5757 
5758             /**
5759              * List of attractor elements. If the distance of the text is less than
5760              * attractorDistance the text is made to glider of this element.
5761              *
5762              * @name attractors
5763              * @memberOf Text.prototype
5764              * @type Array
5765              * @default empty
5766              */
5767             attractors: []
5768 
5769             /**#@-*/
5770         },
5771 
5772         /* special options for trace curves */
5773         tracecurve: {
5774             /**#@+
5775              * @visprop
5776              */
5777             strokeColor: '#000000',
5778             fillColor: 'none',
5779 
5780             /**
5781              * The number of evaluated data points.
5782              * @memberOf Tracecurve.prototype
5783              * @default 100
5784              * @name numberPoints
5785              * @type Number
5786              */
5787             numberPoints: 100
5788 
5789             /**#@-*/
5790         },
5791 
5792         /*special turtle options */
5793         turtle: {
5794             /**#@+
5795              * @visprop
5796              */
5797 
5798             strokeWidth: 1,
5799             fillColor: 'none',
5800             strokeColor: '#000000',
5801 
5802             /**
5803              * Attributes for the turtle arrow.
5804              *
5805              * @type Curve
5806              * @name Turtle#arrow
5807              */
5808             arrow: {
5809                 strokeWidth: 2,
5810                 withLabel: false,
5811                 strokeColor: Color.palette.red,
5812                 lastArrow: true
5813             }
5814             /**#@-*/
5815         },
5816 
5817         /**
5818          * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties
5819          * to the same value.
5820          * It is used in {@link JXG.GeometryElement#setAttribute} and in
5821          * the constructor {@link JXG.GeometryElement}.
5822          * Attention: In Options.js abbreviations are not allowed.
5823          * @type Object
5824          * @name JXG.Options#shortcuts
5825          *
5826          */
5827         shortcuts: {
5828             color: ['strokeColor', 'fillColor'],
5829             opacity: ['strokeOpacity', 'fillOpacity'],
5830             highlightColor: ['highlightStrokeColor', 'highlightFillColor'],
5831             highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'],
5832             strokeWidth: ['strokeWidth', 'highlightStrokeWidth']
5833         }
5834     };
5835 
5836     /**
5837      * Holds all possible properties and the according validators for geometry elements.
5838      * A validator is either a function
5839      * which takes one parameter and returns true, if the value is valid for the property,
5840      * or it is false if no validator is required.
5841      */
5842     JXG.Validator = (function () {
5843         var i,
5844             validatePixel = function (v) {
5845                 return (/^[0-9]+px$/).test(v);
5846             },
5847             validateDisplay = function (v) {
5848                 return (v  === 'html' || v === 'internal');
5849             },
5850             validateColor = function (v) {
5851                 // for now this should do it...
5852                 return Type.isString(v);
5853             },
5854             validatePointFace = function (v) {
5855                 return Type.exists(JXG.normalizePointFace(v));
5856             },
5857             validateInteger = function (v) {
5858                 return (Math.abs(v - Math.round(v)) < Mat.eps);
5859             },
5860             validateNotNegativeInteger = function (v) {
5861                 return validateInteger(v) && v >= 0;
5862             },
5863             validatePositiveInteger = function (v) {
5864                 return validateInteger(v) && v > 0;
5865             },
5866             validateScreenCoords = function (v) {
5867                 return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]);
5868             },
5869             validateRenderer = function (v) {
5870                 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no');
5871             },
5872             validatePositive = function (v) {
5873                 return v > 0;
5874             },
5875             validateNotNegative = function (v) {
5876                 return v >= 0;
5877             },
5878             v = {},
5879             validators = {
5880                 attractorDistance: validateNotNegative,
5881                 color: validateColor,
5882                 defaultDistance: Type.isNumber,
5883                 display: validateDisplay,
5884                 doAdvancedPlot: false,
5885                 draft: false,
5886                 drawLabels: false,
5887                 drawZero: false,
5888                 face: validatePointFace,
5889                 factor: Type.isNumber,
5890                 fillColor: validateColor,
5891                 fillOpacity: Type.isNumber,
5892                 firstArrow: false,
5893                 fontSize: validateInteger,
5894                 dash: validateInteger,
5895                 gridX: Type.isNumber,
5896                 gridY: Type.isNumber,
5897                 hasGrid: false,
5898                 highlightFillColor: validateColor,
5899                 highlightFillOpacity: Type.isNumber,
5900                 highlightStrokeColor: validateColor,
5901                 highlightStrokeOpacity: Type.isNumber,
5902                 insertTicks: false,
5903                 //: validateScreenCoords,
5904                 lastArrow: false,
5905                 layer: validateNotNegativeInteger,
5906                 majorHeight: validateInteger,
5907                 minorHeight: validateInteger,
5908                 minorTicks: validateNotNegative,
5909                 minTicksDistance: validatePositiveInteger,
5910                 numberPointsHigh: validatePositiveInteger,
5911                 numberPointsLow: validatePositiveInteger,
5912                 opacity: Type.isNumber,
5913                 radius: Type.isNumber,
5914                 RDPsmoothing: false,
5915                 renderer: validateRenderer,
5916                 right: validatePixel,
5917                 showCopyright: false,
5918                 showInfobox: false,
5919                 showNavigation: false,
5920                 size: validateNotNegative, //validateInteger,
5921                 snapSizeX: validatePositive,
5922                 snapSizeY: validatePositive,
5923                 snapWidth: Type.isNumber,
5924                 snapToGrid: false,
5925                 snatchDistance: validateNotNegative,
5926                 straightFirst: false,
5927                 straightLast: false,
5928                 stretch: false,
5929                 strokeColor: validateColor,
5930                 strokeOpacity: Type.isNumber,
5931                 strokeWidth: validateNotNegative, //validateInteger,
5932                 takeFirst: false,
5933                 takeSizeFromFile: false,
5934                 to10: false,
5935                 toOrigin: false,
5936                 translateTo10: false,
5937                 translateToOrigin: false,
5938                 useASCIIMathML: false,
5939                 useDirection: false,
5940                 useMathJax: false,
5941                 withLabel: false,
5942                 withTicks: false,
5943                 zoom: false
5944             };
5945 
5946         // this seems like a redundant step but it makes sure that
5947         // all properties in the validator object have lower case names
5948         // and the validator object is easier to read.
5949         for (i in validators) {
5950             if (validators.hasOwnProperty(i)) {
5951                 v[i.toLowerCase()] = validators[i];
5952             }
5953         }
5954 
5955         return v;
5956     }());
5957 
5958     /**
5959      * All point faces can be defined with more than one name, e.g. a cross faced point can be given
5960      * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to
5961      * simplify if- and switch-clauses regarding point faces. The translation table is as follows:
5962      * <table>
5963      * <tr><th>Input</th><th>Output</th></tr>
5964      * <tr><td>cross, x</td><td>x</td></tr>
5965      * <tr><td>circle, o</td><td>o</td></tr>
5966      * <tr><td>square, []</td><td>[]</td></tr>
5967      * <tr><td>plus, +</td><td>+</td></tr>
5968      * <tr><td>diamond, <></td><td><></td></tr>
5969      * <tr><td>triangleup, a, ^</td><td>A</td></tr>
5970      * <tr><td>triangledown, v</td><td>v</td></tr>
5971      * <tr><td>triangleleft, <</td><td><</td></tr>
5972      * <tr><td>triangleright, ></td><td>></td></tr>
5973      * </table>
5974      * @param {String} s A string which should determine a valid point face.
5975      * @returns {String} Returns a normalized string or undefined if the given string is not a valid
5976      * point face.
5977      */
5978     JXG.normalizePointFace = function (s) {
5979         var map = {
5980             cross: 'x',
5981             x: 'x',
5982             circle: 'o',
5983             o: 'o',
5984             square: '[]',
5985             '[]': '[]',
5986             plus: '+',
5987             '+': '+',
5988             diamond: '<>',
5989             '<>': '<>',
5990             triangleup: '^',
5991             a: '^',
5992             '^': '^',
5993             triangledown: 'v',
5994             v: 'v',
5995             triangleleft: '<',
5996             '<': '<',
5997             triangleright: '>',
5998             '>': '>'
5999         };
6000 
6001         return map[s];
6002     };
6003 
6004 
6005     /**
6006      * Apply the options stored in this object to all objects on the given board.
6007      * @param {JXG.Board} board The board to which objects the options will be applied.
6008      */
6009     JXG.useStandardOptions = function (board) {
6010         var el, t, p, copyProps,
6011             o = JXG.Options,
6012             boardHadGrid = board.hasGrid;
6013 
6014         board.options.grid.hasGrid = o.grid.hasGrid;
6015         board.options.grid.gridX = o.grid.gridX;
6016         board.options.grid.gridY = o.grid.gridY;
6017         board.options.grid.gridColor = o.grid.gridColor;
6018         board.options.grid.gridOpacity = o.grid.gridOpacity;
6019         board.options.grid.gridDash = o.grid.gridDash;
6020         board.options.grid.snapToGrid = o.grid.snapToGrid;
6021         board.options.grid.snapSizeX = o.grid.SnapSizeX;
6022         board.options.grid.snapSizeY = o.grid.SnapSizeY;
6023         board.takeSizeFromFile = o.takeSizeFromFile;
6024 
6025         copyProps = function (p, o) {
6026             p.visProp.fillcolor = o.fillColor;
6027             p.visProp.highlightfillcolor = o.highlightFillColor;
6028             p.visProp.strokecolor = o.strokeColor;
6029             p.visProp.highlightstrokecolor = o.highlightStrokeColor;
6030         };
6031 
6032         for (el in board.objects) {
6033             if (board.objects.hasOwnProperty(el)) {
6034                 p = board.objects[el];
6035                 if (p.elementClass === Const.OBJECT_CLASS_POINT) {
6036                     copyProps(p, o.point);
6037                 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) {
6038                     copyProps(p, o.line);
6039 
6040                     for (t = 0; t < p.ticks.length; t++) {
6041                         p.ticks[t].majorTicks = o.line.ticks.majorTicks;
6042                         p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance;
6043                         p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight;
6044                         p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight;
6045                     }
6046                 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) {
6047                     copyProps(p, o.circle);
6048                 } else if (p.type === Const.OBJECT_TYPE_ANGLE) {
6049                     copyProps(p, o.angle);
6050                 } else if (p.type === Const.OBJECT_TYPE_ARC) {
6051                     copyProps(p, o.arc);
6052                 } else if (p.type === Const.OBJECT_TYPE_POLYGON) {
6053                     copyProps(p, o.polygon);
6054                 } else if (p.type === Const.OBJECT_TYPE_CONIC) {
6055                     copyProps(p, o.conic);
6056                 } else if (p.type === Const.OBJECT_TYPE_CURVE) {
6057                     copyProps(p, o.curve);
6058                 } else if (p.type === Const.OBJECT_TYPE_SECTOR) {
6059                     p.arc.visProp.fillcolor = o.sector.fillColor;
6060                     p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor;
6061                     p.arc.visProp.fillopacity = o.sector.fillOpacity;
6062                     p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity;
6063                 }
6064             }
6065         }
6066 
6067         board.fullUpdate();
6068         if (boardHadGrid && !board.hasGrid) {
6069             board.removeGrids(board);
6070         } else if (!boardHadGrid && board.hasGrid) {
6071             board.create('grid', []);
6072         }
6073     };
6074 
6075     /**
6076      * Converts all color values to greyscale and calls useStandardOption to put them onto the board.
6077      * @param {JXG.Board} board The board to which objects the options will be applied.
6078      * @see #useStandardOptions
6079      */
6080     JXG.useBlackWhiteOptions = function (board) {
6081         var o = JXG.Options;
6082         o.point.fillColor = Color.rgb2bw(o.point.fillColor);
6083         o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor);
6084         o.point.strokeColor = Color.rgb2bw(o.point.strokeColor);
6085         o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor);
6086 
6087         o.line.fillColor = Color.rgb2bw(o.line.fillColor);
6088         o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor);
6089         o.line.strokeColor = Color.rgb2bw(o.line.strokeColor);
6090         o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor);
6091 
6092         o.circle.fillColor = Color.rgb2bw(o.circle.fillColor);
6093         o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor);
6094         o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor);
6095         o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor);
6096 
6097         o.arc.fillColor = Color.rgb2bw(o.arc.fillColor);
6098         o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor);
6099         o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor);
6100         o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor);
6101 
6102         o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor);
6103         o.polygon.highlightFillColor  = Color.rgb2bw(o.polygon.highlightFillColor);
6104 
6105         o.sector.fillColor = Color.rgb2bw(o.sector.fillColor);
6106         o.sector.highlightFillColor  = Color.rgb2bw(o.sector.highlightFillColor);
6107 
6108         o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor);
6109         o.grid.gridColor = Color.rgb2bw(o.grid.gridColor);
6110 
6111         JXG.useStandardOptions(board);
6112     };
6113 
6114     // needs to be exported
6115     JXG.Options.normalizePointFace = JXG.normalizePointFace;
6116 
6117     return JXG.Options;
6118 });
6119