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, AMprocessNode: true, MathJax: true, window: true, document: true, init: true, translateASCIIMath: true, google: true*/
 33 
 34 /*jslint nomen: true, plusplus: true*/
 35 
 36 /**
 37  * @fileoverview The JXG.Board class is defined in this file. JXG.Board controls all properties and methods
 38  * used to manage a geonext board like managing geometric elements, managing mouse and touch events, etc.
 39  */
 40 
 41 import JXG from '../jxg';
 42 import Const from './constants';
 43 import Coords from './coords';
 44 import Options from '../options';
 45 import Numerics from '../math/numerics';
 46 import Mat from '../math/math';
 47 import Geometry from '../math/geometry';
 48 import Complex from '../math/complex';
 49 import Statistics from '../math/statistics';
 50 import JessieCode from '../parser/jessiecode';
 51 import Color from '../utils/color';
 52 import Type from '../utils/type';
 53 import EventEmitter from '../utils/event';
 54 import Env from '../utils/env';
 55 import Composition from './composition';
 56 
 57 /**
 58  * Constructs a new Board object.
 59  * @class JXG.Board controls all properties and methods used to manage a geonext board like managing geometric
 60  * elements, managing mouse and touch events, etc. You probably don't want to use this constructor directly.
 61  * Please use {@link JXG.JSXGraph.initBoard} to initialize a board.
 62  * @constructor
 63  * @param {String|Object} container The id of or reference to the HTML DOM element
 64  * the board is drawn in. This is usually a HTML div.
 65  * @param {JXG.AbstractRenderer} renderer The reference of a renderer.
 66  * @param {String} id Unique identifier for the board, may be an empty string or null or even undefined.
 67  * @param {JXG.Coords} origin The coordinates where the origin is placed, in user coordinates.
 68  * @param {Number} zoomX Zoom factor in x-axis direction
 69  * @param {Number} zoomY Zoom factor in y-axis direction
 70  * @param {Number} unitX Units in x-axis direction
 71  * @param {Number} unitY Units in y-axis direction
 72  * @param {Number} canvasWidth  The width of canvas
 73  * @param {Number} canvasHeight The height of canvas
 74  * @param {Object} attributes The attributes object given to {@link JXG.JSXGraph.initBoard}
 75  * @borrows JXG.EventEmitter#on as this.on
 76  * @borrows JXG.EventEmitter#off as this.off
 77  * @borrows JXG.EventEmitter#triggerEventHandlers as this.triggerEventHandlers
 78  * @borrows JXG.EventEmitter#eventHandlers as this.eventHandlers
 79  */
 80 JXG.Board = function (container, renderer, id,
 81     origin, zoomX, zoomY, unitX, unitY,
 82     canvasWidth, canvasHeight, attributes) {
 83     /**
 84      * Board is in no special mode, objects are highlighted on mouse over and objects may be
 85      * clicked to start drag&drop.
 86      * @type Number
 87      * @constant
 88      */
 89     this.BOARD_MODE_NONE = 0x0000;
 90 
 91     /**
 92      * Board is in drag mode, objects aren't highlighted on mouse over and the object referenced in
 93      * {@link JXG.Board#mouse} is updated on mouse movement.
 94      * @type Number
 95      * @constant
 96      */
 97     this.BOARD_MODE_DRAG = 0x0001;
 98 
 99     /**
100      * In this mode a mouse move changes the origin's screen coordinates.
101      * @type Number
102      * @constant
103      */
104     this.BOARD_MODE_MOVE_ORIGIN = 0x0002;
105 
106     /**
107      * Update is made with high quality, e.g. graphs are evaluated at much more points.
108      * @type Number
109      * @constant
110      * @see JXG.Board#updateQuality
111      */
112     this.BOARD_MODE_ZOOM = 0x0011;
113 
114     /**
115      * Update is made with low quality, e.g. graphs are evaluated at a lesser amount of points.
116      * @type Number
117      * @constant
118      * @see JXG.Board#updateQuality
119      */
120     this.BOARD_QUALITY_LOW = 0x1;
121 
122     /**
123      * Update is made with high quality, e.g. graphs are evaluated at much more points.
124      * @type Number
125      * @constant
126      * @see JXG.Board#updateQuality
127      */
128     this.BOARD_QUALITY_HIGH = 0x2;
129 
130     /**
131      * Pointer to the document element containing the board.
132      * @type Object
133      */
134     if (Type.exists(attributes.document) && attributes.document !== false) {
135         this.document = attributes.document;
136     } else if (Env.isBrowser) {
137         this.document = document;
138     }
139 
140     /**
141      * The html-id of the html element containing the board.
142      * @type String
143      */
144     this.container = ''; // container
145 
146     /**
147      * Pointer to the html element containing the board.
148      * @type Object
149      */
150     this.containerObj = null; // (Env.isBrowser ? this.document.getElementById(this.container) : null);
151 
152     // Set this.container and this.containerObj
153     if (Type.isString(container)) {
154         // Hosting div is given as string
155         this.container = container; // container
156         this.containerObj = (Env.isBrowser ? this.document.getElementById(this.container) : null);
157     } else if (Env.isBrowser) {
158         // Hosting div is given as object pointer
159         this.containerObj = container;
160         this.container = this.containerObj.getAttribute('id');
161         if (this.container === null) {
162             // Set random id to this.container,
163             // but not to the DOM element
164             this.container = 'null' + parseInt(Math.random() * 100000000).toString();
165         }
166     }
167 
168     if (Env.isBrowser && renderer.type !== 'no' && this.containerObj === null) {
169         throw new Error('\nJSXGraph: HTML container element "' + container + '" not found.');
170     }
171 
172     /**
173      * A reference to this boards renderer.
174      * @type JXG.AbstractRenderer
175      * @name JXG.Board#renderer
176      * @private
177      * @ignore
178      */
179     this.renderer = renderer;
180 
181     /**
182      * Grids keeps track of all grids attached to this board.
183      * @type Array
184      * @private
185      */
186     this.grids = [];
187 
188     /**
189      * Some standard options
190      * @type JXG.Options
191      */
192     this.options = Type.deepCopy(Options);
193 
194     /**
195      * Board attributes
196      * @type Object
197      */
198     this.attr = attributes;
199 
200     if (this.attr.theme !== 'default' && Type.exists(JXG.themes[this.attr.theme])) {
201         Type.mergeAttr(this.options, JXG.themes[this.attr.theme], true);
202     }
203 
204     /**
205      * Dimension of the board.
206      * @default 2
207      * @type Number
208      */
209     this.dimension = 2;
210 
211     this.jc = new JessieCode();
212     this.jc.use(this);
213 
214     /**
215      * Coordinates of the boards origin. This a object with the two properties
216      * usrCoords and scrCoords. usrCoords always equals [1, 0, 0] and scrCoords
217      * stores the boards origin in homogeneous screen coordinates.
218      * @type Object
219      * @private
220      */
221     this.origin = {};
222     this.origin.usrCoords = [1, 0, 0];
223     this.origin.scrCoords = [1, origin[0], origin[1]];
224 
225     /**
226      * Zoom factor in X direction. It only stores the zoom factor to be able
227      * to get back to 100% in zoom100().
228      * @name JXG.Board.zoomX
229      * @type Number
230      * @private
231      * @ignore
232      */
233     this.zoomX = zoomX;
234 
235     /**
236      * Zoom factor in Y direction. It only stores the zoom factor to be able
237      * to get back to 100% in zoom100().
238      * @name JXG.Board.zoomY
239      * @type Number
240      * @private
241      * @ignore
242      */
243     this.zoomY = zoomY;
244 
245     /**
246      * The number of pixels which represent one unit in user-coordinates in x direction.
247      * @type Number
248      * @private
249      */
250     this.unitX = unitX * this.zoomX;
251 
252     /**
253      * The number of pixels which represent one unit in user-coordinates in y direction.
254      * @type Number
255      * @private
256      */
257     this.unitY = unitY * this.zoomY;
258 
259     /**
260      * Keep aspect ratio if bounding box is set and the width/height ratio differs from the
261      * width/height ratio of the canvas.
262      * @type Boolean
263      * @private
264      */
265     this.keepaspectratio = false;
266 
267     /**
268      * Canvas width.
269      * @type Number
270      * @private
271      */
272     this.canvasWidth = canvasWidth;
273 
274     /**
275      * Canvas Height
276      * @type Number
277      * @private
278      */
279     this.canvasHeight = canvasHeight;
280 
281     // If the given id is not valid, generate an unique id
282     if (Type.exists(id) && id !== '' && Env.isBrowser && !Type.exists(this.document.getElementById(id))) {
283         this.id = id;
284     } else {
285         this.id = this.generateId();
286     }
287 
288     EventEmitter.eventify(this);
289 
290     this.hooks = [];
291 
292     /**
293      * An array containing all other boards that are updated after this board has been updated.
294      * @type Array
295      * @see JXG.Board#addChild
296      * @see JXG.Board#removeChild
297      */
298     this.dependentBoards = [];
299 
300     /**
301      * During the update process this is set to false to prevent an endless loop.
302      * @default false
303      * @type Boolean
304      */
305     this.inUpdate = false;
306 
307     /**
308      * An associative array containing all geometric objects belonging to the board. Key is the id of the object and value is a reference to the object.
309      * @type Object
310      */
311     this.objects = {};
312 
313     /**
314      * An array containing all geometric objects on the board in the order of construction.
315      * @type Array
316      */
317     this.objectsList = [];
318 
319     /**
320      * An associative array containing all groups belonging to the board. Key is the id of the group and value is a reference to the object.
321      * @type Object
322      */
323     this.groups = {};
324 
325     /**
326      * Stores all the objects that are currently running an animation.
327      * @type Object
328      */
329     this.animationObjects = {};
330 
331     /**
332      * An associative array containing all highlighted elements belonging to the board.
333      * @type Object
334      */
335     this.highlightedObjects = {};
336 
337     /**
338      * Number of objects ever created on this board. This includes every object, even invisible and deleted ones.
339      * @type Number
340      */
341     this.numObjects = 0;
342 
343     /**
344      * An associative array / dictionary to store the objects of the board by name. The name of the object is the key and value is a reference to the object.
345      * @type Object
346      */
347     this.elementsByName = {};
348 
349     /**
350      * The board mode the board is currently in. Possible values are
351      * <ul>
352      * <li>JXG.Board.BOARD_MODE_NONE</li>
353      * <li>JXG.Board.BOARD_MODE_DRAG</li>
354      * <li>JXG.Board.BOARD_MODE_MOVE_ORIGIN</li>
355      * </ul>
356      * @type Number
357      */
358     this.mode = this.BOARD_MODE_NONE;
359 
360     /**
361      * The update quality of the board. In most cases this is set to {@link JXG.Board#BOARD_QUALITY_HIGH}.
362      * If {@link JXG.Board#mode} equals {@link JXG.Board#BOARD_MODE_DRAG} this is set to
363      * {@link JXG.Board#BOARD_QUALITY_LOW} to speed up the update process by e.g. reducing the number of
364      * evaluation points when plotting functions. Possible values are
365      * <ul>
366      * <li>BOARD_QUALITY_LOW</li>
367      * <li>BOARD_QUALITY_HIGH</li>
368      * </ul>
369      * @type Number
370      * @see JXG.Board#mode
371      */
372     this.updateQuality = this.BOARD_QUALITY_HIGH;
373 
374     /**
375      * If true updates are skipped.
376      * @type Boolean
377      */
378     this.isSuspendedRedraw = false;
379 
380     this.calculateSnapSizes();
381 
382     /**
383      * The distance from the mouse to the dragged object in x direction when the user clicked the mouse button.
384      * @type Number
385      * @see JXG.Board#drag_dy
386      */
387     this.drag_dx = 0;
388 
389     /**
390      * The distance from the mouse to the dragged object in y direction when the user clicked the mouse button.
391      * @type Number
392      * @see JXG.Board#drag_dx
393      */
394     this.drag_dy = 0;
395 
396     /**
397      * The last position where a drag event has been fired.
398      * @type Array
399      * @see JXG.Board#moveObject
400      */
401     this.drag_position = [0, 0];
402 
403     /**
404      * References to the object that is dragged with the mouse on the board.
405      * @type JXG.GeometryElement
406      * @see JXG.Board#touches
407      */
408     this.mouse = {};
409 
410     /**
411      * Keeps track on touched elements, like {@link JXG.Board#mouse} does for mouse events.
412      * @type Array
413      * @see JXG.Board#mouse
414      */
415     this.touches = [];
416 
417     /**
418      * A string containing the XML text of the construction.
419      * This is set in {@link JXG.FileReader.parseString}.
420      * Only useful if a construction is read from a GEONExT-, Intergeo-, Geogebra-, or Cinderella-File.
421      * @type String
422      */
423     this.xmlString = '';
424 
425     /**
426      * Cached result of getCoordsTopLeftCorner for touch/mouseMove-Events to save some DOM operations.
427      * @type Array
428      */
429     this.cPos = [];
430 
431     /**
432      * Contains the last time (epoch, msec) since the last touchMove event which was not thrown away or since
433      * touchStart because Android's Webkit browser fires too much of them.
434      * @type Number
435      */
436     this.touchMoveLast = 0;
437 
438     /**
439      * Contains the pointerId of the last touchMove event which was not thrown away or since
440      * touchStart because Android's Webkit browser fires too much of them.
441      * @type Number
442      */
443     this.touchMoveLastId = Infinity;
444 
445     /**
446      * Contains the last time (epoch, msec) since the last getCoordsTopLeftCorner call which was not thrown away.
447      * @type Number
448      */
449     this.positionAccessLast = 0;
450 
451     /**
452      * Collects all elements that triggered a mouse down event.
453      * @type Array
454      */
455     this.downObjects = [];
456 
457     /**
458      * Collects all elements that have keyboard focus. Should be either one or no element.
459      * Elements are stored with their id.
460      * @type Array
461      */
462     this.focusObjects = [];
463 
464     if (this.attr.showcopyright) {
465         this.renderer.displayCopyright(Const.licenseText, parseInt(this.options.text.fontSize, 10));
466     }
467 
468     /**
469      * Full updates are needed after zoom and axis translates. This saves some time during an update.
470      * @default false
471      * @type Boolean
472      */
473     this.needsFullUpdate = false;
474 
475     /**
476      * If reducedUpdate is set to true then only the dragged element and few (e.g. 2) following
477      * elements are updated during mouse move. On mouse up the whole construction is
478      * updated. This enables us to be fast even on very slow devices.
479      * @type Boolean
480      * @default false
481      */
482     this.reducedUpdate = false;
483 
484     /**
485      * The current color blindness deficiency is stored in this property. If color blindness is not emulated
486      * at the moment, it's value is 'none'.
487      */
488     this.currentCBDef = 'none';
489 
490     /**
491      * If GEONExT constructions are displayed, then this property should be set to true.
492      * At the moment there should be no difference. But this may change.
493      * This is set in {@link JXG.GeonextReader#readGeonext}.
494      * @type Boolean
495      * @default false
496      * @see JXG.GeonextReader#readGeonext
497      */
498     this.geonextCompatibilityMode = false;
499 
500     if (this.options.text.useASCIIMathML && translateASCIIMath) {
501         init();
502     } else {
503         this.options.text.useASCIIMathML = false;
504     }
505 
506     /**
507      * A flag which tells if the board registers mouse events.
508      * @type Boolean
509      * @default false
510      */
511     this.hasMouseHandlers = false;
512 
513     /**
514      * A flag which tells if the board registers touch events.
515      * @type Boolean
516      * @default false
517      */
518     this.hasTouchHandlers = false;
519 
520     /**
521      * A flag which stores if the board registered pointer events.
522      * @type Boolean
523      * @default false
524      */
525     this.hasPointerHandlers = false;
526 
527     /**
528      * A flag which stores if the board registered zoom events, i.e. mouse wheel scroll events.
529      * @type Boolean
530      * @default false
531      */
532     this.hasWheelHandlers = false;
533 
534     /**
535      * A flag which tells if the board the JXG.Board#mouseUpListener is currently registered.
536      * @type Boolean
537      * @default false
538      */
539     this.hasMouseUp = false;
540 
541     /**
542      * A flag which tells if the board the JXG.Board#touchEndListener is currently registered.
543      * @type Boolean
544      * @default false
545      */
546     this.hasTouchEnd = false;
547 
548     /**
549      * A flag which tells us if the board has a pointerUp event registered at the moment.
550      * @type Boolean
551      * @default false
552      */
553     this.hasPointerUp = false;
554 
555     /**
556      * Offset for large coords elements like images
557      * @type Array
558      * @private
559      * @default [0, 0]
560      */
561     this._drag_offset = [0, 0];
562 
563     /**
564      * Stores the input device used in the last down or move event.
565      * @type String
566      * @private
567      * @default 'mouse'
568      */
569     this._inputDevice = 'mouse';
570 
571     /**
572      * Keeps a list of pointer devices which are currently touching the screen.
573      * @type Array
574      * @private
575      */
576     this._board_touches = [];
577 
578     /**
579      * A flag which tells us if the board is in the selecting mode
580      * @type Boolean
581      * @default false
582      */
583     this.selectingMode = false;
584 
585     /**
586      * A flag which tells us if the user is selecting
587      * @type Boolean
588      * @default false
589      */
590     this.isSelecting = false;
591 
592     /**
593      * A flag which tells us if the user is scrolling the viewport
594      * @type Boolean
595      * @private
596      * @default false
597      * @see JXG.Board#scrollListener
598      */
599     this._isScrolling = false;
600 
601     /**
602      * A flag which tells us if a resize is in process
603      * @type Boolean
604      * @private
605      * @default false
606      * @see JXG.Board#resizeListener
607      */
608     this._isResizing = false;
609 
610     /**
611      * A bounding box for the selection
612      * @type Array
613      * @default [ [0,0], [0,0] ]
614      */
615     this.selectingBox = [[0, 0], [0, 0]];
616 
617     /**
618      * Array to log user activity.
619      * Entries are objects of the form '{type, id, start, end}' notifying
620      * the start time as well as the last time of a single event of type 'type'
621      * on a JSXGraph element of id 'id'.
622      * <p> 'start' and 'end' contain the amount of milliseconds elapsed between 1 January 1970 00:00:00 UTC
623      * and the time the event happened.
624      * <p>
625      * For the time being (i.e. v1.5.0) the only supported type is 'drag'.
626      * @type Array
627      */
628     this.userLog = [];
629 
630     this.mathLib = Math;        // Math or JXG.Math.IntervalArithmetic
631     this.mathLibJXG = JXG.Math; // JXG.Math or JXG.Math.IntervalArithmetic
632 
633     // if (this.attr.registerevents) {
634     //     this.addEventHandlers();
635     // }
636     // if (this.attr.registerresizeevent) {
637     //     this.addResizeEventHandlers();
638     // }
639     // if (this.attr.registerfullscreenevent) {
640     //     this.addFullscreenEventHandlers();
641     // }
642     if (this.attr.registerevents === true) {
643         this.attr.registerevents = {
644             fullscreen: true,
645             keyboard: true,
646             pointer: true,
647             resize: true,
648             wheel: true
649         };
650     } else if (typeof this.attr.registerevents === 'object') {
651         if (!Type.exists(this.attr.registerevents.fullscreen)) {
652             this.attr.registerevents.fullscreen = true;
653         }
654         if (!Type.exists(this.attr.registerevents.keyboard)) {
655             this.attr.registerevents.keyboard = true;
656         }
657         if (!Type.exists(this.attr.registerevents.pointer)) {
658             this.attr.registerevents.pointer = true;
659         }
660         if (!Type.exists(this.attr.registerevents.resize)) {
661             this.attr.registerevents.resize = true;
662         }
663         if (!Type.exists(this.attr.registerevents.wheel)) {
664             this.attr.registerevents.wheel = true;
665         }
666     }
667     if (this.attr.registerevents !== false) {
668         if (this.attr.registerevents.fullscreen) {
669             this.addFullscreenEventHandlers();
670         }
671         if (this.attr.registerevents.keyboard) {
672             this.addKeyboardEventHandlers();
673         }
674         if (this.attr.registerevents.pointer) {
675             this.addEventHandlers();
676         }
677         if (this.attr.registerevents.resize) {
678             this.addResizeEventHandlers();
679         }
680         if (this.attr.registerevents.wheel) {
681             this.addWheelEventHandlers();
682         }
683     }
684 
685     this.methodMap = {
686         update: 'update',
687         fullUpdate: 'fullUpdate',
688         on: 'on',
689         off: 'off',
690         trigger: 'trigger',
691         setAttribute: 'setAttribute',
692         setBoundingBox: 'setBoundingBox',
693         setView: 'setBoundingBox',
694         getBoundingBox: 'getBoundingBox',
695         BoundingBox: 'getBoundingBox',
696         getView: 'getBoundingBox',
697         View: 'getBoundingBox',
698         migratePoint: 'migratePoint',
699         colorblind: 'emulateColorblindness',
700         suspendUpdate: 'suspendUpdate',
701         unsuspendUpdate: 'unsuspendUpdate',
702         clearTraces: 'clearTraces',
703         left: 'clickLeftArrow',
704         right: 'clickRightArrow',
705         up: 'clickUpArrow',
706         down: 'clickDownArrow',
707         zoomIn: 'zoomIn',
708         zoomOut: 'zoomOut',
709         zoom100: 'zoom100',
710         zoomElements: 'zoomElements',
711         remove: 'removeObject',
712         removeObject: 'removeObject'
713     };
714 };
715 
716 JXG.extend(
717     JXG.Board.prototype,
718     /** @lends JXG.Board.prototype */ {
719         /**
720          * Generates an unique name for the given object. The result depends on the objects type, if the
721          * object is a {@link JXG.Point}, capital characters are used, if it is of type {@link JXG.Line}
722          * only lower case characters are used. If object is of type {@link JXG.Polygon}, a bunch of lower
723          * case characters prefixed with P_ are used. If object is of type {@link JXG.Circle} the name is
724          * generated using lower case characters. prefixed with k_ is used. In any other case, lower case
725          * chars prefixed with s_ is used.
726          * @param {Object} object Reference of an JXG.GeometryElement that is to be named.
727          * @returns {String} Unique name for the object.
728          */
729         generateName: function (object) {
730             var possibleNames, i,
731                 maxNameLength = this.attr.maxnamelength,
732                 pre = '',
733                 post = '',
734                 indices = [],
735                 name = '';
736 
737             if (object.type === Const.OBJECT_TYPE_TICKS) {
738                 return '';
739             }
740 
741             if (Type.isPoint(object) || Type.isPoint3D(object)) {
742                 // points have capital letters
743                 possibleNames = [
744                     '', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
745                 ];
746             } else if (object.type === Const.OBJECT_TYPE_ANGLE) {
747                 possibleNames = [
748                     '', 'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ',
749                     'μ', 'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω'
750                 ];
751             } else {
752                 // all other elements get lowercase labels
753                 possibleNames = [
754                     '', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
755                 ];
756             }
757 
758             if (
759                 !Type.isPoint(object) &&
760                 object.elementClass !== Const.OBJECT_CLASS_LINE &&
761                 object.type !== Const.OBJECT_TYPE_ANGLE
762             ) {
763                 if (object.type === Const.OBJECT_TYPE_POLYGON) {
764                     pre = 'P_{';
765                 } else if (object.elementClass === Const.OBJECT_CLASS_CIRCLE) {
766                     pre = 'k_{';
767                 } else if (object.elementClass === Const.OBJECT_CLASS_TEXT) {
768                     pre = 't_{';
769                 } else {
770                     pre = 's_{';
771                 }
772                 post = '}';
773             }
774 
775             for (i = 0; i < maxNameLength; i++) {
776                 indices[i] = 0;
777             }
778 
779             while (indices[maxNameLength - 1] < possibleNames.length) {
780                 for (indices[0] = 1; indices[0] < possibleNames.length; indices[0]++) {
781                     name = pre;
782 
783                     for (i = maxNameLength; i > 0; i--) {
784                         name += possibleNames[indices[i - 1]];
785                     }
786 
787                     if (!Type.exists(this.elementsByName[name + post])) {
788                         return name + post;
789                     }
790                 }
791                 indices[0] = possibleNames.length;
792 
793                 for (i = 1; i < maxNameLength; i++) {
794                     if (indices[i - 1] === possibleNames.length) {
795                         indices[i - 1] = 1;
796                         indices[i] += 1;
797                     }
798                 }
799             }
800 
801             return '';
802         },
803 
804         /**
805          * Generates unique id for a board. The result is randomly generated and prefixed with 'jxgBoard'.
806          * @returns {String} Unique id for a board.
807          */
808         generateId: function () {
809             var r = 1;
810 
811             // as long as we don't have a unique id generate a new one
812             while (Type.exists(JXG.boards['jxgBoard' + r])) {
813                 r = Math.round(Math.random() * 65535);
814             }
815 
816             return 'jxgBoard' + r;
817         },
818 
819         /**
820          * Composes an id for an element. If the ID is empty ('' or null) a new ID is generated, depending on the
821          * object type. As a side effect {@link JXG.Board#numObjects}
822          * is updated.
823          * @param {Object} obj Reference of an geometry object that needs an id.
824          * @param {Number} type Type of the object.
825          * @returns {String} Unique id for an element.
826          */
827         setId: function (obj, type) {
828             var randomNumber,
829                 num = this.numObjects,
830                 elId = obj.id;
831 
832             this.numObjects += 1;
833 
834             // If no id is provided or id is empty string, a new one is chosen
835             if (elId === '' || !Type.exists(elId)) {
836                 elId = this.id + type + num;
837                 while (Type.exists(this.objects[elId])) {
838                     randomNumber = Math.round(Math.random() * 65535);
839                     elId = this.id + type + num + '-' + randomNumber;
840                 }
841             }
842 
843             obj.id = elId;
844             this.objects[elId] = obj;
845             obj._pos = this.objectsList.length;
846             this.objectsList[this.objectsList.length] = obj;
847 
848             return elId;
849         },
850 
851         /**
852          * After construction of the object the visibility is set
853          * and the label is constructed if necessary.
854          * @param {Object} obj The object to add.
855          */
856         finalizeAdding: function (obj) {
857             if (Type.evaluate(obj.visProp.visible) === false) {
858                 this.renderer.display(obj, false);
859             }
860         },
861 
862         finalizeLabel: function (obj) {
863             if (
864                 obj.hasLabel &&
865                 !Type.evaluate(obj.label.visProp.islabel) &&
866                 Type.evaluate(obj.label.visProp.visible) === false
867             ) {
868                 this.renderer.display(obj.label, false);
869             }
870         },
871 
872         /**********************************************************
873          *
874          * Event Handler helpers
875          *
876          **********************************************************/
877 
878         /**
879          * Returns false if the event has been triggered faster than the maximum frame rate.
880          *
881          * @param {Event} evt Event object given by the browser (unused)
882          * @returns {Boolean} If the event has been triggered faster than the maximum frame rate, false is returned.
883          * @private
884          * @see JXG.Board#pointerMoveListener
885          * @see JXG.Board#touchMoveListener
886          * @see JXG.Board#mouseMoveListener
887          */
888         checkFrameRate: function (evt) {
889             var handleEvt = false,
890                 time = new Date().getTime();
891 
892             if (Type.exists(evt.pointerId) && this.touchMoveLastId !== evt.pointerId) {
893                 handleEvt = true;
894                 this.touchMoveLastId = evt.pointerId;
895             }
896             if (!handleEvt && (time - this.touchMoveLast) * this.attr.maxframerate >= 1000) {
897                 handleEvt = true;
898             }
899             if (handleEvt) {
900                 this.touchMoveLast = time;
901             }
902             return handleEvt;
903         },
904 
905         /**
906          * Calculates mouse coordinates relative to the boards container.
907          * @returns {Array} Array of coordinates relative the boards container top left corner.
908          */
909         getCoordsTopLeftCorner: function () {
910             var cPos,
911                 doc,
912                 crect,
913                 // In ownerDoc we need the 'real' document object.
914                 // The first version is used in the case of shadowDom,
915                 // the second case in the 'normal' case.
916                 ownerDoc = this.document.ownerDocument || this.document,
917                 docElement = ownerDoc.documentElement || this.document.body.parentNode,
918                 docBody = ownerDoc.body,
919                 container = this.containerObj,
920                 // viewport, content,
921                 zoom,
922                 o;
923 
924             /**
925              * During drags and origin moves the container element is usually not changed.
926              * Check the position of the upper left corner at most every 1000 msecs
927              */
928             if (
929                 this.cPos.length > 0 &&
930                 (this.mode === this.BOARD_MODE_DRAG ||
931                     this.mode === this.BOARD_MODE_MOVE_ORIGIN ||
932                     new Date().getTime() - this.positionAccessLast < 1000)
933             ) {
934                 return this.cPos;
935             }
936             this.positionAccessLast = new Date().getTime();
937 
938             // Check if getBoundingClientRect exists. If so, use this as this covers *everything*
939             // even CSS3D transformations etc.
940             // Supported by all browsers but IE 6, 7.
941 
942             if (container.getBoundingClientRect) {
943                 crect = container.getBoundingClientRect();
944 
945                 zoom = 1.0;
946                 // Recursively search for zoom style entries.
947                 // This is necessary for reveal.js on webkit.
948                 // It fails if the user does zooming
949                 o = container;
950                 while (o && Type.exists(o.parentNode)) {
951                     if (
952                         Type.exists(o.style) &&
953                         Type.exists(o.style.zoom) &&
954                         o.style.zoom !== ''
955                     ) {
956                         zoom *= parseFloat(o.style.zoom);
957                     }
958                     o = o.parentNode;
959                 }
960                 cPos = [crect.left * zoom, crect.top * zoom];
961 
962                 // add border width
963                 cPos[0] += Env.getProp(container, 'border-left-width');
964                 cPos[1] += Env.getProp(container, 'border-top-width');
965 
966                 // vml seems to ignore paddings
967                 if (this.renderer.type !== 'vml') {
968                     // add padding
969                     cPos[0] += Env.getProp(container, 'padding-left');
970                     cPos[1] += Env.getProp(container, 'padding-top');
971                 }
972 
973                 this.cPos = cPos.slice();
974                 return this.cPos;
975             }
976 
977             //
978             //  OLD CODE
979             //  IE 6-7 only:
980             //
981             cPos = Env.getOffset(container);
982             doc = this.document.documentElement.ownerDocument;
983 
984             if (!this.containerObj.currentStyle && doc.defaultView) {
985                 // Non IE
986                 // this is for hacks like this one used in wordpress for the admin bar:
987                 // html { margin-top: 28px }
988                 // seems like it doesn't work in IE
989 
990                 cPos[0] += Env.getProp(docElement, 'margin-left');
991                 cPos[1] += Env.getProp(docElement, 'margin-top');
992 
993                 cPos[0] += Env.getProp(docElement, 'border-left-width');
994                 cPos[1] += Env.getProp(docElement, 'border-top-width');
995 
996                 cPos[0] += Env.getProp(docElement, 'padding-left');
997                 cPos[1] += Env.getProp(docElement, 'padding-top');
998             }
999 
1000             if (docBody) {
1001                 cPos[0] += Env.getProp(docBody, 'left');
1002                 cPos[1] += Env.getProp(docBody, 'top');
1003             }
1004 
1005             // Google Translate offers widgets for web authors. These widgets apparently tamper with the clientX
1006             // and clientY coordinates of the mouse events. The minified sources seem to be the only publicly
1007             // available version so we're doing it the hacky way: Add a fixed offset.
1008             // see https://groups.google.com/d/msg/google-translate-general/H2zj0TNjjpY/jw6irtPlCw8J
1009             if (typeof google === 'object' && google.translate) {
1010                 cPos[0] += 10;
1011                 cPos[1] += 25;
1012             }
1013 
1014             // add border width
1015             cPos[0] += Env.getProp(container, 'border-left-width');
1016             cPos[1] += Env.getProp(container, 'border-top-width');
1017 
1018             // vml seems to ignore paddings
1019             if (this.renderer.type !== 'vml') {
1020                 // add padding
1021                 cPos[0] += Env.getProp(container, 'padding-left');
1022                 cPos[1] += Env.getProp(container, 'padding-top');
1023             }
1024 
1025             cPos[0] += this.attr.offsetx;
1026             cPos[1] += this.attr.offsety;
1027 
1028             this.cPos = cPos.slice();
1029             return this.cPos;
1030         },
1031 
1032         /**
1033          * This function divides the board into 9 sections and returns an array <tt>[u,v]</tt> which symbolizes the location of <tt>position</tt>.
1034          * Optional a <tt>margin</tt> to the inner of the board is respected.<br>
1035          *
1036          * @name Board#getPointLoc
1037          * @param {Array} position Array of requested position <tt>[x, y]</tt> or <tt>[w, x, y]</tt>.
1038          * @param {Array|Number} [margin] Optional margin for the inner of the board: <tt>[top, right, bottom, left]</tt>. A single number <tt>m</tt> is interpreted as <tt>[m, m, m, m]</tt>.
1039          * @returns {Array} [u,v] with the following meanings:
1040          * <pre>
1041          *     v    u > |   -1    |    0   |    1   |
1042          * ------------------------------------------
1043          *     1        | [-1,1]  |  [0,1] |  [1,1] |
1044          * ------------------------------------------
1045          *     0        | [-1,0]  |  Board |  [1,0] |
1046          * ------------------------------------------
1047          *    -1        | [-1,-1] | [0,-1] | [1,-1] |
1048          * </pre>
1049          * Positions inside the board (minus margin) return the value <tt>[0,0]</tt>.
1050          *
1051          * @example
1052          *      var point1, point2, point3, point4, margin,
1053          *             p1Location, p2Location, p3Location, p4Location,
1054          *             helppoint1, helppoint2, helppoint3, helppoint4;
1055          *
1056          *      // margin to make the boundingBox virtually smaller
1057          *      margin = [2,2,2,2];
1058          *
1059          *      // Points which are seen on screen
1060          *      point1 = board.create('point', [0,0]);
1061          *      point2 = board.create('point', [0,7]);
1062          *      point3 = board.create('point', [7,7]);
1063          *      point4 = board.create('point', [-7,-5]);
1064          *
1065          *      p1Location = board.getPointLoc(point1.coords.usrCoords, margin);
1066          *      p2Location = board.getPointLoc(point2.coords.usrCoords, margin);
1067          *      p3Location = board.getPointLoc(point3.coords.usrCoords, margin);
1068          *      p4Location = board.getPointLoc(point4.coords.usrCoords, margin);
1069          *
1070          *      // Text seen on screen
1071          *      board.create('text', [1,-1, "getPointLoc(A): " + "[" + p1Location + "]"])
1072          *      board.create('text', [1,-2, "getPointLoc(B): " + "[" + p2Location + "]"])
1073          *      board.create('text', [1,-3, "getPointLoc(C): " + "[" + p3Location + "]"])
1074          *      board.create('text', [1,-4, "getPointLoc(D): " + "[" + p4Location + "]"])
1075          *
1076          *
1077          *      // Helping points that are used to create the helping lines
1078          *      helppoint1 = board.create('point', [(function (){
1079          *          var bbx = board.getBoundingBox();
1080          *          return [bbx[2] - 2, bbx[1] -2];
1081          *      })], {
1082          *          visible: false,
1083          *      })
1084          *
1085          *      helppoint2 = board.create('point', [(function (){
1086          *          var bbx = board.getBoundingBox();
1087          *          return [bbx[0] + 2, bbx[1] -2];
1088          *      })], {
1089          *          visible: false,
1090          *      })
1091          *
1092          *      helppoint3 = board.create('point', [(function (){
1093          *          var bbx = board.getBoundingBox();
1094          *          return [bbx[0]+ 2, bbx[3] + 2];
1095          *      })],{
1096          *          visible: false,
1097          *      })
1098          *
1099          *      helppoint4 = board.create('point', [(function (){
1100          *          var bbx = board.getBoundingBox();
1101          *          return [bbx[2] -2, bbx[3] + 2];
1102          *      })], {
1103          *          visible: false,
1104          *      })
1105          *
1106          *      // Helping lines to visualize the 9 sectors and the margin
1107          *      board.create('line', [helppoint1, helppoint2]);
1108          *      board.create('line', [helppoint2, helppoint3]);
1109          *      board.create('line', [helppoint3, helppoint4]);
1110          *      board.create('line', [helppoint4, helppoint1]);
1111          *
1112          * </pre><div id="JXG4b3efef5-839d-4fac-bad1-7a14c0a89c70" class="jxgbox" style="width: 500px; height: 500px;"></div>
1113          * <script type="text/javascript">
1114          *     (function() {
1115          *         var board = JXG.JSXGraph.initBoard('JXG4b3efef5-839d-4fac-bad1-7a14c0a89c70',
1116          *             {boundingbox: [-8, 8, 8,-8], maxboundingbox: [-7.5,7.5,7.5,-7.5], axis: true, showcopyright: false, shownavigation: false, showZoom: false});
1117          *     var point1, point2, point3, point4, margin,
1118          *             p1Location, p2Location, p3Location, p4Location,
1119          *             helppoint1, helppoint2, helppoint3, helppoint4;
1120          *
1121          *      // margin to make the boundingBox virtually smaller
1122          *      margin = [2,2,2,2];
1123          *
1124          *      // Points which are seen on screen
1125          *      point1 = board.create('point', [0,0]);
1126          *      point2 = board.create('point', [0,7]);
1127          *      point3 = board.create('point', [7,7]);
1128          *      point4 = board.create('point', [-7,-5]);
1129          *
1130          *      p1Location = board.getPointLoc(point1.coords.usrCoords, margin);
1131          *      p2Location = board.getPointLoc(point2.coords.usrCoords, margin);
1132          *      p3Location = board.getPointLoc(point3.coords.usrCoords, margin);
1133          *      p4Location = board.getPointLoc(point4.coords.usrCoords, margin);
1134          *
1135          *      // Text seen on screen
1136          *      board.create('text', [1,-1, "getPointLoc(A): " + "[" + p1Location + "]"])
1137          *      board.create('text', [1,-2, "getPointLoc(B): " + "[" + p2Location + "]"])
1138          *      board.create('text', [1,-3, "getPointLoc(C): " + "[" + p3Location + "]"])
1139          *      board.create('text', [1,-4, "getPointLoc(D): " + "[" + p4Location + "]"])
1140          *
1141          *
1142          *      // Helping points that are used to create the helping lines
1143          *      helppoint1 = board.create('point', [(function (){
1144          *          var bbx = board.getBoundingBox();
1145          *          return [bbx[2] - 2, bbx[1] -2];
1146          *      })], {
1147          *          visible: false,
1148          *      })
1149          *
1150          *      helppoint2 = board.create('point', [(function (){
1151          *          var bbx = board.getBoundingBox();
1152          *          return [bbx[0] + 2, bbx[1] -2];
1153          *      })], {
1154          *          visible: false,
1155          *      })
1156          *
1157          *      helppoint3 = board.create('point', [(function (){
1158          *          var bbx = board.getBoundingBox();
1159          *          return [bbx[0]+ 2, bbx[3] + 2];
1160          *      })],{
1161          *          visible: false,
1162          *      })
1163          *
1164          *      helppoint4 = board.create('point', [(function (){
1165          *          var bbx = board.getBoundingBox();
1166          *          return [bbx[2] -2, bbx[3] + 2];
1167          *      })], {
1168          *          visible: false,
1169          *      })
1170          *
1171          *      // Helping lines to visualize the 9 sectors and the margin
1172          *      board.create('line', [helppoint1, helppoint2]);
1173          *      board.create('line', [helppoint2, helppoint3]);
1174          *      board.create('line', [helppoint3, helppoint4]);
1175          *      board.create('line', [helppoint4, helppoint1]);
1176          *  })();
1177          *
1178          * </script><pre>
1179          *
1180          */
1181         getPointLoc: function (position, margin) {
1182             var bbox, pos, res, marg;
1183 
1184             bbox = this.getBoundingBox();
1185             pos = position;
1186             if (pos.length === 2) {
1187                 pos.unshift(undefined);
1188             }
1189             res = [0, 0];
1190             marg = margin || 0;
1191             if (Type.isNumber(marg)) {
1192                 marg = [marg, marg, marg, marg];
1193             }
1194 
1195             if (pos[1] > (bbox[2] - marg[1])) {
1196                 res[0] = 1;
1197             }
1198             if (pos[1] < (bbox[0] + marg[3])) {
1199                 res[0] = -1;
1200             }
1201 
1202             if (pos[2] > (bbox[1] - marg[0])) {
1203                 res[1] = 1;
1204             }
1205             if (pos[2] < (bbox[3] + marg[2])) {
1206                 res[1] = -1;
1207             }
1208 
1209             return res;
1210         },
1211 
1212         /**
1213          * This function calculates where the origin is located (@link Board#getPointLoc).
1214          * Optional a <tt>margin</tt> to the inner of the board is respected.<br>
1215          *
1216          * @name Board#getLocationOrigin
1217          * @param {Array|Number} [margin] Optional margin for the inner of the board: <tt>[top, right, bottom, left]</tt>. A single number <tt>m</tt> is interpreted as <tt>[m, m, m, m]</tt>.
1218          * @returns {Array} [u,v] which shows where the origin is located (@link Board#getPointLoc).
1219          */
1220         getLocationOrigin: function (margin) {
1221             return this.getPointLoc([0, 0], margin);
1222         },
1223 
1224         /**
1225          * Get the position of the pointing device in screen coordinates, relative to the upper left corner
1226          * of the host tag.
1227          * @param {Event} e Event object given by the browser.
1228          * @param {Number} [i] Only use in case of touch events. This determines which finger to use and should not be set
1229          * for mouseevents.
1230          * @returns {Array} Contains the mouse coordinates in screen coordinates, ready for {@link JXG.Coords}
1231          */
1232         getMousePosition: function (e, i) {
1233             var cPos = this.getCoordsTopLeftCorner(),
1234                 absPos,
1235                 v;
1236 
1237             // Position of cursor using clientX/Y
1238             absPos = Env.getPosition(e, i, this.document);
1239 
1240             // Old:
1241             // This seems to be obsolete anyhow:
1242             // "In case there has been no down event before."
1243             // if (!Type.exists(this.cssTransMat)) {
1244             // this.updateCSSTransforms();
1245             // }
1246             // New:
1247             // We have to update the CSS transform matrix all the time,
1248             // since libraries like ZIMJS do not notify JSXGraph about a change.
1249             // In particular, sending a resize event event to JSXGraph
1250             // would be necessary.
1251             this.updateCSSTransforms();
1252 
1253             // Position relative to the top left corner
1254             v = [1, absPos[0] - cPos[0], absPos[1] - cPos[1]];
1255             v = Mat.matVecMult(this.cssTransMat, v);
1256             v[1] /= v[0];
1257             v[2] /= v[0];
1258             return [v[1], v[2]];
1259 
1260             // Method without CSS transformation
1261             /*
1262              return [absPos[0] - cPos[0], absPos[1] - cPos[1]];
1263              */
1264         },
1265 
1266         /**
1267          * Initiate moving the origin. This is used in mouseDown and touchStart listeners.
1268          * @param {Number} x Current mouse/touch coordinates
1269          * @param {Number} y Current mouse/touch coordinates
1270          */
1271         initMoveOrigin: function (x, y) {
1272             this.drag_dx = x - this.origin.scrCoords[1];
1273             this.drag_dy = y - this.origin.scrCoords[2];
1274 
1275             this.mode = this.BOARD_MODE_MOVE_ORIGIN;
1276             this.updateQuality = this.BOARD_QUALITY_LOW;
1277         },
1278 
1279         /**
1280          * Collects all elements below the current mouse pointer and fulfilling the following constraints:
1281          * <ul><li>isDraggable</li><li>visible</li><li>not fixed</li><li>not frozen</li></ul>
1282          * @param {Number} x Current mouse/touch coordinates
1283          * @param {Number} y current mouse/touch coordinates
1284          * @param {Object} evt An event object
1285          * @param {String} type What type of event? 'touch', 'mouse' or 'pen'.
1286          * @returns {Array} A list of geometric elements.
1287          */
1288         initMoveObject: function (x, y, evt, type) {
1289             var pEl,
1290                 el,
1291                 collect = [],
1292                 offset = [],
1293                 haspoint,
1294                 len = this.objectsList.length,
1295                 dragEl = { visProp: { layer: -10000 } };
1296 
1297             // Store status of key presses for 3D movement
1298             this._shiftKey = evt.shiftKey;
1299             this._ctrlKey = evt.ctrlKey;
1300 
1301             //for (el in this.objects) {
1302             for (el = 0; el < len; el++) {
1303                 pEl = this.objectsList[el];
1304                 haspoint = pEl.hasPoint && pEl.hasPoint(x, y);
1305 
1306                 if (pEl.visPropCalc.visible && haspoint) {
1307                     pEl.triggerEventHandlers([type + 'down', 'down'], [evt]);
1308                     this.downObjects.push(pEl);
1309                 }
1310 
1311                 if (haspoint &&
1312                     pEl.isDraggable &&
1313                     pEl.visPropCalc.visible &&
1314                     ((this.geonextCompatibilityMode &&
1315                         (Type.isPoint(pEl) || pEl.elementClass === Const.OBJECT_CLASS_TEXT)) ||
1316                         !this.geonextCompatibilityMode) &&
1317                     !Type.evaluate(pEl.visProp.fixed)
1318                     /*(!pEl.visProp.frozen) &&*/
1319                 ) {
1320                     // Elements in the highest layer get priority.
1321                     if (
1322                         pEl.visProp.layer > dragEl.visProp.layer ||
1323                         (pEl.visProp.layer === dragEl.visProp.layer &&
1324                             pEl.lastDragTime.getTime() >= dragEl.lastDragTime.getTime())
1325                     ) {
1326                         // If an element and its label have the focus
1327                         // simultaneously, the element is taken.
1328                         // This only works if we assume that every browser runs
1329                         // through this.objects in the right order, i.e. an element A
1330                         // added before element B turns up here before B does.
1331                         if (
1332                             !this.attr.ignorelabels ||
1333                             !Type.exists(dragEl.label) ||
1334                             pEl !== dragEl.label
1335                         ) {
1336                             dragEl = pEl;
1337                             collect.push(dragEl);
1338                             // Save offset for large coords elements.
1339                             if (Type.exists(dragEl.coords)) {
1340                                 offset.push(
1341                                     Statistics.subtract(dragEl.coords.scrCoords.slice(1), [
1342                                         x,
1343                                         y
1344                                     ])
1345                                 );
1346                             } else {
1347                                 offset.push([0, 0]);
1348                             }
1349 
1350                             // we can't drop out of this loop because of the event handling system
1351                             //if (this.attr.takefirst) {
1352                             //    return collect;
1353                             //}
1354                         }
1355                     }
1356                 }
1357             }
1358 
1359             if (this.attr.drag.enabled && collect.length > 0) {
1360                 this.mode = this.BOARD_MODE_DRAG;
1361             }
1362 
1363             // A one-element array is returned.
1364             if (this.attr.takefirst) {
1365                 collect.length = 1;
1366                 this._drag_offset = offset[0];
1367             } else {
1368                 collect = collect.slice(-1);
1369                 this._drag_offset = offset[offset.length - 1];
1370             }
1371 
1372             if (!this._drag_offset) {
1373                 this._drag_offset = [0, 0];
1374             }
1375 
1376             // Move drag element to the top of the layer
1377             if (this.renderer.type === 'svg' &&
1378                 Type.exists(collect[0]) &&
1379                 Type.evaluate(collect[0].visProp.dragtotopoflayer) &&
1380                 collect.length === 1 &&
1381                 Type.exists(collect[0].rendNode)
1382             ) {
1383                 collect[0].rendNode.parentNode.appendChild(collect[0].rendNode);
1384             }
1385 
1386             // // Init rotation angle and scale factor for two finger movements
1387             // this.previousRotation = 0.0;
1388             // this.previousScale = 1.0;
1389 
1390             if (collect.length >= 1) {
1391                 collect[0].highlight(true);
1392                 this.triggerEventHandlers(['mousehit', 'hit'], [evt, collect[0]]);
1393             }
1394 
1395             return collect;
1396         },
1397 
1398         /**
1399          * Moves an object.
1400          * @param {Number} x Coordinate
1401          * @param {Number} y Coordinate
1402          * @param {Object} o The touch object that is dragged: {JXG.Board#mouse} or {JXG.Board#touches}.
1403          * @param {Object} evt The event object.
1404          * @param {String} type Mouse or touch event?
1405          */
1406         moveObject: function (x, y, o, evt, type) {
1407             var newPos = new Coords(
1408                 Const.COORDS_BY_SCREEN,
1409                 this.getScrCoordsOfMouse(x, y),
1410                 this
1411             ),
1412                 drag,
1413                 dragScrCoords,
1414                 newDragScrCoords;
1415 
1416             if (!(o && o.obj)) {
1417                 return;
1418             }
1419             drag = o.obj;
1420 
1421             // Avoid updates for very small movements of coordsElements, see below
1422             if (drag.coords) {
1423                 dragScrCoords = drag.coords.scrCoords.slice();
1424             }
1425 
1426             this.addLogEntry('drag', drag, newPos.usrCoords.slice(1));
1427 
1428             // Store the position.
1429             this.drag_position = [newPos.scrCoords[1], newPos.scrCoords[2]];
1430             this.drag_position = Statistics.add(this.drag_position, this._drag_offset);
1431 
1432             // Store status of key presses for 3D movement
1433             this._shiftKey = evt.shiftKey;
1434             this._ctrlKey = evt.ctrlKey;
1435 
1436             //
1437             // We have to distinguish between CoordsElements and other elements like lines.
1438             // The latter need the difference between two move events.
1439             if (Type.exists(drag.coords)) {
1440                 drag.setPositionDirectly(Const.COORDS_BY_SCREEN, this.drag_position);
1441             } else {
1442                 this.displayInfobox(false);
1443                 // Hide infobox in case the user has touched an intersection point
1444                 // and drags the underlying line now.
1445 
1446                 if (!isNaN(o.targets[0].Xprev + o.targets[0].Yprev)) {
1447                     drag.setPositionDirectly(
1448                         Const.COORDS_BY_SCREEN,
1449                         [newPos.scrCoords[1], newPos.scrCoords[2]],
1450                         [o.targets[0].Xprev, o.targets[0].Yprev]
1451                     );
1452                 }
1453                 // Remember the actual position for the next move event. Then we are able to
1454                 // compute the difference vector.
1455                 o.targets[0].Xprev = newPos.scrCoords[1];
1456                 o.targets[0].Yprev = newPos.scrCoords[2];
1457             }
1458             // This may be necessary for some gliders and labels
1459             if (Type.exists(drag.coords)) {
1460                 drag.prepareUpdate().update(false).updateRenderer();
1461                 this.updateInfobox(drag);
1462                 drag.prepareUpdate().update(true).updateRenderer();
1463             }
1464 
1465             if (drag.coords) {
1466                 newDragScrCoords = drag.coords.scrCoords;
1467             }
1468             // No updates for very small movements of coordsElements
1469             if (
1470                 !drag.coords ||
1471                 dragScrCoords[1] !== newDragScrCoords[1] ||
1472                 dragScrCoords[2] !== newDragScrCoords[2]
1473             ) {
1474                 drag.triggerEventHandlers([type + 'drag', 'drag'], [evt]);
1475 
1476                 this.update();
1477             }
1478             drag.highlight(true);
1479             this.triggerEventHandlers(['mousehit', 'hit'], [evt, drag]);
1480 
1481             drag.lastDragTime = new Date();
1482         },
1483 
1484         /**
1485          * Moves elements in multitouch mode.
1486          * @param {Array} p1 x,y coordinates of first touch
1487          * @param {Array} p2 x,y coordinates of second touch
1488          * @param {Object} o The touch object that is dragged: {JXG.Board#touches}.
1489          * @param {Object} evt The event object that lead to this movement.
1490          */
1491         twoFingerMove: function (o, id, evt) {
1492             var drag;
1493 
1494             if (Type.exists(o) && Type.exists(o.obj)) {
1495                 drag = o.obj;
1496             } else {
1497                 return;
1498             }
1499 
1500             if (
1501                 drag.elementClass === Const.OBJECT_CLASS_LINE ||
1502                 drag.type === Const.OBJECT_TYPE_POLYGON
1503             ) {
1504                 this.twoFingerTouchObject(o.targets, drag, id);
1505             } else if (drag.elementClass === Const.OBJECT_CLASS_CIRCLE) {
1506                 this.twoFingerTouchCircle(o.targets, drag, id);
1507             }
1508 
1509             if (evt) {
1510                 drag.triggerEventHandlers(['touchdrag', 'drag'], [evt]);
1511             }
1512         },
1513 
1514         /**
1515          * Compute the transformation matrix to move an element according to the
1516          * previous and actual positions of finger 1 and finger 2.
1517          * See also https://math.stackexchange.com/questions/4010538/solve-for-2d-translation-rotation-and-scale-given-two-touch-point-movements
1518          *
1519          * @param {Object} finger1 Actual and previous position of finger 1
1520          * @param {Object} finger1 Actual and previous position of finger 1
1521          * @param {Boolean} scalable Flag if element may be scaled
1522          * @param {Boolean} rotatable Flag if element may be rotated
1523          * @returns {Array}
1524          */
1525         getTwoFingerTransform(finger1, finger2, scalable, rotatable) {
1526             var crd,
1527                 x1, y1, x2, y2,
1528                 dx, dy,
1529                 xx1, yy1, xx2, yy2,
1530                 dxx, dyy,
1531                 C, S, LL, tx, ty, lbda;
1532 
1533             crd = new Coords(Const.COORDS_BY_SCREEN, [finger1.Xprev, finger1.Yprev], this).usrCoords;
1534             x1 = crd[1];
1535             y1 = crd[2];
1536             crd = new Coords(Const.COORDS_BY_SCREEN, [finger2.Xprev, finger2.Yprev], this).usrCoords;
1537             x2 = crd[1];
1538             y2 = crd[2];
1539 
1540             crd = new Coords(Const.COORDS_BY_SCREEN, [finger1.X, finger1.Y], this).usrCoords;
1541             xx1 = crd[1];
1542             yy1 = crd[2];
1543             crd = new Coords(Const.COORDS_BY_SCREEN, [finger2.X, finger2.Y], this).usrCoords;
1544             xx2 = crd[1];
1545             yy2 = crd[2];
1546 
1547             dx = x2 - x1;
1548             dy = y2 - y1;
1549             dxx = xx2 - xx1;
1550             dyy = yy2 - yy1;
1551 
1552             LL = dx * dx + dy * dy;
1553             C = (dxx * dx + dyy * dy) / LL;
1554             S = (dyy * dx - dxx * dy) / LL;
1555             if (!scalable) {
1556                 lbda = Mat.hypot(C, S);
1557                 C /= lbda;
1558                 S /= lbda;
1559             }
1560             if (!rotatable) {
1561                 S = 0;
1562             }
1563             tx = 0.5 * (xx1 + xx2 - C * (x1 + x2) + S * (y1 + y2));
1564             ty = 0.5 * (yy1 + yy2 - S * (x1 + x2) - C * (y1 + y2));
1565 
1566             return [1, 0, 0,
1567                 tx, C, -S,
1568                 ty, S, C];
1569         },
1570 
1571         /**
1572          * Moves, rotates and scales a line or polygon with two fingers.
1573          * <p>
1574          * If one vertex of the polygon snaps to the grid or to points or is not draggable,
1575          * two-finger-movement is cancelled.
1576          *
1577          * @param {Array} tar Array containing touch event objects: {JXG.Board#touches.targets}.
1578          * @param {object} drag The object that is dragged:
1579          * @param {Number} id pointerId of the event. In case of old touch event this is emulated.
1580          */
1581         twoFingerTouchObject: function (tar, drag, id) {
1582             var t, T,
1583                 ar, i, len, vp,
1584                 snap = false;
1585 
1586             if (
1587                 Type.exists(tar[0]) &&
1588                 Type.exists(tar[1]) &&
1589                 !isNaN(tar[0].Xprev + tar[0].Yprev + tar[1].Xprev + tar[1].Yprev)
1590             ) {
1591 
1592                 T = this.getTwoFingerTransform(
1593                     tar[0], tar[1],
1594                     Type.evaluate(drag.visProp.scalable),
1595                     Type.evaluate(drag.visProp.rotatable));
1596                 t = this.create('transform', T, { type: 'generic' });
1597                 t.update();
1598 
1599                 if (drag.elementClass === Const.OBJECT_CLASS_LINE) {
1600                     ar = [];
1601                     if (drag.point1.draggable()) {
1602                         ar.push(drag.point1);
1603                     }
1604                     if (drag.point2.draggable()) {
1605                         ar.push(drag.point2);
1606                     }
1607                     t.applyOnce(ar);
1608                 } else if (drag.type === Const.OBJECT_TYPE_POLYGON) {
1609                     len = drag.vertices.length - 1;
1610                     vp = drag.visProp;
1611                     snap = Type.evaluate(vp.snaptogrid) || Type.evaluate(vp.snaptopoints);
1612                     for (i = 0; i < len && !snap; ++i) {
1613                         vp = drag.vertices[i].visProp;
1614                         snap = snap || Type.evaluate(vp.snaptogrid) || Type.evaluate(vp.snaptopoints);
1615                         snap = snap || (!drag.vertices[i].draggable());
1616                     }
1617                     if (!snap) {
1618                         ar = [];
1619                         for (i = 0; i < len; ++i) {
1620                             if (drag.vertices[i].draggable()) {
1621                                 ar.push(drag.vertices[i]);
1622                             }
1623                         }
1624                         t.applyOnce(ar);
1625                     }
1626                 }
1627 
1628                 this.update();
1629                 drag.highlight(true);
1630             }
1631         },
1632 
1633         /*
1634          * Moves, rotates and scales a circle with two fingers.
1635          * @param {Array} tar Array containing touch event objects: {JXG.Board#touches.targets}.
1636          * @param {object} drag The object that is dragged:
1637          * @param {Number} id pointerId of the event. In case of old touch event this is emulated.
1638          */
1639         twoFingerTouchCircle: function (tar, drag, id) {
1640             var fixEl, moveEl, np, op, fix, d, alpha, t1, t2, t3, t4;
1641 
1642             if (drag.method === 'pointCircle' || drag.method === 'pointLine') {
1643                 return;
1644             }
1645 
1646             if (
1647                 Type.exists(tar[0]) &&
1648                 Type.exists(tar[1]) &&
1649                 !isNaN(tar[0].Xprev + tar[0].Yprev + tar[1].Xprev + tar[1].Yprev)
1650             ) {
1651                 if (id === tar[0].num) {
1652                     fixEl = tar[1];
1653                     moveEl = tar[0];
1654                 } else {
1655                     fixEl = tar[0];
1656                     moveEl = tar[1];
1657                 }
1658 
1659                 fix = new Coords(Const.COORDS_BY_SCREEN, [fixEl.Xprev, fixEl.Yprev], this)
1660                     .usrCoords;
1661                 // Previous finger position
1662                 op = new Coords(Const.COORDS_BY_SCREEN, [moveEl.Xprev, moveEl.Yprev], this)
1663                     .usrCoords;
1664                 // New finger position
1665                 np = new Coords(Const.COORDS_BY_SCREEN, [moveEl.X, moveEl.Y], this).usrCoords;
1666 
1667                 alpha = Geometry.rad(op.slice(1), fix.slice(1), np.slice(1));
1668 
1669                 // Rotate and scale by the movement of the second finger
1670                 t1 = this.create('transform', [-fix[1], -fix[2]], {
1671                     type: 'translate'
1672                 });
1673                 t2 = this.create('transform', [alpha], { type: 'rotate' });
1674                 t1.melt(t2);
1675                 if (Type.evaluate(drag.visProp.scalable)) {
1676                     d = Geometry.distance(fix, np) / Geometry.distance(fix, op);
1677                     t3 = this.create('transform', [d, d], { type: 'scale' });
1678                     t1.melt(t3);
1679                 }
1680                 t4 = this.create('transform', [fix[1], fix[2]], {
1681                     type: 'translate'
1682                 });
1683                 t1.melt(t4);
1684 
1685                 if (drag.center.draggable()) {
1686                     t1.applyOnce([drag.center]);
1687                 }
1688 
1689                 if (drag.method === 'twoPoints') {
1690                     if (drag.point2.draggable()) {
1691                         t1.applyOnce([drag.point2]);
1692                     }
1693                 } else if (drag.method === 'pointRadius') {
1694                     if (Type.isNumber(drag.updateRadius.origin)) {
1695                         drag.setRadius(drag.radius * d);
1696                     }
1697                 }
1698 
1699                 this.update(drag.center);
1700                 drag.highlight(true);
1701             }
1702         },
1703 
1704         highlightElements: function (x, y, evt, target) {
1705             var el,
1706                 pEl,
1707                 pId,
1708                 overObjects = {},
1709                 len = this.objectsList.length;
1710 
1711             // Elements  below the mouse pointer which are not highlighted yet will be highlighted.
1712             for (el = 0; el < len; el++) {
1713                 pEl = this.objectsList[el];
1714                 pId = pEl.id;
1715                 if (
1716                     Type.exists(pEl.hasPoint) &&
1717                     pEl.visPropCalc.visible &&
1718                     pEl.hasPoint(x, y)
1719                 ) {
1720                     // this is required in any case because otherwise the box won't be shown until the point is dragged
1721                     this.updateInfobox(pEl);
1722 
1723                     if (!Type.exists(this.highlightedObjects[pId])) {
1724                         // highlight only if not highlighted
1725                         overObjects[pId] = pEl;
1726                         pEl.highlight();
1727                         // triggers board event.
1728                         this.triggerEventHandlers(['mousehit', 'hit'], [evt, pEl, target]);
1729                     }
1730 
1731                     if (pEl.mouseover) {
1732                         pEl.triggerEventHandlers(['mousemove', 'move'], [evt]);
1733                     } else {
1734                         pEl.triggerEventHandlers(['mouseover', 'over'], [evt]);
1735                         pEl.mouseover = true;
1736                     }
1737                 }
1738             }
1739 
1740             for (el = 0; el < len; el++) {
1741                 pEl = this.objectsList[el];
1742                 pId = pEl.id;
1743                 if (pEl.mouseover) {
1744                     if (!overObjects[pId]) {
1745                         pEl.triggerEventHandlers(['mouseout', 'out'], [evt]);
1746                         pEl.mouseover = false;
1747                     }
1748                 }
1749             }
1750         },
1751 
1752         /**
1753          * Helper function which returns a reasonable starting point for the object being dragged.
1754          * Formerly known as initXYstart().
1755          * @private
1756          * @param {JXG.GeometryElement} obj The object to be dragged
1757          * @param {Array} targets Array of targets. It is changed by this function.
1758          */
1759         saveStartPos: function (obj, targets) {
1760             var xy = [],
1761                 i,
1762                 len;
1763 
1764             if (obj.type === Const.OBJECT_TYPE_TICKS) {
1765                 xy.push([1, NaN, NaN]);
1766             } else if (obj.elementClass === Const.OBJECT_CLASS_LINE) {
1767                 xy.push(obj.point1.coords.usrCoords);
1768                 xy.push(obj.point2.coords.usrCoords);
1769             } else if (obj.elementClass === Const.OBJECT_CLASS_CIRCLE) {
1770                 xy.push(obj.center.coords.usrCoords);
1771                 if (obj.method === 'twoPoints') {
1772                     xy.push(obj.point2.coords.usrCoords);
1773                 }
1774             } else if (obj.type === Const.OBJECT_TYPE_POLYGON) {
1775                 len = obj.vertices.length - 1;
1776                 for (i = 0; i < len; i++) {
1777                     xy.push(obj.vertices[i].coords.usrCoords);
1778                 }
1779             } else if (obj.type === Const.OBJECT_TYPE_SECTOR) {
1780                 xy.push(obj.point1.coords.usrCoords);
1781                 xy.push(obj.point2.coords.usrCoords);
1782                 xy.push(obj.point3.coords.usrCoords);
1783             } else if (Type.isPoint(obj) || obj.type === Const.OBJECT_TYPE_GLIDER) {
1784                 xy.push(obj.coords.usrCoords);
1785             } else if (obj.elementClass === Const.OBJECT_CLASS_CURVE) {
1786                 // if (Type.exists(obj.parents)) {
1787                 //     len = obj.parents.length;
1788                 //     if (len > 0) {
1789                 //         for (i = 0; i < len; i++) {
1790                 //             xy.push(this.select(obj.parents[i]).coords.usrCoords);
1791                 //         }
1792                 //     } else
1793                 // }
1794                 if (obj.points.length > 0) {
1795                     xy.push(obj.points[0].usrCoords);
1796                 }
1797             } else {
1798                 try {
1799                     xy.push(obj.coords.usrCoords);
1800                 } catch (e) {
1801                     JXG.debug(
1802                         'JSXGraph+ saveStartPos: obj.coords.usrCoords not available: ' + e
1803                     );
1804                 }
1805             }
1806 
1807             len = xy.length;
1808             for (i = 0; i < len; i++) {
1809                 targets.Zstart.push(xy[i][0]);
1810                 targets.Xstart.push(xy[i][1]);
1811                 targets.Ystart.push(xy[i][2]);
1812             }
1813         },
1814 
1815         mouseOriginMoveStart: function (evt) {
1816             var r, pos;
1817 
1818             r = this._isRequiredKeyPressed(evt, 'pan');
1819             if (r) {
1820                 pos = this.getMousePosition(evt);
1821                 this.initMoveOrigin(pos[0], pos[1]);
1822             }
1823 
1824             return r;
1825         },
1826 
1827         mouseOriginMove: function (evt) {
1828             var r = this.mode === this.BOARD_MODE_MOVE_ORIGIN,
1829                 pos;
1830 
1831             if (r) {
1832                 pos = this.getMousePosition(evt);
1833                 this.moveOrigin(pos[0], pos[1], true);
1834             }
1835 
1836             return r;
1837         },
1838 
1839         /**
1840          * Start moving the origin with one finger.
1841          * @private
1842          * @param  {Object} evt Event from touchStartListener
1843          * @return {Boolean}   returns if the origin is moved.
1844          */
1845         touchStartMoveOriginOneFinger: function (evt) {
1846             var touches = evt[JXG.touchProperty],
1847                 conditions,
1848                 pos;
1849 
1850             conditions =
1851                 this.attr.pan.enabled && !this.attr.pan.needtwofingers && touches.length === 1;
1852 
1853             if (conditions) {
1854                 pos = this.getMousePosition(evt, 0);
1855                 this.initMoveOrigin(pos[0], pos[1]);
1856             }
1857 
1858             return conditions;
1859         },
1860 
1861         /**
1862          * Move the origin with one finger
1863          * @private
1864          * @param  {Object} evt Event from touchMoveListener
1865          * @return {Boolean}     returns if the origin is moved.
1866          */
1867         touchOriginMove: function (evt) {
1868             var r = this.mode === this.BOARD_MODE_MOVE_ORIGIN,
1869                 pos;
1870 
1871             if (r) {
1872                 pos = this.getMousePosition(evt, 0);
1873                 this.moveOrigin(pos[0], pos[1], true);
1874             }
1875 
1876             return r;
1877         },
1878 
1879         /**
1880          * Stop moving the origin with one finger
1881          * @return {null} null
1882          * @private
1883          */
1884         originMoveEnd: function () {
1885             this.updateQuality = this.BOARD_QUALITY_HIGH;
1886             this.mode = this.BOARD_MODE_NONE;
1887         },
1888 
1889         /**********************************************************
1890          *
1891          * Event Handler
1892          *
1893          **********************************************************/
1894 
1895         /**
1896          * Add all possible event handlers to the board object
1897          * which move objects, i.e. mouse, pointer and touch events.
1898          */
1899         addEventHandlers: function () {
1900             if (Env.supportsPointerEvents()) {
1901                 this.addPointerEventHandlers();
1902             } else {
1903                 this.addMouseEventHandlers();
1904                 this.addTouchEventHandlers();
1905             }
1906 
1907             // This one produces errors on IE
1908             // // Env.addEvent(this.containerObj, 'contextmenu', function (e) { e.preventDefault(); return false;}, this);
1909 
1910             // This one works on IE, Firefox and Chromium with default configurations. On some Safari
1911             // or Opera versions the user must explicitly allow the deactivation of the context menu.
1912             if (this.containerObj !== null) {
1913                 this.containerObj.oncontextmenu = function (e) {
1914                     if (Type.exists(e)) {
1915                         e.preventDefault();
1916                     }
1917                     return false;
1918                 };
1919             }
1920 
1921             // this.addKeyboardEventHandlers();
1922         },
1923 
1924         /**
1925          * Add resize event handlers
1926          *
1927          */
1928         addResizeEventHandlers: function () {
1929             if (Env.isBrowser) {
1930                 try {
1931                     // Supported by all new browsers
1932                     // resizeObserver: triggered if size of the JSXGraph div changes.
1933                     this.startResizeObserver();
1934                 } catch (err) {
1935                     // Certain Safari and edge version do not support
1936                     // resizeObserver, but intersectionObserver.
1937                     // resize event: triggered if size of window changes
1938                     Env.addEvent(window, 'resize', this.resizeListener, this);
1939                     // intersectionObserver: triggered if JSXGraph becomes visible.
1940                     this.startIntersectionObserver();
1941                 }
1942                 // Scroll event: needs to be captured since on mobile devices
1943                 // sometimes a header bar is displayed / hidden, which triggers a
1944                 // resize event.
1945                 Env.addEvent(window, 'scroll', this.scrollListener, this);
1946             }
1947         },
1948 
1949         /**
1950          * Remove all event handlers from the board object
1951          */
1952         removeEventHandlers: function () {
1953             this.removeMouseEventHandlers();
1954             this.removeTouchEventHandlers();
1955             this.removePointerEventHandlers();
1956 
1957             this.removeFullscreenEventHandlers();
1958             this.removeKeyboardEventHandlers();
1959 
1960             if (Env.isBrowser) {
1961                 if (Type.exists(this.resizeObserver)) {
1962                     this.stopResizeObserver();
1963                 } else {
1964                     Env.removeEvent(window, 'resize', this.resizeListener, this);
1965                     this.stopIntersectionObserver();
1966                 }
1967                 Env.removeEvent(window, 'scroll', this.scrollListener, this);
1968             }
1969         },
1970 
1971         /**
1972          * Registers pointer event handlers.
1973          */
1974         addPointerEventHandlers: function () {
1975             if (!this.hasPointerHandlers && Env.isBrowser) {
1976                 var moveTarget = this.attr.movetarget || this.containerObj;
1977 
1978                 if (window.navigator.msPointerEnabled) {
1979                     // IE10-
1980                     Env.addEvent(this.containerObj, 'MSPointerDown', this.pointerDownListener, this);
1981                     Env.addEvent(moveTarget, 'MSPointerMove', this.pointerMoveListener, this);
1982                 } else {
1983                     Env.addEvent(this.containerObj, 'pointerdown', this.pointerDownListener, this);
1984                     Env.addEvent(moveTarget, 'pointermove', this.pointerMoveListener, this);
1985                     Env.addEvent(moveTarget, 'pointerleave', this.pointerLeaveListener, this);
1986                     Env.addEvent(moveTarget, 'click', this.pointerClickListener, this);
1987                     Env.addEvent(moveTarget, 'dblclick', this.pointerDblClickListener, this);
1988                 }
1989 
1990                 if (this.containerObj !== null) {
1991                     // This is needed for capturing touch events.
1992                     // It is in jsxgraph.css, for ms-touch-action...
1993                     this.containerObj.style.touchAction = 'none';
1994                 }
1995 
1996                 this.hasPointerHandlers = true;
1997             }
1998         },
1999 
2000         /**
2001          * Registers mouse move, down and wheel event handlers.
2002          */
2003         addMouseEventHandlers: function () {
2004             if (!this.hasMouseHandlers && Env.isBrowser) {
2005                 var moveTarget = this.attr.movetarget || this.containerObj;
2006 
2007                 Env.addEvent(this.containerObj, 'mousedown', this.mouseDownListener, this);
2008                 Env.addEvent(moveTarget, 'mousemove', this.mouseMoveListener, this);
2009                 Env.addEvent(moveTarget, 'click', this.mouseClickListener, this);
2010                 Env.addEvent(moveTarget, 'dblclick', this.mouseDblClickListener, this);
2011 
2012                 this.hasMouseHandlers = true;
2013             }
2014         },
2015 
2016         /**
2017          * Register touch start and move and gesture start and change event handlers.
2018          * @param {Boolean} appleGestures If set to false the gesturestart and gesturechange event handlers
2019          * will not be registered.
2020          *
2021          * Since iOS 13, touch events were abandoned in favour of pointer events
2022          */
2023         addTouchEventHandlers: function (appleGestures) {
2024             if (!this.hasTouchHandlers && Env.isBrowser) {
2025                 var moveTarget = this.attr.movetarget || this.containerObj;
2026 
2027                 Env.addEvent(this.containerObj, 'touchstart', this.touchStartListener, this);
2028                 Env.addEvent(moveTarget, 'touchmove', this.touchMoveListener, this);
2029 
2030                 /*
2031                 if (!Type.exists(appleGestures) || appleGestures) {
2032                     // Gesture listener are called in touchStart and touchMove.
2033                     //Env.addEvent(this.containerObj, 'gesturestart', this.gestureStartListener, this);
2034                     //Env.addEvent(this.containerObj, 'gesturechange', this.gestureChangeListener, this);
2035                 }
2036                 */
2037 
2038                 this.hasTouchHandlers = true;
2039             }
2040         },
2041 
2042         /**
2043          * Registers pointer event handlers.
2044          */
2045         addWheelEventHandlers: function () {
2046             if (!this.hasWheelHandlers && Env.isBrowser) {
2047                 Env.addEvent(this.containerObj, 'mousewheel', this.mouseWheelListener, this);
2048                 Env.addEvent(this.containerObj, 'DOMMouseScroll', this.mouseWheelListener, this);
2049                 this.hasWheelHandlers = true;
2050             }
2051         },
2052 
2053         /**
2054          * Add fullscreen events which update the CSS transformation matrix to correct
2055          * the mouse/touch/pointer positions in case of CSS transformations.
2056          */
2057         addFullscreenEventHandlers: function () {
2058             var i,
2059                 // standard/Edge, firefox, chrome/safari, IE11
2060                 events = [
2061                     'fullscreenchange',
2062                     'mozfullscreenchange',
2063                     'webkitfullscreenchange',
2064                     'msfullscreenchange'
2065                 ],
2066                 le = events.length;
2067 
2068             if (!this.hasFullscreenEventHandlers && Env.isBrowser) {
2069                 for (i = 0; i < le; i++) {
2070                     Env.addEvent(this.document, events[i], this.fullscreenListener, this);
2071                 }
2072                 this.hasFullscreenEventHandlers = true;
2073             }
2074         },
2075 
2076         /**
2077          * Register keyboard event handlers.
2078          */
2079         addKeyboardEventHandlers: function () {
2080             if (this.attr.keyboard.enabled && !this.hasKeyboardHandlers && Env.isBrowser) {
2081                 Env.addEvent(this.containerObj, 'keydown', this.keyDownListener, this);
2082                 Env.addEvent(this.containerObj, 'focusin', this.keyFocusInListener, this);
2083                 Env.addEvent(this.containerObj, 'focusout', this.keyFocusOutListener, this);
2084                 this.hasKeyboardHandlers = true;
2085             }
2086         },
2087 
2088         /**
2089          * Remove all registered touch event handlers.
2090          */
2091         removeKeyboardEventHandlers: function () {
2092             if (this.hasKeyboardHandlers && Env.isBrowser) {
2093                 Env.removeEvent(this.containerObj, 'keydown', this.keyDownListener, this);
2094                 Env.removeEvent(this.containerObj, 'focusin', this.keyFocusInListener, this);
2095                 Env.removeEvent(this.containerObj, 'focusout', this.keyFocusOutListener, this);
2096                 this.hasKeyboardHandlers = false;
2097             }
2098         },
2099 
2100         /**
2101          * Remove all registered event handlers regarding fullscreen mode.
2102          */
2103         removeFullscreenEventHandlers: function () {
2104             var i,
2105                 // standard/Edge, firefox, chrome/safari, IE11
2106                 events = [
2107                     'fullscreenchange',
2108                     'mozfullscreenchange',
2109                     'webkitfullscreenchange',
2110                     'msfullscreenchange'
2111                 ],
2112                 le = events.length;
2113 
2114             if (this.hasFullscreenEventHandlers && Env.isBrowser) {
2115                 for (i = 0; i < le; i++) {
2116                     Env.removeEvent(this.document, events[i], this.fullscreenListener, this);
2117                 }
2118                 this.hasFullscreenEventHandlers = false;
2119             }
2120         },
2121 
2122         /**
2123          * Remove MSPointer* Event handlers.
2124          */
2125         removePointerEventHandlers: function () {
2126             if (this.hasPointerHandlers && Env.isBrowser) {
2127                 var moveTarget = this.attr.movetarget || this.containerObj;
2128 
2129                 if (window.navigator.msPointerEnabled) {
2130                     // IE10-
2131                     Env.removeEvent(this.containerObj, 'MSPointerDown', this.pointerDownListener, this);
2132                     Env.removeEvent(moveTarget, 'MSPointerMove', this.pointerMoveListener, this);
2133                 } else {
2134                     Env.removeEvent(this.containerObj, 'pointerdown', this.pointerDownListener, this);
2135                     Env.removeEvent(moveTarget, 'pointermove', this.pointerMoveListener, this);
2136                     Env.removeEvent(moveTarget, 'pointerleave', this.pointerLeaveListener, this);
2137                     Env.removeEvent(moveTarget, 'click', this.pointerClickListener, this);
2138                     Env.removeEvent(moveTarget, 'dblclick', this.pointerDblClickListener, this);
2139                 }
2140 
2141                 if (this.hasWheelHandlers) {
2142                     Env.removeEvent(this.containerObj, 'mousewheel', this.mouseWheelListener, this);
2143                     Env.removeEvent(this.containerObj, 'DOMMouseScroll', this.mouseWheelListener, this);
2144                 }
2145 
2146                 if (this.hasPointerUp) {
2147                     if (window.navigator.msPointerEnabled) {
2148                         // IE10-
2149                         Env.removeEvent(this.document, 'MSPointerUp', this.pointerUpListener, this);
2150                     } else {
2151                         Env.removeEvent(this.document, 'pointerup', this.pointerUpListener, this);
2152                         Env.removeEvent(this.document, 'pointercancel', this.pointerUpListener, this);
2153                     }
2154                     this.hasPointerUp = false;
2155                 }
2156 
2157                 this.hasPointerHandlers = false;
2158             }
2159         },
2160 
2161         /**
2162          * De-register mouse event handlers.
2163          */
2164         removeMouseEventHandlers: function () {
2165             if (this.hasMouseHandlers && Env.isBrowser) {
2166                 var moveTarget = this.attr.movetarget || this.containerObj;
2167 
2168                 Env.removeEvent(this.containerObj, 'mousedown', this.mouseDownListener, this);
2169                 Env.removeEvent(moveTarget, 'mousemove', this.mouseMoveListener, this);
2170                 Env.removeEvent(moveTarget, 'click', this.mouseClickListener, this);
2171                 Env.removeEvent(moveTarget, 'dblclick', this.mouseDblClickListener, this);
2172 
2173                 if (this.hasMouseUp) {
2174                     Env.removeEvent(this.document, 'mouseup', this.mouseUpListener, this);
2175                     this.hasMouseUp = false;
2176                 }
2177 
2178                 if (this.hasWheelHandlers) {
2179                     Env.removeEvent(this.containerObj, 'mousewheel', this.mouseWheelListener, this);
2180                     Env.removeEvent(
2181                         this.containerObj,
2182                         'DOMMouseScroll',
2183                         this.mouseWheelListener,
2184                         this
2185                     );
2186                 }
2187 
2188                 this.hasMouseHandlers = false;
2189             }
2190         },
2191 
2192         /**
2193          * Remove all registered touch event handlers.
2194          */
2195         removeTouchEventHandlers: function () {
2196             if (this.hasTouchHandlers && Env.isBrowser) {
2197                 var moveTarget = this.attr.movetarget || this.containerObj;
2198 
2199                 Env.removeEvent(this.containerObj, 'touchstart', this.touchStartListener, this);
2200                 Env.removeEvent(moveTarget, 'touchmove', this.touchMoveListener, this);
2201 
2202                 if (this.hasTouchEnd) {
2203                     Env.removeEvent(this.document, 'touchend', this.touchEndListener, this);
2204                     this.hasTouchEnd = false;
2205                 }
2206 
2207                 this.hasTouchHandlers = false;
2208             }
2209         },
2210 
2211         /**
2212          * Handler for click on left arrow in the navigation bar
2213          * @returns {JXG.Board} Reference to the board
2214          */
2215         clickLeftArrow: function () {
2216             this.moveOrigin(
2217                 this.origin.scrCoords[1] + this.canvasWidth * 0.1,
2218                 this.origin.scrCoords[2]
2219             );
2220             return this;
2221         },
2222 
2223         /**
2224          * Handler for click on right arrow in the navigation bar
2225          * @returns {JXG.Board} Reference to the board
2226          */
2227         clickRightArrow: function () {
2228             this.moveOrigin(
2229                 this.origin.scrCoords[1] - this.canvasWidth * 0.1,
2230                 this.origin.scrCoords[2]
2231             );
2232             return this;
2233         },
2234 
2235         /**
2236          * Handler for click on up arrow in the navigation bar
2237          * @returns {JXG.Board} Reference to the board
2238          */
2239         clickUpArrow: function () {
2240             this.moveOrigin(
2241                 this.origin.scrCoords[1],
2242                 this.origin.scrCoords[2] - this.canvasHeight * 0.1
2243             );
2244             return this;
2245         },
2246 
2247         /**
2248          * Handler for click on down arrow in the navigation bar
2249          * @returns {JXG.Board} Reference to the board
2250          */
2251         clickDownArrow: function () {
2252             this.moveOrigin(
2253                 this.origin.scrCoords[1],
2254                 this.origin.scrCoords[2] + this.canvasHeight * 0.1
2255             );
2256             return this;
2257         },
2258 
2259         /**
2260          * Triggered on iOS/Safari while the user inputs a gesture (e.g. pinch) and is used to zoom into the board.
2261          * Works on iOS/Safari and Android.
2262          * @param {Event} evt Browser event object
2263          * @returns {Boolean}
2264          */
2265         gestureChangeListener: function (evt) {
2266             var c,
2267                 dir1 = [],
2268                 dir2 = [],
2269                 angle,
2270                 mi = 10,
2271                 isPinch = false,
2272                 // Save zoomFactors
2273                 zx = this.attr.zoom.factorx,
2274                 zy = this.attr.zoom.factory,
2275                 factor, dist, theta, bound,
2276                 doZoom = false,
2277                 dx, dy, cx, cy;
2278 
2279             if (this.mode !== this.BOARD_MODE_ZOOM) {
2280                 return true;
2281             }
2282             evt.preventDefault();
2283 
2284             dist = Geometry.distance(
2285                 [evt.touches[0].clientX, evt.touches[0].clientY],
2286                 [evt.touches[1].clientX, evt.touches[1].clientY],
2287                 2
2288             );
2289 
2290             // Android pinch to zoom
2291             // evt.scale was available in iOS touch events (pre iOS 13)
2292             // evt.scale is undefined in Android
2293             if (evt.scale === undefined) {
2294                 evt.scale = dist / this.prevDist;
2295             }
2296 
2297             if (!Type.exists(this.prevCoords)) {
2298                 return false;
2299             }
2300             // Compute the angle of the two finger directions
2301             dir1 = [
2302                 evt.touches[0].clientX - this.prevCoords[0][0],
2303                 evt.touches[0].clientY - this.prevCoords[0][1]
2304             ];
2305             dir2 = [
2306                 evt.touches[1].clientX - this.prevCoords[1][0],
2307                 evt.touches[1].clientY - this.prevCoords[1][1]
2308             ];
2309 
2310             if (
2311                 dir1[0] * dir1[0] + dir1[1] * dir1[1] < mi * mi &&
2312                 dir2[0] * dir2[0] + dir2[1] * dir2[1] < mi * mi
2313             ) {
2314                 return false;
2315             }
2316 
2317             angle = Geometry.rad(dir1, [0, 0], dir2);
2318             if (
2319                 this.isPreviousGesture !== 'pan' &&
2320                 Math.abs(angle) > Math.PI * 0.2 &&
2321                 Math.abs(angle) < Math.PI * 1.8
2322             ) {
2323                 isPinch = true;
2324             }
2325 
2326             if (this.isPreviousGesture !== 'pan' && !isPinch) {
2327                 if (Math.abs(evt.scale) < 0.77 || Math.abs(evt.scale) > 1.3) {
2328                     isPinch = true;
2329                 }
2330             }
2331 
2332             factor = evt.scale / this.prevScale;
2333             this.prevScale = evt.scale;
2334             this.prevCoords = [
2335                 [evt.touches[0].clientX, evt.touches[0].clientY],
2336                 [evt.touches[1].clientX, evt.touches[1].clientY]
2337             ];
2338 
2339             c = new Coords(Const.COORDS_BY_SCREEN, this.getMousePosition(evt, 0), this);
2340 
2341             if (this.attr.pan.enabled && this.attr.pan.needtwofingers && !isPinch) {
2342                 // Pan detected
2343                 this.isPreviousGesture = 'pan';
2344                 this.moveOrigin(c.scrCoords[1], c.scrCoords[2], true);
2345 
2346             } else if (this.attr.zoom.enabled && Math.abs(factor - 1.0) < 0.5) {
2347                 doZoom = false;
2348                 // Pinch detected
2349                 if (this.attr.zoom.pinchhorizontal || this.attr.zoom.pinchvertical) {
2350                     dx = Math.abs(evt.touches[0].clientX - evt.touches[1].clientX);
2351                     dy = Math.abs(evt.touches[0].clientY - evt.touches[1].clientY);
2352                     theta = Math.abs(Math.atan2(dy, dx));
2353                     bound = (Math.PI * this.attr.zoom.pinchsensitivity) / 90.0;
2354                 }
2355 
2356                 if (!this.keepaspectratio &&
2357                     this.attr.zoom.pinchhorizontal &&
2358                     theta < bound) {
2359                     this.attr.zoom.factorx = factor;
2360                     this.attr.zoom.factory = 1.0;
2361                     cx = 0;
2362                     cy = 0;
2363                     doZoom = true;
2364                 } else if (!this.keepaspectratio &&
2365                     this.attr.zoom.pinchvertical &&
2366                     Math.abs(theta - Math.PI * 0.5) < bound
2367                 ) {
2368                     this.attr.zoom.factorx = 1.0;
2369                     this.attr.zoom.factory = factor;
2370                     cx = 0;
2371                     cy = 0;
2372                     doZoom = true;
2373                 } else if (this.attr.zoom.pinch) {
2374                     this.attr.zoom.factorx = factor;
2375                     this.attr.zoom.factory = factor;
2376                     cx = c.usrCoords[1];
2377                     cy = c.usrCoords[2];
2378                     doZoom = true;
2379                 }
2380 
2381                 if (doZoom) {
2382                     this.zoomIn(cx, cy);
2383 
2384                     // Restore zoomFactors
2385                     this.attr.zoom.factorx = zx;
2386                     this.attr.zoom.factory = zy;
2387                 }
2388             }
2389 
2390             return false;
2391         },
2392 
2393         /**
2394          * Called by iOS/Safari as soon as the user starts a gesture. Works natively on iOS/Safari,
2395          * on Android we emulate it.
2396          * @param {Event} evt
2397          * @returns {Boolean}
2398          */
2399         gestureStartListener: function (evt) {
2400             var pos;
2401 
2402             evt.preventDefault();
2403             this.prevScale = 1.0;
2404             // Android pinch to zoom
2405             this.prevDist = Geometry.distance(
2406                 [evt.touches[0].clientX, evt.touches[0].clientY],
2407                 [evt.touches[1].clientX, evt.touches[1].clientY],
2408                 2
2409             );
2410             this.prevCoords = [
2411                 [evt.touches[0].clientX, evt.touches[0].clientY],
2412                 [evt.touches[1].clientX, evt.touches[1].clientY]
2413             ];
2414             this.isPreviousGesture = 'none';
2415 
2416             // If pinch-to-zoom is interpreted as panning
2417             // we have to prepare move origin
2418             pos = this.getMousePosition(evt, 0);
2419             this.initMoveOrigin(pos[0], pos[1]);
2420 
2421             this.mode = this.BOARD_MODE_ZOOM;
2422             return false;
2423         },
2424 
2425         /**
2426          * Test if the required key combination is pressed for wheel zoom, move origin and
2427          * selection
2428          * @private
2429          * @param  {Object}  evt    Mouse or pen event
2430          * @param  {String}  action String containing the action: 'zoom', 'pan', 'selection'.
2431          * Corresponds to the attribute subobject.
2432          * @return {Boolean}        true or false.
2433          */
2434         _isRequiredKeyPressed: function (evt, action) {
2435             var obj = this.attr[action];
2436             if (!obj.enabled) {
2437                 return false;
2438             }
2439 
2440             if (
2441                 ((obj.needshift && evt.shiftKey) || (!obj.needshift && !evt.shiftKey)) &&
2442                 ((obj.needctrl && evt.ctrlKey) || (!obj.needctrl && !evt.ctrlKey))
2443             ) {
2444                 return true;
2445             }
2446 
2447             return false;
2448         },
2449 
2450         /*
2451          * Pointer events
2452          */
2453 
2454         /**
2455          *
2456          * Check if pointer event is already registered in {@link JXG.Board#_board_touches}.
2457          *
2458          * @param  {Object} evt Event object
2459          * @return {Boolean} true if down event has already been sent.
2460          * @private
2461          */
2462         _isPointerRegistered: function (evt) {
2463             var i,
2464                 len = this._board_touches.length;
2465 
2466             for (i = 0; i < len; i++) {
2467                 if (this._board_touches[i].pointerId === evt.pointerId) {
2468                     return true;
2469                 }
2470             }
2471             return false;
2472         },
2473 
2474         /**
2475          *
2476          * Store the position of a pointer event.
2477          * If not yet done, registers a pointer event in {@link JXG.Board#_board_touches}.
2478          * Allows to follow the path of that finger on the screen.
2479          * Only two simultaneous touches are supported.
2480          *
2481          * @param {Object} evt Event object
2482          * @returns {JXG.Board} Reference to the board
2483          * @private
2484          */
2485         _pointerStorePosition: function (evt) {
2486             var i, found;
2487 
2488             for (i = 0, found = false; i < this._board_touches.length; i++) {
2489                 if (this._board_touches[i].pointerId === evt.pointerId) {
2490                     this._board_touches[i].clientX = evt.clientX;
2491                     this._board_touches[i].clientY = evt.clientY;
2492                     found = true;
2493                     break;
2494                 }
2495             }
2496 
2497             // Restrict the number of simultaneous touches to 2
2498             if (!found && this._board_touches.length < 2) {
2499                 this._board_touches.push({
2500                     pointerId: evt.pointerId,
2501                     clientX: evt.clientX,
2502                     clientY: evt.clientY
2503                 });
2504             }
2505 
2506             return this;
2507         },
2508 
2509         /**
2510          * Deregisters a pointer event in {@link JXG.Board#_board_touches}.
2511          * It happens if a finger has been lifted from the screen.
2512          *
2513          * @param {Object} evt Event object
2514          * @returns {JXG.Board} Reference to the board
2515          * @private
2516          */
2517         _pointerRemoveTouches: function (evt) {
2518             var i;
2519             for (i = 0; i < this._board_touches.length; i++) {
2520                 if (this._board_touches[i].pointerId === evt.pointerId) {
2521                     this._board_touches.splice(i, 1);
2522                     break;
2523                 }
2524             }
2525 
2526             return this;
2527         },
2528 
2529         /**
2530          * Remove all registered fingers from {@link JXG.Board#_board_touches}.
2531          * This might be necessary if too many fingers have been registered.
2532          * @returns {JXG.Board} Reference to the board
2533          * @private
2534          */
2535         _pointerClearTouches: function (pId) {
2536             // var i;
2537             // if (pId) {
2538             //     for (i = 0; i < this._board_touches.length; i++) {
2539             //         if (pId === this._board_touches[i].pointerId) {
2540             //             this._board_touches.splice(i, i);
2541             //             break;
2542             //         }
2543             //     }
2544             // } else {
2545             // }
2546             if (this._board_touches.length > 0) {
2547                 this.dehighlightAll();
2548             }
2549             this.updateQuality = this.BOARD_QUALITY_HIGH;
2550             this.mode = this.BOARD_MODE_NONE;
2551             this._board_touches = [];
2552             this.touches = [];
2553         },
2554 
2555         /**
2556          * Determine which input device is used for this action.
2557          * Possible devices are 'touch', 'pen' and 'mouse'.
2558          * This affects the precision and certain events.
2559          * In case of no browser, 'mouse' is used.
2560          *
2561          * @see JXG.Board#pointerDownListener
2562          * @see JXG.Board#pointerMoveListener
2563          * @see JXG.Board#initMoveObject
2564          * @see JXG.Board#moveObject
2565          *
2566          * @param {Event} evt The browsers event object.
2567          * @returns {String} 'mouse', 'pen', or 'touch'
2568          * @private
2569          */
2570         _getPointerInputDevice: function (evt) {
2571             if (Env.isBrowser) {
2572                 if (
2573                     evt.pointerType === 'touch' || // New
2574                     (window.navigator.msMaxTouchPoints && // Old
2575                         window.navigator.msMaxTouchPoints > 1)
2576                 ) {
2577                     return 'touch';
2578                 }
2579                 if (evt.pointerType === 'mouse') {
2580                     return 'mouse';
2581                 }
2582                 if (evt.pointerType === 'pen') {
2583                     return 'pen';
2584                 }
2585             }
2586             return 'mouse';
2587         },
2588 
2589         /**
2590          * This method is called by the browser when a pointing device is pressed on the screen.
2591          * @param {Event} evt The browsers event object.
2592          * @param {Object} object If the object to be dragged is already known, it can be submitted via this parameter
2593          * @param {Boolean} [allowDefaultEventHandling=false] If true event is not canceled, i.e. prevent call of evt.preventDefault()
2594          * @returns {Boolean} false if the first finger event is sent twice, or not a browser, or in selection mode. Otherwise returns true.
2595          */
2596         pointerDownListener: function (evt, object, allowDefaultEventHandling) {
2597             var i, j, k, pos,
2598                 elements, sel, target_obj,
2599                 type = 'mouse', // Used in case of no browser
2600                 found, target, ta;
2601 
2602             // Fix for Firefox browser: When using a second finger, the
2603             // touch event for the first finger is sent again.
2604             if (!object && this._isPointerRegistered(evt)) {
2605                 return false;
2606             }
2607 
2608             if (Type.evaluate(this.attr.movetarget) === null &&
2609                 Type.exists(evt.target) && Type.exists(evt.target.releasePointerCapture)) {
2610                 evt.target.releasePointerCapture(evt.pointerId);
2611             }
2612 
2613             if (!object && evt.isPrimary) {
2614                 // First finger down. To be on the safe side this._board_touches is cleared.
2615                 // this._pointerClearTouches();
2616             }
2617 
2618             if (!this.hasPointerUp) {
2619                 if (window.navigator.msPointerEnabled) {
2620                     // IE10-
2621                     Env.addEvent(this.document, 'MSPointerUp', this.pointerUpListener, this);
2622                 } else {
2623                     // 'pointercancel' is fired e.g. if the finger leaves the browser and drags down the system menu on Android
2624                     Env.addEvent(this.document, 'pointerup', this.pointerUpListener, this);
2625                     Env.addEvent(this.document, 'pointercancel', this.pointerUpListener, this);
2626                 }
2627                 this.hasPointerUp = true;
2628             }
2629 
2630             if (this.hasMouseHandlers) {
2631                 this.removeMouseEventHandlers();
2632             }
2633 
2634             if (this.hasTouchHandlers) {
2635                 this.removeTouchEventHandlers();
2636             }
2637 
2638             // Prevent accidental selection of text
2639             if (this.document.selection && Type.isFunction(this.document.selection.empty)) {
2640                 this.document.selection.empty();
2641             } else if (window.getSelection) {
2642                 sel = window.getSelection();
2643                 if (sel.removeAllRanges) {
2644                     try {
2645                         sel.removeAllRanges();
2646                     } catch (e) { }
2647                 }
2648             }
2649 
2650             // Mouse, touch or pen device
2651             this._inputDevice = this._getPointerInputDevice(evt);
2652             type = this._inputDevice;
2653             this.options.precision.hasPoint = this.options.precision[type];
2654 
2655             // Handling of multi touch with pointer events should be easier than with touch events.
2656             // Every pointer device has its own pointerId, e.g. the mouse
2657             // always has id 1 or 0, fingers and pens get unique ids every time a pointerDown event is fired and they will
2658             // keep this id until a pointerUp event is fired. What we have to do here is:
2659             //  1. collect all elements under the current pointer
2660             //  2. run through the touches control structure
2661             //    a. look for the object collected in step 1.
2662             //    b. if an object is found, check the number of pointers. If appropriate, add the pointer.
2663             pos = this.getMousePosition(evt);
2664 
2665             // Handle selection rectangle
2666             this._testForSelection(evt);
2667             if (this.selectingMode) {
2668                 this._startSelecting(pos);
2669                 this.triggerEventHandlers(
2670                     ['touchstartselecting', 'pointerstartselecting', 'startselecting'],
2671                     [evt]
2672                 );
2673                 return; // don't continue as a normal click
2674             }
2675 
2676             if (this.attr.drag.enabled && object) {
2677                 elements = [object];
2678                 this.mode = this.BOARD_MODE_DRAG;
2679             } else {
2680                 elements = this.initMoveObject(pos[0], pos[1], evt, type);
2681             }
2682 
2683             target_obj = {
2684                 num: evt.pointerId,
2685                 X: pos[0],
2686                 Y: pos[1],
2687                 Xprev: NaN,
2688                 Yprev: NaN,
2689                 Xstart: [],
2690                 Ystart: [],
2691                 Zstart: []
2692             };
2693 
2694             // If no draggable object can be found, get out here immediately
2695             if (elements.length > 0) {
2696                 // check touches structure
2697                 target = elements[elements.length - 1];
2698                 found = false;
2699 
2700                 // Reminder: this.touches is the list of elements which
2701                 // currently 'possess' a pointer (mouse, pen, finger)
2702                 for (i = 0; i < this.touches.length; i++) {
2703                     // An element receives a further touch, i.e.
2704                     // the target is already in our touches array, add the pointer to the existing touch
2705                     if (this.touches[i].obj === target) {
2706                         j = i;
2707                         k = this.touches[i].targets.push(target_obj) - 1;
2708                         found = true;
2709                         break;
2710                     }
2711                 }
2712                 if (!found) {
2713                     // An new element hae been touched.
2714                     k = 0;
2715                     j =
2716                         this.touches.push({
2717                             obj: target,
2718                             targets: [target_obj]
2719                         }) - 1;
2720                 }
2721 
2722                 this.dehighlightAll();
2723                 target.highlight(true);
2724 
2725                 this.saveStartPos(target, this.touches[j].targets[k]);
2726 
2727                 // Prevent accidental text selection
2728                 // this could get us new trouble: input fields, links and drop down boxes placed as text
2729                 // on the board don't work anymore.
2730                 if (evt && evt.preventDefault && !allowDefaultEventHandling) {
2731                     // All browser supporting pointer events know preventDefault()
2732                     evt.preventDefault();
2733                 }
2734             }
2735 
2736             if (this.touches.length > 0 && !allowDefaultEventHandling) {
2737                 evt.preventDefault();
2738                 evt.stopPropagation();
2739             }
2740 
2741             if (!Env.isBrowser) {
2742                 return false;
2743             }
2744             if (this._getPointerInputDevice(evt) !== 'touch') {
2745                 if (this.mode === this.BOARD_MODE_NONE) {
2746                     this.mouseOriginMoveStart(evt);
2747                 }
2748             } else {
2749                 this._pointerStorePosition(evt);
2750                 evt.touches = this._board_touches;
2751 
2752                 // Touch events on empty areas of the board are handled here, see also touchStartListener
2753                 // 1. case: one finger. If allowed, this triggers pan with one finger
2754                 if (
2755                     evt.touches.length === 1 &&
2756                     this.mode === this.BOARD_MODE_NONE &&
2757                     this.touchStartMoveOriginOneFinger(evt)
2758                 ) {
2759                     // Empty by purpose
2760                 } else if (
2761                     evt.touches.length === 2 &&
2762                     (this.mode === this.BOARD_MODE_NONE ||
2763                         this.mode === this.BOARD_MODE_MOVE_ORIGIN)
2764                 ) {
2765                     // 2. case: two fingers: pinch to zoom or pan with two fingers needed.
2766                     // This happens when the second finger hits the device. First, the
2767                     // 'one finger pan mode' has to be cancelled.
2768                     if (this.mode === this.BOARD_MODE_MOVE_ORIGIN) {
2769                         this.originMoveEnd();
2770                     }
2771 
2772                     this.gestureStartListener(evt);
2773                 }
2774             }
2775 
2776             // Allow browser scrolling
2777             // For this: pan by one finger has to be disabled
2778             ta = 'none';             // JSXGraph catches all user touch events
2779             if (this.mode === this.BOARD_MODE_NONE &&
2780                 Type.evaluate(this.attr.browserpan) &&
2781                 !(Type.evaluate(this.attr.pan.enabled) && !Type.evaluate(this.attr.pan.needtwofingers))
2782             ) {
2783                 ta = 'pan-x pan-y';  // JSXGraph allows browser scrolling
2784             }
2785             this.containerObj.style.touchAction = ta;
2786 
2787             this.triggerEventHandlers(['touchstart', 'down', 'pointerdown', 'MSPointerDown'], [evt]);
2788 
2789             return true;
2790         },
2791 
2792         /**
2793          * Handle entries of this.downObjects to control click and dblclick events.
2794          * @param {Number} i
2795          * @private
2796          */
2797         _waitForDblClick: function(i) {
2798             var eh = this.downObjects[i].eventHandlers;
2799 
2800             if ((Type.exists(eh.dblclick) && eh.dblclick.length > 0) ||
2801                 (Type.exists(eh.mousedblclick) && eh.mousedblclick.length > 0)
2802             ) {
2803 
2804                 eh.clicks += 1;
2805                 if (eh.clicks !== 2) {
2806                     // If there is dblclick event handler registered,
2807                     // we remove the element from downObjects on the first click.
2808                     // If there is a second click, it will appear again in
2809                     // downObjects and handled in the dblclick listener.
2810                     //
2811                     // However, we set a timer which resets the clicks to zero after 400 ms.
2812                     // This cancels the dblclick event.
2813                     this.downObjects.splice(i, 1);
2814                     setTimeout(function() { eh.clicks = 0; }, 400);
2815                 }
2816             } else {
2817                 // If there is no dblclick event we can (and have to) remove the
2818                 // element from downObjects now.
2819                 this.downObjects.splice(i, 1);
2820             }
2821         },
2822 
2823         /**
2824          * This method is called by the browser when a pointer device clicks on the screen.
2825          * @param {Event} evt The browsers event object.
2826          */
2827         pointerClickListener: function (evt) {
2828             var i;
2829 
2830             this.triggerEventHandlers(['click', 'pointerclick'], [evt]);
2831             if (!this.selectingMode) {
2832                 for (i = this.downObjects.length - 1; i > -1; i--) {
2833                     this.downObjects[i].triggerEventHandlers(['click', 'pointerclick'], [evt]);
2834                     this._waitForDblClick(i);
2835                 }
2836             }
2837             evt.stopPropagation();
2838         },
2839 
2840         /**
2841          * This method is called by the browser when the mouse device clicks on the screen.
2842          * @param {Event} evt The browsers event object.
2843          */
2844         mouseClickListener: function (evt) {
2845             var i;
2846             this.triggerEventHandlers(['click', 'mouseclick'], [evt]);
2847 
2848             if (!this.selectingMode) {
2849                 for (i = this.downObjects.length - 1; i > -1; i--) {
2850                     this.downObjects[i].triggerEventHandlers(['click', 'mouseclick'], [evt]);
2851                     this._waitForDblClick(i);
2852                 }
2853             }
2854 
2855         },
2856 
2857         /**
2858          * This method is called by the browser when a pointer device double clicks on the screen.
2859          * @param {Event} evt The browsers event object.
2860          */
2861         pointerDblClickListener: function (evt) {
2862             var i;
2863 
2864             this.triggerEventHandlers(['dblclick', 'pointerdblclick'], [evt]);
2865             if (!this.selectingMode) {
2866                 for (i = this.downObjects.length - 1; i > -1; i--) {
2867                     this.downObjects[i].triggerEventHandlers(['dblclick', 'pointerdblclick'], [evt]);
2868 
2869                     this.downObjects[i].eventHandlers.clicks = 0;
2870                     this.downObjects.splice(i, 1);
2871                 }
2872             }
2873             evt.stopPropagation();
2874         },
2875 
2876         /**
2877          * This method is called by the browser when the mouse device double clicks on the screen.
2878          * @param {Event} evt The browsers event object.
2879          */
2880         mouseDblClickListener: function (evt) {
2881             var i;
2882             this.triggerEventHandlers(['dblclick', 'mousedblclick'], [evt]);
2883             if (!this.selectingMode) {
2884                 for (i = this.downObjects.length - 1; i > -1; i--) {
2885                     this.downObjects[i].triggerEventHandlers(['dblclick', 'mousedblclick'], [evt]);
2886 
2887                     this.downObjects[i].eventHandlers.clicks = 0;
2888                     this.downObjects.splice(i, 1);
2889                 }
2890             }
2891         },
2892 
2893         // /**
2894         //  * Called if pointer leaves an HTML tag. It is called by the inner-most tag.
2895         //  * That means, if a JSXGraph text, i.e. an HTML div, is placed close
2896         //  * to the border of the board, this pointerout event will be ignored.
2897         //  * @param  {Event} evt
2898         //  * @return {Boolean}
2899         //  */
2900         // pointerOutListener: function (evt) {
2901         //     if (evt.target === this.containerObj ||
2902         //         (this.renderer.type === 'svg' && evt.target === this.renderer.foreignObjLayer)) {
2903         //         this.pointerUpListener(evt);
2904         //     }
2905         //     return this.mode === this.BOARD_MODE_NONE;
2906         // },
2907 
2908         /**
2909          * Called periodically by the browser while the user moves a pointing device across the screen.
2910          * @param {Event} evt
2911          * @returns {Boolean}
2912          */
2913         pointerMoveListener: function (evt) {
2914             var i, j, pos, eps,
2915                 touchTargets,
2916                 type = 'mouse'; // in case of no browser
2917 
2918             if (
2919                 this._getPointerInputDevice(evt) === 'touch' &&
2920                 !this._isPointerRegistered(evt)
2921             ) {
2922                 // Test, if there was a previous down event of this _getPointerId
2923                 // (in case it is a touch event).
2924                 // Otherwise this move event is ignored. This is necessary e.g. for sketchometry.
2925                 return this.BOARD_MODE_NONE;
2926             }
2927 
2928             if (!this.checkFrameRate(evt)) {
2929                 return false;
2930             }
2931 
2932             if (this.mode !== this.BOARD_MODE_DRAG) {
2933                 this.dehighlightAll();
2934                 this.displayInfobox(false);
2935             }
2936 
2937             if (this.mode !== this.BOARD_MODE_NONE) {
2938                 evt.preventDefault();
2939                 evt.stopPropagation();
2940             }
2941 
2942             this.updateQuality = this.BOARD_QUALITY_LOW;
2943             // Mouse, touch or pen device
2944             this._inputDevice = this._getPointerInputDevice(evt);
2945             type = this._inputDevice;
2946             this.options.precision.hasPoint = this.options.precision[type];
2947             eps = this.options.precision.hasPoint * 0.3333;
2948 
2949             pos = this.getMousePosition(evt);
2950             // Ignore pointer move event if too close at the border
2951             // and setPointerCapture is off
2952             if (Type.evaluate(this.attr.movetarget) === null &&
2953                 pos[0] <= eps || pos[1] <= eps ||
2954                 pos[0] >= this.canvasWidth - eps ||
2955                 pos[1] >= this.canvasHeight - eps
2956             ) {
2957                 return this.mode === this.BOARD_MODE_NONE;
2958             }
2959 
2960             // selection
2961             if (this.selectingMode) {
2962                 this._moveSelecting(pos);
2963                 this.triggerEventHandlers(
2964                     ['touchmoveselecting', 'moveselecting', 'pointermoveselecting'],
2965                     [evt, this.mode]
2966                 );
2967             } else if (!this.mouseOriginMove(evt)) {
2968                 if (this.mode === this.BOARD_MODE_DRAG) {
2969                     // Run through all jsxgraph elements which are touched by at least one finger.
2970                     for (i = 0; i < this.touches.length; i++) {
2971                         touchTargets = this.touches[i].targets;
2972                         // Run through all touch events which have been started on this jsxgraph element.
2973                         for (j = 0; j < touchTargets.length; j++) {
2974                             if (touchTargets[j].num === evt.pointerId) {
2975                                 touchTargets[j].X = pos[0];
2976                                 touchTargets[j].Y = pos[1];
2977 
2978                                 if (touchTargets.length === 1) {
2979                                     // Touch by one finger: this is possible for all elements that can be dragged
2980                                     this.moveObject(pos[0], pos[1], this.touches[i], evt, type);
2981                                 } else if (touchTargets.length === 2) {
2982                                     // Touch by two fingers: e.g. moving lines
2983                                     this.twoFingerMove(this.touches[i], evt.pointerId, evt);
2984 
2985                                     touchTargets[j].Xprev = pos[0];
2986                                     touchTargets[j].Yprev = pos[1];
2987                                 }
2988 
2989                                 // There is only one pointer in the evt object, so there's no point in looking further
2990                                 break;
2991                             }
2992                         }
2993                     }
2994                 } else {
2995                     if (this._getPointerInputDevice(evt) === 'touch') {
2996                         this._pointerStorePosition(evt);
2997 
2998                         if (this._board_touches.length === 2) {
2999                             evt.touches = this._board_touches;
3000                             this.gestureChangeListener(evt);
3001                         }
3002                     }
3003 
3004                     // Move event without dragging an element
3005                     this.highlightElements(pos[0], pos[1], evt, -1);
3006                 }
3007             }
3008 
3009             // Hiding the infobox is commented out, since it prevents showing the infobox
3010             // on IE 11+ on 'over'
3011             //if (this.mode !== this.BOARD_MODE_DRAG) {
3012             //this.displayInfobox(false);
3013             //}
3014             this.triggerEventHandlers(['pointermove', 'MSPointerMove', 'move'], [evt, this.mode]);
3015             this.updateQuality = this.BOARD_QUALITY_HIGH;
3016 
3017             return this.mode === this.BOARD_MODE_NONE;
3018         },
3019 
3020         /**
3021          * Triggered as soon as the user stops touching the device with at least one finger.
3022          *
3023          * @param {Event} evt
3024          * @returns {Boolean}
3025          */
3026         pointerUpListener: function (evt) {
3027             var i, j, found, eh,
3028                 touchTargets,
3029                 updateNeeded = false;
3030 
3031             this.triggerEventHandlers(['touchend', 'up', 'pointerup', 'MSPointerUp'], [evt]);
3032             this.displayInfobox(false);
3033 
3034             if (evt) {
3035                 for (i = 0; i < this.touches.length; i++) {
3036                     touchTargets = this.touches[i].targets;
3037                     for (j = 0; j < touchTargets.length; j++) {
3038                         if (touchTargets[j].num === evt.pointerId) {
3039                             touchTargets.splice(j, 1);
3040                             if (touchTargets.length === 0) {
3041                                 this.touches.splice(i, 1);
3042                             }
3043                             break;
3044                         }
3045                     }
3046                 }
3047             }
3048 
3049             this.originMoveEnd();
3050             this.update();
3051 
3052             // selection
3053             if (this.selectingMode) {
3054                 this._stopSelecting(evt);
3055                 this.triggerEventHandlers(
3056                     ['touchstopselecting', 'pointerstopselecting', 'stopselecting'],
3057                     [evt]
3058                 );
3059                 this.stopSelectionMode();
3060             } else {
3061                 for (i = this.downObjects.length - 1; i > -1; i--) {
3062                     found = false;
3063                     for (j = 0; j < this.touches.length; j++) {
3064                         if (this.touches[j].obj.id === this.downObjects[i].id) {
3065                             found = true;
3066                         }
3067                     }
3068                     if (!found) {
3069                         this.downObjects[i].triggerEventHandlers(
3070                             ['touchend', 'up', 'pointerup', 'MSPointerUp'],
3071                             [evt]
3072                         );
3073                         if (!Type.exists(this.downObjects[i].coords)) {
3074                             // snapTo methods have to be called e.g. for line elements here.
3075                             // For coordsElements there might be a conflict with
3076                             // attractors, see commit from 2022.04.08, 11:12:18.
3077                             this.downObjects[i].snapToGrid();
3078                             this.downObjects[i].snapToPoints();
3079                             updateNeeded = true;
3080                         }
3081 
3082                         // Check if we have to keep the element for a click or dblclick event
3083                         // Otherwise remove it from downObjects
3084                         eh = this.downObjects[i].eventHandlers;
3085                         if (!(Type.exists(eh.click) && eh.click.length > 0) &&
3086                             !(Type.exists(eh.pointerclick) && eh.pointerclick.length > 0) &&
3087                             !(Type.exists(eh.dblclick) && eh.dblclick.length > 0) &&
3088                             !(Type.exists(eh.pointerdblclick) && eh.pointerdblclick.length > 0)
3089                         ) {
3090                             this.downObjects.splice(i, 1);
3091                         }
3092                     }
3093                 }
3094             }
3095 
3096             if (this.hasPointerUp) {
3097                 if (window.navigator.msPointerEnabled) {
3098                     // IE10-
3099                     Env.removeEvent(this.document, 'MSPointerUp', this.pointerUpListener, this);
3100                 } else {
3101                     Env.removeEvent(this.document, 'pointerup', this.pointerUpListener, this);
3102                     Env.removeEvent(
3103                         this.document,
3104                         'pointercancel',
3105                         this.pointerUpListener,
3106                         this
3107                     );
3108                 }
3109                 this.hasPointerUp = false;
3110             }
3111 
3112             // After one finger leaves the screen the gesture is stopped.
3113             this._pointerClearTouches(evt.pointerId);
3114             if (this._getPointerInputDevice(evt) !== 'touch') {
3115                 this.dehighlightAll();
3116             }
3117 
3118             if (updateNeeded) {
3119                 this.update();
3120             }
3121 
3122             return true;
3123         },
3124 
3125         /**
3126          * Triggered by the pointerleave event. This is needed in addition to
3127          * {@link JXG.Board#pointerUpListener} in the situation that a pen is used
3128          * and after an up event the pen leaves the hover range vertically. Here, it happens that
3129          * after the pointerup event further pointermove events are fired and elements get highlighted.
3130          * This highlighting has to be cancelled.
3131          *
3132          * @param {Event} evt
3133          * @returns {Boolean}
3134          */
3135         pointerLeaveListener: function (evt) {
3136             this.displayInfobox(false);
3137             this.dehighlightAll();
3138 
3139             return true;
3140         },
3141 
3142         /**
3143          * Touch-Events
3144          */
3145 
3146         /**
3147          * This method is called by the browser when a finger touches the surface of the touch-device.
3148          * @param {Event} evt The browsers event object.
3149          * @returns {Boolean} ...
3150          */
3151         touchStartListener: function (evt) {
3152             var i,
3153                 pos,
3154                 elements,
3155                 j,
3156                 k,
3157                 eps = this.options.precision.touch,
3158                 obj,
3159                 found,
3160                 targets,
3161                 evtTouches = evt[JXG.touchProperty],
3162                 target,
3163                 touchTargets;
3164 
3165             if (!this.hasTouchEnd) {
3166                 Env.addEvent(this.document, 'touchend', this.touchEndListener, this);
3167                 this.hasTouchEnd = true;
3168             }
3169 
3170             // Do not remove mouseHandlers, since Chrome on win tablets sends mouseevents if used with pen.
3171             //if (this.hasMouseHandlers) { this.removeMouseEventHandlers(); }
3172 
3173             // prevent accidental selection of text
3174             if (this.document.selection && Type.isFunction(this.document.selection.empty)) {
3175                 this.document.selection.empty();
3176             } else if (window.getSelection) {
3177                 window.getSelection().removeAllRanges();
3178             }
3179 
3180             // multitouch
3181             this._inputDevice = 'touch';
3182             this.options.precision.hasPoint = this.options.precision.touch;
3183 
3184             // This is the most critical part. first we should run through the existing touches and collect all targettouches that don't belong to our
3185             // previous touches. once this is done we run through the existing touches again and watch out for free touches that can be attached to our existing
3186             // touches, e.g. we translate (parallel translation) a line with one finger, now a second finger is over this line. this should change the operation to
3187             // a rotational translation. or one finger moves a circle, a second finger can be attached to the circle: this now changes the operation from translation to
3188             // stretching. as a last step we're going through the rest of the targettouches and initiate new move operations:
3189             //  * points have higher priority over other elements.
3190             //  * if we find a targettouch over an element that could be transformed with more than one finger, we search the rest of the targettouches, if they are over
3191             //    this element and add them.
3192             // ADDENDUM 11/10/11:
3193             //  (1) run through the touches control object,
3194             //  (2) try to find the targetTouches for every touch. on touchstart only new touches are added, hence we can find a targettouch
3195             //      for every target in our touches objects
3196             //  (3) if one of the targettouches was bound to a touches targets array, mark it
3197             //  (4) run through the targettouches. if the targettouch is marked, continue. otherwise check for elements below the targettouch:
3198             //      (a) if no element could be found: mark the target touches and continue
3199             //      --- in the following cases, 'init' means:
3200             //           (i) check if the element is already used in another touches element, if so, mark the targettouch and continue
3201             //          (ii) if not, init a new touches element, add the targettouch to the touches property and mark it
3202             //      (b) if the element is a point, init
3203             //      (c) if the element is a line, init and try to find a second targettouch on that line. if a second one is found, add and mark it
3204             //      (d) if the element is a circle, init and try to find TWO other targettouches on that circle. if only one is found, mark it and continue. otherwise
3205             //          add both to the touches array and mark them.
3206             for (i = 0; i < evtTouches.length; i++) {
3207                 evtTouches[i].jxg_isused = false;
3208             }
3209 
3210             for (i = 0; i < this.touches.length; i++) {
3211                 touchTargets = this.touches[i].targets;
3212                 for (j = 0; j < touchTargets.length; j++) {
3213                     touchTargets[j].num = -1;
3214                     eps = this.options.precision.touch;
3215 
3216                     do {
3217                         for (k = 0; k < evtTouches.length; k++) {
3218                             // find the new targettouches
3219                             if (
3220                                 Math.abs(
3221                                     Math.pow(evtTouches[k].screenX - touchTargets[j].X, 2) +
3222                                     Math.pow(evtTouches[k].screenY - touchTargets[j].Y, 2)
3223                                 ) <
3224                                 eps * eps
3225                             ) {
3226                                 touchTargets[j].num = k;
3227                                 touchTargets[j].X = evtTouches[k].screenX;
3228                                 touchTargets[j].Y = evtTouches[k].screenY;
3229                                 evtTouches[k].jxg_isused = true;
3230                                 break;
3231                             }
3232                         }
3233 
3234                         eps *= 2;
3235                     } while (
3236                         touchTargets[j].num === -1 &&
3237                         eps < this.options.precision.touchMax
3238                     );
3239 
3240                     if (touchTargets[j].num === -1) {
3241                         JXG.debug(
3242                             "i couldn't find a targettouches for target no " +
3243                             j +
3244                             ' on ' +
3245                             this.touches[i].obj.name +
3246                             ' (' +
3247                             this.touches[i].obj.id +
3248                             '). Removed the target.'
3249                         );
3250                         JXG.debug(
3251                             'eps = ' + eps + ', touchMax = ' + Options.precision.touchMax
3252                         );
3253                         touchTargets.splice(i, 1);
3254                     }
3255                 }
3256             }
3257 
3258             // we just re-mapped the targettouches to our existing touches list.
3259             // now we have to initialize some touches from additional targettouches
3260             for (i = 0; i < evtTouches.length; i++) {
3261                 if (!evtTouches[i].jxg_isused) {
3262                     pos = this.getMousePosition(evt, i);
3263                     // selection
3264                     // this._testForSelection(evt); // we do not have shift or ctrl keys yet.
3265                     if (this.selectingMode) {
3266                         this._startSelecting(pos);
3267                         this.triggerEventHandlers(
3268                             ['touchstartselecting', 'startselecting'],
3269                             [evt]
3270                         );
3271                         evt.preventDefault();
3272                         evt.stopPropagation();
3273                         this.options.precision.hasPoint = this.options.precision.mouse;
3274                         return this.touches.length > 0; // don't continue as a normal click
3275                     }
3276 
3277                     elements = this.initMoveObject(pos[0], pos[1], evt, 'touch');
3278                     if (elements.length !== 0) {
3279                         obj = elements[elements.length - 1];
3280                         target = {
3281                             num: i,
3282                             X: evtTouches[i].screenX,
3283                             Y: evtTouches[i].screenY,
3284                             Xprev: NaN,
3285                             Yprev: NaN,
3286                             Xstart: [],
3287                             Ystart: [],
3288                             Zstart: []
3289                         };
3290 
3291                         if (
3292                             Type.isPoint(obj) ||
3293                             obj.elementClass === Const.OBJECT_CLASS_TEXT ||
3294                             obj.type === Const.OBJECT_TYPE_TICKS ||
3295                             obj.type === Const.OBJECT_TYPE_IMAGE
3296                         ) {
3297                             // It's a point, so it's single touch, so we just push it to our touches
3298                             targets = [target];
3299 
3300                             // For the UNDO/REDO of object moves
3301                             this.saveStartPos(obj, targets[0]);
3302 
3303                             this.touches.push({ obj: obj, targets: targets });
3304                             obj.highlight(true);
3305                         } else if (
3306                             obj.elementClass === Const.OBJECT_CLASS_LINE ||
3307                             obj.elementClass === Const.OBJECT_CLASS_CIRCLE ||
3308                             obj.elementClass === Const.OBJECT_CLASS_CURVE ||
3309                             obj.type === Const.OBJECT_TYPE_POLYGON
3310                         ) {
3311                             found = false;
3312 
3313                             // first check if this geometric object is already captured in this.touches
3314                             for (j = 0; j < this.touches.length; j++) {
3315                                 if (obj.id === this.touches[j].obj.id) {
3316                                     found = true;
3317                                     // only add it, if we don't have two targets in there already
3318                                     if (this.touches[j].targets.length === 1) {
3319                                         // For the UNDO/REDO of object moves
3320                                         this.saveStartPos(obj, target);
3321                                         this.touches[j].targets.push(target);
3322                                     }
3323 
3324                                     evtTouches[i].jxg_isused = true;
3325                                 }
3326                             }
3327 
3328                             // we couldn't find it in touches, so we just init a new touches
3329                             // IF there is a second touch targetting this line, we will find it later on, and then add it to
3330                             // the touches control object.
3331                             if (!found) {
3332                                 targets = [target];
3333 
3334                                 // For the UNDO/REDO of object moves
3335                                 this.saveStartPos(obj, targets[0]);
3336                                 this.touches.push({ obj: obj, targets: targets });
3337                                 obj.highlight(true);
3338                             }
3339                         }
3340                     }
3341 
3342                     evtTouches[i].jxg_isused = true;
3343                 }
3344             }
3345 
3346             if (this.touches.length > 0) {
3347                 evt.preventDefault();
3348                 evt.stopPropagation();
3349             }
3350 
3351             // Touch events on empty areas of the board are handled here:
3352             // 1. case: one finger. If allowed, this triggers pan with one finger
3353             if (
3354                 evtTouches.length === 1 &&
3355                 this.mode === this.BOARD_MODE_NONE &&
3356                 this.touchStartMoveOriginOneFinger(evt)
3357             ) {
3358             } else if (
3359                 evtTouches.length === 2 &&
3360                 (this.mode === this.BOARD_MODE_NONE ||
3361                     this.mode === this.BOARD_MODE_MOVE_ORIGIN)
3362             ) {
3363                 // 2. case: two fingers: pinch to zoom or pan with two fingers needed.
3364                 // This happens when the second finger hits the device. First, the
3365                 // 'one finger pan mode' has to be cancelled.
3366                 if (this.mode === this.BOARD_MODE_MOVE_ORIGIN) {
3367                     this.originMoveEnd();
3368                 }
3369                 this.gestureStartListener(evt);
3370             }
3371 
3372             this.options.precision.hasPoint = this.options.precision.mouse;
3373             this.triggerEventHandlers(['touchstart', 'down'], [evt]);
3374 
3375             return false;
3376             //return this.touches.length > 0;
3377         },
3378 
3379         /**
3380          * Called periodically by the browser while the user moves his fingers across the device.
3381          * @param {Event} evt
3382          * @returns {Boolean}
3383          */
3384         touchMoveListener: function (evt) {
3385             var i,
3386                 pos1,
3387                 pos2,
3388                 touchTargets,
3389                 evtTouches = evt[JXG.touchProperty];
3390 
3391             if (!this.checkFrameRate(evt)) {
3392                 return false;
3393             }
3394 
3395             if (this.mode !== this.BOARD_MODE_NONE) {
3396                 evt.preventDefault();
3397                 evt.stopPropagation();
3398             }
3399 
3400             if (this.mode !== this.BOARD_MODE_DRAG) {
3401                 this.dehighlightAll();
3402                 this.displayInfobox(false);
3403             }
3404 
3405             this._inputDevice = 'touch';
3406             this.options.precision.hasPoint = this.options.precision.touch;
3407             this.updateQuality = this.BOARD_QUALITY_LOW;
3408 
3409             // selection
3410             if (this.selectingMode) {
3411                 for (i = 0; i < evtTouches.length; i++) {
3412                     if (!evtTouches[i].jxg_isused) {
3413                         pos1 = this.getMousePosition(evt, i);
3414                         this._moveSelecting(pos1);
3415                         this.triggerEventHandlers(
3416                             ['touchmoves', 'moveselecting'],
3417                             [evt, this.mode]
3418                         );
3419                         break;
3420                     }
3421                 }
3422             } else {
3423                 if (!this.touchOriginMove(evt)) {
3424                     if (this.mode === this.BOARD_MODE_DRAG) {
3425                         // Runs over through all elements which are touched
3426                         // by at least one finger.
3427                         for (i = 0; i < this.touches.length; i++) {
3428                             touchTargets = this.touches[i].targets;
3429                             if (touchTargets.length === 1) {
3430                                 // Touch by one finger:  this is possible for all elements that can be dragged
3431                                 if (evtTouches[touchTargets[0].num]) {
3432                                     pos1 = this.getMousePosition(evt, touchTargets[0].num);
3433                                     if (
3434                                         pos1[0] < 0 ||
3435                                         pos1[0] > this.canvasWidth ||
3436                                         pos1[1] < 0 ||
3437                                         pos1[1] > this.canvasHeight
3438                                     ) {
3439                                         return;
3440                                     }
3441                                     touchTargets[0].X = pos1[0];
3442                                     touchTargets[0].Y = pos1[1];
3443                                     this.moveObject(
3444                                         pos1[0],
3445                                         pos1[1],
3446                                         this.touches[i],
3447                                         evt,
3448                                         'touch'
3449                                     );
3450                                 }
3451                             } else if (
3452                                 touchTargets.length === 2 &&
3453                                 touchTargets[0].num > -1 &&
3454                                 touchTargets[1].num > -1
3455                             ) {
3456                                 // Touch by two fingers: moving lines, ...
3457                                 if (
3458                                     evtTouches[touchTargets[0].num] &&
3459                                     evtTouches[touchTargets[1].num]
3460                                 ) {
3461                                     // Get coordinates of the two touches
3462                                     pos1 = this.getMousePosition(evt, touchTargets[0].num);
3463                                     pos2 = this.getMousePosition(evt, touchTargets[1].num);
3464                                     if (
3465                                         pos1[0] < 0 ||
3466                                         pos1[0] > this.canvasWidth ||
3467                                         pos1[1] < 0 ||
3468                                         pos1[1] > this.canvasHeight ||
3469                                         pos2[0] < 0 ||
3470                                         pos2[0] > this.canvasWidth ||
3471                                         pos2[1] < 0 ||
3472                                         pos2[1] > this.canvasHeight
3473                                     ) {
3474                                         return;
3475                                     }
3476 
3477                                     touchTargets[0].X = pos1[0];
3478                                     touchTargets[0].Y = pos1[1];
3479                                     touchTargets[1].X = pos2[0];
3480                                     touchTargets[1].Y = pos2[1];
3481 
3482                                     this.twoFingerMove(
3483                                         this.touches[i],
3484                                         touchTargets[0].num,
3485                                         evt
3486                                     );
3487 
3488                                     touchTargets[0].Xprev = pos1[0];
3489                                     touchTargets[0].Yprev = pos1[1];
3490                                     touchTargets[1].Xprev = pos2[0];
3491                                     touchTargets[1].Yprev = pos2[1];
3492                                 }
3493                             }
3494                         }
3495                     } else {
3496                         if (evtTouches.length === 2) {
3497                             this.gestureChangeListener(evt);
3498                         }
3499                         // Move event without dragging an element
3500                         pos1 = this.getMousePosition(evt, 0);
3501                         this.highlightElements(pos1[0], pos1[1], evt, -1);
3502                     }
3503                 }
3504             }
3505 
3506             if (this.mode !== this.BOARD_MODE_DRAG) {
3507                 this.displayInfobox(false);
3508             }
3509 
3510             this.triggerEventHandlers(['touchmove', 'move'], [evt, this.mode]);
3511             this.options.precision.hasPoint = this.options.precision.mouse;
3512             this.updateQuality = this.BOARD_QUALITY_HIGH;
3513 
3514             return this.mode === this.BOARD_MODE_NONE;
3515         },
3516 
3517         /**
3518          * Triggered as soon as the user stops touching the device with at least one finger.
3519          * @param {Event} evt
3520          * @returns {Boolean}
3521          */
3522         touchEndListener: function (evt) {
3523             var i,
3524                 j,
3525                 k,
3526                 eps = this.options.precision.touch,
3527                 tmpTouches = [],
3528                 found,
3529                 foundNumber,
3530                 evtTouches = evt && evt[JXG.touchProperty],
3531                 touchTargets,
3532                 updateNeeded = false;
3533 
3534             this.triggerEventHandlers(['touchend', 'up'], [evt]);
3535             this.displayInfobox(false);
3536 
3537             // selection
3538             if (this.selectingMode) {
3539                 this._stopSelecting(evt);
3540                 this.triggerEventHandlers(['touchstopselecting', 'stopselecting'], [evt]);
3541                 this.stopSelectionMode();
3542             } else if (evtTouches && evtTouches.length > 0) {
3543                 for (i = 0; i < this.touches.length; i++) {
3544                     tmpTouches[i] = this.touches[i];
3545                 }
3546                 this.touches.length = 0;
3547 
3548                 // try to convert the operation, e.g. if a lines is rotated and translated with two fingers and one finger is lifted,
3549                 // convert the operation to a simple one-finger-translation.
3550                 // ADDENDUM 11/10/11:
3551                 // see addendum to touchStartListener from 11/10/11
3552                 // (1) run through the tmptouches
3553                 // (2) check the touches.obj, if it is a
3554                 //     (a) point, try to find the targettouch, if found keep it and mark the targettouch, else drop the touch.
3555                 //     (b) line with
3556                 //          (i) one target: try to find it, if found keep it mark the targettouch, else drop the touch.
3557                 //         (ii) two targets: if none can be found, drop the touch. if one can be found, remove the other target. mark all found targettouches
3558                 //     (c) circle with [proceed like in line]
3559 
3560                 // init the targettouches marker
3561                 for (i = 0; i < evtTouches.length; i++) {
3562                     evtTouches[i].jxg_isused = false;
3563                 }
3564 
3565                 for (i = 0; i < tmpTouches.length; i++) {
3566                     // could all targets of the current this.touches.obj be assigned to targettouches?
3567                     found = false;
3568                     foundNumber = 0;
3569                     touchTargets = tmpTouches[i].targets;
3570 
3571                     for (j = 0; j < touchTargets.length; j++) {
3572                         touchTargets[j].found = false;
3573                         for (k = 0; k < evtTouches.length; k++) {
3574                             if (
3575                                 Math.abs(
3576                                     Math.pow(evtTouches[k].screenX - touchTargets[j].X, 2) +
3577                                     Math.pow(evtTouches[k].screenY - touchTargets[j].Y, 2)
3578                                 ) <
3579                                 eps * eps
3580                             ) {
3581                                 touchTargets[j].found = true;
3582                                 touchTargets[j].num = k;
3583                                 touchTargets[j].X = evtTouches[k].screenX;
3584                                 touchTargets[j].Y = evtTouches[k].screenY;
3585                                 foundNumber += 1;
3586                                 break;
3587                             }
3588                         }
3589                     }
3590 
3591                     if (Type.isPoint(tmpTouches[i].obj)) {
3592                         found = touchTargets[0] && touchTargets[0].found;
3593                     } else if (tmpTouches[i].obj.elementClass === Const.OBJECT_CLASS_LINE) {
3594                         found =
3595                             (touchTargets[0] && touchTargets[0].found) ||
3596                             (touchTargets[1] && touchTargets[1].found);
3597                     } else if (tmpTouches[i].obj.elementClass === Const.OBJECT_CLASS_CIRCLE) {
3598                         found = foundNumber === 1 || foundNumber === 3;
3599                     }
3600 
3601                     // if we found this object to be still dragged by the user, add it back to this.touches
3602                     if (found) {
3603                         this.touches.push({
3604                             obj: tmpTouches[i].obj,
3605                             targets: []
3606                         });
3607 
3608                         for (j = 0; j < touchTargets.length; j++) {
3609                             if (touchTargets[j].found) {
3610                                 this.touches[this.touches.length - 1].targets.push({
3611                                     num: touchTargets[j].num,
3612                                     X: touchTargets[j].screenX,
3613                                     Y: touchTargets[j].screenY,
3614                                     Xprev: NaN,
3615                                     Yprev: NaN,
3616                                     Xstart: touchTargets[j].Xstart,
3617                                     Ystart: touchTargets[j].Ystart,
3618                                     Zstart: touchTargets[j].Zstart
3619                                 });
3620                             }
3621                         }
3622                     } else {
3623                         tmpTouches[i].obj.noHighlight();
3624                     }
3625                 }
3626             } else {
3627                 this.touches.length = 0;
3628             }
3629 
3630             for (i = this.downObjects.length - 1; i > -1; i--) {
3631                 found = false;
3632                 for (j = 0; j < this.touches.length; j++) {
3633                     if (this.touches[j].obj.id === this.downObjects[i].id) {
3634                         found = true;
3635                     }
3636                 }
3637                 if (!found) {
3638                     this.downObjects[i].triggerEventHandlers(['touchup', 'up'], [evt]);
3639                     if (!Type.exists(this.downObjects[i].coords)) {
3640                         // snapTo methods have to be called e.g. for line elements here.
3641                         // For coordsElements there might be a conflict with
3642                         // attractors, see commit from 2022.04.08, 11:12:18.
3643                         this.downObjects[i].snapToGrid();
3644                         this.downObjects[i].snapToPoints();
3645                         updateNeeded = true;
3646                     }
3647                     this.downObjects.splice(i, 1);
3648                 }
3649             }
3650 
3651             if (!evtTouches || evtTouches.length === 0) {
3652                 if (this.hasTouchEnd) {
3653                     Env.removeEvent(this.document, 'touchend', this.touchEndListener, this);
3654                     this.hasTouchEnd = false;
3655                 }
3656 
3657                 this.dehighlightAll();
3658                 this.updateQuality = this.BOARD_QUALITY_HIGH;
3659 
3660                 this.originMoveEnd();
3661                 if (updateNeeded) {
3662                     this.update();
3663                 }
3664             }
3665 
3666             return true;
3667         },
3668 
3669         /**
3670          * This method is called by the browser when the mouse button is clicked.
3671          * @param {Event} evt The browsers event object.
3672          * @returns {Boolean} True if no element is found under the current mouse pointer, false otherwise.
3673          */
3674         mouseDownListener: function (evt) {
3675             var pos, elements, result;
3676 
3677             // prevent accidental selection of text
3678             if (this.document.selection && Type.isFunction(this.document.selection.empty)) {
3679                 this.document.selection.empty();
3680             } else if (window.getSelection) {
3681                 window.getSelection().removeAllRanges();
3682             }
3683 
3684             if (!this.hasMouseUp) {
3685                 Env.addEvent(this.document, 'mouseup', this.mouseUpListener, this);
3686                 this.hasMouseUp = true;
3687             } else {
3688                 // In case this.hasMouseUp==true, it may be that there was a
3689                 // mousedown event before which was not followed by an mouseup event.
3690                 // This seems to happen with interactive whiteboard pens sometimes.
3691                 return;
3692             }
3693 
3694             this._inputDevice = 'mouse';
3695             this.options.precision.hasPoint = this.options.precision.mouse;
3696             pos = this.getMousePosition(evt);
3697 
3698             // selection
3699             this._testForSelection(evt);
3700             if (this.selectingMode) {
3701                 this._startSelecting(pos);
3702                 this.triggerEventHandlers(['mousestartselecting', 'startselecting'], [evt]);
3703                 return; // don't continue as a normal click
3704             }
3705 
3706             elements = this.initMoveObject(pos[0], pos[1], evt, 'mouse');
3707 
3708             // if no draggable object can be found, get out here immediately
3709             if (elements.length === 0) {
3710                 this.mode = this.BOARD_MODE_NONE;
3711                 result = true;
3712             } else {
3713                 this.mouse = {
3714                     obj: null,
3715                     targets: [
3716                         {
3717                             X: pos[0],
3718                             Y: pos[1],
3719                             Xprev: NaN,
3720                             Yprev: NaN
3721                         }
3722                     ]
3723                 };
3724                 this.mouse.obj = elements[elements.length - 1];
3725 
3726                 this.dehighlightAll();
3727                 this.mouse.obj.highlight(true);
3728 
3729                 this.mouse.targets[0].Xstart = [];
3730                 this.mouse.targets[0].Ystart = [];
3731                 this.mouse.targets[0].Zstart = [];
3732 
3733                 this.saveStartPos(this.mouse.obj, this.mouse.targets[0]);
3734 
3735                 // prevent accidental text selection
3736                 // this could get us new trouble: input fields, links and drop down boxes placed as text
3737                 // on the board don't work anymore.
3738                 if (evt && evt.preventDefault) {
3739                     evt.preventDefault();
3740                 } else if (window.event) {
3741                     window.event.returnValue = false;
3742                 }
3743             }
3744 
3745             if (this.mode === this.BOARD_MODE_NONE) {
3746                 result = this.mouseOriginMoveStart(evt);
3747             }
3748 
3749             this.triggerEventHandlers(['mousedown', 'down'], [evt]);
3750 
3751             return result;
3752         },
3753 
3754         /**
3755          * This method is called by the browser when the mouse is moved.
3756          * @param {Event} evt The browsers event object.
3757          */
3758         mouseMoveListener: function (evt) {
3759             var pos;
3760 
3761             if (!this.checkFrameRate(evt)) {
3762                 return false;
3763             }
3764 
3765             pos = this.getMousePosition(evt);
3766 
3767             this.updateQuality = this.BOARD_QUALITY_LOW;
3768 
3769             if (this.mode !== this.BOARD_MODE_DRAG) {
3770                 this.dehighlightAll();
3771                 this.displayInfobox(false);
3772             }
3773 
3774             // we have to check for four cases:
3775             //   * user moves origin
3776             //   * user drags an object
3777             //   * user just moves the mouse, here highlight all elements at
3778             //     the current mouse position
3779             //   * the user is selecting
3780 
3781             // selection
3782             if (this.selectingMode) {
3783                 this._moveSelecting(pos);
3784                 this.triggerEventHandlers(
3785                     ['mousemoveselecting', 'moveselecting'],
3786                     [evt, this.mode]
3787                 );
3788             } else if (!this.mouseOriginMove(evt)) {
3789                 if (this.mode === this.BOARD_MODE_DRAG) {
3790                     this.moveObject(pos[0], pos[1], this.mouse, evt, 'mouse');
3791                 } else {
3792                     // BOARD_MODE_NONE
3793                     // Move event without dragging an element
3794                     this.highlightElements(pos[0], pos[1], evt, -1);
3795                 }
3796                 this.triggerEventHandlers(['mousemove', 'move'], [evt, this.mode]);
3797             }
3798             this.updateQuality = this.BOARD_QUALITY_HIGH;
3799         },
3800 
3801         /**
3802          * This method is called by the browser when the mouse button is released.
3803          * @param {Event} evt
3804          */
3805         mouseUpListener: function (evt) {
3806             var i;
3807 
3808             if (this.selectingMode === false) {
3809                 this.triggerEventHandlers(['mouseup', 'up'], [evt]);
3810             }
3811 
3812             // redraw with high precision
3813             this.updateQuality = this.BOARD_QUALITY_HIGH;
3814 
3815             if (this.mouse && this.mouse.obj) {
3816                 if (!Type.exists(this.mouse.obj.coords)) {
3817                     // snapTo methods have to be called e.g. for line elements here.
3818                     // For coordsElements there might be a conflict with
3819                     // attractors, see commit from 2022.04.08, 11:12:18.
3820                     // The parameter is needed for lines with snapToGrid enabled
3821                     this.mouse.obj.snapToGrid(this.mouse.targets[0]);
3822                     this.mouse.obj.snapToPoints();
3823                 }
3824             }
3825 
3826             this.originMoveEnd();
3827             this.dehighlightAll();
3828             this.update();
3829 
3830             // selection
3831             if (this.selectingMode) {
3832                 this._stopSelecting(evt);
3833                 this.triggerEventHandlers(['mousestopselecting', 'stopselecting'], [evt]);
3834                 this.stopSelectionMode();
3835             } else {
3836                 for (i = 0; i < this.downObjects.length; i++) {
3837                     this.downObjects[i].triggerEventHandlers(['mouseup', 'up'], [evt]);
3838                 }
3839             }
3840 
3841             this.downObjects.length = 0;
3842 
3843             if (this.hasMouseUp) {
3844                 Env.removeEvent(this.document, 'mouseup', this.mouseUpListener, this);
3845                 this.hasMouseUp = false;
3846             }
3847 
3848             // release dragged mouse object
3849             this.mouse = null;
3850         },
3851 
3852         /**
3853          * Handler for mouse wheel events. Used to zoom in and out of the board.
3854          * @param {Event} evt
3855          * @returns {Boolean}
3856          */
3857         mouseWheelListener: function (evt) {
3858             if (!this.attr.zoom.enabled ||
3859                 !this.attr.zoom.wheel ||
3860                 !this._isRequiredKeyPressed(evt, 'zoom')) {
3861 
3862                 return true;
3863             }
3864 
3865             evt = evt || window.event;
3866             var wd = evt.detail ? -evt.detail : evt.wheelDelta / 40,
3867                 pos = new Coords(Const.COORDS_BY_SCREEN, this.getMousePosition(evt), this);
3868 
3869             if (wd > 0) {
3870                 this.zoomIn(pos.usrCoords[1], pos.usrCoords[2]);
3871             } else {
3872                 this.zoomOut(pos.usrCoords[1], pos.usrCoords[2]);
3873             }
3874 
3875             this.triggerEventHandlers(['mousewheel'], [evt]);
3876 
3877             evt.preventDefault();
3878             return false;
3879         },
3880 
3881         /**
3882          * Allow moving of JSXGraph elements with arrow keys.
3883          * The selection of the element is done with the tab key. For this,
3884          * the attribute 'tabindex' of the element has to be set to some number (default=0).
3885          * tabindex corresponds to the HTML attribute of the same name.
3886          * <p>
3887          * Panning of the construction is done with arrow keys
3888          * if the pan key (shift or ctrl - depending on the board attributes) is pressed.
3889          * <p>
3890          * Zooming is triggered with the keys +, o, -, if
3891          * the pan key (shift or ctrl - depending on the board attributes) is pressed.
3892          * <p>
3893          * Keyboard control (move, pan, and zoom) is disabled if an HTML element of type input or textarea has received focus.
3894          *
3895          * @param  {Event} evt The browser's event object
3896          *
3897          * @see JXG.Board#keyboard
3898          * @see JXG.Board#keyFocusInListener
3899          * @see JXG.Board#keyFocusOutListener
3900          *
3901          */
3902         keyDownListener: function (evt) {
3903             var id_node = evt.target.id,
3904                 id, el, res, doc,
3905                 sX = 0,
3906                 sY = 0,
3907                 // dx, dy are provided in screen units and
3908                 // are converted to user coordinates
3909                 dx = Type.evaluate(this.attr.keyboard.dx) / this.unitX,
3910                 dy = Type.evaluate(this.attr.keyboard.dy) / this.unitY,
3911                 // u = 100,
3912                 doZoom = false,
3913                 done = true,
3914                 dir,
3915                 actPos;
3916 
3917             if (!this.attr.keyboard.enabled || id_node === '') {
3918                 return false;
3919             }
3920 
3921             // dx = Math.round(dx * u) / u;
3922             // dy = Math.round(dy * u) / u;
3923 
3924             // An element of type input or textarea has foxus, get out of here.
3925             doc = this.containerObj.shadowRoot || document;
3926             if (doc.activeElement) {
3927                 el = doc.activeElement;
3928                 if (el.tagName === 'INPUT' || el.tagName === 'textarea') {
3929                     return false;
3930                 }
3931             }
3932 
3933             // Get the JSXGraph id from the id of the SVG node.
3934             id = id_node.replace(this.containerObj.id + '_', '');
3935             el = this.select(id);
3936 
3937             if (Type.exists(el.coords)) {
3938                 actPos = el.coords.usrCoords.slice(1);
3939             }
3940 
3941             if (
3942                 (Type.evaluate(this.attr.keyboard.panshift) && evt.shiftKey) ||
3943                 (Type.evaluate(this.attr.keyboard.panctrl) && evt.ctrlKey)
3944             ) {
3945                 // Pan key has been pressed
3946 
3947                 if (Type.evaluate(this.attr.zoom.enabled) === true) {
3948                     doZoom = true;
3949                 }
3950 
3951                 // Arrow keys
3952                 if (evt.keyCode === 38) {
3953                     // up
3954                     this.clickUpArrow();
3955                 } else if (evt.keyCode === 40) {
3956                     // down
3957                     this.clickDownArrow();
3958                 } else if (evt.keyCode === 37) {
3959                     // left
3960                     this.clickLeftArrow();
3961                 } else if (evt.keyCode === 39) {
3962                     // right
3963                     this.clickRightArrow();
3964 
3965                     // Zoom keys
3966                 } else if (doZoom && evt.keyCode === 171) {
3967                     // +
3968                     this.zoomIn();
3969                 } else if (doZoom && evt.keyCode === 173) {
3970                     // -
3971                     this.zoomOut();
3972                 } else if (doZoom && evt.keyCode === 79) {
3973                     // o
3974                     this.zoom100();
3975                 } else {
3976                     done = false;
3977                 }
3978             } else {
3979                 // Adapt dx, dy to snapToGrid and attractToGrid.
3980                 // snapToGrid has priority.
3981                 if (Type.exists(el.visProp)) {
3982                     if (
3983                         Type.exists(el.visProp.snaptogrid) &&
3984                         el.visProp.snaptogrid &&
3985                         Type.evaluate(el.visProp.snapsizex) &&
3986                         Type.evaluate(el.visProp.snapsizey)
3987                     ) {
3988                         // Adapt dx, dy such that snapToGrid is possible
3989                         res = el.getSnapSizes();
3990                         sX = res[0];
3991                         sY = res[1];
3992                         // If snaptogrid is true,
3993                         // we can only jump from grid point to grid point.
3994                         dx = sX;
3995                         dy = sY;
3996                     } else if (
3997                         Type.exists(el.visProp.attracttogrid) &&
3998                         el.visProp.attracttogrid &&
3999                         Type.evaluate(el.visProp.attractordistance) &&
4000                         Type.evaluate(el.visProp.attractorunit)
4001                     ) {
4002                         // Adapt dx, dy such that attractToGrid is possible
4003                         sX = 1.1 * Type.evaluate(el.visProp.attractordistance);
4004                         sY = sX;
4005 
4006                         if (Type.evaluate(el.visProp.attractorunit) === 'screen') {
4007                             sX /= this.unitX;
4008                             sY /= this.unitX;
4009                         }
4010                         dx = Math.max(sX, dx);
4011                         dy = Math.max(sY, dy);
4012                     }
4013                 }
4014 
4015                 if (evt.keyCode === 38) {
4016                     // up
4017                     dir = [0, dy];
4018                 } else if (evt.keyCode === 40) {
4019                     // down
4020                     dir = [0, -dy];
4021                 } else if (evt.keyCode === 37) {
4022                     // left
4023                     dir = [-dx, 0];
4024                 } else if (evt.keyCode === 39) {
4025                     // right
4026                     dir = [dx, 0];
4027                 } else {
4028                     done = false;
4029                 }
4030 
4031                 if (dir && el.isDraggable &&
4032                     el.visPropCalc.visible &&
4033                     ((this.geonextCompatibilityMode &&
4034                         (Type.isPoint(el) ||
4035                             el.elementClass === Const.OBJECT_CLASS_TEXT)
4036                     ) || !this.geonextCompatibilityMode) &&
4037                     !Type.evaluate(el.visProp.fixed)
4038                 ) {
4039 
4040 
4041                     this.mode = this.BOARD_MODE_DRAG;
4042                     if (Type.exists(el.coords)) {
4043                         dir[0] += actPos[0];
4044                         dir[1] += actPos[1];
4045                     }
4046                     // For coordsElement setPosition has to call setPositionDirectly.
4047                     // Otherwise the position is set by a translation.
4048                     if (Type.exists(el.coords)) {
4049                         el.setPosition(JXG.COORDS_BY_USER, dir);
4050                         this.updateInfobox(el);
4051                     } else {
4052                         this.displayInfobox(false);
4053                         el.setPositionDirectly(
4054                             Const.COORDS_BY_USER,
4055                             dir,
4056                             [0, 0]
4057                         );
4058                     }
4059 
4060                     this.triggerEventHandlers(['keymove', 'move'], [evt, this.mode]);
4061                     el.triggerEventHandlers(['keydrag', 'drag'], [evt]);
4062                     this.mode = this.BOARD_MODE_NONE;
4063                 }
4064             }
4065 
4066             this.update();
4067 
4068             if (done && Type.exists(evt.preventDefault)) {
4069                 evt.preventDefault();
4070             }
4071             return done;
4072         },
4073 
4074         /**
4075          * Event listener for SVG elements getting focus.
4076          * This is needed for highlighting when using keyboard control.
4077          * Only elements having the attribute 'tabindex' can receive focus.
4078          *
4079          * @see JXG.Board#keyFocusOutListener
4080          * @see JXG.Board#keyDownListener
4081          * @see JXG.Board#keyboard
4082          *
4083          * @param  {Event} evt The browser's event object
4084          */
4085         keyFocusInListener: function (evt) {
4086             var id_node = evt.target.id,
4087                 id,
4088                 el;
4089 
4090             if (!this.attr.keyboard.enabled || id_node === '') {
4091                 return false;
4092             }
4093 
4094             id = id_node.replace(this.containerObj.id + '_', '');
4095             el = this.select(id);
4096             if (Type.exists(el.highlight)) {
4097                 el.highlight(true);
4098                 this.focusObjects = [id];
4099                 el.triggerEventHandlers(['hit'], [evt]);
4100             }
4101             if (Type.exists(el.coords)) {
4102                 this.updateInfobox(el);
4103             }
4104         },
4105 
4106         /**
4107          * Event listener for SVG elements losing focus.
4108          * This is needed for dehighlighting when using keyboard control.
4109          * Only elements having the attribute 'tabindex' can receive focus.
4110          *
4111          * @see JXG.Board#keyFocusInListener
4112          * @see JXG.Board#keyDownListener
4113          * @see JXG.Board#keyboard
4114          *
4115          * @param  {Event} evt The browser's event object
4116          */
4117         keyFocusOutListener: function (evt) {
4118             if (!this.attr.keyboard.enabled) {
4119                 return false;
4120             }
4121             this.focusObjects = []; // This has to be before displayInfobox(false)
4122             this.dehighlightAll();
4123             this.displayInfobox(false);
4124         },
4125 
4126         /**
4127          * Update the width and height of the JSXGraph container div element.
4128          * Read actual values with getBoundingClientRect(),
4129          * and call board.resizeContainer() with this values.
4130          * <p>
4131          * If necessary, also call setBoundingBox().
4132          *
4133          * @see JXG.Board#startResizeObserver
4134          * @see JXG.Board#resizeListener
4135          * @see JXG.Board#resizeContainer
4136          * @see JXG.Board#setBoundingBox
4137          *
4138          */
4139         updateContainerDims: function () {
4140             var w, h,
4141                 bb, css,
4142                 width_adjustment, height_adjustment;
4143 
4144             // Get size of the board's container div
4145             bb = this.containerObj.getBoundingClientRect();
4146             w = bb.width;
4147             h = bb.height;
4148 
4149             // Subtract the border size
4150             if (window && window.getComputedStyle) {
4151                 css = window.getComputedStyle(this.containerObj, null);
4152                 width_adjustment = parseFloat(css.getPropertyValue('border-left-width')) + parseFloat(css.getPropertyValue('border-right-width'));
4153                 if (!isNaN(width_adjustment)) {
4154                     w -= width_adjustment;
4155                 }
4156                 height_adjustment = parseFloat(css.getPropertyValue('border-top-width')) + parseFloat(css.getPropertyValue('border-bottom-width'));
4157                 if (!isNaN(height_adjustment)) {
4158                     h -= height_adjustment;
4159                 }
4160             }
4161 
4162             // If div is invisible - do nothing
4163             if (w <= 0 || h <= 0 || isNaN(w) || isNaN(h)) {
4164                 return;
4165             }
4166 
4167             // If bounding box is not yet initialized, do it now.
4168             if (isNaN(this.getBoundingBox()[0])) {
4169                 this.setBoundingBox(this.attr.boundingbox, this.keepaspectratio, 'keep');
4170             }
4171 
4172             // Do nothing if the dimension did not change since being visible
4173             // the last time. Note that if the div had display:none in the mean time,
4174             // we did not store this._prevDim.
4175             if (Type.exists(this._prevDim) && this._prevDim.w === w && this._prevDim.h === h) {
4176                 return;
4177             }
4178 
4179             // Set the size of the SVG or canvas element
4180             this.resizeContainer(w, h, true);
4181             this._prevDim = {
4182                 w: w,
4183                 h: h
4184             };
4185         },
4186 
4187         /**
4188          * Start observer which reacts to size changes of the JSXGraph
4189          * container div element. Calls updateContainerDims().
4190          * If not available, an event listener for the window-resize event is started.
4191          * On mobile devices also scrolling might trigger resizes.
4192          * However, resize events triggered by scrolling events should be ignored.
4193          * Therefore, also a scrollListener is started.
4194          * Resize can be controlled with the board attribute resize.
4195          *
4196          * @see JXG.Board#updateContainerDims
4197          * @see JXG.Board#resizeListener
4198          * @see JXG.Board#scrollListener
4199          * @see JXG.Board#resize
4200          *
4201          */
4202         startResizeObserver: function () {
4203             var that = this;
4204 
4205             if (!Env.isBrowser || !this.attr.resize || !this.attr.resize.enabled) {
4206                 return;
4207             }
4208 
4209             this.resizeObserver = new ResizeObserver(function (entries) {
4210                 if (!that._isResizing) {
4211                     that._isResizing = true;
4212                     window.setTimeout(function () {
4213                         try {
4214                             that.updateContainerDims();
4215                         } catch (err) {
4216                             that.stopResizeObserver();
4217                         } finally {
4218                             that._isResizing = false;
4219                         }
4220                     }, that.attr.resize.throttle);
4221                 }
4222             });
4223             this.resizeObserver.observe(this.containerObj);
4224         },
4225 
4226         /**
4227          * Stops the resize observer.
4228          * @see JXG.Board#startResizeObserver
4229          *
4230          */
4231         stopResizeObserver: function () {
4232             if (!Env.isBrowser || !this.attr.resize || !this.attr.resize.enabled) {
4233                 return;
4234             }
4235 
4236             if (Type.exists(this.resizeObserver)) {
4237                 this.resizeObserver.unobserve(this.containerObj);
4238             }
4239         },
4240 
4241         /**
4242          * Fallback solutions if there is no resizeObserver available in the browser.
4243          * Reacts to resize events of the window (only). Otherwise similar to
4244          * startResizeObserver(). To handle changes of the visibility
4245          * of the JSXGraph container element, additionally an intersection observer is used.
4246          * which watches changes in the visibility of the JSXGraph container element.
4247          * This is necessary e.g. for register tabs or dia shows.
4248          *
4249          * @see JXG.Board#startResizeObserver
4250          * @see JXG.Board#startIntersectionObserver
4251          */
4252         resizeListener: function () {
4253             var that = this;
4254 
4255             if (!Env.isBrowser || !this.attr.resize || !this.attr.resize.enabled) {
4256                 return;
4257             }
4258             if (!this._isScrolling && !this._isResizing) {
4259                 this._isResizing = true;
4260                 window.setTimeout(function () {
4261                     that.updateContainerDims();
4262                     that._isResizing = false;
4263                 }, this.attr.resize.throttle);
4264             }
4265         },
4266 
4267         /**
4268          * Listener to watch for scroll events. Sets board._isScrolling = true
4269          * @param  {Event} evt The browser's event object
4270          *
4271          * @see JXG.Board#startResizeObserver
4272          * @see JXG.Board#resizeListener
4273          *
4274          */
4275         scrollListener: function (evt) {
4276             var that = this;
4277 
4278             if (!Env.isBrowser) {
4279                 return;
4280             }
4281             if (!this._isScrolling) {
4282                 this._isScrolling = true;
4283                 window.setTimeout(function () {
4284                     that._isScrolling = false;
4285                 }, 66);
4286             }
4287         },
4288 
4289         /**
4290          * Watch for changes of the visibility of the JSXGraph container element.
4291          *
4292          * @see JXG.Board#startResizeObserver
4293          * @see JXG.Board#resizeListener
4294          *
4295          */
4296         startIntersectionObserver: function () {
4297             var that = this,
4298                 options = {
4299                     root: null,
4300                     rootMargin: '0px',
4301                     threshold: 0.8
4302                 };
4303 
4304             try {
4305                 this.intersectionObserver = new IntersectionObserver(function (entries) {
4306                     // If bounding box is not yet initialized, do it now.
4307                     if (isNaN(that.getBoundingBox()[0])) {
4308                         that.updateContainerDims();
4309                     }
4310                 }, options);
4311                 this.intersectionObserver.observe(that.containerObj);
4312             } catch (err) {
4313                 JXG.debug('JSXGraph: IntersectionObserver not available in this browser.');
4314             }
4315         },
4316 
4317         /**
4318          * Stop the intersection observer
4319          *
4320          * @see JXG.Board#startIntersectionObserver
4321          *
4322          */
4323         stopIntersectionObserver: function () {
4324             if (Type.exists(this.intersectionObserver)) {
4325                 this.intersectionObserver.unobserve(this.containerObj);
4326             }
4327         },
4328 
4329         /**********************************************************
4330          *
4331          * End of Event Handlers
4332          *
4333          **********************************************************/
4334 
4335         /**
4336          * Initialize the info box object which is used to display
4337          * the coordinates of points near the mouse pointer,
4338          * @returns {JXG.Board} Reference to the board
4339          */
4340         initInfobox: function (attributes) {
4341             var attr = Type.copyAttributes(attributes, this.options, 'infobox');
4342 
4343             attr.id = this.id + '_infobox';
4344 
4345             /**
4346              * Infobox close to points in which the points' coordinates are displayed.
4347              * This is simply a JXG.Text element. Access through board.infobox.
4348              * Uses CSS class .JXGinfobox.
4349              *
4350              * @namespace
4351              * @name JXG.Board.infobox
4352              * @type JXG.Text
4353              *
4354              * @example
4355              * const board = JXG.JSXGraph.initBoard(BOARDID, {
4356              *     boundingbox: [-0.5, 0.5, 0.5, -0.5],
4357              *     intl: {
4358              *         enabled: false,
4359              *         locale: 'de-DE'
4360              *     },
4361              *     keepaspectratio: true,
4362              *     axis: true,
4363              *     infobox: {
4364              *         distanceY: 40,
4365              *         intl: {
4366              *             enabled: true,
4367              *             options: {
4368              *                 minimumFractionDigits: 1,
4369              *                 maximumFractionDigits: 2
4370              *             }
4371              *         }
4372              *     }
4373              * });
4374              * var p = board.create('point', [0.1, 0.1], {});
4375              *
4376              * </pre><div id="JXG822161af-fe77-4769-850f-cdf69935eab0" class="jxgbox" style="width: 300px; height: 300px;"></div>
4377              * <script type="text/javascript">
4378              *     (function() {
4379              *     const board = JXG.JSXGraph.initBoard('JXG822161af-fe77-4769-850f-cdf69935eab0', {
4380              *         boundingbox: [-0.5, 0.5, 0.5, -0.5], showcopyright: false, shownavigation: false,
4381              *         intl: {
4382              *             enabled: false,
4383              *             locale: 'de-DE'
4384              *         },
4385              *         keepaspectratio: true,
4386              *         axis: true,
4387              *         infobox: {
4388              *             distanceY: 40,
4389              *             intl: {
4390              *                 enabled: true,
4391              *                 options: {
4392              *                     minimumFractionDigits: 1,
4393              *                     maximumFractionDigits: 2
4394              *                 }
4395              *             }
4396              *         }
4397              *     });
4398              *     var p = board.create('point', [0.1, 0.1], {});
4399              *     })();
4400              *
4401              * </script><pre>
4402              *
4403              */
4404             this.infobox = this.create('text', [0, 0, '0,0'], attr);
4405             // this.infobox.needsUpdateSize = false;  // That is not true, but it speeds drawing up.
4406             this.infobox.dump = false;
4407 
4408             this.displayInfobox(false);
4409             return this;
4410         },
4411 
4412         /**
4413          * Updates and displays a little info box to show coordinates of current selected points.
4414          * @param {JXG.GeometryElement} el A GeometryElement
4415          * @returns {JXG.Board} Reference to the board
4416          * @see JXG.Board#displayInfobox
4417          * @see JXG.Board#showInfobox
4418          * @see Point#showInfobox
4419          *
4420          */
4421         updateInfobox: function (el) {
4422             var x, y, xc, yc,
4423                 vpinfoboxdigits,
4424                 distX, distY,
4425                 vpsi = Type.evaluate(el.visProp.showinfobox);
4426 
4427             if ((!Type.evaluate(this.attr.showinfobox) && vpsi === 'inherit') || !vpsi) {
4428                 return this;
4429             }
4430 
4431             if (Type.isPoint(el)) {
4432                 xc = el.coords.usrCoords[1];
4433                 yc = el.coords.usrCoords[2];
4434                 distX = Type.evaluate(this.infobox.visProp.distancex);
4435                 distY = Type.evaluate(this.infobox.visProp.distancey);
4436 
4437                 this.infobox.setCoords(
4438                     xc + distX / this.unitX,
4439                     yc + distY / this.unitY
4440                 );
4441 
4442                 vpinfoboxdigits = Type.evaluate(el.visProp.infoboxdigits);
4443                 if (typeof el.infoboxText !== 'string') {
4444                     if (vpinfoboxdigits === 'auto') {
4445                         if (this.infobox.useLocale()) {
4446                             x = this.infobox.formatNumberLocale(xc);
4447                             y = this.infobox.formatNumberLocale(yc);
4448                         } else {
4449                             x = Type.autoDigits(xc);
4450                             y = Type.autoDigits(yc);
4451                         }
4452                     } else if (Type.isNumber(vpinfoboxdigits)) {
4453                         if (this.infobox.useLocale()) {
4454                             x = this.infobox.formatNumberLocale(xc, vpinfoboxdigits);
4455                             y = this.infobox.formatNumberLocale(yc, vpinfoboxdigits);
4456                         } else {
4457                             x = Type.toFixed(xc, vpinfoboxdigits);
4458                             y = Type.toFixed(yc, vpinfoboxdigits);
4459                         }
4460 
4461                     } else {
4462                         x = xc;
4463                         y = yc;
4464                     }
4465 
4466                     this.highlightInfobox(x, y, el);
4467                 } else {
4468                     this.highlightCustomInfobox(el.infoboxText, el);
4469                 }
4470 
4471                 this.displayInfobox(true);
4472             }
4473             return this;
4474         },
4475 
4476         /**
4477          * Set infobox visible / invisible.
4478          *
4479          * It uses its property hiddenByParent to memorize its status.
4480          * In this way, many DOM access can be avoided.
4481          *
4482          * @param  {Boolean} val true for visible, false for invisible
4483          * @returns {JXG.Board} Reference to the board.
4484          * @see JXG.Board#updateInfobox
4485          *
4486          */
4487         displayInfobox: function (val) {
4488             if (!val && this.focusObjects.length > 0 &&
4489                 this.select(this.focusObjects[0]).elementClass === Const.OBJECT_CLASS_POINT) {
4490                 // If an element has focus we do not hide its infobox
4491                 return this;
4492             }
4493             if (this.infobox.hiddenByParent === val) {
4494                 this.infobox.hiddenByParent = !val;
4495                 this.infobox.prepareUpdate().updateVisibility(val).updateRenderer();
4496             }
4497             return this;
4498         },
4499 
4500         // Alias for displayInfobox to be backwards compatible.
4501         // The method showInfobox clashes with the board attribute showInfobox
4502         showInfobox: function (val) {
4503             return this.displayInfobox(val);
4504         },
4505 
4506         /**
4507          * Changes the text of the info box to show the given coordinates.
4508          * @param {Number} x
4509          * @param {Number} y
4510          * @param {JXG.GeometryElement} [el] The element the mouse is pointing at
4511          * @returns {JXG.Board} Reference to the board.
4512          */
4513         highlightInfobox: function (x, y, el) {
4514             this.highlightCustomInfobox('(' + x + ', ' + y + ')', el);
4515             return this;
4516         },
4517 
4518         /**
4519          * Changes the text of the info box to what is provided via text.
4520          * @param {String} text
4521          * @param {JXG.GeometryElement} [el]
4522          * @returns {JXG.Board} Reference to the board.
4523          */
4524         highlightCustomInfobox: function (text, el) {
4525             this.infobox.setText(text);
4526             return this;
4527         },
4528 
4529         /**
4530          * Remove highlighting of all elements.
4531          * @returns {JXG.Board} Reference to the board.
4532          */
4533         dehighlightAll: function () {
4534             var el,
4535                 pEl,
4536                 stillHighlighted = {},
4537                 needsDeHighlight = false;
4538 
4539             for (el in this.highlightedObjects) {
4540                 if (this.highlightedObjects.hasOwnProperty(el)) {
4541 
4542                     pEl = this.highlightedObjects[el];
4543                     if (this.focusObjects.indexOf(el) < 0) { // Element does not have focus
4544                         if (this.hasMouseHandlers || this.hasPointerHandlers) {
4545                             pEl.noHighlight();
4546                         }
4547                         needsDeHighlight = true;
4548                     } else {
4549                         stillHighlighted[el] = pEl;
4550                     }
4551                     // In highlightedObjects should only be objects which fulfill all these conditions
4552                     // And in case of complex elements, like a turtle based fractal, it should be faster to
4553                     // just de-highlight the element instead of checking hasPoint...
4554                     // if ((!Type.exists(pEl.hasPoint)) || !pEl.hasPoint(x, y) || !pEl.visPropCalc.visible)
4555                 }
4556             }
4557 
4558             this.highlightedObjects = stillHighlighted;
4559 
4560             // We do not need to redraw during dehighlighting in CanvasRenderer
4561             // because we are redrawing anyhow
4562             //  -- We do need to redraw during dehighlighting. Otherwise objects won't be dehighlighted until
4563             // another object is highlighted.
4564             if (this.renderer.type === 'canvas' && needsDeHighlight) {
4565                 this.prepareUpdate();
4566                 this.renderer.suspendRedraw(this);
4567                 this.updateRenderer();
4568                 this.renderer.unsuspendRedraw();
4569             }
4570 
4571             return this;
4572         },
4573 
4574         /**
4575          * Returns the input parameters in an array. This method looks pointless and it really is, but it had a purpose
4576          * once.
4577          * @private
4578          * @param {Number} x X coordinate in screen coordinates
4579          * @param {Number} y Y coordinate in screen coordinates
4580          * @returns {Array} Coordinates [x, y] of the mouse in screen coordinates.
4581          * @see JXG.Board#getUsrCoordsOfMouse
4582          */
4583         getScrCoordsOfMouse: function (x, y) {
4584             return [x, y];
4585         },
4586 
4587         /**
4588          * This method calculates the user coords of the current mouse coordinates.
4589          * @param {Event} evt Event object containing the mouse coordinates.
4590          * @returns {Array} Coordinates [x, y] of the mouse in user coordinates.
4591          * @example
4592          * board.on('up', function (evt) {
4593          *         var a = board.getUsrCoordsOfMouse(evt),
4594          *             x = a[0],
4595          *             y = a[1],
4596          *             somePoint = board.create('point', [x,y], {name:'SomePoint',size:4});
4597          *             // Shorter version:
4598          *             //somePoint = board.create('point', a, {name:'SomePoint',size:4});
4599          *         });
4600          *
4601          * </pre><div id='JXG48d5066b-16ba-4920-b8ea-a4f8eff6b746' class='jxgbox' style='width: 300px; height: 300px;'></div>
4602          * <script type='text/javascript'>
4603          *     (function() {
4604          *         var board = JXG.JSXGraph.initBoard('JXG48d5066b-16ba-4920-b8ea-a4f8eff6b746',
4605          *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
4606          *     board.on('up', function (evt) {
4607          *             var a = board.getUsrCoordsOfMouse(evt),
4608          *                 x = a[0],
4609          *                 y = a[1],
4610          *                 somePoint = board.create('point', [x,y], {name:'SomePoint',size:4});
4611          *                 // Shorter version:
4612          *                 //somePoint = board.create('point', a, {name:'SomePoint',size:4});
4613          *             });
4614          *
4615          *     })();
4616          *
4617          * </script><pre>
4618          *
4619          * @see JXG.Board#getScrCoordsOfMouse
4620          * @see JXG.Board#getAllUnderMouse
4621          */
4622         getUsrCoordsOfMouse: function (evt) {
4623             var cPos = this.getCoordsTopLeftCorner(),
4624                 absPos = Env.getPosition(evt, null, this.document),
4625                 x = absPos[0] - cPos[0],
4626                 y = absPos[1] - cPos[1],
4627                 newCoords = new Coords(Const.COORDS_BY_SCREEN, [x, y], this);
4628 
4629             return newCoords.usrCoords.slice(1);
4630         },
4631 
4632         /**
4633          * Collects all elements under current mouse position plus current user coordinates of mouse cursor.
4634          * @param {Event} evt Event object containing the mouse coordinates.
4635          * @returns {Array} Array of elements at the current mouse position plus current user coordinates of mouse.
4636          * @see JXG.Board#getUsrCoordsOfMouse
4637          * @see JXG.Board#getAllObjectsUnderMouse
4638          */
4639         getAllUnderMouse: function (evt) {
4640             var elList = this.getAllObjectsUnderMouse(evt);
4641             elList.push(this.getUsrCoordsOfMouse(evt));
4642 
4643             return elList;
4644         },
4645 
4646         /**
4647          * Collects all elements under current mouse position.
4648          * @param {Event} evt Event object containing the mouse coordinates.
4649          * @returns {Array} Array of elements at the current mouse position.
4650          * @see JXG.Board#getAllUnderMouse
4651          */
4652         getAllObjectsUnderMouse: function (evt) {
4653             var cPos = this.getCoordsTopLeftCorner(),
4654                 absPos = Env.getPosition(evt, null, this.document),
4655                 dx = absPos[0] - cPos[0],
4656                 dy = absPos[1] - cPos[1],
4657                 elList = [],
4658                 el,
4659                 pEl,
4660                 len = this.objectsList.length;
4661 
4662             for (el = 0; el < len; el++) {
4663                 pEl = this.objectsList[el];
4664                 if (pEl.visPropCalc.visible && pEl.hasPoint && pEl.hasPoint(dx, dy)) {
4665                     elList[elList.length] = pEl;
4666                 }
4667             }
4668 
4669             return elList;
4670         },
4671 
4672         /**
4673          * Update the coords object of all elements which possess this
4674          * property. This is necessary after changing the viewport.
4675          * @returns {JXG.Board} Reference to this board.
4676          **/
4677         updateCoords: function () {
4678             var el,
4679                 ob,
4680                 len = this.objectsList.length;
4681 
4682             for (ob = 0; ob < len; ob++) {
4683                 el = this.objectsList[ob];
4684 
4685                 if (Type.exists(el.coords)) {
4686                     if (Type.evaluate(el.visProp.frozen)) {
4687                         if (el.is3D) {
4688                             el.element2D.coords.screen2usr();
4689                         } else {
4690                             el.coords.screen2usr();
4691                         }
4692                     } else {
4693                         if (el.is3D) {
4694                             el.element2D.coords.usr2screen();
4695                         } else {
4696                             el.coords.usr2screen();
4697                         }
4698                     }
4699                 }
4700             }
4701             return this;
4702         },
4703 
4704         /**
4705          * Moves the origin and initializes an update of all elements.
4706          * @param {Number} x
4707          * @param {Number} y
4708          * @param {Boolean} [diff=false]
4709          * @returns {JXG.Board} Reference to this board.
4710          */
4711         moveOrigin: function (x, y, diff) {
4712             var ox, oy, ul, lr;
4713             if (Type.exists(x) && Type.exists(y)) {
4714                 ox = this.origin.scrCoords[1];
4715                 oy = this.origin.scrCoords[2];
4716 
4717                 this.origin.scrCoords[1] = x;
4718                 this.origin.scrCoords[2] = y;
4719 
4720                 if (diff) {
4721                     this.origin.scrCoords[1] -= this.drag_dx;
4722                     this.origin.scrCoords[2] -= this.drag_dy;
4723                 }
4724 
4725                 ul = new Coords(Const.COORDS_BY_SCREEN, [0, 0], this).usrCoords;
4726                 lr = new Coords(
4727                     Const.COORDS_BY_SCREEN,
4728                     [this.canvasWidth, this.canvasHeight],
4729                     this
4730                 ).usrCoords;
4731                 if (
4732                     ul[1] < this.maxboundingbox[0] ||
4733                     ul[2] > this.maxboundingbox[1] ||
4734                     lr[1] > this.maxboundingbox[2] ||
4735                     lr[2] < this.maxboundingbox[3]
4736                 ) {
4737                     this.origin.scrCoords[1] = ox;
4738                     this.origin.scrCoords[2] = oy;
4739                 }
4740             }
4741 
4742             this.updateCoords().clearTraces().fullUpdate();
4743             this.triggerEventHandlers(['boundingbox']);
4744 
4745             return this;
4746         },
4747 
4748         /**
4749          * Add conditional updates to the elements.
4750          * @param {String} str String containing conditional update in geonext syntax
4751          */
4752         addConditions: function (str) {
4753             var term,
4754                 m,
4755                 left,
4756                 right,
4757                 name,
4758                 el,
4759                 property,
4760                 functions = [],
4761                 // plaintext = 'var el, x, y, c, rgbo;\n',
4762                 i = str.indexOf('<data>'),
4763                 j = str.indexOf('<' + '/data>'),
4764                 xyFun = function (board, el, f, what) {
4765                     return function () {
4766                         var e, t;
4767 
4768                         e = board.select(el.id);
4769                         t = e.coords.usrCoords[what];
4770 
4771                         if (what === 2) {
4772                             e.setPositionDirectly(Const.COORDS_BY_USER, [f(), t]);
4773                         } else {
4774                             e.setPositionDirectly(Const.COORDS_BY_USER, [t, f()]);
4775                         }
4776                         e.prepareUpdate().update();
4777                     };
4778                 },
4779                 visFun = function (board, el, f) {
4780                     return function () {
4781                         var e, v;
4782 
4783                         e = board.select(el.id);
4784                         v = f();
4785 
4786                         e.setAttribute({ visible: v });
4787                     };
4788                 },
4789                 colFun = function (board, el, f, what) {
4790                     return function () {
4791                         var e, v;
4792 
4793                         e = board.select(el.id);
4794                         v = f();
4795 
4796                         if (what === 'strokewidth') {
4797                             e.visProp.strokewidth = v;
4798                         } else {
4799                             v = Color.rgba2rgbo(v);
4800                             e.visProp[what + 'color'] = v[0];
4801                             e.visProp[what + 'opacity'] = v[1];
4802                         }
4803                     };
4804                 },
4805                 posFun = function (board, el, f) {
4806                     return function () {
4807                         var e = board.select(el.id);
4808 
4809                         e.position = f();
4810                     };
4811                 },
4812                 styleFun = function (board, el, f) {
4813                     return function () {
4814                         var e = board.select(el.id);
4815 
4816