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