1 /* 2 Copyright 2008-2021 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: '\u26f6', // '\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 * 1761 * @type Number 1762 * @name Ticks#precision 1763 * @see Ticks#maxLabelLength 1764 * @default 3 1765 */ 1766 precision: 3, 1767 1768 /** 1769 * The default distance between two ticks. Please be aware that this value does not have 1770 * to be used if {@link Ticks#insertTicks} is set to true. 1771 * 1772 * @type Number 1773 * @name Ticks#ticksDistance 1774 * @see Ticks#insertTicks 1775 * @default 1 1776 */ 1777 ticksDistance: 1, 1778 1779 /** 1780 * Tick face for ticks of finite length. By default (face: '|') this is a straight line. 1781 * Possible other values are '<' and '>'. These faces are used in 1782 * {@link JXG.Hatch} for hatch marking parallel lines. 1783 * @type String 1784 * @name{Ticks#face} 1785 * @see hatch 1786 * @default '|' 1787 * @example 1788 * var p1 = board.create('point', [0, 3]); 1789 * var p2 = board.create('point', [1, 3]); 1790 * var l1 = board.create('line', [p1, p2]); 1791 * var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'}); 1792 * 1793 * </pre><div id="JXG950a568a-1264-4e3a-b61d-b6881feecf4b" class="jxgbox" style="width: 300px; height: 300px;"></div> 1794 * <script type="text/javascript"> 1795 * (function() { 1796 * var board = JXG.JSXGraph.initBoard('JXG950a568a-1264-4e3a-b61d-b6881feecf4b', 1797 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1798 * var p1 = board.create('point', [0, 3]); 1799 * var p2 = board.create('point', [1, 3]); 1800 * var l1 = board.create('line', [p1, p2]); 1801 * var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>'}); 1802 * 1803 * })(); 1804 * 1805 * </script><pre> 1806 * 1807 */ 1808 face: '|', 1809 1810 strokeOpacity: 1, 1811 strokeWidth: 1, 1812 strokeColor: '#000000', 1813 highlightStrokeColor: '#888888', 1814 fillColor: 'none', 1815 highlightFillColor: 'none', 1816 visible: 'inherit', 1817 1818 /** 1819 * Whether line boundaries should be counted or not in the lower and upper bounds when 1820 * creating ticks. 1821 * 1822 * @type Boolean 1823 * @name Ticks#includeBoundaries 1824 * @default false 1825 */ 1826 includeBoundaries: false, 1827 1828 /** 1829 * Set the ticks type. 1830 * Possible values are 'linear' or 'polar'. 1831 * 1832 * @type String 1833 * @name Ticks#type 1834 * @default 'linear' 1835 */ 1836 type: 'linear' 1837 1838 // close the meta tag 1839 /**#@-*/ 1840 }, 1841 1842 /* 1843 * Generic options used by {@link JXG.Hatch} 1844 */ 1845 hatch: { 1846 drawLabels: false, 1847 drawZero: true, 1848 majorHeight: 20, 1849 anchor: 'middle', 1850 face: '|', 1851 strokeWidth: 2, 1852 strokeColor: Color.palette.blue, 1853 ticksDistance: 0.2 1854 }, 1855 1856 /** 1857 * Precision options, defining how close a pointer device (mouse, finger, pen) has to be 1858 * to an object such that the object is highlighted or can be dragged. 1859 * These values are board-wide and can be overwritten for individual elements by 1860 * changing their precision attribute. 1861 * 1862 * The default values are 1863 * <pre> 1864 * JXG.Options.precision: { 1865 * touch: 30, 1866 * touchMax: 100, 1867 * mouse: 4, 1868 * pen: 4, 1869 * epsilon: 0.0001, 1870 * hasPoint: 4 1871 * } 1872 * </pre> 1873 * 1874 * @type Object 1875 * @name JXG.Options#precision 1876 * @see JXG.GeometryElement#precision 1877 */ 1878 precision: { 1879 touch: 30, 1880 touchMax: 100, 1881 mouse: 4, 1882 pen: 4, 1883 epsilon: 0.0001, // Unused 1884 hasPoint: 4 1885 }, 1886 1887 /** 1888 * Default ordering of the layers. 1889 * The numbering starts from 0 and the highest layer number is numlayers-1. 1890 * 1891 * The default values are 1892 * <pre> 1893 * JXG.Options.layer: { 1894 * numlayers: 20, // only important in SVG 1895 * text: 9, 1896 * point: 9, 1897 * glider: 9, 1898 * arc: 8, 1899 * line: 7, 1900 * circle: 6, 1901 * curve: 5, 1902 * turtle: 5, 1903 * polygon: 3, 1904 * sector: 3, 1905 * angle: 3, 1906 * integral: 3, 1907 * axis: 2, 1908 * ticks: 2, 1909 * grid: 1, 1910 * image: 0, 1911 * trace: 0 1912 * } 1913 * </pre> 1914 * @type Object 1915 * @name JXG.Options#layer 1916 */ 1917 layer: { 1918 numlayers: 20, // only important in SVG 1919 unused9: 19, 1920 unused8: 18, 1921 unused7: 17, 1922 unused6: 16, 1923 unused5: 15, 1924 unused4: 14, 1925 unused3: 13, 1926 unused2: 12, 1927 unused1: 11, 1928 unused0: 10, 1929 text: 9, 1930 point: 9, 1931 glider: 9, 1932 arc: 8, 1933 line: 7, 1934 circle: 6, 1935 curve: 5, 1936 turtle: 5, 1937 polygon: 3, 1938 sector: 3, 1939 angle: 3, 1940 integral: 3, 1941 axis: 2, 1942 ticks: 2, 1943 grid: 1, 1944 image: 0, 1945 trace: 0 1946 }, 1947 1948 /* special angle options */ 1949 angle: { 1950 /**#@+ 1951 * @visprop 1952 */ 1953 1954 withLabel: true, 1955 1956 /** 1957 * Radius of the sector, displaying the angle. 1958 * The radius can be given as number (in user coordinates) 1959 * or as string 'auto'. In the latter case, the angle 1960 * is set to an value between 20 and 50 px. 1961 * 1962 * @type {Number|String} 1963 * @name Angle#radius 1964 * @default 'auto' 1965 * @visprop 1966 */ 1967 radius: 'auto', 1968 1969 /** 1970 * Display type of the angle field. Possible values are 1971 * 'sector' or 'sectordot' or 'square' or 'none'. 1972 * 1973 * @type String 1974 * @default 'sector' 1975 * @name Angle#type 1976 * @visprop 1977 */ 1978 type: 'sector', 1979 1980 /** 1981 * Display type of the angle field in case of a right angle. Possible values are 1982 * 'sector' or 'sectordot' or 'square' or 'none'. 1983 * 1984 * @type String 1985 * @default square 1986 * @name Angle#orthoType 1987 * @see Angle#orthoSensitivity 1988 * @visprop 1989 */ 1990 orthoType: 'square', 1991 1992 /** 1993 * Sensitivity (in degrees) to declare an angle as right angle. 1994 * If the angle measure is inside this distance from a rigth angle, the orthoType 1995 * of the angle is used for display. 1996 * 1997 * @type Number 1998 * @default 1.0 1999 * @name Angle#orthoSensitivity 2000 * @see Angle#orthoType 2001 * @visprop 2002 */ 2003 orthoSensitivity: 1.0, 2004 2005 fillColor: Color.palette.orange, 2006 highlightFillColor: Color.palette.orange, 2007 strokeColor: Color.palette.orange, 2008 // fillColor: '#ff7f00', 2009 // highlightFillColor: '#ff7f00', 2010 // strokeColor: '#ff7f00', 2011 2012 fillOpacity: 0.3, 2013 highlightFillOpacity: 0.3, 2014 2015 /** 2016 * @deprecated 2017 */ 2018 radiuspoint: { 2019 withLabel: false, 2020 visible: false, 2021 name: '' 2022 }, 2023 2024 /** 2025 * @deprecated 2026 */ 2027 pointsquare: { 2028 withLabel: false, 2029 visible: false, 2030 name: '' 2031 }, 2032 2033 dot: { 2034 visible: false, 2035 strokeColor: 'none', 2036 fillColor: '#000000', 2037 size: 2, 2038 face: 'o', 2039 withLabel: false, 2040 name: '' 2041 }, 2042 2043 label: { 2044 position: 'top', 2045 offset: [0, 0], 2046 strokeColor: Color.palette.blue 2047 }, 2048 2049 /** 2050 * Attributes for sub-element arc. In general, the arc will run through the first point and 2051 * thus will not have the same radius as the angle sector. 2052 * 2053 * @type Arc 2054 * @name Angle#arc 2055 * @default '{visible:false}' 2056 */ 2057 arc: { 2058 visible: false, 2059 fillColor: 'none' 2060 }, 2061 2062 /**#@-*/ 2063 }, 2064 2065 /* special arc options */ 2066 arc: { 2067 /**#@+ 2068 * @visprop 2069 */ 2070 2071 /** 2072 * Type of arc. Possible values are 'minor', 'major', and 'auto'. 2073 * 2074 * @type String 2075 * @name Arc#selection 2076 * @default 'auto' 2077 */ 2078 selection: 'auto', 2079 2080 /** 2081 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 2082 * 2083 * @see JXG.GeometryElement#hasPoint 2084 * @name Arc#hasInnerPoints 2085 * @type Boolean 2086 * @default false 2087 */ 2088 hasInnerPoints: false, 2089 2090 label: { 2091 anchorX: 'auto', 2092 anchorY: 'auto' 2093 }, 2094 firstArrow: false, 2095 lastArrow: false, 2096 fillColor: 'none', 2097 highlightFillColor: 'none', 2098 strokeColor: Color.palette.blue, 2099 highlightStrokeColor: '#c3d9ff', 2100 useDirection: false, 2101 2102 /** 2103 * Attributes for center point. 2104 * 2105 * @type Point 2106 * @name Arc#center 2107 */ 2108 center: { 2109 }, 2110 2111 /** 2112 * Attributes for radius point. 2113 * 2114 * @type Point 2115 * @name Arc#radiusPoint 2116 */ 2117 radiusPoint: { 2118 }, 2119 2120 /** 2121 * Attributes for angle point. 2122 * 2123 * @type Point 2124 * @name Arc#anglePoint 2125 */ 2126 anglePoint: { 2127 } 2128 2129 /**#@-*/ 2130 }, 2131 2132 /* special arrow options */ 2133 arrow: { 2134 /**#@+ 2135 * @visprop 2136 */ 2137 2138 firstArrow: false, 2139 2140 lastArrow: { 2141 type: 1, 2142 highlightSize: 6, 2143 size: 6 2144 } 2145 2146 /**#@-*/ 2147 }, 2148 2149 /* special axis options */ 2150 axis: { 2151 /**#@+ 2152 * @visprop 2153 */ 2154 2155 name: '', // By default, do not generate names for axes. 2156 needsRegularUpdate: false, // Axes only updated after zooming and moving of the origin. 2157 strokeWidth: 1, 2158 lastArrow: { 2159 type: 1, 2160 highlightSize: 8, 2161 size: 8 2162 }, 2163 strokeColor: '#666666', 2164 highlightStrokeWidth: 1, 2165 highlightStrokeColor: '#888888', 2166 2167 2168 /** 2169 * Show / hide ticks. 2170 * 2171 * Deprecated. Suggested alternative is "ticks: {visible: false}" 2172 * 2173 * @type Boolean 2174 * @name Axis#withTicks 2175 * @default true 2176 * @deprecated 2177 */ 2178 withTicks: true, 2179 straightFirst: true, 2180 straightLast: true, 2181 margin: -4, 2182 withLabel: false, 2183 scalable: false, 2184 2185 /** 2186 * Attributes for ticks of the axis. 2187 * 2188 * @type Ticks 2189 * @name Axis#ticks 2190 */ 2191 ticks: { 2192 label: { 2193 offset: [4, -12 + 3], // This seems to be a good offset for 12 point fonts 2194 parse: false, 2195 needsRegularUpdate: false, 2196 display: 'internal', 2197 visible: 'inherit', 2198 layer: 9 2199 }, 2200 visible: 'inherit', 2201 needsRegularUpdate: false, 2202 strokeWidth: 1, 2203 strokeColor: '#666666', 2204 highlightStrokeColor: '#888888', 2205 drawLabels: true, 2206 drawZero: false, 2207 insertTicks: true, 2208 minTicksDistance: 5, 2209 minorHeight: 10, // if <0: full width and height 2210 majorHeight: -1, // if <0: full width and height 2211 tickEndings: [0, 1], 2212 minorTicks: 4, 2213 ticksDistance: 1, // TODO doc 2214 strokeOpacity: 0.25 2215 }, 2216 2217 /** 2218 * Attributes for first point the axis. 2219 * 2220 * @type Point 2221 * @name Axis#point1 2222 */ 2223 point1: { // Default values for point1 if created by line 2224 needsRegularUpdate: false, 2225 visible: false 2226 }, 2227 2228 /** 2229 * Attributes for second point the axis. 2230 * 2231 * @type Point 2232 * @name Axis#point2 2233 */ 2234 point2: { // Default values for point2 if created by line 2235 needsRegularUpdate: false, 2236 visible: false 2237 }, 2238 2239 tabindex: -1, 2240 2241 /** 2242 * Attributes for the axis label. 2243 * 2244 * @type Label 2245 * @name Axis#label 2246 */ 2247 label: { 2248 position: 'lft', 2249 offset: [10, 10] 2250 } 2251 /**#@-*/ 2252 }, 2253 2254 /* special options for angle bisector of 3 points */ 2255 bisector: { 2256 /**#@+ 2257 * @visprop 2258 */ 2259 2260 strokeColor: '#000000', // Bisector line 2261 2262 /** 2263 * Attributes for the helper point of the bisector. 2264 * 2265 * @type Point 2266 * @name Bisector#point 2267 */ 2268 point: { // Bisector point 2269 visible: false, 2270 fixed: false, 2271 withLabel: false, 2272 name: '' 2273 } 2274 2275 /**#@-*/ 2276 }, 2277 2278 /* special options for the 2 bisectors of 2 lines */ 2279 bisectorlines: { 2280 /**#@+ 2281 * @visprop 2282 */ 2283 2284 /** 2285 * Attributes for first line. 2286 * 2287 * @type Line 2288 * @name Bisectorlines#line1 2289 */ 2290 line1: { // 2291 strokeColor: '#000000' 2292 }, 2293 2294 /** 2295 * Attributes for second line. 2296 * 2297 * @type Line 2298 * @name Bisectorlines#line2 2299 */ 2300 line2: { // 2301 strokeColor: '#000000' 2302 } 2303 2304 /**#@-*/ 2305 }, 2306 2307 /* special options for boxplot curves */ 2308 boxplot: { 2309 /**#@+ 2310 * @visprop 2311 */ 2312 2313 /** 2314 * Direction of the box plot: 'vertical' or 'horizontal' 2315 * 2316 * @type String 2317 * @name Boxplot#dir 2318 * @default: 'vertical' 2319 */ 2320 dir: 'vertical', 2321 2322 /** 2323 * Relative width of the maximum and minimum quantile 2324 * 2325 * @type Number 2326 * @name Boxplot#smallWidth 2327 * @default: 0.5 2328 */ 2329 smallWidth: 0.5, 2330 2331 strokeWidth: 2, 2332 strokeColor: Color.palette.blue, 2333 fillColor: Color.palette.blue, 2334 fillOpacity: 0.2, 2335 highlightStrokeWidth: 2, 2336 highlightStrokeColor: Color.palette.blue, 2337 highlightFillColor: Color.palette.blue, 2338 highlightFillOpacity: 0.1 2339 2340 /**#@-*/ 2341 }, 2342 2343 /* special button options */ 2344 button: { 2345 /**#@+ 2346 * @visprop 2347 */ 2348 2349 /** 2350 * Control the attribute "disabled" of the HTML button. 2351 * 2352 * @name disabled 2353 * @memberOf Button.prototype 2354 * 2355 * @type Boolean 2356 * @default false 2357 */ 2358 disabled: false, 2359 2360 display: 'html' 2361 2362 /**#@-*/ 2363 }, 2364 2365 /* special cardinal spline options */ 2366 cardinalspline: { 2367 /**#@+ 2368 * @visprop 2369 */ 2370 2371 /** 2372 * Controls if the data points of the cardinal spline when given as 2373 * arrays should be converted into {@link JXG.Points}. 2374 * 2375 * @name createPoints 2376 * @memberOf Cardinalspline.prototype 2377 * 2378 * @see Cardinalspline#points 2379 * 2380 * @type Boolean 2381 * @default true 2382 */ 2383 createPoints: true, 2384 2385 /** 2386 * If set to true, the supplied coordinates are interpreted as 2387 * [[x_0, y_0], [x_1, y_1], p, ...]. 2388 * Otherwise, if the data consists of two arrays of equal length, 2389 * it is interpreted as 2390 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 2391 * 2392 * @name isArrayOfCoordinates 2393 * @memberOf Cardinalspline.prototype 2394 * @type Boolean 2395 * @default false 2396 */ 2397 isArrayOfCoordinates: false, 2398 2399 /** 2400 * Attributes for the points generated by Cardinalspline in cases 2401 * {@link createPoints} is set to true 2402 * 2403 * @name points 2404 * @memberOf Cardinalspline.prototype 2405 * 2406 * @see Cardinalspline#createPoints 2407 * @type Object 2408 */ 2409 points: { 2410 strokeOpacity: 0.05, 2411 fillOpacity: 0.05, 2412 highlightStrokeOpacity: 1.0, 2413 highlightFillOpacity: 1.0, 2414 withLabel: false, 2415 name: '', 2416 fixed: false 2417 } 2418 2419 /**#@-*/ 2420 }, 2421 2422 /* special chart options */ 2423 chart: { 2424 /**#@+ 2425 * @visprop 2426 */ 2427 2428 chartStyle: 'line', 2429 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 2430 highlightcolors: null, 2431 fillcolor: null, 2432 highlightonsector: false, 2433 highlightbysize: false, 2434 2435 fillOpacity: 0.6, 2436 withLines: false, 2437 2438 label: { 2439 } 2440 /**#@-*/ 2441 }, 2442 2443 /* special html slider options */ 2444 checkbox: { 2445 /**#@+ 2446 * @visprop 2447 */ 2448 2449 /** 2450 * Control the attribute "disabled" of the HTML checkbox. 2451 * 2452 * @name disabled 2453 * @memberOf Checkbox.prototype 2454 * 2455 * @type Boolean 2456 * @default false 2457 */ 2458 disabled: false, 2459 2460 /** 2461 * Control the attribute "checked" of the HTML checkbox. 2462 * 2463 * @name checked 2464 * @memberOf Checkbox.prototype 2465 * 2466 * @type Boolean 2467 * @default false 2468 */ 2469 checked: false, 2470 2471 display: 'html' 2472 2473 /**#@-*/ 2474 }, 2475 2476 /*special circle options */ 2477 circle: { 2478 /**#@+ 2479 * @visprop 2480 */ 2481 2482 /** 2483 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 2484 * 2485 * @see JXG.GeometryElement#hasPoint 2486 * @name Circle#hasInnerPoints 2487 * @type Boolean 2488 * @default false 2489 */ 2490 hasInnerPoints: false, 2491 2492 fillColor: 'none', 2493 highlightFillColor: 'none', 2494 strokeColor: Color.palette.blue, 2495 highlightStrokeColor: '#c3d9ff', 2496 2497 /** 2498 * Attributes for center point. 2499 * 2500 * @type Point 2501 * @name Circle#center 2502 */ 2503 center: { 2504 visible: false, 2505 withLabel: false, 2506 fixed: false, 2507 2508 fillColor: Color.palette.red, 2509 strokeColor: Color.palette.red, 2510 highlightFillColor: '#c3d9ff', 2511 highlightStrokeColor: '#c3d9ff', 2512 2513 name: '' 2514 }, 2515 2516 /** 2517 * Attributes for center point. 2518 * 2519 * @type Point 2520 * @name Circle#center 2521 */ 2522 point2: { 2523 visible: false, 2524 withLabel: false, 2525 fixed: false, 2526 name: '' 2527 }, 2528 2529 /** 2530 * Attributes for circle label. 2531 * 2532 * @type Label 2533 * @name Circle#label 2534 */ 2535 label: { 2536 position: 'urt' 2537 } 2538 /**#@-*/ 2539 }, 2540 2541 /* special options for circumcircle of 3 points */ 2542 circumcircle: { 2543 /**#@+ 2544 * @visprop 2545 */ 2546 2547 fillColor: 'none', 2548 highlightFillColor: 'none', 2549 strokeColor: Color.palette.blue, 2550 highlightStrokeColor: '#c3d9ff', 2551 2552 /** 2553 * Attributes for center point. 2554 * 2555 * @type Point 2556 * @name Circumcircle#center 2557 */ 2558 center: { // center point 2559 visible: false, 2560 fixed: false, 2561 withLabel: false, 2562 fillColor: Color.palette.red, 2563 strokeColor: Color.palette.red, 2564 highlightFillColor: '#c3d9ff', 2565 highlightStrokeColor: '#c3d9ff', 2566 name: '' 2567 } 2568 /**#@-*/ 2569 }, 2570 2571 circumcirclearc: { 2572 /**#@+ 2573 * @visprop 2574 */ 2575 2576 fillColor: 'none', 2577 highlightFillColor: 'none', 2578 strokeColor: Color.palette.blue, 2579 highlightStrokeColor: '#c3d9ff', 2580 2581 /** 2582 * Attributes for center point. 2583 * 2584 * @type Point 2585 * @name CircumcircleArc#center 2586 */ 2587 center: { 2588 visible: false, 2589 withLabel: false, 2590 fixed: false, 2591 name: '' 2592 } 2593 /**#@-*/ 2594 }, 2595 2596 /* special options for circumcircle sector of 3 points */ 2597 circumcirclesector: { 2598 /**#@+ 2599 * @visprop 2600 */ 2601 2602 useDirection: true, 2603 fillColor: Color.palette.yellow, 2604 highlightFillColor: Color.palette.yellow, 2605 fillOpacity: 0.3, 2606 highlightFillOpacity: 0.3, 2607 strokeColor: Color.palette.blue, 2608 highlightStrokeColor: '#c3d9ff', 2609 2610 /** 2611 * Attributes for center point. 2612 * 2613 * @type Point 2614 * @name Circle#point 2615 */ 2616 point: { 2617 visible: false, 2618 fixed: false, 2619 withLabel: false, 2620 name: '' 2621 } 2622 /**#@-*/ 2623 }, 2624 2625 /* special conic options */ 2626 conic: { 2627 /**#@+ 2628 * @visprop 2629 */ 2630 2631 fillColor: 'none', 2632 highlightFillColor: 'none', 2633 strokeColor: Color.palette.blue, 2634 highlightStrokeColor: '#c3d9ff', 2635 2636 /** 2637 * Attributes for foci points. 2638 * 2639 * @type Point 2640 * @name Conic#foci 2641 */ 2642 foci: { 2643 // points 2644 fixed: false, 2645 visible: false, 2646 withLabel: false, 2647 name: '' 2648 }, 2649 2650 /** 2651 * Attributes for center point. 2652 * 2653 * @type Point 2654 * @name Conic#center 2655 */ 2656 center: { 2657 visible: false, 2658 withLabel: false, 2659 name: '' 2660 }, 2661 2662 /** 2663 * Attributes for five points defining the conic, if some of them are given as coordinates. 2664 * 2665 * @type Point 2666 * @name Conic#point 2667 */ 2668 point: { 2669 withLabel: false, 2670 name: '' 2671 }, 2672 2673 /** 2674 * Attributes for parabola line in case the line is given by two 2675 * points or coordinate pairs. 2676 * 2677 * @type Line 2678 * @name Conic#line 2679 */ 2680 line: { 2681 visible: false 2682 } 2683 2684 /**#@-*/ 2685 }, 2686 2687 /* special curve options */ 2688 curve: { 2689 strokeWidth: 1, 2690 strokeColor: Color.palette.blue, 2691 fillColor: 'none', 2692 fixed: true, 2693 2694 useQDT: false, 2695 2696 /**#@+ 2697 * @visprop 2698 */ 2699 2700 /** 2701 * The data points of the curve are not connected with straight lines but with bezier curves. 2702 * @name Curve#handDrawing 2703 * @type Boolean 2704 * @default false 2705 */ 2706 handDrawing: false, 2707 2708 /** 2709 * The curveType is set in {@link JXG.Curve#generateTerm} and used in {@link JXG.Curve#updateCurve}. 2710 * Possible values are <ul> 2711 * <li>'none'</li> 2712 * <li>'plot': Data plot</li> 2713 * <li>'parameter': we can not distinguish function graphs and parameter curves</li> 2714 * <li>'functiongraph': function graph</li> 2715 * <li>'polar'</li> 2716 * <li>'implicit' (not yet)</li></ul> 2717 * Only parameter and plot are set directly. Polar is set with {@link JXG.GeometryElement#setAttribute} only. 2718 * @name Curve#curveType 2719 * @type String 2720 * @default null 2721 */ 2722 curveType: null, 2723 2724 /** 2725 * Apply Ramer-Douglas-Peuker smoothing. 2726 * 2727 * @type Boolean 2728 * @name Curve#RDPsmoothing 2729 * @default false 2730 */ 2731 RDPsmoothing: false, // Apply the Ramer-Douglas-Peuker algorithm 2732 2733 /** 2734 * Number of points used for plotting triggered by up events 2735 * (i.e. high quality plotting) in case 2736 * {@link Curve#doAdvancedPlot} is false. 2737 * 2738 * @name Curve#numberPointsHigh 2739 * @see Curve#doAdvancedPlot 2740 * @type Number 2741 * @default 1600 2742 */ 2743 numberPointsHigh: 1600, // Number of points on curves after mouseUp 2744 2745 /** 2746 * Number of points used for plotting triggered by move events 2747 * (i.e. lower quality plotting but fast) in case 2748 * {@link Curve#doAdvancedPlot} is false. 2749 * 2750 * @name Curve#numberPointsLow 2751 * @see Curve#doAdvancedPlot 2752 * @type Number 2753 * @default 400 2754 */ 2755 numberPointsLow: 400, // Number of points on curves after mousemove 2756 2757 /** 2758 * If true use a recursive bisection algorithm. 2759 * It is slower, but usually the result is better. It tries to detect jumps 2760 * and singularities. 2761 * 2762 * @name Curve#doAdvancedPlot 2763 * @type Boolean 2764 * @default true 2765 */ 2766 doAdvancedPlot: true, 2767 2768 /** 2769 * 2770 * Recursion depth used for plotting triggered by up events 2771 * (i.e. high quality plotting) in case 2772 * {@link Curve#doAdvancedPlot} is true. 2773 * 2774 * @name Curve#recursionDepthHigh 2775 * @see Curve#doAdvancedPlot 2776 * @type Number 2777 * @default 17 2778 */ 2779 recursionDepthHigh: 17, 2780 2781 /** 2782 * Number of points used for plotting triggered by move events in case 2783 * (i.e. lower quality plotting but fast) 2784 * {@link Curve#doAdvancedPlot} is true. 2785 * 2786 * @name Curve#recursionDepthLow 2787 * @see Curve#doAdvancedPlot 2788 * @type Number 2789 * @default 13 2790 */ 2791 recursionDepthLow: 15, 2792 2793 /** 2794 * If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98. 2795 * 2796 * @name Curve#doAdvancedPlotOld 2797 * @see Curve#doAdvancedPlot 2798 * @type Boolean 2799 * @default false 2800 * @deprecated 2801 */ 2802 doAdvancedPlotOld: false, // v1 2803 2804 /** 2805 * Select the version of the plot algorithm. 2806 * <ul> 2807 * <li> Version 1 is very outdated 2808 * <li> Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0 2809 * <li> Version 3 is an internal version that was never published in a stable version. 2810 * <li> Version 4 is available since JSXGraph v1.2.0 2811 * </ul> 2812 * Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode) 2813 * 2814 * @example 2815 * var c = board.create('functiongraph', ["log(x)"]); 2816 * 2817 * @name Curve#plotVersion 2818 * @type Number 2819 * @default 2 2820 */ 2821 plotVersion: 2, 2822 2823 /** 2824 * Attributes for circle label. 2825 * 2826 * @type Label 2827 * @name Circle#label 2828 */ 2829 label: { 2830 position: 'lft' 2831 }, 2832 2833 /** 2834 * Configure arrow head at the start position for curve. 2835 * Recommended arrow head type is 7. 2836 * 2837 * @name Curve#firstArrow 2838 * @type Boolean / Object 2839 * @default false 2840 * @see Line#firstArrow for options 2841 */ 2842 firstArrow: false, 2843 2844 /** 2845 * Configure arrow head at the end position for curve. 2846 * Recommended arrow head type is 7. 2847 * 2848 * @name Curve#lastArrow 2849 * @see Line#lastArrow for options 2850 * @type Boolean / Object 2851 * @default false 2852 */ 2853 lastArrow: false 2854 2855 /**#@-*/ 2856 }, 2857 2858 /* special foreignObject options */ 2859 foreignobject: { 2860 2861 /**#@+ 2862 * @visprop 2863 */ 2864 attractors: [], 2865 fixed: true, 2866 visible: true 2867 2868 /**#@-*/ 2869 }, 2870 2871 glider: { 2872 /**#@+ 2873 * @visprop 2874 */ 2875 2876 label: {} 2877 /**#@-*/ 2878 }, 2879 2880 /* special grid options */ 2881 grid: { 2882 /**#@+ 2883 * @visprop 2884 */ 2885 2886 /* grid styles */ 2887 needsRegularUpdate: false, 2888 hasGrid: false, 2889 gridX: 1, 2890 gridY: 1, 2891 //strokeColor: '#c0c0c0', 2892 strokeColor: '#c0c0c0', 2893 strokeOpacity: 0.5, 2894 strokeWidth: 1, 2895 dash: 0, // dashed grids slow down the iPad considerably 2896 /* snap to grid options */ 2897 2898 /** 2899 * @deprecated 2900 */ 2901 snapToGrid: false, 2902 /** 2903 * @deprecated 2904 */ 2905 snapSizeX: 10, 2906 /** 2907 * @deprecated 2908 */ 2909 snapSizeY: 10 2910 2911 /**#@-*/ 2912 }, 2913 2914 group: { 2915 needsRegularUpdate: true 2916 }, 2917 2918 /* special html slider options */ 2919 htmlslider: { 2920 /**#@+ 2921 * @visprop 2922 */ 2923 2924 /** 2925 * 2926 * These affect the DOM element input type="range". 2927 * The other attributes affect the DOM element div containing the range element. 2928 */ 2929 widthRange: 100, 2930 widthOut: 34, 2931 step: 0.01, 2932 2933 frozen: true, 2934 isLabel: false, 2935 strokeColor: '#000000', 2936 display: 'html', 2937 anchorX: 'left', 2938 anchorY: 'middle', 2939 withLabel: false 2940 2941 /**#@-*/ 2942 }, 2943 2944 /* special image options */ 2945 image: { 2946 /**#@+ 2947 * @visprop 2948 */ 2949 2950 imageString: null, 2951 fillOpacity: 1.0, 2952 highlightFillOpacity: 0.6, 2953 2954 2955 /** 2956 * Defines the CSS class used by the image. CSS attributes defined in 2957 * this class will overwrite the corresponding JSXGraph attributes, e.g. 2958 * opacity. 2959 * The default CSS class is defined in jsxgraph.css. 2960 * 2961 * @name Image#cssClass 2962 * 2963 * @see Image#highlightCssClass 2964 * @type String 2965 * @default 'JXGimage' 2966 */ 2967 cssClass: 'JXGimage', 2968 2969 /** 2970 * Defines the CSS class used by the image when highlighted. 2971 * CSS attributes defined in this class will overwrite the 2972 * corresponding JSXGraph attributes, e.g. highlightFillOpacity. 2973 * The default CSS class is defined in jsxgraph.css. 2974 * 2975 * @name Image#highlightCssClass 2976 * 2977 * @see Image#cssClass 2978 * @type String 2979 * @default 'JXGimageHighlight' 2980 */ 2981 highlightCssClass: 'JXGimageHighlight', 2982 2983 /** 2984 * Image rotation in degrees. 2985 * 2986 * @name Image#rotate 2987 * @type Number 2988 * @default 0 2989 */ 2990 rotate: 0, 2991 2992 /** 2993 * Defines together with {@link Image#snapSizeY} the grid the image snaps on to. 2994 * The image will only snap on user coordinates which are 2995 * integer multiples to snapSizeX in x and snapSizeY in y direction. 2996 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 2997 * of the default ticks of the default x axes of the board. 2998 * 2999 * @name Image#snapSizeX 3000 * 3001 * @see Point#snapToGrid 3002 * @see Image#snapSizeY 3003 * @see JXG.Board#defaultAxes 3004 * @type Number 3005 * @default 1 3006 */ 3007 snapSizeX: 1, 3008 3009 /** 3010 * Defines together with {@link Image#snapSizeX} the grid the image snaps on to. 3011 * The image will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 3012 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3013 * of the default ticks of the default y axes of the board. 3014 * 3015 * @name Image#snapSizeY 3016 * 3017 * @see Point#snapToGrid 3018 * @see Image#snapSizeX 3019 * @see JXG.Board#defaultAxes 3020 * @type Number 3021 * @default 1 3022 */ 3023 snapSizeY: 1, 3024 3025 /** 3026 * List of attractor elements. If the distance of the image is less than 3027 * attractorDistance the image is made to glider of this element. 3028 * 3029 * @name Image#attractors 3030 * 3031 * @type Array 3032 * @default empty 3033 */ 3034 attractors: [] 3035 3036 /**#@-*/ 3037 }, 3038 3039 /* special options for incircle of 3 points */ 3040 incircle: { 3041 /**#@+ 3042 * @visprop 3043 */ 3044 3045 fillColor: 'none', 3046 highlightFillColor: 'none', 3047 strokeColor: Color.palette.blue, 3048 highlightStrokeColor: '#c3d9ff', 3049 3050 /** 3051 * Attributes of circle center. 3052 * 3053 * @type Point 3054 * @name Incircle#center 3055 */ 3056 center: { // center point 3057 visible: false, 3058 fixed: false, 3059 withLabel: false, 3060 fillColor: Color.palette.red, 3061 strokeColor: Color.palette.red, 3062 highlightFillColor: '#c3d9ff', 3063 highlightStrokeColor: '#c3d9ff', 3064 name: '' 3065 } 3066 /**#@-*/ 3067 }, 3068 3069 inequality: { 3070 /**#@+ 3071 * @visprop 3072 */ 3073 3074 fillColor: Color.palette.red, 3075 fillOpacity: 0.2, 3076 strokeColor: 'none', 3077 3078 /** 3079 * By default an inequality is less (or equal) than. Set inverse to <tt>true</tt> will consider the inequality 3080 * greater (or equal) than. 3081 * 3082 * @type Boolean 3083 * @default false 3084 * @name Inequality#inverse 3085 * @visprop 3086 */ 3087 inverse: false 3088 /**#@-*/ 3089 }, 3090 3091 infobox: { 3092 /**#@+ 3093 * @visprop 3094 */ 3095 3096 fontSize: 12, 3097 isLabel: false, 3098 strokeColor: '#bbbbbb', 3099 display: 'html', // 'html' or 'internal' 3100 anchorX: 'left', // 'left', 'middle', or 'right': horizontal alignment 3101 // of the text. 3102 anchorY: 'middle', // 'top', 'middle', or 'bottom': vertical alignment 3103 // of the text. 3104 cssClass: 'JXGinfobox', 3105 rotate: 0, // works for non-zero values only in combination 3106 // with display=='internal' 3107 visible: true, 3108 parse: false, 3109 transitionDuration: 0, 3110 needsRegularUpdate: false 3111 3112 /**#@-*/ 3113 }, 3114 3115 /* special options for integral */ 3116 integral: { 3117 /**#@+ 3118 * @visprop 3119 */ 3120 3121 axis: 'x', // 'x' or 'y' 3122 withLabel: true, // Show integral value as text 3123 fixed: true, 3124 strokeWidth: 0, 3125 strokeOpacity: 0, 3126 fillColor: Color.palette.red, 3127 fillOpacity: 0.3, 3128 highlightFillColor: Color.palette.red, 3129 highlightFillOpacity: 0.2, 3130 3131 /** 3132 * Attributes of the (left) starting point of the integral. 3133 * 3134 * @type Point 3135 * @name Integral#curveLeft 3136 * @see Integral#baseLeft 3137 */ 3138 curveLeft: { // Start point 3139 visible: true, 3140 withLabel: false, 3141 color: Color.palette.red, 3142 fillOpacity: 0.8, 3143 layer: 9 3144 }, 3145 3146 /** 3147 * Attributes of the (left) base point of the integral. 3148 * 3149 * @type Point 3150 * @name Integral#baseLeft 3151 * @see Integral#curveLeft 3152 */ 3153 baseLeft: { // Start point 3154 visible: false, 3155 fixed: false, 3156 withLabel: false, 3157 name: '' 3158 }, 3159 3160 /** 3161 * Attributes of the (right) end point of the integral. 3162 * 3163 * @type Point 3164 * @name Integral#curveRight 3165 * @see Integral#baseRight 3166 */ 3167 curveRight: { // End point 3168 visible: true, 3169 withLabel: false, 3170 color: Color.palette.red, 3171 fillOpacity: 0.8, 3172 layer: 9 3173 }, 3174 3175 /** 3176 * Attributes of the (right) base point of the integral. 3177 * 3178 * @type Point 3179 * @name Integral#baseRight 3180 * @see Integral#curveRight 3181 */ 3182 baseRight: { // End point 3183 visible: false, 3184 fixed: false, 3185 withLabel: false, 3186 name: '' 3187 }, 3188 3189 /** 3190 * Attributes for integral label. 3191 * 3192 * @type Label 3193 * @name Integral#label 3194 */ 3195 label: { 3196 fontSize: 20 3197 } 3198 /**#@-*/ 3199 }, 3200 3201 /* special input options */ 3202 input: { 3203 /**#@+ 3204 * @visprop 3205 */ 3206 3207 /** 3208 * Control the attribute "disabled" of the HTML input field. 3209 * 3210 * @name disabled 3211 * @memberOf Input.prototype 3212 * 3213 * @type Boolean 3214 * @default false 3215 */ 3216 disabled: false, 3217 3218 /** 3219 * Control the attribute "maxlength" of the HTML input field. 3220 * 3221 * @name maxlength 3222 * @memberOf Input.prototype 3223 * 3224 * @type Number 3225 * @default 524288 (as in HTML) 3226 */ 3227 maxlength: 524288, 3228 3229 display: 'html' 3230 3231 /**#@-*/ 3232 }, 3233 3234 /* special intersection point options */ 3235 intersection: { 3236 /**#@+ 3237 * @visprop 3238 */ 3239 3240 /** 3241 * Used in {@link JXG.Intersection}. 3242 * This flag sets the behaviour of intersection points of e.g. 3243 * two segments. If true, the intersection is treated as intersection of lines. If false 3244 * the intersection point exists if the segments intersect setwise. 3245 * 3246 * @name Intersection.alwaysIntersect 3247 * @type Boolean 3248 * @default true 3249 */ 3250 alwaysIntersect: true 3251 3252 /**#@-*/ 3253 }, 3254 3255 /* special label options */ 3256 label: { 3257 /**#@+ 3258 * @visprop 3259 */ 3260 3261 visible: 'inherit', 3262 strokeColor: '#000000', 3263 strokeOpacity: 1, 3264 highlightStrokeOpacity: 0.666666, 3265 highlightStrokeColor: '#000000', 3266 3267 fixed: true, 3268 3269 /** 3270 * Possible string values for the position of a label for 3271 * label anchor points are: 3272 * <ul> 3273 * <li> 'lft' 3274 * <li> 'rt' 3275 * <li> 'top' 3276 * <li> 'bot' 3277 * <li> 'ulft' 3278 * <li> 'urt' 3279 * <li> 'llft' 3280 * <li> 'lrt' 3281 * </ul> 3282 * This is relevant for non-points: line, circle, curve. 3283 * 3284 * The names have been borrowed from <a href="https://www.tug.org/metapost.html">MetaPost</a>. 3285 * 3286 * @name Label#position 3287 * @see Label#offset 3288 * @type String 3289 * @default 'urt' 3290 */ 3291 position: 'urt', 3292 3293 /** 3294 * Label offset from label anchor. 3295 * The label anchor is determined by {@link Label#position} 3296 * 3297 * @name Label#offset 3298 * @see Label#position 3299 * @type Array 3300 * @default [10,10] 3301 */ 3302 offset: [10, 10], 3303 3304 /** 3305 * Automatic position of label text. When called first, the positioning algorithm 3306 * starts at the position defined by offset. 3307 * The algorithm tries to find a position with the least number of 3308 * overlappings with other elements, while retaining the distance 3309 * to the anchor element. 3310 * 3311 * @name Label#autoPosition 3312 * @see Label#offset 3313 * @type Boolean 3314 * @default false 3315 * 3316 * @example 3317 * var p1 = board.create('point', [-2, 1], {id: 'A'}); 3318 * var p2 = board.create('point', [-0.85, 1], { 3319 * name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]} 3320 * }); 3321 * var p3 = board.create('point', [-1, 1.2], { 3322 * name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]} 3323 * }); 3324 * var c = board.create('circle', [p1, p2]); 3325 * var l = board.create('line', [p1, p2]); 3326 * 3327 * </pre><div id="JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2" class="jxgbox" style="width: 300px; height: 300px;"></div> 3328 * <script type="text/javascript"> 3329 * (function() { 3330 * var board = JXG.JSXGraph.initBoard('JXG7d4dafe7-1a07-4d3f-95cb-bfed9d96dea2', 3331 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 3332 * var p1 = board.create('point', [-2, 1], {id: 'A'}); 3333 * var p2 = board.create('point', [-0.85, 1], {name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}}); 3334 * var p3 = board.create('point', [-1, 1.2], {name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}}); 3335 * var c = board.create('circle', [p1, p2]); 3336 * var l = board.create('line', [p1, p2]); 3337 * 3338 * })(); 3339 * 3340 * </script><pre> 3341 * 3342 * 3343 */ 3344 autoPosition: false 3345 3346 /**#@-*/ 3347 }, 3348 3349 /* special legend options */ 3350 legend: { 3351 /** 3352 * @visprop 3353 */ 3354 3355 /** 3356 * Default style of a legend element. The only possible value is 'vertical'. 3357 * @name: Legend#style 3358 * @type String 3359 * @default 'vertical' 3360 */ 3361 style: 'vertical', 3362 3363 /** 3364 * Label names of a legend element. 3365 * @name: Legend#labels 3366 * @type Array 3367 * @default "['1', '2', '3', '4', '5', '6', '7', '8']" 3368 */ 3369 labels: ['1', '2', '3', '4', '5', '6', '7', '8'], 3370 3371 /** 3372 * (Circular) array of label colors. 3373 * @name: Legend#colors 3374 * @type Array 3375 * @default "['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']" 3376 */ 3377 colors: ['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00'], 3378 3379 /** 3380 * Height (in px) of one legend entry 3381 * @name: Legend#rowHeight 3382 * @type Number 3383 * @default 20 3384 * 3385 */ 3386 rowHeight: 20, 3387 3388 strokeWidth: 5 3389 3390 /**#@-*/ 3391 }, 3392 3393 /* special line options */ 3394 line: { 3395 /**#@+ 3396 * @visprop 3397 */ 3398 3399 /** 3400 * Configure the arrow head at the position of its first point or the corresponding 3401 * intersection with the canvas border 3402 * 3403 * In case firstArrow is an object it has the sub-attributes: 3404 * <pre> 3405 * { 3406 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 3407 * size: 6, // size of the arrow head. Default value is 6. 3408 * // This value is multiplied with the strokeWidth of the line 3409 * // Exception: for type=7 size is ignored 3410 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value 3411 * } 3412 * </pre> 3413 * type=7 is the default for curves if firstArrow: true 3414 * 3415 * @name Line#firstArrow 3416 * @see Line#lastArrow 3417 * @see Line#touchFirstPoint 3418 * @type Boolean / Object 3419 * @default false 3420 */ 3421 firstArrow: false, 3422 3423 /** 3424 * Configute the arrow head at the position of its second point or the corresponding 3425 * intersection with the canvas border. 3426 * 3427 * In case lastArrow is an object it has the sub-attributes: 3428 * <pre> 3429 * { 3430 * type: 1, // possible values are 1, 2, ..., 7. Default value is 1. 3431 * size: 6, // size of the arrow head. Default value is 6. 3432 * // This value is multiplied with the strokeWidth of the line. 3433 * // Exception: for type=7 size is ignored 3434 * highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6. 3435 * } 3436 * </pre> 3437 * type=7 is the default for curves if lastArrow: true 3438 * 3439 * @example 3440 * var p1 = board.create('point', [-5, 2], {size:1}); 3441 * var p2 = board.create('point', [5, 2], {size:10}); 3442 * var li = board.create('segment', ['A','B'], 3443 * {name:'seg', 3444 * strokeColor:'#000000', 3445 * strokeWidth:1, 3446 * highlightStrokeWidth: 5, 3447 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 3448 * touchLastPoint: true, 3449 * firstArrow: {type: 3, size: 8} 3450 * }); 3451 * 3452 * </pre><div id="JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3" class="jxgbox" style="width: 300px; height: 300px;"></div> 3453 * <script type="text/javascript"> 3454 * (function() { 3455 * var board = JXG.JSXGraph.initBoard('JXG184e915c-c2ef-11e8-bece-04d3b0c2aad3', 3456 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 3457 * var p1 = board.create('point', [-5, 2], {size:1}); 3458 * var p2 = board.create('point', [5, 2], {size:10}); 3459 * var li = board.create('segment', ['A','B'], 3460 * {name:'seg', 3461 * strokeColor:'#000000', 3462 * strokeWidth:1, 3463 * highlightStrokeWidth: 5, 3464 * lastArrow: {type: 2, size: 8, highlightSize: 6}, 3465 * touchLastPoint: true, 3466 * firstArrow: {type: 3, size: 8} 3467 * }); 3468 * 3469 * })(); 3470 * 3471 * </script> 3472 * 3473 * @name Line#lastArrow 3474 * @see Line#firstArrow 3475 * @see Line#touchLastPoint 3476 * @type Boolean / Object 3477 * @default false 3478 */ 3479 lastArrow: false, 3480 3481 3482 /** 3483 * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line 3484 * ends exactly at the border, if negative there is a margin to the inside, if positive the line 3485 * ends outside of the canvas (which is invisible). 3486 * 3487 * @name: Line#margin 3488 * @type Number 3489 * @default 0 3490 */ 3491 margin: 0, 3492 3493 /** 3494 * If true, line stretches infinitely in direction of its first point. 3495 * Otherwise it ends at point1. 3496 * 3497 * @name Line#straightFirst 3498 * @see Line#straightLast 3499 * @type Boolean 3500 * @default true 3501 */ 3502 straightFirst: true, 3503 3504 /** 3505 * If true, line stretches infinitely in direction of its second point. 3506 * Otherwise it ends at point2. 3507 * 3508 * @name Line#straightLast 3509 * @see Line#straightFirst 3510 * @type Boolean 3511 * @default true 3512 */ 3513 straightLast: true, 3514 3515 fillColor: 'none', // Important for VML on IE 3516 highlightFillColor: 'none', // Important for VML on IE 3517 strokeColor: Color.palette.blue, 3518 highlightStrokeColor: '#c3d9ff', 3519 withTicks: false, 3520 3521 /** 3522 * Attributes for first defining point of the line. 3523 * 3524 * @type Point 3525 * @name Line#point1 3526 */ 3527 point1: { // Default values for point1 if created by line 3528 visible: false, 3529 withLabel: false, 3530 fixed: false, 3531 name: '' 3532 }, 3533 3534 /** 3535 * Attributes for second defining point of the line. 3536 * 3537 * @type Point 3538 * @name Line#point2 3539 */ 3540 point2: { // Default values for point2 if created by line 3541 visible: false, 3542 withLabel: false, 3543 fixed: false, 3544 name: '' 3545 }, 3546 3547 /** 3548 * Attributes for ticks of the line. 3549 * 3550 * @type Ticks 3551 * @name Line#ticks 3552 */ 3553 ticks: { 3554 drawLabels: true, 3555 label: { 3556 offset: [4, -12 + 3] // This seems to be a good offset for 12 point fonts 3557 }, 3558 drawZero: false, 3559 insertTicks: false, 3560 minTicksDistance: 50, 3561 minorHeight: 4, // if <0: full width and height 3562 majorHeight: -1, // if <0: full width and height 3563 minorTicks: 4, 3564 defaultDistance: 1, 3565 strokeOpacity: 0.3, 3566 visible: 'inherit' 3567 }, 3568 3569 /** 3570 * Attributes for the line label. 3571 * 3572 * @type Label 3573 * @name Line#label 3574 */ 3575 label: { 3576 position: 'llft' 3577 }, 3578 3579 /** 3580 * If set to true, the point will snap to a grid defined by 3581 * {@link Point#snapSizeX} and {@link Point#snapSizeY}. 3582 * 3583 * @see Point#snapSizeX 3584 * @see Point#snapSizeY 3585 * @type Boolean 3586 * @name Line#snapToGrid 3587 * @default false 3588 */ 3589 snapToGrid: false, 3590 3591 /** 3592 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 3593 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 3594 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3595 * of the default ticks of the default x axes of the board. 3596 * 3597 * @see Point#snapToGrid 3598 * @see Point#snapSizeY 3599 * @see JXG.Board#defaultAxes 3600 * @type Number 3601 * @name Line#snapSizeX 3602 * @default 1 3603 */ 3604 snapSizeX: 1, 3605 3606 /** 3607 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 3608 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 3609 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 3610 * of the default ticks of the default y axes of the board. 3611 * 3612 * @see Point#snapToGrid 3613 * @see Point#snapSizeX 3614 * @see JXG.Board#defaultAxes 3615 * @type Number 3616 * @name Line#snapSizeY 3617 * @default 1 3618 */ 3619 snapSizeY: 1, 3620 3621 /** 3622 * If set to true and {@link Line#firstArrow} is set to true, the arrow head will just touch 3623 * the circle line of the start point of the line. 3624 * 3625 * @see Line#firstArrow 3626 * @type Boolean 3627 * @name Line#touchFirstPoint 3628 * @default false 3629 */ 3630 touchFirstPoint: false, 3631 3632 /** 3633 * If set to true and {@link Line#lastArrow} is set to true, the arrow head will just touch 3634 * the circle line of the start point of the line. 3635 * @see Line#firstArrow 3636 * @type Boolean 3637 * @name Line#touchLastPoint 3638 * @default false 3639 */ 3640 touchLastPoint: false, 3641 3642 /** 3643 * Line endings (linecap) of a straight line. 3644 * Possible values are: 3645 * <ul> 3646 * <li> 'butt', 3647 * <li> 'round', 3648 * <li> 'square'. 3649 * </ul> 3650 * Not available for VML renderer. 3651 * [lineCap description] 3652 * @name Line#lineCap 3653 * @type String 3654 * @default 'butt' 3655 */ 3656 lineCap: 'butt' 3657 3658 3659 /**#@-*/ 3660 }, 3661 3662 /* special options for locus curves */ 3663 locus: { 3664 /**#@+ 3665 * @visprop 3666 */ 3667 3668 translateToOrigin: false, 3669 translateTo10: false, 3670 stretch: false, 3671 toOrigin: null, 3672 to10: null 3673 /**#@-*/ 3674 }, 3675 3676 /* special cardinal spline options */ 3677 metapostspline: { 3678 /**#@+ 3679 * @visprop 3680 */ 3681 3682 /** 3683 * Controls if the data points of the cardinal spline when given as 3684 * arrays should be converted into {@link JXG.Points}. 3685 * 3686 * @name createPoints 3687 * @memberOf Metapostspline.prototype 3688 * 3689 * @see Metapostspline#points 3690 * 3691 * @type Boolean 3692 * @default true 3693 */ 3694 createPoints: true, 3695 3696 /** 3697 * If set to true, the supplied coordinates are interpreted as 3698 * [[x_0, y_0], [x_1, y_1], p, ...]. 3699 * Otherwise, if the data consists of two arrays of equal length, 3700 * it is interpreted as 3701 * [[x_o x_1, ..., x_n], [y_0, y_1, ..., y_n]] 3702 * 3703 * @name isArrayOfCoordinates 3704 * @memberOf Metapostspline.prototype 3705 * @type Boolean 3706 * @default false 3707 */ 3708 isArrayOfCoordinates: false, 3709 3710 /** 3711 * Attributes for the points generated by Metapostspline in cases 3712 * {@link createPoints} is set to true 3713 * 3714 * @name points 3715 * @memberOf Metapostspline.prototype 3716 * 3717 * @see Metapostspline#createPoints 3718 * @type Object 3719 */ 3720 points: { 3721 strokeOpacity: 0.05, 3722 fillOpacity: 0.05, 3723 highlightStrokeOpacity: 1.0, 3724 highlightFillOpacity: 1.0, 3725 withLabel: false, 3726 name: '', 3727 fixed: false 3728 } 3729 3730 /**#@-*/ 3731 }, 3732 3733 /* special mirrorelement options */ 3734 mirrorelement: { 3735 /**#@+ 3736 * @visprop 3737 */ 3738 3739 fixed: true, 3740 3741 /** 3742 * Attributes of mirror point, i.e. the point along which the element is mirrored. 3743 * 3744 * @type Point 3745 * @name mirrorelement#point 3746 */ 3747 point: {}, 3748 3749 /** 3750 * Attributes of circle center, i.e. the center of the circle, 3751 * if a circle is the mirror element and the transformation type is 'Euclidean' 3752 * 3753 * @type Point 3754 * @name mirrorelement#center 3755 */ 3756 center: {}, 3757 3758 /** 3759 * Type of transformation. Possible values are 'Euclidean', 'projective'. 3760 * 3761 * If the value is 'Euclidean', the mirror element of a circle is again a circle, 3762 * otherwise it is a conic section. 3763 * 3764 * @type String 3765 * @name mirrorelement#type 3766 * @default 'Euclidean' 3767 */ 3768 type: 'Euclidean' 3769 3770 /**#@-*/ 3771 }, 3772 3773 // /* special options for Msector of 3 points */ 3774 // msector: { 3775 // strokeColor: '#000000', // Msector line 3776 // point: { // Msector point 3777 // visible: false, 3778 // fixed: false, 3779 // withLabel: false, 3780 // name: '' 3781 // } 3782 // }, 3783 3784 /* special options for normal lines */ 3785 normal: { 3786 /**#@+ 3787 * @visprop 3788 */ 3789 3790 strokeColor: '#000000', // normal line 3791 3792 /** 3793 * Attributes of helper point of normal. 3794 * 3795 * @type Point 3796 * @name Normal#point 3797 */ 3798 point: { 3799 visible: false, 3800 fixed: false, 3801 withLabel: false, 3802 name: '' 3803 } 3804 /**#@-*/ 3805 }, 3806 3807 /* special options for orthogonal projection points */ 3808 orthogonalprojection: { 3809 /**#@+ 3810 * @visprop 3811 */ 3812 3813 3814 /**#@-*/ 3815 }, 3816 3817 /* special options for parallel lines */ 3818 parallel: { 3819 /**#@+ 3820 * @visprop 3821 */ 3822 3823 strokeColor: '#000000', // Parallel line 3824 3825 /** 3826 * Attributes of helper point of normal. 3827 * 3828 * @type Point 3829 * @name Parallel#point 3830 */ 3831 point: { 3832 visible: false, 3833 fixed: false, 3834 withLabel: false, 3835 name: '' 3836 }, 3837 3838 label: { 3839 position: 'llft' 3840 } 3841 /**#@-*/ 3842 }, 3843 3844 /* special perpendicular options */ 3845 perpendicular: { 3846 /**#@+ 3847 * @visprop 3848 */ 3849 3850 strokeColor: '#000000', // Perpendicular line 3851 straightFirst: true, 3852 straightLast: true 3853 /**#@-*/ 3854 }, 3855 3856 /* special perpendicular options */ 3857 perpendicularsegment: { 3858 /**#@+ 3859 * @visprop 3860 */ 3861 3862 strokeColor: '#000000', // Perpendicular segment 3863 straightFirst: false, 3864 straightLast: false, 3865 point: { // Perpendicular point 3866 visible: false, 3867 fixed: true, 3868 withLabel: false, 3869 name: '' 3870 } 3871 /**#@-*/ 3872 }, 3873 3874 /* special point options */ 3875 point: { 3876 /**#@+ 3877 * @visprop 3878 */ 3879 3880 withLabel: true, 3881 label: {}, 3882 3883 /** 3884 * This attribute was used to determined the point layout. It was derived from GEONExT and was 3885 * replaced by {@link Point#face} and {@link Point#size}. 3886 * 3887 * @name Point#style 3888 * 3889 * @see Point#face 3890 * @see Point#size 3891 * @type Number 3892 * @default 5 3893 * @deprecated 3894 */ 3895 style: 5, 3896 3897 /** 3898 * There are different point styles which differ in appearance. 3899 * Posssible values are 3900 * <table><tr><th>Value</th></tr> 3901 * <tr><td>cross</td></tr> 3902 * <tr><td>circle</td></tr> 3903 * <tr><td>square</td></tr> 3904 * <tr><td>plus</td></tr> 3905 * <tr><td>diamond</td></tr> 3906 * <tr><td>triangleUp</td></tr> 3907 * <tr><td>triangleDown</td></tr> 3908 * <tr><td>triangleLeft</td></tr> 3909 * <tr><td>triangleRight</td></tr> 3910 * </table> 3911 * 3912 * @name Point#face 3913 * 3914 * @type String 3915 * @see JXG.Point#setStyle 3916 * @default circle 3917 */ 3918 face: 'o', 3919 3920 /** 3921 * Size of a point, either in pixel or user coordinates. 3922 * Means radius resp. half the width of a point (depending on the face). 3923 * 3924 * @name Point#size 3925 * 3926 * @see Point#face 3927 * @see JXG.Point#setStyle 3928 * @see Point#sizeUnit 3929 * @type Number 3930 * @default 3 3931 */ 3932 size: 3, 3933 3934 /** 3935 * Unit for size. 3936 * Possible values are 'screen' and 'user. 3937 * 3938 * @name Point#sizeUnit 3939 * 3940 * @see Point#size 3941 * @type String 3942 * @default 'screen' 3943 */ 3944 sizeUnit: 'screen', 3945 3946 strokeWidth: 2, 3947 3948 fillColor: Color.palette.red, 3949 strokeColor: Color.palette.red, 3950 highlightFillColor:'#c3d9ff', 3951 highlightStrokeColor: '#c3d9ff', 3952 // strokeOpacity: 1.0, 3953 // fillOpacity: 1.0, 3954 // highlightFillOpacity: 0.5, 3955 // highlightStrokeOpacity: 0.5, 3956 3957 // fillColor: '#ff0000', 3958 // highlightFillColor: '#eeeeee', 3959 // strokeWidth: 2, 3960 // strokeColor: '#ff0000', 3961 // highlightStrokeColor: '#c3d9ff', 3962 3963 /** 3964 * If true, the point size changes on zoom events. 3965 * 3966 * @type Boolean 3967 * @name Point#zoom 3968 * @default false 3969 * 3970 */ 3971 zoom: false, // Change the point size on zoom 3972 3973 /** 3974 * If true, the infobox is shown on mouse/pen over, if false not. 3975 * If the value is 'inherit', the value of 3976 * {@link JXG.Board#showInfobox} is taken. 3977 * 3978 * @name Point#showInfobox 3979 * @see JXG.Board#showInfobox 3980 * @type {Boolean|String} true | false | 'inherit' 3981 * @default true 3982 */ 3983 showInfobox: 'inherit', 3984 3985 /** 3986 * Truncating rule for the digits in the infobox. 3987 * <ul> 3988 * <li>'auto': done automatically by JXG.autoDigits() 3989 * <li>'none': no truncation 3990 * <li>number: truncate after "number digits" with JXG.toFixed() 3991 * </ul> 3992 * 3993 * @name Point#infoboxDigits 3994 * 3995 * @type String, Number 3996 * @default 'auto' 3997 * @see JXG#autoDigits 3998 * @see JXG#toFixed 3999 */ 4000 infoboxDigits: 'auto', 4001 4002 draft: false, 4003 4004 /** 4005 * List of attractor elements. If the distance of the point is less than 4006 * attractorDistance the point is made to glider of this element. 4007 * 4008 * @name Point#attractors 4009 * 4010 * @type Array 4011 * @default empty 4012 */ 4013 attractors: [], 4014 4015 /** 4016 * Unit for attractorDistance and snatchDistance, used for magnetized points and for snapToPoints. 4017 * Possible values are 'screen' and 'user'. 4018 * 4019 * @name Point#attractorUnit 4020 * 4021 * @see Point#attractorDistance 4022 * @see Point#snatchDistance 4023 * @see Point#snapToPoints 4024 * @see Point#attractors 4025 * @type String 4026 * @default 'user' 4027 */ 4028 attractorUnit: 'user', // 'screen', 'user' 4029 4030 /** 4031 * If the distance of the point to one of its attractors is less 4032 * than this number the point will be a glider on this 4033 * attracting element. 4034 * If set to zero nothing happens. 4035 * 4036 * @name Point#attractorDistance 4037 * 4038 * @type Number 4039 * @default 0.0 4040 */ 4041 attractorDistance: 0.0, 4042 4043 /** 4044 * If the distance of the point to one of its attractors is at least 4045 * this number the point will be released from being a glider on the 4046 * attracting element. 4047 * If set to zero nothing happens. 4048 * 4049 * @name Point#snatchDistance 4050 * 4051 * @type Number 4052 * @default 0.0 4053 */ 4054 snatchDistance: 0.0, 4055 4056 /** 4057 * If set to true, the point will snap to a grid of integer multiples of 4058 * {@link Point#snapSizeX} and {@link Point#snapSizeY} (in user coordinates). 4059 * <p> 4060 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 4061 * (given in user coordinates, not pixels) or are the intersection points 4062 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 4063 * 4064 * @name Point#snapToGrid 4065 * 4066 * @see Point#snapSizeX 4067 * @see Point#snapSizeY 4068 * @type Boolean 4069 * @default false 4070 */ 4071 snapToGrid: false, 4072 4073 /** 4074 * If set to true, the point will only snap to (possibly invisibly) grid points 4075 * when within {@link Point#attractorDistance} of such a grid point. 4076 * <p> 4077 * The coordinates of the grid points are either integer multiples of snapSizeX and snapSizeY 4078 * (given in user coordinates, not pixels) or are the intersection points 4079 * of the major ticks of the boards default axes in case that snapSizeX, snapSizeY are negative. 4080 * 4081 * @name Point#attractToGrid 4082 * 4083 * @see Point#attractorDistance 4084 * @see Point#attractorUnit 4085 * @see Point#snapToGrid 4086 * @see Point#snapSizeX 4087 * @see Point#snapSizeY 4088 * @type Boolean 4089 * @default false 4090 * 4091 * @example 4092 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 4093 * 4094 * </pre><div id="JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6" class="jxgbox" style="width: 300px; height: 300px;"></div> 4095 * <script type="text/javascript"> 4096 * (function() { 4097 * var board = JXG.JSXGraph.initBoard('JXG397ab787-cd40-449c-a7e7-a3f7bab1d4f6', 4098 * {boundingbox: [-1, 4, 7,-4], axis: true, showcopyright: false, shownavigation: false}); 4099 * board.create('point', [3, 3], { attractToGrid: true, attractorDistance: 10, attractorunit: 'screen' }); 4100 * 4101 * })(); 4102 * 4103 * </script><pre> 4104 * 4105 */ 4106 attractToGrid: false, 4107 4108 /** 4109 * Defines together with {@link Point#snapSizeY} the grid the point snaps on to. 4110 * It is given in user coordinates, not in pixels. 4111 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 4112 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 4113 * of the default ticks of the default x axes of the board. 4114 * 4115 * @name Point#snapSizeX 4116 * 4117 * @see Point#snapToGrid 4118 * @see Point#snapSizeY 4119 * @see JXG.Board#defaultAxes 4120 * @type Number 4121 * @default 1 4122 */ 4123 snapSizeX: 1, 4124 4125 /** 4126 * Defines together with {@link Point#snapSizeX} the grid the point snaps on to. 4127 * It is given in user coordinates, not in pixels. 4128 * The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 4129 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 4130 * of the default ticks of the default y axes of the board. 4131 * 4132 * @name Point#snapSizeY 4133 * 4134 * @see Point#snapToGrid 4135 * @see Point#snapSizeX 4136 * @see JXG.Board#defaultAxes 4137 * @type Number 4138 * @default 1 4139 */ 4140 snapSizeY: 1, 4141 4142 /** 4143 * If set to true, the point will snap to the nearest point in distance of 4144 * {@link Point#attractorDistance}. 4145 * 4146 * @name Point#snapToPoints 4147 * 4148 * @see Point#attractorDistance 4149 * @type Boolean 4150 * @default false 4151 */ 4152 snapToPoints: false, 4153 4154 /** 4155 * List of elements which are ignored by snapToPoints. 4156 * @name Point#ignoredSnapToPoints 4157 * 4158 * @type Array 4159 * @default empty 4160 */ 4161 ignoredSnapToPoints: [] 4162 4163 /**#@-*/ 4164 }, 4165 4166 /* special polygon options */ 4167 polygon: { 4168 /**#@+ 4169 * @visprop 4170 */ 4171 4172 /** 4173 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 4174 * 4175 * @see JXG.GeometryElement#hasPoint 4176 * @name Polygon#hasInnerPoints 4177 * @type Boolean 4178 * @default false 4179 */ 4180 hasInnerPoints: false, 4181 4182 fillColor: Color.palette.yellow, 4183 highlightFillColor: Color.palette.yellow, 4184 // fillColor: '#00ff00', 4185 // highlightFillColor: '#00ff00', 4186 fillOpacity: 0.3, 4187 highlightFillOpacity: 0.2, 4188 4189 /** 4190 * Is the polygon bordered by lines? 4191 * 4192 * @type Boolean 4193 * @name Polygon#withLines 4194 * @default true 4195 */ 4196 withLines: true, 4197 4198 /** 4199 * Attributes for the polygon border lines. 4200 * 4201 * @type Line 4202 * @name Polygon#borders 4203 */ 4204 borders: { 4205 withLabel: false, 4206 strokeWidth: 1, 4207 highlightStrokeWidth: 1, 4208 // Polygon layer + 1 4209 layer: 5, 4210 label: { 4211 position: 'top' 4212 }, 4213 visible: 'inherit' 4214 }, 4215 4216 /** 4217 * Attributes for the polygon vertices. 4218 * 4219 * @type Point 4220 * @name Polygon#vertices 4221 */ 4222 vertices: { 4223 layer: 9, 4224 withLabel: false, 4225 name: '', 4226 strokeColor: Color.palette.red, 4227 fillColor: Color.palette.red, 4228 fixed: false, 4229 visible: 'inherit' 4230 }, 4231 4232 /** 4233 * Attributes for the polygon label. 4234 * 4235 * @type Label 4236 * @name Polygon#label 4237 */ 4238 label: { 4239 offset: [0, 0] 4240 } 4241 4242 /**#@-*/ 4243 }, 4244 4245 /* special polygonal chain options 4246 */ 4247 polygonalchain: { 4248 /**#@+ 4249 * @visprop 4250 */ 4251 4252 fillColor: 'none', 4253 highlightFillColor: 'none' 4254 4255 /**#@-*/ 4256 }, 4257 4258 /* special prescribed angle options 4259 * Not yet implemented. But angle.setAngle(val) is implemented. 4260 */ 4261 prescribedangle: { 4262 /**#@+ 4263 * @visprop 4264 */ 4265 4266 /** 4267 * Attributes for the helper point of the prescribed angle. 4268 * 4269 * @type Point 4270 * @name PrescribedAngle#anglePoint 4271 */ 4272 anglePoint: { 4273 size: 2, 4274 visible: false, 4275 withLabel: false 4276 } 4277 4278 /**#@-*/ 4279 }, 4280 4281 /* special reflection options */ 4282 reflection: { 4283 /**#@+ 4284 * @visprop 4285 */ 4286 4287 fixed: true, 4288 4289 /** 4290 * Attributes of circle center, i.e. the center of the circle, 4291 * if a circle is the mirror element and the transformation type is 'Euclidean' 4292 * 4293 * @type Point 4294 * @name mirrorelement#center 4295 */ 4296 center: {}, 4297 4298 /** 4299 * Type of transformation. Possible values are 'Euclidean', 'projective'. 4300 * 4301 * If the value is 'Euclidean', the reflected element of a circle is again a circle, 4302 * otherwise it is a conic section. 4303 * 4304 * @type String 4305 * @name reflection#type 4306 * @default 'Euclidean' 4307 */ 4308 type: 'Euclidean' 4309 4310 /**#@-*/ 4311 }, 4312 4313 /* special regular polygon options */ 4314 regularpolygon: { 4315 /**#@+ 4316 * @visprop 4317 */ 4318 4319 /** 4320 * If <tt>true</tt>, moving the mouse over inner points triggers hasPoint. 4321 * @see JXG.GeometryElement#hasPoint 4322 * 4323 * @name RegularPolygon#hasInnerPoints 4324 * @type Boolean 4325 * @default false 4326 */ 4327 hasInnerPoints: false, 4328 fillColor: Color.palette.yellow, 4329 highlightFillColor: Color.palette.yellow, 4330 fillOpacity: 0.3, 4331 highlightFillOpacity: 0.2, 4332 4333 /** 4334 * Is the polygon bordered by lines? 4335 * 4336 * @type Boolean 4337 * @name RegularPolygon#withLines 4338 * @default true 4339 */ 4340 withLines: true, 4341 4342 /** 4343 * Attributes for the polygon border lines. 4344 * 4345 * @type Line 4346 * @name RegularPolygon#borders 4347 */ 4348 borders: { 4349 withLabel: false, 4350 strokeWidth: 1, 4351 highlightStrokeWidth: 1, 4352 // Polygon layer + 1 4353 layer: 5, 4354 label: { 4355 position: 'top' 4356 } 4357 }, 4358 4359 /** 4360 * Attributes for the polygon vertices. 4361 * 4362 * @type Point 4363 * @name RegularPolygon#vertices 4364 */ 4365 vertices: { 4366 layer: 9, 4367 withLabel: true, 4368 strokeColor: Color.palette.red, 4369 fillColor: Color.palette.red, 4370 fixed: false 4371 }, 4372 4373 /** 4374 * Attributes for the polygon label. 4375 * 4376 * @type Label 4377 * @name Polygon#label 4378 */ 4379 label: { 4380 offset: [0, 0] 4381 } 4382 4383 /**#@-*/ 4384 }, 4385 4386 /* special options for riemann sums */ 4387 riemannsum: { 4388 /**#@+ 4389 * @visprop 4390 */ 4391 4392 withLabel: false, 4393 fillOpacity: 0.3, 4394 fillColor: Color.palette.yellow 4395 4396 /**#@-*/ 4397 }, 4398 4399 /* special sector options */ 4400 sector: { 4401 /**#@+ 4402 * @visprop 4403 */ 4404 4405 fillColor: Color.palette.yellow, 4406 highlightFillColor: Color.palette.yellow, 4407 // fillColor: '#00ff00', 4408 // highlightFillColor: '#00ff00', 4409 4410 fillOpacity: 0.3, 4411 highlightFillOpacity: 0.3, 4412 highlightOnSector: false, 4413 highlightStrokeWidth: 0, 4414 4415 /** 4416 * Type of sector. Possible values are 'minor', 'major', and 'auto'. 4417 * 4418 * @type String 4419 * @name Sector#selection 4420 * @default 'auto' 4421 */ 4422 selection: 'auto', 4423 4424 /** 4425 * Attributes for sub-element arc. It is only available, if the sector is defined by three points. 4426 * 4427 * @type Arc 4428 * @name Sector#arc 4429 * @default '{visible:false}' 4430 */ 4431 arc: { 4432 visible: false, 4433 fillColor: 'none' 4434 }, 4435 4436 /** 4437 * Attributes for helper point radiuspoint in case it is provided by coordinates. 4438 * 4439 * @type Point 4440 * @name Sector#radiusPoint 4441 */ 4442 radiusPoint: { 4443 visible: false, 4444 withLabel: false 4445 }, 4446 4447 /** 4448 * Attributes for helper point center in case it is provided by coordinates. 4449 * 4450 * @type Point 4451 * @name Sector#center 4452 */ 4453 center: { 4454 visible: false, 4455 withLabel: false 4456 }, 4457 4458 /** 4459 * Attributes for helper point anglepoint in case it is provided by coordinates. 4460 * 4461 * @type Point 4462 * @name Sector#anglePoint 4463 */ 4464 anglePoint: { 4465 visible: false, 4466 withLabel: false 4467 }, 4468 4469 /** 4470 * Attributes for the sector label. 4471 * 4472 * @type Label 4473 * @name Sector#label 4474 */ 4475 label: { 4476 offset: [0, 0], 4477 anchorX: 'auto', 4478 anchorY: 'auto' 4479 } 4480 4481 /**#@-*/ 4482 }, 4483 4484 /* special segment options */ 4485 segment: { 4486 /**#@+ 4487 * @visprop 4488 */ 4489 4490 label: { 4491 position: 'top' 4492 } 4493 /**#@-*/ 4494 }, 4495 4496 semicircle: { 4497 /**#@+ 4498 * @visprop 4499 */ 4500 4501 /** 4502 * Attributes for center point of the semicircle. 4503 * 4504 * @type Point 4505 * @name Semicircle#center 4506 */ 4507 center: { 4508 visible: false, 4509 withLabel: false, 4510 fixed: false, 4511 fillColor: Color.palette.red, 4512 strokeColor: Color.palette.red, 4513 highlightFillColor:'#eeeeee', 4514 highlightStrokeColor: Color.palette.red, 4515 name: '' 4516 } 4517 4518 /**#@-*/ 4519 }, 4520 4521 /* special slider options */ 4522 slider: { 4523 /**#@+ 4524 * @visprop 4525 */ 4526 4527 /** 4528 * The slider only returns integer multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For 4529 * continuous results set this to <tt>-1</tt>. 4530 * 4531 * @memberOf Slider.prototype 4532 * @name snapWidth 4533 * @type Number 4534 */ 4535 snapWidth: -1, // -1 = deactivated 4536 4537 /** 4538 * The precision of the slider value displayed in the optional text. 4539 * @memberOf Slider.prototype 4540 * @name precision 4541 * @type Number 4542 * @default 2 4543 */ 4544 precision: 2, 4545 4546 firstArrow: false, 4547 lastArrow: false, 4548 4549 /** 4550 * Show slider ticks. 4551 * 4552 * @type Boolean 4553 * @name Slider#withTicks 4554 * @default true 4555 */ 4556 withTicks: true, 4557 4558 /** 4559 * Show slider label. 4560 * 4561 * @type Boolean 4562 * @name Slider#withLabel 4563 * @default true 4564 */ 4565 withLabel: true, 4566 4567 /** 4568 * If not null, this replaces the part "name = " in the slider label. 4569 * Possible types: string, number or function. 4570 * @type String 4571 * @name suffixLabel 4572 * @memberOf Slider.prototype 4573 * @default null 4574 * @see JXG.Slider#unitLabel 4575 * @see JXG.Slider#postLabel 4576 */ 4577 suffixLabel: null, 4578 4579 /** 4580 * If not null, this is appended to the value in the slider label. 4581 * Possible types: string, number or function. 4582 * @type String 4583 * @name unitLabel 4584 * @memberOf Slider.prototype 4585 * @default null 4586 * @see JXG.Slider#suffixLabel 4587 * @see JXG.Slider#postLabel 4588 */ 4589 unitLabel: null, 4590 4591 /** 4592 * If not null, this is appended to the value and to unitLabel in the slider label. 4593 * Possible types: string, number or function. 4594 * @type String 4595 * @name postLabel 4596 * @memberOf Slider.prototype 4597 * @default null 4598 * @see JXG.Slider#suffixLabel 4599 * @see JXG.Slider#unitLabel 4600 */ 4601 postLabel: null, 4602 4603 layer: 9, 4604 showInfobox: false, 4605 name: '', 4606 visible: true, 4607 strokeColor: '#000000', 4608 highlightStrokeColor: '#888888', 4609 fillColor: '#ffffff', 4610 highlightFillColor: 'none', 4611 4612 /** 4613 * Size of slider point. 4614 * 4615 * @type Number 4616 * @name Slider#size 4617 * @default 6 4618 * @see Point#size 4619 */ 4620 size: 6, 4621 4622 /** 4623 * Attributes for first (left) helper point defining the slider position. 4624 * 4625 * @type Point 4626 * @name Slider#point1 4627 */ 4628 point1: { 4629 needsRegularUpdate: false, 4630 showInfobox: false, 4631 withLabel: false, 4632 visible: false, 4633 fixed: true, 4634 name: '' 4635 }, 4636 4637 /** 4638 * Attributes for second (right) helper point defining the slider position. 4639 * 4640 * @type Point 4641 * @name Slider#point2 4642 */ 4643 point2: { 4644 needsRegularUpdate: false, 4645 showInfobox: false, 4646 withLabel: false, 4647 visible: false, 4648 fixed: true, 4649 name: '' 4650 }, 4651 4652 /** 4653 * Attributes for the base line of the slider. 4654 * 4655 * @type Line 4656 * @name Slider#baseline 4657 */ 4658 baseline: { 4659 needsRegularUpdate: false, 4660 visible: 'inherit', 4661 fixed: true, 4662 scalable: false, 4663 name: '', 4664 strokeWidth: 1, 4665 strokeColor: '#000000', 4666 highlightStrokeColor: '#888888' 4667 }, 4668 4669 /** 4670 * Attributes for the ticks of the base line of the slider. 4671 * 4672 * @type Ticks 4673 * @name Slider#ticks 4674 */ 4675 ticks: { 4676 needsRegularUpdate: false, 4677 fixed: true, 4678 4679 // Label drawing 4680 drawLabels: false, 4681 precision: 2, 4682 includeBoundaries: 1, 4683 drawZero: true, 4684 label: { 4685 offset: [-4, -14], 4686 display: 'internal' 4687 }, 4688 4689 minTicksDistance: 30, 4690 insertTicks: true, 4691 minorHeight: 4, // if <0: full width and height 4692 majorHeight: 5, // if <0: full width and height 4693 minorTicks: 0, 4694 defaultDistance: 1, 4695 strokeOpacity: 1, 4696 strokeWidth: 1, 4697 tickEndings: [0, 1], 4698 strokeColor: '#000000', 4699 visible: 'inherit' 4700 }, 4701 4702 /** 4703 * Attributes for the highlighting line of the slider. 4704 * 4705 * @type Line 4706 * @name Slider#highline 4707 */ 4708 highline: { 4709 strokeWidth: 3, 4710 visible: 'inherit', 4711 fixed: true, 4712 name: '', 4713 strokeColor: '#000000', 4714 highlightStrokeColor: '#888888' 4715 }, 4716 4717 /** 4718 * Attributes for the slider label. 4719 * 4720 * @type Label 4721 * @name Slider#label 4722 */ 4723 label: { 4724 visible: 'inherit', 4725 strokeColor: '#000000' 4726 }, 4727 4728 /** 4729 * If true, 'up' events on the baseline will trigger slider moves. 4730 * 4731 * @type: Boolean 4732 * @name Slider#moveOnUp 4733 * @default: true 4734 */ 4735 moveOnUp: true 4736 4737 /**#@-*/ 4738 }, 4739 4740 /* special options for comb */ 4741 comb: { 4742 /**#@+ 4743 * @visprop 4744 */ 4745 4746 /** 4747 * Frequency of comb elements. 4748 * 4749 * @type Number 4750 * @name Comb#frequency 4751 * @default 0.2 4752 */ 4753 frequency: 0.2, 4754 4755 /** 4756 * Width of the comb. 4757 * 4758 * @type Number 4759 * @name Comb#width 4760 * @default 0.4 4761 */ 4762 width: 0.4, 4763 4764 /** 4765 * Angle under which comb elements are positioned. 4766 * 4767 * @type Number 4768 * @name Comb#angle 4769 * @default 60 degrees 4770 */ 4771 angle: Math.PI / 3, 4772 4773 /** 4774 * Should the comb go right to left instead of left to right. 4775 * 4776 * @type Boolean 4777 * @name Comb#reverse 4778 * @default false 4779 */ 4780 reverse: false, 4781 4782 /** 4783 * Attributes for first defining point of the comb. 4784 * 4785 * @type Point 4786 * @name Comb#point1 4787 */ 4788 point1: { 4789 visible: false, 4790 withLabel: false, 4791 fixed: false, 4792 name: '' 4793 }, 4794 4795 /** 4796 * Attributes for second defining point of the comb. 4797 * 4798 * @type Point 4799 * @name Comb#point2 4800 */ 4801 point2: { 4802 visible: false, 4803 withLabel: false, 4804 fixed: false, 4805 name: '' 4806 }, 4807 4808 /** 4809 * Attributes for the curve displaying the comb. 4810 * 4811 * @type Curve 4812 * @name Comb#curve 4813 */ 4814 curve: { 4815 strokeWidth: 1, 4816 strokeColor: '#000000', 4817 fillColor: 'none' 4818 } 4819 }, 4820 4821 /* special options for slope triangle */ 4822 slopetriangle: { 4823 /**#@+ 4824 * @visprop 4825 */ 4826 4827 fillColor: Color.palette.red, 4828 fillOpacity: 0.4, 4829 highlightFillColor: Color.palette.red, 4830 highlightFillOpacity: 0.3, 4831 4832 borders: { 4833 lastArrow: { 4834 type: 1, 4835 size: 6 4836 } 4837 }, 4838 4839 /** 4840 * Attributes for the gliding helper point. 4841 * 4842 * @type Point 4843 * @name Slopetriangle#glider 4844 */ 4845 glider: { 4846 fixed: true, 4847 visible: false, 4848 withLabel: false 4849 }, 4850 4851 /** 4852 * Attributes for the base line. 4853 * 4854 * @type Line 4855 * @name Slopetriangle#baseline 4856 */ 4857 baseline: { 4858 visible: false, 4859 withLabel: false, 4860 name: '' 4861 }, 4862 4863 /** 4864 * Attributes for the base point. 4865 * 4866 * @type Point 4867 * @name Slopetriangle#basepoint 4868 */ 4869 basepoint: { 4870 visible: false, 4871 withLabel: false, 4872 name: '' 4873 }, 4874 4875 /** 4876 * Attributes for the tangent. 4877 * The tangent is constructed by slop triangle if the construction 4878 * is based on a glider, solely. 4879 * 4880 * @type Line 4881 * @name Slopetriangle#tangent 4882 */ 4883 tangent: { 4884 visible: false, 4885 withLabel: false, 4886 name: '' 4887 }, 4888 4889 /** 4890 * Attributes for the top point. 4891 * 4892 * @type Point 4893 * @name Slopetriangle#toppoint 4894 */ 4895 toppoint: { 4896 visible: false, 4897 withLabel: false, 4898 name: '' 4899 }, 4900 4901 /** 4902 * Attributes for the slope triangle label. 4903 * 4904 * @type Label 4905 * @name Slopetriangle#label 4906 */ 4907 label: { 4908 visible: true 4909 } 4910 /**#@-*/ 4911 }, 4912 4913 /* special options for step functions */ 4914 stepfunction: { 4915 /**#@+ 4916 * @visprop 4917 */ 4918 4919 /**#@-*/ 4920 }, 4921 4922 /* special tape measure options */ 4923 tapemeasure: { 4924 /**#@+ 4925 * @visprop 4926 */ 4927 4928 strokeColor: '#000000', 4929 strokeWidth: 2, 4930 highlightStrokeColor: '#000000', 4931 4932 /** 4933 * Show tape measure ticks. 4934 * 4935 * @type Boolean 4936 * @name Tapemeasure#withTicks 4937 * @default true 4938 */ 4939 withTicks: true, 4940 4941 /** 4942 * Show tape measure label. 4943 * 4944 * @type Boolean 4945 * @name Tapemeasure#withLabel 4946 * @default true 4947 */ 4948 withLabel: true, 4949 4950 /** 4951 * The precision of the tape measure value displayed in the optional text. 4952 * @memberOf Tapemeasure.prototype 4953 * @name precision 4954 * @type Number 4955 * @default 2 4956 */ 4957 precision: 2, 4958 4959 /** 4960 * Attributes for first helper point defining the tape measure position. 4961 * 4962 * @type Point 4963 * @name Tapemeasure#point1 4964 */ 4965 point1: { 4966 visible: 'inherit', 4967 strokeColor: '#000000', 4968 fillColor: '#ffffff', 4969 fillOpacity: 0.0, 4970 highlightFillOpacity: 0.1, 4971 size: 6, 4972 snapToPoints: true, 4973 attractorUnit: 'screen', 4974 attractorDistance: 20, 4975 showInfobox: false, 4976 withLabel: false, 4977 name: '' 4978 }, 4979 4980 /** 4981 * Attributes for second helper point defining the tape measure position. 4982 * 4983 * @type Point 4984 * @name Tapemeasure#point2 4985 */ 4986 point2: { 4987 visible: 'inherit', 4988 strokeColor: '#000000', 4989 fillColor: '#ffffff', 4990 fillOpacity: 0.0, 4991 highlightFillOpacity: 0.1, 4992 size: 6, 4993 snapToPoints: true, 4994 attractorUnit: 'screen', 4995 attractorDistance: 20, 4996 showInfobox: false, 4997 withLabel: false, 4998 name: '' 4999 }, 5000 5001 /** 5002 * Attributes for the ticks of the tape measure. 5003 * 5004 * @type Ticks 5005 * @name Tapemeasure#ticks 5006 */ 5007 ticks: { 5008 drawLabels: false, 5009 drawZero: true, 5010 insertTicks: true, 5011 minorHeight: 8, 5012 majorHeight: 16, 5013 minorTicks: 4, 5014 tickEndings: [0, 1], 5015 defaultDistance: 0.1, 5016 strokeOpacity: 1, 5017 strokeWidth: 1, 5018 strokeColor: '#000000', 5019 visible: 'inherit' 5020 }, 5021 5022 /** 5023 * Attributes for the tape measure label. 5024 * 5025 * @type Label 5026 * @name Tapemeasure#label 5027 */ 5028 label: { 5029 position: 'top' 5030 } 5031 /**#@-*/ 5032 }, 5033 5034 /* special text options */ 5035 text: { 5036 /**#@+ 5037 * @visprop 5038 */ 5039 5040 /** 5041 * The font size in pixels. 5042 * 5043 * @name fontSize 5044 * @memberOf Text.prototype 5045 * @default 12 5046 * @type Number 5047 * @see Text#fontUnit 5048 */ 5049 fontSize: 12, 5050 5051 /** 5052 * CSS unit for the font size of a text element. Usually, this will be the default value 'px' but 5053 * for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful. 5054 * 5055 * @name fontUnit 5056 * @memberOf Text.prototype 5057 * @default 'px' 5058 * @type String 5059 * @see Text#fontSize 5060 * 5061 * @example 5062 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 5063 * 5064 * </pre><div id="JXG2da7e972-ac62-416b-a94b-32559c9ec9f9" class="jxgbox" style="width: 300px; height: 300px;"></div> 5065 * <script type="text/javascript"> 5066 * (function() { 5067 * var board = JXG.JSXGraph.initBoard('JXG2da7e972-ac62-416b-a94b-32559c9ec9f9', 5068 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 5069 * var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'}); 5070 * 5071 * })(); 5072 * 5073 * </script><pre> 5074 * 5075 */ 5076 fontUnit: 'px', 5077 5078 /** 5079 * Used to round texts given by a number. 5080 * 5081 * @name digits 5082 * @memberOf Text.prototype 5083 * @default 2 5084 * @type Number 5085 */ 5086 digits: 2, 5087 5088 /** 5089 * If set to true, the text is parsed and evaluated. 5090 * For labels parse==true results in converting names of the form k_a to subscripts. 5091 * If the text is given by string and parse==true, the string is parsed as 5092 * JessieCode expression. 5093 * 5094 * @name parse 5095 * @memberOf Text.prototype 5096 * @default true 5097 * @type Boolean 5098 */ 5099 parse: true, 5100 5101 /** 5102 * If set to true and caja's sanitizeHTML function can be found it 5103 * will be used to sanitize text output. 5104 * 5105 * @name useCaja 5106 * @memberOf Text.prototype 5107 * @default false 5108 * @type Boolean 5109 */ 5110 useCaja: false, 5111 5112 /** 5113 * If enabled, the text will be handled as label. Intended for internal use. 5114 * 5115 * @name isLabel 5116 * @memberOf Text.prototype 5117 * @default false 5118 * @type Boolean 5119 */ 5120 isLabel: false, 5121 5122 strokeColor: '#000000', 5123 highlightStrokeColor: '#000000', 5124 highlightStrokeOpacity: 0.666666, 5125 5126 /** 5127 * Default CSS properties of the HTML text element. 5128 * <p> 5129 * The CSS properties which are set here, are handed over to the style property 5130 * of the HTML text element. That means, they have higher property than any 5131 * CSS class. 5132 * <p> 5133 * If a property which is set here should be overruled by a CSS class 5134 * then this property should be removed here. 5135 * <p> 5136 * The reason, why this attribute should be kept to its default value at all, 5137 * is that screen dumps of SVG boards with <tt>board.renderer.dumpToCanvas()</tt> 5138 * will ignore the font-family if it is set in a CSS class. 5139 * It has to be set explicitly as style attribute. 5140 * <p> 5141 * In summary, the order of priorities from high to low is 5142 * <ol> 5143 * <li> JXG.Options.text.cssStyle 5144 * <li> JXG.Options.text.cssDefaultStyle 5145 * <li> JXG.Options.text.cssClass 5146 * </ol> 5147 * @example 5148 * If all texts should get its font-family from the default CSS class 5149 * before initializing the board 5150 * <pre> 5151 * JXG.Options.text.cssDefaultStyle = ''; 5152 * JXG.Options.text.highlightCssDefaultStyle = ''; 5153 * </pre> 5154 * should be called. 5155 * 5156 * @name cssDefaultStyle 5157 * @memberOf Text.prototype 5158 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 5159 * @type String 5160 * @see Text#highlightCssDefaultStyle 5161 * @see Text#cssStyle 5162 * @see Text#highlightCssStyle 5163 */ 5164 cssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 5165 5166 /** 5167 * Default CSS properties of the HTML text element in case of highlighting. 5168 * <p> 5169 * The CSS properties which are set here, are handed over to the style property 5170 * of the HTML text element. That means, they have higher property than any 5171 * CSS class. 5172 * @example 5173 * If all texts should get its font-family from the default CSS class 5174 * before initializing the board 5175 * <pre> 5176 * JXG.Options.text.cssDefaultStyle = ''; 5177 * JXG.Options.text.highlightCssDefaultStyle = ''; 5178 * </pre> 5179 * should be called. 5180 * 5181 * @name highlightCssDefaultStyle 5182 * @memberOf Text.prototype 5183 * @default 'font-family: Arial, Helvetica, Geneva, sans-serif;' 5184 * @type String 5185 * @see Text#cssDefaultStyle 5186 * @see Text#cssStyle 5187 * @see Text#highlightCssStyle 5188 */ 5189 highlightCssDefaultStyle: 'font-family: Arial, Helvetica, Geneva, sans-serif;', 5190 5191 /** 5192 * CSS properties of the HTML text element. 5193 * <p> 5194 * The CSS properties which are set here, are handed over to the style property 5195 * of the HTML text element. That means, they have higher property than any 5196 * CSS class. 5197 * 5198 * @name cssStyle 5199 * @memberOf Text.prototype 5200 * @default '' 5201 * @type String 5202 * @see Text#cssDefaultStyle 5203 * @see Text#highlightCssDefaultStyle 5204 * @see Text#highlightCssStyle 5205 */ 5206 cssStyle: '', 5207 5208 /** 5209 * CSS properties of the HTML text element in case of highlighting. 5210 * <p> 5211 * The CSS properties which are set here, are handed over to the style property 5212 * of the HTML text element. That means, they have higher property than any 5213 * CSS class. 5214 * 5215 * @name highlightCssStyle 5216 * @memberOf Text.prototype 5217 * @default '' 5218 * @type String 5219 * @see Text#cssDefaultStyle 5220 * @see Text#highlightCssDefaultStyle 5221 * @see Text#cssStyle 5222 */ 5223 highlightCssStyle: '', 5224 5225 /** 5226 * If true, the input will be given to ASCIIMathML before rendering. 5227 * 5228 * @name useASCIIMathML 5229 * @memberOf Text.prototype 5230 * @default false 5231 * @type Boolean 5232 */ 5233 useASCIIMathML: false, 5234 5235 /** 5236 * If true, MathJax will be used to render the input string. 5237 * Supports MathJax 2 as well as Mathjax 3. 5238 * It is recommended to use this option together with the option 5239 * "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed 5240 * instead of two (e.g. \\alpha). 5241 * 5242 * @name useMathJax 5243 * @memberOf Text.prototype 5244 * @default false 5245 * @type Boolean 5246 * @see Text#parse 5247 * 5248 * @example 5249 * // Before loading MathJax, it has to be configured something like this: 5250 * window.MathJax = { 5251 * tex: { 5252 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 5253 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 5254 * packages: ['base', 'ams'] 5255 * }, 5256 * options: { 5257 * ignoreHtmlClass: 'tex2jax_ignore', 5258 * processHtmlClass: 'tex2jax_process' 5259 * } 5260 * }; 5261 * 5262 * // Display style 5263 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 5264 * fontSize: 15, color:'green', useMathJax: true}); 5265 * 5266 * // Inline style 5267 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 5268 * fontSize: 15, color:'green', useMathJax: true}); 5269 * 5270 * var A = board.create('point', [-2, 0]); 5271 * var B = board.create('point', [1, 0]); 5272 * var C = board.create('point', [0, 1]); 5273 * 5274 * var graph = board.create('ellipse', [A, B, C], { 5275 * fixed: true, 5276 * withLabel: true, 5277 * strokeColor: 'black', 5278 * strokeWidth: 2, 5279 * fillColor: '#cccccc', 5280 * fillOpacity: 0.3, 5281 * highlightStrokeColor: 'red', 5282 * highlightStrokeWidth: 3, 5283 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 5284 * label: {useMathJax: true} 5285 * }); 5286 * 5287 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 5288 * { 5289 * fontSize: 24, parse: false 5290 * }); 5291 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 5292 * { 5293 * fontSize: 24, useMathJax: true 5294 * }); 5295 * 5296 * </pre> 5297 * <script> 5298 * window.MathJax = { 5299 * tex: { 5300 * inlineMath: [ ['$','$'], ["\\(","\\)"] ], 5301 * displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 5302 * packages: ['base', 'ams'] 5303 * }, 5304 * options: { 5305 * ignoreHtmlClass: 'tex2jax_ignore', 5306 * processHtmlClass: 'tex2jax_process' 5307 * } 5308 * }; 5309 * </script> 5310 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 5311 * <div id="JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9" class="jxgbox" style="width: 400px; height: 400px;"></div> 5312 * <script type="text/javascript"> 5313 * (function() { 5314 * var board = JXG.JSXGraph.initBoard('JXGe2a04876-5813-4db0-b7e8-e48bf4e220b9', 5315 * {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}); 5316 * // Display style 5317 * board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { 5318 * fontSize: 15, color:'green', useMathJax: true}); 5319 * 5320 * // Inline style 5321 * board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { 5322 * fontSize: 15, color:'green', useMathJax: true}); 5323 * 5324 * var A = board.create('point', [-2, 0]); 5325 * var B = board.create('point', [1, 0]); 5326 * var C = board.create('point', [0, 1]); 5327 * 5328 * var graph = board.create('ellipse', [A, B, C], { 5329 * fixed: true, 5330 * withLabel: true, 5331 * strokeColor: 'black', 5332 * strokeWidth: 2, 5333 * fillColor: '#cccccc', 5334 * fillOpacity: 0.3, 5335 * highlightStrokeColor: 'red', 5336 * highlightStrokeWidth: 3, 5337 * name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', 5338 * label: {useMathJax: true} 5339 * }); 5340 * 5341 * var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], 5342 * { 5343 * fontSize: 24, parse: false 5344 * }); 5345 * var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], 5346 * { 5347 * fontSize: 24, useMathJax: true 5348 * }); 5349 * })(); 5350 * 5351 * </script><pre> 5352 * 5353 * 5354 * @example 5355 * // Load MathJax: 5356 * // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script> 5357 * 5358 * // function and its derivative 5359 * var f1 = function(x) { return x * x * x; }, 5360 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 5361 * 5362 * A = board.create('glider', [0.5, f1(0.5), graph1], { 5363 * name: 'f(x)', 5364 * color: 'black', 5365 * face:'x', 5366 * fixed: true, 5367 * size: 3, 5368 * label: {offset: [-30, 10], fontSize: 15} 5369 * }), 5370 * B = board.create('glider', [0.7, f1(0.7), graph1], { 5371 * name: 'f(x+Δx)', 5372 * size: 3, 5373 * label: {offset: [-60, 10], fontSize: 15} 5374 * }), 5375 * 5376 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 5377 * a_h_segment = board.create('segment', [A, [ 5378 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5379 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5380 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 5381 * 5382 * b_v_segment = board.create('segment', [B, [ 5383 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5384 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5385 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 5386 * 5387 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 5388 * ], {visible: false}); 5389 * 5390 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 5391 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 5392 * }); 5393 * 5394 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 5395 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 5396 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 5397 * }); 5398 * 5399 * dval = board.create('text',[0.1, 0.8, 5400 * function(){ 5401 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 5402 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 5403 * }],{fontSize: 15, useMathJax: true}); 5404 * 5405 * </pre> 5406 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 5407 * <div id="JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621" class="jxgbox" style="width: 400px; height: 400px;"></div> 5408 * <script type="text/javascript"> 5409 * (function() { 5410 * var board = JXG.JSXGraph.initBoard('JXG8c2b65e7-4fc4-43f7-b23c-5076a7fa9621', 5411 * {boundingbox: [-0.1, 1.1, 1.1, -0.1], axis: true, showcopyright: false, shownavigation: false}); 5412 * // function and its derivative 5413 * var f1 = function(x) { return x * x * x; }, 5414 * graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), 5415 * 5416 * A = board.create('glider', [0.5, f1(0.5), graph1], { 5417 * name: 'f(x)', 5418 * color: 'black', 5419 * face:'x', 5420 * fixed: true, 5421 * size: 3, 5422 * label: {offset: [-30, 10], fontSize: 15} 5423 * }), 5424 * B = board.create('glider', [0.7, f1(0.7), graph1], { 5425 * name: 'f(x+Δx)', 5426 * size: 3, 5427 * label: {offset: [-60, 10], fontSize: 15} 5428 * }), 5429 * 5430 * secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), 5431 * a_h_segment = board.create('segment', [A, [ 5432 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5433 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5434 * ]],{ name: 'Δx', dash: 1, color: 'black'}); 5435 * 5436 * b_v_segment = board.create('segment', [B, [ 5437 * function(){ return B.X() > A.X() ? B.X() : A.X()}, 5438 * function(){ return B.X() > A.X() ? A.Y() : B.Y()} 5439 * ]],{ name: 'Δy', dash: 1, color: 'black'}), 5440 * 5441 * ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 5442 * ], {visible: false}); 5443 * 5444 * board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { 5445 * anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' 5446 * }); 5447 * 5448 * mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); 5449 * board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { 5450 * anchor: mb, useMathJax: true, fixed: true, color: 'green' 5451 * }); 5452 * 5453 * dval = board.create('text',[0.1, 0.8, 5454 * function(){ 5455 * return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + 5456 * '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; 5457 * }],{fontSize: 15, useMathJax: true}); 5458 * 5459 * })(); 5460 * 5461 * </script><pre> 5462 * 5463 * @example 5464 * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true}); 5465 * board.options.text.useMathjax = true; 5466 * 5467 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5468 * suffixlabel:'\\(t_1=\\)', 5469 * unitLabel: ' \\(\\text{ ms}\\)', 5470 * snapWidth:0.01}), 5471 * 5472 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5473 * text1 = board.create('text', [5, 1, function(){ 5474 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 5475 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 5476 * 5477 * </pre><div id="JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6" class="jxgbox" style="width: 300px; height: 300px;"></div> 5478 * <script type="text/javascript"> 5479 * (function() { 5480 * var board = JXG.JSXGraph.initBoard('JXGf8bd01db-fb6a-4a5c-9e7f-8823f7aa5ac6', 5481 * {boundingbox: [-1, 10, 11, -2], axis: true, showcopyright: false, shownavigation: false}); 5482 * board.options.text.useMathjax = true; 5483 * 5484 * a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5485 * suffixlabel:'\\(t_1=\\)', 5486 * unitLabel: ' \\(\\text{ ms}\\)', 5487 * snapWidth:0.01}), 5488 * 5489 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5490 * text1 = board.create('text', [5, 1, function(){ 5491 * return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; 5492 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false}); 5493 * 5494 * })(); 5495 * 5496 * </script><pre> 5497 * 5498 */ 5499 useMathJax: false, 5500 5501 /** 5502 * 5503 * If true, KaTeX will be used to render the input string. 5504 * For this feature, katex.min.js and katex.min.css have to be included. 5505 * <p> 5506 * The example below does not work, because there is a conflict with 5507 * the MathJax library which is used below. 5508 * </p> 5509 * 5510 * @name useKatex 5511 * @memberOf Text.prototype 5512 * @default false 5513 * @type Boolean 5514 * 5515 * 5516 * @example 5517 * JXG.Options.text.useKatex = true; 5518 * 5519 * const board = JXG.JSXGraph.initBoard('jxgbox', { 5520 * boundingbox: [-2, 5, 8, -5], axis:true 5521 * }); 5522 * 5523 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5524 * suffixlabel:'t_1=', 5525 * unitLabel: ' \\text{ ms}', 5526 * snapWidth:0.01}); 5527 * 5528 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5529 * text1 = board.create('text', [5, 1, function(){ 5530 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 5531 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 5532 * 5533 * </pre> 5534 * <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"> 5535 * <script src="https://cdn.jsdelivr.net/npm/katex@0.13.10/dist/katex.min.js" integrity="sha384-dtFDxK2tSkECx/6302Z4VN2ZRqt6Gis+b1IwCjJPrn0kMYFQT9rbtyQWg5NFWAF7" crossorigin="anonymous"></script> 5536 * <div id="JXG497f065c-cfc1-44c3-ba21-5fa581668869" class="jxgbox" style="width: 300px; height: 300px;"></div> 5537 * <script type="text/javascript"> 5538 * (function() { 5539 * var board = JXG.JSXGraph.initBoard('JXG497f065c-cfc1-44c3-ba21-5fa581668869', 5540 * {boundingbox: [-2, 5, 8, -5], axis: true, showcopyright: false, shownavigation: false}); 5541 * board.options.useKatex = true; 5542 * var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { 5543 * suffixlabel:'t_1=', 5544 * unitLabel: ' \\text{ ms}', 5545 * snapWidth:0.01}); 5546 * 5547 * func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); 5548 * text1 = board.create('text', [5, 1, function(){ 5549 * return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; 5550 * }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'}); 5551 * 5552 * })(); 5553 * 5554 * </script><pre> 5555 */ 5556 useKatex: false, 5557 5558 /** 5559 * Determines the rendering method of the text. Possible values 5560 * include <tt>'html'</tt> and <tt>'internal</tt>. 5561 * 5562 * @name display 5563 * @memberOf Text.prototype 5564 * @default 'html' 5565 * @type String 5566 */ 5567 display: 'html', 5568 5569 /** 5570 * Anchor element {@link Point}, {@link Text} or {@link Image} of the text. If it exists, the coordinates of the text are relative 5571 * to this anchor element. 5572 * 5573 * @name anchor 5574 * @memberOf Text.prototype 5575 * @default null 5576 * @type Object 5577 */ 5578 anchor: null, 5579 5580 /** 5581 * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>, <tt>'middle'</tt>, and 5582 * <tt>'right'</tt>. 5583 * 5584 * @name anchorX 5585 * @memberOf Text.prototype 5586 * @default 'left' 5587 * @type String 5588 */ 5589 anchorX: 'left', 5590 5591 /** 5592 * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and 5593 * <tt>'bottom'</tt>. 5594 * 5595 * @name anchorY 5596 * @memberOf Text.prototype 5597 * @default 'auto' 5598 * @type String 5599 */ 5600 anchorY: 'middle', 5601 5602 /** 5603 * CSS class of the text in non-highlighted view. 5604 * 5605 * @name cssClass 5606 * @memberOf Text.prototype 5607 * @type String 5608 */ 5609 cssClass: 'JXGtext', 5610 5611 /** 5612 * CSS class of the text in highlighted view. 5613 * 5614 * @name highlightCssClass 5615 * @memberOf Text.prototype 5616 * @type String 5617 */ 5618 highlightCssClass: 'JXGtext', 5619 5620 /** 5621 * Sensitive area for dragging the text. 5622 * Possible values are 'all', or something else. 5623 * If set to 'small', a sensitivity margin at the right and left border is taken. 5624 * This may be extended to left, right, ... in the future. 5625 * 5626 * @name Text#dragArea 5627 * @type String 5628 * @default 'all' 5629 */ 5630 dragArea: 'all', 5631 5632 withLabel: false, 5633 5634 /** 5635 * Text rotation in degrees. 5636 * Works for non-zero values only in combination with display=='internal'. 5637 * 5638 * @name Text#rotate 5639 * @type Number 5640 * @default 0 5641 */ 5642 rotate: 0, 5643 5644 visible: true, 5645 5646 /** 5647 * Defines together with {@link Text#snapSizeY} the grid the text snaps on to. 5648 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 5649 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 5650 * of the default ticks of the default x axes of the board. 5651 * 5652 * @name snapSizeX 5653 * @memberOf Text.prototype 5654 * 5655 * @see Point#snapToGrid 5656 * @see Text#snapSizeY 5657 * @see JXG.Board#defaultAxes 5658 * @type Number 5659 * @default 1 5660 */ 5661 snapSizeX: 1, 5662 5663 /** 5664 * Defines together with {@link Text#snapSizeX} the grid the text snaps on to. 5665 * The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. 5666 * If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks 5667 * of the default ticks of the default y axes of the board. 5668 * 5669 * @name snapSizeY 5670 * @memberOf Text.prototype 5671 * 5672 * @see Point#snapToGrid 5673 * @see Text#snapSizeX 5674 * @see JXG.Board#defaultAxes 5675 * @type Number 5676 * @default 1 5677 */ 5678 snapSizeY: 1, 5679 5680 /** 5681 * List of attractor elements. If the distance of the text is less than 5682 * attractorDistance the text is made to glider of this element. 5683 * 5684 * @name attractors 5685 * @memberOf Text.prototype 5686 * @type Array 5687 * @default empty 5688 */ 5689 attractors: [] 5690 5691 /**#@-*/ 5692 }, 5693 5694 /* special options for trace curves */ 5695 tracecurve: { 5696 /**#@+ 5697 * @visprop 5698 */ 5699 strokeColor: '#000000', 5700 fillColor: 'none', 5701 5702 /** 5703 * The number of evaluated data points. 5704 * @memberOf Tracecurve.prototype 5705 * @default 100 5706 * @name numberPoints 5707 * @type Number 5708 */ 5709 numberPoints: 100 5710 5711 /**#@-*/ 5712 }, 5713 5714 /*special turtle options */ 5715 turtle: { 5716 /**#@+ 5717 * @visprop 5718 */ 5719 5720 strokeWidth: 1, 5721 fillColor: 'none', 5722 strokeColor: '#000000', 5723 5724 /** 5725 * Attributes for the turtle arrow. 5726 * 5727 * @type Curve 5728 * @name Turtle#arrow 5729 */ 5730 arrow: { 5731 strokeWidth: 2, 5732 withLabel: false, 5733 strokeColor: Color.palette.red, 5734 lastArrow: true 5735 } 5736 /**#@-*/ 5737 }, 5738 5739 /** 5740 * Abbreviations of attributes. Setting the shortcut means setting abbreviated properties 5741 * to the same value. 5742 * It is used in {@link JXG.GeometryElement#setAttribute} and in 5743 * the constructor {@link JXG.GeometryElement}. 5744 * Attention: In Options.js abbreviations are not allowed. 5745 * @type Object 5746 * @name JXG.Options#shortcuts 5747 * 5748 */ 5749 shortcuts: { 5750 color: ['strokeColor', 'fillColor'], 5751 opacity: ['strokeOpacity', 'fillOpacity'], 5752 highlightColor: ['highlightStrokeColor', 'highlightFillColor'], 5753 highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'], 5754 strokeWidth: ['strokeWidth', 'highlightStrokeWidth'] 5755 } 5756 }; 5757 5758 /** 5759 * Holds all possible properties and the according validators for geometry elements. 5760 * A validator is either a function 5761 * which takes one parameter and returns true, if the value is valid for the property, 5762 * or it is false if no validator is required. 5763 */ 5764 JXG.Validator = (function () { 5765 var i, 5766 validatePixel = function (v) { 5767 return (/^[0-9]+px$/).test(v); 5768 }, 5769 validateDisplay = function (v) { 5770 return (v === 'html' || v === 'internal'); 5771 }, 5772 validateColor = function (v) { 5773 // for now this should do it... 5774 return Type.isString(v); 5775 }, 5776 validatePointFace = function (v) { 5777 return Type.exists(JXG.normalizePointFace(v)); 5778 }, 5779 validateInteger = function (v) { 5780 return (Math.abs(v - Math.round(v)) < Mat.eps); 5781 }, 5782 validateNotNegativeInteger = function (v) { 5783 return validateInteger(v) && v >= 0; 5784 }, 5785 validatePositiveInteger = function (v) { 5786 return validateInteger(v) && v > 0; 5787 }, 5788 validateScreenCoords = function (v) { 5789 return v.length >= 2 && validateInteger(v[0]) && validateInteger(v[1]); 5790 }, 5791 validateRenderer = function (v) { 5792 return (v === 'vml' || v === 'svg' || v === 'canvas' || v === 'no'); 5793 }, 5794 validatePositive = function (v) { 5795 return v > 0; 5796 }, 5797 validateNotNegative = function (v) { 5798 return v >= 0; 5799 }, 5800 v = {}, 5801 validators = { 5802 attractorDistance: validateNotNegative, 5803 color: validateColor, 5804 defaultDistance: Type.isNumber, 5805 display: validateDisplay, 5806 doAdvancedPlot: false, 5807 draft: false, 5808 drawLabels: false, 5809 drawZero: false, 5810 face: validatePointFace, 5811 factor: Type.isNumber, 5812 fillColor: validateColor, 5813 fillOpacity: Type.isNumber, 5814 firstArrow: false, 5815 fontSize: validateInteger, 5816 dash: validateInteger, 5817 gridX: Type.isNumber, 5818 gridY: Type.isNumber, 5819 hasGrid: false, 5820 highlightFillColor: validateColor, 5821 highlightFillOpacity: Type.isNumber, 5822 highlightStrokeColor: validateColor, 5823 highlightStrokeOpacity: Type.isNumber, 5824 insertTicks: false, 5825 //: validateScreenCoords, 5826 lastArrow: false, 5827 layer: validateNotNegativeInteger, 5828 majorHeight: validateInteger, 5829 minorHeight: validateInteger, 5830 minorTicks: validateNotNegative, 5831 minTicksDistance: validatePositiveInteger, 5832 numberPointsHigh: validatePositiveInteger, 5833 numberPointsLow: validatePositiveInteger, 5834 opacity: Type.isNumber, 5835 radius: Type.isNumber, 5836 RDPsmoothing: false, 5837 renderer: validateRenderer, 5838 right: validatePixel, 5839 showCopyright: false, 5840 showInfobox: false, 5841 showNavigation: false, 5842 size: validateNotNegative, //validateInteger, 5843 snapSizeX: validatePositive, 5844 snapSizeY: validatePositive, 5845 snapWidth: Type.isNumber, 5846 snapToGrid: false, 5847 snatchDistance: validateNotNegative, 5848 straightFirst: false, 5849 straightLast: false, 5850 stretch: false, 5851 strokeColor: validateColor, 5852 strokeOpacity: Type.isNumber, 5853 strokeWidth: validateNotNegative, //validateInteger, 5854 takeFirst: false, 5855 takeSizeFromFile: false, 5856 to10: false, 5857 toOrigin: false, 5858 translateTo10: false, 5859 translateToOrigin: false, 5860 useASCIIMathML: false, 5861 useDirection: false, 5862 useMathJax: false, 5863 withLabel: false, 5864 withTicks: false, 5865 zoom: false 5866 }; 5867 5868 // this seems like a redundant step but it makes sure that 5869 // all properties in the validator object have lower case names 5870 // and the validator object is easier to read. 5871 for (i in validators) { 5872 if (validators.hasOwnProperty(i)) { 5873 v[i.toLowerCase()] = validators[i]; 5874 } 5875 } 5876 5877 return v; 5878 }()); 5879 5880 /** 5881 * All point faces can be defined with more than one name, e.g. a cross faced point can be given 5882 * by face equal to 'cross' or equal to 'x'. This method maps all possible values to fixed ones to 5883 * simplify if- and switch-clauses regarding point faces. The translation table is as follows: 5884 * <table> 5885 * <tr><th>Input</th><th>Output</th></tr> 5886 * <tr><td>cross, x</td><td>x</td></tr> 5887 * <tr><td>circle, o</td><td>o</td></tr> 5888 * <tr><td>square, []</td><td>[]</td></tr> 5889 * <tr><td>plus, +</td><td>+</td></tr> 5890 * <tr><td>diamond, <></td><td><></td></tr> 5891 * <tr><td>triangleup, a, ^</td><td>A</td></tr> 5892 * <tr><td>triangledown, v</td><td>v</td></tr> 5893 * <tr><td>triangleleft, <</td><td><</td></tr> 5894 * <tr><td>triangleright, ></td><td>></td></tr> 5895 * </table> 5896 * @param {String} s A string which should determine a valid point face. 5897 * @returns {String} Returns a normalized string or undefined if the given string is not a valid 5898 * point face. 5899 */ 5900 JXG.normalizePointFace = function (s) { 5901 var map = { 5902 cross: 'x', 5903 x: 'x', 5904 circle: 'o', 5905 o: 'o', 5906 square: '[]', 5907 '[]': '[]', 5908 plus: '+', 5909 '+': '+', 5910 diamond: '<>', 5911 '<>': '<>', 5912 triangleup: '^', 5913 a: '^', 5914 '^': '^', 5915 triangledown: 'v', 5916 v: 'v', 5917 triangleleft: '<', 5918 '<': '<', 5919 triangleright: '>', 5920 '>': '>' 5921 }; 5922 5923 return map[s]; 5924 }; 5925 5926 5927 /** 5928 * Apply the options stored in this object to all objects on the given board. 5929 * @param {JXG.Board} board The board to which objects the options will be applied. 5930 */ 5931 JXG.useStandardOptions = function (board) { 5932 var el, t, p, copyProps, 5933 o = JXG.Options, 5934 boardHadGrid = board.hasGrid; 5935 5936 board.options.grid.hasGrid = o.grid.hasGrid; 5937 board.options.grid.gridX = o.grid.gridX; 5938 board.options.grid.gridY = o.grid.gridY; 5939 board.options.grid.gridColor = o.grid.gridColor; 5940 board.options.grid.gridOpacity = o.grid.gridOpacity; 5941 board.options.grid.gridDash = o.grid.gridDash; 5942 board.options.grid.snapToGrid = o.grid.snapToGrid; 5943 board.options.grid.snapSizeX = o.grid.SnapSizeX; 5944 board.options.grid.snapSizeY = o.grid.SnapSizeY; 5945 board.takeSizeFromFile = o.takeSizeFromFile; 5946 5947 copyProps = function (p, o) { 5948 p.visProp.fillcolor = o.fillColor; 5949 p.visProp.highlightfillcolor = o.highlightFillColor; 5950 p.visProp.strokecolor = o.strokeColor; 5951 p.visProp.highlightstrokecolor = o.highlightStrokeColor; 5952 }; 5953 5954 for (el in board.objects) { 5955 if (board.objects.hasOwnProperty(el)) { 5956 p = board.objects[el]; 5957 if (p.elementClass === Const.OBJECT_CLASS_POINT) { 5958 copyProps(p, o.point); 5959 } else if (p.elementClass === Const.OBJECT_CLASS_LINE) { 5960 copyProps(p, o.line); 5961 5962 for (t = 0; t < p.ticks.length; t++) { 5963 p.ticks[t].majorTicks = o.line.ticks.majorTicks; 5964 p.ticks[t].minTicksDistance = o.line.ticks.minTicksDistance; 5965 p.ticks[t].visProp.minorheight = o.line.ticks.minorHeight; 5966 p.ticks[t].visProp.majorheight = o.line.ticks.majorHeight; 5967 } 5968 } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) { 5969 copyProps(p, o.circle); 5970 } else if (p.type === Const.OBJECT_TYPE_ANGLE) { 5971 copyProps(p, o.angle); 5972 } else if (p.type === Const.OBJECT_TYPE_ARC) { 5973 copyProps(p, o.arc); 5974 } else if (p.type === Const.OBJECT_TYPE_POLYGON) { 5975 copyProps(p, o.polygon); 5976 } else if (p.type === Const.OBJECT_TYPE_CONIC) { 5977 copyProps(p, o.conic); 5978 } else if (p.type === Const.OBJECT_TYPE_CURVE) { 5979 copyProps(p, o.curve); 5980 } else if (p.type === Const.OBJECT_TYPE_SECTOR) { 5981 p.arc.visProp.fillcolor = o.sector.fillColor; 5982 p.arc.visProp.highlightfillcolor = o.sector.highlightFillColor; 5983 p.arc.visProp.fillopacity = o.sector.fillOpacity; 5984 p.arc.visProp.highlightfillopacity = o.sector.highlightFillOpacity; 5985 } 5986 } 5987 } 5988 5989 board.fullUpdate(); 5990 if (boardHadGrid && !board.hasGrid) { 5991 board.removeGrids(board); 5992 } else if (!boardHadGrid && board.hasGrid) { 5993 board.create('grid', []); 5994 } 5995 }; 5996 5997 /** 5998 * Converts all color values to greyscale and calls useStandardOption to put them onto the board. 5999 * @param {JXG.Board} board The board to which objects the options will be applied. 6000 * @see #useStandardOptions 6001 */ 6002 JXG.useBlackWhiteOptions = function (board) { 6003 var o = JXG.Options; 6004 o.point.fillColor = Color.rgb2bw(o.point.fillColor); 6005 o.point.highlightFillColor = Color.rgb2bw(o.point.highlightFillColor); 6006 o.point.strokeColor = Color.rgb2bw(o.point.strokeColor); 6007 o.point.highlightStrokeColor = Color.rgb2bw(o.point.highlightStrokeColor); 6008 6009 o.line.fillColor = Color.rgb2bw(o.line.fillColor); 6010 o.line.highlightFillColor = Color.rgb2bw(o.line.highlightFillColor); 6011 o.line.strokeColor = Color.rgb2bw(o.line.strokeColor); 6012 o.line.highlightStrokeColor = Color.rgb2bw(o.line.highlightStrokeColor); 6013 6014 o.circle.fillColor = Color.rgb2bw(o.circle.fillColor); 6015 o.circle.highlightFillColor = Color.rgb2bw(o.circle.highlightFillColor); 6016 o.circle.strokeColor = Color.rgb2bw(o.circle.strokeColor); 6017 o.circle.highlightStrokeColor = Color.rgb2bw(o.circle.highlightStrokeColor); 6018 6019 o.arc.fillColor = Color.rgb2bw(o.arc.fillColor); 6020 o.arc.highlightFillColor = Color.rgb2bw(o.arc.highlightFillColor); 6021 o.arc.strokeColor = Color.rgb2bw(o.arc.strokeColor); 6022 o.arc.highlightStrokeColor = Color.rgb2bw(o.arc.highlightStrokeColor); 6023 6024 o.polygon.fillColor = Color.rgb2bw(o.polygon.fillColor); 6025 o.polygon.highlightFillColor = Color.rgb2bw(o.polygon.highlightFillColor); 6026 6027 o.sector.fillColor = Color.rgb2bw(o.sector.fillColor); 6028 o.sector.highlightFillColor = Color.rgb2bw(o.sector.highlightFillColor); 6029 6030 o.curve.strokeColor = Color.rgb2bw(o.curve.strokeColor); 6031 o.grid.gridColor = Color.rgb2bw(o.grid.gridColor); 6032 6033 JXG.useStandardOptions(board); 6034 }; 6035 6036 // needs to be exported 6037 JXG.Options.normalizePointFace = JXG.normalizePointFace; 6038 6039 return JXG.Options; 6040 }); 6041