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