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