1 /* 2 Copyright 2008-2025 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 /** 36 * @fileoverview In this file the geometry object Ticks is defined. Ticks provides 37 * methods for creation and management of ticks on an axis. 38 * @author graphjs 39 * @version 0.1 40 */ 41 42 import JXG from "../jxg.js"; 43 import Mat from "../math/math.js"; 44 import Geometry from "../math/geometry.js"; 45 import Numerics from "../math/numerics.js"; 46 import Const from "./constants.js"; 47 import GeometryElement from "./element.js"; 48 import Coords from "./coords.js"; 49 import Type from "../utils/type.js"; 50 51 /** 52 * Creates ticks for an axis. 53 * @class Ticks provides methods for creation and management 54 * of ticks on an axis. 55 * @param {JXG.Line} line Reference to the axis the ticks are drawn on. 56 * @param {Number|Array} ticks Number defining the distance between two major ticks or an array defining static ticks. 57 * @param {Object} attributes Properties 58 * @see JXG.Line#addTicks 59 * @constructor 60 * @augments JXG.GeometryElement 61 */ 62 JXG.Ticks = function (line, ticks, attributes) { 63 this.constructor(line.board, attributes, Const.OBJECT_TYPE_TICKS, Const.OBJECT_CLASS_OTHER); 64 65 /** 66 * The line the ticks belong to. 67 * @type JXG.Line 68 * @private 69 */ 70 this.line = line; 71 72 /** 73 * The board the ticks line is drawn on. 74 * @type JXG.Board 75 * @private 76 */ 77 this.board = this.line.board; 78 79 // /** 80 // * A function calculating ticks delta depending on the ticks number. 81 // * @type Function 82 // */ 83 // // this.ticksFunction = null; 84 85 /** 86 * Array of fixed ticks. 87 * @type Array 88 * @private 89 */ 90 this.fixedTicks = null; 91 92 /** 93 * Flag if the ticks are equidistant. If true, their distance is defined by ticksFunction. 94 * @type Boolean 95 * @private 96 */ 97 this.equidistant = false; 98 99 /** 100 * A list of labels which have to be displayed in updateRenderer. 101 * @type Array 102 * @private 103 */ 104 this.labelsData = []; 105 106 if (Type.isFunction(ticks)) { 107 this.ticksFunction = ticks; 108 throw new Error("Function arguments are no longer supported."); 109 } 110 111 if (Type.isArray(ticks)) { 112 this.fixedTicks = ticks; 113 } else { 114 // Obsolete: 115 // if (Math.abs(ticks) < Mat.eps || ticks < 0) { 116 // ticks = attributes.defaultdistance; 117 // } 118 this.equidistant = true; 119 } 120 121 // /** 122 // * Least distance between two ticks, measured in pixels. 123 // * @type int 124 // */ 125 // // this.minTicksDistance = attributes.minticksdistance; 126 127 /** 128 * Stores the ticks coordinates 129 * @type Array 130 * @private 131 */ 132 this.ticks = []; 133 134 // /** 135 // * Distance between two major ticks in user coordinates 136 // * @type Number 137 // */ 138 // this.ticksDelta = 1; 139 140 /** 141 * Array where the labels are saved. There is an array element for every tick, 142 * even for minor ticks which don't have labels. In this case the array element 143 * contains just <tt>null</tt>. 144 * @type Array 145 * @private 146 */ 147 this.labels = []; 148 149 /** 150 * Used to ensure the uniqueness of label ids this counter is used. 151 * @type number 152 * @private 153 */ 154 this.labelCounter = 0; 155 156 this.id = this.line.addTicks(this); 157 this.elType = "ticks"; 158 this.inherits.push(this.labels); 159 this.board.setId(this, "Ti"); 160 }; 161 162 JXG.Ticks.prototype = new GeometryElement(); 163 164 JXG.extend( 165 JXG.Ticks.prototype, 166 /** @lends JXG.Ticks.prototype */ { 167 // /** 168 // * Ticks function: 169 // * determines the distance (in user units) of two major ticks. 170 // * See above in constructor and in @see JXG.GeometryElement#setAttribute 171 // * 172 // * @private 173 // * @param {Number} ticks Distance between two major ticks 174 // * @returns {Function} returns method ticksFunction 175 // */ 176 // // makeTicksFunction: function (ticks) { 177 // // return function () { 178 // ticksFunction: function () { 179 // var delta, b, dist, 180 // number_major_tick_intervals = 5; 181 182 // if (this.evalVisProp('insertticks')) { 183 // b = this.getLowerAndUpperBounds(this.getZeroCoordinates(), 'ticksdistance'); 184 // dist = b.upper - b.lower; 185 186 // // delta: Proposed distance in user units between two major ticks 187 // delta = Math.pow(10, Math.floor(Math.log(dist / number_major_tick_intervals) / Math.LN10)); 188 // console.log("delta", delta, b.upper, b.lower, dist, dist / number_major_tick_intervals * 1.1) 189 // if (5 * delta < dist / number_major_tick_intervals * 1.1) { 190 // return 5 * delta; 191 // } 192 // if (2 * delta < dist / number_major_tick_intervals * 1.1) { 193 // return 2 * delta; 194 // } 195 196 // // < v1.6.0: 197 // // delta = Math.pow(10, Math.floor(Math.log(0.6 * dist) / Math.LN10)); 198 // if (false && dist <= 6 * delta) { 199 // delta *= 0.5; 200 // } 201 // return delta; 202 // } 203 204 // // In case of insertTicks==false 205 // return this.evalVisProp('ticksdistance'); 206 // // return ticks; 207 // // }; 208 // }, 209 210 /** 211 * Checks whether (x,y) is near the line. 212 * Only available for line elements, not for ticks on curves. 213 * @param {Number} x Coordinate in x direction, screen coordinates. 214 * @param {Number} y Coordinate in y direction, screen coordinates. 215 * @returns {Boolean} True if (x,y) is near the line, False otherwise. 216 */ 217 hasPoint: function (x, y) { 218 var i, t, r, type, 219 len = (this.ticks && this.ticks.length) || 0; 220 221 if ( 222 !this.line.evalVisProp('scalable') || 223 this.line.elementClass === Const.OBJECT_CLASS_CURVE 224 ) { 225 return false; 226 } 227 228 if (Type.isObject(this.evalVisProp('precision'))) { 229 type = this.board._inputDevice; 230 r = this.evalVisProp('precision.' + type); 231 } else { 232 // 'inherit' 233 r = this.board.options.precision.hasPoint; 234 } 235 r += this.evalVisProp('strokewidth') * 0.5; 236 237 // Ignore non-axes and axes that are not horizontal or vertical 238 if ( 239 this.line.stdform[1] !== 0 && 240 this.line.stdform[2] !== 0 && 241 this.line.type !== Const.OBJECT_TYPE_AXIS 242 ) { 243 return false; 244 } 245 246 for (i = 0; i < len; i++) { 247 t = this.ticks[i]; 248 249 // Skip minor ticks 250 if (t[2]) { 251 // Ignore ticks at zero 252 if ( 253 !( 254 (this.line.stdform[1] === 0 && 255 Math.abs(t[0][0] - this.line.point1.coords.scrCoords[1]) < 256 Mat.eps) || 257 (this.line.stdform[2] === 0 && 258 Math.abs(t[1][0] - this.line.point1.coords.scrCoords[2]) < 259 Mat.eps) 260 ) 261 ) { 262 // tick length is not zero, ie. at least one pixel 263 if ( 264 Math.abs(t[0][0] - t[0][1]) >= 1 || 265 Math.abs(t[1][0] - t[1][1]) >= 1 266 ) { 267 // Allow dragging near axes only. 268 if (this.line.stdform[1] === 0) { 269 if ( 270 Math.abs(y - this.line.point1.coords.scrCoords[2]) < 2 * r && 271 t[0][0] - r < x && x < t[0][1] + r 272 ) { 273 return true; 274 } 275 } else if (this.line.stdform[2] === 0) { 276 if ( 277 Math.abs(x - this.line.point1.coords.scrCoords[1]) < 2 * r && 278 t[1][0] - r < y && y < t[1][1] + r 279 ) { 280 return true; 281 } 282 } 283 } 284 } 285 } 286 } 287 288 return false; 289 }, 290 291 /** 292 * Sets x and y coordinate of the tick. 293 * @param {number} method The type of coordinates used here. Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}. 294 * @param {Array} coords coordinates in screen/user units 295 * @param {Array} oldcoords previous coordinates in screen/user units 296 * @returns {JXG.Ticks} this element 297 */ 298 setPositionDirectly: function (method, coords, oldcoords) { 299 var dx, dy, 300 c = new Coords(method, coords, this.board), 301 oldc = new Coords(method, oldcoords, this.board), 302 bb = this.board.getBoundingBox(); 303 304 if ( 305 this.line.type !== Const.OBJECT_TYPE_AXIS || 306 !this.line.evalVisProp('scalable') 307 ) { 308 return this; 309 } 310 311 if ( 312 Math.abs(this.line.stdform[1]) < Mat.eps && 313 Math.abs(c.usrCoords[1] * oldc.usrCoords[1]) > Mat.eps 314 ) { 315 // Horizontal line 316 dx = oldc.usrCoords[1] / c.usrCoords[1]; 317 bb[0] *= dx; 318 bb[2] *= dx; 319 this.board.setBoundingBox(bb, this.board.keepaspectratio, "update"); 320 } else if ( 321 Math.abs(this.line.stdform[2]) < Mat.eps && 322 Math.abs(c.usrCoords[2] * oldc.usrCoords[2]) > Mat.eps 323 ) { 324 // Vertical line 325 dy = oldc.usrCoords[2] / c.usrCoords[2]; 326 bb[3] *= dy; 327 bb[1] *= dy; 328 this.board.setBoundingBox(bb, this.board.keepaspectratio, "update"); 329 } 330 331 return this; 332 }, 333 334 /** 335 * (Re-)calculates the ticks coordinates. 336 * @private 337 */ 338 calculateTicksCoordinates: function () { 339 var coordsZero, b, r_max, bb; 340 341 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 342 // Calculate Ticks width and height in Screen and User Coordinates 343 this.setTicksSizeVariables(); 344 345 // If the parent line is not finite, we can stop here. 346 if (Math.abs(this.dx) < Mat.eps && Math.abs(this.dy) < Mat.eps) { 347 return; 348 } 349 } 350 351 // Get Zero (coords element for lines, number for curves) 352 coordsZero = this.getZeroCoordinates(); 353 354 // Calculate lower bound and upper bound limits based on distance 355 // between p1 and center and p2 and center 356 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 357 b = this.getLowerAndUpperBounds(coordsZero, 'ticksdistance'); 358 } else { 359 b = { 360 lower: this.line.minX(), 361 upper: this.line.maxX(), 362 a1: 0, 363 a2: 0, 364 m1: 0, 365 m2: 0 366 }; 367 } 368 369 if (this.evalVisProp('type') === "polar") { 370 bb = this.board.getBoundingBox(); 371 r_max = Math.max( 372 Mat.hypot(bb[0], bb[1]), 373 Mat.hypot(bb[2], bb[3]) 374 ); 375 b.upper = r_max; 376 } 377 378 // Clean up 379 this.ticks = []; 380 this.labelsData = []; 381 // Create Ticks Coordinates and Labels 382 if (this.equidistant) { 383 this.generateEquidistantTicks(coordsZero, b); 384 } else { 385 this.generateFixedTicks(coordsZero, b); 386 } 387 388 return this; 389 }, 390 391 /** 392 * Sets the variables used to set the height and slope of each tick. 393 * 394 * @private 395 */ 396 setTicksSizeVariables: function (pos) { 397 var d, 398 mi, 399 ma, 400 len, 401 distMaj = this.evalVisProp('majorheight') * 0.5, 402 distMin = this.evalVisProp('minorheight') * 0.5; 403 404 // For curves: 405 if (Type.exists(pos)) { 406 mi = this.line.minX(); 407 ma = this.line.maxX(); 408 len = this.line.points.length; 409 if (len < 2) { 410 this.dxMaj = 0; 411 this.dyMaj = 0; 412 } else if (Mat.relDif(pos, mi) < Mat.eps) { 413 this.dxMaj = 414 this.line.points[0].usrCoords[2] - this.line.points[1].usrCoords[2]; 415 this.dyMaj = 416 this.line.points[1].usrCoords[1] - this.line.points[0].usrCoords[1]; 417 } else if (Mat.relDif(pos, ma) < Mat.eps) { 418 this.dxMaj = 419 this.line.points[len - 2].usrCoords[2] - 420 this.line.points[len - 1].usrCoords[2]; 421 this.dyMaj = 422 this.line.points[len - 1].usrCoords[1] - 423 this.line.points[len - 2].usrCoords[1]; 424 } else { 425 this.dxMaj = -Numerics.D(this.line.Y)(pos); 426 this.dyMaj = Numerics.D(this.line.X)(pos); 427 } 428 } else { 429 // ticks width and height in screen units 430 this.dxMaj = this.line.stdform[1]; 431 this.dyMaj = this.line.stdform[2]; 432 } 433 this.dxMin = this.dxMaj; 434 this.dyMin = this.dyMaj; 435 436 // ticks width and height in user units 437 this.dx = this.dxMaj; 438 this.dy = this.dyMaj; 439 440 // After this, the length of the vector (dxMaj, dyMaj) in screen coordinates is equal to distMaj pixel. 441 d = Mat.hypot(this.dxMaj * this.board.unitX, this.dyMaj * this.board.unitY); 442 this.dxMaj *= (distMaj / d) * this.board.unitX; 443 this.dyMaj *= (distMaj / d) * this.board.unitY; 444 this.dxMin *= (distMin / d) * this.board.unitX; 445 this.dyMin *= (distMin / d) * this.board.unitY; 446 447 // Grid-like ticks? 448 this.minStyle = this.evalVisProp('minorheight') < 0 ? "infinite" : "finite"; 449 this.majStyle = this.evalVisProp('majorheight') < 0 ? "infinite" : "finite"; 450 }, 451 452 /** 453 * Returns the coordinates of the point zero of the line. 454 * 455 * If the line is an {@link Axis}, the coordinates of the projection of the board's zero point is returned 456 * 457 * Otherwise, the coordinates of the point that acts as zero are 458 * established depending on the value of {@link JXG.Ticks#anchor} 459 * 460 * @returns {JXG.Coords} Coords object for the zero point on the line 461 * @private 462 */ 463 getZeroCoordinates: function () { 464 var c1x, c1y, c1z, c2x, c2y, c2z, 465 t, mi, ma, 466 ev_a = this.evalVisProp('anchor'); 467 468 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 469 if (this.line.type === Const.OBJECT_TYPE_AXIS) { 470 return Geometry.projectPointToLine( 471 { 472 coords: { 473 usrCoords: [1, 0, 0] 474 } 475 }, 476 this.line, 477 this.board 478 ); 479 } 480 c1z = this.line.point1.coords.usrCoords[0]; 481 c1x = this.line.point1.coords.usrCoords[1]; 482 c1y = this.line.point1.coords.usrCoords[2]; 483 c2z = this.line.point2.coords.usrCoords[0]; 484 c2x = this.line.point2.coords.usrCoords[1]; 485 c2y = this.line.point2.coords.usrCoords[2]; 486 487 if (ev_a === "right") { 488 return this.line.point2.coords; 489 } 490 if (ev_a === "middle") { 491 return new Coords( 492 Const.COORDS_BY_USER, 493 [(c1z + c2z) * 0.5, (c1x + c2x) * 0.5, (c1y + c2y) * 0.5], 494 this.board 495 ); 496 } 497 if (Type.isNumber(ev_a)) { 498 return new Coords( 499 Const.COORDS_BY_USER, 500 [ 501 c1z + (c2z - c1z) * ev_a, 502 c1x + (c2x - c1x) * ev_a, 503 c1y + (c2y - c1y) * ev_a 504 ], 505 this.board 506 ); 507 } 508 return this.line.point1.coords; 509 } 510 mi = this.line.minX(); 511 ma = this.line.maxX(); 512 if (ev_a === "right") { 513 t = ma; 514 } else if (ev_a === "middle") { 515 t = (mi + ma) * 0.5; 516 } else if (Type.isNumber(ev_a)) { 517 t = mi * (1 - ev_a) + ma * ev_a; 518 // t = ev_a; 519 } else { 520 t = mi; 521 } 522 return t; 523 }, 524 525 /** 526 * Calculate the lower and upper bounds for tick rendering. 527 * If {@link JXG.Ticks#includeBoundaries} is false, the boundaries will exclude point1 and point2. 528 * 529 * @param {JXG.Coords} coordsZero 530 * @returns {String} [type] If type=='ticksdistance', the bounds are 531 * the intersection of the line with the bounding box of the board, respecting 532 * the value of the line attribute 'margin' and the width of arrow heads. 533 * Otherwise, it is the projection of the corners of the bounding box 534 * to the line - without the attribute 'margin' and width of arrow heads. 535 * <br> 536 * The first case is needed to determine which ticks are displayed, i.e. where to stop. 537 * The second case is to determine the distance between ticks in case of 'insertTicks:true'. 538 * @returns {Object} {lower: Number, upper: Number } containing the lower and upper bounds in user units. 539 * 540 * @private 541 */ 542 getLowerAndUpperBounds: function (coordsZero, type) { 543 var lowerBound, upperBound, 544 fA, lA, 545 point1, point2, 546 isPoint1inBoard, isPoint2inBoard, 547 // We use the distance from zero to P1 and P2 to establish lower and higher points 548 dZeroPoint1, dZeroPoint2, 549 arrowData, 550 // angle, 551 a1, a2, m1, m2, 552 eps = Mat.eps * 10, 553 ev_sf = this.line.evalVisProp('straightfirst'), 554 ev_sl = this.line.evalVisProp('straightlast'), 555 ev_i = this.evalVisProp('includeboundaries'); 556 557 // The line's defining points that will be adjusted to be within the board limits 558 if (this.line.elementClass === Const.OBJECT_CLASS_CURVE) { 559 return { 560 lower: this.line.minX(), 561 upper: this.line.maxX() 562 }; 563 } 564 565 point1 = new Coords(Const.COORDS_BY_USER, this.line.point1.coords.usrCoords, this.board); 566 point2 = new Coords(Const.COORDS_BY_USER, this.line.point2.coords.usrCoords, this.board); 567 568 // Are the original defining points within the board? 569 isPoint1inBoard = 570 Math.abs(point1.usrCoords[0]) >= Mat.eps && 571 point1.scrCoords[1] >= 0.0 && 572 point1.scrCoords[1] <= this.board.canvasWidth && 573 point1.scrCoords[2] >= 0.0 && 574 point1.scrCoords[2] <= this.board.canvasHeight; 575 isPoint2inBoard = 576 Math.abs(point2.usrCoords[0]) >= Mat.eps && 577 point2.scrCoords[1] >= 0.0 && 578 point2.scrCoords[1] <= this.board.canvasWidth && 579 point2.scrCoords[2] >= 0.0 && 580 point2.scrCoords[2] <= this.board.canvasHeight; 581 582 // Adjust line limit points to be within the board 583 if (Type.exists(type) && type === 'ticksdistance') { 584 // The good old calcStraight is needed for determining the distance between major ticks. 585 // Here, only the visual area is of importance 586 Geometry.calcStraight(this.line, point1, point2, 0); 587 m1 = this.getDistanceFromZero(coordsZero, point1); 588 m2 = this.getDistanceFromZero(coordsZero, point2); 589 Geometry.calcStraight(this.line, point1, point2, this.line.evalVisProp('margin')); 590 m1 = this.getDistanceFromZero(coordsZero, point1) - m1; 591 m2 = this.getDistanceFromZero(coordsZero, point2).m2; 592 } else { 593 // This function projects the corners of the board to the line. 594 // This is important for diagonal lines with infinite tick lines. 595 Geometry.calcLineDelimitingPoints(this.line, point1, point2); 596 } 597 598 // Shorten ticks bounds such that ticks are not through arrow heads 599 fA = this.line.evalVisProp('firstarrow'); 600 lA = this.line.evalVisProp('lastarrow'); 601 602 a1 = this.getDistanceFromZero(coordsZero, point1); 603 a2 = this.getDistanceFromZero(coordsZero, point2); 604 if (fA || lA) { 605 // Do not display ticks at through arrow heads. 606 // In arrowData we ignore the highlighting status. 607 // Ticks would appear to be too nervous. 608 arrowData = this.board.renderer.getArrowHeadData( 609 this.line, 610 this.line.evalVisProp('strokewidth'), 611 '' 612 ); 613 614 this.board.renderer.getPositionArrowHead( 615 this.line, 616 point1, 617 point2, 618 arrowData 619 ); 620 } 621 // Calculate (signed) distance from Zero to P1 and to P2 622 dZeroPoint1 = this.getDistanceFromZero(coordsZero, point1); 623 dZeroPoint2 = this.getDistanceFromZero(coordsZero, point2); 624 625 // Recompute lengths of arrow heads 626 a1 = dZeroPoint1 - a1; 627 a2 = dZeroPoint1 - a2; 628 629 // We have to establish if the direction is P1->P2 or P2->P1 to set the lower and upper 630 // bounds appropriately. As the distances contain also a sign to indicate direction, 631 // we can compare dZeroPoint1 and dZeroPoint2 to establish the line direction 632 if (dZeroPoint1 < dZeroPoint2) { 633 // Line goes P1->P2 634 lowerBound = dZeroPoint1; 635 upperBound = dZeroPoint2; 636 637 if (!ev_sf && isPoint1inBoard && !ev_i) { 638 lowerBound += eps; 639 } 640 if (!ev_sl && isPoint2inBoard && !ev_i) { 641 upperBound -= eps; 642 } 643 } else if (dZeroPoint2 < dZeroPoint1) { 644 // Line goes P2->P1 645 // Does this happen at all? 646 lowerBound = dZeroPoint2; 647 upperBound = dZeroPoint1; 648 649 if (!ev_sl && isPoint2inBoard && !ev_i) { 650 lowerBound += eps; 651 } 652 if (!ev_sf && isPoint1inBoard && !ev_i) { 653 upperBound -= eps; 654 } 655 } else { 656 // P1 = P2 = Zero, we can't do a thing 657 lowerBound = 0; 658 upperBound = 0; 659 } 660 661 return { 662 lower: lowerBound, 663 upper: upperBound, 664 a1: a1, 665 a2: a2, 666 m1: m1, 667 m2: m2 668 }; 669 }, 670 671 /** 672 * Calculates the signed distance in user coordinates from zero to a given point. 673 * Sign is positive, if the direction from zero to point is the same as the direction 674 * zero to point2 of the line. 675 * 676 * @param {JXG.Coords} zero coordinates of the point considered zero 677 * @param {JXG.Coords} point coordinates of the point to find out the distance 678 * @returns {Number} distance between zero and point, including its sign 679 * @private 680 */ 681 getDistanceFromZero: function (zero, point) { 682 var p1, p2, dirLine, dirPoint, distance; 683 684 p1 = this.line.point1.coords; 685 p2 = this.line.point2.coords; 686 distance = zero.distance(Const.COORDS_BY_USER, point); 687 688 // Establish sign 689 dirLine = [ 690 p2.usrCoords[0] - p1.usrCoords[0], 691 p2.usrCoords[1] - p1.usrCoords[1], 692 p2.usrCoords[2] - p1.usrCoords[2] 693 ]; 694 dirPoint = [ 695 point.usrCoords[0] - zero.usrCoords[0], 696 point.usrCoords[1] - zero.usrCoords[1], 697 point.usrCoords[2] - zero.usrCoords[2] 698 ]; 699 if (Mat.innerProduct(dirLine, dirPoint, 3) < 0) { 700 distance *= -1; 701 } 702 703 return distance; 704 }, 705 706 /** 707 * Creates ticks coordinates and labels automatically. 708 * The frequency of ticks is affected by the values of {@link JXG.Ticks#insertTicks}, {@link JXG.Ticks#minTicksDistance}, 709 * and {@link JXG.Ticks#ticksDistance} 710 * 711 * @param {JXG.Coords} coordsZero coordinates of the point considered zero 712 * @param {Object} bounds contains the lower and upper bounds for ticks placement 713 * @private 714 */ 715 generateEquidistantTicks: function (coordsZero, bounds) { 716 var tickPosition, 717 eps = Mat.eps, 718 deltas, ticksDelta, 719 // ev_mia = this.evalVisProp('minorticksinarrow'), 720 // ev_maa = this.evalVisProp('minorticksinarrow'), 721 // ev_mla = this.evalVisProp('minorticksinarrow'), 722 ev_mt = this.evalVisProp('minorticks'); 723 724 // Determine a proposed distance between major ticks in user units 725 ticksDelta = this.getDistanceMajorTicks(); 726 727 // Obsolete, since this.equidistant is always true at this point 728 // ticksDelta = this.equidistant ? this.ticksFunction(1) : this.ticksDelta; 729 730 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 731 // Calculate x and y distances between two points on the line which are 1 unit apart 732 // In essence, these are cosine and sine. 733 deltas = this.getXandYdeltas(); 734 } 735 736 ticksDelta *= this.evalVisProp('scale'); 737 738 // In case of insertTicks, adjust ticks distance to satisfy the minTicksDistance restriction. 739 // if (ev_it) { // } && this.minTicksDistance > Mat.eps) { 740 // ticksDelta = this.adjustTickDistance(ticksDelta, coordsZero, deltas); 741 // } 742 743 // Convert ticksdelta to the distance between two minor ticks 744 ticksDelta /= (ev_mt + 1); 745 this.ticksDelta = ticksDelta; 746 747 if (ticksDelta < Mat.eps) { 748 return; 749 } 750 if (Math.abs(bounds.upper - bounds.lower) > ticksDelta * 2048) { 751 JXG.warn("JSXGraph ticks: too many ticks (>2048). Please increase ticksDistance."); 752 return; 753 } 754 755 // Position ticks from zero to the positive side while not reaching the upper boundary 756 tickPosition = 0; 757 if (!this.evalVisProp('drawzero')) { 758 tickPosition = ticksDelta; 759 } 760 if (tickPosition < bounds.lower) { 761 // Jump from 0 to bounds.lower 762 tickPosition = Math.floor((bounds.lower - eps) / ticksDelta) * ticksDelta; 763 } 764 while (tickPosition <= bounds.upper + eps) { 765 // Only draw ticks when we are within bounds, ignore case where tickPosition < lower < upper 766 if (tickPosition >= bounds.lower - eps) { 767 this.processTickPosition(coordsZero, tickPosition, ticksDelta, deltas); 768 } 769 tickPosition += ticksDelta; 770 771 // Emergency out (probably obsolete) 772 if (bounds.upper - tickPosition > ticksDelta * 10000) { 773 break; 774 } 775 } 776 777 // Position ticks from zero (not inclusive) to the negative side while not reaching the lower boundary 778 tickPosition = -ticksDelta; 779 if (tickPosition > bounds.upper) { 780 // Jump from -ticksDelta to bounds.upper 781 tickPosition = Math.ceil((bounds.upper + eps) / (-ticksDelta)) * (-ticksDelta); 782 } 783 while (tickPosition >= bounds.lower - eps) { 784 // Only draw ticks when we are within bounds, ignore case where lower < upper < tickPosition 785 if (tickPosition <= bounds.upper + eps) { 786 this.processTickPosition(coordsZero, tickPosition, ticksDelta, deltas); 787 } 788 tickPosition -= ticksDelta; 789 790 // Emergency out (probably obsolete) 791 if (tickPosition - bounds.lower > ticksDelta * 10000) { 792 break; 793 } 794 } 795 }, 796 797 /** 798 * Calculates the distance between two major ticks in user units. 799 * <ul> 800 * <li> If the attribute "insertTicks" is false, the value of the attribute 801 * "ticksDistance" is returned. The attribute "minTicksDistance" is ignored in this case. 802 * <li> If the attribute "insertTicks" is true, the attribute "ticksDistance" is ignored. 803 * The distance between two major ticks is computed 804 * as <i>a 10<sup>i</sup></i>, where <i>a</i> is one of <i>{1, 2, 5}</i> and 805 * the number <i>a 10<sup>i</sup></i> is maximized such that there are approximately 806 * 6 major ticks and there are at least "minTicksDistance" pixel between minor ticks. 807 * The latter restriction has priority over the number of major ticks. 808 * </ul> 809 * @returns Number 810 * @private 811 */ 812 getDistanceMajorTicks: function () { 813 var delta, delta2, 814 b, d, dist, 815 scale, 816 numberMajorTicks = 5, 817 maxDist, minDist, ev_minti; 818 819 if (this.evalVisProp('insertticks')) { 820 // Case of insertTicks==true: 821 // Here, we ignore the attribute 'margin' 822 b = this.getLowerAndUpperBounds(this.getZeroCoordinates(), ''); 823 824 dist = (b.upper - b.lower); 825 scale = this.evalVisProp('scale'); 826 827 maxDist = dist / (numberMajorTicks + 1) / scale; 828 minDist = this.evalVisProp('minticksdistance') / scale; 829 ev_minti = this.evalVisProp('minorticks'); 830 831 d = this.getXandYdeltas(); 832 d.x *= this.board.unitX; 833 d.y *= this.board.unitY; 834 minDist /= Mat.hypot(d.x, d.y); 835 minDist *= (ev_minti + 1); 836 837 // Determine minimal delta to fulfill the minTicksDistance constraint 838 delta = Math.pow(10, Math.floor(Math.log(minDist) / Math.LN10)); 839 if (2 * delta >= minDist) { 840 delta *= 2; 841 } else if (5 * delta >= minDist) { 842 delta *= 5; 843 } 844 845 // Determine maximal delta to fulfill the constraint to have approx. "numberMajorTicks" majorTicks 846 delta2 = Math.pow(10, Math.floor(Math.log(maxDist) / Math.LN10)); 847 if (5 * delta2 < maxDist) { 848 delta2 *= 5; 849 } else if (2 * delta2 < maxDist) { 850 delta2 *= 2; 851 } 852 // Take the larger value of the two delta's, that is 853 // minTicksDistance has priority over numberMajorTicks 854 delta = Math.max(delta, delta2); 855 856 // < v1.6.0: 857 // delta = Math.pow(10, Math.floor(Math.log(0.6 * dist) / Math.LN10)); 858 // if (false && dist <= 6 * delta) { 859 // delta *= 0.5; 860 // } 861 return delta; 862 } 863 864 // Case of insertTicks==false 865 return this.evalVisProp('ticksdistance'); 866 }, 867 868 // /** 869 // * Auxiliary method used by {@link JXG.Ticks#generateEquidistantTicks} to adjust the 870 // * distance between two ticks depending on {@link JXG.Ticks#minTicksDistance} value 871 // * 872 // * @param {Number} ticksDelta distance between two major ticks in user coordinates 873 // * @param {JXG.Coords} coordsZero coordinates of the point considered zero 874 // * @param {Object} deltas x and y distance in pixel between two user units 875 // * @param {Object} bounds upper and lower bound of the tick positions in user units. 876 // * @private 877 // */ 878 // adjustTickDistance: function (ticksDelta, coordsZero, deltas) { 879 // var nx, 880 // ny, 881 // // bounds, 882 // distScr, 883 // sgn = 1, 884 // ev_mintd = this.evalVisProp('minticksdistance'), 885 // ev_minti = this.evalVisProp('minorticks'); 886 887 // if (this.line.elementClass === Const.OBJECT_CLASS_CURVE) { 888 // return ticksDelta; 889 // } 890 // // Seems to be ignored: 891 // // bounds = this.getLowerAndUpperBounds(coordsZero, "ticksdistance"); 892 893 // // distScr is the distance between two major Ticks in pixel 894 // nx = coordsZero.usrCoords[1] + deltas.x * ticksDelta; 895 // ny = coordsZero.usrCoords[2] + deltas.y * ticksDelta; 896 // distScr = coordsZero.distance( 897 // Const.COORDS_BY_SCREEN, 898 // new Coords(Const.COORDS_BY_USER, [nx, ny], this.board) 899 // ); 900 // // console.log(deltas, distScr, this.board.unitX, this.board.unitY, "ticksDelta:", ticksDelta); 901 902 // if (ticksDelta === 0.0) { 903 // return 0.0; 904 // } 905 906 // // console.log(":", distScr, ev_minti + 1, distScr / (ev_minti + 1), ev_mintd) 907 // while (false && distScr / (ev_minti + 1) < ev_mintd) { 908 // if (sgn === 1) { 909 // ticksDelta *= 2; 910 // } else { 911 // ticksDelta *= 5; 912 // } 913 // sgn *= -1; 914 915 // nx = coordsZero.usrCoords[1] + deltas.x * ticksDelta; 916 // ny = coordsZero.usrCoords[2] + deltas.y * ticksDelta; 917 // distScr = coordsZero.distance( 918 // Const.COORDS_BY_SCREEN, 919 // new Coords(Const.COORDS_BY_USER, [nx, ny], this.board) 920 // ); 921 // } 922 923 // return ticksDelta; 924 // }, 925 926 /** 927 * Auxiliary method used by {@link JXG.Ticks#generateEquidistantTicks} to create a tick 928 * in the line at the given tickPosition. 929 * 930 * @param {JXG.Coords} coordsZero coordinates of the point considered zero 931 * @param {Number} tickPosition current tick position relative to zero 932 * @param {Number} ticksDelta distance between two major ticks in user coordinates 933 * @param {Object} deltas x and y distance between two major ticks 934 * @private 935 */ 936 processTickPosition: function (coordsZero, tickPosition, ticksDelta, deltas) { 937 var x, 938 y, 939 tickCoords, 940 ti, 941 isLabelPosition, 942 ticksPerLabel = this.evalVisProp('ticksperlabel'), 943 labelVal = null; 944 945 // Calculates tick coordinates 946 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 947 x = coordsZero.usrCoords[1] + tickPosition * deltas.x; 948 y = coordsZero.usrCoords[2] + tickPosition * deltas.y; 949 } else { 950 x = this.line.X(coordsZero + tickPosition); 951 y = this.line.Y(coordsZero + tickPosition); 952 } 953 tickCoords = new Coords(Const.COORDS_BY_USER, [x, y], this.board); 954 if (this.line.elementClass === Const.OBJECT_CLASS_CURVE) { 955 labelVal = coordsZero + tickPosition; 956 this.setTicksSizeVariables(labelVal); 957 } 958 959 // Test if tick is a major tick. 960 // This is the case if tickPosition/ticksDelta is 961 // a multiple of the number of minorticks+1 962 tickCoords.major = 963 Math.round(tickPosition / ticksDelta) % 964 (this.evalVisProp('minorticks') + 1) === 965 0; 966 967 if (!ticksPerLabel) { 968 // In case of null, 0 or false, majorTicks are labelled 969 ticksPerLabel = this.evalVisProp('minorticks') + 1; 970 } 971 isLabelPosition = Math.round(tickPosition / ticksDelta) % ticksPerLabel === 0; 972 973 // Compute the start position and the end position of a tick. 974 // If both positions are out of the canvas, ti is empty. 975 ti = this.createTickPath(tickCoords, tickCoords.major); 976 if (ti.length === 3) { 977 this.ticks.push(ti); 978 if (isLabelPosition && this.evalVisProp('drawlabels')) { 979 // Create a label at this position 980 this.labelsData.push( 981 this.generateLabelData( 982 this.generateLabelText(tickCoords, coordsZero, labelVal), 983 tickCoords, 984 this.ticks.length 985 ) 986 ); 987 } else { 988 // minor ticks have no labels 989 this.labelsData.push(null); 990 } 991 } 992 }, 993 994 /** 995 * Creates ticks coordinates and labels based on {@link JXG.Ticks#fixedTicks} and {@link JXG.Ticks#labels}. 996 * 997 * @param {JXG.Coords} coordsZero Coordinates of the point considered zero 998 * @param {Object} bounds contains the lower and upper bounds for ticks placement 999 * @private 1000 */ 1001 generateFixedTicks: function (coordsZero, bounds) { 1002 var tickCoords, 1003 labelText, 1004 i, 1005 ti, 1006 x, 1007 y, 1008 eps2 = Mat.eps, 1009 fixedTick, 1010 hasLabelOverrides = Type.isArray(this.visProp.labels), 1011 deltas, 1012 ev_dl = this.evalVisProp('drawlabels'); 1013 1014 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 1015 // Calculate x and y distances between two points on the line which are 1 unit apart 1016 // In essence, these are cosine and sine. 1017 deltas = this.getXandYdeltas(); 1018 } 1019 for (i = 0; i < this.fixedTicks.length; i++) { 1020 if (this.line.elementClass === Const.OBJECT_CLASS_LINE) { 1021 fixedTick = this.fixedTicks[i]; 1022 x = coordsZero.usrCoords[1] + fixedTick * deltas.x; 1023 y = coordsZero.usrCoords[2] + fixedTick * deltas.y; 1024 } else { 1025 fixedTick = coordsZero + this.fixedTicks[i]; 1026 x = this.line.X(fixedTick); 1027 y = this.line.Y(fixedTick); 1028 } 1029 tickCoords = new Coords(Const.COORDS_BY_USER, [x, y], this.board); 1030 1031 if (this.line.elementClass === Const.OBJECT_CLASS_CURVE) { 1032 this.setTicksSizeVariables(fixedTick); 1033 } 1034 1035 // Compute the start position and the end position of a tick. 1036 // If tick is out of the canvas, ti is empty. 1037 ti = this.createTickPath(tickCoords, true); 1038 if ( 1039 ti.length === 3 && 1040 fixedTick >= bounds.lower - eps2 && 1041 fixedTick <= bounds.upper + eps2 1042 ) { 1043 this.ticks.push(ti); 1044 1045 if (ev_dl && (hasLabelOverrides || Type.exists(this.visProp.labels[i]))) { 1046 labelText = hasLabelOverrides 1047 ? this.evalVisProp('labels.' + i) 1048 : fixedTick; 1049 this.labelsData.push( 1050 this.generateLabelData( 1051 this.generateLabelText(tickCoords, coordsZero, labelText), 1052 tickCoords, 1053 i 1054 ) 1055 ); 1056 } else { 1057 this.labelsData.push(null); 1058 } 1059 } 1060 } 1061 }, 1062 1063 /** 1064 * Calculates the x and y distances in user coordinates between two units in user space. 1065 * In essence, these are cosine and sine. The only work to be done is to determine 1066 * the direction of the line. 1067 * 1068 * @returns {Object} 1069 * @private 1070 */ 1071 getXandYdeltas: function () { 1072 var // Auxiliary points to store the start and end of the line according to its direction 1073 point1UsrCoords, 1074 point2UsrCoords, 1075 distP1P2 = this.line.point1.Dist(this.line.point2); 1076 1077 // if (this.line.type === Const.OBJECT_TYPE_AXIS) { 1078 // // When line is an Axis, direction depends on board coordinates system 1079 // // Assume line.point1 and line.point2 are in correct order 1080 // point1UsrCoords = this.line.point1.coords.usrCoords; 1081 // point2UsrCoords = this.line.point2.coords.usrCoords; 1082 // // Check if direction is incorrect, then swap 1083 // if ( 1084 // point1UsrCoords[1] > point2UsrCoords[1] || 1085 // (Math.abs(point1UsrCoords[1] - point2UsrCoords[1]) < Mat.eps && 1086 // point1UsrCoords[2] > point2UsrCoords[2]) 1087 // ) { 1088 // point1UsrCoords = this.line.point2.coords.usrCoords; 1089 // point2UsrCoords = this.line.point1.coords.usrCoords; 1090 // } 1091 // } /* if (this.line.elementClass === Const.OBJECT_CLASS_LINE)*/ else { 1092 // Line direction is always from P1 to P2 for non axis types 1093 point1UsrCoords = this.line.point1.coords.usrCoords; 1094 point2UsrCoords = this.line.point2.coords.usrCoords; 1095 // } 1096 return { 1097 x: (point2UsrCoords[1] - point1UsrCoords[1]) / distP1P2, 1098 y: (point2UsrCoords[2] - point1UsrCoords[2]) / distP1P2 1099 }; 1100 }, 1101 1102 /** 1103 * Check if (parts of) the tick is inside the canvas. The tick intersects the boundary 1104 * at two positions: [x[0], y[0]] and [x[1], y[1]] in screen coordinates. 1105 * @param {Array} x Array of length two 1106 * @param {Array} y Array of length two 1107 * @return {Boolean} true if parts of the tick are inside of the canvas or on the boundary. 1108 */ 1109 _isInsideCanvas: function (x, y, m) { 1110 var cw = this.board.canvasWidth, 1111 ch = this.board.canvasHeight; 1112 1113 if (m === undefined) { 1114 m = 0; 1115 } 1116 return ( 1117 (x[0] >= m && x[0] <= cw - m && y[0] >= m && y[0] <= ch - m) || 1118 (x[1] >= m && x[1] <= cw - m && y[1] >= m && y[1] <= ch - m) 1119 ); 1120 }, 1121 1122 /** 1123 * @param {JXG.Coords} coords Coordinates of the tick on the line. 1124 * @param {Boolean} major True if tick is major tick. 1125 * @returns {Array} Array of length 3 containing path coordinates in screen coordinates 1126 * of the tick (arrays of length 2). 3rd entry is true if major tick otherwise false. 1127 * If the tick is outside of the canvas, the return array is empty. 1128 * @private 1129 */ 1130 createTickPath: function (coords, major) { 1131 var c, 1132 lineStdForm, 1133 intersection, 1134 dxs, 1135 dys, 1136 dxr, 1137 dyr, 1138 alpha, 1139 style, 1140 x = [-2000000, -2000000], 1141 y = [-2000000, -2000000], 1142 i, r, r_max, bb, full, delta, 1143 // Used for infinite ticks 1144 te0, te1, // Tick ending visProps 1145 dists; // 'signed' distances of intersections to the parent line 1146 1147 c = coords.scrCoords; 1148 if (major) { 1149 dxs = this.dxMaj; 1150 dys = this.dyMaj; 1151 style = this.majStyle; 1152 te0 = this.evalVisProp('majortickendings.0') > 0; 1153 te1 = this.evalVisProp('majortickendings.1') > 0; 1154 } else { 1155 dxs = this.dxMin; 1156 dys = this.dyMin; 1157 style = this.minStyle; 1158 te0 = this.evalVisProp('tickendings.0') > 0; 1159 te1 = this.evalVisProp('tickendings.1') > 0; 1160 } 1161 lineStdForm = [-dys * c[1] - dxs * c[2], dys, dxs]; 1162 1163 // For all ticks regardless if of finite or infinite 1164 // tick length the intersection with the canvas border is 1165 // computed. 1166 if (major && this.evalVisProp('type') === "polar") { 1167 // polar style 1168 bb = this.board.getBoundingBox(); 1169 full = 2.0 * Math.PI; 1170 delta = full / 180; 1171 //ratio = this.board.unitY / this.board.X; 1172 1173 // usrCoords: Test if 'circle' is inside of the canvas 1174 c = coords.usrCoords; 1175 r = Mat.hypot(c[1], c[2]); 1176 r_max = Math.max( 1177 Mat.hypot(bb[0], bb[1]), 1178 Mat.hypot(bb[2], bb[3]) 1179 ); 1180 1181 if (r < r_max) { 1182 // Now, switch to screen coords 1183 x = []; 1184 y = []; 1185 for (i = 0; i <= full; i += delta) { 1186 x.push( 1187 this.board.origin.scrCoords[1] + r * Math.cos(i) * this.board.unitX 1188 ); 1189 y.push( 1190 this.board.origin.scrCoords[2] + r * Math.sin(i) * this.board.unitY 1191 ); 1192 } 1193 return [x, y, major]; 1194 } 1195 } else { 1196 // line style 1197 if (style === 'infinite') { 1198 // Problematic are infinite ticks which have set tickendings:[0,1]. 1199 // For example, this is the default setting for minor ticks 1200 if (this.evalVisProp('ignoreinfinitetickendings')) { 1201 te0 = te1 = true; 1202 } 1203 intersection = Geometry.meetLineBoard(lineStdForm, this.board); 1204 1205 if (te0 && te1) { 1206 x[0] = intersection[0].scrCoords[1]; 1207 x[1] = intersection[1].scrCoords[1]; 1208 y[0] = intersection[0].scrCoords[2]; 1209 y[1] = intersection[1].scrCoords[2]; 1210 } else { 1211 // Assuming the usrCoords of both intersections are normalized, a 'signed distance' 1212 // with respect to the parent line is computed for the intersections. The sign is 1213 // used to conclude whether the point is either at the left or right side of the 1214 // line. The magnitude can be used to compare the points and determine which point 1215 // is closest to the line. 1216 dists = [ 1217 Mat.innerProduct( 1218 intersection[0].usrCoords.slice(1, 3), 1219 this.line.stdform.slice(1, 3) 1220 ) + this.line.stdform[0], 1221 Mat.innerProduct( 1222 intersection[1].usrCoords.slice(1, 3), 1223 this.line.stdform.slice(1, 3) 1224 ) + this.line.stdform[0] 1225 ]; 1226 1227 // Reverse intersection array order if first intersection is not the leftmost one. 1228 if (dists[0] < dists[1]) { 1229 intersection.reverse(); 1230 dists.reverse(); 1231 } 1232 1233 if (te0) { // Left-infinite tick 1234 if (dists[0] < 0) { // intersections at the wrong side of line 1235 return []; 1236 } else if (dists[1] < 0) { // 'default' case, tick drawn from line to board bounds 1237 x[0] = intersection[0].scrCoords[1]; 1238 y[0] = intersection[0].scrCoords[2]; 1239 x[1] = c[1]; 1240 y[1] = c[2]; 1241 } else { // tick visible, but coords of tick on line are outside the visible area 1242 x[0] = intersection[0].scrCoords[1]; 1243 y[0] = intersection[0].scrCoords[2]; 1244 x[1] = intersection[1].scrCoords[1]; 1245 y[1] = intersection[1].scrCoords[2]; 1246 } 1247 } else if (te1) { // Right-infinite tick 1248 if (dists[1] > 0) { // intersections at the wrong side of line 1249 return []; 1250 } else if (dists[0] > 0) { // 'default' case, tick drawn from line to board bounds 1251 x[0] = c[1]; 1252 y[0] = c[2]; 1253 x[1] = intersection[1].scrCoords[1]; 1254 y[1] = intersection[1].scrCoords[2]; 1255 } else { // tick visible, but coords of tick on line are outside the visible area 1256 x[0] = intersection[0].scrCoords[1]; 1257 y[0] = intersection[0].scrCoords[2]; 1258 x[1] = intersection[1].scrCoords[1]; 1259 y[1] = intersection[1].scrCoords[2]; 1260 } 1261 } 1262 } 1263 } else { 1264 if (this.evalVisProp('face') === ">") { 1265 alpha = Math.PI / 4; 1266 } else if (this.evalVisProp('face') === "<") { 1267 alpha = -Math.PI / 4; 1268 } else { 1269 alpha = 0; 1270 } 1271 dxr = Math.cos(alpha) * dxs - Math.sin(alpha) * dys; 1272 dyr = Math.sin(alpha) * dxs + Math.cos(alpha) * dys; 1273 1274 x[0] = c[1] + dxr * te0; 1275 y[0] = c[2] - dyr * te0; 1276 x[1] = c[1]; 1277 y[1] = c[2]; 1278 1279 alpha = -alpha; 1280 dxr = Math.cos(alpha) * dxs - Math.sin(alpha) * dys; 1281 dyr = Math.sin(alpha) * dxs + Math.cos(alpha) * dys; 1282 1283 x[2] = c[1] - dxr * te1; 1284 y[2] = c[2] + dyr * te1; 1285 } 1286 1287 // Check if (parts of) the tick is inside the canvas. 1288 if (this._isInsideCanvas(x, y)) { 1289 return [x, y, major]; 1290 } 1291 } 1292 1293 return []; 1294 }, 1295 1296 /** 1297 * Format label texts. Show the desired number of digits 1298 * and use utf-8 minus sign. 1299 * @param {Number} value Number to be displayed 1300 * @return {String} The value converted into a string. 1301 * @private 1302 */ 1303 formatLabelText: function (value) { 1304 var labelText, 1305 digits, 1306 ev_um = this.evalVisProp('label.usemathjax'), 1307 ev_uk = this.evalVisProp('label.usekatex'), 1308 ev_s = this.evalVisProp('scalesymbol'); 1309 1310 if (Type.isNumber(value)) { 1311 if (this.evalVisProp('label.tofraction')) { 1312 if (ev_um) { 1313 labelText = '\\(' + Type.toFraction(value, true) + '\\)'; 1314 } else { 1315 labelText = Type.toFraction(value, ev_uk); 1316 } 1317 } else { 1318 digits = this.evalVisProp('digits'); 1319 if (this.useLocale()) { 1320 labelText = this.formatNumberLocale(value, digits); 1321 } else { 1322 labelText = (Math.round(value * 1e11) / 1e11).toString(); 1323 1324 if ( 1325 labelText.length > this.evalVisProp('maxlabellength') || 1326 labelText.indexOf("e") !== -1 1327 ) { 1328 if (this.evalVisProp('precision') !== 3 && digits === 3) { 1329 // Use the deprecated attribute "precision" 1330 digits = this.evalVisProp('precision'); 1331 } 1332 1333 //labelText = value.toPrecision(digits).toString(); 1334 labelText = value.toExponential(digits).toString(); 1335 } 1336 } 1337 } 1338 1339 if (this.evalVisProp('beautifulscientificticklabels')) { 1340 labelText = this.beautifyScientificNotationLabel(labelText); 1341 } 1342 1343 if (labelText.indexOf(".") > -1 && labelText.indexOf("e") === -1) { 1344 // trim trailing zeros 1345 labelText = labelText.replace(/0+$/, ""); 1346 // trim trailing . 1347 labelText = labelText.replace(/\.$/, ""); 1348 } 1349 } else { 1350 labelText = value.toString(); 1351 } 1352 1353 if (ev_s.length > 0) { 1354 if (labelText === "1") { 1355 labelText = ev_s; 1356 } else if (labelText === "-1") { 1357 labelText = "-" + ev_s; 1358 } else if (labelText !== "0") { 1359 labelText = labelText + ev_s; 1360 } 1361 } 1362 1363 if (this.evalVisProp('useunicodeminus')) { 1364 labelText = labelText.replace(/-/g, "\u2212"); 1365 } 1366 return labelText; 1367 }, 1368 1369 /** 1370 * Formats label texts to make labels displayed in scientific notation look beautiful. 1371 * For example, label 5.00e+6 will become 5•10⁶, label -1.00e-7 will become into -1•10⁻⁷ 1372 * @param {String} labelText - The label that we want to convert 1373 * @returns {String} If labelText was not in scientific notation, return labelText without modifications. 1374 * Otherwise returns beautified labelText with proper superscript notation. 1375 */ 1376 beautifyScientificNotationLabel: function (labelText) { 1377 var returnString; 1378 1379 if (labelText.indexOf("e") === -1) { 1380 return labelText; 1381 } 1382 1383 // Clean up trailing 0's, so numbers like 5.00e+6.0 for example become into 5e+6 1384 returnString = 1385 parseFloat(labelText.substring(0, labelText.indexOf("e"))) + 1386 labelText.substring(labelText.indexOf("e")); 1387 1388 // Replace symbols like -,0,1,2,3,4,5,6,7,8,9 with their superscript version. 1389 // Gets rid of + symbol since there is no need for it anymore. 1390 returnString = returnString.replace(/e(.*)$/g, function (match, $1) { 1391 var temp = "\u2022" + "10"; 1392 // Note: Since board ticks do not support HTTP elements like <sub>, we need to replace 1393 // all the numbers with superscript Unicode characters. 1394 temp += $1 1395 .replace(/-/g, "\u207B") 1396 .replace(/\+/g, "") 1397 .replace(/0/g, "\u2070") 1398 .replace(/1/g, "\u00B9") 1399 .replace(/2/g, "\u00B2") 1400 .replace(/3/g, "\u00B3") 1401 .replace(/4/g, "\u2074") 1402 .replace(/5/g, "\u2075") 1403 .replace(/6/g, "\u2076") 1404 .replace(/7/g, "\u2077") 1405 .replace(/8/g, "\u2078") 1406 .replace(/9/g, "\u2079"); 1407 1408 return temp; 1409 }); 1410 1411 return returnString; 1412 }, 1413 1414 /** 1415 * Creates the label text for a given tick. A value for the text can be provided as a number or string 1416 * 1417 * @param {JXG.Coords} tick The Coords-object of the tick to create a label for 1418 * @param {JXG.Coords} zero The Coords-object of line's zero 1419 * @param {Number|String} value A predefined value for this tick 1420 * @returns {String} 1421 * @private 1422 */ 1423 generateLabelText: function (tick, zero, value) { 1424 var labelText, distance; 1425 1426 // No value provided, equidistant, so assign distance as value 1427 if (!Type.exists(value)) { 1428 // could be null or undefined 1429 distance = this.getDistanceFromZero(zero, tick); 1430 if (Math.abs(distance) < Mat.eps) { 1431 // Point is zero 1432 return "0"; 1433 } 1434 value = distance / this.evalVisProp('scale'); 1435 } 1436 labelText = this.formatLabelText(value); 1437 1438 return labelText; 1439 }, 1440 1441 /** 1442 * Create a tick label data, i.e. text and coordinates 1443 * @param {String} labelText 1444 * @param {JXG.Coords} tick 1445 * @param {Number} tickNumber 1446 * @returns {Object} with properties 'x', 'y', 't' (text), 'i' (tick number) or null in case of o label 1447 * @private 1448 */ 1449 generateLabelData: function (labelText, tick, tickNumber) { 1450 var xa, ya, m, fs; 1451 1452 // Test if large portions of the label are inside of the canvas 1453 // This is the last chance to abandon the creation of the label if it is mostly 1454 // outside of the canvas. 1455 fs = this.evalVisProp('label.fontsize'); 1456 xa = [tick.scrCoords[1], tick.scrCoords[1]]; 1457 ya = [tick.scrCoords[2], tick.scrCoords[2]]; 1458 m = fs === undefined ? 12 : fs; 1459 m *= 0.5; 1460 if (!this._isInsideCanvas(xa, ya, m)) { 1461 return null; 1462 } 1463 1464 xa = this.evalVisProp('label.offset')[0]; 1465 ya = this.evalVisProp('label.offset')[1]; 1466 1467 return { 1468 x: tick.usrCoords[1] + xa / this.board.unitX, 1469 y: tick.usrCoords[2] + ya / this.board.unitY, 1470 t: labelText, 1471 i: tickNumber 1472 }; 1473 }, 1474 1475 /** 1476 * Recalculate the tick positions and the labels. 1477 * @returns {JXG.Ticks} 1478 */ 1479 update: function () { 1480 if (this.needsUpdate) { 1481 //this.visPropCalc.visible = this.evalVisProp('visible'); 1482 // A canvas with no width or height will create an endless loop, so ignore it 1483 if (this.board.canvasWidth !== 0 && this.board.canvasHeight !== 0) { 1484 this.calculateTicksCoordinates(); 1485 } 1486 // this.updateVisibility(this.line.visPropCalc.visible); 1487 // 1488 // for (var i = 0; i < this.labels.length; i++) { 1489 // if (this.labels[i] !== null) { 1490 // this.labels[i].prepareUpdate() 1491 // .updateVisibility(this.line.visPropCalc.visible) 1492 // .updateRenderer(); 1493 // } 1494 // } 1495 } 1496 1497 return this; 1498 }, 1499 1500 /** 1501 * Uses the boards renderer to update the arc. 1502 * @returns {JXG.Ticks} Reference to the object. 1503 */ 1504 updateRenderer: function () { 1505 if (!this.needsUpdate) { 1506 return this; 1507 } 1508 1509 if (this.visPropCalc.visible) { 1510 this.board.renderer.updateTicks(this); 1511 } 1512 this.updateRendererLabels(); 1513 1514 this.setDisplayRendNode(); 1515 // if (this.visPropCalc.visible != this.visPropOld.visible) { 1516 // this.board.renderer.display(this, this.visPropCalc.visible); 1517 // this.visPropOld.visible = this.visPropCalc.visible; 1518 // } 1519 1520 this.needsUpdate = false; 1521 return this; 1522 }, 1523 1524 /** 1525 * Updates the label elements of the major ticks. 1526 * 1527 * @private 1528 * @returns {JXG.Ticks} Reference to the object. 1529 */ 1530 updateRendererLabels: function () { 1531 var i, j, lenData, lenLabels, attr, label, ld, visible; 1532 1533 // The number of labels needed 1534 lenData = this.labelsData.length; 1535 // The number of labels which already exist 1536 // The existing labels are stored in this.labels[] 1537 // The new label positions and label values are stored in this.labelsData[] 1538 lenLabels = this.labels.length; 1539 1540 for (i = 0, j = 0; i < lenData; i++) { 1541 if (this.labelsData[i] === null) { 1542 // This is a tick without label 1543 continue; 1544 } 1545 1546 ld = this.labelsData[i]; 1547 if (j < lenLabels) { 1548 // Take an already existing text element 1549 label = this.labels[j]; 1550 label.setText(ld.t); 1551 label.setCoords(ld.x, ld.y); 1552 j++; 1553 } else { 1554 // A new text element is needed 1555 this.labelCounter += 1; 1556 1557 attr = Type.deepCopy(this.visProp.label); 1558 attr.isLabel = true; 1559 attr.priv = this.visProp.priv; 1560 attr.id = this.id + ld.i + "Label" + this.labelCounter; 1561 1562 label = JXG.createText(this.board, [ld.x, ld.y, ld.t], attr); 1563 this.addChild(label); 1564 label.setParents(this); 1565 label.isDraggable = false; 1566 label.dump = false; 1567 this.labels.push(label); 1568 } 1569 1570 // Look-ahead if the label inherits visibility. 1571 // If yes, update label. 1572 visible = this.evalVisProp('label.visible'); 1573 if (visible === 'inherit') { 1574 visible = this.visPropCalc.visible; 1575 } 1576 1577 label.prepareUpdate().updateVisibility(visible).updateRenderer(); 1578 1579 label.distanceX = this.evalVisProp('label.offset')[0]; 1580 label.distanceY = this.evalVisProp('label.offset')[1]; 1581 } 1582 1583 // Hide unused labels 1584 lenData = j; 1585 for (j = lenData; j < lenLabels; j++) { 1586 this.board.renderer.display(this.labels[j], false); 1587 // Tick labels have the attribute "visible: 'inherit'" 1588 // This must explicitly set to false, otherwise 1589 // this labels would be set to visible in the upcoming 1590 // update of the labels. 1591 this.labels[j].visProp.visible = this.labels[j].visPropCalc.visible = false; 1592 } 1593 1594 return this; 1595 }, 1596 1597 hideElement: function () { 1598 var i; 1599 1600 JXG.deprecated("Element.hideElement()", "Element.setDisplayRendNode()"); 1601 1602 this.visPropCalc.visible = false; 1603 this.board.renderer.display(this, false); 1604 for (i = 0; i < this.labels.length; i++) { 1605 if (Type.exists(this.labels[i])) { 1606 this.labels[i].hideElement(); 1607 } 1608 } 1609 1610 return this; 1611 }, 1612 1613 showElement: function () { 1614 var i; 1615 1616 JXG.deprecated("Element.showElement()", "Element.setDisplayRendNode()"); 1617 1618 this.visPropCalc.visible = true; 1619 this.board.renderer.display(this, false); 1620 1621 for (i = 0; i < this.labels.length; i++) { 1622 if (Type.exists(this.labels[i])) { 1623 this.labels[i].showElement(); 1624 } 1625 } 1626 1627 return this; 1628 } 1629 } 1630 ); 1631 1632 /** 1633 * @class Ticks are used as distance markers on a line or curve. 1634 * They are mainly used for axis elements and slider elements. Ticks may stretch infinitely 1635 * or finitely, which can be set with {@link Ticks#majorHeight} and {@link Ticks#minorHeight}. 1636 * <p> 1637 * There are the following ways to position the tick lines: 1638 * <ol> 1639 * <li> If an array is given as optional second parameter for the constructor 1640 * like e.g. <tt>board.create('ticks', [line, [1, 4, 5]])</tt>, then there will be (fixed) ticks at position 1641 * 1, 4 and 5 of the line. 1642 * <li> If there is only one parameter given, like e.g. <tt>board.create('ticks', [line])</tt>, the ticks will be set 1643 * equidistant across the line element. There are two variants: 1644 * <ol type="i"> 1645 * <li> Setting the attribute <tt>insertTicks:false</tt>: in this case the distance between two major ticks 1646 * is determined by the attribute <tt>ticksDistance</tt>. This distance is given in user units. 1647 * <li> Setting the attribute <tt>insertTicks:true</tt>: in this case the distance between two major ticks 1648 * is set automatically, depending on 1649 * <ul> 1650 * <li> the size of the board, 1651 * <li> the attribute <tt>minTicksDistance</tt>, which is the minimum distance between two consecutive minor ticks (in pixel). 1652 * </ul> 1653 * The distance between two major ticks is a value of the form 1654 * <i>a 10<sup>i</sup></i>, where <i>a</i> is one of <i>{1, 2, 5}</i> and 1655 * the number <i>a 10<sup>i</sup></i> is maximized such that there are approximately 1656 * 6 major ticks and there are at least "minTicksDistance" pixel between minor ticks. 1657 * </ol> 1658 * <p> 1659 * For arbitrary lines (and not axes) a "zero coordinate" is determined 1660 * which defines where the first tick is positioned. This zero coordinate 1661 * can be altered with the attribute <tt>anchor</tt>. Possible values are "left", "middle", "right" or a number. 1662 * The default value is "left". 1663 * 1664 * @pseudo 1665 * @name Ticks 1666 * @augments JXG.Ticks 1667 * @constructor 1668 * @type JXG.Ticks 1669 * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown. 1670 * @param {JXG.Line|JXG.Curve} line The parents consist of the line or curve the ticks are going to be attached to. 1671 * @param {Array} [ticks] Optional array of numbers. If given, a fixed number of static ticks is created 1672 * at these user-supplied positions. 1673 * <p> 1674 * Deprecated: Alternatively, a number defining the distance between two major ticks 1675 * can be specified. However, this is meanwhile ignored. Use attribute <tt>ticksDistance</tt> instead. 1676 * 1677 * @example 1678 * // Add ticks to line 'l1' through 'p1' and 'p2'. The major ticks are 1679 * // two units apart and 40 px long. 1680 * var p1 = board.create('point', [0, 3]); 1681 * var p2 = board.create('point', [1, 3]); 1682 * var l1 = board.create('line', [p1, p2]); 1683 * var t = board.create('ticks', [l1], { 1684 * ticksDistance: 2, 1685 * majorHeight: 40 1686 * }); 1687 * </pre><div class="jxgbox" id="JXGee7f2d68-75fc-4ec0-9931-c76918427e63" style="width: 300px; height: 300px;"></div> 1688 * <script type="text/javascript"> 1689 * (function () { 1690 * var board = JXG.JSXGraph.initBoard('JXGee7f2d68-75fc-4ec0-9931-c76918427e63', { 1691 * boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: true}); 1692 * var p1 = board.create('point', [0, 3]); 1693 * var p2 = board.create('point', [1, 3]); 1694 * var l1 = board.create('line', [p1, p2]); 1695 * var t = board.create('ticks', [l1, 2], {ticksDistance: 2, majorHeight: 40}); 1696 * })(); 1697 * </script><pre> 1698 * @example 1699 * // Create ticks labels as fractions 1700 * board.create('axis', [[0,1], [1,1]], { 1701 * ticks: { 1702 * label: { 1703 * toFraction: true, 1704 * useMathjax: true, 1705 * display: 'html', 1706 * anchorX: 'middle', 1707 * offset: [0, -10] 1708 * } 1709 * } 1710 * }); 1711 * 1712 * </pre><div id="JXG4455acb2-6bf3-4801-8887-d7fcc1e4e1da" class="jxgbox" style="width: 300px; height: 300px;"></div> 1713 * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> 1714 * <script type="text/javascript"> 1715 * (function() { 1716 * var board = JXG.JSXGraph.initBoard('JXG4455acb2-6bf3-4801-8887-d7fcc1e4e1da', 1717 * {boundingbox: [-1.2, 2.3, 1.2, -2.3], axis: true, showcopyright: false, shownavigation: false}); 1718 * board.create('axis', [[0,1], [1,1]], { 1719 * ticks: { 1720 * label: { 1721 * toFraction: true, 1722 * useMathjax: true, 1723 * display: 'html', 1724 * anchorX: 'middle', 1725 * offset: [0, -10] 1726 * } 1727 * } 1728 * }); 1729 * 1730 * })(); 1731 * 1732 * </script><pre> 1733 * 1734 * @example 1735 */ 1736 JXG.createTicks = function (board, parents, attributes) { 1737 var el, 1738 dist, 1739 attr = Type.copyAttributes(attributes, board.options, "ticks"); 1740 1741 if (parents.length < 2) { 1742 dist = attr.ticksdistance; // Will be ignored anyhow and attr.ticksDistance will be used instead 1743 } else { 1744 dist = parents[1]; 1745 } 1746 1747 if ( 1748 parents[0].elementClass === Const.OBJECT_CLASS_LINE || 1749 parents[0].elementClass === Const.OBJECT_CLASS_CURVE 1750 ) { 1751 el = new JXG.Ticks(parents[0], dist, attr); 1752 } else { 1753 throw new Error( 1754 "JSXGraph: Can't create Ticks with parent types '" + typeof parents[0] + "'." 1755 ); 1756 } 1757 1758 // deprecated 1759 if (Type.isFunction(attr.generatelabelvalue)) { 1760 el.generateLabelText = attr.generatelabelvalue; 1761 } 1762 if (Type.isFunction(attr.generatelabeltext)) { 1763 el.generateLabelText = attr.generatelabeltext; 1764 } 1765 1766 el.setParents(parents[0]); 1767 el.isDraggable = true; 1768 el.fullUpdate(parents[0].visPropCalc.visible); 1769 1770 return el; 1771 }; 1772 1773 /** 1774 * @class Hatches are collections of short line segments used to mark congruent lines or curves. 1775 * @pseudo 1776 * @name Hatch 1777 * @augments JXG.Ticks 1778 * @constructor 1779 * @type JXG.Ticks 1780 * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown. 1781 * @param {JXG.Line|JXG.curve} line The line or curve the hatch marks are going to be attached to. 1782 * @param {Number} numberofhashes Number of dashes. The distance of the hashes can be controlled with the attribute ticksDistance. 1783 * @example 1784 * // Create an axis providing two coords pairs. 1785 * var p1 = board.create('point', [0, 3]); 1786 * var p2 = board.create('point', [1, 3]); 1787 * var l1 = board.create('line', [p1, p2]); 1788 * var t = board.create('hatch', [l1, 3]); 1789 * </pre><div class="jxgbox" id="JXG4a20af06-4395-451c-b7d1-002757cf01be" style="width: 300px; height: 300px;"></div> 1790 * <script type="text/javascript"> 1791 * (function () { 1792 * var board = JXG.JSXGraph.initBoard('JXG4a20af06-4395-451c-b7d1-002757cf01be', {boundingbox: [-1, 7, 7, -1], showcopyright: false, shownavigation: false}); 1793 * var p1 = board.create('point', [0, 3]); 1794 * var p2 = board.create('point', [1, 3]); 1795 * var l1 = board.create('line', [p1, p2]); 1796 * var t = board.create('hatch', [l1, 3]); 1797 * })(); 1798 * </script><pre> 1799 * 1800 * @example 1801 * // Alter the position of the hatch 1802 * 1803 * var p = board.create('point', [-5, 0]); 1804 * var q = board.create('point', [5, 0]); 1805 * var li = board.create('line', [p, q]); 1806 * var h = board.create('hatch', [li, 2], {anchor: 0.2, ticksDistance:0.4}); 1807 * 1808 * </pre><div id="JXG05d720ee-99c9-11e6-a9c7-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 1809 * <script type="text/javascript"> 1810 * (function() { 1811 * var board = JXG.JSXGraph.initBoard('JXG05d720ee-99c9-11e6-a9c7-901b0e1b8723', 1812 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1813 * 1814 * var p = board.create('point', [-5, 0]); 1815 * var q = board.create('point', [5, 0]); 1816 * var li = board.create('line', [p, q]); 1817 * var h = board.create('hatch', [li, 2], {anchor: 0.2, ticksDistance:0.4}); 1818 * 1819 * })(); 1820 * 1821 * </script><pre> 1822 * 1823 * @example 1824 * // Alternative hatch faces 1825 * 1826 * var li = board.create('line', [[-6,0], [6,3]]); 1827 * var h1 = board.create('hatch', [li, 2], {tickEndings: [1,1], face:'|'}); 1828 * var h2 = board.create('hatch', [li, 2], {tickEndings: [1,1], face:'>', anchor: 0.3}); 1829 * var h3 = board.create('hatch', [li, 2], {tickEndings: [1,1], face:'<', anchor: 0.7}); 1830 * 1831 * </pre><div id="JXG974f7e89-eac8-4187-9aa3-fb8068e8384b" class="jxgbox" style="width: 300px; height: 300px;"></div> 1832 * <script type="text/javascript"> 1833 * (function() { 1834 * var board = JXG.JSXGraph.initBoard('JXG974f7e89-eac8-4187-9aa3-fb8068e8384b', 1835 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1836 * // Alternative hatch faces 1837 * 1838 * var li = board.create('line', [[-6,0], [6,3]]); 1839 * var h1 = board.create('hatch', [li, 2], {tickEndings: [1,1], face:'|'}); 1840 * var h2 = board.create('hatch', [li, 2], {tickEndings: [1,1], face:'>', anchor: 0.3}); 1841 * var h3 = board.create('hatch', [li, 2], {tickEndings: [1,1], face:'<', anchor: 0.7}); 1842 * 1843 * })(); 1844 * 1845 * </script><pre> 1846 * 1847 */ 1848 JXG.createHatchmark = function (board, parents, attributes) { 1849 var num, i, base, width, totalwidth, el, 1850 pos = [], 1851 attr = Type.copyAttributes(attributes, board.options, 'hatch'); 1852 1853 if ( 1854 (parents[0].elementClass !== Const.OBJECT_CLASS_LINE && 1855 parents[0].elementClass !== Const.OBJECT_CLASS_CURVE) || 1856 typeof parents[1] !== "number" 1857 ) { 1858 throw new Error( 1859 "JSXGraph: Can't create Hatch mark with parent types '" + 1860 typeof parents[0] + 1861 "' and '" + 1862 typeof parents[1] + 1863 " and ''" + 1864 typeof parents[2] + 1865 "'." 1866 ); 1867 } 1868 1869 num = parents[1]; 1870 width = attr.ticksdistance; 1871 totalwidth = (num - 1) * width; 1872 base = -totalwidth * 0.5; 1873 1874 for (i = 0; i < num; i++) { 1875 pos[i] = base + i * width; 1876 } 1877 1878 el = board.create('ticks', [parents[0], pos], attr); 1879 el.elType = 'hatch'; 1880 parents[0].inherits.push(el); 1881 1882 return el; 1883 }; 1884 1885 JXG.registerElement("ticks", JXG.createTicks); 1886 JXG.registerElement("hash", JXG.createHatchmark); 1887 JXG.registerElement("hatch", JXG.createHatchmark); 1888 1889 export default JXG.Ticks; 1890 // export default { 1891 // Ticks: JXG.Ticks, 1892 // createTicks: JXG.createTicks, 1893 // createHashmark: JXG.createHatchmark, 1894 // createHatchmark: JXG.createHatchmark 1895 // }; 1896