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