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