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