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