1 /*
  2     Copyright 2008-2026
  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 import JXG from "../jxg.js";
 36 import Geometry from "../math/geometry.js";
 37 import Mat from "../math/math.js";
 38 import Statistics from "../math/statistics.js";
 39 import Coords from "../base/coords.js";
 40 import Const from "../base/constants.js";
 41 import Type from "../utils/type.js";
 42 
 43 /**
 44  * @class A circular sector is a subarea of the area enclosed by a circle. It is enclosed by two radii and an arc.
 45  * <p>
 46  * The sector as curve consists of two legs and an arc. The curve length is 6. That means, a point with coordinates
 47  * [sector.X(t), sector.Y(t)] is on
 48  * <ul>
 49  * <li> leg 1 if t is between 0 and 1,
 50  * <li> the arc if t is between 1 and 5,
 51  * <li> leg 2 if t is between 5 and 6.
 52  * </ul>
 53  * @pseudo
 54  * @name Sector
 55  * @augments JXG.Curve
 56  * @constructor
 57  * @type JXG.Curve
 58  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
 59  *
 60  * First possibility of input parameters are:
 61  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 A sector is defined by three points: The sector's center <tt>p1</tt>,
 62  * a second point <tt>p2</tt> defining the radius and a third point <tt>p3</tt> defining the angle of the sector. The
 63  * Sector is always drawn counter clockwise from <tt>p2</tt> to <tt>p3</tt>.
 64  * <p>
 65  * In this case, the sector will have an arc as sub-object.
 66  * <p>
 67  * Second possibility of input parameters are:
 68  * @param {JXG.Line_JXG.Line_array,number_array,number_number,function} line, line2, coords1 or direction1, coords2 or direction2, radius The sector is defined by two lines.
 69  * The two legs which define the sector are given by two coordinates arrays which are projected initially to the two lines or by
 70  * two directions (+/- 1). If the two lines are parallel, two of the defining points on different lines have to coincide.
 71  * This will be the center of the sector.
 72  * The last parameter is the radius of the sector.
 73  * <p>In this case, the sector will <b>not</b> have an arc as sub-object.
 74  *
 75  * @example
 76  * // Create a sector out of three free points
 77  * var p1 = board.create('point', [1.5, 5.0]),
 78  *     p2 = board.create('point', [1.0, 0.5]),
 79  *     p3 = board.create('point', [5.0, 3.0]),
 80  *
 81  *     a = board.create('sector', [p1, p2, p3]);
 82  * </pre><div class="jxgbox" id="JXG49f59123-f013-4681-bfd9-338b89893156" style="width: 300px; height: 300px;"></div>
 83  * <script type="text/javascript">
 84  * (function () {
 85  *   var board = JXG.JSXGraph.initBoard('JXG49f59123-f013-4681-bfd9-338b89893156', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
 86  *     p1 = board.create('point', [1.5, 5.0]),
 87  *     p2 = board.create('point', [1.0, 0.5]),
 88  *     p3 = board.create('point', [5.0, 3.0]),
 89  *
 90  *     a = board.create('sector', [p1, p2, p3]);
 91  * })();
 92  * </script><pre>
 93  *
 94  * @example
 95  * // Create a sector out of two lines, two directions and a radius
 96  * var p1 = board.create('point', [-1, 4]),
 97  *  p2 = board.create('point', [4, 1]),
 98  *  q1 = board.create('point', [-2, -3]),
 99  *  q2 = board.create('point', [4,3]),
100  *
101  *  li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
102  *  li2 = board.create('line', [q1,q2], {lastArrow:true}),
103  *
104  *  sec1 = board.create('sector', [li1, li2, [5.5, 0], [4, 3], 3]),
105  *  sec2 = board.create('sector', [li1, li2, 1, -1, 4]);
106  *
107  * </pre><div class="jxgbox" id="JXGbb9e2809-9895-4ff1-adfa-c9c71d50aa53" style="width: 300px; height: 300px;"></div>
108  * <script type="text/javascript">
109  * (function () {
110  *   var board = JXG.JSXGraph.initBoard('JXGbb9e2809-9895-4ff1-adfa-c9c71d50aa53', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
111  *     p1 = board.create('point', [-1, 4]),
112  *     p2 = board.create('point', [4, 1]),
113  *     q1 = board.create('point', [-2, -3]),
114  *     q2 = board.create('point', [4,3]),
115  *
116  *     li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
117  *     li2 = board.create('line', [q1,q2], {lastArrow:true}),
118  *
119  *     sec1 = board.create('sector', [li1, li2, [5.5, 0], [4, 3], 3]),
120  *     sec2 = board.create('sector', [li1, li2, 1, -1, 4]);
121  * })();
122  * </script><pre>
123  *
124  * @example
125  * var t = board.create('transform', [2, 1.5], {type: 'scale'});
126  * var s1 = board.create('sector', [[-3.5,-3], [-3.5, -2], [-3.5,-4]], {
127  *                 anglePoint: {visible:true}, center: {visible: true}, radiusPoint: {visible: true},
128  *                 fillColor: 'yellow', strokeColor: 'black'});
129  * var s2 = board.create('curve', [s1, t], {fillColor: 'yellow', strokeColor: 'black'});
130  *
131  * </pre><div id="JXG2e70ee14-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
132  * <script type="text/javascript">
133  *     (function() {
134  *         var board = JXG.JSXGraph.initBoard('JXG2e70ee14-6339-11e8-9fb9-901b0e1b8723',
135  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
136  *     var t = board.create('transform', [2, 1.5], {type: 'scale'});
137  *     var s1 = board.create('sector', [[-3.5,-3], [-3.5, -2], [-3.5,-4]], {
138  *                     anglePoint: {visible:true}, center: {visible: true}, radiusPoint: {visible: true},
139  *                     fillColor: 'yellow', strokeColor: 'black'});
140  *     var s2 = board.create('curve', [s1, t], {fillColor: 'yellow', strokeColor: 'black'});
141  *
142  *     })();
143  *
144  * </script><pre>
145  *
146  * @example
147  * var A = board.create('point', [3, -2]),
148  *     B = board.create('point', [-2, -2]),
149  *     C = board.create('point', [0, 4]);
150  *
151  * var angle = board.create('sector', [B, A, C], {
152  *         strokeWidth: 0,
153  *         arc: {
154  *         	visible: true,
155  *         	strokeWidth: 3,
156  *           lastArrow: {size: 4},
157  *           firstArrow: {size: 4}
158  *         }
159  *       });
160  * //angle.arc.setAttribute({firstArrow: false});
161  * angle.arc.setAttribute({lastArrow: false});
162  *
163  * </pre><div id="JXGca37b99e-1510-49fa-ac9e-efd60e956104" class="jxgbox" style="width: 300px; height: 300px;"></div>
164  * <script type="text/javascript">
165  *     (function() {
166  *         var board = JXG.JSXGraph.initBoard('JXGca37b99e-1510-49fa-ac9e-efd60e956104',
167  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
168  *     var A = board.create('point', [3, -2]),
169  *         B = board.create('point', [-2, -2]),
170  *         C = board.create('point', [0, 4]);
171  *
172  *     var angle = board.create('sector', [B, A, C], {
173  *             strokeWidth: 0,
174  *             arc: {
175  *             	visible: true,
176  *             	strokeWidth: 3,
177  *               lastArrow: {size: 4},
178  *               firstArrow: {size: 4}
179  *             }
180  *           });
181  *     //angle.arc.setAttribute({firstArrow: false});
182  *     angle.arc.setAttribute({lastArrow: false});
183  *
184  *     })();
185  *
186  * </script><pre>
187  *
188  *
189  */
190 JXG.createSector = function (board, parents, attributes) {
191     var el,
192         attr,
193         i,
194         eps = 1.0e-14,
195         type = "invalid",
196         s, v,
197         attrPoints = ["center", "radiusPoint", "anglePoint"],
198         points;
199 
200     // Three points?
201     if (
202         parents[0].elementClass === Const.OBJECT_CLASS_LINE &&
203         parents[1].elementClass === Const.OBJECT_CLASS_LINE &&
204         (Type.isArray(parents[2]) || Type.isNumber(parents[2])) &&
205         (Type.isArray(parents[3]) || Type.isNumber(parents[3])) &&
206         (Type.isNumber(parents[4]) || Type.isFunction(parents[4]) || Type.isString(parents[4]))
207     ) {
208         type = '2lines';
209     } else {
210         points = Type.providePoints(board, parents, attributes, "sector", attrPoints);
211         if (points === false) {
212             throw new Error(
213                 "JSXGraph: Can't create Sector with parent types '" +
214                     typeof parents[0] +
215                     "' and '" +
216                     typeof parents[1] +
217                     "' and '" +
218                     typeof parents[2] +
219                     "'."
220             );
221         }
222         type = '3points';
223     }
224 
225     attr = Type.copyAttributes(attributes, board.options, 'sector');
226     // The curve length is 6: 0-1: leg 1, 1-5: arc, 5-6: leg 2
227     el = board.create("curve", [[0], [0], 0, 6], attr);
228     el.type = Const.OBJECT_TYPE_SECTOR;
229     el.elType = 'sector';
230 
231     /**
232      * Sets radius if the attribute `radius` has value 'auto'.
233      * Sets a radius between 20 and 50 points, depending on the distance
234      * between the center and the radius point.
235      * This function is used in {@link Angle}.
236      *
237      * @name autoRadius
238      * @memberof Sector.prototype
239      * @function
240      * @returns {Number} returns a radius value in user coordinates.
241      * @private
242      */
243     el.autoRadius = function () {
244         var r1 = 20 / el.board.unitX, // 20px
245             r2 = Infinity,
246             r3 = 50 / el.board.unitX; // 50px
247 
248         if (Type.isPoint(el.center)) {
249             // This does not work for 2-lines sectors / angles
250             r2 = el.center.Dist(el.point2) * 0.3333;
251         }
252 
253         return Math.max(r1, Math.min(r2, r3));
254     };
255 
256     if (type === '2lines') {
257         /**
258          * @ignore
259          */
260         el.Radius = function () {
261             var r = Type.evaluate(parents[4]);
262             if (r === 'auto') {
263                 return this.autoRadius();
264             }
265             return r;
266         };
267 
268         el.line1 = board.select(parents[0]);
269         el.line2 = board.select(parents[1]);
270 
271         el.line1.addChild(el);
272         el.line2.addChild(el);
273         el.setParents(parents);
274 
275         el.point1 = { visProp: {} };
276         el.point2 = { visProp: {} };
277         el.point3 = { visProp: {} };
278 
279         // Intersection point, just used locally for direction1 and  direction2
280         s = Geometry.meetLineLine(el.line1.stdform, el.line2.stdform, 0, board);
281         if (Geometry.distance(s.usrCoords, [0, 0, 0], 3) < eps) {
282             // Parallel lines
283             if (
284                 el.line1.point1.Dist(el.line2.point1) < eps ||
285                 el.line1.point1.Dist(el.line2.point2) < eps
286             ) {
287                 s = el.line1.point1.coords;
288             } else if (
289                 el.line1.point2.Dist(el.line2.point1) < eps ||
290                 el.line1.point2.Dist(el.line2.point1) < eps
291             ) {
292                 s = el.line1.point2.coords;
293             } else {
294                 console.log(
295                     "JSXGraph warning: Can't create Sector from parallel lines with no common defining point."
296                 );
297             }
298         }
299 
300         if (Type.isArray(parents[2])) {
301             /* project p1 to l1 */
302             if (parents[2].length === 2) {
303                 parents[2] = [1].concat(parents[2]);
304             }
305             /*
306                 v = [0, el.line1.stdform[1], el.line1.stdform[2]];
307                 v = Mat.crossProduct(v, parents[2]);
308                 v = Geometry.meetLineLine(v, el.line1.stdform, 0, board);
309                 */
310             v = Geometry.projectPointToLine(
311                 { coords: { usrCoords: parents[2] } },
312                 el.line1,
313                 board
314             );
315             v = Statistics.subtract(v.usrCoords, s.usrCoords);
316             el.direction1 =
317                 Mat.innerProduct(v, [0, el.line1.stdform[2], -el.line1.stdform[1]], 3) >= 0
318                     ? +1
319                     : -1;
320         } else {
321             el.direction1 = parents[2] >= 0 ? 1 : -1;
322         }
323 
324         if (Type.isArray(parents[3])) {
325             /* project p2 to l2 */
326             if (parents[3].length === 2) {
327                 parents[3] = [1].concat(parents[3]);
328             }
329             /*
330                 v = [0, el.line2.stdform[1], el.line2.stdform[2]];
331                 v = Mat.crossProduct(v, parents[3]);
332                 v = Geometry.meetLineLine(v, el.line2.stdform, 0, board);
333                 */
334             v = Geometry.projectPointToLine(
335                 { coords: { usrCoords: parents[3] } },
336                 el.line2,
337                 board
338             );
339             v = Statistics.subtract(v.usrCoords, s.usrCoords);
340             el.direction2 =
341                 Mat.innerProduct(v, [0, el.line2.stdform[2], -el.line2.stdform[1]], 3) >= 0
342                     ? +1
343                     : -1;
344         } else {
345             el.direction2 = parents[3] >= 0 ? 1 : -1;
346         }
347 
348         el.methodMap = JXG.deepCopy(el.methodMap, {
349             arc: "arc",
350             center: "center",
351             line1: "line1",
352             line2: "line2"
353         });
354 
355         /**
356          * @class
357          * @ignore
358          */
359         el.updateDataArray = function () {
360             var r,
361                 l1, l2,
362                 eps = 1.0e-14,
363                 A = [0, 0, 0],
364                 B = [0, 0, 0],
365                 C = [0, 0, 0],
366                 ar;
367 
368             l1 = this.line1;
369             l2 = this.line2;
370 
371             // Intersection point of the lines
372             B = Mat.crossProduct(l1.stdform, l2.stdform);
373             if (Geometry.distance(B, [0, 0, 0], 3) < eps) {
374                 // Parallel lines
375                 if (
376                     l1.point1.Dist(l2.point1) < eps ||
377                     l1.point1.Dist(l2.point2) < eps
378                 ) {
379                     B = l1.point1.coords.usrCoords;
380                 } else if (
381                     l1.point2.Dist(l2.point1) < eps ||
382                     l1.point2.Dist(l2.point1) < eps
383                 ) {
384                     B = l1.point2.coords.usrCoords;
385                 } else {
386                 }
387             }
388 
389             if (Math.abs(B[0]) > eps) {
390                 B[1] /= B[0];
391                 B[2] /= B[0];
392                 B[0] /= B[0];
393             }
394             // First point
395             r = this.direction1 * this.Radius();
396             A = Statistics.add(B, [0, r * l1.stdform[2], -r * l1.stdform[1]]);
397 
398             // Second point
399             r = this.direction2 * this.Radius();
400             C = Statistics.add(B, [0, r * l2.stdform[2], -r * l2.stdform[1]]);
401 
402             this.point2.coords = new Coords(Const.COORDS_BY_USER, A, el.board);
403             this.point1.coords = new Coords(Const.COORDS_BY_USER, B, el.board);
404             this.point3.coords = new Coords(Const.COORDS_BY_USER, C, el.board);
405 
406             if (
407                 Math.abs(A[0]) < Mat.eps ||
408                 Math.abs(B[0]) < Mat.eps ||
409                 Math.abs(C[0]) < Mat.eps
410             ) {
411                 this.dataX = [NaN];
412                 this.dataY = [NaN];
413                 return;
414             }
415 
416             ar = Geometry.bezierArc(A, B, C, true, 1);
417 
418             this.dataX = ar[0];
419             this.dataY = ar[1];
420 
421             this.bezierDegree = 3;
422         };
423 
424         // Arc does not work yet, since point1, point2 and point3 are
425         // virtual points.
426         //
427         // attr = Type.copyAttributes(attributes, board.options, 'arc');
428         // attr = Type.copyAttributes(attr, board.options, "sector", 'arc');
429         // attr.withlabel = false;
430         // attr.name += "_arc";
431         // // el.arc = board.create("arc", [el.point1, el.point2, el.point3], attr);
432         // // The arc's radius is always the radius of sector.
433         // // This is important for angles.
434         // el.updateDataArray();
435         // el.arc = board.create("arc", [
436         //     function() {
437         //         return el.point1.coords.usrCoords;
438         //     }, // Center
439         //     function() {
440         //         var d = el.point2.coords.distance(Const.COORDS_BY_USER, el.point1.coords);
441         //         if (d === 0) {
442         //             return [el.point1.coords.usrCoords[1], el.point1.coords.usrCoords[2]];
443         //         }
444         //         return [
445         //             el.point1.coords.usrCoords[1] + el.Radius() * (el.point2.coords.usrCoords[1] - el.point1.coords.usrCoords[1]) / d,
446         //             el.point1.coords.usrCoords[2] + el.Radius() * (el.point2.coords.usrCoords[2] - el.point1.coords.usrCoords[2]) / d
447         //         ];
448         //     },
449         //     function() {
450         //         return el.point3.coords.usrCoords;
451         //     }, // Center
452         // ], attr);
453         // el.addChild(el.arc);
454 
455         // end '2lines'
456     } else if (type === '3points') {
457         /**
458          * Midpoint of the sector.
459          * @memberOf Sector.prototype
460          * @name point1
461          * @type JXG.Point
462          */
463         el.point1 = points[0];
464 
465         /**
466          * This point together with {@link Sector#point1} defines the radius.
467          * @memberOf Sector.prototype
468          * @name point2
469          * @type JXG.Point
470          */
471         el.point2 = points[1];
472 
473         /**
474          * Defines the sector's angle.
475          * @memberOf Sector.prototype
476          * @name point3
477          * @type JXG.Point
478          */
479         el.point3 = points[2];
480 
481         /* Add arc as child to defining points */
482         for (i = 0; i < 3; i++) {
483             if (Type.exists(points[i]._is_new)) {
484                 el.addChild(points[i]);
485                 delete points[i]._is_new;
486             } else {
487                 points[i].addChild(el);
488             }
489         }
490 
491         // useDirection is necessary for circumCircleSectors
492         el.useDirection = attributes.usedirection; // this makes the attribute immutable
493         el.setParents(points);
494 
495         /**
496          * Defines the sectors orientation in case of circumCircleSectors.
497          * @memberOf Sector.prototype
498          * @name point4
499          * @type JXG.Point
500          */
501         if (Type.exists(points[3])) {
502             el.point4 = points[3];
503             el.point4.addChild(el);
504         }
505 
506         el.methodMap = JXG.deepCopy(el.methodMap, {
507             arc: "arc",
508             center: "center",
509             radiuspoint: "radiuspoint",
510             anglepoint: "anglepoint"
511         });
512 
513         /**
514          * @class
515          * @ignore
516          */
517         el.updateDataArray = function () {
518             var ar, det,
519                 p0c, p1c, p2c,
520                 A = this.point2,
521                 B = this.point1,
522                 C = this.point3,
523                 a, b, c,
524                 phi,
525                 sgn = 1,
526                 vp_s = this.evalVisProp('selection'),
527                 vp_o = this.evalVisProp('orientation');
528 
529             if (!A.isReal || !B.isReal || !C.isReal) {
530                 this.dataX = [NaN];
531                 this.dataY = [NaN];
532                 return;
533             }
534 
535             phi = Geometry.rad(A, B, C);
536             if (
537                 (vp_o === 'counterclockwise' &&
538                     ((vp_s === 'minor' && phi > Math.PI) ||
539                      (vp_s === 'major' && phi < Math.PI))
540                 ) ||
541                 (vp_o === 'clockwise' &&
542                     ((vp_s === 'auto') ||
543                     (vp_s === 'minor' && phi > Math.PI) ||
544                     (vp_s === 'major' && phi < Math.PI))
545                 )
546             ) {
547                 sgn = -1;
548             }
549             // if ((vp_s === 'minor' && phi > Math.PI) ||
550             //     (vp_s === 'major' && phi < Math.PI) ||
551             //     (vp_s === 'auto' && vp_o === 'clockwise')) {
552             //     sgn = -1;
553             // }
554 
555             // This is true for circumCircleSectors. In that case there is
556             // a fourth parent element: [midpoint, point1, point3, point2]
557             if (this.useDirection && Type.exists(this.point4)) {
558                 p0c = this.point2.coords.usrCoords;
559                 p1c = this.point4.coords.usrCoords;
560                 p2c = this.point3.coords.usrCoords;
561                 det =
562                     (p0c[1] - p2c[1]) * (p0c[2] - p1c[2]) -
563                     (p0c[2] - p2c[2]) * (p0c[1] - p1c[1]);
564 
565                 if (det >= 0.0) {
566                     C = this.point2;
567                     A = this.point3;
568                 }
569             }
570 
571             a = A.coords.usrCoords;
572             b = B.coords.usrCoords;
573             c = C.coords.usrCoords;
574 
575             ar = Geometry.bezierArc(a, b, c, true, sgn);
576 
577             this.dataX = ar[0];
578             this.dataY = ar[1];
579             this.bezierDegree = 3;
580         };
581 
582         /**
583          * Returns the radius of the sector.
584          * @memberOf Sector.prototype
585          * @name Radius
586          * @function
587          * @returns {Number} The distance between {@link Sector#point1} and {@link Sector#point2}.
588          */
589         el.Radius = function () {
590             return this.point2.Dist(this.point1);
591         };
592     } // end '3points'
593 
594     el.center = el.point1;
595     el.radiuspoint = el.point2;
596     el.anglepoint = el.point3;
597 
598     attr = Type.copyAttributes(attributes, board.options, 'arc');
599     attr = Type.copyAttributes(attr, board.options, "sector", 'arc');
600     attr.withlabel = false;
601 
602     // Minor or major arc:
603     attr.selection = el.visProp.selection;
604     attr.name += "_arc";
605 
606     if (type === '2lines') {
607         el.updateDataArray();
608         el.arc = board.create("arc", [
609             function() {
610                 return el.point1.coords.usrCoords;
611             }, // Center
612             function() {
613                 var d = el.point2.coords.distance(Const.COORDS_BY_USER, el.point1.coords);
614                 if (d === 0) {
615                     return [el.point1.coords.usrCoords[1], el.point1.coords.usrCoords[2]];
616                 }
617                 return [
618                     el.point1.coords.usrCoords[1] + el.Radius() * (el.point2.coords.usrCoords[1] - el.point1.coords.usrCoords[1]) / d,
619                     el.point1.coords.usrCoords[2] + el.Radius() * (el.point2.coords.usrCoords[2] - el.point1.coords.usrCoords[2]) / d
620                 ];
621             },
622             function() {
623                 return el.point3.coords.usrCoords;
624             } // Center
625         ], attr);
626     } else {
627         // The arc's radius is always the radius of sector.
628         // This is important for angles.
629         el.arc = board.create("arc", [
630             el.point1, // Center
631             function() {
632                 var d = el.point2.Dist(el.point1),
633                 A, B;
634 
635                 A = el.point1;
636                 B = el.point2;
637                 if (d === 0) {
638                     return [A.X(), A.Y()];
639                 }
640 
641                 return [
642                     A.X() + el.Radius() * (B.X() - A.X()) / d,
643                     A.Y() + el.Radius() * (B.Y() - A.Y()) / d
644                 ];
645             },
646             el.point3
647         ], attr);
648     }
649     el.addChild(el.arc);
650     el.inherits.push(el.arc);
651 
652     // Default hasPoint method. Documented in geometry element
653     el.hasPointCurve = function (x, y) {
654         var angle,
655             alpha,
656             beta,
657             prec,
658             type,
659             checkPoint = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board),
660             r = this.Radius(),
661             dist = this.center.coords.distance(Const.COORDS_BY_USER, checkPoint),
662             has,
663             vp_s = this.evalVisProp('selection'),
664             vp_o = this.evalVisProp('orientation');
665 
666         if (Type.isObject(this.evalVisProp('precision'))) {
667             type = this.board._inputDevice;
668             prec = this.evalVisProp('precision.' + type);
669         } else {
670             // 'inherit'
671             prec = this.board.options.precision.hasPoint;
672         }
673         prec /= Math.min(Math.abs(this.board.unitX), Math.abs(this.board.unitY));
674         has = Math.abs(dist - r) < prec;
675 
676         if (has) {
677             angle = Geometry.rad(this.point2, this.center, checkPoint.usrCoords.slice(1));
678             alpha = 0;
679             beta = Geometry.rad(this.point2, this.center, this.point3);
680 
681             if (vp_o === 'clockwise') {
682                 angle = 2 * Math.PI - angle;
683                 beta = 2 * Math.PI - beta;
684             }
685 
686             if ((vp_s === 'minor' && beta > Math.PI) || (vp_s === 'major' && beta < Math.PI)) {
687                 alpha = beta;
688                 beta = 2 * Math.PI;
689             }
690 
691             if (angle < alpha || angle > beta) {
692                 has = false;
693             }
694         }
695 
696         return has;
697     };
698 
699     /**
700      * Checks whether (x,y) is within the area defined by the sector.
701      * @memberOf Sector.prototype
702      * @name hasPointSector
703      * @function
704      * @param {Number} x Coordinate in x direction, screen coordinates.
705      * @param {Number} y Coordinate in y direction, screen coordinates.
706      * @returns {Boolean} True if (x,y) is within the sector defined by the arc, False otherwise.
707      */
708     el.hasPointSector = function (x, y) {
709         var angle,
710             checkPoint = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board),
711             r = this.Radius(),
712             dist = this.point1.coords.distance(Const.COORDS_BY_USER, checkPoint),
713             alpha,
714             beta,
715             has = dist < r,
716             vp_s = this.evalVisProp('selection'),
717             vp_o = this.evalVisProp('orientation');
718 
719         if (has) {
720             angle = Geometry.rad(this.radiuspoint, this.center, checkPoint.usrCoords.slice(1));
721             alpha = 0.0;
722             beta = Geometry.rad(this.radiuspoint, this.center, this.anglepoint);
723 
724             if (vp_o === 'clockwise') {
725                 angle = 2 * Math.PI - angle;
726                 beta = 2 * Math.PI - beta;
727             }
728 
729             if ((vp_s === 'minor' && beta > Math.PI) || (vp_s === 'major' && beta < Math.PI)) {
730                 alpha = beta;
731                 beta = 2 * Math.PI;
732             }
733 
734             //if (angle > Geometry.rad(this.point2, this.point1, this.point3)) {
735             if (angle < alpha || angle > beta) {
736                 has = false;
737             }
738         }
739         return has;
740     };
741 
742     el.hasPoint = function (x, y) {
743         if (
744             this.evalVisProp('highlightonsector') ||
745             this.evalVisProp('hasinnerpoints')
746         ) {
747             return this.hasPointSector(x, y);
748         }
749 
750         return this.hasPointCurve(x, y);
751     };
752 
753     // documented in GeometryElement
754     el.getTextAnchor = function () {
755         return this.point1.coords;
756     };
757 
758     // documented in GeometryElement
759     // this method is very similar to arc.getLabelAnchor()
760     // there are some additions in the arc version though, mainly concerning
761     // 'major' and 'minor' arcs. Maybe these methods can be merged.
762     /**
763      * @class
764      * @ignore
765      */
766     el.getLabelAnchor = function () {
767         var coords,
768             vec, vecx, vecy,
769             len,
770             pos = this.label.evalVisProp('position'),
771             angle = Geometry.rad(this.point2, this.point1, this.point3),
772             dx = 13 / this.board.unitX,
773             dy = 13 / this.board.unitY,
774             p2c = this.point2.coords.usrCoords,
775             pmc = this.point1.coords.usrCoords,
776             bxminusax = p2c[1] - pmc[1],
777             byminusay = p2c[2] - pmc[2],
778             vp_s = this.evalVisProp('selection'),
779             vp_o = this.evalVisProp('orientation'),
780             l_vp = this.label ? this.label.visProp : this.visProp.label;
781 
782         // If this is uncommented, the angle label can not be dragged
783         //if (Type.exists(this.label)) {
784         //    this.label.relativeCoords = new Coords(Const.COORDS_BY_SCREEN, [0, 0], this.board);
785         //}
786 
787         if (
788             !Type.isString(pos) ||
789             (pos.indexOf('right') < 0 && pos.indexOf('left') < 0)
790         ) {
791 
792             if ((vp_s === 'minor' && angle > Math.PI) || (vp_s === 'major' && angle < Math.PI) || (vp_s === 'auto' && vp_o === 'clockwise')) {
793                 angle = -(2 * Math.PI - angle);
794             }
795 
796             coords = new Coords(
797                 Const.COORDS_BY_USER,
798                 [
799                     pmc[1] + Math.cos(angle * 0.5) * bxminusax - Math.sin(angle * 0.5) * byminusay,
800                     pmc[2] + Math.sin(angle * 0.5) * bxminusax + Math.cos(angle * 0.5) * byminusay
801                 ],
802                 this.board
803             );
804 
805             vecx = coords.usrCoords[1] - pmc[1];
806             vecy = coords.usrCoords[2] - pmc[2];
807 
808             len = Mat.hypot(vecx, vecy);
809             vecx = (vecx * (len + dx)) / len;
810             vecy = (vecy * (len + dy)) / len;
811             vec = [pmc[1] + vecx, pmc[2] + vecy];
812 
813             l_vp.position = Geometry.calcLabelQuadrant(Geometry.rad([1, 0], [0, 0], vec));
814 
815             return new Coords(Const.COORDS_BY_USER, vec, this.board);
816         } else {
817             return this.getLabelPosition(pos, this.label.evalVisProp('distance'));
818         }
819     };
820 
821     /**
822      * Overwrite the Radius method of the sector.
823      * Used in {@link GeometryElement#setAttribute}.
824      * @memberOf Sector.prototype
825      * @name setRadius
826      * @param {Number|Function} value New radius.
827      * @function
828      */
829     el.setRadius = function (val) {
830         var res,
831             e = Type.evaluate(val);
832 
833         if (val === 'auto' || e === 'auto') {
834             res = 'auto';
835         } else if (Type.isNumber(val)) {
836             res = 'number';
837         } else if (Type.isFunction(val) && !Type.isString(e)) {
838             res = 'function';
839         } else {
840             res = 'undefined';
841         }
842         if (res !== 'undefined') {
843             this.visProp.radius = val;
844         }
845 
846         /**
847          * @ignore
848          */
849         el.Radius = function () {
850             var r = Type.evaluate(val);
851             if (r === 'auto') {
852                 return this.autoRadius();
853             }
854             return r;
855         };
856     };
857 
858     /**
859      * @deprecated
860      * @ignore
861      */
862     el.getRadius = function () {
863         JXG.deprecated("Sector.getRadius()", "Sector.Radius()");
864         return this.Radius();
865     };
866 
867     /**
868      * Length of the sector's arc or the angle in various units, see {@link Arc#Value}.
869      * @memberOf Sector.prototype
870      * @name Value
871      * @function
872      * @param {String} unit
873      * @returns {Number} The arc length or the angle value in various units.
874      * @see Arc#Value
875      */
876     el.Value = function(unit) {
877         return this.arc.Value(unit);
878     };
879 
880     /**
881      * Arc length.
882      * @memberOf Sector.prototype
883      * @name L
884      * @returns {Number} Length of the sector's arc.
885      * @function
886      * @see Arc#L
887      */
888     el.L = function() {
889         return this.arc.L();
890     };
891 
892     /**
893      * Area of the sector.
894      * @memberOf Sector.prototype
895      * @name Area
896      * @function
897      * @returns {Number} The area of the sector.
898      */
899     el.Area = function () {
900         var r = this.Radius();
901 
902         return 0.5 * r * r * this.Value('radians');
903     };
904 
905     /**
906      * Sector perimeter, i.e. arc length plus 2 * radius.
907      * @memberOf Sector.prototype
908      * @name Perimeter
909      * @function
910      * @returns {Number} Perimeter of sector.
911      */
912     el.Perimeter = function () {
913         return this.L() + 2 * this.Radius();
914     };
915 
916     if (type === '3points') {
917         /**
918          * Moves the sector by the difference of two coordinates.
919          * @memberOf Sector.prototype
920          * @name setPositionDirectly
921          * @function
922          * @param {Number} method The type of coordinates used here. Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}.
923          * @param {Array} coords coordinates in screen/user units
924          * @param {Array} oldcoords previous coordinates in screen/user units
925          * @returns {JXG.Curve} this element
926          * @private
927          */
928         el.setPositionDirectly = function (method, coords, oldcoords) {
929             var dc, t,
930                 c = new Coords(method, coords, this.board),
931                 oldc = new Coords(method, oldcoords, this.board);
932 
933             if (!el.point1.draggable() || !el.point2.draggable() || !el.point3.draggable()) {
934                 return this;
935             }
936 
937             dc = Statistics.subtract(c.usrCoords, oldc.usrCoords);
938             t = this.board.create("transform", dc.slice(1), { type: "translate" });
939             t.applyOnce([el.point1, el.point2, el.point3]);
940 
941             return this;
942         };
943     }
944 
945     el.methodMap = JXG.deepCopy(el.methodMap, {
946         radius: "Radius",
947         Radius: "Radius",
948         getRadius: "Radius",
949         setRadius: "setRadius",
950         Value: "Value",
951         L: "L",
952         Area: "Area",
953         Perimeter: "Perimeter"
954     });
955 
956     return el;
957 };
958 
959 JXG.registerElement("sector", JXG.createSector);
960 
961 /**
962  * @class A sector whose arc is a circum circle arc through three points.
963  * A circumcircle sector is different from a {@link Sector} mostly in the way the parent elements are interpreted.
964  * At first, the circum center is determined from the three given points.
965  * Then the sector is drawn from <tt>p1</tt> through
966  * <tt>p2</tt> to <tt>p3</tt>.
967  * @pseudo
968  * @name CircumcircleSector
969  * @augments Sector
970  * @constructor
971  * @type Sector
972  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
973  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p1 A circumcircle sector is defined by the circumcircle which is determined
974  * by these three given points. The circumcircle sector is always drawn from <tt>p1</tt> through <tt>p2</tt> to <tt>p3</tt>.
975  * @example
976  * // Create an arc out of three free points
977  * var p1 = board.create('point', [1.5, 5.0]),
978  *     p2 = board.create('point', [1.0, 0.5]),
979  *     p3 = board.create('point', [5.0, 3.0]),
980  *
981  *     a = board.create('circumcirclesector', [p1, p2, p3]);
982  * </pre><div class="jxgbox" id="JXG695cf0d6-6d7a-4d4d-bfc9-34c6aa28cd04" style="width: 300px; height: 300px;"></div>
983  * <script type="text/javascript">
984  * (function () {
985  *   var board = JXG.JSXGraph.initBoard('JXG695cf0d6-6d7a-4d4d-bfc9-34c6aa28cd04', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
986  *     p1 = board.create('point', [1.5, 5.0]),
987  *     p2 = board.create('point', [1.0, 0.5]),
988  *     p3 = board.create('point', [5.0, 3.0]),
989  *
990  *     a = board.create('circumcirclesector', [p1, p2, p3]);
991  * })();
992  * </script><pre>
993  */
994 JXG.createCircumcircleSector = function (board, parents, attributes) {
995     var el, mp, attr, points;
996 
997     points = Type.providePoints(board, parents, attributes, 'point');
998     if (points === false) {
999         throw new Error(
1000             "JSXGraph: Can't create circumcircle sector with parent types '" +
1001                 typeof parents[0] +
1002                 "' and '" +
1003                 typeof parents[1] +
1004                 "' and '" +
1005                 typeof parents[2] +
1006                 "'."
1007         );
1008     }
1009 
1010     mp = board.create("circumcenter", points.slice(0, 3), attr);
1011     mp.dump = false;
1012 
1013     attr = Type.copyAttributes(attributes, board.options, 'circumcirclesector');
1014     el = board.create("sector", [mp, points[0], points[2], points[1]], attr);
1015 
1016     el.elType = 'circumcirclesector';
1017     el.setParents(points);
1018 
1019     /**
1020      * Center of the circumcirclesector
1021      * @memberOf CircumcircleSector.prototype
1022      * @name center
1023      * @type Circumcenter
1024      */
1025     el.center = mp;
1026     el.subs = {
1027         center: mp
1028     };
1029 
1030     return el;
1031 };
1032 
1033 JXG.registerElement("circumcirclesector", JXG.createCircumcircleSector);
1034 
1035 /**
1036  * @class A minor sector is a sector of a circle having measure at most
1037  * 180 degrees (pi radians). It is defined by a center, one point that
1038  * defines the radius, and a third point that defines the angle of the sector.
1039  * @pseudo
1040  * @name MinorSector
1041  * @augments Curve
1042  * @constructor
1043  * @type JXG.Curve
1044  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
1045  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor sector is a sector of a circle around p1 having measure less than or equal to
1046  * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3.
1047  * @example
1048  * // Create sector out of three free points
1049  * var p1 = board.create('point', [2.0, 2.0]);
1050  * var p2 = board.create('point', [1.0, 0.5]);
1051  * var p3 = board.create('point', [3.5, 1.0]);
1052  *
1053  * var a = board.create('minorsector', [p1, p2, p3]);
1054  * </pre><div class="jxgbox" id="JXGaf27ddcc-265f-428f-90dd-d31ace945800" style="width: 300px; height: 300px;"></div>
1055  * <script type="text/javascript">
1056  * (function () {
1057  *   var board = JXG.JSXGraph.initBoard('JXGaf27ddcc-265f-428f-90dd-d31ace945800', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
1058  *       p1 = board.create('point', [2.0, 2.0]),
1059  *       p2 = board.create('point', [1.0, 0.5]),
1060  *       p3 = board.create('point', [3.5, 1.0]),
1061  *
1062  *       a = board.create('minorsector', [p1, p2, p3]);
1063  * })();
1064  * </script><pre>
1065  *
1066  * @example
1067  * var A = board.create('point', [3, -2]),
1068  *     B = board.create('point', [-2, -2]),
1069  *     C = board.create('point', [0, 4]);
1070  *
1071  * var angle = board.create('minorsector', [B, A, C], {
1072  *         strokeWidth: 0,
1073  *         arc: {
1074  *         	visible: true,
1075  *         	strokeWidth: 3,
1076  *           lastArrow: {size: 4},
1077  *           firstArrow: {size: 4}
1078  *         }
1079  *       });
1080  * //angle.arc.setAttribute({firstArrow: false});
1081  * angle.arc.setAttribute({lastArrow: false});
1082  *
1083  *
1084  * </pre><div id="JXGdddf3c8f-4b0c-4268-8171-8fcd30e71f60" class="jxgbox" style="width: 300px; height: 300px;"></div>
1085  * <script type="text/javascript">
1086  *     (function() {
1087  *         var board = JXG.JSXGraph.initBoard('JXGdddf3c8f-4b0c-4268-8171-8fcd30e71f60',
1088  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1089  *     var A = board.create('point', [3, -2]),
1090  *         B = board.create('point', [-2, -2]),
1091  *         C = board.create('point', [0, 4]);
1092  *
1093  *     var angle = board.create('minorsector', [B, A, C], {
1094  *             strokeWidth: 0,
1095  *             arc: {
1096  *             	visible: true,
1097  *             	strokeWidth: 3,
1098  *               lastArrow: {size: 4},
1099  *               firstArrow: {size: 4}
1100  *             }
1101  *           });
1102  *     //angle.arc.setAttribute({firstArrow: false});
1103  *     angle.arc.setAttribute({lastArrow: false});
1104  *
1105  *
1106  *     })();
1107  *
1108  * </script><pre>
1109  *
1110  */
1111 JXG.createMinorSector = function (board, parents, attributes) {
1112     attributes.selection = 'minor';
1113     return JXG.createSector(board, parents, attributes);
1114 };
1115 
1116 JXG.registerElement("minorsector", JXG.createMinorSector);
1117 
1118 /**
1119  * @class A major sector is a sector of a circle having measure at least
1120  * 180 degrees (pi radians). It is defined by a center, one point that
1121  * defines the radius, and a third point that defines the angle of the sector.
1122  * @pseudo
1123  * @name MajorSector
1124  * @augments Curve
1125  * @constructor
1126  * @type JXG.Curve
1127  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
1128  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Major sector is a sector of a circle around p1 having measure greater than or equal to
1129  * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3.
1130  * @example
1131  * // Create an arc out of three free points
1132  * var p1 = board.create('point', [2.0, 2.0]);
1133  * var p2 = board.create('point', [1.0, 0.5]);
1134  * var p3 = board.create('point', [3.5, 1.0]);
1135  *
1136  * var a = board.create('majorsector', [p1, p2, p3]);
1137  * </pre><div class="jxgbox" id="JXG83c6561f-7561-4047-b98d-036248a00932" style="width: 300px; height: 300px;"></div>
1138  * <script type="text/javascript">
1139  * (function () {
1140  *   var board = JXG.JSXGraph.initBoard('JXG83c6561f-7561-4047-b98d-036248a00932', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
1141  *       p1 = board.create('point', [2.0, 2.0]),
1142  *       p2 = board.create('point', [1.0, 0.5]),
1143  *       p3 = board.create('point', [3.5, 1.0]),
1144  *
1145  *       a = board.create('majorsector', [p1, p2, p3]);
1146  * })();
1147  * </script><pre>
1148  */
1149 JXG.createMajorSector = function (board, parents, attributes) {
1150     attributes.selection = 'major';
1151     return JXG.createSector(board, parents, attributes);
1152 };
1153 
1154 JXG.registerElement("majorsector", JXG.createMajorSector);
1155 
1156 /**
1157  * @class Angle sector defined by three points or two lines.
1158  * Visually it is just a {@link Sector}
1159  * element with a radius not defined by the parent elements but by an attribute <tt>radius</tt>. As opposed to the sector,
1160  * an angle has two angle points and no radius point.
1161  * Sector is displayed if type=="sector".
1162  * If type=="square", instead of a sector a parallelogram is displayed.
1163  * In case of type=="auto", a square is displayed if the angle is near orthogonal. The precision
1164  * to decide if an angle is orthogonal is determined by the attribute
1165  * {@link Angle#orthoSensitivity}.
1166  * <p>
1167  * If no name is provided the angle label is automatically set to a lower greek letter. If no label should be displayed use
1168  * the attribute <tt>withLabel:false</tt> or set the name attribute to the empty string.
1169  *
1170  * @pseudo
1171  * @name Angle
1172  * @augments Sector
1173  * @constructor
1174  * @type Sector
1175  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
1176  * First possibility of input parameters are:
1177  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p1 An angle is always drawn counterclockwise from <tt>p1</tt> to
1178  * <tt>p3</tt> around <tt>p2</tt>.
1179  *
1180  * Second possibility of input parameters are:
1181  * @param {JXG.Line_JXG.Line_array|number_array|number} line, line2, coords1 or direction1, coords2 or direction2, radius The angle is defined by two lines.
1182  * The two legs which define the angle are given by two coordinate arrays.
1183  * The points given by these coordinate arrays are projected initially (i.e. only once) onto the two lines.
1184  * The other possibility is to supply directions (+/- 1).
1185  *
1186  * @example
1187  * // Create an angle out of three free points
1188  * var p1 = board.create('point', [5.0, 3.0]),
1189  *     p2 = board.create('point', [1.0, 0.5]),
1190  *     p3 = board.create('point', [1.5, 5.0]),
1191  *
1192  *     a = board.create('angle', [p1, p2, p3]),
1193  *     t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
1194  * </pre><div class="jxgbox" id="JXGa34151f9-bb26-480a-8d6e-9b8cbf789ae5" style="width: 300px; height: 300px;"></div>
1195  * <script type="text/javascript">
1196  * (function () {
1197  *   var board = JXG.JSXGraph.initBoard('JXGa34151f9-bb26-480a-8d6e-9b8cbf789ae5', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
1198  *     p1 = board.create('point', [5.0, 3.0]),
1199  *     p2 = board.create('point', [1.0, 0.5]),
1200  *     p3 = board.create('point', [1.5, 5.0]),
1201  *
1202  *     a = board.create('angle', [p1, p2, p3]),
1203  *     t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
1204  * })();
1205  * </script><pre>
1206  *
1207  * @example
1208  * // Create an angle out of two lines and two directions
1209  * var p1 = board.create('point', [-1, 4]),
1210  *  p2 = board.create('point', [4, 1]),
1211  *  q1 = board.create('point', [-2, -3]),
1212  *  q2 = board.create('point', [4,3]),
1213  *
1214  *  li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
1215  *  li2 = board.create('line', [q1,q2], {lastArrow:true}),
1216  *
1217  *  a1 = board.create('angle', [li1, li2, [5.5, 0], [4, 3]], { radius:1 }),
1218  *  a2 = board.create('angle', [li1, li2, 1, -1], { radius:2 });
1219  *
1220  *
1221  * </pre><div class="jxgbox" id="JXG3a667ddd-63dc-4594-b5f1-afac969b371f" style="width: 300px; height: 300px;"></div>
1222  * <script type="text/javascript">
1223  * (function () {
1224  *   var board = JXG.JSXGraph.initBoard('JXG3a667ddd-63dc-4594-b5f1-afac969b371f', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
1225  *     p1 = board.create('point', [-1, 4]),
1226  *     p2 = board.create('point', [4, 1]),
1227  *     q1 = board.create('point', [-2, -3]),
1228  *     q2 = board.create('point', [4,3]),
1229  *
1230  *     li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
1231  *     li2 = board.create('line', [q1,q2], {lastArrow:true}),
1232  *
1233  *     a1 = board.create('angle', [li1, li2, [5.5, 0], [4, 3]], { radius:1 }),
1234  *     a2 = board.create('angle', [li1, li2, 1, -1], { radius:2 });
1235  * })();
1236  * </script><pre>
1237  *
1238  *
1239  * @example
1240  * // Display the angle value instead of the name
1241  * var p1 = board.create('point', [0,2]);
1242  * var p2 = board.create('point', [0,0]);
1243  * var p3 = board.create('point', [-2,0.2]);
1244  *
1245  * var a = board.create('angle', [p1, p2, p3], {
1246  * 	 radius: 1,
1247  *   name: function() {
1248  *   	return JXG.Math.Geometry.trueAngle(p1, p2, p3).toFixed(1) + '°';
1249  *   }});
1250  *
1251  * </pre><div id="JXGc813f601-8dd3-4030-9892-25c6d8671512" class="jxgbox" style="width: 300px; height: 300px;"></div>
1252  * <script type="text/javascript">
1253  *     (function() {
1254  *         var board = JXG.JSXGraph.initBoard('JXGc813f601-8dd3-4030-9892-25c6d8671512',
1255  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1256  *
1257  *     var p1 = board.create('point', [0,2]);
1258  *     var p2 = board.create('point', [0,0]);
1259  *     var p3 = board.create('point', [-2,0.2]);
1260  *
1261  *     var a = board.create('angle', [p1, p2, p3], {
1262  *     	radius: 1,
1263  *       name: function() {
1264  *       	return JXG.Math.Geometry.trueAngle(p1, p2, p3).toFixed(1) + '°';
1265  *       }});
1266  *
1267  *     })();
1268  *
1269  * </script><pre>
1270  *
1271  *
1272  * @example
1273  * // Apply a transformation to an angle.
1274  * var t = board.create('transform', [2, 1.5], {type: 'scale'});
1275  * var an1 = board.create('angle', [[-4,3.9], [-3, 4], [-3, 3]]);
1276  * var an2 = board.create('curve', [an1, t]);
1277  *
1278  * </pre><div id="JXG4c8d9ed8-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
1279  * <script type="text/javascript">
1280  *     (function() {
1281  *         var board = JXG.JSXGraph.initBoard('JXG4c8d9ed8-6339-11e8-9fb9-901b0e1b8723',
1282  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1283  *     var t = board.create('transform', [2, 1.5], {type: 'scale'});
1284  *     var an1 = board.create('angle', [[-4,3.9], [-3, 4], [-3, 3]]);
1285  *     var an2 = board.create('curve', [an1, t]);
1286  *
1287  *     })();
1288  *
1289  * </script><pre>
1290  *
1291  */
1292 JXG.createAngle = function (board, parents, attributes) {
1293     var el,
1294         radius, attr, attrsub,
1295         i, points,
1296         type = 'invalid';
1297 
1298     // Two lines or three points?
1299     if (
1300         parents[0].elementClass === Const.OBJECT_CLASS_LINE &&
1301         parents[1].elementClass === Const.OBJECT_CLASS_LINE &&
1302         (Type.isArray(parents[2]) || Type.isNumber(parents[2])) &&
1303         (Type.isArray(parents[3]) || Type.isNumber(parents[3]))
1304     ) {
1305         type = '2lines';
1306     } else {
1307         attr = {
1308             name: ''
1309         };
1310         points = Type.providePoints(board, parents, attr, 'point');
1311         if (points === false) {
1312             throw new Error(
1313                 "JSXGraph: Can't create angle with parent types '" +
1314                     typeof parents[0] +
1315                     "' and '" +
1316                     typeof parents[1] +
1317                     "' and '" +
1318                     typeof parents[2] +
1319                     "'."
1320             );
1321         }
1322         type = '3points';
1323     }
1324 
1325     attr = Type.copyAttributes(attributes, board.options, 'angle');
1326 
1327     //  If empty, create a new name
1328     if (!Type.exists(attr.name) /*|| attr.name === ""*/) {
1329         attr.name = board.generateName({ type: Const.OBJECT_TYPE_ANGLE });
1330     }
1331 
1332     if (Type.exists(attr.radius)) {
1333         radius = attr.radius;
1334     } else {
1335         radius = 0;
1336     }
1337 
1338     board.suspendUpdate(); // Necessary for immediate availability of radius.
1339     if (type === '2lines') {
1340         // Angle defined by two lines
1341         parents.push(radius);
1342         el = board.create("sector", parents, attr);
1343         /**
1344          * @class
1345          * @ignore
1346          */
1347         el.updateDataArraySector = el.updateDataArray;
1348 
1349         // TODO
1350         /**
1351          * @class
1352          * @ignore
1353          */
1354         el.setAngle = function (val) {};
1355         /**
1356          * @class
1357          * @ignore
1358          */
1359         el.free = function (val) {};
1360     } else {
1361         // Angle defined by three points
1362         el = board.create("sector", [points[1], points[0], points[2]], attr);
1363         el.arc.visProp.priv = true;
1364 
1365         /**
1366          * The point defining the radius of the angle element.
1367          * Alias for {@link Sector#radiuspoint}.
1368          * @type JXG.Point
1369          * @name point
1370          * @memberOf Angle.prototype
1371          *
1372          */
1373         el.point = el.point2 = el.radiuspoint = points[0];
1374 
1375         /**
1376          * Helper point for angles of type 'square'.
1377          * @type JXG.Point
1378          * @name pointsquare
1379          * @memberOf Angle.prototype
1380          */
1381         el.pointsquare = el.point3 = el.anglepoint = points[2];
1382 
1383         /**
1384          * @ignore
1385          */
1386         el.Radius = function () {
1387             // Set the angle radius, also @see @link Sector#autoRadius
1388             var r = Type.evaluate(radius);
1389             if (r === 'auto') {
1390                 return el.autoRadius();
1391             }
1392             return r;
1393         };
1394 
1395         /**
1396          * @class
1397          * @ignore
1398          */
1399         el.updateDataArraySector = function () {
1400             var A = this.point2,
1401                 B = this.point1,
1402                 C = this.point3,
1403                 r = this.Radius(),
1404                 d = B.Dist(A),
1405                 a, b, c,
1406                 ar,
1407                 phi,
1408                 sgn = 1,
1409                 vp_s = this.evalVisProp('selection'),
1410                 vp_o = this.evalVisProp('orientation');
1411 
1412             phi = Geometry.rad(A, B, C);
1413             if ((vp_s === 'minor' && phi > Math.PI) || (vp_s === 'major' && phi < Math.PI) || (vp_s === 'auto' && vp_o === 'clockwise')) {
1414                 sgn = -1;
1415             }
1416 
1417             a = A.coords.usrCoords;
1418             b = B.coords.usrCoords;
1419             c = C.coords.usrCoords;
1420 
1421             a = [1, b[1] + ((a[1] - b[1]) * r) / d, b[2] + ((a[2] - b[2]) * r) / d];
1422             c = [1, b[1] + ((c[1] - b[1]) * r) / d, b[2] + ((c[2] - b[2]) * r) / d];
1423 
1424             ar = Geometry.bezierArc(a, b, c, true, sgn);
1425 
1426             this.dataX = ar[0];
1427             this.dataY = ar[1];
1428             this.bezierDegree = 3;
1429         };
1430 
1431         /**
1432          * Set an angle to a prescribed value given in radians.
1433          * This is only possible if the third point of the angle, i.e.
1434          * the anglepoint is a free point.
1435          * Removing the constraint again is done by calling "angle.free()".
1436          *
1437          * Changing the angle requires to call the method "free()":
1438          *
1439          * <pre>
1440          * angle.setAngle(Math.PI / 6);
1441          * // ...
1442          * angle.free().setAngle(Math.PI / 4);
1443          * </pre>
1444          *
1445          * @name setAngle
1446          * @memberof Angle.prototype
1447          * @function
1448          * @param {Number|Function} val Number or Function which returns the size of the angle in Radians
1449          * @returns {Object} Pointer to the angle element..
1450          * @see Angle#free
1451          *
1452          * @example
1453          * var p1, p2, p3, c, a, s;
1454          *
1455          * p1 = board.create('point',[0,0]);
1456          * p2 = board.create('point',[5,0]);
1457          * p3 = board.create('point',[0,5]);
1458          *
1459          * c1 = board.create('circle',[p1, p2]);
1460          *
1461          * a = board.create('angle',[p2, p1, p3], {radius:3});
1462          *
1463          * a.setAngle(function() {
1464          *     return Math.PI / 3;
1465          * });
1466          * board.update();
1467          *
1468          * </pre><div id="JXG987c-394f-11e6-af4a-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
1469          * <script type="text/javascript">
1470          *     (function() {
1471          *         var board = JXG.JSXGraph.initBoard('JXG987c-394f-11e6-af4a-901b0e1b8723',
1472          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1473          *     var p1, p2, p3, c, a, s;
1474          *
1475          *     p1 = board.create('point',[0,0]);
1476          *     p2 = board.create('point',[5,0]);
1477          *     p3 = board.create('point',[0,5]);
1478          *
1479          *     c1 = board.create('circle',[p1, p2]);
1480          *
1481          *     a = board.create('angle',[p2, p1, p3], {radius: 3});
1482          *
1483          *     a.setAngle(function() {
1484          *         return Math.PI / 3;
1485          *     });
1486          *     board.update();
1487          *
1488          *     })();
1489          *
1490          * </script><pre>
1491          *
1492          * @example
1493          * var p1, p2, p3, c, a, s;
1494          *
1495          * p1 = board.create('point',[0,0]);
1496          * p2 = board.create('point',[5,0]);
1497          * p3 = board.create('point',[0,5]);
1498          *
1499          * c1 = board.create('circle',[p1, p2]);
1500          *
1501          * a = board.create('angle',[p2, p1, p3], {radius:3});
1502          * s = board.create('slider',[[-2,1], [2,1], [0, Math.PI*0.5, 2*Math.PI]]);
1503          *
1504          * a.setAngle(function() {
1505          *     return s.Value();
1506          * });
1507          * board.update();
1508          *
1509          * </pre><div id="JXG99957b1c-394f-11e6-af4a-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
1510          * <script type="text/javascript">
1511          *     (function() {
1512          *         var board = JXG.JSXGraph.initBoard('JXG99957b1c-394f-11e6-af4a-901b0e1b8723',
1513          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
1514          *     var p1, p2, p3, c, a, s;
1515          *
1516          *     p1 = board.create('point',[0,0]);
1517          *     p2 = board.create('point',[5,0]);
1518          *     p3 = board.create('point',[0,5]);
1519          *
1520          *     c1 = board.create('circle',[p1, p2]);
1521          *
1522          *     a = board.create('angle',[p2, p1, p3], {radius: 3});
1523          *     s = board.create('slider',[[-2,1], [2,1], [0, Math.PI*0.5, 2*Math.PI]]);
1524          *
1525          *     a.setAngle(function() {
1526          *         return s.Value();
1527          *     });
1528          *     board.update();
1529          *
1530          *     })();
1531          *
1532          * </script><pre>
1533          *
1534          */
1535         el.setAngle = function (val) {
1536             var t1, t2,
1537                 phi, phiInv,
1538                 p = this.anglepoint,
1539                 q = this.radiuspoint;
1540 
1541             if (p.draggable()) {
1542 
1543                 if (this.evalVisProp('orientation') === 'clockwise') {
1544                     phi = function() {
1545                         return Math.PI * 2 - Type.evaluate(val);
1546                     };
1547                 } else {
1548                     phi = function() {
1549                         return Type.evaluate(val);
1550                     };
1551                 }
1552 
1553                 t1 = this.board.create("transform", [phi, this.center], {
1554                     type: "rotate"
1555                 });
1556                 p.addTransform(q, t1);
1557                 // Immediately apply the transformation.
1558                 // This prevents that jumping elements can be watched.
1559                 t1.update();
1560                 p.moveTo(Mat.matVecMult(t1.matrix, q.coords.usrCoords));
1561 
1562                 phiInv = function () {
1563                     return Math.PI * 2 - phi();
1564                 };
1565                 t2 = this.board.create("transform", [phiInv, this.center], {
1566                     type: "rotate"
1567                 });
1568                 p.coords.on("update", function () {
1569                     t2.update();
1570                     // q.moveTo(Mat.matVecMult(t2.matrix, p.coords.usrCoords));
1571                     q.setPositionDirectly(Const.COORDS_BY_USER, Mat.matVecMult(t2.matrix, p.coords.usrCoords));
1572                 });
1573 
1574                 p.setParents(q);
1575 
1576                 this.hasFixedAngle = true;
1577             }
1578             return this;
1579         };
1580 
1581         /**
1582          * Frees an angle from a prescribed value. This is only relevant if the angle size has been set by
1583          * "setAngle()" previously. The anglepoint is set to a free point.
1584          * @name free
1585          * @function
1586          * @memberof Angle.prototype
1587          * @returns {Object} Pointer to the angle element..
1588          * @see Angle#setAngle
1589          */
1590         el.free = function () {
1591             var p = this.anglepoint;
1592 
1593             if (p.transformations.length > 0) {
1594                 p.transformations.pop();
1595                 p.isDraggable = true;
1596                 p.parents = [];
1597 
1598                 p.coords.off('update');
1599             }
1600 
1601             this.hasFixedAngle = false;
1602 
1603             return this;
1604         };
1605 
1606         el.setParents(points); // Important: This overwrites the parents order in underlying sector
1607     } // end '3points'
1608 
1609     // GEONExT compatible labels.
1610     if (Type.exists(el.visProp.text)) {
1611         el.label.setText(el.evalVisProp('text'));
1612     }
1613 
1614     el.elType = 'angle';
1615     el.type = Const.OBJECT_TYPE_ANGLE;
1616     el.subs = {};
1617 
1618     /**
1619      * @class
1620      * @ignore
1621      */
1622     el.updateDataArraySquare = function () {
1623         var A, B, C,
1624             d1, d2, v, l1, l2,
1625             r = this.Radius();
1626 
1627         if (type === '2lines') {
1628             // This is necessary to update this.point1, this.point2, this.point3.
1629             this.updateDataArraySector();
1630         }
1631 
1632         A = this.point2;
1633         B = this.point1;
1634         C = this.point3;
1635 
1636         A = A.coords.usrCoords;
1637         B = B.coords.usrCoords;
1638         C = C.coords.usrCoords;
1639 
1640         d1 = Geometry.distance(A, B, 3);
1641         d2 = Geometry.distance(C, B, 3);
1642 
1643         // In case of type=='2lines' this is redundant, because r == d1 == d2
1644         A = [1, B[1] + ((A[1] - B[1]) * r) / d1, B[2] + ((A[2] - B[2]) * r) / d1];
1645         C = [1, B[1] + ((C[1] - B[1]) * r) / d2, B[2] + ((C[2] - B[2]) * r) / d2];
1646 
1647         v = Mat.crossProduct(C, B);
1648         l1 = [-A[1] * v[1] - A[2] * v[2], A[0] * v[1], A[0] * v[2]];
1649         v = Mat.crossProduct(A, B);
1650         l2 = [-C[1] * v[1] - C[2] * v[2], C[0] * v[1], C[0] * v[2]];
1651 
1652         v = Mat.crossProduct(l1, l2);
1653         v[1] /= v[0];
1654         v[2] /= v[0];
1655 
1656         this.dataX = [B[1], A[1], v[1], C[1], B[1]];
1657         this.dataY = [B[2], A[2], v[2], C[2], B[2]];
1658 
1659         this.bezierDegree = 1;
1660     };
1661 
1662     /**
1663      * @class
1664      * @ignore
1665      */
1666     el.updateDataArrayNone = function () {
1667         this.dataX = [NaN];
1668         this.dataY = [NaN];
1669         this.bezierDegree = 1;
1670     };
1671 
1672     /**
1673      * @class
1674      * @ignore
1675      */
1676     el.updateDataArray = function () {
1677         var type = this.evalVisProp('type'),
1678             deg = Geometry.trueAngle(this.point2, this.point1, this.point3),
1679             vp_s = this.evalVisProp('selection'),
1680             vp_o = this.evalVisProp('orientation');
1681 
1682         if ((vp_s === 'minor' && deg > 180.0) || (vp_s === 'major' && deg < 180.0) || (vp_s === 'auto' &&  vp_o === 'clockwise')) {
1683             deg = 360.0 - deg;
1684         }
1685 
1686         if (Math.abs(deg - 90.0) < this.evalVisProp('orthosensitivity') + Mat.eps) {
1687             type = this.evalVisProp('orthotype');
1688         }
1689 
1690         if (type === 'none') {
1691             this.updateDataArrayNone();
1692             this.maxX = function() { return 0; };
1693         } else if (type === 'square') {
1694             this.updateDataArraySquare();
1695             this.maxX = function() { return 4; };
1696         } else if (type === 'sector') {
1697             this.updateDataArraySector();
1698             this.maxX = function() { return 6; };
1699         } else if (type === 'sectordot') {
1700             this.updateDataArraySector();
1701             this.maxX = function() { return 6; };
1702             if (!this.dot.visProp.visible) {
1703                 this.dot.setAttribute({ visible: true });
1704             }
1705         }
1706 
1707         if (!this.visProp.visible || (type !== "sectordot" && this.dot.visProp.visible)) {
1708             this.dot.setAttribute({ visible: false });
1709         }
1710     };
1711 
1712     attrsub = Type.copyAttributes(attributes, board.options, "angle", 'dot');
1713     /**
1714      * Indicates a right angle. Invisible by default, use <tt>dot.visible: true</tt> to show.
1715      * Though this dot indicates a right angle, it can be visible even if the angle is not a right
1716      * one.
1717      * @type JXG.Point
1718      * @name dot
1719      * @memberOf Angle.prototype
1720      */
1721     el.dot = board.create(
1722         "point",
1723         [
1724             function () {
1725                 var A, B, r, d, a2, co, si, mat, vp_s, vp_o;
1726 
1727                 if (Type.exists(el.dot) && !el.dot.visProp.visible) {
1728                     return [0, 0];
1729                 }
1730 
1731                 A = el.point2.coords.usrCoords;
1732                 B = el.point1.coords.usrCoords;
1733                 r = el.Radius();
1734                 d = Geometry.distance(A, B, 3);
1735                 a2 = Geometry.rad(el.point2, el.point1, el.point3);
1736 
1737                 vp_s = el.evalVisProp('selection');
1738                 vp_o = el.evalVisProp('orientation');
1739                 if ((vp_s === 'minor' && a2 > Math.PI) || (vp_s === 'major' && a2 < Math.PI) || (vp_s === 'auto' && vp_o === 'clockwise')) {
1740                     a2 = -(2 * Math.PI - a2);
1741                 }
1742                 a2 *= 0.5;
1743 
1744                 co = Math.cos(a2);
1745                 si = Math.sin(a2);
1746 
1747                 A = [1, B[1] + ((A[1] - B[1]) * r) / d, B[2] + ((A[2] - B[2]) * r) / d];
1748 
1749                 mat = [
1750                     [1, 0, 0],
1751                     [B[1] - 0.5 * B[1] * co + 0.5 * B[2] * si, co * 0.5, -si * 0.5],
1752                     [B[2] - 0.5 * B[1] * si - 0.5 * B[2] * co, si * 0.5, co * 0.5]
1753                 ];
1754                 return Mat.matVecMult(mat, A);
1755             }
1756         ],
1757         attrsub
1758     );
1759 
1760     el.dot.dump = false;
1761     el.subs.dot = el.dot;
1762 
1763     if (type === '2lines') {
1764         for (i = 0; i < 2; i++) {
1765             board.select(parents[i]).addChild(el.dot);
1766         }
1767     } else {
1768         for (i = 0; i < 3; i++) {
1769             board.select(points[i]).addChild(el.dot);
1770         }
1771     }
1772     board.unsuspendUpdate();
1773 
1774     /**
1775      * Returns the value of the angle.
1776      * @memberOf Angle.prototype
1777      * @name Value
1778      * @function
1779      * @param {String} [unit='length'] Unit of the returned values. Possible units are
1780      * <ul>
1781      * <li> 'radians' (default): angle value in radians
1782      * <li> 'degrees': angle value in degrees
1783      * <li> 'semicircle': angle value in radians as a multiple of π, e.g. if the angle is 1.5π, 1.5 will be returned.
1784      * <li> 'circle': angle value in radians as a multiple of 2π
1785      * <li> 'length': length of the arc line of the angle
1786      * </ul>
1787      * It is sufficient to supply the first three characters of the unit, e.g. 'len'.
1788      * @returns {Number} angle value in various units.
1789      * @see Sector#L
1790      * @see Arc#Value
1791      * @example
1792      * var A, B, C, ang,
1793      *     r = 0.5;
1794      * A = board.create("point", [3, 0]);
1795      * B = board.create("point", [0, 0]);
1796      * C = board.create("point", [2, 2]);
1797      * ang = board.create("angle", [A, B, C], {radius: r});
1798      *
1799      * console.log(ang.Value());
1800      * // Output Math.PI * 0.25
1801      *
1802      * console.log(ang.Value('radian'));
1803      * // Output Math.PI * 0.25
1804      *
1805      * console.log(ang.Value('degree');
1806      * // Output 45
1807      *
1808      * console.log(ang.Value('semicircle'));
1809      * // Output 0.25
1810      *
1811      * console.log(ang.Value('circle'));
1812      * // Output 0.125
1813      *
1814      * console.log(ang.Value('length'));
1815      * // Output r * Math.PI * 0.25
1816      *
1817      * console.log(ang.L());
1818      * // Output r * Math.PI * 0.25
1819      *
1820      */
1821     el.Value = function(unit) {
1822         unit = unit || 'radians';
1823         if (unit === '') {
1824             unit = 'radians';
1825         }
1826         return el.arc.Value(unit);
1827     };
1828 
1829 
1830     // documented in GeometryElement
1831     /**
1832      * @class
1833      * @ignore
1834      */
1835     el.getLabelAnchor = function () {
1836         var vec,
1837             dx = 12,
1838             A, B, r, d, a2, co, si, mat,
1839             vp_s = el.evalVisProp('selection'),
1840             vp_o = el.evalVisProp('orientation'),
1841             l_vp = this.label ? this.label.visProp : this.visProp.label,
1842             pos = (this.label) ?
1843                     this.label.evalVisProp('position') : this.evalVisProp('label.position');
1844 
1845         // If this is uncommented, the angle label can not be dragged
1846         //if (Type.exists(this.label)) {
1847         //    this.label.relativeCoords = new Coords(Const.COORDS_BY_SCREEN, [0, 0], this.board);
1848         //}
1849 
1850         if (
1851             !Type.isString(pos) ||
1852             (pos.indexOf('right') < 0 && pos.indexOf('left') < 0)
1853         ) {
1854 
1855             if (Type.exists(this.label) && Type.exists(this.label.visProp.fontsize)) {
1856                 dx = this.label.evalVisProp('fontsize');
1857             }
1858             dx /= this.board.unitX;
1859 
1860             A = el.point2.coords.usrCoords;
1861             B = el.point1.coords.usrCoords;
1862             r = el.Radius();
1863             d = Geometry.distance(A, B, 3);
1864             a2 = Geometry.rad(el.point2, el.point1, el.point3);
1865             if ((vp_s === 'minor' && a2 > Math.PI) || (vp_s === 'major' && a2 < Math.PI) || (vp_s === 'auto' && vp_o === 'clockwise')) {
1866                 a2 = -(2 * Math.PI - a2);
1867             }
1868             a2 *= 0.5;
1869             co = Math.cos(a2);
1870             si = Math.sin(a2);
1871 
1872             A = [1, B[1] + ((A[1] - B[1]) * r) / d, B[2] + ((A[2] - B[2]) * r) / d];
1873 
1874             mat = [
1875                 [1, 0, 0],
1876                 [B[1] - 0.5 * B[1] * co + 0.5 * B[2] * si, co * 0.5, -si * 0.5],
1877                 [B[2] - 0.5 * B[1] * si - 0.5 * B[2] * co, si * 0.5, co * 0.5]
1878             ];
1879             vec = Mat.matVecMult(mat, A);
1880             vec[1] /= vec[0];
1881             vec[2] /= vec[0];
1882             vec[0] /= vec[0];
1883 
1884             d = Geometry.distance(vec, B, 3);
1885             vec = [
1886                 vec[0],
1887                 B[1] + ((vec[1] - B[1]) * (r + dx)) / d,
1888                 B[2] + ((vec[2] - B[2]) * (r + dx)) / d
1889             ];
1890 
1891             l_vp.position = Geometry.calcLabelQuadrant(Geometry.rad([1, 0], [0, 0], vec));
1892 
1893             return new Coords(Const.COORDS_BY_USER, vec, this.board);
1894         } else {
1895             return this.getLabelPosition(pos, this.label.evalVisProp('distance'));
1896         }
1897     };
1898 
1899     el.methodMap = Type.deepCopy(el.methodMap, {
1900         setAngle: "setAngle",
1901         Value: "Value",
1902         free: "free"
1903     });
1904 
1905     return el;
1906 };
1907 
1908 JXG.registerElement("angle", JXG.createAngle);
1909 
1910 /**
1911  * @class A non-reflex angle is the instance of an angle that is at most 180°.
1912  * It is defined by a center, one point that
1913  * defines the radius, and a third point that defines the angle of the sector.
1914  * @pseudo
1915  * @name NonReflexAngle
1916  * @augments Angle
1917  * @constructor
1918  * @type Sector
1919  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
1920  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor sector is a sector of a circle around p1 having measure less than or equal to
1921  * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3.
1922  * @example
1923  * // Create a non-reflex angle out of three free points
1924  * var p1 = board.create('point', [5.0, 3.0]),
1925  *     p2 = board.create('point', [1.0, 0.5]),
1926  *     p3 = board.create('point', [1.5, 5.0]),
1927  *
1928  *     a = board.create('nonreflexangle', [p1, p2, p3], {radius: 2}),
1929  *     t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
1930  * </pre><div class="jxgbox" id="JXGd0ab6d6b-63a7-48b2-8749-b02bb5e744f9" style="width: 300px; height: 300px;"></div>
1931  * <script type="text/javascript">
1932  * (function () {
1933  *   var board = JXG.JSXGraph.initBoard('JXGd0ab6d6b-63a7-48b2-8749-b02bb5e744f9', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
1934  *     p1 = board.create('point', [5.0, 3.0]),
1935  *     p2 = board.create('point', [1.0, 0.5]),
1936  *     p3 = board.create('point', [1.5, 5.0]),
1937  *
1938  *     a = board.create('nonreflexangle', [p1, p2, p3], {radius: 2}),
1939  *     t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
1940  * })();
1941  * </script><pre>
1942  */
1943 JXG.createNonreflexAngle = function (board, parents, attributes) {
1944     var el;
1945 
1946     attributes.selection = 'minor';
1947     attributes = Type.copyAttributes(attributes, board.options, 'nonreflexangle');
1948     el = JXG.createAngle(board, parents, attributes);
1949 
1950     // Documented in createAngle
1951     el.Value = function (unit) {
1952         var rad = Geometry.rad(this.point2, this.point1, this.point3);
1953         unit = unit || 'radians';
1954         if (unit === '') {
1955             unit = 'radians';
1956         }
1957         rad = (rad < Math.PI) ? rad : 2.0 * Math.PI - rad;
1958 
1959         return this.arc.Value(unit, rad);
1960     };
1961     return el;
1962 };
1963 
1964 JXG.registerElement("nonreflexangle", JXG.createNonreflexAngle);
1965 
1966 /**
1967  * @class A reflex angle is the instance of an angle that is larger than 180°.
1968  * It is defined by a center, one point that
1969  * defines the radius, and a third point that defines the angle of the sector.
1970  * @pseudo
1971  * @name ReflexAngle
1972  * @augments Angle
1973  * @constructor
1974  * @type Sector
1975  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
1976  * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor sector is a sector of a circle around p1 having measure less than or equal to
1977  * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3.
1978  * @example
1979  * // Create a non-reflex angle out of three free points
1980  * var p1 = board.create('point', [5.0, 3.0]),
1981  *     p2 = board.create('point', [1.0, 0.5]),
1982  *     p3 = board.create('point', [1.5, 5.0]),
1983  *
1984  *     a = board.create('reflexangle', [p1, p2, p3], {radius: 2}),
1985  *     t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
1986  * </pre><div class="jxgbox" id="JXGf2a577f2-553d-4f9f-a895-2d6d4b8c60e8" style="width: 300px; height: 300px;"></div>
1987  * <script type="text/javascript">
1988  * (function () {
1989  * var board = JXG.JSXGraph.initBoard('JXGf2a577f2-553d-4f9f-a895-2d6d4b8c60e8', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
1990  *     p1 = board.create('point', [5.0, 3.0]),
1991  *     p2 = board.create('point', [1.0, 0.5]),
1992  *     p3 = board.create('point', [1.5, 5.0]),
1993  *
1994  *     a = board.create('reflexangle', [p1, p2, p3], {radius: 2}),
1995  *     t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);
1996  * })();
1997  * </script><pre>
1998  */
1999 JXG.createReflexAngle = function (board, parents, attributes) {
2000     var el;
2001 
2002     attributes.selection = 'major';
2003     attributes = Type.copyAttributes(attributes, board.options, 'reflexangle');
2004     el = JXG.createAngle(board, parents, attributes);
2005 
2006     // Documented in createAngle
2007     el.Value = function (unit) {
2008         var rad = Geometry.rad(this.point2, this.point1, this.point3);
2009         unit = unit || 'radians';
2010         if (unit === '') {
2011             unit = 'radians';
2012         }
2013         rad = (rad >= Math.PI) ? rad : 2.0 * Math.PI - rad;
2014 
2015         return this.arc.Value(unit, rad);
2016     };
2017 
2018     return el;
2019 };
2020 
2021 JXG.registerElement("reflexangle", JXG.createReflexAngle);
2022