1 /* 2 Copyright 2008-2022 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 <http://www.gnu.org/licenses/> 29 and <http://opensource.org/licenses/MIT/>. 30 */ 31 32 33 /*global JXG:true, define: true*/ 34 /*jslint nomen: true, plusplus: true*/ 35 36 /* depends: 37 jxg 38 base/constants 39 math/math 40 utils/color 41 utils/type 42 */ 43 44 define([ 45 'jxg', 'base/constants', 'math/math', 'utils/color', 'utils/type' 46 ], function (JXG, Const, Mat, Color, Type) { 47 48 "use strict"; 49 50 /** 51 * Options Namespace 52 * @description These are the default options of the board and of all geometry elements. 53 * @namespace 54 * @name JXG.Options 55 */ 56 JXG.Options = { 57 jc: { 58 enabled: true, 59 compile: true 60 }, 61 62 /* 63 * Options that are used directly within the board class 64 */ 65 board: { 66 /**#@+ 67 * @visprop 68 */ 69 70 //updateType: 'hierarchical', // 'all' 71 72 /** 73 * Bounding box of the visible area in user coordinates. 74 * It is an array consisting of four values: 75 * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>] 76 * 77 * The canvas will be spanned from the upper left corner (<sub>1</sub>, y<sub>1</sub>) 78 * to the lower right corner (x<sub>2</sub>, y<sub>2</sub>). 79 * 80 * @name JXG.Board#boundingbox 81 * @type Array 82 * @default [-5, 5, 5, -5] 83 * @example 84 * var board = JXG.JSXGraph.initBoard('jxgbox', { 85 * boundingbox: [-5, 5, 5, -5], 86 * axis: true 87 * }); 88 */ 89 boundingBox: [-5, 5, 5, -5], 90 91 /** 92 * Maximal bounding box of the visible area in user coordinates. 93 * It is an array consisting of four values: 94 * [x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>] 95 * 96 * The bounding box of the canvas must be inside of this maximal 97 * boundings box. 98 * @name JXG.Board#maxboundingbox 99 * @type Array 100 * @see JXG.Board#boundingbox 101 * @default [-Infinity, Infinity, Infinity, -Infinity] 102 * 103 * @example 104 * var board = JXG.JSXGraph.initBoard('jxgbox', { 105 * boundingbox: [-5, 5, 5, -5], 106 * maxboundingbox: [-8, 8, 8, -8], 107 * pan: {enabled: true}, 108 * axis: true 109 * }); 110 * 111 * </pre><div id="JXG065e2750-217c-48ed-a52b-7d7df6de7055" class="jxgbox" style="width: 300px; height: 300px;"></div> 112 * <script type="text/javascript"> 113 * (function() { 114 * var board = JXG.JSXGraph.initBoard('JXG065e2750-217c-48ed-a52b-7d7df6de7055', { 115 * showcopyright: false, shownavigation: false, 116 * boundingbox: [-5,5,5,-5], 117 * maxboundingbox: [-8,8,8,-8], 118 * pan: {enabled: true}, 119 * axis:true 120 * }); 121 * 122 * })(); 123 * 124 * </script><pre> 125 * 126 */ 127 maxBoundingBox: [-Infinity, Infinity, Infinity, -Infinity], 128 129 /** 130 * Additional zoom factor multiplied to {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}. 131 * 132 * @name JXG.Board#zoomFactor 133 * @type Number 134 * @default 1.0 135 */ 136 zoomFactor: 1, 137 138 /** 139 * Zoom factor in horizontal direction. 140 * 141 * @name JXG.Board#zoomX 142 * @see JXG.Board#zoomY 143 * @type Number 144 * @default 1.0 145 */ 146 zoomX: 1, 147 148 /** 149 * Zoom factor in vertical direction. 150 * 151 * @name JXG.Board#zoomY 152 * @see JXG.Board#zoomX 153 * @type Number 154 * @default 1.0 155 */ 156 zoomY: 1, 157 158 /** 159 * Title string for the board. 160 * Primarily used in an invisible text element which is adressed by 161 * the attribute 'aria-labelledby' from the JSXGraph container. 162 * JSXGraph creates a new div-element with id "{containerid}_ARIAlabel" 163 * containing this string. 164 * 165 * @name JXG.Board#title 166 * @see JXG.Board#description 167 * @type String 168 * @default '' 169 * 170 */ 171 title: '', 172 173 /** 174 * Description string for the board. 175 * Primarily used in an invisible text element which is adressed by 176 * the attribute 'aria-describedby' from the JSXGraph container. 177 * JSXGraph creates a new div-element with id "{containerid}_ARIAdescription" 178 * containing this string. 179 * 180 * @name JXG.Board#description 181 * @see JXG.Board#title 182 * @type String 183 * @default '' 184 * 185 */ 186 description: '', 187 188 /** 189 * Show copyright string in canvas. 190 * 191 * @name JXG.Board#showCopyright 192 * @type Boolean 193 * @default true 194 */ 195 showCopyright: true, 196 197 /** 198 * Show default axis. 199 * If shown, the horizontal axis can be accessed via JXG.Board.defaultAxes.x, the 200 * vertical axis can be accessed via JXG.Board.defaultAxes.y. 201 * Both axes have a sub-element "defaultTicks". 202 * 203 * Value can be Boolean or an object containing axis attributes. 204 * 205 * @name JXG.Board#axis 206 * @type Boolean 207 * @default false 208 */ 209 axis: false, 210 211 /** 212 * Attributes for the default axes in case of the attribute 213 * axis:true in {@link JXG.JSXGraph#initBoard}. 214 * 215 * @name JXG.Board#defaultAxes 216 * @type Object 217 * @default {x: {name:'x'}, y: {name: 'y'}} 218 * 219 */ 220 defaultAxes: { 221 x: { 222 name: 'x', 223 ticks: { 224 label: { 225 visible: 'inherit', 226 anchorX: 'middle', 227 anchorY: 'top', 228 fontSize: 12, 229 offset: [0, -3] 230 }, 231 drawZero: false, 232 visible: 'inherit' 233 } 234 }, 235 y: { 236 name: 'y', 237 ticks: { 238 label: { 239 visible: 'inherit', 240 anchorX: 'right', 241 anchorY: 'middle', 242 fontSize: 12, 243 offset: [-6, 0] 244 }, 245 tickEndings: [1, 0], 246 drawZero: false, 247 visible: 'inherit' 248 } 249 } 250 }, 251 252 /** 253 * Display of navigation arrows and zoom buttons in the navigation bar. 254 * 255 * @name JXG.Board#showNavigation 256 * @type Boolean 257 * @default true 258 */ 259 showNavigation: true, 260 261 /** 262 * Display of zoom buttons in the navigation bar. To show zoom buttons, additionally 263 * showNavigation has to be set to true. 264 * 265 * @name JXG.Board#showZoom 266 * @type Boolean 267 * @default true 268 */ 269 showZoom: true, 270 271 /** 272 * Show a button in the navigation bar to force reload of a construction. 273 * Works only with the JessieCode tag. 274 * 275 * @name JXG.Board#showReload 276 * @type Boolean 277 * @default false 278 */ 279 showReload: false, 280 281 /** 282 * Show a button in the navigation bar to enable screenshots. 283 * 284 * @name JXG.Board#showScreenshot 285 * @type Boolean 286 * @default false 287 */ 288 showScreenshot: false, 289 290 /** 291 * Attributes to control the screenshot function. 292 * The following attributes can be set: 293 * <ul> 294 * <li>scale: scaling factor (default=1.0) 295 * <li>type: format of the screenshot image. Default: png 296 * <li>symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318' 297 * <li>css: CSS rules to format the div element containing the screen shot image 298 * <li>cssButton: CSS rules to format the close button of the div element containing the screen shot image 299 * </ul> 300 * 301 * @name JXG.Board#screenshot 302 * @type Object 303 */ 304 screenshot: { 305 scale: 1.0, 306 type: 'png', 307 symbol: '\u2318', //'\u22b9', //'\u26f6', 308 css: 'background-color:#eeeeee; opacity:1.0; border:2px solid black; border-radius:10px; text-align:center', 309 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);' 310 }, 311 312 /** 313 * Show a button in the navigation bar to start fullscreen mode. 314 * 315 * @name JXG.Board#showFullscreen 316 * @type Boolean 317 * @see JXG.Board#fullscreen 318 * @default false 319 */ 320 showFullscreen: false, 321 322 /** 323 * Attribute(s) to control the fullscreen icon. The attribute "showFullscreen" 324 * controls if the icon is shown. 325 * The following attribute(s) can be set: 326 * <ul> 327 * <li>symbol (String): Unicode symbol which is shown in the navigation bar. Default: '\u25a1' 328 * <li>id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken. 329 * 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. 330 * </ul> 331 * 332 * @example 333 * var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723', 334 * {boundingbox: [-8, 8, 8,-8], axis: true, 335 * showcopyright: false, 336 * showFullscreen: true, 337 * fullscreen: { 338 * symbol: '\u22c7' 339 * } 340 * }); 341 * var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'}); 342 * 343 * </pre><div id="JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 344 * <script type="text/javascript"> 345 * (function() { 346 * var board = JXG.JSXGraph.initBoard('JXGa35bec5a2-fd4d-11e8-ab14-901b0e1b8723', 347 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, 348 * showFullscreen: true, 349 * fullscreen: { 350 * symbol: '\u22c7' 351 * } 352 * }); 353 * var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'}); 354 * })(); 355 * 356 * </script><pre> 357 * 358 * @name JXG.Board#fullscreen 359 * @see JXG.Board#showFullscreen 360 * @type Object 361 */ 362 fullscreen: { 363 symbol: '\u25a1', // '\u26f6' (not supported by MacOS), // '\u25a1' 364 id: null 365 }, 366 367 /** 368 * Show a button which allows to clear all traces of a board. 369 * 370 * @name JXG.Board#showClearTraces 371 * @type Boolean 372 * @default false 373 */ 374 showClearTraces: false, 375 376 /** 377 * If set to true the bounding box might be changed such that 378 * the ratio of width and height of the hosting HTML div is equal 379 * to the ratio of width and height of the bounding box. 380 * 381 * This is necessary if circles should look like circles and not 382 * like ellipses. It is recommended to set keepAspectRatio = true 383 * for geometric applets. For function plotting keepAspectRatio = false 384 * might be the better choice. 385 * 386 * @name JXG.Board#keepAspectRatio 387 * @see JXG.Board#boundingbox 388 * @see JXG.Board#setBoundingBox 389 * @type Boolean 390 * @default false 391 */ 392 keepAspectRatio: false, 393 394 /** 395 * If set true and 396 * hasPoint() is true for both an element and it's label, 397 * the element (and not the label) is taken as drag element. 398 * 399 * If set false and hasPoint() is true for both an element and it's label, 400 * the label is taken (if it is on a higher layer than the element) 401 * 402 * @name JXG.Board#ignoreLabels 403 * @type Booelan 404 * @default true 405 */ 406 ignoreLabels: true, 407 408 /** 409 * Maximum number of digits in automatic label generation. 410 * For example, if set to 1 automatic point labels end at "Z". 411 * If set to 2, point labels end at "ZZ". 412 * 413 * @name JXG.Board#maxNameLength 414 * @see JXG.Board#generateName 415 * @type Number 416 * @default 1 417 */ 418 maxNameLength: 1, 419 420 /** 421 * Supply the document object. Defaults to window.document 422 * 423 * @name JXG.Board#document 424 * @type DOM object 425 * @default false (meaning window.document) 426 */ 427 document: false, 428 429 /** 430 * If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element. 431 * 432 * @name JXG.Board#takeFirst 433 * @type Boolean 434 * @default false 435 */ 436 takeFirst: false, 437 438 /** 439 * If true, when read from a file or string - the size of the div can be changed by the construction text. 440 * 441 * @name JXG.Board#takeSizeFromFile 442 * @type Boolean 443 * @default false 444 */ 445 takeSizeFromFile: false, 446 447 /** 448 * Default rendering engine. Possible values are 'svg', 'canvas', 'vml', 'no', or 'auto'. 449 * If the rendering engine is not available JSXGraph tries to detect a different engine. 450 * 451 * <p> 452 * In case of 'canvas' it is advisable to call 'board.update()' after all elements have been 453 * constructed. This ensures that all elements are drawn with their intended visual appearance. 454 * 455 * @name JXG.Board#renderer 456 * @type String 457 * @default 'auto' 458 */ 459 renderer: 'auto', 460 461 /** 462 * Time (in msec) between two animation steps. Used in 463 * {@link JXG.CoordsElement#moveAlong}, {@link JXG.CoordsElement#moveTo} and 464 * {@link JXG.CoordsElement#visit}. 465 * 466 * @name JXG.Board#animationDelay 467 * @type Number 468 * @default 35 469 * @see JXG.CoordsElement#moveAlong 470 * @see JXG.CoordsElement#moveTo 471 * @see JXG.CoordsElement#visit 472 */ 473 animationDelay: 35, 474 475 /** 476 * Maximum frame rate of the board, i.e. maximum number of updates per second 477 * triggered by move events. 478 * 479 * @name JXG.Board#maxFrameRate 480 * @type Number 481 * @default 40 482 */ 483 maxFrameRate: 40, 484 485 /** 486 * Allow user interaction by registering mouse, pointer and touch events. 487 * 488 * @name JXG.Board#registerEvents 489 * @type Boolean 490 * @default true 491 */ 492 registerEvents: true, 493 494 /** 495 * Change redraw strategy in SVG rendering engine. 496 * <p> 497 * This optimization seems to be <b>obsolete</b> in newer browsers (from 2021 on, at least) 498 * and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4. 499 * <p> 500 * If set to 'svg', before every redrawing of the JSXGraph construction 501 * the SVG sub-tree of the DOM tree is taken out of the DOM. 502 * 503 * If set to 'all', before every redrawing of the JSXGraph construction the 504 * complete DOM tree is taken out of the DOM. 505 * If set to 'none' the redrawing is done in-place. 506 * 507 * Using 'svg' or 'all' speeds up the update process considerably. The risk 508 * is that if there is an exception, only a white div or window is left. 509 * 510 * 511 * @name JXG.Board#minimizeReflow 512 * @type String 513 * @default 'none' 514 */ 515 minimizeReflow: 'none', 516 517 /** 518 * A number that will be added to the absolute position of the board used in mouse coordinate 519 * calculations in {@link JXG.Board#getCoordsTopLeftCorner}. 520 * 521 * @name JXG.Board#offsetX 522 * @see JXG.Board#offsetY 523 * @type Number 524 * @default 0 525 */ 526 offsetX: 0, 527 528 /** 529 * A number that will be added to the absolute position of the board used in mouse coordinate 530 * calculations in {@link JXG.Board#getCoordsTopLeftCorner}. 531 * 532 * @name JXG.Board#offsetY 533 * @see JXG.Board#offsetX 534 * @type Number 535 * @default 0 536 */ 537 offsetY: 0, 538 539 /** 540 * Control the possibilities for zoom interaction. 541 * 542 * Possible sub-attributes with default values are: 543 * <pre> 544 * zoom: { 545 * factorX: 1.25, // horizontal zoom factor (multiplied to {@link JXG.Board#zoomX}) 546 * factorY: 1.25, // vertical zoom factor (multiplied to {@link JXG.Board#zoomY}) 547 * wheel: true, // allow zooming by mouse wheel or 548 * // by pinch-to-toom gesture on touch devices 549 * needShift: true, // mouse wheel zooming needs pressing of the shift key 550 * min: 0.001, // minimal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomOut 551 * max: 1000.0, // maximal values of {@link JXG.Board#zoomX} and {@link JXG.Board#zoomY}, limits zoomIn 552 * 553 * pinchHorizontal: true, // Allow pinch-to-zoom to zoom only horizontal axis 554 * pinchVertical: true, // Allow pinch-to-zoom to zoom only vertical axis 555 * pinchSensitivity: 7 // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures. 556 * } 557 * </pre> 558 * 559 * Deprecated: zoom.eps which is superseded by zoom.min 560 * 561 * @name JXG.Board#zoom 562 * @type Object 563 * @default 564 */ 565 zoom: { 566 enabled: true, 567 factorX: 1.25, 568 factorY: 1.25, 569 wheel: true, 570 needShift: true, 571 min: 0.0001, 572 max: 10000.0, 573 pinchHorizontal: true, 574 pinchVertical: true, 575 pinchSensitivity: 7 576 }, 577 578 /** 579 * Control the possibilities for panning interaction (i.e. moving the origin). 580 * 581 * Possible sub-attributes with default values are: 582 * <pre> 583 * pan: { 584 * enabled: true // Allow panning 585 * needTwoFingers: false, // panning is done with two fingers on touch devices 586 * needShift: true, // mouse panning needs pressing of the shift key 587 * } 588 * </pre> 589 * 590 * @name JXG.Board#pan 591 * @type Object 592 */ 593 pan: { 594 needShift: true, 595 needTwoFingers: false, 596 enabled: true 597 }, 598 599 /** 600 * Control the possibilities for dragging objects. 601 * 602 * Possible sub-attributes with default values are: 603 * <pre> 604 * drag: { 605 * enabled: true // Allow dragging 606 * } 607 * </pre> 608 * 609 * @name JXG.Board#drag 610 * @type Object 611 * @default {enabled: true} 612 */ 613 drag: { 614 enabled: true 615 }, 616 617 /** 618 * Control using the keyboard to change the construction. 619 * <ul> 620 * <li> enabled: true / false 621 * <li> dx: horizontal shift amount per key press 622 * <li> dy: vertical shift amount per key press 623 * <li> panShift: zoom if shift key is pressed 624 * <li> panCtrl: zoom if ctrl key is pressed 625 * </ul> 626 * 627 * @example 628 * var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5], 629 * axis: true, 630 * showCopyright:true, 631 * showNavigation:true, 632 * keyboard: { 633 * enabled: true, 634 * dy: 30, 635 * panShift: true, 636 * panCtrl: false 637 * } 638 * }); 639 * 640 * </pre><div id="JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266" class="jxgbox" style="width: 300px; height: 300px;"></div> 641 * <script type="text/javascript"> 642 * (function() { 643 * var board = JXG.JSXGraph.initBoard('JXGb1d3aab6-ced2-4fe9-8fa5-b0accc8c7266', 644 * {boundingbox: [-5,5,5,-5], 645 * axis: true, 646 * showCopyright:true, 647 * showNavigation:true, 648 * keyboard: { 649 * enabled: true, 650 * dy: 30, 651 * panShift: true, 652 * panCtrl: false 653 * } 654 * }); 655 * 656 * })(); 657 * 658 * </script><pre> 659 * 660 * 661 * @see JXG.Board#keyDownListener 662 * @see JXG.Board#keyFocusInListener 663 * @see JXG.Board#keyFocusOutListener 664 * 665 * @name JXG.Board#keyboard 666 * @type Object 667 * @default {enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false} 668 */ 669 keyboard: { 670 enabled: true, 671 dx: 10, 672 dy: 10, 673 panShift: true, 674 panCtrl: false 675 }, 676 677 /** 678 * Control if JSXGraph reacts to resizing of the JSXGraph container element 679 * by the user / browser. 680 * The attribute "throttle" determines the minimal time in msec between to 681 * resize calls. 682 * 683 * @see JXG.Board#startResizeObserver 684 * @see JXG.Board#resizeListener 685 * 686 * @name JXG.Board#resize 687 * @type Object 688 * @default {enabled: true, throttle: 10} 689 * 690 * @example 691 * var board = JXG.JSXGraph.initBoard('jxgbox', { 692 * boundingbox: [-5,5,5,-5], 693 * keepAspectRatio: true, 694 * axis: true, 695 * resize: {enabled: true, throttle: 200} 696 * }); 697 * 698 * </pre><div id="JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3" class="jxgbox" style="width: 300px; height: 300px;"></div> 699 * <script type="text/javascript"> 700 * (function() { 701 * var board = JXG.JSXGraph.initBoard('JXGb55d4608-5d71-4bc3-b332-18c15fbda8c3', { 702 * boundingbox: [-5,5,5,-5], 703 * keepAspectRatio: true, 704 * axis: true, 705 * resize: {enabled: true, throttle: 200} 706 * }); 707 * 708 * })(); 709 * 710 * </script><pre> 711 * 712 * 713 */ 714 resize: { 715 enabled: true, 716 throttle: 10 717 }, 718 719 /** 720 * Element which listens to move events of the pointing device. 721 * This allows to drag elements of a JSXGraph construction outside of the board. 722 * Especially, on mobile devices this enhances the user experience. 723 * However, it is recommended to allow dragging outside of the JSXGraph board only 724 * in certain constructions where users may not "loose" points outside of the board. 725 * Then points may become unreachable. 726 * <p> 727 * A situation where dragging outside of the board is uncritical is for example if 728 * only sliders are used to interact with the construction. 729 * <p> 730 * Possible values for this attributes are: 731 * <ul> 732 * <li> an element specified by document.getElementById('some id'); 733 * <li> null: to use the JSXgraph container div element 734 * <li> document 735 * </ul> 736 * 737 * @name JXG.Board#moveTarget 738 * @type HTML node or document 739 * @default null 740 * 741 * @example 742 * var board = JXG.JSXGraph.initBoard('jxgbox', { 743 * boundingbox: [-5,5,5,-5], 744 * axis: true, 745 * moveTarget: document 746 * }); 747 * 748 * </pre><div id="JXG973457e5-c63f-4516-8570-743f2cc560e1" class="jxgbox" style="width: 300px; height: 300px;"></div> 749 * <script type="text/javascript"> 750 * (function() { 751 * var board = JXG.JSXGraph.initBoard('JXG973457e5-c63f-4516-8570-743f2cc560e1', 752 * {boundingbox: [-5,5,5,-5], 753 * axis: true, 754 * moveTarget: document 755 * }); 756 * 757 * })(); 758 * 759 * </script><pre> 760 * 761 * 762 */ 763 moveTarget: null, 764 765 /** 766 * Control the possibilities for a selection rectangle. 767 * Starting a selection event triggers the "startselecting" event. 768 * When the mouse pointer is released, the "stopselecting" event is fired. 769 * The "stopselecting" event must be supplied by the user. 770 * <p> 771 * Possible sub-attributes with default values are: 772 * <pre> 773 * selection: { 774 * enabled: false, 775 * name: 'selectionPolygon', 776 * needShift: false, // mouse selection needs pressing of the shift key 777 * needCtrl: true, // mouse selection needs pressing of the shift key 778 * withLines: false, // Selection polygon has border lines 779 * vertices: { 780 * visible: false 781 * }, 782 * fillColor: '#ffff00', 783 * visible: false // Initial visibility. Should be set to false always 784 * } 785 * </pre> 786 * 787 * @example 788 * board.on('stopselecting', function(){ 789 * var box = board.stopSelectionMode(), 790 * // bbox has the coordinates of the selectionr rectangle. 791 * // Attention: box[i].usrCoords have the form [1, x, y], i.e. 792 * // are homogeneous coordinates. 793 * bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1)); 794 * // Set a new bounding box 795 * board.setBoundingBox(bbox, false); 796 * }); 797 * 798 * @name JXG.Board#selection 799 * @see JXG.Board#startselecting 800 * @see JXG.Board#stopselecting 801 * @see JXG.Board#mousestartselecting 802 * @see JXG.Board#pointerstartselecting 803 * @see JXG.Board#touchstartselecting 804 * @see JXG.Board#mousestopselecting 805 * @see JXG.Board#pointerstopselecting 806 * @see JXG.Board#touchstopselecting 807 * @type Object 808 * @default 809 */ 810 selection: { 811 enabled: false, 812 name: 'selectionPolygon', 813 needShift: false, 814 needCtrl: true, 815 withLines: false, 816 vertices: { 817 visible: false 818 }, 819 fillColor: '#ffff00', 820 visible: false 821 }, 822 823 /** 824 * If true, the infobox is shown on mouse/pen over for all points 825 * which have set their attribute showInfobox to 'inherit'. 826 * If a point has set its attribute showInfobox to false or true, 827 * that value will have priority over this value. 828 * 829 * @name JXG.Board#showInfobox 830 * @see Point#showInfobox 831 * @type Boolean 832 * @default true 833 */ 834 showInfobox: true 835 836 /**#@-*/ 837 }, 838 839 /** 840 * Options that are used by the navigation bar. 841 * 842 * Default values are 843 * <pre> 844 * JXG.Option.navbar: { 845 * strokeColor: '#333333', 846 * fillColor: 'transparent', 847 * highlightFillColor: '#aaaaaa', 848 * padding: '2px', 849 * position: 'absolute', 850 * fontSize: '14px', 851 * cursor: 'pointer', 852 * zIndex: '100', 853 * right: '5px', 854 * bottom: '5px' 855 * }, 856 * </pre> 857 * These settings are overruled by the CSS class 'JXG_navigation'. 858 * @deprecated 859 * @type Object 860 * @name JXG.Options#navbar 861 * 862 */ 863 navbar: { 864 strokeColor: '#333333', //'#aaaaaa', 865 fillColor: 'transparent', //#f5f5f5', 866 highlightFillColor: '#aaaaaa', 867 padding: '2px', 868 position: 'absolute', 869 fontSize: '14px', 870 cursor: 'pointer', 871 zIndex: '100', 872 right: '5px', 873 bottom: '5px' 874 //border: 'none 1px black', 875 //borderRadius: '4px' 876 }, 877 878 /* 879 * Generic options used by {@link JXG.GeometryElement} 880 */ 881 elements: { 883 884 /**#@+ 885 * @visprop 886 */ 887 888 /** 889 * The stroke color of the given geometry element. 890 * @type String 891 * @name JXG.GeometryElement#strokeColor 892 * @see JXG.GeometryElement#highlightStrokeColor 893 * @see JXG.GeometryElement#strokeWidth 894 * @see JXG.GeometryElement#strokeOpacity 895 * @see JXG.GeometryElement#highlightStrokeOpacity 896 * @default {@link JXG.Options.elements.color#strokeColor} 897 */ 898 strokeColor: Color.palette.blue, 899 900 /** 901 * The stroke color of the given geometry element when the user moves the mouse over it. 902 * @type String 903 * @name JXG.GeometryElement#highlightStrokeColor 904 * @see JXG.GeometryElement#strokeColor 905 * @see JXG.GeometryElement#strokeWidth 906 * @see JXG.GeometryElement#strokeOpacity 907 * @see JXG.GeometryElement#highlightStrokeOpacity 908 * @default {@link JXG.Options.elements.color#highlightStrokeColor} 909 */ 910 highlightStrokeColor: '#c3d9ff', 911 912 /** 913 * The fill color of this geometry element. 914 * @type String 915 * @name JXG.GeometryElement#fillColor 916 * @see JXG.GeometryElement#highlightFillColor 917 * @see JXG.GeometryElement#fillOpacity 918 * @see JXG.GeometryElement#highlightFillOpacity 919 * @default {@link JXG.Options.elements.color#fillColor} 920 */ 921 fillColor: Color.palette.red, 922 923 /** 924 * The fill color of the given geometry element when the mouse is pointed over it. 925 * @type String 926 * @name JXG.GeometryElement#highlightFillColor 927 * @see JXG.GeometryElement#fillColor 928 * @see JXG.GeometryElement#fillOpacity 929 * @see JXG.GeometryElement#highlightFillOpacity 930 * @default {@link JXG.Options.elements.color#highlightFillColor} 931 */ 932 highlightFillColor: 'none', 933 934 /** 935 * Opacity for element's stroke color. 936 * @type Number 937 * @name JXG.GeometryElement#strokeOpacity 938 * @see JXG.GeometryElement#strokeColor 939 * @see JXG.GeometryElement#highlightStrokeColor 940 * @see JXG.GeometryElement#strokeWidth 941 * @see JXG.GeometryElement#highlightStrokeOpacity 942 * @default {@link JXG.Options.elements#strokeOpacity} 943 */ 944 strokeOpacity: 1, 945 946 /** 947 * Opacity for stroke color when the object is highlighted. 948 * @type Number 949 * @name JXG.GeometryElement#highlightStrokeOpacity 950 * @see JXG.GeometryElement#strokeColor 951 * @see JXG.GeometryElement#highlightStrokeColor 952 * @see JXG.GeometryElement#strokeWidth 953 * @see JXG.GeometryElement#strokeOpacity 954 * @default {@link JXG.Options.elements#highlightStrokeOpacity} 955 */ 956 highlightStrokeOpacity: 1, 957 958 /** 959 * Opacity for fill color. 960 * @type Number 961 * @name JXG.GeometryElement#fillOpacity 962 * @see JXG.GeometryElement#fillColor 963 * @see JXG.GeometryElement#highlightFillColor 964 * @see JXG.GeometryElement#highlightFillOpacity 965 * @default {@link JXG.Options.elements.color#fillOpacity} 966 */ 967 fillOpacity: 1, 968 969 /** 970 * Opacity for fill color when the object is highlighted. 971 * @type Number 972 * @name JXG.GeometryElement#highlightFillOpacity 973 * @see JXG.GeometryElement#fillColor 974 * @see JXG.GeometryElement#highlightFillColor 975 * @see JXG.GeometryElement#fillOpacity 976 * @default {@link JXG.Options.elements.color#highlightFillOpacity} 977 */ 978 highlightFillOpacity: 1, 979 980 /** 981 * Gradient type. Possible values are 'linear'. 'radial' or null. 982 * 983 * @example 984 * var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'}); 985 * var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'}); 986 * var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'}); 987 * 988 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 989 * fillOpacity: 1, 990 * fillColor: 'yellow', 991 * gradient: 'linear', 992 * gradientSecondColor: 'blue', 993 * gradientAngle: function() { return a.Value(); }, 994 * gradientStartOffset: function() { return b.Value(); }, 995 * gradientEndOffset: function() { return c.Value(); }, 996 * hasInnerPoints: true 997 * }); 998 * 999 * </pre><div id="JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0" class="jxgbox" style="width: 300px; height: 300px;"></div> 1000 * <script type="text/javascript"> 1001 * (function() { 1002 * var board = JXG.JSXGraph.initBoard('JXG3d04b5fd-0cd4-4f49-8c05-4e9686cd7ff0', 1003 * {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false}); 1004 * var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'}); 1005 * var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'}); 1006 * var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'}); 1007 * 1008 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1009 * fillOpacity: 1, 1010 * fillColor: 'yellow', 1011 * gradient: 'linear', 1012 * gradientSecondColor: 'blue', 1013 * gradientAngle: function() { return a.Value(); }, 1014 * gradientStartOffset: function() { return b.Value(); }, 1015 * gradientEndOffset: function() { return c.Value(); }, 1016 * hasInnerPoints: true 1017 * }); 1018 * 1019 * })(); 1020 * 1021 * </script><pre> 1022 * 1023 * @example 1024 * var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'}); 1025 * var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'}); 1026 * var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'}); 1027 * var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'}); 1028 * var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'}); 1029 * var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'}); 1030 * 1031 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1032 * fillOpacity: 1, 1033 * fillColor: 'yellow', 1034 * gradient: 'radial', 1035 * gradientSecondColor: 'blue', 1036 * gradientCX: function() { return cx.Value(); }, 1037 * gradientCY: function() { return cx.Value(); }, 1038 * gradientR: function() { return r.Value(); }, 1039 * gradientFX: function() { return fx.Value(); }, 1040 * gradientFY: function() { return fx.Value(); }, 1041 * gradientFR: function() { return fr.Value(); }, 1042 * gradientStartOffset: function() { return o1.Value(); }, 1043 * gradientEndOffset: function() { return o2.Value(); }, 1044 * hasInnerPoints: true 1045 * }); 1046 * 1047 * </pre><div id="JXG6081ca7f-0d09-4525-87ac-325a02fe2225" class="jxgbox" style="width: 300px; height: 300px;"></div> 1048 * <script type="text/javascript"> 1049 * (function() { 1050 * var board = JXG.JSXGraph.initBoard('JXG6081ca7f-0d09-4525-87ac-325a02fe2225', 1051 * {boundingbox: [-1.5, 4.5, 5, -1.5], axis: true, showcopyright: false, shownavigation: false}); 1052 * var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'}); 1053 * var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'}); 1054 * var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'}); 1055 * var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'}); 1056 * var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'}); 1057 * var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'}); 1058 * 1059 * var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], { 1060 * fillOpacity: 1, 1061 * fillColor: 'yellow', 1062 * gradient: 'radial', 1063 * gradientSecondColor: 'blue', 1064 * gradientCX: function() { return cx.Value(); }, 1065 * gradientCY: function() { return cx.Value(); }, 1066 * gradientR: function() { return r.Value(); }, 1067 * gradientFX: function() { return fx.Value(); }, 1068 * gradientFY: function() { return fx.Value(); }, 1069 * gradientFR: function() { return fr.Value(); }, 1070 * gradientStartOffset: function() { return o1.Value(); }, 1071 * gradientEndOffset: function() { return o2.Value(); }, 1072 * hasInnerPoints: true 1073 * }); 1074 * 1075 * })(); 1076 * 1077 * </script><pre> 1078 * 1079 * 1080 * @type String 1081 * @name JXG.GeometryElement#gradient 1082 * @see JXG.GeometryElement#gradientSecondColor 1083 * @see JXG.GeometryElement#gradientSecondOpacity 1084 * @default null 1085 */ 1086 gradient: null, 1087 1088 /** 1089 * Second color for gradient. 1090 * @type String 1091 * @name JXG.GeometryElement#gradientSecondColor 1092 * @see JXG.GeometryElement#gradient 1093 * @see JXG.GeometryElement#gradientSecondOpacity 1094 * @default '#ffffff' 1095 */ 1096 gradientSecondColor: '#ffffff', 1097 1098 /** 1099 * Opacity of second gradient color. Takes a value between 0 and 1. 1100 * @type Number 1101 * @name JXG.GeometryElement#gradientSecondOpacity 1102 * @see JXG.GeometryElement#gradient 1103 * @see JXG.GeometryElement#gradientSecondColor 1104 * @default 1 1105 */ 1106 gradientSecondOpacity: 1, 1107 1108 /** 1109 * The gradientStartOffset attribute is a number (ranging from 0 to 1) which indicates where the first gradient stop is placed, 1110 * see the SVG specification for more information. 1111 * For linear gradients, this attribute represents a location along the gradient vector. 1112 * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle. 1113 * @type Number 1114 * @name JXG.GeometryElement#gradientStartOffset 1115 * @see JXG.GeometryElement#gradient 1116 * @see JXG.GeometryElement#gradientEndOffset 1117 * @default 0.0 1118 */ 1119 gradientStartOffset: 0.0, 1120 1121 /** 1122 * The gradientEndOffset attribute is a number (ranging from 0 to 1) which indicates where the second gradient stop is placed, 1123 * see the SVG specification for more information. 1124 * For linear gradients, this attribute represents a location along the gradient vector. 1125 * For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle. 1126 * @type Number 1127 * @name JXG.GeometryElement#gradientEndOffset 1128 * @see JXG.GeometryElement#gradient 1129 * @see JXG.GeometryElement#gradientStartOffset 1130 * @default 1.0 1131 */ 1132 gradientEndOffset: 1.0, 1133 1134 1135 /** 1136 * Angle (in radians) of the gradiant in case the gradient is of type 'linear'. 1137 * If the angle is 0, the first color is on the left and the second color is on the right. 1138 * If the angle is pi/4 the first color is on top and the second color at the 1139 * bottom. 1140 * @type Number 1141 * @name JXG.GeometryElement#gradientAngle 1142 * @see JXG.GeometryElement#gradient 1143 * @default 0 1144 */ 1145 gradientAngle: 0, 1146 1147 /** 1148 * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. 1149 * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. 1150 * For radial gradients in canvas this is the value 'x1'. 1151 * Takes a value between 0 and 1. 1152 * @type Number 1153 * @name JXG.GeometryElement#gradientCX 1154 * @see JXG.GeometryElement#gradient 1155 * @see JXG.GeometryElement#gradientCY 1156 * @see JXG.GeometryElement#gradientR 1157 * @default 0.5 1158 */ 1159 gradientCX: 0.5, 1160 1161 /** 1162 * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. 1163 * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. 1164 * For radial gradients in canvas this is the value 'y1'. 1165 * Takes a value between 0 and 1. 1166 * @type Number 1167 * @name JXG.GeometryElement#gradientCY 1168 * @see JXG.GeometryElement#gradient 1169 * @see JXG.GeometryElement#gradientCX 1170 * @see JXG.GeometryElement#gradientR 1171 * @default 0.5 1172 */ 1173 gradientCY: 0.5, 1174 1175 /** 1176 * From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. 1177 * The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. 1178 * For radial gradients in canvas this is the value 'r1'. 1179 * Takes a value between 0 and 1. 1180 * @type Number 1181 * @name JXG.GeometryElement#gradientR 1182 * @see JXG.GeometryElement#gradient 1183 * @see JXG.GeometryElement#gradientCX 1184 * @see JXG.GeometryElement#gradientCY 1185 * @default 0.5 1186 */ 1187 gradientR: 0.5, 1188 1189 /** 1190 * ‘fx’ and ‘fy’ define the focal point for the radial gradient. 1191 * The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy). 1192 * For radial gradients in canvas this is the value 'x0'. 1193 * Takes a value between 0 and 1. 1194 * @type Number 1195 * @name JXG.GeometryElement#gradientFX 1196 * @see JXG.GeometryElement#gradient 1197 * @see JXG.GeometryElement#gradientFY 1198 * @see JXG.GeometryElement#gradientFR 1199 * @default 0.5 1200 */ 1201 gradientFX: 0.5, 1202 1203 /** 1204 * y-coordinate of the circle center for the second color in case of gradient 'radial'. (The attribute fy in SVG) 1205 * For radial gradients in canvas this is the value 'y0'. 1206 * Takes a value between 0 and 1. 1207 * @type Number 1208 * @name JXG.GeometryElement#gradientFY 1209 * @see JXG.GeometryElement#gradient 1210 * @see JXG.GeometryElement#gradientFX 1211 * @see JXG.GeometryElement#gradientFR 1212 * @default 0.5 1213 */ 1214 gradientFY: 0.5, 1215 1216 /** 1217 * This attribute defines the radius of the start circle of the radial gradient. 1218 * The gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. 1219 * For radial gradients in canvas this is the value 'r0'. 1220 * Takes a value between 0 and 1. 1221 * @type Number 1222 * @name JXG.GeometryElement#gradientFR 1223 * @see JXG.GeometryElement#gradient 1224 * @see JXG.GeometryElement#gradientFX 1225 * @see JXG.GeometryElement#gradientFY 1226 * @default 0.0 1227 */ 1228 gradientFR: 0.0, 1229 1230 /** 1231 * Transition duration (in milliseconds) for color and opacity 1232 * changes. Works in SVG renderer, only. 1233 * @type Number 1234 * @name JXG.GeometryElement#transitionDuration 1235 * @see JXG.GeometryElement#strokeColor 1236 * @see JXG.GeometryElement#highlightStrokeColor 1237 * @see JXG.GeometryElement#strokeOpacity 1238 * @see JXG.GeometryElement#highlightStrokeOpacity 1239 * @see JXG.GeometryElement#fillColor 1240 * @see JXG.GeometryElement#highlightFillColor 1241 * @see JXG.GeometryElement#fillOpacity 1242 * @see JXG.GeometryElement#highlightFillOpacity 1243 * @default {@link JXG.Options.elements#transitionDuration} 1244 */ 1245 transitionDuration: 100, 1246 1247 /** 1248 * Width of the element's stroke. 1249 * @type Number 1250 * @name JXG.GeometryElement#strokeWidth 1251 * @see JXG.GeometryElement#strokeColor 1252 * @see JXG.GeometryElement#highlightStrokeColor 1253 * @see JXG.GeometryElement#strokeOpacity 1254 * @see JXG.GeometryElement#highlightStrokeOpacity 1255 * @default {@link JXG.Options.elements#strokeWidth} 1256 */ 1257 strokeWidth: 2, 1258 1259 /** 1260 * Width of the element's stroke when the mouse is pointed over it. 1261 * @type Number 1262 * @name JXG.GeometryElement#highlightStrokeWidth 1263 * @see JXG.GeometryElement#strokeColor 1264 * @see JXG.GeometryElement#highlightStrokeColor 1265 * @see JXG.GeometryElement#strokeOpacity 1266 * @see JXG.GeometryElement#highlightStrokeOpacity 1267 * @see JXG.GeometryElement#highlightFillColor 1268 * @default {@link JXG.Options.elements#strokeWidth} 1269 */ 1270 highlightStrokeWidth: 2, 1271 1272 /** 1273 * If true the element is fixed and can not be dragged around. The element 1274 * will be repositioned on zoom and moveOrigin events. 1275 * @type Boolean 1276 * @default false 1277 * @name JXG.GeometryElement#fixed 1278 */ 1279 fixed: false, 1280 1281 /** 1282 * If true the element is fixed and can not be dragged around. The element 1283 * will even stay at its position on zoom and moveOrigin events. 1284 * Only free elements like points, texts, curves can be frozen. 1285 * @type Boolean 1286 * @default false 1287 * @name JXG.GeometryElement#frozen 1288 */ 1289 frozen: false, 1290 1291 /** 1292 * If true a label will display the element's name. 1293 * @type Boolean 1294 * @default false 1295 * @name JXG.GeometryElement#withLabel 1296 */ 1297 withLabel: false, 1298 1299 /** 1300 * If false the element won't be visible on the board, otherwise it is shown. 1301 * @type Boolean 1302 * @name JXG.GeometryElement#visible 1303 * @see JXG.GeometryElement#hideElement 1304 * @see JXG.GeometryElement#showElement 1305 * @default true 1306 */ 1307 visible: true, 1308 1309 /** 1310 * A private element will be inaccessible in certain environments, e.g. a graphical user interface. 1311 * @default false 1312 */ 1313 priv: false, 1314 1315 /** 1316 * Display layer which will contain the element. 1317 * @see JXG.Options#layer 1318 * @default See {@link JXG.Options#layer} 1319 */ 1320 layer: 0, 1321 1322 /** 1323 * Determines the elements border-style. 1324 * Possible values are: 1325 * <ul><li>0 for a solid line</li> 1326 * <li>1 for a dotted line</li> 1327 * <li>2 for a line with small dashes</li> 1328 1329 1330 * <li>3 for a line with medium dashes</li> 1331 * <li>4 for a line with big dashes</li> 1332 * <li>5 for a line with alternating medium and big dashes and large gaps</li> 1333 * <li>6 for a line with alternating medium and big dashes and small gaps</li></ul> 1334 * @type Number 1335 * @name JXG.GeometryElement#dash 1336 * @default 0 1337 */ 1338 dash: 0, 1339 1340 /** 1341 * If true the element will get a shadow. 1342 * @type Boolean 1343 * @name JXG.GeometryElement#shadow 1344 * @default false 1345 */ 1346 shadow: false, 1347 1348 /** 1349 * If true the element will be traced, i.e. on every movement the element will be copied 1350 * to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements. 1351 * 1352 * The calling of element.setAttribute({trace:false}) additionally 1353 * deletes all traces of this element. By calling 1354 * element.setAttribute({trace:'pause'}) 1355 * the removal of already existing traces can be prevented. 1356 * @see JXG.GeometryElement#clearTrace 1357 * @see JXG.GeometryElement#traces 1358 * @see JXG.GeometryElement#numTraces 1359 * @type Boolean|String 1360 * @default false 1361 * @name JXG.GeometryElement#trace 1362 */ 1363 trace: false, 1364 1365 /** 1366 * Extra visual properties for traces of an element 1367 * @type Object 1368 * @see JXG.GeometryElement#trace 1369 * @name JXG.GeometryElement#traceAttributes 1370 */ 1371 traceAttributes: {}, 1372 1373 /** 1374 * 1375 * @type Boolean 1376 * @default true 1377 * @name JXG.GeometryElement#highlight 1378 */ 1379 highlight: true, 1380 1381 /** 1382 * If this is set to true, the element is updated in every update 1383 * call of the board. If set to false, the element is updated only after 1384 * zoom events or more generally, when the bounding box has been changed. 1385 * Examples for the latter behaviour should be axes. 1386 * @type Boolean 1387 * @default true 1388 * @see JXG.GeometryElement#needsRegularUpdate 1389 * @name JXG.GeometryElement#needsRegularUpdate 1390 */ 1391 needsRegularUpdate: true, 1392 1393 /** 1394 * Snaps the element or its parents to the grid. Currently only relevant for points, circles, 1395 * and lines. Points are snapped to grid directly, on circles and lines it's only the parent 1396 * points that are snapped 1397 * @type Boolean 1398 * @default false 1399 * @name JXG.GeometryElement#snapToGrid 1400 */ 1401 snapToGrid: false, 1402 1403 /** 1404 * Determines whether two-finger manipulation of this object may change its size. 1405 * If set to false, the object is only rotated and translated. 1406 * <p> 1407 * In case the element is a horizontal or vertical line having ticks, "scalable:true" 1408 * enables zooming of the board by dragging ticks lines. This feature is enabled, 1409 * for the ticks element of the line element the attribute "fixed" has to be false 1410 * and the line element's scalable attribute has to be true. 1411 * <p> 1412 * In case the element is a polygon or line and it has the attribute "scalable:false", 1413 * moving the element with two fingers results in a rotation or translation. 1414 * 1415 * @type Boolean 1416 * @default true 1417 * @name JXG.GeometryElement#scalable 1418 * @see JXG.Ticks#fixed 1419 */ 1420 scalable: true, 1421 1422 /** 1423 * If the element is dragged it will be moved on mousedown or touchstart to the 1424 * top of its layer. Works only for SVG renderer and for simple elements 1425 * consisting of one SVG node. 1426 * @example 1427 * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true}); 1428 * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'}); 1429 * 1430 * </pre><div id="JXG38449fee-1ab4-44de-b7d1-43caa1f50f86" class="jxgbox" style="width: 300px; height: 300px;"></div> 1431 * <script type="text/javascript"> 1432 * (function() { 1433 * var board = JXG.JSXGraph.initBoard('JXG38449fee-1ab4-44de-b7d1-43caa1f50f86', 1434 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1435 * var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true}); 1436 * var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'}); 1437 * 1438 * })(); 1439 * 1440 * </script><pre> 1441 * 1442 * @type Boolean 1443 * @default false 1444 * @name JXG.GeometryElement#dragToTopOfLayer 1445 */ 1446 dragToTopOfLayer: false, 1447 1448 /** 1449 * Precision options for JSXGraph elements. 1450 * This attributes takes either the value 'inherit' or an object of the form: 1451 * <pre> 1452 * precision: { 1453 * touch: 30, 1454 * mouse: 4, 1455 * pen: 4 1456 * } 1457 * </pre> 1458 * 1459 * In the first case, the global, JSXGraph-wide values of JXGraph.Options.precision 1460 * are taken. 1461 * 1462 * @type {String|Object} 1463 * @name JXG.GeometryElement#precision 1464 * @see JXG.Options#precision 1465 * @default 'inherit' 1466 */ 1467 precision: 'inherit', 1468 1469 /*draft options */ 1470 draft: { 1471 /** 1472 * If true the element will be drawn in grey scale colors to visualize that it's only a draft. 1473 * @type Boolean 1474 * @name JXG.GeometryElement#draft 1475 * @default {@link JXG.Options.elements.draft#draft} 1476 */ 1477 draft: false, 1478 strokeColor: '#565656', 1479 fillColor: '#565656', 1480 strokeOpacity: 0.8, 1481 fillOpacity: 0.8, 1482 strokeWidth: 1 1483 }, 1484 1485 /** 1486 * @private 1487 * By default, an element is not a label. Do not change this. 1488 */ 1489 isLabel: false, 1490 1491 1492 tabindex: 0 1493 1494 // close the meta tag 1495 /**#@-*/ 1496 }, 1497 1498 /* 1499 * Generic options used by {@link JXG.Ticks} 1500 */ 1501 ticks: { 1502 /**#@+ 1503 * @visprop 1504 */ 1505 1506 /** 1507 * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the 1508 * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0). 1509 * 1510 * @type function 1511 * @name Ticks#generateLabelText 1512 */ 1513 generateLabelText: null, 1514 1515 /** 1516 * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the 1517 * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0). 1518 * 1519 * @deprecated Use {@link JGX.Options@generateLabelValue} 1520 * @type function 1521 * @name Ticks#generateLabelValue 1522 */ 1523 generateLabelValue: null, 1524 1525 /** 1526 * Draw labels yes/no 1527 * 1528 * @type Boolean 1529 * @name Ticks#drawLabels 1530 * @default false 1531 */ 1532 drawLabels: false, 1533 1534 /** 1535 * Attributes for the ticks labels 1536 * 1537 * @name Ticks#label 1538 * @type Object 1539 * @default {} 1540 * 1541 */ 1542 label: { 1543 }, 1544 1545 /** 1546 * Format tick labels that were going to have scientific notation 1547 * like 5.00e+6 to look like 5•10⁶. 1548 * 1549 * @example 1550 * var board = JXG.JSXGraph.initBoard("jxgbox", { 1551 * boundingbox: [-500000, 500000, 500000, -500000], 1552 * axis: true, 1553 * defaultAxes: { 1554 * x: { 1555 * scalable: true, 1556 * ticks: { 1557 * beautifulScientificTickLabels: true 1558 * }, 1559 * }, 1560 * y: { 1561 * scalable: true, 1562 * ticks: { 1563 * beautifulScientificTickLabels: true 1564 * }, 1565 * } 1566 * }, 1567 * }); 1568 * 1569 * </pre><div id="JXGc1e46cd1-e025-4002-80aa-b450869fdaa2" class="jxgbox" style="width: 300px; height: 300px;"></div> 1570 * <script type="text/javascript"> 1571 * (function() { 1572 * var board = JXG.JSXGraph.initBoard('JXGc1e46cd1-e025-4002-80aa-b450869fdaa2', { 1573 * boundingbox: [-500000, 500000, 500000, -500000], 1574 * showcopyright: false, shownavigation: false, 1575 * axis: true, 1576 * defaultAxes: { 1577 * x: { 1578 * scalable: true, 1579 * ticks: { 1580 * beautifulScientificTickLabels: true 1581 * }, 1582 * }, 1583 * y: { 1584 * scalable: true, 1585 * ticks: { 1586 * beautifulScientificTickLabels: true 1587 * }, 1588 * } 1589 * }, 1590 * }); 1591 * 1592 * })(); 1593 * 1594 * </script><pre> 1595 * 1596 * @name Ticks#beautifulScientificTickLabels 1597 * @type Boolean 1598 * @default false 1599 */ 1600 beautifulScientificTickLabels: false, 1601 1602 /** 1603 * Use the unicode character 0x2212, i.e. the HTML entity − as minus sign. 1604 * That is −1 instead of -1. 1605 * 1606 * @type Boolean 1607 * @name Ticks#useUnicodeMinus 1608 * @default true 1609 */ 1610 useUnicodeMinus: true, 1611 1612 /** 1613 * Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2, 1614 * and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent 1615 * line is of type axis. 1616 * 1617 * @type String 1618 * @name Ticks#anchor 1619 * @default 'left' 1620 */ 1621 anchor: 'left', 1622 1623 /** 1624 * Draw the zero tick, that lies at line.point1? 1625 * 1626 * @type Boolean 1627 * @name Ticks#drawZero 1628 * @default false 1629 */ 1630 drawZero: false, 1631 1632 /** 1633 * If the distance between two ticks is too big we could insert new ticks. If insertTicks 1634 * is <tt>true</tt>, we'll do so, otherwise we leave the distance as is. 1635 * This option is ignored if equidistant is false. In the example below the distance between 1636 * two ticks is given as <tt>1</tt> but because insertTicks is set to true many ticks will 1637 * be omitted in the rendering process to keep the display clear. 1638 * 1639 * @type Boolean 1640 * @name Ticks#insertTicks 1641 * @see Ticks#minTicksDistance 1642 * @default false 1643 * @example 1644 * // Create an axis providing two coord pairs. 1645 * var p1 = board.create('point', [0, 0]); 1646 * var p2 = board.create('point', [50, 25]); 1647 * var l1 = board.create('line', [p1, p2]); 1648 * var t = board.create('ticks', [l1, 1], { 1649 * insertTicks: true, 1650 * majorHeight: -1, 1651 * label: { 1652 * offset: [4, -9] 1653 * }, 1654 * drawLabels: true 1655 * }); 1656 * </pre><div class="jxgbox" id="JXG2f6fb842-40bd-4223-aa28-3e9369d2097f" style="width: 300px; height: 300px;"></div> 1657 * <script type="text/javascript"> 1658 * (function () { 1659 * var board = JXG.JSXGraph.initBoard('JXG2f6fb842-40bd-4223-aa28-3e9369d2097f', {boundingbox: [-100, 70, 70, -100], showcopyright: false, shownavigation: false}); 1660 * var p1 = board.create('point', [0, 0]); 1661 * var p2 = board.create('point', [50, 25]); 1662 * var l1 = board.create('line', [p1, p2]); 1663 * var t = board.create('ticks', [l1, 1], {insertTicks: true, majorHeight: -1, label: {offset: [4, -9]}, drawLabels: true}); 1664 * })(); 1665 * </script><pre> 1666 */ 1667 insertTicks: false, 1668 1669 /** 1670 * Minimum distance in pixel of equidistant ticks in case insertTicks==true. 1671 * @name Ticks#minTicksDistance 1672 * @type: Number 1673 * @default: 10 1674 * @see Ticks#insertTicks 1675 */ 1676 minTicksDistance: 10, 1677 1678 /** 1679 * Total height of a minor tick. If negative the full height of the board is taken. 1680 * 1681 * @type Number 1682 * @name Ticks#minorHeight 1683 * @default 4 1684 */ 1685 minorHeight: 4, 1686 1687 /** 1688 * Total height of a major tick. If negative the full height of the board is taken. 1689 * 1690 * @type Number 1691 * @name Ticks#majorHeight 1692 * @default 10 1693 */ 1694 majorHeight: 10, 1695 1696 /** 1697 * Decides in which direction finite ticks are visible. Possible values are either the constants 1698 * 0=false or 1=true or a function returning 0 or 1. 1699 * 1700 * In case of [0,1] the tick is only visible to the right of the line. In case of 1701 * [1,0] the tick is only visible to the left of the line. 1702 * 1703 * @type Array 1704 * @name Ticks#tickEndings 1705 * @default [1, 1] 1706 */ 1707 tickEndings: [1, 1], 1708 1709 /** 1710 * The number of minor ticks between two major ticks. 1711 * @type Number 1712 * @name Ticks#minorTicks 1713 * @default 4 1714 */ 1715 minorTicks: 4, 1716 1717 /** 1718 * Scale the ticks but not the tick labels. 1719 * @type Number 1720 * @default 1 1721 * @name Ticks#scale 1722 * @see Ticks#scaleSymbol 1723 */ 1724 scale: 1, 1725 1726 /** 1727 * A string that is appended to every tick, used to represent the scale 1728 * factor given in {@link Ticks#scaleSymbol}. 1729 * 1730 * @type String 1731 * @default '' 1732 * @name Ticks#scaleSymbol 1733 * @see Ticks#scale 1734 */ 1735 scaleSymbol: '', 1736 1737 /** 1738 * User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array 1739 * is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is 1740 * shown as a fallback. 1741 * 1742 * @type Array 1743 * @name Ticks#labels 1744 * @default [] 1745 */ 1746 labels: [], 1747 1748 /** 1749 * The maximum number of characters a tick label can use. 1750 * 1751 * @type Number 1752 * @name Ticks#maxLabelLength 1753 * @see Ticks#precision 1754 * @default 5 1755 */ 1756 maxLabelLength: 5, 1757 1758 /** 1759 * If a label exceeds {@link Ticks#maxLabelLength} this determines the precision used to shorten the tick label. 1760 * Replaced by the digits attribute. 1761 * 1762 * @type Number 1763 * @name Ticks#precision 1764 * @see Ticks#maxLabelLength 1765 * @see Ticks#digits 1766 * @deprecated 1767 * @default 3 1768 */ 1769 precision: 3, 1770 1771 /** 1772 * If a label exceeds {@link Ticks#maxLabelLength} this determines the number of digits used to shorten the tick label. 1773 * 1774 * @type Number 1775 * @name Ticks#digits 1776 * @see Ticks#maxLabelLength 1777 * @deprecated 1778 * @default 3 1779 */ 1780 digits: 3, 1781 1782 /** 1783 * The default distance between two ticks. Please be aware that this value does not have 1784 * to be used if {@link Ticks#insertTicks} is set to true. 1785 * 1786 * @type Number 1787 * @name Ticks#ticksDistance 1788 * @see Ticks#insertTicks 1789 * @default 1 1790 */ 1791 ticksDistance: 1, 1792 1793 /** 1794 * Tick face for ticks of finite length. By default (face: '|') this is a straight line. 1795 * Possible other values are '<' and '>'. These faces are used in 1796 * {@link JXG.Hatch} for hatch marking parallel lines. 1797 * @type String 1798 * @name{Ticks#face} 1799 * @see hatch 1800 * @default '|' 1801 * @example 1802 * var p1 = board.create('point', [0, 3]); 1803 * var p2 = board.create('point', [1, 3]); 1804 * var l1 = board.create('line', [p1, p2]); 1805 * var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'}); 1806 * 1807 * </pre><div id="JXG950a568a-1264-4e3a-b61d-b6881feecf4b" class="jxgbox" style="width: 300px; height: 300px;"></div> 1808 * <script type="text/javascript"> 1809 * (function() { 1810 * var board = JXG.JSXGraph.initBoard('JXG950a568a-1264-4e3a-b61d-b6881feecf4b', 1811 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1812 * var p1 = board.create('point', [0, 3]); 1813 * var p2 = board.create('point', [1, 3]); 1814 * var l1 = board.create('line', [p1, p2]); 1815 * var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'}); 1816 * 1817 * })(); 1818 * 1819 * </script><pre> 1820 * 1821 */ 1822 face: '|', 1823 1824 strokeOpacity: 1, 1825 strokeWidth: 1, 1826 strokeColor: '#000000', 1827 highlightStrokeColor: '#888888', 1828 fillColor: 'none', 1829 highlightFillColor: 'none', 1830 visible: 'inherit', 1831 1832 /** 1833 * Whether line boundaries should be counted or not in the lower and upper bounds when 1834 * creating ticks. 1835 * 1836 * @type Boolean 1837 * @name Ticks#includeBoundaries 1838 * @default false 1839 */ 1840 includeBoundaries: false, 1841 1842 /** 1843 * Set the ticks type. 1844 * Possible values are 'linear' or 'polar'. 1845 * 1846 * @type String 1847 * @name Ticks#type 1848 * @default 'linear' 1849 */ 1850 type: 'linear' 1851 1852 // close the meta tag 1853 /**#@-*/ 1854 }, 1855 1856 /* 1857 * Generic options used by {@link JXG.Hatch} 1858 */ 1859 hatch: { 1860 drawLabels: false, 1861 drawZero: true, 1862 majorHeight: 20, 1863 anchor: 'middle', 1864 face: '|', 1865 strokeWidth: 2, 1866 strokeColor: Color.palette.blue, 1867 ticksDistance: 0.2 1868 }, 1869 1870 /** 1871 * Precision options, defining how close a pointer device (mouse, finger, pen) has to be 1872 * to an object such that the object is highlighted or can be dragged. 1873 * These values are board-wide and can be overwritten for individual elements by 1874 * changing their precision attribute. 1875 * 1876 * The default values are 1877 * <pre> 1878 * JXG.Options.precision: { 1879 * touch: 30, 1880 * touchMax: 100, 1881 * mouse: 4, 1882 * pen: 4, 1883 * epsilon: 0.0001, 1884 * hasPoint: 4 1885 * } 1886 * </pre> 1887 * 1888 * @type Object 1889 * @name JXG.Options#precision 1890 * @see JXG.GeometryElement#precision 1891 */ 1892 precision: { 1893 touch: 30, 1894 touchMax: 100, 1895 mouse: 4, 1896 pen: 4, 1897 epsilon: 0.0001, // Unused 1898 hasPoint: 4 1899 }, 1900 1901 /** 1902 * Default ordering of the layers. 1903 * The numbering starts from 0 and the highest layer number is numlayers-1. 1904 * 1905 * The default values are 1906 * <pre> 1907 * JXG.Options.layer: { 1908 * numlayers: 20, // only important in SVG 1909 * text: 9, 1910 * point: 9, 1911 * glider: 9, 1912 * arc: 8, 1913 * line: 7, 1914 * circle: 6, 1915 * curve: 5, 1916 * turtle: 5, 1917 * polygon: 3, 1918 * sector: 3, 1919 * angle: 3, 1920 * integral: 3, 1921 * axis: 2, 1922 * ticks: 2, 1923 * grid: 1, 1924 * image: 0, 1925 * trace: 0 1926 * } 1927 * </pre> 1928 * @type Object 1929 * @name JXG.Options#layer 1930 */ 1931 layer: { 1932 numlayers: 20, // only important in SVG 1933 unused9: 19, 1934 unused8: 18, 1935 unused7: 17, 1936 unused6: 16, 1937 unused5: 15, 1938 unused4: 14, 1939 unused3: 13, 1940 unused2: 12, 1941 unused1: 11, 1942 unused0: 10, 1943 text: 9, 1944 point: 9, 1945 glider: 9, 1946 arc: 8, 1947 line: 7, 1948 circle: 6, 1949 curve: 5, 1950 turtle: 5, 1951 polygon: 3, 1952 sector: 3, 1953 angle: 3, 1954 integral: 3, 1955 axis: 2, 1956 ticks: 2, 1957 grid: 1, 1958 image: 0, 1959 trace: 0 1960 }, 1961 1962 /* special angle options */ 1963 angle: { 1964 /**#@+ 1965 * @visprop 1966 */ 1967 1968 withLabel: true, 1969 1970 /** 1971 * Radius of the sector, displaying the angle. 1972 * The radius can be given as number (in user coordinates) 1973 * or as string 'auto'. In the latter case, the angle 1974 * is set to an value between 20 and 50 px. 1975 * 1976 * @type {Number|String} 1977 * @name Angle#radius 1978 * @default 'auto' 1979 * @visprop 1980 */ 1981 radius: 'auto', 1982 1983 /** 1984 * Display type of the angle field. Possible values are 1985 * 'sector' or 'sectordot' or 'square' or 'none'. 1986 * 1987 * @type String 1988 * @default 'sector' 1989 * @name Angle#type 1990 * @visprop 1991 */ 1992 type: 'sector', 1993 1994 /** 1995 * Display type of the angle field in case of a right angle. Possible values are 1996 * 'sector' or 'sectordot' or 'square' or 'none'. 1997 * 1998 * @type String 1999 * @default square 2000 * @name Angle#orthoType 2001 * @see Angle#orthoSensitivity 2002 * @visprop 2003 */ 2004 orthoType: 'square', 2005 2006 /** 2007 * Sensitivity (in degrees) to declare an angle as right angle. 2008 * If the angle measure is inside this distance from a rigth angle, the orthoType 2009 * of the angle is used for display. 2010 * 2011 * @type Number 2012 * @default 1.0 2013 * @name Angle#orthoSensitivity 2014 * @see Angle#orthoType 2015 * @visprop 2016 */ 2017 orthoSensitivity: 1.0, 2018 2019 fillColor: Color.palette.orange, 2020 highlightFillColor: Color.palette.orange, 2021 strokeColor: Color.palette.orange, 2022 // fillColor: '#ff7f00', 2023 // highlightFillColor: '#ff7f00', 2024 // strokeColor: '#ff7f00', 2025 2026 fillOpacity: 0.3, 2027 highlightFillOpacity: 0.3, 2028 2029 /** 2030 * @deprecated 2031 */ 2032 radiuspoint: { 2033 withLabel: false, 2034 visible: false, 2035 name: '' 2036 }, 2037 2038 /** 2039 * @deprecated 2040 */ 2041 pointsquare: { 2042 withLabel: false, 2043 visible: false, 2044 name: '' 2045 }, 2046 2047 dot: { 2048 visible: false, 2049 strokeColor: 'none', 2050 fillColor: '#000000', 2051 size: 2, 2052 face: 'o', 2053 withLabel: false, 2054 name: '' 2055 }, 2056 2057 label: { 2058 position: 'top', 2059 offset: [0, 0], 2060 strokeColor: Color.palette.blue 2061 }, 2062 2063 /** 2064 * Attributes for sub-element arc. In general, the arc will run through the first point and 2065 * thus will not have the same radius as the angle sector. 2066 * 2067 * @type Arc 2068 * @name Angle#arc 2069 * @default '{visible:false}' 2070 */ 2071 arc: { 2072 visible: false, 2073 fillColor: 'none' 2074 }, 2075 2076 /**#@-*/ 2077 }, 2078 2079 /* special arc options */ 2080 arc: { 2081 /**#@+ 2082 * @visprop 2083 */ 2084 2085 /** 2086 * Type of arc. Possible values are 'minor', 'major', and 'auto'. 2087 * 2088 * @type String 2089 * @name Arc#selection 2090 * @default 'auto' 2091 */ 2092 selection: 'auto', 2093 2094 /** 2095 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 2096 * 2097 * @see JXG.GeometryElement#hasPoint 2098 * @name Arc#hasInnerPoints 2099 * @type Boolean 2100 * @default false 2101 */ 2102 hasInnerPoints: false, 2103 2104 label: { 2105 anchorX: 'auto', 2106 anchorY: 'auto' 2107 }, 2108 firstArrow: false, 2109 lastArrow: false, 2110 fillColor: 'none', 2111 highlightFillColor: 'none', 2112 strokeColor: Color.palette.blue, 2113 highlightStrokeColor: '#c3d9ff', 2114 useDirection: false, 2115 2116 /** 2117 * Attributes for center point. 2118 * 2119 * @type Point 2120 * @name Arc#center 2121 */ 2122 center: { 2123 }, 2124 2125 /** 2126 * Attributes for radius point. 2127 * 2128 * @type Point 2129 * @name Arc#radiusPoint 2130 */ 2131 radiusPoint: { 2132 }, 2133 2134 /** 2135 * Attributes for angle point. 2136 * 2137 * @type Point 2138 * @name Arc#anglePoint 2139 */ 2140 anglePoint: { 2141 } 2142 2143 /**#@-*/ 2144 }, 2145 2146 /* special arrow options */ 2147 arrow: { 2148 /**#@+ 2149 * @visprop 2150 */ 2151 2152 firstArrow: false, 2153 2154 lastArrow: { 2155 type: 1, 2156 highlightSize: 6, 2157 size: 6 2158 } 2159 2160 /**#@-*/ 2161 }, 2162 2163 /* special axis options */ 2164 axis: { 2165 /**#@+ 2166 * @visprop 2167 */ 2168 2169 name: '', // By default, do not generate names for axes. 2170 needsRegularUpdate: false, // Axes only updated after zooming and moving of the origin. 2171 strokeWidth: 1, 2172 lastArrow: { 2173 type: 1, 2174 highlightSize: 8, 2175 size: 8 2176 }, 2177 strokeColor: '#666666', 2178 highlightStrokeWidth: 1, 2179 highlightStrokeColor: '#888888', 2180 2181 2182 /** 2183 * Show / hide ticks. 2184 * 2185 * Deprecated. Suggested alternative is "ticks: {visible: false}" 2186 * 2187 * @type Boolean 2188 * @name Axis#withTicks 2189 * @default true 2190 * @deprecated 2191 */ 2192 withTicks: true, 2193 straightFirst: true, 2194 straightLast: true, 2195 margin: -4, 2196 withLabel: false, 2197 scalable: false, 2198 2199 /** 2200 * Attributes for ticks of the axis. 2201 * 2202 * @type Ticks 2203 * @name Axis#ticks 2204 */ 2205 ticks: { 2206 label: { 2207 offset: [4, -12 + 3], // This seems to be a good offset for 12 point fonts 2208 parse: false, 2209 needsRegularUpdate: false, 2210 display: 'internal', 2211 visible: 'inherit', 2212 layer: 9 2213 }, 2214 visible: 'inherit', 2215 needsRegularUpdate: false, 2216 strokeWidth: 1, 2217 strokeColor: '#666666', 2218 highlightStrokeColor: '#888888', 2219 drawLabels: true, 2220 drawZero: false, 2221 insertTicks: true, 2222 minTicksDistance: 5, 2223 minorHeight: 10, // if <0: full width and height 2224 majorHeight: -1, // if <0: full width and height 2225 tickEndings: [0, 1], 2226 minorTicks: 4, 2227 ticksDistance: 1, // TODO doc 2228 strokeOpacity: 0.25 2229 }, 2230 2231 /** 2232 * Attributes for first point the axis. 2233 * 2234 * @type Point 2235 * @name Axis#point1 2236 */ 2237 point1: { // Default values for point1 if created by line 2238 needsRegularUpdate: false, 2239 visible: false 2240 }, 2241 2242 /** 2243 * Attributes for second point the axis. 2244 * 2245 * @type Point 2246 * @name Axis#point2 2247 */ 2248 point2: { // Default values for point2 if created by line 2249 needsRegularUpdate: false, 2250 visible: false 2251 }, 2252 2253 tabindex: -1, 2254 2255 /** 2256 * Attributes for the axis label. 2257 * 2258 * @type Label 2259 * @name Axis#label 2260 */ 2261 label: { 2262 position: 'lft', 2263 offset: [10, 10] 2264 } 2265 /**#@-*/ 2266 }, 2267 2268 /* special options for angle bisector of 3 points */ 2269 bisector: { 2270 /**#@+ 2271 * @visprop 2272 */ 2273 2274 strokeColor: '#000000', // Bisector line 2275 2276 /** 2277 * Attributes for the helper point of the bisector. 2278 * 2279 * @type Point 2280 * @name Bisector#point 2281 */ 2282 point: { // Bisector point 2283 visible: false, 2284 fixed: false, 2285 withLabel: false, 2286 name: '' 2287 } 2288 2289 /**#@-*/ 2290 }, 2291 2292 /* special options for the 2 bisectors of 2 lines */ 2293 bisectorlines: { 2294 /**#@+ 2295 * @visprop 2296 */ 2297 2298 /** 2299 * Attributes for first line. 2300 * 2301 * @type Line 2302 * @name Bisectorlines#line1 2303 */ 2304 line1: { // 2305 strokeColor: '#000000' 2306 }, 2307 2308 /** 2309 * Attributes for second line. 2310 * 2311 * @type Line 2312 * @name Bisectorlines#line2 2313 */ 2314 line2: { // 2315 strokeColor: '#000000' 2316 } 2317 2318 /**#@-*/ 2319 }, 2320 2321 /* special options for boxplot curves */ 2322 boxplot: { 2323 /**#@+ 2324 * @visprop 2325 */ 2326 2327 /** 2328 * Direction of the box plot: 'vertical' or 'horizontal' 2329 * 2330 * @type String 2331 * @name Boxplot#dir 2332 * @default: 'vertical' 2333 */ 2334 dir: 'vertical', 2335 2336 /** 2337 * Relative width of the maximum and minimum quantile 2338 * 2339 * @type Number 2340 * @name Boxplot#smallWidth 2341 * @default: 0.5 2342 */ 2343 smallWidth: 0.5, 2344 2345 strokeWidth: 2, 2346 strokeColor: Color.palette.blue, 2347 fillColor: Color.palette.blue, 2348 fillOpacity: 0.2, 2349 highlightStrokeWidth: 2, 2350 highlightStrokeColor: Color.palette.blue, 2351 highlightFillColor: Color.palette.blue, 2352 highlightFillOpacity: 0.1 2353 2354 /**#@-*/ 2355 }, 2356 2357 /* special button options */ 2358 button: { 2359 /**#@+ 2360 * @visprop 2361 */ 2362 2363 /** 2364 * Control the attribute "disabled" of the HTML button. 2365 * 2366 * @name disabled 2367 * @memberOf Button.prototype 2368 * 2369 * @type Boolean 2370 * @default false 2371 */ 2372 disabled: false, 2373 2374 display: 'html' 2375 2376 /**#@-*/ 2377 }, 2378 2379 /* special cardinal spline options */ 2380 cardinalspline: { 2381 /**#@+ 2382 * @visprop 2383 */ 2384 2385 /** 2386 * Controls if the data points of the cardinal spline when given as 2387 * arrays should be converted into {@link JXG.Points}. 2388 * 2389 * @name createPoints 2390 * @memberOf Cardinalspline.prototype 2391 * 2392 * @see Cardinalspline#points 2393 * 2394 * @type Boolean 2395 * @default true 2396 */ 2397 createPoints: true, 2398 2399 /** 2400 * If set to true, the supplied coordinates are interpreted as 2401 * [[x_0, y_0], [x_1, y_1], p, ...]. 2402 * Otherwise, if the data consists of two arrays of equal length, 2403 * it is interpreted as 2404 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 2405 * 2406 * @name isArrayOfCoordinates 2407 * @memberOf Cardinalspline.prototype 2408 * @type Boolean 2409 * @default false 2410 */ 2411 isArrayOfCoordinates: false, 2412 2413 /** 2414 * Attributes for the points generated by Cardinalspline in cases 2415 * {@link createPoints} is set to true 2416 * 2417 * @name points 2418 * @memberOf Cardinalspline.prototype 2419 * 2420 * @see Cardinalspline#createPoints 2421 * @type Object 2422 */ 2423 points: { 2424 strokeOpacity: 0.05, 2425 fillOpacity: 0.05, 2426 highlightStrokeOpacity: 1.0, 2427 highlightFillOpacity: 1.0, 2428 withLabel: false, 2429 name: '', 2430 fixed: false 2431 } 2432 2433 /**#@-*/ 2434 }, 2435 2436 /* special chart options */ 2437 chart: { 2438 /**#@+ 2439 * @visprop 2440 */ 2441 2442 chartStyle: 'line', 2443 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 2444 highlightcolors: null, 2445 fillcolor: null, 2446 highlightonsector: false, 2447 highlightbysize: false, 2448 2449 fillOpacity: 0.6, 2450 withLines: false, 2451 2452 label: { 2453 } 2454 /**#@-*/ 2455 }, 2456 2457 /* special html slider options */ 2458 checkbox: { 2459 /**#@+ 2460 * @visprop 2461 */ 2462 2463 /** 2464 * Control the attribute "disabled" of the HTML checkbox. 2465 * 2466 * @name disabled 2467 * @memberOf Checkbox.prototype 2468 * 2469 * @type Boolean 2470 * @default false 2471 */ 2472 disabled: false, 2473 2474 /** 2475 * Control the attribute "checked" of the HTML checkbox. 2476 * 2477 * @name checked 2478 * @memberOf Checkbox.prototype 2479 * 2480 * @type Boolean 2481 * @default false 2482 */ 2483 checked: false, 2484 2485 display: 'html' 2486 2487 /**#@-*/ 2488 }, 2489 2490 /*special circle options */ 2491 circle: { 2492 /**#@+ 2493 * @visprop 2494 */ 2495 2496 /** 2497 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 2498 * 2499 * @see JXG.GeometryElement#hasPoint 2500 * @name Circle#hasInnerPoints 2501 * @type Boolean 2502 * @default false 2503 */ 2504 hasInnerPoints: false, 2505 2506 fillColor: 'none', 2507 highlightFillColor: 'none', 2508 strokeColor: Color.palette.blue, 2509 highlightStrokeColor: '#c3d9ff', 2510 2511 /** 2512 * Attributes for center point. 2513 * 2514 * @type Point 2515 * @name Circle#center 2516 */ 2517 center: { 2518 visible: false, 2519 withLabel: false, 2520 fixed: false, 2521 2522 fillColor: Color.palette.red, 2523 strokeColor: Color.palette.red, 2524 highlightFillColor: '#c3d9ff', 2525 highlightStrokeColor: '#c3d9ff', 2526 2527 name: '' 2528 }, 2529 2530 /** 2531 * Attributes for center point. 2532 * 2533 * @type Point 2534 * @name Circle#center 2535 */ 2536 point2: { 2537 visible: false, 2538 withLabel: false, 2539 fixed: false, 2540 name: '' 2541 }, 2542 2543 /** 2544 * Attributes for circle label. 2545 * 2546 * @type Label 2547 * @name Circle#label 2548 */ 2549 label: { 2550 position: 'urt' 2551 } 2552 /**#@-*/ 2553 }, 2554 2555 /* special options for circumcircle of 3 points */ 2556 circumcircle: { 2557 /**#@+ 2558 * @visprop 2559 */ 2560 2561 fillColor: 'none', 2562 highlightFillColor: 'none', 2563 strokeColor: Color.palette.blue, 2564 highlightStrokeColor: '#c3d9ff', 2565 2566 /** 2567 * Attributes for center point. 2568 * 2569 * @type Point 2570 * @name Circumcircle#center 2571 */ 2572 center: { // center point 2573 visible: false, 2574 fixed: false, 2575 withLabel: false, 2576 fillColor: Color.palette.red, 2577 strokeColor: Color.palette.red, 2578 highlightFillColor: '#c3d9ff', 2579 highlightStrokeColor: '#c3d9ff', 2580 name: '' 2581 } 2582 /**#@-*/ 2583 }, 2584 2585 circumcirclearc: { 2586 /**#@+ 2587 * @visprop 2588 */ 2589 2590 fillColor: 'none', 2591 highlightFillColor: 'none', 2592 strokeColor: Color.palette.blue, 2593 highlightStrokeColor: '#c3d9ff', 2594 2595 /** 2596 * Attributes for center point. 2597 * 2598 * @type Point 2599 * @name CircumcircleArc#center 2600 */ 2601 center: { 2602 visible: false, 2603 withLabel: false, 2604 fixed: false, 2605 name: '' 2606 } 2607 /**#@-*/ 2608 }, 2609 2610 /* special options for circumcircle sector of 3 points */ 2611 circumcirclesector: { 2612 /**#@+ 2613 * @visprop 2614 */ 2615 2616 useDirection: true, 2617 fillColor: Color.palette.yellow, 2618 highlightFillColor: Color.palette.yellow, 2619 fillOpacity: 0.3, 2620 highlightFillOpacity: 0.3, 2621 strokeColor: Color.palette.blue, 2622 highlightStrokeColor: '#c3d9ff', 2623 2624 /** 2625 * Attributes for center point. 2626 * 2627 * @type Point 2628 * @name Circle#point 2629 */ 2630 point: { 2631 visible: false, 2632 fixed: false, 2633 withLabel: false, 2634 name: '' 2635 } 2636 /**#@-*/ 2637 }, 2638 2639 /* special conic options */ 2640 conic: { 2641 /**#@+ 2642 * @visprop 2643 */ 2644 2645 fillColor: 'none', 2646 highlightFillColor: 'none', 2647 strokeColor: Color.palette.blue, 2648 highlightStrokeColor: '#c3d9ff', 2649 2650 /** 2651 * Attributes for foci points. 2652 * 2653 * @type Point 2654 * @name Conic#foci 2655 */ 2656 foci: { 2657 // points 2658 fixed: false, 2659 visible: false, 2660 withLabel: false, 2661 name: '' 2662 }, 2663 2664 /** 2665 * Attributes for center point. 2666 * 2667 * @type Point 2668 * @name Conic#center 2669 */ 2670 center: { 2671 visible: false, 2672 withLabel: false, 2673 name: '' 2674 }, 2675 2676 /** 2677 * Attributes for five points defining the conic, if some of them are given as coordinates. 2678 * 2679 * @type Point 2680 * @name Conic#point 2681 */ 2682 point: { 2683 withLabel: false, 2684 name: '' 2685 }, 2686 2687 /** 2688 * Attributes for parabola line in case the line is given by two 2689 * points or coordinate pairs. 2690 * 2691 * @type Line 2692 * @name Conic#line 2693 */ 2694 line: { 2695 visible: false 2696 } 2697 2698 /**#@-*/ 2699 }, 2700 2701 /* special curve options */ 2702 curve: { 2703 strokeWidth: 1, 2704 strokeColor: Color.palette.blue, 2705 fillColor: 'none', 2706 fixed: true, 2707 2708 useQDT: false, 2709 2710 /**#@+ 2711 * @visprop 2712 */ 2713 2714 /** 2715 * The data points of the curve are not connected with straight lines but with bezier curves. 2716 * @name Curve#handDrawing 2717 * @type Boolean 2718 * @default false 2719 */ 2720 handDrawing: false, 2721 2722 /** 2723 * The curveType is set in {@link JXG.Curve#generateTerm} and used in {@link JXG.Curve#updateCurve}. 2724 * Possible values are <ul> 2725 * <li>'none'</li> 2726 * <li>'plot': Data plot</li> 2727 * <li>'parameter': we can not distinguish function graphs and parameter curves</li> 2728 * <li>'functiongraph': function graph</li> 2729 * <li>'polar'</li> 2730 * <li>'implicit' (not yet)</li></ul> 2731 * Only parameter and plot are set directly. Polar is set with {@link JXG.GeometryElement#setAttribute} only. 2732 * @name Curve#curveType 2733 * @type String 2734 * @default null 2735 */ 2736 curveType: null, 2737 2738 /** 2739 * Apply Ramer-Douglas-Peuker smoothing. 2740 * 2741 * @type Boolean 2742 * @name Curve#RDPsmoothing 2743 * @default false 2744 */ 2745 RDPsmoothing: false, // Apply the Ramer-Douglas-Peuker algorithm 2746 2747 /** 2748 * Number of points used for plotting triggered by up events 2749 * (i.e. high quality plotting) in case 2750 * {@link Curve#doAdvancedPlot} is false. 2751 * 2752 * @name Curve#numberPointsHigh 2753 * @see Curve#doAdvancedPlot 2754 * @type Number 2755 * @default 1600 2756 */ 2757 numberPointsHigh: 1600, // Number of points on curves after mouseUp 2758 2759 /** 2760 * Number of points used for plotting triggered by move events 2761 * (i.e. lower quality plotting but fast) in case 2762 * {@link Curve#doAdvancedPlot} is false. 2763 * 2764 * @name Curve#numberPointsLow 2765 * @see Curve#doAdvancedPlot 2766 * @type Number 2767 * @default 400 2768 */ 2769 numberPointsLow: 400, // Number of points on curves after mousemove 2770 2771 /** 2772 * If true use a recursive bisection algorithm. 2773 * It is slower, but usually the result is better. It tries to detect jumps 2774 * and singularities. 2775 * 2776 * @name Curve#doAdvancedPlot 2777 * @type Boolean 2778 * @default true 2779 */ 2780 doAdvancedPlot: true, 2781 2782 /** 2783 * 2784 * Recursion depth used for plotting triggered by up events 2785 * (i.e. high quality plotting) in case 2786 * {@link Curve#doAdvancedPlot} is true. 2787 * 2788 * @name Curve#recursionDepthHigh 2789 * @see Curve#doAdvancedPlot 2790 * @type Number 2791 * @default 17 2792 */ 2793 recursionDepthHigh: 17, 2794 2795 /** 2796 * Number of points used for plotting triggered by move events in case 2797 * (i.e. lower quality plotting but fast) 2798 * {@link Curve#doAdvancedPlot} is true. 2799 * 2800 * @name Curve#recursionDepthLow 2801 * @see Curve#doAdvancedPlot 2802 * @type Number 2803 * @default 13 2804 */ 2805 recursionDepthLow: 15, 2806 2807 /** 2808 * If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98. 2809 * 2810 * @name Curve#doAdvancedPlotOld 2811 * @see Curve#doAdvancedPlot 2812 * @type Boolean 2813 * @default false 2814 * @deprecated 2815 */ 2816 doAdvancedPlotOld: false, // v1 2817 2818 /** 2819 * Select the version of the plot algorithm. 2820 * <ul> 2821 * <li> Version 1 is very outdated 2822 * <li> Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0 2823 * <li> Version 3 is an internal version that was never published in a stable version. 2824 * <li> Version 4 is available since JSXGraph v1.2.0 2825 * </ul> 2826 * Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode) 2827 * 2828 * @example 2829 * var c = board.create('functiongraph', ["log(x)"]); 2830 * 2831 * @name Curve#plotVersion 2832 * @type Number 2833 * @default 2 2834 */ 2835 plotVersion: 2, 2836 2837 /** 2838 * Attributes for circle label. 2839 * 2840 * @type Label 2841 * @name Circle#label 2842 */ 2843 label: { 2844 position: 'lft' 2845 }, 2846 2847 /** 2848 * Configure arrow head at the start position for curve. 2849 * Recommended arrow head type is 7. 2850 * 2851 * @name Curve#firstArrow 2852 * @type Boolean / Object 2853 * @default false 2854 * @see Line#firstArrow for options 2855 */ 2856 firstArrow: false, 2857 2858 /** 2859 * Configure arrow head at the end position for curve. 2860 * Recommended arrow head type is 7. 2861 * 2862 * @name Curve#lastArrow 2863 * @see Line#lastArrow for options 2864 * @type Boolean / Object 2865 * @default false 2866 */ 2867 lastArrow: false 2868 2869 /**#@-*/ 2870 }, 2871 2872 /* special foreignObject options */ 2873 foreignobject: { 2874 2875 /**#@+ 2876 * @visprop 2877 */ 2878 attractors: [], 2879 fixed: true, 2880 visible: true 2881 2882 /**#@-*/ 2883 }, 2884 2885 glider: { 2886 /**#@+ 2887 * @visprop 2888 */ 2889 2890 label: {} 2891 /**#@-*/ 2892 }, 2893 2894 /* special grid options */ 2895 grid: { 2896 /**#@+ 2897 * @visprop 2898 */ 2899 2900 /* grid styles */ 2901 needsRegularUpdate: false, 2902 hasGrid: false, 2903 gridX: 1, 2904 gridY: 1, 2905 //strokeColor: '#c0c0c0', 2906 strokeColor: '#c0c0c0', 2907 strokeOpacity: 0.5, 2908 strokeWidth: 1, 2909 dash: 0, // dashed grids slow down the iPad considerably 2910 /* snap to grid options */ 2911 2912 /** 2913 * @deprecated 2914 */ 2915 snapToGrid: false, 2916 /** 2917 * @deprecated 2918 */ 2919 snapSizeX: 10, 2920 /** 2921 * @deprecated 2922 */ 2923 snapSizeY: 10 2924 2925 /**#@-*/ 2926 }, 2927 2928 group: { 2929 needsRegularUpdate: true 2930 }, 2931 2932 /* special html slider options */ 2933 htmlslider: { 2934 /**#@+ 2935 * @visprop 2936 */ 2937 2938 /** 2939 * 2940 * These affect the DOM element input type="range". 2941 * The other attributes affect the DOM element div containing the range element. 2942 */ 2943 widthRange: 100, 2944 widthOut: 34, 2945 step: 0.01, 2946 2947 frozen: true, 2948 isLabel: false, 2949 strokeColor: '#000000', 2950 display: 'html', 2951 anchorX: 'left', 2952 anchorY: 'middle', 2953 withLabel: false 2954 2955 /**#@-*/ 2956 }, 2957 2958 /* special image options */ 2959 image: { 2960 /**#@+ 2961 * @visprop 2962 */ 2963 2964 imageString: null, 2965 fillOpacity: 1.0, 2966 highlightFillOpacity: 0.6, 2967 2968 2969 /** 2970 * Defines the CSS class used by the image. CSS attributes defined in 2971 * this class will overwrite the corresponding JSXGraph attributes, e.g. 2972 * opacity. 2973 * The default CSS class is defined in jsxgraph.css. 2974 * 2975 * @name Image#cssClass 2976 * 2977 * @see Image#highlightCssClass 2978 * @type String 2979 * @default 'JXGimage' 2980 */ 2981 cssClass: 'JXGimage', 2982 2983 /** 2984 * Defines the CSS class used by the image when highlighted. 2985 * CSS attributes defined in this class will overwrite the 2986 * corresponding JSXGraph attributes, e.g. highlightFillOpacity. 2987 * The default CSS class is defined in jsxgraph.css. 2988 * 2989 * @name Image#highlightCssClass 2990 * 2991 * @see Image#cssClass 2992 * @type String 2993 * @default 'JXGimageHighlight' 2994 */ 2995 highlightCssClass: 'JXGimageHighlight', 2996 2997 /** 2998 * Image rotation in degrees. 2999 * 3000 * @name Image#rotate 3001 * @type Number 3002 * @default 0 3003 */ 3004 rotate: 0, 3005 3006 /** 3007 * Defines together with {@link Image#snapSizeY} the grid the image snaps on to. 3008 * The image will only snap on user coordinates which are 3009 * integer multiples to snapSizeX in x and snapSizeY in y direction. 3010 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3011 * of the default ticks of the default x axes of the board. 3012 * 3013 * @name Image#snapSizeX 3014 * 3015 * @see Point#snapToGrid 3016 * @see Image#snapSizeY 3017 * @see JXG.Board#defaultAxes 3018 * @type Number 3019 * @default 1 3020 */ 3021 snapSizeX: 1, 3022 3023 /** 3024 * Defines together with {@link Image#snapSizeX} the grid the image snaps on to. 3025 * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 3026 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3027 * of the default ticks of the default y axes of the board. 3028 * 3029 * @name Image#snapSizeY 3030 * 3031 * @see Point#snapToGrid 3032 * @see Image#snapSizeX 3033 * @see JXG.Board#defaultAxes 3034 * @type Number 3035 * @default 1 3036 */ 3037 snapSizeY: 1, 3038 3039 /** 3040 * List of attractor elements. If the distance of the image is less than 3041 * attractorDistance the image is made to glider of this element. 3042 * 3043 * @name Image#attractors 3044 * 3045 * @type Array 3046 * @default empty 3047 */ 3048 attractors: [] 3049 3050 /**#@-*/ 3051 }, 3052 3053 /* special options for incircle of 3 points */ 3054 incircle: { 3055 /**#@+ 3056 * @visprop 3057 */ 3058 3059 fillColor: 'none', 3060 highlightFillColor: 'none', 3061 strokeColor: Color.palette.blue, 3062 highlightStrokeColor: '#c3d9ff', 3063 3064 /** 3065 * Attributes of circle center. 3066 * 3067 * @type Point 3068 * @name Incircle#center 3069 */ 3070 center: { // center point 3071 visible: false, 3072 fixed: false, 3073 withLabel: false, 3074 fillColor: Color.palette.red, 3075 strokeColor: Color.palette.red, 3076 highlightFillColor: '#c3d9ff', 3077 highlightStrokeColor: '#c3d9ff', 3078 name: '' 3079 } 3080 /**#@-*/ 3081 }, 3082 3083 inequality: { 3084 /**#@+ 3085 * @visprop 3086 */ 3087 3088 fillColor: Color.palette.red, 3089 fillOpacity: 0.2, 3090 strokeColor: 'none', 3091 3092 /** 3093 * By default an inequality is less (or equal) than. Set inverse to <tt>true</tt> will consider the inequality 3094 * greater (or equal) than. 3095 * 3096 * @type Boolean 3097 * @default false 3098 * @name Inequality#inverse 3099 * @visprop 3100 */ 3101 inverse: false 3102 /**#@-*/ 3103 }, 3104 3105 infobox: { 3106 /**#@+ 3107 * @visprop 3108 */ 3109 3110 fontSize: 12, 3111 isLabel: false, 3112 strokeColor: '#bbbbbb', 3113 display: 'html', // 'html' or 'internal' 3114 anchorX: 'left', // 'left', 'middle', or 'right': horizontal alignment 3115 // of the text. 3116 anchorY: 'middle', // 'top', 'middle', or 'bottom': vertical alignment 3117 // of the text. 3118 cssClass: 'JXGinfobox', 3119 rotate: 0, // works for non-zero values only in combination 3120 // with display=='internal' 3121 visible: true, 3122 parse: false, 3123 transitionDuration: 0, 3124 needsRegularUpdate: false 3125 3126 /**#@-*/ 3127 }, 3128 3129 /* special options for integral */ 3130 integral: { 3131 /**#@+ 3132 * @visprop 3133 */ 3134 3135 axis: 'x', // 'x' or 'y' 3136 withLabel: true, // Show integral value as text 3137 fixed: true, 3138 strokeWidth: 0, 3139 strokeOpacity: 0, 3140 fillColor: Color.palette.red, 3141 fillOpacity: 0.3, 3142 highlightFillColor: Color.palette.red, 3143 highlightFillOpacity: 0.2, 3144 3145 /** 3146 * Attributes of the (left) starting point of the integral. 3147 * 3148 * @type Point 3149 * @name Integral#curveLeft 3150 * @see Integral#baseLeft 3151 */ 3152 curveLeft: { // Start point 3153 visible: true, 3154 withLabel: false, 3155 color: Color.palette.red, 3156 fillOpacity: 0.8, 3157 layer: 9 3158 }, 3159 3160 /** 3161 * Attributes of the (left) base point of the integral. 3162 * 3163 * @type Point 3164 * @name Integral#baseLeft 3165 * @see Integral#curveLeft 3166 */ 3167 baseLeft: { // Start point 3168 visible: false, 3169 fixed: false, 3170 withLabel: false, 3171 name: '' 3172 }, 3173 3174 /** 3175 * Attributes of the (right) end point of the integral. 3176 * 3177 * @type Point 3178 * @name Integral#curveRight 3179 * @see Integral#baseRight 3180 */ 3181 curveRight: { // End point 3182 visible: true, 3183 withLabel: false, 3184 color: Color.palette.red, 3185 fillOpacity: 0.8, 3186 layer: 9 3187 }, 3188 3189 /** 3190 * Attributes of the (right) base point of the integral. 3191 * 3192 * @type Point 3193 * @name Integral#baseRight 3194 * @see Integral#curveRight 3195 */ 3196 baseRight: { // End point 3197 visible: false, 3198 fixed: false, 3199 withLabel: false, 3200 name: '' 3201 }, 3202 3203 /** 3204 * Attributes for integral label. 3205 * 3206 * @type Label 3207 * @name Integral#label 3208 */ 3209 label: { 3210 fontSize: 20 3211 } 3212 /**#@-*/ 3213 }, 3214 3215 /* special input options */ 3216 input: { 3217 /**#@+ 3218 * @visprop 3219 */ 3220 3221 /** 3222 * Control the attribute "disabled" of the HTML input field. 3223 * 3224 * @name disabled 3225 * @memberOf Input.prototype 3226 * 3227 * @type Boolean 3228 * @default false 3229 */ 3230 disabled: false, 3231 3232 /** 3233 * Control the attribute "maxlength" of the HTML input field. 3234 * 3235 * @name maxlength 3236 * @memberOf Input.prototype 3237 * 3238 * @type Number 3239 * @default 524288 (as in HTML) 3240 */ 3241 maxlength: 524288, 3242 3243 display: 'html' 3244 3245 /**#@-*/ 3246 }, 3247 3248 /* special intersection point options */ 3249 intersection: { 3250 /**#@+ 3251 * @visprop 3252 */ 3253 3254 /** 3255 * Used in {@link JXG.Intersection}. 3256 * This flag sets the behaviour of intersection points of e.g. 3257 * two segments. If true, the intersection is treated as intersection of lines. If false 3258 * the intersection point exists if the segments intersect setwise. 3259 * 3260 * @name Intersection.alwaysIntersect 3261 * @type Boolean 3262 * @default true 3263 */ 3264 alwaysIntersect: true 3265 3266 /**#@-*/ 3267 }, 3268 3269 /* special label options */ 3270 label: { 3271 /**#@+ 3272 * @visprop 3273 */ 3274 3275 visible: 'inherit', 3276 strokeColor: '#000000', 3277 strokeOpacity: 1, 3278 highlightStrokeOpacity: 0.666666, 3279 highlightStrokeColor: '#000000', 3280 3281 fixed: true, 3282 3283 /** 3284 * Possible string values for the position of a label for 3285 * label anchor points are: 3286 * <ul> 3287 * <li> 'lft' 3288 * <li> 'rt' 3289 * <li> 'top' 3290 * <li> 'bot' 3291 * <li> 'ulft' 3292 * <li> 'urt' 3293 * <li> 'llft' 3294 * <li> 'lrt' 3295 * </ul> 3296 * This is relevant for non-points: line, circle, curve. 3297 * 3298 * The names have been borrowed from <a href="https://www.tug.org/metapost.html">MetaPost</a>. 3299 * 3300 * @name Label#position 3301 * @see Label#offset 3302 * @type String 3303 * @default 'urt' 3304 */ 3305 position: 'urt', 3306 3307 /** 3308 * Label offset from label anchor. 3309 * The label anchor is determined by {@link Label#position} 3310 * 3311 * @name Label#offset 3312 * @see Label#position 3313 * @type Array 3314 * @default [10,10] 3315 */ 3316 offset: [10, 10], 3317 3318 /** 3319 * Automatic position of label text. When called first, the positioning algorithm 3320 * starts at the position defined by offset. 3321 * The algorithm tries to find a position with the least number of 3322 * overlappings with other elements, while retaining the distance 3323 * to the anchor element. 3324 * 3325 * @name Label#autoPosition 3326 * @see Label#offset 3327 * @type Boolean 3328 * @default false 3329 * 3330 * @example 3331 * var p1 = board.create('point', [-2, 1], {id: 'A'}); 3332 * var p2 = board.create('point', [-0.85, 1], { 3333 * name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]} 3334 * }); 3335 * var p3 = board.create('point', [-1, 1.2], { 3336 * name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]} 3337 * }); 3338 * var c = board.create('circle', [p1, p2]); 3339 * var l = board.create('line', [p1, p2]); 3340 * 3341 * </pre><div id="JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2" class="jxgbox" style="width: 300px; height: 300px;"></div> 3342 * <script type="text/javascript"> 3343 * (function() { 3344 * var board = JXG.JSXGraph.initBoard('JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2', 3345 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 3346 * var p1 = board.create('point', [-2, 1], {id: 'A'}); 3347 * var p2 = board.create('point', [-0.85, 1], {name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}}); 3348 * var p3 = board.create('point', [-1, 1.2], {name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}}); 3349 * var c = board.create('circle', [p1, p2]); 3350 * var l = board.create('line', [p1, p2]); 3351 * 3352 * })(); 3353 * 3354 * </script><pre> 3355 * 3356 * 3357 */ 3358 autoPosition: false 3359 3360 /**#@-*/ 3361 }, 3362 3363 /* special legend options */ 3364 legend: { 3365 /** 3366 * @visprop 3367 */ 3368 3369 /** 3370 * Default style of a legend element. The only possible value is 'vertical'. 3371 * @name: Legend#style 3372 * @type String 3373 * @default 'vertical' 3374 */ 3375 style: 'vertical', 3376 3377 /** 3378 * Label names of a legend element. 3379 * @name: Legend#labels 3380 * @type Array 3381 * @default "['1', '2', '3', '4', '5', '6', '7', '8']" 3382 */ 3383 labels: ['1', '2', '3', '4', '5', '6', '7', '8'], 3384 3385 /** 3386 * (Circular) array of label colors. 3387 * @name: Legend#colors 3388 * @type Array 3389 * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']" 3390 */ 3391 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 3392 3393 /** 3394 * Height (in px) of one legend entry 3395 * @name: Legend#rowHeight 3396 * @type Number 3397 * @default 20 3398 * 3399 */ 3400 rowHeight: 20, 3401 3402 strokeWidth: 5 3403 3404 /**#@-*/ 3405 }, 3406 3407 /* special line options */ 3408 line: { 3409 /**#@+ 3410 * @visprop 3411 */ 3412 3413 /** 3414 * Configure the arrow head at the position of its first point or the corresponding 3415 * intersection with the canvas border 3416 * 3417 * In case firstArrow is an object it has the sub-attributes: 3418 * <pre> 3419 * { 3420 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 3421 * size: 6, // size of the arrow head. Default value is 6. 3422 * // This value is multiplied with the strokeWidth of the line 3423 * // Exception: for type=7 size is ignored 3424 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value 3425 * } 3426 * </pre> 3427 * type=7 is the default for curves if firstArrow: true 3428 * 3429 * @name Line#firstArrow 3430 * @see Line#lastArrow 3431 * @see Line#touchFirstPoint 3432 * @type Boolean / Object 3433 * @default false 3434 */ 3435 firstArrow: false, 3436 3437 /** 3438 * Configute the arrow head at the position of its second point or the corresponding 3439 * intersection with the canvas border. 3440 * 3441 * In case lastArrow is an object it has the sub-attributes: 3442 * <pre> 3443 * { 3444 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 3445 * size: 6, // size of the arrow head. Default value is 6. 3446 * // This value is multiplied with the strokeWidth of the line. 3447 * // Exception: for type=7 size is ignored 3448 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6. 3449 * } 3450 * </pre> 3451 * type=7 is the default for curves if lastArrow: true 3452 * 3453 * @example 3454 * var p1 = board.create('point', [-5, 2], {size:1}); 3455 * var p2 = board.create('point', [5, 2], {size:10}); 3456 * var li = board.create('segment', ['A','B'], 3457 * {name:'seg', 3458 * strokeColor:'#000000', 3459 * strokeWidth:1, 3460 * highlightStrokeWidth: 5, 3461 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 3462 * touchLastPoint: true, 3463 * firstArrow: {type: 3, size: 8} 3464 * }); 3465 * 3466 * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div> 3467 * <script type="text/javascript"> 3468 * (function() { 3469 * var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3', 3470 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 3471 * var p1 = board.create('point', [-5, 2], {size:1}); 3472 * var p2 = board.create('point', [5, 2], {size:10}); 3473 * var li = board.create('segment', ['A','B'], 3474 * {name:'seg', 3475 * strokeColor:'#000000', 3476 * strokeWidth:1, 3477 * highlightStrokeWidth: 5, 3478 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 3479 * touchLastPoint: true, 3480 * firstArrow: {type: 3, size: 8} 3481 * }); 3482 * 3483 * })(); 3484 * 3485 * </script> 3486 * 3487 * @name Line#lastArrow 3488 * @see Line#firstArrow 3489 * @see Line#touchLastPoint 3490 * @type Boolean / Object 3491 * @default false 3492 */ 3493 lastArrow: false, 3494 3495 3496 /** 3497 * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line 3498 * ends exactly at the border, if negative there is a margin to the inside, if positive the line 3499 * ends outside of the canvas (which is invisible). 3500 * 3501 * @name: Line#margin 3502 * @type Number 3503 * @default 0 3504 */ 3505 margin: 0, 3506 3507 /** 3508 * If true, line stretches infinitely in direction of its first point. 3509 * Otherwise it ends at point1. 3510 * 3511 * @name Line#straightFirst 3512 * @see Line#straightLast 3513 * @type Boolean 3514 * @default true 3515 */ 3516 straightFirst: true, 3517 3518 /** 3519 * If true, line stretches infinitely in direction of its second point. 3520 * Otherwise it ends at point2. 3521 * 3522 * @name Line#straightLast 3523 * @see Line#straightFirst 3524 * @type Boolean 3525 * @default true 3526 */ 3527 straightLast: true, 3528 3529 fillColor: 'none', // Important for VML on IE 3530 highlightFillColor: 'none', // Important for VML on IE 3531 strokeColor: Color.palette.blue, 3532 highlightStrokeColor: '#c3d9ff', 3533 withTicks: false, 3534 3535 /** 3536 * Attributes for first defining point of the line. 3537 * 3538 * @type Point 3539 * @name Line#point1 3540 */ 3541 point1: { // Default values for point1 if created by line 3542 visible: false, 3543 withLabel: false, 3544 fixed: false, 3545 name: '' 3546 }, 3547 3548 /** 3549 * Attributes for second defining point of the line. 3550 * 3551 * @type Point 3552 * @name Line#point2 3553 */ 3554 point2: { // Default values for point2 if created by line 3555 visible: false, 3556 withLabel: false, 3557 fixed: false, 3558 name: '' 3559 }, 3560 3561 /** 3562 * Attributes for ticks of the line. 3563 * 3564 * @type Ticks 3565 * @name Line#ticks 3566 */ 3567 ticks: { 3568 drawLabels: true, 3569 label: { 3570 offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts 3571 }, 3572 drawZero: false, 3573 insertTicks: false, 3574 minTicksDistance: 50, 3575 minorHeight: 4, // if <0: full width and height 3576 majorHeight: -1, // if <0: full width and height 3577 minorTicks: 4, 3578 defaultDistance: 1, 3579 strokeOpacity: 0.3, 3580 visible: 'inherit' 3581 }, 3582 3583 /** 3584 * Attributes for the line label. 3585 * 3586 * @type Label 3587 * @name Line#label 3588 */ 3589 label: { 3590 position: 'llft' 3591 }, 3592 3593 /** 3594 * If set to true, the point will snap to a grid defined by 3595 * {@link Point#snapSizeX} and {@link Point#snapSizeY}. 3596 * 3597 * @see Point#snapSizeX 3598 * @see Point#snapSizeY 3599 * @type Boolean 3600 * @name Line#snapToGrid 3601 * @default false 3602 */ 3603 snapToGrid: false, 3604 3605 /** 3606 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 3607 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 3608 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3609 * of the default ticks of the default x axes of the board. 3610 * 3611 * @see Point#snapToGrid 3612 * @see Point#snapSizeY 3613 * @see JXG.Board#defaultAxes 3614 * @type Number 3615 * @name Line#snapSizeX 3616 * @default 1 3617 */ 3618 snapSizeX: 1, 3619 3620 /** 3621 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 3622 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 3623 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3624 * of the default ticks of the default y axes of the board. 3625 * 3626 * @see Point#snapToGrid 3627 * @see Point#snapSizeX 3628 * @see JXG.Board#defaultAxes 3629 * @type Number 3630 * @name Line#snapSizeY 3631 * @default 1 3632 */ 3633 snapSizeY: 1, 3634 3635 /** 3636 * If set to true and {@link Line#firstArrow} is set to true, the arrow head will just touch 3637 * the circle line of the start point of the line. 3638 * 3639 * @see Line#firstArrow 3640 * @type Boolean 3641 * @name Line#touchFirstPoint 3642 * @default false 3643 */ 3644 touchFirstPoint: false, 3645 3646 /** 3647 * If set to true and {@link Line#lastArrow} is set to true, the arrow head will just touch 3648 * the circle line of the start point of the line. 3649 * @see Line#firstArrow 3650 * @type Boolean 3651 * @name Line#touchLastPoint 3652 * @default false 3653 */ 3654 touchLastPoint: false, 3655 3656 /** 3657 * Line endings (linecap) of a straight line. 3658 * Possible values are: 3659 * <ul> 3660 * <li> 'butt', 3661 * <li> 'round', 3662 * <li> 'square'. 3663 * </ul> 3664 * Not available for VML renderer. 3665 * [lineCap description] 3666 * @name Line#lineCap 3667 * @type String 3668 * @default 'butt' 3669 */ 3670 lineCap: 'butt' 3671 3672 3673 /**#@-*/ 3674 }, 3675 3676 /* special options for locus curves */ 3677 locus: { 3678 /**#@+ 3679 * @visprop 3680 */ 3681 3682 translateToOrigin: false, 3683 translateTo10: false, 3684 stretch: false, 3685 toOrigin: null, 3686 to10: null 3687 /**#@-*/ 3688 }, 3689 3690 /* special cardinal spline options */ 3691 metapostspline: { 3692 /**#@+ 3693 * @visprop 3694 */ 3695 3696 /** 3697 * Controls if the data points of the cardinal spline when given as 3698 * arrays should be converted into {@link JXG.Points}. 3699 * 3700 * @name createPoints 3701 * @memberOf Metapostspline.prototype 3702 * 3703 * @see Metapostspline#points 3704 * 3705 * @type Boolean 3706 * @default true 3707 */ 3708 createPoints: true, 3709 3710 /** 3711 * If set to true, the supplied coordinates are interpreted as 3712 * [[x_0, y_0], [x_1, y_1], p, ...]. 3713 * Otherwise, if the data consists of two arrays of equal length, 3714 * it is interpreted as 3715 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 3716 * 3717 * @name isArrayOfCoordinates 3718 * @memberOf Metapostspline.prototype 3719 * @type Boolean 3720 * @default false 3721 */ 3722 isArrayOfCoordinates: false, 3723 3724 /** 3725 * Attributes for the points generated by Metapostspline in cases 3726 * {@link createPoints} is set to true 3727 * 3728 * @name points 3729 * @memberOf Metapostspline.prototype 3730 * 3731 * @see Metapostspline#createPoints 3732 * @type Object 3733 */ 3734 points: { 3735 strokeOpacity: 0.05, 3736 fillOpacity: 0.05, 3737 highlightStrokeOpacity: 1.0, 3738 highlightFillOpacity: 1.0, 3739 withLabel: false, 3740 name: '', 3741 fixed: false 3742 } 3743 3744 /**#@-*/ 3745 }, 3746 3747 /* special mirrorelement options */ 3748 mirrorelement: { 3749 /**#@+ 3750 * @visprop 3751 */ 3752 3753 fixed: true, 3754 3755 /** 3756 * Attributes of mirror point, i.e. the point along which the element is mirrored. 3757 * 3758 * @type Point 3759 * @name mirrorelement#point 3760 */ 3761 point: {}, 3762 3763 /** 3764 * Attributes of circle center, i.e. the center of the circle, 3765 * if a circle is the mirror element and the transformation type is 'Euclidean' 3766 * 3767 * @type Point 3768 * @name mirrorelement#center 3769 */ 3770 center: {}, 3771 3772 /** 3773 * Type of transformation. Possible values are 'Euclidean', 'projective'. 3774 * 3775 * If the value is 'Euclidean', the mirror element of a circle is again a circle, 3776 * otherwise it is a conic section. 3777 * 3778 * @type String 3779 * @name mirrorelement#type 3780 * @default 'Euclidean' 3781 */ 3782 type: 'Euclidean' 3783 3784 /**#@-*/ 3785 }, 3786 3787 // /* special options for Msector of 3 points */ 3788 // msector: { 3789 // strokeColor: '#000000', // Msector line 3790 // point: { // Msector point 3791 // visible: false, 3792 // fixed: false, 3793 // withLabel: false, 3794 // name: '' 3795 // } 3796 // }, 3797 3798 /* special options for normal lines */ 3799 normal: { 3800 /**#@+ 3801 * @visprop 3802 */ 3803 3804 strokeColor: '#000000', // normal line 3805 3806 /** 3807 * Attributes of helper point of normal. 3808 * 3809 * @type Point 3810 * @name Normal#point 3811 */ 3812 point: { 3813 visible: false, 3814 fixed: false, 3815 withLabel: false, 3816 name: '' 3817 } 3818 /**#@-*/ 3819 }, 3820 3821 /* special options for orthogonal projection points */ 3822 orthogonalprojection: { 3823 /**#@+ 3824 * @visprop 3825 */ 3826 3827 3828 /**#@-*/ 3829 }, 3830 3831 /* special options for parallel lines */ 3832 parallel: { 3833 /**#@+ 3834 * @visprop 3835 */ 3836 3837 strokeColor: '#000000', // Parallel line 3838 3839 /** 3840 * Attributes of helper point of normal. 3841 * 3842 * @type Point 3843 * @name Parallel#point 3844 */ 3845 point: { 3846 visible: false, 3847 fixed: false, 3848 withLabel: false, 3849 name: '' 3850 }, 3851 3852 label: { 3853 position: 'llft' 3854 } 3855 /**#@-*/ 3856 }, 3857 3858 /* special perpendicular options */ 3859 perpendicular: { 3860 /**#@+ 3861 * @visprop 3862 */ 3863 3864 strokeColor: '#000000', // Perpendicular line 3865 straightFirst: true, 3866 straightLast: true 3867 /**#@-*/ 3868 }, 3869 3870 /* special perpendicular options */ 3871 perpendicularsegment: { 3872 /**#@+ 3873 * @visprop 3874 */ 3875 3876 strokeColor: '#000000', // Perpendicular segment 3877 straightFirst: false, 3878 straightLast: false, 3879 point: { // Perpendicular point 3880 visible: false, 3881 fixed: true, 3882 withLabel: false, 3883 name: '' 3884 } 3885 /**#@-*/ 3886 }, 3887 3888 /* special point options */ 3889 point: { 3890 /**#@+ 3891 * @visprop 3892 */ 3893 3894 withLabel: true, 3895 label: {}, 3896 3897 /** 3898 * This attribute was used to determined the point layout. It was derived from GEONExT and was 3899 * replaced by {@link Point#face} and {@link Point#size}. 3900 * 3901 * @name Point#style 3902 * 3903 * @see Point#face 3904 * @see Point#size 3905 * @type Number 3906 * @default 5 3907 * @deprecated 3908 */ 3909 style: 5, 3910 3911 /** 3912 * There are different point styles which differ in appearance. 3913 * Posssible values are 3914 * <table><tr><th>Value</th></tr> 3915 * <tr><td>cross</td></tr> 3916 * <tr><td>circle</td></tr> 3917 * <tr><td>square</td></tr> 3918 * <tr><td>plus</td></tr> 3919 * <tr><td>diamond</td></tr> 3920 * <tr><td>triangleUp</td></tr> 3921 * <tr><td>triangleDown</td></tr> 3922 * <tr><td>triangleLeft</td></tr> 3923 * <tr><td>triangleRight</td></tr> 3924 * </table> 3925 * 3926 * @name Point#face 3927 * 3928 * @type String 3929 * @see JXG.Point#setStyle 3930 * @default circle 3931 */ 3932 face: 'o', 3933 3934 /** 3935 * Size of a point, either in pixel or user coordinates. 3936 * Means radius resp. half the width of a point (depending on the face). 3937 * 3938 * @name Point#size 3939 * 3940 * @see Point#face 3941 * @see JXG.Point#setStyle 3942 * @see Point#sizeUnit 3943 * @type Number 3944 * @default 3 3945 */ 3946 size: 3, 3947 3948 /** 3949 * Unit for size. 3950 * Possible values are 'screen' and 'user. 3951 * 3952 * @name Point#sizeUnit 3953 * 3954 * @see Point#size 3955 * @type String 3956 * @default 'screen' 3957 */ 3958 sizeUnit: 'screen', 3959 3960 strokeWidth: 2, 3961 3962 fillColor: Color.palette.red, 3963 strokeColor: Color.palette.red, 3964 highlightFillColor:'#c3d9ff', 3965 highlightStrokeColor: '#c3d9ff', 3966 // strokeOpacity: 1.0, 3967 // fillOpacity: 1.0, 3968 // highlightFillOpacity: 0.5, 3969 // highlightStrokeOpacity: 0.5, 3970 3971 // fillColor: '#ff0000', 3972 // highlightFillColor: '#eeeeee', 3973 // strokeWidth: 2, 3974 // strokeColor: '#ff0000', 3975 // highlightStrokeColor: '#c3d9ff', 3976 3977 /** 3978 * If true, the point size changes on zoom events. 3979 * 3980 * @type Boolean 3981 * @name Point#zoom 3982 * @default false 3983 * 3984 */ 3985 zoom: false, // Change the point size on zoom 3986 3987 /** 3988 * If true, the infobox is shown on mouse/pen over, if false not. 3989 * If the value is 'inherit', the value of 3990 * {@link JXG.Board#showInfobox} is taken. 3991 * 3992 * @name Point#showInfobox 3993 * @see JXG.Board#showInfobox 3994 * @type {Boolean|String} true | false | 'inherit' 3995 * @default true 3996 */ 3997 showInfobox: 'inherit', 3998 3999 /** 4000 * Truncating rule for the digits in the infobox. 4001 * <ul> 4002 * <li>'auto': done automatically by JXG.autoDigits() 4003 * <li>'none': no truncation 4004 * <li>number: truncate after "number digits" with JXG.toFixed() 4005 * </ul> 4006 * 4007 * @name Point#infoboxDigits 4008 * 4009 * @type String, Number 4010 * @default 'auto' 4011 * @see JXG#autoDigits 4012 * @see JXG#toFixed 4013 */ 4014 infoboxDigits: 'auto', 4015 4016 draft: false, 4017 4018 /** 4019 * List of attractor elements. If the distance of the point is less than 4020 * attractorDistance the point is made to glider of this element. 4021 * 4022 * @name Point#attractors 4023 * 4024 * @type Array 4025 * @default empty 4026 */ 4027 attractors: [], 4028 4029 /** 4030 * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints. 4031 * Possible values are 'screen' and 'user'. 4032 * 4033 * @name Point#attractorUnit 4034 * 4035 * @see Point#attractorDistance 4036 * @see Point#snatchDistance 4037 * @see Point#snapToPoints 4038 * @see Point#attractors 4039 * @type String 4040 * @default 'user' 4041 */ 4042 attractorUnit: 'user', // 'screen', 'user' 4043 4044 /** 4045 * If the distance of the point to one of its attractors is less 4046 * than this number the point will be a glider on this 4047 * attracting element. 4048 * If set to zero nothing happens. 4049 * 4050 * @name Point#attractorDistance 4051 * 4052 * @type Number 4053 * @default 0.0 4054 */ 4055 attractorDistance: 0.0, 4056 4057 /** 4058 * If the distance of the point to one of its attractors is at least 4059 * this number the point will be released from being a glider on the 4060 * attracting element. 4061 * If set to zero nothing happens. 4062 * 4063 * @name Point#snatchDistance 4064 * 4065 * @type Number 4066 * @default 0.0 4067 */ 4068 snatchDistance: 0.0, 4069 4070 /** 4071 * If set to true, the point will snap to a grid of integer multiples of 4072 * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates). 4073 * <p> 4074 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 4075 * (given in user coordinates, not pixels) or are the intersection points 4076 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 4077 * 4078 * @name Point#snapToGrid 4079 * 4080 * @see Point#snapSizeX 4081 * @see Point#snapSizeY 4082 * @type Boolean 4083 * @default false 4084 */ 4085 snapToGrid: false, 4086 4087 /** 4088 * If set to true, the point will only snap to (possibly invisibly) grid points 4089 * when within {@link Point#attractorDistance} of such a grid point. 4090 * <p> 4091 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 4092 * (given in user coordinates, not pixels) or are the intersection points 4093 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 4094 * 4095 * @name Point#attractToGrid 4096 * 4097 * @see Point#attractorDistance 4098 * @see Point#attractorUnit 4099 * @see Point#snapToGrid 4100 * @see Point#snapSizeX 4101 * @see Point#snapSizeY 4102 * @type Boolean 4103 * @default false 4104 * 4105 * @example 4106 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 4107 * 4108 * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div> 4109 * <script type="text/javascript"> 4110 * (function() { 4111 * var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6', 4112 * {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false}); 4113 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 4114 * 4115 * })(); 4116 * 4117 * </script><pre> 4118 * 4119 */ 4120 attractToGrid: false, 4121 4122 /** 4123 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 4124 * It is given in user coordinates, not in pixels. 4125 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 4126 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 4127 * of the default ticks of the default x axes of the board. 4128 * 4129 * @name Point#snapSizeX 4130 * 4131 * @see Point#snapToGrid 4132 * @see Point#snapSizeY 4133 * @see JXG.Board#defaultAxes 4134 * @type Number 4135 * @default 1 4136 */ 4137 snapSizeX: 1, 4138 4139 /** 4140 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 4141 * It is given in user coordinates, not in pixels. 4142 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 4143 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 4144 * of the default ticks of the default y axes of the board. 4145 * 4146 * @name Point#snapSizeY 4147 * 4148 * @see Point#snapToGrid 4149 * @see Point#snapSizeX 4150 * @see JXG.Board#defaultAxes 4151 * @type Number 4152 * @default 1 4153 */ 4154 snapSizeY: 1, 4155 4156 /** 4157 * If set to true, the point will snap to the nearest point in distance of 4158 * {@link Point#attractorDistance}. 4159 * 4160 * @name Point#snapToPoints 4161 * 4162 * @see Point#attractorDistance 4163 * @type Boolean 4164 * @default false 4165 */ 4166 snapToPoints: false, 4167 4168 /** 4169 * List of elements which are ignored by snapToPoints. 4170 * @name Point#ignoredSnapToPoints 4171 * 4172 * @type Array 4173 * @default empty 4174 */ 4175 ignoredSnapToPoints: [] 4176 4177 /**#@-*/ 4178 }, 4179 4180 /* special polygon options */ 4181 polygon: { 4182 /**#@+ 4183 * @visprop 4184 */ 4185 4186 /** 4187 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 4188 * 4189 * @see JXG.GeometryElement#hasPoint 4190 * @name Polygon#hasInnerPoints 4191 * @type Boolean 4192 * @default false 4193 */ 4194 hasInnerPoints: false, 4195 4196 fillColor: Color.palette.yellow, 4197 highlightFillColor: Color.palette.yellow, 4198 // fillColor: '#00ff00', 4199 // highlightFillColor: '#00ff00', 4200 fillOpacity: 0.3, 4201 highlightFillOpacity: 0.2, 4202 4203 /** 4204 * Is the polygon bordered by lines? 4205 * 4206 * @type Boolean 4207 * @name Polygon#withLines 4208 * @default true 4209 */ 4210 withLines: true, 4211 4212 /** 4213 * Attributes for the polygon border lines. 4214 * 4215 * @type Line 4216 * @name Polygon#borders 4217 */ 4218 borders: { 4219 withLabel: false, 4220 strokeWidth: 1, 4221 highlightStrokeWidth: 1, 4222 // Polygon layer + 1 4223 layer: 5, 4224 label: { 4225 position: 'top' 4226 }, 4227 visible: 'inherit' 4228 }, 4229 4230 /** 4231 * Attributes for the polygon vertices. 4232 * 4233 * @type Point 4234 * @name Polygon#vertices 4235 */ 4236 vertices: { 4237 layer: 9, 4238 withLabel: false, 4239 name: '', 4240 strokeColor: Color.palette.red, 4241 fillColor: Color.palette.red, 4242 fixed: false, 4243 visible: 'inherit' 4244 }, 4245 4246 /** 4247 * Attributes for the polygon label. 4248 * 4249 * @type Label 4250 * @name Polygon#label 4251 */ 4252 label: { 4253 offset: [0, 0] 4254 } 4255 4256 /**#@-*/ 4257 }, 4258 4259 /* special polygonal chain options 4260 */ 4261 polygonalchain: { 4262 /**#@+ 4263 * @visprop 4264 */ 4265 4266 fillColor: 'none', 4267 highlightFillColor: 'none' 4268 4269 /**#@-*/ 4270 }, 4271 4272 /* special prescribed angle options 4273 * Not yet implemented. But angle.setAngle(val) is implemented. 4274 */ 4275 prescribedangle: { 4276 /**#@+ 4277 * @visprop 4278 */ 4279 4280 /** 4281 * Attributes for the helper point of the prescribed angle. 4282 * 4283 * @type Point 4284 * @name PrescribedAngle#anglePoint 4285 */ 4286 anglePoint: { 4287 size: 2, 4288 visible: false, 4289 withLabel: false 4290 } 4291 4292 /**#@-*/ 4293 }, 4294 4295 /* special reflection options */ 4296 reflection: { 4297 /**#@+ 4298 * @visprop 4299 */ 4300 4301 fixed: true, 4302 4303 /** 4304 * Attributes of circle center, i.e. the center of the circle, 4305 * if a circle is the mirror element and the transformation type is 'Euclidean' 4306 * 4307 * @type Point 4308 * @name mirrorelement#center 4309 */ 4310 center: {}, 4311 4312 /** 4313 * Type of transformation. Possible values are 'Euclidean', 'projective'. 4314 * 4315 * If the value is 'Euclidean', the reflected element of a circle is again a circle, 4316 * otherwise it is a conic section. 4317 * 4318 * @type String 4319 * @name reflection#type 4320 * @default 'Euclidean' 4321 */ 4322 type: 'Euclidean' 4323 4324 /**#@-*/ 4325 }, 4326 4327 /* special regular polygon options */ 4328 regularpolygon: { 4329 /**#@+ 4330 * @visprop 4331 */ 4332 4333 /** 4334 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 4335 * @see JXG.GeometryElement#hasPoint 4336 * 4337 * @name RegularPolygon#hasInnerPoints 4338 * @type Boolean 4339 * @default false 4340 */ 4341 hasInnerPoints: false, 4342 fillColor: Color.palette.yellow, 4343 highlightFillColor: Color.palette.yellow, 4344 fillOpacity: 0.3, 4345 highlightFillOpacity: 0.2, 4346 4347 /** 4348 * Is the polygon bordered by lines? 4349 * 4350 * @type Boolean 4351 * @name RegularPolygon#withLines 4352 * @default true 4353 */ 4354 withLines: true, 4355 4356 /** 4357 * Attributes for the polygon border lines. 4358 * 4359 * @type Line 4360 * @name RegularPolygon#borders 4361 */ 4362 borders: { 4363 withLabel: false, 4364 strokeWidth: 1, 4365 highlightStrokeWidth: 1, 4366 // Polygon layer + 1 4367 layer: 5, 4368 label: { 4369 position: 'top' 4370 } 4371 }, 4372 4373 /** 4374 * Attributes for the polygon vertices. 4375 * 4376 * @type Point 4377 * @name RegularPolygon#vertices 4378 */ 4379 vertices: { 4380 layer: 9, 4381 withLabel: true, 4382 strokeColor: Color.palette.red, 4383 fillColor: Color.palette.red, 4384 fixed: false 4385 }, 4386 4387 /** 4388 * Attributes for the polygon label. 4389 * 4390 * @type Label 4391 * @name Polygon#label 4392 */ 4393 label: { 4394 offset: [0, 0] 4395 } 4396 4397 /**#@-*/ 4398 }, 4399 4400 /* special options for riemann sums */ 4401 riemannsum: { 4402 /**#@+ 4403 * @visprop 4404 */ 4405 4406 withLabel: false, 4407 fillOpacity: 0.3, 4408 fillColor: Color.palette.yellow 4409 4410 /**#@-*/ 4411 }, 4412 4413 /* special sector options */ 4414 sector: { 4415 /**#@+ 4416 * @visprop 4417 */ 4418 4419 fillColor: Color.palette.yellow, 4420 highlightFillColor: Color.palette.yellow, 4421 // fillColor: '#00ff00', 4422 // highlightFillColor: '#00ff00', 4423 4424 fillOpacity: 0.3, 4425 highlightFillOpacity: 0.3, 4426 highlightOnSector: false, 4427 highlightStrokeWidth: 0, 4428 4429 /** 4430 * Type of sector. Possible values are 'minor', 'major', and 'auto'. 4431 * 4432 * @type String 4433 * @name Sector#selection 4434 * @default 'auto' 4435 */ 4436 selection: 'auto', 4437 4438 /** 4439 * Attributes for sub-element arc. It is only available, if the sector is defined by three points. 4440 * 4441 * @type Arc 4442 * @name Sector#arc 4443 * @default '{visible:false}' 4444 */ 4445 arc: { 4446 visible: false, 4447 fillColor: 'none' 4448 }, 4449 4450 /** 4451 * Attributes for helper point radiuspoint in case it is provided by coordinates. 4452 * 4453 * @type Point 4454 * @name Sector#radiusPoint 4455 */ 4456 radiusPoint: { 4457 visible: false, 4458 withLabel: false 4459 }, 4460 4461 /** 4462 * Attributes for helper point center in case it is provided by coordinates. 4463 * 4464 * @type Point 4465 * @name Sector#center 4466 */ 4467 center: { 4468 visible: false, 4469 withLabel: false 4470 }, 4471 4472 /** 4473 * Attributes for helper point anglepoint in case it is provided by coordinates. 4474 * 4475 * @type Point 4476 * @name Sector#anglePoint 4477 */ 4478 anglePoint: { 4479 visible: false, 4480 withLabel: false 4481 }, 4482 4483 /** 4484 * Attributes for the sector label. 4485 * 4486 * @type Label 4487 * @name Sector#label 4488 */ 4489 label: { 4490 offset: [0, 0], 4491 anchorX: 'auto', 4492 anchorY: 'auto' 4493 } 4494 4495 /**#@-*/ 4496 }, 4497 4498 /* special segment options */ 4499 segment: { 4500 /**#@+ 4501 * @visprop 4502 */ 4503 4504 label: { 4505 position: 'top' 4506 } 4507 /**#@-*/ 4508 }, 4509 4510 semicircle: { 4511 /**#@+ 4512 * @visprop 4513 */ 4514 4515 /** 4516 * Attributes for center point of the semicircle. 4517 * 4518 * @type Point 4519 * @name Semicircle#center 4520 */ 4521 center: { 4522 visible: false, 4523 withLabel: false, 4524 fixed: false, 4525 fillColor: Color.palette.red, 4526 strokeColor: Color.palette.red, 4527 highlightFillColor:'#eeeeee', 4528 highlightStrokeColor: Color.palette.red, 4529 name: '' 4530 } 4531 4532 /**#@-*/ 4533 }, 4534 4535 /* special slider options */ 4536 slider: { 4537 /**#@+ 4538 * @visprop 4539 */ 4540 4541 /** 4542 * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For 4543 * continuous results set this to <tt>-1</tt>. 4544 * 4545 * @memberOf Slider.prototype 4546 * @name snapWidth 4547 * @type Number 4548 */ 4549 snapWidth: -1, // -1 = deactivated 4550 4551 /** 4552 * The precision of the slider value displayed in the optional text. 4553 * Replaced by the attribute "digits". 4554 * 4555 * @memberOf Slider.prototype 4556 * @name precision 4557 * @type Number 4558 * @deprecated 4559 * @see Slider#digits 4560 * @default 2 4561 */ 4562 precision: 2, 4563 4564 /** 4565 * The number of digits of the slider value displayed in the optional text. 4566 * 4567 * @memberOf Slider.prototype 4568 * @name digits 4569 * @type Number 4570 * @default 2 4571 */ 4572 digits: 2, 4573 4574 firstArrow: false, 4575 lastArrow: false, 4576 4577 /** 4578 * Show slider ticks. 4579 * 4580 * @type Boolean 4581 * @name Slider#withTicks 4582 * @default true 4583 */ 4584 withTicks: true, 4585 4586 /** 4587 * Show slider label. 4588 * 4589 * @type Boolean 4590 * @name Slider#withLabel 4591 * @default true 4592 */ 4593 withLabel: true, 4594 4595 /** 4596 * If not null, this replaces the part "name = " in the slider label. 4597 * Possible types: string, number or function. 4598 * @type String 4599 * @name suffixLabel 4600 * @memberOf Slider.prototype 4601 * @default null 4602 * @see JXG.Slider#unitLabel 4603 * @see JXG.Slider#postLabel 4604 */ 4605 suffixLabel: null, 4606 4607 /** 4608 * If not null, this is appended to the value in the slider label. 4609 * Possible types: string, number or function. 4610 * @type String 4611 * @name unitLabel 4612 * @memberOf Slider.prototype 4613 * @default null 4614 * @see JXG.Slider#suffixLabel 4615 * @see JXG.Slider#postLabel 4616 */ 4617 unitLabel: null, 4618 4619 /** 4620 * If not null, this is appended to the value and to unitLabel in the slider label. 4621 * Possible types: string, number or function. 4622 * @type String 4623 * @name postLabel 4624 * @memberOf Slider.prototype 4625 * @default null 4626 * @see JXG.Slider#suffixLabel 4627 * @see JXG.Slider#unitLabel 4628 */ 4629 postLabel: null, 4630 4631 layer: 9, 4632 showInfobox: false, 4633 name: '', 4634 visible: true, 4635 strokeColor: '#000000', 4636 highlightStrokeColor: '#888888', 4637 fillColor: '#ffffff', 4638 highlightFillColor: 'none', 4639 4640 /** 4641 * Size of slider point. 4642 * 4643 * @type Number 4644 * @name Slider#size 4645 * @default 6 4646 * @see Point#size 4647 */ 4648 size: 6, 4649 4650 /** 4651 * Attributes for first (left) helper point defining the slider position. 4652 * 4653 * @type Point 4654 * @name Slider#point1 4655 */ 4656 point1: { 4657 needsRegularUpdate: false, 4658 showInfobox: false, 4659 withLabel: false, 4660 visible: false, 4661 fixed: true, 4662 name: '' 4663 }, 4664 4665 /** 4666 * Attributes for second (right) helper point defining the slider position. 4667 * 4668 * @type Point 4669 * @name Slider#point2 4670 */ 4671 point2: { 4672 needsRegularUpdate: false, 4673 showInfobox: false, 4674 withLabel: false, 4675 visible: false, 4676 fixed: true, 4677 name: '' 4678 }, 4679 4680 /** 4681 * Attributes for the base line of the slider. 4682 * 4683 * @type Line 4684 * @name Slider#baseline 4685 */ 4686 baseline: { 4687 needsRegularUpdate: false, 4688 visible: 'inherit', 4689 fixed: true, 4690 scalable: false, 4691 name: '', 4692 strokeWidth: 1, 4693 strokeColor: '#000000', 4694 highlightStrokeColor: '#888888' 4695 }, 4696 4697 /** 4698 * Attributes for the ticks of the base line of the slider. 4699 * 4700 * @type Ticks 4701 * @name Slider#ticks 4702 */ 4703 ticks: { 4704 needsRegularUpdate: false, 4705 fixed: true, 4706 4707 // Label drawing 4708 drawLabels: false, 4709 digits: 2, 4710 includeBoundaries: 1, 4711 drawZero: true, 4712 label: { 4713 offset: [-4, -14], 4714 display: 'internal' 4715 }, 4716 4717 minTicksDistance: 30, 4718 insertTicks: true, 4719 minorHeight: 4, // if <0: full width and height 4720 majorHeight: 5, // if <0: full width and height 4721 minorTicks: 0, 4722 defaultDistance: 1, 4723 strokeOpacity: 1, 4724 strokeWidth: 1, 4725 tickEndings: [0, 1], 4726 strokeColor: '#000000', 4727 visible: 'inherit' 4728 }, 4729 4730 /** 4731 * Attributes for the highlighting line of the slider. 4732 * 4733 * @type Line 4734 * @name Slider#highline 4735 */ 4736 highline: { 4737 strokeWidth: 3, 4738 visible: 'inherit', 4739 fixed: true, 4740 name: '', 4741 strokeColor: '#000000', 4742 highlightStrokeColor: '#888888' 4743 }, 4744 4745 /** 4746 * Attributes for the slider label. 4747 * 4748 * @type Label 4749 * @name Slider#label 4750 */ 4751 label: { 4752 visible: 'inherit', 4753 strokeColor: '#000000' 4754 }, 4755 4756 /** 4757 * If true, 'up' events on the baseline will trigger slider moves. 4758 * 4759 * @type: Boolean 4760 * @name Slider#moveOnUp 4761 * @default: true 4762 */ 4763 moveOnUp: true 4764 4765 /**#@-*/ 4766 }, 4767 4768 /* special options for comb */ 4769 comb: { 4770 /**#@+ 4771 * @visprop 4772 */ 4773 4774 /** 4775 * Frequency of comb elements. 4776 * 4777 * @type Number 4778 * @name Comb#frequency 4779 * @default 0.2 4780 */ 4781 frequency: 0.2, 4782 4783 /** 4784 * Width of the comb. 4785 * 4786 * @type Number 4787 * @name Comb#width 4788 * @default 0.4 4789 */ 4790 width: 0.4, 4791 4792 /** 4793 * Angle under which comb elements are positioned. 4794 * 4795 * @type Number 4796 * @name Comb#angle 4797 * @default 60 degrees 4798 */ 4799 angle: Math.PI / 3, 4800 4801 /** 4802 * Should the comb go right to left instead of left to right. 4803 * 4804 * @type Boolean 4805 * @name Comb#reverse 4806 * @default false 4807 */ 4808 reverse: false, 4809 4810 /** 4811 * Attributes for first defining point of the comb. 4812 * 4813 * @type Point 4814 * @name Comb#point1 4815 */ 4816 point1: { 4817 visible: false, 4818 withLabel: false, 4819 fixed: false, 4820 name: '' 4821 }, 4822 4823 /** 4824 * Attributes for second defining point of the comb. 4825 * 4826 * @type Point 4827 * @name Comb#point2 4828 */ 4829 point2: { 4830 visible: false, 4831 withLabel: false, 4832 fixed: false, 4833 name: '' 4834 }, 4835 4836 /** 4837 * Attributes for the curve displaying the comb. 4838 * 4839 * @type Curve 4840 * @name Comb#curve 4841 */ 4842 curve: { 4843 strokeWidth: 1, 4844 strokeColor: '#000000', 4845 fillColor: 'none' 4846 } 4847 }, 4848 4849 /* special options for slope triangle */ 4850 slopetriangle: { 4851 /**#@+ 4852 * @visprop 4853 */ 4854 4855 fillColor: Color.palette.red, 4856 fillOpacity: 0.4, 4857 highlightFillColor: Color.palette.red, 4858 highlightFillOpacity: 0.3, 4859 4860 borders: { 4861 lastArrow: { 4862 type: 1, 4863 size: 6 4864 } 4865 }, 4866 4867 /** 4868 * Attributes for the gliding helper point. 4869 * 4870 * @type Point 4871 * @name Slopetriangle#glider 4872 */ 4873 glider: { 4874 fixed: true, 4875 visible: false, 4876 withLabel: false 4877 }, 4878 4879 /** 4880 * Attributes for the base line. 4881 * 4882 * @type Line 4883 * @name Slopetriangle#baseline 4884 */ 4885 baseline: { 4886 visible: false, 4887 withLabel: false, 4888 name: '' 4889 }, 4890 4891 /** 4892 * Attributes for the base point. 4893 * 4894 * @type Point 4895 * @name Slopetriangle#basepoint 4896 */ 4897 basepoint: { 4898 visible: false, 4899 withLabel: false, 4900 name: '' 4901 }, 4902 4903 /** 4904 * Attributes for the tangent. 4905 * The tangent is constructed by slop triangle if the construction 4906 * is based on a glider, solely. 4907 * 4908 * @type Line 4909 * @name Slopetriangle#tangent 4910 */ 4911 tangent: { 4912 visible: false, 4913 withLabel: false, 4914 name: '' 4915 }, 4916 4917 /** 4918 * Attributes for the top point. 4919 * 4920 * @type Point 4921 * @name Slopetriangle#toppoint 4922 */ 4923 toppoint: { 4924 visible: false, 4925 withLabel: false, 4926 name: '' 4927 }, 4928 4929 /** 4930 * Attributes for the slope triangle label. 4931 * 4932 * @type Label 4933 * @name Slopetriangle#label 4934 */ 4935 label: { 4936 visible: true 4937 } 4938 /**#@-*/ 4939 }, 4940 4941 /* special options for step functions */ 4942 stepfunction: { 4943 /**#@+ 4944 * @visprop 4945 */ 4946 4947 /**#@-*/ 4948 }, 4949 4950 /* special tape measure options */ 4951 tapemeasure: { 4952 /**#@+ 4953 * @visprop 4954 */ 4955 4956 strokeColor: '#000000', 4957 strokeWidth: 2, 4958 highlightStrokeColor: '#000000', 4959 4960 /** 4961 * Show tape measure ticks. 4962 * 4963 * @type Boolean 4964 * @name Tapemeasure#withTicks 4965 * @default true 4966 */ 4967 withTicks: true, 4968 4969 /** 4970 * Show tape measure label. 4971 * 4972 * @type Boolean 4973 * @name Tapemeasure#withLabel 4974 * @default true 4975 */ 4976 withLabel: true, 4977 4978 /** 4979 * The precision of the tape measure value displayed in the optional text. 4980 * Replaced by the attribute digits 4981 * 4982 * @memberOf Tapemeasure.prototype 4983 * @name precision 4984 * @type Number 4985 * @deprecated 4986 * @see Tapemeasure#digits 4987 * @default 2 4988 */ 4989 precision: 2, 4990 4991 /** 4992 * The precision of the tape measure value displayed in the optional text. 4993 * @memberOf Tapemeasure.prototype 4994 * @name precision 4995 * @type Number 4996 * @default 2 4997 */ 4998 digits: 2, 4999 5000 /** 5001 * Attributes for first helper point defining the tape measure position. 5002 * 5003 * @type Point 5004 * @name Tapemeasure#point1 5005 */ 5006 point1: { 5007 visible: 'inherit', 5008 strokeColor: '#000000', 5009 fillColor: '#ffffff', 5010 fillOpacity: 0.0, 5011 highlightFillOpacity: 0.1, 5012 size: 6, 5013 snapToPoints: true, 5014 attractorUnit: 'screen', 5015 attractorDistance: 20, 5016 showInfobox: false, 5017 withLabel: false, 5018 name: '' 5019 }, 5020 5021 /** 5022 * Attributes for second helper point defining the tape measure position. 5023 * 5024 * @type Point 5025 * @name Tapemeasure#point2 5026 */ 5027 point2: { 5028 visible: 'inherit', 5029 strokeColor: '#000000', 5030 fillColor: '#ffffff', 5031 fillOpacity: 0.0, 5032 highlightFillOpacity: 0.1, 5033 size: 6, 5034 snapToPoints: true, 5035 attractorUnit: 'screen', 5036 attractorDistance: 20, 5037 showInfobox: false, 5038 withLabel: false, 5039 name: '' 5040 }, 5041 5042 /** 5043 * Attributes for the ticks of the tape measure. 5044 * 5045 * @type Ticks 5046 * @name Tapemeasure#ticks 5047 */ 5048 ticks: { 5049 drawLabels: false, 5050 drawZero: true, 5051 insertTicks: true, 5052 minorHeight: 8, 5053 majorHeight: 16, 5054 minorTicks: 4, 5055 tickEndings: [0, 1], 5056 defaultDistance: 0.1, 5057 strokeOpacity: 1, 5058 strokeWidth: 1, 5059 strokeColor: '#000000', 5060 visible: 'inherit' 5061 }, 5062 5063 /** 5064 * Attributes for the tape measure label. 5065 * 5066 * @type Label 5067 * @name Tapemeasure#label 5068 */ 5069 label: { 5070 position: 'top' 5071 } 5072 /**#@-*/ 5073 }, 5074 5075 /* special text options */ 5076 text: { 5077 /**#@+ 5078 * @visprop 5079 */ 5080 5081 /** 5082 * The font size in pixels. 5083 * 5084 * @name fontSize 5085 * @memberOf Text.prototype 5086 * @default 12 5087 * @type Number 5088 * @see Text#fontUnit 5089 */ 5090 fontSize: 12, 5091 5092 /** 5093 * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but 5094 * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful. 5095 * 5096 * @name fontUnit 5097 * @memberOf Text.prototype 5098 * @default 'px' 5099 * @type String 5100 * @see Text#fontSize 5101 * 5102 * @example 5103 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 5104 * 5105 * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div> 5106 * <script type="text/javascript"> 5107 * (function() { 5108 * var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9', 5109 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 5110 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 5111 * 5112 * })(); 5113 * 5114 * </script><pre> 5115 * 5116 */ 5117 fontUnit: 'px', 5118 5119 /** 5120 * Used to round texts given by a number. 5121 * 5122 * @name digits 5123 * @memberOf Text.prototype 5124 * @default 2 5125 * @type Number 5126 */ 5127 digits: 2, 5128 5129 /** 5130 * If set to true, the text is parsed and evaluated. 5131 * For labels parse==true results in converting names of the form k_a to subscripts. 5132 * If the text is given by string and parse==true, the string is parsed as 5133 * JessieCode expression. 5134 * 5135 * @name parse 5136 * @memberOf Text.prototype 5137 * @default true 5138 * @type Boolean 5139 */ 5140 parse: true, 5141 5142 /** 5143 * If set to true and caja's sanitizeHTML function can be found it 5144 * will be used to sanitize text output. 5145 * 5146 * @name useCaja 5147 * @memberOf Text.prototype 5148 * @default false 5149 * @type Boolean 5150 */ 5151 useCaja: false, 5152 5153 /** 5154 * If enabled, the text will be handled as label. Intended for internal use. 5155 * 5156 * @name isLabel 5157 * @memberOf Text.prototype 5158 * @default false 5159 * @type Boolean 5160 */ 5161 isLabel: false, 5162 5163 strokeColor: '#000000', 5164 highlightStrokeColor: '#000000', 5165 highlightStrokeOpacity: 0.666666, 5166 5167 /** 5168 * Default CSS properties of the HTML text element. 5169 * <p> 5170 * The CSS properties which are set here, are handed over to the style property 5171 * of the HTML text element. That means, they have higher property than any 5172 * CSS class. 5173 * <p> 5174 * If a property which is set here should be overruled by a CSS class 5175 * then this property should be removed here. 5176 * <p> 5177 * The reason, why this attribute should be kept to its default value at all, 5178 * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt> 5179 * will ignore the font-family if it is set in a CSS class. 5180 * It has to be set explicitly as style attribute. 5181 * <p> 5182 * In summary, the order of priorities from high to low is 5183 * <ol> 5184 * <li> JXG.Options.text.cssStyle 5185 * <li> JXG.Options.text.cssDefaultStyle 5186 * <li> JXG.Options.text.cssClass 5187 * </ol> 5188 * @example 5189 * If all texts should get its font-family from the default CSS class 5190 * before initializing the board 5191 * <pre> 5192 * JXG.Options.text.cssDefaultStyle = ''; 5193 * JXG.Options.text.highlightCssDefaultStyle = ''; 5194 * </pre> 5195 * should be called. 5196 * 5197 * @name cssDefaultStyle 5198 * @memberOf Text.prototype 5199 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 5200 * @type String 5201 * @see Text#highlightCssDefaultStyle 5202 * @see Text#cssStyle 5203 * @see Text#highlightCssStyle 5204 */ 5205 cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 5206 5207 /** 5208 * Default CSS properties of the HTML text element in case of highlighting. 5209 * <p> 5210 * The CSS properties which are set here, are handed over to the style property 5211 * of the HTML text element. That means, they have higher property than any 5212 * CSS class. 5213 * @example 5214 * If all texts should get its font-family from the default CSS class 5215 * before initializing the board 5216 * <pre> 5217 * JXG.Options.text.cssDefaultStyle = ''; 5218 * JXG.Options.text.highlightCssDefaultStyle = ''; 5219 * </pre> 5220 * should be called. 5221 * 5222 * @name highlightCssDefaultStyle 5223 * @memberOf Text.prototype 5224 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 5225 * @type String 5226 * @see Text#cssDefaultStyle 5227 * @see Text#cssStyle 5228 * @see Text#highlightCssStyle 5229 */ 5230 highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 5231 5232 /** 5233 * CSS properties of the HTML text element. 5234 * <p> 5235 * The CSS properties which are set here, are handed over to the style property 5236 * of the HTML text element. That means, they have higher property than any 5237 * CSS class. 5238 * 5239 * @name cssStyle 5240 * @memberOf Text.prototype 5241 * @default '' 5242 * @type String 5243 * @see Text#cssDefaultStyle 5244 * @see Text#highlightCssDefaultStyle 5245 * @see Text#highlightCssStyle 5246 */ 5247 cssStyle: '', 5248 5249 /** 5250 * CSS properties of the HTML text element in case of highlighting. 5251 * <p> 5252 * The CSS properties which are set here, are handed over to the style property 5253 * of the HTML text element. That means, they have higher property than any 5254 * CSS class. 5255 * 5256 * @name highlightCssStyle 5257 * @memberOf Text.prototype 5258 * @default '' 5259 * @type String 5260 * @see Text#cssDefaultStyle 5261 * @see Text#highlightCssDefaultStyle 5262 * @see Text#cssStyle 5263 */ 5264 highlightCssStyle: '', 5265 5266 /** 5267 * If true, the input will be given to ASCIIMathML before rendering. 5268 * 5269 * @name useASCIIMathML 5270 * @memberOf Text.prototype 5271 * @default false 5272 * @type Boolean 5273 */ 5274 useASCIIMathML: false, 5275 5276 /** 5277 * If true, MathJax will be used to render the input string. 5278 * Supports MathJax 2 as well as Mathjax 3. 5279 * It is recommended to use this option together with the option 5280 * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed 5281 * instead of two (e.g. \\alpha). 5282 * 5283 * @name useMathJax 5284 * @memberOf Text.prototype 5285 * @default false 5286 * @type Boolean 5287 * @see Text#parse 5288 * 5289 * @example 5290 * // Before loading MathJax, it has to be configured something like this: 5291 * window.MathJax = { 5292 * tex: { 5293 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 5294 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 5295 * packages: ['base', 'ams'] 5296 * }, 5297 * options: { 5298 * ignoreHtmlClass: 'tex2jax_ignore', 5299 * processHtmlClass: 'tex2jax_process' 5300 * } 5301 * }; 5302 * 5303 * // Display style 5304 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 5305 * fontSize: 15, color:'green', useMathJax: true}); 5306 * 5307 * // Inline style 5308 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 5309 * fontSize: 15, color:'green', useMathJax: true}); 5310 * 5311 * var A = board.create('point', [-2, 0]); 5312 * var B = board.create('point', [1, 0]); 5313 * var C = board.create('point', [0, 1]); 5314 * 5315 * var graph = board.create('ellipse', [A, B, C], { 5316 * fixed: true, 5317 * withLabel: true, 5318 * strokeColor: 'black', 5319 * strokeWidth: 2, 5320 * fillColor: '#cccccc', 5321 * fillOpacity: 0.3, 5322 * highlightStrokeColor: 'red', 5323 * highlightStrokeWidth: 3, 5324 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 5325 * label: {useMathJax: true} 5326 * }); 5327 * 5328 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 5329 * { 5330 * fontSize: 24, parse: false 5331 * }); 5332 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 5333 * { 5334 * fontSize: 24, useMathJax: true 5335 * }); 5336 * 5337 * </pre> 5338 * <script> 5339 * window.MathJax = { 5340 * tex: { 5341 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 5342 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 5343 * packages: ['base', 'ams'] 5344 * }, 5345 * options: { 5346 * ignoreHtmlClass: 'tex2jax_ignore', 5347 * processHtmlClass: 'tex2jax_process' 5348 * } 5349 * }; 5350 * </script> 5351 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 5352 * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div> 5353 * <script type="text/javascript"> 5354 * (function() { 5355 * var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9', 5356 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 5357 * // Display style 5358 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 5359 * fontSize: 15, color:'green', useMathJax: true}); 5360 * 5361 * // Inline style 5362 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 5363 * fontSize: 15, color:'green', useMathJax: true}); 5364 * 5365 * var A = board.create('point', [-2, 0]); 5366 * var B = board.create('point', [1, 0]); 5367 * var C = board.create('point', [0, 1]); 5368 * 5369 * var graph = board.create('ellipse', [A, B, C], { 5370 * fixed: true, 5371 * withLabel: true, 5372 * strokeColor: 'black', 5373 * strokeWidth: 2, 5374 * fillColor: '#cccccc', 5375 * fillOpacity: 0.3, 5376 * highlightStrokeColor: 'red', 5377 * highlightStrokeWidth: 3, 5378 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 5379 * label: {useMathJax: true} 5380 * }); 5381 * 5382 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 5383 * { 5384 * fontSize: 24, parse: false 5385 * }); 5386 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 5387 * { 5388 * fontSize: 24, useMathJax: true 5389 * }); 5390 * })(); 5391 * 5392 * </script><pre> 5393 * 5394 * 5395 * @example 5396 * // Load MathJax: 5397 * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script> 5398 * 5399 * // function and its derivative 5400 * var f1 = function(x) { return x * x * x; }, 5401 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 5402 * 5403 * A = board.create('glider', [0.5, f1(0.5), graph1], { 5404 * name: 'f(x)', 5405 * color: 'black', 5406 * face:'x', 5407 * fixed: true, 5408 * size: 3, 5409 * label: {offset: [-30, 10], fontSize: 15} 5410 * }), 5411 * B = board.create('glider', [0.7, f1(0.7), graph1], { 5412 * name: 'f(x+Δx)', 5413 * size: 3, 5414 * label: {offset: [-60, 10], fontSize: 15} 5415 * }), 5416 * 5417 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 5418 * a_h_segment = board.create('segment', [A, [ 5419 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5420 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5421 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 5422 * 5423 * b_v_segment = board.create('segment', [B, [ 5424 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5425 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5426 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 5427 * 5428 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 5429 * ], {visible: false}); 5430 * 5431 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 5432 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 5433 * }); 5434 * 5435 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 5436 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 5437 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 5438 * }); 5439 * 5440 * dval = board.create('text',[0.1, 0.8, 5441 * function(){ 5442 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 5443 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 5444 * }],{fontSize: 15, useMathJax: true}); 5445 * 5446 * </pre> 5447 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 5448 * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div> 5449 * <script type="text/javascript"> 5450 * (function() { 5451 * var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621', 5452 * {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false}); 5453 * // function and its derivative 5454 * var f1 = function(x) { return x * x * x; }, 5455 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 5456 * 5457 * A = board.create('glider', [0.5, f1(0.5), graph1], { 5458 * name: 'f(x)', 5459 * color: 'black', 5460 * face:'x', 5461 * fixed: true, 5462 * size: 3, 5463 * label: {offset: [-30, 10], fontSize: 15} 5464 * }), 5465 * B = board.create('glider', [0.7, f1(0.7), graph1], { 5466 * name: 'f(x+Δx)', 5467 * size: 3, 5468 * label: {offset: [-60, 10], fontSize: 15} 5469 * }), 5470 * 5471 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 5472 * a_h_segment = board.create('segment', [A, [ 5473 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5474 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5475 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 5476 * 5477 * b_v_segment = board.create('segment', [B, [ 5478 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5479 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5480 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 5481 * 5482 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 5483 * ], {visible: false}); 5484 * 5485 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 5486 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 5487 * }); 5488 * 5489 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 5490 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 5491 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 5492 * }); 5493 * 5494 * dval = board.create('text',[0.1, 0.8, 5495 * function(){ 5496 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 5497 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 5498 * }],{fontSize: 15, useMathJax: true}); 5499 * 5500 * })(); 5501 * 5502 * </script><pre> 5503 * 5504 * @example 5505 * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true}); 5506 * board.options.text.useMathjax = true; 5507 * 5508 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5509 * suffixlabel:'\\(t_1=\\)', 5510 * unitLabel: ' \\(\\text{ ms}\\)', 5511 * snapWidth:0.01}), 5512 * 5513 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5514 * text1 = board.create('text', [5, 1, function(){ 5515 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 5516 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 5517 * 5518 * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div> 5519 * <script type="text/javascript"> 5520 * (function() { 5521 * var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6', 5522 * {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false}); 5523 * board.options.text.useMathjax = true; 5524 * 5525 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5526 * suffixlabel:'\\(t_1=\\)', 5527 * unitLabel: ' \\(\\text{ ms}\\)', 5528 * snapWidth:0.01}), 5529 * 5530 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5531 * text1 = board.create('text', [5, 1, function(){ 5532 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 5533 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 5534 * 5535 * })(); 5536 * 5537 * </script><pre> 5538 * 5539 */ 5540 useMathJax: false, 5541 5542 /** 5543 * 5544 * If true, KaTeX will be used to render the input string. 5545 * For this feature, katex.min.js and katex.min.css have to be included. 5546 * <p> 5547 * The example below does not work, because there is a conflict with 5548 * the MathJax library which is used below. 5549 * </p> 5550 * 5551 * @name useKatex 5552 * @memberOf Text.prototype 5553 * @default false 5554 * @type Boolean 5555 * 5556 * 5557 * @example 5558 * JXG.Options.text.useKatex = true; 5559 * 5560 * const board = JXG.JSXGraph.initBoard('jxgbox', { 5561 * boundingbox: [-2, 5, 8, -5], axis:true 5562 * }); 5563 * 5564 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5565 * suffixlabel:'t_1=', 5566 * unitLabel: ' \\text{ ms}', 5567 * snapWidth:0.01}); 5568 * 5569 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5570 * text1 = board.create('text', [5, 1, function(){ 5571 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 5572 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 5573 * 5574 * </pre> 5575 * <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"> 5576 * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script> 5577 * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div> 5578 * <script type="text/javascript"> 5579 * (function() { 5580 * var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869', 5581 * {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false}); 5582 * board.options.useKatex = true; 5583 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5584 * suffixlabel:'t_1=', 5585 * unitLabel: ' \\text{ ms}', 5586 * snapWidth:0.01}); 5587 * 5588 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5589 * text1 = board.create('text', [5, 1, function(){ 5590 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 5591 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 5592 * 5593 * })(); 5594 * 5595 * </script><pre> 5596 */ 5597 useKatex: false, 5598 5599 /** 5600 * Determines the rendering method of the text. Possible values 5601 * include <tt>'html'</tt> and <tt>'internal</tt>. 5602 * 5603 * @name display 5604 * @memberOf Text.prototype 5605 * @default 'html' 5606 * @type String 5607 */ 5608 display: 'html', 5609 5610 /** 5611 * Anchor element {@link Point}, {@link Text} or {@link Image} of the text. If it exists, the coordinates of the text are relative 5612 * to this anchor element. 5613 * 5614 * @name anchor 5615 * @memberOf Text.prototype 5616 * @default null 5617 * @type Object 5618 */ 5619 anchor: null, 5620 5621 /** 5622 * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>, <tt>'middle'</tt>, and 5623 * <tt>'right'</tt>. 5624 * 5625 * @name anchorX 5626 * @memberOf Text.prototype 5627 * @default 'left' 5628 * @type String 5629 */ 5630 anchorX: 'left', 5631 5632 /** 5633 * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and 5634 * <tt>'bottom'</tt>. 5635 * 5636 * @name anchorY 5637 * @memberOf Text.prototype 5638 * @default 'auto' 5639 * @type String 5640 */ 5641 anchorY: 'middle', 5642 5643 /** 5644 * CSS class of the text in non-highlighted view. 5645 * 5646 * @name cssClass 5647 * @memberOf Text.prototype 5648 * @type String 5649 */ 5650 cssClass: 'JXGtext', 5651 5652 /** 5653 * CSS class of the text in highlighted view. 5654 * 5655 * @name highlightCssClass 5656 * @memberOf Text.prototype 5657 * @type String 5658 */ 5659 highlightCssClass: 'JXGtext', 5660 5661 /** 5662 * Sensitive area for dragging the text. 5663 * Possible values are 'all', or something else. 5664 * If set to 'small', a sensitivity margin at the right and left border is taken. 5665 * This may be extended to left, right, ... in the future. 5666 * 5667 * @name Text#dragArea 5668 * @type String 5669 * @default 'all' 5670 */ 5671 dragArea: 'all', 5672 5673 withLabel: false, 5674 5675 /** 5676 * Text rotation in degrees. 5677 * Works for non-zero values only in combination with display=='internal'. 5678 * 5679 * @name Text#rotate 5680 * @type Number 5681 * @default 0 5682 */ 5683 rotate: 0, 5684 5685 visible: true, 5686 5687 /** 5688 * Defines together with {@link Text#snapSizeY} the grid the text snaps on to. 5689 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 5690 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 5691 * of the default ticks of the default x axes of the board. 5692 * 5693 * @name snapSizeX 5694 * @memberOf Text.prototype 5695 * 5696 * @see Point#snapToGrid 5697 * @see Text#snapSizeY 5698 * @see JXG.Board#defaultAxes 5699 * @type Number 5700 * @default 1 5701 */ 5702 snapSizeX: 1, 5703 5704 /** 5705 * Defines together with {@link Text#snapSizeX} the grid the text snaps on to. 5706 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 5707 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 5708 * of the default ticks of the default y axes of the board. 5709 * 5710 * @name snapSizeY 5711 * @memberOf Text.prototype 5712 * 5713 * @see Point#snapToGrid 5714 * @see Text#snapSizeX 5715 * @see JXG.Board#defaultAxes 5716 * @type Number 5717 * @default 1 5718 */ 5719 snapSizeY: 1, 5720 5721 /** 5722 * List of attractor elements. If the distance of the text is less than 5723 * attractorDistance the text is made to glider of this element. 5724 * 5725 * @name attractors 5726 * @memberOf Text.prototype 5727 * @type Array 5728 * @default empty 5729 */ 5730 attractors: [] 5731 5732 /**#@-*/ 5733 }, 5734 5735 /* special options for trace curves */ 5736 tracecurve: { 5737 /**#@+ 5738 * @visprop 5739 */ 5740 strokeColor: '#000000', 5741 fillColor: 'none', 5742 5743 /** 5744 * The number of evaluated data points. 5745 * @memberOf Tracecurve.prototype 5746 * @default 100 5747 * @name numberPoints 5748 * @type Number 5749 */ 5750 numberPoints: 100 5751 5752 /**#@-*/ 5753 }, 5754 5755 /*special turtle options */ 5756 turtle: { 5757 /**#@+ 5758 * @visprop 5759 */ 5760 5761 strokeWidth: 1, 5762 fillColor: 'none', 5763 strokeColor: '#000000', 5764 5765 /** 5766 * Attributes for the turtle arrow. 5767 * 5768 * @type Curve 5769 * @name Turtle#arrow 5770 */ 5771 arrow: { 5772 strokeWidth: 2, 5773 withLabel: false, 5774 strokeColor: Color.palette.red, 5775 lastArrow: true 5776 } 5777 /**#@-*/ 5778 }, 5779 5780 /** 5781 * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties 5782 * to the same value. 5783 * It is used in {@link JXG.GeometryElement#setAttribute} and in 5784 * the constructor {@link JXG.GeometryElement}. 5785 * Attention: In Options.js abbreviations are not allowed. 5786 * @type Object 5787 * @name JXG.Options#shortcuts 5788 * 5789 */ 5790 shortcuts: { 5791 color: ['strokeColor', 'fillColor'], 5792 opacity: ['strokeOpacity', 'fillOpacity'], 5793 highlightColor: ['highlightStrokeColor', 'highlightFillColor'], 5794 highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'], 5795 strokeWidth: ['strokeWidth', 'highlightStrokeWidth'] 5796 } 5797 }; 5798 5799 /** 5800 * Holds all possible properties and the according validators for geometry elements. 5801 * A validator is either a function 5802 * which takes one parameter and returns true, if the value is valid for the property, 5803 * or it is false if no validator is required. 5804 */ 5805 JXG.Validator = (function () { 5806 var i, 5807 validatePixel = function (v) { 5808 return (/^[0-9]+px$/).test(v); 5809 }, 5810 validateDisplay = function (v) { 5811 return (v === 'html' || v === 'internal'); 5812 }, 5813 validateColor = function (v) { 5814 // for now this should do it... 5815 return Type.isString(v); 5816 }, 5817 validatePointFace = function (v) { 5818 return Type.exists(JXG.normalizePointFace(v)); 5819 }, 5820 validateInteger = function (v) { 5821 return (Math.abs(v - Math.round(v)) < Mat.eps); 5822 }, 5823 validateNotNegativeInteger = function (v) { 5824 return validateInteger(v) && v >= 0; 5825 }, 5826 validatePositiveInteger = function (v) { 5827 return validateInteger(v) && v > 0; 5828 }, 5829 validateScreenCoords = function (v) { 5830 return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]); 5831 }, 5832 validateRenderer = function (v) { 5833 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no'); 5834 }, 5835 validatePositive = function (v) { 5836 return v > 0; 5837 }, 5838 validateNotNegative = function (v) { 5839 return v >= 0; 5840 }, 5841 v = {}, 5842 validators = { 5843 attractorDistance: validateNotNegative, 5844 color: validateColor, 5845 defaultDistance: Type.isNumber, 5846 display: validateDisplay, 5847 doAdvancedPlot: false, 5848 draft: false, 5849 drawLabels: false, 5850 drawZero: false, 5851 face: validatePointFace, 5852 factor: Type.isNumber, 5853 fillColor: validateColor, 5854 fillOpacity: Type.isNumber, 5855 firstArrow: false, 5856 fontSize: validateInteger, 5857 dash: validateInteger, 5858 gridX: Type.isNumber, 5859 gridY: Type.isNumber, 5860 hasGrid: false, 5861 highlightFillColor: validateColor, 5862 highlightFillOpacity: Type.isNumber, 5863 highlightStrokeColor: validateColor, 5864 highlightStrokeOpacity: Type.isNumber, 5865 insertTicks: false, 5866 //: validateScreenCoords, 5867 lastArrow: false, 5868 layer: validateNotNegativeInteger, 5869 majorHeight: validateInteger, 5870 minorHeight: validateInteger, 5871 minorTicks: validateNotNegative, 5872 minTicksDistance: validatePositiveInteger, 5873 numberPointsHigh: validatePositiveInteger, 5874 numberPointsLow: validatePositiveInteger, 5875 opacity: Type.isNumber, 5876 radius: Type.isNumber, 5877 RDPsmoothing: false, 5878 renderer: validateRenderer, 5879 right: validatePixel, 5880 showCopyright: false, 5881 showInfobox: false, 5882 showNavigation: false, 5883 size: validateNotNegative, //validateInteger, 5884 snapSizeX: validatePositive, 5885 snapSizeY: validatePositive, 5886 snapWidth: Type.isNumber, 5887 snapToGrid: false, 5888 snatchDistance: validateNotNegative, 5889 straightFirst: false, 5890 straightLast: false, 5891 stretch: false, 5892 strokeColor: validateColor, 5893 strokeOpacity: Type.isNumber, 5894 strokeWidth: validateNotNegative, //validateInteger, 5895 takeFirst: false, 5896 takeSizeFromFile: false, 5897 to10: false, 5898 toOrigin: false, 5899 translateTo10: false, 5900 translateToOrigin: false, 5901 useASCIIMathML: false, 5902 useDirection: false, 5903 useMathJax: false, 5904 withLabel: false, 5905 withTicks: false, 5906 zoom: false 5907 }; 5908 5909 // this seems like a redundant step but it makes sure that 5910 // all properties in the validator object have lower case names 5911 // and the validator object is easier to read. 5912 for (i in validators) { 5913 if (validators.hasOwnProperty(i)) { 5914 v[i.toLowerCase()] = validators[i]; 5915 } 5916 } 5917 5918 return v; 5919 }()); 5920 5921 /** 5922 * All point faces can be defined with more than one name, e.g. a cross faced point can be given 5923 * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to 5924 * simplify if- and switch-clauses regarding point faces. The translation table is as follows: 5925 * <table> 5926 * <tr><th>Input</th><th>Output</th></tr> 5927 * <tr><td>cross, x</td><td>x</td></tr> 5928 * <tr><td>circle, o</td><td>o</td></tr> 5929 * <tr><td>square, []</td><td>[]</td></tr> 5930 * <tr><td>plus, +</td><td>+</td></tr> 5931 * <tr><td>diamond, <></td><td><></td></tr> 5932 * <tr><td>triangleup, a, ^</td><td>A</td></tr> 5933 * <tr><td>triangledown, v</td><td>v</td></tr> 5934 * <tr><td>triangleleft, <</td><td><</td></tr> 5935 * <tr><td>triangleright, ></td><td>></td></tr> 5936 * </table> 5937 * @param {String} s A string which should determine a valid point face. 5938 * @returns {String} Returns a normalized string or undefined if the given string is not a valid 5939 * point face. 5940 */ 5941 JXG.normalizePointFace = function (s) { 5942 var map = { 5943 cross: 'x', 5944 x: 'x', 5945 circle: 'o', 5946 o: 'o', 5947 square: '[]', 5948 '[]': '[]', 5949 plus: '+', 5950 '+': '+', 5951 diamond: '<>', 5952 '<>': '<>', 5953 triangleup: '^', 5954 a: '^', 5955 '^': '^', 5956 triangledown: 'v', 5957 v: 'v', 5958 triangleleft: '<', 5959 '<': '<', 5960 triangleright: '>', 5961 '>': '>' 5962 }; 5963 5964 return map[s]; 5965 }; 5966 5967 5968 /** 5969 * Apply the options stored in this object to all objects on the given board. 5970 * @param {JXG.Board} board The board to which objects the options will be applied. 5971 */ 5972 JXG.useStandardOptions = function (board) { 5973 var el, t, p, copyProps, 5974 o = JXG.Options, 5975 boardHadGrid = board.hasGrid; 5976 5977 board.options.grid.hasGrid = o.grid.hasGrid; 5978 board.options.grid.gridX = o.grid.gridX; 5979 board.options.grid.gridY = o.grid.gridY; 5980 board.options.grid.gridColor = o.grid.gridColor; 5981 board.options.grid.gridOpacity = o.grid.gridOpacity; 5982 board.options.grid.gridDash = o.grid.gridDash; 5983 board.options.grid.snapToGrid = o.grid.snapToGrid; 5984 board.options.grid.snapSizeX = o.grid.SnapSizeX; 5985 board.options.grid.snapSizeY = o.grid.SnapSizeY; 5986 board.takeSizeFromFile = o.takeSizeFromFile; 5987 5988 copyProps = function (p, o) { 5989 p.visProp.fillcolor = o.fillColor; 5990 p.visProp.highlightfillcolor = o.highlightFillColor; 5991 p.visProp.strokecolor = o.strokeColor; 5992 p.visProp.highlightstrokecolor = o.highlightStrokeColor; 5993 }; 5994 5995 for (el in board.objects) { 5996 if (board.objects.hasOwnProperty(el)) { 5997 p = board.objects[el]; 5998 if (p.elementClass === Const.OBJECT_CLASS_POINT) { 5999 copyProps(p, o.point); 6000 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) { 6001 copyProps(p, o.line); 6002 6003 for (t = 0; t < p.ticks.length; t++) { 6004 p.ticks[t].majorTicks = o.line.ticks.majorTicks; 6005 p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance; 6006 p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight; 6007 p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight; 6008 } 6009 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) { 6010 copyProps(p, o.circle); 6011 } else if (p.type === Const.OBJECT_TYPE_ANGLE) { 6012 copyProps(p, o.angle); 6013 } else if (p.type === Const.OBJECT_TYPE_ARC) { 6014 copyProps(p, o.arc); 6015 } else if (p.type === Const.OBJECT_TYPE_POLYGON) { 6016 copyProps(p, o.polygon); 6017 } else if (p.type === Const.OBJECT_TYPE_CONIC) { 6018 copyProps(p, o.conic); 6019 } else if (p.type === Const.OBJECT_TYPE_CURVE) { 6020 copyProps(p, o.curve); 6021 } else if (p.type === Const.OBJECT_TYPE_SECTOR) { 6022 p.arc.visProp.fillcolor = o.sector.fillColor; 6023 p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor; 6024 p.arc.visProp.fillopacity = o.sector.fillOpacity; 6025 p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity; 6026 } 6027 } 6028 } 6029 6030 board.fullUpdate(); 6031 if (boardHadGrid && !board.hasGrid) { 6032 board.removeGrids(board); 6033 } else if (!boardHadGrid && board.hasGrid) { 6034 board.create('grid', []); 6035 } 6036 }; 6037 6038 /** 6039 * Converts all color values to greyscale and calls useStandardOption to put them onto the board. 6040 * @param {JXG.Board} board The board to which objects the options will be applied. 6041 * @see #useStandardOptions 6042 */ 6043 JXG.useBlackWhiteOptions = function (board) { 6044 var o = JXG.Options; 6045 o.point.fillColor = Color.rgb2bw(o.point.fillColor); 6046 o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor); 6047 o.point.strokeColor = Color.rgb2bw(o.point.strokeColor); 6048 o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor); 6049 6050 o.line.fillColor = Color.rgb2bw(o.line.fillColor); 6051 o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor); 6052 o.line.strokeColor = Color.rgb2bw(o.line.strokeColor); 6053 o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor); 6054 6055 o.circle.fillColor = Color.rgb2bw(o.circle.fillColor); 6056 o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor); 6057 o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor); 6058 o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor); 6059 6060 o.arc.fillColor = Color.rgb2bw(o.arc.fillColor); 6061 o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor); 6062 o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor); 6063 o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor); 6064 6065 o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor); 6066 o.polygon.highlightFillColor = Color.rgb2bw(o.polygon.highlightFillColor); 6067 6068 o.sector.fillColor = Color.rgb2bw(o.sector.fillColor); 6069 o.sector.highlightFillColor = Color.rgb2bw(o.sector.highlightFillColor); 6070 6071 o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor); 6072 o.grid.gridColor = Color.rgb2bw(o.grid.gridColor); 6073 6074 JXG.useStandardOptions(board); 6075 }; 6076 6077 // needs to be exported 6078 JXG.Options.normalizePointFace = JXG.normalizePointFace; 6079 6080 return JXG.Options; 6081 }); 6082