      1 /*
      2     Copyright 2008-2023
      3         Matthias Ehmann,
      4         Michael Gerhaeuser,
      5         Carsten Miller,
      6         Bianca Valentin,
      7         Alfred Wassermann,
      8         Peter Wilfahrt
      9
     10     This file is part of JSXGraph.
     11
     12     JSXGraph is free software dual licensed under the GNU LGPL or MIT License.
     13
     14     You can redistribute it and/or modify it under the terms of the
     15
     16       * GNU Lesser General Public License as published by
     17         the Free Software Foundation, either version 3 of the License, or
     18         (at your option) any later version
     19       OR
     20       * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT
     21
     22     JSXGraph is distributed in the hope that it will be useful,
     23     but WITHOUT ANY WARRANTY; without even the implied warranty of
     24     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     25     GNU Lesser General Public License for more details.
     26
     27     You should have received a copy of the GNU Lesser General Public License and
     28     the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
     29     and <https://opensource.org/licenses/MIT/>.
     30  */
     31
     32 /*global JXG: true, define: true*/
     33 /*jslint nomen: true, plusplus: true*/
     34
     35 /**
     36  * @fileoverview The geometry object Circle is defined in this file. Circle stores all
     37  * style and functional properties that are required to draw and move a circle on
     38  * a board.
     39  */
     40
     41 import JXG from "../jxg";
     42 import GeometryElement from "./element";
     43 import Coords from "./coords";
     44 import Const from "./constants";
     45 import Mat from "../math/math";
     46 import GeonextParser from "../parser/geonext";
     47 import Type from "../utils/type";
     48
     49 /**
     50  * A circle consists of all points with a given distance from one point. This point is called center, the distance is called radius.
     51  * A circle can be constructed by providing a center and a point on the circle or a center and a radius (given as a number, function,
     52  * line, or circle).
     53  * @class Creates a new circle object. Do not use this constructor to create a circle. Use {@link JXG.Board#create} with
     54  * type {@link Circle} instead.
     55  * @constructor
     56  * @augments JXG.GeometryElement
     57  * @param {JXG.Board} board The board the new circle is drawn on.
     58  * @param {String} method Can be
     59  * <ul><li> <b>'twoPoints'</b> which means the circle is defined by its center and a point on the circle.</li>
     60  * <li><b>'pointRadius'</b> which means the circle is defined by its center and its radius in user units</li>
     61  * <li><b>'pointLine'</b> which means the circle is defined by its center and its radius given by the distance from the startpoint and the endpoint of the line</li>
     62  * <li><b>'pointCircle'</b> which means the circle is defined by its center and its radius given by the radius of another circle</li></ul>
     63  * The parameters p1, p2 and radius must be set according to this method parameter.
     64  * @param {JXG.Point} par1 center of the circle.
     65  * @param {JXG.Point|JXG.Line|JXG.Circle} par2 Can be
     66  * <ul><li>a point on the circle if method is 'twoPoints'</li>
     67  * <li>a line if the method is 'pointLine'</li>
     68  * <li>a circle if the method is 'pointCircle'</li></ul>
     69  * @param {Object} attributes
     70  * @see JXG.Board#generateName
     71  */
     72 JXG.Circle = function (board, method, par1, par2, attributes) {
     73     // Call the constructor of GeometryElement
     74     this.constructor(board, attributes, Const.OBJECT_TYPE_CIRCLE, Const.OBJECT_CLASS_CIRCLE);
     75
     76     /**
     77      * Stores the given method.
     78      * Can be
     79      * <ul><li><b>'twoPoints'</b> which means the circle is defined by its center and a point on the circle.</li>
     80      * <li><b>'pointRadius'</b> which means the circle is defined by its center and its radius given in user units or as term.</li>
     81      * <li><b>'pointLine'</b> which means the circle is defined by its center and its radius given by the distance from the startpoint and the endpoint of the line.</li>
     82      * <li><b>'pointCircle'</b> which means the circle is defined by its center and its radius given by the radius of another circle.</li></ul>
     83      * @type String
     84      * @see #center
     85      * @see #point2
     86      * @see #radius
     87      * @see #line
     88      * @see #circle
     89      */
     90     this.method = method;
     91
     92     // this is kept so existing code won't ne broken
     93     this.midpoint = this.board.select(par1);
     94
     95     /**
     96      * The circles center. Do not set this parameter directly as it will break JSXGraph's update system.
     97      * @type JXG.Point
     98      */
     99     this.center = this.board.select(par1);
    100
    101     /** Point on the circle only set if method equals 'twoPoints'. Do not set this parameter directly as it will break JSXGraph's update system.
    102      * @type JXG.Point
    103      * @see #method
    104      */
    105     this.point2 = null;
    106
    107     /** Radius of the circle
    108      * only set if method equals 'pointRadius'
    109      * @type Number
    110      * @default null
    111      * @see #method
    112      */
    113     this.radius = 0;
    114
    115     /** Line defining the radius of the circle given by the distance from the startpoint and the endpoint of the line
    116      * only set if method equals 'pointLine'. Do not set this parameter directly as it will break JSXGraph's update system.
    117      * @type JXG.Line
    118      * @default null
    119      * @see #method
    120      */
    121     this.line = null;
    122
    123     /** Circle defining the radius of the circle given by the radius of the other circle
    124      * only set if method equals 'pointLine'. Do not set this parameter directly as it will break JSXGraph's update system.
    125      * @type JXG.Circle
    126      * @default null
    127      * @see #method
    128      */
    129     this.circle = null;
    130
    131     this.points = [];
    132
    133     if (method === "twoPoints") {
    134         this.point2 = board.select(par2);
    135         this.radius = this.Radius();
    136     } else if (method === "pointRadius") {
    137         this.gxtterm = par2;
    138         // Converts JessieCode syntax into JavaScript syntax and generally ensures that the radius is a function
    139         this.updateRadius = Type.createFunction(par2, this.board);
    140         // First evaluation of the radius function
    141         this.updateRadius();
    142         this.addParentsFromJCFunctions([this.updateRadius]);
    143     } else if (method === "pointLine") {
    144         // dann ist p2 die Id eines Objekts vom Typ Line!
    145         this.line = board.select(par2);
    146         this.radius = this.line.point1.coords.distance(
    147             Const.COORDS_BY_USER,
    148             this.line.point2.coords
    149         );
    150     } else if (method === "pointCircle") {
    151         // dann ist p2 die Id eines Objekts vom Typ Circle!
    152         this.circle = board.select(par2);
    153         this.radius = this.circle.Radius();
    154     }
    155
    156     // create Label
    157     this.id = this.board.setId(this, "C");
    158     this.board.renderer.drawEllipse(this);
    159     this.board.finalizeAdding(this);
    160
    161     this.createGradient();
    162     this.elType = "circle";
    163     this.createLabel();
    164
    165     if (Type.exists(this.center._is_new)) {
    166         this.addChild(this.center);
    167         delete this.center._is_new;
    168     } else {
    169         this.center.addChild(this);
    170     }
    171
    172     if (method === "pointRadius") {
    173         this.notifyParents(par2);
    174     } else if (method === "pointLine") {
    175         this.line.addChild(this);
    176     } else if (method === "pointCircle") {
    177         this.circle.addChild(this);
    178     } else if (method === "twoPoints") {
    179         if (Type.exists(this.point2._is_new)) {
    180             this.addChild(this.point2);
    181             delete this.point2._is_new;
    182         } else {
    183             this.point2.addChild(this);
    184         }
    185     }
    186
    187     this.methodMap = Type.deepCopy(this.methodMap, {
    188         setRadius: "setRadius",
    189         getRadius: "getRadius",
    190         Area: "Area",
    191         area: "Area",
    192         Perimeter: "Perimeter",
    193         Circumference: "Perimeter",
    194         radius: "Radius",
    195         Radius: "Radius",
    196         Diameter: "Diameter",
    197         center: "center",
    198         line: "line",
    199         point2: "point2"
    200     });
    201 };
    202
    203 JXG.Circle.prototype = new GeometryElement();
    204
    205 JXG.extend(
    206     JXG.Circle.prototype,
    207     /** @lends JXG.Circle.prototype */ {
    208         /**
    209          * Checks whether (x,y) is near the circle line or inside of the ellipse
    210          * (in case JXG.Options.conic#hasInnerPoints is true).
    211          * @param {Number} x Coordinate in x direction, screen coordinates.
    212          * @param {Number} y Coordinate in y direction, screen coordinates.
    213          * @returns {Boolean} True if (x,y) is near the circle, False otherwise.
    214          * @private
    215          */
    216         hasPoint: function (x, y) {
    217             var prec, type,
    218                 mp = this.center.coords.usrCoords,
    219                 p = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board),
    220                 r = this.Radius(),
    221                 dx, dy, dist;
    222
    223             if (Type.isObject(Type.evaluate(this.visProp.precision))) {
    224                 type = this.board._inputDevice;
    225                 prec = Type.evaluate(this.visProp.precision[type]);
    226             } else {
    227                 // 'inherit'
    228                 prec = this.board.options.precision.hasPoint;
    229             }
    230             dx = mp[1] - p.usrCoords[1];
    231             dy = mp[2] - p.usrCoords[2];
    232             dist = Mat.hypot(dx, dy);
    233
    234             // We have to use usrCoords, since Radius is available in usrCoords only.
    235             prec += Type.evaluate(this.visProp.strokewidth) * 0.5;
    236             prec /= Math.sqrt(Math.abs(this.board.unitX * this.board.unitY));
    237
    238             if (Type.evaluate(this.visProp.hasinnerpoints)) {
    239                 return dist < r + prec;
    240             }
    241
    242             return Math.abs(dist - r) < prec;
    243         },
    244
    245         // /**
    246         //  * Used to generate a polynomial for a point p that lies on this circle.
    247         //  * @param {JXG.Point} p The point for which the polynomial is generated.
    248         //  * @returns {Array} An array containing the generated polynomial.
    249         //  * @private
    250         //  */
    251         generatePolynomial: function (p) {
    252             /*
    253              * We have four methods to construct a circle:
    254              *   (a) Two points
    255              *   (b) center and radius
    256              *   (c) center and radius given by length of a segment
    257              *   (d) center and radius given by another circle
    258              *
    259              * In case (b) we have to distinguish two cases:
    260              *  (i)  radius is given as a number
    261              *  (ii) radius is given as a function
    262              * In the latter case there's no guarantee the radius depends on other geometry elements
    263              * in a polynomial way so this case has to be omitted.
    264              *
    265              * Another tricky case is case (d):
    266              * The radius depends on another circle so we have to cycle through the ancestors of each circle
    267              * until we reach one that's radius does not depend on another circles radius.
    268              *
    269              *
    270              * All cases (a) to (d) vary only in calculation of the radius. So the basic formulae for
    271              * a glider G (g1,g2) on a circle with center M (m1,m2) and radius r is just:
    272              *
    273              *     (g1-m1)^2 + (g2-m2)^2 - r^2 = 0
    274              *
    275              * So the easiest case is (b) with a fixed radius given as a number. The other two cases (a)
    276              * and (c) are quite the same: Euclidean distance between two points A (a1,a2) and B (b1,b2),
    277              * squared:
    278              *
    279              *     r^2 = (a1-b1)^2 + (a2-b2)^2
    280              *
    281              * For case (d) we have to cycle recursively through all defining circles and finally return the
    282              * formulae for calculating r^2. For that we use JXG.Circle.symbolic.generateRadiusSquared().
    283              */
    284             var m1 = this.center.symbolic.x,
    285                 m2 = this.center.symbolic.y,
    286                 g1 = p.symbolic.x,
    287                 g2 = p.symbolic.y,
    288                 rsq = this.generateRadiusSquared();
    289
    290             /* No radius can be calculated (Case b.ii) */
    291             if (rsq === "") {
    292                 return [];
    293             }
    294
    295             return [
    296                 "((" + g1 + ")-(" + m1 + "))^2 + ((" + g2 + ")-(" + m2 + "))^2 - (" + rsq + ")"
    297             ];
    298         },
    299
    300         /**
    301          * Generate symbolic radius calculation for loci determination with Groebner-Basis algorithm.
    302          * @returns {String} String containing symbolic calculation of the circle's radius or an empty string
    303          * if the radius can't be expressed in a polynomial equation.
    304          * @private
    305          */
    306         generateRadiusSquared: function () {
    307             /*
    308              * Four cases:
    309              *
    310              *   (a) Two points
    311              *   (b) center and radius
    312              *   (c) center and radius given by length of a segment
    313              *   (d) center and radius given by another circle
    314              */
    315             var m1,
    316                 m2,
    317                 p1,
    318                 p2,
    319                 q1,
    320                 q2,
    321                 rsq = "";
    322
    323             if (this.method === "twoPoints") {
    324                 m1 = this.center.symbolic.x;
    325                 m2 = this.center.symbolic.y;
    326                 p1 = this.point2.symbolic.x;
    327                 p2 = this.point2.symbolic.y;
    328
    329                 rsq = "((" + p1 + ")-(" + m1 + "))^2 + ((" + p2 + ")-(" + m2 + "))^2";
    330             } else if (this.method === "pointRadius") {
    331                 if (Type.isNumber(this.radius)) {
    332                     rsq = (this.radius * this.radius).toString();
    333                 }
    334             } else if (this.method === "pointLine") {
    335                 p1 = this.line.point1.symbolic.x;
    336                 p2 = this.line.point1.symbolic.y;
    337
    338                 q1 = this.line.point2.symbolic.x;
    339                 q2 = this.line.point2.symbolic.y;
    340
    341                 rsq = "((" + p1 + ")-(" + q1 + "))^2 + ((" + p2 + ")-(" + q2 + "))^2";
    342             } else if (this.method === "pointCircle") {
    343                 rsq = this.circle.Radius();
    344             }
    345
    346             return rsq;
    347         },
    348
    349         /**
    350          * Uses the boards renderer to update the circle.
    351          */
    352         update: function () {
    353             var x, y, z, r, c, i;
    354
    355             if (this.needsUpdate) {
    356                 if (Type.evaluate(this.visProp.trace)) {
    357                     this.cloneToBackground(true);
    358                 }
    359
    360                 if (this.method === "pointLine") {
    361                     this.radius = this.line.point1.coords.distance(
    362                         Const.COORDS_BY_USER,
    363                         this.line.point2.coords
    364                     );
    365                 } else if (this.method === "pointCircle") {
    366                     this.radius = this.circle.Radius();
    367                 } else if (this.method === "pointRadius") {
    368                     this.radius = this.updateRadius();
    369                 }
    370                 this.radius = Math.abs(this.radius);
    371
    372                 this.updateStdform();
    373                 this.updateQuadraticform();
    374
    375                 // Approximate the circle by 4 Bezier segments
    376                 // This will be used for intersections of type curve / circle.
    377                 // See https://spencermortensen.com/articles/bezier-circle/
    378                 z = this.center.coords.usrCoords[0];
    379                 x = this.center.coords.usrCoords[1] / z;
    380                 y = this.center.coords.usrCoords[2] / z;
    381                 z /= z;
    382                 r = this.Radius();
    383                 c = 0.551915024494;
    384
    385                 this.numberPoints = 13;
    386                 this.dataX = [
    387                     x + r, x + r, x + r * c, x, x - r * c, x - r, x - r, x - r, x - r * c, x, x + r * c, x + r, x + r
    388                 ];
    389                 this.dataY = [
    390                     y, y + r * c, y + r, y + r, y + r, y + r * c, y, y - r * c, y - r, y - r, y - r, y - r * c, y
    391                 ];
    392                 this.bezierDegree = 3;
    393                 for (i = 0; i < this.numberPoints; i++) {
    394                     this.points[i] = new Coords(
    395                         Const.COORDS_BY_USER,
    396                         [this.dataX[i], this.dataY[i]],
    397                         this.board
    398                     );
    399                 }
    400             }
    401
    402             return this;
    403         },
    404
    405         /**
    406          * Updates this circle's {@link JXG.Circle#quadraticform}.
    407          * @private
    408          */
    409         updateQuadraticform: function () {
    410             var m = this.center,
    411                 mX = m.X(),
    412                 mY = m.Y(),
    413                 r = this.Radius();
    414
    415             this.quadraticform = [
    416                 [mX * mX + mY * mY - r * r, -mX, -mY],
    417                 [-mX, 1, 0],
    418                 [-mY, 0, 1]
    419             ];
    420         },
    421
    422         /**
    423          * Updates the stdform derived from the position of the center and the circle's radius.
    424          * @private
    425          */
    426         updateStdform: function () {
    427             this.stdform[3] = 0.5;
    428             this.stdform[4] = this.Radius();
    429             this.stdform[1] = -this.center.coords.usrCoords[1];
    430             this.stdform[2] = -this.center.coords.usrCoords[2];
    431             if (!isFinite(this.stdform[4])) {
    432                 this.stdform[0] = Type.exists(this.point2)
    433                     ? -(
    434                           this.stdform[1] * this.point2.coords.usrCoords[1] +
    435                           this.stdform[2] * this.point2.coords.usrCoords[2]
    436                       )
    437                     : 0;
    438             }
    439             this.normalize();
    440         },
    441
    442         /**
    443          * Uses the boards renderer to update the circle.
    444          * @private
    445          */
    446         updateRenderer: function () {
    447             // var wasReal;
    448
    449             if (!this.needsUpdate) {
    450                 return this;
    451             }
    452
    453             if (this.visPropCalc.visible) {
    454                 // wasReal = this.isReal;
    455                 this.isReal =
    456                     !isNaN(
    457                         this.center.coords.usrCoords[1] +
    458                             this.center.coords.usrCoords[2] +
    459                             this.Radius()
    460                     ) && this.center.isReal;
    461
    462                 if (
    463                     //wasReal &&
    464                     !this.isReal
    465                 ) {
    466                     this.updateVisibility(false);
    467                 }
    468             }
    469
    470             // Update the position
    471             if (this.visPropCalc.visible) {
    472                 this.board.renderer.updateEllipse(this);
    473             }
    474
    475             // Update the label if visible.
    476             if (
    477                 this.hasLabel &&
    478                 this.visPropCalc.visible &&
    479                 this.label &&
    480                 this.label.visPropCalc.visible &&
    481                 this.isReal
    482             ) {
    483                 this.label.update();
    484                 this.board.renderer.updateText(this.label);
    485             }
    486
    487             // Update rendNode display
    488             this.setDisplayRendNode();
    489             // if (this.visPropCalc.visible !== this.visPropOld.visible) {
    490             //     this.board.renderer.display(this, this.visPropCalc.visible);
    491             //     this.visPropOld.visible = this.visPropCalc.visible;
    492             //
    493             //     if (this.hasLabel) {
    494             //         this.board.renderer.display(this.label, this.label.visPropCalc.visible);
    495             //     }
    496             // }
    497
    498             this.needsUpdate = false;
    499             return this;
    500         },
    501
    502         /**
    503          * Finds dependencies in a given term and resolves them by adding the elements referenced in this
    504          * string to the circle's list of ancestors.
    505          * @param {String} contentStr
    506          * @private
    507          */
    508         notifyParents: function (contentStr) {
    509             if (Type.isString(contentStr)) {
    510                 GeonextParser.findDependencies(this, contentStr, this.board);
    511             }
    512         },
    513
    514         /**
    515          * Set a new radius, then update the board.
    516          * @param {String|Number|function} r A string, function or number describing the new radius.
    517          * @returns {JXG.Circle} Reference to this circle
    518          */
    519         setRadius: function (r) {
    520             this.updateRadius = Type.createFunction(r, this.board);
    521             this.addParentsFromJCFunctions([this.updateRadius]);
    522             this.board.update();
    523
    524             return this;
    525         },
    526
    527         /**
    528          * Calculates the radius of the circle.
    529          * @param {String|Number|function} [value] Set new radius
    530          * @returns {Number} The radius of the circle
    531          */
    532         Radius: function (value) {
    533             if (Type.exists(value)) {
    534                 this.setRadius(value);
    535                 return this.Radius();
    536             }
    537
    538             if (this.method === "twoPoints") {
    539                 if (
    540                     Type.cmpArrays(this.point2.coords.usrCoords, [0, 0, 0]) ||
    541                     Type.cmpArrays(this.center.coords.usrCoords, [0, 0, 0])
    542                 ) {
    543                     return NaN;
    544                 }
    545
    546                 return this.center.Dist(this.point2);
    547             }
    548
    549             if (this.method === "pointLine" || this.method === "pointCircle") {
    550                 return this.radius;
    551             }
    552
    553             if (this.method === "pointRadius") {
    554                 return Math.abs(this.updateRadius());
    555             }
    556
    557             return NaN;
    558         },
    559
    560         /**
    561          * Calculates the diameter of the circle.
    562          * @returns {Number} The Diameter of the circle
    563          */
    564         Diameter: function () {
    565             return 2 * this.Radius();
    566         },
    567
    568         /**
    569          * Use {@link JXG.Circle#Radius}.
    570          * @deprecated
    571          */
    572         getRadius: function () {
    573             JXG.deprecated("Circle.getRadius()", "Circle.Radius()");
    574             return this.Radius();
    575         },
    576
    577         // documented in geometry element
    578         getTextAnchor: function () {
    579             return this.center.coords;
    580         },
    581
    582         // documented in geometry element
    583         getLabelAnchor: function () {
    584             var x,
    585                 y,
    586                 r = this.Radius(),
    587                 c = this.center.coords.usrCoords,
    588                 SQRTH = 7.071067811865e-1; // sqrt(2)/2
    589
    590             switch (Type.evaluate(this.visProp.label.position)) {
    591                 case "lft":
    592                     x = c[1] - r;
    593                     y = c[2];
    594                     break;
    595                 case "llft":
    596                     x = c[1] - SQRTH * r;
    597                     y = c[2] - SQRTH * r;
    598                     break;
    599                 case "rt":
    600                     x = c[1] + r;
    601                     y = c[2];
    602                     break;
    603                 case "lrt":
    604                     x = c[1] + SQRTH * r;
    605                     y = c[2] - SQRTH * r;
    606                     break;
    607                 case "urt":
    608                     x = c[1] + SQRTH * r;
    609                     y = c[2] + SQRTH * r;
    610                     break;
    611                 case "top":
    612                     x = c[1];
    613                     y = c[2] + r;
    614                     break;
    615                 case "bot":
    616                     x = c[1];
    617                     y = c[2] - r;
    618                     break;
    619                 default:
    620                     // includes case 'ulft'
    621                     x = c[1] - SQRTH * r;
    622                     y = c[2] + SQRTH * r;
    623                     break;
    624             }
    625
    626             return new Coords(Const.COORDS_BY_USER, [x, y], this.board);
    627         },
    628
    629         // documented in geometry element
    630         cloneToBackground: function () {
    631             var er,
    632                 r = this.Radius(),
    633                 copy = {
    634                     id: this.id + "T" + this.numTraces,
    635                     elementClass: Const.OBJECT_CLASS_CIRCLE,
    636                     center: {
    637                         coords: this.center.coords
    638                     },
    639                     Radius: function () {
    640                         return r;
    641                     },
    642                     getRadius: function () {
    643                         return r;
    644                     },
    645                     board: this.board,
    646                     visProp: Type.deepCopy(this.visProp, this.visProp.traceattributes, true)
    647                 };
    648
    649             copy.visProp.layer = this.board.options.layer.trace;
    650
    651             this.numTraces++;
    652             Type.clearVisPropOld(copy);
    653             copy.visPropCalc = {
    654                 visible: Type.evaluate(copy.visProp.visible)
    655             };
    656
    657             er = this.board.renderer.enhancedRendering;
    658             this.board.renderer.enhancedRendering = true;
    659             this.board.renderer.drawEllipse(copy);
    660             this.board.renderer.enhancedRendering = er;
    661             this.traces[copy.id] = copy.rendNode;
    662
    663             return this;
    664         },
    665
    666         /**
    667          * Add transformations to this circle.
    668          * @param {JXG.Transformation|Array} transform Either one {@link JXG.Transformation} or an array of {@link JXG.Transformation}s.
    669          * @returns {JXG.Circle} Reference to this circle object.
    670          */
    671         addTransform: function (transform) {
    672             var i,
    673                 list = Type.isArray(transform) ? transform : [transform],
    674                 len = list.length;
    675
    676             for (i = 0; i < len; i++) {
    677                 this.center.transformations.push(list[i]);
    678
    679                 if (this.method === "twoPoints") {
    680                     this.point2.transformations.push(list[i]);
    681                 }
    682             }
    683
    684             return this;
    685         },
    686
    687         // see element.js
    688         snapToGrid: function () {
    689             var forceIt = Type.evaluate(this.visProp.snaptogrid);
    690
    691             this.center.handleSnapToGrid(forceIt, true);
    692             if (this.method === "twoPoints") {
    693                 this.point2.handleSnapToGrid(forceIt, true);
    694             }
    695
    696             return this;
    697         },
    698
    699         // see element.js
    700         snapToPoints: function () {
    701             var forceIt = Type.evaluate(this.visProp.snaptopoints);
    702
    703             this.center.handleSnapToPoints(forceIt);
    704             if (this.method === "twoPoints") {
    705                 this.point2.handleSnapToPoints(forceIt);
    706             }
    707
    708             return this;
    709         },
    710
    711         /**
    712          * Treats the circle as parametric curve and calculates its X coordinate.
    713          * @param {Number} t Number between 0 and 1.
    714          * @returns {Number} <tt>X(t)= radius*cos(t)+centerX</tt>.
    715          */
    716         X: function (t) {
    717             return this.Radius() * Math.cos(t * 2 * Math.PI) + this.center.coords.usrCoords[1];
    718         },
    719
    720         /**
    721          * Treats the circle as parametric curve and calculates its Y coordinate.
    722          * @param {Number} t Number between 0 and 1.
    723          * @returns {Number} <tt>X(t)= radius*sin(t)+centerY</tt>.
    724          */
    725         Y: function (t) {
    726             return this.Radius() * Math.sin(t * 2 * Math.PI) + this.center.coords.usrCoords[2];
    727         },
    728
    729         /**
    730          * Treat the circle as parametric curve and calculates its Z coordinate.
    731          * @param {Number} t ignored
    732          * @returns {Number} 1.0
    733          */
    734         Z: function (t) {
    735             return 1.0;
    736         },
    737
    738         /**
    739          * Returns 0.
    740          * @private
    741          */
    742         minX: function () {
    743             return 0.0;
    744         },
    745
    746         /**
    747          * Returns 1.
    748          * @private
    749          */
    750         maxX: function () {
    751             return 1.0;
    752         },
    753
    754         /**
    755          * Circle area
    756          * @returns {Number} area of the circle.
    757          */
    758         Area: function () {
    759             var r = this.Radius();
    760
    761             return r * r * Math.PI;
    762         },
    763
    764         /**
    765          * Perimeter (circumference) of circle.
    766          * @returns {Number} Perimeter of circle in user units.
    767          */
    768         Perimeter: function () {
    769             return 2 * this.Radius() * Math.PI;
    770         },
    771
    772         /**
    773          * Get bounding box of the circle.
    774          * @returns {Array} [x1, y1, x2, y2]
    775          */
    776         bounds: function () {
    777             var uc = this.center.coords.usrCoords,
    778                 r = this.Radius();
    779
    780             return [uc[1] - r, uc[2] + r, uc[1] + r, uc[2] - r];
    781         },
    782
    783         /**
    784          * Get data to construct this element. Data consists of the parent elements
    785          * and static data like radius.
    786          * @returns {Array} data necessary to construct this element
    787          */
    788         getParents: function () {
    789             if (this.parents.length === 1) {
    790                 // i.e. this.method === 'pointRadius'
    791                 return this.parents.concat(this.radius);
    792             }
    793             return this.parents;
    794         }
    795     }
    796 );
    797
    798 /**
    799  * @class This element is used to provide a constructor for a circle.
    800  * @pseudo
    801  * @description  A circle consists of all points with a given distance from one point. This point is called center, the distance is called radius.
    802  * A circle can be constructed by providing a center and a point on the circle or a center and a radius (given as a number, function,
    803  * line, or circle). If the radius is a negative value, its absolute values is taken.
    804  * @name Circle
    805  * @augments JXG.Circle
    806  * @constructor
    807  * @type JXG.Circle
    808  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    809  * @param {JXG.Point_number,JXG.Point,JXG.Line,JXG.Circle} center,radius The center must be given as a {@link JXG.Point},
    810  * see {@link JXG.providePoints}, but the radius can be given
    811  * as a number (which will create a circle with a fixed radius),
    812  * another {@link JXG.Point}, a {@link JXG.Line} (the distance of start and end point of the
    813  * line will determine the radius), or another {@link JXG.Circle}.
    814  * <p>
    815  * If the radius is supplied as number or output of a function, its absolute value is taken.
    816  *
    817  * @example
    818  * // Create a circle providing two points
    819  * var p1 = board.create('point', [2.0, 2.0]),
    820  *     p2 = board.create('point', [2.0, 0.0]),
    821  *     c1 = board.create('circle', [p1, p2]);
    822  *
    823  * // Create another circle using the above circle
    824  * var p3 = board.create('point', [3.0, 2.0]),
    825  *     c2 = board.create('circle', [p3, c1]);
    826  * </pre><div class="jxgbox" id="JXG5f304d31-ef20-4a8e-9c0e-ea1a2b6c79e0" style="width: 400px; height: 400px;"></div>
    827  * <script type="text/javascript">
    828  * (function() {
    829  *   var cex1_board = JXG.JSXGraph.initBoard('JXG5f304d31-ef20-4a8e-9c0e-ea1a2b6c79e0', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    830  *       cex1_p1 = cex1_board.create('point', [2.0, 2.0]),
    831  *       cex1_p2 = cex1_board.create('point', [2.0, 0.0]),
    832  *       cex1_c1 = cex1_board.create('circle', [cex1_p1, cex1_p2]),
    833  *       cex1_p3 = cex1_board.create('point', [3.0, 2.0]),
    834  *       cex1_c2 = cex1_board.create('circle', [cex1_p3, cex1_c1]);
    835  * })();
    836  * </script><pre>
    837  * @example
    838  * // Create a circle providing two points
    839  * var p1 = board.create('point', [2.0, 2.0]),
    840  *     c1 = board.create('circle', [p1, 3]);
    841  *
    842  * // Create another circle using the above circle
    843  * var c2 = board.create('circle', [function() { return [p1.X(), p1.Y() + 1];}, function() { return c1.Radius(); }]);
    844  * </pre><div class="jxgbox" id="JXG54165f60-93b9-441d-8979-ac5d0f193020" style="width: 400px; height: 400px;"></div>
    845  * <script type="text/javascript">
    846  * (function() {
    847  * var board = JXG.JSXGraph.initBoard('JXG54165f60-93b9-441d-8979-ac5d0f193020', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    848  * var p1 = board.create('point', [2.0, 2.0]);
    849  * var c1 = board.create('circle', [p1, 3]);
    850  *
    851  * // Create another circle using the above circle
    852  * var c2 = board.create('circle', [function() { return [p1.X(), p1.Y() + 1];}, function() { return c1.Radius(); }]);
    853  * })();
    854  * </script><pre>
    855  * @example
    856  * var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
    857  * var reflect = board.create('transform', [li], {type: 'reflect'});
    858  *
    859  * var c1 = board.create('circle', [[-2,-2], [-2, -1]], {center: {visible:true}});
    860  * var c2 = board.create('circle', [c1, reflect]);
    861  *      * </pre><div id="JXGa2a5a870-5dbb-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    862  * <script type="text/javascript">
    863  *     (function() {
    864  *         var board = JXG.JSXGraph.initBoard('JXGa2a5a870-5dbb-11e8-9fb9-901b0e1b8723',
    865  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    866  *             var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
    867  *             var reflect = board.create('transform', [li], {type: 'reflect'});
    868  *
    869  *             var c1 = board.create('circle', [[-2,-2], [-2, -1]], {center: {visible:true}});
    870  *             var c2 = board.create('circle', [c1, reflect]);
    871  *     })();
    872  *
    873  * </script><pre>
    874  *
    875  * @example
    876  * var t = board.create('transform', [2, 1.5], {type: 'scale'});
    877  * var c1 = board.create('circle', [[1.3, 1.3], [0, 1.3]], {strokeColor: 'black', center: {visible:true}});
    878  * var c2 = board.create('circle', [c1, t], {strokeColor: 'black'});
    879  *
    880  * </pre><div id="JXG0686a222-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    881  * <script type="text/javascript">
    882  *     (function() {
    883  *         var board = JXG.JSXGraph.initBoard('JXG0686a222-6339-11e8-9fb9-901b0e1b8723',
    884  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    885  *     var t = board.create('transform', [2, 1.5], {type: 'scale'});
    886  *     var c1 = board.create('circle', [[1.3, 1.3], [0, 1.3]], {strokeColor: 'black', center: {visible:true}});
    887  *     var c2 = board.create('circle', [c1, t], {strokeColor: 'black'});
    888  *
    889  *     })();
    890  *
    891  * </script><pre>
    892  *
    893  */
    894 JXG.createCircle = function (board, parents, attributes) {
    895     var el,
    896         p,
    897         i,
    898         attr,
    899         obj,
    900         isDraggable = true,
    901         point_style = ["center", "point2"];
    902
    903     p = [];
    904     obj = board.select(parents[0]);
    905     if (
    906         Type.isObject(obj) &&
    907         obj.elementClass === Const.OBJECT_CLASS_CIRCLE &&
    908         Type.isTransformationOrArray(parents[1])
    909     ) {
    910         attr = Type.copyAttributes(attributes, board.options, "circle");
    911         // if (!Type.exists(attr.type) || attr.type.toLowerCase() !== 'euclidean') {
    912         //     // Create a circle element from a circle and a Euclidean transformation
    913         //     el = JXG.createCircle(board, [obj.center, function() { return obj.Radius(); }], attr);
    914         // } else {
    915         // Create a conic element from a circle and a projective transformation
    916         el = JXG.createEllipse(
    917             board,
    918             [
    919                 obj.center,
    920                 obj.center,
    921                 function () {
    922                     return 2 * obj.Radius();
    923                 }
    924             ],
    925             attr
    926         );
    927         // }
    928         el.addTransform(parents[1]);
    929         return el;
    930     }
    931     // Circle defined by points
    932     for (i = 0; i < parents.length; i++) {
    933         if (Type.isPointType(board, parents[i])) {
    934             if (parents.length < 3) {
    935                 p = p.concat(
    936                     Type.providePoints(board, [parents[i]], attributes, "circle", [point_style[i]])
    937                 );
    938             } else {
    939                 p = p.concat(
    940                     Type.providePoints(board, [parents[i]], attributes, "point")
    941                 );
    942                 }
    943             if (p[p.length - 1] === false) {
    944                 throw new Error(
    945                     "JSXGraph: Can't create circle from this type. Please provide a point type."
    946                 );
    947             }
    948         } else {
    949             p.push(parents[i]);
    950         }
    951     }
    952
    953     attr = Type.copyAttributes(attributes, board.options, "circle");
    954
    955     if (p.length === 2 && Type.isPoint(p[0]) && Type.isPoint(p[1])) {
    956         // Point/Point
    957         el = new JXG.Circle(board, "twoPoints", p[0], p[1], attr);
    958     } else if (
    959         (Type.isNumber(p[0]) || Type.isFunction(p[0]) || Type.isString(p[0])) &&
    960         Type.isPoint(p[1])
    961     ) {
    962         // Number/Point
    963         el = new JXG.Circle(board, "pointRadius", p[1], p[0], attr);
    964     } else if (
    965         (Type.isNumber(p[1]) || Type.isFunction(p[1]) || Type.isString(p[1])) &&
    966         Type.isPoint(p[0])
    967     ) {
    968         // Point/Number
    969         el = new JXG.Circle(board, "pointRadius", p[0], p[1], attr);
    970     } else if (p[0].elementClass === Const.OBJECT_CLASS_CIRCLE && Type.isPoint(p[1])) {
    971         // Circle/Point
    972         el = new JXG.Circle(board, "pointCircle", p[1], p[0], attr);
    973     } else if (p[1].elementClass === Const.OBJECT_CLASS_CIRCLE && Type.isPoint(p[0])) {
    974         // Point/Circle
    975         el = new JXG.Circle(board, "pointCircle", p[0], p[1], attr);
    976     } else if (p[0].elementClass === Const.OBJECT_CLASS_LINE && Type.isPoint(p[1])) {
    977         // Line/Point
    978         el = new JXG.Circle(board, "pointLine", p[1], p[0], attr);
    979     } else if (p[1].elementClass === Const.OBJECT_CLASS_LINE && Type.isPoint(p[0])) {
    980         // Point/Line
    981         el = new JXG.Circle(board, "pointLine", p[0], p[1], attr);
    982     } else if (
    983         parents.length === 3 &&
    984         Type.isPoint(p[0]) &&
    985         Type.isPoint(p[1]) &&
    986         Type.isPoint(p[2])
    987     ) {
    988         // Circle through three points
    989         // Check if circumcircle element is available
    990         if (JXG.elements.circumcircle) {
    991             el = JXG.elements.circumcircle(board, p, attr);
    992         } else {
    993             throw new Error(
    994                 "JSXGraph: Can't create circle with three points. Please include the circumcircle element (element/composition)."
    995             );
    996         }
    997     } else {
    998         throw new Error(
    999             "JSXGraph: Can't create circle with parent types '" +
    1000                 typeof parents[0] +
    1001                 "' and '" +
    1002                 typeof parents[1] +
    1003                 "'." +
    1004                 "\nPossible parent types: [point,point], [point,number], [point,function], [point,circle], [point,point,point], [circle,transformation]"
    1005         );
    1006     }
    1007
    1008     el.isDraggable = isDraggable;
    1009     el.setParents(p);
    1010     el.elType = "circle";
    1011     for (i = 0; i < p.length; i++) {
    1012         if (Type.isPoint(p[i])) {
    1013             el.inherits.push(p[i]);
    1014         }
    1015     }
    1016     return el;
    1017 };
    1018
    1019 JXG.registerElement("circle", JXG.createCircle);
    1020
    1021 export default JXG.Circle;
    1022 // export default {
    1023 //     Circle: JXG.Circle,
    1024 //     createCircle: JXG.createCircle
    1025 // };
    1026