jsxgraph 1.6.0 → 1.6.1

package/distrib/sketch.min.js

@@ -1,5 +1,5 @@
 /*
-    JSXGraph 1.6.0
+    JSXGraph 1.6.1b1
 
     Copyright 2008-2023
         Matthias Ehmann,

package/package.json

@@ -2,7 +2,7 @@
   "name": "jsxgraph",
   "description": "Interactive geometry, plotting, visualization",
   "homepage": "https://jsxgraph.org",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "exports": {
     "types": "./src/index.d.ts",
     "default": "./src/index.js"

package/src/3d/view3d.js

@@ -832,7 +832,6 @@ JXG.createView3D = function (board, parents, attributes) {
             }
             d = Type.evaluate(p.visProp.infoboxdigits);
             infobox = view.board.infobox;
-            console.log(infobox.useLocale())
             if (d === 'auto') {
                 if (infobox.useLocale()) {
                     arr = [pre, '(', infobox.formatNumberLocale(p.X()), ' | ', infobox.formatNumberLocale(p.Y()), ' | ', infobox.formatNumberLocale(p.Z()), ')']

package/src/base/board.js

@@ -2296,6 +2296,11 @@ JXG.extend(
                 return false;
             }
 
+            if (Type.evaluate(this.attr.movetarget) === null &&
+                Type.exists(evt.target) && Type.exists(evt.target.releasePointerCapture)) {
+                evt.target.releasePointerCapture(evt.pointerId);
+            }
+
             if (!object && evt.isPrimary) {
                 // First finger down. To be on the safe side this._board_touches is cleared.
                 // this._pointerClearTouches();
@@ -2498,9 +2503,7 @@ JXG.extend(
          * @returns {Boolean}
          */
         pointerMoveListener: function (evt) {
-            var i,
-                j,
-                pos,
+            var i, j, pos, eps,
                 touchTargets,
                 type = 'mouse'; // in case of no browser
 
@@ -2533,10 +2536,21 @@ JXG.extend(
             this._inputDevice = this._getPointerInputDevice(evt);
             type = this._inputDevice;
             this.options.precision.hasPoint = this.options.precision[type];
+            eps = this.options.precision.hasPoint * 0.3333;
+
+            pos = this.getMousePosition(evt);
+            // Ignore pointer move event if too close at the border
+            // and setPointerCapture is off
+            if (Type.evaluate(this.attr.movetarget) === null &&
+                pos[0] <= eps || pos[1] <= eps ||
+                pos[0] >= this.canvasWidth - eps ||
+                pos[1] >= this.canvasHeight - eps
+            ) {
+                return this.mode === this.BOARD_MODE_NONE;
+            }
 
             // selection
             if (this.selectingMode) {
-                pos = this.getMousePosition(evt);
                 this._moveSelecting(pos);
                 this.triggerEventHandlers(
                     ['touchmoveselecting', 'moveselecting', 'pointermoveselecting'],
@@ -2544,7 +2558,6 @@ JXG.extend(
                 );
             } else if (!this.mouseOriginMove(evt)) {
                 if (this.mode === this.BOARD_MODE_DRAG) {
-                    pos = this.getMousePosition(evt);
                     // Run through all jsxgraph elements which are touched by at least one finger.
                     for (i = 0; i < this.touches.length; i++) {
                         touchTargets = this.touches[i].targets;
@@ -2581,7 +2594,6 @@ JXG.extend(
                     }
 
                     // Move event without dragging an element
-                    pos = this.getMousePosition(evt);
                     this.highlightElements(pos[0], pos[1], evt, -1);
                 }
             }
@@ -3877,7 +3889,7 @@ JXG.extend(
                 }, options);
                 this.intersectionObserver.observe(that.containerObj);
             } catch (err) {
-                console.log('JSXGraph: IntersectionObserver not available in this browser.');
+                JXG.debug('JSXGraph: IntersectionObserver not available in this browser.');
             }
         },
 
@@ -5630,10 +5642,10 @@ JXG.extend(
          * <li> array: ['key', value]
          * </ul>
          * Some board attributes are immutable, like e.g. the renderer type.
-         * 
+         *
          * @param {Object} attributes An object with attributes.
          * @returns {JXG.Board} Reference to the board
-         * 
+         *
          * @example
          * const board = JXG.JSXGraph.initBoard('jxgbox', {
          *     boundingbox: [-5, 5, 5, -5],
@@ -5643,7 +5655,7 @@ JXG.extend(
          *     showScreenshot: true,
          *     showCopyright: false
          * });
-         * 
+         *
          * board.setAttribute({
          *     animationDelay: 10,
          *     boundingbox: [-10, 5, 10, -5],
@@ -5659,7 +5671,7 @@ JXG.extend(
          *         locale: 'de-DE'
          *     }
          * });
-         * 
+         *
          * board.setAttribute({
          *     selection: {
          *         enabled: true,
@@ -5677,7 +5689,7 @@ JXG.extend(
          *     showNavigation: false
          * });
          * board.setAttribute('showCopyright:false');
-         * 
+         *
          * var p = board.create('point', [1, 1], {size: 10,
          *     label: {
          *         fontSize: 24,
@@ -5685,8 +5697,8 @@ JXG.extend(
          *         offset: [5, 0]
          *     }
          * });
-         * 
-         * 
+         *
+         *
          * </pre><div id="JXGea7b8e09-beac-4d95-9a0c-5fc1c761ffbc" class="jxgbox" style="width: 300px; height: 300px;"></div>
          * <script type="text/javascript">
          *     (function() {
@@ -5698,7 +5710,7 @@ JXG.extend(
          *         showScreenshot: true,
          *         showCopyright: false
          *     });
-         *     
+         *
          *     board.setAttribute({
          *         animationDelay: 10,
          *         boundingbox: [-10, 5, 10, -5],
@@ -5714,7 +5726,7 @@ JXG.extend(
          *             locale: 'de-DE'
          *         }
          *     });
-         *     
+         *
          *     board.setAttribute({
          *         selection: {
          *             enabled: true,
@@ -5731,9 +5743,9 @@ JXG.extend(
          *         showZoom: false,
          *         showNavigation: false
          *     });
-         *     
+         *
          *     board.setAttribute('showCopyright:false');
-         *     
+         *
          *     var p = board.create('point', [1, 1], {size: 10,
          *         label: {
          *             fontSize: 24,
@@ -5741,13 +5753,13 @@ JXG.extend(
          *             offset: [5, 0]
          *         }
          *     });
-         *     
-         * 
+         *
+         *
          *     })();
-         * 
+         *
          * </script><pre>
-         * 
-         * 
+         *
+         *
          */
         setAttribute: function (attr) {
             var i, arg, pair,
@@ -6863,6 +6875,8 @@ JXG.extend(
          * Expand the JSXGraph construction to fullscreen.
          * In order to preserve the proportions of the JSXGraph element,
          * a wrapper div is created which is set to fullscreen.
+         * This function is called when fullscreen mode is triggered
+         * <b>and</b> when it is closed.
          * <p>
          * The wrapping div has the CSS class 'jxgbox_wrap_private' which is
          * defined in the file 'jsxgraph.css'
@@ -6935,6 +6949,7 @@ JXG.extend(
             var wrap_id,
                 wrap_node,
                 inner_node,
+                dim,
                 doc = this.document,
                 fullscreenElement;
 
@@ -6943,7 +6958,17 @@ JXG.extend(
             inner_node = doc.getElementById(id);
             wrap_id = 'fullscreenwrap_' + id;
 
+            // Store the original data.
+            // This is used to establish the ratio h / w in
+            // fullscreen mode
+            dim = this.containerObj.getBoundingClientRect();
+            inner_node._cssFullscreenStore = {
+                w: dim.width,
+                h: dim.height
+            }
+
             // Wrap a div around the JSXGraph div.
+            // It is removed when fullscreen mode is closed.
             if (doc.getElementById(wrap_id)) {
                 wrap_node = doc.getElementById(wrap_id);
             } else {
@@ -6954,10 +6979,6 @@ JXG.extend(
                 wrap_node.appendChild(inner_node);
             }
 
-            // Get the real width and height of the JSXGraph div
-            // and determine the scaling and vertical shift amount
-            // this._fullscreen_res = Env._getScaleFactors(inner_node);
-
             // Trigger fullscreen mode
             wrap_node.requestFullscreen =
                 wrap_node.requestFullscreen ||
@@ -6972,12 +6993,15 @@ JXG.extend(
             } else {
                 fullscreenElement = doc.msFullscreenElement;
             }
+
             if (fullscreenElement === null) {
                 // Start fullscreen mode
                 if (wrap_node.requestFullscreen) {
                     wrap_node.requestFullscreen();
+                    this.startFullscreenResizeObserver(wrap_node);
                 }
             } else {
+                this.stopFullscreenResizeObserver(wrap_node);
                 if (Type.exists(document.exitFullscreen)) {
                     document.exitFullscreen();
                 } else if (Type.exists(document.webkitExitFullscreen)) {
@@ -6998,7 +7022,8 @@ JXG.extend(
         fullscreenListener: function (evt) {
             var inner_id,
                 inner_node,
-                fullscreenElement, // res,
+                fullscreenElement,
+                i,
                 doc = this.document;
 
             inner_id = this._fullscreen_inner_id;
@@ -7021,30 +7046,22 @@ JXG.extend(
             if (fullscreenElement) {
                 // Just entered fullscreen mode
 
-                // Get the data computed in board.toFullscreen()
-                // res = this._fullscreen_res;
-
-                // Store the scaling data.
-                // It is used in AbstractRenderer.updateText to restore the scaling matrix
-                // which is removed by MathJax.
+                // Store the original data.
                 // Further, the CSS margin has to be removed when in fullscreen mode,
                 // and must be restored later.
-                inner_node._cssFullscreenStore = {
-                    id: fullscreenElement.id,
-                    isFullscreen: true,
-                    margin: inner_node.style.margin
-                    // width: inner_node.style.width
-                    // scale: res.scale,
-                    // vshift: res.vshift
-                };
-
+                // Obsolete:
+                // It is used in AbstractRenderer.updateText to restore the scaling matrix
+                // which is removed by MathJax.
+                inner_node._cssFullscreenStore.id = fullscreenElement.id;
+                inner_node._cssFullscreenStore.isFullscreen = true;
+                inner_node._cssFullscreenStore.margin = inner_node.style.margin;
                 inner_node.style.margin = '';
-                // inner_node.style.width = res.width + 'px';
 
                 // 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(fullscreenElement.id, inner_id, doc, Type.evaluate(this.attr.fullscreen.scale));
+                Env.scaleJSXGraphDiv(fullscreenElement.id, inner_id, doc,
+                    Type.evaluate(this.attr.fullscreen.scale));
 
                 // Clear this.doc.fullscreenElement, because Safari doesn't to it and
                 // when leaving full screen mode it is still set.
@@ -7053,20 +7070,93 @@ JXG.extend(
                 // Just left the fullscreen mode
 
                 // Remove the CSS rules added in Env.scaleJSXGraphDiv
-                try {
-                    doc.styleSheets[doc.styleSheets.length - 1].deleteRule(0);
-                } catch (err) {
-                    console.log('JSXGraph: Could not remove CSS rules for full screen mode');
+                for (i = doc.styleSheets.length - 1; i >= 0; i--) {
+                    if (doc.styleSheets[i].title === 'jsxgraph_fullscreen_css') {
+                        doc.styleSheets[i].deleteRule(0);
+                        break;
+                    }
                 }
 
                 inner_node._cssFullscreenStore.isFullscreen = false;
                 inner_node.style.margin = inner_node._cssFullscreenStore.margin;
-                // inner_node.style.width = inner_node._cssFullscreenStore.width;
+
+                // Remove the wrapper div
+                inner_node.parentElement.replaceWith(inner_node);
             }
 
             this.updateCSSTransforms();
         },
 
+        /**
+         * Start resize observer in to handle
+         * orientation changes in fullscreen mode.
+         *
+         * @param {Object} node DOM object which is in fullscreen mode. It is the wrapper element
+         * around the JSXGraph div.
+         * @returns {JXG.Board} Reference to the board
+         * @private
+         * @see JXG.Board#toFullscreen
+         *
+         */
+        startFullscreenResizeObserver: function(node) {
+            var that = this;
+
+            if (!Env.isBrowser || !this.attr.resize || !this.attr.resize.enabled) {
+                return this;
+            }
+
+            this.resizeObserver = new ResizeObserver(function (entries) {
+                var inner_id,
+                    fullscreenElement,
+                    doc = that.document;
+
+                if (!that._isResizing) {
+                    that._isResizing = true;
+                    window.setTimeout(function () {
+                        try {
+                            inner_id = that._fullscreen_inner_id;
+                            if (doc.fullscreenElement !== undefined) {
+                                fullscreenElement = doc.fullscreenElement;
+                            } else if (doc.webkitFullscreenElement !== undefined) {
+                                fullscreenElement = doc.webkitFullscreenElement;
+                            } else {
+                                fullscreenElement = doc.msFullscreenElement;
+                            }
+                            if (fullscreenElement !== null) {
+                                Env.scaleJSXGraphDiv(fullscreenElement.id, inner_id, doc,
+                                    Type.evaluate(that.attr.fullscreen.scale));
+                            }
+                        } catch (err) {
+                            that.stopFullscreenResizeObserver(node);
+                        } finally {
+                            that._isResizing = false;
+                        }
+                    }, that.attr.resize.throttle);
+                }
+            });
+            this.resizeObserver.observe(node);
+            return this;
+        },
+
+        /**
+         * Remove resize observer to handle orientation changes in fullscreen mode.
+         * @param {Object} node DOM object which is in fullscreen mode. It is the wrapper element
+         * around the JSXGraph div.
+         * @returns {JXG.Board} Reference to the board
+         * @private
+         * @see JXG.Board#toFullscreen
+         */
+        stopFullscreenResizeObserver: function(node) {
+            if (!Env.isBrowser || !this.attr.resize || !this.attr.resize.enabled) {
+                return this;
+            }
+
+            if (Type.exists(this.resizeObserver)) {
+                this.resizeObserver.unobserve(node);
+            }
+            return this;
+        },
+
         /**
          * Add user activity to the array 'board.userLog'.
          *

package/src/base/constants.js

@@ -37,7 +37,7 @@ import JXG from "../jxg";
 
 var major = 1,
     minor = 6,
-    patch = 0,
+    patch = 1,
     add = '', //'dev' 'beta'
     version = major + '.' + minor + '.' + patch + (add ? '-' + add : ''),
     constants;

package/src/base/coordselement.js

@@ -245,6 +245,7 @@ JXG.extend(
                 newCoords, newPos,
                 doRound = false,
                 ev_sw,
+                snappedTo, snapValues,
                 slide = this.slideObject,
                 res, cu,
                 slides = [],
@@ -373,20 +374,28 @@ JXG.extend(
                     }
                 }
 
-                // Snap the glider point of the slider into its appropiate position
-                // First, recalculate the new value of this.position
-                // Second, call update(fromParent==true) to make the positioning snappier.
-                ev_sw = Type.evaluate(this.visProp.snapwidth);
-                if (
-                    Type.evaluate(ev_sw) > 0.0 &&
-                    Math.abs(this._smax - this._smin) >= Mat.eps
-                ) {
-                    newPos = Math.max(Math.min(newPos, 1), 0);
-
-                    v = newPos * (this._smax - this._smin) + this._smin;
-                    v = Math.round(v / ev_sw) * ev_sw;
-                    newPos = (v - this._smin) / (this._smax - this._smin);
+                // Snap the glider to snap values.
+                snappedTo = this.findClosestSnapValue(newPos);
+                if(snappedTo !== null) {
+                    snapValues = Type.evaluate(this.visProp.snapvalues);
+                    newPos = (snapValues[snappedTo] - this._smin) / (this._smax - this._smin);
                     this.update(true);
+                } else {
+                    // Snap the glider point of the slider into its appropiate position
+                    // First, recalculate the new value of this.position
+                    // Second, call update(fromParent==true) to make the positioning snappier.
+                    ev_sw = Type.evaluate(this.visProp.snapwidth);
+                    if (
+                        Type.evaluate(ev_sw) > 0.0 &&
+                        Math.abs(this._smax - this._smin) >= Mat.eps
+                    ) {
+                        newPos = Math.max(Math.min(newPos, 1), 0);
+
+                        v = newPos * (this._smax - this._smin) + this._smin;
+                        v = Math.round(v / ev_sw) * ev_sw;
+                        newPos = (v - this._smin) / (this._smax - this._smin);
+                        this.update(true);
+                    }
                 }
 
                 p1c = slide.point1.coords;
@@ -533,6 +542,37 @@ JXG.extend(
             this.position = newPos;
         },
 
+        /**
+         * Find the closest entry in snapValues that is within snapValueDistance of pos.
+         *
+         * @param {Number} pos Value for which snapping is calculated.
+         * @returns {Number} Index of the value to snap to, or null.
+         * @private
+         */
+        findClosestSnapValue: function(pos) {
+            var i, d,
+                snapValues, snapValueDistance,
+                snappedTo = null;
+
+            // Snap the glider to snap values.
+            snapValues = Type.evaluate(this.visProp.snapvalues);
+            snapValueDistance = Type.evaluate(this.visProp.snapvaluedistance);
+
+            if (Type.isArray(snapValues) &&
+                Math.abs(this._smax - this._smin) >= Mat.eps &&
+                snapValueDistance > 0.0) {
+                for (i = 0; i < snapValues.length; i++) {
+                    d = Math.abs(pos * (this._smax - this._smin) + this._smin - snapValues[i]);
+                    if (d < snapValueDistance) {
+                        snapValueDistance = d;
+                        snappedTo = i;
+                    }
+                }
+            }
+
+            return snappedTo;
+        },
+
         /**
          * Update of a glider in case a parent element has been updated. That means the
          * relative position of the glider stays the same.
@@ -1918,7 +1958,7 @@ JXG.extend(
          * @returns {JXG.CoordsElement} Reference to itself.
          */
         _anim: function (direction, stepCount) {
-            var dX, dY, alpha, startPoint, newX, radius, sp1c, sp2c, res, d;
+            var dX, dY, alpha, startPoint, newX, radius, sp1c, sp2c, res;
 
             this.intervalCount += 1;
             if (this.intervalCount > stepCount) {

package/src/base/curve.js

@@ -2231,6 +2231,11 @@ JXG.registerElement("metapostspline", JXG.createMetapostSpline);
 /**
  * @class This element is used to provide a constructor for Riemann sums, which is realized as a special curve.
  * The returned element has the method Value() which returns the sum of the areas of the bars.
+ * <p>
+ * In case of type "simpson" and "trapezoidal", the horizontal line approximating the function value 
+ * is replaced by a parabola or a secant. IN case of "simpson", 
+ * the parabola is approximated visually by a polygonal chain of fixed step width. 
+ * 
  * @pseudo
  * @description
  * @name Riemannsum
@@ -2244,7 +2249,7 @@ JXG.registerElement("metapostspline", JXG.createMetapostSpline);
  *         n determines the number of bars, it is either a fixed number or a function.
  *         <p>
  *         type is a string or function returning one of the values:  'left', 'right', 'middle', 'lower', 'upper', 'random', 'simpson', or 'trapezoidal'.
- *         Default value is 'left'.
+ *         Default value is 'left'. "simpson" is Simpson's 1/3 rule.
  *         <p>
  *         Further parameters are an optional number or function for the left interval border a,
  *         and an optional number or function for the right interval border b.

package/src/base/text.js

@@ -654,7 +654,7 @@ JXG.extend(
         },
 
         /**
-         * The update function of the renderert
+         * The update function of the renderer
          * is called.
          * @private
          */
@@ -1124,11 +1124,9 @@ JXG.extend(
          * @param  {Number} h width of the box in pixel
          * @return {Number}   Number of overlapping elements
          */
-        getNumberofConflicts: function (x, y, w, h) {
+        getNumberOfConflicts: function (x, y, w, h) {
             var count = 0,
-                i,
-                obj,
-                le,
+                i, obj, le,
                 savePointPrecision;
 
             // Set the precision of hasPoint to half the max if label isn't too long
@@ -1163,33 +1161,22 @@ JXG.extend(
          * @returns {JXG.Text} Reference to the text object.
          */
         setAutoPosition: function () {
-            var x,
-                y,
-                cx,
-                cy,
+            var x, y, cx, cy,
                 anchorCoords,
                 // anchorX, anchorY,
                 w = this.size[0],
                 h = this.size[1],
-                start_angle,
-                angle,
+                start_angle, angle,
                 optimum = {
                     conflicts: Infinity,
                     angle: 0,
                     r: 0
                 },
-                max_r,
-                delta_r,
-                conflicts,
-                offset,
-                r,
+                max_r, delta_r,
+                conflicts, offset, r,
                 num_positions = 12,
                 step = (2 * Math.PI) / num_positions,
-                j,
-                dx,
-                dy,
-                co,
-                si;
+                j, dx, dy, co, si;
 
             if (
                 this === this.board.infobox ||
@@ -1212,15 +1199,15 @@ JXG.extend(
             dx = offset[0];
             dy = offset[1];
 
-            conflicts = this.getNumberofConflicts(cx + dx, cy - dy, w, h);
+            conflicts = this.getNumberOfConflicts(cx + dx, cy - dy, w, h);
             if (conflicts === 0) {
                 return this;
             }
             // console.log(this.id, conflicts, w, h);
             // r = Geometry.distance([0, 0], offset, 2);
 
-            r = 12;
-            max_r = 28;
+            r = Type.evaluate(this.visProp.autopositionmindistance);
+            max_r = Type.evaluate(this.visProp.autopositionmaxdistance);
             delta_r = 0.2 * r;
 
             start_angle = Math.atan2(dy, dx);
@@ -1229,7 +1216,7 @@ JXG.extend(
             optimum.angle = start_angle;
             optimum.r = r;
 
-            while (optimum.conflicts > 0 && r < max_r) {
+            while (optimum.conflicts > 0 && r <= max_r) {
                 for (
                     j = 1, angle = start_angle + step;
                     j < num_positions && optimum.conflicts > 0;
@@ -1241,7 +1228,7 @@ JXG.extend(
                     x = cx + r * co;
                     y = cy - r * si;
 
-                    conflicts = this.getNumberofConflicts(x, y, w, h);
+                    conflicts = this.getNumberOfConflicts(x, y, w, h);
                     if (conflicts < optimum.conflicts) {
                         optimum.conflicts = conflicts;
                         optimum.angle = angle;