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 and max-width or max-height set, but 1084 * has a property like box-sizing:content-box, 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 * List of object ids which should be ignored on setting automatic position of label text. 6327 * 6328 * @name Label#autoPositionWhitelist 6329 * @see Label#autoPosition 6330 * @type Array 6331 * @default [] 6332 */ 6333 autoPositionWhitelist: [] 6334 6335 /**#@-*/ 6336 }, 6337 6338 /* special legend options */ 6339 legend: { 6340 /** 6341 * @visprop 6342 */ 6343 6344 /** 6345 * Default style of a legend element. The only possible value is 'vertical'. 6346 * @name Legend#style 6347 * @type String 6348 * @default 'vertical' 6349 */ 6350 style: 'vertical', 6351 6352 /** 6353 * Label names of a legend element. 6354 * @name Legend#labels 6355 * @type Array 6356 * @default "['1', '2', '3', '4', '5', '6', '7', '8']" 6357 */ 6358 labels: ['1', '2', '3', '4', '5', '6', '7', '8'], 6359 6360 /** 6361 * (Circular) array of label colors. 6362 * @name Legend#colors 6363 * @type Array 6364 * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']" 6365 */ 6366 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 6367 6368 /** 6369 * Height (in px) of one legend entry 6370 * @name Legend#rowHeight 6371 * @type Number 6372 * @default 20 6373 * 6374 */ 6375 rowHeight: 20, 6376 6377 strokeWidth: 5 6378 6379 /**#@-*/ 6380 }, 6381 6382 /* special line options */ 6383 line: { 6384 /**#@+ 6385 * @visprop 6386 */ 6387 6388 /** 6389 * Configure the arrow head at the position of its first point or the corresponding 6390 * intersection with the canvas border 6391 * 6392 * The attribute firstArrow can be a Boolean or an object with the following sub-attributes: 6393 * <pre> 6394 * { 6395 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 6396 * size: 6, // size of the arrow head. Default value is 6. 6397 * // This value is multiplied with the strokeWidth of the line 6398 * // Exception: for type=7 size is ignored 6399 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value 6400 * } 6401 * </pre> 6402 * type=7 is the default for curves if firstArrow: true 6403 * <p> 6404 * An arrow head can be turned off with line.setAttribute({firstArrow: false}). 6405 * 6406 * @example 6407 * board.options.line.lastArrow = false; 6408 * board.options.line.firstArrow = {size: 10, highlightSize: 10}; 6409 * board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}}; 6410 * board.options.line.strokeWidth = 4; 6411 * board.options.line.highlightStrokeWidth = 4; 6412 * 6413 * board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}}); 6414 * board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}}); 6415 * board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}}); 6416 * board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}}); 6417 * board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}}); 6418 * board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}}); 6419 * board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}}); 6420 * 6421 * </pre><div id="JXGc94a93da-c942-4204-8bb6-b39726cbb09b" class="jxgbox" style="width: 300px; height: 300px;"></div> 6422 * <script type="text/javascript"> 6423 * (function() { 6424 * var board = JXG.JSXGraph.initBoard('JXGc94a93da-c942-4204-8bb6-b39726cbb09b', 6425 * {boundingbox: [-6, 6, 4,-4], axis: false, showcopyright: false, shownavigation: false}); 6426 * board.options.line.lastArrow = false; 6427 * board.options.line.firstArrow = {size: 10, highlightSize: 10}; 6428 * board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}}; 6429 * board.options.line.strokeWidth = 4; 6430 * board.options.line.highlightStrokeWidth = 4; 6431 * 6432 * board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}}); 6433 * board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}}); 6434 * board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}}); 6435 * board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}}); 6436 * board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}}); 6437 * board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}}); 6438 * board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}}); 6439 * 6440 * })(); 6441 * 6442 * </script><pre> 6443 * 6444 * @name Line#firstArrow 6445 * @see Line#lastArrow 6446 * @see Line#touchFirstPoint 6447 * @type Boolean | Object 6448 * @default false 6449 */ 6450 firstArrow: false, 6451 6452 /** 6453 * Configure the arrow head at the position of its second point or the corresponding 6454 * intersection with the canvas border. 6455 * 6456 * The attribute lastArrow can be a Boolean or an object with the following sub-attributes: 6457 * <pre> 6458 * { 6459 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 6460 * size: 6, // size of the arrow head. Default value is 6. 6461 * // This value is multiplied with the strokeWidth of the line. 6462 * // Exception: for type=7 size is ignored 6463 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6. 6464 * } 6465 * </pre> 6466 * type=7 is the default for curves if lastArrow: true 6467 * <p> 6468 * An arrow head can be turned off with line.setAttribute({lastArrow: false}). 6469 * 6470 * @example 6471 * var p1 = board.create('point', [-5, 2], {size:1}); 6472 * var p2 = board.create('point', [5, 2], {size:10}); 6473 * var li = board.create('segment', ['A','B'], 6474 * {name:'seg', 6475 * strokeColor:'#000000', 6476 * strokeWidth:1, 6477 * highlightStrokeWidth: 5, 6478 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 6479 * touchLastPoint: true, 6480 * firstArrow: {type: 3, size: 8} 6481 * }); 6482 * 6483 * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div> 6484 * <script type="text/javascript"> 6485 * (function() { 6486 * var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3', 6487 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 6488 * var p1 = board.create('point', [-5, 2], {size:1}); 6489 * var p2 = board.create('point', [5, 2], {size:10}); 6490 * var li = board.create('segment', ['A','B'], 6491 * {name:'seg', 6492 * strokeColor:'#000000', 6493 * strokeWidth:1, 6494 * highlightStrokeWidth: 5, 6495 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 6496 * touchLastPoint: true, 6497 * firstArrow: {type: 3, size: 8} 6498 * }); 6499 * })(); 6500 * 6501 * </script> 6502 * 6503 * @example 6504 * board.options.line.strokeWidth = 4; 6505 * board.options.line.highlightStrokeWidth = 4; 6506 * board.options.line.firstArrow = false; 6507 * board.options.line.lastArrow = {size: 10, highlightSize: 10}; 6508 * board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}}; 6509 * 6510 * board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}}); 6511 * board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}}); 6512 * board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}}); 6513 * board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}}); 6514 * board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}}); 6515 * board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}}); 6516 * board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}}); 6517 * 6518 * </pre><div id="JXGca206b1c-e319-4899-8b90-778f53fd926d" class="jxgbox" style="width: 300px; height: 300px;"></div> 6519 * <script type="text/javascript"> 6520 * (function() { 6521 * var board = JXG.JSXGraph.initBoard('JXGca206b1c-e319-4899-8b90-778f53fd926d', 6522 * {boundingbox: [-6, 6, 6,-4], axis: false, showcopyright: false, shownavigation: false}); 6523 * board.options.line.strokeWidth = 4; 6524 * board.options.line.highlightStrokeWidth = 4; 6525 * board.options.line.firstArrow = false; 6526 * board.options.line.lastArrow = {size: 10, highlightSize: 10}; 6527 * board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}}; 6528 * 6529 * board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}}); 6530 * board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}}); 6531 * board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}}); 6532 * board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}}); 6533 * board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}}); 6534 * board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}}); 6535 * board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}}); 6536 * })(); 6537 * 6538 * </script><pre> 6539 * 6540 * @name Line#lastArrow 6541 * @see Line#firstArrow 6542 * @see Line#touchLastPoint 6543 * @type Boolean | Object 6544 * @default false 6545 */ 6546 lastArrow: false, 6547 6548 /** 6549 * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line 6550 * ends exactly at the border, if negative there is a margin to the inside, if positive the line 6551 * ends outside of the canvas (which is invisible). 6552 * 6553 * @name Line#margin 6554 * @type Number 6555 * @default 0 6556 */ 6557 margin: 0, 6558 6559 /** 6560 * If true, line stretches infinitely in direction of its first point. 6561 * Otherwise it ends at point1. 6562 * 6563 * @name Line#straightFirst 6564 * @see Line#straightLast 6565 * @type Boolean 6566 * @default true 6567 */ 6568 straightFirst: true, 6569 6570 /** 6571 * If true, line stretches infinitely in direction of its second point. 6572 * Otherwise it ends at point2. 6573 * 6574 * @name Line#straightLast 6575 * @see Line#straightFirst 6576 * @type Boolean 6577 * @default true 6578 */ 6579 straightLast: true, 6580 6581 fillColor: 'none', // Important for VML on IE 6582 highlightFillColor: 'none', // Important for VML on IE 6583 strokeColor: Color.palette.blue, 6584 highlightStrokeColor: '#c3d9ff', 6585 withTicks: false, 6586 6587 /** 6588 * Attributes for first defining point of the line. 6589 * 6590 * @type Point 6591 * @name Line#point1 6592 */ 6593 point1: { // Default values for point1 if created by line 6594 fillColor: Color.palette.red, 6595 strokeColor: Color.palette.red, 6596 highlightFillColor: '#c3d9ff', 6597 highlightStrokeColor: '#c3d9ff', 6598 layer: 9, 6599 6600 visible: false, 6601 withLabel: false, 6602 fixed: false, 6603 name: '' 6604 }, 6605 6606 /** 6607 * Attributes for second defining point of the line. 6608 * 6609 * @type Point 6610 * @name Line#point2 6611 */ 6612 point2: { // Default values for point2 if created by line 6613 fillColor: Color.palette.red, 6614 strokeColor: Color.palette.red, 6615 highlightFillColor: '#c3d9ff', 6616 highlightStrokeColor: '#c3d9ff', 6617 layer: 9, 6618 6619 visible: false, 6620 withLabel: false, 6621 fixed: false, 6622 name: '' 6623 }, 6624 6625 /** 6626 * Attributes for ticks of the line. 6627 * 6628 * @name Line#ticks 6629 * @type Object 6630 * @see Ticks 6631 */ 6632 ticks: { 6633 drawLabels: true, 6634 label: { 6635 offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts 6636 }, 6637 drawZero: false, 6638 insertTicks: false, 6639 ticksDistance: 1, 6640 minTicksDistance: 50, 6641 minorHeight: 4, // if <0: full width and height 6642 majorHeight: -1, // if <0: full width and height 6643 minorTicks: 4, 6644 strokeOpacity: 0.3, 6645 visible: 'inherit' 6646 }, 6647 6648 /** 6649 * Attributes for the line label. 6650 * 6651 * @type Object 6652 * @name Line#label 6653 * @see Label 6654 */ 6655 label: { 6656 position: 'llft' 6657 }, 6658 6659 /** 6660 * If set to true, the point will snap to a grid defined by 6661 * {@link Point#snapSizeX} and {@link Point#snapSizeY}. 6662 * 6663 * @see Point#snapSizeX 6664 * @see Point#snapSizeY 6665 * @type Boolean 6666 * @name Line#snapToGrid 6667 * @default false 6668 */ 6669 snapToGrid: false, 6670 6671 /** 6672 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 6673 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 6674 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 6675 * of the default ticks of the default x axes of the board. 6676 * 6677 * @see Point#snapToGrid 6678 * @see Point#snapSizeY 6679 * @see JXG.Board#defaultAxes 6680 * @type Number 6681 * @name Line#snapSizeX 6682 * @default 1 6683 */ 6684 snapSizeX: 1, 6685 6686 /** 6687 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 6688 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 6689 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 6690 * of the default ticks of the default y axes of the board. 6691 * 6692 * @see Point#snapToGrid 6693 * @see Point#snapSizeX 6694 * @see JXG.Board#defaultAxes 6695 * @type Number 6696 * @name Line#snapSizeY 6697 * @default 1 6698 */ 6699 snapSizeY: 1, 6700 6701 /** 6702 * If set to true, {@link Line#firstArrow} is set to true and the point is visible, 6703 * the arrow head will just touch the circle line of the start point of the line. 6704 * 6705 * @see Line#firstArrow 6706 * @type Boolean 6707 * @name Line#touchFirstPoint 6708 * @default false 6709 */ 6710 touchFirstPoint: false, 6711 6712 /** 6713 * If set to true, {@link Line#lastArrow} is set to true and the point is visible, 6714 * the arrow head will just touch the circle line of the start point of the line. 6715 * @see Line#firstArrow 6716 * @type Boolean 6717 * @name Line#touchLastPoint 6718 * @default false 6719 */ 6720 touchLastPoint: false 6721 6722 /**#@-*/ 6723 }, 6724 6725 /* special options for locus curves */ 6726 locus: { 6727 /**#@+ 6728 * @visprop 6729 */ 6730 6731 translateToOrigin: false, 6732 translateTo10: false, 6733 stretch: false, 6734 toOrigin: null, 6735 to10: null 6736 /**#@-*/ 6737 }, 6738 6739 /* special measurement options */ 6740 measurement: { 6741 /**#@+ 6742 * @visprop 6743 */ 6744 6745 baseUnit: '', 6746 units: {}, 6747 dim: null, 6748 6749 showPrefix: true, 6750 showSuffix: true, 6751 6752 prefix: '', 6753 suffix: '', 6754 6755 formatPrefix: function (txt) { return txt; }, 6756 formatSuffix: function (txt) { return txt; }, 6757 6758 formatCoords: function (x, y, z) { 6759 if (parseFloat(z) !== 1) 6760 return '(NaN | NaN)'; 6761 else 6762 return '(' + x + ', ' + y + ')'; 6763 }, 6764 formatDirection: function (x, y) { 6765 return '(' + x + ', ' + y + ')'; 6766 } 6767 6768 /**#@-*/ 6769 }, 6770 6771 /* special metapost spline options */ 6772 metapostspline: { 6773 /**#@+ 6774 * @visprop 6775 */ 6776 6777 /** 6778 * Controls if the data points of the cardinal spline when given as 6779 * arrays should be converted into {@link JXG.Points}. 6780 * 6781 * @name createPoints 6782 * @memberOf Metapostspline.prototype 6783 * 6784 * @see Metapostspline#points 6785 * 6786 * @type Boolean 6787 * @default true 6788 */ 6789 createPoints: true, 6790 6791 /** 6792 * If set to true, the supplied coordinates are interpreted as 6793 * [[x_0, y_0], [x_1, y_1], p, ...]. 6794 * Otherwise, if the data consists of two arrays of equal length, 6795 * it is interpreted as 6796 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 6797 * 6798 * @name isArrayOfCoordinates 6799 * @memberOf Metapostspline.prototype 6800 * @type Boolean 6801 * @default true 6802 */ 6803 isArrayOfCoordinates: true, 6804 6805 /** 6806 * Attributes for the points generated by Metapost spline in cases 6807 * {@link createPoints} is set to true 6808 * 6809 * @name points 6810 * @memberOf Metapostspline.prototype 6811 * 6812 * @see Metapostspline#createPoints 6813 * @type Object 6814 */ 6815 points: { 6816 strokeOpacity: 0.5, 6817 fillOpacity: 0.5, 6818 highlightStrokeOpacity: 1.0, 6819 highlightFillOpacity: 1.0, 6820 withLabel: false, 6821 name: '', 6822 fixed: false 6823 } 6824 6825 /**#@-*/ 6826 }, 6827 6828 /* special mirrorelement options */ 6829 mirrorelement: { 6830 /**#@+ 6831 * @visprop 6832 */ 6833 6834 fixed: true, 6835 6836 /** 6837 * Attributes of mirror point, i.e. the point along which the element is mirrored. 6838 * 6839 * @type Point 6840 * @name mirrorelement#point 6841 */ 6842 point: {}, 6843 6844 /** 6845 * Attributes of circle center, i.e. the center of the circle, 6846 * if a circle is the mirror element and the transformation type is 'Euclidean' 6847 * 6848 * @type Point 6849 * @name mirrorelement#center 6850 */ 6851 center: {}, 6852 6853 /** 6854 * Type of transformation. Possible values are 'Euclidean', 'projective'. 6855 * 6856 * If the value is 'Euclidean', the mirror element of a circle is again a circle, 6857 * otherwise it is a conic section. 6858 * 6859 * @type String 6860 * @name mirrorelement#type 6861 * @default 'Euclidean' 6862 */ 6863 type: 'Euclidean' 6864 6865 /**#@-*/ 6866 }, 6867 6868 /* special nonreflexangle options */ 6869 nonreflexangle: { 6870 /**#@+ 6871 * @visprop 6872 */ 6873 6874 /**#@-*/ 6875 }, 6876 6877 // /* special options for Msector of 3 points */ 6878 // msector: { 6879 // strokeColor: '#000000', // Msector line 6880 // point: { // Msector point 6881 // visible: false, 6882 // fixed: false, 6883 // withLabel: false, 6884 // name: '' 6885 // } 6886 // }, 6887 6888 /* special options for normal lines */ 6889 normal: { 6890 /**#@+ 6891 * @visprop 6892 */ 6893 6894 strokeColor: '#000000', // normal line 6895 6896 /** 6897 * Attributes of helper point of normal. 6898 * 6899 * @type Point 6900 * @name Normal#point 6901 */ 6902 point: { 6903 visible: false, 6904 fixed: false, 6905 withLabel: false, 6906 name: '' 6907 } 6908 /**#@-*/ 6909 }, 6910 6911 /* special options for orthogonal projection points */ 6912 orthogonalprojection: { 6913 /**#@+ 6914 * @visprop 6915 */ 6916 /**#@-*/ 6917 }, 6918 6919 /* special otherintersection point options */ 6920 otherintersection: { 6921 /**#@+ 6922 * @visprop 6923 */ 6924 6925 /** 6926 * This flag sets the behavior of other intersection points of e.g. 6927 * a circle and a segment. If true, the intersection is treated as intersection with a line. If false 6928 * the intersection point exists if the segment intersects setwise. 6929 * 6930 * @name Otherintersection.alwaysIntersect 6931 * @type Boolean 6932 * @default true 6933 */ 6934 alwaysIntersect: true, 6935 6936 /** 6937 * Minimum distance (in user coordinates) for points to be defined as different. 6938 * For implicit curves and other non approximate curves this number might have to be 6939 * increased. 6940 * 6941 * @name Otherintersection.precision 6942 * @type Number 6943 * @default 0.001 6944 */ 6945 precision: 0.001 6946 6947 /**#@-*/ 6948 }, 6949 6950 /* special options for parallel lines */ 6951 parallel: { 6952 /**#@+ 6953 * @visprop 6954 */ 6955 6956 strokeColor: '#000000', // Parallel line 6957 6958 /** 6959 * Attributes of helper point of normal. 6960 * 6961 * @type Point 6962 * @name Parallel#point 6963 */ 6964 point: { 6965 visible: false, 6966 fixed: false, 6967 withLabel: false, 6968 name: '' 6969 }, 6970 6971 label: { 6972 position: 'llft' 6973 } 6974 /**#@-*/ 6975 }, 6976 6977 /* special parallelogram options */ 6978 parallelogram: { 6979 parallelpoint: { 6980 withLabel: false, 6981 name: '' 6982 } 6983 }, 6984 6985 /* special parallelpoint options */ 6986 parallelpoint: { 6987 }, 6988 6989 /* special perpendicular options */ 6990 perpendicular: { 6991 /**#@+ 6992 * @visprop 6993 */ 6994 6995 strokeColor: '#000000', // Perpendicular line 6996 straightFirst: true, 6997 straightLast: true 6998 /**#@-*/ 6999 }, 7000 7001 /* special perpendicular options */ 7002 perpendicularsegment: { 7003 /**#@+ 7004 * @visprop 7005 */ 7006 7007 strokeColor: '#000000', // Perpendicular segment 7008 straightFirst: false, 7009 straightLast: false, 7010 point: { // Perpendicular point 7011 visible: false, 7012 fixed: true, 7013 withLabel: false, 7014 name: '' 7015 } 7016 /**#@-*/ 7017 }, 7018 7019 /* special point options */ 7020 point: { 7021 /**#@+ 7022 * @visprop 7023 */ 7024 7025 withLabel: true, 7026 label: {}, 7027 7028 /** 7029 * This attribute was used to determined the point layout. It was derived from GEONExT and was 7030 * replaced by {@link Point#face} and {@link Point#size}. 7031 * 7032 * @name Point#style 7033 * 7034 * @see Point#face 7035 * @see Point#size 7036 * @type Number 7037 * @default 5 7038 * @deprecated 7039 */ 7040 style: 5, 7041 7042 /** 7043 * There are different point styles which differ in appearance. 7044 * Posssible values are 7045 * <table> 7046 * <tr><th>Input</th><th>Output</th></tr> 7047 * <tr><td>cross</td><td>x</td></tr> 7048 * <tr><td>circle</td><td>o</td></tr> 7049 * <tr><td>square, []</td><td>[]</td></tr> 7050 * <tr><td>plus</td><td>+</td></tr> 7051 * <tr><td>minus</td><td>-</td></tr> 7052 * <tr><td>divide</td><td>|</td></tr> 7053 * <tr><td>diamond</td><td><></td></tr> 7054 * <tr><td>diamond2</td><td><> (bigger)</td></tr> 7055 * <tr><td>triangleup</td><td>^, a, A</td></tr> 7056 * <tr><td>triangledown</td><td>v</td></tr> 7057 * <tr><td>triangleleft</td><td><</td></tr> 7058 * <tr><td>triangleright</td><td>></td></tr> 7059 * </table> 7060 * 7061 * @name Point#face 7062 * 7063 * @type String 7064 * @see JXG.Point#setStyle 7065 * @default circle 7066 */ 7067 face: 'o', 7068 7069 /** 7070 * Size of a point, either in pixel or user coordinates. 7071 * Means radius resp. half the width of a point (depending on the face). 7072 * 7073 * @name Point#size 7074 * 7075 * @see Point#face 7076 * @see JXG.Point#setStyle 7077 * @see Point#sizeUnit 7078 * @type Number 7079 * @default 3 7080 */ 7081 size: 3, 7082 7083 /** 7084 * Unit for size. 7085 * Possible values are 'screen' and 'user. 7086 * 7087 * @name Point#sizeUnit 7088 * 7089 * @see Point#size 7090 * @type String 7091 * @default 'screen' 7092 */ 7093 sizeUnit: 'screen', 7094 7095 strokeWidth: 2, 7096 7097 transitionProperties: ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width', 'width', 'height', 'rx', 'ry'], 7098 fillColor: Color.palette.red, 7099 strokeColor: Color.palette.red, 7100 highlightFillColor: '#c3d9ff', 7101 highlightStrokeColor: '#c3d9ff', 7102 // strokeOpacity: 1.0, 7103 // fillOpacity: 1.0, 7104 // highlightFillOpacity: 0.5, 7105 // highlightStrokeOpacity: 0.5, 7106 7107 // fillColor: '#ff0000', 7108 // highlightFillColor: '#eeeeee', 7109 // strokeWidth: 2, 7110 // strokeColor: '#ff0000', 7111 // highlightStrokeColor: '#c3d9ff', 7112 7113 /** 7114 * If true, the point size changes on zoom events. 7115 * 7116 * @type Boolean 7117 * @name Point#zoom 7118 * @default false 7119 * 7120 */ 7121 zoom: false, // Change the point size on zoom 7122 7123 /** 7124 * If true, the infobox is shown on mouse/pen over, if false not. 7125 * If the value is 'inherit', the value of 7126 * {@link JXG.Board#showInfobox} is taken. 7127 * 7128 * @name Point#showInfobox 7129 * @see JXG.Board#showInfobox 7130 * @type Boolean|String 7131 * @description true | false | 'inherit' 7132 * @default true 7133 */ 7134 showInfobox: 'inherit', 7135 7136 /** 7137 * Truncating rule for the digits in the infobox. 7138 * <ul> 7139 * <li>'auto': done automatically by JXG.autoDigits() 7140 * <li>'none': no truncation 7141 * <li>number: truncate after "number digits" with JXG.toFixed() 7142 * </ul> 7143 * 7144 * @name Point#infoboxDigits 7145 * 7146 * @type String| Number 7147 * @default 'auto' 7148 * @see JXG#autoDigits 7149 * @see JXG#toFixed 7150 */ 7151 infoboxDigits: 'auto', 7152 7153 draft: false, 7154 7155 /** 7156 * List of attractor elements. If the distance of the point is less than 7157 * attractorDistance the point is made to glider of this element. 7158 * 7159 * @name Point#attractors 7160 * 7161 * @type Array 7162 * @default empty 7163 */ 7164 attractors: [], 7165 7166 /** 7167 * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints. 7168 * Possible values are 'screen' and 'user'. 7169 * 7170 * @name Point#attractorUnit 7171 * 7172 * @see Point#attractorDistance 7173 * @see Point#snatchDistance 7174 * @see Point#snapToPoints 7175 * @see Point#attractors 7176 * @type String 7177 * @default 'user' 7178 */ 7179 attractorUnit: 'user', // 'screen', 'user' 7180 7181 /** 7182 * If the distance of the point to one of its attractors is less 7183 * than this number the point will be a glider on this 7184 * attracting element. 7185 * If set to zero nothing happens. 7186 * 7187 * @name Point#attractorDistance 7188 * 7189 * @type Number 7190 * @default 0.0 7191 */ 7192 attractorDistance: 0.0, 7193 7194 /** 7195 * If the distance of the point to one of its attractors is at least 7196 * this number the point will be released from being a glider on the 7197 * attracting element. 7198 * If set to zero nothing happens. 7199 * 7200 * @name Point#snatchDistance 7201 * 7202 * @type Number 7203 * @default 0.0 7204 */ 7205 snatchDistance: 0.0, 7206 7207 /** 7208 * If set to true, the point will snap to a grid of integer multiples of 7209 * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates). 7210 * <p> 7211 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 7212 * (given in user coordinates, not pixels) or are the intersection points 7213 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 7214 * 7215 * @name Point#snapToGrid 7216 * 7217 * @see Point#snapSizeX 7218 * @see Point#snapSizeY 7219 * @type Boolean 7220 * @default false 7221 */ 7222 snapToGrid: false, 7223 7224 /** 7225 * If set to true, the point will only snap to (possibly invisibly) grid points 7226 * when within {@link Point#attractorDistance} of such a grid point. 7227 * <p> 7228 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 7229 * (given in user coordinates, not pixels) or are the intersection points 7230 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 7231 * 7232 * @name Point#attractToGrid 7233 * 7234 * @see Point#attractorDistance 7235 * @see Point#attractorUnit 7236 * @see Point#snapToGrid 7237 * @see Point#snapSizeX 7238 * @see Point#snapSizeY 7239 * @type Boolean 7240 * @default false 7241 * 7242 * @example 7243 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 7244 * 7245 * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div> 7246 * <script type="text/javascript"> 7247 * (function() { 7248 * var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6', 7249 * {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false}); 7250 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 7251 * 7252 * })(); 7253 * 7254 * </script><pre> 7255 * 7256 */ 7257 attractToGrid: false, 7258 7259 /** 7260 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 7261 * It is given in user coordinates, not in pixels. 7262 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 7263 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 7264 * of the default ticks of the default x axes of the board. 7265 * 7266 * @name Point#snapSizeX 7267 * 7268 * @see Point#snapToGrid 7269 * @see Point#snapSizeY 7270 * @see JXG.Board#defaultAxes 7271 * @type Number 7272 * @default 1 7273 */ 7274 snapSizeX: 1, 7275 7276 /** 7277 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 7278 * It is given in user coordinates, not in pixels. 7279 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 7280 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 7281 * of the default ticks of the default y axes of the board. 7282 * 7283 * @name Point#snapSizeY 7284 * 7285 * @see Point#snapToGrid 7286 * @see Point#snapSizeX 7287 * @see JXG.Board#defaultAxes 7288 * @type Number 7289 * @default 1 7290 */ 7291 snapSizeY: 1, 7292 7293 /** 7294 * If set to true, the point will snap to the nearest point in distance of 7295 * {@link Point#attractorDistance}. 7296 * 7297 * @name Point#snapToPoints 7298 * 7299 * @see Point#attractorDistance 7300 * @type Boolean 7301 * @default false 7302 */ 7303 snapToPoints: false, 7304 7305 /** 7306 * List of elements which are ignored by snapToPoints. 7307 * @name Point#ignoredSnapToPoints 7308 * 7309 * @type Array 7310 * @default empty 7311 */ 7312 ignoredSnapToPoints: [] 7313 7314 /**#@-*/ 7315 }, 7316 7317 /* special polygon options */ 7318 polygon: { 7319 /**#@+ 7320 * @visprop 7321 */ 7322 7323 /** 7324 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 7325 * 7326 * @see JXG.GeometryElement#hasPoint 7327 * @name Polygon#hasInnerPoints 7328 * @type Boolean 7329 * @default false 7330 */ 7331 hasInnerPoints: false, 7332 7333 fillColor: Color.palette.yellow, 7334 highlightFillColor: Color.palette.yellow, 7335 // fillColor: '#00ff00', 7336 // highlightFillColor: '#00ff00', 7337 fillOpacity: 0.3, 7338 highlightFillOpacity: 0.2, 7339 7340 /** 7341 * Is the polygon bordered by lines? 7342 * 7343 * @type Boolean 7344 * @name Polygon#withLines 7345 * @default true 7346 */ 7347 withLines: true, 7348 7349 /** 7350 * Attributes for the polygon border lines. 7351 * 7352 * @type Line 7353 * @name Polygon#borders 7354 */ 7355 borders: { 7356 withLabel: false, 7357 strokeWidth: 1, 7358 highlightStrokeWidth: 1, 7359 // Polygon layer + 1 7360 layer: 5, 7361 label: { 7362 position: 'top' 7363 }, 7364 visible: 'inherit' 7365 }, 7366 7367 /** 7368 * By default, the strokewidths of the borders of a polygon are not changed during highlighting (only strokeColor and strokeOpacity are changed 7369 * to highlightStrokeColor, and highlightStrokeOpacity). 7370 * However, strokewidth is changed to highlightStrokewidth if an individual border gets the focus. 7371 * <p> 7372 * With this attribute set to true, also the borders change strokeWidth if the polygon itself gets the focus. 7373 * 7374 * @type Boolean 7375 * @name Polygon#highlightByStrokeWidth 7376 * @default false 7377 */ 7378 highlightByStrokeWidth: false, 7379 7380 /** 7381 * Attributes for the polygon vertices. 7382 * 7383 * @type Point 7384 * @name Polygon#vertices 7385 */ 7386 vertices: { 7387 layer: 9, 7388 withLabel: false, 7389 name: '', 7390 strokeColor: Color.palette.red, 7391 fillColor: Color.palette.red, 7392 fixed: false, 7393 visible: 'inherit' 7394 }, 7395 7396 /** 7397 * Attributes for the polygon label. 7398 * 7399 * @type Label 7400 * @name Polygon#label 7401 */ 7402 label: { 7403 offset: [0, 0] 7404 } 7405 7406 /**#@-*/ 7407 }, 7408 7409 /* special polygonal chain options 7410 */ 7411 polygonalchain: { 7412 /**#@+ 7413 * @visprop 7414 */ 7415 7416 fillColor: 'none', 7417 highlightFillColor: 'none' 7418 7419 /**#@-*/ 7420 }, 7421 7422 /* special prescribed angle options 7423 * Not yet implemented. But angle.setAngle(val) is implemented. 7424 7425 */ 7426 prescribedangle: { 7427 /**#@+ 7428 * @visprop 7429 */ 7430 7431 /** 7432 * Attributes for the helper point of the prescribed angle. 7433 * 7434 * @type Point 7435 * @name Prescribedangle#anglePoint 7436 * @ignore 7437 */ 7438 anglePoint: { 7439 size: 2, 7440 visible: false, 7441 withLabel: false 7442 } 7443 7444 /**#@-*/ 7445 }, 7446 7447 /* special reflection options */ 7448 reflection: { 7449 /**#@+ 7450 * @visprop 7451 */ 7452 7453 fixed: true, 7454 7455 /** 7456 * Attributes of circle center, i.e. the center of the circle, 7457 * if a circle is the mirror element and the transformation type is 'Euclidean' 7458 * 7459 * @type center 7460 * @name Reflection#center 7461 */ 7462 center: {}, 7463 7464 /** 7465 * Type of transformation. Possible values are 'Euclidean', 'projective'. 7466 * 7467 * If the value is 'Euclidean', the reflected element of a circle is again a circle, 7468 * otherwise it is a conic section. 7469 * 7470 * @type String 7471 * @name Reflection#type 7472 * @default 'Euclidean' 7473 */ 7474 type: 'Euclidean' 7475 7476 /**#@-*/ 7477 }, 7478 7479 /* special reflexangle options */ 7480 reflexangle: { 7481 /**#@+ 7482 * @visprop 7483 */ 7484 7485 /**#@-*/ 7486 }, 7487 7488 /* special regular polygon options */ 7489 regularpolygon: { 7490 /**#@+ 7491 * @visprop 7492 */ 7493 7494 /** 7495 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 7496 * @see JXG.GeometryElement#hasPoint 7497 * 7498 * @name RegularPolygon#hasInnerPoints 7499 * @type Boolean 7500 * @default false 7501 */ 7502 hasInnerPoints: false, 7503 fillColor: Color.palette.yellow, 7504 highlightFillColor: Color.palette.yellow, 7505 fillOpacity: 0.3, 7506 highlightFillOpacity: 0.2, 7507 7508 /** 7509 * Is the polygon bordered by lines? 7510 * 7511 * @type Boolean 7512 * @name RegularPolygon#withLines 7513 * @default true 7514 */ 7515 withLines: true, 7516 7517 /** 7518 * Attributes for the polygon border lines. 7519 * 7520 * @type Line 7521 * @name RegularPolygon#borders 7522 */ 7523 borders: { 7524 withLabel: false, 7525 strokeWidth: 1, 7526 highlightStrokeWidth: 1, 7527 // Polygon layer + 1 7528 layer: 5, 7529 label: { 7530 position: 'top' 7531 } 7532 }, 7533 7534 /** 7535 * Attributes for the polygon vertices. 7536 * 7537 * @type Point 7538 * @name RegularPolygon#vertices 7539 */ 7540 vertices: { 7541 layer: 9, 7542 withLabel: true, 7543 strokeColor: Color.palette.red, 7544 fillColor: Color.palette.red, 7545 fixed: false 7546 }, 7547 7548 /** 7549 * Attributes for the polygon label. 7550 * 7551 * @type Label 7552 * @name RegularPolygon#label 7553 */ 7554 label: { 7555 offset: [0, 0] 7556 } 7557 7558 /**#@-*/ 7559 }, 7560 7561 /* special options for riemann sums */ 7562 riemannsum: { 7563 /**#@+ 7564 * @visprop 7565 */ 7566 7567 withLabel: false, 7568 fillOpacity: 0.3, 7569 fillColor: Color.palette.yellow 7570 7571 /**#@-*/ 7572 }, 7573 7574 /* special sector options */ 7575 sector: { 7576 /**#@+ 7577 * @visprop 7578 */ 7579 7580 fillColor: Color.palette.yellow, 7581 highlightFillColor: Color.palette.yellow, 7582 // fillColor: '#00ff00', 7583 // highlightFillColor: '#00ff00', 7584 7585 fillOpacity: 0.3, 7586 highlightFillOpacity: 0.3, 7587 highlightOnSector: false, 7588 highlightStrokeWidth: 0, 7589 7590 /** 7591 * Type of sector. Possible values are 'minor', 'major', and 'auto'. 7592 * 7593 * @type String 7594 * @name Sector#selection 7595 * @default 'auto' 7596 */ 7597 selection: 'auto', 7598 7599 /** 7600 * Attributes for sub-element arc. It is only available, if the sector is defined by three points. 7601 * 7602 * @type Arc 7603 * @name Sector#arc 7604 * @default '{visible:false}' 7605 */ 7606 arc: { 7607 visible: false, 7608 fillColor: 'none', 7609 withLabel: false, 7610 name: '', 7611 7612 center: { 7613 visible: false, 7614 withLabel: false, 7615 name: '' 7616 }, 7617 7618 radiusPoint: { 7619 visible: false, 7620 withLabel: false, 7621 name: '' 7622 }, 7623 7624 anglePoint: { 7625 visible: false, 7626 withLabel: false, 7627 name: '' 7628 } 7629 }, 7630 7631 /** 7632 * Attributes for helper point radiuspoint in case it is provided by coordinates. 7633 * 7634 * @type Point 7635 * @name Sector#radiusPoint 7636 */ 7637 radiusPoint: { 7638 visible: false, 7639 withLabel: false 7640 }, 7641 7642 /** 7643 * Attributes for helper point center in case it is provided by coordinates. 7644 * 7645 * @type Point 7646 * @name Sector#center 7647 */ 7648 center: { 7649 visible: false, 7650 withLabel: false 7651 }, 7652 7653 /** 7654 * Attributes for helper point anglepoint in case it is provided by coordinates. 7655 * 7656 * @type Point 7657 * @name Sector#anglePoint 7658 */ 7659 anglePoint: { 7660 visible: false, 7661 withLabel: false 7662 }, 7663 7664 /** 7665 * Attributes for the sector label. 7666 * 7667 * @type Label 7668 * @name Sector#label 7669 */ 7670 label: { 7671 offset: [0, 0], 7672 anchorX: 'auto', 7673 anchorY: 'auto' 7674 } 7675 7676 /**#@-*/ 7677 }, 7678 7679 /* special segment options */ 7680 segment: { 7681 /**#@+ 7682 * @visprop 7683 */ 7684 7685 label: { 7686 position: 'top' 7687 } 7688 /**#@-*/ 7689 }, 7690 7691 semicircle: { 7692 /**#@+ 7693 * @visprop 7694 */ 7695 7696 /** 7697 * Attributes for center point of the semicircle. 7698 * 7699 * @type Point 7700 * @name Semicircle#center 7701 */ 7702 center: { 7703 visible: false, 7704 withLabel: false, 7705 fixed: false, 7706 fillColor: Color.palette.red, 7707 strokeColor: Color.palette.red, 7708 highlightFillColor: '#eeeeee', 7709 highlightStrokeColor: Color.palette.red, 7710 name: '' 7711 } 7712 7713 /**#@-*/ 7714 }, 7715 7716 /* special slider options */ 7717 slider: { 7718 /**#@+ 7719 * @visprop 7720 */ 7721 7722 /** 7723 * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For 7724 * continuous results set this to <tt>-1</tt>. 7725 * 7726 * @memberOf Slider.prototype 7727 * @name snapWidth 7728 * @type Number 7729 */ 7730 snapWidth: -1, // -1 = deactivated 7731 7732 /** 7733 * List of values to snap to. If the glider is within snapValueDistance 7734 * (in user coordinate units) of one of these points, 7735 * then the glider snaps to that point. 7736 * 7737 * @memberOf Slider.prototype 7738 * @name snapValues 7739 * @type Array 7740 * @see Slider#snapValueDistance 7741 * @default empty 7742 * 7743 * @example 7744 * var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], { 7745 * name: 'n', 7746 * snapWidth: 1, 7747 * snapValues: [1, 22, 77, 100], 7748 * snapValueDistance: 5 7749 * }); 7750 * 7751 * var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], { 7752 * name: 'k', 7753 * snapWidth: 0.1, 7754 * snapValues: [-3, -1, 1, 3], 7755 * snapValueDistance: 0.4 7756 * }); 7757 * 7758 * </pre><div id="JXG9be68014-4e14-479a-82b4-e92d9b8f6eef" class="jxgbox" style="width: 300px; height: 300px;"></div> 7759 * <script type="text/javascript"> 7760 * (function() { 7761 * var board = JXG.JSXGraph.initBoard('JXG9be68014-4e14-479a-82b4-e92d9b8f6eef', 7762 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 7763 * var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], { 7764 * name: 'n', 7765 * snapWidth: 1, 7766 * snapValues: [1, 22, 77, 100], 7767 * snapValueDistance: 5 7768 * }); 7769 * 7770 * var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], { 7771 * name: 'k', 7772 * snapWidth: 0.1, 7773 * snapValues: [-3, -1, 1, 3], 7774 * snapValueDistance: 0.4 7775 * }); 7776 * 7777 * })(); 7778 * 7779 * </script><pre> 7780 * 7781 */ 7782 snapValues: [], 7783 7784 /** 7785 * If the difference between the slider value and one of the elements of snapValues is less 7786 * than this number (in user coordinate units), the slider will snap to that value. 7787 * 7788 * @memberOf Slider.prototype 7789 * @name snapValueDistance 7790 * @type Number 7791 * @see Slider#snapValues 7792 * @default 0.0 7793 */ 7794 snapValueDistance: 0.0, 7795 7796 /** 7797 * The precision of the slider value displayed in the optional text. 7798 * Replaced by the attribute "digits". 7799 * 7800 * @memberOf Slider.prototype 7801 * @name precision 7802 * @type Number 7803 * @deprecated 7804 * @see Slider#digits 7805 * @default 2 7806 */ 7807 precision: 2, 7808 7809 /** 7810 * The number of digits of the slider value displayed in the optional text. 7811 * 7812 * @memberOf Slider.prototype 7813 * @name digits 7814 * @type Number 7815 * @default 2 7816 */ 7817 digits: 2, 7818 7819 /** 7820 * Internationalization support for slider labels. 7821 * 7822 * @name intl 7823 * @memberOf Slider.prototype 7824 * @type object 7825 * @default <pre>{ 7826 * enabled: 'inherit', 7827 * options: {} 7828 * }</pre> 7829 * @see JXG.Board#intl 7830 * @see Text#intl 7831 * 7832 * @example 7833 * var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], { 7834 * name: 'α', 7835 * snapWidth: 1, 7836 * intl: { 7837 * enabled: true, 7838 * options: { 7839 * style: 'unit', 7840 * unit: 'degree', 7841 * } 7842 * } 7843 * }); 7844 * 7845 * </pre><div id="JXGb49a9779-c0c8-419d-9173-c67232cfd65c" class="jxgbox" style="width: 300px; height: 300px;"></div> 7846 * <script type="text/javascript"> 7847 * (function() { 7848 * var board = JXG.JSXGraph.initBoard('JXGb49a9779-c0c8-419d-9173-c67232cfd65c', 7849 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 7850 * var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], { 7851 * name: 'α', 7852 * snapWidth: 1, 7853 * intl: { 7854 * enabled: true, 7855 * options: { 7856 * style: 'unit', 7857 * unit: 'degree', 7858 * } 7859 * } 7860 * }); 7861 * 7862 * })(); 7863 * 7864 * </script><pre> 7865 * 7866 */ 7867 intl: { 7868 enabled: 'inherit', 7869 options: {} 7870 }, 7871 7872 firstArrow: false, 7873 lastArrow: false, 7874 7875 /** 7876 * Show slider ticks. 7877 * 7878 * @type Boolean 7879 * @name Slider#withTicks 7880 * @default true 7881 */ 7882 withTicks: true, 7883 7884 /** 7885 * Show slider label. 7886 * 7887 * @type Boolean 7888 * @name Slider#withLabel 7889 * @default true 7890 */ 7891 withLabel: true, 7892 7893 /** 7894 * If not null, this replaces the part "name = " in the slider label. 7895 * Possible types: string, number or function. 7896 * @type String 7897 * @name suffixLabel 7898 * @memberOf Slider.prototype 7899 * @default null 7900 * @see JXG.Slider#unitLabel 7901 * @see JXG.Slider#postLabel 7902 */ 7903 suffixLabel: null, 7904 7905 /** 7906 * If not null, this is appended to the value in the slider label. 7907 * Possible types: string, number or function. 7908 * @type String 7909 * @name unitLabel 7910 * @memberOf Slider.prototype 7911 * @default null 7912 * @see JXG.Slider#suffixLabel 7913 * @see JXG.Slider#postLabel 7914 */ 7915 unitLabel: null, 7916 7917 /** 7918 * If not null, this is appended to the value and to unitLabel in the slider label. 7919 * Possible types: string, number or function. 7920 * @type String 7921 * @name postLabel 7922 * @memberOf Slider.prototype 7923 * @default null 7924 * @see JXG.Slider#suffixLabel 7925 * @see JXG.Slider#unitLabel 7926 */ 7927 postLabel: null, 7928 7929 layer: 9, 7930 showInfobox: false, 7931 name: '', 7932 visible: true, 7933 strokeColor: '#000000', 7934 highlightStrokeColor: '#888888', 7935 fillColor: '#ffffff', 7936 highlightFillColor: 'none', 7937 7938 /** 7939 * Size of slider point. 7940 * 7941 * @type Number 7942 * @name Slider#size 7943 * @default 6 7944 * @see Point#size 7945 */ 7946 size: 6, 7947 7948 /** 7949 * Attributes for first (left) helper point defining the slider position. 7950 * 7951 * @type Point 7952 * @name Slider#point1 7953 */ 7954 point1: { 7955 needsRegularUpdate: false, 7956 showInfobox: false, 7957 withLabel: false, 7958 visible: false, 7959 fixed: true, 7960 name: '' 7961 }, 7962 7963 /** 7964 * Attributes for second (right) helper point defining the slider position. 7965 * 7966 * @type Point 7967 * @name Slider#point2 7968 */ 7969 point2: { 7970 needsRegularUpdate: false, 7971 showInfobox: false, 7972 withLabel: false, 7973 visible: false, 7974 fixed: true, 7975 name: '' 7976 }, 7977 7978 /** 7979 * Attributes for the base line of the slider. 7980 * 7981 * @type Line 7982 * @name Slider#baseline 7983 */ 7984 baseline: { 7985 needsRegularUpdate: false, 7986 visible: 'inherit', 7987 fixed: true, 7988 scalable: false, 7989 tabindex: null, 7990 name: '', 7991 strokeWidth: 1, 7992 strokeColor: '#000000', 7993 highlightStrokeColor: '#888888' 7994 }, 7995 7996 /** 7997 * Attributes for the ticks of the base line of the slider. 7998 * 7999 * @type Ticks 8000 * @name Slider#ticks 8001 */ 8002 ticks: { 8003 needsRegularUpdate: false, 8004 fixed: true, 8005 8006 // Label drawing 8007 drawLabels: false, 8008 digits: 2, 8009 includeBoundaries: true, 8010 drawZero: true, 8011 label: { 8012 offset: [-4, -14], 8013 display: 'internal' 8014 }, 8015 8016 minTicksDistance: 30, 8017 insertTicks: true, 8018 ticksDistance: 1, // Not necessary, since insertTicks = true 8019 minorHeight: 4, // if <0: full width and height 8020 majorHeight: 5, // if <0: full width and height 8021 minorTicks: 0, 8022 strokeOpacity: 1, 8023 strokeWidth: 1, 8024 tickEndings: [0, 1], 8025 majortickEndings: [0, 1], 8026 strokeColor: '#000000', 8027 visible: 'inherit' 8028 }, 8029 8030 /** 8031 * Attributes for the highlighting line of the slider. 8032 * 8033 * @type Line 8034 * @name Slider#highline 8035 */ 8036 highline: { 8037 strokeWidth: 3, 8038 visible: 'inherit', 8039 fixed: true, 8040 tabindex: null, 8041 name: '', 8042 strokeColor: '#000000', 8043 highlightStrokeColor: '#888888' 8044 }, 8045 8046 /** 8047 * Attributes for the slider label. 8048 * 8049 * @type Label 8050 * @name Slider#label 8051 */ 8052 label: { 8053 visible: 'inherit', 8054 strokeColor: '#000000' 8055 }, 8056 8057 /** 8058 * If true, 'up' events on the baseline will trigger slider moves. 8059 * 8060 * @type Boolean 8061 * @name Slider#moveOnUp 8062 * @default true 8063 */ 8064 moveOnUp: true 8065 8066 /**#@-*/ 8067 }, 8068 8069 /* special vector field options */ 8070 slopefield: { 8071 /**#@+ 8072 * @visprop 8073 */ 8074 8075 strokeWidth: 0.5, 8076 highlightStrokeWidth: 0.5, 8077 highlightStrokeColor: Color.palette.blue, 8078 highlightStrokeOpacity: 0.8, 8079 8080 /** 8081 * Set length of the vectors in user coordinates. This in contrast to vector fields, where this attribute just scales the vector. 8082 * @name scale 8083 * @memberOf Slopefield.prototype 8084 * @type {Number|Function} 8085 * @see Vectorfield.scale 8086 * @default 1 8087 */ 8088 scale: 1, 8089 8090 /** 8091 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 8092 * Fields are: 8093 * <ul> 8094 * <li> enabled: Boolean 8095 * <li> size: length of the arrow head legs (in pixel) 8096 * <li> angle: angle of the arrow head legs In radians. 8097 * </ul> 8098 * @name arrowhead 8099 * @memberOf Slopefield.prototype 8100 * @type {Object} 8101 * @default <tt>{enabled: false, size: 5, angle: Math.PI * 0.125}</tt> 8102 */ 8103 arrowhead: { 8104 enabled: false, 8105 size: 5, 8106 angle: Math.PI * 0.125 8107 } 8108 8109 /**#@-*/ 8110 }, 8111 8112 /* special options for slope triangle */ 8113 slopetriangle: { 8114 /**#@+ 8115 * @visprop 8116 */ 8117 8118 fillColor: Color.palette.red, 8119 fillOpacity: 0.4, 8120 highlightFillColor: Color.palette.red, 8121 highlightFillOpacity: 0.3, 8122 8123 borders: { 8124 lastArrow: { 8125 type: 1, 8126 size: 6 8127 } 8128 }, 8129 8130 /** 8131 * Attributes for the gliding helper point. 8132 * 8133 * @type Point 8134 * @name Slopetriangle#glider 8135 */ 8136 glider: { 8137 fixed: true, 8138 visible: false, 8139 withLabel: false 8140 }, 8141 8142 /** 8143 * Attributes for the base line. 8144 * 8145 * @type Line 8146 * @name Slopetriangle#baseline 8147 */ 8148 baseline: { 8149 visible: false, 8150 withLabel: false, 8151 name: '' 8152 }, 8153 8154 /** 8155 * Attributes for the base point. 8156 * 8157 * @type Point 8158 * @name Slopetriangle#basepoint 8159 */ 8160 basepoint: { 8161 visible: false, 8162 withLabel: false, 8163 name: '' 8164 }, 8165 8166 /** 8167 * Attributes for the tangent. 8168 * The tangent is constructed by slop triangle if the construction 8169 * is based on a glider, solely. 8170 * 8171 * @type Line 8172 * @name Slopetriangle#tangent 8173 */ 8174 tangent: { 8175 visible: false, 8176 withLabel: false, 8177 name: '' 8178 }, 8179 8180 /** 8181 * Attributes for the top point. 8182 * 8183 * @type Point 8184 * @name Slopetriangle#toppoint 8185 */ 8186 toppoint: { 8187 visible: false, 8188 withLabel: false, 8189 name: '' 8190 }, 8191 8192 /** 8193 * Attributes for the slope triangle label. 8194 * 8195 * @type Label 8196 * @name Slopetriangle#label 8197 */ 8198 label: { 8199 visible: true, 8200 position: 'first' 8201 } 8202 /**#@-*/ 8203 }, 8204 8205 /* special options for smartlabel of angle */ 8206 smartlabelangle: { 8207 cssClass: 'smart-label-solid smart-label-angle', 8208 highlightCssClass:'smart-label-solid smart-label-angle', 8209 anchorX: 'left', 8210 anchorY: 'middle', 8211 8212 unit: '', 8213 prefix: '', 8214 suffix: '', 8215 8216 measure: 'deg', 8217 useMathJax: true 8218 }, 8219 8220 /* special options for smartlabel of circle */ 8221 smartlabelcircle: { 8222 /**#@+ 8223 * @visprop 8224 */ 8225 8226 /** 8227 * CSS classes for the smart label. Available classes are: 8228 * <ul> 8229 * <li> 'smart-label-solid' 8230 * <li> 'smart-label-outline' 8231 * <li> 'smart-label-pure' 8232 * </ul> 8233 * 8234 * By default, an additional class is given specific for the element type. 8235 * Available classes are 'smart-label-angle', 'smart-label-circle', 8236 * 'smart-label-line', 'smart-label-point', 'smart-label-polygon'. 8237 * 8238 * @example 8239 * cssClass: 'smart-label-solid smart-label-point' 8240 * 8241 * @type String 8242 * @name Smartlabel#cssClass 8243 * @see Smartlabel#highlightCssClass 8244 * @default <ul> 8245 * <li> 'smart-label-solid smart-label-circle' for circles</li> 8246 * <li> 'smart-label-solid smart-label-point' for points</li> 8247 * <li> ...</li> 8248 * </ul> 8249 */ 8250 cssClass: 'smart-label-solid smart-label-circle', 8251 8252 /** 8253 * CSS classes for the smart label when highlighted. 8254 * 8255 * @type String 8256 * @name Smartlabel#highlightCssClass 8257 * @see Smartlabel#cssClass 8258 * @default <ul> 8259 * <li> 'smart-label-solid smart-label-circle' for circles</li> 8260 * <li> 'smart-label-solid smart-label-point' for points</li> 8261 * <li> ...</li> 8262 * </ul> 8263 */ 8264 highlightCssClass:'smart-label-solid smart-label-circle', 8265 anchorX: 'middle', 8266 useMathJax: true, 8267 8268 /** 8269 * Measurement unit appended to the output text. For areas, the unit is squared automatically. 8270 * Comes directly after the measurement value. 8271 * 8272 * @type {String|Function} 8273 * @name Smartlabel#unit 8274 * @default '' 8275 */ 8276 unit: '', 8277 8278 /** 8279 * Prefix text for the smartlabel. Comes before the measurement value. 8280 * 8281 * @type {String|Function} 8282 * @name Smartlabel#prefix 8283 * @default '' 8284 */ 8285 prefix: '', 8286 8287 /** 8288 * Suffix text for the smartlabel. Comes after unit. 8289 * 8290 * @type {String|Function} 8291 * @name Smartlabel#suffix 8292 * @default '' 8293 */ 8294 suffix: '', 8295 8296 /** 8297 * Type of measurement. 8298 * Available values are: 8299 * <ul> 8300 * <li> 'deg', 'rad' for angles</li> 8301 * <li> 'area', 'perimeter', 'radius' for circles</li> 8302 * <li> 'length', 'slope' for lines</li> 8303 * <li> 'area', 'perimeter' for polygons</li> 8304 * </ul> 8305 * Dependent on this value, i.e. the type of measurement, the label is 8306 * positioned differently on the object. 8307 * 8308 * @type String 8309 * @name Smartlabel#measure 8310 * @default <ul> 8311 * <li> 'radius' for circles</li> 8312 * <li> 'length' for lines</li> 8313 * <li> 'area' for polygons</li> 8314 * <li> 'deg' for angles</li> 8315 * </ul> 8316 */ 8317 measure: 'radius' 8318 8319 /**#@-*/ 8320 }, 8321 8322 /* special options for smartlabel of line */ 8323 smartlabelline: { 8324 cssClass: 'smart-label-solid smart-label-line', 8325 highlightCssClass:'smart-label-solid smart-label-line', 8326 anchorX: 'middle', 8327 8328 useMathJax: true, 8329 8330 unit: '', 8331 measure: 'length' 8332 }, 8333 8334 /* special options for smartlabel of point */ 8335 smartlabelpoint: { 8336 /**#@+ 8337 * @visprop 8338 */ 8339 8340 cssClass: 'smart-label-solid smart-label-point', 8341 highlightCssClass:'smart-label-solid smart-label-point', 8342 anchorX: 'middle', 8343 anchorY: 'top', 8344 8345 useMathJax: true, 8346 8347 /** 8348 * Display of point coordinates either as row vector or column vector. 8349 * Available values are 'row' or 'column'. 8350 * @type String 8351 * @name Smartlabel#dir 8352 * @default 'row' 8353 */ 8354 dir: 'row', 8355 8356 /** 8357 * Supply a unit suffix. 8358 * 8359 * @type String 8360 * @name Smartlabel#unit 8361 * @default '' 8362 */ 8363 unit: '' 8364 8365 /**#@-*/ 8366 }, 8367 8368 /* special options for smartlabel of polygon */ 8369 smartlabelpolygon: { 8370 cssClass: 'smart-label-solid smart-label-polygon', 8371 highlightCssClass:'smart-label-solid smart-label-polygon', 8372 anchorX: 'middle', 8373 8374 useMathJax: true, 8375 8376 unit: '', 8377 measure: 'area' 8378 }, 8379 8380 /* special options for step functions */ 8381 stepfunction: { 8382 /**#@+ 8383 * @visprop 8384 */ 8385 8386 /**#@-*/ 8387 }, 8388 8389 /* special tangent options */ 8390 tangent: { 8391 }, 8392 8393 /* special tangent options */ 8394 tangentto: { 8395 /**#@+ 8396 * @visprop 8397 */ 8398 8399 /** 8400 * Attributes for the polar line of the tangentto construction. 8401 * 8402 * @name polar 8403 * @memberOf TangentTo.prototype 8404 * @type JXG.Line 8405 */ 8406 polar: { 8407 visible: false, 8408 strokeWidth: 1, 8409 dash: 3 8410 }, 8411 8412 /** 8413 * Attributes for the intersection point of the conic/circle with the polar line of the tangentto construction. 8414 * 8415 * @name point 8416 * @memberOf TangentTo.prototype 8417 * @type JXG.Point 8418 */ 8419 point: { 8420 visible: false 8421 } 8422 8423 /**#@-*/ 8424 }, 8425 8426 /* special tape measure options */ 8427 tapemeasure: { 8428 /**#@+ 8429 * @visprop 8430 */ 8431 8432 strokeColor: '#000000', 8433 strokeWidth: 2, 8434 highlightStrokeColor: '#000000', 8435 8436 /** 8437 * Show tape measure ticks. 8438 * 8439 * @type Boolean 8440 * @name Tapemeasure#withTicks 8441 * @default true 8442 */ 8443 withTicks: true, 8444 8445 /** 8446 * Show tape measure label. 8447 * 8448 * @type Boolean 8449 * @name Tapemeasure#withLabel 8450 * @default true 8451 */ 8452 withLabel: true, 8453 8454 /** 8455 * Text rotation in degrees. 8456 * 8457 * @name Tapemeasure#rotate 8458 * @type Number 8459 * @default 0 8460 */ 8461 rotate: 0, 8462 8463 /** 8464 * The precision of the tape measure value displayed in the optional text. 8465 * Replaced by the attribute digits 8466 * 8467 * @memberOf Tapemeasure.prototype 8468 * @name precision 8469 * @type Number 8470 * @deprecated 8471 * @see Tapemeasure#digits 8472 * @default 2 8473 */ 8474 precision: 2, 8475 8476 /** 8477 * The precision of the tape measure value displayed in the optional text. 8478 * @memberOf Tapemeasure.prototype 8479 * @name digits 8480 * @type Number 8481 * @default 2 8482 */ 8483 digits: 2, 8484 8485 /** 8486 * Attributes for first helper point defining the tape measure position. 8487 * 8488 * @type Point 8489 * @name Tapemeasure#point1 8490 */ 8491 point1: { 8492 visible: true, 8493 strokeColor: '#000000', 8494 fillColor: '#ffffff', 8495 fillOpacity: 0.0, 8496 highlightFillOpacity: 0.1, 8497 size: 6, 8498 snapToPoints: true, 8499 attractorUnit: 'screen', 8500 attractorDistance: 20, 8501 showInfobox: false, 8502 withLabel: false, 8503 name: '' 8504 }, 8505 8506 /** 8507 * Attributes for second helper point defining the tape measure position. 8508 * 8509 * @type Point 8510 * @name Tapemeasure#point2 8511 */ 8512 point2: { 8513 visible: true, 8514 strokeColor: '#000000', 8515 fillColor: '#ffffff', 8516 fillOpacity: 0.0, 8517 highlightFillOpacity: 0.1, 8518 size: 6, 8519 snapToPoints: true, 8520 attractorUnit: 'screen', 8521 attractorDistance: 20, 8522 showInfobox: false, 8523 withLabel: false, 8524 name: '' 8525 }, 8526 8527 /** 8528 * Attributes for the ticks of the tape measure. 8529 * 8530 * @type Ticks 8531 * @name Tapemeasure#ticks 8532 */ 8533 ticks: { 8534 drawLabels: false, 8535 drawZero: true, 8536 insertTicks: true, 8537 ticksDistance: 0.1, // Ignored, since insertTicks=true 8538 minorHeight: 8, 8539 majorHeight: 16, 8540 minorTicks: 4, 8541 tickEndings: [0, 1], 8542 majorTickEndings: [0, 1], 8543 strokeOpacity: 1, 8544 strokeWidth: 1, 8545 strokeColor: '#000000', 8546 visible: 'inherit', 8547 label: { 8548 anchorY: 'top', 8549 anchorX: 'middle', 8550 offset: [0, -10] 8551 } 8552 }, 8553 8554 /** 8555 * Attributes for the tape measure label. 8556 * 8557 * @type Label 8558 * @name Tapemeasure#label 8559 */ 8560 label: { 8561 position: 'top' 8562 } 8563 /**#@-*/ 8564 }, 8565 8566 /* special text options */ 8567 text: { 8568 /**#@+ 8569 * @visprop 8570 */ 8571 8572 /** 8573 * The font size in pixels. 8574 * 8575 * @name fontSize 8576 * @memberOf Text.prototype 8577 * @default 12 8578 * @type Number 8579 * @see Text#fontUnit 8580 */ 8581 fontSize: 12, 8582 8583 /** 8584 * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but 8585 * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful. 8586 * 8587 * @name fontUnit 8588 * @memberOf Text.prototype 8589 * @default 'px' 8590 * @type String 8591 * @see Text#fontSize 8592 * 8593 * @example 8594 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 8595 * 8596 * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div> 8597 * <script type="text/javascript"> 8598 * (function() { 8599 * var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9', 8600 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 8601 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 8602 * 8603 * })(); 8604 * 8605 * </script><pre> 8606 * 8607 */ 8608 fontUnit: 'px', 8609 8610 /** 8611 * If the text content is solely a number and 8612 * this attribute is true (default) then the number is either formatted 8613 * according to the number of digits 8614 * given by the attribute 'digits' or converted into a fraction if 'toFraction' 8615 * is true. 8616 * <p> 8617 * Otherwise, display the raw number. 8618 * 8619 * @name formatNumber 8620 * @memberOf Text.prototype 8621 * @default false 8622 * @type Boolean 8623 * 8624 */ 8625 formatNumber: false, 8626 8627 /** 8628 * Used to round texts given by a number. 8629 * 8630 * @name digits 8631 * @memberOf Text.prototype 8632 * @default 2 8633 * @type Number 8634 */ 8635 digits: 2, 8636 8637 /** 8638 * Internationalization support for texts consisting of a number only. 8639 * <p> 8640 * Setting the local overwrites the board-wide locale set in the board attributes. 8641 * The JSXGraph attribute digits is overruled by the 8642 * Intl attributes "minimumFractionDigits" and "maximumFractionDigits". 8643 * 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> 8644 * for more information about possible options. 8645 * <p> 8646 * See below for an example where the text is composed from a string and a locale formatted number. 8647 * 8648 * @name intl 8649 * @memberOf Text.prototype 8650 * @type object 8651 * @default <pre>{ 8652 * enabled: 'inherit', 8653 * options: { 8654 * minimumFractionDigits: 0, 8655 * maximumFractionDigits: 2 8656 * } 8657 * }</pre> 8658 * @see JXG.Board#intl 8659 * 8660 * @example 8661 * var t = board.create('text', [1, 2, -Math.PI*100], { 8662 * digits: 2, 8663 * intl: { 8664 * enabled: true, 8665 * options: { 8666 * style: 'unit', 8667 * unit: 'celsius' 8668 * } 8669 * } 8670 * }); 8671 * 8672 * </pre><div id="JXGb7162923-1beb-4e56-8817-19aa66e226d1" class="jxgbox" style="width: 300px; height: 300px;"></div> 8673 * <script type="text/javascript"> 8674 * (function() { 8675 * var board = JXG.JSXGraph.initBoard('JXGb7162923-1beb-4e56-8817-19aa66e226d1', 8676 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 8677 * var t = board.create('text', [1, 2, -Math.PI*100], { 8678 * digits: 2, 8679 * intl: { 8680 * enabled: true, 8681 * options: { 8682 * style: 'unit', 8683 * unit: 'celsius' 8684 * } 8685 * } 8686 * }); 8687 * 8688 * })(); 8689 * 8690 * </script><pre> 8691 * 8692 * 8693 * @example 8694 * var t = board.create('text', [0.05, -0.2, ''], { 8695 * intl: { 8696 * enabled: true, 8697 * locale: 'it-IT', 8698 * options: { 8699 * style: 'unit', 8700 * unit: 'kilometer-per-hour', 8701 * unitDisplay: 'narrow', 8702 * maximumFractionDigits: 2 8703 * } 8704 * } 8705 * }); 8706 * 8707 * // Set dynamic text consisting of text and number. 8708 * t.setText(function() { 8709 * var txt = 'Speed: ', 8710 * number = t.X(); 8711 * 8712 * // Add formatted number to variable txt 8713 * // with fallback if locale is not supported. 8714 * if (t.useLocale()) { 8715 * txt += t.formatNumberLocale(number); 8716 * } else { 8717 * txt += JXG.toFixed(number, 2); 8718 * } 8719 * return txt; 8720 * }); 8721 * 8722 * </pre><div id="JXG560aeb1c-55fb-45da-8ad5-d3ad26216056" class="jxgbox" style="width: 300px; height: 300px;"></div> 8723 * <script type="text/javascript"> 8724 * (function() { 8725 * var board = JXG.JSXGraph.initBoard('JXG560aeb1c-55fb-45da-8ad5-d3ad26216056', 8726 * {boundingbox: [-0.5, 0.5, 0.5, -0.5], axis: true, showcopyright: false, shownavigation: false}); 8727 * var t = board.create('text', [0.3, -0.3, ''], { 8728 * intl: { 8729 * enabled: true, 8730 * locale: 'it-IT', 8731 * options: { 8732 * style: 'unit', 8733 * unit: 'kilometer-per-hour', 8734 * unitDisplay: 'narrow', 8735 * maximumFractionDigits: 2 8736 * } 8737 * } 8738 * }); 8739 * 8740 * // Set dynamic text consisting of text and number. 8741 * t.setText(function() { 8742 * var txt = 'Speed: ', 8743 * number = t.X(); 8744 * 8745 * // Add formatted number to variable txt 8746 * if (t.useLocale()) { 8747 * txt += t.formatNumberLocale(number); 8748 * } else { 8749 * txt += JXG.toFixed(number, 2); 8750 * } 8751 * return txt; 8752 * }); 8753 * 8754 * })(); 8755 * 8756 * </script><pre> 8757 * 8758 */ 8759 intl: { 8760 enabled: 'inherit', 8761 options: { 8762 minimumFractionDigits: 0, 8763 maximumFractionDigits: 2 8764 } 8765 }, 8766 8767 /** 8768 * If set to true, the text is parsed and evaluated. 8769 * For labels parse==true results in converting names of the form k_a to subscripts. 8770 * If the text is given by string and parse==true, the string is parsed as 8771 * JessieCode expression. 8772 * 8773 * @name parse 8774 * @memberOf Text.prototype 8775 * @default true 8776 * @type Boolean 8777 */ 8778 parse: true, 8779 8780 /** 8781 * If set to true and caja's sanitizeHTML function can be found it 8782 * will be used to sanitize text output. 8783 * 8784 * @name useCaja 8785 * @memberOf Text.prototype 8786 * @default false 8787 * @type Boolean 8788 */ 8789 useCaja: false, 8790 8791 /** 8792 * If enabled, the text will be handled as label. Intended for internal use. 8793 * 8794 * @name isLabel 8795 * @memberOf Text.prototype 8796 * @default false 8797 * @type Boolean 8798 */ 8799 isLabel: false, 8800 8801 strokeColor: '#000000', 8802 highlightStrokeColor: '#000000', 8803 highlightStrokeOpacity: 0.666666, 8804 8805 /** 8806 * Default CSS properties of the HTML text element. 8807 * <p> 8808 * The CSS properties which are set here, are handed over to the style property 8809 * of the HTML text element. That means, they have higher property than any 8810 * CSS class. 8811 * <p> 8812 * If a property which is set here should be overruled by a CSS class 8813 * then this property should be removed here. 8814 * <p> 8815 * The reason, why this attribute should be kept to its default value at all, 8816 * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt> 8817 * will ignore the font-family if it is set in a CSS class. 8818 * It has to be set explicitly as style attribute. 8819 * <p> 8820 * In summary, the order of priorities from high to low is 8821 * <ol> 8822 * <li> JXG.Options.text.cssStyle 8823 * <li> JXG.Options.text.cssDefaultStyle 8824 * <li> JXG.Options.text.cssClass 8825 * </ol> 8826 * @example 8827 * If all texts should get its font-family from the default CSS class 8828 * before initializing the board 8829 * <pre> 8830 * JXG.Options.text.cssDefaultStyle = ''; 8831 * JXG.Options.text.highlightCssDefaultStyle = ''; 8832 * </pre> 8833 * should be called. 8834 * 8835 * @name cssDefaultStyle 8836 * @memberOf Text.prototype 8837 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 8838 * @type String 8839 * @see Text#highlightCssDefaultStyle 8840 * @see Text#cssStyle 8841 * @see Text#highlightCssStyle 8842 */ 8843 cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 8844 8845 /** 8846 * Default CSS properties of the HTML text element in case of highlighting. 8847 * <p> 8848 * The CSS properties which are set here, are handed over to the style property 8849 * of the HTML text element. That means, they have higher property than any 8850 * CSS class. 8851 * @example 8852 * If all texts should get its font-family from the default CSS class 8853 * before initializing the board 8854 * <pre> 8855 * JXG.Options.text.cssDefaultStyle = ''; 8856 * JXG.Options.text.highlightCssDefaultStyle = ''; 8857 * </pre> 8858 * should be called. 8859 * 8860 * @name highlightCssDefaultStyle 8861 * @memberOf Text.prototype 8862 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 8863 * @type String 8864 * @see Text#cssDefaultStyle 8865 * @see Text#cssStyle 8866 * @see Text#highlightCssStyle 8867 */ 8868 highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 8869 8870 /** 8871 * CSS properties of the HTML text element. 8872 * <p> 8873 * The CSS properties which are set here, are handed over to the style property 8874 * of the HTML text element. That means, they have higher property than any 8875 * CSS class. 8876 * 8877 * @name cssStyle 8878 * @memberOf Text.prototype 8879 * @default '' 8880 * @type String 8881 * @see Text#cssDefaultStyle 8882 * @see Text#highlightCssDefaultStyle 8883 * @see Text#highlightCssStyle 8884 */ 8885 cssStyle: '', 8886 8887 /** 8888 * CSS properties of the HTML text element in case of highlighting. 8889 * <p> 8890 * The CSS properties which are set here, are handed over to the style property 8891 * of the HTML text element. That means, they have higher property than any 8892 * CSS class. 8893 * 8894 * @name highlightCssStyle 8895 * @memberOf Text.prototype 8896 * @default '' 8897 * @type String 8898 * @see Text#cssDefaultStyle 8899 * @see Text#highlightCssDefaultStyle 8900 * @see Text#cssStyle 8901 */ 8902 highlightCssStyle: '', 8903 8904 transitionProperties: ['color', 'opacity'], 8905 8906 /** 8907 * If true, the input will be given to ASCIIMathML before rendering. 8908 * 8909 * @name useASCIIMathML 8910 * @memberOf Text.prototype 8911 * @default false 8912 * @type Boolean 8913 */ 8914 useASCIIMathML: false, 8915 8916 /** 8917 * If true, MathJax will be used to render the input string. 8918 * Supports MathJax 2 as well as Mathjax 3. 8919 * It is recommended to use this option together with the option 8920 * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed 8921 * instead of two (e.g. \\alpha). 8922 * 8923 * @name useMathJax 8924 * @memberOf Text.prototype 8925 * @default false 8926 * @type Boolean 8927 * @see Text#parse 8928 * 8929 * @example 8930 * // Before loading MathJax, it has to be configured something like this: 8931 * window.MathJax = { 8932 * tex: { 8933 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 8934 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 8935 * packages: ['base', 'ams'] 8936 * }, 8937 * options: { 8938 * ignoreHtmlClass: 'tex2jax_ignore', 8939 * processHtmlClass: 'tex2jax_process' 8940 * } 8941 * }; 8942 * 8943 * // Display style 8944 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 8945 * fontSize: 15, color:'green', useMathJax: true}); 8946 * 8947 * // Inline style 8948 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 8949 * fontSize: 15, color:'green', useMathJax: true}); 8950 * 8951 * var A = board.create('point', [-2, 0]); 8952 * var B = board.create('point', [1, 0]); 8953 * var C = board.create('point', [0, 1]); 8954 * 8955 * var graph = board.create('ellipse', [A, B, C], { 8956 * fixed: true, 8957 * withLabel: true, 8958 * strokeColor: 'black', 8959 * strokeWidth: 2, 8960 * fillColor: '#cccccc', 8961 * fillOpacity: 0.3, 8962 * highlightStrokeColor: 'red', 8963 * highlightStrokeWidth: 3, 8964 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 8965 * label: {useMathJax: true} 8966 * }); 8967 * 8968 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 8969 * { 8970 * fontSize: 24, parse: false 8971 * }); 8972 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 8973 * { 8974 * fontSize: 24, useMathJax: true 8975 * }); 8976 * 8977 * </pre> 8978 * <script> 8979 * window.MathJax = { 8980 * tex: { 8981 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 8982 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 8983 * packages: ['base', 'ams'] 8984 * }, 8985 * options: { 8986 * ignoreHtmlClass: 'tex2jax_ignore', 8987 * processHtmlClass: 'tex2jax_process' 8988 * } 8989 * }; 8990 * </script> 8991 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 8992 * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div> 8993 * <script type="text/javascript"> 8994 * (function() { 8995 * var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9', 8996 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 8997 * // Display style 8998 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 8999 * fontSize: 15, color:'green', useMathJax: true}); 9000 * 9001 * // Inline style 9002 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 9003 * fontSize: 15, color:'green', useMathJax: true}); 9004 * 9005 * var A = board.create('point', [-2, 0]); 9006 * var B = board.create('point', [1, 0]); 9007 * var C = board.create('point', [0, 1]); 9008 * 9009 * var graph = board.create('ellipse', [A, B, C], { 9010 * fixed: true, 9011 * withLabel: true, 9012 * strokeColor: 'black', 9013 * strokeWidth: 2, 9014 * fillColor: '#cccccc', 9015 * fillOpacity: 0.3, 9016 * highlightStrokeColor: 'red', 9017 * highlightStrokeWidth: 3, 9018 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 9019 * label: {useMathJax: true} 9020 * }); 9021 * 9022 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 9023 * { 9024 * fontSize: 24, parse: false 9025 * }); 9026 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 9027 * { 9028 * fontSize: 24, useMathJax: true 9029 * }); 9030 * })(); 9031 * 9032 * </script><pre> 9033 * 9034 * 9035 * @example 9036 * // Load MathJax: 9037 * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script> 9038 * 9039 * // function and its derivative 9040 * var f1 = function(x) { return x * x * x; }, 9041 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 9042 * 9043 * A = board.create('glider', [0.5, f1(0.5), graph1], { 9044 * name: 'f(x)', 9045 * color: 'black', 9046 * face:'x', 9047 * fixed: true, 9048 * size: 3, 9049 * label: {offset: [-30, 10], fontSize: 15} 9050 * }), 9051 * B = board.create('glider', [0.7, f1(0.7), graph1], { 9052 * name: 'f(x+Δx)', 9053 * size: 3, 9054 * label: {offset: [-60, 10], fontSize: 15} 9055 * }), 9056 * 9057 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 9058 * a_h_segment = board.create('segment', [A, [ 9059 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9060 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9061 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 9062 * 9063 * b_v_segment = board.create('segment', [B, [ 9064 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9065 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9066 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 9067 * 9068 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 9069 * ], {visible: false}); 9070 * 9071 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 9072 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 9073 * }); 9074 * 9075 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 9076 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 9077 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 9078 * }); 9079 * 9080 * dval = board.create('text',[0.1, 0.8, 9081 * function(){ 9082 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 9083 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 9084 * }],{fontSize: 15, useMathJax: true}); 9085 * 9086 * </pre> 9087 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 9088 * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div> 9089 * <script type="text/javascript"> 9090 * (function() { 9091 * var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621', 9092 * {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false}); 9093 * // function and its derivative 9094 * var f1 = function(x) { return x * x * x; }, 9095 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 9096 * 9097 * A = board.create('glider', [0.5, f1(0.5), graph1], { 9098 * name: 'f(x)', 9099 * color: 'black', 9100 * face:'x', 9101 * fixed: true, 9102 * size: 3, 9103 * label: {offset: [-30, 10], fontSize: 15} 9104 * }), 9105 * B = board.create('glider', [0.7, f1(0.7), graph1], { 9106 * name: 'f(x+Δx)', 9107 * size: 3, 9108 * label: {offset: [-60, 10], fontSize: 15} 9109 * }), 9110 * 9111 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 9112 * a_h_segment = board.create('segment', [A, [ 9113 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9114 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9115 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 9116 * 9117 * b_v_segment = board.create('segment', [B, [ 9118 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 9119 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 9120 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 9121 * 9122 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 9123 * ], {visible: false}); 9124 * 9125 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 9126 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 9127 * }); 9128 * 9129 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 9130 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 9131 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 9132 * }); 9133 * 9134 * dval = board.create('text',[0.1, 0.8, 9135 * function(){ 9136 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 9137 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 9138 * }],{fontSize: 15, useMathJax: true}); 9139 * 9140 * })(); 9141 * 9142 * </script><pre> 9143 * 9144 * @example 9145 * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true}); 9146 * board.options.text.useMathjax = true; 9147 * 9148 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9149 * suffixlabel:'\\(t_1=\\)', 9150 * unitLabel: ' \\(\\text{ ms}\\)', 9151 * snapWidth:0.01}), 9152 * 9153 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9154 * text1 = board.create('text', [5, 1, function(){ 9155 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 9156 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 9157 * 9158 * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div> 9159 * <script type="text/javascript"> 9160 * (function() { 9161 * var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6', 9162 * {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false}); 9163 * board.options.text.useMathjax = true; 9164 * 9165 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9166 * suffixlabel:'\\(t_1=\\)', 9167 * unitLabel: ' \\(\\text{ ms}\\)', 9168 * snapWidth:0.01}), 9169 * 9170 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9171 * text1 = board.create('text', [5, 1, function(){ 9172 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 9173 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 9174 * 9175 * })(); 9176 * 9177 * </script><pre> 9178 * 9179 */ 9180 useMathJax: false, 9181 9182 /** 9183 * 9184 * If true, KaTeX will be used to render the input string. 9185 * For this feature, katex.min.js and katex.min.css have to be included. 9186 * <p> 9187 * The example below does not work, because there is a conflict with 9188 * the MathJax library which is used below. 9189 * </p> 9190 * 9191 * @name useKatex 9192 * @memberOf Text.prototype 9193 * @default false 9194 * @type Boolean 9195 * 9196 * 9197 * @example 9198 * JXG.Options.text.useKatex = true; 9199 * 9200 * const board = JXG.JSXGraph.initBoard('jxgbox', { 9201 * boundingbox: [-2, 5, 8, -5], axis:true 9202 * }); 9203 * 9204 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9205 * suffixlabel:'t_1=', 9206 * unitLabel: ' \\text{ ms}', 9207 * snapWidth:0.01}); 9208 * 9209 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9210 * text1 = board.create('text', [5, 1, function(){ 9211 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 9212 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 9213 * 9214 * </pre> 9215 * <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"> 9216 * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script> 9217 * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div> 9218 * <script type="text/javascript"> 9219 * (function() { 9220 * var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869', 9221 * {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false}); 9222 * board.options.useKatex = true; 9223 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 9224 * suffixlabel:'t_1=', 9225 * unitLabel: ' \\text{ ms}', 9226 * snapWidth:0.01}); 9227 * 9228 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 9229 * text1 = board.create('text', [5, 1, function(){ 9230 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 9231 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 9232 * 9233 * })(); 9234 * 9235 * </script><pre> 9236 */ 9237 useKatex: false, 9238 9239 /** 9240 * Object or function returning an object that contains macros for KaTeX. 9241 * 9242 * @name katexMacros 9243 * @memberOf Text.prototype 9244 * @default <tt>{}</tt> 9245 * @type Object 9246 * 9247 * @example 9248 * // to globally apply macros to all text elements use: 9249 * JXG.Options.text.katexMacros = {'\\jxg': 'JSXGraph is awesome'}; 9250 * 9251 * const board = JXG.JSXGraph.initBoard('jxgbox', { 9252 * boundingbox: [-2, 5, 8, -5], axis:true 9253 * }); 9254 * 9255 * // This macro only get applied to the p ('text') element 9256 * var p = board.create('text', [1, 0, '\\jsg \\sR '], { katexMacros: {'\\sR':'\\mathbb{R}'} }); 9257 */ 9258 katexMacros: {}, 9259 9260 /** 9261 * Display number as integer + nominator / denominator. Works together 9262 * with MathJax, KaTex or as plain text. 9263 * @name toFraction 9264 * @memberOf Text.prototype 9265 * @type Boolean 9266 * @default false 9267 * @see JXG#toFraction 9268 * 9269 * @example 9270 * board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true }); 9271 * board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false }); 9272 * 9273 * </pre><div id="JXGc10fe0b6-15ac-42b6-890f-2593b427d493" class="jxgbox" style="width: 300px; height: 300px;"></div> 9274 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 9275 * <script type="text/javascript"> 9276 * (function() { 9277 * var board = JXG.JSXGraph.initBoard('JXGc10fe0b6-15ac-42b6-890f-2593b427d493', 9278 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 9279 * board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true }); 9280 * board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false }); 9281 * 9282 * })(); 9283 * 9284 * </script><pre> 9285 * 9286 */ 9287 toFraction: false, 9288 9289 /** 9290 * Determines the rendering method of the text. Possible values 9291 * include <tt>'html'</tt> and <tt>'internal</tt>. 9292 * 9293 * @name display 9294 * @memberOf Text.prototype 9295 * @default 'html' 9296 * @type String 9297 */ 9298 display: 'html', 9299 9300 /** 9301 * Anchor element {@link Point}, {@link Text} or {@link Image} of the text. 9302 * If it exists, the coordinates of the text are relative 9303 * to this anchor element. In this case, only numbers are possible coordinates, 9304 * functions are not supported. 9305 * 9306 * @name anchor 9307 * @memberOf Text.prototype 9308 * @default null 9309 * @type Object 9310 */ 9311 anchor: null, 9312 9313 /** 9314 * The horizontal alignment of the text. Possible values include <tt>'auto'</tt>, <tt>'left'</tt>, 9315 * <tt>'middle'</tt>, and <tt>'right'</tt>. 9316 * 9317 * @name anchorX 9318 * @memberOf Text.prototype 9319 * @default 'left' 9320 * @type String 9321 */ 9322 anchorX: 'left', 9323 9324 /** 9325 * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and 9326 * <tt>'bottom'</tt>. 9327 * For MathJax or KaTeX, 'top' is recommended. 9328 * 9329 * @name anchorY 9330 * @memberOf Text.prototype 9331 * @default 'middle' 9332 * @type String 9333 */ 9334 anchorY: 'middle', 9335 9336 /** 9337 * Apply CSS classes to the text in non-highlighted view. It is possible to supply one or more 9338 * CSS classes separated by blanks. 9339 * 9340 * @name cssClass 9341 * @memberOf Text.prototype 9342 * @type String 9343 * @default 'JXGtext' 9344 */ 9345 cssClass: 'JXGtext', 9346 9347 /** 9348 * Apply CSS classes to the text in highlighted view. It is possible to supply one or more 9349 * CSS classes separated by blanks. 9350 * 9351 * @name highlightCssClass 9352 * @memberOf Text.prototype 9353 * @type String 9354 * @default 'JXGtext' 9355 */ 9356 highlightCssClass: 'JXGtext', 9357 9358 /** 9359 * Sensitive area for dragging the text. 9360 * Possible values are 'all', or something else. 9361 * If set to 'small', a sensitivity margin at the right and left border is taken. 9362 * This may be extended to left, right, ... in the future. 9363 * 9364 * @name Text#dragArea 9365 * @type String 9366 * @default 'all' 9367 */ 9368 dragArea: 'all', 9369 9370 withLabel: false, 9371 9372 /** 9373 * Text rotation in degrees. 9374 * Works for non-zero values only in combination with display=='internal'. 9375 * 9376 * @name Text#rotate 9377 * @type Number 9378 * @default 0 9379 */ 9380 rotate: 0, 9381 9382 /** 9383 * @name Text#visible 9384 * @type Boolean 9385 * @default true 9386 */ 9387 visible: true, 9388 9389 /** 9390 * Defines together with {@link Text#snapSizeY} the grid the text snaps on to. 9391 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 9392 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 9393 * of the default ticks of the default x axes of the board. 9394 * 9395 * @name snapSizeX 9396 * @memberOf Text.prototype 9397 * 9398 * @see Point#snapToGrid 9399 * @see Text#snapSizeY 9400 * @see JXG.Board#defaultAxes 9401 * @type Number 9402 * @default 1 9403 */ 9404 snapSizeX: 1, 9405 9406 /** 9407 * Defines together with {@link Text#snapSizeX} the grid the text snaps on to. 9408 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 9409 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 9410 * of the default ticks of the default y axes of the board. 9411 * 9412 * @name snapSizeY 9413 * @memberOf Text.prototype 9414 * 9415 * @see Point#snapToGrid 9416 * @see Text#snapSizeX 9417 * @see JXG.Board#defaultAxes 9418 * @type Number 9419 * @default 1 9420 */ 9421 snapSizeY: 1, 9422 9423 /** 9424 * List of attractor elements. If the distance of the text is less than 9425 * attractorDistance the text is made to glider of this element. 9426 * 9427 * @name attractors 9428 * @memberOf Text.prototype 9429 * @type Array 9430 * @default empty 9431 */ 9432 attractors: [] 9433 9434 /**#@-*/ 9435 }, 9436 9437 /* special options for trace curves */ 9438 tracecurve: { 9439 /**#@+ 9440 * @visprop 9441 */ 9442 strokeColor: '#000000', 9443 fillColor: 'none', 9444 9445 /** 9446 * The number of evaluated data points. 9447 * @memberOf Tracecurve.prototype 9448 * @default 100 9449 * @name numberPoints 9450 * @type Number 9451 */ 9452 numberPoints: 100 9453 9454 /**#@-*/ 9455 }, 9456 9457 /* special turtle options */ 9458 turtle: { 9459 /**#@+ 9460 * @visprop 9461 */ 9462 9463 strokeWidth: 1, 9464 fillColor: 'none', 9465 strokeColor: '#000000', 9466 9467 /** 9468 * Attributes for the turtle arrow. 9469 * 9470 * @type Curve 9471 * @name Turtle#arrow 9472 */ 9473 arrow: { 9474 strokeWidth: 2, 9475 withLabel: false, 9476 strokeColor: Color.palette.red, 9477 lastArrow: true 9478 } 9479 /**#@-*/ 9480 }, 9481 9482 /* special vector field options */ 9483 vectorfield: { 9484 /**#@+ 9485 * @visprop 9486 */ 9487 9488 strokeWidth: 0.5, 9489 highlightStrokeWidth: 0.5, 9490 highlightStrokeColor: Color.palette.blue, 9491 highlightStrokeOpacity: 0.8, 9492 9493 /** 9494 * Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length. 9495 * @name scale 9496 * @memberOf Vectorfield.prototype 9497 * @type {Number|Function} 9498 * @see Slopefield.scale 9499 * @default 1 9500 */ 9501 scale: 1, 9502 9503 /** 9504 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 9505 * Fields are: 9506 * <ul> 9507 * <li> enabled: Boolean 9508 * <li> size: length of the arrow head legs (in pixel) 9509 * <li> angle: angle of the arrow head legs In radians. 9510 * </ul> 9511 * @name arrowhead 9512 * @memberOf Vectorfield.prototype 9513 * @type {Object} 9514 * @default <tt>{enabled: true, size: 5, angle: Math.PI * 0.125}</tt> 9515 */ 9516 arrowhead: { 9517 enabled: true, 9518 size: 5, 9519 angle: Math.PI * 0.125 9520 } 9521 9522 /**#@-*/ 9523 }, 9524 9525 /** 9526 * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties 9527 * to the same value. 9528 * It is used in {@link JXG.GeometryElement#setAttribute} and in 9529 * the constructor {@link JXG.GeometryElement}. 9530 * Attention: In Options.js abbreviations are not allowed. 9531 * @type Object 9532 * @name JXG.Options#shortcuts 9533 * 9534 */ 9535 shortcuts: { 9536 color: ['strokeColor', 'fillColor'], 9537 opacity: ['strokeOpacity', 'fillOpacity'], 9538 highlightColor: ['highlightStrokeColor', 'highlightFillColor'], 9539 highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'], 9540 strokeWidth: ['strokeWidth', 'highlightStrokeWidth'] 9541 } 9542 }; 9543 9544 /** 9545 * Holds all possible properties and the according validators for geometry elements. 9546 * A validator is either a function 9547 * which takes one parameter and returns true, if the value is valid for the property, 9548 * or it is false if no validator is required. 9549 */ 9550 JXG.Validator = (function () { 9551 var i, 9552 validatePixel = function (v) { 9553 return (/^[0-9]+px$/).test(v); 9554 }, 9555 validateDisplay = function (v) { 9556 return (v === 'html' || v === 'internal'); 9557 }, 9558 validateColor = function (v) { 9559 // for now this should do it... 9560 return Type.isString(v); 9561 }, 9562 validatePointFace = function (v) { 9563 return Type.exists(JXG.normalizePointFace(v)); 9564 }, 9565 validateInteger = function (v) { 9566 return (Math.abs(v - Math.round(v)) < Mat.eps); 9567 }, 9568 validateNotNegativeInteger = function (v) { 9569 return validateInteger(v) && v >= 0; 9570 }, 9571 validatePositiveInteger = function (v) { 9572 return validateInteger(v) && v > 0; 9573 }, 9574 // validateScreenCoords = function (v) { 9575 // return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]); 9576 // }, 9577 validateRenderer = function (v) { 9578 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no'); 9579 }, 9580 validatePositive = function (v) { 9581 return v > 0; 9582 }, 9583 validateNotNegative = function (v) { 9584 return v >= 0; 9585 }, 9586 v = {}, 9587 validators = { 9588 attractorDistance: validateNotNegative, 9589 color: validateColor, 9590 // defaultDistance: Type.isNumber, 9591 display: validateDisplay, 9592 doAdvancedPlot: false, 9593 draft: false, 9594 drawLabels: false, 9595 drawZero: false, 9596 face: validatePointFace, 9597 factor: Type.isNumber, 9598 fillColor: validateColor, 9599 fillOpacity: Type.isNumber, 9600 firstArrow: false, 9601 fontSize: validateInteger, 9602 dash: validateInteger, 9603 gridX: Type.isNumber, 9604 gridY: Type.isNumber, 9605 // POI: Do we have to add something here? 9606 hasGrid: false, 9607 highlightFillColor: validateColor, 9608 highlightFillOpacity: Type.isNumber, 9609 highlightStrokeColor: validateColor, 9610 highlightStrokeOpacity: Type.isNumber, 9611 insertTicks: false, 9612 //: validateScreenCoords, 9613 lastArrow: false, 9614 layer: validateNotNegativeInteger, 9615 majorHeight: validateInteger, 9616 minorHeight: validateInteger, 9617 minorTicks: validateNotNegative, 9618 minTicksDistance: validatePositiveInteger, 9619 numberPointsHigh: validatePositiveInteger, 9620 numberPointsLow: validatePositiveInteger, 9621 opacity: Type.isNumber, 9622 radius: Type.isNumber, 9623 RDPsmoothing: false, 9624 renderer: validateRenderer, 9625 right: validatePixel, 9626 showCopyright: false, 9627 showInfobox: false, 9628 showNavigation: false, 9629 size: validateNotNegative, //validateInteger, 9630 snapSizeX: validatePositive, 9631 snapSizeY: validatePositive, 9632 snapWidth: Type.isNumber, 9633 snapToGrid: false, 9634 snatchDistance: validateNotNegative, 9635 straightFirst: false, 9636 straightLast: false, 9637 stretch: false, 9638 strokeColor: validateColor, 9639 strokeOpacity: Type.isNumber, 9640 strokeWidth: validateNotNegative, //validateInteger, 9641 takeFirst: false, 9642 takeSizeFromFile: false, 9643 to10: false, 9644 toOrigin: false, 9645 translateTo10: false, 9646 translateToOrigin: false, 9647 useASCIIMathML: false, 9648 useDirection: false, 9649 useMathJax: false, 9650 withLabel: false, 9651 withTicks: false, 9652 zoom: false 9653 }; 9654 9655 // this seems like a redundant step but it makes sure that 9656 // all properties in the validator object have lower case names 9657 // and the validator object is easier to read. 9658 for (i in validators) { 9659 if (validators.hasOwnProperty(i)) { 9660 v[i.toLowerCase()] = validators[i]; 9661 } 9662 } 9663 9664 return v; 9665 }()); 9666 9667 /** 9668 * All point faces can be defined with more than one name, e.g. a cross faced point can be given 9669 * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to 9670 * simplify if- and switch-clauses regarding point faces. The translation table is as follows: 9671 * <table> 9672 * <tr><th>Input</th><th>Output</th></tr> 9673 * <tr><td>cross</td><td>x</td></tr> 9674 * <tr><td>circle</td><td>o</td></tr> 9675 * <tr><td>square, []</td><td>[]</td></tr> 9676 * <tr><td>plus</td><td>+</td></tr> 9677 * <tr><td>minus</td><td>-</td></tr> 9678 * <tr><td>divide</td><td>|</td></tr> 9679 * <tr><td>diamond</td><td><></td></tr> 9680 * <tr><td>triangleup</td><td>^, a, A</td></tr> 9681 * <tr><td>triangledown</td><td>v</td></tr> 9682 * <tr><td>triangleleft</td><td><</td></tr> 9683 * <tr><td>triangleright</td><td>></td></tr> 9684 * </table> 9685 * @param {String} s A string which should determine a valid point face. 9686 * @returns {String} Returns a normalized string or undefined if the given string is not a valid 9687 * point face. 9688 */ 9689 JXG.normalizePointFace = function (s) { 9690 var map = { 9691 cross: 'x', 9692 x: 'x', 9693 circle: 'o', 9694 o: 'o', 9695 square: '[]', 9696 '[]': '[]', 9697 plus: '+', 9698 '+': '+', 9699 divide: '|', 9700 '|': '|', 9701 minus: '-', 9702 '-': '-', 9703 diamond: '<>', 9704 '<>': '<>', 9705 diamond2: '<<>>', 9706 '<<>>': '<<>>', 9707 triangleup: '^', 9708 A: '^', 9709 a: '^', 9710 '^': '^', 9711 triangledown: 'v', 9712 v: 'v', 9713 triangleleft: '<', 9714 '<': '<', 9715 triangleright: '>', 9716 '>': '>' 9717 }; 9718 9719 return map[s]; 9720 }; 9721 9722 9723 /** 9724 * Apply the options stored in this object to all objects on the given board. 9725 * @param {JXG.Board} board The board to which objects the options will be applied. 9726 */ 9727 JXG.useStandardOptions = function (board) { 9728 var el, t, p, copyProps, 9729 o = JXG.Options, 9730 boardHadGrid = board.hasGrid; 9731 9732 board.options.grid.hasGrid = o.grid.hasGrid; 9733 board.options.grid.gridX = o.grid.gridX; 9734 board.options.grid.gridY = o.grid.gridY; 9735 // POI: Do we have to add something here? 9736 board.options.grid.gridColor = o.grid.gridColor; 9737 board.options.grid.gridOpacity = o.grid.gridOpacity; 9738 board.options.grid.gridDash = o.grid.gridDash; 9739 board.options.grid.snapToGrid = o.grid.snapToGrid; 9740 board.options.grid.snapSizeX = o.grid.SnapSizeX; 9741 board.options.grid.snapSizeY = o.grid.SnapSizeY; 9742 board.takeSizeFromFile = o.takeSizeFromFile; 9743 9744 copyProps = function (p, o) { 9745 p.visProp.fillcolor = o.fillColor; 9746 p.visProp.highlightfillcolor = o.highlightFillColor; 9747 p.visProp.strokecolor = o.strokeColor; 9748 p.visProp.highlightstrokecolor = o.highlightStrokeColor; 9749 }; 9750 9751 for (el in board.objects) { 9752 if (board.objects.hasOwnProperty(el)) { 9753 p = board.objects[el]; 9754 if (p.elementClass === Const.OBJECT_CLASS_POINT) { 9755 copyProps(p, o.point); 9756 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) { 9757 copyProps(p, o.line); 9758 9759 for (t = 0; t < p.ticks.length; t++) { 9760 p.ticks[t].majorTicks = o.line.ticks.majorTicks; 9761 p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance; 9762 p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight; 9763 p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight; 9764 } 9765 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) { 9766 copyProps(p, o.circle); 9767 } else if (p.type === Const.OBJECT_TYPE_ANGLE) { 9768 copyProps(p, o.angle); 9769 } else if (p.type === Const.OBJECT_TYPE_ARC) { 9770 copyProps(p, o.arc); 9771 } else if (p.type === Const.OBJECT_TYPE_POLYGON) { 9772 copyProps(p, o.polygon); 9773 } else if (p.type === Const.OBJECT_TYPE_CONIC) { 9774 copyProps(p, o.conic); 9775 } else if (p.type === Const.OBJECT_TYPE_CURVE) { 9776 copyProps(p, o.curve); 9777 } else if (p.type === Const.OBJECT_TYPE_SECTOR) { 9778 p.arc.visProp.fillcolor = o.sector.fillColor; 9779 p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor; 9780 p.arc.visProp.fillopacity = o.sector.fillOpacity; 9781 p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity; 9782 } 9783 } 9784 } 9785 9786 board.fullUpdate(); 9787 if (boardHadGrid && !board.hasGrid) { 9788 board.removeGrids(board); 9789 } else if (!boardHadGrid && board.hasGrid) { 9790 board.create('grid', []); 9791 } 9792 }; 9793 9794 /** 9795 * Converts all color values to greyscale and calls useStandardOption to put them onto the board. 9796 * @param {JXG.Board} board The board to which objects the options will be applied. 9797 * @see #useStandardOptions 9798 */ 9799 JXG.useBlackWhiteOptions = function (board) { 9800 var o = JXG.Options; 9801 o.point.fillColor = Color.rgb2bw(o.point.fillColor); 9802 o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor); 9803 o.point.strokeColor = Color.rgb2bw(o.point.strokeColor); 9804 o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor); 9805 9806 o.line.fillColor = Color.rgb2bw(o.line.fillColor); 9807 o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor); 9808 o.line.strokeColor = Color.rgb2bw(o.line.strokeColor); 9809 o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor); 9810 9811 o.circle.fillColor = Color.rgb2bw(o.circle.fillColor); 9812 o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor); 9813 o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor); 9814 o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor); 9815 9816 o.arc.fillColor = Color.rgb2bw(o.arc.fillColor); 9817 o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor); 9818 o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor); 9819 o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor); 9820 9821 o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor); 9822 o.polygon.highlightFillColor = Color.rgb2bw(o.polygon.highlightFillColor); 9823 9824 o.sector.fillColor = Color.rgb2bw(o.sector.fillColor); 9825 o.sector.highlightFillColor = Color.rgb2bw(o.sector.highlightFillColor); 9826 9827 o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor); 9828 o.grid.gridColor = Color.rgb2bw(o.grid.gridColor); 9829 9830 JXG.useStandardOptions(board); 9831 }; 9832 9833 // needs to be exported 9834 JXG.Options.normalizePointFace = JXG.normalizePointFace; 9835 9836 export default JXG.Options; 9837