1 /*
  2     Copyright 2008-2021
  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 <http://www.gnu.org/licenses/>
 29     and <http://opensource.org/licenses/MIT/>.
 30  */
 31 
 32 
 33 /*global JXG: true, define: true*/
 34 /*jslint nomen: true, plusplus: true*/
 35 
 36 /* depends:
 37  jxg
 38  math/geometry
 39  math/math
 40  base/coords
 41  base/circle
 42  utils/type
 43  base/constants
 44   elements:
 45    curve
 46    midpoint
 47    circumcenter
 48  */
 49 
 50 /**
 51  * @fileoverview In this file the geometry object Arc is defined. Arc stores all
 52  * style and functional properties that are required to draw an arc on a board.
 53  */
 54 
 55 define([
 56     'jxg', 'math/geometry', 'math/math', 'base/coords', 'base/circle', 'utils/type', 'base/constants'
 57 ], function (JXG, Geometry, Mat, Coords, Circle, Type, Const) {
 58 
 59     "use strict";
 60 
 61     /**
 62      * @class An arc is a segment of the circumference of a circle. It is defined by a center, one point that
 63      * defines the radius, and a third point that defines the angle of the arc.
 64      *
 65      * @pseudo
 66      * @name Arc
 67      * @augments Curve
 68      * @constructor
 69      * @type JXG.Curve
 70      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
 71      * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 The result will be an arc of a circle around p1 through p2. The arc is drawn
 72      * counter-clockwise from p2 to p3.
 73      * @example
 74      * // Create an arc out of three free points
 75      * var p1 = board.create('point', [2.0, 2.0]);
 76      * var p2 = board.create('point', [1.0, 0.5]);
 77      * var p3 = board.create('point', [3.5, 1.0]);
 78      *
 79      * var a = board.create('arc', [p1, p2, p3]);
 80      * board.create('text',[1,6,function(){return 'arclength: '+Math.round(a.Value()*100)/100}])
 81      * </pre><div class="jxgbox" id="JXG114ef584-4a5e-4686-8392-c97501befb5b" style="width: 300px; height: 300px;"></div>
 82      * <script type="text/javascript">
 83      * (function () {
 84      *   var board = JXG.JSXGraph.initBoard('JXG114ef584-4a5e-4686-8392-c97501befb5b', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
 85      *       p1 = board.create('point', [2.0, 2.0]),
 86      *       p2 = board.create('point', [1.0, 0.5]),
 87      *       p3 = board.create('point', [3.5, 1.0]),
 88      *
 89      *       a = board.create('arc', [p1, p2, p3]);
 90      *       board.create('text',[1,6,function(){return 'arclength: '+Math.round(a.Value()*100)/100}])
 91      * })();
 92      * </script><pre>
 93      *
 94      * @example
 95      * var t = board.create('transform', [2, 1.5], {type: 'scale'});
 96      * var a1 = board.create('arc', [[1, 1], [0, 1], [1, 0]], {strokeColor: 'red'});
 97      * var a2 = board.create('curve', [a1, t], {strokeColor: 'red'});
 98      *
 99      * </pre><div id="JXG1949da46-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div>
100      * <script type="text/javascript">
101      *     (function() {
102      *         var board = JXG.JSXGraph.initBoard('JXG1949da46-6339-11e8-9fb9-901b0e1b8723',
103      *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
104      *     var t = board.create('transform', [2, 1.5], {type: 'scale'});
105      *     var a1 = board.create('arc', [[1, 1], [0, 1], [1, 0]], {strokeColor: 'red'});
106      *     var a2 = board.create('curve', [a1, t], {strokeColor: 'red'});
107      *
108      *     })();
109      *
110      * </script><pre>
111      *
112      */
113     JXG.createArc = function (board, parents, attributes) {
114         var el, attr, points;
115 
116         points = Type.providePoints(board, parents, attributes, 'arc', ['center', 'radiusPoint', 'anglePoint']);
117         if (points === false || points.length < 3) {
118             throw new Error("JSXGraph: Can't create Arc with parent types '" +
119                 (typeof parents[0]) + "' and '" + (typeof parents[1]) + "' and '" +
120                 (typeof parents[2]) + "'." +
121                 "\nPossible parent types: [point,point,point], [arc, transformation]");
122         }
123 
124         attr = Type.copyAttributes(attributes, board.options, 'arc');
125         el = board.create('curve', [[0], [0]], attr);
126 
127         el.elType = 'arc';
128         el.setParents(points);
129 
130         /**
131          * documented in JXG.GeometryElement
132          * @ignore
133          */
134         el.type = Const.OBJECT_TYPE_ARC;
135 
136         /**
137          * Center of the arc.
138          * @memberOf Arc.prototype
139          * @name center
140          * @type JXG.Point
141          */
142         el.center = points[0];
143 
144         /**
145          * Point defining the arc's radius.
146          * @memberOf Arc.prototype
147          * @name radiuspoint
148          * @type JXG.Point
149          */
150         el.radiuspoint = points[1];
151         el.point2 = el.radiuspoint;
152 
153         /**
154          * The point defining the arc's angle.
155          * @memberOf Arc.prototype
156          * @name anglepoint
157          * @type JXG.Point
158          */
159         el.anglepoint = points[2];
160         el.point3 = el.anglepoint;
161 
162         // Add arc as child to defining points
163         el.center.addChild(el);
164         el.radiuspoint.addChild(el);
165         el.anglepoint.addChild(el);
166 
167         // should be documented in options
168         el.useDirection = attr.usedirection;
169 
170         // documented in JXG.Curve
171         el.updateDataArray = function () {
172             var ar, phi, det, p0c, p1c, p2c,
173                 sgn = 1,
174                 A = this.radiuspoint,
175                 B = this.center,
176                 C = this.anglepoint,
177                 ev_s = Type.evaluate(this.visProp.selection);
178 
179             phi = Geometry.rad(A, B, C);
180             if ((ev_s === 'minor' && phi > Math.PI) ||
181                     (ev_s === 'major' && phi < Math.PI)) {
182                 sgn = -1;
183             }
184 
185             // This is true for circumCircleArcs. In that case there is
186             // a fourth parent element: [center, point1, point3, point2]
187             if (this.useDirection) {
188                 p0c = points[1].coords.usrCoords;
189                 p1c = points[3].coords.usrCoords;
190                 p2c = points[2].coords.usrCoords;
191                 det = (p0c[1] - p2c[1]) * (p0c[2] - p1c[2]) - (p0c[2] - p2c[2]) * (p0c[1] - p1c[1]);
192 
193                 if (det < 0) {
194                     this.radiuspoint = points[1];
195                     this.anglepoint = points[2];
196                 } else {
197                     this.radiuspoint = points[2];
198                     this.anglepoint = points[1];
199                 }
200             }
201 
202             A = A.coords.usrCoords;
203             B = B.coords.usrCoords;
204             C = C.coords.usrCoords;
205 
206             ar = Geometry.bezierArc(A, B, C, false, sgn);
207 
208             this.dataX = ar[0];
209             this.dataY = ar[1];
210 
211             this.bezierDegree = 3;
212 
213             this.updateStdform();
214             this.updateQuadraticform();
215         };
216 
217         /**
218          * Determines the arc's current radius. I.e. the distance between {@link Arc#center} and {@link Arc#radiuspoint}.
219          * @memberOf Arc.prototype
220          * @name Radius
221          * @function
222          * @returns {Number} The arc's radius
223          */
224         el.Radius = function () {
225             return this.radiuspoint.Dist(this.center);
226         };
227 
228         /**
229          * @deprecated Use {@link Arc#Radius}
230          * @memberOf Arc.prototype
231          * @name getRadius
232          * @function
233          * @returns {Number}
234          */
235         el.getRadius = function () {
236             JXG.deprecated('Arc.getRadius()', 'Arc.Radius()');
237             return this.Radius();
238         };
239 
240         /**
241          * Returns the length of the arc.
242          * @memberOf Arc.prototype
243          * @name Value
244          * @function
245          * @returns {Number} The arc length
246          */
247         el.Value = function () {
248             return this.Radius() * Geometry.rad(this.radiuspoint, this.center, this.anglepoint);
249         };
250 
251         // documented in geometry element
252         el.hasPoint = function (x, y) {
253             var dist, checkPoint,
254                 has, angle, alpha, beta,
255                 invMat, c,
256                 prec, type,
257                 r = this.Radius(),
258                 ev_s = Type.evaluate(this.visProp.selection);
259 
260             if (Type.evaluate(this.visProp.hasinnerpoints)) {
261                 return this.hasPointSector(x, y);
262             }
263 
264             if (Type.isObject(Type.evaluate(this.visProp.precision))) {
265                 type = this.board._inputDevice;
266                 prec = Type.evaluate(this.visProp.precision[type]);
267             } else {
268                 // 'inherit'
269                 prec = this.board.options.precision.hasPoint;
270             }
271             prec /= Math.min(this.board.unitX, this.board.unitY);
272             checkPoint = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board);
273 
274             if (this.transformations.length > 0) {
275                 // Transform the mouse/touch coordinates
276                 // back to the original position of the curve.
277                 this.updateTransformMatrix();
278                 invMat = Mat.inverse(this.transformMat);
279                 c = Mat.matVecMult(invMat, checkPoint.usrCoords);
280                 checkPoint = new Coords(Const.COORDS_BY_USER, c, this.board);
281             }
282 
283             dist = this.center.coords.distance(Const.COORDS_BY_USER, checkPoint);
284             has = (Math.abs(dist - r) < prec);
285 
286             /**
287              * At that point we know that the user has touched the circle line.
288              * Now, we have to check, if the user has hit the arc path.
289              */
290             if (has) {
291                 angle = Geometry.rad(this.radiuspoint, this.center, checkPoint.usrCoords.slice(1));
292                 alpha = 0.0;
293                 beta = Geometry.rad(this.radiuspoint, this.center, this.anglepoint);
294 
295                 if ((ev_s === 'minor' && beta > Math.PI) ||
296                         (ev_s === 'major' && beta < Math.PI)) {
297                     alpha = beta;
298                     beta = 2 * Math.PI;
299                 }
300                 if (angle < alpha || angle > beta) {
301                     has = false;
302                 }
303             }
304 
305             return has;
306         };
307 
308         /**
309          * Checks whether (x,y) is within the sector defined by the arc.
310          * @memberOf Arc.prototype
311          * @name hasPointSector
312          * @function
313          * @param {Number} x Coordinate in x direction, screen coordinates.
314          * @param {Number} y Coordinate in y direction, screen coordinates.
315          * @returns {Boolean} True if (x,y) is within the sector defined by the arc, False otherwise.
316          */
317         el.hasPointSector = function (x, y) {
318             var angle, alpha, beta,
319                 checkPoint = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board),
320                 r = this.Radius(),
321                 dist = this.center.coords.distance(Const.COORDS_BY_USER, checkPoint),
322                 has = (dist < r),
323                 ev_s = Type.evaluate(this.visProp.selection);
324 
325             if (has) {
326                 angle = Geometry.rad(this.radiuspoint, this.center, checkPoint.usrCoords.slice(1));
327                 alpha = 0;
328                 beta = Geometry.rad(this.radiuspoint, this.center, this.anglepoint);
329 
330                 if ((ev_s === 'minor' && beta > Math.PI) ||
331                         (ev_s === 'major' && beta < Math.PI)) {
332                     alpha = beta;
333                     beta = 2 * Math.PI;
334                 }
335                 if (angle < alpha || angle > beta) {
336                     has = false;
337                 }
338             }
339 
340             return has;
341         };
342 
343         // documented in geometry element
344         el.getTextAnchor = function () {
345             return this.center.coords;
346         };
347 
348         // documented in geometry element
349         el.getLabelAnchor = function () {
350             var coords, vec, vecx, vecy, len,
351                 angle = Geometry.rad(this.radiuspoint, this.center, this.anglepoint),
352                 dx = 10 / this.board.unitX,
353                 dy = 10 / this.board.unitY,
354                 p2c = this.point2.coords.usrCoords,
355                 pmc = this.center.coords.usrCoords,
356                 bxminusax = p2c[1] - pmc[1],
357                 byminusay = p2c[2] - pmc[2],
358                 ev_s = Type.evaluate(this.visProp.selection),
359                 l_vp = this.label ? this.label.visProp : this.visProp.label;
360 
361             // If this is uncommented, the angle label can not be dragged
362             //if (Type.exists(this.label)) {
363             //    this.label.relativeCoords = new Coords(Const.COORDS_BY_SCREEN, [0, 0], this.board);
364             //}
365 
366             if ((ev_s === 'minor' && angle > Math.PI) ||
367                     (ev_s === 'major' && angle < Math.PI)) {
368                 angle = -(2 * Math.PI - angle);
369             }
370 
371             coords = new Coords(Const.COORDS_BY_USER, [
372                 pmc[1] + Math.cos(angle * 0.5) * bxminusax - Math.sin(angle * 0.5) * byminusay,
373                 pmc[2] + Math.sin(angle * 0.5) * bxminusax + Math.cos(angle * 0.5) * byminusay
374             ], this.board);
375 
376             vecx = coords.usrCoords[1] - pmc[1];
377             vecy = coords.usrCoords[2] - pmc[2];
378 
379             len = Math.sqrt(vecx * vecx + vecy * vecy);
380             vecx = vecx * (len + dx) / len;
381             vecy = vecy * (len + dy) / len;
382             vec = [pmc[1] + vecx, pmc[2] + vecy];
383 
384             l_vp.position = Geometry.calcLabelQuadrant(Geometry.rad([1,0],[0,0],vec));
385 
386             return new Coords(Const.COORDS_BY_USER, vec, this.board);
387         };
388 
389         // documentation in jxg.circle
390         el.updateQuadraticform = Circle.Circle.prototype.updateQuadraticform;
391 
392         // documentation in jxg.circle
393         el.updateStdform = Circle.Circle.prototype.updateStdform;
394 
395         el.methodMap = JXG.deepCopy(el.methodMap, {
396             getRadius: 'getRadius',
397             radius: 'Radius',
398             center: 'center',
399             radiuspoint: 'radiuspoint',
400             anglepoint: 'anglepoint',
401             Value: 'Value'
402         });
403 
404         el.prepareUpdate().update();
405         return el;
406     };
407 
408     JXG.registerElement('arc', JXG.createArc);
409 
410     /**
411      * @class A semicircle is a special arc defined by two points. The arc hits both points.
412      * @pseudo
413      * @name Semicircle
414      * @augments Arc
415      * @constructor
416      * @type Arc
417      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
418      * @param {JXG.Point_JXG.Point} p1,p2 The result will be a composition of an arc drawn clockwise from <tt>p1</tt> and
419      * <tt>p2</tt> and the midpoint of <tt>p1</tt> and <tt>p2</tt>.
420      * @example
421      * // Create an arc out of three free points
422      * var p1 = board.create('point', [4.5, 2.0]);
423      * var p2 = board.create('point', [1.0, 0.5]);
424      *
425      * var a = board.create('semicircle', [p1, p2]);
426      * </pre><div class="jxgbox" id="JXG5385d349-75d7-4078-b732-9ae808db1b0e" style="width: 300px; height: 300px;"></div>
427      * <script type="text/javascript">
428      * (function () {
429      *   var board = JXG.JSXGraph.initBoard('JXG5385d349-75d7-4078-b732-9ae808db1b0e', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
430      *       p1 = board.create('point', [4.5, 2.0]),
431      *       p2 = board.create('point', [1.0, 0.5]),
432      *
433      *       sc = board.create('semicircle', [p1, p2]);
434      * })();
435      * </script><pre>
436      */
437     JXG.createSemicircle = function (board, parents, attributes) {
438         var el, mp, attr, points;
439 
440         // we need 2 points
441         points = Type.providePoints(board, parents, attributes, 'point');
442         if (points === false || points.length !== 2) {
443             throw new Error("JSXGraph: Can't create Semicircle with parent types '" +
444                 (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." +
445                 "\nPossible parent types: [point,point]");
446         }
447 
448         attr = Type.copyAttributes(attributes, board.options, 'semicircle', 'center');
449         mp = board.create('midpoint', points, attr);
450         mp.dump = false;
451 
452         attr = Type.copyAttributes(attributes, board.options, 'semicircle');
453         el = board.create('arc', [mp, points[1], points[0]], attr);
454         el.elType = 'semicircle';
455         el.setParents([points[0].id, points[1].id]);
456         el.subs = {
457             midpoint: mp
458         };
459         el.inherits.push(mp);
460 
461         /**
462          * The midpoint of the two defining points.
463          * @memberOf Semicircle.prototype
464          * @name midpoint
465          * @type Midpoint
466          */
467         el.midpoint = el.center = mp;
468 
469         return el;
470     };
471 
472     JXG.registerElement('semicircle', JXG.createSemicircle);
473 
474     /**
475      * @class A circumcircle arc is an {@link Arc} defined by three points. All three points lie on the arc.
476      * @pseudo
477      * @name CircumcircleArc
478      * @augments Arc
479      * @constructor
480      * @type Arc
481      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
482      * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 The result will be a composition of an arc of the circumcircle of
483      * <tt>p1</tt>, <tt>p2</tt>, and <tt>p3</tt> and the midpoint of the circumcircle of the three points. The arc is drawn
484      * counter-clockwise from <tt>p1</tt> over <tt>p2</tt> to <tt>p3</tt>.
485      * @example
486      * // Create a circum circle arc out of three free points
487      * var p1 = board.create('point', [2.0, 2.0]);
488      * var p2 = board.create('point', [1.0, 0.5]);
489      * var p3 = board.create('point', [3.5, 1.0]);
490      *
491      * var a = board.create('circumcirclearc', [p1, p2, p3]);
492      * </pre><div class="jxgbox" id="JXG87125fd4-823a-41c1-88ef-d1a1369504e3" style="width: 300px; height: 300px;"></div>
493      * <script type="text/javascript">
494      * (function () {
495      *   var board = JXG.JSXGraph.initBoard('JXG87125fd4-823a-41c1-88ef-d1a1369504e3', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
496      *       p1 = board.create('point', [2.0, 2.0]),
497      *       p2 = board.create('point', [1.0, 0.5]),
498      *       p3 = board.create('point', [3.5, 1.0]),
499      *
500      *       cca = board.create('circumcirclearc', [p1, p2, p3]);
501      * })();
502      * </script><pre>
503      */
504     JXG.createCircumcircleArc = function (board, parents, attributes) {
505         var el, mp, attr, points;
506 
507         // We need three points
508         points = Type.providePoints(board, parents, attributes, 'point');
509         if (points === false || points.length !== 3) {
510             throw new Error("JSXGraph: create Circumcircle Arc with parent types '" +
511                 (typeof parents[0]) + "' and '" + (typeof parents[1]) + "' and '" + (typeof parents[2]) + "'." +
512                 "\nPossible parent types: [point,point,point]");
513         }
514 
515         attr = Type.copyAttributes(attributes, board.options, 'circumcirclearc', 'center');
516         mp = board.create('circumcenter', points, attr);
517         mp.dump = false;
518 
519         attr = Type.copyAttributes(attributes, board.options, 'circumcirclearc');
520         attr.usedirection = true;
521         el = board.create('arc', [mp, points[0], points[2], points[1]], attr);
522 
523         el.elType = 'circumcirclearc';
524         el.setParents([points[0].id, points[1].id, points[2].id]);
525         el.subs = {
526             center: mp
527         };
528         el.inherits.push(mp);
529 
530         /**
531          * The midpoint of the circumcircle of the three points defining the circumcircle arc.
532          * @memberOf CircumcircleArc.prototype
533          * @name center
534          * @type Circumcenter
535          */
536         el.center = mp;
537 
538         return el;
539     };
540 
541     JXG.registerElement('circumcirclearc', JXG.createCircumcircleArc);
542 
543     /**
544      * @class A minor arc is a segment of the circumference of a circle having measure less than or equal to
545      * 180 degrees (pi radians). It is defined by a center, one point that
546      * defines the radius, and a third point that defines the angle of the arc.
547      * @pseudo
548      * @name MinorArc
549      * @augments Curve
550      * @constructor
551      * @type JXG.Curve
552      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
553      * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor arc is an arc of a circle around p1 having measure less than or equal to
554      * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3.
555      * @example
556      * // Create an arc out of three free points
557      * var p1 = board.create('point', [2.0, 2.0]);
558      * var p2 = board.create('point', [1.0, 0.5]);
559      * var p3 = board.create('point', [3.5, 1.0]);
560      *
561      * var a = board.create('arc', [p1, p2, p3]);
562      * </pre><div class="jxgbox" id="JXG64ba7ca2-8728-45f3-96e5-3c7a4414de2f" style="width: 300px; height: 300px;"></div>
563      * <script type="text/javascript">
564      * (function () {
565      *   var board = JXG.JSXGraph.initBoard('JXG64ba7ca2-8728-45f3-96e5-3c7a4414de2f', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
566      *       p1 = board.create('point', [2.0, 2.0]),
567      *       p2 = board.create('point', [1.0, 0.5]),
568      *       p3 = board.create('point', [3.5, 1.0]),
569      *
570      *       a = board.create('minorarc', [p1, p2, p3]);
571      * })();
572      * </script><pre>
573      */
574 
575     JXG.createMinorArc = function (board, parents, attributes) {
576         attributes.selection = 'minor';
577         return JXG.createArc(board, parents, attributes);
578     };
579 
580     JXG.registerElement('minorarc', JXG.createMinorArc);
581 
582     /**
583      * @class A major arc is a segment of the circumference of a circle having measure greater than or equal to
584      * 180 degrees (pi radians). It is defined by a center, one point that
585      * defines the radius, and a third point that defines the angle of the arc.
586      * @pseudo
587      * @name MajorArc
588      * @augments Curve
589      * @constructor
590      * @type JXG.Curve
591      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
592      * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Major arc is an arc of a circle around p1 having measure greater than or equal to
593      * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3.
594      * @example
595      * // Create an arc out of three free points
596      * var p1 = board.create('point', [2.0, 2.0]);
597      * var p2 = board.create('point', [1.0, 0.5]);
598      * var p3 = board.create('point', [3.5, 1.0]);
599      *
600      * var a = board.create('minorarc', [p1, p2, p3]);
601      * </pre><div class="jxgbox" id="JXG17a10d38-5629-40a4-b150-f41806edee9f" style="width: 300px; height: 300px;"></div>
602      * <script type="text/javascript">
603      * (function () {
604      *   var board = JXG.JSXGraph.initBoard('JXG17a10d38-5629-40a4-b150-f41806edee9f', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}),
605      *       p1 = board.create('point', [2.0, 2.0]),
606      *       p2 = board.create('point', [1.0, 0.5]),
607      *       p3 = board.create('point', [3.5, 1.0]),
608      *
609      *       a = board.create('majorarc', [p1, p2, p3]);
610      * })();
611      * </script><pre>
612      */
613     JXG.createMajorArc = function (board, parents, attributes) {
614         attributes.selection = 'major';
615         return JXG.createArc(board, parents, attributes);
616     };
617 
618     JXG.registerElement('majorarc', JXG.createMajorArc);
619 
620     return {
621         createArc: JXG.createArc,
622         createSemicircle: JXG.createSemicircle,
623         createCircumcircleArc: JXG.createCircumcircleArc,
624         createMinorArc: JXG.createMinorArc,
625         createMajorArc: JXG.createMajorArc
626     };
627 });
628