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