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