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