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