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