1 /*
  2     Copyright 2008-2023
  3         Matthias Ehmann,
  4         Michael Gerhaeuser,
  5         Carsten Miller,
  6         Bianca Valentin,
  7         Alfred Wassermann,
  8         Peter Wilfahrt
  9 
 10     This file is part of JSXGraph.
 11 
 12     JSXGraph is free software dual licensed under the GNU LGPL or MIT License.
 13 
 14     You can redistribute it and/or modify it under the terms of the
 15 
 16       * GNU Lesser General Public License as published by
 17         the Free Software Foundation, either version 3 of the License, or
 18         (at your option) any later version
 19       OR
 20       * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT
 21 
 22     JSXGraph is distributed in the hope that it will be useful,
 23     but WITHOUT ANY WARRANTY; without even the implied warranty of
 24     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 25     GNU Lesser General Public License for more details.
 26 
 27     You should have received a copy of the GNU Lesser General Public License and
 28     the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
 29     and <https://opensource.org/licenses/MIT/>.
 30  */
 31 
 32 /*global JXG: true, define: true*/
 33 /*jslint nomen: true, plusplus: true, unparam: true*/
 34 
 35 import JXG from "../jxg";
 36 import Const from "./constants";
 37 import Coords from "./coords";
 38 import Mat from "../math/math";
 39 import Statistics from "../math/statistics";
 40 import Options from "../options";
 41 import EventEmitter from "../utils/event";
 42 import Color from "../utils/color";
 43 import Type from "../utils/type";
 44 
 45 /**
 46  * Constructs a new GeometryElement object.
 47  * @class This is the basic class for geometry elements like points, circles and lines.
 48  * @constructor
 49  * @param {JXG.Board} board Reference to the board the element is constructed on.
 50  * @param {Object} attributes Hash of attributes and their values.
 51  * @param {Number} type Element type (a <tt>JXG.OBJECT_TYPE_</tt> value).
 52  * @param {Number} oclass The element's class (a <tt>JXG.OBJECT_CLASS_</tt> value).
 53  * @borrows JXG.EventEmitter#on as this.on
 54  * @borrows JXG.EventEmitter#off as this.off
 55  * @borrows JXG.EventEmitter#triggerEventHandlers as this.triggerEventHandlers
 56  * @borrows JXG.EventEmitter#eventHandlers as this.eventHandlers
 57  */
 58 JXG.GeometryElement = function (board, attributes, type, oclass) {
 59     var name, key, attr;
 60 
 61     /**
 62      * Controls if updates are necessary
 63      * @type Boolean
 64      * @default true
 65      */
 66     this.needsUpdate = true;
 67 
 68     /**
 69      * Controls if this element can be dragged. In GEONExT only
 70      * free points and gliders can be dragged.
 71      * @type Boolean
 72      * @default false
 73      */
 74     this.isDraggable = false;
 75 
 76     /**
 77      * If element is in two dimensional real space this is true, else false.
 78      * @type Boolean
 79      * @default true
 80      */
 81     this.isReal = true;
 82 
 83     /**
 84      * Stores all dependent objects to be updated when this point is moved.
 85      * @type Object
 86      */
 87     this.childElements = {};
 88 
 89     /**
 90      * If element has a label subelement then this property will be set to true.
 91      * @type Boolean
 92      * @default false
 93      */
 94     this.hasLabel = false;
 95 
 96     /**
 97      * True, if the element is currently highlighted.
 98      * @type Boolean
 99      * @default false
100      */
101     this.highlighted = false;
102 
103     /**
104      * Stores all Intersection Objects which in this moment are not real and
105      * so hide this element.
106      * @type Object
107      */
108     this.notExistingParents = {};
109 
110     /**
111      * Keeps track of all objects drawn as part of the trace of the element.
112      * @see JXG.GeometryElement#clearTrace
113      * @see JXG.GeometryElement#numTraces
114      * @type Object
115      */
116     this.traces = {};
117 
118     /**
119      * Counts the number of objects drawn as part of the trace of the element.
120      * @see JXG.GeometryElement#clearTrace
121      * @see JXG.GeometryElement#traces
122      * @type Number
123      */
124     this.numTraces = 0;
125 
126     /**
127      * Stores the  transformations which are applied during update in an array
128      * @type Array
129      * @see JXG.Transformation
130      */
131     this.transformations = [];
132 
133     /**
134      * @type JXG.GeometryElement
135      * @default null
136      * @private
137      */
138     this.baseElement = null;
139 
140     /**
141      * Elements depending on this element are stored here.
142      * @type Object
143      */
144     this.descendants = {};
145 
146     /**
147      * Elements on which this element depends on are stored here.
148      * @type Object
149      */
150     this.ancestors = {};
151 
152     /**
153      * Ids of elements on which this element depends directly are stored here.
154      * @type Object
155      */
156     this.parents = [];
157 
158     /**
159      * Stores variables for symbolic computations
160      * @type Object
161      */
162     this.symbolic = {};
163 
164     /**
165      * Stores the SVG (or VML) rendering node for the element. This enables low-level
166      * access to SVG nodes. The properties of such an SVG node can then be changed
167      * by calling setAttribute(). Note that there are a few elements which consist
168      * of more than one SVG nodes:
169      * <ul>
170      * <li> Elements with arrow tail or head: rendNodeTriangleStart, rendNodeTriangleEnd
171      * <li> SVG (or VML) texts: rendNodeText
172      * <li> Button: rendNodeForm, rendNodeButton, rendNodeTag
173      * <li> Checkbox: rendNodeForm, rendNodeCheckbox, rendNodeLabel, rendNodeTag
174      * <li> Input: rendNodeForm, rendNodeInput, rendNodeLabel, rendNodeTag
175      * </ul>
176      *
177      * Here is are two examples: The first example shows how to access the SVG node,
178      * the second example demonstrates how to change SVG attributes.
179      * @example
180      *     var p1 = board.create('point', [0, 0]);
181      *     console.log(p1.rendNode);
182      *     // returns the full SVG node details of the point p1, something like:
183      *     // <ellipse id='box_jxgBoard1P6' stroke='#ff0000' stroke-opacity='1' stroke-width='2px'
184      *     //   fill='#ff0000' fill-opacity='1' cx='250' cy='250' rx='4' ry='4'
185      *     //   style='position: absolute;'>
186      *     // </ellipse>
187      *
188      * @example
189      *     var s = board.create('segment', [p1, p2], {strokeWidth: 60});
190      *     s.rendNode.setAttribute('stroke-linecap', 'round');
191      *
192      * @type Object
193      */
194     this.rendNode = null;
195 
196     /**
197      * The string used with {@link JXG.Board#create}
198      * @type String
199      */
200     this.elType = "";
201 
202     /**
203      * The element is saved with an explicit entry in the file (<tt>true</tt>) or implicitly
204      * via a composition.
205      * @type Boolean
206      * @default true
207      */
208     this.dump = true;
209 
210     /**
211      * Subs contains the subelements, created during the create method.
212      * @type Object
213      */
214     this.subs = {};
215 
216     /**
217      * Inherits contains the subelements, which may have an attribute
218      * (in particular the attribute "visible") having value 'inherit'.
219      * @type Object
220      */
221     this.inherits = [];
222 
223     /**
224      * The position of this element inside the {@link JXG.Board#objectsList}.
225      * @type Number
226      * @default -1
227      * @private
228      */
229     this._pos = -1;
230 
231     /**
232      * [c, b0, b1, a, k, r, q0, q1]
233      *
234      * See
235      * A.E. Middleditch, T.W. Stacey, and S.B. Tor:
236      * "Intersection Algorithms for Lines and Circles",
237      * ACM Transactions on Graphics, Vol. 8, 1, 1989, pp 25-40.
238      *
239      * The meaning of the parameters is:
240      * Circle: points p=[p0, p1] on the circle fulfill
241      *  a<p, p> + <b, p> + c = 0
242      * For convenience we also store
243      *  r: radius
244      *  k: discriminant = sqrt(<b,b>-4ac)
245      *  q=[q0, q1] center
246      *
247      * Points have radius = 0.
248      * Lines have radius = infinity.
249      * b: normalized vector, representing the direction of the line.
250      *
251      * Should be put into Coords, when all elements possess Coords.
252      * @type Array
253      * @default [1, 0, 0, 0, 1, 1, 0, 0]
254      */
255     this.stdform = [1, 0, 0, 0, 1, 1, 0, 0];
256 
257     /**
258      * The methodMap determines which methods can be called from within JessieCode and under which name it
259      * can be used. The map is saved in an object, the name of a property is the name of the method used in JessieCode,
260      * the value of a property is the name of the method in JavaScript.
261      * @type Object
262      */
263     this.methodMap = {
264         setLabel: "setLabel",
265         label: "label",
266         setName: "setName",
267         getName: "getName",
268         addTransform: "addTransform",
269         setProperty: "setAttribute",
270         setAttribute: "setAttribute",
271         addChild: "addChild",
272         animate: "animate",
273         on: "on",
274         off: "off",
275         trigger: "trigger",
276         addTicks: "addTicks",
277         removeTicks: "removeTicks",
278         removeAllTicks: "removeAllTicks"
279     };
280 
281     /**
282      * Quadratic form representation of circles (and conics)
283      * @type Array
284      * @default [[1,0,0],[0,1,0],[0,0,1]]
285      */
286     this.quadraticform = [
287         [1, 0, 0],
288         [0, 1, 0],
289         [0, 0, 1]
290     ];
291 
292     /**
293      * An associative array containing all visual properties.
294      * @type Object
295      * @default empty object
296      */
297     this.visProp = {};
298 
299     /**
300      * An associative array containing visual properties which are calculated from
301      * the attribute values (i.e. visProp) and from other constraints.
302      * An example: if an intersection point does not have real coordinates,
303      * visPropCalc.visible is set to false.
304      * Additionally, the user can control visibility with the attribute "visible",
305      * even by supplying a functions as value.
306      *
307      * @type Object
308      * @default empty object
309      */
310     this.visPropCalc = {
311         visible: false
312     };
313 
314     EventEmitter.eventify(this);
315 
316     /**
317      * Is the mouse over this element?
318      * @type Boolean
319      * @default false
320      */
321     this.mouseover = false;
322 
323     /**
324      * Time stamp containing the last time this element has been dragged.
325      * @type Date
326      * @default creation time
327      */
328     this.lastDragTime = new Date();
329 
330     if (arguments.length > 0) {
331         /**
332          * Reference to the board associated with the element.
333          * @type JXG.Board
334          */
335         this.board = board;
336 
337         /**
338          * Type of the element.
339          * @constant
340          * @type Number
341          */
342         this.type = type;
343 
344         /**
345          * Original type of the element at construction time. Used for removing glider property.
346          * @constant
347          * @type Number
348          */
349         this._org_type = type;
350 
351         /**
352          * The element's class.
353          * @constant
354          * @type Number
355          */
356         this.elementClass = oclass || Const.OBJECT_CLASS_OTHER;
357 
358         /**
359          * Unique identifier for the element. Equivalent to id-attribute of renderer element.
360          * @type String
361          */
362         this.id = attributes.id;
363 
364         name = attributes.name;
365         /* If name is not set or null or even undefined, generate an unique name for this object */
366         if (!Type.exists(name)) {
367             name = this.board.generateName(this);
368         }
369 
370         if (name !== "") {
371             this.board.elementsByName[name] = this;
372         }
373 
374         /**
375          * Not necessarily unique name for the element.
376          * @type String
377          * @default Name generated by {@link JXG.Board#generateName}.
378          * @see JXG.Board#generateName
379          */
380         this.name = name;
381 
382         this.needsRegularUpdate = attributes.needsregularupdate;
383 
384         // create this.visPropOld and set default values
385         Type.clearVisPropOld(this);
386 
387         attr = this.resolveShortcuts(attributes);
388         for (key in attr) {
389             if (attr.hasOwnProperty(key)) {
390                 this._set(key, attr[key]);
391             }
392         }
393 
394         this.visProp.draft = attr.draft && attr.draft.draft;
395         //this.visProp.gradientangle = '270';
396         // this.visProp.gradientsecondopacity = Type.evaluate(this.visProp.fillopacity);
397         //this.visProp.gradientpositionx = 0.5;
398         //this.visProp.gradientpositiony = 0.5;
399     }
400 };
401 
402 JXG.extend(
403     JXG.GeometryElement.prototype,
404     /** @lends JXG.GeometryElement.prototype */ {
405         /**
406          * Add an element as a child to the current element. Can be used to model dependencies between geometry elements.
407          * @param {JXG.GeometryElement} obj The dependent object.
408          */
409         addChild: function (obj) {
410             var el, el2;
411 
412             this.childElements[obj.id] = obj;
413             this.addDescendants(obj);
414             obj.ancestors[this.id] = this;
415 
416             for (el in this.descendants) {
417                 if (this.descendants.hasOwnProperty(el)) {
418                     this.descendants[el].ancestors[this.id] = this;
419 
420                     for (el2 in this.ancestors) {
421                         if (this.ancestors.hasOwnProperty(el2)) {
422                             this.descendants[el].ancestors[this.ancestors[el2].id] =
423                                 this.ancestors[el2];
424                         }
425                     }
426                 }
427             }
428 
429             for (el in this.ancestors) {
430                 if (this.ancestors.hasOwnProperty(el)) {
431                     for (el2 in this.descendants) {
432                         if (this.descendants.hasOwnProperty(el2)) {
433                             this.ancestors[el].descendants[this.descendants[el2].id] =
434                                 this.descendants[el2];
435                         }
436                     }
437                 }
438             }
439             return this;
440         },
441 
442         /**
443          * Adds the given object to the descendants list of this object and all its child objects.
444          * @param {JXG.GeometryElement} obj The element that is to be added to the descendants list.
445          * @private
446          * @return
447          */
448         addDescendants: function (obj) {
449             var el;
450 
451             this.descendants[obj.id] = obj;
452             for (el in obj.childElements) {
453                 if (obj.childElements.hasOwnProperty(el)) {
454                     this.addDescendants(obj.childElements[el]);
455                 }
456             }
457             return this;
458         },
459 
460         /**
461          * Adds ids of elements to the array this.parents. This method needs to be called if some dependencies
462          * can not be detected automatically by JSXGraph. For example if a function graph is given by a function
463          * which referes to coordinates of a point, calling addParents() is necessary.
464          *
465          * @param {Array} parents Array of elements or ids of elements.
466          * Alternatively, one can give a list of objects as parameters.
467          * @returns {JXG.Object} reference to the object itself.
468          *
469          * @example
470          * // Movable function graph
471          * var A = board.create('point', [1, 0], {name:'A'}),
472          *     B = board.create('point', [3, 1], {name:'B'}),
473          *     f = board.create('functiongraph', function(x) {
474          *          var ax = A.X(),
475          *              ay = A.Y(),
476          *              bx = B.X(),
477          *              by = B.Y(),
478          *              a = (by - ay) / ( (bx - ax) * (bx - ax) );
479          *           return a * (x - ax) * (x - ax) + ay;
480          *      }, {fixed: false});
481          * f.addParents([A, B]);
482          * </pre><div class="jxgbox" id="JXG7c91d4d2-986c-4378-8135-24505027f251" style="width: 400px; height: 400px;"></div>
483          * <script type="text/javascript">
484          * (function() {
485          *   var board = JXG.JSXGraph.initBoard('JXG7c91d4d2-986c-4378-8135-24505027f251', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
486          *   var A = board.create('point', [1, 0], {name:'A'}),
487          *       B = board.create('point', [3, 1], {name:'B'}),
488          *       f = board.create('functiongraph', function(x) {
489          *            var ax = A.X(),
490          *                ay = A.Y(),
491          *                bx = B.X(),
492          *                by = B.Y(),
493          *                a = (by - ay) / ( (bx - ax) * (bx - ax) );
494          *             return a * (x - ax) * (x - ax) + ay;
495          *        }, {fixed: false});
496          *   f.addParents([A, B]);
497          * })();
498          * </script><pre>
499          *
500          **/
501         addParents: function (parents) {
502             var i, len, par;
503 
504             if (Type.isArray(parents)) {
505                 par = parents;
506             } else {
507                 par = arguments;
508             }
509 
510             len = par.length;
511             for (i = 0; i < len; ++i) {
512                 if (!Type.exists(par[i])) {
513                     continue;
514                 }
515                 if (Type.isId(this.board, par[i])) {
516                     this.parents.push(par[i]);
517                 } else if (Type.exists(par[i].id)) {
518                     this.parents.push(par[i].id);
519                 }
520             }
521             this.parents = Type.uniqueArray(this.parents);
522         },
523 
524         /**
525          * Sets ids of elements to the array this.parents.
526          * First, this.parents is cleared. See {@link JXG.GeometryElement#addParents}.
527          * @param {Array} parents Array of elements or ids of elements.
528          * Alternatively, one can give a list of objects as parameters.
529          * @returns {JXG.Object} reference to the object itself.
530          **/
531         setParents: function (parents) {
532             this.parents = [];
533             this.addParents(parents);
534         },
535 
536         /**
537          * Add dependence on elements in JessieCode functions.
538          * @param {Array} function_array Array of functions containing potential properties "deps" with
539          * elements the function depends on.
540          * @returns {JXG.Object} reference to the object itself
541          * @private
542          */
543         addParentsFromJCFunctions: function(function_array) {
544             var i, e, obj;
545             for (i = 0; i < function_array.length; i++) {
546                 for (e in function_array[i].deps) {
547                     obj = function_array[i].deps[e];
548                     this.addParents(obj);
549                     obj.addChild(this);
550                 }
551             }
552             return this;
553         },
554 
555         /**
556          * Remove an element as a child from the current element.
557          * @param {JXG.GeometryElement} obj The dependent object.
558          * @returns {JXG.Object} reference to the object itself
559          */
560         removeChild: function (obj) {
561             //var el, el2;
562 
563             delete this.childElements[obj.id];
564             this.removeDescendants(obj);
565             delete obj.ancestors[this.id];
566 
567             /*
568              // I do not know if these addDescendants stuff has to be adapted to removeChild. A.W.
569             for (el in this.descendants) {
570                 if (this.descendants.hasOwnProperty(el)) {
571                     delete this.descendants[el].ancestors[this.id];
572 
573                     for (el2 in this.ancestors) {
574                         if (this.ancestors.hasOwnProperty(el2)) {
575                             this.descendants[el].ancestors[this.ancestors[el2].id] = this.ancestors[el2];
576                         }
577                     }
578                 }
579             }
580 
581             for (el in this.ancestors) {
582                 if (this.ancestors.hasOwnProperty(el)) {
583                     for (el2 in this.descendants) {
584                         if (this.descendants.hasOwnProperty(el2)) {
585                             this.ancestors[el].descendants[this.descendants[el2].id] = this.descendants[el2];
586                         }
587                     }
588                 }
589             }
590             */
591             return this;
592         },
593 
594         /**
595          * Removes the given object from the descendants list of this object and all its child objects.
596          * @param {JXG.GeometryElement} obj The element that is to be removed from the descendants list.
597          * @private
598          * @returns {JXG.Object} reference to the object itself
599          */
600         removeDescendants: function (obj) {
601             var el;
602 
603             delete this.descendants[obj.id];
604             for (el in obj.childElements) {
605                 if (obj.childElements.hasOwnProperty(el)) {
606                     this.removeDescendants(obj.childElements[el]);
607                 }
608             }
609             return this;
610         },
611 
612         /**
613          * Counts the direct children of an object without counting labels.
614          * @private
615          * @returns {number} Number of children
616          */
617         countChildren: function () {
618             var prop,
619                 d,
620                 s = 0;
621 
622             d = this.childElements;
623             for (prop in d) {
624                 if (d.hasOwnProperty(prop) && prop.indexOf("Label") < 0) {
625                     s++;
626                 }
627             }
628             return s;
629         },
630 
631         /**
632          * Returns the elements name. Used in JessieCode.
633          * @returns {String}
634          */
635         getName: function () {
636             return this.name;
637         },
638 
639         /**
640          * Add transformations to this element.
641          * @param {JXG.Transformation|Array} transform Either one {@link JXG.Transformation}
642          * or an array of {@link JXG.Transformation}s.
643          * @returns {JXG.GeometryElement} Reference to the element.
644          */
645         addTransform: function (transform) {
646             return this;
647         },
648 
649         /**
650          * Decides whether an element can be dragged. This is used in
651          * {@link JXG.GeometryElement#setPositionDirectly} methods
652          * where all parent elements are checked if they may be dragged, too.
653          * @private
654          * @returns {boolean}
655          */
656         draggable: function () {
657             return (
658                 this.isDraggable &&
659                 !Type.evaluate(this.visProp.fixed) &&
660                 // !this.visProp.frozen &&
661                 this.type !== Const.OBJECT_TYPE_GLIDER
662             );
663         },
664 
665         /**
666          * Translates the object by <tt>(x, y)</tt>. In case the element is defined by points, the defining points are
667          * translated, e.g. a circle constructed by a center point and a point on the circle line.
668          * @param {Number} method The type of coordinates used here.
669          * Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}.
670          * @param {Array} coords array of translation vector.
671          * @returns {JXG.GeometryElement} Reference to the element object.
672          */
673         setPosition: function (method, coords) {
674             var parents = [],
675                 el,
676                 i,
677                 len,
678                 t;
679 
680             if (!Type.exists(this.parents)) {
681                 return this;
682             }
683 
684             len = this.parents.length;
685             for (i = 0; i < len; ++i) {
686                 el = this.board.select(this.parents[i]);
687                 if (Type.isPoint(el)) {
688                     if (!el.draggable()) {
689                         return this;
690                     }
691                     parents.push(el);
692                 }
693             }
694 
695             if (coords.length === 3) {
696                 coords = coords.slice(1);
697             }
698 
699             t = this.board.create("transform", coords, { type: "translate" });
700 
701             // We distinguish two cases:
702             // 1) elements which depend on free elements, i.e. arcs and sectors
703             // 2) other elements
704             //
705             // In the first case we simply transform the parents elements
706             // In the second case we add a transform to the element.
707             //
708             len = parents.length;
709             if (len > 0) {
710                 t.applyOnce(parents);
711             } else {
712                 if (
713                     this.transformations.length > 0 &&
714                     this.transformations[this.transformations.length - 1].isNumericMatrix
715                 ) {
716                     this.transformations[this.transformations.length - 1].melt(t);
717                 } else {
718                     this.addTransform(t);
719                 }
720             }
721 
722             /*
723              * If - against the default configuration - defining gliders are marked as
724              * draggable, then their position has to be updated now.
725              */
726             for (i = 0; i < len; ++i) {
727                 if (parents[i].type === Const.OBJECT_TYPE_GLIDER) {
728                     parents[i].updateGlider();
729                 }
730             }
731 
732             return this;
733         },
734 
735         /**
736          * Moves an element by the difference of two coordinates.
737          * @param {Number} method The type of coordinates used here.
738          * Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}.
739          * @param {Array} coords coordinates in screen/user units
740          * @param {Array} oldcoords previous coordinates in screen/user units
741          * @returns {JXG.GeometryElement} this element
742          */
743         setPositionDirectly: function (method, coords, oldcoords) {
744             var c = new Coords(method, coords, this.board, false),
745                 oldc = new Coords(method, oldcoords, this.board, false),
746                 dc = Statistics.subtract(c.usrCoords, oldc.usrCoords);
747 
748             this.setPosition(Const.COORDS_BY_USER, dc);
749 
750             return this;
751         },
752 
753         /**
754          * Array of strings containing the polynomials defining the element.
755          * Used for determining geometric loci the groebner way.
756          * @returns {Array} An array containing polynomials describing the locus of the current object.
757          * @public
758          */
759         generatePolynomial: function () {
760             return [];
761         },
762 
763         /**
764          * Animates properties for that object like stroke or fill color, opacity and maybe
765          * even more later.
766          * @param {Object} hash Object containing properties with target values for the animation.
767          * @param {number} time Number of milliseconds to complete the animation.
768          * @param {Object} [options] Optional settings for the animation:<ul><li>callback: A function that is called as soon as the animation is finished.</li></ul>
769          * @returns {JXG.GeometryElement} A reference to the object
770          */
771         animate: function (hash, time, options) {
772             options = options || {};
773             var r,
774                 p,
775                 i,
776                 delay = this.board.attr.animationdelay,
777                 steps = Math.ceil(time / delay),
778                 self = this,
779                 animateColor = function (startRGB, endRGB, property) {
780                     var hsv1, hsv2, sh, ss, sv;
781                     hsv1 = Color.rgb2hsv(startRGB);
782                     hsv2 = Color.rgb2hsv(endRGB);
783 
784                     sh = (hsv2[0] - hsv1[0]) / steps;
785                     ss = (hsv2[1] - hsv1[1]) / steps;
786                     sv = (hsv2[2] - hsv1[2]) / steps;
787                     self.animationData[property] = [];
788 
789                     for (i = 0; i < steps; i++) {
790                         self.animationData[property][steps - i - 1] = Color.hsv2rgb(
791                             hsv1[0] + (i + 1) * sh,
792                             hsv1[1] + (i + 1) * ss,
793                             hsv1[2] + (i + 1) * sv
794                         );
795                     }
796                 },
797                 animateFloat = function (start, end, property, round) {
798                     var tmp, s;
799 
800                     start = parseFloat(start);
801                     end = parseFloat(end);
802 
803                     // we can't animate without having valid numbers.
804                     // And parseFloat returns NaN if the given string doesn't contain
805                     // a valid float number.
806                     if (isNaN(start) || isNaN(end)) {
807                         return;
808                     }
809 
810                     s = (end - start) / steps;
811                     self.animationData[property] = [];
812 
813                     for (i = 0; i < steps; i++) {
814                         tmp = start + (i + 1) * s;
815                         self.animationData[property][steps - i - 1] = round
816                             ? Math.floor(tmp)
817                             : tmp;
818                     }
819                 };
820 
821             this.animationData = {};
822 
823             for (r in hash) {
824                 if (hash.hasOwnProperty(r)) {
825                     p = r.toLowerCase();
826 
827                     switch (p) {
828                         case "strokecolor":
829                         case "fillcolor":
830                             animateColor(this.visProp[p], hash[r], p);
831                             break;
832                         case "size":
833                             if (!Type.isPoint(this)) {
834                                 break;
835                             }
836                             animateFloat(this.visProp[p], hash[r], p, true);
837                             break;
838                         case "strokeopacity":
839                         case "strokewidth":
840                         case "fillopacity":
841                             animateFloat(this.visProp[p], hash[r], p, false);
842                             break;
843                     }
844                 }
845             }
846 
847             this.animationCallback = options.callback;
848             this.board.addAnimation(this);
849             return this;
850         },
851 
852         /**
853          * General update method. Should be overwritten by the element itself.
854          * Can be used sometimes to commit changes to the object.
855          * @return {JXG.GeometryElement} Reference to the element
856          */
857         update: function () {
858             if (Type.evaluate(this.visProp.trace)) {
859                 this.cloneToBackground();
860             }
861             return this;
862         },
863 
864         /**
865          * Provide updateRenderer method.
866          * @return {JXG.GeometryElement} Reference to the element
867          * @private
868          */
869         updateRenderer: function () {
870             return this;
871         },
872 
873         /**
874          * Run through the full update chain of an element.
875          * @param  {Boolean} visible Set visibility in case the elements attribute value is 'inherit'. null is allowed.
876          * @return {JXG.GeometryElement} Reference to the element
877          * @private
878          */
879         fullUpdate: function (visible) {
880             return this.prepareUpdate().update().updateVisibility(visible).updateRenderer();
881         },
882 
883         /**
884          * Show the element or hide it. If hidden, it will still exist but not be
885          * visible on the board.
886          * @param  {Boolean} val true: show the element, false: hide the element
887          * @return {JXG.GeometryElement} Reference to the element
888          * @private
889          */
890         setDisplayRendNode: function (val) {
891             var i, len, s, len_s, obj;
892 
893             if (val === undefined) {
894                 val = this.visPropCalc.visible;
895             }
896 
897             if (val === this.visPropOld.visible) {
898                 return this;
899             }
900 
901             // Set display of the element itself
902             this.board.renderer.display(this, val);
903 
904             // Set the visibility of elements which inherit the attribute 'visible'
905             len = this.inherits.length;
906             for (s = 0; s < len; s++) {
907                 obj = this.inherits[s];
908                 if (Type.isArray(obj)) {
909                     len_s = obj.length;
910                     for (i = 0; i < len_s; i++) {
911                         if (
912                             Type.exists(obj[i]) &&
913                             Type.exists(obj[i].rendNode) &&
914                             Type.evaluate(obj[i].visProp.visible) === "inherit"
915                         ) {
916                             obj[i].setDisplayRendNode(val);
917                         }
918                     }
919                 } else {
920                     if (
921                         Type.exists(obj) &&
922                         Type.exists(obj.rendNode) &&
923                         Type.evaluate(obj.visProp.visible) === "inherit"
924                     ) {
925                         obj.setDisplayRendNode(val);
926                     }
927                 }
928             }
929 
930             // Set the visibility of the label if it inherits the attribute 'visible'
931             if (this.hasLabel && Type.exists(this.label) && Type.exists(this.label.rendNode)) {
932                 if (Type.evaluate(this.label.visProp.visible) === "inherit") {
933                     this.label.setDisplayRendNode(val);
934                 }
935             }
936 
937             return this;
938         },
939 
940         /**
941          * Hide the element. It will still exist but not be visible on the board.
942          * Alias for "element.setAttribute({visible: false});"
943          * @return {JXG.GeometryElement} Reference to the element
944          */
945         hide: function () {
946             this.setAttribute({ visible: false });
947             return this;
948         },
949 
950         /**
951          * Hide the element. It will still exist but not be visible on the board.
952          * Alias for {@link JXG.GeometryElement#hide}
953          * @returns {JXG.GeometryElement} Reference to the element
954          */
955         hideElement: function () {
956             this.hide();
957             return this;
958         },
959 
960         /**
961          * Make the element visible.
962          * Alias for "element.setAttribute({visible: true});"
963          * @return {JXG.GeometryElement} Reference to the element
964          */
965         show: function () {
966             this.setAttribute({ visible: true });
967             return this;
968         },
969 
970         /**
971          * Make the element visible.
972          * Alias for {@link JXG.GeometryElement#show}
973          * @returns {JXG.GeometryElement} Reference to the element
974          */
975         showElement: function () {
976             this.show();
977             return this;
978         },
979 
980         /**
981          * Set the visibility of an element. The visibility is influenced by
982          * (listed in ascending priority):
983          * <ol>
984          * <li> The value of the element's attribute 'visible'
985          * <li> The visibility of a parent element. (Example: label)
986          * This overrules the value of the element's attribute value only if
987          * this attribute value of the element is 'inherit'.
988          * <li> being inside of the canvas
989          * </ol>
990          * <p>
991          * This method is called three times for most elements:
992          * <ol>
993          * <li> between {@link JXG.GeometryElement#update}
994          * and {@link JXG.GeometryElement#updateRenderer}. In case the value is 'inherit', nothing is done.
995          * <li> Recursively, called by itself for child elements. Here, 'inherit' is overruled by the parent's value.
996          * <li> In {@link JXG.GeometryElement#updateRenderer}, if the element is outside of the canvas.
997          * </ol>
998          *
999          * @param  {Boolean} parent_val Visibility of the parent element.
1000          * @return {JXG.GeometryElement} Reference to the element.
1001          * @private
1002          */
1003         updateVisibility: function (parent_val) {
1004             var i, len, s, len_s, obj, val;
1005 
1006             if (this.needsUpdate) {
1007                 // Handle the element
1008                 if (parent_val !== undefined) {
1009                     this.visPropCalc.visible = parent_val;
1010                 } else {
1011                     val = Type.evaluate(this.visProp.visible);
1012 
1013                     // infobox uses hiddenByParent
1014                     if (Type.exists(this.hiddenByParent) && this.hiddenByParent) {
1015                         val = false;
1016                     }
1017                     if (val !== "inherit") {
1018                         this.visPropCalc.visible = val;
1019                     }
1020                 }
1021 
1022                 // Handle elements which inherit the visibility
1023                 len = this.inherits.length;
1024                 for (s = 0; s < len; s++) {
1025                     obj = this.inherits[s];
1026                     if (Type.isArray(obj)) {
1027                         len_s = obj.length;
1028                         for (i = 0; i < len_s; i++) {
1029                             if (
1030                                 Type.exists(obj[i]) /*&& Type.exists(obj[i].rendNode)*/ &&
1031                                 Type.evaluate(obj[i].visProp.visible) === "inherit"
1032                             ) {
1033                                 obj[i]
1034                                     .prepareUpdate()
1035                                     .updateVisibility(this.visPropCalc.visible);
1036                             }
1037                         }
1038                     } else {
1039                         if (
1040                             Type.exists(obj) /*&& Type.exists(obj.rendNode)*/ &&
1041                             Type.evaluate(obj.visProp.visible) === "inherit"
1042                         ) {
1043                             obj.prepareUpdate().updateVisibility(this.visPropCalc.visible);
1044                         }
1045                     }
1046                 }
1047 
1048                 // Handle the label if it inherits the visibility
1049                 if (
1050                     Type.exists(this.label) &&
1051                     Type.exists(this.label.visProp) &&
1052                     Type.evaluate(this.label.visProp.visible)
1053                 ) {
1054                     this.label.prepareUpdate().updateVisibility(this.visPropCalc.visible);
1055                 }
1056             }
1057             return this;
1058         },
1059 
1060         /**
1061          * Sets the value of property <tt>property</tt> to <tt>value</tt>.
1062          * @param {String} property The property's name.
1063          * @param value The new value
1064          * @private
1065          */
1066         _set: function (property, value) {
1067             var el;
1068 
1069             property = property.toLocaleLowerCase();
1070 
1071             // Search for entries in visProp with "color" as part of the property name
1072             // and containing a RGBA string
1073             if (
1074                 this.visProp.hasOwnProperty(property) &&
1075                 property.indexOf("color") >= 0 &&
1076                 Type.isString(value) &&
1077                 value.length === 9 &&
1078                 value.charAt(0) === "#"
1079             ) {
1080                 value = Color.rgba2rgbo(value);
1081                 this.visProp[property] = value[0];
1082                 // Previously: *=. But then, we can only decrease opacity.
1083                 this.visProp[property.replace("color", "opacity")] = value[1];
1084             } else {
1085                 if (
1086                     value !== null &&
1087                     Type.isObject(value) &&
1088                     !Type.exists(value.id) &&
1089                     !Type.exists(value.name)
1090                 ) {
1091                     // value is of type {prop: val, prop: val,...}
1092                     // Convert these attributes to lowercase, too
1093                     this.visProp[property] = {};
1094                     for (el in value) {
1095                         if (value.hasOwnProperty(el)) {
1096                             this.visProp[property][el.toLocaleLowerCase()] = value[el];
1097                         }
1098                     }
1099                 } else {
1100                     this.visProp[property] = value;
1101                 }
1102             }
1103         },
1104 
1105         /**
1106          * Resolves attribute shortcuts like <tt>color</tt> and expands them, e.g. <tt>strokeColor</tt> and <tt>fillColor</tt>.
1107          * Writes the expanded attributes back to the given <tt>attributes</tt>.
1108          * @param {Object} attributes object
1109          * @returns {Object} The given attributes object with shortcuts expanded.
1110          * @private
1111          */
1112         resolveShortcuts: function (attributes) {
1113             var key,
1114                 i,
1115                 j,
1116                 subattr = ["traceattributes", "traceAttributes"];
1117 
1118             for (key in Options.shortcuts) {
1119                 if (Options.shortcuts.hasOwnProperty(key)) {
1120                     if (Type.exists(attributes[key])) {
1121                         for (i = 0; i < Options.shortcuts[key].length; i++) {
1122                             if (!Type.exists(attributes[Options.shortcuts[key][i]])) {
1123                                 attributes[Options.shortcuts[key][i]] = attributes[key];
1124                             }
1125                         }
1126                     }
1127                     for (j = 0; j < subattr.length; j++) {
1128                         if (Type.isObject(attributes[subattr[j]])) {
1129                             attributes[subattr[j]] = this.resolveShortcuts(
1130                                 attributes[subattr[j]]
1131                             );
1132                         }
1133                     }
1134                 }
1135             }
1136             return attributes;
1137         },
1138 
1139         /**
1140          * Sets a label and its text
1141          * If label doesn't exist, it creates one
1142          * @param {String} str
1143          */
1144         setLabel: function (str) {
1145             if (!this.hasLabel) {
1146                 this.setAttribute({ withlabel: true });
1147             }
1148             this.setLabelText(str);
1149         },
1150 
1151         /**
1152          * Updates the element's label text, strips all html.
1153          * @param {String} str
1154          */
1155         setLabelText: function (str) {
1156             if (Type.exists(this.label)) {
1157                 str = str.replace(/</g, "<").replace(/>/g, ">");
1158                 this.label.setText(str);
1159             }
1160 
1161             return this;
1162         },
1163 
1164         /**
1165          * Updates the element's label text and the element's attribute "name", strips all html.
1166          * @param {String} str
1167          */
1168         setName: function (str) {
1169             str = str.replace(/</g, "<").replace(/>/g, ">");
1170             if (this.elType !== "slider") {
1171                 this.setLabelText(str);
1172             }
1173             this.setAttribute({ name: str });
1174         },
1175 
1176         /**
1177          * Deprecated alias for {@link JXG.GeometryElement#setAttribute}.
1178          * @deprecated Use {@link JXG.GeometryElement#setAttribute}.
1179          */
1180         setProperty: function () {
1181             JXG.deprecated("setProperty()", "setAttribute()");
1182             this.setAttribute.apply(this, arguments);
1183         },
1184 
1185         /**
1186          * Sets an arbitrary number of attributes. This method has one or more
1187          * parameters of the following types:
1188          * <ul>
1189          * <li> object: {key1:value1,key2:value2,...}
1190          * <li> string: "key1:value"
1191          * <li> array: [key, value]
1192          * </ul>
1193          * @param {Object} attributes An object with attributes.
1194          * @returns {JXG.GeometryElement} A reference to the element.
1195          *
1196          * @function
1197          * @example
1198          * // Set property directly on creation of an element using the attributes object parameter
1199          * var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
1200          * var p = board.create('point', [2, 2], {visible: false});
1201          *
1202          * // Now make this point visible and fixed:
1203          * p.setAttribute({
1204          *     fixed: true,
1205          *     visible: true
1206          * });
1207          */
1208         setAttribute: function (attributes) {
1209             var i,
1210                 j,
1211                 le,
1212                 key,
1213                 value,
1214                 arg,
1215                 opacity,
1216                 pair,
1217                 oldvalue,
1218                 properties = {};
1219 
1220             // Normalize the user input
1221             for (i = 0; i < arguments.length; i++) {
1222                 arg = arguments[i];
1223                 if (Type.isString(arg)) {
1224                     // pairRaw is string of the form 'key:value'
1225                     pair = arg.split(":");
1226                     properties[Type.trim(pair[0])] = Type.trim(pair[1]);
1227                 } else if (!Type.isArray(arg)) {
1228                     // pairRaw consists of objects of the form {key1:value1,key2:value2,...}
1229                     JXG.extend(properties, arg);
1230                 } else {
1231                     // pairRaw consists of array [key,value]
1232                     properties[arg[0]] = arg[1];
1233                 }
1234             }
1235 
1236             // Handle shortcuts
1237             properties = this.resolveShortcuts(properties);
1238 
1239             for (i in properties) {
1240                 if (properties.hasOwnProperty(i)) {
1241                     key = i.replace(/\s+/g, "").toLowerCase();
1242                     value = properties[i];
1243 
1244                     // This handles the subobjects, if the key:value pairs are contained in an object.
1245                     // Example:
1246                     // ticks.setAttribute({
1247                     //      strokeColor: 'blue',
1248                     //      label: {
1249                     //          visible: false
1250                     //      }
1251                     // })
1252                     // Now, only the supplied label attributes are overwritten.
1253                     // Otherwise, the value of label would be {visible:false} only.
1254                     if (Type.isObject(value) && Type.exists(this.visProp[key])) {
1255                         this.visProp[key] = Type.merge(this.visProp[key], value);
1256 
1257                         // First, handle the special case
1258                         // ticks.setAttribute({label: {anchorX: "right", ..., visible: true});
1259                         if (this.type === Const.OBJECT_TYPE_TICKS && Type.exists(this.labels)) {
1260                             le = this.labels.length;
1261                             for (j = 0; j < le; j++) {
1262                                 this.labels[j].setAttribute(value);
1263                             }
1264                         } else if (Type.exists(this[key])) {
1265                             if (Type.isArray(this[key])) {
1266                                 for (j = 0; j < this[key].length; j++) {
1267                                     this[key][j].setAttribute(value);
1268                                 }
1269                             } else {
1270                                 this[key].setAttribute(value);
1271                             }
1272                         }
1273                         continue;
1274                     }
1275 
1276                     oldvalue = this.visProp[key];
1277                     switch (key) {
1278                         case "name":
1279                             oldvalue = this.name;
1280                             delete this.board.elementsByName[this.name];
1281                             this.name = value;
1282                             this.board.elementsByName[this.name] = this;
1283                             break;
1284                         case "needsregularupdate":
1285                             this.needsRegularUpdate = !(value === "false" || value === false);
1286                             this.board.renderer.setBuffering(
1287                                 this,
1288                                 this.needsRegularUpdate ? "auto" : "static"
1289                             );
1290                             break;
1291                         case "labelcolor":
1292                             value = Color.rgba2rgbo(value);
1293                             opacity = value[1];
1294                             value = value[0];
1295                             if (opacity === 0) {
1296                                 if (Type.exists(this.label) && this.hasLabel) {
1297                                     this.label.hideElement();
1298                                 }
1299                             }
1300                             if (Type.exists(this.label) && this.hasLabel) {
1301                                 this.label.visProp.strokecolor = value;
1302                                 this.board.renderer.setObjectStrokeColor(
1303                                     this.label,
1304                                     value,
1305                                     opacity
1306                                 );
1307                             }
1308                             if (this.elementClass === Const.OBJECT_CLASS_TEXT) {
1309                                 this.visProp.strokecolor = value;
1310                                 this.visProp.strokeopacity = opacity;
1311                                 this.board.renderer.setObjectStrokeColor(this, value, opacity);
1312                             }
1313                             break;
1314                         case "infoboxtext":
1315                             if (Type.isString(value)) {
1316                                 this.infoboxText = value;
1317                             } else {
1318                                 this.infoboxText = false;
1319                             }
1320                             break;
1321                         case "visible":
1322                             if (value === "false") {
1323                                 this.visProp.visible = false;
1324                             } else if (value === "true") {
1325                                 this.visProp.visible = true;
1326                             } else {
1327                                 this.visProp.visible = value;
1328                             }
1329 
1330                             this.setDisplayRendNode(Type.evaluate(this.visProp.visible));
1331                             if (
1332                                 Type.evaluate(this.visProp.visible) &&
1333                                 Type.exists(this.updateSize)
1334                             ) {
1335                                 this.updateSize();
1336                             }
1337 
1338                             break;
1339                         case "face":
1340                             if (Type.isPoint(this)) {
1341                                 this.visProp.face = value;
1342                                 this.board.renderer.changePointStyle(this);
1343                             }
1344                             break;
1345                         case "trace":
1346                             if (value === "false" || value === false) {
1347                                 this.clearTrace();
1348                                 this.visProp.trace = false;
1349                             } else if (value === "pause") {
1350                                 this.visProp.trace = false;
1351                             } else {
1352                                 this.visProp.trace = true;
1353                             }
1354                             break;
1355                         case "gradient":
1356                             this.visProp.gradient = value;
1357                             this.board.renderer.setGradient(this);
1358                             break;
1359                         case "gradientsecondcolor":
1360                             value = Color.rgba2rgbo(value);
1361                             this.visProp.gradientsecondcolor = value[0];
1362                             this.visProp.gradientsecondopacity = value[1];
1363                             this.board.renderer.updateGradient(this);
1364                             break;
1365                         case "gradientsecondopacity":
1366                             this.visProp.gradientsecondopacity = value;
1367                             this.board.renderer.updateGradient(this);
1368                             break;
1369                         case "withlabel":
1370                             this.visProp.withlabel = value;
1371                             if (!Type.evaluate(value)) {
1372                                 if (this.label && this.hasLabel) {
1373                                     //this.label.hideElement();
1374                                     this.label.setAttribute({ visible: false });
1375                                 }
1376                             } else {
1377                                 if (!this.label) {
1378                                     this.createLabel();
1379                                 }
1380                                 //this.label.showElement();
1381                                 this.label.setAttribute({ visible: "inherit" });
1382                                 //this.label.setDisplayRendNode(Type.evaluate(this.visProp.visible));
1383                             }
1384                             this.hasLabel = value;
1385                             break;
1386                         case "radius":
1387                             if (
1388                                 this.type === Const.OBJECT_TYPE_ANGLE ||
1389                                 this.type === Const.OBJECT_TYPE_SECTOR
1390                             ) {
1391                                 this.setRadius(value);
1392                             }
1393                             break;
1394                         case "rotate":
1395                             if (
1396                                 (this.elementClass === Const.OBJECT_CLASS_TEXT &&
1397                                     Type.evaluate(this.visProp.display) === "internal") ||
1398                                 this.type === Const.OBJECT_TYPE_IMAGE
1399                             ) {
1400                                 this.addRotation(value);
1401                             }
1402                             break;
1403                         case "ticksdistance":
1404                             if (this.type === Const.OBJECT_TYPE_TICKS && Type.isNumber(value)) {
1405                                 this.ticksFunction = this.makeTicksFunction(value);
1406                             }
1407                             break;
1408                         case "generatelabelvalue":
1409                             if (
1410                                 this.type === Const.OBJECT_TYPE_TICKS &&
1411                                 Type.isFunction(value)
1412                             ) {
1413                                 this.generateLabelValue = value;
1414                             }
1415                             break;
1416                         case "onpolygon":
1417                             if (this.type === Const.OBJECT_TYPE_GLIDER) {
1418                                 this.onPolygon = !!value;
1419                             }
1420                             break;
1421                         case "disabled":
1422                             // button, checkbox, input. Is not available on initial call.
1423                             if (Type.exists(this.rendNodeTag)) {
1424                                 this.rendNodeTag.disabled = !!value;
1425                             }
1426                             break;
1427                         case "checked":
1428                             // checkbox Is not available on initial call.
1429                             if (Type.exists(this.rendNodeTag)) {
1430                                 this.rendNodeCheckbox.checked = !!value;
1431                             }
1432                             break;
1433                         case "maxlength":
1434                             // input. Is not available on initial call.
1435                             if (Type.exists(this.rendNodeTag)) {
1436                                 this.rendNodeTag.maxlength = !!value;
1437                             }
1438                             break;
1439                         case "layer":
1440                             this.board.renderer.setLayer(this, Type.evaluate(value));
1441                             this._set(key, value);
1442                             break;
1443                         case "tabindex":
1444                             if (Type.exists(this.rendNode)) {
1445                                 this.rendNode.setAttribute("tabindex", value);
1446                                 this._set(key, value);
1447                             }
1448                             break;
1449                         default:
1450                             if (
1451                                 Type.exists(this.visProp[key]) &&
1452                                 (!JXG.Validator[key] ||
1453                                     (JXG.Validator[key] && JXG.Validator[key](value)) ||
1454                                     (JXG.Validator[key] &&
1455                                         Type.isFunction(value) &&
1456                                         JXG.Validator[key](value())))
1457                             ) {
1458                                 value =
1459                                     value.toLowerCase && value.toLowerCase() === "false"
1460                                         ? false
1461                                         : value;
1462                                 this._set(key, value);
1463                             }
1464                             break;
1465                     }
1466                     this.triggerEventHandlers(["attribute:" + key], [oldvalue, value, this]);
1467                 }
1468             }
1469 
1470             this.triggerEventHandlers(["attribute"], [properties, this]);
1471 
1472             if (!Type.evaluate(this.visProp.needsregularupdate)) {
1473                 this.board.fullUpdate();
1474             } else {
1475                 this.board.update(this);
1476             }
1477 
1478             return this;
1479         },
1480 
1481         /**
1482          * Deprecated alias for {@link JXG.GeometryElement#getAttribute}.
1483          * @deprecated Use {@link JXG.GeometryElement#getAttribute}.
1484          */
1485         getProperty: function () {
1486             JXG.deprecated("getProperty()", "getAttribute()");
1487             this.getProperty.apply(this, arguments);
1488         },
1489 
1490         /**
1491          * Get the value of the property <tt>key</tt>.
1492          * @param {String} key The name of the property you are looking for
1493          * @returns The value of the property
1494          */
1495         getAttribute: function (key) {
1496             var result;
1497             key = key.toLowerCase();
1498 
1499             switch (key) {
1500                 case "needsregularupdate":
1501                     result = this.needsRegularUpdate;
1502                     break;
1503                 case "labelcolor":
1504                     result = this.label.visProp.strokecolor;
1505                     break;
1506                 case "infoboxtext":
1507                     result = this.infoboxText;
1508                     break;
1509                 case "withlabel":
1510                     result = this.hasLabel;
1511                     break;
1512                 default:
1513                     result = this.visProp[key];
1514                     break;
1515             }
1516 
1517             return result;
1518         },
1519 
1520         /**
1521          * Set the dash style of an object. See {@link JXG.GeometryElement#dash}
1522          * for a list of available dash styles.
1523          * You should use {@link JXG.GeometryElement#setAttribute} instead of this method.
1524          *
1525          * @param {number} dash Indicates the new dash style
1526          * @private
1527          */
1528         setDash: function (dash) {
1529             this.setAttribute({ dash: dash });
1530             return this;
1531         },
1532 
1533         /**
1534          * Notify all child elements for updates.
1535          * @private
1536          */
1537         prepareUpdate: function () {
1538             this.needsUpdate = true;
1539             return this;
1540         },
1541 
1542         /**
1543          * Removes the element from the construction.  This only removes the SVG or VML node of the element and its label (if available) from
1544          * the renderer, to remove the element completely you should use {@link JXG.Board#removeObject}.
1545          */
1546         remove: function () {
1547             this.board.renderer.remove(this.board.renderer.getElementById(this.id));
1548 
1549             if (this.hasLabel) {
1550                 this.board.renderer.remove(this.board.renderer.getElementById(this.label.id));
1551             }
1552             return this;
1553         },
1554 
1555         /**
1556          * Returns the coords object where a text that is bound to the element shall be drawn.
1557          * Differs in some cases from the values that getLabelAnchor returns.
1558          * @returns {JXG.Coords} JXG.Coords Place where the text shall be drawn.
1559          * @see JXG.GeometryElement#getLabelAnchor
1560          */
1561         getTextAnchor: function () {
1562             return new Coords(Const.COORDS_BY_USER, [0, 0], this.board);
1563         },
1564 
1565         /**
1566          * Returns the coords object where the label of the element shall be drawn.
1567          * Differs in some cases from the values that getTextAnchor returns.
1568          * @returns {JXG.Coords} JXG.Coords Place where the text shall be drawn.
1569          * @see JXG.GeometryElement#getTextAnchor
1570          */
1571         getLabelAnchor: function () {
1572             return new Coords(Const.COORDS_BY_USER, [0, 0], this.board);
1573         },
1574 
1575         /**
1576          * Determines whether the element has arrows at start or end of the arc.
1577          * If it is set to be a "typical" vector, ie lastArrow == true,
1578          * then the element.type is set to VECTOR.
1579          * @param {Boolean} firstArrow True if there is an arrow at the start of the arc, false otherwise.
1580          * @param {Boolean} lastArrow True if there is an arrow at the end of the arc, false otherwise.
1581          */
1582         setArrow: function (firstArrow, lastArrow) {
1583             this.visProp.firstarrow = firstArrow;
1584             this.visProp.lastarrow = lastArrow;
1585             if (lastArrow) {
1586                 this.type = Const.OBJECT_TYPE_VECTOR;
1587                 this.elType = "arrow";
1588             }
1589 
1590             this.prepareUpdate().update().updateVisibility().updateRenderer();
1591             return this;
1592         },
1593 
1594         /**
1595          * Creates a gradient nodes in the renderer.
1596          * @see JXG.SVGRenderer#setGradient
1597          * @private
1598          */
1599         createGradient: function () {
1600             var ev_g = Type.evaluate(this.visProp.gradient);
1601             if (ev_g === "linear" || ev_g === "radial") {
1602                 this.board.renderer.setGradient(this);
1603             }
1604         },
1605 
1606         /**
1607          * Creates a label element for this geometry element.
1608          * @see #addLabelToElement
1609          */
1610         createLabel: function () {
1611             var attr,
1612                 that = this;
1613 
1614             // this is a dirty hack to resolve the text-dependency. If there is no text element available,
1615             // just don't create a label. This method is usually not called by a user, so we won't throw
1616             // an exception here and simply output a warning via JXG.debug.
1617             if (JXG.elements.text) {
1618                 attr = Type.deepCopy(this.visProp.label, null);
1619                 attr.id = this.id + "Label";
1620                 attr.isLabel = true;
1621                 attr.anchor = this;
1622                 attr.priv = this.visProp.priv;
1623 
1624                 if (this.visProp.withlabel) {
1625                     this.label = JXG.elements.text(
1626                         this.board,
1627                         [
1628                             0,
1629                             0,
1630                             function () {
1631                                 if (Type.isFunction(that.name)) {
1632                                     return that.name();
1633                                 }
1634                                 return that.name;
1635                             }
1636                         ],
1637                         attr
1638                     );
1639                     this.label.needsUpdate = true;
1640                     this.label.dump = false;
1641                     this.label.fullUpdate();
1642 
1643                     this.hasLabel = true;
1644                 }
1645             } else {
1646                 JXG.debug(
1647                     "JSXGraph: Can't create label: text element is not available. Make sure you include base/text"
1648                 );
1649             }
1650 
1651             return this;
1652         },
1653 
1654         /**
1655          * Highlights the element.
1656          * @param {Boolean} [force=false] Force the highlighting
1657          * @returns {JXG.Board}
1658          */
1659         highlight: function (force) {
1660             force = Type.def(force, false);
1661             // I know, we have the JXG.Board.highlightedObjects AND JXG.GeometryElement.highlighted and YES we need both.
1662             // Board.highlightedObjects is for the internal highlighting and GeometryElement.highlighted is for user highlighting
1663             // initiated by the user, e.g. through custom DOM events. We can't just pick one because this would break user
1664             // defined highlighting in many ways:
1665             //  * if overriding the highlight() methods the user had to handle the highlightedObjects stuff, otherwise he'd break
1666             //    everything (e.g. the pie chart example https://jsxgraph.org/wiki/index.php/Pie_chart (not exactly
1667             //    user defined but for this type of chart the highlight method was overridden and not adjusted to the changes in here)
1668             //    where it just kept highlighting until the radius of the pie was far beyond infinity...
1669             //  * user defined highlighting would get pointless, everytime the user highlights something using .highlight(), it would get
1670             //    dehighlighted immediately, because highlight puts the element into highlightedObjects and from there it gets dehighlighted
1671             //    through dehighlightAll.
1672 
1673             // highlight only if not highlighted
1674             if (Type.evaluate(this.visProp.highlight) && (!this.highlighted || force)) {
1675                 this.highlighted = true;
1676                 this.board.highlightedObjects[this.id] = this;
1677                 this.board.renderer.highlight(this);
1678             }
1679             return this;
1680         },
1681 
1682         /**
1683          * Uses the "normal" properties of the element.
1684          * @returns {JXG.Board}
1685          */
1686         noHighlight: function () {
1687             // see comment in JXG.GeometryElement.highlight()
1688 
1689             // dehighlight only if not highlighted
1690             if (this.highlighted) {
1691                 this.highlighted = false;
1692                 delete this.board.highlightedObjects[this.id];
1693                 this.board.renderer.noHighlight(this);
1694             }
1695             return this;
1696         },
1697 
1698         /**
1699          * Removes all objects generated by the trace function.
1700          */
1701         clearTrace: function () {
1702             var obj;
1703 
1704             for (obj in this.traces) {
1705                 if (this.traces.hasOwnProperty(obj)) {
1706                     this.board.renderer.remove(this.traces[obj]);
1707                 }
1708             }
1709 
1710             this.numTraces = 0;
1711             return this;
1712         },
1713 
1714         /**
1715          * Copy the element to background. This is used for tracing elements.
1716          * @returns {JXG.GeometryElement} A reference to the element
1717          */
1718         cloneToBackground: function () {
1719             return this;
1720         },
1721 
1722         /**
1723          * Dimensions of the smallest rectangle enclosing the element.
1724          * @returns {Array} The coordinates of the enclosing rectangle in a format
1725          * like the bounding box in {@link JXG.Board#setBoundingBox}.
1726          *
1727          * @returns {Array} similar to {@link JXG.Board#setBoundingBox}.
1728          */
1729         bounds: function () {
1730             return [0, 0, 0, 0];
1731         },
1732 
1733         /**
1734          * Normalize the element's standard form.
1735          * @private
1736          */
1737         normalize: function () {
1738             this.stdform = Mat.normalize(this.stdform);
1739             return this;
1740         },
1741 
1742         /**
1743          * EXPERIMENTAL. Generate JSON object code of visProp and other properties.
1744          * @type String
1745          * @private
1746          * @ignore
1747          * @returns JSON string containing element's properties.
1748          */
1749         toJSON: function () {
1750             var vis,
1751                 key,
1752                 json = ['{"name":', this.name];
1753 
1754             json.push(", " + '"id":' + this.id);
1755 
1756             vis = [];
1757             for (key in this.visProp) {
1758                 if (this.visProp.hasOwnProperty(key)) {
1759                     if (Type.exists(this.visProp[key])) {
1760                         vis.push('"' + key + '":' + this.visProp[key]);
1761                     }
1762                 }
1763             }
1764             json.push(', "visProp":{' + vis.toString() + "}");
1765             json.push("}");
1766 
1767             return json.join("");
1768         },
1769 
1770         /**
1771          * Rotate texts or images by a given degree. Works only for texts where JXG.Text#display equal to "internal".
1772          * @param {number} angle The degree of the rotation (90 means vertical text).
1773          * @see JXG.GeometryElement#rotate
1774          */
1775         addRotation: function (angle) {
1776             var tOffInv,
1777                 tOff,
1778                 tS,
1779                 tSInv,
1780                 tRot,
1781                 that = this;
1782 
1783             if (
1784                 ((this.elementClass === Const.OBJECT_CLASS_TEXT &&
1785                     Type.evaluate(this.visProp.display) === "internal") ||
1786                     this.type === Const.OBJECT_TYPE_IMAGE) &&
1787                 angle !== 0
1788             ) {
1789                 tOffInv = this.board.create(
1790                     "transform",
1791                     [
1792                         function () {
1793                             return -that.X();
1794                         },
1795                         function () {
1796                             return -that.Y();
1797                         }
1798                     ],
1799                     { type: "translate" }
1800                 );
1801 
1802                 tOff = this.board.create(
1803                     "transform",
1804                     [
1805                         function () {
1806                             return that.X();
1807                         },
1808                         function () {
1809                             return that.Y();
1810                         }
1811                     ],
1812                     { type: "translate" }
1813                 );
1814 
1815                 tS = this.board.create(
1816                     "transform",
1817                     [
1818                         function () {
1819                             return that.board.unitX / that.board.unitY;
1820                         },
1821                         function () {
1822                             return 1;
1823                         }
1824                     ],
1825                     { type: "scale" }
1826                 );
1827 
1828                 tSInv = this.board.create(
1829                     "transform",
1830                     [
1831                         function () {
1832                             return that.board.unitY / that.board.unitX;
1833                         },
1834                         function () {
1835                             return 1;
1836                         }
1837                     ],
1838                     { type: "scale" }
1839                 );
1840 
1841                 tRot = this.board.create(
1842                     "transform",
1843                     [
1844                         function () {
1845                             return (Type.evaluate(angle) * Math.PI) / 180;
1846                         }
1847                     ],
1848                     { type: "rotate" }
1849                 );
1850 
1851                 tOffInv.bindTo(this);
1852                 tS.bindTo(this);
1853                 tRot.bindTo(this);
1854                 tSInv.bindTo(this);
1855                 tOff.bindTo(this);
1856             }
1857 
1858             return this;
1859         },
1860 
1861         /**
1862          * Set the highlightStrokeColor of an element
1863          * @param {String} sColor String which determines the stroke color of an object when its highlighted.
1864          * @see JXG.GeometryElement#highlightStrokeColor
1865          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1866          */
1867         highlightStrokeColor: function (sColor) {
1868             JXG.deprecated("highlightStrokeColor()", "setAttribute()");
1869             this.setAttribute({ highlightStrokeColor: sColor });
1870             return this;
1871         },
1872 
1873         /**
1874          * Set the strokeColor of an element
1875          * @param {String} sColor String which determines the stroke color of an object.
1876          * @see JXG.GeometryElement#strokeColor
1877          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1878          */
1879         strokeColor: function (sColor) {
1880             JXG.deprecated("strokeColor()", "setAttribute()");
1881             this.setAttribute({ strokeColor: sColor });
1882             return this;
1883         },
1884 
1885         /**
1886          * Set the strokeWidth of an element
1887          * @param {Number} width Integer which determines the stroke width of an outline.
1888          * @see JXG.GeometryElement#strokeWidth
1889          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1890          */
1891         strokeWidth: function (width) {
1892             JXG.deprecated("strokeWidth()", "setAttribute()");
1893             this.setAttribute({ strokeWidth: width });
1894             return this;
1895         },
1896 
1897         /**
1898          * Set the fillColor of an element
1899          * @param {String} fColor String which determines the fill color of an object.
1900          * @see JXG.GeometryElement#fillColor
1901          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1902          */
1903         fillColor: function (fColor) {
1904             JXG.deprecated("fillColor()", "setAttribute()");
1905             this.setAttribute({ fillColor: fColor });
1906             return this;
1907         },
1908 
1909         /**
1910          * Set the highlightFillColor of an element
1911          * @param {String} fColor String which determines the fill color of an object when its highlighted.
1912          * @see JXG.GeometryElement#highlightFillColor
1913          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1914          */
1915         highlightFillColor: function (fColor) {
1916             JXG.deprecated("highlightFillColor()", "setAttribute()");
1917             this.setAttribute({ highlightFillColor: fColor });
1918             return this;
1919         },
1920 
1921         /**
1922          * Set the labelColor of an element
1923          * @param {String} lColor String which determines the text color of an object's label.
1924          * @see JXG.GeometryElement#labelColor
1925          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1926          */
1927         labelColor: function (lColor) {
1928             JXG.deprecated("labelColor()", "setAttribute()");
1929             this.setAttribute({ labelColor: lColor });
1930             return this;
1931         },
1932 
1933         /**
1934          * Set the dash type of an element
1935          * @param {Number} d Integer which determines the way of dashing an element's outline.
1936          * @see JXG.GeometryElement#dash
1937          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1938          */
1939         dash: function (d) {
1940             JXG.deprecated("dash()", "setAttribute()");
1941             this.setAttribute({ dash: d });
1942             return this;
1943         },
1944 
1945         /**
1946          * Set the visibility of an element
1947          * @param {Boolean} v Boolean which determines whether the element is drawn.
1948          * @see JXG.GeometryElement#visible
1949          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1950          */
1951         visible: function (v) {
1952             JXG.deprecated("visible()", "setAttribute()");
1953             this.setAttribute({ visible: v });
1954             return this;
1955         },
1956 
1957         /**
1958          * Set the shadow of an element
1959          * @param {Boolean} s Boolean which determines whether the element has a shadow or not.
1960          * @see JXG.GeometryElement#shadow
1961          * @deprecated Use {@link JXG.GeometryElement#setAttribute}
1962          */
1963         shadow: function (s) {
1964             JXG.deprecated("shadow()", "setAttribute()");
1965             this.setAttribute({ shadow: s });
1966             return this;
1967         },
1968 
1969         /**
1970          * The type of the element as used in {@link JXG.Board#create}.
1971          * @returns {String}
1972          */
1973         getType: function () {
1974             return this.elType;
1975         },
1976 
1977         /**
1978          * List of the element ids resp. values used as parents in {@link JXG.Board#create}.
1979          * @returns {Array}
1980          */
1981         getParents: function () {
1982             return Type.isArray(this.parents) ? this.parents : [];
1983         },
1984 
1985         /**
1986          * Snaps the element to the grid. Only works for points, lines and circles. Points will snap to the grid
1987          * as defined in their properties {@link JXG.Point#snapSizeX} and {@link JXG.Point#snapSizeY}. Lines and circles
1988          * will snap their parent points to the grid, if they have {@link JXG.Point#snapToGrid} set to true.
1989          * @returns {JXG.GeometryElement} Reference to the element.
1990          */
1991         snapToGrid: function () {
1992             return this;
1993         },
1994 
1995         /**
1996          * Snaps the element to points. Only works for points. Points will snap to the next point
1997          * as defined in their properties {@link JXG.Point#attractorDistance} and {@link JXG.Point#attractorUnit}.
1998          * Lines and circles
1999          * will snap their parent points to points.
2000          * @returns {JXG.GeometryElement} Reference to the element.
2001          */
2002         snapToPoints: function () {
2003             return this;
2004         },
2005 
2006         /**
2007          * Retrieve a copy of the current visProp.
2008          * @returns {Object}
2009          */
2010         getAttributes: function () {
2011             var attributes = Type.deepCopy(this.visProp),
2012                 /*
2013                 cleanThis = ['attractors', 'snatchdistance', 'traceattributes', 'frozen',
2014                     'shadow', 'gradientangle', 'gradientsecondopacity', 'gradientpositionx', 'gradientpositiony',
2015                     'needsregularupdate', 'zoom', 'layer', 'offset'],
2016                 */
2017                 cleanThis = [],
2018                 i,
2019                 len = cleanThis.length;
2020 
2021             attributes.id = this.id;
2022             attributes.name = this.name;
2023 
2024             for (i = 0; i < len; i++) {
2025                 delete attributes[cleanThis[i]];
2026             }
2027 
2028             return attributes;
2029         },
2030 
2031         /**
2032          * Checks whether (x,y) is near the element.
2033          * @param {Number} x Coordinate in x direction, screen coordinates.
2034          * @param {Number} y Coordinate in y direction, screen coordinates.
2035          * @returns {Boolean} True if (x,y) is near the element, False otherwise.
2036          */
2037         hasPoint: function (x, y) {
2038             return false;
2039         },
2040 
2041         /**
2042          * Adds ticks to this line or curve. Ticks can be added to a curve or any kind of line: line, arrow, and axis.
2043          * @param {JXG.Ticks} ticks Reference to a ticks object which is describing the ticks (color, distance, how many, etc.).
2044          * @returns {String} Id of the ticks object.
2045          */
2046         addTicks: function (ticks) {
2047             if (ticks.id === "" || !Type.exists(ticks.id)) {
2048                 ticks.id = this.id + "_ticks_" + (this.ticks.length + 1);
2049             }
2050 
2051             this.board.renderer.drawTicks(ticks);
2052             this.ticks.push(ticks);
2053 
2054             return ticks.id;
2055         },
2056 
2057         /**
2058          * Removes all ticks from a line or curve.
2059          */
2060         removeAllTicks: function () {
2061             var t;
2062             if (Type.exists(this.ticks)) {
2063                 for (t = this.ticks.length - 1; t >= 0; t--) {
2064                     this.removeTicks(this.ticks[t]);
2065                 }
2066                 this.ticks = [];
2067                 this.board.update();
2068             }
2069         },
2070 
2071         /**
2072          * Removes ticks identified by parameter named tick from this line or curve.
2073          * @param {JXG.Ticks} tick Reference to tick object to remove.
2074          */
2075         removeTicks: function (tick) {
2076             var t, j;
2077 
2078             if (Type.exists(this.defaultTicks) && this.defaultTicks === tick) {
2079                 this.defaultTicks = null;
2080             }
2081 
2082             if (Type.exists(this.ticks)) {
2083                 for (t = this.ticks.length - 1; t >= 0; t--) {
2084                     if (this.ticks[t] === tick) {
2085                         this.board.removeObject(this.ticks[t]);
2086 
2087                         if (this.ticks[t].ticks) {
2088                             for (j = 0; j < this.ticks[t].ticks.length; j++) {
2089                                 if (Type.exists(this.ticks[t].labels[j])) {
2090                                     this.board.removeObject(this.ticks[t].labels[j]);
2091                                 }
2092                             }
2093                         }
2094 
2095                         delete this.ticks[t];
2096                         break;
2097                     }
2098                 }
2099             }
2100         },
2101 
2102         /**
2103          * Determine values of snapSizeX and snapSizeY. If the attributes
2104          * snapSizex and snapSizeY are greater than zero, these values are taken.
2105          * Otherwise, determine the distance between major ticks of the
2106          * default axes.
2107          * @returns {Array} containing the snap sizes for x and y direction.
2108          * @private
2109          */
2110         getSnapSizes: function () {
2111             var sX, sY, ticks;
2112 
2113             sX = Type.evaluate(this.visProp.snapsizex);
2114             sY = Type.evaluate(this.visProp.snapsizey);
2115 
2116             if (sX <= 0 && this.board.defaultAxes && this.board.defaultAxes.x.defaultTicks) {
2117                 ticks = this.board.defaultAxes.x.defaultTicks;
2118                 sX = ticks.ticksDelta * (Type.evaluate(ticks.visProp.minorticks) + 1);
2119             }
2120 
2121             if (sY <= 0 && this.board.defaultAxes && this.board.defaultAxes.y.defaultTicks) {
2122                 ticks = this.board.defaultAxes.y.defaultTicks;
2123                 sY = ticks.ticksDelta * (Type.evaluate(ticks.visProp.minorticks) + 1);
2124             }
2125 
2126             return [sX, sY];
2127         },
2128 
2129         /**
2130          * Move an element to its nearest grid point.
2131          * The function uses the coords object of the element as
2132          * its actual position. If there is no coords object or if the object is fixed, nothing is done.
2133          * @param {Boolean} force force snapping independent from what the snaptogrid attribute says
2134          * @param {Boolean} fromParent True if the drag comes from a child element. This is the case if a line
2135          *    through two points is dragged. In this case we do not try to force the points to stay inside of
2136          *    the visible board, but the distance between the two points stays constant.
2137          * @returns {JXG.GeometryElement} Reference to this element
2138          */
2139         handleSnapToGrid: function (force, fromParent) {
2140             var x, y, rx, ry, rcoords,
2141                 mi, ma,
2142                 boardBB, res, sX, sY,
2143                 needsSnapToGrid = false,
2144                 attractToGrid = Type.evaluate(this.visProp.attracttogrid),
2145                 ev_au = Type.evaluate(this.visProp.attractorunit),
2146                 ev_ad = Type.evaluate(this.visProp.attractordistance);
2147 
2148             if (!Type.exists(this.coords) || Type.evaluate(this.visProp.fixed)) {
2149                 return this;
2150             }
2151 
2152             needsSnapToGrid =
2153                 Type.evaluate(this.visProp.snaptogrid) || attractToGrid || force === true;
2154 
2155             if (needsSnapToGrid) {
2156                 x = this.coords.usrCoords[1];
2157                 y = this.coords.usrCoords[2];
2158                 res = this.getSnapSizes();
2159                 sX = res[0];
2160                 sY = res[1];
2161 
2162                 // If no valid snap sizes are available, don't change the coords.
2163                 if (sX > 0 && sY > 0) {
2164                     boardBB = this.board.getBoundingBox();
2165                     rx = Math.round(x / sX) * sX;
2166                     ry = Math.round(y / sY) * sY;
2167 
2168                     rcoords = new JXG.Coords(Const.COORDS_BY_USER, [rx, ry], this.board);
2169                     if (
2170                         !attractToGrid ||
2171                         rcoords.distance(
2172                             ev_au === "screen" ? Const.COORDS_BY_SCREEN : Const.COORDS_BY_USER,
2173                             this.coords
2174                         ) < ev_ad
2175                     ) {
2176                         x = rx;
2177                         y = ry;
2178                         // Checking whether x and y are still within boundingBox.
2179                         // If not, adjust them to remain within the board.
2180                         // Otherwise a point may become invisible.
2181                         if (!fromParent) {
2182                             mi = Math.min(boardBB[0], boardBB[2]);
2183                             ma = Math.max(boardBB[0], boardBB[2]);
2184                             if (x < mi) {
2185                                 x += sX;
2186                             } else if (x > ma) {
2187                                 x -= sX;
2188                             }
2189 
2190                             mi = Math.min(boardBB[1], boardBB[3]);
2191                             ma = Math.max(boardBB[1], boardBB[3]);
2192                             if (y < mi) {
2193                                 y += sY;
2194                             } else if (y > ma) {
2195                                 y -= sY;
2196                             }
2197                         }
2198                         this.coords.setCoordinates(Const.COORDS_BY_USER, [x, y]);
2199                     }
2200                 }
2201             }
2202             return this;
2203         },
2204 
2205         getBoundingBox: function () {
2206             var i,
2207                 le,
2208                 v,
2209                 x,
2210                 y,
2211                 bb = [Infinity, Infinity, -Infinity, -Infinity];
2212 
2213             if (this.type === Const.OBJECT_TYPE_POLYGON) {
2214                 le = this.vertices.length - 1;
2215                 if (le <= 0) {
2216                     return bb;
2217                 }
2218                 for (i = 0; i < le; i++) {
2219                     v = this.vertices[i].X();
2220                     bb[0] = v < bb[0] ? v : bb[0];
2221                     bb[2] = v > bb[2] ? v : bb[2];
2222                     v = this.vertices[i].Y();
2223                     bb[1] = v < bb[1] ? v : bb[1];
2224                     bb[3] = v > bb[3] ? v : bb[3];
2225                 }
2226             } else if (this.elementClass === Const.OBJECT_CLASS_CIRCLE) {
2227                 x = this.center.X();
2228                 y = this.center.Y();
2229                 bb = [x - this.radius, y + this.radius, x + this.radius, y - this.radius];
2230             } else if (this.elementClass === Const.OBJECT_CLASS_CURVE) {
2231                 le = this.vertices.length;
2232                 if (le === 0) {
2233                     return bb;
2234                 }
2235                 for (i = 0; i < le; i++) {
2236                     v = this.points[i].coords.usrCoords[1];
2237                     bb[0] = v < bb[0] ? v : bb[0];
2238                     bb[2] = v > bb[2] ? v : bb[2];
2239                     v = this.points[i].coords.usrCoords[1];
2240                     bb[1] = v < bb[1] ? v : bb[1];
2241                     bb[3] = v > bb[3] ? v : bb[3];
2242                 }
2243             }
2244 
2245             return bb;
2246         },
2247 
2248         /**
2249          * Alias of {@link JXG.EventEmitter.on}.
2250          *
2251          * @name addEvent
2252          * @memberof JXG.GeometryElement
2253          * @function
2254          */
2255         addEvent: JXG.shortcut(JXG.GeometryElement.prototype, 'on'),
2256 
2257         /**
2258          * Alias of {@link JXG.EventEmitter.off}.
2259          *
2260          * @name removeEvent
2261          * @memberof JXG.GeometryElement
2262          * @function
2263          */
2264         removeEvent: JXG.shortcut(JXG.GeometryElement.prototype, 'off'),
2265 
2266         /* **************************
2267          *     EVENT DEFINITION
2268          * for documentation purposes
2269          * ************************** */
2270 
2271         //region Event handler documentation
2272         /**
2273          * @event
2274          * @description This event is fired whenever the user is hovering over an element.
2275          * @name JXG.GeometryElement#over
2276          * @param {Event} e The browser's event object.
2277          */
2278         __evt__over: function (e) {},
2279 
2280         /**
2281          * @event
2282          * @description This event is fired whenever the user puts the mouse over an element.
2283          * @name JXG.GeometryElement#mouseover
2284          * @param {Event} e The browser's event object.
2285          */
2286         __evt__mouseover: function (e) {},
2287 
2288         /**
2289          * @event
2290          * @description This event is fired whenever the user is leaving an element.
2291          * @name JXG.GeometryElement#out
2292          * @param {Event} e The browser's event object.
2293          */
2294         __evt__out: function (e) {},
2295 
2296         /**
2297          * @event
2298          * @description This event is fired whenever the user puts the mouse away from an element.
2299          * @name JXG.GeometryElement#mouseout
2300          * @param {Event} e The browser's event object.
2301          */
2302         __evt__mouseout: function (e) {},
2303 
2304         /**
2305          * @event
2306          * @description This event is fired whenever the user is moving over an element.
2307          * @name JXG.GeometryElement#move
2308          * @param {Event} e The browser's event object.
2309          */
2310         __evt__move: function (e) {},
2311 
2312         /**
2313          * @event
2314          * @description This event is fired whenever the user is moving the mouse over an element.
2315          * @name JXG.GeometryElement#mousemove
2316          * @param {Event} e The browser's event object.
2317          */
2318         __evt__mousemove: function (e) {},
2319 
2320         /**
2321          * @event
2322          * @description This event is fired whenever the user drags an element.
2323          * @name JXG.GeometryElement#drag
2324          * @param {Event} e The browser's event object.
2325          */
2326         __evt__drag: function (e) {},
2327 
2328         /**
2329          * @event
2330          * @description This event is fired whenever the user drags the element with a mouse.
2331          * @name JXG.GeometryElement#mousedrag
2332          * @param {Event} e The browser's event object.
2333          */
2334         __evt__mousedrag: function (e) {},
2335 
2336         /**
2337          * @event
2338          * @description This event is fired whenever the user drags the element with a pen.
2339          * @name JXG.GeometryElement#pendrag
2340          * @param {Event} e The browser's event object.
2341          */
2342         __evt__pendrag: function (e) {},
2343 
2344         /**
2345          * @event
2346          * @description This event is fired whenever the user drags the element on a touch device.
2347          * @name JXG.GeometryElement#touchdrag
2348          * @param {Event} e The browser's event object.
2349          */
2350         __evt__touchdrag: function (e) {},
2351 
2352         /**
2353          * @event
2354          * @description This event is fired whenever the user drags the element by pressing arrow keys 
2355          * on the keyboard.
2356          * @name JXG.GeometryElement#keydrag
2357          * @param {Event} e The browser's event object.
2358          */
2359         __evt__keydrag: function (e) { },
2360 
2361         /**
2362          * @event
2363          * @description Whenever the user starts to touch or click an element.
2364          * @name JXG.GeometryElement#down
2365          * @param {Event} e The browser's event object.
2366          */
2367         __evt__down: function (e) {},
2368 
2369         /**
2370          * @event
2371          * @description Whenever the user starts to click an element.
2372          * @name JXG.GeometryElement#mousedown
2373          * @param {Event} e The browser's event object.
2374          */
2375         __evt__mousedown: function (e) {},
2376 
2377         /**
2378          * @event
2379          * @description Whenever the user taps an element with the pen.
2380          * @name JXG.GeometryElement#pendown
2381          * @param {Event} e The browser's event object.
2382          */
2383         __evt__pendown: function (e) {},
2384 
2385         /**
2386          * @event
2387          * @description Whenever the user starts to touch an element.
2388          * @name JXG.GeometryElement#touchdown
2389          * @param {Event} e The browser's event object.
2390          */
2391         __evt__touchdown: function (e) {},
2392 
2393         /**
2394          * @event
2395          * @description Whenever the user stops to touch or click an element.
2396          * @name JXG.GeometryElement#up
2397          * @param {Event} e The browser's event object.
2398          */
2399         __evt__up: function (e) {},
2400 
2401         /**
2402          * @event
2403          * @description Whenever the user releases the mousebutton over an element.
2404          * @name JXG.GeometryElement#mouseup
2405          * @param {Event} e The browser's event object.
2406          */
2407         __evt__mouseup: function (e) {},
2408 
2409         /**
2410          * @event
2411          * @description Whenever the user lifts the pen over an element.
2412          * @name JXG.GeometryElement#penup
2413          * @param {Event} e The browser's event object.
2414          */
2415         __evt__penup: function (e) {},
2416 
2417         /**
2418          * @event
2419          * @description Whenever the user stops touching an element.
2420          * @name JXG.GeometryElement#touchup
2421          * @param {Event} e The browser's event object.
2422          */
2423         __evt__touchup: function (e) {},
2424 
2425         /**
2426          * @event
2427          * @description Notify every time an attribute is changed.
2428          * @name JXG.GeometryElement#attribute
2429          * @param {Object} o A list of changed attributes and their new value.
2430          * @param {Object} el Reference to the element
2431          */
2432         __evt__attribute: function (o, el) {},
2433 
2434         /**
2435          * @event
2436          * @description This is a generic event handler. It exists for every possible attribute that can be set for
2437          * any element, e.g. if you want to be notified everytime an element's strokecolor is changed, is the event
2438          * <tt>attribute:strokecolor</tt>.
2439          * @name JXG.GeometryElement#attribute:key
2440          * @param val The old value.
2441          * @param nval The new value
2442          * @param {Object} el Reference to the element
2443          */
2444         __evt__attribute_: function (val, nval, el) {},
2445 
2446         /**
2447          * @ignore
2448          */
2449         __evt: function () {}
2450         //endregion
2451     }
2452 );
2453 
2454 export default JXG.GeometryElement;
2455 // const GeometryElement = JXG.GeometryElement;
2456 // export { GeometryElement as default,  GeometryElement };
2457