      1 /*
      2     Copyright 2008-2025
      3         Matthias Ehmann,
      4         Michael Gerhaeuser,
      5         Carsten Miller,
      6         Bianca Valentin,
      7         Alfred Wassermann,
      8         Peter Wilfahrt
      9
     10     This file is part of JSXGraph.
     11
     12     JSXGraph is free software dual licensed under the GNU LGPL or MIT License.
     13
     14     You can redistribute it and/or modify it under the terms of the
     15
     16       * GNU Lesser General Public License as published by
     17         the Free Software Foundation, either version 3 of the License, or
     18         (at your option) any later version
     19       OR
     20       * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT
     21
     22     JSXGraph is distributed in the hope that it will be useful,
     23     but WITHOUT ANY WARRANTY; without even the implied warranty of
     24     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     25     GNU Lesser General Public License for more details.
     26
     27     You should have received a copy of the GNU Lesser General Public License and
     28     the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
     29     and <https://opensource.org/licenses/MIT/>.
     30  */
     31
     32 /*global JXG: true, define: true*/
     33 /*jslint nomen: true, plusplus: true*/
     34
     35 /**
     36  * @fileoverview 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.js";
     42 import GeometryElement from "./element.js";
     43 import Coords from "./coords.js";
     44 import Const from "./constants.js";
     45 import Mat from "../math/math.js";
     46 import GeonextParser from "../parser/geonext.js";
     47 import Type from "../utils/type.js";
     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 JXG.Circle#center
     85      * @see JXG.Circle#point2
     86      * @see JXG.Circle#radius
     87      * @see JXG.Circle#line
     88      * @see JXG.Circle#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 JXG.Circle#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 JXG.Circle#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 JXG.Circle#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 JXG.Circle#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(this.evalVisProp('precision'))) {
    224                 type = this.board._inputDevice;
    225                 prec = this.evalVisProp('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 += this.evalVisProp('strokewidth') * 0.5;
    236             prec /= Math.sqrt(Math.abs(this.board.unitX * this.board.unitY));
    237
    238             if (this.evalVisProp('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 (this.evalVisProp('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 (this.evalVisProp('nonnegativeonly')) ?
    555                     Math.max(0.0, this.updateRadius()) :
    556                     Math.abs(this.updateRadius());
    557             }
    558
    559             return NaN;
    560         },
    561
    562         /**
    563          * Calculates the diameter of the circle.
    564          * @returns {Number} The Diameter of the circle
    565          */
    566         Diameter: function () {
    567             return 2 * this.Radius();
    568         },
    569
    570         /**
    571          * Use {@link JXG.Circle#Radius}.
    572          * @deprecated
    573          */
    574         getRadius: function () {
    575             JXG.deprecated("Circle.getRadius()", "Circle.Radius()");
    576             return this.Radius();
    577         },
    578
    579         // documented in geometry element
    580         getTextAnchor: function () {
    581             return this.center.coords;
    582         },
    583
    584         // documented in geometry element
    585         getLabelAnchor: function () {
    586             var x, y, pos,
    587                 xy, lbda, sgn,
    588                 dist = 1.5,
    589                 r = this.Radius(),
    590                 c = this.center.coords.usrCoords,
    591                 SQRTH = 7.071067811865e-1; // sqrt(2)/2
    592
    593             if (!Type.exists(this.label)) {
    594                 return new Coords(Const.COORDS_BY_SCREEN, [NaN, NaN], this.board);
    595             }
    596
    597             pos = this.label.evalVisProp('position');
    598             if (!Type.isString(pos)) {
    599                 return new Coords(Const.COORDS_BY_SCREEN, [NaN, NaN], this.board);
    600             }
    601
    602             if (pos.indexOf('right') < 0 && pos.indexOf('left') < 0) {
    603                 switch (this.evalVisProp('label.position')) {
    604                     case "lft":
    605                         x = c[1] - r;
    606                         y = c[2];
    607                         break;
    608                     case "llft":
    609                         x = c[1] - SQRTH * r;
    610                         y = c[2] - SQRTH * r;
    611                         break;
    612                     case "rt":
    613                         x = c[1] + r;
    614                         y = c[2];
    615                         break;
    616                     case "lrt":
    617                         x = c[1] + SQRTH * r;
    618                         y = c[2] - SQRTH * r;
    619                         break;
    620                     case "urt":
    621                         x = c[1] + SQRTH * r;
    622                         y = c[2] + SQRTH * r;
    623                         break;
    624                     case "top":
    625                         x = c[1];
    626                         y = c[2] + r;
    627                         break;
    628                     case "bot":
    629                         x = c[1];
    630                         y = c[2] - r;
    631                         break;
    632                     default:
    633                         // includes case 'ulft'
    634                         x = c[1] - SQRTH * r;
    635                         y = c[2] + SQRTH * r;
    636                         break;
    637                 }
    638             } else {
    639                 // New positioning
    640                 c = this.center.coords.scrCoords;
    641
    642                 xy = Type.parsePosition(pos);
    643                 lbda = Type.parseNumber(xy.pos, 2 * Math.PI, 1);
    644                 if (xy.pos.indexOf('fr') < 0 &&
    645                     xy.pos.indexOf('%') < 0) {
    646                     if (xy.pos.indexOf('px') >= 0) {
    647                         // 'px' or numbers are not supported
    648                         lbda = 0;
    649                     } else {
    650                         // Pure numbers are interpreted as degrees
    651                         lbda *= Math.PI / 180;
    652                     }
    653                 }
    654
    655                 // Position left or right
    656                 sgn = 1;
    657                 if (xy.side === 'left') {
    658                     sgn = -1;
    659                 }
    660
    661                 if (Type.exists(this.label)) {
    662                     dist = sgn * 0.5 * this.label.evalVisProp('distance');
    663                 }
    664
    665                 x = c[1] + (r * this.board.unitX + this.label.size[0] * dist) * Math.cos(lbda);
    666                 y = c[2] - (r * this.board.unitY + this.label.size[1] * dist) * Math.sin(lbda);
    667
    668                 return new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board);
    669             }
    670
    671             return new Coords(Const.COORDS_BY_USER, [x, y], this.board);
    672         },
    673
    674         // documented in geometry element
    675         cloneToBackground: function () {
    676             var er,
    677                 r = this.Radius(),
    678                 copy = Type.getCloneObject(this);
    679
    680             copy.center = {
    681                 coords: this.center.coords
    682             };
    683             copy.Radius = function () {
    684                 return r;
    685             };
    686             copy.getRadius = function () {
    687                 return r;
    688             };
    689
    690             er = this.board.renderer.enhancedRendering;
    691             this.board.renderer.enhancedRendering = true;
    692             this.board.renderer.drawEllipse(copy);
    693             this.board.renderer.enhancedRendering = er;
    694             this.traces[copy.id] = copy.rendNode;
    695
    696             return this;
    697         },
    698
    699         /**
    700          * Add transformations to this circle.
    701          * @param {JXG.Transformation|Array} transform Either one {@link JXG.Transformation} or an array of {@link JXG.Transformation}s.
    702          * @returns {JXG.Circle} Reference to this circle object.
    703          */
    704         addTransform: function (transform) {
    705             var i,
    706                 list = Type.isArray(transform) ? transform : [transform],
    707                 len = list.length;
    708
    709             for (i = 0; i < len; i++) {
    710                 this.center.transformations.push(list[i]);
    711
    712                 if (this.method === "twoPoints") {
    713                     this.point2.transformations.push(list[i]);
    714                 }
    715             }
    716
    717             return this;
    718         },
    719
    720         // see element.js
    721         snapToGrid: function () {
    722             var forceIt = this.evalVisProp('snaptogrid');
    723
    724             this.center.handleSnapToGrid(forceIt, true);
    725             if (this.method === "twoPoints") {
    726                 this.point2.handleSnapToGrid(forceIt, true);
    727             }
    728
    729             return this;
    730         },
    731
    732         // see element.js
    733         snapToPoints: function () {
    734             var forceIt = this.evalVisProp('snaptopoints');
    735
    736             this.center.handleSnapToPoints(forceIt);
    737             if (this.method === "twoPoints") {
    738                 this.point2.handleSnapToPoints(forceIt);
    739             }
    740
    741             return this;
    742         },
    743
    744         /**
    745          * Treats the circle as parametric curve and calculates its X coordinate.
    746          * @param {Number} t Number between 0 and 1.
    747          * @returns {Number} <tt>X(t)= radius*cos(t)+centerX</tt>.
    748          */
    749         X: function (t) {
    750             return this.Radius() * Math.cos(t * 2 * Math.PI) + this.center.coords.usrCoords[1];
    751         },
    752
    753         /**
    754          * Treats the circle as parametric curve and calculates its Y coordinate.
    755          * @param {Number} t Number between 0 and 1.
    756          * @returns {Number} <tt>X(t)= radius*sin(t)+centerY</tt>.
    757          */
    758         Y: function (t) {
    759             return this.Radius() * Math.sin(t * 2 * Math.PI) + this.center.coords.usrCoords[2];
    760         },
    761
    762         /**
    763          * Treat the circle as parametric curve and calculates its Z coordinate.
    764          * @param {Number} t ignored
    765          * @returns {Number} 1.0
    766          */
    767         Z: function (t) {
    768             return 1.0;
    769         },
    770
    771         /**
    772          * Returns 0.
    773          * @private
    774          */
    775         minX: function () {
    776             return 0.0;
    777         },
    778
    779         /**
    780          * Returns 1.
    781          * @private
    782          */
    783         maxX: function () {
    784             return 1.0;
    785         },
    786
    787         /**
    788          * Circle area
    789          * @returns {Number} area of the circle.
    790          */
    791         Area: function () {
    792             var r = this.Radius();
    793
    794             return r * r * Math.PI;
    795         },
    796
    797         /**
    798          * Perimeter (circumference) of circle.
    799          * @returns {Number} Perimeter of circle in user units.
    800          */
    801         Perimeter: function () {
    802             return 2 * this.Radius() * Math.PI;
    803         },
    804
    805         /**
    806          * Get bounding box of the circle.
    807          * @returns {Array} [x1, y1, x2, y2]
    808          */
    809         bounds: function () {
    810             var uc = this.center.coords.usrCoords,
    811                 r = this.Radius();
    812
    813             return [uc[1] - r, uc[2] + r, uc[1] + r, uc[2] - r];
    814         },
    815
    816         /**
    817          * Get data to construct this element. Data consists of the parent elements
    818          * and static data like radius.
    819          * @returns {Array} data necessary to construct this element
    820          */
    821         getParents: function () {
    822             if (this.parents.length === 1) {
    823                 // i.e. this.method === 'pointRadius'
    824                 return this.parents.concat(this.radius);
    825             }
    826             return this.parents;
    827         }
    828     }
    829 );
    830
    831 /**
    832  * @class A circle can be defined by various combinations of points and numbers.
    833  * @pseudo
    834  * @description  A circle consists of all points with a given distance from one point. This point is called center, the distance is called radius.
    835  * 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,
    836  * line, or circle). If the radius is a negative value, its absolute values is taken.
    837  * @name Circle
    838  * @augments JXG.Circle
    839  * @constructor
    840  * @type JXG.Circle
    841  * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
    842  * @param {JXG.Point_number,JXG.Point,JXG.Line,JXG.Circle} center,radius The center must be given as a {@link JXG.Point},
    843  * see {@link JXG.providePoints}, but the radius can be given
    844  * as a number (which will create a circle with a fixed radius),
    845  * another {@link JXG.Point}, a {@link JXG.Line} (the distance of start and end point of the
    846  * line will determine the radius), or another {@link JXG.Circle}.
    847  * <p>
    848  * If the radius is supplied as number or output of a function, its absolute value is taken.
    849  *
    850  * @example
    851  * // Create a circle providing two points
    852  * var p1 = board.create('point', [2.0, 2.0]),
    853  *     p2 = board.create('point', [2.0, 0.0]),
    854  *     c1 = board.create('circle', [p1, p2]);
    855  *
    856  * // Create another circle using the above circle
    857  * var p3 = board.create('point', [3.0, 2.0]),
    858  *     c2 = board.create('circle', [p3, c1]);
    859  * </pre><div class="jxgbox" id="JXG5f304d31-ef20-4a8e-9c0e-ea1a2b6c79e0" style="width: 400px; height: 400px;"></div>
    860  * <script type="text/javascript">
    861  * (function() {
    862  *   var cex1_board = JXG.JSXGraph.initBoard('JXG5f304d31-ef20-4a8e-9c0e-ea1a2b6c79e0', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    863  *       cex1_p1 = cex1_board.create('point', [2.0, 2.0]),
    864  *       cex1_p2 = cex1_board.create('point', [2.0, 0.0]),
    865  *       cex1_c1 = cex1_board.create('circle', [cex1_p1, cex1_p2]),
    866  *       cex1_p3 = cex1_board.create('point', [3.0, 2.0]),
    867  *       cex1_c2 = cex1_board.create('circle', [cex1_p3, cex1_c1]);
    868  * })();
    869  * </script><pre>
    870  * @example
    871  * // Create a circle providing two points
    872  * var p1 = board.create('point', [2.0, 2.0]),
    873  *     c1 = board.create('circle', [p1, 3]);
    874  *
    875  * // Create another circle using the above circle
    876  * var c2 = board.create('circle', [function() { return [p1.X(), p1.Y() + 1];}, function() { return c1.Radius(); }]);
    877  * </pre><div class="jxgbox" id="JXG54165f60-93b9-441d-8979-ac5d0f193020" style="width: 400px; height: 400px;"></div>
    878  * <script type="text/javascript">
    879  * (function() {
    880  * var board = JXG.JSXGraph.initBoard('JXG54165f60-93b9-441d-8979-ac5d0f193020', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
    881  * var p1 = board.create('point', [2.0, 2.0]);
    882  * var c1 = board.create('circle', [p1, 3]);
    883  *
    884  * // Create another circle using the above circle
    885  * var c2 = board.create('circle', [function() { return [p1.X(), p1.Y() + 1];}, function() { return c1.Radius(); }]);
    886  * })();
    887  * </script><pre>
    888  * @example
    889  * var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
    890  * var reflect = board.create('transform', [li], {type: 'reflect'});
    891  *
    892  * var c1 = board.create('circle', [[-2,-2], [-2, -1]], {center: {visible:true}});
    893  * var c2 = board.create('circle', [c1, reflect]);
    894  *      * </pre><div id="JXGa2a5a870-5dbb-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    895  * <script type="text/javascript">
    896  *     (function() {
    897  *         var board = JXG.JSXGraph.initBoard('JXGa2a5a870-5dbb-11e8-9fb9-901b0e1b8723',
    898  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    899  *             var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
    900  *             var reflect = board.create('transform', [li], {type: 'reflect'});
    901  *
    902  *             var c1 = board.create('circle', [[-2,-2], [-2, -1]], {center: {visible:true}});
    903  *             var c2 = board.create('circle', [c1, reflect]);
    904  *     })();
    905  *
    906  * </script><pre>
    907  *
    908  * @example
    909  * var t = board.create('transform', [2, 1.5], {type: 'scale'});
    910  * var c1 = board.create('circle', [[1.3, 1.3], [0, 1.3]], {strokeColor: 'black', center: {visible:true}});
    911  * var c2 = board.create('circle', [c1, t], {strokeColor: 'black'});
    912  *
    913  * </pre><div id="JXG0686a222-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
    914  * <script type="text/javascript">
    915  *     (function() {
    916  *         var board = JXG.JSXGraph.initBoard('JXG0686a222-6339-11e8-9fb9-901b0e1b8723',
    917  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
    918  *     var t = board.create('transform', [2, 1.5], {type: 'scale'});
    919  *     var c1 = board.create('circle', [[1.3, 1.3], [0, 1.3]], {strokeColor: 'black', center: {visible:true}});
    920  *     var c2 = board.create('circle', [c1, t], {strokeColor: 'black'});
    921  *
    922  *     })();
    923  *
    924  * </script><pre>
    925  *
    926  */
    927 JXG.createCircle = function (board, parents, attributes) {
    928     var el,
    929         p,
    930         i,
    931         attr,
    932         obj,
    933         isDraggable = true,
    934         point_style = ["center", "point2"];
    935
    936     p = [];
    937     obj = board.select(parents[0]);
    938     if (
    939         Type.isObject(obj) &&
    940         obj.elementClass === Const.OBJECT_CLASS_CIRCLE &&
    941         Type.isTransformationOrArray(parents[1])
    942     ) {
    943         attr = Type.copyAttributes(attributes, board.options, "circle");
    944         // if (!Type.exists(attr.type) || attr.type.toLowerCase() !== 'euclidean') {
    945         //     // Create a circle element from a circle and a Euclidean transformation
    946         //     el = JXG.createCircle(board, [obj.center, function() { return obj.Radius(); }], attr);
    947         // } else {
    948         // Create a conic element from a circle and a projective transformation
    949         el = JXG.createEllipse(
    950             board,
    951             [
    952                 obj.center,
    953                 obj.center,
    954                 function () {
    955                     return 2 * obj.Radius();
    956                 }
    957             ],
    958             attr
    959         );
    960         // }
    961         el.addTransform(parents[1]);
    962         return el;
    963     }
    964     // Circle defined by points
    965     for (i = 0; i < parents.length; i++) {
    966         if (Type.isPointType(board, parents[i])) {
    967             if (parents.length < 3) {
    968                 p.push(
    969                     Type.providePoints(board, [parents[i]], attributes, "circle", [point_style[i]])[0]
    970                 );
    971             } else {
    972                 p.push(
    973                     Type.providePoints(board, [parents[i]], attributes, "point")[0]
    974                 );
    975             }
    976             if (p[p.length - 1] === false) {
    977                 throw new Error(
    978                     "JSXGraph: Can't create circle from this type. Please provide a point type."
    979                 );
    980             }
    981         } else {
    982             p.push(parents[i]);
    983         }
    984     }
    985
    986     attr = Type.copyAttributes(attributes, board.options, "circle");
    987
    988     if (p.length === 2 && Type.isPoint(p[0]) && Type.isPoint(p[1])) {
    989         // Point/Point
    990         el = new JXG.Circle(board, "twoPoints", p[0], p[1], attr);
    991     } else if (
    992         (Type.isNumber(p[0]) || Type.isFunction(p[0]) || Type.isString(p[0])) &&
    993         Type.isPoint(p[1])
    994     ) {
    995         // Number/Point
    996         el = new JXG.Circle(board, "pointRadius", p[1], p[0], attr);
    997     } else if (
    998         (Type.isNumber(p[1]) || Type.isFunction(p[1]) || Type.isString(p[1])) &&
    999         Type.isPoint(p[0])
    1000     ) {
    1001         // Point/Number
    1002         el = new JXG.Circle(board, "pointRadius", p[0], p[1], attr);
    1003     } else if (p[0].elementClass === Const.OBJECT_CLASS_CIRCLE && Type.isPoint(p[1])) {
    1004         // Circle/Point
    1005         el = new JXG.Circle(board, "pointCircle", p[1], p[0], attr);
    1006     } else if (p[1].elementClass === Const.OBJECT_CLASS_CIRCLE && Type.isPoint(p[0])) {
    1007         // Point/Circle
    1008         el = new JXG.Circle(board, "pointCircle", p[0], p[1], attr);
    1009     } else if (p[0].elementClass === Const.OBJECT_CLASS_LINE && Type.isPoint(p[1])) {
    1010         // Line/Point
    1011         el = new JXG.Circle(board, "pointLine", p[1], p[0], attr);
    1012     } else if (p[1].elementClass === Const.OBJECT_CLASS_LINE && Type.isPoint(p[0])) {
    1013         // Point/Line
    1014         el = new JXG.Circle(board, "pointLine", p[0], p[1], attr);
    1015     } else if (
    1016         parents.length === 3 &&
    1017         Type.isPoint(p[0]) &&
    1018         Type.isPoint(p[1]) &&
    1019         Type.isPoint(p[2])
    1020     ) {
    1021         // Circle through three points
    1022         // Check if circumcircle element is available
    1023         if (JXG.elements.circumcircle) {
    1024             el = JXG.elements.circumcircle(board, p, attr);
    1025         } else {
    1026             throw new Error(
    1027                 "JSXGraph: Can't create circle with three points. Please include the circumcircle element (element/composition)."
    1028             );
    1029         }
    1030     } else {
    1031         throw new Error(
    1032             "JSXGraph: Can't create circle with parent types '" +
    1033                 typeof parents[0] +
    1034                 "' and '" +
    1035                 typeof parents[1] +
    1036                 "'." +
    1037                 "\nPossible parent types: [point,point], [point,number], [point,function], [point,circle], [point,point,point], [circle,transformation]"
    1038         );
    1039     }
    1040
    1041     el.isDraggable = isDraggable;
    1042     el.setParents(p);
    1043     el.elType = "circle";
    1044     for (i = 0; i < p.length; i++) {
    1045         if (Type.isPoint(p[i])) {
    1046             el.inherits.push(p[i]);
    1047         }
    1048     }
    1049     return el;
    1050 };
    1051
    1052 JXG.registerElement("circle", JXG.createCircle);
    1053
    1054 export default JXG.Circle;
    1055 // export default {
    1056 //     Circle: JXG.Circle,
    1057 //     createCircle: JXG.createCircle
    1058 // };
    1059