jsxgraph 1.4.2 → 1.4.5

package/src/base/board.js

@@ -816,8 +816,12 @@ define([
          */
         getCoordsTopLeftCorner: function () {
             var cPos, doc, crect,
-                docElement = this.document.documentElement || this.document.body.parentNode,
-                docBody = this.document.body,
+                // In ownerDoc we need the "real" document object.
+                // The first version is used in the case of shadowDom,
+                // the second case in the "normal" case.
+                ownerDoc = this.document.ownerDocument || this.document, 
+                docElement = ownerDoc.documentElement || this.document.body.parentNode,
+                docBody = ownerDoc.body,
                 container = this.containerObj,
                 // viewport, content,
                 zoom, o;
@@ -1192,7 +1196,8 @@ define([
          */
         twoFingerTouchObject: function (tar, drag, id) {
             var np, op, nd, od,
-                d, alpha,
+                d,
+                alpha = 0,
                 S, t1, t3, t4, t5,
                 ar, i, len,
                 fixEl, moveEl, fix;
@@ -1226,7 +1231,9 @@ define([
                     return;
                 }
 
-                alpha = Geometry.rad(op.slice(1), fix.slice(1), np.slice(1));
+                if (Type.evaluate(drag.visProp.rotatable)) {
+                    alpha = Geometry.rad(op.slice(1), fix.slice(1), np.slice(1));
+                }
 
                 t1 = this.create('transform', [alpha, [fix[1], fix[2]]], {type: 'rotate'});
                 t1.update();
@@ -2397,7 +2404,8 @@ define([
          * @returns {Boolean}
          */
         pointerUpListener: function (evt) {
-            var i, j, found, touchTargets;
+            var i, j, found, touchTargets,
+                updateNeeded = false;
 
             this.triggerEventHandlers(['touchend', 'up', 'pointerup', 'MSPointerUp'], [evt]);
             this.displayInfobox(false);
@@ -2417,10 +2425,14 @@ define([
                 }
             }
 
+            this.originMoveEnd();
+            this.update();
+
             // selection
             if (this.selectingMode) {
                 this._stopSelecting(evt);
                 this.triggerEventHandlers(['touchstopselecting', 'pointerstopselecting', 'stopselecting'], [evt]);
+                this.stopSelectionMode();
             } else {
                 for (i = this.downObjects.length - 1; i > -1; i--) {
                     found = false;
@@ -2431,32 +2443,38 @@ define([
                     }
                     if (!found) {
                         this.downObjects[i].triggerEventHandlers(['touchend', 'up', 'pointerup', 'MSPointerUp'], [evt]);
-                        this.downObjects[i].snapToGrid();
-                        this.downObjects[i].snapToPoints();
+                        if (!Type.exists(this.downObjects[i].coords)) {
+                            // snapTo methods have to be called e.g. for line elements here.
+                            // For coordsElements there might be a conflict with
+                            // attractors, see commit from 2022.04.08, 11:12:18.
+                            this.downObjects[i].snapToGrid();
+                            this.downObjects[i].snapToPoints();
+                            updateNeeded = true;
+                        }
                         this.downObjects.splice(i, 1);
                     }
                 }
             }
 
-            // this._pointerRemoveTouches(evt);
-            // if (this._board_touches.length === 0) {
-                if (this.hasPointerUp) {
-                    if (window.navigator.msPointerEnabled) {  // IE10-
-                        Env.removeEvent(this.document, 'MSPointerUp',   this.pointerUpListener, this);
-                    } else {
-                        Env.removeEvent(this.document, 'pointerup',     this.pointerUpListener, this);
-                        Env.removeEvent(this.document, 'pointercancel', this.pointerUpListener, this);
-                    }
-                    this.hasPointerUp = false;
+            if (this.hasPointerUp) {
+                if (window.navigator.msPointerEnabled) {  // IE10-
+                    Env.removeEvent(this.document, 'MSPointerUp',   this.pointerUpListener, this);
+                } else {
+                    Env.removeEvent(this.document, 'pointerup',     this.pointerUpListener, this);
+                    Env.removeEvent(this.document, 'pointercancel', this.pointerUpListener, this);
                 }
+                this.hasPointerUp = false;
+            }
 
-                // this.dehighlightAll();
-                // this.updateQuality = this.BOARD_QUALITY_HIGH;
-                // this.mode = this.BOARD_MODE_NONE;
+            // this.dehighlightAll();
+            // this.updateQuality = this.BOARD_QUALITY_HIGH;
+            // this.mode = this.BOARD_MODE_NONE;
 
-                this.originMoveEnd();
+            // this.originMoveEnd();
+            if (updateNeeded) {
                 this.update();
-            // }
+            }
+
             // After one finger leaves the screen the gesture is stopped.
             this._pointerClearTouches();
             return true;
@@ -2790,7 +2808,8 @@ define([
                 eps = this.options.precision.touch,
                 tmpTouches = [], found, foundNumber,
                 evtTouches = evt && evt[JXG.touchProperty],
-                touchTargets;
+                touchTargets,
+                updateNeeded = false;
 
             this.triggerEventHandlers(['touchend', 'up'], [evt]);
             this.displayInfobox(false);
@@ -2799,6 +2818,7 @@ define([
             if (this.selectingMode) {
                 this._stopSelecting(evt);
                 this.triggerEventHandlers(['touchstopselecting', 'stopselecting'], [evt]);
+                this.stopSelectionMode();
             } else if (evtTouches && evtTouches.length > 0) {
                 for (i = 0; i < this.touches.length; i++) {
                     tmpTouches[i] = this.touches[i];
@@ -2890,8 +2910,14 @@ define([
                 }
                 if (!found) {
                     this.downObjects[i].triggerEventHandlers(['touchup', 'up'], [evt]);
-                    this.downObjects[i].snapToGrid();
-                    this.downObjects[i].snapToPoints();
+                    if (!Type.exists(this.downObjects[i].coords)) {
+                        // snapTo methods have to be called e.g. for line elements here.
+                        // For coordsElements there might be a conflict with
+                        // attractors, see commit from 2022.04.08, 11:12:18.
+                        this.downObjects[i].snapToGrid();
+                        this.downObjects[i].snapToPoints();
+                        updateNeeded = true;
+                    }
                     this.downObjects.splice(i, 1);
                 }
             }
@@ -2907,7 +2933,9 @@ define([
                 this.updateQuality = this.BOARD_QUALITY_HIGH;
 
                 this.originMoveEnd();
-                this.update();
+                if (updateNeeded) {
+                    this.update();
+                }
             }
 
             return true;
@@ -3055,9 +3083,14 @@ define([
             this.updateQuality = this.BOARD_QUALITY_HIGH;
 
             if (this.mouse && this.mouse.obj) {
-                // The parameter is needed for lines with snapToGrid enabled
-                this.mouse.obj.snapToGrid(this.mouse.targets[0]);
-                this.mouse.obj.snapToPoints();
+                if (!Type.exists(this.mouse.obj.coords)) {
+                    // snapTo methods have to be called e.g. for line elements here.
+                    // For coordsElements there might be a conflict with
+                    // attractors, see commit from 2022.04.08, 11:12:18.
+                    // The parameter is needed for lines with snapToGrid enabled
+                    this.mouse.obj.snapToGrid(this.mouse.targets[0]);
+                    this.mouse.obj.snapToPoints();
+                }
             }
 
             this.originMoveEnd();
@@ -3068,6 +3101,7 @@ define([
             if (this.selectingMode) {
                 this._stopSelecting(evt);
                 this.triggerEventHandlers(['mousestopselecting', 'stopselecting'], [evt]);
+                this.stopSelectionMode();
             } else {
                 for (i = 0; i < this.downObjects.length; i++) {
                     this.downObjects[i].triggerEventHandlers(['mouseup', 'up'], [evt]);
@@ -3113,11 +3147,18 @@ define([
         },
 
         /**
-         * Allow moving of JSXGraph elements with arrow keys
-         * and zooming of the construction with + / -.
+         * Allow moving of JSXGraph elements with arrow keys.
+         * The selection of the element is done with the tab key. For this,
+         * the attribute "tabindex" of the element has to be set to some number (default=0).
+         * tabindex corresponds to the HTML attribute of the same name.
+         * <p>
          * Panning of the construction is done with arrow keys
-         * if the pan key (shift or ctrl) is pressed.
-         * The selection of the element is done with the tab key.
+         * if the pan key (shift or ctrl - depending on the board attributes) is pressed.
+         * <p>
+         * Zooming is triggered with the keys +, o, -, if
+         * the pan key (shift or ctrl - depending on the board attributes) is pressed.
+         * <p>
+         * Keyboard control (move, pan, and zoom) is disabled if an HTML element of type input or textarea has received focus.
          *
          * @param  {Event} evt The browser's event object
          *
@@ -3128,7 +3169,7 @@ define([
          */
         keyDownListener: function (evt) {
             var id_node = evt.target.id,
-                id, el, res,
+                id, el, res, doc,
                 sX = 0,
                 sY = 0,
                 // dx, dy are provided in screen units and
@@ -3143,6 +3184,15 @@ define([
                 return false;
             }
 
+            // An element of type input or textarea has foxus, get out of here.
+            doc = this.containerObj.shadowRoot || document;
+            if (doc.activeElement) {
+                el = doc.activeElement;
+                if (el.tagName === 'INPUT' || el.tagName === 'textarea') {
+                    return false;
+                }
+            }
+
             // Get the JSXGraph id from the id of the SVG node.
             id = id_node.replace(this.containerObj.id + '_', '');
             el = this.select(id);
@@ -3151,12 +3201,15 @@ define([
                 actPos = el.coords.usrCoords.slice(1);
             }
 
-            if (Type.evaluate(this.attr.keyboard.panshift) || Type.evaluate(this.attr.keyboard.panctrl)) {
-                doZoom = true;
-            }
-
             if ((Type.evaluate(this.attr.keyboard.panshift) && evt.shiftKey) ||
                 (Type.evaluate(this.attr.keyboard.panctrl) && evt.ctrlKey)) {
+                // Pan key has been pressed
+
+                if (Type.evaluate(this.attr.zoom.enabled) === true) {
+                    doZoom = true;
+                }
+
+                // Arrow keys
                 if (evt.keyCode === 38) {           // up
                     this.clickUpArrow();
                 } else if (evt.keyCode === 40) {    // down
@@ -3165,10 +3218,20 @@ define([
                     this.clickLeftArrow();
                 } else if (evt.keyCode === 39) {    // right
                     this.clickRightArrow();
+
+                // Zoom keys
+                } else if (doZoom && evt.keyCode === 171) {   // +
+                    this.zoomIn();
+                } else if (doZoom && evt.keyCode === 173) {   // -
+                    this.zoomOut();
+                } else if (doZoom && evt.keyCode === 79) {   // o
+                    this.zoom100();
+
                 } else {
                     done = false;
                 }
             } else {
+
                 // Adapt dx, dy to snapToGrid and attractToGrid
                 // snapToGrid has priority.
                 if (Type.exists(el.visProp)) {
@@ -3211,14 +3274,6 @@ define([
                     dir = [-dx, 0];
                 } else if (evt.keyCode === 39) {    // right
                     dir = [dx, 0];
-                // } else if (evt.keyCode === 9) {  // tab
-
-                } else if (doZoom && evt.key === '+') {   // +
-                    this.zoomIn();
-                } else if (doZoom && evt.key === '-') {   // -
-                    this.zoomOut();
-                } else if (doZoom && evt.key === 'o') {   // o
-                    this.zoom100();
                 } else {
                     done = false;
                 }
@@ -3248,15 +3303,16 @@ define([
 
             this.update();
 
-            if (done) {
+            if (done && Type.exists(evt.preventDefault)) {
                 evt.preventDefault();
             }
-            return true;
+            return done;
         },
 
         /**
          * Event listener for SVG elements getting focus.
          * This is needed for highlighting when using keyboard control.
+         * Only elements having the attribute "tabindex" can receive focus.
          *
          * @see JXG.Board#keyFocusOutListener
          * @see JXG.Board#keyDownListener
@@ -3286,6 +3342,7 @@ define([
         /**
          * Event listener for SVG elements losing focus.
          * This is needed for dehighlighting when using keyboard control.
+         * Only elements having the attribute "tabindex" can receive focus.
          *
          * @see JXG.Board#keyFocusInListener
          * @see JXG.Board#keyDownListener
@@ -3336,8 +3393,8 @@ define([
             }
 
             // If div is invisible - do nothing
-            if (w <= 0 || h <= 0) {
-                return;
+            if (w <= 0 || h <= 0 || isNaN(w) || isNaN(h)) {
+                    return;
             }
 
             // If bounding box is not yet initialized, do it now.
@@ -4742,12 +4799,12 @@ define([
             this.inUpdate = true;
 
             if (this.attr.minimizereflow === 'all' && this.containerObj && this.renderer.type !== 'vml') {
-                storeActiveEl = document.activeElement; // Store focus element
+                storeActiveEl = this.document.activeElement; // Store focus element
                 insert = this.renderer.removeToInsertLater(this.containerObj);
             }
 
             if (this.attr.minimizereflow === 'svg' && this.renderer.type === 'svg') {
-                storeActiveEl = document.activeElement;
+                storeActiveEl = this.document.activeElement;
                 insert = this.renderer.removeToInsertLater(this.renderer.svgRoot);
             }
 
@@ -5351,31 +5408,43 @@ define([
          */
         updateCSSTransforms: function () {
             var obj = this.containerObj,
-                o = obj,
-                o2 = obj;
+                o = obj;
+                // o2 = obj;
 
             this.cssTransMat = Env.getCSSTransformMatrix(o);
 
+            // Newer variant of walking up the tree.
+            // We walk up all parent nodes and collect possible CSS transforms.
+            // Works also for ShadowDOM
+            o = o.parentNode === o.getRootNode() ? o.parentNode.host : o.parentNode;
+            while (o) {
+                this.cssTransMat = Mat.matMatMult(Env.getCSSTransformMatrix(o), this.cssTransMat);
+                o = o.parentNode === o.getRootNode() ? o.parentNode.host : o.parentNode;
+            }
+            this.cssTransMat = Mat.inverse(this.cssTransMat);
+
             /*
              * In Mozilla and Webkit: offsetParent seems to jump at least to the next iframe,
              * if not to the body. In IE and if we are in an position:absolute environment
              * offsetParent walks up the DOM hierarchy.
              * In order to walk up the DOM hierarchy also in Mozilla and Webkit
              * we need the parentNode steps.
+             *
+             * Seems to be outdated
              */
-            o = o.offsetParent;
-            while (o) {
-                this.cssTransMat = Mat.matMatMult(Env.getCSSTransformMatrix(o), this.cssTransMat);
+            // o = o.offsetParent;
+            // while (o) {
+            //     this.cssTransMat = Mat.matMatMult(Env.getCSSTransformMatrix(o), this.cssTransMat);
 
-                o2 = o2.parentNode;
-                while (o2 !== o) {
-                    this.cssTransMat = Mat.matMatMult(Env.getCSSTransformMatrix(o), this.cssTransMat);
-                    o2 = o2.parentNode;
-                }
+            //     o2 = o2.parentNode;
+            //     while (o2 !== o) {
+            //         this.cssTransMat = Mat.matMatMult(Env.getCSSTransformMatrix(o), this.cssTransMat);
+            //         o2 = o2.parentNode;
+            //     }
 
-                o = o.offsetParent;
-            }
-            this.cssTransMat = Mat.inverse(this.cssTransMat);
+            //     o = o.offsetParent;
+            // }
+            // this.cssTransMat = Mat.inverse(this.cssTransMat);
 
             return this;
         },
@@ -5936,16 +6005,17 @@ define([
          *
          */
         toFullscreen: function (id) {
-            var wrap_id, wrap_node, inner_node;
+            var wrap_id, wrap_node, inner_node,
+                doc = this.document;
 
             id = id || this.container;
             this._fullscreen_inner_id = id;
-            inner_node = document.getElementById(id);
+            inner_node = doc.getElementById(id);
             wrap_id = 'fullscreenwrap_' + id;
 
             // Wrap a div around the JSXGraph div.
-            if (this.document.getElementById(wrap_id)) {
-                wrap_node = this.document.getElementById(wrap_id);
+            if (doc.getElementById(wrap_id)) {
+                wrap_node = doc.getElementById(wrap_id);
             } else {
                 wrap_node = document.createElement('div');
                 wrap_node.classList.add('JXG_wrap_private');
@@ -5964,8 +6034,14 @@ define([
                 wrap_node.mozRequestFullScreen ||
                 wrap_node.msRequestFullscreen;
 
-            if (wrap_node.requestFullscreen) {
-                wrap_node.requestFullscreen();
+            if (doc.fullscreenElement === null) {
+                // Start fullscreen mode
+                if (wrap_node.requestFullscreen) {
+                    wrap_node.requestFullscreen();
+                }
+            } else {
+                // Leave fullscreen mode (e.g. when clicking on the icon)
+                document.exitFullscreen();
             }
 
             return this;
@@ -5979,23 +6055,24 @@ define([
          * @param  {Object} evt fullscreen event object (unused)
          */
         fullscreenListener: function (evt) {
-            var res, inner_id, inner_node;
+            var res, inner_id, inner_node,
+                doc = this.document;
 
             inner_id = this._fullscreen_inner_id;
             if (!Type.exists(inner_id)) {
                 return;
             }
 
-            document.fullscreenElement = document.fullscreenElement ||
-                    document.webkitFullscreenElement ||
-                    document.mozFullscreenElement ||
-                    document.msFullscreenElement;
+            doc.fullscreenElement = doc.fullscreenElement ||
+                    doc.webkitFullscreenElement ||
+                    doc.mozFullscreenElement ||
+                    doc.msFullscreenElement;
 
-            inner_node = document.getElementById(inner_id);
+            inner_node = doc.getElementById(inner_id);
             // If full screen mode is started we have to remove CSS margin around the JSXGraph div.
             // Otherwise, the positioning of the fullscreen div will be false.
             // When leaving the fullscreen mode, the margin is put back in.
-            if (document.fullscreenElement) {
+            if (doc.fullscreenElement) {
                 // Just entered fullscreen mode
 
                 // Get the data computed in board.toFullscreen()
@@ -6007,7 +6084,7 @@ define([
                 // Further, the CSS margin has to be removed when in fullscreen mode,
                 // and must be restored later.
                 inner_node._cssFullscreenStore = {
-                    id: document.fullscreenElement.id,
+                    id: doc.fullscreenElement.id,
                     isFullscreen: true,
                     margin: inner_node.style.margin,
                     width: inner_node.style.width,
@@ -6021,18 +6098,18 @@ define([
                 // Do the shifting and scaling via CSS pseudo rules
                 // We do this after fullscreen mode has been established to get the correct size
                 // of the JSXGraph div.
-                Env.scaleJSXGraphDiv(document.fullscreenElement.id, inner_id, res.scale, res.vshift);
+                Env.scaleJSXGraphDiv(doc.fullscreenElement.id, inner_id, res.scale, res.vshift, doc);
 
-                // Clear document.fullscreenElement, because Safari doesn't to it and
+                // Clear this.document.fullscreenElement, because Safari doesn't to it and
                 // when leaving full screen mode it is still set.
-                document.fullscreenElement = null;
+                doc.fullscreenElement = null;
 
             } else if (Type.exists(inner_node._cssFullscreenStore)) {
                 // Just left the fullscreen mode
 
                 // Remove the CSS rules added in Env.scaleJSXGraphDiv
                 try {
-                    document.styleSheets[document.styleSheets.length - 1].deleteRule(0);
+                    doc.styleSheets[doc.styleSheets.length - 1].deleteRule(0);
                 } catch (err) {
                     console.log('JSXGraph: Could not remove CSS rules for full screen mode');
                 }
@@ -6040,7 +6117,6 @@ define([
                 inner_node._cssFullscreenStore.isFullscreen = false;
                 inner_node.style.margin = inner_node._cssFullscreenStore.margin;
                 inner_node.style.width = inner_node._cssFullscreenStore.width;
-
             }
 
             this.updateCSSTransforms();

package/src/base/constants.js

@@ -42,7 +42,7 @@ define(['jxg'], function (JXG) {
 
     var major = 1,
         minor = 4,
-        patch = 2,
+        patch = 5,
         add = '', //'dev'
         version = major + '.' + minor + '.' + patch + (add ? '-' + add : ''),
         constants;

package/src/base/coordselement.js

@@ -198,8 +198,6 @@ define([
          * @private
          */
         updateCoords: function (fromParent) {
-            var i;
-
             if (!this.needsUpdate) {
                 return this;
             }
@@ -326,7 +324,6 @@ define([
                     doRound = true;
                     newPos = 0.0;
                 } else {
-                    //this.coords.setCoordinates(Const.COORDS_BY_USER, Geometry.projectPointToLine(this, slide, this.board).usrCoords, false);
                     newCoords = Geometry.projectPointToLine(this, slide, this.board);
                     p1c = p1c.usrCoords.slice(0);
                     p2c = p2c.usrCoords.slice(0);
@@ -1833,7 +1830,7 @@ define([
                 if (direction < 0) {
                     alpha *= this.intervalCount / stepCount;
                 } else {
-                    alpha *= (stepCount - this.intervalCount);
+                    alpha *= (stepCount - this.intervalCount) / stepCount;
                 }
                 radius = this.slideObject.Radius();
 

package/src/base/element.js

@@ -1052,26 +1052,35 @@ define([
         },
 
         /**
-         * Resolves property shortcuts like <tt>color</tt> and expands them, e.g. <tt>strokeColor</tt> and <tt>fillColor</tt>.
-         * Writes the expanded properties back to the given <tt>properties</tt>.
-         * @param {Object} properties
-         * @returns {Object} The given parameter with shortcuts expanded.
+         * Resolves attribute shortcuts like <tt>color</tt> and expands them, e.g. <tt>strokeColor</tt> and <tt>fillColor</tt>.
+         * Writes the expanded attributes back to the given <tt>attributes</tt>.
+         * @param {Object} attributes object
+         * @returns {Object} The given attributes object with shortcuts expanded.
+         * @private
          */
-        resolveShortcuts: function (properties) {
-            var key, i;
+        resolveShortcuts: function (attributes) {
+            var key, i,
+                j,
+                subattr = ['traceattributes', 'traceAttributes'];
 
             for (key in Options.shortcuts) {
                 if (Options.shortcuts.hasOwnProperty(key)) {
-                    if (Type.exists(properties[key])) {
-                        for (i = 0; i < Options.shortcuts[key].length; i++) {
-                            if (!Type.exists(properties[Options.shortcuts[key][i]])) {
-                                properties[Options.shortcuts[key][i]] = properties[key];
+
+                        if (Type.exists(attributes[key])) {
+                            for (i = 0; i < Options.shortcuts[key].length; i++) {
+                                if (!Type.exists(attributes[Options.shortcuts[key][i]])) {
+                                    attributes[Options.shortcuts[key][i]] = attributes[key];
+                                }
+                            }
+                        }
+                        for (j = 0; j < subattr.length; j++) {
+                            if (Type.isObject(attributes[subattr[j]])) {
+                                    attributes[subattr[j]] = this.resolveShortcuts(attributes[subattr[j]]);
+                                }
                             }
                         }
-                    }
-                }
             }
-            return properties;
+            return attributes;
         },
 
         /**

package/src/base/foreignobject.js

@@ -324,7 +324,13 @@
      * an SVG foreignObject container.
      * <p>
      * Instead of board.create('foreignobject') the shortcut board.create('fo') may be used.
-     *
+     * 
+     * <p style="background-color:#dddddd; padding:10px"><b>NOTE:</b> In Safari up to version 15, a foreignObject does not obey the layer structure
+     * if it contains &lt;video&gt; or &lt;iframe&gt; tags, as well as elements which are 
+     * positioned with <tt>position:absolute|relative|fixed</tt>. In this  case, the foreignobject will be 
+     * "above" the JSXGraph construction.
+     * </p>
+     * 
      * @pseudo
      * @description
      * @name ForeignObject

package/src/base/line.js

@@ -695,7 +695,7 @@ define([
                 if (this.parents.length < 3) {    // Line through two points
                     this.point1.handleSnapToGrid(true, true);
                     this.point2.handleSnapToGrid(true, true);
-            } else if (Type.exists(pos)) {       // Free line
+                } else if (Type.exists(pos)) {       // Free line
                     sX = Type.evaluate(this.visProp.snapsizex);
                     sY = Type.evaluate(this.visProp.snapsizey);