1 /* 2 Copyright 2008-2024 3 Matthias Ehmann, 4 Michael Gerhaeuser, 5 Carsten Miller, 6 Bianca Valentin, 7 Alfred Wassermann, 8 Peter Wilfahrt 9 10 This file is part of JSXGraph. 11 12 JSXGraph is free software dual licensed under the GNU LGPL or MIT License. 13 14 You can redistribute it and/or modify it under the terms of the 15 16 * GNU Lesser General Public License as published by 17 the Free Software Foundation, either version 3 of the License, or 18 (at your option) any later version 19 OR 20 * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT 21 22 JSXGraph is distributed in the hope that it will be useful, 23 but WITHOUT ANY WARRANTY; without even the implied warranty of 24 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 GNU Lesser General Public License for more details. 26 27 You should have received a copy of the GNU Lesser General Public License and 28 the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/> 29 and <https://opensource.org/licenses/MIT/>. 30 */ 31 32 /*global JXG:true, define: true*/ 33 /*jslint nomen: true, plusplus: true*/ 34 35 import JXG from "./jxg.js"; 36 import Const from "./base/constants.js"; 37 import Mat from "./math/math.js"; 38 import Color from "./utils/color.js"; 39 import Type from "./utils/type.js"; 40 41 /** 42 * Options Namespace 43 * @description These are the default options of the board and of all geometry elements. 44 * @namespace 45 * @name JXG.Options 46 */ 47 JXG.Options = { 48 49 jc: { 50 enabled: true, 51 compile: true 52 }, 53 54 /* 55 * Options that are used directly within the board class 56 */ 57 board: { 58 /**#@+ 59 * @visprop 60 */ 61 62 //updateType: 'hierarchical', // 'all' 63 64 /** 65 * Time (in msec) between two animation steps. Used in 66 * {@link JXG.CoordsElement#moveAlong}, {@link JXG.CoordsElement#moveTo} and 67 * {@link JXG.CoordsElement#visit}. 68 * 69 * @name JXG.Board#animationDelay 70 * @type Number 71 * @default 35 72 * @see JXG.CoordsElement#moveAlong 73 * @see JXG.CoordsElement#moveTo 74 * @see JXG.CoordsElement#visit 75 */ 76 animationDelay: 35, 77 78 /** 79 * Show default axis. 80 * If shown, the horizontal axis can be accessed via JXG.Board.defaultAxes.x, the 81 * vertical axis can be accessed via JXG.Board.defaultAxes.y. 82 * Both axes have a sub-element "defaultTicks". 83 * 84 * Value can be Boolean or an object containing axis attributes. 85 * 86 * @name JXG.Board#axis 87 * @type Boolean 88 * @default false 89 */ 90 axis: false, 91 92 /** 93 * Bounding box of the visible area in user coordinates. 94 * It is an array consisting of four values: 95 * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>] 96 * 97 * The canvas will be spanned from the upper left corner (x<sub>1</sub>, y<sub>1</sub>) 98 * to the lower right corner (x<sub>2</sub>, y<sub>2</sub>). 99 * 100 * @name JXG.Board#boundingBox 101 * @type Array 102 * @see JXG.Board#maxBoundingBox 103 * @see JXG.Board#keepAspectRatio 104 * 105 * @default [-5, 5, 5, -5] 106 * @example 107 * var board = JXG.JSXGraph.initBoard('jxgbox', { 108 * boundingbox: [-5, 5, 5, -5], 109 * axis: true 110 * }); 111 */ 112 boundingBox: [-5, 5, 5, -5], 113 114 /** 115 * Enable browser scrolling on touch interfaces if the user double taps into an empty region 116 * of the board. 117 * 118 * <ul> 119 * <li> Implemented for pointer touch devices - not with mouse, pen or old iOS touch. 120 * <li> It only works if browserPan:true 121 * <li> One finger action by the settings "pan.enabled:true" and "pan.needTwoFingers:false" has priority 122 * </ul> 123 * 124 * @name JXG.Board#browserPan 125 * @see JXG.Board#pan 126 * @type Boolean 127 * @default false 128 * 129 * @example 130 * const board = JXG.JSXGraph.initBoard('jxgbox', { 131 * boundingbox: [-5, 5, 5, -5], axis: true, 132 * pan: { 133 * enabled: true, 134 * needTwoFingers: true, 135 * }, 136 * browserPan: true, 137 * zoom: { 138 * enabled: false 139 * } 140 * }); 141 * 142 * var p1 = board.create('point', [1, -1]); 143 * var p2 = board.create('point', [2.5, -2]); 144 * var li1 = board.create('line', [p1, p2]); 145 * 146 * </pre><div id="JXGcd50c814-be81-4280-9458-d73e50cece8d" class="jxgbox" style="width: 300px; height: 300px;"></div> 147 * <script type="text/javascript"> 148 * (function() { 149 * var board = JXG.JSXGraph.initBoard('JXGcd50c814-be81-4280-9458-d73e50cece8d', 150 * {showcopyright: false, shownavigation: false, 151 * axis: true, 152 * pan: { 153 * enabled: true, 154 * needTwoFingers: true, 155 * }, 156 * browserPan: true, 157 * zoom: { 158 * enabled: false 159 * } 160 * }); 161 * 162 * var p1 = board.create('point', [1, -1]); 163 * var p2 = board.create('point', [2.5, -2]); 164 * var li1 = board.create('line', [p1, p2]); 165 * 166 * })(); 167 * 168 * </script><pre> 169 * 170 * 171 */ 172 browserPan: false, 173 174 /** 175 * 176 * Maximum time delay (in msec) between two clicks to be considered 177 * as double click. This attribute is used together with {@link JXG.Board#dblClickSuppressClick}. 178 * The JavaScript standard is that 179 * a click event is preceded by two click events, 180 * see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event}. 181 * In case of {@link JXG.Board#dblClickSuppressClick} being true, the JavaScript standard is ignored and 182 * this time delay is used to suppress the two click events if they are followed by a double click event. 183 * <p> 184 * In case of {@link JXG.Board#dblClickSuppressClick} being false, this attribute is used 185 * to clear the list of clicked elements after the time specified by this attribute. 186 * <p> 187 * Recommendation: if {@link JXG.Board#dblClickSuppressClick} is true, use a value of approx. 300, 188 * otherwise stay with the default 600. 189 * 190 * @name JXG.Board#clickDelay 191 * @type Number 192 * @default 600 193 * @see JXG.Board#dblClickSuppressClick 194 */ 195 clickDelay: 600, 196 197 /** 198 * If false (default), JSXGraph follows the JavaScript standard and fires before a dblclick event two 199 * click events. 200 * <p> 201 * If true, the click events are suppressed if there is a dblclick event. 202 * The consequence is that in this case any click event is fired with a delay specified by 203 * {@link JXG.Board#clickDelay}. 204 * 205 * @name JXG.Board#dblClickSuppressClick 206 * @type Boolean 207 * @default false 208 * @see JXG.Board#clickDelay 209 * 210 */ 211 dblClickSuppressClick: false, 212 213 /** 214 * Attributes for the default axes in case of the attribute 215 * axis:true in {@link JXG.JSXGraph#initBoard}. 216 * 217 * @name JXG.Board#defaultAxes 218 * @type Object 219 * @default <tt>{x: {name:'x'}, y: {name: 'y'}}</tt> 220 * 221 * @example 222 * const board = JXG.JSXGraph.initBoard('id', { 223 * boundingbox: [-5, 5, 5, -5], axis:true, 224 * defaultAxes: { 225 * x: { 226 * name: 'Distance (mi)', 227 * withLabel: true, 228 * label: { 229 * position: 'rt', 230 * offset: [-5, 15], 231 * anchorX: 'right' 232 * } 233 * }, 234 * y: { 235 * withLabel: true, 236 * name: 'Y', 237 * label: { 238 * position: 'rt', 239 * offset: [-20, -5], 240 * anchorY: 'top' 241 * } 242 * } 243 * } 244 * }); 245 * 246 * </pre><div id="JXGc3af5eb8-7401-4476-80b5-379ecbd068c6" class="jxgbox" style="width: 300px; height: 300px;"></div> 247 * <script type="text/javascript"> 248 * (function() { 249 * var board = JXG.JSXGraph.initBoard('JXGc3af5eb8-7401-4476-80b5-379ecbd068c6', { 250 * showcopyright: false, shownavigation: false, 251 * boundingbox: [-5, 5, 5, -5], axis:true, 252 * defaultAxes: { 253 * x: { 254 * name: 'Distance (mi)', 255 * withLabel: true, 256 * label: { 257 * position: 'rt', 258 * offset: [-5, 15], 259 * anchorX: 'right' 260 * } 261 * }, 262 * y: { 263 * withLabel: true, 264 * name: 'Y', 265 * label: { 266 * position: 'rt', 267 * offset: [-20, -5], 268 * anchorY: 'top' 269 * } 270 * } 271 * } 272 * }); 273 * 274 * })(); 275 * 276 * </script><pre> 277 * 278 * @example 279 * // Display ticks labels as fractions 280 * var board = JXG.JSXGraph.initBoard('jxgbox', { 281 * boundingbox: [-1.2, 2.3, 1.2, -2.3], 282 * axis: true, 283 * defaultAxes: { 284 * x: { 285 * ticks: { 286 * label: { 287 * useMathJax: true, 288 * display: 'html', 289 * toFraction: true 290 * } 291 * } 292 * }, 293 * y: { 294 * ticks: { 295 * label: { 296 * useMathJax: true, 297 * display: 'html', 298 * toFraction: true 299 * } 300 * } 301 * } 302 * } 303 * }); 304 * 305 * </pre><div id="JXG484d2f00-c853-4acb-a8bd-46a9e232d13b" class="jxgbox" style="width: 300px; height: 300px;"></div> 306 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 307 * <script type="text/javascript"> 308 * (function() { 309 * var board = JXG.JSXGraph.initBoard('JXG484d2f00-c853-4acb-a8bd-46a9e232d13b', 310 * {boundingbox: [-1.2, 2.3, 1.2, -2.3], 311 * axis: true, showcopyright: false, shownavigation: true, 312 * defaultAxes: { 313 * x: { 314 * ticks: { 315 * label: { 316 * useMathJax: true, 317 * display: 'html', 318 * toFraction: true 319 * } 320 * } 321 * }, 322 * y: { 323 * ticks: { 324 * label: { 325 * useMathJax: true, 326 * display: 'html', 327 * toFraction: true 328 * } 329 * } 330 * } 331 * } 332 * }); 333 * })(); 334 * 335 * </script><pre> 336 * 337 */ 338 defaultAxes: { 339 x: { 340 name: 'x', 341 fixed: true, 342 ticks: { 343 label: { 344 visible: 'inherit', 345 anchorX: 'middle', 346 anchorY: 'top', 347 fontSize: 12, 348 offset: [0, -3] 349 }, 350 tickEndings: [0, 1], 351 majorTickEndings: [1, 1], 352 drawZero: false, 353 needsRegularUpdate: false, 354 visible: 'inherit' 355 } 356 }, 357 y: { 358 name: 'y', 359 fixed: true, 360 ticks: { 361 label: { 362 visible: 'inherit', 363 anchorX: 'right', 364 anchorY: 'middle', 365 fontSize: 12, 366 offset: [-6, 0] 367 }, 368 tickEndings: [1, 0], 369 majorTickEndings: [1, 1], 370 drawZero: false, 371 needsRegularUpdate: false, 372 visible: 'inherit' 373 } 374 } 375 }, 376 377 /** 378 * Description string for the board. 379 * Primarily used in an invisible text element which is adressed by 380 * the attribute 'aria-describedby' from the JSXGraph container. 381 * JSXGraph creates a new div-element with id "{containerid}_ARIAdescription" 382 * containing this string. 383 * 384 * @name JXG.Board#description 385 * @see JXG.Board#title 386 * @type String 387 * @default '' 388 * 389 */ 390 description: '', 391 392 /** 393 * Supply the document object. Defaults to window.document 394 * 395 * @name JXG.Board#document 396 * @type Object 397 * @description DOM object 398 * @default false (meaning window.document) 399 */ 400 document: false, 401 402 /** 403 * Control the possibilities for dragging objects. 404 * 405 * Possible sub-attributes with default values are: 406 * <pre> 407 * drag: { 408 * enabled: true // Allow dragging 409 * } 410 * </pre> 411 * 412 * @name JXG.Board#drag 413 * @type Object 414 * @default <tt>{enabled: true}</tt> 415 */ 416 drag: { 417 enabled: true 418 }, 419 420 /** 421 * Attribute(s) to control the fullscreen icon. The attribute "showFullscreen" 422 * controls if the icon is shown. 423 * The following attribute(s) can be set: 424 * <ul> 425 * <li> symbol (String): Unicode symbol which is shown in the navigation bar. Default: svg code for '\u26f6', other 426 * possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS. 427 * <li> scale (number between 0 and 1): Relative size of the larger side of the JSXGraph board in the fullscreen window. 1.0 gives full width or height. 428 * Default value is 0.85. 429 * <li> id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken. 430 * 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. 431 * </ul> 432 * 433 * @example 434 * var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723', 435 * {boundingbox: [-8, 8, 8,-8], axis: true, 436 * showcopyright: false, 437 * showFullscreen: true, 438 * fullscreen: { 439 * symbol: '\u22c7', 440 * scale: 0.95 441 * } 442 * }); 443 * var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'}); 444 * 445 * </pre><div id="JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 446 * <script type="text/javascript"> 447 * (function() { 448 * var board = JXG.JSXGraph.initBoard('JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723', 449 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, 450 * showFullscreen: true, 451 * fullscreen: { 452 * symbol: '\u22c7', 453 * scale: 0.95 454 * } 455 * }); 456 * var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'}); 457 * })(); 458 * 459 * </script><pre> 460 * 461 * @name JXG.Board#fullscreen 462 * @default svg code 463 * @see JXG.Board#showFullscreen 464 * @see JXG.AbstractRenderer#drawNavigationBar 465 * @type Object 466 */ 467 fullscreen: { 468 symbol: '<svg height="1em" width="1em" version="1.1" viewBox="10 10 18 18"><path fill="#666" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path><path fill="#666" d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path><path fill="#666" d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path><path fill="#666" d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></svg>', 469 // symbol: '\u26f6', // '\u26f6' (not supported by MacOS), 470 scale: 0.85, 471 id: null 472 }, 473 474 /** 475 * If set true and 476 * hasPoint() is true for both an element and it's label, 477 * the element (and not the label) is taken as drag element. 478 * <p> 479 * If set false and hasPoint() is true for both an element and it's label, 480 * the label is taken (if it is on a higher layer than the element) 481 * <p> 482 * Meanwhile, this feature might be irrelevant. 483 * @name JXG.Board#ignoreLabels 484 * @type Booelan 485 * @default true 486 */ 487 ignoreLabels: true, 488 489 /** 490 * Support for internationalization of number formatting. This affects 491 * <ul> 492 * <li> axis labels 493 * <li> infobox 494 * <li> texts consisting of numbers only 495 * <li> smartlabel elements 496 * <li> slider labels 497 * <li> tapemeasure elements 498 * <li> integral element labels 499 * </ul> 500 * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat</a> 501 * for an overview on the possibilities and the options. 502 * <p> 503 * User generated texts consisting of texts AND numbers have to be internationalized by the user, see 504 * {@link Text#intl}. 505 * Language locale and options can be individually controlled for each element by its intl attribute. 506 * If no locale is set, the default language of the browser is used. 507 * 508 * @name JXG.Board#intl 509 * @type Object 510 * @default <tt>{enabled: false}</tt> 511 * @see Integral#label 512 * @see Slider#intl 513 * @see Text#intl 514 * @see Ticks#intl 515 * @see JXG.Board.infobox 516 * 517 * @example 518 * // Set the board-wide locale and use individual 519 * // options for a text. 520 * const board = JXG.JSXGraph.initBoard(BOARDID, { 521 * axis: true, 522 * intl: { 523 * enabled: true, 524 * locale: 'de-DE' 525 * }, 526 * boundingbox:[-0.5, 0.5, 0.5, -0.5] 527 * }); 528 * 529 * var t = board.create('text', [0.05, 0.2, -Math.PI*100], { 530 * digits: 2, 531 * intl: { 532 * enabled: true, 533 * options: { 534 * style: 'unit', 535 * unit: 'celsius' 536 * } 537 * } 538 * }); 539 * 540 * </pre><div id="JXGcbb0305d-92e2-4628-a58a-d0d515c8fec9" class="jxgbox" style="width: 300px; height: 300px;"></div> 541 * <script type="text/javascript"> 542 * (function() { 543 * var board = JXG.JSXGraph.initBoard('JXGcbb0305d-92e2-4628-a58a-d0d515c8fec9', { 544 * axis: true, showcopyright: false, shownavigation: false, 545 * intl: { 546 * enabled: true, 547 * locale: 'de-DE' 548 * }, 549 * boundingbox:[-0.5, 0.5, 0.5, -0.5] 550 * }); 551 * var t = board.create('text', [0.05, 0.2, -Math.PI*100], { 552 * digits: 2, 553 * intl: { 554 * enabled: true, 555 * options: { 556 * style: 'unit', 557 * unit: 'celsius' 558 * } 559 * } 560 * }); 561 * 562 * })(); 563 * 564 * </script><pre> 565 * 566 * @example 567 * // Here, locale is disabled in general, but enabled for the horizontal 568 * // axis and the infobox. 569 * const board = JXG.JSXGraph.initBoard(BOARDID, { 570 * boundingbox: [-0.5, 0.5, 0.5, -0.5], 571 * intl: { 572 * enabled: false, 573 * locale: 'de-DE' 574 * }, 575 * keepaspectratio: true, 576 * axis: true, 577 * defaultAxes: { 578 * x: { 579 * ticks: { 580 * intl: { 581 * enabled: true, 582 * options: { 583 * style: 'unit', 584 * unit: 'kilometer-per-hour', 585 * unitDisplay: 'narrow' 586 * } 587 * } 588 * } 589 * }, 590 * y: { 591 * ticks: { 592 * } 593 * } 594 * }, 595 * infobox: { 596 * fontSize: 12, 597 * intl: { 598 * enabled: true, 599 * options: { 600 * minimumFractionDigits: 4, 601 * maximumFractionDigits: 5 602 * } 603 * } 604 * } 605 * }); 606 * 607 * var p = board.create('point', [0.1, 0.1], {}); 608 * 609 * </pre><div id="JXG07d5d95c-9324-4fc4-aad3-098e433f195f" class="jxgbox" style="width: 600px; height: 300px;"></div> 610 * <script type="text/javascript"> 611 * (function() { 612 * var board = JXG.JSXGraph.initBoard('JXG07d5d95c-9324-4fc4-aad3-098e433f195f', { 613 * boundingbox: [-0.5, 0.5, 0.5, -0.5], showcopyright: false, shownavigation: false, 614 * intl: { 615 * enabled: false, 616 * locale: 'de-DE' 617 * }, 618 * keepaspectratio: true, 619 * axis: true, 620 * defaultAxes: { 621 * x: { 622 * ticks: { 623 * intl: { 624 * enabled: true, 625 * options: { 626 * style: 'unit', 627 * unit: 'kilometer-per-hour', 628 * unitDisplay: 'narrow' 629 * } 630 * } 631 * } 632 * }, 633 * y: { 634 * ticks: { 635 * } 636 * } 637 * }, 638 * infobox: { 639 * fontSize: 12, 640 * intl: { 641 * enabled: true, 642 * options: { 643 * minimumFractionDigits: 4, 644 * maximumFractionDigits: 5 645 * } 646 * } 647 * } 648 * }); 649 * 650 * var p = board.create('point', [0.1, 0.1], {}); 651 * 652 * })(); 653 * 654 * </script><pre> 655 * 656 */ 657 intl: { 658 enabled: false 659 }, 660 661 /** 662 * If set to true, the ratio between horizontal and vertical unit sizes 663 * stays constant - independent of size changes of the hosting HTML div element. 664 * <p> 665 * If the aspect ration of the hosting div changes, JSXGraphs will change 666 * the user supplied bounding box accordingly. 667 * This is necessary if circles should look like circles and not 668 * like ellipses. It is recommended to set keepAspectRatio = true 669 * for geometric applets. 670 * <p> 671 * For function plotting keepAspectRatio = false 672 * might be the better choice. 673 * 674 * @name JXG.Board#keepAspectRatio 675 * @see JXG.Board#boundingBox 676 * @see JXG.Board#maxBoundingBox 677 * @see JXG.Board#setBoundingBox 678 * @type Boolean 679 * @default false 680 */ 681 keepAspectRatio: false, 682 683 /** 684 * Control using the keyboard to change the construction. 685 * <ul> 686 * <li> enabled: true / false 687 * <li> dx: horizontal shift amount per key press 688 * <li> dy: vertical shift amount per key press 689 * <li> panShift: zoom if shift key is pressed 690 * <li> panCtrl: zoom if ctrl key is pressed 691 * </ul> 692 * 693 * @example 694 * var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5], 695 * axis: true, 696 * showCopyright:true, 697 * showNavigation:true, 698 * keyboard: { 699 * enabled: true, 700 * dy: 30, 701 * panShift: true, 702 * panCtrl: false 703 * } 704 * }); 705 * 706 * </pre><div id="JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266" class="jxgbox" style="width: 300px; height: 300px;"></div> 707 * <script type="text/javascript"> 708 * (function() { 709 * var board = JXG.JSXGraph.initBoard('JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266', 710 * {boundingbox: [-5,5,5,-5], 711 * axis: true, 712 * showCopyright:true, 713 * showNavigation:true, 714 * keyboard: { 715 * enabled: true, 716 * dy: 30, 717 * panShift: true, 718 * panCtrl: false 719 * } 720 * }); 721 * 722 * })(); 723 * 724 * </script><pre> 725 * 726 * 727 * @see JXG.Board#keyDownListener 728 * @see JXG.Board#keyFocusInListener 729 * @see JXG.Board#keyFocusOutListener 730 * 731 * @name JXG.Board#keyboard 732 * @type Object 733 * @default <tt>{enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}</tt> 734 */ 735 keyboard: { 736 enabled: true, 737 dx: 10, 738 dy: 10, 739 panShift: true, 740 panCtrl: false 741 }, 742 743 /** 744 * If enabled, user activities are logged in array "board.userLog". 745 * 746 * @name JXG.Board#logging 747 * @type Object 748 * @default <tt>{enabled: false}</tt> 749 * 750 * @example 751 * var board = JXG.JSXGraph.initBoard(BOARDID, 752 * { 753 * boundingbox: [-8, 8, 8,-8], 754 * axis: true, 755 * logging: {enabled: true}, 756 * showcopyright: false, 757 * shownavigation: false 758 * }); 759 * var A = board.create('point', [-4, 0], { name: 'A' }); 760 * var B = board.create('point', [1, 2], { name: 'B' }); 761 * var showUserLog = function() { 762 * var txt = ''; 763 * 764 * for (let i = 0; i < board.userLog.length; i++) { 765 * txt += JSON.stringify(board.userLog[i]) + '\n'; 766 * } 767 * alert(txt); 768 * }; 769 * var but = board.create('button', [4, 4, 'Show user log', showUserLog]); 770 * 771 * </pre><div id="JXGe152375c-f478-41aa-a9e6-e104403fc75d" class="jxgbox" style="width: 300px; height: 300px;"></div> 772 * <script type="text/javascript"> 773 * (function() { 774 * var board = JXG.JSXGraph.initBoard('JXGe152375c-f478-41aa-a9e6-e104403fc75d', 775 * {boundingbox: [-8, 8, 8,-8], axis: true, logging: {enabled: true}, 776 * showcopyright: false, shownavigation: false}); 777 * var A = board.create('point', [-4, 0], { name: 'A' }); 778 * var B = board.create('point', [1, 2], { name: 'B' }); 779 * var showUserLog = function() { 780 * var txt = ''; 781 * 782 * for (let i = 0; i < board.userLog.length; i++) { 783 * txt += JSON.stringify(board.userLog[i]) + '\n'; 784 * } 785 * alert(txt); 786 * }; 787 * var but = board.create('button', [4, 4, 'Show user log', showUserLog]); 788 * 789 * })(); 790 * 791 * </script><pre> 792 * 793 * 794 * @see JXG.Board#userLog 795 */ 796 logging: { 797 enabled: false 798 }, 799 800 /** 801 * Change redraw strategy in SVG rendering engine. 802 * <p> 803 * This optimization seems to be <b>obsolete</b> in newer browsers (from 2021 on, at least) 804 * and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4. 805 * <p> 806 * If set to 'svg', before every redrawing of the JSXGraph construction 807 * the SVG sub-tree of the DOM tree is taken out of the DOM. 808 * 809 * If set to 'all', before every redrawing of the JSXGraph construction the 810 * complete DOM tree is taken out of the DOM. 811 * If set to 'none' the redrawing is done in-place. 812 * 813 * Using 'svg' or 'all' speeds up the update process considerably. The risk 814 * is that if there is an exception, only a white div or window is left. 815 * 816 * 817 * @name JXG.Board#minimizeReflow 818 * @type String 819 * @default 'none' 820 */ 821 minimizeReflow: 'none', 822 823 /** 824 * Maximal bounding box of the visible area in user coordinates. 825 * It is an array consisting of four values: 826 * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>] 827 * 828 * The bounding box of the canvas must be inside of this maximal 829 * bounding box. 830 * 831 * @name JXG.Board#maxBoundingBox 832 * @type Array 833 * @see JXG.Board#boundingBox 834 * @default [-Infinity, Infinity, Infinity, -Infinity] 835 * 836 * @example 837 * var board = JXG.JSXGraph.initBoard('jxgbox', { 838 * boundingBox: [-5, 5, 5, -5], 839 * maxBoundingBox: [-8, 8, 8, -8], 840 * pan: {enabled: true}, 841 * axis: true 842 * }); 843 * 844 * </pre><div id="JXG065e2750-217c-48ed-a52b-7d7df6de7055" class="jxgbox" style="width: 300px; height: 300px;"></div> 845 * <script type="text/javascript"> 846 * (function() { 847 * var board = JXG.JSXGraph.initBoard('JXG065e2750-217c-48ed-a52b-7d7df6de7055', { 848 * showcopyright: false, shownavigation: false, 849 * boundingbox: [-5,5,5,-5], 850 * maxboundingbox: [-8,8,8,-8], 851 * pan: {enabled: true}, 852 * axis:true 853 * }); 854 * 855 * })(); 856 * 857 * </script><pre> 858 * 859 */ 860 maxBoundingBox: [-Infinity, Infinity, Infinity, -Infinity], 861 862 /** 863 * Maximum frame rate of the board, i.e. maximum number of updates per second 864 * triggered by move events. 865 * 866 * @name JXG.Board#maxFrameRate 867 * @type Number 868 * @default 40 869 */ 870 maxFrameRate: 40, 871 872 /** 873 * Maximum number of digits in automatic label generation. 874 * For example, if set to 1 automatic point labels end at "Z". 875 * If set to 2, point labels end at "ZZ". 876 * 877 * @name JXG.Board#maxNameLength 878 * @see JXG.Board#generateName 879 * @type Number 880 * @default 1 881 */ 882 maxNameLength: 1, 883 884 /** 885 * Element which listens to move events of the pointing device. 886 * This allows to drag elements of a JSXGraph construction outside of the board. 887 * Especially, on mobile devices this enhances the user experience. 888 * However, it is recommended to allow dragging outside of the JSXGraph board only 889 * in certain constructions where users may not "loose" points outside of the board. 890 * In such a case, points may become unreachable. 891 * <p> 892 * A situation where dragging outside of the board is uncritical is for example if 893 * only sliders are used to interact with the construction. 894 * <p> 895 * Possible values for this attributes are: 896 * <ul> 897 * <li> an element specified by document.getElementById('some id'); 898 * <li> null: to use the JSXGraph container div element 899 * <li> document 900 * </ul> 901 * <p> 902 * Since the introduction of this attribute "moveTarget", the value "document" has become sort of 903 * default on touch devices like smartphones. However, it is no longer the case that the document listens to 904 * move events, but there is the new feature "setPointerCapture", which is also implicitly enabled on certain devices. 905 * In future versions, JSXGraph may adopt this new standard and distinguish only two cases: 906 * <ul> 907 * <li>null: no pointerCapture 908 * <li>document: use pointerCapture 909 * </ul> 910 * <p> 911 * This attribute is immutable. 912 * It can be changed as follows: 913 * 914 * @example 915 * board.setAttribute({moveTarget: null}); 916 * board.removeEventHandlers(); 917 * board.addEventHandlers(); 918 * 919 * @name JXG.Board#moveTarget 920 * @type Object 921 * @description HTML node or document 922 * @default null 923 * 924 * @example 925 * var board = JXG.JSXGraph.initBoard('jxgbox', { 926 * boundingbox: [-5,5,5,-5], 927 * axis: true, 928 * moveTarget: document 929 * }); 930 * 931 * </pre><div id="JXG973457e5-c63f-4516-8570-743f2cc560e1" class="jxgbox" style="width: 300px; height: 300px;"></div> 932 * <script type="text/javascript"> 933 * (function() { 934 * var board = JXG.JSXGraph.initBoard('JXG973457e5-c63f-4516-8570-743f2cc560e1', 935 * {boundingbox: [-5,5,5,-5], 936 * axis: true, 937 * moveTarget: document 938 * }); 939 * 940 * })(); 941 * 942 * </script><pre> 943 * 944 * 945 */ 946 moveTarget: null, 947 948 /** 949 * A number that will be added to the absolute position of the board used in mouse coordinate 950 * calculations in {@link JXG.Board#getCoordsTopLeftCorner}. 951 * 952 * @name JXG.Board#offsetX 953 * @see JXG.Board#offsetY 954 * @type Number 955 * @default 0 956 */ 957 offsetX: 0, 958 959 /** 960 * A number that will be added to the absolute position of the board used in mouse coordinate 961 * calculations in {@link JXG.Board#getCoordsTopLeftCorner}. 962 * 963 * @name JXG.Board#offsetY 964 * @see JXG.Board#offsetX 965 * @type Number 966 * @default 0 967 */ 968 offsetY: 0, 969 970 /** 971 * Control the possibilities for panning interaction (i.e. moving the origin). 972 * 973 * Possible sub-attributes with default values are: 974 * <pre> 975 * pan: { 976 * enabled: true // Allow panning 977 * needTwoFingers: false, // panning is done with two fingers on touch devices 978 * needShift: true, // mouse panning needs pressing of the shift key 979 * } 980 * </pre> 981 * 982 * @name JXG.Board#pan 983 * @see JXG.Board#browserPan 984 * 985 * @type Object 986 */ 987 pan: { 988 enabled: true, 989 needShift: true, 990 needTwoFingers: false 991 }, 992 993 /** 994 * Allow user interaction by registering pointer events (including mouse and 995 * touch events), fullscreen, keyboard, resize, and zoom events. 996 * The latter events are essentially mouse wheel events. 997 * Decide if JSXGraph listens to these events. 998 * <p> 999 * Using a Boolean value turns on all events (or not), supplying an object of 1000 * the form 1001 * <pre> 1002 * { 1003 * fullscreen: true / false, 1004 * keyboard: true / false, 1005 * pointer: true / false, 1006 * resize: true / false, 1007 * wheel: true / false 1008 * } 1009 * </pre> 1010 * activates individual event handlers. If an event is NOT given, 1011 * it will be activated. 1012 * <p>This attribute is immutable. Please use 1013 * {@link JXG.Board#addEventHandlers()} and 1014 * {@link JXG.Board#removeEventHandlers()} directly. 1015 * 1016 * @name JXG.Board#registerEvents 1017 * @see JXG.Board#keyboard 1018 * @see JXG.Board#registerResizeEvent 1019 * @see JXG.Board#registerFullscreenEvent 1020 * @type Boolean 1021 * @default true 1022 */ 1023 registerEvents: true, 1024 1025 // /** 1026 // * Listen to fullscreen event. 1027 // * 1028 // * <p>This attribute is immutable. Please use 1029 // * {@link JXG.Board#addFullscreenEventHandlers()} and 1030 // * {@link JXG.Board#removeEventHandlers()} directly. 1031 // * 1032 // * @name JXG.Board#registerFullscreenEvent 1033 // * @see JXG.Board#registerEvents 1034 // * @see JXG.Board#registerResizeEvent 1035 // * @type Boolean 1036 // * @default true 1037 // */ 1038 // registerFullscreenEvent: true, 1039 1040 // /** 1041 // * Listen to resize events, i.e. start "resizeObserver" or handle the resize event with 1042 // * "resizeListener". This is independent from the mouse, touch, pointer events. 1043 // * 1044 // * <p>This attribute is immutable. Please use 1045 // * {@link JXG.Board#addResizeEventHandlers()} and 1046 // * {@link JXG.Board#removeEventHandlers()} directly. 1047 // * <p> 1048 // * This attribute just starts a resizeObserver. If the resizeObserver reacts 1049 // * to size changed is controlled with {@link JXG.Board#resize}. 1050 // * 1051 // * @name JXG.Board#registerResizeEvent 1052 // * @see JXG.Board#resize 1053 // * @see JXG.Board#registerEvents 1054 // * @see JXG.Board#registerFullscreenEvent 1055 // * @type Boolean 1056 // * @default true 1057 // */ 1058 // registerResizeEvent: true, 1059 1060 /** 1061 * Default rendering engine. Possible values are 'svg', 'canvas', 'vml', 'no', or 'auto'. 1062 * If the rendering engine is not available JSXGraph tries to detect a different engine. 1063 * 1064 * <p> 1065 * In case of 'canvas' it is advisable to call 'board.update()' after all elements have been 1066 * constructed. This ensures that all elements are drawn with their intended visual appearance. 1067 * 1068 * <p> 1069 * This attribute is immutable. 1070 * 1071 * @name JXG.Board#renderer 1072 * @type String 1073 * @default 'auto' 1074 */ 1075 renderer: 'auto', 1076 1077 /** 1078 * Control if JSXGraph reacts to resizing of the JSXGraph container element 1079 * by the user / browser. 1080 * The attribute "throttle" determines the minimal time in msec between to 1081 * resize calls. 1082 * <p> 1083 * <b>Attention:</b> if the JSXGraph container has no CSS property like width or height nd max-width or max-height set, but 1084 * has a property like boxsizing:box-content, then the interplay between CSS and the resize attribute may result in an 1085 * infinite loop with ever increasing JSXgraph container. 1086 * 1087 * @see JXG.Board#startResizeObserver 1088 * @see JXG.Board#resizeListener 1089 * 1090 * @name JXG.Board#resize 1091 * @type Object 1092 * @default <tt>{enabled: true, throttle: 10}</tt> 1093 * 1094 * @example 1095 * var board = JXG.JSXGraph.initBoard('jxgbox', { 1096 * boundingbox: [-5,5,5,-5], 1097 * keepAspectRatio: true, 1098 * axis: true, 1099 * resize: {enabled: true, throttle: 200} 1100 * }); 1101 * 1102 * </pre><div id="JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3" class="jxgbox" style="width: 300px; height: 300px;"></div> 1103 * <script type="text/javascript"> 1104 * (function() { 1105 * var board = JXG.JSXGraph.initBoard('JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3', { 1106 * boundingbox: [-5,5,5,-5], 1107 * keepAspectRatio: true, 1108 * axis: true, 1109 * resize: {enabled: true, throttle: 200} 1110 * }); 1111 * 1112 * })(); 1113 * 1114 * </script><pre> 1115 * 1116 * 1117 */ 1118 resize: { 1119 enabled: true, 1120 throttle: 10 1121 }, 1122 1123 /** 1124 * Attributes to control the screenshot function. 1125 * The following attributes can be set: 1126 * <ul> 1127 * <li>scale: scaling factor (default=1.0) 1128 * <li>type: format of the screenshot image. Default: png 1129 * <li>symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318' 1130 * <li>css: CSS rules to format the div element containing the screen shot image 1131 * <li>cssButton: CSS rules to format the close button of the div element containing the screen shot image 1132 * </ul> 1133 * The screenshot will fail if the board contains text elements or foreign objects 1134 * containing SVG again. 1135 * 1136 * @name JXG.Board#screenshot 1137 * @type Object 1138 */ 1139 screenshot: { 1140 scale: 1, 1141 type: 'png', 1142 symbol: '\u2318', //'\u22b9', //'\u26f6', 1143 css: 'background-color:#eeeeee; opacity:1.0; border:2px solid black; border-radius:10px; text-align:center', 1144 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);' 1145 }, 1146 1147 /** 1148 * Control the possibilities for a selection rectangle. 1149 * Starting a selection event triggers the "startselecting" event. 1150 * When the mouse pointer is released, the "stopselecting" event is fired. 1151 * The "stopselecting" event is supplied by the user. 1152 * <p> 1153 * So far it works in SVG renderer only. 1154 * <p> 1155 * Possible sub-attributes with default values are: 1156 * <pre> 1157 * selection: { 1158 * enabled: false, 1159 * name: 'selectionPolygon', 1160 * needShift: false, // mouse selection needs pressing of the shift key 1161 * needCtrl: true, // mouse selection needs pressing of the shift key 1162 * fillColor: '#ffff00' 1163 * } 1164 * </pre> 1165 * <p> 1166 * Board events triggered by selection manipulation: 1167 * 'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting', 1168 * 'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'. 1169 * 1170 * @example 1171 * board.on('stopselecting', function(){ 1172 * var box = board.stopSelectionMode(), 1173 * // bbox has the coordinates of the selectionr rectangle. 1174 * // Attention: box[i].usrCoords have the form [1, x, y], i.e. 1175 * // are homogeneous coordinates. 1176 * bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1)); 1177 * // Set a new bounding box 1178 * board.setBoundingBox(bbox, false); 1179 * }); 1180 * 1181 * @name JXG.Board#selection 1182 * 1183 * @see JXG.Board#startSelectionMode 1184 * @see JXG.Board#stopSelectionMode 1185 * 1186 * @type Object 1187 * @default 1188 */ 1189 selection: { 1190 enabled: false, 1191 name: 'selectionPolygon', 1192 needShift: false, 1193 needCtrl: true, 1194 fillColor: '#ffff00', 1195 1196 // immutable: 1197 visible: false, 1198 withLines: false, 1199 vertices: { 1200 visible: false 1201 } 1202 }, 1203 1204 /** 1205 * Show a button which allows to clear all traces of a board. 1206 * This button can be accessed by JavaScript or CSS with 1207 * the ID <tt>"{board_id}_navigation_button_cleartraces"</tt> or by the CSS classes 1208 * <tt>JXG_navigation_button"</tt> or 1209 * <tt>JXG_navigation_button_cleartraces"</tt>. 1210 * 1211 * @name JXG.Board#showClearTraces 1212 * @type Boolean 1213 * @default false 1214 * @see JXG.AbstractRenderer#drawNavigationBar 1215 */ 1216 showClearTraces: false, 1217 1218 /** 1219 * Show copyright string in canvas. 1220 * 1221 * @name JXG.Board#showCopyright 1222 * @type Boolean 1223 * @default true 1224 */ 1225 showCopyright: true, 1226 1227 /** 1228 * Show a button in the navigation bar to start fullscreen mode. 1229 * This button can be accessed by JavaScript or CSS with 1230 * the ID <tt>"{board_id}_navigation_button_fullscreen"</tt> or by the CSS classes 1231 * <tt>JXG_navigation_button"</tt> or 1232 * <tt>JXG_navigation_button_fullscreen"</tt>. 1233 * 1234 * @name JXG.Board#showFullscreen 1235 * @type Boolean 1236 * @see JXG.Board#fullscreen 1237 * @default false 1238 * @see JXG.AbstractRenderer#drawNavigationBar 1239 * @see JXG.AbstractRenderer#drawNavigationBar 1240 */ 1241 showFullscreen: false, 1242 1243 /** 1244 * If true, the infobox is shown on mouse/pen over for all points 1245 * which have set their attribute showInfobox to 'inherit'. 1246 * If a point has set its attribute showInfobox to false or true, 1247 * that value will have priority over this value. 1248 * 1249 * @name JXG.Board#showInfobox 1250 * @see Point#showInfobox 1251 * @type Boolean 1252 * @default true 1253 */ 1254 showInfobox: true, 1255 1256 /** 1257 * Display of navigation arrows and zoom buttons in the navigation bar. 1258 * <p> 1259 * The navigation bar has the 1260 * the ID <tt>"{board_id}_navigation"</tt> and the CSS class 1261 * <tt>JXG_navigation"</tt>. 1262 * The individual buttons can be accessed by JavaScript or CSS with 1263 * the ID <tt>"{board_id}_navigation_button_{type}"</tt> or by the CSS classes 1264 * <tt>JXG_navigation_button"</tt> or 1265 * <tt>JXG_navigation_button_{type}"</tt>, where <tt>{type}</tt> 1266 * is one of <tt>left</tt>, <tt>right</tt>, or <tt>up</tt>, <tt>down</tt>, 1267 * <tt>in</tt>, <tt>100</tt>, or <tt>out</tt>, 1268 * <tt>fullscreen</tt>, <tt>screenshot</tt>, <tt>cleartraces</tt>, <tt>reload</tt>. 1269 * 1270 * @name JXG.Board#showNavigation 1271 * @type Boolean 1272 * @default true 1273 * @see JXG.AbstractRenderer#drawNavigationBar 1274 */ 1275 showNavigation: true, 1276 1277 /** 1278 * Show a button in the navigation bar to force reload of a construction. 1279 * Works only with the JessieCode tag. 1280 * This button can be accessed by JavaScript or CSS with 1281 * the ID <tt>"{board_id}_navigation_button_reload"</tt> or by the CSS classes 1282 * <tt>JXG_navigation_button"</tt> or 1283 * <tt>JXG_navigation_button_reload"</tt>. 1284 * 1285 * @name JXG.Board#showReload 1286 * @type Boolean 1287 * @default false 1288 * @see JXG.AbstractRenderer#drawNavigationBar 1289 */ 1290 showReload: false, 1291 1292 /** 1293 * Show a button in the navigation bar to enable screenshots. 1294 * This button can be accessed by JavaScript or CSS with 1295 * the ID <tt>"{board_id}_navigation_button_screenshot"</tt> or by the CSS classes 1296 * <tt>JXG_navigation_button"</tt> or 1297 * <tt>JXG_navigation_button_screenshot"</tt>. 1298 * 1299 * @name JXG.Board#showScreenshot 1300 * @type Boolean 1301 * @default false 1302 * @see JXG.AbstractRenderer#drawNavigationBar 1303 */ 1304 showScreenshot: false, 1305 1306 /** 1307 * Display of zoom buttons in the navigation bar. To show zoom buttons, additionally 1308 * showNavigation has to be set to true. 1309 * <p> 1310 * The individual buttons can be accessed by JavaScript or CSS with 1311 * the ID <tt>"{board_id}_navigation_button_{type}"</tt> or by the CSS classes 1312 * <tt>JXG_navigation_button"</tt> or 1313 * <tt>JXG_navigation_button_{type}"</tt>, where <tt>{type}</tt> 1314 * is <tt>in</tt>, <tt>100</tt>, or <tt>out</tt>. 1315 * 1316 * @name JXG.Board#showZoom 1317 * @type Boolean 1318 * @default true 1319 * @see JXG.AbstractRenderer#drawNavigationBar 1320 */ 1321 showZoom: true, 1322 1323 /** 1324 * If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element. 1325 * 1326 * @name JXG.Board#takeFirst 1327 * @type Boolean 1328 * @default false 1329 */ 1330 takeFirst: false, 1331 1332 /** 1333 * If true, when read from a file or string - the size of the div can be changed by the construction text. 1334 * 1335 * @name JXG.Board#takeSizeFromFile 1336 * @type Boolean 1337 * @default false 1338 */ 1339 takeSizeFromFile: false, 1340 1341 /** 1342 * Set a visual theme for a board. At the moment this attribute is immutable. 1343 * Available themes are 1344 * <ul> 1345 * <li> 'default' 1346 * <li> 'mono_thin': a black / white theme using thin strokes. Restricted to 2D. 1347 * </ul> 1348 * 1349 * @name JXG.Board#theme 1350 * @type String 1351 * @default 'default' 1352 * @example 1353 * const board = JXG.JSXGraph.initBoard('jxgbox', { 1354 * boundingbox: [-5, 5, 5, -5], axis: true, 1355 * theme: 'mono_thin' 1356 * }); 1357 * 1358 * var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]); 1359 * var p1 = board.create('point', [1, 2]); 1360 * var ci1 = board.create('circle', [p1, 0.7]); 1361 * var cu = board.create('functiongraph', ['x^2']); 1362 * var l1 = board.create('line', [2, 3, -1]); 1363 * var l2 = board.create('line', [-5, -3, -1], { dash: 2 }); 1364 * var i1 = board.create('intersection', [l1, l2]); 1365 * var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]); 1366 * var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]); 1367 * var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]); 1368 * var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } }); 1369 * 1370 * </pre><div id="JXG1c5f7a2a-176b-4410-ac06-8593f1a09879" class="jxgbox" style="width: 300px; height: 300px;"></div> 1371 * <script type="text/javascript"> 1372 * (function() { 1373 * var board = JXG.JSXGraph.initBoard('JXG1c5f7a2a-176b-4410-ac06-8593f1a09879', 1374 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false, 1375 * theme: 'mono_thin' }); 1376 * 1377 * var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]); 1378 * var p1 = board.create('point', [1, 2]); 1379 * var ci1 = board.create('circle', [p1, 0.7]); 1380 * var cu = board.create('functiongraph', ['x^2']); 1381 * var l1 = board.create('line', [2, 3, -1]); 1382 * var l2 = board.create('line', [-5, -3, -1], { dash: 2 }); 1383 * var i1 = board.create('intersection', [l1, l2]); 1384 * var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]); 1385 * var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]); 1386 * var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]); 1387 * var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } }); 1388 * 1389 * })(); 1390 * 1391 * </script><pre> 1392 * 1393 */ 1394 theme: 'default', 1395 1396 /** 1397 * Title string for the board. 1398 * Primarily used in an invisible text element which is adressed by 1399 * the attribute 'aria-labelledby' from the JSXGraph container. 1400 * JSXGraph creates a new div-element with id "{containerid}_ARIAlabel" 1401 * containing this string. 1402 * 1403 * @name JXG.Board#title 1404 * @see JXG.Board#description 1405 * @type String 1406 * @default '' 1407 * 1408 */ 1409 title: '', 1410 1411 /** 1412 * 1413 * Set a viewport of the board. viewport is determined by an array of the form '[left, top, right, bottom]'. 1414 * whose entries determine an inner margin (i.e. a padding) of the board. The entries of the array have to be given 1415 * as numbers or strings. In the latter case the units 'px' or '%' are supported. 1416 * The viewport can be individually controlled for each element, too. 1417 * 1418 * @type {Array|String} 1419 * @name JXG.Board#viewport 1420 * @default [0, 0, 0, 0] 1421 * @see JXG.GeometryElement#viewport 1422 */ 1423 viewport: [0, 0, 0, 0], 1424 1425 /** 1426 * Control the possibilities for zoom interaction. 1427 * 1428 * Possible sub-attributes with default values are: 1429 * <pre> 1430 * zoom: { 1431 * enabled: true, // turns off zooming completely, if set to false. 1432 * factorX: 1.25, // horizontal zoom factor (multiplied to {@link JXG.Board#zoomX}) 1433 * factorY: 1.25, // vertical zoom factor (multiplied to {@link JXG.Board#zoomY}) 1434 * wheel: true, // allow zooming by mouse wheel 1435 * needShift: true, // mouse wheel zooming needs pressing of the shift key 1436 * min: 0.001, // minimal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomOut 1437 * max: 1000.0, // maximal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomIn 1438 * center: 'auto', // 'auto': the center of zoom is at the position of the mouse or at the midpoint of two fingers 1439 * // 'board': the center of zoom is at the board's center 1440 * pinch: true, // pinch-to-zoom gesture for proportional zoom 1441 * pinchHorizontal: true, // Horizontal pinch-to-zoom zooms horizontal axis. Only available if keepaspectratio:false 1442 * pinchVertical: true, // Vertical pinch-to-zoom zooms vertical axis only. Only available if keepaspectratio:false 1443 * pinchSensitivity: 7 // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures. 1444 * } 1445 * </pre> 1446 * 1447 * If the zoom buttons are visible, zooming by clicking the buttons is still possible, regardless of zoom.enabled:true/false. 1448 * If this should be prevented, set showZoom:false. 1449 * 1450 * Deprecated: zoom.eps which is superseded by zoom.min 1451 * 1452 * @name JXG.Board#zoom 1453 * @type Object 1454 * @default See above 1455 * @see JXG.Board#showZoom 1456 * 1457 */ 1458 zoom: { 1459 enabled: true, 1460 factorX: 1.25, 1461 factorY: 1.25, 1462 wheel: true, 1463 needShift: true, 1464 center: 'auto', 1465 min: 0.0001, 1466 max: 10000.0, 1467 pinch: true, 1468 pinchHorizontal: true, 1469 pinchVertical: true, 1470 pinchSensitivity: 7 1471 }, 1472 1473 // /** 1474 // * Additional zoom factor multiplied to {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}. 1475 // * 1476 // * @name JXG.Board#zoomFactor 1477 // * @type Number 1478 // * @default 1.0 1479 // */ 1480 // zoomFactor: 1, 1481 1482 /** 1483 * Zoom factor in horizontal direction. 1484 * 1485 * @name JXG.Board#zoomX 1486 * @see JXG.Board#zoomY 1487 * @type Number 1488 * @default 1.0 1489 */ 1490 zoomX: 1, 1491 1492 /** 1493 * Zoom factor in vertical direction. 1494 * 1495 * @name JXG.Board#zoomY 1496 * @see JXG.Board#zoomX 1497 * @type Number 1498 * @default 1.0 1499 */ 1500 zoomY: 1 1501 1502 /**#@-*/ 1503 }, 1504 1505 /** 1506 * Options that are used by the navigation bar. 1507 * 1508 * Default values are 1509 * <pre> 1510 * JXG.Option.navbar: { 1511 * strokeColor: '#333333', 1512 * fillColor: 'transparent', 1513 * highlightFillColor: '#aaaaaa', 1514 * padding: '2px', 1515 * position: 'absolute', 1516 * fontSize: '14px', 1517 * cursor: 'pointer', 1518 * zIndex: '100', 1519 * right: '5px', 1520 * bottom: '5px' 1521 * }, 1522 * </pre> 1523 * These settings are overruled by the CSS class 'JXG_navigation'. 1524 * @deprecated 1525 * @type Object 1526 * @name JXG.Options#navbar 1527 * 1528 */ 1529 navbar: { 1530 strokeColor: '#333333', //'#aaaaaa', 1531 fillColor: 'transparent', //#f5f5f5', 1532 highlightFillColor: '#aaaaaa', 1533 padding: '2px', 1534 position: 'absolute', 1535 fontSize: '14px', 1536 cursor: 'pointer', 1537 zIndex: '100', 1538 right: '5px', 1539 bottom: '5px' 1540 //border: 'none 1px black', 1541 //borderRadius: '4px' 1542 }, 1543 1544 /* 1545 * Generic options used by {@link JXG.GeometryElement} 1546 */ 1547 elements: { 1548 /**#@+ 1549 * @visprop 1550 */ 1551 // This is a meta tag: http://code.google.com/p/jsdoc-toolkit/wiki/MetaTags 1552 1553 /** 1554 * Determines the elements border-style. 1555 * Possible values are: 1556 * <ul><li>0 for a solid line</li> 1557 * <li>1 for a dotted line</li> 1558 * <li>2 for a line with small dashes</li> 1559 * <li>3 for a line with medium dashes</li> 1560 * <li>4 for a line with big dashes</li> 1561 * <li>5 for a line with alternating medium and big dashes and large gaps</li> 1562 * <li>6 for a line with alternating medium and big dashes and small gaps</li> 1563 * <li>7 for a dotted line. Needs {@link JXG.GeometryElement#linecap} set to "round" for round dots.</li> 1564 * </ul> 1565 * The dash patterns are defined in {@link JXG.AbstractRenderer#dashArray}. 1566 * 1567 * @type Number 1568 * @name JXG.GeometryElement#dash 1569 * @default 0 1570 * 1571 * @see JXG.GeometryElement#lineCap 1572 * @see JXG.AbstractRenderer#dashArray 1573 */ 1574 dash: 0, 1575 1576 /** 1577 * If true, the dash pattern is multiplied by strokeWidth / 2. 1578 * @name JXG.GeometryElement#dashScale 1579 * @type Boolean 1580 * @default false 1581 * 1582 * @see JXG.GeometryElement#dash 1583 * @see JXG.AbstractRenderer#dashArray 1584 */ 1585 dashScale: false, 1586 1587 /** 1588 * If draft.draft: true the element will be drawn in grey scale colors (as default) 1589 * to visualize that it's only a draft. 1590 * 1591 * @name JXG.GeometryElement#draft 1592 * @type Object 1593 * @default <tt>{@link JXG.Options.elements.draft#draft}</tt> 1594 */ 1595 draft: { 1596 draft: false, 1597 strokeColor: '#565656', 1598 fillColor: '#565656', 1599 strokeOpacity: 0.8, 1600 fillOpacity: 0.8, 1601 strokeWidth: 1 1602 }, 1603 1604 /** 1605 * If the element is dragged it will be moved on mousedown or touchstart to the 1606 * top of its layer. Works only for SVG renderer and for simple elements 1607 * consisting of one SVG node. 1608 * @example 1609 * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true}); 1610 * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'}); 1611 * 1612 * </pre><div id="JXG38449fee-1ab4-44de-b7d1-43caa1f50f86" class="jxgbox" style="width: 300px; height: 300px;"></div> 1613 * <script type="text/javascript"> 1614 * (function() { 1615 * var board = JXG.JSXGraph.initBoard('JXG38449fee-1ab4-44de-b7d1-43caa1f50f86', 1616 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1617 * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true}); 1618 * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'}); 1619 * 1620 * })(); 1621 * 1622 * </script><pre> 1623 * 1624 * @type Boolean 1625 * @default false 1626 * @name JXG.GeometryElement#dragToTopOfLayer 1627 */ 1628 dragToTopOfLayer: false, 1629 1630 /** 1631 * The fill color of this geometry element. 1632 * @type String 1633 * @name JXG.GeometryElement#fillColor 1634 * @see JXG.GeometryElement#highlightFillColor 1635 * @see JXG.GeometryElement#fillOpacity 1636 * @see JXG.GeometryElement#highlightFillOpacity 1637 * @default JXG.palette.red 1638 */ 1639 fillColor: Color.palette.red, 1640 1641 /** 1642 * Opacity for fill color. 1643 * @type Number 1644 * @name JXG.GeometryElement#fillOpacity 1645 * @see JXG.GeometryElement#fillColor 1646 * @see JXG.GeometryElement#highlightFillColor 1647 * @see JXG.GeometryElement#highlightFillOpacity 1648 * @default 1 1649 */ 1650 fillOpacity: 1, 1651 1652 /** 1653 * If true the element is fixed and can not be dragged around. The element 1654 * will be repositioned on zoom and moveOrigin events. 1655 * @type Boolean 1656 * @default false 1657 * @name JXG.GeometryElement#fixed 1658 */ 1659 fixed: false, 1660 1661 /** 1662 * If true the element is fixed and can not be dragged around. The element 1663 * will even stay at its position on zoom and moveOrigin events. 1664 * Only free elements like points, texts, images, curves can be frozen. 1665 * For slider elements, the subobjects point1 and point2 have to be "frozen". 1666 * 1667 * @type Boolean 1668 * @default false 1669 * @name JXG.GeometryElement#frozen 1670 * 1671 * @example 1672 * var txt = board.create('text', [1, 2, 'Hello'], {frozen: true, fontSize: 24}); 1673 * var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], { 1674 * name:'a', 1675 * point1: {frozen: true}, 1676 * point2: {frozen: true} 1677 * }); 1678 * 1679 * </pre><div id="JXG02f88c9d-8c0a-4174-9219-f0ea43749159" class="jxgbox" style="width: 300px; height: 300px;"></div> 1680 * <script type="text/javascript"> 1681 * (function() { 1682 * var board = JXG.JSXGraph.initBoard('JXG02f88c9d-8c0a-4174-9219-f0ea43749159', 1683 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1684 * var txt = board.create('text', [1, 2, 'Hello'], {frozen: true, fontSize: 24}); 1685 * var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], { 1686 * name:'a', 1687 * point1: {frozen: true}, 1688 * point2: {frozen: true} 1689 * }); 1690 * 1691 * })(); 1692 * 1693 * </script><pre> 1694 * 1695 */ 1696 frozen: false, 1697 1698 /** 1699 * Gradient type. Possible values are 'linear'. 'radial' or null. 1700 * 1701 * @example 1702 * var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'}); 1703 * var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'}); 1704 * var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'}); 1705 * 1706 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1707 * fillOpacity: 1, 1708 * fillColor: 'yellow', 1709 * gradient: 'linear', 1710 * gradientSecondColor: 'blue', 1711 * gradientAngle: function() { return a.Value(); }, 1712 * gradientStartOffset: function() { return b.Value(); }, 1713 * gradientEndOffset: function() { return c.Value(); }, 1714 * hasInnerPoints: true 1715 * }); 1716 * 1717 * </pre><div id="JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0" class="jxgbox" style="width: 300px; height: 300px;"></div> 1718 * <script type="text/javascript"> 1719 * (function() { 1720 * var board = JXG.JSXGraph.initBoard('JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0', 1721 * {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false}); 1722 * var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'}); 1723 * var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'}); 1724 * var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'}); 1725 * 1726 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1727 * fillOpacity: 1, 1728 * fillColor: 'yellow', 1729 * gradient: 'linear', 1730 * gradientSecondColor: 'blue', 1731 * gradientAngle: function() { return a.Value(); }, 1732 * gradientStartOffset: function() { return b.Value(); }, 1733 * gradientEndOffset: function() { return c.Value(); }, 1734 * hasInnerPoints: true 1735 * }); 1736 * 1737 * })(); 1738 * 1739 * </script><pre> 1740 * 1741 * @example 1742 * var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'}); 1743 * var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'}); 1744 * var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'}); 1745 * var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'}); 1746 * var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'}); 1747 * var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'}); 1748 * 1749 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1750 * fillOpacity: 1, 1751 * fillColor: 'yellow', 1752 * gradient: 'radial', 1753 * gradientSecondColor: 'blue', 1754 * gradientCX: function() { return cx.Value(); }, 1755 * gradientCY: function() { return cx.Value(); }, 1756 * gradientR: function() { return r.Value(); }, 1757 * gradientFX: function() { return fx.Value(); }, 1758 * gradientFY: function() { return fx.Value(); }, 1759 * gradientFR: function() { return fr.Value(); }, 1760 * gradientStartOffset: function() { return o1.Value(); }, 1761 * gradientEndOffset: function() { return o2.Value(); }, 1762 * hasInnerPoints: true 1763 * }); 1764 * 1765 * </pre><div id="JXG6081ca7f-0d09-4525-87ac-325a02fe2225" class="jxgbox" style="width: 300px; height: 300px;"></div> 1766 * <script type="text/javascript"> 1767 * (function() { 1768 * var board = JXG.JSXGraph.initBoard('JXG6081ca7f-0d09-4525-87ac-325a02fe2225', 1769 * {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false}); 1770 * var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'}); 1771 * var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'}); 1772 * var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'}); 1773 * var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'}); 1774 * var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'}); 1775 * var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'}); 1776 * 1777 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1778 * fillOpacity: 1, 1779 * fillColor: 'yellow', 1780 * gradient: 'radial', 1781 * gradientSecondColor: 'blue', 1782 * gradientCX: function() { return cx.Value(); }, 1783 * gradientCY: function() { return cx.Value(); }, 1784 * gradientR: function() { return r.Value(); }, 1785 * gradientFX: function() { return fx.Value(); }, 1786 * gradientFY: function() { return fx.Value(); }, 1787 * gradientFR: function() { return fr.Value(); }, 1788 * gradientStartOffset: function() { return o1.Value(); }, 1789 * gradientEndOffset: function() { return o2.Value(); }, 1790 * hasInnerPoints: true 1791 * }); 1792 * 1793 * })(); 1794 * 1795 * </script><pre> 1796 * 1797 * 1798 * @type String 1799 * @name JXG.GeometryElement#gradient 1800 * @see JXG.GeometryElement#gradientSecondColor 1801 * @see JXG.GeometryElement#gradientSecondOpacity 1802 * @default null 1803 */ 1804 gradient: null, 1805 1806 /** 1807 * Angle (in radians) of the gradiant in case the gradient is of type 'linear'. 1808 * If the angle is 0, the first color is on the left and the second color is on the right. 1809 * If the angle is π/2 the first color is on top and the second color at the 1810 * bottom. 1811 * @type Number 1812 * @name JXG.GeometryElement#gradientAngle 1813 * @see JXG.GeometryElement#gradient 1814 * @default 0 1815 */ 1816 gradientAngle: 0, 1817 1818 /** 1819 * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. 1820 * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. 1821 * For radial gradients in canvas this is the value 'x1'. 1822 * Takes a value between 0 and 1. 1823 * @type Number 1824 * @name JXG.GeometryElement#gradientCX 1825 * @see JXG.GeometryElement#gradient 1826 * @see JXG.GeometryElement#gradientCY 1827 * @see JXG.GeometryElement#gradientR 1828 * @default 0.5 1829 */ 1830 gradientCX: 0.5, 1831 1832 /** 1833 * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. 1834 * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. 1835 * For radial gradients in canvas this is the value 'y1'. 1836 * Takes a value between 0 and 1. 1837 * @type Number 1838 * @name JXG.GeometryElement#gradientCY 1839 * @see JXG.GeometryElement#gradient 1840 * @see JXG.GeometryElement#gradientCX 1841 * @see JXG.GeometryElement#gradientR 1842 * @default 0.5 1843 */ 1844 gradientCY: 0.5, 1845 1846 /** 1847 * The gradientEndOffset attribute is a number (ranging from 0 to 1) which indicates where the second gradient stop is placed, 1848 * see the SVG specification for more information. 1849 * For linear gradients, this attribute represents a location along the gradient vector. 1850 * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle. 1851 * @type Number 1852 * @name JXG.GeometryElement#gradientEndOffset 1853 * @see JXG.GeometryElement#gradient 1854 * @see JXG.GeometryElement#gradientStartOffset 1855 * @default 1.0 1856 */ 1857 gradientEndOffset: 1.0, 1858 1859 /** 1860 * ‘fx’ and ‘fy’ define the focal point for the radial gradient. 1861 * The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy). 1862 * For radial gradients in canvas this is the value 'x0'. 1863 * Takes a value between 0 and 1. 1864 * @type Number 1865 * @name JXG.GeometryElement#gradientFX 1866 * @see JXG.GeometryElement#gradient 1867 * @see JXG.GeometryElement#gradientFY 1868 * @see JXG.GeometryElement#gradientFR 1869 * @default 0.5 1870 */ 1871 gradientFX: 0.5, 1872 1873 /** 1874 * y-coordinate of the circle center for the second color in case of gradient 'radial'. (The attribute fy in SVG) 1875 * For radial gradients in canvas this is the value 'y0'. 1876 * Takes a value between 0 and 1. 1877 * @type Number 1878 * @name JXG.GeometryElement#gradientFY 1879 * @see JXG.GeometryElement#gradient 1880 * @see JXG.GeometryElement#gradientFX 1881 * @see JXG.GeometryElement#gradientFR 1882 * @default 0.5 1883 */ 1884 gradientFY: 0.5, 1885 1886 /** 1887 * This attribute defines the radius of the start circle of the radial gradient. 1888 * The gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. 1889 * For radial gradients in canvas this is the value 'r0'. 1890 * Takes a value between 0 and 1. 1891 * @type Number 1892 * @name JXG.GeometryElement#gradientFR 1893 * @see JXG.GeometryElement#gradient 1894 * @see JXG.GeometryElement#gradientFX 1895 * @see JXG.GeometryElement#gradientFY 1896 * @default 0.0 1897 */ 1898 gradientFR: 0.0, 1899 1900 /** 1901 * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. 1902 * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. 1903 * For radial gradients in canvas this is the value 'r1'. 1904 * Takes a value between 0 and 1. 1905 * @type Number 1906 * @name JXG.GeometryElement#gradientR 1907 * @see JXG.GeometryElement#gradient 1908 * @see JXG.GeometryElement#gradientCX 1909 * @see JXG.GeometryElement#gradientCY 1910 * @default 0.5 1911 */ 1912 gradientR: 0.5, 1913 1914 /** 1915 * Second color for gradient. 1916 * @type String 1917 * @name JXG.GeometryElement#gradientSecondColor 1918 * @see JXG.GeometryElement#gradient 1919 * @see JXG.GeometryElement#gradientSecondOpacity 1920 * @default '#ffffff' 1921 */ 1922 gradientSecondColor: '#ffffff', 1923 1924 /** 1925 * Opacity of second gradient color. Takes a value between 0 and 1. 1926 * @type Number 1927 * @name JXG.GeometryElement#gradientSecondOpacity 1928 * @see JXG.GeometryElement#gradient 1929 * @see JXG.GeometryElement#gradientSecondColor 1930 * @default 1 1931 */ 1932 gradientSecondOpacity: 1, 1933 1934 /** 1935 * The gradientStartOffset attribute is a number (ranging from 0 to 1) which indicates where the first gradient stop is placed, 1936 * see the SVG specification for more information. 1937 * For linear gradients, this attribute represents a location along the gradient vector. 1938 * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle. 1939 * @type Number 1940 * @name JXG.GeometryElement#gradientStartOffset 1941 * @see JXG.GeometryElement#gradient 1942 * @see JXG.GeometryElement#gradientEndOffset 1943 * @default 0.0 1944 */ 1945 gradientStartOffset: 0.0, 1946 1947 /** 1948 * @type Boolean 1949 * @default true 1950 * @name JXG.GeometryElement#highlight 1951 */ 1952 highlight: true, 1953 1954 /** 1955 * The fill color of the given geometry element when the mouse is pointed over it. 1956 * @type String 1957 * @name JXG.GeometryElement#highlightFillColor 1958 * @see JXG.GeometryElement#fillColor 1959 * @see JXG.GeometryElement#fillOpacity 1960 * @see JXG.GeometryElement#highlightFillOpacity 1961 * @default 'none' 1962 */ 1963 highlightFillColor: 'none', 1964 1965 /** 1966 * Opacity for fill color when the object is highlighted. 1967 * @type Number 1968 * @name JXG.GeometryElement#highlightFillOpacity 1969 * @see JXG.GeometryElement#fillColor 1970 * @see JXG.GeometryElement#highlightFillColor 1971 * @see JXG.GeometryElement#fillOpacity 1972 * @default 1 1973 */ 1974 highlightFillOpacity: 1, 1975 1976 /** 1977 * The stroke color of the given geometry element when the user moves the mouse over it. 1978 * @type String 1979 * @name JXG.GeometryElement#highlightStrokeColor 1980 * @see JXG.GeometryElement#strokeColor 1981 * @see JXG.GeometryElement#strokeWidth 1982 * @see JXG.GeometryElement#strokeOpacity 1983 * @see JXG.GeometryElement#highlightStrokeOpacity 1984 * @default '#c3d9ff' 1985 */ 1986 highlightStrokeColor: '#c3d9ff', 1987 1988 /** 1989 * Opacity for stroke color when the object is highlighted. 1990 * @type Number 1991 * @name JXG.GeometryElement#highlightStrokeOpacity 1992 * @see JXG.GeometryElement#strokeColor 1993 * @see JXG.GeometryElement#highlightStrokeColor 1994 * @see JXG.GeometryElement#strokeWidth 1995 * @see JXG.GeometryElement#strokeOpacity 1996 * @default 1 1997 */ 1998 highlightStrokeOpacity: 1, 1999 2000 /** 2001 * Width of the element's stroke when the mouse is pointed over it. 2002 * @type Number 2003 * @name JXG.GeometryElement#highlightStrokeWidth 2004 * @see JXG.GeometryElement#strokeColor 2005 * @see JXG.GeometryElement#highlightStrokeColor 2006 * @see JXG.GeometryElement#strokeOpacity 2007 * @see JXG.GeometryElement#highlightStrokeOpacity 2008 * @see JXG.GeometryElement#highlightFillColor 2009 * @default 2 2010 */ 2011 highlightStrokeWidth: 2, 2012 2013 /** 2014 * @name JXG.GeometryElement#isLabel 2015 * @default false 2016 * @private 2017 */ 2018 // By default, an element is not a label. Do not change this. 2019 isLabel: false, 2020 2021 /** 2022 * Display layer which will contain the element. 2023 * @name JXG.GeometryElement#layer 2024 * @see JXG.Options#layer 2025 * @default See {@link JXG.Options#layer} 2026 */ 2027 layer: 0, 2028 2029 /** 2030 * Line endings (linecap) of a stroke element, i.e. line, circle, curve. 2031 * Possible values are: 2032 * <ul> 2033 * <li> 'butt', 2034 * <li> 'round', 2035 * <li> 'square'. 2036 * </ul> 2037 * Not available for VML renderer. 2038 * 2039 * @name JXG.GeometryElement#lineCap 2040 * @type String 2041 * @default 'butt' 2042 */ 2043 lineCap: 'butt', 2044 2045 /** 2046 * If this is set to true, the element is updated in every update 2047 * call of the board. If set to false, the element is updated only after 2048 * zoom events or more generally, when the bounding box has been changed. 2049 * Examples for the latter behavior should be axes. 2050 * @type Boolean 2051 * @default true 2052 * @see JXG.GeometryElement#needsRegularUpdate 2053 * @name JXG.GeometryElement#needsRegularUpdate 2054 */ 2055 needsRegularUpdate: true, 2056 2057 /** 2058 * If some size of an element is controlled by a function, like the circle radius 2059 * or segments of fixed length, this attribute controls what happens if the value 2060 * is negative. By default, the absolute value is taken. If true, the maximum 2061 * of 0 and the value is used. 2062 * 2063 * @type Boolean 2064 * @default false 2065 * @name JXG.GeometryElement#nonnegativeOnly 2066 * @example 2067 * var slider = board.create('slider', [[4, -3], [4, 3], [-4, 1, 4]], { name: 'a'}); 2068 * var circle = board.create('circle', [[-1, 0], 1], { 2069 * nonnegativeOnly: true 2070 * }); 2071 * circle.setRadius('a'); // Use JessieCode 2072 * var seg = board.create('segment', [[-4, 3], [0, 3], () => slider.Value()], { 2073 * point1: {visible: true}, 2074 * point2: {visible: true}, 2075 * nonnegativeOnly: true 2076 * }); 2077 * 2078 * </pre><div id="JXG9cb76224-1f78-4488-b20f-800788768bc9" class="jxgbox" style="width: 300px; height: 300px;"></div> 2079 * <script type="text/javascript"> 2080 * (function() { 2081 * var board = JXG.JSXGraph.initBoard('JXG9cb76224-1f78-4488-b20f-800788768bc9', 2082 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 2083 * var slider = board.create('slider', [[4, -3], [4, 3], [-4, 1, 4]], { name: 'a'}); 2084 * var circle = board.create('circle', [[-1, 0], 1], { 2085 * nonnegativeOnly: true 2086 * }); 2087 * circle.setRadius('a'); // Use JessieCode 2088 * var seg = board.create('segment', [[-4, 3], [0, 3], () => slider.Value()], { 2089 * point1: {visible: true}, 2090 * point2: {visible: true}, 2091 * nonnegativeOnly: true 2092 * }); 2093 * 2094 * })(); 2095 * 2096 * </script><pre> 2097 * 2098 */ 2099 nonnegativeOnly: false, 2100 2101 /** 2102 * Precision options for JSXGraph elements. 2103 * This attributes takes either the value 'inherit' or an object of the form: 2104 * <pre> 2105 * precision: { 2106 * touch: 30, 2107 * mouse: 4, 2108 * pen: 4 2109 * } 2110 * </pre> 2111 * 2112 * In the first case, the global, JSXGraph-wide values of JXGraph.Options.precision 2113 * are taken. 2114 * 2115 * @type {String|Object} 2116 * @name JXG.GeometryElement#precision 2117 * @see JXG.Options#precision 2118 * @default 'inherit' 2119 */ 2120 precision: 'inherit', 2121 2122 /** 2123 * A private element will be inaccessible in certain environments, e.g. a graphical user interface. 2124 * 2125 * @name JXG.GeometryElement#priv 2126 * @type Boolean 2127 * @default false 2128 */ 2129 priv: false, 2130 2131 /** 2132 * Determines whether two-finger manipulation may rotate this object. 2133 * If set to false, the object can only be scaled and translated. 2134 * <p> 2135 * In case the element is a polygon or line and it has the attribute "rotatable:false", 2136 * moving the element with two fingers results in a rotation or translation. 2137 * <p> 2138 * If an element is set to be neither scalable nor rotatable, it can only be translated. 2139 * <p> 2140 * In case of a polygon, scaling is only possible if <i>no</i> vertex has snapToGrid or snapToPoints 2141 * enabled and no vertex is fixed by some other constraint. Also, the polygon itself has to have 2142 * snapToGrid disabled. 2143 * 2144 * @type Boolean 2145 * @default true 2146 * @name JXG.GeometryElement#rotatable 2147 * @see JXG.GeometryElement#scalable 2148 */ 2149 rotatable: true, 2150 2151 /** 2152 * Determines whether two-finger manipulation of this object may change its size. 2153 * If set to false, the object is only rotated and translated. 2154 * <p> 2155 * In case the element is a horizontal or vertical line having ticks, "scalable:true" 2156 * enables zooming of the board by dragging ticks lines. This feature is enabled, 2157 * for the ticks element of the line element the attribute "fixed" has to be false 2158 * and the line element's scalable attribute has to be true. 2159 * <p> 2160 * In case the element is a polygon or line and it has the attribute "scalable:false", 2161 * moving the element with two fingers results in a rotation or translation. 2162 * <p> 2163 * If an element is set to be neither scalable nor rotatable, it can only be translated. 2164 * <p> 2165 * In case of a polygon, scaling is only possible if <i>no</i> vertex has snapToGrid or snapToPoints 2166 * enabled and no vertex is fixed by some other constraint. Also, the polygon itself has to have 2167 * snapToGrid disabled. 2168 * 2169 * @type Boolean 2170 * @default true 2171 * @name JXG.GeometryElement#scalable 2172 * @see JXG.Ticks#fixed 2173 * @see JXG.GeometryElement#rotatable 2174 */ 2175 scalable: true, 2176 2177 /** 2178 * If enabled:true the (stroke) element will get a customized shadow. 2179 * <p> 2180 * Customize <i>color</i> and <i>opacity</i>: 2181 * If the object's RGB stroke color is <tt>[r,g,b]</tt> and its opacity is <tt>op</i>, and 2182 * the shadow parameters <i>color</i> is given as <tt>[r', g', b']</tt> and <i>opacity</i> as <tt>op'</tt> 2183 * the shadow will receive the RGB color 2184 * <center> 2185 * <tt>[blend*r + r', blend*g + g', blend*b + b'] </tt> 2186 * </center> 2187 * and its opacity will be equal to <tt>op * op'</tt>. 2188 * Further, the parameters <i>blur</i> and <i>offset</i> can be adjusted. 2189 * <p> 2190 * This attribute is only available with SVG, not with canvas. 2191 * 2192 * @type Object 2193 * @name JXG.GeometryElement#shadow 2194 * @default shadow: { 2195 * enabled: false, 2196 * color: [0, 0, 0], 2197 * opacity: 1, 2198 * blur: 3, 2199 * blend: 0.1, 2200 * offset: [5, 5] 2201 * } 2202 * 2203 * @example 2204 * board.options.line.strokeWidth = 2 2205 * // No shadow 2206 * var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false}); 2207 * 2208 * // Default shadow 2209 * var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true}); 2210 * 2211 * // No shadow 2212 * var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}}); 2213 * 2214 * // Shadow uses same color as line 2215 * var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue', 2216 * shadow: {enabled: true, color: '#000000', blend: 1} 2217 * }); 2218 * 2219 * // Shadow color as a mixture between black and the line color, additionally set opacity 2220 * var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue', 2221 * shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5} 2222 * }); 2223 * 2224 * // Use different value for blur and offset [dx, dy] 2225 * var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue', 2226 * shadow: {enabled: true, offset:[0, 25], blur: 6} 2227 * }); 2228 * 2229 * </pre><div id="JXG1185a9fa-0fa5-425f-8c15-55b56e1be958" class="jxgbox" style="width: 300px; height: 300px;"></div> 2230 * <script type="text/javascript"> 2231 * (function() { 2232 * var board = JXG.JSXGraph.initBoard('JXG1185a9fa-0fa5-425f-8c15-55b56e1be958', 2233 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 2234 * board.options.line.strokeWidth = 2 2235 * // No shadow 2236 * var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false}); 2237 * 2238 * // Default shadow 2239 * var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true}); 2240 * 2241 * // No shadow 2242 * var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}}); 2243 * 2244 * // Shadow uses same color as line 2245 * var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue', 2246 * shadow: {enabled: true, color: '#000000', blend: 1} 2247 * }); 2248 * 2249 * // Shadow color as a mixture between black and the line color, additionally set opacity 2250 * var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue', 2251 * shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5} 2252 * }); 2253 * 2254 * // Use different value for blur and offset [dx, dy] 2255 * var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue', 2256 * shadow: {enabled: true, offset:[0, 25], blur: 6} 2257 * }); 2258 * 2259 * })(); 2260 * 2261 * </script><pre> 2262 * 2263 */ 2264 shadow: { 2265 enabled: false, 2266 color: [0, 0, 0], 2267 opacity: 1, 2268 blur: 3, 2269 blend: 0.1, 2270 offset: [5, 5] 2271 }, 2272 2273 /** 2274 * Snaps the element or its parents to the grid. Currently only relevant for points, circles, 2275 * and lines. Points are snapped to grid directly, on circles and lines it's only the parent 2276 * points that are snapped 2277 * @type Boolean 2278 * @default false 2279 * @name JXG.GeometryElement#snapToGrid 2280 */ 2281 snapToGrid: false, 2282 2283 /** 2284 * The stroke color of the given geometry element. 2285 * @type String 2286 * @name JXG.GeometryElement#strokeColor 2287 * @see JXG.GeometryElement#highlightStrokeColor 2288 * @see JXG.GeometryElement#strokeWidth 2289 * @see JXG.GeometryElement#strokeOpacity 2290 * @see JXG.GeometryElement#highlightStrokeOpacity 2291 * @default JXG.palette.blue 2292 */ 2293 strokeColor: Color.palette.blue, 2294 2295 /** 2296 * Opacity for element's stroke color. 2297 * @type Number 2298 * @name JXG.GeometryElement#strokeOpacity 2299 * @see JXG.GeometryElement#strokeColor 2300 * @see JXG.GeometryElement#highlightStrokeColor 2301 * @see JXG.GeometryElement#strokeWidth 2302 * @see JXG.GeometryElement#highlightStrokeOpacity 2303 * @default 1 2304 */ 2305 strokeOpacity: 1, 2306 2307 /** 2308 * Width of the element's stroke. 2309 * @type Number 2310 * @name JXG.GeometryElement#strokeWidth 2311 * @see JXG.GeometryElement#strokeColor 2312 * @see JXG.GeometryElement#highlightStrokeColor 2313 * @see JXG.GeometryElement#strokeOpacity 2314 * @see JXG.GeometryElement#highlightStrokeOpacity 2315 * @default 2 2316 */ 2317 strokeWidth: 2, 2318 2319 /** 2320 * Controls if an element can get the focus with the tab key. 2321 * tabindex corresponds to the HTML attribute of the same name. 2322 * See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">description at MDN</a>. 2323 * The additional value "null" completely disables focus of an element. 2324 * The value will be ignored if keyboard control of the board is not enabled or 2325 * the element is fixed or not visible. 2326 * 2327 * @name JXG.GeometryElement#tabindex 2328 * @type Number 2329 * @default 0 2330 * @see JXG.Board#keyboard 2331 * @see JXG.GeometryElement#fixed 2332 * @see JXG.GeometryElement#visible 2333 */ 2334 tabindex: 0, 2335 2336 /** 2337 * If true the element will be traced, i.e. on every movement the element will be copied 2338 * to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements. 2339 * 2340 * The calling of element.setAttribute({trace:false}) additionally 2341 * deletes all traces of this element. By calling 2342 * element.setAttribute({trace:'pause'}) 2343 * the removal of already existing traces can be prevented. 2344 * 2345 * The visual appearance of the trace can be influenced by {@link JXG.GeometryElement#traceAttributes}. 2346 * 2347 * @see JXG.GeometryElement#clearTrace 2348 * @see JXG.GeometryElement#traces 2349 * @see JXG.GeometryElement#numTraces 2350 * @see JXG.GeometryElement#traceAttributes 2351 * @type Boolean|String 2352 * @default false 2353 * @name JXG.GeometryElement#trace 2354 */ 2355 trace: false, 2356 2357 /** 2358 * Extra visual properties for traces of an element 2359 * @type Object 2360 * @see JXG.GeometryElement#trace 2361 * @name JXG.GeometryElement#traceAttributes 2362 * @default <tt>{}</tt> 2363 * 2364 * @example 2365 * JXG.Options.elements.traceAttributes = { 2366 * size: 2 2367 * }; 2368 * 2369 * const board = JXG.JSXGraph.initBoard(BOARDID, { 2370 * boundingbox: [-4, 4, 4, -4], 2371 * keepaspectratio: true 2372 * }); 2373 * 2374 * var p = board.create('point', [0.0, 2.0], { 2375 * trace: true, 2376 * size: 10, 2377 * traceAttributes: { 2378 * color: 'black', 2379 * face: 'x' 2380 * } 2381 * }); 2382 * 2383 * </pre><div id="JXG504889cb-bb6f-4b65-85db-3ad555c08bcf" class="jxgbox" style="width: 300px; height: 300px;"></div> 2384 * <script type="text/javascript"> 2385 * (function() { 2386 * JXG.Options.elements.traceAttributes = { 2387 * size: 2 2388 * }; 2389 * var board = JXG.JSXGraph.initBoard('JXG504889cb-bb6f-4b65-85db-3ad555c08bcf', 2390 * {boundingbox: [-4, 4, 4, -4], axis: true, showcopyright: false, shownavigation: true, showClearTraces: true}); 2391 * 2392 * var p = board.create('point', [0.0, 2.0], { 2393 * trace: true, 2394 * size: 10, 2395 * traceAttributes: { 2396 * color: 'black', 2397 * face: 'x' 2398 * } 2399 * }); 2400 * 2401 * })(); 2402 * 2403 * </script><pre> 2404 * 2405 */ 2406 traceAttributes: {}, 2407 2408 /** 2409 * Transition duration (in milliseconds) for certain cahnges of properties like color and opacity. 2410 * The properties can be set in the attribute transitionProperties 2411 * Works in SVG renderer, only. 2412 * @type Number 2413 * @name JXG.GeometryElement#transitionDuration 2414 * @see JXG.GeometryElement#transitionProperties 2415 * @see JXG.GeometryElement#strokeColor 2416 * @see JXG.GeometryElement#highlightStrokeColor 2417 * @see JXG.GeometryElement#strokeOpacity 2418 * @see JXG.GeometryElement#highlightStrokeOpacity 2419 * @see JXG.GeometryElement#fillColor 2420 * @see JXG.GeometryElement#highlightFillColor 2421 * @see JXG.GeometryElement#fillOpacity 2422 * @see JXG.GeometryElement#highlightFillOpacity 2423 * @default 100 {@link JXG.Options.elements#transitionDuration} 2424 */ 2425 transitionDuration: 100, 2426 2427 /** 2428 * Properties which change smoothly in the time set in transitionDuration. 2429 * Possible values are 2430 * ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width', 'width', 'height', 'rx', 'ry'] 2431 * (and maybe more) for geometry elements and 2432 * ['color', 'opacity', 'all'] for HTML texts. 2433 * 2434 * @type Array 2435 * @name JXG.GeometryElement#transitionProperties 2436 * @see JXG.GeometryElement#transitionDuration 2437 * 2438 * 2439 * @example 2440 * var p1 = board.create("point", [0, 2], { 2441 * name: "A", 2442 * highlightStrokeWidth: 10, 2443 * transitionDuration: 1000, 2444 * transitionProperties: ['width', 'height', 'stroke-width', 2445 * 'fill', 'fill-opacity', 'rx', 'ry', 'stroke', 'stroke-opacity'] }); 2446 * 2447 * </pre><div id="JXGdf5230a1-5870-43db-b6ff-4d5b2f5b786b" class="jxgbox" style="width: 300px; height: 300px;"></div> 2448 * <script type="text/javascript"> 2449 * (function() { 2450 * var board = JXG.JSXGraph.initBoard('JXGdf5230a1-5870-43db-b6ff-4d5b2f5b786b', 2451 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 2452 * var p1 = board.create("point", [0, 2], { 2453 * name: "A", 2454 * highlightStrokeWidth: 20, 2455 * transitionDuration: 1000, 2456 * transitionProperties: ['width', 'height', 'stroke-width', 2457 * 'fill', 'fill-opacity', 'rx', 'ry', 'stroke', 'stroke-opacity'] }); 2458 * 2459 * })(); 2460 * 2461 * </script><pre> 2462 * 2463 */ 2464 transitionProperties: ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width'], 2465 2466 /** 2467 * If false the element won't be visible on the board, otherwise it is shown. 2468 * @type Boolean 2469 * @name JXG.GeometryElement#visible 2470 * @see JXG.GeometryElement#hideElement 2471 * @see JXG.GeometryElement#showElement 2472 * @default true 2473 */ 2474 visible: true, 2475 2476 /** 2477 * Set individual viewport for an element. If not set to 'inherit', to 2478 * use the board-wide viewport, an array of the form '[left, top, right, bottom]' has to be given. 2479 * 2480 * @type {Array|String} 2481 * @name JXG.GeometryElement#viewport 2482 * @default 'inherit' 2483 * @see JXG.Board#viewport 2484 */ 2485 viewport: 'inherit', 2486 2487 /** 2488 * If true a label will display the element's name. 2489 * Using this to suppress labels is more efficient than visible:false. 2490 * 2491 * @name JXG.GeometryElement#withLabel 2492 * @type Boolean 2493 * @default false 2494 */ 2495 withLabel: false 2496 2497 // close the meta tag 2498 /**#@-*/ 2499 }, 2500 2501 /* 2502 * Generic options used by {@link JXG.Ticks} 2503 */ 2504 ticks: { 2505 /**#@+ 2506 * @visprop 2507 */ 2508 2509 /** 2510 * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the 2511 * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0). 2512 * The third parameter is a null, number or a string. In the latter two cases, this value is taken. 2513 * Returns a string. 2514 * 2515 * @type function 2516 * @name Ticks#generateLabelText 2517 * 2518 * @example 2519 * const board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-10, 10, 10, -10], axis: true, 2520 * defaultAxes: { 2521 * x: { 2522 * margin: -4, 2523 * ticks: { 2524 * minTicksDistance: 0, 2525 * minorTicks:4, 2526 * ticksDistance: 3, 2527 * scale: Math.PI, 2528 * scaleSymbol: 'π', 2529 * insertTicks: true 2530 * } 2531 * }, 2532 * y: {} 2533 * } 2534 * }); 2535 * 2536 * // Generate a logarithmic labelling of the vertical axis. 2537 * board.defaultAxes.y.ticks[0].generateLabelText = function (tick, zero) { 2538 * var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2])), 2539 * distance, labelText; 2540 * return this.formatLabelText(value); 2541 * }; 2542 * 2543 * </pre><div id="JXG3d2203ee-a797-416a-a33c-409581fafdd7" class="jxgbox" style="width: 300px; height: 300px;"></div> 2544 * <script type="text/javascript"> 2545 * (function() { 2546 * var board = JXG.JSXGraph.initBoard('JXG3d2203ee-a797-416a-a33c-409581fafdd7', 2547 * {boundingbox: [-10, 10, 10, -10], axis: true, showcopyright: false, shownavigation: false, 2548 * defaultAxes: { 2549 * x: { 2550 * margin: -4, 2551 * ticks: { 2552 * minTicksDistance: 0, 2553 * minorTicks:4, 2554 * ticksDistance: 3, 2555 * scale: Math.PI, 2556 * scaleSymbol: 'π', 2557 * insertTicks: true 2558 * } 2559 * }, 2560 * y: {} 2561 * } 2562 * }); 2563 * 2564 * // Generate a logarithmic labelling of the vertical axis. 2565 * board.defaultAxes.y.ticks[0].generateLabelText = function (tick, zero) { 2566 * var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2])), 2567 * distance, labelText; 2568 * return this.formatLabelText(value); 2569 * }; 2570 * 2571 * })(); 2572 * 2573 * </script><pre> 2574 * 2575 */ 2576 generateLabelText: null, 2577 2578 /** 2579 * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the 2580 * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0). 2581 * 2582 * @deprecated Use {@link JGX.Options@generateLabelText} 2583 * @type function 2584 * @name Ticks#generateLabelValue 2585 */ 2586 generateLabelValue: null, 2587 2588 /** 2589 * Draw labels yes/no 2590 * 2591 * @type Boolean 2592 * @name Ticks#drawLabels 2593 * @default false 2594 */ 2595 drawLabels: false, 2596 2597 /** 2598 * Attributes for the ticks labels 2599 * 2600 * @name Ticks#label 2601 * @type Object 2602 * @default <tt>{}</tt> 2603 * 2604 */ 2605 label: { 2606 }, 2607 2608 /** 2609 * Format tick labels that were going to have scientific notation 2610 * like 5.00e+6 to look like 5•10⁶. 2611 * 2612 * @example 2613 * var board = JXG.JSXGraph.initBoard("jxgbox", { 2614 * boundingbox: [-500000, 500000, 500000, -500000], 2615 * axis: true, 2616 * defaultAxes: { 2617 * x: { 2618 * scalable: true, 2619 * ticks: { 2620 * beautifulScientificTickLabels: true 2621 * }, 2622 * }, 2623 * y: { 2624 * scalable: true, 2625 * ticks: { 2626 * beautifulScientificTickLabels: true 2627 * }, 2628 * } 2629 * }, 2630 * }); 2631 * 2632 * </pre><div id="JXGc1e46cd1-e025-4002-80aa-b450869fdaa2" class="jxgbox" style="width: 300px; height: 300px;"></div> 2633 * <script type="text/javascript"> 2634 * (function() { 2635 * var board = JXG.JSXGraph.initBoard('JXGc1e46cd1-e025-4002-80aa-b450869fdaa2', { 2636 * boundingbox: [-500000, 500000, 500000, -500000], 2637 * showcopyright: false, shownavigation: false, 2638 * axis: true, 2639 * defaultAxes: { 2640 * x: { 2641 * scalable: true, 2642 * ticks: { 2643 * beautifulScientificTickLabels: true 2644 * }, 2645 * }, 2646 * y: { 2647 * scalable: true, 2648 * ticks: { 2649 * beautifulScientificTickLabels: true 2650 * }, 2651 * } 2652 * }, 2653 * }); 2654 * 2655 * })(); 2656 * 2657 * </script><pre> 2658 * 2659 * @name Ticks#beautifulScientificTickLabels 2660 * @type Boolean 2661 * @default false 2662 */ 2663 beautifulScientificTickLabels: false, 2664 2665 /** 2666 * Use the unicode character 0x2212, i.e. the HTML entity − as minus sign. 2667 * That is −1 instead of -1. 2668 * 2669 * @type Boolean 2670 * @name Ticks#useUnicodeMinus 2671 * @default true 2672 */ 2673 useUnicodeMinus: true, 2674 2675 /** 2676 * Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2, 2677 * and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent 2678 * line is of type axis. 2679 * 2680 * @type String 2681 * @name Ticks#anchor 2682 * @default 'left' 2683 * 2684 * @example 2685 * var li = board.create('segment', [[-4, -3], [4, 2]]); 2686 * var t = board.create('ticks', [li], { 2687 * // drawZero: true, 2688 * anchor: 'left', 2689 * drawLabels: true, 2690 * minorTicks: 0, 2691 * label: { 2692 * anchorX: 'middle', 2693 * anchorY: 'top', 2694 * offset: [0, -5] 2695 * } 2696 * }); 2697 * 2698 * 2699 * </pre><div id="JXG3dd23f77-a31d-4649-b0f0-7472722158d8" class="jxgbox" style="width: 300px; height: 300px;"></div> 2700 * <script type="text/javascript"> 2701 * (function() { 2702 * var board = JXG.JSXGraph.initBoard('JXG3dd23f77-a31d-4649-b0f0-7472722158d8', 2703 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 2704 * var li = board.create('segment', [[-4, -3], [4, 2]]); 2705 * var t = board.create('ticks', [li], { 2706 * // drawZero: true, 2707 * anchor: 'left', 2708 * drawLabels: true, 2709 * minorTicks: 0, 2710 * label: { 2711 * anchorX: 'middle', 2712 * anchorY: 'top', 2713 * offset: [0, -5] 2714 * } 2715 * }); 2716 * 2717 * 2718 * })(); 2719 * 2720 * </script><pre> 2721 * 2722 * @example 2723 * var li = board.create('segment', [[-4, -3], [4, 2]]); 2724 * var t = board.create('ticks', [li], { 2725 * drawZero: true, 2726 * anchor: 'middle', 2727 * drawLabels: true, 2728 * minorTicks: 0, 2729 * label: { 2730 * anchorX: 'middle', 2731 * anchorY: 'top', 2732 * offset: [0, -5] 2733 * } 2734 * }); 2735 * 2736 * </pre><div id="JXG430914fd-4e12-44de-b510-e3cc2fd473e0" class="jxgbox" style="width: 300px; height: 300px;"></div> 2737 * <script type="text/javascript"> 2738 * (function() { 2739 * var board = JXG.JSXGraph.initBoard('JXG430914fd-4e12-44de-b510-e3cc2fd473e0', 2740 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 2741 * var li = board.create('segment', [[-4, -3], [4, 2]]); 2742 * var t = board.create('ticks', [li], { 2743 * drawZero: true, 2744 * anchor: 'middle', 2745 * drawLabels: true, 2746 * minorTicks: 0, 2747 * label: { 2748 * anchorX: 'middle', 2749 * anchorY: 'top', 2750 * offset: [0, -5] 2751 * } 2752 * }); 2753 * 2754 * })(); 2755 * 2756 * </script><pre> 2757 * 2758 */ 2759 anchor: 'left', 2760 2761 /** 2762 * Draw the zero tick, that lies at line.point1? 2763 * 2764 * @type Boolean 2765 * @name Ticks#drawZero 2766 * @default false 2767 * 2768 * @example 2769 * var li = board.create('segment', [[-4, 2], [4, 2]]); 2770 * var t = board.create('ticks', [li], { 2771 * drawZero: false, 2772 * anchor: 'middle', 2773 * drawLabels: true, 2774 * minorTicks: 0, 2775 * label: { 2776 * anchorX: 'middle', 2777 * anchorY: 'top', 2778 * offset: [0, -5] 2779 * } 2780 * }); 2781 * 2782 * var li2 = board.create('segment', [[-4, -2], [4, -2]]); 2783 * var t2 = board.create('ticks', [li2], { 2784 * drawZero: true, 2785 * anchor: 'middle', 2786 * drawLabels: true, 2787 * minorTicks: 0, 2788 * label: { 2789 * anchorX: 'middle', 2790 * anchorY: 'top', 2791 * offset: [0, -5] 2792 * } 2793 * }); 2794 * 2795 * </pre><div id="JXG91584dc4-0ca8-4b3e-841c-c877f2ccdcf1" class="jxgbox" style="width: 300px; height: 300px;"></div> 2796 * <script type="text/javascript"> 2797 * (function() { 2798 * var board = JXG.JSXGraph.initBoard('JXG91584dc4-0ca8-4b3e-841c-c877f2ccdcf1', 2799 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 2800 * var li = board.create('segment', [[-4, 2], [4, 2]]); 2801 * var t = board.create('ticks', [li], { 2802 * drawZero: false, 2803 * anchor: 'middle', 2804 * drawLabels: true, 2805 * minorTicks: 0, 2806 * label: { 2807 * anchorX: 'middle', 2808 * anchorY: 'top', 2809 * offset: [0, -5] 2810 * } 2811 * }); 2812 * 2813 * var li2 = board.create('segment', [[-4, -2], [4, -2]]); 2814 * var t2 = board.create('ticks', [li2], { 2815 * drawZero: true, 2816 * anchor: 'middle', 2817 * drawLabels: true, 2818 * minorTicks: 0, 2819 * label: { 2820 * anchorX: 'middle', 2821 * anchorY: 'top', 2822 * offset: [0, -5] 2823 * } 2824 * }); 2825 * 2826 * })(); 2827 * 2828 * </script><pre> 2829 * 2830 */ 2831 drawZero: false, 2832 2833 /** 2834 * Let JSXGraph determine the distance between ticks automatically. 2835 * If <tt>true</tt>, the attribute <tt>ticksDistance</tt> is ignored. 2836 * The distance between ticks is affected by the size of the board and 2837 * the attribute <tt>minTicksDistance</tt> (in pixel). 2838 * 2839 * @type Boolean 2840 * @name Ticks#insertTicks 2841 * @see Ticks#ticksDistance 2842 * @see Ticks#minTicksDistance 2843 * @default false 2844 * @example 2845 * // Create an axis providing two coord pairs. 2846 * var p1 = board.create('point', [0, 0]); 2847 * var p2 = board.create('point', [50, 25]); 2848 * var l1 = board.create('line', [p1, p2]); 2849 * var t = board.create('ticks', [l1], { 2850 * insertTicks: true, 2851 * majorHeight: -1, 2852 * label: { 2853 * offset: [4, -9] 2854 * }, 2855 * drawLabels: true 2856 * }); 2857 * </pre><div class="jxgbox" id="JXG2f6fb842-40bd-4223-aa28-3e9369d2097f" style="width: 300px; height: 300px;"></div> 2858 * <script type="text/javascript"> 2859 * (function () { 2860 * var board = JXG.JSXGraph.initBoard('JXG2f6fb842-40bd-4223-aa28-3e9369d2097f', { 2861 * boundingbox: [-100, 70, 70, -100], axis: true, showcopyright: false, shownavigation: true}); 2862 * var p1 = board.create('point', [0, 0]); 2863 * var p2 = board.create('point', [50, 25]); 2864 * var l1 = board.create('line', [p1, p2]); 2865 * var t = board.create('ticks', [l1], {insertTicks: true, majorHeight: -1, label: {offset: [4, -9]}, drawLabels: true}); 2866 * })(); 2867 * </script><pre> 2868 */ 2869 insertTicks: false, 2870 2871 /** 2872 * Minimum distance in pixel of equidistant ticks in case insertTicks==true. 2873 * @name Ticks#minTicksDistance 2874 * @type Number 2875 * @default 10 2876 * @see Ticks#insertTicks 2877 */ 2878 minTicksDistance: 10, 2879 2880 /** 2881 * Total height of a minor tick. If negative the full height of the board is taken. 2882 * 2883 * @type Number 2884 * @name Ticks#minorHeight 2885 * @default 4 2886 */ 2887 minorHeight: 4, 2888 2889 /** 2890 * Total height of a major tick. If negative the full height of the board is taken. 2891 * 2892 * @type Number 2893 * @name Ticks#majorHeight 2894 * @default 10 2895 */ 2896 majorHeight: 10, 2897 2898 /** 2899 * Decides in which direction minor ticks are visible. Possible values are either the constants 2900 * 0=false or 1=true or a function returning 0 or 1. 2901 * 2902 * In case of [0,1] the tick is only visible to the right of the line. In case of 2903 * [1,0] the tick is only visible to the left of the line. 2904 * 2905 * @type Array 2906 * @name Ticks#tickEndings 2907 * @see Ticks#majorTickEndings 2908 * @default [1, 1] 2909 */ 2910 tickEndings: [1, 1], 2911 2912 /** 2913 * Decides in which direction major ticks are visible. Possible values are either the constants 2914 * 0=false or 1=true or a function returning 0 or 1. 2915 * 2916 * In case of [0,1] the tick is only visible to the right of the line. In case of 2917 * [1,0] the tick is only visible to the left of the line. 2918 * 2919 * @example 2920 * var board = JXG.JSXGraph.initBoard("jxgbox", { 2921 * boundingbox: [-5, 5, 5, -5], 2922 * axis: true, 2923 * defaultAxes: { 2924 * x: { 2925 * ticks: { 2926 * majorTickEndings: [1, 0], 2927 * ignoreInfiniteTickEndings: false 2928 * } 2929 * }, 2930 * y: { 2931 * ticks: { 2932 * majorTickEndings: [0, 1], 2933 * ignoreInfiniteTickEndings: false 2934 * } 2935 * } 2936 * } 2937 * }); 2938 * 2939 * var p = board.create('point', [1, 1]); 2940 * var l = board.create('line', [1, -1, 1]); 2941 * 2942 * </pre><div id="JXGf9ccb731-7a73-44d1-852e-f9c9c405a9d1" class="jxgbox" style="width: 300px; height: 300px;"></div> 2943 * <script type="text/javascript"> 2944 * (function() { 2945 * var board = JXG.JSXGraph.initBoard('JXGf9ccb731-7a73-44d1-852e-f9c9c405a9d1', 2946 * { showcopyright: false, shownavigation: false, 2947 * boundingbox: [-5, 5, 5, -5], 2948 * axis: true, 2949 * defaultAxes: { 2950 * x: { 2951 * ticks: { 2952 * majorTickEndings: [1, 0], 2953 * ignoreInfiniteTickEndings: false 2954 * } 2955 * }, 2956 * y: { 2957 * ticks: { 2958 * majorTickEndings: [0, 1], 2959 * ignoreInfiniteTickEndings: false 2960 * } 2961 * } 2962 * } 2963 * }); 2964 * 2965 * var p = board.create('point', [1, 1]); 2966 * var l = board.create('line', [1, -1, 1]); 2967 * 2968 * })(); 2969 * 2970 * </script><pre> 2971 * 2972 * @type Array 2973 * @name Ticks#majorTickEndings 2974 * @see Ticks#tickEndings 2975 * @see Ticks#ignoreInfiniteTickEndings 2976 * @default [1, 1] 2977 */ 2978 majorTickEndings: [1, 1], 2979 2980 /** 2981 * If true, ignore the tick endings attribute for infinite (full height) ticks. 2982 * This affects major and minor ticks. 2983 * 2984 * @type Boolean 2985 * @name Ticks#ignoreInfiniteTickEndings 2986 * @see Ticks#tickEndings 2987 * @see Ticks#majorTickEndings 2988 * @default true 2989 */ 2990 ignoreInfiniteTickEndings: true, 2991 2992 /** 2993 * The number of minor ticks between two major ticks. 2994 * @type Number 2995 * @name Ticks#minorTicks 2996 * @default 4 2997 */ 2998 minorTicks: 4, 2999 3000 /** 3001 * By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only. 3002 * If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks 3003 * between two labels. 3004 * 3005 * @type {Number|Boolean} 3006 * @name Ticks#ticksPerLabel 3007 * @default false 3008 * 3009 * @example 3010 * const board = JXG.JSXGraph.initBoard('jxgbox', { 3011 * boundingbox: [-4, 4, 4, -4], 3012 * axis: true, 3013 * defaultAxes: { 3014 * x: { 3015 * ticks: { 3016 * minorTicks: 7, 3017 * ticksPerLabel: 4, 3018 * minorHeight: 20, 3019 * } 3020 * }, 3021 * y: { 3022 * ticks: { 3023 * minorTicks: 3, 3024 * ticksPerLabel: 2, 3025 * minorHeight: 20 3026 * } 3027 * } 3028 * } 3029 * }); 3030 * 3031 * </pre><div id="JXGbc45a421-c867-4b0a-9b8d-2b2576020690" class="jxgbox" style="width: 300px; height: 300px;"></div> 3032 * <script type="text/javascript"> 3033 * (function() { 3034 * var board = JXG.JSXGraph.initBoard('JXGbc45a421-c867-4b0a-9b8d-2b2576020690', 3035 * {showcopyright: false, shownavigation: false, 3036 * boundingbox: [-4, 4, 4, -4], 3037 * axis: true, 3038 * defaultAxes: { 3039 * x: { 3040 * ticks: { 3041 * minorTicks: 7, 3042 * ticksPerLabel: 4, 3043 * minorHeight: 20, 3044 * } 3045 * }, 3046 * y: { 3047 * ticks: { 3048 * minorTicks: 3, 3049 * ticksPerLabel: 2, 3050 * minorHeight: 20 3051 * } 3052 * } 3053 * } 3054 * }); 3055 * })(); 3056 * 3057 * </script><pre> 3058 */ 3059 ticksPerLabel: false, 3060 3061 /** 3062 * Scale the ticks but not the tick labels. 3063 * @type Number 3064 * @default 1 3065 * @name Ticks#scale 3066 * @see Ticks#scaleSymbol 3067 * 3068 * @example 3069 * const board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-10, 10, 10, -10], axis: true, 3070 * defaultAxes: { 3071 * x : { 3072 * margin: -4, 3073 * ticks: { 3074 * minTicksDistance: 0, 3075 * minorTicks:4, 3076 * ticksDistance: 3, 3077 * scale: Math.PI, 3078 * scaleSymbol: 'π', 3079 * insertTicks: true 3080 * } 3081 * }, 3082 * y : {} 3083 * } 3084 * }); 3085 * 3086 * </pre><div id="JXG23bfda5d-4a85-4469-a552-aa9b4cf62b4a" class="jxgbox" style="width: 300px; height: 300px;"></div> 3087 * <script type="text/javascript"> 3088 * (function() { 3089 * var board = JXG.JSXGraph.initBoard('JXG23bfda5d-4a85-4469-a552-aa9b4cf62b4a', 3090 * {boundingbox: [-10, 10, 10, -10], axis: true, showcopyright: false, shownavigation: false, 3091 * defaultAxes: { 3092 * x : { 3093 * margin: -4, 3094 * ticks: { 3095 * minTicksDistance: 0, 3096 * minorTicks:4, 3097 * ticksDistance: 3, 3098 * scale: Math.PI, 3099 * scaleSymbol: 'π', 3100 * insertTicks: true 3101 * } 3102 * }, 3103 * y : { 3104 * } 3105 * } 3106 * }); 3107 * 3108 * })(); 3109 * 3110 * </script><pre> 3111 */ 3112 scale: 1, 3113 3114 /** 3115 * A string that is appended to every tick, used to represent the scale 3116 * factor given in {@link Ticks#scale}. 3117 * 3118 * @type String 3119 * @default '' 3120 * @name Ticks#scaleSymbol 3121 * @see Ticks#scale 3122 */ 3123 scaleSymbol: '', 3124 3125 /** 3126 * User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array 3127 * is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is 3128 * shown as a fallback. 3129 * 3130 * @type Array 3131 * @name Ticks#labels 3132 * @default [] 3133 */ 3134 labels: [], 3135 3136 /** 3137 * The maximum number of characters a tick label can use. 3138 * 3139 * @type Number 3140 * @name Ticks#maxLabelLength 3141 * @see Ticks#digits 3142 * @default 5 3143 */ 3144 maxLabelLength: 5, 3145 3146 /** 3147 * If a label exceeds {@link Ticks#maxLabelLength} this determines the precision used to shorten the tick label. 3148 * Deprecated! Replaced by the attribute <tt>digits</tt>. 3149 * 3150 * @type Number 3151 * @name Ticks#precision 3152 * @see Ticks#maxLabelLength 3153 * @see Ticks#digits 3154 * @deprecated 3155 * @default 3 3156 */ 3157 precision: 3, 3158 3159 /** 3160 * If a label exceeds {@link Ticks#maxLabelLength} this determines the number of digits used to shorten the tick label. 3161 * 3162 * @type Number 3163 * @name Ticks#digits 3164 * @see Ticks#maxLabelLength 3165 * @deprecated 3166 * @default 3 3167 */ 3168 digits: 3, 3169 3170 /** 3171 * The default distance (in user coordinates, not pixels) between two ticks. Please be aware that this value does not have 3172 * to be used if {@link Ticks#insertTicks} is set to true. 3173 * 3174 * @type Number 3175 * @name Ticks#ticksDistance 3176 * @see Ticks#insertTicks 3177 * @default 1 3178 */ 3179 ticksDistance: 1, 3180 3181 /** 3182 * Tick face for major ticks of finite length. By default (face: '|') this is a straight line. 3183 * Possible other values are '<' and '>'. These faces are used in 3184 * {@link JXG.Hatch} for hatch marking parallel lines. 3185 * @type String 3186 * @name Ticks#face 3187 * @see hatch 3188 * @default '|' 3189 * @example 3190 * var p1 = board.create('point', [0, 3]); 3191 * var p2 = board.create('point', [1, 3]); 3192 * var l1 = board.create('line', [p1, p2]); 3193 * var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>', minorTicks: 0}); 3194 * 3195 * </pre><div id="JXG950a568a-1264-4e3a-b61d-b6881feecf4b" class="jxgbox" style="width: 300px; height: 300px;"></div> 3196 * <script type="text/javascript"> 3197 * (function() { 3198 * var board = JXG.JSXGraph.initBoard('JXG950a568a-1264-4e3a-b61d-b6881feecf4b', 3199 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 3200 * var p1 = board.create('point', [0, 3]); 3201 * var p2 = board.create('point', [1, 3]); 3202 * var l1 = board.create('line', [p1, p2]); 3203 * var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>', minorTicks: 0}); 3204 * 3205 * })(); 3206 * 3207 * </script><pre> 3208 * 3209 */ 3210 face: '|', 3211 3212 strokeOpacity: 1, 3213 strokeWidth: 1, 3214 strokeColor: '#000000', 3215 highlightStrokeColor: '#888888', 3216 fillColor: 'none', 3217 highlightFillColor: 'none', 3218 visible: 'inherit', 3219 3220 /** 3221 * Whether line boundaries should be included or not in the lower and upper bounds when 3222 * creating ticks. In mathematical terms: if a segment considered as interval is open (includeBoundaries:false) 3223 * or closed (includeBoundaries:true). In case of open interval, the interval is shortened by a small 3224 * ε. 3225 * 3226 * @type Boolean 3227 * @name Ticks#includeBoundaries 3228 * @default false 3229 * 3230 * @example 3231 * var li = board.create('segment', [[-4, 2], [4, 2]]); 3232 * var t = board.create('ticks', [li], { 3233 * includeBoundaries: true, 3234 * drawZero: true, 3235 * anchor: 'middle', 3236 * drawLabels: true, 3237 * minorTicks: 0, 3238 * label: { 3239 * anchorX: 'middle', 3240 * anchorY: 'top', 3241 * offset: [0, -5] 3242 * } 3243 * }); 3244 * 3245 * var li2 = board.create('segment', [[-4, -2], [4, -2]]); 3246 * var t2 = board.create('ticks', [li2], { 3247 * includeBoundaries: false, 3248 * drawZero: true, 3249 * anchor: 'middle', 3250 * drawLabels: true, 3251 * minorTicks: 0, 3252 * label: { 3253 * anchorX: 'middle', 3254 * anchorY: 'top', 3255 * offset: [0, -5] 3256 * } 3257 * }); 3258 * 3259 * </pre><div id="JXG08e79180-7c9a-4638-bb72-8aa7fd8a8b96" class="jxgbox" style="width: 300px; height: 300px;"></div> 3260 * <script type="text/javascript"> 3261 * (function() { 3262 * var board = JXG.JSXGraph.initBoard('JXG08e79180-7c9a-4638-bb72-8aa7fd8a8b96', 3263 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 3264 * var li = board.create('segment', [[-4, 2], [4, 2]]); 3265 * var t = board.create('ticks', [li], { 3266 * includeBoundaries: true, 3267 * drawZero: true, 3268 * anchor: 'middle', 3269 * drawLabels: true, 3270 * minorTicks: 0, 3271 * label: { 3272 * anchorX: 'middle', 3273 * anchorY: 'top', 3274 * offset: [0, -5] 3275 * } 3276 * }); 3277 * 3278 * var li2 = board.create('segment', [[-4, -2], [4, -2]]); 3279 * var t2 = board.create('ticks', [li2], { 3280 * includeBoundaries: false, 3281 * drawZero: true, 3282 * anchor: 'middle', 3283 * drawLabels: true, 3284 * minorTicks: 0, 3285 * label: { 3286 * anchorX: 'middle', 3287 * anchorY: 'top', 3288 * offset: [0, -5] 3289 * } 3290 * }); 3291 * 3292 * })(); 3293 * 3294 * </script><pre> 3295 * 3296 */ 3297 includeBoundaries: false, 3298 3299 /** 3300 * Set the ticks type. 3301 * Possible values are 'linear' or 'polar'. 3302 * 3303 * @type String 3304 * @name Ticks#type 3305 * @default 'linear' 3306 * 3307 * @example 3308 * var ax = board.create('axis', [[0,0], [1,0]], { 3309 * needsRegularUpdate: false, 3310 * ticks: { 3311 * type: 'linear', 3312 * majorHeight: 0 3313 * } 3314 * }); 3315 * var ay = board.create('axis', [[0,0], [0,1]], { 3316 * ticks: { 3317 * type: 'polar' 3318 * } 3319 * }); 3320 * 3321 * var p = board.create('point', [3, 2]); 3322 * 3323 * </pre><div id="JXG9ab0b50c-b486-4f95-9698-c0dd276155ff" class="jxgbox" style="width: 300px; height: 300px;"></div> 3324 * <script type="text/javascript"> 3325 * (function() { 3326 * var board = JXG.JSXGraph.initBoard('JXG9ab0b50c-b486-4f95-9698-c0dd276155ff', 3327 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 3328 * var ax = board.create('axis', [[0,0], [1,0]], { needsRegularUpdate: false, ticks: { type: 'linear', majorHeight: 0}}); 3329 * var ay = board.create('axis', [[0,0], [0,1]], { ticks: { type: 'polar'}}); 3330 * 3331 * var p = board.create('point', [3, 2]); 3332 * 3333 * })(); 3334 * 3335 * </script><pre> 3336 * 3337 */ 3338 type: 'linear', 3339 3340 /** 3341 * Internationalization support for ticks labels. 3342 * @name intl 3343 * @memberOf Ticks.prototype 3344 * @default <pre>{ 3345 * enabled: 'inherit', 3346 * options: {} 3347 * }</pre> 3348 * @see JXG.Board#intl 3349 * @see Text#intl 3350 * 3351 * @example 3352 * // Here, locale is disabled in general, but enabled for the horizontal 3353 * // axis and the infobox. 3354 * const board = JXG.JSXGraph.initBoard(BOARDID, { 3355 * boundingbox: [-0.5, 0.5, 0.5, -0.5], 3356 * intl: { 3357 * enabled: false, 3358 * locale: 'de-DE' 3359 * }, 3360 * keepaspectratio: true, 3361 * axis: true, 3362 * defaultAxes: { 3363 * x: { 3364 * ticks: { 3365 * intl: { 3366 * enabled: true, 3367 * options: { 3368 * style: 'unit', 3369 * unit: 'kilometer-per-hour', 3370 * unitDisplay: 'narrow' 3371 * } 3372 * } 3373 * } 3374 * }, 3375 * y: { 3376 * ticks: { 3377 * } 3378 * } 3379 * }, 3380 * infobox: { 3381 * fontSize: 12, 3382 * intl: { 3383 * enabled: true, 3384 * options: { 3385 * minimumFractionDigits: 4, 3386 * maximumFractionDigits: 5 3387 * } 3388 * } 3389 * } 3390 * }); 3391 * 3392 * var p = board.create('point', [0.1, 0.1], {}); 3393 * 3394 * </pre><div id="JXG820b60ff-b453-4be9-a9d5-06c0342a9dbe" class="jxgbox" style="width: 600px; height: 300px;"></div> 3395 * <script type="text/javascript"> 3396 * (function() { 3397 * var board = JXG.JSXGraph.initBoard('JXG820b60ff-b453-4be9-a9d5-06c0342a9dbe', { 3398 * boundingbox: [-0.5, 0.5, 0.5, -0.5], showcopyright: false, shownavigation: false, 3399 * intl: { 3400 * enabled: false, 3401 * locale: 'de-DE' 3402 * }, 3403 * keepaspectratio: true, 3404 * axis: true, 3405 * defaultAxes: { 3406 * x: { 3407 * ticks: { 3408 * intl: { 3409 * enabled: true, 3410 * options: { 3411 * style: 'unit', 3412 * unit: 'kilometer-per-hour', 3413 * unitDisplay: 'narrow' 3414 * } 3415 * } 3416 * } 3417 * }, 3418 * y: { 3419 * ticks: { 3420 * } 3421 * } 3422 * }, 3423 * infobox: { 3424 * fontSize: 12, 3425 * intl: { 3426 * enabled: true, 3427 * options: { 3428 * minimumFractionDigits: 4, 3429 * maximumFractionDigits: 5 3430 * } 3431 * } 3432 * } 3433 * }); 3434 * 3435 * var p = board.create('point', [0.1, 0.1], {}); 3436 * 3437 * })(); 3438 * 3439 * </script><pre> 3440 * 3441 */ 3442 intl: { 3443 enabled: 'inherit', 3444 options: {} 3445 }, 3446 3447 // TODO implementation and documentation 3448 minorTicksInArrow: false, 3449 majorTicksInArrow: true, 3450 labelInArrow: true, 3451 minorTicksInMargin: false, 3452 majorTicksInMargin: true, 3453 labelInMargin: true 3454 3455 // close the meta tag 3456 /**#@-*/ 3457 }, 3458 3459 /* 3460 * Generic options used by {@link JXG.Hatch} 3461 */ 3462 hatch: { 3463 drawLabels: false, 3464 drawZero: true, 3465 majorHeight: 20, 3466 anchor: 'middle', 3467 face: '|', 3468 strokeWidth: 2, 3469 strokeColor: Color.palette.blue, 3470 /** 3471 * The default distance (in user coordinates, not pixels) between two hatch symbols. 3472 * 3473 * @type Number 3474 * @name Hatch#ticksDistance 3475 * @default 0.2 3476 */ 3477 ticksDistance: 0.2 3478 }, 3479 3480 /** 3481 * Precision options, defining how close a pointer device (mouse, finger, pen) has to be 3482 * to an object such that the object is highlighted or can be dragged. 3483 * These values are board-wide and can be overwritten for individual elements by 3484 * changing their precision attribute. 3485 * 3486 * The default values are 3487 * <pre> 3488 * JXG.Options.precision: { 3489 * touch: 30, 3490 * touchMax: 100, 3491 * mouse: 4, 3492 * pen: 4, 3493 * epsilon: 0.0001, 3494 * hasPoint: 4 3495 * } 3496 * </pre> 3497 * 3498 * @type Object 3499 * @name JXG.Options#precision 3500 * @see JXG.GeometryElement#precision 3501 */ 3502 precision: { 3503 touch: 30, 3504 touchMax: 100, 3505 mouse: 4, 3506 pen: 4, 3507 epsilon: 0.0001, // Unused 3508 hasPoint: 4 3509 }, 3510 3511 /** 3512 * Default ordering of the layers. 3513 * The numbering starts from 0 and the highest layer number is numlayers-1. 3514 * 3515 * The default values are 3516 * <pre> 3517 * JXG.Options.layer: { 3518 * numlayers: 20, // only important in SVG 3519 * text: 9, 3520 * point: 9, 3521 * glider: 9, 3522 * arc: 8, 3523 * line: 7, 3524 * circle: 6, 3525 * curve: 5, 3526 * turtle: 5, 3527 * polygon: 3, 3528 * sector: 3, 3529 * angle: 3, 3530 * integral: 3, 3531 * axis: 2, 3532 * ticks: 2, 3533 * grid: 1, 3534 * image: 0, 3535 * trace: 0 3536 * } 3537 * </pre> 3538 * @type Object 3539 * @name JXG.Options#layer 3540 */ 3541 layer: { 3542 numlayers: 20, // only important in SVG 3543 unused9: 19, 3544 unused8: 18, 3545 unused7: 17, 3546 unused6: 16, 3547 unused5: 15, 3548 unused4: 14, 3549 unused3: 13, 3550 unused2: 12, 3551 unused1: 11, 3552 unused0: 10, 3553 text: 9, 3554 point: 9, 3555 glider: 9, 3556 arc: 8, 3557 line: 7, 3558 circle: 6, 3559 curve: 5, 3560 turtle: 5, 3561 polygon: 3, 3562 sector: 3, 3563 angle: 3, 3564 integral: 3, 3565 axis: 2, 3566 ticks: 2, 3567 grid: 1, 3568 image: 0, 3569 trace: 0 3570 }, 3571 3572 /* special angle options */ 3573 angle: { 3574 /**#@+ 3575 * @visprop 3576 */ 3577 3578 withLabel: true, 3579 3580 /** 3581 * Radius of the sector, displaying the angle. 3582 * The radius can be given as number (in user coordinates) 3583 * or as string 'auto'. In the latter case, the angle 3584 * is set to an value between 20 and 50 px. 3585 * 3586 * @type {Number|String} 3587 * @name Angle#radius 3588 * @default 'auto' 3589 * @visprop 3590 */ 3591 radius: 'auto', 3592 3593 /** 3594 * Display type of the angle field. Possible values are 3595 * 'sector' or 'sectordot' or 'square' or 'none'. 3596 * 3597 * @type String 3598 * @default 'sector' 3599 * @name Angle#type 3600 * @visprop 3601 */ 3602 type: 'sector', 3603 3604 /** 3605 * Display type of the angle field in case of a right angle. Possible values are 3606 * 'sector' or 'sectordot' or 'square' or 'none'. 3607 * 3608 * @type String 3609 * @default square 3610 * @name Angle#orthoType 3611 * @see Angle#orthoSensitivity 3612 * @visprop 3613 */ 3614 orthoType: 'square', 3615 3616 /** 3617 * Sensitivity (in degrees) to declare an angle as right angle. 3618 * If the angle measure is inside this distance from a rigth angle, the orthoType 3619 * of the angle is used for display. 3620 * 3621 * @type Number 3622 * @default 1.0 3623 * @name Angle#orthoSensitivity 3624 * @see Angle#orthoType 3625 * @visprop 3626 */ 3627 orthoSensitivity: 1.0, 3628 3629 fillColor: Color.palette.orange, 3630 highlightFillColor: Color.palette.orange, 3631 strokeColor: Color.palette.orange, 3632 // fillColor: '#ff7f00', 3633 // highlightFillColor: '#ff7f00', 3634 // strokeColor: '#ff7f00', 3635 3636 fillOpacity: 0.3, 3637 highlightFillOpacity: 0.3, 3638 3639 /** 3640 * @name Angle#radiuspoint 3641 * @type Object 3642 * @deprecated 3643 */ 3644 radiuspoint: { 3645 withLabel: false, 3646 visible: false, 3647 name: '' 3648 }, 3649 3650 /** 3651 * @name Angle#pointsquare 3652 * @type Object 3653 * @deprecated 3654 */ 3655 pointsquare: { 3656 withLabel: false, 3657 visible: false, 3658 name: '' 3659 }, 3660 3661 /** 3662 * Attributes of the dot point marking right angles. 3663 * @name Angle#dot 3664 * @type Object 3665 * @default <tt>{face: 'o', size: 2}</tt> 3666 */ 3667 dot: { 3668 visible: false, 3669 strokeColor: 'none', 3670 fillColor: '#000000', 3671 size: 2, 3672 face: 'o', 3673 withLabel: false, 3674 name: '' 3675 }, 3676 3677 label: { 3678 position: 'top', 3679 offset: [0, 0], 3680 strokeColor: Color.palette.blue 3681 }, 3682 3683 /** 3684 * Attributes for sub-element arc. In general, the arc will run through the first point and 3685 * thus will not have the same radius as the angle sector. 3686 * 3687 * @type Arc 3688 * @name Angle#arc 3689 * @default '{visible:false}' 3690 */ 3691 arc: { 3692 visible: false, 3693 fillColor: 'none' 3694 } 3695 3696 /**#@-*/ 3697 }, 3698 3699 /* special arc options */ 3700 arc: { 3701 /**#@+ 3702 * @visprop 3703 */ 3704 3705 /** 3706 * Type of arc. Possible values are 'minor', 'major', and 'auto'. 3707 * 3708 * @type String 3709 * @name Arc#selection 3710 * @default 'auto' 3711 */ 3712 selection: 'auto', 3713 3714 /** 3715 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 3716 * 3717 * @see JXG.GeometryElement#hasPoint 3718 * @name Arc#hasInnerPoints 3719 * @type Boolean 3720 * @default false 3721 */ 3722 hasInnerPoints: false, 3723 3724 label: { 3725 anchorX: 'auto', 3726 anchorY: 'auto' 3727 }, 3728 firstArrow: false, 3729 lastArrow: false, 3730 fillColor: 'none', 3731 highlightFillColor: 'none', 3732 strokeColor: Color.palette.blue, 3733 highlightStrokeColor: '#c3d9ff', 3734 useDirection: false, 3735 3736 /** 3737 * Attributes for center point. 3738 * 3739 * @type Point 3740 * @name Arc#center 3741 */ 3742 center: { 3743 }, 3744 3745 /** 3746 * Attributes for radius point. 3747 * 3748 * @type Point 3749 * @name Arc#radiusPoint 3750 */ 3751 radiusPoint: { 3752 }, 3753 3754 /** 3755 * Attributes for angle point. 3756 * 3757 * @type Point 3758 * @name Arc#anglePoint 3759 */ 3760 anglePoint: { 3761 } 3762 3763 /**#@-*/ 3764 }, 3765 3766 /* special arrow options */ 3767 arrow: { 3768 /**#@+ 3769 * @visprop 3770 */ 3771 3772 firstArrow: false, 3773 3774 lastArrow: { 3775 type: 1, 3776 highlightSize: 6, 3777 size: 6 3778 } 3779 3780 /**#@-*/ 3781 }, 3782 3783 /* special arrowparallel options */ 3784 arrowparallel: { 3785 /**#@+ 3786 * @visprop 3787 */ 3788 3789 firstArrow: false, 3790 3791 lastArrow: { 3792 type: 1, 3793 highlightSize: 6, 3794 size: 6 3795 } 3796 3797 /**#@-*/ 3798 }, 3799 3800 /* special axis options */ 3801 axis: { 3802 /**#@+ 3803 * @visprop 3804 */ 3805 3806 name: '', // By default, do not generate names for axes. 3807 needsRegularUpdate: false, // Axes only updated after zooming and moving of the origin. 3808 strokeWidth: 1, 3809 lastArrow: { 3810 type: 1, 3811 highlightSize: 8, 3812 size: 8 3813 }, 3814 strokeColor: '#666666', 3815 highlightStrokeWidth: 1, 3816 highlightStrokeColor: '#888888', 3817 3818 /** 3819 * Is used to define the behaviour of the axis. 3820 * Settings in this attribute only have an effect if the axis is exactly horizontal or vertical. 3821 * Possible values are: 3822 * <ul> 3823 * <li><tt>'static'</tt>: Standard behavior of the axes as know in JSXGraph. 3824 * <li><tt>'fixed'</tt>: The axis is placed in a fixed position. Depending on the attribute <tt>anchor</tt>, it is positioned to the right or left of the edge of the board as seen from the axis with a distance defined in <tt>distanceBoarder</tt>. The axis will stay at the given position, when the user navigates through the board. 3825 * <li><tt>'sticky'</tt>: This mixes the two settings <tt>static</tt> and <tt>fixed</tt>. When the user navigates in the board, the axis remains in the visible area (taking into account <tt>anchor</tt> and <tt>anchorDist</tt>). If the axis itself is in the visible area, the axis can be moved by navigation. 3826 * </ul> 3827 * 3828 * @type {String} 3829 * @name Axis#position 3830 * @default 'static' 3831 * @see Axis#anchor 3832 * @see Axis#anchorDist 3833 * 3834 * @example // Use navigation to see effect. 3835 * var axis1, axis2, circle; 3836 * 3837 * board.create('axis', [[0,0],[1,0]],{ 3838 * position: 'fixed', 3839 * anchor: 'right', 3840 * anchorDist: '0.1fr' 3841 * }); 3842 * 3843 * board.create('axis', [[0,0],[0,1]], { 3844 * position: 'fixed', 3845 * anchor: 'left', 3846 * anchorDist: 1 3847 * }); 3848 * 3849 * </pre><div id="JXG6dff2f81-65ce-46a3-bea0-8ce25cc1cb4a" class="jxgbox" style="width: 300px; height: 300px;"></div> 3850 * <script type="text/javascript"> 3851 * (function() { 3852 * var board = JXG.JSXGraph.initBoard('JXG6dff2f81-65ce-46a3-bea0-8ce25cc1cb4a', 3853 * {boundingbox: [-1, 10, 10,-1], axis: false, showcopyright: false, shownavigation: true}); 3854 * 3855 * board.create('axis', [[0,0],[1,0]],{ 3856 * position: 'fixed', 3857 * anchor: 'right', 3858 * anchorDist: '0.1fr' 3859 * }); 3860 * 3861 * board.create('axis', [[0,0],[0,1]], { 3862 * position: 'fixed', 3863 * anchor: 'left', 3864 * anchorDist: 1 3865 * }); 3866 * 3867 * board.create('circle', [[5,5], 2.5]); 3868 * })(); 3869 * 3870 * </script><pre> 3871 * 3872 * @example // Use navigation to see effect. 3873 * board.create('axis', [[0,0],[1,0]],{ 3874 * position: 'sticky', 3875 * anchor: 'right', 3876 * anchorDist: '0.2fr' 3877 * }); 3878 * 3879 * board.create('axis', [[0,0],[0,1]], { 3880 * position: 'sticky', 3881 * anchor: 'right left', 3882 * anchorDist: '75px' 3883 * }); 3884 * 3885 * </pre><div id="JXG42a90935-80aa-4a6b-8adf-279deef84485" class="jxgbox" style="width: 300px; height: 300px;"></div> 3886 * <script type="text/javascript"> 3887 * (function() { 3888 * var board = JXG.JSXGraph.initBoard('JXG42a90935-80aa-4a6b-8adf-279deef84485', 3889 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: true}); 3890 * board.create('axis', [[0,0],[1,0]],{ 3891 * position: 'sticky', 3892 * anchor: 'right', 3893 * anchorDist: '0.2fr' 3894 * }); 3895 * 3896 * board.create('axis', [[0,0],[0,1]], { 3897 * position: 'sticky', 3898 * anchor: 'right left', 3899 * anchorDist: '75px' 3900 * }); 3901 * 3902 * board.create('functiongraph', [function(x){ return 1/(x-5) + 2;}]); 3903 * })(); 3904 * 3905 * </script><pre> 3906 * 3907 */ 3908 position: 'static', 3909 3910 /** 3911 * Position is used in cases: <tt>position=='sticky'</tt> or <tt>position=='fixed'</tt>. 3912 * Possible values are <tt>'right'</tt>, <tt>'left'</tt>, <tt>'right left'</tt>. Left and right indicate the side as seen from the axis. 3913 * It is used in combination with the attribute position to decide on which side of the board the axis should stick or be fixed. 3914 * 3915 * @type {String} 3916 * @name Axis#anchor 3917 * @default '' 3918 * @example 3919 * board.create('axis', [[0,0],[0,1]],{ 3920 * position: 'fixed', 3921 * anchor: 'left', 3922 * anchorDist: 2, 3923 * strokeColor : 'green', 3924 * ticks: { 3925 * majorHeight: 7, 3926 * drawZero: true, 3927 * } 3928 * }); 3929 * 3930 * board.create('axis', [[0,0],[0,1]], { 3931 * position: 'fixed', 3932 * anchor: 'right', 3933 * anchorDist: 2, 3934 * strokeColor : 'blue', 3935 * ticks: { 3936 * majorHeight: 7, 3937 * drawZero: true, 3938 * } 3939 * }); 3940 * 3941 * board.create('axis', [[0,0],[0,-1]], { 3942 * position: 'fixed', 3943 * anchor: 'left', 3944 * anchorDist: 4, 3945 * strokeColor : 'red', 3946 * ticks:{ 3947 * majorHeight: 7, 3948 * drawZero: true, 3949 * } 3950 * }); 3951 * 3952 * </pre><div id="JXG11448b49-02b4-48d4-b0e0-8f06a94e909c" class="jxgbox" style="width: 300px; height: 300px;"></div> 3953 * <script type="text/javascript"> 3954 * (function() { 3955 * var board = JXG.JSXGraph.initBoard('JXG11448b49-02b4-48d4-b0e0-8f06a94e909c', 3956 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: true}); 3957 * 3958 * board.create('axis', [[0,0],[0,1]],{ 3959 * position: 'fixed', 3960 * anchor: 'left', 3961 * anchorDist: 4, 3962 * strokeColor : 'green', 3963 * ticks: { 3964 * majorHeight: 7, 3965 * drawZero: true, 3966 * } 3967 * }); 3968 * 3969 * board.create('axis', [[0,0],[0,1]], { 3970 * position: 'fixed', 3971 * anchor: 'right', 3972 * anchorDist: 2, 3973 * strokeColor : 'blue', 3974 * ticks: { 3975 * majorHeight: 7, 3976 * drawZero: true, 3977 * } 3978 * }); 3979 * 3980 * board.create('axis', [[0,0],[0,-1]], { 3981 * position: 'fixed', 3982 * anchor: 'left', 3983 * anchorDist: 4, 3984 * strokeColor : 'red', 3985 * ticks:{ 3986 * majorHeight: 7, 3987 * drawZero: true, 3988 * } 3989 * }); 3990 * 3991 * })(); 3992 * 3993 * </script><pre> 3994 */ 3995 anchor: '', 3996 3997 /** 3998 * Used to define at which distance to the edge of the board the axis should stick or be fixed. 3999 * This only has an effect if <tt>position=='sticky'</tt> or <tt>position=='fixed'</tt>. 4000 * There are the following possibilities: 4001 * <ul> 4002 * <li>Numbers or strings which are numbers (e.g. '10') are interpreted as usrCoords. 4003 * <li>Strings with the unit 'px' are interpreted as screen pixels. 4004 * <li>Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr) 4005 * </ul> 4006 * 4007 * @type {Number|String} 4008 * @name Axis#anchorDist 4009 * @default '10%' 4010 */ 4011 anchorDist: '10%', 4012 4013 /** 4014 * If set to true, the tick labels of the axis are automatically positioned in the narrower area between the axis and the side of the board. 4015 * Settings in this attribute only have an effect if the axis is exactly horizontal or vertical. 4016 * This option overrides <tt>offset</tt>, <tt>anchorX</tt> and <tt>anchorY</tt> of axis tick labels. 4017 * 4018 * @type {Boolean} 4019 * @name Axis#ticksAutoPos 4020 * @default false 4021 * @example 4022 * // Navigate to see an effect. 4023 * board.create('axis', [[0, 0], [1, 0]], { 4024 * position: 'sticky', 4025 * anchor: 'left right', 4026 * anchorDist: '0.1', 4027 * ticksAutoPos: true, 4028 * }); 4029 * 4030 * board.create('axis', [[0, 0], [0, 1]], { 4031 * position: 'sticky', 4032 * anchor: 'left right', 4033 * anchorDist: '0.1', 4034 * ticksAutoPos: true, 4035 * }); 4036 * 4037 * </pre><div id="JXG557c9b5d-e1bd-4d3b-8362-ff7a863255f3" class="jxgbox" style="width: 300px; height: 300px;"></div> 4038 * <script type="text/javascript"> 4039 * (function() { 4040 * var board = JXG.JSXGraph.initBoard('JXG557c9b5d-e1bd-4d3b-8362-ff7a863255f3', 4041 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 4042 * 4043 * board.create('axis', [[0, 0], [1, 0]], { 4044 * position: 'sticky', 4045 * anchor: 'left right', 4046 * anchorDist: '0.1', 4047 * ticksAutoPos: true, 4048 * }); 4049 * 4050 * board.create('axis', [[0, 0], [0, 1]], { 4051 * position: 'sticky', 4052 * anchor: 'left right', 4053 * anchorDist: '0.1', 4054 * ticksAutoPos: true, 4055 * }); 4056 * 4057 * })(); 4058 * 4059 * </script><pre> 4060 */ 4061 ticksAutoPos: false, 4062 4063 /** 4064 * Defines, when <tt>ticksAutoPos</tt> takes effect. 4065 * There are the following possibilities: 4066 * <ul> 4067 * <li>Numbers or strings which are numbers (e.g. '10') are interpreted as usrCoords. 4068 * <li>Strings with the unit 'px' are interpreted as screen pixels. 4069 * <li>Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr) 4070 * </ul> 4071 * 4072 * @type {Number|String} 4073 * @name Axis#ticksAutoPosThreshold 4074 * @default '5%' 4075 */ 4076 ticksAutoPosThreshold: '5%', 4077 4078 /** 4079 * Show / hide ticks. 4080 * 4081 * Deprecated. Suggested alternative is "ticks: {visible: false}" 4082 * 4083 * @type Boolean 4084 * @name Axis#withTicks 4085 * @default true 4086 * @deprecated 4087 */ 4088 withTicks: true, 4089 straightFirst: true, 4090 straightLast: true, 4091 margin: -4, 4092 withLabel: false, 4093 scalable: false, 4094 4095 /** 4096 * Attributes for ticks of the axis. 4097 * 4098 * @type Ticks 4099 * @name Axis#ticks 4100 */ 4101 ticks: { 4102 label: { 4103 offset: [4, -12 + 3], // This seems to be a good offset for 12 point fonts 4104 parse: false, 4105 needsRegularUpdate: false, 4106 display: 'internal', 4107 visible: 'inherit', 4108 layer: 9 4109 }, 4110 visible: 'inherit', 4111 needsRegularUpdate: false, 4112 strokeWidth: 1, 4113 strokeColor: '#666666', 4114 highlightStrokeColor: '#888888', 4115 drawLabels: true, 4116 drawZero: false, 4117 insertTicks: true, 4118 minTicksDistance: 5, 4119 minorHeight: 10, // if <0: full width and height 4120 majorHeight: -1, // if <0: full width and height 4121 tickEndings: [0, 1], 4122 majorTickEndings: [1, 1], 4123 minorTicks: 4, 4124 ticksDistance: 1, // TODO doc 4125 strokeOpacity: 0.25 4126 }, 4127 4128 /** 4129 * Attributes for first point the axis. 4130 * 4131 * @type Point 4132 * @name Axis#point1 4133 */ 4134 point1: { // Default values for point1 if created by line 4135 needsRegularUpdate: false, 4136 visible: false 4137 }, 4138 4139 /** 4140 * Attributes for second point the axis. 4141 * 4142 * @type Point 4143 * @name Axis#point2 4144 */ 4145 point2: { // Default values for point2 if created by line 4146 needsRegularUpdate: false, 4147 visible: false 4148 }, 4149 4150 tabindex: -1, 4151 4152 /** 4153 * Attributes for the axis label. 4154 * 4155 * @type Label 4156 * @name Axis#label 4157 */ 4158 label: { 4159 position: 'lft', 4160 offset: [10, 10] 4161 } 4162 4163 /**#@-*/ 4164 }, 4165 4166 /* special options for angle bisector of 3 points */ 4167 bisector: { 4168 /**#@+ 4169 * @visprop 4170 */ 4171 4172 strokeColor: '#000000', // Bisector line 4173 4174 /** 4175 * Attributes for the helper point of the bisector. 4176 * 4177 * @type Point 4178 * @name Bisector#point 4179 */ 4180 point: { // Bisector point 4181 visible: false, 4182 fixed: false, 4183 withLabel: false, 4184 name: '' 4185 } 4186 4187 /**#@-*/ 4188 }, 4189 4190 /* special options for the 2 bisectors of 2 lines */ 4191 bisectorlines: { 4192 /**#@+ 4193 * @visprop 4194 */ 4195 4196 /** 4197 * Attributes for first line. 4198 * 4199 * @type Line 4200 * @name Bisectorlines#line1 4201 */ 4202 line1: { // 4203 strokeColor: '#000000' 4204 }, 4205 4206 /** 4207 * Attributes for second line. 4208 * 4209 * @type Line 4210 * @name Bisectorlines#line2 4211 */ 4212 line2: { // 4213 strokeColor: '#000000' 4214 } 4215 4216 /**#@-*/ 4217 }, 4218 4219 /* special options for boxplot curves */ 4220 boxplot: { 4221 /**#@+ 4222 * @visprop 4223 */ 4224 4225 /** 4226 * Direction of the box plot: 'vertical' or 'horizontal' 4227 * 4228 * @type String 4229 * @name Boxplot#dir 4230 * @default 'vertical' 4231 */ 4232 dir: 'vertical', 4233 4234 /** 4235 * Relative width of the maximum and minimum quantile 4236 * 4237 * @type Number 4238 * @name Boxplot#smallWidth 4239 * @default 0.5 4240 */ 4241 smallWidth: 0.5, 4242 4243 strokeWidth: 2, 4244 strokeColor: Color.palette.blue, 4245 fillColor: Color.palette.blue, 4246 fillOpacity: 0.2, 4247 highlightStrokeWidth: 2, 4248 highlightStrokeColor: Color.palette.blue, 4249 highlightFillColor: Color.palette.blue, 4250 highlightFillOpacity: 0.1 4251 4252 /**#@-*/ 4253 }, 4254 4255 /* special button options */ 4256 button: { 4257 /**#@+ 4258 * @visprop 4259 */ 4260 4261 /** 4262 * Control the attribute "disabled" of the HTML button. 4263 * 4264 * @name disabled 4265 * @memberOf Button.prototype 4266 * 4267 * @type Boolean 4268 * @default false 4269 */ 4270 disabled: false, 4271 4272 display: 'html' 4273 4274 /**#@-*/ 4275 }, 4276 4277 /* special cardinal spline options */ 4278 cardinalspline: { 4279 /**#@+ 4280 * @visprop 4281 */ 4282 4283 /** 4284 * Controls if the data points of the cardinal spline when given as 4285 * arrays should be converted into {@link JXG.Points}. 4286 * 4287 * @name createPoints 4288 * @memberOf Cardinalspline.prototype 4289 * 4290 * @see Cardinalspline#points 4291 * 4292 * @type Boolean 4293 * @default true 4294 */ 4295 createPoints: true, 4296 4297 /** 4298 * If set to true, the supplied coordinates are interpreted as 4299 * [[x_0, y_0], [x_1, y_1], p, ...]. 4300 * Otherwise, if the data consists of two arrays of equal length, 4301 * it is interpreted as 4302 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 4303 * 4304 * @name isArrayOfCoordinates 4305 * @memberOf Cardinalspline.prototype 4306 * @type Boolean 4307 * @default true 4308 */ 4309 isArrayOfCoordinates: true, 4310 4311 /** 4312 * Attributes for the points generated by Cardinalspline in cases 4313 * {@link createPoints} is set to true 4314 * 4315 * @name points 4316 * @memberOf Cardinalspline.prototype 4317 * 4318 * @see Cardinalspline#createPoints 4319 * @type Object 4320 */ 4321 points: { 4322 strokeOpacity: 0.05, 4323 fillOpacity: 0.05, 4324 highlightStrokeOpacity: 1.0, 4325 highlightFillOpacity: 1.0, 4326 withLabel: false, 4327 name: '', 4328 fixed: false 4329 } 4330 4331 /**#@-*/ 4332 }, 4333 4334 /* special chart options */ 4335 chart: { 4336 /**#@+ 4337 * @visprop 4338 */ 4339 4340 chartStyle: 'line', 4341 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 4342 highlightcolors: null, 4343 fillcolor: null, 4344 highlightonsector: false, 4345 highlightbysize: false, 4346 4347 fillOpacity: 0.6, 4348 withLines: false, 4349 4350 label: { 4351 } 4352 /**#@-*/ 4353 }, 4354 4355 /* special html slider options */ 4356 checkbox: { 4357 /**#@+ 4358 * @visprop 4359 */ 4360 4361 /** 4362 * Control the attribute "disabled" of the HTML checkbox. 4363 * 4364 * @name disabled 4365 * @memberOf Checkbox.prototype 4366 * 4367 * @type Boolean 4368 * @default false 4369 */ 4370 disabled: false, 4371 4372 /** 4373 * Control the attribute "checked" of the HTML checkbox. 4374 * 4375 * @name checked 4376 * @memberOf Checkbox.prototype 4377 * 4378 * @type Boolean 4379 * @default false 4380 */ 4381 checked: false, 4382 4383 display: 'html' 4384 4385 /**#@-*/ 4386 }, 4387 4388 /*special circle options */ 4389 circle: { 4390 /**#@+ 4391 * @visprop 4392 */ 4393 4394 /** 4395 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 4396 * 4397 * @see JXG.GeometryElement#hasPoint 4398 * @name Circle#hasInnerPoints 4399 * @type Boolean 4400 * @default false 4401 */ 4402 hasInnerPoints: false, 4403 4404 fillColor: 'none', 4405 highlightFillColor: 'none', 4406 strokeColor: Color.palette.blue, 4407 highlightStrokeColor: '#c3d9ff', 4408 4409 /** 4410 * Attributes for center point. 4411 * 4412 * @type Point 4413 * @name Circle#center 4414 */ 4415 center: { 4416 visible: false, 4417 withLabel: false, 4418 fixed: false, 4419 4420 fillColor: Color.palette.red, 4421 strokeColor: Color.palette.red, 4422 highlightFillColor: '#c3d9ff', 4423 highlightStrokeColor: '#c3d9ff', 4424 layer: 9, 4425 4426 name: '' 4427 }, 4428 4429 /** 4430 * Attributes for center point. 4431 * 4432 * @type Point 4433 * @name Circle#point2 4434 */ 4435 point2: { 4436 fillColor: Color.palette.red, 4437 strokeColor: Color.palette.red, 4438 highlightFillColor: '#c3d9ff', 4439 highlightStrokeColor: '#c3d9ff', 4440 layer: 9, 4441 4442 visible: false, 4443 withLabel: false, 4444 fixed: false, 4445 name: '' 4446 }, 4447 4448 /** 4449 * Attributes for circle label. 4450 * 4451 * @type Label 4452 * @name Circle#label 4453 */ 4454 label: { 4455 position: 'urt' 4456 } 4457 4458 /**#@-*/ 4459 }, 4460 4461 /* special options for circumcircle of 3 points */ 4462 circumcircle: { 4463 /**#@+ 4464 * @visprop 4465 */ 4466 4467 fillColor: 'none', 4468 highlightFillColor: 'none', 4469 strokeColor: Color.palette.blue, 4470 highlightStrokeColor: '#c3d9ff', 4471 4472 /** 4473 * Attributes for center point. 4474 * 4475 * @type Point 4476 * @name Circumcircle#center 4477 */ 4478 center: { // center point 4479 visible: false, 4480 fixed: false, 4481 withLabel: false, 4482 fillColor: Color.palette.red, 4483 strokeColor: Color.palette.red, 4484 highlightFillColor: '#c3d9ff', 4485 highlightStrokeColor: '#c3d9ff', 4486 name: '' 4487 } 4488 /**#@-*/ 4489 }, 4490 4491 circumcirclearc: { 4492 /**#@+ 4493 * @visprop 4494 */ 4495 4496 fillColor: 'none', 4497 highlightFillColor: 'none', 4498 strokeColor: Color.palette.blue, 4499 highlightStrokeColor: '#c3d9ff', 4500 4501 /** 4502 * Attributes for center point. 4503 * 4504 * @type Point 4505 * @name CircumcircleArc#center 4506 */ 4507 center: { 4508 visible: false, 4509 withLabel: false, 4510 fixed: false, 4511 name: '' 4512 } 4513 /**#@-*/ 4514 }, 4515 4516 /* special options for circumcircle sector of 3 points */ 4517 circumcirclesector: { 4518 /**#@+ 4519 * @visprop 4520 */ 4521 4522 useDirection: true, 4523 fillColor: Color.palette.yellow, 4524 highlightFillColor: Color.palette.yellow, 4525 fillOpacity: 0.3, 4526 highlightFillOpacity: 0.3, 4527 strokeColor: Color.palette.blue, 4528 highlightStrokeColor: '#c3d9ff', 4529 4530 /** 4531 * Attributes for center point. 4532 * 4533 * @type Point 4534 * @name Circle#point 4535 */ 4536 point: { 4537 visible: false, 4538 fixed: false, 4539 withLabel: false, 4540 name: '' 4541 } 4542 /**#@-*/ 4543 }, 4544 4545 /* special options for comb */ 4546 comb: { 4547 /**#@+ 4548 * @visprop 4549 */ 4550 4551 /** 4552 * Frequency of comb elements. 4553 * 4554 * @type Number 4555 * @name Comb#frequency 4556 * @default 0.2 4557 */ 4558 frequency: 0.2, 4559 4560 /** 4561 * Width of the comb. 4562 * 4563 * @type Number 4564 * @name Comb#width 4565 * @default 0.4 4566 */ 4567 width: 0.4, 4568 4569 /** 4570 * Angle - given in radians - under which comb elements are positioned. 4571 * 4572 * @type Number 4573 * @name Comb#angle 4574 * @default Math.PI / 3 (i.e. π /3 or 60^° degrees) 4575 */ 4576 angle: Math.PI / 3, 4577 4578 /** 4579 * Should the comb go right to left instead of left to right. 4580 * 4581 * @type Boolean 4582 * @name Comb#reverse 4583 * @default false 4584 */ 4585 reverse: false, 4586 4587 /** 4588 * Attributes for first defining point of the comb. 4589 * 4590 * @type Point 4591 * @name Comb#point1 4592 */ 4593 point1: { 4594 visible: false, 4595 withLabel: false, 4596 fixed: false, 4597 name: '' 4598 }, 4599 4600 /** 4601 * Attributes for second defining point of the comb. 4602 * 4603 * @type Point 4604 * @name Comb#point2 4605 */ 4606 point2: { 4607 visible: false, 4608 withLabel: false, 4609 fixed: false, 4610 name: '' 4611 }, 4612 4613 // /** 4614 // * Attributes for the curve displaying the comb. 4615 // * 4616 // * @type Curve 4617 // * @name Comb#curve 4618 // */ 4619 // curve: { 4620 // strokeWidth: 1, 4621 // strokeColor: '#0000ff', 4622 // fillColor: 'none' 4623 // }, 4624 strokeWidth: 1, 4625 strokeColor: '#0000ff', 4626 fillColor: 'none' 4627 }, 4628 4629 /* special conic options */ 4630 conic: { 4631 /**#@+ 4632 * @visprop 4633 */ 4634 4635 fillColor: 'none', 4636 highlightFillColor: 'none', 4637 strokeColor: Color.palette.blue, 4638 highlightStrokeColor: '#c3d9ff', 4639 4640 /** 4641 * Attributes for foci points. 4642 * 4643 * @type Point 4644 * @name Conic#foci 4645 */ 4646 foci: { 4647 // points 4648 fixed: false, 4649 visible: false, 4650 withLabel: false, 4651 name: '' 4652 }, 4653 4654 /** 4655 * Attributes for center point. 4656 * 4657 * @type Point 4658 * @name Conic#center 4659 */ 4660 center: { 4661 visible: false, 4662 withLabel: false, 4663 name: '' 4664 }, 4665 4666 /** 4667 * Attributes for five points defining the conic, if some of them are given as coordinates. 4668 * 4669 * @type Point 4670 * @name Conic#point 4671 */ 4672 point: { 4673 withLabel: false, 4674 name: '' 4675 }, 4676 4677 /** 4678 * Attributes for parabola line in case the line is given by two 4679 * points or coordinate pairs. 4680 * 4681 * @type Line 4682 * @name Conic#line 4683 */ 4684 line: { 4685 visible: false 4686 } 4687 4688 /**#@-*/ 4689 }, 4690 4691 /* special curve options */ 4692 curve: { 4693 /**#@+ 4694 * @visprop 4695 */ 4696 4697 strokeWidth: 1, 4698 strokeColor: Color.palette.blue, 4699 fillColor: 'none', 4700 fixed: true, 4701 4702 /** 4703 * The curveType is set in {@link JXG.Curve#generateTerm} and used in {@link JXG.Curve#updateCurve}. 4704 * Possible values are <ul> 4705 * <li>'none'</li> 4706 * <li>'plot': Data plot</li> 4707 * <li>'parameter': we can not distinguish function graphs and parameter curves</li> 4708 * <li>'functiongraph': function graph</li> 4709 * <li>'polar'</li> 4710 * <li>'implicit' (not yet)</li></ul> 4711 * Only parameter and plot are set directly. Polar is set with {@link JXG.GeometryElement#setAttribute} only. 4712 * @name Curve#curveType 4713 * @type String 4714 * @default null 4715 */ 4716 curveType: null, 4717 4718 /** 4719 * If true use a recursive bisection algorithm. 4720 * It is slower, but usually the result is better. It tries to detect jumps 4721 * and singularities. 4722 * 4723 * @name Curve#doAdvancedPlot 4724 * @type Boolean 4725 * @default true 4726 */ 4727 doAdvancedPlot: true, 4728 4729 /** 4730 * If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98. 4731 * 4732 * @name Curve#doAdvancedPlotOld 4733 * @see Curve#doAdvancedPlot 4734 * @type Boolean 4735 * @default false 4736 * @deprecated 4737 */ 4738 doAdvancedPlotOld: false, // v1 4739 4740 /** 4741 * Configure arrow head at the start position for curve. 4742 * Recommended arrow head type is 7. 4743 * 4744 * @name Curve#firstArrow 4745 * @type Boolean | Object 4746 * @default false 4747 * @see Line#firstArrow for options 4748 */ 4749 firstArrow: false, 4750 4751 /** 4752 * The data points of the curve are not connected with straight lines but with bezier curves. 4753 * @name Curve#handDrawing 4754 * @type Boolean 4755 * @default false 4756 */ 4757 handDrawing: false, 4758 4759 /** 4760 * Attributes for curve label. 4761 * 4762 * @type Label 4763 * @name Curve#label 4764 */ 4765 label: { 4766 position: 'lft' 4767 }, 4768 4769 /** 4770 * Configure arrow head at the end position for curve. 4771 * Recommended arrow head type is 7. 4772 * 4773 * @name Curve#lastArrow 4774 * @see Line#lastArrow for options 4775 * @type Boolean | Object 4776 * @default false 4777 */ 4778 lastArrow: false, 4779 4780 /** 4781 * Line endings (linecap) of a curve stroke. 4782 * Possible values are: 4783 * <ul> 4784 * <li> 'butt', 4785 * <li> 'round', 4786 * <li> 'square'. 4787 * </ul> 4788 * 4789 * @name JXG.Curve#lineCap 4790 * @type String 4791 * @default 'round' 4792 */ 4793 lineCap: 'round', 4794 4795 /** 4796 * Number of points used for plotting triggered by up events 4797 * (i.e. high quality plotting) in case 4798 * {@link Curve#doAdvancedPlot} is false. 4799 * 4800 * @name Curve#numberPointsHigh 4801 * @see Curve#doAdvancedPlot 4802 * @type Number 4803 * @default 1600 4804 */ 4805 numberPointsHigh: 1600, // Number of points on curves after mouseUp 4806 4807 /** 4808 * Number of points used for plotting triggered by move events 4809 * (i.e. lower quality plotting but fast) in case 4810 * {@link Curve#doAdvancedPlot} is false. 4811 * 4812 * @name Curve#numberPointsLow 4813 * @see Curve#doAdvancedPlot 4814 * @type Number 4815 * @default 400 4816 */ 4817 numberPointsLow: 400, // Number of points on curves after mousemove 4818 4819 /** 4820 * Select the version of the plot algorithm. 4821 * <ul> 4822 * <li> Version 1 is very outdated 4823 * <li> Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0 4824 * <li> Version 3 is an internal version that was never published in a stable version. 4825 * <li> Version 4 is available since JSXGraph v1.2.0 4826 * </ul> 4827 * Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode) 4828 * 4829 * @example 4830 * var c = board.create('functiongraph', ["log(x)"]); 4831 * 4832 * @name Curve#plotVersion 4833 * @type Number 4834 * @default 2 4835 */ 4836 plotVersion: 2, 4837 4838 /** 4839 * Configure arrow head at the start position for curve. 4840 * Recommended arrow head type is 7. 4841 * 4842 * @name Curve#recursionDepthHigh 4843 * @see Curve#doAdvancedPlot 4844 * @type Number 4845 * @default 17 4846 */ 4847 recursionDepthHigh: 17, 4848 4849 /** 4850 * Number of points used for plotting triggered by move events in case 4851 * (i.e. lower quality plotting but fast) 4852 * {@link Curve#doAdvancedPlot} is true. 4853 * 4854 * @name Curve#recursionDepthLow 4855 * @see Curve#doAdvancedPlot 4856 * @type Number 4857 * @default 13 4858 */ 4859 recursionDepthLow: 15 4860 4861 /**#@-*/ 4862 }, 4863 4864 /* special foreignObject options */ 4865 foreignobject: { 4866 /**#@+ 4867 * @visprop 4868 */ 4869 4870 fixed: true, 4871 visible: true, 4872 needsRegularUpdate: false, 4873 4874 /** 4875 * List of attractor elements. If the distance of the foreignobject is less than 4876 * attractorDistance the foreignobject is made to glider of this element. 4877 * 4878 * @name ForeignObject#attractors 4879 * 4880 * @type Array 4881 * @default empty 4882 */ 4883 attractors: [] 4884 4885 /**#@-*/ 4886 }, 4887 4888 /* special functiongraph options */ 4889 functiongraph: { 4890 /**#@+ 4891 * @visprop 4892 */ 4893 4894 4895 /**#@-*/ 4896 }, 4897 4898 /* special glider options */ 4899 glider: { 4900 /**#@+ 4901 * @visprop 4902 */ 4903 4904 label: {} 4905 /**#@-*/ 4906 }, 4907 4908 /* special grid options */ 4909 grid: { 4910 /**#@+ 4911 * @visprop 4912 */ 4913 4914 needsRegularUpdate: false, 4915 hasGrid: false, // Used in standardoptions 4916 highlight: false, 4917 4918 /** 4919 * Deprecated. Use {@link Grid#majorStep} instead. 4920 * 4921 * @deprecated 4922 * @type {Number|String} 4923 * @name Grid#gridX 4924 * @default null 4925 */ 4926 gridX: null, 4927 4928 /** 4929 * Deprecated. Use {@link Grid#majorStep} instead. 4930 * 4931 * @deprecated 4932 * @type {Number|String} 4933 * @name Grid#gridY 4934 * @default null 4935 */ 4936 gridY: null, 4937 4938 /** 4939 * Distance of major grid elements. There are three possibilities: 4940 * <ul> 4941 * <li>If it is set to 'auto' the distance of the major grid equals the distance of majorTicks of the corresponding axis. 4942 * <li>Numbers or strings which are numbers (e.g. '10') are interpreted as distance in usrCoords. 4943 * <li>Strings with the unit 'px' are interpreted as distance in screen pixels. 4944 * <li>Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr) 4945 * </ul> 4946 * Instead of one value you can provide two values as an array <tt>[x, y]</tt> here. 4947 * These are used as distance in x- and y-direction. 4948 * 4949 * @type {Number|String|Array} 4950 * @name Grid#majorStep 4951 * @default 'auto' 4952 * @see JXG.Ticks#getDistanceMajorTicks 4953 */ 4954 majorStep: 'auto', 4955 4956 /** 4957 * Number of elements in minor grid between elements of the major grid. There are three possibilities: 4958 * <ul> 4959 * <li>If set to 'auto', the number minor elements is equal to the number of minorTicks of the corresponding axis. 4960 * <li>Numbers or strings which are numbers (e.g. '10') are interpreted as quantity. 4961 * </ul> 4962 * Instead of one value you can provide two values as an array <tt>[x, y]</tt> here. 4963 * These are used as number in x- and y-direction. 4964 * 4965 * @type {Number|String|Array} 4966 * @name Grid#minorElements 4967 * @default 0 4968 */ 4969 minorElements: 0, 4970 4971 /** 4972 * To print a quadratic grid with same distance of major grid elements in x- and y-direction. 4973 * <tt>'min'</tt> or <tt>true</tt> will set both distances of major grid elements in x- and y-direction to the primarily lesser value, 4974 * <tt>'max'</tt> to the primarily greater value. 4975 * 4976 * @type {Boolean|String} 4977 * @name Grid#forceSquare 4978 * @default false 4979 */ 4980 forceSquare: false, 4981 4982 /** 4983 * To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well. 4984 * 4985 * @type {Boolean} 4986 * @name Grid#includeBoundaries 4987 * @default false 4988 */ 4989 includeBoundaries: false, 4990 4991 /** 4992 * Size of grid elements. There are the following possibilities: 4993 * <ul> 4994 * <li>Numbers or strings which are numbers (e.g. '10') are interpreted as size in pixels. 4995 * <li>Strings with additional '%' (e.g. '95%') are interpreted as the ratio of used space for one element. 4996 * </ul> 4997 * Unused for 'line' which will use the value of strokeWidth. 4998 * Instead of one value you can provide two values as an array <tt>[x, y]</tt> here. 4999 * These are used as size in x- and y-direction. 5000 * 5001 * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>, 5002 * e.g. <tt>major: {size: ...}</tt> 5003 * For default values have a look there.</p> 5004 * 5005 * @type {Number|String|Array} 5006 * @name Grid#size 5007 */ 5008 // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor. 5009 size: undefined, 5010 5011 /** 5012 * Appearance of grid elements. 5013 * There are different styles which differ in appearance. 5014 * Possible values are (comparing to {@link Point#face}): 5015 * <table> 5016 * <tr><th>Input</th><th>Output</th><th>Fillable by fillColor,...</th></tr> 5017 * <tr><td>point, .</td><td>.</td><td>no</td></tr> 5018 * <tr><td>line</td><td>−</td><td>no</td></tr> 5019 * <tr><td>cross, x</td><td>x</td><td>no</td></tr> 5020 * <tr><td>circle, o</td><td>o</td><td>yes</td></tr> 5021 * <tr><td>square, []</td><td>[]</td><td>yes</td></tr> 5022 * <tr><td>plus, +</td><td>+</td><td>no</td></tr> 5023 * <tr><td>minus, -</td><td>-</td><td>no</td></tr> 5024 * <tr><td>divide, |</td><td>|</td><td>no</td></tr> 5025 * <tr><td>diamond, <></td><td><></td><td>yes</td></tr> 5026 * <tr><td>diamond2, <<>></td><td><> (bigger)</td><td>yes</td></tr> 5027 * <tr><td>triangleup, ^, a, A</td><td>^</td><td>no</td></tr> 5028 * <tr><td>triangledown, v</td><td>v</td><td>no</td></tr> 5029 * <tr><td>triangleleft, <</td><td> <</td><td>no</td></tr> 5030 * <tr><td>triangleright, ></td><td>></td><td>no</td></tr> 5031 * <tr><td>regularPolygon, regpol</td><td>⬡</td><td>yes</td></tr> 5032 * </table> 5033 * 5034 * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>, 5035 * e.g. <tt>major: {face: ...}</tt> 5036 * For default values have a look there.</p> 5037 * 5038 * @type {String} 5039 * @name Grid#face 5040 */ 5041 // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor. 5042 face: undefined, 5043 5044 /** 5045 * This number (pixel value) controls where grid elements end at the canvas edge. If zero, the line 5046 * ends exactly at the end, if negative there is a margin to the inside, if positive the line 5047 * ends outside of the canvas (which is invisible). 5048 * 5049 * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>, 5050 * e.g. <tt>major: {margin: ...}</tt> 5051 * For default values have a look there.</p> 5052 * 5053 * @name Grid#margin 5054 * @type {Number} 5055 */ 5056 // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor. 5057 margin: undefined, 5058 5059 /** 5060 * This attribute determines whether the grid elements located at <tt>x=0</tt>, <tt>y=0</tt> 5061 * and (for major grid only) at <tt>(0, 0)</tt> are displayed. 5062 * The main reason to set this attribute to "false", might be in combination with axes. 5063 * <ul> 5064 * <li>If <tt>false</tt>, then all these elements are hidden. 5065 * <li>If <tt>true</tt>, all these elements are shown. 5066 * <li>If an object of the following form is given, the three cases can be distinguished individually:<br> 5067 * <tt>{x: true|false, y: true|false, origin: true|false}</tt> 5068 * </ul> 5069 * 5070 * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>, 5071 * e.g. <tt>major: {drawZero: ...}</tt> 5072 * For default values have a look there.</p> 5073 * 5074 * @type {Boolean|Object} 5075 * @name Grid#drawZero 5076 */ 5077 // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor. 5078 drawZero: undefined, 5079 5080 /** 5081 * Number of vertices for face 'polygon'. 5082 * 5083 * <p><b><i>This attribute can be set individually for major and minor grid as a sub-entry of {@link Grid#major} or {@link Grid#minor}</i></b>, 5084 * e.g. <tt>major: {polygonVertices: ...}</tt> 5085 * For default values have a look there.</p> 5086 * 5087 * @type {Number} 5088 * @name Grid#polygonVertices 5089 */ 5090 // This attribute only exists for documentation purposes. It has no effect and is overwritten with actual values in major and minor. 5091 polygonVertices: undefined, 5092 5093 /** 5094 * This object contains the attributes for major grid elements. 5095 * You can override the following grid attributes individually here: 5096 * <ul> 5097 * <li>{@link Grid#size} 5098 * <li>{@link Grid#face} 5099 * <li>{@link Grid#margin} 5100 * <li>{@link Grid#drawZero} 5101 * <li>{@link Grid#polygonVertices} 5102 * </ul> 5103 * Default values are: 5104 * <pre>{ 5105 * size: 5, 5106 * face: 'line', 5107 * margin: 0, 5108 * drawZero: true, 5109 * polygonVertices: 6 5110 * }</pre> 5111 * 5112 * @name Grid#major 5113 * @type {Object} 5114 */ 5115 major: { 5116 5117 /** 5118 * Documented in Grid#size 5119 * @class 5120 * @ignore 5121 */ 5122 size: 5, 5123 5124 /** 5125 * Documented in Grid#face 5126 * @class 5127 * @ignore 5128 */ 5129 face: 'line', 5130 5131 /** 5132 * Documented in Grid#margin 5133 * @class 5134 * @ignore 5135 */ 5136 margin: 0, 5137 5138 /** 5139 * Documented in Grid#drawZero 5140 * @class 5141 * @ignore 5142 */ 5143 drawZero: true, 5144 5145 /** 5146 * Documented in Grid#polygonVertices 5147 * @class 5148 * @ignore 5149 */ 5150 polygonVertices: 6 5151 }, 5152 5153 /** 5154 * This object contains the attributes for minor grid elements. 5155 * You can override the following grid attributes individually here: 5156 * <ul> 5157 * <li>{@link Grid#size} 5158 * <li>{@link Grid#face} 5159 * <li>{@link Grid#margin} 5160 * <li>{@link Grid#drawZero} 5161 * <li>{@link Grid#polygonVertices} 5162 * </ul> 5163 * Default values are: 5164 * <pre>{ 5165 * size: 3, 5166 * face: 'point', 5167 * margin: 0, 5168 * drawZero: true, 5169 * polygonVertices: 6 5170 * }</pre> 5171 * 5172 * @name Grid#minor 5173 * @type {Object} 5174 */ 5175 minor: { 5176 5177 /** 5178 * @class 5179 * @ignore 5180 */ 5181 visible: 'inherit', 5182 5183 /** 5184 * Documented in Grid#size 5185 * @class 5186 * @ignore 5187 */ 5188 size: 3, 5189 5190 /** 5191 * Documented in Grid#face 5192 * @class 5193 * @ignore 5194 */ 5195 face: 'point', 5196 5197 /** 5198 * Documented in Grid#margin 5199 * @class 5200 * @ignore 5201 */ 5202 margin: 0, 5203 5204 /** 5205 * Documented in Grid#drawZero 5206 * @class 5207 * @ignore 5208 */ 5209 drawZero: true, 5210 5211 /** 5212 * Documented in Grid#polygonVertices 5213 * @class 5214 * @ignore 5215 */ 5216 polygonVertices: 6 5217 }, 5218 5219 /** 5220 * @class 5221 * @ignore 5222 * @deprecated 5223 */ 5224 snapToGrid: false, 5225 5226 strokeColor: '#c0c0c0', 5227 strokeWidth: 1, 5228 strokeOpacity: 0.5, 5229 dash: 0, 5230 5231 /** 5232 * Use a predefined theme for grid. 5233 * Attributes can be overwritten by explicitly set the specific value. 5234 * 5235 * @type {Number} 5236 * @default 0 5237 * @see Grid#themes 5238 */ 5239 theme: 0, 5240 5241 /** 5242 * Array of theme attributes. 5243 * The index of the entry is the number of the theme. 5244 * 5245 * @type {Array} 5246 * @name Grid#themes 5247 * @private 5248 * 5249 * @example 5250 * // Theme 1 5251 * // quadratic grid appearance with distance of major grid elements set to the primarily greater one 5252 * 5253 * JXG.JSXGraph.initBoard('jxgbox', { 5254 * boundingbox: [-4, 4, 4, -4], axis: true, 5255 * defaultAxes: { 5256 * x: { ticks: {majorHeight: 10} }, 5257 * y: { ticks: {majorHeight: 10} } 5258 * }, 5259 * grid: { theme: 1 }, 5260 * }); 5261 * </pre> <div id="JXGb8d606c4-7c67-4dc0-9941-3b3bd0932898" class="jxgbox" style="width: 300px; height: 200px;"></div> 5262 * <script type="text/javascript"> 5263 * (function() { 5264 * JXG.JSXGraph.initBoard('JXGb8d606c4-7c67-4dc0-9941-3b3bd0932898', 5265 * {boundingbox: [-4, 4, 4, -4], axis: true, showcopyright: false, shownavigation: false, 5266 * defaultAxes: { 5267 * x: { ticks: {majorHeight: 10} }, 5268 * y: { ticks: {majorHeight: 10} } 5269 * }, 5270 * grid: { theme: 1 }, 5271 * }); 5272 * })(); 5273 * </script> <pre> 5274 * 5275 * @example 5276 * // Theme 2 5277 * // lines and points in between 5278 * 5279 * JXG.JSXGraph.initBoard('jxgbox', { 5280 * boundingbox: [-4, 4, 4, -4], axis: false, 5281 * grid: { theme: 2 }, 5282 * }); 5283 * </pre> <div id="JXG4e11e6e3-472a-48e0-b7d0-f80d397c769b" class="jxgbox" style="width: 300px; height: 300px;"></div> 5284 * <script type="text/javascript"> 5285 * (function() { 5286 * JXG.JSXGraph.initBoard('JXG4e11e6e3-472a-48e0-b7d0-f80d397c769b', 5287 * {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false, 5288 * grid: { theme: 2 }, 5289 * }) 5290 * })(); 5291 * </script> <pre> 5292 * 5293 * @example 5294 * // Theme 3 5295 * // lines and thinner lines in between 5296 * 5297 * JXG.JSXGraph.initBoard('jxgbox', { 5298 * boundingbox: [-4, 4, 4, -4], axis: false, 5299 * grid: { theme: 3 }, 5300 * }); 5301 * </pre> <div id="JXG334814a3-03a7-4231-a5a7-a42d3b8dc2de" class="jxgbox" style="width: 300px; height: 300px;"></div> 5302 * <script type="text/javascript"> 5303 * (function() { 5304 * JXG.JSXGraph.initBoard('JXG334814a3-03a7-4231-a5a7-a42d3b8dc2de', 5305 * {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false, 5306 * grid: { theme: 3 } 5307 * }); 5308 * })(); 5309 * </script> <pre> 5310 * 5311 * @example 5312 * // Theme 4 5313 * // lines with grid of '+'s plotted in between 5314 * 5315 * JXG.JSXGraph.initBoard('jxgbox', { 5316 * boundingbox: [-4, 4, 4, -4], axis: false, 5317 * grid: { theme: 4 }, 5318 * }); 5319 * </pre> <div id="JXG9e2bb29c-d998-428c-9432-4a7bf6cd9222" class="jxgbox" style="width: 300px; height: 300px;"></div> 5320 * <script type="text/javascript"> 5321 * (function() { 5322 * JXG.JSXGraph.initBoard('JXG9e2bb29c-d998-428c-9432-4a7bf6cd9222', 5323 * {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false, 5324 * grid: { theme: 4 }, 5325 * }); 5326 * })(); 5327 * </script> <pre> 5328 * 5329 * @example 5330 * // Theme 5 5331 * // grid of '+'s and points in between 5332 * 5333 * JXG.JSXGraph.initBoard('jxgbox', { 5334 * boundingbox: [-4, 4, 4, -4], axis: false, 5335 * grid: { theme: 5 }, 5336 * }); 5337 * </pre> <div id="JXG6a967d83-4179-4827-9e97-63fbf1e872c8" class="jxgbox" style="width: 300px; height: 300px;"></div> 5338 * <script type="text/javascript"> 5339 * (function() { 5340 * JXG.JSXGraph.initBoard('JXG6a967d83-4179-4827-9e97-63fbf1e872c8', 5341 * {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false, 5342 * grid: { theme: 5 }, 5343 * }); 5344 * })(); 5345 * </script> <pre> 5346 * 5347 * @example 5348 * // Theme 6 5349 * // grid of circles with points in between 5350 * 5351 * JXG.JSXGraph.initBoard('jxgbox', { 5352 * boundingbox: [-4, 4, 4, -4], axis: false, 5353 * grid: { theme: 6 }, 5354 * }); 5355 * </pre> <div id="JXG28bee3da-a7ef-4590-9a18-38d1b99d09ce" class="jxgbox" style="width: 300px; height: 300px;"></div> 5356 * <script type="text/javascript"> 5357 * (function() { 5358 * JXG.JSXGraph.initBoard('JXG28bee3da-a7ef-4590-9a18-38d1b99d09ce', 5359 * {boundingbox: [-4, 4, 4, -4], axis: false, showcopyright: false, shownavigation: false, 5360 * grid: { theme: 6 }, 5361 * }); 5362 * })(); 5363 * </script> <pre> 5364 */ 5365 themes: [ 5366 { 5367 // default values 5368 }, 5369 5370 { // Theme 1: quadratic grid appearance with distance of major grid elements in x- and y-direction set to the primarily smaller one 5371 forceSquare: 'min', 5372 major: { 5373 face: 'line' 5374 } 5375 }, 5376 5377 { // Theme 2: lines and points in between 5378 major: { 5379 face: 'line' 5380 }, 5381 minor: { 5382 size: 3, 5383 face: 'point' 5384 }, 5385 minorElements: 'auto' 5386 }, 5387 5388 { // Theme 3: lines and thinner lines in between 5389 major: { 5390 face: 'line' 5391 }, 5392 minor: { 5393 face: 'line', 5394 strokeOpacity: 0.25 5395 }, 5396 minorElements: 'auto' 5397 }, 5398 5399 { // Theme 4: lines with grid of '+'s plotted in between 5400 major: { 5401 face: 'line' 5402 }, 5403 minor: { 5404 face: '+', 5405 size: '95%' 5406 }, 5407 minorElements: 'auto' 5408 }, 5409 5410 { // Theme 5: grid of '+'s and more points in between 5411 major: { 5412 face: '+', 5413 size: 10, 5414 strokeOpacity: 1 5415 }, 5416 minor: { 5417 face: 'point', 5418 size: 3 5419 }, 5420 minorElements: 'auto' 5421 }, 5422 5423 { // Theme 6: grid of circles with points in between 5424 major: { 5425 face: 'circle', 5426 size: 8, 5427 fillColor: '#c0c0c0' 5428 }, 5429 minor: { 5430 face: 'point', 5431 size: 3 5432 }, 5433 minorElements: 'auto' 5434 } 5435 ] 5436 5437 /**#@-*/ 5438 }, 5439 5440 group: { 5441 needsRegularUpdate: true 5442 }, 5443 5444 /* special html slider options */ 5445 htmlslider: { 5446 /**#@+ 5447 * @visprop 5448 */ 5449 5450 // /** 5451 // * 5452 // * These affect the DOM element input type="range". 5453 // * The other attributes affect the DOM element div containing the range element. 5454 // */ 5455 widthRange: 100, 5456 widthOut: 34, 5457 step: 0.01, 5458 5459 frozen: true, 5460 isLabel: false, 5461 strokeColor: '#000000', 5462 display: 'html', 5463 anchorX: 'left', 5464 anchorY: 'middle', 5465 withLabel: false 5466 5467 /**#@-*/ 5468 }, 5469 5470 /* special image options */ 5471 image: { 5472 /**#@+ 5473 * @visprop 5474 */ 5475 5476 imageString: null, 5477 fillOpacity: 1.0, 5478 highlightFillOpacity: 0.6, 5479 5480 5481 /** 5482 * Defines the CSS class used by the image. CSS attributes defined in 5483 * this class will overwrite the corresponding JSXGraph attributes, e.g. 5484 * opacity. 5485 * The default CSS class is defined in jsxgraph.css. 5486 * 5487 * @name Image#cssClass 5488 * 5489 * @see Image#highlightCssClass 5490 * @type String 5491 * @default 'JXGimage' 5492 */ 5493 cssClass: 'JXGimage', 5494 5495 /** 5496 * Defines the CSS class used by the image when highlighted. 5497 * CSS attributes defined in this class will overwrite the 5498 * corresponding JSXGraph attributes, e.g. highlightFillOpacity. 5499 * The default CSS class is defined in jsxgraph.css. 5500 * 5501 * @name Image#highlightCssClass 5502 * 5503 * @see Image#cssClass 5504 * @type String 5505 * @default 'JXGimageHighlight' 5506 */ 5507 highlightCssClass: 'JXGimageHighlight', 5508 5509 /** 5510 * Image rotation in degrees. 5511 * 5512 * @name Image#rotate 5513 * @type Number 5514 * @default 0 5515 */ 5516 rotate: 0, 5517 5518 /** 5519 * Defines together with {@link Image#snapSizeY} the grid the image snaps on to. 5520 * The image will only snap on user coordinates which are 5521 * integer multiples to snapSizeX in x and snapSizeY in y direction. 5522 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 5523 * of the default ticks of the default x axes of the board. 5524 * 5525 * @name Image#snapSizeX 5526 * 5527 * @see Point#snapToGrid 5528 * @see Image#snapSizeY 5529 * @see JXG.Board#defaultAxes 5530 * @type Number 5531 * @default 1 5532 */ 5533 snapSizeX: 1, 5534 5535 /** 5536 * Defines together with {@link Image#snapSizeX} the grid the image snaps on to. 5537 * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 5538 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 5539 * of the default ticks of the default y axes of the board. 5540 * 5541 * @name Image#snapSizeY 5542 * 5543 * @see Point#snapToGrid 5544 * @see Image#snapSizeX 5545 * @see JXG.Board#defaultAxes 5546 * @type Number 5547 * @default 1 5548 */ 5549 snapSizeY: 1, 5550 5551 /** 5552 * List of attractor elements. If the distance of the image is less than 5553 * attractorDistance the image is made to glider of this element. 5554 * 5555 * @name Image#attractors 5556 * 5557 * @type Array 5558 * @default empty 5559 */ 5560 attractors: [] 5561 5562 /**#@-*/ 5563 }, 5564 5565 /* special implicitcurve options */ 5566 implicitcurve: { 5567 /**#@+ 5568 * @visprop 5569 */ 5570 5571 /** 5572 * Defines the margin (in user coordinates) around the JSXGraph board in which the 5573 * implicit curve is plotted. 5574 * 5575 * @name ImplicitCurve#margin 5576 * @type {Number|Function} 5577 * @default 1 5578 */ 5579 margin: 1, 5580 5581 /** 5582 * Horizontal resolution: distance (in pixel) between vertical lines to search for components of the implicit curve. 5583 * A small number increases the running time. For large number components may be missed. 5584 * Minimum value is 0.01. 5585 * 5586 * @name ImplicitCurve#resolution_outer 5587 * @type {Number|Function} 5588 * @default 5 5589 */ 5590 resolution_outer: 5, 5591 5592 /** 5593 * Vertical resolution (in pixel) to search for components of the implicit curve. 5594 * A small number increases the running time. For large number components may be missed. 5595 * Minimum value is 0.01. 5596 * 5597 * @name ImplicitCurve#resolution_inner 5598 * @type {Number|Function} 5599 * @default 5 5600 */ 5601 resolution_inner: 5, 5602 5603 /** 5604 * Maximum iterations for one component of the implicit curve. 5605 * 5606 * @name ImplicitCurve#max_steps 5607 * @type {Number|Function} 5608 * @default 1024 5609 */ 5610 max_steps: 1024, 5611 5612 /** 5613 * Angle α<sub>0</sub> between two successive tangents: determines the smoothness of 5614 * the curve. 5615 * 5616 * @name ImplicitCurve#alpha_0 5617 * @type {Number|Function} 5618 * @default 0.05 5619 */ 5620 alpha_0: 0.05, 5621 5622 /** 5623 * Tolerance to find starting points for the tracing phase of a component. 5624 * 5625 * @name ImplicitCurve#tol_0 5626 * @type {Number|Function} 5627 * @default JXG.Math.eps 5628 */ 5629 tol_u0: Mat.eps, 5630 5631 /** 5632 * Tolerance for the Newton steps. 5633 * 5634 * @name ImplicitCurve#tol_newton 5635 * @type {Number|Function} 5636 * @default 1.0e-7 5637 */ 5638 tol_newton: 1.0e-7, 5639 5640 /** 5641 * Tolerance for cusp / bifurcation detection. 5642 * 5643 * @name ImplicitCurve#tol_cusp 5644 * @type {Number|Function} 5645 * @default 0.05 5646 */ 5647 tol_cusp: 0.05, 5648 5649 /** 5650 * If two points are closer than this value, we bail out of the tracing phase for that 5651 * component. 5652 * 5653 * @name ImplicitCurve#tol_progress 5654 * @type {Number|Function} 5655 * @default 0.0001 5656 */ 5657 tol_progress: 0.0001, 5658 5659 /** 5660 * Half of the box size (in user units) to search for existing line segments in the quadtree. 5661 * 5662 * @name ImplicitCurve#qdt_box 5663 * @type {Number|Function} 5664 * @default 0.2 5665 */ 5666 qdt_box: 0.2, 5667 5668 /** 5669 * Inverse of desired number of Newton steps. 5670 * 5671 * @name ImplicitCurve#kappa_0 5672 * @type {Number|Function} 5673 * @default 0.2 5674 */ 5675 kappa_0: 0.2, 5676 5677 /** 5678 * Allowed distance (in user units) of predictor point to curve. 5679 * 5680 * @name ImplicitCurve#delta_0 5681 * @type {Number|Function} 5682 * @default 0.05 5683 */ 5684 delta_0: 0.05, 5685 5686 /** 5687 * Initial step width (in user units). 5688 * 5689 * @name ImplicitCurve#h_initial 5690 * @type {Number|Function} 5691 * @default 0.1 5692 */ 5693 h_initial: 0.1, 5694 5695 /** 5696 * If h is below this threshold (in user units), we bail out 5697 * of the tracing phase of that component. 5698 * 5699 * @name ImplicitCurve#h_critical 5700 * @type {Number|Function} 5701 * @default 0.001 5702 */ 5703 h_critical: 0.001, 5704 5705 /** 5706 * Maximum step width (in user units). 5707 * 5708 * @name ImplicitCurve#h_max 5709 * @type {Number|Function} 5710 * @default 1 5711 */ 5712 h_max: 1, 5713 5714 /** 5715 * Allowed distance (in user units multiplied by actual step width) to detect loop. 5716 * 5717 * @name ImplicitCurve#loop_dist 5718 * @type {Number|Function} 5719 * @default 0.09 5720 */ 5721 loop_dist: 0.09, 5722 5723 /** 5724 * Minimum acos of angle to detect loop. 5725 * 5726 * @name ImplicitCurve#loop_dir 5727 * @type {Number|Function} 5728 * @default 0.99 5729 */ 5730 loop_dir: 0.99, 5731 5732 /** 5733 * Use Gosper's loop detector. 5734 * 5735 * @name ImplicitCurve#loop_detection 5736 * @type {Boolean|Function} 5737 * @default true 5738 */ 5739 loop_detection: true 5740 5741 /**#@-*/ 5742 }, 5743 5744 /* special options for incircle of 3 points */ 5745 incircle: { 5746 /**#@+ 5747 * @visprop 5748 */ 5749 5750 fillColor: 'none', 5751 highlightFillColor: 'none', 5752 strokeColor: Color.palette.blue, 5753 highlightStrokeColor: '#c3d9ff', 5754 5755 /** 5756 * Attributes of circle center. 5757 * 5758 * @type Point 5759 * @name Incircle#center 5760 */ 5761 center: { // center point 5762 visible: false, 5763 fixed: false, 5764 withLabel: false, 5765 fillColor: Color.palette.red, 5766 strokeColor: Color.palette.red, 5767 highlightFillColor: '#c3d9ff', 5768 highlightStrokeColor: '#c3d9ff', 5769 name: '' 5770 } 5771 /**#@-*/ 5772 }, 5773 5774 inequality: { 5775 /**#@+ 5776 * @visprop 5777 */ 5778 5779 fillColor: Color.palette.red, 5780 fillOpacity: 0.2, 5781 strokeColor: 'none', 5782 5783 /** 5784 * By default an inequality is less (or equal) than. Set inverse to <tt>true</tt> will consider the inequality 5785 * greater (or equal) than. 5786 * 5787 * @type Boolean 5788 * @default false 5789 * @name Inequality#inverse 5790 * @visprop 5791 */ 5792 inverse: false 5793 /**#@-*/ 5794 }, 5795 5796 infobox: { 5797 /**#@+ 5798 * @visprop 5799 */ 5800 5801 /** 5802 * Horizontal offset in pixel of the infobox text from its anchor point. 5803 * 5804 * @type Number 5805 * @default -20 5806 * @name JXG.Board.infobox#distanceX 5807 * @visprop 5808 */ 5809 distanceX: -20, 5810 5811 /** 5812 * Vertical offset in pixel of the infobox text from its anchor point. 5813 * 5814 * @type Number 5815 * @default 25 5816 * @name JXG.Board.infobox#distanceY 5817 * @visprop 5818 */ 5819 distanceY: 25, 5820 5821 /** 5822 * Internationalization support for infobox text. 5823 * 5824 * @name JXG.Board.infobox#intl 5825 * @type object 5826 * @default <pre>{ 5827 * enabled: 'inherit', 5828 * options: {} 5829 * }</pre> 5830 * @visprop 5831 * @see JXG.Board#intl 5832 * @see Text#intl 5833 */ 5834 intl: { 5835 enabled: 'inherit', 5836 options: {} 5837 }, 5838 5839 fontSize: 12, 5840 isLabel: false, 5841 strokeColor: '#bbbbbb', 5842 display: 'html', // 'html' or 'internal' 5843 anchorX: 'left', // 'left', 'middle', or 'right': horizontal alignment 5844 // of the text. 5845 anchorY: 'middle', // 'top', 'middle', or 'bottom': vertical alignment 5846 // of the text. 5847 cssClass: 'JXGinfobox', 5848 rotate: 0, // works for non-zero values only in combination 5849 // with display=='internal' 5850 visible: true, 5851 parse: false, 5852 transitionDuration: 0, 5853 needsRegularUpdate: false, 5854 tabindex: null, 5855 viewport: [0, 0, 0, 0] 5856 5857 /**#@-*/ 5858 }, 5859 5860 /* special options for integral */ 5861 integral: { 5862 /**#@+ 5863 * @visprop 5864 */ 5865 5866 axis: 'x', // 'x' or 'y' 5867 withLabel: true, // Show integral value as text 5868 fixed: true, 5869 strokeWidth: 0, 5870 strokeOpacity: 0, 5871 fillColor: Color.palette.red, 5872 fillOpacity: 0.3, 5873 highlightFillColor: Color.palette.red, 5874 highlightFillOpacity: 0.2, 5875 5876 /** 5877 * Attributes of the (left) starting point of the integral. 5878 * 5879 * @type Point 5880 * @name Integral#curveLeft 5881 * @see Integral#baseLeft 5882 */ 5883 curveLeft: { // Start point 5884 visible: true, 5885 withLabel: false, 5886 color: Color.palette.red, 5887 fillOpacity: 0.8, 5888 layer: 9 5889 }, 5890 5891 /** 5892 * Attributes of the (left) base point of the integral. 5893 * 5894 * @type Point 5895 * @name Integral#baseLeft 5896 * @see Integral#curveLeft 5897 */ 5898 baseLeft: { // Start point 5899 visible: false, 5900 fixed: false, 5901 withLabel: false, 5902 name: '' 5903 }, 5904 5905 /** 5906 * Attributes of the (right) end point of the integral. 5907 * 5908 * @type Point 5909 * @name Integral#curveRight 5910 * @see Integral#baseRight 5911 */ 5912 curveRight: { // End point 5913 visible: true, 5914 withLabel: false, 5915 color: Color.palette.red, 5916 fillOpacity: 0.8, 5917 layer: 9 5918 }, 5919 5920 /** 5921 * Attributes of the (right) base point of the integral. 5922 * 5923 * @type Point 5924 * @name Integral#baseRight 5925 * @see Integral#curveRight 5926 */ 5927 baseRight: { // End point 5928 visible: false, 5929 fixed: false, 5930 withLabel: false, 5931 name: '' 5932 }, 5933 5934 /** 5935 * Attributes for integral label. 5936 * 5937 * @type Label 5938 * @name Integral#label 5939 * @default <pre>{ 5940 * fontSize: 20, 5941 * digits: 4, 5942 * intl: { 5943 * enabled: false, 5944 * options: {} 5945 * } 5946 * }</pre> 5947 */ 5948 label: { 5949 fontSize: 20, 5950 digits: 4, 5951 intl: { 5952 enabled: false, 5953 options: {} 5954 } 5955 } 5956 /**#@-*/ 5957 }, 5958 5959 /* special input options */ 5960 input: { 5961 /**#@+ 5962 * @visprop 5963 */ 5964 5965 /** 5966 * Control the attribute "disabled" of the HTML input field. 5967 * 5968 * @name disabled 5969 * @memberOf Input.prototype 5970 * 5971 * @type Boolean 5972 * @default false 5973 */ 5974 disabled: false, 5975 5976 /** 5977 * Control the attribute "maxlength" of the HTML input field. 5978 * 5979 * @name maxlength 5980 * @memberOf Input.prototype 5981 * 5982 * @type Number 5983 * @default 524288 (as in HTML) 5984 */ 5985 maxlength: 524288, 5986 5987 display: 'html' 5988 5989 /**#@-*/ 5990 }, 5991 5992 /* special intersection point options */ 5993 intersection: { 5994 /**#@+ 5995 * @visprop 5996 */ 5997 5998 /** 5999 * Used in {@link JXG.Intersection}. 6000 * This flag sets the behaviour of intersection points of e.g. 6001 * two segments. If true, the intersection is treated as intersection of lines. If false 6002 * the intersection point exists if the segments intersect setwise. 6003 * 6004 * @name Intersection.alwaysIntersect 6005 * @type Boolean 6006 * @default true 6007 */ 6008 alwaysIntersect: true 6009 6010 /**#@-*/ 6011 }, 6012 6013 /* special label options */ 6014 label: { 6015 /**#@+ 6016 * @visprop 6017 */ 6018 6019 visible: 'inherit', 6020 strokeColor: '#000000', 6021 strokeOpacity: 1, 6022 highlightStrokeOpacity: 0.666666, 6023 highlightStrokeColor: '#000000', 6024 6025 fixed: true, 6026 6027 /** 6028 * Point labels are positioned by setting {@link Point#anchorX}, {@link Point#anchorY} 6029 * and {@link Label#offset}. 6030 * For line, circle and curve elements (and their derived objects) 6031 * there are two possibilities to position labels. 6032 * <p> 6033 * The first possibility uses the <a href="https://www.tug.org/metapost.html">MetaPost</a> system: 6034 * Possible string values for the position of a label for 6035 * label anchor points are: 6036 * <ul> 6037 * <li> 'first' (lines only) 6038 * <li> 'last' (lines only) 6039 * <li> 'lft' 6040 * <li> 'rt' 6041 * <li> 'top' 6042 * <li> 'bot' 6043 * <li> 'ulft' 6044 * <li> 'urt' 6045 * <li> 'llft' 6046 * <li> 'lrt' 6047 * </ul> 6048 * <p> 6049 * Since v1.9.0 there is a second possibility: 6050 * With <tt>position: 'len side'</tt> the label can be positioned exactly along the 6051 * element's path. Here, 6052 * <ul> 6053 * <li> 'len' is an expression of the form 6054 * <ul> 6055 * <li> xfr, denoting a fraction of the whole. x is expected to be a number between 0 and 1. 6056 * <li> x%, a percentage. x is expected to be a number between 0 and 100. 6057 * <li> x, a number: only possible for line elements and circles. For lines, the label is positioned x 6058 * user units from the starting point. For circles, the number is interpreted as degree, e.g. 45°. 6059 * For everything else, 0 is taken instead. 6060 * <li> xpx, a pixel value: only possible for line elements. 6061 * The label is positioned x pixels from the starting point. 6062 * For non-lines, 0% is taken instead. 6063 * </ul> 6064 * <li> 'side' is either 'left' or 'right'. The label is positioned to the left or right of the path, when moving from the 6065 * first point to the last. For circles, 'left' means inside of the circle, 'right' means outside of the circle. 6066 * The distance of the label from the path can be controlled by {@link Label#distance}. 6067 * </ul> 6068 * Recommended for this second possibility is to use anchorX: 'middle' and 'anchorY: 'middle'. 6069 * 6070 * @example 6071 * var l1 = board.create('segment', [[-3, 2], [3, 2]], { 6072 * name: 'l_1', 6073 * withLabel: true, 6074 * point1: { visible: true, name: 'A', withLabel: true }, 6075 * point2: { visible: true, name: 'B', withLabel: true }, 6076 * label: { 6077 * anchorX: 'middle', 6078 * anchorY: 'middle', 6079 * offset: [0, 0], 6080 * distance: 1.2, 6081 * position: '0.2fr left' 6082 * } 6083 * }); 6084 * 6085 * </pre><div id="JXG66395d34-fd7f-42d9-97dc-14ae8882c11f" class="jxgbox" style="width: 300px; height: 300px;"></div> 6086 * <script type="text/javascript"> 6087 * (function() { 6088 * var board = JXG.JSXGraph.initBoard('JXG66395d34-fd7f-42d9-97dc-14ae8882c11f', 6089 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 6090 * var l1 = board.create('segment', [[-3, 2], [3, 2]], { 6091 * name: 'l_1', 6092 * withLabel: true, 6093 * point1: { visible: true, name: 'A', withLabel: true }, 6094 * point2: { visible: true, name: 'B', withLabel: true }, 6095 * label: { 6096 * anchorX: 'middle', 6097 * anchorY: 'middle', 6098 * offset: [0, 0], 6099 * distance: 1.2, 6100 * position: '0.2fr left' 6101 * } 6102 * }); 6103 * 6104 * })(); 6105 * 6106 * </script><pre> 6107 * 6108 * @example 6109 * var c1 = board.create('circle', [[0, 0], 3], { 6110 * name: 'c_1', 6111 * withLabel: true, 6112 * label: { 6113 * anchorX: 'middle', 6114 * anchorY: 'middle', 6115 * offset: [0, 0], 6116 * fontSize: 32, 6117 * distance: 1.5, 6118 * position: '50% right' 6119 * } 6120 * }); 6121 * 6122 * </pre><div id="JXG98ee16ab-fc5f-476c-bf57-0107ac69d91e" class="jxgbox" style="width: 300px; height: 300px;"></div> 6123 * <script type="text/javascript"> 6124 * (function() { 6125 * var board = JXG.JSXGraph.initBoard('JXG98ee16ab-fc5f-476c-bf57-0107ac69d91e', 6126 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 6127 * var c1 = board.create('circle', [[0, 0], 3], { 6128 * name: 'c_1', 6129 * withLabel: true, 6130 * label: { 6131 * anchorX: 'middle', 6132 * anchorY: 'middle', 6133 * offset: [0, 0], 6134 * fontSize: 32, 6135 * distance: 1.5, 6136 * position: '50% right' 6137 * } 6138 * }); 6139 * 6140 * })(); 6141 * 6142 * </script><pre> 6143 * 6144 * @example 6145 * var cu1 = board.create('functiongraph', ['3 * sin(x)', -3, 3], { 6146 * name: 'cu_1', 6147 * withLabel: true, 6148 * label: { 6149 * anchorX: 'middle', 6150 * anchorY: 'middle', 6151 * offset: [0, 0], 6152 * distance: 2, 6153 * position: '0.8fr right' 6154 * } 6155 * }); 6156 * 6157 * </pre><div id="JXG65b2edee-12d8-48a1-94b2-d6e79995de8c" class="jxgbox" style="width: 300px; height: 300px;"></div> 6158 * <script type="text/javascript"> 6159 * (function() { 6160 * var board = JXG.JSXGraph.initBoard('JXG65b2edee-12d8-48a1-94b2-d6e79995de8c', 6161 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 6162 * var cu1 = board.create('functiongraph', ['3 * sin(x)', -3, 3], { 6163 * name: 'cu_1', 6164 * withLabel: true, 6165 * label: { 6166 * anchorX: 'middle', 6167 * anchorY: 'middle', 6168 * offset: [0, 0], 6169 * distance: 2, 6170 * position: '0.8fr right' 6171 * } 6172 * }); 6173 * 6174 * })(); 6175 * 6176 * </script><pre> 6177 * 6178 * @example 6179 * var A = board.create('point', [-1, 4]); 6180 * var B = board.create('point', [-1, -4]); 6181 * var C = board.create('point', [1, 1]); 6182 * var cu2 = board.create('ellipse', [A, B, C], { 6183 * name: 'cu_2', 6184 * withLabel: true, 6185 * label: { 6186 * anchorX: 'middle', 6187 * anchorY: 'middle', 6188 * offset: [0, 0], 6189 * fontSize: 20, 6190 * distance: 1.5, 6191 * position: '75% right' 6192 * } 6193 * }); 6194 * 6195 * </pre><div id="JXG9c3b2213-1b5a-4cb8-b547-a8d179b851f2" class="jxgbox" style="width: 300px; height: 300px;"></div> 6196 * <script type="text/javascript"> 6197 * (function() { 6198 * var board = JXG.JSXGraph.initBoard('JXG9c3b2213-1b5a-4cb8-b547-a8d179b851f2', 6199 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 6200 * var A = board.create('point', [-1, 4]); 6201 * var B = board.create('point', [-1, -4]); 6202 * var C = board.create('point', [1, 1]); 6203 * var cu2 = board.create('ellipse', [A, B, C], { 6204 * name: 'cu_2', 6205 * withLabel: true, 6206 * label: { 6207 * anchorX: 'middle', 6208 * anchorY: 'middle', 6209 * offset: [0, 0], 6210 * fontSize: 20, 6211 * distance: 1.5, 6212 * position: '75% right' 6213 * } 6214 * }); 6215 * 6216 * })(); 6217 * 6218 * </script><pre> 6219 * 6220 * 6221 * @name Label#position 6222 * @type String 6223 * @default 'urt' 6224 * @see Label#distance 6225 * @see Label#offset 6226 */ 6227 position: 'urt', 6228 6229 /** 6230 * Distance of the label from a path element, like line, circle, curve. 6231 * The true distance is this value multiplied by 0.5 times the size of the bounding box of the label text. 6232 * That means, with a value of 1 the label will touch the path element. 6233 * @name Label#distance 6234 * @type Number 6235 * @default 1.5 6236 * 6237 * @see Label#position 6238 * 6239 */ 6240 distance: 1.5, 6241 6242 /** 6243 * Label offset from label anchor. 6244 * The label anchor is determined by {@link Label#position} 6245 * 6246 * @name Label#offset 6247 * @see Label#position 6248 * @type Array 6249 * @default [10,10] 6250 */ 6251 offset: [10, 10], 6252 6253 /** 6254 * Automatic position of label text. When called first, the positioning algorithm 6255 * starts at the position defined by offset. 6256 * The algorithm tries to find a position with the least number of 6257 * overlappings with other elements, while retaining the distance 6258 * to the anchor element. 6259 * 6260 * @name Label#autoPosition 6261 * @see Label#offset 6262 * @type Boolean 6263 * @default false 6264 * 6265 * @example 6266 * var p1 = board.create('point', [-2, 1], {id: 'A'}); 6267 * var p2 = board.create('point', [-0.85, 1], { 6268 * name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]} 6269 * }); 6270 * var p3 = board.create('point', [-1, 1.2], { 6271 * name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]} 6272 * }); 6273 * var c = board.create('circle', [p1, p2]); 6274 * var l = board.create('line', [p1, p2]); 6275 * 6276 * </pre><div id="JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2" class="jxgbox" style="width: 300px; height: 300px;"></div> 6277 * <script type="text/javascript"> 6278 * (function() { 6279 * var board = JXG.JSXGraph.initBoard('JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2', 6280 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 6281 * var p1 = board.create('point', [-2, 1], {id: 'A'}); 6282 * var p2 = board.create('point', [-0.85, 1], {name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}}); 6283 * var p3 = board.create('point', [-1, 1.2], {name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}}); 6284 * var c = board.create('circle', [p1, p2]); 6285 * var l = board.create('line', [p1, p2]); 6286 * 6287 * })(); 6288 * 6289 * </script><pre> 6290 * 6291 * 6292 */ 6293 autoPosition: false, 6294 6295 /** 6296 * The auto position algorithm tries to put a label to a conflict-free 6297 * position around it's anchor element. For this, the algorithm tests 12 positions 6298 * around the anchor element starting at a distance from the anchor 6299 * defined here (in pixel). 6300 * 6301 * @name Label#autoPositionMinDistance 6302 * @see Label#autoPosition 6303 * @see Label#autoPositionMaxDistance 6304 * @type Number 6305 * @default 12 6306 * 6307 */ 6308 autoPositionMinDistance: 12, 6309 6310 /** 6311 * The auto position algorithm tries to put a label to a conflict-free 6312 * position around it's anchor element. For this, the algorithm tests 12 positions 6313 * around the anchor element up to a distance from the anchor 6314 * defined here (in pixel). 6315 * 6316 * @name Label#autoPositionMaxDistance 6317 * @see Label#autoPosition 6318 * @see Label#autoPositionMinDistance 6319 * @type Number 6320 * @default 28 6321 * 6322 */ 6323 autoPositionMaxDistance: 28 6324 6325 /**#@-*/ 6326 }, 6327 6328 /* special legend options */ 6329 legend: { 6330 /** 6331 * @visprop 6332 */ 6333 6334 /** 6335 * Default style of a legend element. The only possible value is 'vertical'. 6336 * @name Legend#style 6337 * @type String 6338 * @default 'vertical' 6339 */ 6340 style: 'vertical', 6341 6342 /** 6343 * Label names of a legend element. 6344 * @name Legend#labels 6345 * @type Array 6346 * @default "['1', '2', '3', '4', '5', '6', '7', '8']" 6347 */ 6348 labels: ['1', '2', '3', '4', '5', '6', '7', '8'], 6349 6350 /** 6351 * (Circular) array of label colors. 6352 * @name Legend#colors 6353 * @type Array 6354 * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']" 6355 */ 6356 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 6357 6358 /** 6359 * Height (in px) of one legend entry 6360 * @name Legend#rowHeight 6361 * @type Number 6362 * @default 20 6363 * 6364 */ 6365 rowHeight: 20, 6366 6367 strokeWidth: 5 6368 6369 /**#@-*/ 6370 }, 6371 6372 /* special line options */ 6373 line: { 6374 /**#@+ 6375 * @visprop 6376 */ 6377 6378 /** 6379 * Configure the arrow head at the position of its first point or the corresponding 6380 * intersection with the canvas border 6381 * 6382 * The attribute firstArrow can be a Boolean or an object with the following sub-attributes: 6383 * <pre> 6384 * { 6385 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 6386 * size: 6, // size of the arrow head. Default value is 6. 6387 * // This value is multiplied with the strokeWidth of the line 6388 * // Exception: for type=7 size is ignored 6389 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value 6390 * } 6391 * </pre> 6392 * type=7 is the default for curves if firstArrow: true 6393 * <p> 6394 * An arrow head can be turned off with line.setAttribute({firstArrow: false}). 6395 * 6396 * @example 6397 * board.options.line.lastArrow = false; 6398 * board.options.line.firstArrow = {size: 10, highlightSize: 10}; 6399 * board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}}; 6400 * board.options.line.strokeWidth = 4; 6401 * board.options.line.highlightStrokeWidth = 4; 6402 * 6403 * board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}}); 6404 * board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}}); 6405 * board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}}); 6406 * board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}}); 6407 * board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}}); 6408 * board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}}); 6409 * board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}}); 6410 * 6411 * </pre><div id="JXGc94a93da-c942-4204-8bb6-b39726cbb09b" class="jxgbox" style="width: 300px; height: 300px;"></div> 6412 * <script type="text/javascript"> 6413 * (function() { 6414 * var board = JXG.JSXGraph.initBoard('JXGc94a93da-c942-4204-8bb6-b39726cbb09b', 6415 * {boundingbox: [-6, 6, 4,-4], axis: false, showcopyright: false, shownavigation: false}); 6416 * board.options.line.lastArrow = false; 6417 * board.options.line.firstArrow = {size: 10, highlightSize: 10}; 6418 * board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}}; 6419 * board.options.line.strokeWidth = 4; 6420 * board.options.line.highlightStrokeWidth = 4; 6421 * 6422 * board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}}); 6423 * board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}}); 6424 * board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}}); 6425 * board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}}); 6426 * board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}}); 6427 * board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}}); 6428 * board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}}); 6429 * 6430 * })(); 6431 * 6432 * </script><pre> 6433 * 6434 * @name Line#firstArrow 6435 * @see Line#lastArrow 6436 * @see Line#touchFirstPoint 6437 * @type Boolean | Object 6438 * @default false 6439 */ 6440 firstArrow: false, 6441 6442 /** 6443 * Configure the arrow head at the position of its second point or the corresponding 6444 * intersection with the canvas border. 6445 * 6446 * The attribute lastArrow can be a Boolean or an object with the following sub-attributes: 6447 * <pre> 6448 * { 6449 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 6450 * size: 6, // size of the arrow head. Default value is 6. 6451 * // This value is multiplied with the strokeWidth of the line. 6452 * // Exception: for type=7 size is ignored 6453 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6. 6454 * } 6455 * </pre> 6456 * type=7 is the default for curves if lastArrow: true 6457 * <p> 6458 * An arrow head can be turned off with line.setAttribute({lastArrow: false}). 6459 * 6460 * @example 6461 * var p1 = board.create('point', [-5, 2], {size:1}); 6462 * var p2 = board.create('point', [5, 2], {size:10}); 6463 * var li = board.create('segment', ['A','B'], 6464 * {name:'seg', 6465 * strokeColor:'#000000', 6466 * strokeWidth:1, 6467 * highlightStrokeWidth: 5, 6468 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 6469 * touchLastPoint: true, 6470 * firstArrow: {type: 3, size: 8} 6471 * }); 6472 * 6473 * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div> 6474 * <script type="text/javascript"> 6475 * (function() { 6476 * var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3', 6477 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 6478 * var p1 = board.create('point', [-5, 2], {size:1}); 6479 * var p2 = board.create('point', [5, 2], {size:10}); 6480 * var li = board.create('segment', ['A','B'], 6481 * {name:'seg', 6482 * strokeColor:'#000000', 6483 * strokeWidth:1, 6484 * highlightStrokeWidth: 5, 6485 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 6486 * touchLastPoint: true, 6487 * firstArrow: {type: 3, size: 8} 6488 * }); 6489 * })(); 6490 * 6491 * </script> 6492 * 6493 * @example 6494 * board.options.line.strokeWidth = 4; 6495 * board.options.line.highlightStrokeWidth = 4; 6496 * board.options.line.firstArrow = false; 6497 * board.options.line.lastArrow = {size: 10, highlightSize: 10}; 6498 * board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}}; 6499 * 6500 * board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}}); 6501 * board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}}); 6502 * board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}}); 6503 * board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}}); 6504 * board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}}); 6505 * board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}}); 6506 * board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}}); 6507 * 6508 * </pre><div id="JXGca206b1c-e319-4899-8b90-778f53fd926d" class="jxgbox" style="width: 300px; height: 300px;"></div> 6509 * <script type="text/javascript"> 6510 * (function() { 6511 * var board = JXG.JSXGraph.initBoard('JXGca206b1c-e319-4899-8b90-778f53fd926d', 6512 * {boundingbox: [-6, 6, 6,-4], axis: false, showcopyright: false, shownavigation: false}); 6513 * board.options.line.strokeWidth = 4; 6514 * board.options.line.highlightStrokeWidth = 4; 6515 * board.options.line.firstArrow = false; 6516 * board.options.line.lastArrow = {size: 10, highlightSize: 10}; 6517 * board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}}; 6518 * 6519 * board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}}); 6520 * board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}}); 6521 * board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}}); 6522 * board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}}); 6523 * board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}}); 6524 * board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}}); 6525 * board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}}); 6526 * })(); 6527 * 6528 * </script><pre> 6529 * 6530 * @name Line#lastArrow 6531 * @see Line#firstArrow 6532 * @see Line#touchLastPoint 6533 * @type Boolean | Object 6534 * @default false 6535 */ 6536 lastArrow: false, 6537 6538 /** 6539 * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line 6540 * ends exactly at the border, if negative there is a margin to the inside, if positive the line 6541 * ends outside of the canvas (which is invisible). 6542 * 6543 * @name Line#margin 6544 * @type Number 6545 * @default 0 6546 */ 6547 margin: 0, 6548 6549 /** 6550 * If true, line stretches infinitely in direction of its first point. 6551 * Otherwise it ends at point1. 6552 * 6553 * @name Line#straightFirst 6554 * @see Line#straightLast 6555 * @type Boolean 6556 * @default true 6557 */ 6558 straightFirst: true, 6559 6560 /** 6561 * If true, line stretches infinitely in direction of its second point. 6562 * Otherwise it ends at point2. 6563 * 6564 * @name Line#straightLast 6565 * @see Line#straightFirst 6566 * @type Boolean 6567 * @default true 6568 */ 6569 straightLast: true, 6570 6571 fillColor: 'none', // Important for VML on IE 6572 highlightFillColor: 'none', // Important for VML on IE 6573 strokeColor: Color.palette.blue, 6574 highlightStrokeColor: '#c3d9ff', 6575 withTicks: false, 6576 6577 /** 6578 * Attributes for first defining point of the line. 6579 * 6580 * @type Point 6581 * @name Line#point1 6582 */ 6583 point1: { // Default values for point1 if created by line 6584 fillColor: Color.palette.red, 6585 strokeColor: Color.palette.red, 6586 highlightFillColor: '#c3d9ff', 6587 highlightStrokeColor: '#c3d9ff', 6588 layer: 9, 6589 6590 visible: false, 6591 withLabel: false, 6592 fixed: false, 6593 name: '' 6594 }, 6595 6596 /** 6597 * Attributes for second defining point of the line. 6598 * 6599 * @type Point 6600 * @name Line#point2 6601 */ 6602 point2: { // Default values for point2 if created by line 6603 fillColor: Color.palette.red, 6604 strokeColor: Color.palette.red, 6605 highlightFillColor: '#c3d9ff', 6606 highlightStrokeColor: '#c3d9ff', 6607 layer: 9, 6608 6609 visible: false, 6610 withLabel: false, 6611 fixed: false, 6612 name: '' 6613 }, 6614 6615 /** 6616 * Attributes for ticks of the line. 6617 * 6618 * @name Line#ticks 6619 * @type Object 6620 * @see Ticks 6621 */ 6622 ticks: { 6623 drawLabels: true, 6624 label: { 6625 offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts 6626 }, 6627 drawZero: false, 6628 insertTicks: false, 6629 ticksDistance: 1, 6630 minTicksDistance: 50, 6631 minorHeight: 4, // if <0: full width and height 6632 majorHeight: -1, // if <0: full width and height 6633 minorTicks: 4, 6634 strokeOpacity: 0.3, 6635 visible: 'inherit' 6636 }, 6637 6638 /** 6639 * Attributes for the line label. 6640 * 6641 * @type Object 6642 * @name Line#label 6643 * @see Label 6644 */ 6645 label: { 6646 position: 'llft' 6647 }, 6648 6649 /** 6650 * If set to true, the point will snap to a grid defined by 6651 * {@link Point#snapSizeX} and {@link Point#snapSizeY}. 6652 * 6653 * @see Point#snapSizeX 6654 * @see Point#snapSizeY 6655 * @type Boolean 6656 * @name Line#snapToGrid 6657 * @default false 6658 */ 6659 snapToGrid: false, 6660 6661 /** 6662 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 6663 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 6664 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 6665 * of the default ticks of the default x axes of the board. 6666 * 6667 * @see Point#snapToGrid 6668 * @see Point#snapSizeY 6669 * @see JXG.Board#defaultAxes 6670 * @type Number 6671 * @name Line#snapSizeX 6672 * @default 1 6673 */ 6674 snapSizeX: 1, 6675 6676 /** 6677 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 6678 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 6679 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 6680 * of the default ticks of the default y axes of the board. 6681 * 6682 * @see Point#snapToGrid 6683 * @see Point#snapSizeX 6684 * @see JXG.Board#defaultAxes 6685 * @type Number 6686 * @name Line#snapSizeY 6687 * @default 1 6688 */ 6689 snapSizeY: 1, 6690 6691 /** 6692 * If set to true, {@link Line#firstArrow} is set to true and the point is visible, 6693 * the arrow head will just touch the circle line of the start point of the line. 6694 * 6695 * @see Line#firstArrow 6696 * @type Boolean 6697 * @name Line#touchFirstPoint 6698 * @default false 6699 */ 6700 touchFirstPoint: false, 6701 6702 /** 6703 * If set to true, {@link Line#lastArrow} is set to true and the point is visible, 6704 * the arrow head will just touch the circle line of the start point of the line. 6705 * @see Line#firstArrow 6706 * @type Boolean 6707 * @name Line#touchLastPoint 6708 * @default false 6709 */ 6710 touchLastPoint: false 6711 6712 /**#@-*/ 6713 }, 6714 6715 /* special options for locus curves */ 6716 locus: { 6717 /**#@+ 6718 * @visprop 6719 */ 6720 6721 translateToOrigin: false, 6722 translateTo10: false, 6723 stretch: false, 6724 toOrigin: null, 6725 to10: null 6726 /**#@-*/ 6727 }, 6728 6729 /* special measurement options */ 6730 measurement: { 6731 /**#@+ 6732 * @visprop 6733 */ 6734 6735 baseUnit: '', 6736 units: {}, 6737 dim: null, 6738 6739 showPrefix: true, 6740 showSuffix: true, 6741 6742 prefix: '', 6743 suffix: '', 6744 6745 formatPrefix: function (txt) { return txt; }, 6746 formatSuffix: function (txt) { return txt; }, 6747 6748 formatCoords: function (x, y, z) { 6749 return '(' + x + ', ' + y + ')'; 6750 }, 6751 formatDirection: function (x, y) { 6752 return '(' + x + ', ' + y + ')'; 6753 } 6754 6755 /**#@-*/ 6756 }, 6757 6758 /* special metapost spline options */ 6759 metapostspline: { 6760 /**#@+ 6761 * @visprop 6762 */ 6763 6764 /** 6765 * Controls if the data points of the cardinal spline when given as 6766 * arrays should be converted into {@link JXG.Points}. 6767 * 6768 * @name createPoints 6769 * @memberOf Metapostspline.prototype 6770 * 6771 * @see Metapostspline#points 6772 * 6773 * @type Boolean 6774 * @default true 6775 */ 6776 createPoints: true, 6777 6778 /** 6779 * If set to true, the supplied coordinates are interpreted as 6780 * [[x_0, y_0], [x_1, y_1], p, ...]. 6781 * Otherwise, if the data consists of two arrays of equal length, 6782 * it is interpreted as 6783 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 6784 * 6785 * @name isArrayOfCoordinates 6786 * @memberOf Metapostspline.prototype 6787 * @type Boolean 6788 * @default true 6789 */ 6790 isArrayOfCoordinates: true, 6791 6792 /** 6793 * Attributes for the points generated by Metapost spline in cases 6794 * {@link createPoints} is set to true 6795 * 6796 * @name points 6797 * @memberOf Metapostspline.prototype 6798 * 6799 * @see Metapostspline#createPoints 6800 * @type Object 6801 */ 6802 points: { 6803 strokeOpacity: 0.5, 6804 fillOpacity: 0.5, 6805 highlightStrokeOpacity: 1.0, 6806 highlightFillOpacity: 1.0, 6807 withLabel: false, 6808 name: '', 6809 fixed: false 6810 } 6811 6812 /**#@-*/ 6813 }, 6814 6815 /* special mirrorelement options */ 6816 mirrorelement: { 6817 /**#@+ 6818 * @visprop 6819 */ 6820 6821 fixed: true, 6822 6823 /** 6824 * Attributes of mirror point, i.e. the point along which the element is mirrored. 6825 * 6826 * @type Point 6827 * @name mirrorelement#point 6828 */ 6829 point: {}, 6830 6831 /** 6832 * Attributes of circle center, i.e. the center of the circle, 6833 * if a circle is the mirror element and the transformation type is 'Euclidean' 6834 * 6835 * @type Point 6836 * @name mirrorelement#center 6837 */ 6838 center: {}, 6839 6840 /** 6841 * Type of transformation. Possible values are 'Euclidean', 'projective'. 6842 * 6843 * If the value is 'Euclidean', the mirror element of a circle is again a circle, 6844 * otherwise it is a conic section. 6845 * 6846 * @type String 6847 * @name mirrorelement#type 6848 * @default 'Euclidean' 6849 */ 6850 type: 'Euclidean' 6851 6852 /**#@-*/ 6853 }, 6854 6855 /* special nonreflexangle options */ 6856 nonreflexangle: { 6857 /**#@+ 6858 * @visprop 6859 */ 6860 6861 /**#@-*/ 6862 }, 6863 6864 // /* special options for Msector of 3 points */ 6865 // msector: { 6866 // strokeColor: '#000000', // Msector line 6867 // point: { // Msector point 6868 // visible: false, 6869 // fixed: false, 6870 // withLabel: false, 6871 // name: '' 6872 // } 6873 // }, 6874 6875 /* special options for normal lines */ 6876 normal: { 6877 /**#@+ 6878 * @visprop 6879 */ 6880 6881 strokeColor: '#000000', // normal line 6882 6883 /** 6884 * Attributes of helper point of normal. 6885 * 6886 * @type Point 6887 * @name Normal#point 6888 */ 6889 point: { 6890 visible: false, 6891 fixed: false, 6892 withLabel: false, 6893 name: '' 6894 } 6895 /**#@-*/ 6896 }, 6897 6898 /* special options for orthogonal projection points */ 6899 orthogonalprojection: { 6900 /**#@+ 6901 * @visprop 6902 */ 6903 /**#@-*/ 6904 }, 6905 6906 /* special otherintersection point options */ 6907 otherintersection: { 6908 /**#@+ 6909 * @visprop 6910 */ 6911 6912 /** 6913 * This flag sets the behavior of other intersection points of e.g. 6914 * a circle and a segment. If true, the intersection is treated as intersection with a line. If false 6915 * the intersection point exists if the segment intersects setwise. 6916 * 6917 * @name Otherintersection.alwaysIntersect 6918 * @type Boolean 6919 * @default true 6920 */ 6921 alwaysIntersect: true, 6922 6923 /** 6924 * Minimum distance (in user coordinates) for points to be defined as different. 6925 * For implicit curves and other non approximate curves this number might have to be 6926 * increased. 6927 * 6928 * @name Otherintersection.precision 6929 * @type Number 6930 * @default 0.001 6931 */ 6932 precision: 0.001 6933 6934 /**#@-*/ 6935 }, 6936 6937 /* special options for parallel lines */ 6938 parallel: { 6939 /**#@+ 6940 * @visprop 6941 */ 6942 6943 strokeColor: '#000000', // Parallel line 6944 6945 /** 6946 * Attributes of helper point of normal. 6947 * 6948 * @type Point 6949 * @name Parallel#point 6950 */ 6951 point: { 6952 visible: false, 6953 fixed: false, 6954 withLabel: false, 6955 name: '' 6956 }, 6957 6958 label: { 6959 position: 'llft' 6960 } 6961 /**#@-*/ 6962 }, 6963 6964 /* special parallelogram options */ 6965 parallelogram: { 6966 parallelpoint: { 6967 withLabel: false, 6968 name: '' 6969 } 6970 }, 6971 6972 /* special parallelpoint options */ 6973 parallelpoint: { 6974 }, 6975 6976 /* special perpendicular options */ 6977 perpendicular: { 6978 /**#@+ 6979 * @visprop 6980 */ 6981 6982 strokeColor: '#000000', // Perpendicular line 6983 straightFirst: true, 6984 straightLast: true 6985 /**#@-*/ 6986 }, 6987 6988 /* special perpendicular options */ 6989 perpendicularsegment: { 6990 /**#@+ 6991 * @visprop 6992 */ 6993 6994 strokeColor: '#000000', // Perpendicular segment 6995 straightFirst: false, 6996 straightLast: false, 6997 point: { // Perpendicular point 6998 visible: false, 6999 fixed: true, 7000 withLabel: false, 7001 name: '' 7002 } 7003 /**#@-*/ 7004 }, 7005 7006 /* special point options */ 7007 point: { 7008 /**#@+ 7009 * @visprop 7010 */ 7011 7012 withLabel: true, 7013 label: {}, 7014 7015 /** 7016 * This attribute was used to determined the point layout. It was derived from GEONExT and was 7017 * replaced by {@link Point#face} and {@link Point#size}. 7018 * 7019 * @name Point#style 7020 * 7021 * @see Point#face 7022 * @see Point#size 7023 * @type Number 7024 * @default 5 7025 * @deprecated 7026 */ 7027 style: 5, 7028 7029 /** 7030 * There are different point styles which differ in appearance. 7031 * Posssible values are 7032 * <table> 7033 * <tr><th>Input</th><th>Output</th></tr> 7034 * <tr><td>cross</td><td>x</td></tr> 7035 * <tr><td>circle</td><td>o</td></tr> 7036 * <tr><td>square, []</td><td>[]</td></tr> 7037 * <tr><td>plus</td><td>+</td></tr> 7038 * <tr><td>minus</td><td>-</td></tr> 7039 * <tr><td>divide</td><td>|</td></tr> 7040 * <tr><td>diamond</td><td><></td></tr> 7041 * <tr><td>diamond2</td><td><> (bigger)</td></tr> 7042 * <tr><td>triangleup</td><td>^, a, A</td></tr> 7043 * <tr><td>triangledown</td><td>v</td></tr> 7044 * <tr><td>triangleleft</td><td><</td></tr> 7045 * <tr><td>triangleright</td><td>></td></tr> 7046 * </table> 7047 * 7048 * @name Point#face 7049 * 7050 * @type String 7051 * @see JXG.Point#setStyle 7052 * @default circle 7053 */ 7054 face: 'o', 7055 7056 /** 7057 * Size of a point, either in pixel or user coordinates. 7058 * Means radius resp. half the width of a point (depending on the face). 7059 * 7060 * @name Point#size 7061 * 7062 * @see Point#face 7063 * @see JXG.Point#setStyle 7064 * @see Point#sizeUnit 7065 * @type Number 7066 * @default 3 7067 */ 7068 size: 3, 7069 7070 /** 7071 * Unit for size. 7072 * Possible values are 'screen' and 'user. 7073 * 7074 * @name Point#sizeUnit 7075 * 7076 * @see Point#size 7077 * @type String 7078 * @default 'screen' 7079 */ 7080 sizeUnit: 'screen', 7081 7082 strokeWidth: 2, 7083 7084 transitionProperties: ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width', 'width', 'height', 'rx', 'ry'], 7085 fillColor: Color.palette.red, 7086 strokeColor: Color.palette.red, 7087 highlightFillColor: '#c3d9ff', 7088 highlightStrokeColor: '#c3d9ff', 7089 // strokeOpacity: 1.0, 7090 // fillOpacity: 1.0, 7091 // highlightFillOpacity: 0.5, 7092 // highlightStrokeOpacity: 0.5, 7093 7094 // fillColor: '#ff0000', 7095 // highlightFillColor: '#eeeeee', 7096 // strokeWidth: 2, 7097 // strokeColor: '#ff0000', 7098 // highlightStrokeColor: '#c3d9ff', 7099 7100 /** 7101 * If true, the point size changes on zoom events. 7102 * 7103 * @type Boolean 7104 * @name Point#zoom 7105 * @default false 7106 * 7107 */ 7108 zoom: false, // Change the point size on zoom 7109 7110 /** 7111 * If true, the infobox is shown on mouse/pen over, if false not. 7112 * If the value is 'inherit', the value of 7113 * {@link JXG.Board#showInfobox} is taken. 7114 * 7115 * @name Point#showInfobox 7116 * @see JXG.Board#showInfobox 7117 * @type Boolean|String 7118 * @description true | false | 'inherit' 7119 * @default true 7120 */ 7121 showInfobox: 'inherit', 7122 7123 /** 7124 * Truncating rule for the digits in the infobox. 7125 * <ul> 7126 * <li>'auto': done automatically by JXG.autoDigits() 7127 * <li>'none': no truncation 7128 * <li>number: truncate after "number digits" with JXG.toFixed() 7129 * </ul> 7130 * 7131 * @name Point#infoboxDigits 7132 * 7133 * @type String| Number 7134 * @default 'auto' 7135 * @see JXG#autoDigits 7136 * @see JXG#toFixed 7137 */ 7138 infoboxDigits: 'auto', 7139 7140 draft: false, 7141 7142 /** 7143 * List of attractor elements. If the distance of the point is less than 7144 * attractorDistance the point is made to glider of this element. 7145 * 7146 * @name Point#attractors 7147 * 7148 * @type Array 7149 * @default empty 7150 */ 7151 attractors: [], 7152 7153 /** 7154 * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints. 7155 * Possible values are 'screen' and 'user'. 7156 * 7157 * @name Point#attractorUnit 7158 * 7159 * @see Point#attractorDistance 7160 * @see Point#snatchDistance 7161 * @see Point#snapToPoints 7162 * @see Point#attractors 7163 * @type String 7164 * @default 'user' 7165 */ 7166 attractorUnit: 'user', // 'screen', 'user' 7167 7168 /** 7169 * If the distance of the point to one of its attractors is less 7170 * than this number the point will be a glider on this 7171 * attracting element. 7172 * If set to zero nothing happens. 7173 * 7174 * @name Point#attractorDistance 7175 * 7176 * @type Number 7177 * @default 0.0 7178 */ 7179 attractorDistance: 0.0, 7180 7181 /** 7182 * If the distance of the point to one of its attractors is at least 7183 * this number the point will be released from being a glider on the 7184 * attracting element. 7185 * If set to zero nothing happens. 7186 * 7187 * @name Point#snatchDistance 7188 * 7189 * @type Number 7190 * @default 0.0 7191 */ 7192 snatchDistance: 0.0, 7193 7194 /** 7195 * If set to true, the point will snap to a grid of integer multiples of 7196 * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates). 7197 * <p> 7198 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 7199 * (given in user coordinates, not pixels) or are the intersection points 7200 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 7201 * 7202 * @name Point#snapToGrid 7203 * 7204 * @see Point#snapSizeX 7205 * @see Point#snapSizeY 7206 * @type Boolean 7207 * @default false 7208 */ 7209 snapToGrid: false, 7210 7211 /** 7212 * If set to true, the point will only snap to (possibly invisibly) grid points 7213 * when within {@link Point#attractorDistance} of such a grid point. 7214 * <p> 7215 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 7216 * (given in user coordinates, not pixels) or are the intersection points 7217 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 7218 * 7219 * @name Point#attractToGrid 7220 * 7221 * @see Point#attractorDistance 7222 * @see Point#attractorUnit 7223 * @see Point#snapToGrid 7224 * @see Point#snapSizeX 7225 * @see Point#snapSizeY 7226 * @type Boolean 7227 * @default false 7228 * 7229 * @example 7230 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 7231 * 7232 * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div> 7233 * <script type="text/javascript"> 7234 * (function() { 7235 * var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6', 7236 * {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false}); 7237 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 7238 * 7239 * })(); 7240 * 7241 * </script><pre> 7242 * 7243 */ 7244 attractToGrid: false, 7245 7246 /** 7247 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 7248 * It is given in user coordinates, not in pixels. 7249 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 7250 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 7251 * of the default ticks of the default x axes of the board. 7252 * 7253 * @name Point#snapSizeX 7254 * 7255 * @see Point#snapToGrid 7256 * @see Point#snapSizeY 7257 * @see JXG.Board#defaultAxes 7258 * @type Number 7259 * @default 1 7260 */ 7261 snapSizeX: 1, 7262 7263 /** 7264 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 7265 * It is given in user coordinates, not in pixels. 7266 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 7267 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 7268 * of the default ticks of the default y axes of the board. 7269 * 7270 * @name Point#snapSizeY 7271 * 7272 * @see Point#snapToGrid 7273 * @see Point#snapSizeX 7274 * @see JXG.Board#defaultAxes 7275 * @type Number 7276 * @default 1 7277 */ 7278 snapSizeY: 1, 7279 7280 /** 7281 * If set to true, the point will snap to the nearest point in distance of 7282 * {@link Point#attractorDistance}. 7283 * 7284 * @name Point#snapToPoints 7285 * 7286 * @see Point#attractorDistance 7287 * @type Boolean 7288 * @default false 7289 */ 7290 snapToPoints: false, 7291 7292 /** 7293 * List of elements which are ignored by snapToPoints. 7294 * @name Point#ignoredSnapToPoints 7295 * 7296 * @type Array 7297 * @default empty 7298 */ 7299 ignoredSnapToPoints: [] 7300 7301 /**#@-*/ 7302 }, 7303 7304 /* special polygon options */ 7305 polygon: { 7306 /**#@+ 7307 * @visprop 7308 */ 7309 7310 /** 7311 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 7312 * 7313 * @see JXG.GeometryElement#hasPoint 7314 * @name Polygon#hasInnerPoints 7315 * @type Boolean 7316 * @default false 7317 */ 7318 hasInnerPoints: false, 7319 7320 fillColor: Color.palette.yellow, 7321 highlightFillColor: Color.palette.yellow, 7322 // fillColor: '#00ff00', 7323 // highlightFillColor: '#00ff00', 7324 fillOpacity: 0.3, 7325 highlightFillOpacity: 0.2, 7326 7327 /** 7328 * Is the polygon bordered by lines? 7329 * 7330 * @type Boolean 7331 * @name Polygon#withLines 7332 * @default true 7333 */ 7334 withLines: true, 7335 7336 /** 7337 * Attributes for the polygon border lines. 7338 * 7339 * @type Line 7340 * @name Polygon#borders 7341 */ 7342 borders: { 7343 withLabel: false, 7344 strokeWidth: 1, 7345 highlightStrokeWidth: 1, 7346 // Polygon layer + 1 7347 layer: 5, 7348 label: { 7349 position: 'top' 7350 }, 7351 visible: 'inherit' 7352 }, 7353 7354 /** 7355 * By default, the strokewidths of the borders of a polygon are not changed during highlighting (only strokeColor and strokeOpacity are changed 7356 * to highlightStrokeColor, and highlightStrokeOpacity). 7357 * However, strokewidth is changed to highlightStrokewidth if an individual border gets the focus. 7358 * <p> 7359 * With this attribute set to true, also the borders change strokeWidth if the polygon itself gets the focus. 7360 * 7361 * @type Boolean 7362 * @name Polygon#highlightByStrokeWidth 7363 * @default false 7364 */ 7365 highlightByStrokeWidth: false, 7366 7367 /** 7368 * Attributes for the polygon vertices. 7369 * 7370 * @type Point 7371 * @name Polygon#vertices 7372 */ 7373 vertices: { 7374 layer: 9, 7375 withLabel: false, 7376 name: '', 7377 strokeColor: Color.palette.red, 7378 fillColor: Color.palette.red, 7379 fixed: false, 7380 visible: 'inherit' 7381 }, 7382 7383 /** 7384 * Attributes for the polygon label. 7385 * 7386 * @type Label 7387 * @name Polygon#label 7388 */ 7389 label: { 7390 offset: [0, 0] 7391 } 7392 7393 /**#@-*/ 7394 }, 7395 7396 /* special polygonal chain options 7397 */ 7398 polygonalchain: { 7399 /**#@+ 7400 * @visprop 7401 */ 7402 7403 fillColor: 'none', 7404 highlightFillColor: 'none' 7405 7406 /**#@-*/ 7407 }, 7408 7409 /* special prescribed angle options 7410 * Not yet implemented. But angle.setAngle(val) is implemented. 7411 7412 */ 7413 prescribedangle: { 7414 /**#@+ 7415 * @visprop 7416 */ 7417 7418 /** 7419 * Attributes for the helper point of the prescribed angle. 7420 * 7421 * @type Point 7422 * @name Prescribedangle#anglePoint 7423 * @ignore 7424 */ 7425 anglePoint: { 7426 size: 2, 7427 visible: false, 7428 withLabel: false 7429 } 7430 7431 /**#@-*/ 7432 }, 7433 7434 /* special reflection options */ 7435 reflection: { 7436 /**#@+ 7437 * @visprop 7438 */ 7439 7440 fixed: true, 7441 7442 /** 7443 * Attributes of circle center, i.e. the center of the circle, 7444 * if a circle is the mirror element and the transformation type is 'Euclidean' 7445 * 7446 * @type center 7447 * @name Reflection#center 7448 */ 7449 center: {}, 7450 7451 /** 7452 * Type of transformation. Possible values are 'Euclidean', 'projective'. 7453 * 7454 * If the value is 'Euclidean', the reflected element of a circle is again a circle, 7455 * otherwise it is a conic section. 7456 * 7457 * @type String 7458 * @name Reflection#type 7459 * @default 'Euclidean' 7460 */ 7461 type: 'Euclidean' 7462 7463 /**#@-*/ 7464 }, 7465 7466 /* special reflexangle options */ 7467 reflexangle: { 7468 /**#@+ 7469 * @visprop 7470 */ 7471 7472 /**#@-*/ 7473 }, 7474 7475 /* special regular polygon options */ 7476 regularpolygon: { 7477 /**#@+ 7478 * @visprop 7479 */ 7480 7481 /** 7482 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 7483 * @see JXG.GeometryElement#hasPoint 7484 * 7485 * @name RegularPolygon#hasInnerPoints 7486 * @type Boolean 7487 * @default false 7488 */ 7489 hasInnerPoints: false, 7490 fillColor: Color.palette.yellow, 7491 highlightFillColor: Color.palette.yellow, 7492 fillOpacity: 0.3, 7493 highlightFillOpacity: 0.2, 7494 7495 /** 7496 * Is the polygon bordered by lines? 7497 * 7498 * @type Boolean 7499 * @name RegularPolygon#withLines 7500 * @default true 7501 */ 7502 withLines: true, 7503 7504 /** 7505 * Attributes for the polygon border lines. 7506 * 7507 * @type Line 7508 * @name RegularPolygon#borders 7509 */ 7510 borders: { 7511 withLabel: false, 7512 strokeWidth: 1, 7513 highlightStrokeWidth: 1, 7514 // Polygon layer + 1 7515 layer: 5, 7516 label: { 7517 position: 'top' 7518 } 7519 }, 7520 7521 /** 7522 * Attributes for the polygon vertices. 7523 * 7524 * @type Point 7525 * @name RegularPolygon#vertices 7526 */ 7527 vertices: { 7528 layer: 9, 7529 withLabel: true, 7530 strokeColor: Color.palette.red, 7531 fillColor: Color.palette.red, 7532 fixed: false 7533 }, 7534 7535 /** 7536 * Attributes for the polygon label. 7537 * 7538 * @type Label 7539 * @name RegularPolygon#label 7540 */ 7541 label: { 7542 offset: [0, 0] 7543 } 7544 7545 /**#@-*/ 7546 }, 7547 7548 /* special options for riemann sums */ 7549 riemannsum: { 7550 /**#@+ 7551 * @visprop 7552 */ 7553 7554 withLabel: false, 7555 fillOpacity: 0.3, 7556 fillColor: Color.palette.yellow 7557 7558 /**#@-*/ 7559 }, 7560 7561 /* special sector options */ 7562 sector: { 7563 /**#@+ 7564 * @visprop 7565 */ 7566 7567 fillColor: Color.palette.yellow, 7568 highlightFillColor: Color.palette.yellow, 7569 // fillColor: '#00ff00', 7570 // highlightFillColor: '#00ff00', 7571 7572 fillOpacity: 0.3, 7573 highlightFillOpacity: 0.3, 7574 highlightOnSector: false, 7575 highlightStrokeWidth: 0, 7576 7577 /** 7578 * Type of sector. Possible values are 'minor', 'major', and 'auto'. 7579 * 7580 * @type String 7581 * @name Sector#selection 7582 * @default 'auto' 7583 */ 7584 selection: 'auto', 7585 7586 /** 7587 * Attributes for sub-element arc. It is only available, if the sector is defined by three points. 7588 * 7589 * @type Arc 7590 * @name Sector#arc 7591 * @default '{visible:false}' 7592 */ 7593 arc: { 7594 visible: false, 7595 fillColor: 'none', 7596 withLabel: false, 7597 name: '', 7598 7599 center: { 7600 visible: false, 7601 withLabel: false, 7602 name: '' 7603 }, 7604 7605 radiusPoint: { 7606 visible: false, 7607 withLabel: false, 7608 name: '' 7609 }, 7610 7611 anglePoint: { 7612 visible: false, 7613 withLabel: false, 7614 name: '' 7615 } 7616 }, 7617 7618 /** 7619 * Attributes for helper point radiuspoint in case it is provided by coordinates. 7620 * 7621 * @type Point 7622 * @name Sector#radiusPoint 7623 */ 7624 radiusPoint: { 7625 visible: false, 7626 withLabel: false 7627 }, 7628 7629 /** 7630 * Attributes for helper point center in case it is provided by coordinates. 7631 * 7632 * @type Point 7633 * @name Sector#center 7634 */ 7635 center: { 7636 visible: false, 7637 withLabel: false 7638 }, 7639 7640 /** 7641 * Attributes for helper point anglepoint in case it is provided by coordinates. 7642 * 7643 * @type Point 7644 * @name Sector#anglePoint 7645 */ 7646 anglePoint: { 7647 visible: false, 7648 withLabel: false 7649 }, 7650 7651 /** 7652 * Attributes for the sector label. 7653 * 7654 * @type Label 7655 * @name Sector#label 7656 */ 7657 label: { 7658 offset: [0, 0], 7659 anchorX: 'auto', 7660 anchorY: 'auto' 7661 } 7662 7663 /**#@-*/ 7664 }, 7665 7666 /* special segment options */ 7667 segment: { 7668 /**#@+ 7669 * @visprop 7670 */ 7671 7672 label: { 7673 position: 'top' 7674 } 7675 /**#@-*/ 7676 }, 7677 7678 semicircle: { 7679 /**#@+ 7680 * @visprop 7681 */ 7682 7683 /** 7684 * Attributes for center point of the semicircle. 7685 * 7686 * @type Point 7687 * @name Semicircle#center 7688 */ 7689 center: { 7690 visible: false, 7691 withLabel: false, 7692 fixed: false, 7693 fillColor: Color.palette.red, 7694 strokeColor: Color.palette.red, 7695 highlightFillColor: '#eeeeee', 7696 highlightStrokeColor: Color.palette.red, 7697 name: '' 7698 } 7699 7700 /**#@-*/ 7701 }, 7702 7703 /* special slider options */ 7704 slider: { 7705 /**#@+ 7706 * @visprop 7707 */ 7708 7709 /** 7710 * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For 7711 * continuous results set this to <tt>-1</tt>. 7712 * 7713 * @memberOf Slider.prototype 7714 * @name snapWidth 7715 * @type Number 7716 */ 7717 snapWidth: -1, // -1 = deactivated 7718 7719 /** 7720 * List of values to snap to. If the glider is within snapValueDistance 7721 * (in user coordinate units) of one of these points, 7722 * then the glider snaps to that point. 7723 * 7724 * @memberOf Slider.prototype 7725 * @name snapValues 7726 * @type Array 7727 * @see Slider#snapValueDistance 7728 * @default empty 7729 * 7730 * @example 7731 * var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], { 7732 * name: 'n', 7733 * snapWidth: 1, 7734 * snapValues: [1, 22, 77, 100], 7735 * snapValueDistance: 5 7736 * }); 7737 * 7738 * var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], { 7739 * name: 'k', 7740 * snapWidth: 0.1, 7741 * snapValues: [-3, -1, 1, 3], 7742 * snapValueDistance: 0.4 7743 * }); 7744 * 7745 * </pre><div id="JXG9be68014-4e14-479a-82b4-e92d9b8f6eef" class="jxgbox" style="width: 300px; height: 300px;"></div> 7746 * <script type="text/javascript"> 7747 * (function() { 7748 * var board = JXG.JSXGraph.initBoard('JXG9be68014-4e14-479a-82b4-e92d9b8f6eef', 7749 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 7750 * var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], { 7751 * name: 'n', 7752 * snapWidth: 1, 7753 * snapValues: [1, 22, 77, 100], 7754 * snapValueDistance: 5 7755 * }); 7756 * 7757 * var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], { 7758 * name: 'k', 7759 * snapWidth: 0.1, 7760 * snapValues: [-3, -1, 1, 3], 7761 * snapValueDistance: 0.4 7762 * }); 7763 * 7764 * })(); 7765 * 7766 * </script><pre> 7767 * 7768 */ 7769 snapValues: [], 7770 7771 /** 7772 * If the difference between the slider value and one of the elements of snapValues is less 7773 * than this number (in user coordinate units), the slider will snap to that value. 7774 * 7775 * @memberOf Slider.prototype 7776 * @name snapValueDistance 7777 * @type Number 7778 * @see Slider#snapValues 7779 * @default 0.0 7780 */ 7781 snapValueDistance: 0.0, 7782 7783 /** 7784 * The precision of the slider value displayed in the optional text. 7785 * Replaced by the attribute "digits". 7786 * 7787 * @memberOf Slider.prototype 7788 * @name precision 7789 * @type Number 7790 * @deprecated 7791 * @see Slider#digits 7792 * @default 2 7793 */ 7794 precision: 2, 7795 7796 /** 7797 * The number of digits of the slider value displayed in the optional text. 7798 * 7799 * @memberOf Slider.prototype 7800 * @name digits 7801 * @type Number 7802 * @default 2 7803 */ 7804 digits: 2, 7805 7806 /** 7807 * Internationalization support for slider labels. 7808 * 7809 * @name intl 7810 * @memberOf Slider.prototype 7811 * @type object 7812 * @default <pre>{ 7813 * enabled: 'inherit', 7814 * options: {} 7815 * }</pre> 7816 * @see JXG.Board#intl 7817 * @see Text#intl 7818 * 7819 * @example 7820 * var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], { 7821 * name: 'α', 7822 * snapWidth: 1, 7823 * intl: { 7824 * enabled: true, 7825 * options: { 7826 * style: 'unit', 7827 * unit: 'degree', 7828 * } 7829 * } 7830 * }); 7831 * 7832 * </pre><div id="JXGb49a9779-c0c8-419d-9173-c67232cfd65c" class="jxgbox" style="width: 300px; height: 300px;"></div> 7833 * <script type="text/javascript"> 7834 * (function() { 7835 * var board = JXG.JSXGraph.initBoard('JXGb49a9779-c0c8-419d-9173-c67232cfd65c', 7836 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 7837 * var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], { 7838 * name: 'α', 7839 * snapWidth: 1, 7840 * intl: { 7841 * enabled: true, 7842 * options: { 7843 * style: 'unit', 7844 * unit: 'degree', 7845 * } 7846 * } 7847 * }); 7848 * 7849 * })(); 7850 * 7851 * </script><pre> 7852 * 7853 */ 7854 intl: { 7855 enabled: 'inherit', 7856 options: {} 7857 }, 7858 7859 firstArrow: false, 7860 lastArrow: false, 7861 7862 /** 7863 * Show slider ticks. 7864 * 7865 * @type Boolean 7866 * @name Slider#withTicks 7867 * @default true 7868 */ 7869 withTicks: true, 7870 7871 /** 7872 * Show slider label. 7873 * 7874 * @type Boolean 7875 * @name Slider#withLabel 7876 * @default true 7877 */ 7878 withLabel: true, 7879 7880 /** 7881 * If not null, this replaces the part "name = " in the slider label. 7882 * Possible types: string, number or function. 7883 * @type String 7884 * @name suffixLabel 7885 * @memberOf Slider.prototype 7886 * @default null 7887 * @see JXG.Slider#unitLabel 7888 * @see JXG.Slider#postLabel 7889 */ 7890 suffixLabel: null, 7891 7892 /** 7893 * If not null, this is appended to the value in the slider label. 7894 * Possible types: string, number or function. 7895 * @type String 7896 * @name unitLabel 7897 * @memberOf Slider.prototype 7898 * @default null 7899 * @see JXG.Slider#suffixLabel 7900 * @see JXG.Slider#postLabel 7901 */ 7902 unitLabel: null, 7903 7904 /** 7905 * If not null, this is appended to the value and to unitLabel in the slider label. 7906 * Possible types: string, number or function. 7907 * @type String 7908 * @name postLabel 7909 * @memberOf Slider.prototype 7910 * @default null 7911 * @see JXG.Slider#suffixLabel 7912 * @see JXG.Slider#unitLabel 7913 */ 7914 postLabel: null, 7915 7916 layer: 9, 7917 showInfobox: false, 7918 name: '', 7919 visible: true, 7920 strokeColor: '#000000', 7921 highlightStrokeColor: '#888888', 7922 fillColor: '#ffffff', 7923 highlightFillColor: 'none', 7924 7925 /** 7926 * Size of slider point. 7927 * 7928 * @type Number 7929 * @name Slider#size 7930 * @default 6 7931 * @see Point#size 7932 */ 7933 size: 6, 7934 7935 /** 7936 * Attributes for first (left) helper point defining the slider position. 7937 * 7938 * @type Point 7939 * @name Slider#point1 7940 */ 7941 point1: { 7942 needsRegularUpdate: false, 7943 showInfobox: false, 7944 withLabel: false, 7945 visible: false, 7946 fixed: true, 7947 name: '' 7948 }, 7949 7950 /** 7951 * Attributes for second (right) helper point defining the slider position. 7952 * 7953 * @type Point 7954 * @name Slider#point2 7955 */ 7956 point2: { 7957 needsRegularUpdate: false, 7958 showInfobox: false, 7959 withLabel: false, 7960 visible: false, 7961 fixed: true, 7962 name: '' 7963 }, 7964 7965 /** 7966 * Attributes for the base line of the slider. 7967 * 7968 * @type Line 7969 * @name Slider#baseline 7970 */ 7971 baseline: { 7972 needsRegularUpdate: false, 7973 visible: 'inherit', 7974 fixed: true, 7975 scalable: false, 7976 tabindex: null, 7977 name: '', 7978 strokeWidth: 1, 7979 strokeColor: '#000000', 7980 highlightStrokeColor: '#888888' 7981 }, 7982 7983 /** 7984 * Attributes for the ticks of the base line of the slider. 7985 * 7986 * @type Ticks 7987 * @name Slider#ticks 7988 */ 7989 ticks: { 7990 needsRegularUpdate: false, 7991 fixed: true, 7992 7993 // Label drawing 7994 drawLabels: false, 7995 digits: 2, 7996 includeBoundaries: true, 7997 drawZero: true, 7998 label: { 7999 offset: [-4, -14], 8000 display: 'internal' 8001 }, 8002 8003 minTicksDistance: 30, 8004 insertTicks: true, 8005 ticksDistance: 1, // Not necessary, since insertTicks = true 8006 minorHeight: 4, // if <0: full width and height 8007 majorHeight: 5, // if <0: full width and height 8008 minorTicks: 0, 8009 strokeOpacity: 1, 8010 strokeWidth: 1, 8011 tickEndings: [0, 1], 8012 majortickEndings: [0, 1], 8013 strokeColor: '#000000', 8014 visible: 'inherit' 8015 }, 8016 8017 /** 8018 * Attributes for the highlighting line of the slider. 8019 * 8020 * @type Line 8021 * @name Slider#highline 8022 */ 8023 highline: { 8024 strokeWidth: 3, 8025 visible: 'inherit', 8026 fixed: true, 8027 tabindex: null, 8028 name: '', 8029 strokeColor: '#000000', 8030 highlightStrokeColor: '#888888' 8031 }, 8032 8033 /** 8034 * Attributes for the slider label. 8035 * 8036 * @type Label 8037 * @name Slider#label 8038 */ 8039 label: { 8040 visible: 'inherit', 8041 strokeColor: '#000000' 8042 }, 8043 8044 /** 8045 * If true, 'up' events on the baseline will trigger slider moves. 8046 * 8047 * @type Boolean 8048 * @name Slider#moveOnUp 8049 * @default true 8050 */ 8051 moveOnUp: true 8052 8053 /**#@-*/ 8054 }, 8055 8056 /* special vector field options */ 8057 slopefield: { 8058 /**#@+ 8059 * @visprop 8060 */ 8061 8062 strokeWidth: 0.5, 8063 highlightStrokeWidth: 0.5, 8064 highlightStrokeColor: Color.palette.blue, 8065 highlightStrokeOpacity: 0.8, 8066 8067 /** 8068 * Set length of the vectors in user coordinates. This in contrast to vector fields, where this attribute just scales the vector. 8069 * @name scale 8070 * @memberOf Slopefield.prototype 8071 * @type {Number|Function} 8072 * @see Vectorfield.scale 8073 * @default 1 8074 */ 8075 scale: 1, 8076 8077 /** 8078 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 8079 * Fields are: 8080 * <ul> 8081 * <li> enabled: Boolean 8082 * <li> size: length of the arrow head legs (in pixel) 8083 * <li> angle: angle of the arrow head legs In radians. 8084 * </ul> 8085 * @name arrowhead 8086 * @memberOf Slopefield.prototype 8087 * @type {Object} 8088 * @default <tt>{enabled: false, size: 5, angle: Math.PI * 0.125}</tt> 8089 */ 8090 arrowhead: { 8091 enabled: false, 8092 size: 5, 8093 angle: Math.PI * 0.125 8094 } 8095 8096 /**#@-*/ 8097 }, 8098 8099 /* special options for slope triangle */ 8100 slopetriangle: { 8101 /**#@+ 8102 * @visprop 8103 */ 8104 8105 fillColor: Color.palette.red, 8106 fillOpacity: 0.4, 8107 highlightFillColor: Color.palette.red, 8108 highlightFillOpacity: 0.3, 8109 8110 borders: { 8111 lastArrow: { 8112 type: 1, 8113 size: 6 8114 } 8115 }, 8116 8117 /** 8118 * Attributes for the gliding helper point. 8119 * 8120 * @type Point 8121 * @name Slopetriangle#glider 8122 */ 8123 glider: { 8124 fixed: true, 8125 visible: false, 8126 withLabel: false 8127 }, 8128 8129 /** 8130 * Attributes for the base line. 8131 * 8132 * @type Line 8133 * @name Slopetriangle#baseline 8134 */ 8135 baseline: { 8136 visible: false, 8137 withLabel: false, 8138 name: '' 8139 }, 8140 8141 /** 8142 * Attributes for the base point. 8143 * 8144 * @type Point 8145 * @name Slopetriangle#basepoint 8146 */ 8147 basepoint: { 8148 visible: false, 8149 withLabel: false, 8150 name: '' 8151 }, 8152 8153 /** 8154 * Attributes for the tangent. 8155 * The tangent is constructed by slop triangle if the construction 8156 * is based on a glider, solely. 8157 * 8158 * @type Line 8159 * @name Slopetriangle#tangent 8160 */ 8161 tangent: { 8162 visible: false, 8163 withLabel: false, 8164 name: '' 8165 }, 8166 8167 /** 8168 * Attributes for the top point. 8169 * 8170 * @type Point 8171 * @name Slopetriangle#toppoint 8172 */ 8173 toppoint: { 8174 visible: false, 8175 withLabel: false, 8176 name: '' 8177 }, 8178 8179 /** 8180 * Attributes for the slope triangle label. 8181 * 8182 * @type Label 8183 * @name Slopetriangle#label 8184 */ 8185 label: { 8186 visible: true, 8187 position: 'first' 8188 } 8189 /**#@-*/ 8190 }, 8191 8192 /* special options for smartlabel of angle */ 8193 smartlabelangle: { 8194 cssClass: 'smart-label-solid smart-label-angle', 8195 highlightCssClass:'smart-label-solid smart-label-angle', 8196 anchorX: 'left', 8197 anchorY: 'middle', 8198 8199 unit: '', 8200 prefix: '', 8201 suffix: '', 8202 8203 measure: 'deg', 8204 useMathJax: true 8205 }, 8206 8207 /* special options for smartlabel of circle */ 8208 smartlabelcircle: { 8209 /**#@+ 8210 * @visprop 8211 */ 8212 8213 /** 8214 * CSS classes for the smart label. Available classes are: 8215 * <ul> 8216 * <li> 'smart-label-solid' 8217 * <li> 'smart-label-outline' 8218 * <li> 'smart-label-pure' 8219 * </ul> 8220 * 8221 * By default, an additional class is given specific for the element type. 8222 * Available classes are 'smart-label-angle', 'smart-label-circle', 8223 * 'smart-label-line', 'smart-label-point', 'smart-label-polygon'. 8224 * 8225 * @example 8226 * cssClass: 'smart-label-solid smart-label-point' 8227 * 8228 * @type String 8229 * @name Smartlabel#cssClass 8230 * @see Smartlabel#highlightCssClass 8231 * @default <ul> 8232 * <li> 'smart-label-solid smart-label-circle' for circles</li> 8233 * <li> 'smart-label-solid smart-label-point' for points</li> 8234 * <li> ...</li> 8235 * </ul> 8236 */ 8237 cssClass: 'smart-label-solid smart-label-circle', 8238 8239 /** 8240 * CSS classes for the smart label when highlighted. 8241 * 8242 * @type String 8243 * @name Smartlabel#highlightCssClass 8244 * @see Smartlabel#cssClass 8245 * @default <ul> 8246 * <li> 'smart-label-solid smart-label-circle' for circles</li> 8247 * <li> 'smart-label-solid smart-label-point' for points</li> 8248 * <li> ...</li> 8249 * </ul> 8250 */ 8251 highlightCssClass:'smart-label-solid smart-label-circle', 8252 anchorX: 'middle', 8253 useMathJax: true, 8254 8255 /** 8256 * Measurement unit appended to the output text. For areas, the unit is squared automatically. 8257 * Comes directly after the measurement value. 8258 * 8259 * @type {String|Function} 8260 * @name Smartlabel#unit 8261 * @default '' 8262 */ 8263 unit: '', 8264 8265 /** 8266 * Prefix text for the smartlabel. Comes before the measurement value. 8267 * 8268 * @type {String|Function} 8269 * @name Smartlabel#prefix 8270 * @default '' 8271 */ 8272 prefix: '', 8273 8274 /** 8275 * Suffix text for the smartlabel. Comes after unit. 8276 * 8277 * @type {String|Function} 8278 * @name Smartlabel#suffix 8279 * @default '' 8280 */ 8281 suffix: '', 8282 8283 /** 8284 * Type of measurement. 8285 * Available values are: 8286 * <ul> 8287 * <li> 'deg', 'rad' for angles</li> 8288 * <li> 'area', 'perimeter', 'radius' for circles</li> 8289 * <li> 'length', 'slope' for lines</li> 8290 * <li> 'area', 'perimeter' for polygons</li> 8291 * </ul> 8292 * Dependent on this value, i.e. the type of measurement, the label is 8293 * positioned differently on the object. 8294 * 8295 * @type String 8296 * @name Smartlabel#measure 8297 * @default <ul> 8298 * <li> 'radius' for circles</li> 8299 * <li> 'length' for lines</li> 8300 * <li> 'area' for polygons</li> 8301 * <li> 'deg' for angles</li> 8302 * </ul> 8303 */ 8304 measure: 'radius' 8305 8306 /**#@-*/ 8307 }, 8308 8309 /* special options for smartlabel of line */ 8310 smartlabelline: { 8311 cssClass: 'smart-label-solid smart-label-line', 8312 highlightCssClass:'smart-label-solid smart-label-line', 8313 anchorX: 'middle', 8314 8315 useMathJax: true, 8316 8317 unit: '', 8318 measure: 'length' 8319 }, 8320 8321 /* special options for smartlabel of point */ 8322 smartlabelpoint: { 8323 /**#@+ 8324 * @visprop 8325 */ 8326 8327 cssClass: 'smart-label-solid smart-label-point', 8328 highlightCssClass:'smart-label-solid smart-label-point', 8329 anchorX: 'middle', 8330 anchorY: 'top', 8331 8332 useMathJax: true, 8333 8334 /** 8335 * Display of point coordinates either as row vector or column vector. 8336 * Available values are 'row' or 'column'. 8337 * @type String 8338 * @name Smartlabel#dir 8339 * @default 'row' 8340 */ 8341 dir: 'row', 8342 8343 /** 8344 * Supply a unit suffix. 8345 * 8346 * @type String 8347 * @name Smartlabel#unit 8348 * @default '' 8349 */ 8350 unit: '' 8351 8352 /**#@-*/ 8353 }, 8354 8355 /* special options for smartlabel of polygon */ 8356 smartlabelpolygon: { 8357 cssClass: 'smart-label-solid smart-label-polygon', 8358 highlightCssClass:'smart-label-solid smart-label-polygon', 8359 anchorX: 'middle', 8360 8361 useMathJax: true, 8362 8363 unit: '', 8364 measure: 'area' 8365 }, 8366 8367 /* special options for step functions */ 8368 stepfunction: { 8369 /**#@+ 8370 * @visprop 8371 */ 8372 8373 /**#@-*/ 8374 }, 8375 8376 /* special tangent options */ 8377 tangent: { 8378 }, 8379 8380 /* special tape measure options */ 8381 tapemeasure: { 8382 /**#@+ 8383 * @visprop 8384 */ 8385 8386 strokeColor: '#000000', 8387 strokeWidth: 2, 8388 highlightStrokeColor: '#000000', 8389 8390 /** 8391 * Show tape measure ticks. 8392 * 8393 * @type Boolean 8394 * @name Tapemeasure#withTicks 8395 * @default true 8396 */ 8397 withTicks: true, 8398 8399 /** 8400 * Show tape measure label. 8401 * 8402 * @type Boolean 8403 * @name Tapemeasure#withLabel 8404 * @default true 8405 */ 8406 withLabel: true, 8407 8408 /** 8409 * Text rotation in degrees. 8410 * 8411 * @name Tapemeasure#rotate 8412 * @type Number 8413 * @default 0 8414 */ 8415 rotate: 0, 8416 8417 /** 8418 * The precision of the tape measure value displayed in the optional text. 8419 * Replaced by the attribute digits 8420 * 8421 * @memberOf Tapemeasure.prototype 8422 * @name precision 8423 * @type Number 8424 * @deprecated 8425 * @see Tapemeasure#digits 8426 * @default 2 8427 */ 8428 precision: 2, 8429 8430 /** 8431 * The precision of the tape measure value displayed in the optional text. 8432 * @memberOf Tapemeasure.prototype 8433 * @name digits 8434 * @type Number 8435 * @default 2 8436 */ 8437 digits: 2, 8438 8439 /** 8440 * Attributes for first helper point defining the tape measure position. 8441 * 8442 * @type Point 8443 * @name Tapemeasure#point1 8444 */ 8445 point1: { 8446 visible: true, 8447 strokeColor: '#000000', 8448 fillColor: '#ffffff', 8449 fillOpacity: 0.0, 8450 highlightFillOpacity: 0.1, 8451 size: 6, 8452 snapToPoints: true, 8453 attractorUnit: 'screen', 8454 attractorDistance: 20, 8455 showInfobox: false, 8456 withLabel: false, 8457 name: '' 8458 }, 8459 8460 /** 8461 * Attributes for second helper point defining the tape measure position. 8462 * 8463 * @type Point 8464 * @name Tapemeasure#point2 8465 */ 8466 point2: { 8467 visible: true, 8468 strokeColor: '#000000', 8469 fillColor: '#ffffff', 8470 fillOpacity: 0.0, 8471 highlightFillOpacity: 0.1, 8472 size: 6, 8473 snapToPoints: true, 8474 attractorUnit: 'screen', 8475 attractorDistance: 20, 8476 showInfobox: false, 8477 withLabel: false, 8478 name: '' 8479 }, 8480 8481 /** 8482 * Attributes for the ticks of the tape measure. 8483 * 8484 * @type Ticks 8485 * @name Tapemeasure#ticks 8486 */ 8487 ticks: { 8488 drawLabels: false, 8489 drawZero: true, 8490 insertTicks: true, 8491 ticksDistance: 0.1, // Ignored, since insertTicks=true 8492 minorHeight: 8, 8493 majorHeight: 16, 8494 minorTicks: 4, 8495 tickEndings: [0, 1], 8496 majorTickEndings: [0, 1], 8497 strokeOpacity: 1, 8498 strokeWidth: 1, 8499 strokeColor: '#000000', 8500 visible: 'inherit', 8501 label: { 8502 anchorY: 'top', 8503 anchorX: 'middle', 8504 offset: [0, -10] 8505 } 8506 }, 8507 8508 /** 8509 * Attributes for the tape measure label. 8510 * 8511 * @type Label 8512 * @name Tapemeasure#label 8513 */ 8514 label: { 8515 position: 'top' 8516 } 8517 /**#@-*/ 8518 }, 8519 8520 /* special text options */ 8521 text: { 8522 /**#@+ 8523 * @visprop 8524 */ 8525 8526 /** 8527 * The font size in pixels. 8528 * 8529 * @name fontSize 8530 * @memberOf Text.prototype 8531 * @default 12 8532 * @type Number 8533 * @see Text#fontUnit 8534 */ 8535 fontSize: 12, 8536 8537 /** 8538 * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but 8539 * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful. 8540 * 8541 * @name fontUnit 8542 * @memberOf Text.prototype 8543 * @default 'px' 8544 * @type String 8545 * @see Text#fontSize 8546 * 8547 * @example 8548 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 8549 * 8550 * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div> 8551 * <script type="text/javascript"> 8552 * (function() { 8553 * var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9', 8554 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 8555 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 8556 * 8557 * })(); 8558 * 8559 * </script><pre> 8560 * 8561 */ 8562 fontUnit: 'px', 8563 8564 /** 8565 * If the text content is solely a number and 8566 * this attribute is true (default) then the number is formatted 8567 * according to the number of digits 8568 * given by the attribute 'digits' and convert into a fraction if 'toFraction' 8569 * is true. 8570 * <p> 8571 * Otherwise, display the raw number. 8572 * 8573 * @name formatNumber 8574 * @memberOf Text.prototype 8575 * @default false 8576 * @type Boolean 8577 * 8578 */ 8579 formatNumber: false, 8580 8581 /** 8582 * Used to round texts given by a number. 8583 * 8584 * @name digits 8585 * @memberOf Text.prototype 8586 * @default 2 8587 * @type Number 8588 */ 8589 digits: 2, 8590 8591 /** 8592 * Internationalization support for texts consisting of a number only. 8593 * <p> 8594 * Setting the local overwrites the board-wide locale set in the board attributes. 8595 * The JSXGraph attribute digits is overruled by the 8596 * Intl attributes "minimumFractionDigits" and "maximumFractionDigits". 8597 * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat</a> 8598 * for more information about possible options. 8599 * <p> 8600 * See below for an example where the text is composed from a string and a locale formatted number. 8601 * 8602 * @name intl 8603 * @memberOf Text.prototype 8604 * @type object 8605 * @default <pre>{ 8606 * enabled: 'inherit', 8607 * options: { 8608 * minimumFractionDigits: 0, 8609 * maximumFractionDigits: 2 8610 * } 8611 * }</pre> 8612 * @see JXG.Board#intl 8613 * 8614 * @example 8615 * var t = board.create('text', [1, 2, -Math.PI*100], { 8616 * digits: 2, 8617 * intl: { 8618 * enabled: true, 8619 * options: { 8620 * style: 'unit', 8621 * unit: 'celsius' 8622 * } 8623 * } 8624 * }); 8625 * 8626 * </pre><div id="JXGb7162923-1beb-4e56-8817-19aa66e226d1" class="jxgbox" style="width: 300px; height: 300px;"></div> 8627 * <script type="text/javascript"> 8628 * (function() { 8629 * var board = JXG.JSXGraph.initBoard('JXGb7162923-1beb-4e56-8817-19aa66e226d1', 8630 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 8631 * var t = board.create('text', [1, 2, -Math.PI*100], { 8632 * digits: 2, 8633 * intl: { 8634 * enabled: true, 8635 * options: { 8636 * style: 'unit', 8637 * unit: 'celsius' 8638 * } 8639 * } 8640 * }); 8641 * 8642 * })(); 8643 * 8644 * </script><pre> 8645 * 8646 * 8647 * @example 8648 * var t = board.create('text', [0.05, -0.2, ''], { 8649 * intl: { 8650 * enabled: true, 8651 * locale: 'it-IT', 8652 * options: { 8653 * style: 'unit', 8654 * unit: 'kilometer-per-hour', 8655 * unitDisplay: 'narrow', 8656 * maximumFractionDigits: 2 8657 * } 8658 * } 8659 * }); 8660 * 8661 * // Set dynamic text consisting of text and number. 8662 * t.setText(function() { 8663 * var txt = 'Speed: ', 8664 * number = t.X(); 8665 * 8666 * // Add formatted number to variable txt 8667 * // with fallback if locale is not supported. 8668 * if (t.useLocale()) { 8669 * txt += t.formatNumberLocale(number); 8670 * } else { 8671 * txt += JXG.toFixed(number, 2); 8672 * } 8673 * return txt; 8674 * }); 8675 * 8676 * </pre><div id="JXG560aeb1c-55fb-45da-8ad5-d3ad26216056" class="jxgbox" style="width: 300px; height: 300px;"></div> 8677 * <script type="text/javascript"> 8678 * (function() { 8679 * var board = JXG.JSXGraph.initBoard('JXG560aeb1c-55fb-45da-8ad5-d3ad26216056', 8680 * {boundingbox: [-0.5, 0.5, 0.5, -0.5], axis: true, showcopyright: false, shownavigation: false}); 8681 * var t = board.create('text', [0.3, -0.3, ''], { 8682 * intl: { 8683 * enabled: true, 8684 * locale: 'it-IT', 8685 * options: { 8686 * style: 'unit', 8687 * unit: 'kilometer-per-hour', 8688 * unitDisplay: 'narrow', 8689 * maximumFractionDigits: 2 8690 * } 8691 * } 8692 * }); 8693 * 8694 * // Set dynamic text consisting of text and number. 8695 * t.setText(function() { 8696 * var txt = 'Speed: ', 8697 * number = t.X(); 8698 * 8699 * // Add formatted number to variable txt 8700 * if (t.useLocale()) { 8701 * txt += t.formatNumberLocale(number); 8702 * } else { 8703 * txt += JXG.toFixed(number, 2); 8704 * } 8705 * return txt; 8706 * }); 8707 * 8708 * })(); 8709 * 8710 * </script><pre> 8711 * 8712 */ 8713 intl: { 8714 enabled: 'inherit', 8715 options: { 8716 minimumFractionDigits: 0, 8717 maximumFractionDigits: 2 8718 } 8719 }, 8720 8721 /** 8722 * If set to true, the text is parsed and evaluated. 8723 * For labels parse==true results in converting names of the form k_a to subscripts. 8724 * If the text is given by string and parse==true, the string is parsed as 8725 * JessieCode expression. 8726 * 8727 * @name parse 8728 * @memberOf Text.prototype 8729 * @default true 8730 * @type Boolean 8731 */ 8732 parse: true, 8733 8734 /** 8735 * If set to true and caja's sanitizeHTML function can be found it 8736 * will be used to sanitize text output. 8737 * 8738 * @name useCaja 8739 * @memberOf Text.prototype 8740 * @default false 8741 * @type Boolean 8742 */ 8743 useCaja: false, 8744 8745 /** 8746 * If enabled, the text will be handled as label. Intended for internal use. 8747 * 8748 * @name isLabel 8749 * @memberOf Text.prototype 8750 * @default false 8751 * @type Boolean 8752 */ 8753 isLabel: false, 8754 8755 strokeColor: '#000000', 8756 highlightStrokeColor: '#000000', 8757 highlightStrokeOpacity: 0.666666, 8758 8759 /** 8760 * Default CSS properties of the HTML text element. 8761 * <p> 8762 * The CSS properties which are set here, are handed over to the style property 8763 * of the HTML text element. That means, they have higher property than any 8764 * CSS class. 8765 * <p> 8766 * If a property which is set here should be overruled by a CSS class 8767 * then this property should be removed here. 8768 * <p> 8769 * The reason, why this attribute should be kept to its default value at all, 8770 * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt> 8771 * will ignore the font-family if it is set in a CSS class. 8772 * It has to be set explicitly as style attribute. 8773 * <p> 8774 * In summary, the order of priorities from high to low is 8775 * <ol> 8776 * <li> JXG.Options.text.cssStyle 8777 * <li> JXG.Options.text.cssDefaultStyle 8778 * <li> JXG.Options.text.cssClass 8779 * </ol> 8780 * @example 8781 * If all texts should get its font-family from the default CSS class 8782 * before initializing the board 8783 * <pre> 8784 * JXG.Options.text.cssDefaultStyle = ''; 8785 * JXG.Options.text.highlightCssDefaultStyle = ''; 8786 * </pre> 8787 * should be called. 8788 * 8789 * @name cssDefaultStyle 8790 * @memberOf Text.prototype 8791 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 8792 * @type String 8793 * @see Text#highlightCssDefaultStyle 8794 * @see Text#cssStyle 8795 * @see Text#highlightCssStyle 8796 */ 8797 cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 8798 8799 /** 8800 * Default CSS properties of the HTML text element in case of highlighting. 8801 * <p> 8802 * The CSS properties which are set here, are handed over to the style property 8803 * of the HTML text element. That means, they have higher property than any 8804 * CSS class. 8805 * @example 8806 * If all texts should get its font-family from the default CSS class 8807 * before initializing the board 8808 * <pre> 8809 * JXG.Options.text.cssDefaultStyle = ''; 8810 * JXG.Options.text.highlightCssDefaultStyle = ''; 8811 * </pre> 8812 * should be called. 8813 * 8814 * @name highlightCssDefaultStyle 8815 * @memberOf Text.prototype 8816 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 8817 * @type String 8818 * @see Text#cssDefaultStyle 8819 * @see Text#cssStyle 8820 * @see Text#highlightCssStyle 8821 */ 8822 highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 8823 8824 /** 8825 * CSS properties of the HTML text element. 8826 * <p> 8827 * The CSS properties which are set here, are handed over to the style property 8828 * of the HTML text element. That means, they have higher property than any 8829 * CSS class. 8830 * 8831 * @name cssStyle 8832 * @memberOf Text.prototype 8833 * @default '' 8834 * @type String 8835 * @see Text#cssDefaultStyle 8836 * @see Text#highlightCssDefaultStyle 8837 * @see Text#highlightCssStyle 8838 */ 8839 cssStyle: '', 8840 8841 /** 8842 * CSS properties of the HTML text element in case of highlighting. 8843 * <p> 8844 * The CSS properties which are set here, are handed over to the style property 8845 * of the HTML text element. That means, they have higher property than any 8846 * CSS class. 8847 * 8848 * @name highlightCssStyle 8849 * @memberOf Text.prototype 8850 * @default '' 8851 * @type String 8852 * @see Text#cssDefaultStyle 8853 * @see Text#highlightCssDefaultStyle 8854 * @see Text#cssStyle 8855 */ 8856 highlightCssStyle: '', 8857 8858 transitionProperties: ['color', 'opacity'], 8859 8860 /** 8861 * If true, the input will be given to ASCIIMathML before rendering. 8862 * 8863 * @name useASCIIMathML 8864 * @memberOf Text.prototype 8865 * @default false 8866 * @type Boolean 8867 */ 8868 useASCIIMathML: false, 8869 8870 /** 8871 * If true, MathJax will be used to render the input string. 8872 * Supports MathJax 2 as well as Mathjax 3. 8873 * It is recommended to use this option together with the option 8874 * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed 8875 * instead of two (e.g. \\alpha). 8876 * 8877 * @name useMathJax 8878 * @memberOf Text.prototype 8879 * @default false 8880 * @type Boolean 8881 * @see Text#parse 8882 * 8883 * @example 8884 * // Before loading MathJax, it has to be configured something like this: 8885 * window.MathJax = { 8886 * tex: { 8887 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 8888 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 8889 * packages: ['base', 'ams'] 8890 * }, 8891 * options: { 8892 * ignoreHtmlClass: 'tex2jax_ignore', 8893 * processHtmlClass: 'tex2jax_process' 8894 * } 8895 * }; 8896 * 8897 * // Display style 8898 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 8899 * fontSize: 15, color:'green', useMathJax: true}); 8900 * 8901 * // Inline style 8902 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 8903 * fontSize: 15, color:'green', useMathJax: true}); 8904 * 8905 * var A = board.create('point', [-2, 0]); 8906 * var B = board.create('point', [1, 0]); 8907 * var C = board.create('point', [0, 1]); 8908 * 8909 * var graph = board.create('ellipse', [A, B, C], { 8910 * fixed: true, 8911 * withLabel: true, 8912 * strokeColor: 'black', 8913 * strokeWidth: 2, 8914 * fillColor: '#cccccc', 8915 * fillOpacity: 0.3, 8916 * highlightStrokeColor: 'red', 8917 * highlightStrokeWidth: 3, 8918 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 8919 * label: {useMathJax: true} 8920 * }); 8921 * 8922 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 8923 * { 8924 * fontSize: 24, parse: false 8925 * }); 8926 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 8927 * { 8928 * fontSize: 24, useMathJax: true 8929 * }); 8930 * 8931 * </pre> 8932 * <script> 8933 * window.MathJax = { 8934 * tex: { 8935 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 8936 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 8937 * packages: ['base', 'ams'] 8938 * }, 8939 * options: { 8940 * ignoreHtmlClass: 'tex2jax_ignore', 8941 * processHtmlClass: 'tex2jax_process' 8942 * } 8943 * }; 8944 * </script> 8945 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 8946 * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div> 8947 * <script type="text/javascript"> 8948 * (function() { 8949 * var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9', 8950 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 8951 * // Display style 8952 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 8953 * fontSize: 15, color:'green', useMathJax: true}); 8954 * 8955 * // Inline style 8956 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 8957 * fontSize: 15, color:'green', useMathJax: true}); 8958 * 8959 * var A = board.create('point', [-2, 0]); 8960 * var B = board.create('point', [1, 0]); 8961 * var C = board.create('point', [0, 1]); 8962 * 8963 * var graph = board.create('ellipse', [A, B, C], { 8964 * fixed: true, 8965 * withLabel: true, 8966 * strokeColor: 'black', 8967 * strokeWidth: 2, 8968 * fillColor: '#cccccc', 8969 * fillOpacity: 0.3, 8970 * highlightStrokeColor: 'red', 8971 * highlightStrokeWidth: 3, 8972 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 8973 * label: {useMathJax: true} 8974 * }); 8975 * 8976 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 8977 * { 8978 * fontSize: 24, parse: false 8979 * }); 8980 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 8981 * { 8982 * fontSize: 24, useMathJax: true 8983 * }); 8984 * })(); 8985 * 8986 * </script><pre> 8987 * 8988 * 8989 * @example 8990 * // Load MathJax: 8991 * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script> 8992 * 8993 * // function and its derivative 8994 * var f1 = function(x) { return x * x * x; }, 8995 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 8996 * 8997 * A = board.create('glider', [0.5, f1(0.5), graph1], { 8998 * name: 'f(x)', 8999 * color: 'black', 9000 * face:'x', 9001 * fixed: true, 9002 * size: 3, 9003 * label: {offset: [-30, 10], fontSize: 15} 9004 * }), 9005 * B = board.create('glider', [0.7, f1(0.7), graph1], { 9006 * name: 'f(x+Δx)', 9007 * size: 3, 9008 * label: {offset: [-60, 10], fontSize: 15} 9009 * }), 9010 * 9011 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 9012 * a_h_segment = board.create('segment', [A, [ 9013 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9014 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9015 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 9016 * 9017 * b_v_segment = board.create('segment', [B, [ 9018 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9019 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9020 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 9021 * 9022 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 9023 * ], {visible: false}); 9024 * 9025 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 9026 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 9027 * }); 9028 * 9029 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 9030 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 9031 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 9032 * }); 9033 * 9034 * dval = board.create('text',[0.1, 0.8, 9035 * function(){ 9036 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 9037 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 9038 * }],{fontSize: 15, useMathJax: true}); 9039 * 9040 * </pre> 9041 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 9042 * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div> 9043 * <script type="text/javascript"> 9044 * (function() { 9045 * var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621', 9046 * {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false}); 9047 * // function and its derivative 9048 * var f1 = function(x) { return x * x * x; }, 9049 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 9050 * 9051 * A = board.create('glider', [0.5, f1(0.5), graph1], { 9052 * name: 'f(x)', 9053 * color: 'black', 9054 * face:'x', 9055 * fixed: true, 9056 * size: 3, 9057 * label: {offset: [-30, 10], fontSize: 15} 9058 * }), 9059 * B = board.create('glider', [0.7, f1(0.7), graph1], { 9060 * name: 'f(x+Δx)', 9061 * size: 3, 9062 * label: {offset: [-60, 10], fontSize: 15} 9063 * }), 9064 * 9065 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 9066 * a_h_segment = board.create('segment', [A, [ 9067 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9068 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9069 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 9070 * 9071 * b_v_segment = board.create('segment', [B, [ 9072 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9073 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9074 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 9075 * 9076 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 9077 * ], {visible: false}); 9078 * 9079 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 9080 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 9081 * }); 9082 * 9083 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 9084 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 9085 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 9086 * }); 9087 * 9088 * dval = board.create('text',[0.1, 0.8, 9089 * function(){ 9090 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 9091 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 9092 * }],{fontSize: 15, useMathJax: true}); 9093 * 9094 * })(); 9095 * 9096 * </script><pre> 9097 * 9098 * @example 9099 * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true}); 9100 * board.options.text.useMathjax = true; 9101 * 9102 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9103 * suffixlabel:'\\(t_1=\\)', 9104 * unitLabel: ' \\(\\text{ ms}\\)', 9105 * snapWidth:0.01}), 9106 * 9107 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9108 * text1 = board.create('text', [5, 1, function(){ 9109 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 9110 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 9111 * 9112 * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div> 9113 * <script type="text/javascript"> 9114 * (function() { 9115 * var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6', 9116 * {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false}); 9117 * board.options.text.useMathjax = true; 9118 * 9119 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9120 * suffixlabel:'\\(t_1=\\)', 9121 * unitLabel: ' \\(\\text{ ms}\\)', 9122 * snapWidth:0.01}), 9123 * 9124 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9125 * text1 = board.create('text', [5, 1, function(){ 9126 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 9127 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 9128 * 9129 * })(); 9130 * 9131 * </script><pre> 9132 * 9133 */ 9134 useMathJax: false, 9135 9136 /** 9137 * 9138 * If true, KaTeX will be used to render the input string. 9139 * For this feature, katex.min.js and katex.min.css have to be included. 9140 * <p> 9141 * The example below does not work, because there is a conflict with 9142 * the MathJax library which is used below. 9143 * </p> 9144 * 9145 * @name useKatex 9146 * @memberOf Text.prototype 9147 * @default false 9148 * @type Boolean 9149 * 9150 * 9151 * @example 9152 * JXG.Options.text.useKatex = true; 9153 * 9154 * const board = JXG.JSXGraph.initBoard('jxgbox', { 9155 * boundingbox: [-2, 5, 8, -5], axis:true 9156 * }); 9157 * 9158 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9159 * suffixlabel:'t_1=', 9160 * unitLabel: ' \\text{ ms}', 9161 * snapWidth:0.01}); 9162 * 9163 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9164 * text1 = board.create('text', [5, 1, function(){ 9165 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 9166 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 9167 * 9168 * </pre> 9169 * <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"> 9170 * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script> 9171 * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div> 9172 * <script type="text/javascript"> 9173 * (function() { 9174 * var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869', 9175 * {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false}); 9176 * board.options.useKatex = true; 9177 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9178 * suffixlabel:'t_1=', 9179 * unitLabel: ' \\text{ ms}', 9180 * snapWidth:0.01}); 9181 * 9182 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9183 * text1 = board.create('text', [5, 1, function(){ 9184 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 9185 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 9186 * 9187 * })(); 9188 * 9189 * </script><pre> 9190 */ 9191 useKatex: false, 9192 9193 /** 9194 * Object or function returning an object that contains macros for KaTeX. 9195 * 9196 * @name katexMacros 9197 * @memberOf Text.prototype 9198 * @default <tt>{}</tt> 9199 * @type Object 9200 * 9201 * @example 9202 * // to globally apply macros to all text elements use: 9203 * JXG.Options.text.katexMacros = {'\\jxg': 'JSXGraph is awesome'}; 9204 * 9205 * const board = JXG.JSXGraph.initBoard('jxgbox', { 9206 * boundingbox: [-2, 5, 8, -5], axis:true 9207 * }); 9208 * 9209 * // This macro only get applied to the p ('text') element 9210 * var p = board.create('text', [1, 0, '\\jsg \\sR '], { katexMacros: {'\\sR':'\\mathbb{R}'} }); 9211 */ 9212 katexMacros: {}, 9213 9214 /** 9215 * Display number as integer + nominator / denominator. Works together 9216 * with MathJax, KaTex or as plain text. 9217 * @name toFraction 9218 * @memberOf Text.prototype 9219 * @type Boolean 9220 * @default false 9221 * @see JXG#toFraction 9222 * 9223 * @example 9224 * board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true }); 9225 * board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false }); 9226 * 9227 * </pre><div id="JXGc10fe0b6-15ac-42b6-890f-2593b427d493" class="jxgbox" style="width: 300px; height: 300px;"></div> 9228 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 9229 * <script type="text/javascript"> 9230 * (function() { 9231 * var board = JXG.JSXGraph.initBoard('JXGc10fe0b6-15ac-42b6-890f-2593b427d493', 9232 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 9233 * board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true }); 9234 * board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false }); 9235 * 9236 * })(); 9237 * 9238 * </script><pre> 9239 * 9240 */ 9241 toFraction: false, 9242 9243 /** 9244 * Determines the rendering method of the text. Possible values 9245 * include <tt>'html'</tt> and <tt>'internal</tt>. 9246 * 9247 * @name display 9248 * @memberOf Text.prototype 9249 * @default 'html' 9250 * @type String 9251 */ 9252 display: 'html', 9253 9254 /** 9255 * Anchor element {@link Point}, {@link Text} or {@link Image} of the text. 9256 * If it exists, the coordinates of the text are relative 9257 * to this anchor element. In this case, only numbers are possible coordinates, 9258 * functions are not supported. 9259 * 9260 * @name anchor 9261 * @memberOf Text.prototype 9262 * @default null 9263 * @type Object 9264 */ 9265 anchor: null, 9266 9267 /** 9268 * The horizontal alignment of the text. Possible values include <tt>'auto'</tt>, <tt>'left'</tt>, 9269 * <tt>'middle'</tt>, and <tt>'right'</tt>. 9270 * 9271 * @name anchorX 9272 * @memberOf Text.prototype 9273 * @default 'left' 9274 * @type String 9275 */ 9276 anchorX: 'left', 9277 9278 /** 9279 * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and 9280 * <tt>'bottom'</tt>. 9281 * For MathJax or KaTeX, 'top' is recommended. 9282 * 9283 * @name anchorY 9284 * @memberOf Text.prototype 9285 * @default 'middle' 9286 * @type String 9287 */ 9288 anchorY: 'middle', 9289 9290 /** 9291 * CSS class of the text in non-highlighted view. 9292 * 9293 * @name cssClass 9294 * @memberOf Text.prototype 9295 * @type String 9296 * @default 'JXGtext' 9297 */ 9298 cssClass: 'JXGtext', 9299 9300 /** 9301 * CSS class of the text in highlighted view. 9302 * 9303 * @name highlightCssClass 9304 * @memberOf Text.prototype 9305 * @type String 9306 * @default 'JXGtext' 9307 */ 9308 highlightCssClass: 'JXGtext', 9309 9310 /** 9311 * Sensitive area for dragging the text. 9312 * Possible values are 'all', or something else. 9313 * If set to 'small', a sensitivity margin at the right and left border is taken. 9314 * This may be extended to left, right, ... in the future. 9315 * 9316 * @name Text#dragArea 9317 * @type String 9318 * @default 'all' 9319 */ 9320 dragArea: 'all', 9321 9322 withLabel: false, 9323 9324 /** 9325 * Text rotation in degrees. 9326 * Works for non-zero values only in combination with display=='internal'. 9327 * 9328 * @name Text#rotate 9329 * @type Number 9330 * @default 0 9331 */ 9332 rotate: 0, 9333 9334 /** 9335 * @name Text#visible 9336 * @type Boolean 9337 * @default true 9338 */ 9339 visible: true, 9340 9341 /** 9342 * Defines together with {@link Text#snapSizeY} the grid the text snaps on to. 9343 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 9344 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 9345 * of the default ticks of the default x axes of the board. 9346 * 9347 * @name snapSizeX 9348 * @memberOf Text.prototype 9349 * 9350 * @see Point#snapToGrid 9351 * @see Text#snapSizeY 9352 * @see JXG.Board#defaultAxes 9353 * @type Number 9354 * @default 1 9355 */ 9356 snapSizeX: 1, 9357 9358 /** 9359 * Defines together with {@link Text#snapSizeX} the grid the text snaps on to. 9360 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 9361 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 9362 * of the default ticks of the default y axes of the board. 9363 * 9364 * @name snapSizeY 9365 * @memberOf Text.prototype 9366 * 9367 * @see Point#snapToGrid 9368 * @see Text#snapSizeX 9369 * @see JXG.Board#defaultAxes 9370 * @type Number 9371 * @default 1 9372 */ 9373 snapSizeY: 1, 9374 9375 /** 9376 * List of attractor elements. If the distance of the text is less than 9377 * attractorDistance the text is made to glider of this element. 9378 * 9379 * @name attractors 9380 * @memberOf Text.prototype 9381 * @type Array 9382 * @default empty 9383 */ 9384 attractors: [] 9385 9386 /**#@-*/ 9387 }, 9388 9389 /* special options for trace curves */ 9390 tracecurve: { 9391 /**#@+ 9392 * @visprop 9393 */ 9394 strokeColor: '#000000', 9395 fillColor: 'none', 9396 9397 /** 9398 * The number of evaluated data points. 9399 * @memberOf Tracecurve.prototype 9400 * @default 100 9401 * @name numberPoints 9402 * @type Number 9403 */ 9404 numberPoints: 100 9405 9406 /**#@-*/ 9407 }, 9408 9409 /* special turtle options */ 9410 turtle: { 9411 /**#@+ 9412 * @visprop 9413 */ 9414 9415 strokeWidth: 1, 9416 fillColor: 'none', 9417 strokeColor: '#000000', 9418 9419 /** 9420 * Attributes for the turtle arrow. 9421 * 9422 * @type Curve 9423 * @name Turtle#arrow 9424 */ 9425 arrow: { 9426 strokeWidth: 2, 9427 withLabel: false, 9428 strokeColor: Color.palette.red, 9429 lastArrow: true 9430 } 9431 /**#@-*/ 9432 }, 9433 9434 /* special vector field options */ 9435 vectorfield: { 9436 /**#@+ 9437 * @visprop 9438 */ 9439 9440 strokeWidth: 0.5, 9441 highlightStrokeWidth: 0.5, 9442 highlightStrokeColor: Color.palette.blue, 9443 highlightStrokeOpacity: 0.8, 9444 9445 /** 9446 * Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length. 9447 * @name scale 9448 * @memberOf Vectorfield.prototype 9449 * @type {Number|Function} 9450 * @see Slopefield.scale 9451 * @default 1 9452 */ 9453 scale: 1, 9454 9455 /** 9456 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 9457 * Fields are: 9458 * <ul> 9459 * <li> enabled: Boolean 9460 * <li> size: length of the arrow head legs (in pixel) 9461 * <li> angle: angle of the arrow head legs In radians. 9462 * </ul> 9463 * @name arrowhead 9464 * @memberOf Vectorfield.prototype 9465 * @type {Object} 9466 * @default <tt>{enabled: true, size: 5, angle: Math.PI * 0.125}</tt> 9467 */ 9468 arrowhead: { 9469 enabled: true, 9470 size: 5, 9471 angle: Math.PI * 0.125 9472 } 9473 9474 /**#@-*/ 9475 }, 9476 9477 /** 9478 * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties 9479 * to the same value. 9480 * It is used in {@link JXG.GeometryElement#setAttribute} and in 9481 * the constructor {@link JXG.GeometryElement}. 9482 * Attention: In Options.js abbreviations are not allowed. 9483 * @type Object 9484 * @name JXG.Options#shortcuts 9485 * 9486 */ 9487 shortcuts: { 9488 color: ['strokeColor', 'fillColor'], 9489 opacity: ['strokeOpacity', 'fillOpacity'], 9490 highlightColor: ['highlightStrokeColor', 'highlightFillColor'], 9491 highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'], 9492 strokeWidth: ['strokeWidth', 'highlightStrokeWidth'] 9493 } 9494 }; 9495 9496 /** 9497 * Holds all possible properties and the according validators for geometry elements. 9498 * A validator is either a function 9499 * which takes one parameter and returns true, if the value is valid for the property, 9500 * or it is false if no validator is required. 9501 */ 9502 JXG.Validator = (function () { 9503 var i, 9504 validatePixel = function (v) { 9505 return (/^[0-9]+px$/).test(v); 9506 }, 9507 validateDisplay = function (v) { 9508 return (v === 'html' || v === 'internal'); 9509 }, 9510 validateColor = function (v) { 9511 // for now this should do it... 9512 return Type.isString(v); 9513 }, 9514 validatePointFace = function (v) { 9515 return Type.exists(JXG.normalizePointFace(v)); 9516 }, 9517 validateInteger = function (v) { 9518 return (Math.abs(v - Math.round(v)) < Mat.eps); 9519 }, 9520 validateNotNegativeInteger = function (v) { 9521 return validateInteger(v) && v >= 0; 9522 }, 9523 validatePositiveInteger = function (v) { 9524 return validateInteger(v) && v > 0; 9525 }, 9526 // validateScreenCoords = function (v) { 9527 // return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]); 9528 // }, 9529 validateRenderer = function (v) { 9530 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no'); 9531 }, 9532 validatePositive = function (v) { 9533 return v > 0; 9534 }, 9535 validateNotNegative = function (v) { 9536 return v >= 0; 9537 }, 9538 v = {}, 9539 validators = { 9540 attractorDistance: validateNotNegative, 9541 color: validateColor, 9542 // defaultDistance: Type.isNumber, 9543 display: validateDisplay, 9544 doAdvancedPlot: false, 9545 draft: false, 9546 drawLabels: false, 9547 drawZero: false, 9548 face: validatePointFace, 9549 factor: Type.isNumber, 9550 fillColor: validateColor, 9551 fillOpacity: Type.isNumber, 9552 firstArrow: false, 9553 fontSize: validateInteger, 9554 dash: validateInteger, 9555 gridX: Type.isNumber, 9556 gridY: Type.isNumber, 9557 // POI: Do we have to add something here? 9558 hasGrid: false, 9559 highlightFillColor: validateColor, 9560 highlightFillOpacity: Type.isNumber, 9561 highlightStrokeColor: validateColor, 9562 highlightStrokeOpacity: Type.isNumber, 9563 insertTicks: false, 9564 //: validateScreenCoords, 9565 lastArrow: false, 9566 layer: validateNotNegativeInteger, 9567 majorHeight: validateInteger, 9568 minorHeight: validateInteger, 9569 minorTicks: validateNotNegative, 9570 minTicksDistance: validatePositiveInteger, 9571 numberPointsHigh: validatePositiveInteger, 9572 numberPointsLow: validatePositiveInteger, 9573 opacity: Type.isNumber, 9574 radius: Type.isNumber, 9575 RDPsmoothing: false, 9576 renderer: validateRenderer, 9577 right: validatePixel, 9578 showCopyright: false, 9579 showInfobox: false, 9580 showNavigation: false, 9581 size: validateNotNegative, //validateInteger, 9582 snapSizeX: validatePositive, 9583 snapSizeY: validatePositive, 9584 snapWidth: Type.isNumber, 9585 snapToGrid: false, 9586 snatchDistance: validateNotNegative, 9587 straightFirst: false, 9588 straightLast: false, 9589 stretch: false, 9590 strokeColor: validateColor, 9591 strokeOpacity: Type.isNumber, 9592 strokeWidth: validateNotNegative, //validateInteger, 9593 takeFirst: false, 9594 takeSizeFromFile: false, 9595 to10: false, 9596 toOrigin: false, 9597 translateTo10: false, 9598 translateToOrigin: false, 9599 useASCIIMathML: false, 9600 useDirection: false, 9601 useMathJax: false, 9602 withLabel: false, 9603 withTicks: false, 9604 zoom: false 9605 }; 9606 9607 // this seems like a redundant step but it makes sure that 9608 // all properties in the validator object have lower case names 9609 // and the validator object is easier to read. 9610 for (i in validators) { 9611 if (validators.hasOwnProperty(i)) { 9612 v[i.toLowerCase()] = validators[i]; 9613 } 9614 } 9615 9616 return v; 9617 }()); 9618 9619 /** 9620 * All point faces can be defined with more than one name, e.g. a cross faced point can be given 9621 * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to 9622 * simplify if- and switch-clauses regarding point faces. The translation table is as follows: 9623 * <table> 9624 * <tr><th>Input</th><th>Output</th></tr> 9625 * <tr><td>cross</td><td>x</td></tr> 9626 * <tr><td>circle</td><td>o</td></tr> 9627 * <tr><td>square, []</td><td>[]</td></tr> 9628 * <tr><td>plus</td><td>+</td></tr> 9629 * <tr><td>minus</td><td>-</td></tr> 9630 * <tr><td>divide</td><td>|</td></tr> 9631 * <tr><td>diamond</td><td><></td></tr> 9632 * <tr><td>triangleup</td><td>^, a, A</td></tr> 9633 * <tr><td>triangledown</td><td>v</td></tr> 9634 * <tr><td>triangleleft</td><td><</td></tr> 9635 * <tr><td>triangleright</td><td>></td></tr> 9636 * </table> 9637 * @param {String} s A string which should determine a valid point face. 9638 * @returns {String} Returns a normalized string or undefined if the given string is not a valid 9639 * point face. 9640 */ 9641 JXG.normalizePointFace = function (s) { 9642 var map = { 9643 cross: 'x', 9644 x: 'x', 9645 circle: 'o', 9646 o: 'o', 9647 square: '[]', 9648 '[]': '[]', 9649 plus: '+', 9650 '+': '+', 9651 divide: '|', 9652 '|': '|', 9653 minus: '-', 9654 '-': '-', 9655 diamond: '<>', 9656 '<>': '<>', 9657 diamond2: '<<>>', 9658 '<<>>': '<<>>', 9659 triangleup: '^', 9660 A: '^', 9661 a: '^', 9662 '^': '^', 9663 triangledown: 'v', 9664 v: 'v', 9665 triangleleft: '<', 9666 '<': '<', 9667 triangleright: '>', 9668 '>': '>' 9669 }; 9670 9671 return map[s]; 9672 }; 9673 9674 9675 /** 9676 * Apply the options stored in this object to all objects on the given board. 9677 * @param {JXG.Board} board The board to which objects the options will be applied. 9678 */ 9679 JXG.useStandardOptions = function (board) { 9680 var el, t, p, copyProps, 9681 o = JXG.Options, 9682 boardHadGrid = board.hasGrid; 9683 9684 board.options.grid.hasGrid = o.grid.hasGrid; 9685 board.options.grid.gridX = o.grid.gridX; 9686 board.options.grid.gridY = o.grid.gridY; 9687 // POI: Do we have to add something here? 9688 board.options.grid.gridColor = o.grid.gridColor; 9689 board.options.grid.gridOpacity = o.grid.gridOpacity; 9690 board.options.grid.gridDash = o.grid.gridDash; 9691 board.options.grid.snapToGrid = o.grid.snapToGrid; 9692 board.options.grid.snapSizeX = o.grid.SnapSizeX; 9693 board.options.grid.snapSizeY = o.grid.SnapSizeY; 9694 board.takeSizeFromFile = o.takeSizeFromFile; 9695 9696 copyProps = function (p, o) { 9697 p.visProp.fillcolor = o.fillColor; 9698 p.visProp.highlightfillcolor = o.highlightFillColor; 9699 p.visProp.strokecolor = o.strokeColor; 9700 p.visProp.highlightstrokecolor = o.highlightStrokeColor; 9701 }; 9702 9703 for (el in board.objects) { 9704 if (board.objects.hasOwnProperty(el)) { 9705 p = board.objects[el]; 9706 if (p.elementClass === Const.OBJECT_CLASS_POINT) { 9707 copyProps(p, o.point); 9708 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) { 9709 copyProps(p, o.line); 9710 9711 for (t = 0; t < p.ticks.length; t++) { 9712 p.ticks[t].majorTicks = o.line.ticks.majorTicks; 9713 p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance; 9714 p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight; 9715 p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight; 9716 } 9717 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) { 9718 copyProps(p, o.circle); 9719 } else if (p.type === Const.OBJECT_TYPE_ANGLE) { 9720 copyProps(p, o.angle); 9721 } else if (p.type === Const.OBJECT_TYPE_ARC) { 9722 copyProps(p, o.arc); 9723 } else if (p.type === Const.OBJECT_TYPE_POLYGON) { 9724 copyProps(p, o.polygon); 9725 } else if (p.type === Const.OBJECT_TYPE_CONIC) { 9726 copyProps(p, o.conic); 9727 } else if (p.type === Const.OBJECT_TYPE_CURVE) { 9728 copyProps(p, o.curve); 9729 } else if (p.type === Const.OBJECT_TYPE_SECTOR) { 9730 p.arc.visProp.fillcolor = o.sector.fillColor; 9731 p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor; 9732 p.arc.visProp.fillopacity = o.sector.fillOpacity; 9733 p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity; 9734 } 9735 } 9736 } 9737 9738 board.fullUpdate(); 9739 if (boardHadGrid && !board.hasGrid) { 9740 board.removeGrids(board); 9741 } else if (!boardHadGrid && board.hasGrid) { 9742 board.create('grid', []); 9743 } 9744 }; 9745 9746 /** 9747 * Converts all color values to greyscale and calls useStandardOption to put them onto the board. 9748 * @param {JXG.Board} board The board to which objects the options will be applied. 9749 * @see #useStandardOptions 9750 */ 9751 JXG.useBlackWhiteOptions = function (board) { 9752 var o = JXG.Options; 9753 o.point.fillColor = Color.rgb2bw(o.point.fillColor); 9754 o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor); 9755 o.point.strokeColor = Color.rgb2bw(o.point.strokeColor); 9756 o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor); 9757 9758 o.line.fillColor = Color.rgb2bw(o.line.fillColor); 9759 o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor); 9760 o.line.strokeColor = Color.rgb2bw(o.line.strokeColor); 9761 o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor); 9762 9763 o.circle.fillColor = Color.rgb2bw(o.circle.fillColor); 9764 o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor); 9765 o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor); 9766 o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor); 9767 9768 o.arc.fillColor = Color.rgb2bw(o.arc.fillColor); 9769 o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor); 9770 o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor); 9771 o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor); 9772 9773 o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor); 9774 o.polygon.highlightFillColor = Color.rgb2bw(o.polygon.highlightFillColor); 9775 9776 o.sector.fillColor = Color.rgb2bw(o.sector.fillColor); 9777 o.sector.highlightFillColor = Color.rgb2bw(o.sector.highlightFillColor); 9778 9779 o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor); 9780 o.grid.gridColor = Color.rgb2bw(o.grid.gridColor); 9781 9782 JXG.useStandardOptions(board); 9783 }; 9784 9785 // needs to be exported 9786 JXG.Options.normalizePointFace = JXG.normalizePointFace; 9787 9788 export default JXG.Options; 9789