      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     Some functionalities in this file were developed as part of a software project
     33     with students. We would like to thank all contributors for their help:
     34
     35     Winter semester 2023/2024:
     36         Matti Kirchbach
     37  */
     38
     39 /*global JXG: true, define: true*/
     40 /*jslint nomen: true, plusplus: true*/
     41
     42 /**
     43  * @fileoverview The geometry object Line is defined in this file. Line stores all
     44  * style and functional properties that are required to draw and move a line on
     45  * a board.
     46  */
     47
     48 import JXG from "../jxg.js";
     49 import Mat from "../math/math.js";
     50 import Geometry from "../math/geometry.js";
     51 import Numerics from "../math/numerics.js";
     52 import Statistics from "../math/statistics.js";
     53 import Const from "./constants.js";
     54 import Coords from "./coords.js";
     55 import GeometryElement from "./element.js";
     56 import Type from "../utils/type.js";
     57
     58 /**
     59  * The Line class is a basic class for all kind of line objects, e.g. line, arrow, and axis. It is usually defined by two points and can
     60  * be intersected with some other geometry elements.
     61  * @class Creates a new basic line object. Do not use this constructor to create a line.
     62  * Use {@link JXG.Board#create} with
     63  * type {@link Line}, {@link Arrow}, or {@link Axis} instead.
     64  * @constructor
     65  * @augments JXG.GeometryElement
     66  * @param {String|JXG.Board} board The board the new line is drawn on.
     67  * @param {Point} p1 Startpoint of the line.
     68  * @param {Point} p2 Endpoint of the line.
     69  * @param {Object} attributes Javascript object containing attributes like name, id and colors.
     70  */
     71 JXG.Line = function (board, p1, p2, attributes) {
     72     this.constructor(board, attributes, Const.OBJECT_TYPE_LINE, Const.OBJECT_CLASS_LINE);
     73
     74     /**
     75      * Startpoint of the line. You really should not set this field directly as it may break JSXGraph's
     76      * update system so your construction won't be updated properly.
     77      * @type JXG.Point
     78      */
     79     this.point1 = this.board.select(p1);
     80
     81     /**
     82      * Endpoint of the line. Just like {@link JXG.Line.point1} you shouldn't write this field directly.
     83      * @type JXG.Point
     84      */
     85     this.point2 = this.board.select(p2);
     86
     87     /**
     88      * Array of ticks storing all the ticks on this line. Do not set this field directly and use
     89      * {@link JXG.Line#addTicks} and {@link JXG.Line#removeTicks} to add and remove ticks to and from the line.
     90      * @type Array
     91      * @see JXG.Ticks
     92      */
     93     this.ticks = [];
     94
     95     /**
     96      * Reference of the ticks created automatically when constructing an axis.
     97      * @type JXG.Ticks
     98      * @see JXG.Ticks
     99      */
    100     this.defaultTicks = null;
    101
    102     /**
    103      * If the line is the border of a polygon, the polygon object is stored, otherwise null.
    104      * @type JXG.Polygon
    105      * @default null
    106      * @private
    107      */
    108     this.parentPolygon = null;
    109
    110     /* Register line at board */
    111     this.id = this.board.setId(this, "L");
    112     this.board.renderer.drawLine(this);
    113     this.board.finalizeAdding(this);
    114
    115     this.elType = "line";
    116
    117     /* Add line as child to defining points */
    118     if (this.point1._is_new) {
    119         this.addChild(this.point1);
    120         delete this.point1._is_new;
    121     } else {
    122         this.point1.addChild(this);
    123     }
    124     if (this.point2._is_new) {
    125         this.addChild(this.point2);
    126         delete this.point2._is_new;
    127     } else {
    128         this.point2.addChild(this);
    129     }
    130
    131     this.inherits.push(this.point1, this.point2);
    132
    133     this.updateStdform(); // This is needed in the following situation:
    134     // * the line is defined by three coordinates
    135     // * and it will have a glider
    136     // * and board.suspendUpdate() has been called.
    137
    138     // create Label
    139     this.createLabel();
    140
    141     this.methodMap = JXG.deepCopy(this.methodMap, {
    142         point1: "point1",
    143         point2: "point2",
    144         getSlope: "Slope",
    145         Slope: "Slope",
    146         Direction: "Direction",
    147         getRise: "getRise",
    148         Rise: "getRise",
    149         getYIntersect: "getRise",
    150         YIntersect: "getRise",
    151         getAngle: "getAngle",
    152         Angle: "getAngle",
    153         L: "L",
    154         length: "L",
    155         setFixedLength: "setFixedLength",
    156         setStraight: "setStraight"
    157     });
    158 };
    159
    160 JXG.Line.prototype = new GeometryElement();
    161
    162 JXG.extend(
    163     JXG.Line.prototype,
    164     /** @lends JXG.Line.prototype */ {
    165         /**
    166          * Checks whether (x,y) is near the line.
    167          * @param {Number} x Coordinate in x direction, screen coordinates.
    168          * @param {Number} y Coordinate in y direction, screen coordinates.
    169          * @returns {Boolean} True if (x,y) is near the line, False otherwise.
    170          */
    171         hasPoint: function (x, y) {
    172             // Compute the stdform of the line in screen coordinates.
    173             var c = [],
    174                 v = [1, x, y],
    175                 s, vnew, p1c, p2c, d, pos, i, prec, type,
    176                 sw = this.evalVisProp('strokewidth');
    177
    178             if (Type.isObject(this.evalVisProp('precision'))) {
    179                 type = this.board._inputDevice;
    180                 prec = this.evalVisProp('precision.' + type);
    181             } else {
    182                 // 'inherit'
    183                 prec = this.board.options.precision.hasPoint;
    184             }
    185             prec += sw * 0.5;
    186
    187             c[0] =
    188                 this.stdform[0] -
    189                 (this.stdform[1] * this.board.origin.scrCoords[1]) / this.board.unitX +
    190                 (this.stdform[2] * this.board.origin.scrCoords[2]) / this.board.unitY;
    191             c[1] = this.stdform[1] / this.board.unitX;
    192             c[2] = this.stdform[2] / -this.board.unitY;
    193
    194             s = Geometry.distPointLine(v, c);
    195             if (isNaN(s) || s > prec) {
    196                 return false;
    197             }
    198
    199             if (
    200                 this.evalVisProp('straightfirst') &&
    201                 this.evalVisProp('straightlast')
    202             ) {
    203                 return true;
    204             }
    205
    206             // If the line is a ray or segment we have to check if the projected point is between P1 and P2.
    207             p1c = this.point1.coords;
    208             p2c = this.point2.coords;
    209
    210             // Project the point orthogonally onto the line
    211             vnew = [0, c[1], c[2]];
    212             // Orthogonal line to c through v
    213             vnew = Mat.crossProduct(vnew, v);
    214             // Intersect orthogonal line with line
    215             vnew = Mat.crossProduct(vnew, c);
    216
    217             // Normalize the projected point
    218             vnew[1] /= vnew[0];
    219             vnew[2] /= vnew[0];
    220             vnew[0] = 1;
    221
    222             vnew = new Coords(Const.COORDS_BY_SCREEN, vnew.slice(1), this.board).usrCoords;
    223             d = p1c.distance(Const.COORDS_BY_USER, p2c);
    224             p1c = p1c.usrCoords.slice(0);
    225             p2c = p2c.usrCoords.slice(0);
    226
    227             // The defining points are identical
    228             if (d < Mat.eps) {
    229                 pos = 0;
    230             } else {
    231                 /*
    232                  * Handle the cases, where one of the defining points is an ideal point.
    233                  * d is set to something close to infinity, namely 1/eps.
    234                  * The ideal point is (temporarily) replaced by a finite point which has
    235                  * distance d from the other point.
    236                  * This is accomplished by extracting the x- and y-coordinates (x,y)=:v of the ideal point.
    237                  * v determines the direction of the line. v is normalized, i.e. set to length 1 by dividing through its length.
    238                  * Finally, the new point is the sum of the other point and v*d.
    239                  *
    240                  */
    241
    242                 // At least one point is an ideal point
    243                 if (d === Number.POSITIVE_INFINITY) {
    244                     d = 1 / Mat.eps;
    245
    246                     // The second point is an ideal point
    247                     if (Math.abs(p2c[0]) < Mat.eps) {
    248                         d /= Geometry.distance([0, 0, 0], p2c);
    249                         p2c = [1, p1c[1] + p2c[1] * d, p1c[2] + p2c[2] * d];
    250                         // The first point is an ideal point
    251                     } else {
    252                         d /= Geometry.distance([0, 0, 0], p1c);
    253                         p1c = [1, p2c[1] + p1c[1] * d, p2c[2] + p1c[2] * d];
    254                     }
    255                 }
    256                 i = 1;
    257                 d = p2c[i] - p1c[i];
    258
    259                 if (Math.abs(d) < Mat.eps) {
    260                     i = 2;
    261                     d = p2c[i] - p1c[i];
    262                 }
    263                 pos = (vnew[i] - p1c[i]) / d;
    264             }
    265
    266             if (!this.evalVisProp('straightfirst') && pos < 0) {
    267                 return false;
    268             }
    269
    270             return !(!this.evalVisProp('straightlast') && pos > 1);
    271         },
    272
    273         // documented in base/element
    274         update: function () {
    275             var funps;
    276
    277             if (!this.needsUpdate) {
    278                 return this;
    279             }
    280
    281             if (this.constrained) {
    282                 if (Type.isFunction(this.funps)) {
    283                     funps = this.funps();
    284                     if (funps && funps.length && funps.length === 2) {
    285                         this.point1 = funps[0];
    286                         this.point2 = funps[1];
    287                     }
    288                 } else {
    289                     if (Type.isFunction(this.funp1)) {
    290                         funps = this.funp1();
    291                         if (Type.isPoint(funps)) {
    292                             this.point1 = funps;
    293                         } else if (funps && funps.length && funps.length === 2) {
    294                             this.point1.setPositionDirectly(Const.COORDS_BY_USER, funps);
    295                         }
    296                     }
    297
    298                     if (Type.isFunction(this.funp2)) {
    299                         funps = this.funp2();
    300                         if (Type.isPoint(funps)) {
    301                             this.point2 = funps;
    302                         } else if (funps && funps.length && funps.length === 2) {
    303                             this.point2.setPositionDirectly(Const.COORDS_BY_USER, funps);
    304                         }
    305                     }
    306                 }
    307             }
    308
    309             this.updateSegmentFixedLength();
    310             this.updateStdform();
    311
    312             if (this.evalVisProp('trace')) {
    313                 this.cloneToBackground(true);
    314             }
    315
    316             return this;
    317         },
    318
    319         /**
    320          * Update segments with fixed length and at least one movable point.
    321          * @private
    322          */
    323         updateSegmentFixedLength: function () {
    324             var d, d_new, d1, d2, drag1, drag2, x, y;
    325
    326             if (!this.hasFixedLength) {
    327                 return this;
    328             }
    329
    330             // Compute the actual length of the segment
    331             d = this.point1.Dist(this.point2);
    332             // Determine the length the segment ought to have
    333             d_new = (this.evalVisProp('nonnegativeonly')) ?
    334                 Math.max(0.0, this.fixedLength()) :
    335                 Math.abs(this.fixedLength());
    336
    337             // Distances between the two points and their respective
    338             // position before the update
    339             d1 = this.fixedLengthOldCoords[0].distance(
    340                 Const.COORDS_BY_USER,
    341                 this.point1.coords
    342             );
    343             d2 = this.fixedLengthOldCoords[1].distance(
    344                 Const.COORDS_BY_USER,
    345                 this.point2.coords
    346             );
    347
    348             // If the position of the points or the fixed length function has been changed we have to work.
    349             if (d1 > Mat.eps || d2 > Mat.eps || d !== d_new) {
    350                 drag1 =
    351                     this.point1.isDraggable &&
    352                     this.point1.type !== Const.OBJECT_TYPE_GLIDER &&
    353                     !this.point1.evalVisProp('fixed');
    354                 drag2 =
    355                     this.point2.isDraggable &&
    356                     this.point2.type !== Const.OBJECT_TYPE_GLIDER &&
    357                     !this.point2.evalVisProp('fixed');
    358
    359                 // First case: the two points are different
    360                 // Then we try to adapt the point that was not dragged
    361                 // If this point can not be moved (e.g. because it is a glider)
    362                 // we try move the other point
    363                 if (d > Mat.eps) {
    364                     if ((d1 > d2 && drag2) || (d1 <= d2 && drag2 && !drag1)) {
    365                         this.point2.setPositionDirectly(Const.COORDS_BY_USER, [
    366                             this.point1.X() + ((this.point2.X() - this.point1.X()) * d_new) / d,
    367                             this.point1.Y() + ((this.point2.Y() - this.point1.Y()) * d_new) / d
    368                         ]);
    369                         this.point2.fullUpdate();
    370                     } else if ((d1 <= d2 && drag1) || (d1 > d2 && drag1 && !drag2)) {
    371                         this.point1.setPositionDirectly(Const.COORDS_BY_USER, [
    372                             this.point2.X() + ((this.point1.X() - this.point2.X()) * d_new) / d,
    373                             this.point2.Y() + ((this.point1.Y() - this.point2.Y()) * d_new) / d
    374                         ]);
    375                         this.point1.fullUpdate();
    376                     }
    377                     // Second case: the two points are identical. In this situation
    378                     // we choose a random direction.
    379                 } else {
    380                     x = Math.random() - 0.5;
    381                     y = Math.random() - 0.5;
    382                     d = Mat.hypot(x, y);
    383
    384                     if (drag2) {
    385                         this.point2.setPositionDirectly(Const.COORDS_BY_USER, [
    386                             this.point1.X() + (x * d_new) / d,
    387                             this.point1.Y() + (y * d_new) / d
    388                         ]);
    389                         this.point2.fullUpdate();
    390                     } else if (drag1) {
    391                         this.point1.setPositionDirectly(Const.COORDS_BY_USER, [
    392                             this.point2.X() + (x * d_new) / d,
    393                             this.point2.Y() + (y * d_new) / d
    394                         ]);
    395                         this.point1.fullUpdate();
    396                     }
    397                 }
    398                 // Finally, we save the position of the two points.
    399                 this.fixedLengthOldCoords[0].setCoordinates(
    400                     Const.COORDS_BY_USER,
    401                     this.point1.coords.usrCoords
    402                 );
    403                 this.fixedLengthOldCoords[1].setCoordinates(
    404                     Const.COORDS_BY_USER,
    405                     this.point2.coords.usrCoords
    406                 );
    407             }
    408
    409             return this;
    410         },
    411
    412         /**
    413          * Updates the stdform derived from the parent point positions.
    414          * @private
    415          */
    416         updateStdform: function () {
    417             var v = Mat.crossProduct(
    418                 this.point1.coords.usrCoords,
    419                 this.point2.coords.usrCoords
    420             );
    421
    422             this.stdform[0] = v[0];
    423             this.stdform[1] = v[1];
    424             this.stdform[2] = v[2];
    425             this.stdform[3] = 0;
    426
    427             this.normalize();
    428         },
    429
    430         /**
    431          * Uses the boards renderer to update the line.
    432          * @private
    433          */
    434         updateRenderer: function () {
    435             //var wasReal;
    436
    437             if (!this.needsUpdate) {
    438                 return this;
    439             }
    440
    441             if (this.visPropCalc.visible) {
    442                 // wasReal = this.isReal;
    443                 this.isReal =
    444                     !isNaN(
    445                         this.point1.coords.usrCoords[1] +
    446                         this.point1.coords.usrCoords[2] +
    447                         this.point2.coords.usrCoords[1] +
    448                         this.point2.coords.usrCoords[2]
    449                     ) && Mat.innerProduct(this.stdform, this.stdform, 3) >= Mat.eps * Mat.eps;
    450
    451                 if (
    452                     //wasReal &&
    453                     !this.isReal
    454                 ) {
    455                     this.updateVisibility(false);
    456                 }
    457             }
    458
    459             if (this.visPropCalc.visible) {
    460                 this.board.renderer.updateLine(this);
    461             }
    462
    463             /* Update the label if visible. */
    464             if (
    465                 this.hasLabel &&
    466                 this.visPropCalc.visible &&
    467                 this.label &&
    468                 this.label.visPropCalc.visible &&
    469                 this.isReal
    470             ) {
    471                 this.label.update();
    472                 this.board.renderer.updateText(this.label);
    473             }
    474
    475             // Update rendNode display
    476             this.setDisplayRendNode();
    477
    478             this.needsUpdate = false;
    479             return this;
    480         },
    481
    482         // /**
    483         //  * Used to generate a polynomial for a point p that lies on this line, i.e. p is collinear to
    484         //  * {@link JXG.Line#point1} and {@link JXG.Line#point2}.
    485         //  *
    486         //  * @param {JXG.Point} p The point for that the polynomial is generated.
    487         //  * @returns {Array} An array containing the generated polynomial.
    488         //  * @private
    489         //  */
    490         generatePolynomial: function (p) {
    491             var u1 = this.point1.symbolic.x,
    492                 u2 = this.point1.symbolic.y,
    493                 v1 = this.point2.symbolic.x,
    494                 v2 = this.point2.symbolic.y,
    495                 w1 = p.symbolic.x,
    496                 w2 = p.symbolic.y;
    497
    498             /*
    499              * The polynomial in this case is determined by three points being collinear:
    500              *
    501              *      U (u1,u2)      W (w1,w2)                V (v1,v2)
    502              *  ----x--------------x------------------------x----------------
    503              *
    504              *  The collinearity condition is
    505              *
    506              *      u2-w2       w2-v2
    507              *     -------  =  -------           (1)
    508              *      u1-w1       w1-v1
    509              *
    510              * Multiplying (1) with denominators and simplifying is
    511              *
    512              *    u2w1 - u2v1 + w2v1 - u1w2 + u1v2 - w1v2 = 0
    513              */
    514
    515             return [
    516                 [
    517                     "(", u2, ")*(", w1, ")-(", u2, ")*(", v1, ")+(", w2, ")*(", v1, ")-(", u1, ")*(", w2, ")+(", u1, ")*(", v2, ")-(", w1, ")*(", v2, ")"
    518                 ].join("")
    519             ];
    520         },
    521
    522         /**
    523          * Calculates the y intersect of the line.
    524          * @returns {Number} The y intersect.
    525          */
    526         getRise: function () {
    527             if (Math.abs(this.stdform[2]) >= Mat.eps) {
    528                 return -this.stdform[0] / this.stdform[2];
    529             }
    530
    531             return Infinity;
    532         },
    533
    534         /**
    535          * Calculates the slope of the line.
    536          * @returns {Number} The slope of the line or Infinity if the line is parallel to the y-axis.
    537          */
    538         Slope: function () {
    539             if (Math.abs(this.stdform[2]) >= Mat.eps) {
    540                 return -this.stdform[1] / this.stdform[2];
    541             }
    542
    543             return Infinity;
    544         },
    545
    546         /**
    547          * Alias for line.Slope
    548          * @returns {Number} The slope of the line or Infinity if the line is parallel to the y-axis.
    549          * @deprecated
    550          * @see Line#Slope
    551          */
    552         getSlope: function () {
    553             return this.Slope();
    554         },
    555
    556         /**
    557          * Determines the angle between the positive x axis and the line.
    558          * @returns {Number}
    559          */
    560         getAngle: function () {
    561             return Math.atan2(-this.stdform[1], this.stdform[2]);
    562         },
    563
    564         /**
    565          * Returns the direction vector of the line. This is an array of length two
    566          * containing the direction vector as [x, y]. It is defined as
    567          *  <li> the difference of the x- and y-coordinate of the second and first point, in case both points are finite or both points are infinite.
    568          *  <li> [x, y] coordinates of point2, in case only point2 is infinite.
    569          *  <li> [-x, -y] coordinates of point1, in case only point1 is infinite.
    570          * @function
    571          * @returns {Array} of length 2.
    572          */
    573         Direction: function () {
    574             var coords1 = this.point1.coords.usrCoords,
    575                 coords2 = this.point2.coords.usrCoords;
    576
    577             if (coords2[0] === 0 && coords1[0] !== 0) {
    578                 return coords2.slice(1);
    579             }
    580
    581             if (coords1[0] === 0 && coords2[0] !== 0) {
    582                 return [-coords1[1], -coords1[2]];
    583             }
    584
    585             return [
    586                 coords2[1] - coords1[1],
    587                 coords2[2] - coords1[2]
    588             ];
    589         },
    590
    591         /**
    592          * Returns true, if the line is vertical (if the x coordinate of the direction vector is 0).
    593          * @function
    594          * @returns {Boolean}
    595          */
    596         isVertical: function () {
    597             var dir = this.Direction();
    598             return dir[0] === 0 && dir[1] !== 0;
    599         },
    600
    601         /**
    602          * Returns true, if the line is horizontal (if the y coordinate of the direction vector is 0).
    603          * @function
    604          * @returns {Boolean}
    605          */
    606         isHorizontal: function () {
    607             var dir = this.Direction();
    608             return dir[1] === 0 && dir[0] !== 0;
    609         },
    610
    611         /**
    612          * Determines whether the line is drawn beyond {@link JXG.Line#point1} and
    613          * {@link JXG.Line#point2} and updates the line.
    614          * @param {Boolean} straightFirst True if the Line shall be drawn beyond
    615          * {@link JXG.Line#point1}, false otherwise.
    616          * @param {Boolean} straightLast True if the Line shall be drawn beyond
    617          * {@link JXG.Line#point2}, false otherwise.
    618          * @see Line#straightFirst
    619          * @see Line#straightLast
    620          * @private
    621          */
    622         setStraight: function (straightFirst, straightLast) {
    623             this.visProp.straightfirst = straightFirst;
    624             this.visProp.straightlast = straightLast;
    625
    626             this.board.renderer.updateLine(this);
    627             return this;
    628         },
    629
    630         // documented in geometry element
    631         getTextAnchor: function () {
    632             return new Coords(
    633                 Const.COORDS_BY_USER,
    634                 [
    635                     0.5 * (this.point2.X() + this.point1.X()),
    636                     0.5 * (this.point2.Y() + this.point1.Y())
    637                 ],
    638                 this.board
    639             );
    640         },
    641
    642         /**
    643          * Adjusts Label coords relative to Anchor. DESCRIPTION
    644          * @private
    645          */
    646         setLabelRelativeCoords: function (relCoords) {
    647             if (Type.exists(this.label)) {
    648                 this.label.relativeCoords = new Coords(
    649                     Const.COORDS_BY_SCREEN,
    650                     [relCoords[0], -relCoords[1]],
    651                     this.board
    652                 );
    653             }
    654         },
    655
    656         // documented in geometry element
    657         getLabelAnchor: function () {
    658             var x, y, pos,
    659                 xy, lbda, dx, dy, d,
    660                 dist = 1.5,
    661                 fs = 0,
    662                 c1 = new Coords(Const.COORDS_BY_USER, this.point1.coords.usrCoords, this.board),
    663                 c2 = new Coords(Const.COORDS_BY_USER, this.point2.coords.usrCoords, this.board),
    664                 ev_sf = this.evalVisProp('straightfirst'),
    665                 ev_sl = this.evalVisProp('straightlast');
    666
    667             if (ev_sf || ev_sl) {
    668                 Geometry.calcStraight(this, c1, c2, 0);
    669             }
    670
    671             c1 = c1.scrCoords;
    672             c2 = c2.scrCoords;
    673
    674             if (!Type.exists(this.label)) {
    675                 return new Coords(Const.COORDS_BY_SCREEN, [NaN, NaN], this.board);
    676             }
    677
    678             pos = this.label.evalVisProp('position');
    679             if (!Type.isString(pos)) {
    680                 return new Coords(Const.COORDS_BY_SCREEN, [NaN, NaN], this.board);
    681             }
    682
    683             if (pos.indexOf('right') < 0 && pos.indexOf('left') < 0) {
    684                 // Old positioning commands
    685                 switch (pos) {
    686                     case 'last':
    687                         x = c2[1];
    688                         y = c2[2];
    689                         break;
    690                     case 'first':
    691                         x = c1[1];
    692                         y = c1[2];
    693                         break;
    694                     case "lft":
    695                     case "llft":
    696                     case "ulft":
    697                         if (c1[1] < c2[1] + Mat.eps) {
    698                             x = c1[1];
    699                             y = c1[2];
    700                         } else {
    701                             x = c2[1];
    702                             y = c2[2];
    703                         }
    704                         break;
    705                     case "rt":
    706                     case "lrt":
    707                     case "urt":
    708                         if (c1[1] > c2[1] + Mat.eps) {
    709                             x = c1[1];
    710                             y = c1[2];
    711                         } else {
    712                             x = c2[1];
    713                             y = c2[2];
    714                         }
    715                         break;
    716                     default:
    717                         x = 0.5 * (c1[1] + c2[1]);
    718                         y = 0.5 * (c1[2] + c2[2]);
    719                 }
    720             } else {
    721                 // New positioning
    722                 xy = Type.parsePosition(pos);
    723                 lbda = Type.parseNumber(xy.pos, 1, 1);
    724
    725                 dx = c2[1] - c1[1];
    726                 dy = c2[2] - c1[2];
    727                 d = Mat.hypot(dx, dy);
    728
    729                 if (xy.pos.indexOf('px') >= 0 ||
    730                     xy.pos.indexOf('fr') >= 0 ||
    731                     xy.pos.indexOf('%') >= 0) {
    732                     // lbda is interpreted in screen coords
    733
    734                     if (xy.pos.indexOf('px') >= 0) {
    735                         // Pixel values are supported
    736                         lbda /= d;
    737                     }
    738
    739                     // Position along the line
    740                     x = c1[1] + lbda * dx;
    741                     y = c1[2] + lbda * dy;
    742                 } else {
    743                     // lbda is given as number or as a number string
    744                     // Then, lbda is interpreted in user coords
    745                     x = c1[1] + lbda * this.board.unitX * dx / d;
    746                     y = c1[2] + lbda * this.board.unitY * dy / d;
    747                 }
    748
    749                 // Position left or right
    750                 if (xy.side === 'left') {
    751                     dx *= -1;
    752                 } else {
    753                     dy *= -1;
    754                 }
    755                 if (Type.exists(this.label)) {
    756                     dist = 0.5 * this.label.evalVisProp('distance') / d;
    757                 }
    758                 x += dy * this.label.size[0] * dist;
    759                 y += dx * this.label.size[1] * dist;
    760             }
    761
    762             // Correct coordinates if the label seems to be outside of canvas.
    763             if (ev_sf || ev_sl) {
    764                 if (Type.exists(this.label)) {
    765                     // Does not exist during createLabel
    766                     fs = this.label.evalVisProp('fontsize');
    767                 }
    768
    769                 if (Math.abs(x) < Mat.eps) {
    770                     x = fs;
    771                 } else if (
    772                     this.board.canvasWidth + Mat.eps > x &&
    773                     x > this.board.canvasWidth - fs - Mat.eps
    774                 ) {
    775                     x = this.board.canvasWidth - fs;
    776                 }
    777
    778                 if (Mat.eps + fs > y && y > -Mat.eps) {
    779                     y = fs;
    780                 } else if (
    781                     this.board.canvasHeight + Mat.eps > y &&
    782                     y > this.board.canvasHeight - fs - Mat.eps
    783                 ) {
    784                     y = this.board.canvasHeight - fs;
    785                 }
    786             }
    787
    788             return new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board);
    789         },
    790
    791         // documented in geometry element
    792         cloneToBackground: function () {
    793             var copy = Type.getCloneObject(this),
    794                 r, s,
    795                 er;
    796
    797             copy.point1 = this.point1;
    798             copy.point2 = this.point2;
    799             copy.stdform = this.stdform;
    800
    801             s = this.getSlope();
    802             r = this.getRise();
    803             copy.getSlope = function () {
    804                 return s;
    805             };
    806             copy.getRise = function () {
    807                 return r;
    808             };
    809
    810             er = this.board.renderer.enhancedRendering;
    811             this.board.renderer.enhancedRendering = true;
    812             this.board.renderer.drawLine(copy);
    813             this.board.renderer.enhancedRendering = er;
    814             this.traces[copy.id] = copy.rendNode;
    815
    816             return this;
    817         },
    818
    819         /**
    820          * Add transformations to this line.
    821          * @param {JXG.Transformation|Array} transform Either one {@link JXG.Transformation} or an array of
    822          * {@link JXG.Transformation}s.
    823          * @returns {JXG.Line} Reference to this line object.
    824          */
    825         addTransform: function (transform) {
    826             var i,
    827                 list = Type.isArray(transform) ? transform : [transform],
    828                 len = list.length;
    829
    830             for (i = 0; i < len; i++) {
    831                 this.point1.transformations.push(list[i]);
    832                 this.point2.transformations.push(list[i]);
    833             }
    834
    835             // Why not like this?
    836             // The difference is in setting baseElement
    837             // var list = Type.isArray(transform) ? transform : [transform];
    838             // this.point1.addTransform(this, list);
    839             // this.point2.addTransform(this, list);
    840
    841             return this;
    842         },
    843
    844         // see GeometryElement.js
    845         snapToGrid: function (pos) {
    846             var c1, c2, dc, t, ticks, x, y, sX, sY;
    847
    848             if (this.evalVisProp('snaptogrid')) {
    849                 if (this.parents.length < 3) {
    850                     // Line through two points
    851                     this.point1.handleSnapToGrid(true, true);
    852                     this.point2.handleSnapToGrid(true, true);
    853                 } else if (Type.exists(pos)) {
    854                     // Free line
    855                     sX = this.evalVisProp('snapsizex');
    856                     sY = this.evalVisProp('snapsizey');
    857
    858                     c1 = new Coords(Const.COORDS_BY_SCREEN, [pos.Xprev, pos.Yprev], this.board);
    859
    860                     x = c1.usrCoords[1];
    861                     y = c1.usrCoords[2];
    862
    863                     if (
    864                         sX <= 0 &&
    865                         this.board.defaultAxes &&
    866                         this.board.defaultAxes.x.defaultTicks
    867                     ) {
    868                         ticks = this.board.defaultAxes.x.defaultTicks;
    869                         sX = ticks.ticksDelta * (ticks.evalVisProp('minorticks') + 1);
    870                     }
    871                     if (
    872                         sY <= 0 &&
    873                         this.board.defaultAxes &&
    874                         this.board.defaultAxes.y.defaultTicks
    875                     ) {
    876                         ticks = this.board.defaultAxes.y.defaultTicks;
    877                         sY = ticks.ticksDelta * (ticks.evalVisProp('minorticks') + 1);
    878                     }
    879
    880                     // if no valid snap sizes are available, don't change the coords.
    881                     if (sX > 0 && sY > 0) {
    882                         // projectCoordsToLine
    883                         /*
    884                         v = [0, this.stdform[1], this.stdform[2]];
    885                         v = Mat.crossProduct(v, c1.usrCoords);
    886                         c2 = Geometry.meetLineLine(v, this.stdform, 0, this.board);
    887                         */
    888                         c2 = Geometry.projectPointToLine({ coords: c1 }, this, this.board);
    889
    890                         dc = Statistics.subtract(
    891                             [1, Math.round(x / sX) * sX, Math.round(y / sY) * sY],
    892                             c2.usrCoords
    893                         );
    894                         t = this.board.create("transform", dc.slice(1), {
    895                             type: "translate"
    896                         });
    897                         t.applyOnce([this.point1, this.point2]);
    898                     }
    899                 }
    900             } else {
    901                 this.point1.handleSnapToGrid(false, true);
    902                 this.point2.handleSnapToGrid(false, true);
    903             }
    904
    905             return this;
    906         },
    907
    908         // see element.js
    909         snapToPoints: function () {
    910             var forceIt = this.evalVisProp('snaptopoints');
    911
    912             if (this.parents.length < 3) {
    913                 // Line through two points
    914                 this.point1.handleSnapToPoints(forceIt);
    915                 this.point2.handleSnapToPoints(forceIt);
    916             }
    917
    918             return this;
    919         },
    920
    921         /**
    922          * Treat the line as parametric curve in homogeneous coordinates, where the parameter t runs from 0 to 1.
    923          * First we transform the interval [0,1] to [-1,1].
    924          * If the line has homogeneous coordinates [c, a, b] = stdform[] then the direction of the line is [b, -a].
    925          * Now, we take one finite point that defines the line, i.e. we take either point1 or point2
    926          * (in case the line is not the ideal line).
    927          * Let the coordinates of that point be [z, x, y].
    928          * Then, the curve runs linearly from
    929          * [0, b, -a] (t=-1) to [z, x, y] (t=0)
    930          * and
    931          * [z, x, y] (t=0) to [0, -b, a] (t=1)
    932          *
    933          * @param {Number} t Parameter running from 0 to 1.
    934          * @returns {Number} X(t) x-coordinate of the line treated as parametric curve.
    935          * */
    936         X: function (t) {
    937             var x,
    938                 b = this.stdform[2];
    939
    940             x =
    941                 Math.abs(this.point1.coords.usrCoords[0]) > Mat.eps
    942                     ? this.point1.coords.usrCoords[1]
    943                     : this.point2.coords.usrCoords[1];
    944
    945             t = (t - 0.5) * 2;
    946
    947             return (1 - Math.abs(t)) * x - t * b;
    948         },
    949
    950         /**
    951          * Treat the line as parametric curve in homogeneous coordinates.
    952          * See {@link JXG.Line#X} for a detailed description.
    953          * @param {Number} t Parameter running from 0 to 1.
    954          * @returns {Number} Y(t) y-coordinate of the line treated as parametric curve.
    955          */
    956         Y: function (t) {
    957             var y,
    958                 a = this.stdform[1];
    959
    960             y =
    961                 Math.abs(this.point1.coords.usrCoords[0]) > Mat.eps
    962                     ? this.point1.coords.usrCoords[2]
    963                     : this.point2.coords.usrCoords[2];
    964
    965             t = (t - 0.5) * 2;
    966
    967             return (1 - Math.abs(t)) * y + t * a;
    968         },
    969
    970         /**
    971          * Treat the line as parametric curve in homogeneous coordinates.
    972          * See {@link JXG.Line#X} for a detailed description.
    973          *
    974          * @param {Number} t Parameter running from 0 to 1.
    975          * @returns {Number} Z(t) z-coordinate of the line treated as parametric curve.
    976          */
    977         Z: function (t) {
    978             var z =
    979                 Math.abs(this.point1.coords.usrCoords[0]) > Mat.eps
    980                     ? this.point1.coords.usrCoords[0]
    981                     : this.point2.coords.usrCoords[0];
    982
    983             t = (t - 0.5) * 2;
    984
    985             return (1 - Math.abs(t)) * z;
    986         },
    987
    988         /**
    989          * The distance between the two points defining the line.
    990          * @returns {Number}
    991          */
    992         L: function () {
    993             return this.point1.Dist(this.point2);
    994         },
    995
    996         /**
    997          * Set a new fixed length, then update the board.
    998          * @param {String|Number|function} l A string, function or number describing the new length.
    999          * @returns {JXG.Line} Reference to this line
    1000          */
    1001         setFixedLength: function (l) {
    1002             if (!this.hasFixedLength) {
    1003                 return this;
    1004             }
    1005
    1006             this.fixedLength = Type.createFunction(l, this.board);
    1007             this.hasFixedLength = true;
    1008             this.addParentsFromJCFunctions([this.fixedLength]);
    1009             this.board.update();
    1010
    1011             return this;
    1012         },
    1013
    1014         /**
    1015          * Treat the element  as a parametric curve
    1016          * @private
    1017          */
    1018         minX: function () {
    1019             return 0.0;
    1020         },
    1021
    1022         /**
    1023          * Treat the element as parametric curve
    1024          * @private
    1025          */
    1026         maxX: function () {
    1027             return 1.0;
    1028         },
    1029
    1030         // documented in geometry element
    1031         bounds: function () {
    1032             var p1c = this.point1.coords.usrCoords,
    1033                 p2c = this.point2.coords.usrCoords;
    1034
    1035             return [
    1036                 Math.min(p1c[1], p2c[1]),
    1037                 Math.max(p1c[2], p2c[2]),
    1038                 Math.max(p1c[1], p2c[1]),
    1039                 Math.min(p1c[2], p2c[2])
    1040             ];
    1041         },
    1042
    1043         // documented in GeometryElement.js
    1044         remove: function () {
    1045             this.removeAllTicks();
    1046             GeometryElement.prototype.remove.call(this);
    1047         }
    1048
    1049         // hideElement: function () {
    1050         //     var i;
    1051         //
    1052         //     GeometryElement.prototype.hideElement.call(this);
    1053         //
    1054         //     for (i = 0; i < this.ticks.length; i++) {
    1055         //         this.ticks[i].hideElement();
    1056         //     }
    1057         // },
    1058         //
    1059         // showElement: function () {
    1060         //     var i;
    1061         //     GeometryElement.prototype.showElement.call(this);
    1062         //
    1063         //     for (i = 0; i < this.ticks.length; i++) {
    1064         //         this.ticks[i].showElement();
    1065         //     }
    1066         // }
    1067
    1068     }
    1069 );
    1070
    1071 /**
    1072  * @class A general line is given by two points or three coordinates.
    1073  * By setting additional properties a line can be used as an arrow and/or axis.
    1074  * @pseudo
    1075  * @name Line
    1076  * @augments JXG.Line
    1077  * @constructor
    1078  * @type JXG.Line
    1079  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    1080  * @param {JXG.Point,array,function_JXG.Point,array,function} point1,point2 Parent elements can be two elements either of type {@link JXG.Point} or array of
    1081  * numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
    1082  * It is possible to provide a function returning an array or a point, instead of providing an array or a point.
    1083  * @param {Number,function_Number,function_Number,function} a,b,c A line can also be created providing three numbers. The line is then described by
    1084  * the set of solutions of the equation <tt>a*z+b*x+c*y = 0</tt>. For all finite points, z is normalized to the value 1.
    1085  * It is possible to provide three functions returning numbers, too.
    1086  * @param {function} f This function must return an array containing three numbers forming the line's homogeneous coordinates.
    1087  * <p>
    1088  * Additionally, a line can be created by providing a line and a transformation (or an array of transformations).
    1089  * Then, the result is a line which is the transformation of the supplied line.
    1090  * @example
    1091  * // Create a line using point and coordinates/
    1092  * // The second point will be fixed and invisible.
    1093  * var p1 = board.create('point', [4.5, 2.0]);
    1094  * var l1 = board.create('line', [p1, [1.0, 1.0]]);
    1095  * </pre><div class="jxgbox" id="JXGc0ae3461-10c4-4d39-b9be-81d74759d122" style="width: 300px; height: 300px;"></div>
    1096  * <script type="text/javascript">
    1097  *   var glex1_board = JXG.JSXGraph.initBoard('JXGc0ae3461-10c4-4d39-b9be-81d74759d122', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false});
    1098  *   var glex1_p1 = glex1_board.create('point', [4.5, 2.0]);
    1099  *   var glex1_l1 = glex1_board.create('line', [glex1_p1, [1.0, 1.0]]);
    1100  * </script><pre>
    1101  * @example
    1102  * // Create a line using three coordinates
    1103  * var l1 = board.create('line', [1.0, -2.0, 3.0]);
    1104  * </pre><div class="jxgbox" id="JXGcf45e462-f964-4ba4-be3a-c9db94e2593f" style="width: 300px; height: 300px;"></div>
    1105  * <script type="text/javascript">
    1106  *   var glex2_board = JXG.JSXGraph.initBoard('JXGcf45e462-f964-4ba4-be3a-c9db94e2593f', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false});
    1107  *   var glex2_l1 = glex2_board.create('line', [1.0, -2.0, 3.0]);
    1108  * </script><pre>
    1109  * @example
    1110  *         // Create a line (l2) as reflection of another line (l1)
    1111  *         // reflection line
    1112  *         var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
    1113  *         var reflect = board.create('transform', [li], {type: 'reflect'});
    1114  *
    1115  *         var l1 = board.create('line', [1,-5,1]);
    1116  *         var l2 = board.create('line', [l1, reflect]);
    1117  *
    1118  * </pre><div id="JXGJXGa00d7dd6-d38c-11e7-93b3-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1119  * <script type="text/javascript">
    1120  *     (function() {
    1121  *         var board = JXG.JSXGraph.initBoard('JXGJXGa00d7dd6-d38c-11e7-93b3-901b0e1b8723',
    1122  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    1123  *             // reflection line
    1124  *             var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
    1125  *             var reflect = board.create('transform', [li], {type: 'reflect'});
    1126  *
    1127  *             var l1 = board.create('line', [1,-5,1]);
    1128  *             var l2 = board.create('line', [l1, reflect]);
    1129  *     })();
    1130  *
    1131  * </script><pre>
    1132  *
    1133  * @example
    1134  * var t = board.create('transform', [2, 1.5], {type: 'scale'});
    1135  * var l1 = board.create('line', [1, -5, 1]);
    1136  * var l2 = board.create('line', [l1, t]);
    1137  *
    1138  * </pre><div id="d16d5b58-6338-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1139  * <script type="text/javascript">
    1140  *     (function() {
    1141  *         var board = JXG.JSXGraph.initBoard('d16d5b58-6338-11e8-9fb9-901b0e1b8723',
    1142  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    1143  *     var t = board.create('transform', [2, 1.5], {type: 'scale'});
    1144  *     var l1 = board.create('line', [1, -5, 1]);
    1145  *     var l2 = board.create('line', [l1, t]);
    1146  *
    1147  *     })();
    1148  *
    1149  * </script><pre>
    1150  *
    1151  * @example
    1152  * //create line between two points
    1153  * var p1 = board.create('point', [0,0]);
    1154  * var p2 = board.create('point', [2,2]);
    1155  * var l1 = board.create('line', [p1,p2], {straightFirst:false, straightLast:false});
    1156  * </pre><div id="d21d5b58-6338-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1157  * <script type="text/javascript">
    1158  *     (function() {
    1159  *         var board = JXG.JSXGraph.initBoard('d21d5b58-6338-11e8-9fb9-901b0e1b8723',
    1160  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    1161  *             var ex5p1 = board.create('point', [0,0]);
    1162  *             var ex5p2 = board.create('point', [2,2]);
    1163  *             var ex5l1 = board.create('line', [ex5p1,ex5p2], {straightFirst:false, straightLast:false});
    1164  *     })();
    1165  *
    1166  * </script><pre>
    1167  */
    1168 JXG.createLine = function (board, parents, attributes) {
    1169     var ps, el, p1, p2, i, attr,
    1170         c = [],
    1171         doTransform = false,
    1172         constrained = false,
    1173         isDraggable;
    1174
    1175     if (parents.length === 2) {
    1176         // The line is defined by two points or coordinates of two points.
    1177         // In the latter case, the points are created.
    1178         attr = Type.copyAttributes(attributes, board.options, "line", "point1");
    1179         if (Type.isArray(parents[0]) && parents[0].length > 1) {
    1180             p1 = board.create("point", parents[0], attr);
    1181         } else if (Type.isString(parents[0]) || Type.isPoint(parents[0])) {
    1182             p1 = board.select(parents[0]);
    1183         } else if (Type.isFunction(parents[0]) && Type.isPoint(parents[0]())) {
    1184             p1 = parents[0]();
    1185             constrained = true;
    1186         } else if (
    1187             Type.isFunction(parents[0]) &&
    1188             parents[0]().length &&
    1189             parents[0]().length >= 2
    1190         ) {
    1191             p1 = JXG.createPoint(board, parents[0](), attr);
    1192             constrained = true;
    1193         } else if (Type.isObject(parents[0]) && Type.isTransformationOrArray(parents[1])) {
    1194             doTransform = true;
    1195             p1 = board.create("point", [parents[0].point1, parents[1]], attr);
    1196         } else {
    1197             throw new Error(
    1198                 "JSXGraph: Can't create line with parent types '" +
    1199                 typeof parents[0] +
    1200                 "' and '" +
    1201                 typeof parents[1] +
    1202                 "'." +
    1203                 "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]], [a,b,c]"
    1204             );
    1205         }
    1206
    1207         // point 2 given by coordinates
    1208         attr = Type.copyAttributes(attributes, board.options, "line", "point2");
    1209         if (doTransform) {
    1210             p2 = board.create("point", [parents[0].point2, parents[1]], attr);
    1211         } else if (Type.isArray(parents[1]) && parents[1].length > 1) {
    1212             p2 = board.create("point", parents[1], attr);
    1213         } else if (Type.isString(parents[1]) || Type.isPoint(parents[1])) {
    1214             p2 = board.select(parents[1]);
    1215         } else if (Type.isFunction(parents[1]) && Type.isPoint(parents[1]())) {
    1216             p2 = parents[1]();
    1217             constrained = true;
    1218         } else if (
    1219             Type.isFunction(parents[1]) &&
    1220             parents[1]().length &&
    1221             parents[1]().length >= 2
    1222         ) {
    1223             p2 = JXG.createPoint(board, parents[1](), attr);
    1224             constrained = true;
    1225         } else {
    1226             throw new Error(
    1227                 "JSXGraph: Can't create line with parent types '" +
    1228                 typeof parents[0] +
    1229                 "' and '" +
    1230                 typeof parents[1] +
    1231                 "'." +
    1232                 "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]], [a,b,c]"
    1233             );
    1234         }
    1235
    1236         attr = Type.copyAttributes(attributes, board.options, "line");
    1237         el = new JXG.Line(board, p1, p2, attr);
    1238
    1239         if (constrained) {
    1240             el.constrained = true;
    1241             el.funp1 = parents[0];
    1242             el.funp2 = parents[1];
    1243         } else if (!doTransform) {
    1244             el.isDraggable = true;
    1245         }
    1246
    1247         //if (!el.constrained) {
    1248         el.setParents([p1.id, p2.id]);
    1249         //}
    1250
    1251     } else if (parents.length === 3) {
    1252         // Free line:
    1253         // Line is defined by three homogeneous coordinates.
    1254         // Also in this case points are created.
    1255         isDraggable = true;
    1256         for (i = 0; i < 3; i++) {
    1257             if (Type.isNumber(parents[i])) {
    1258                 // createFunction will just wrap a function around our constant number
    1259                 // that does nothing else but to return that number.
    1260                 c[i] = Type.createFunction(parents[i]);
    1261             } else if (Type.isFunction(parents[i])) {
    1262                 c[i] = parents[i];
    1263                 isDraggable = false;
    1264             } else {
    1265                 throw new Error(
    1266                     "JSXGraph: Can't create line with parent types '" +
    1267                     typeof parents[0] +
    1268                     "' and '" +
    1269                     typeof parents[1] +
    1270                     "' and '" +
    1271                     typeof parents[2] +
    1272                     "'." +
    1273                     "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]], [a,b,c]"
    1274                 );
    1275             }
    1276         }
    1277
    1278         // point 1 is the midpoint between (0, c, -b) and point 2. => point1 is finite.
    1279         attr = Type.copyAttributes(attributes, board.options, "line", "point1");
    1280         if (isDraggable) {
    1281             p1 = board.create("point", [
    1282                 c[2]() * c[2]() + c[1]() * c[1](),
    1283                 c[2]() - c[1]() * c[0]() + c[2](),
    1284                 -c[1]() - c[2]() * c[0]() - c[1]()
    1285             ], attr);
    1286         } else {
    1287             p1 = board.create("point", [
    1288                 function () {
    1289                     return (c[2]() * c[2]() + c[1]() * c[1]()) * 0.5;
    1290                 },
    1291                 function () {
    1292                     return (c[2]() - c[1]() * c[0]() + c[2]()) * 0.5;
    1293                 },
    1294                 function () {
    1295                     return (-c[1]() - c[2]() * c[0]() - c[1]()) * 0.5;
    1296                 }
    1297             ], attr);
    1298         }
    1299
    1300         // point 2: (b^2+c^2,-ba+c,-ca-b)
    1301         attr = Type.copyAttributes(attributes, board.options, "line", "point2");
    1302         if (isDraggable) {
    1303             p2 = board.create("point", [
    1304                 c[2]() * c[2]() + c[1]() * c[1](),
    1305                 -c[1]() * c[0]() + c[2](),
    1306                 -c[2]() * c[0]() - c[1]()
    1307             ], attr);
    1308         } else {
    1309             p2 = board.create("point", [
    1310                 function () {
    1311                     return c[2]() * c[2]() + c[1]() * c[1]();
    1312                 },
    1313                 function () {
    1314                     return -c[1]() * c[0]() + c[2]();
    1315                 },
    1316                 function () {
    1317                     return -c[2]() * c[0]() - c[1]();
    1318                 }
    1319             ], attr);
    1320         }
    1321
    1322         // If the line will have a glider and board.suspendUpdate() has been called, we
    1323         // need to compute the initial position of the two points p1 and p2.
    1324         p1.prepareUpdate().update();
    1325         p2.prepareUpdate().update();
    1326         attr = Type.copyAttributes(attributes, board.options, "line");
    1327         el = new JXG.Line(board, p1, p2, attr);
    1328         // Not yet working, because the points are not draggable.
    1329         el.isDraggable = isDraggable;
    1330         el.setParents([p1, p2]);
    1331
    1332     } else if (
    1333         // The parent array contains a function which returns two points.
    1334         parents.length === 1 &&
    1335         Type.isFunction(parents[0]) &&
    1336         parents[0]().length === 2 &&
    1337         Type.isPoint(parents[0]()[0]) &&
    1338         Type.isPoint(parents[0]()[1])
    1339     ) {
    1340         ps = parents[0]();
    1341         attr = Type.copyAttributes(attributes, board.options, "line");
    1342         el = new JXG.Line(board, ps[0], ps[1], attr);
    1343         el.constrained = true;
    1344         el.funps = parents[0];
    1345         el.setParents(ps);
    1346     } else if (
    1347         parents.length === 1 &&
    1348         Type.isFunction(parents[0]) &&
    1349         parents[0]().length === 3 &&
    1350         Type.isNumber(parents[0]()[0]) &&
    1351         Type.isNumber(parents[0]()[1]) &&
    1352         Type.isNumber(parents[0]()[2])
    1353     ) {
    1354         ps = parents[0];
    1355
    1356         attr = Type.copyAttributes(attributes, board.options, "line", "point1");
    1357         p1 = board.create("point", [
    1358             function () {
    1359                 var c = ps();
    1360
    1361                 return [
    1362                     (c[2] * c[2] + c[1] * c[1]) * 0.5,
    1363                     (c[2] - c[1] * c[0] + c[2]) * 0.5,
    1364                     (-c[1] - c[2] * c[0] - c[1]) * 0.5
    1365                 ];
    1366             }
    1367         ], attr);
    1368
    1369         attr = Type.copyAttributes(attributes, board.options, "line", "point2");
    1370         p2 = board.create("point", [
    1371             function () {
    1372                 var c = ps();
    1373
    1374                 return [
    1375                     c[2] * c[2] + c[1] * c[1],
    1376                     -c[1] * c[0] + c[2],
    1377                     -c[2] * c[0] - c[1]
    1378                 ];
    1379             }
    1380         ], attr);
    1381
    1382         attr = Type.copyAttributes(attributes, board.options, "line");
    1383         el = new JXG.Line(board, p1, p2, attr);
    1384
    1385         el.constrained = true;
    1386         el.funps = parents[0];
    1387         el.setParents([p1, p2]);
    1388     } else {
    1389         throw new Error(
    1390             "JSXGraph: Can't create line with parent types '" +
    1391             typeof parents[0] +
    1392             "' and '" +
    1393             typeof parents[1] +
    1394             "'." +
    1395             "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]], [a,b,c]"
    1396         );
    1397     }
    1398
    1399     return el;
    1400 };
    1401
    1402 JXG.registerElement("line", JXG.createLine);
    1403
    1404 /**
    1405  * @class A (line) segment defined by two points.
    1406  * It's strictly spoken just a wrapper for element {@link Line} with {@link Line#straightFirst}
    1407  * and {@link Line#straightLast} properties set to false. If there is a third variable then the
    1408  * segment has a fixed length (which may be a function, too) determined by the absolute value of
    1409  * that number.
    1410  * @pseudo
    1411  * @name Segment
    1412  * @augments JXG.Line
    1413  * @constructor
    1414  * @type JXG.Line
    1415  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    1416  * @param {JXG.Point,array_JXG.Point,array} point1,point2 Parent elements can be two elements either of type {@link JXG.Point}
    1417  * or array of numbers describing the
    1418  * coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
    1419  * @param {number,function} [length] The points are adapted - if possible - such that their distance
    1420  * is equal to the absolute value of this number.
    1421  * @see Line
    1422  * @example
    1423  * // Create a segment providing two points.
    1424  *   var p1 = board.create('point', [4.5, 2.0]);
    1425  *   var p2 = board.create('point', [1.0, 1.0]);
    1426  *   var l1 = board.create('segment', [p1, p2]);
    1427  * </pre><div class="jxgbox" id="JXGd70e6aac-7c93-4525-a94c-a1820fa38e2f" style="width: 300px; height: 300px;"></div>
    1428  * <script type="text/javascript">
    1429  *   var slex1_board = JXG.JSXGraph.initBoard('JXGd70e6aac-7c93-4525-a94c-a1820fa38e2f', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false});
    1430  *   var slex1_p1 = slex1_board.create('point', [4.5, 2.0]);
    1431  *   var slex1_p2 = slex1_board.create('point', [1.0, 1.0]);
    1432  *   var slex1_l1 = slex1_board.create('segment', [slex1_p1, slex1_p2]);
    1433  * </script><pre>
    1434  *
    1435  * @example
    1436  * // Create a segment providing two points.
    1437  *   var p1 = board.create('point', [4.0, 1.0]);
    1438  *   var p2 = board.create('point', [1.0, 1.0]);
    1439  *   // AB
    1440  *   var l1 = board.create('segment', [p1, p2]);
    1441  *   var p3 = board.create('point', [4.0, 2.0]);
    1442  *   var p4 = board.create('point', [1.0, 2.0]);
    1443  *   // CD
    1444  *   var l2 = board.create('segment', [p3, p4, 3]); // Fixed length
    1445  *   var p5 = board.create('point', [4.0, 3.0]);
    1446  *   var p6 = board.create('point', [1.0, 4.0]);
    1447  *   // EF
    1448  *   var l3 = board.create('segment', [p5, p6, function(){ return l1.L();} ]); // Fixed, but dependent length
    1449  * </pre><div class="jxgbox" id="JXG617336ba-0705-4b2b-a236-c87c28ef25be" style="width: 300px; height: 300px;"></div>
    1450  * <script type="text/javascript">
    1451  *   var slex2_board = JXG.JSXGraph.initBoard('JXG617336ba-0705-4b2b-a236-c87c28ef25be', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false});
    1452  *   var slex2_p1 = slex2_board.create('point', [4.0, 1.0]);
    1453  *   var slex2_p2 = slex2_board.create('point', [1.0, 1.0]);
    1454  *   var slex2_l1 = slex2_board.create('segment', [slex2_p1, slex2_p2]);
    1455  *   var slex2_p3 = slex2_board.create('point', [4.0, 2.0]);
    1456  *   var slex2_p4 = slex2_board.create('point', [1.0, 2.0]);
    1457  *   var slex2_l2 = slex2_board.create('segment', [slex2_p3, slex2_p4, 3]);
    1458  *   var slex2_p5 = slex2_board.create('point', [4.0, 2.0]);
    1459  *   var slex2_p6 = slex2_board.create('point', [1.0, 2.0]);
    1460  *   var slex2_l3 = slex2_board.create('segment', [slex2_p5, slex2_p6, function(){ return slex2_l1.L();}]);
    1461  * </script><pre>
    1462  *
    1463  */
    1464 JXG.createSegment = function (board, parents, attributes) {
    1465     var el, attr;
    1466
    1467     attributes.straightFirst = false;
    1468     attributes.straightLast = false;
    1469     attr = Type.copyAttributes(attributes, board.options, "segment");
    1470
    1471     el = board.create("line", parents.slice(0, 2), attr);
    1472
    1473     if (parents.length === 3) {
    1474         try {
    1475             el.hasFixedLength = true;
    1476             el.fixedLengthOldCoords = [];
    1477             el.fixedLengthOldCoords[0] = new Coords(
    1478                 Const.COORDS_BY_USER,
    1479                 el.point1.coords.usrCoords.slice(1, 3),
    1480                 board
    1481             );
    1482             el.fixedLengthOldCoords[1] = new Coords(
    1483                 Const.COORDS_BY_USER,
    1484                 el.point2.coords.usrCoords.slice(1, 3),
    1485                 board
    1486             );
    1487
    1488             el.setFixedLength(parents[2]);
    1489         } catch (err) {
    1490             throw new Error(
    1491                 "JSXGraph: Can't create segment with third parent type '" +
    1492                 typeof parents[2] +
    1493                 "'." +
    1494                 "\nPossible third parent types: number or function"
    1495             );
    1496         }
    1497         // if (Type.isNumber(parents[2])) {
    1498         //     el.fixedLength = function () {
    1499         //         return parents[2];
    1500         //     };
    1501         // } else if (Type.isFunction(parents[2])) {
    1502         //     el.fixedLength = Type.createFunction(parents[2], this.board);
    1503         // } else {
    1504         //     throw new Error(
    1505         //         "JSXGraph: Can't create segment with third parent type '" +
    1506         //             typeof parents[2] +
    1507         //             "'." +
    1508         //             "\nPossible third parent types: number or function"
    1509         //     );
    1510         // }
    1511
    1512         el.getParents = function () {
    1513             return this.parents.concat(this.fixedLength());
    1514         };
    1515
    1516     }
    1517
    1518     el.elType = "segment";
    1519
    1520     return el;
    1521 };
    1522
    1523 JXG.registerElement("segment", JXG.createSegment);
    1524
    1525 /**
    1526  * @class A segment with an arrow head.
    1527  * This element is just a wrapper for element
    1528  * {@link Line} with {@link Line#straightFirst}
    1529  * and {@link Line#straightLast} properties set to false and {@link Line#lastArrow} set to true.
    1530  * @pseudo
    1531  * @name Arrow
    1532  * @augments JXG.Line
    1533  * @constructor
    1534  * @type JXG.Line
    1535  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    1536  * @param {JXG.Point,array_JXG.Point,array} point1,point2 Parent elements can be two elements either of type {@link JXG.Point} or array of numbers describing the
    1537  * coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
    1538  * @param {Number_Number_Number} a,b,c A line can also be created providing three numbers. The line is then described by the set of solutions
    1539  * of the equation <tt>a*x+b*y+c*z = 0</tt>.
    1540  * @see Line
    1541  * @example
    1542  * // Create an arrow providing two points.
    1543  *   var p1 = board.create('point', [4.5, 2.0]);
    1544  *   var p2 = board.create('point', [1.0, 1.0]);
    1545  *   var l1 = board.create('arrow', [p1, p2]);
    1546  * </pre><div class="jxgbox" id="JXG1d26bd22-7d6d-4018-b164-4c8bc8d22ccf" style="width: 300px; height: 300px;"></div>
    1547  * <script type="text/javascript">
    1548  *   var alex1_board = JXG.JSXGraph.initBoard('JXG1d26bd22-7d6d-4018-b164-4c8bc8d22ccf', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false});
    1549  *   var alex1_p1 = alex1_board.create('point', [4.5, 2.0]);
    1550  *   var alex1_p2 = alex1_board.create('point', [1.0, 1.0]);
    1551  *   var alex1_l1 = alex1_board.create('arrow', [alex1_p1, alex1_p2]);
    1552  * </script><pre>
    1553  */
    1554 JXG.createArrow = function (board, parents, attributes) {
    1555     var el, attr;
    1556
    1557     attributes.straightFirst = false;
    1558     attributes.straightLast = false;
    1559     attr = Type.copyAttributes(attributes, board.options, "arrow");
    1560     el = board.create("line", parents, attr);
    1561     //el.setArrow(false, true);
    1562     el.type = Const.OBJECT_TYPE_VECTOR;
    1563     el.elType = "arrow";
    1564
    1565     return el;
    1566 };
    1567
    1568 JXG.registerElement("arrow", JXG.createArrow);
    1569
    1570 /**
    1571  * @class Axis is a line with optional ticks and labels.
    1572  * It's strictly spoken just a wrapper for element {@link Line} with {@link Line#straightFirst}
    1573  * and {@link Line#straightLast} properties set to true. Additionally {@link Line#lastArrow} is set to true and default {@link Ticks} will be created.
    1574  * @pseudo
    1575  * @name Axis
    1576  * @augments JXG.Line
    1577  * @constructor
    1578  * @type JXG.Line
    1579  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    1580  * @param {JXG.Point,array_JXG.Point,array} point1,point2 Parent elements can be two elements either of type {@link JXG.Point} or array of numbers describing the
    1581  * coordinates of a point. In the latter case, the point will be constructed automatically as a fixed invisible point.
    1582  * @param {Number_Number_Number} a,b,c A line can also be created providing three numbers. The line is then described by the set of solutions
    1583  * of the equation <tt>a*x+b*y+c*z = 0</tt>.
    1584  * @example
    1585  * // Create an axis providing two coords pairs.
    1586  *   var l1 = board.create('axis', [[0.0, 1.0], [1.0, 1.3]]);
    1587  * </pre><div class="jxgbox" id="JXG4f414733-624c-42e4-855c-11f5530383ae" style="width: 300px; height: 300px;"></div>
    1588  * <script type="text/javascript">
    1589  *   var axex1_board = JXG.JSXGraph.initBoard('JXG4f414733-624c-42e4-855c-11f5530383ae', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false});
    1590  *   var axex1_l1 = axex1_board.create('axis', [[0.0, 1.0], [1.0, 1.3]]);
    1591  * </script><pre>
    1592  * @example
    1593  *  // Create ticks labels as fractions
    1594  *  board.create('axis', [[0,1], [1,1]], {
    1595  *      ticks: {
    1596  *          label: {
    1597  *              toFraction: true,
    1598  *              useMathjax: false,
    1599  *              anchorX: 'middle',
    1600  *              offset: [0, -10]
    1601  *          }
    1602  *      }
    1603  *  });
    1604  *
    1605  *
    1606  * </pre><div id="JXG34174cc4-0050-4ab4-af69-e91365d0666f" class="jxgbox" style="width: 300px; height: 300px;"></div>
    1607  * <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    1608  * <script type="text/javascript">
    1609  *     (function() {
    1610  *         var board = JXG.JSXGraph.initBoard('JXG34174cc4-0050-4ab4-af69-e91365d0666f',
    1611  *             {boundingbox: [-1.2, 2.3, 1.2, -2.3], axis: true, showcopyright: false, shownavigation: false});
    1612  *             board.create('axis', [[0,1], [1,1]], {
    1613  *                 ticks: {
    1614  *                     label: {
    1615  *                         toFraction: true,
    1616  *                         useMathjax: false,
    1617  *                         anchorX: 'middle',
    1618  *                         offset: [0, -10]
    1619  *                     }
    1620  *                 }
    1621  *             });
    1622  *
    1623  *
    1624  *     })();
    1625  *
    1626  * </script><pre>
    1627  *
    1628  */
    1629 JXG.createAxis = function (board, parents, attributes) {
    1630     var axis, attr,
    1631         ancestor, ticksDist;
    1632
    1633     // Create line
    1634     attr = Type.copyAttributes(attributes, board.options, "axis");
    1635     try {
    1636         axis = board.create("line", parents, attr);
    1637     } catch (err) {
    1638         throw new Error(
    1639             "JSXGraph: Can't create axis with parent types '" +
    1640             typeof parents[0] +
    1641             "' and '" +
    1642             typeof parents[1] +
    1643             "'." +
    1644             "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]]"
    1645         );
    1646     }
    1647
    1648     axis.type = Const.OBJECT_TYPE_AXIS;
    1649     axis.isDraggable = false;
    1650     axis.point1.isDraggable = false;
    1651     axis.point2.isDraggable = false;
    1652
    1653     // Save usrCoords of points
    1654     axis._point1UsrCoordsOrg = axis.point1.coords.usrCoords.slice();
    1655     axis._point2UsrCoordsOrg = axis.point2.coords.usrCoords.slice();
    1656
    1657     for (ancestor in axis.ancestors) {
    1658         if (axis.ancestors.hasOwnProperty(ancestor)) {
    1659             axis.ancestors[ancestor].type = Const.OBJECT_TYPE_AXISPOINT;
    1660         }
    1661     }
    1662
    1663     // Create ticks
    1664     // attrTicks = attr.ticks;
    1665     if (Type.exists(attr.ticks.ticksdistance)) {
    1666         ticksDist = attr.ticks.ticksdistance;
    1667     } else if (Type.isArray(attr.ticks.ticks)) {
    1668         ticksDist = attr.ticks.ticks;
    1669     } else {
    1670         ticksDist = 1.0;
    1671     }
    1672
    1673     /**
    1674      * The ticks attached to the axis.
    1675      * @memberOf Axis.prototype
    1676      * @name defaultTicks
    1677      * @type JXG.Ticks
    1678      */
    1679     axis.defaultTicks = board.create("ticks", [axis, ticksDist], attr.ticks);
    1680     axis.defaultTicks.dump = false;
    1681     axis.elType = "axis";
    1682     axis.subs = {
    1683         ticks: axis.defaultTicks
    1684     };
    1685     axis.inherits.push(axis.defaultTicks);
    1686
    1687     axis.update = function () {
    1688         var bbox,
    1689             position, i,
    1690             direction, horizontal, vertical,
    1691             ticksAutoPos, ticksAutoPosThres, dist,
    1692             anchor, left, right,
    1693             distUsr,
    1694             newPosP1, newPosP2,
    1695             locationOrg,
    1696             visLabel, anchr, off;
    1697
    1698         if (!this.needsUpdate) {
    1699             return this;
    1700         }
    1701
    1702         bbox = this.board.getBoundingBox();
    1703         position = this.evalVisProp('position');
    1704         direction = this.Direction();
    1705         horizontal = this.isHorizontal();
    1706         vertical = this.isVertical();
    1707         ticksAutoPos = this.evalVisProp('ticksautopos');
    1708         ticksAutoPosThres = this.evalVisProp('ticksautoposthreshold');
    1709
    1710         if (horizontal) {
    1711             ticksAutoPosThres = Type.parseNumber(ticksAutoPosThres, Math.abs(bbox[1] - bbox[3]), 1 / this.board.unitX) * this.board.unitX;
    1712         } else if (vertical) {
    1713             ticksAutoPosThres = Type.parseNumber(ticksAutoPosThres, Math.abs(bbox[1] - bbox[3]), 1 / this.board.unitY) * this.board.unitY;
    1714         } else {
    1715             ticksAutoPosThres = Type.parseNumber(ticksAutoPosThres, 1, 1);
    1716         }
    1717
    1718         anchor = this.evalVisProp('anchor');
    1719         left = anchor.indexOf('left') > -1;
    1720         right = anchor.indexOf('right') > -1;
    1721
    1722         distUsr = this.evalVisProp('anchordist');
    1723         if (horizontal) {
    1724             distUsr = Type.parseNumber(distUsr, Math.abs(bbox[1] - bbox[3]), 1 / this.board.unitX);
    1725         } else if (vertical) {
    1726             distUsr = Type.parseNumber(distUsr, Math.abs(bbox[0] - bbox[2]), 1 / this.board.unitY);
    1727         } else {
    1728             distUsr = 0;
    1729         }
    1730
    1731         locationOrg = this.board.getPointLoc(this._point1UsrCoordsOrg, distUsr);
    1732
    1733         // Set position of axis
    1734         newPosP1 = this.point1.coords.usrCoords.slice();
    1735         newPosP2 = this.point2.coords.usrCoords.slice();
    1736
    1737         if (position === 'static' || (!vertical && !horizontal)) {
    1738             // Do nothing
    1739
    1740         } else if (position === 'fixed') {
    1741             if (horizontal) { // direction[1] === 0
    1742                 if ((direction[0] > 0 && right) || (direction[0] < 0 && left)) {
    1743                     newPosP1[2] = bbox[3] + distUsr;
    1744                     newPosP2[2] = bbox[3] + distUsr;
    1745                 } else if ((direction[0] > 0 && left) || (direction[0] < 0 && right)) {
    1746                     newPosP1[2] = bbox[1] - distUsr;
    1747                     newPosP2[2] = bbox[1] - distUsr;
    1748
    1749                 } else {
    1750                     newPosP1 = this._point1UsrCoordsOrg.slice();
    1751                     newPosP2 = this._point2UsrCoordsOrg.slice();
    1752                 }
    1753             }
    1754             if (vertical) { // direction[0] === 0
    1755                 if ((direction[1] > 0 && left) || (direction[1] < 0 && right)) {
    1756                     newPosP1[1] = bbox[0] + distUsr;
    1757                     newPosP2[1] = bbox[0] + distUsr;
    1758
    1759                 } else if ((direction[1] > 0 && right) || (direction[1] < 0 && left)) {
    1760                     newPosP1[1] = bbox[2] - distUsr;
    1761                     newPosP2[1] = bbox[2] - distUsr;
    1762
    1763                 } else {
    1764                     newPosP1 = this._point1UsrCoordsOrg.slice();
    1765                     newPosP2 = this._point2UsrCoordsOrg.slice();
    1766                 }
    1767             }
    1768
    1769         } else if (position === 'sticky') {
    1770             if (horizontal) { // direction[1] === 0
    1771                 if (locationOrg[1] < 0 && ((direction[0] > 0 && right) || (direction[0] < 0 && left))) {
    1772                     newPosP1[2] = bbox[3] + distUsr;
    1773                     newPosP2[2] = bbox[3] + distUsr;
    1774
    1775                 } else if (locationOrg[1] > 0 && ((direction[0] > 0 && left) || (direction[0] < 0 && right))) {
    1776                     newPosP1[2] = bbox[1] - distUsr;
    1777                     newPosP2[2] = bbox[1] - distUsr;
    1778
    1779                 } else {
    1780                     newPosP1 = this._point1UsrCoordsOrg.slice();
    1781                     newPosP2 = this._point2UsrCoordsOrg.slice();
    1782                 }
    1783             }
    1784             if (vertical) { // direction[0] === 0
    1785                 if (locationOrg[0] < 0 && ((direction[1] > 0 && left) || (direction[1] < 0 && right))) {
    1786                     newPosP1[1] = bbox[0] + distUsr;
    1787                     newPosP2[1] = bbox[0] + distUsr;
    1788
    1789                 } else if (locationOrg[0] > 0 && ((direction[1] > 0 && right) || (direction[1] < 0 && left))) {
    1790                     newPosP1[1] = bbox[2] - distUsr;
    1791                     newPosP2[1] = bbox[2] - distUsr;
    1792
    1793                 } else {
    1794                     newPosP1 = this._point1UsrCoordsOrg.slice();
    1795                     newPosP2 = this._point2UsrCoordsOrg.slice();
    1796                 }
    1797             }
    1798         }
    1799
    1800         this.point1.setPositionDirectly(JXG.COORDS_BY_USER, newPosP1);
    1801         this.point2.setPositionDirectly(JXG.COORDS_BY_USER, newPosP2);
    1802
    1803         // Set position of tick labels
    1804         if (Type.exists(this.defaultTicks)) {
    1805             visLabel = this.defaultTicks.visProp.label;
    1806             if (ticksAutoPos && (horizontal || vertical)) {
    1807
    1808                 if (!Type.exists(visLabel._anchorx_org)) {
    1809                     visLabel._anchorx_org = Type.def(visLabel.anchorx, this.board.options.text.anchorX);
    1810                 }
    1811                 if (!Type.exists(visLabel._anchory_org)) {
    1812                     visLabel._anchory_org = Type.def(visLabel.anchory, this.board.options.text.anchorY);
    1813                 }
    1814                 if (!Type.exists(visLabel._offset_org)) {
    1815                     visLabel._offset_org = visLabel.offset.slice();
    1816                 }
    1817
    1818                 off = visLabel.offset;
    1819                 if (horizontal) {
    1820                     dist = axis.point1.coords.scrCoords[2] - (this.board.canvasHeight * 0.5);
    1821
    1822                     anchr = visLabel.anchory;
    1823
    1824                     // The last position of the labels is stored in visLabel._side
    1825                     if (dist < 0 && Math.abs(dist) > ticksAutoPosThres) {
    1826                         // Put labels on top of the line
    1827                         if (visLabel._side === 'bottom') {
    1828                             // Switch position
    1829                             if (visLabel.anchory === 'top') {
    1830                                 anchr = 'bottom';
    1831                             }
    1832                             off[1] *= -1;
    1833                             visLabel._side = 'top';
    1834                         }
    1835
    1836                     } else if (dist > 0 && Math.abs(dist) > ticksAutoPosThres) {
    1837                         // Put labels below the line
    1838                         if (visLabel._side === 'top') {
    1839                             // Switch position
    1840                             if (visLabel.anchory === 'bottom') {
    1841                                 anchr = 'top';
    1842                             }
    1843                             off[1] *= -1;
    1844                             visLabel._side = 'bottom';
    1845                         }
    1846
    1847                     } else {
    1848                         // Put to original position
    1849                         anchr = visLabel._anchory_org;
    1850                         off = visLabel._offset_org.slice();
    1851
    1852                         if (anchr === 'top') {
    1853                             visLabel._side = 'bottom';
    1854                         } else if (anchr === 'bottom') {
    1855                             visLabel._side = 'top';
    1856                         } else if (off[1] < 0) {
    1857                             visLabel._side = 'bottom';
    1858                         } else {
    1859                             visLabel._side = 'top';
    1860                         }
    1861                     }
    1862
    1863                     for (i = 0; i < axis.defaultTicks.labels.length; i++) {
    1864                         this.defaultTicks.labels[i].visProp.anchory = anchr;
    1865                     }
    1866                     visLabel.anchory = anchr;
    1867
    1868                 } else if (vertical) {
    1869                     dist = axis.point1.coords.scrCoords[1] - (this.board.canvasWidth * 0.5);
    1870
    1871                     if (dist < 0 && Math.abs(dist) > ticksAutoPosThres) {
    1872                         // Put labels to the left of the line
    1873                         if (visLabel._side === 'right') {
    1874                             // Switch position
    1875                             if (visLabel.anchorx === 'left') {
    1876                                 anchr = 'right';
    1877                             }
    1878                             off[0] *= -1;
    1879                             visLabel._side = 'left';
    1880                         }
    1881
    1882                     } else if (dist > 0 && Math.abs(dist) > ticksAutoPosThres) {
    1883                         // Put labels to the right of the line
    1884                         if (visLabel._side === 'left') {
    1885                             // Switch position
    1886                             if (visLabel.anchorx === 'right') {
    1887                                 anchr = 'left';
    1888                             }
    1889                             off[0] *= -1;
    1890                             visLabel._side = 'right';
    1891                         }
    1892
    1893                     } else {
    1894                         // Put to original position
    1895                         anchr = visLabel._anchorx_org;
    1896                         off = visLabel._offset_org.slice();
    1897
    1898                         if (anchr === 'left') {
    1899                             visLabel._side = 'right';
    1900                         } else if (anchr === 'right') {
    1901                             visLabel._side = 'left';
    1902                         } else if (off[0] < 0) {
    1903                             visLabel._side = 'left';
    1904                         } else {
    1905                             visLabel._side = 'right';
    1906                         }
    1907                     }
    1908
    1909                     for (i = 0; i < axis.defaultTicks.labels.length; i++) {
    1910                         this.defaultTicks.labels[i].visProp.anchorx = anchr;
    1911                     }
    1912                     visLabel.anchorx = anchr;
    1913                 }
    1914                 visLabel.offset = off;
    1915
    1916             } else {
    1917                 delete visLabel._anchorx_org;
    1918                 delete visLabel._anchory_org;
    1919                 delete visLabel._offset_org;
    1920             }
    1921             this.defaultTicks.needsUpdate = true;
    1922         }
    1923
    1924         JXG.Line.prototype.update.call(this);
    1925
    1926         return this;
    1927     };
    1928
    1929     return axis;
    1930 };
    1931
    1932 JXG.registerElement("axis", JXG.createAxis);
    1933
    1934 /**
    1935  * @class The tangent line at a point on a line, circle, conic, turtle, or curve.
    1936  * A tangent line is always constructed
    1937  * by a point on a line, circle, or curve and describes the tangent in the point on that line, circle, or curve.
    1938  * <p>
    1939  * If the point is not on the object (line, circle, conic, curve, turtle) the output depends on the type of the object.
    1940  * For conics and circles, the polar line will be constructed. For function graphs,
    1941  * the tangent of the vertical projection of the point to the function graph is constructed. For all other objects, the tangent
    1942  * in the orthogonal projection of the point to the object will be constructed.
    1943  * @pseudo
    1944  * @name Tangent
    1945  * @augments JXG.Line
    1946  * @constructor
    1947  * @type JXG.Line
    1948  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    1949  * @param {Glider} g A glider on a line, circle, or curve.
    1950  * @param {JXG.GeometryElement} [c] Optional element for which the tangent is constructed
    1951  * @example
    1952  * // Create a tangent providing a glider on a function graph
    1953  *   var c1 = board.create('curve', [function(t){return t},function(t){return t*t*t;}]);
    1954  *   var g1 = board.create('glider', [0.6, 1.2, c1]);
    1955  *   var t1 = board.create('tangent', [g1]);
    1956  * </pre><div class="jxgbox" id="JXG7b7233a0-f363-47dd-9df5-4018d0d17a98" style="width: 400px; height: 400px;"></div>
    1957  * <script type="text/javascript">
    1958  *   var tlex1_board = JXG.JSXGraph.initBoard('JXG7b7233a0-f363-47dd-9df5-4018d0d17a98', {boundingbox: [-6, 6, 6, -6], axis: true, showcopyright: false, shownavigation: false});
    1959  *   var tlex1_c1 = tlex1_board.create('curve', [function(t){return t},function(t){return t*t*t;}]);
    1960  *   var tlex1_g1 = tlex1_board.create('glider', [0.6, 1.2, tlex1_c1]);
    1961  *   var tlex1_t1 = tlex1_board.create('tangent', [tlex1_g1]);
    1962  * </script><pre>
    1963  */
    1964 JXG.createTangent = function (board, parents, attributes) {
    1965     var p, c, j, el, tangent, attr,
    1966         getCurveTangentDir,
    1967         res, isTransformed,
    1968         slides = [];
    1969
    1970     if (parents.length === 1) {
    1971         // One argument: glider on line, circle or curve
    1972         p = parents[0];
    1973         c = p.slideObject;
    1974
    1975     } else if (parents.length === 2) {
    1976         // Two arguments: (point,line|curve|circle|conic) or (line|curve|circle|conic,point).
    1977         // In fact, for circles and conics it is the polar
    1978         if (Type.isPoint(parents[0])) {
    1979             p = parents[0];
    1980             c = parents[1];
    1981         } else if (Type.isPoint(parents[1])) {
    1982             c = parents[0];
    1983             p = parents[1];
    1984         } else {
    1985             throw new Error(
    1986                 "JSXGraph: Can't create tangent with parent types '" +
    1987                 typeof parents[0] +
    1988                 "' and '" +
    1989                 typeof parents[1] +
    1990                 "'." +
    1991                 "\nPossible parent types: [glider|point], [point,line|curve|circle|conic]"
    1992             );
    1993         }
    1994     } else {
    1995         throw new Error(
    1996             "JSXGraph: Can't create tangent with parent types '" +
    1997             typeof parents[0] +
    1998             "' and '" +
    1999             typeof parents[1] +
    2000             "'." +
    2001             "\nPossible parent types: [glider|point], [point,line|curve|circle|conic]"
    2002         );
    2003     }
    2004
    2005     attr = Type.copyAttributes(attributes, board.options, 'tangent');
    2006     if (c.elementClass === Const.OBJECT_CLASS_LINE) {
    2007         tangent = board.create("line", [c.point1, c.point2], attr);
    2008         tangent.glider = p;
    2009     } else if (
    2010         c.elementClass === Const.OBJECT_CLASS_CURVE &&
    2011         c.type !== Const.OBJECT_TYPE_CONIC
    2012     ) {
    2013         res = c.getTransformationSource();
    2014         isTransformed = res[0];
    2015         if (isTransformed) {
    2016             // Curve is result of a transformation
    2017             // We recursively collect all curves from which
    2018             // the curve is transformed.
    2019             slides.push(c);
    2020             while (res[0] && Type.exists(res[1]._transformationSource)) {
    2021                 slides.push(res[1]);
    2022                 res = res[1].getTransformationSource();
    2023             }
    2024         }
    2025
    2026         if (c.evalVisProp('curvetype') !== "plot" || isTransformed) {
    2027             // Functiongraph or parametric curve or
    2028             // transformed curve thereof.
    2029             tangent = board.create(
    2030                 "line",
    2031                 [
    2032                     function () {
    2033                         var g = c.X,
    2034                             f = c.Y,
    2035                             df, dg,
    2036                             li, i, c_org, invMat, po,
    2037                             t;
    2038
    2039                         if (p.type === Const.OBJECT_TYPE_GLIDER) {
    2040                             t = p.position;
    2041                         } else if (c.evalVisProp('curvetype') === 'functiongraph') {
    2042                             t = p.X();
    2043                         } else {
    2044                             t = Geometry.projectPointToCurve(p, c, board)[1];
    2045                         }
    2046
    2047                         // po are the coordinates of the point
    2048                         // on the "original" curve. That is the curve or
    2049                         // the original curve which is transformed (maybe multiple times)
    2050                         // to this curve.
    2051                         // t is the position of the point on the "original" curve
    2052                         po = p.Coords(true);
    2053                         if (isTransformed) {
    2054                             c_org = slides[slides.length - 1]._transformationSource;
    2055                             g = c_org.X;
    2056                             f = c_org.Y;
    2057                             for (i = 0; i < slides.length; i++) {
    2058                                 slides[i].updateTransformMatrix();
    2059                                 invMat = Mat.inverse(slides[i].transformMat);
    2060                                 po = Mat.matVecMult(invMat, po);
    2061                             }
    2062
    2063                             if (p.type !== Const.OBJECT_TYPE_GLIDER) {
    2064                                 po[1] /= po[0];
    2065                                 po[2] /= po[0];
    2066                                 po[0] /= po[0];
    2067                                 t = Geometry.projectCoordsToCurve(po[1], po[2], 0, c_org, board)[1];
    2068                             }
    2069                         }
    2070
    2071                         // li are the coordinates of the line on the "original" curve
    2072                         df = Numerics.D(f)(t);
    2073                         dg = Numerics.D(g)(t);
    2074                         li = [
    2075                             -po[1] * df + po[2] * dg,
    2076                             po[0] * df,
    2077                             -po[0] * dg
    2078                         ];
    2079
    2080                         if (isTransformed) {
    2081                             // Transform the line to the transformed curve
    2082                             for (i = slides.length - 1; i >= 0; i--) {
    2083                                 invMat = Mat.transpose(Mat.inverse(slides[i].transformMat));
    2084                                 li = Mat.matVecMult(invMat, li);
    2085                             }
    2086                         }
    2087
    2088                         return li;
    2089                     }
    2090                 ],
    2091                 attr
    2092             );
    2093
    2094             p.addChild(tangent);
    2095             // this is required for the geogebra reader to display a slope
    2096             tangent.glider = p;
    2097         } else {
    2098             // curveType 'plot': discrete data
    2099             /**
    2100              * @ignore
    2101              *
    2102              * In case of bezierDegree == 1:
    2103              * Find two points p1, p2 enclosing the glider.
    2104              * Then the equation of the line segment is: 0 = y*(x1-x2) + x*(y2-y1) + y1*x2-x1*y2,
    2105              * which is the cross product of p1 and p2.
    2106              *
    2107              * In case of bezierDegree === 3:
    2108              * The slope dy / dx of the tangent is determined. Then the
    2109              * tangent is computed as cross product between
    2110              * the glider p and [1, p.X() + dx, p.Y() + dy]
    2111              *
    2112              */
    2113             getCurveTangentDir = function (position, c, num) {
    2114                 var i = Math.floor(position),
    2115                     p1, p2, t, A, B, C, D, dx, dy, d,
    2116                     points, le;
    2117
    2118                 if (c.bezierDegree === 1) {
    2119                     if (i === c.numberPoints - 1) {
    2120                         i--;
    2121                     }
    2122                 } else if (c.bezierDegree === 3) {
    2123                     // i is start of the Bezier segment
    2124                     // t is the position in the Bezier segment
    2125                     if (c.elType === 'sector') {
    2126                         points = c.points.slice(3, c.numberPoints - 3);
    2127                         le = points.length;
    2128                     } else {
    2129                         points = c.points;
    2130                         le = points.length;
    2131                     }
    2132                     i = Math.floor((position * (le - 1)) / 3) * 3;
    2133                     t = (position * (le - 1) - i) / 3;
    2134                     if (i >= le - 1) {
    2135                         i = le - 4;
    2136                         t = 1;
    2137                     }
    2138                 } else {
    2139                     return 0;
    2140                 }
    2141
    2142                 if (i < 0) {
    2143                     return 1;
    2144                 }
    2145
    2146                 // The curve points are transformed (if there is a transformation)
    2147                 // c.X(i) is not transformed.
    2148                 if (c.bezierDegree === 1) {
    2149                     p1 = c.points[i].usrCoords;
    2150                     p2 = c.points[i + 1].usrCoords;
    2151                 } else {
    2152                     A = points[i].usrCoords;
    2153                     B = points[i + 1].usrCoords;
    2154                     C = points[i + 2].usrCoords;
    2155                     D = points[i + 3].usrCoords;
    2156                     dx = (1 - t) * (1 - t) * (B[1] - A[1]) +
    2157                         2 * (1 - t) * t * (C[1] - B[1]) +
    2158                         t * t * (D[1] - C[1]);
    2159                     dy = (1 - t) * (1 - t) * (B[2] - A[2]) +
    2160                         2 * (1 - t) * t * (C[2] - B[2]) +
    2161                         t * t * (D[2] - C[2]);
    2162                     d = Mat.hypot(dx, dy);
    2163                     dx /= d;
    2164                     dy /= d;
    2165                     p1 = p.coords.usrCoords;
    2166                     p2 = [1, p1[1] + dx, p1[2] + dy];
    2167                 }
    2168
    2169                 switch (num) {
    2170                     case 0:
    2171                         return p1[2] * p2[1] - p1[1] * p2[2];
    2172                     case 1:
    2173                         return p2[2] - p1[2];
    2174                     case 2:
    2175                         return p1[1] - p2[1];
    2176                     default:
    2177                         return [
    2178                             p1[2] * p2[1] - p1[1] * p2[2],
    2179                             p2[2] - p1[2],
    2180                             p1[1] - p2[1]
    2181                         ];
    2182                 }
    2183             };
    2184
    2185             tangent = board.create(
    2186                 "line",
    2187                 [
    2188                     function () {
    2189                         var t;
    2190
    2191                         if (p.type === Const.OBJECT_TYPE_GLIDER) {
    2192                             t = p.position;
    2193                         } else {
    2194                             t = Geometry.projectPointToCurve(p, c, board)[1];
    2195                         }
    2196
    2197                         return getCurveTangentDir(t, c);
    2198                     }
    2199                 ],
    2200                 attr
    2201             );
    2202
    2203             p.addChild(tangent);
    2204             // this is required for the geogebra reader to display a slope
    2205             tangent.glider = p;
    2206         }
    2207     } else if (c.type === Const.OBJECT_TYPE_TURTLE) {
    2208         tangent = board.create(
    2209             "line",
    2210             [
    2211                 function () {
    2212                     var i, t;
    2213                     if (p.type === Const.OBJECT_TYPE_GLIDER) {
    2214                         t = p.position;
    2215                     } else {
    2216                         t = Geometry.projectPointToTurtle(p, c, board)[1];
    2217                     }
    2218
    2219                     i = Math.floor(t);
    2220
    2221                     // run through all curves of this turtle
    2222                     for (j = 0; j < c.objects.length; j++) {
    2223                         el = c.objects[j];
    2224
    2225                         if (el.type === Const.OBJECT_TYPE_CURVE) {
    2226                             if (i < el.numberPoints) {
    2227                                 break;
    2228                             }
    2229
    2230                             i -= el.numberPoints;
    2231                         }
    2232                     }
    2233
    2234                     if (i === el.numberPoints - 1) {
    2235                         i--;
    2236                     }
    2237
    2238                     if (i < 0) {
    2239                         return [1, 0, 0];
    2240                     }
    2241
    2242                     return [
    2243                         el.Y(i) * el.X(i + 1) - el.X(i) * el.Y(i + 1),
    2244                         el.Y(i + 1) - el.Y(i),
    2245                         el.X(i) - el.X(i + 1)
    2246                     ];
    2247                 }
    2248             ],
    2249             attr
    2250         );
    2251         p.addChild(tangent);
    2252
    2253         // this is required for the geogebra reader to display a slope
    2254         tangent.glider = p;
    2255     } else if (
    2256         c.elementClass === Const.OBJECT_CLASS_CIRCLE ||
    2257         c.type === Const.OBJECT_TYPE_CONIC
    2258     ) {
    2259         // If p is not on c, the tangent is the polar.
    2260         // This construction should work on conics, too. p has to lie on c.
    2261         tangent = board.create(
    2262             "line",
    2263             [
    2264                 function () {
    2265                     return Mat.matVecMult(c.quadraticform, p.coords.usrCoords);
    2266                 }
    2267             ],
    2268             attr
    2269         );
    2270
    2271         p.addChild(tangent);
    2272         // this is required for the geogebra reader to display a slope
    2273         tangent.glider = p;
    2274     }
    2275
    2276     if (!Type.exists(tangent)) {
    2277         throw new Error("JSXGraph: Couldn't create tangent with the given parents.");
    2278     }
    2279
    2280     tangent.elType = "tangent";
    2281     tangent.type = Const.OBJECT_TYPE_TANGENT;
    2282     tangent.setParents(parents);
    2283
    2284     return tangent;
    2285 };
    2286
    2287 /**
    2288  * @class A normal is the line perpendicular to a line or to a tangent of a circle or curve.
    2289  * @pseudo
    2290  * @description A normal is a line through a given point on an element of type line, circle, curve, or turtle and orthogonal to that object.
    2291  * @constructor
    2292  * @name Normal
    2293  * @type JXG.Line
    2294  * @augments JXG.Line
    2295  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
    2296  * @param {JXG.Line,JXG.Circle,JXG.Curve,JXG.Turtle_JXG.Point} o,p The constructed line contains p which lies on the object and is orthogonal
    2297  * to the tangent to the object in the given point.
    2298  * @param {Glider} p Works like above, however the object is given by {@link JXG.CoordsElement#slideObject}.
    2299  * @example
    2300  * // Create a normal to a circle.
    2301  * var p1 = board.create('point', [2.0, 2.0]);
    2302  * var p2 = board.create('point', [3.0, 2.0]);
    2303  * var c1 = board.create('circle', [p1, p2]);
    2304  *
    2305  * var norm1 = board.create('normal', [c1, p2]);
    2306  * </pre><div class="jxgbox" id="JXG4154753d-3d29-40fb-a860-0b08aa4f3743" style="width: 400px; height: 400px;"></div>
    2307  * <script type="text/javascript">
    2308  *   var nlex1_board = JXG.JSXGraph.initBoard('JXG4154753d-3d29-40fb-a860-0b08aa4f3743', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    2309  *   var nlex1_p1 = nlex1_board.create('point', [2.0, 2.0]);
    2310  *   var nlex1_p2 = nlex1_board.create('point', [3.0, 2.0]);
    2311  *   var nlex1_c1 = nlex1_board.create('circle', [nlex1_p1, nlex1_p2]);
    2312  *
    2313  *   // var nlex1_p3 = nlex1_board.create('point', [1.0, 2.0]);
    2314  *   var nlex1_norm1 = nlex1_board.create('normal', [nlex1_c1, nlex1_p2]);
    2315  * </script><pre>
    2316  */
    2317 JXG.createNormal = function (board, parents, attributes) {
    2318     var p, c, l, i, attr, pp, attrp,
    2319         getCurveNormalDir,
    2320         res, isTransformed,
    2321         slides = [];
    2322
    2323     for (i = 0; i < parents.length; ++i) {
    2324         parents[i] = board.select(parents[i]);
    2325     }
    2326     // One arguments: glider on line, circle or curve
    2327     if (parents.length === 1) {
    2328         p = parents[0];
    2329         c = p.slideObject;
    2330         // Two arguments: (point,line), (point,circle), (line,point) or (circle,point)
    2331     } else if (parents.length === 2) {
    2332         if (Type.isPointType(board, parents[0])) {
    2333             p = Type.providePoints(board, [parents[0]], attributes, "point")[0];
    2334             c = parents[1];
    2335         } else if (Type.isPointType(board, parents[1])) {
    2336             c = parents[0];
    2337             p = Type.providePoints(board, [parents[1]], attributes, "point")[0];
    2338         } else {
    2339             throw new Error(
    2340                 "JSXGraph: Can't create normal with parent types '" +
    2341                 typeof parents[0] +
    2342                 "' and '" +
    2343                 typeof parents[1] +
    2344                 "'." +
    2345                 "\nPossible parent types: [point,line], [point,circle], [glider]"
    2346             );
    2347         }
    2348     } else {
    2349         throw new Error(
    2350             "JSXGraph: Can't create normal with parent types '" +
    2351             typeof parents[0] +
    2352             "' and '" +
    2353             typeof parents[1] +
    2354             "'." +
    2355             "\nPossible parent types: [point,line], [point,circle], [glider]"
    2356         );
    2357     }
    2358
    2359     attr = Type.copyAttributes(attributes, board.options, "normal");
    2360     if (c.elementClass === Const.OBJECT_CLASS_LINE) {
    2361         // Private point
    2362         attrp = Type.copyAttributes(attributes, board.options, "normal", "point");
    2363         pp = board.create(
    2364             "point",
    2365             [
    2366                 function () {
    2367                     var p = Mat.crossProduct([1, 0, 0], c.stdform);
    2368                     return [p[0], -p[2], p[1]];
    2369                 }
    2370             ],
    2371             attrp
    2372         );
    2373         pp.isDraggable = true;
    2374
    2375         l = board.create("line", [p, pp], attr);
    2376
    2377         /**
    2378          * A helper point used to create a normal to a {@link JXG.Line} object. For normals to circles or curves this
    2379          * element is <tt>undefined</tt>.
    2380          * @type JXG.Point
    2381          * @name point
    2382          * @memberOf Normal.prototype
    2383          */
    2384         l.point = pp;
    2385         l.subs = {
    2386             point: pp
    2387         };
    2388         l.inherits.push(pp);
    2389     } else if (c.elementClass === Const.OBJECT_CLASS_CIRCLE) {
    2390         l = board.create("line", [c.midpoint, p], attr);
    2391     } else if (c.elementClass === Const.OBJECT_CLASS_CURVE) {
    2392         res = c.getTransformationSource();
    2393         isTransformed = res[0];
    2394         if (isTransformed) {
    2395             // Curve is result of a transformation
    2396             // We recursively collect all curves from which
    2397             // the curve is transformed.
    2398             slides.push(c);
    2399             while (res[0] && Type.exists(res[1]._transformationSource)) {
    2400                 slides.push(res[1]);
    2401                 res = res[1].getTransformationSource();
    2402             }
    2403         }
    2404
    2405         if (c.evalVisProp('curvetype') !== "plot" || isTransformed) {
    2406             // Functiongraph or parametric curve or
    2407             // transformed curve thereof.
    2408             l = board.create(
    2409                 "line",
    2410                 [
    2411                     function () {
    2412                         var g = c.X,
    2413                             f = c.Y,
    2414                             df, dg,
    2415                             li, i, c_org, invMat, po,
    2416                             t;
    2417
    2418                         if (p.type === Const.OBJECT_TYPE_GLIDER) {
    2419                             t = p.position;
    2420                         } else if (c.evalVisProp('curvetype') === 'functiongraph') {
    2421                             t = p.X();
    2422                         } else {
    2423                             t = Geometry.projectPointToCurve(p, c, board)[1];
    2424                         }
    2425
    2426                         // po are the coordinates of the point
    2427                         // on the "original" curve. That is the curve or
    2428                         // the original curve which is transformed (maybe multiple times)
    2429                         // to this curve.
    2430                         // t is the position of the point on the "original" curve
    2431                         po = p.Coords(true);
    2432                         if (isTransformed) {
    2433                             c_org = slides[slides.length - 1]._transformationSource;
    2434                             g = c_org.X;
    2435                             f = c_org.Y;
    2436                             for (i = 0; i < slides.length; i++) {
    2437                                 slides[i].updateTransformMatrix();
    2438                                 invMat = Mat.inverse(slides[i].transformMat);
    2439                                 po = Mat.matVecMult(invMat, po);
    2440                             }
    2441
    2442                             if (p.type !== Const.OBJECT_TYPE_GLIDER) {
    2443                                 po[1] /= po[0];
    2444                                 po[2] /= po[0];
    2445                                 po[0] /= po[0];
    2446                                 t = Geometry.projectCoordsToCurve(po[1], po[2], 0, c_org, board)[1];
    2447                             }
    2448                         }
    2449
    2450                         df = Numerics.D(f)(t);
    2451                         dg = Numerics.D(g)(t);
    2452                         li = [
    2453                             -po[1] * dg - po[2] * df,
    2454                             po[0] * dg,
    2455                             po[0] * df
    2456                         ];
    2457
    2458                         if (isTransformed) {
    2459                             // Transform the line to the transformed curve
    2460                             for (i = slides.length - 1; i >= 0; i--) {
    2461                                 invMat = Mat.transpose(Mat.inverse(slides[i].transformMat));
    2462                                 li = Mat.matVecMult(invMat, li);
    2463                             }
    2464                         }
    2465
    2466                         return li;
    2467                     }
    2468                 ],
    2469                 attr
    2470             );
    2471         } else {
    2472             // curveType 'plot': discrete data
    2473             getCurveNormalDir = function (position, c, num) {
    2474                 var i = Math.floor(position),
    2475                     lbda,
    2476                     p1, p2, t, A, B, C, D, dx, dy, d,
    2477                     li, p_org, pp,
    2478                     points, le;
    2479
    2480
    2481                 if (c.bezierDegree === 1) {
    2482                     if (i === c.numberPoints - 1) {
    2483                         i--;
    2484                     }
    2485                     t = position;
    2486                 } else if (c.bezierDegree === 3) {
    2487                     // i is start of the Bezier segment
    2488                     // t is the position in the Bezier segment
    2489                     if (c.elType === 'sector') {
    2490                         points = c.points.slice(3, c.numberPoints - 3);
    2491                         le = points.length;
    2492                     } else {
    2493                         points = c.points;
    2494                         le = points.length;
    2495                     }
    2496                     i = Math.floor((position * (le - 1)) / 3) * 3;
    2497                     t = (position * (le - 1) - i) / 3;
    2498                     if (i >= le - 1) {
    2499                         i = le - 4;
    2500                         t = 1;
    2501                     }
    2502                 } else {
    2503                     return 0;
    2504                 }
    2505
    2506                 if (i < 0) {
    2507                     return 1;
    2508                 }
    2509
    2510                 lbda = t - i;
    2511                 if (c.bezierDegree === 1) {
    2512                     p1 = c.points[i].usrCoords;
    2513                     p2 = c.points[i + 1].usrCoords;
    2514                     p_org = [
    2515                         p1[0] + lbda * (p2[0] - p1[0]),
    2516                         p1[1] + lbda * (p2[1] - p1[1]),
    2517                         p1[2] + lbda * (p2[2] - p1[2])
    2518                     ];
    2519                     li = Mat.crossProduct(p1, p2);
    2520                     pp = Mat.crossProduct([1, 0, 0], li);
    2521                     pp = [pp[0], -pp[2], pp[1]];
    2522                     li = Mat.crossProduct(p_org, pp);
    2523
    2524                 } else {
    2525                     A = points[i].usrCoords;
    2526                     B = points[i + 1].usrCoords;
    2527                     C = points[i + 2].usrCoords;
    2528                     D = points[i + 3].usrCoords;
    2529                     dx =
    2530                         (1 - t) * (1 - t) * (B[1] - A[1]) +
    2531                         2 * (1 - t) * t * (C[1] - B[1]) +
    2532                         t * t * (D[1] - C[1]);
    2533                     dy =
    2534                         (1 - t) * (1 - t) * (B[2] - A[2]) +
    2535                         2 * (1 - t) * t * (C[2] - B[2]) +
    2536                         t * t * (D[2] - C[2]);
    2537                     d = Mat.hypot(dx, dy);
    2538                     dx /= d;
    2539                     dy /= d;
    2540                     p1 = p.coords.usrCoords;
    2541                     p2 = [1, p1[1] - dy, p1[2] + dx];
    2542
    2543                     li = [
    2544                         p1[2] * p2[1] - p1[1] * p2[2],
    2545                         p2[2] - p1[2],
    2546                         p1[1] - p2[1]
    2547                     ];
    2548                 }
    2549
    2550                 switch (num) {
    2551                     case 0:
    2552                         return li[0];
    2553                     case 1:
    2554                         return li[1];
    2555                     case 2:
    2556                         return li[2];
    2557                     default:
    2558                         return li;
    2559                 }
    2560             };
    2561
    2562             l = board.create(
    2563                 "line",
    2564                 [
    2565                     function () {
    2566                         var t;
    2567
    2568                         if (p.type === Const.OBJECT_TYPE_GLIDER) {
    2569                             t = p.position;
    2570                         } else {
    2571                             t = Geometry.projectPointToCurve(p, c, board)[1];
    2572                         }
    2573
    2574                         return getCurveNormalDir(t, c);
    2575                     }
    2576                 ],
    2577                 attr
    2578             );
    2579             p.addChild(l);
    2580             l.glider = p;
    2581         }
    2582     } else if (c.type === Const.OBJECT_TYPE_TURTLE) {
    2583         l = board.create(
    2584             "line",
    2585             [
    2586                 function () {
    2587                     var el,
    2588                         j,
    2589                         i = Math.floor(p.position),
    2590                         lbda = p.position - i;
    2591
    2592                     // run through all curves of this turtle
    2593                     for (j = 0; j < c.objects.length; j++) {
    2594                         el = c.objects[j];
    2595
    2596                         if (el.type === Const.OBJECT_TYPE_CURVE) {
    2597                             if (i < el.numberPoints) {
    2598                                 break;
    2599                             }
    2600
    2601                             i -= el.numberPoints;
    2602                         }
    2603                     }
    2604
    2605                     if (i === el.numberPoints - 1) {
    2606                         i -= 1;
    2607                         lbda = 1;
    2608                     }
    2609
    2610                     if (i < 0) {
    2611                         return 1;
    2612                     }
    2613
    2614                     return (
    2615                         (el.Y(i) + lbda * (el.Y(i + 1) - el.Y(i))) * (el.Y(i) - el.Y(i + 1)) -
    2616                         (el.X(i) + lbda * (el.X(i + 1) - el.X(i))) * (el.X(i + 1) - el.X(i))
    2617                     );
    2618                 },
    2619                 function () {
    2620                     var el,
    2621                         j,
    2622                         i = Math.floor(p.position);
    2623
    2624                     // run through all curves of this turtle
    2625                     for (j = 0; j < c.objects.length; j++) {
    2626                         el = c.objects[j];
    2627                         if (el.type === Const.OBJECT_TYPE_CURVE) {
    2628                             if (i < el.numberPoints) {
    2629                                 break;
    2630                             }
    2631
    2632                             i -= el.numberPoints;
    2633                         }
    2634                     }
    2635
    2636                     if (i === el.numberPoints - 1) {
    2637                         i -= 1;
    2638                     }
    2639
    2640                     if (i < 0) {
    2641                         return 0;
    2642                     }
    2643
    2644                     return el.X(i + 1) - el.X(i);
    2645                 },
    2646                 function () {
    2647                     var el,
    2648                         j,
    2649                         i = Math.floor(p.position);
    2650
    2651                     // run through all curves of this turtle
    2652                     for (j = 0; j < c.objects.length; j++) {
    2653                         el = c.objects[j];
    2654                         if (el.type === Const.OBJECT_TYPE_CURVE) {
    2655                             if (i < el.numberPoints) {
    2656                                 break;
    2657                             }
    2658
    2659                             i -= el.numberPoints;
    2660                         }
    2661                     }
    2662
    2663                     if (i === el.numberPoints - 1) {
    2664                         i -= 1;
    2665                     }
    2666
    2667                     if (i < 0) {
    2668                         return 0;
    2669                     }
    2670
    2671                     return el.Y(i + 1) - el.Y(i);
    2672                 }
    2673             ],
    2674             attr
    2675         );
    2676     } else {
    2677         throw new Error(
    2678             "JSXGraph: Can't create normal with parent types '" +
    2679             typeof parents[0] +
    2680             "' and '" +
    2681             typeof parents[1] +
    2682             "'." +
    2683             "\nPossible parent types: [point,line], [point,circle], [glider]"
    2684         );
    2685     }
    2686
    2687     l.elType = "normal";
    2688     l.setParents(parents);
    2689
    2690     if (Type.exists(p._is_new)) {
    2691         l.addChild(p);
    2692         delete p._is_new;
    2693     } else {
    2694         p.addChild(l);
    2695     }
    2696     c.addChild(l);
    2697
    2698     return l;
    2699 };
    2700
    2701 /**
    2702  * @class The radical axis is the line connecting the two interstion points of two circles with distinct centers.
    2703  * The angular bisector of the polar lines of the circle centers with respect to the other circle is always the radical axis.
    2704  * The radical axis passes through the intersection points when the circles intersect.
    2705  * When a circle about the midpoint of circle centers, passing through the circle centers, intersects the circles, the polar lines pass through those intersection points.
    2706  * @pseudo
    2707  * @name RadicalAxis
    2708  * @augments JXG.Line
    2709  * @constructor
    2710  * @type JXG.Line
    2711  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    2712  * @param {JXG.Circle} circle one of the two respective circles.
    2713  * @param {JXG.Circle} circle the other of the two respective circles.
    2714  * @example
    2715  * // Create the radical axis line with respect to two circles
    2716  *   var board = JXG.JSXGraph.initBoard('7b7233a0-f363-47dd-9df5-5018d0d17a98', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    2717  *   var p1 = board.create('point', [2, 3]);
    2718  *   var p2 = board.create('point', [1, 4]);
    2719  *   var c1 = board.create('circle', [p1, p2]);
    2720  *   var p3 = board.create('point', [6, 5]);
    2721  *   var p4 = board.create('point', [8, 6]);
    2722  *   var c2 = board.create('circle', [p3, p4]);
    2723  *   var r1 = board.create('radicalaxis', [c1, c2]);
    2724  * </pre><div class="jxgbox" id="JXG7b7233a0-f363-47dd-9df5-5018d0d17a98" class="jxgbox" style="width:400px; height:400px;"></div>
    2725  * <script type='text/javascript'>
    2726  *   var rlex1_board = JXG.JSXGraph.initBoard('JXG7b7233a0-f363-47dd-9df5-5018d0d17a98', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    2727  *   var rlex1_p1 = rlex1_board.create('point', [2, 3]);
    2728  *   var rlex1_p2 = rlex1_board.create('point', [1, 4]);
    2729  *   var rlex1_c1 = rlex1_board.create('circle', [rlex1_p1, rlex1_p2]);
    2730  *   var rlex1_p3 = rlex1_board.create('point', [6, 5]);
    2731  *   var rlex1_p4 = rlex1_board.create('point', [8, 6]);
    2732  *   var rlex1_c2 = rlex1_board.create('circle', [rlex1_p3, rlex1_p4]);
    2733  *   var rlex1_r1 = rlex1_board.create('radicalaxis', [rlex1_c1, rlex1_c2]);
    2734  * </script><pre>
    2735  */
    2736 JXG.createRadicalAxis = function (board, parents, attributes) {
    2737     var el, el1, el2;
    2738
    2739     if (
    2740         parents.length !== 2 ||
    2741         parents[0].elementClass !== Const.OBJECT_CLASS_CIRCLE ||
    2742         parents[1].elementClass !== Const.OBJECT_CLASS_CIRCLE
    2743     ) {
    2744         // Failure
    2745         throw new Error(
    2746             "JSXGraph: Can't create 'radical axis' with parent types '" +
    2747             typeof parents[0] +
    2748             "' and '" +
    2749             typeof parents[1] +
    2750             "'." +
    2751             "\nPossible parent type: [circle,circle]"
    2752         );
    2753     }
    2754
    2755     el1 = board.select(parents[0]);
    2756     el2 = board.select(parents[1]);
    2757
    2758     el = board.create(
    2759         "line",
    2760         [
    2761             function () {
    2762                 var a = el1.stdform,
    2763                     b = el2.stdform;
    2764
    2765                 return Mat.matVecMult(Mat.transpose([a.slice(0, 3), b.slice(0, 3)]), [
    2766                     b[3],
    2767                     -a[3]
    2768                 ]);
    2769             }
    2770         ],
    2771         attributes
    2772     );
    2773
    2774     el.elType = "radicalaxis";
    2775     el.setParents([el1.id, el2.id]);
    2776
    2777     el1.addChild(el);
    2778     el2.addChild(el);
    2779
    2780     return el;
    2781 };
    2782
    2783 /**
    2784  * @class The polar line of a point with respect to a conic or a circle.
    2785  * @pseudo
    2786  * @description The polar line is the unique reciprocal relationship of a point with respect to a conic.
    2787  * The lines through the intersections of a conic and the polar line of a point
    2788  * with respect to that conic and through that point are tangent to the conic.
    2789  * A point on a conic has the polar line of that point with respect to that
    2790  * conic as the tangent line to that conic at that point.
    2791  * See {@link https://en.wikipedia.org/wiki/Pole_and_polar} for more information on pole and polar.
    2792  * @name PolarLine
    2793  * @augments JXG.Line
    2794  * @constructor
    2795  * @type JXG.Line
    2796  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    2797  * @param {JXG.Conic,JXG.Circle_JXG.Point} el1,el2 or
    2798  * @param {JXG.Point_JXG.Conic,JXG.Circle} el1,el2 The result will be the polar line of the point with respect to the conic or the circle.
    2799  * @example
    2800  * // Create the polar line of a point with respect to a conic
    2801  * var p1 = board.create('point', [-1, 2]);
    2802  * var p2 = board.create('point', [ 1, 4]);
    2803  * var p3 = board.create('point', [-1,-2]);
    2804  * var p4 = board.create('point', [ 0, 0]);
    2805  * var p5 = board.create('point', [ 4,-2]);
    2806  * var c1 = board.create('conic',[p1,p2,p3,p4,p5]);
    2807  * var p6 = board.create('point', [-1, 1]);
    2808  * var l1 = board.create('polarline', [c1, p6]);
    2809  * </pre><div class="jxgbox" id="JXG7b7233a0-f363-47dd-9df5-6018d0d17a98" class="jxgbox" style="width:400px; height:400px;"></div>
    2810  * <script type='text/javascript'>
    2811  * var plex1_board = JXG.JSXGraph.initBoard('JXG7b7233a0-f363-47dd-9df5-6018d0d17a98', {boundingbox: [-3, 5, 5, -3], axis: true, showcopyright: false, shownavigation: false});
    2812  * var plex1_p1 = plex1_board.create('point', [-1, 2]);
    2813  * var plex1_p2 = plex1_board.create('point', [ 1, 4]);
    2814  * var plex1_p3 = plex1_board.create('point', [-1,-2]);
    2815  * var plex1_p4 = plex1_board.create('point', [ 0, 0]);
    2816  * var plex1_p5 = plex1_board.create('point', [ 4,-2]);
    2817  * var plex1_c1 = plex1_board.create('conic',[plex1_p1,plex1_p2,plex1_p3,plex1_p4,plex1_p5]);
    2818  * var plex1_p6 = plex1_board.create('point', [-1, 1]);
    2819  * var plex1_l1 = plex1_board.create('polarline', [plex1_c1, plex1_p6]);
    2820  * </script><pre>
    2821  * @example
    2822  * // Create the polar line of a point with respect to a circle.
    2823  * var p1 = board.create('point', [ 1, 1]);
    2824  * var p2 = board.create('point', [ 2, 3]);
    2825  * var c1 = board.create('circle',[p1,p2]);
    2826  * var p3 = board.create('point', [ 6, 6]);
    2827  * var l1 = board.create('polarline', [c1, p3]);
    2828  * </pre><div class="jxgbox" id="JXG7b7233a0-f363-47dd-9df5-7018d0d17a98" class="jxgbox" style="width:400px; height:400px;"></div>
    2829  * <script type='text/javascript'>
    2830  * var plex2_board = JXG.JSXGraph.initBoard('JXG7b7233a0-f363-47dd-9df5-7018d0d17a98', {boundingbox: [-3, 7, 7, -3], axis: true, showcopyright: false, shownavigation: false});
    2831  * var plex2_p1 = plex2_board.create('point', [ 1, 1]);
    2832  * var plex2_p2 = plex2_board.create('point', [ 2, 3]);
    2833  * var plex2_c1 = plex2_board.create('circle',[plex2_p1,plex2_p2]);
    2834  * var plex2_p3 = plex2_board.create('point', [ 6, 6]);
    2835  * var plex2_l1 = plex2_board.create('polarline', [plex2_c1, plex2_p3]);
    2836  * </script><pre>
    2837  */
    2838 JXG.createPolarLine = function (board, parents, attributes) {
    2839     var el,
    2840         el1,
    2841         el2,
    2842         firstParentIsConic,
    2843         secondParentIsConic,
    2844         firstParentIsPoint,
    2845         secondParentIsPoint;
    2846
    2847     if (parents.length > 1) {
    2848         firstParentIsConic =
    2849             parents[0].type === Const.OBJECT_TYPE_CONIC ||
    2850             parents[0].elementClass === Const.OBJECT_CLASS_CIRCLE;
    2851         secondParentIsConic =
    2852             parents[1].type === Const.OBJECT_TYPE_CONIC ||
    2853             parents[1].elementClass === Const.OBJECT_CLASS_CIRCLE;
    2854
    2855         firstParentIsPoint = Type.isPoint(parents[0]);
    2856         secondParentIsPoint = Type.isPoint(parents[1]);
    2857     }
    2858
    2859     if (
    2860         parents.length !== 2 ||
    2861         !(
    2862             (firstParentIsConic && secondParentIsPoint) ||
    2863             (firstParentIsPoint && secondParentIsConic)
    2864         )
    2865     ) {
    2866         // Failure
    2867         throw new Error(
    2868             "JSXGraph: Can't create 'polar line' with parent types '" +
    2869             typeof parents[0] +
    2870             "' and '" +
    2871             typeof parents[1] +
    2872             "'." +
    2873             "\nPossible parent type: [conic|circle,point], [point,conic|circle]"
    2874         );
    2875     }
    2876
    2877     if (secondParentIsPoint) {
    2878         el1 = board.select(parents[0]);
    2879         el2 = board.select(parents[1]);
    2880     } else {
    2881         el1 = board.select(parents[1]);
    2882         el2 = board.select(parents[0]);
    2883     }
    2884
    2885     // Polar lines have been already provided in the tangent element.
    2886     el = board.create("tangent", [el1, el2], attributes);
    2887
    2888     el.elType = "polarline";
    2889     return el;
    2890 };
    2891
    2892 /**
    2893  *
    2894  * @class One of the two tangent lines to a conic or a circle through an external point.
    2895  * @pseudo
    2896  * @description Construct the tangent line through a point to a conic or a circle. There will be either two, one or no
    2897  * such tangent, depending if the point is outside of the conic, on the conic, or inside of the conic.
    2898  * Similar to the intersection of a line with a circle, the specific tangent can be chosen with a third (optional) parameter
    2899  * <i>number</i>.
    2900  * <p>
    2901  * Attention: from a technical point of view, the point from which the tangent to the conic/circle is constructed is not an element of
    2902  * the tangent line.
    2903  * @name TangentTo
    2904  * @augments JXG.Line
    2905  * @constructor
    2906  * @type JXG.Line
    2907  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    2908  * @param {JXG.Conic,JXG.Circle_JXG.Point_Number} conic,point,[number=0] The result will be the tangent line through
    2909  * the point with respect to the conic or circle.
    2910  *
    2911  * @example
    2912  *  var c = board.create('circle', [[3, 0], [3, 4]]);
    2913  *  var p = board.create('point', [0, 6]);
    2914  *  var t0 = board.create('tangentto', [c, p, 0], { color: 'black', polar: {visible: true}, point: {visible: true} });
    2915  *  var t1 = board.create('tangentto', [c, p, 1], { color: 'black' });
    2916  *
    2917  * </pre><div id="JXGd4b359c7-3a29-44c3-a19d-d51b42a00c8b" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2918  * <script type="text/javascript">
    2919  *     (function() {
    2920  *         var board = JXG.JSXGraph.initBoard('JXGd4b359c7-3a29-44c3-a19d-d51b42a00c8b',
    2921  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2922  *             var c = board.create('circle', [[3, 0], [3, 4]]);
    2923  *             var p = board.create('point', [0, 6]);
    2924  *             var t0 = board.create('tangentto', [c, p, 0], { color: 'black', polar: {visible: true}, point: {visible: true} });
    2925  *             var t1 = board.create('tangentto', [c, p, 1], { color: 'black' });
    2926  *
    2927  *     })();
    2928  *
    2929  * </script><pre>
    2930  *
    2931  * @example
    2932  *  var p = board.create('point', [0, 6]);
    2933  *  var ell = board.create('ellipse', [[-5, 1], [-2, -1], [-3, 2]]);
    2934  *  var t0 = board.create('tangentto', [ell, p, 0]);
    2935  *  var t1 = board.create('tangentto', [ell, p, 1]);
    2936  *
    2937  * </pre><div id="JXG6e625663-1c3e-4e08-a9df-574972a374e8" class="jxgbox" style="width: 300px; height: 300px;"></div>
    2938  * <script type="text/javascript">
    2939  *     (function() {
    2940  *         var board = JXG.JSXGraph.initBoard('JXG6e625663-1c3e-4e08-a9df-574972a374e8',
    2941  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    2942  *             var p = board.create('point', [0, 6]);
    2943  *             var ell = board.create('ellipse', [[-5, 1], [-2, -1], [-3, 2]]);
    2944  *             var t0 = board.create('tangentto', [ell, p, 0]);
    2945  *             var t1 = board.create('tangentto', [ell, p, 1]);
    2946  *
    2947  *     })();
    2948  *
    2949  * </script><pre>
    2950  *
    2951  */
    2952 JXG.createTangentTo = function (board, parents, attributes) {
    2953     var el, attr,
    2954         conic, pointFrom, num,
    2955         intersect, polar;
    2956
    2957     conic = board.select(parents[0]);
    2958     pointFrom = Type.providePoints(board, parents[1], attributes, 'point')[0];
    2959     num = Type.def(parents[2], 0);
    2960
    2961     if (
    2962         (conic.type !== Const.OBJECT_TYPE_CIRCLE && conic.type !== Const.OBJECT_TYPE_CONIC) ||
    2963         (pointFrom.elementClass !== Const.OBJECT_CLASS_POINT)
    2964     ) {
    2965         throw new Error(
    2966             "JSXGraph: Can't create tangentto with parent types '" +
    2967             typeof parents[0] +
    2968             "' and '" +
    2969             typeof parents[1] +
    2970             "' and '" +
    2971             typeof parents[2] +
    2972             "'." +
    2973             "\nPossible parent types: [circle|conic,point,number]"
    2974         );
    2975     }
    2976
    2977     attr = Type.copyAttributes(attributes, board.options, 'tangentto');
    2978     // A direct analytic geometry approach would be in
    2979     // Richter-Gebert: Perspectives on projective geometry, 11.3
    2980     polar = board.create('polar', [conic, pointFrom], attr.polar);
    2981     intersect = board.create('intersection', [polar, conic, num], attr.point);
    2982
    2983     el = board.create('tangent', [conic, intersect], attr);
    2984
    2985     /**
    2986      * The intersection point of the conic/circle with the polar line of the tangentto construction.
    2987      * @memberOf TangentTo.prototype
    2988      * @name point
    2989      * @type JXG.Point
    2990      */
    2991     el.point = intersect;
    2992
    2993     /**
    2994      * The polar line of the tangentto construction.
    2995      * @memberOf TangentTo.prototype
    2996      * @name polar
    2997      * @type JXG.Line
    2998      */
    2999     el.polar = polar;
    3000
    3001     el.elType = 'tangentto';
    3002
    3003     return el;
    3004 };
    3005
    3006 /**
    3007  * Register the element type tangent at JSXGraph
    3008  * @private
    3009  */
    3010 JXG.registerElement("tangent", JXG.createTangent);
    3011 JXG.registerElement("normal", JXG.createNormal);
    3012 JXG.registerElement('tangentto', JXG.createTangentTo);
    3013 JXG.registerElement("polar", JXG.createTangent);
    3014 JXG.registerElement("radicalaxis", JXG.createRadicalAxis);
    3015 JXG.registerElement("polarline", JXG.createPolarLine);
    3016
    3017 export default JXG.Line;
    3018 // export default {
    3019 //     Line: JXG.Line,
    3020 //     createLine: JXG.createLine,
    3021 //     createTangent: JXG.createTangent,
    3022 //     createPolar: JXG.createTangent,
    3023 //     createSegment: JXG.createSegment,
    3024 //     createAxis: JXG.createAxis,
    3025 //     createArrow: JXG.createArrow,
    3026 //     createRadicalAxis: JXG.createRadicalAxis,
    3027 //     createPolarLine: JXG.createPolarLine
    3028 // };
    3029