jsxgraph 1.6.0 → 1.6.1

package/src/math/qdt.js

@@ -33,6 +33,7 @@
 /*jslint nomen: true, plusplus: true*/
 
 import Mat from "./math";
+import Geometry from "./geometry";
 import Type from "../utils/type";
 
 /**
@@ -41,16 +42,31 @@ import Type from "../utils/type";
  * @name JXG.Math.Quadtree
  * @exports Mat.Quadtree as JXG.Math.Quadtree
  * @param {Array} bbox Bounding box of the new quad (sub)tree.
+ * @param {Object} config Configuration object. Default value: to {capacity: 10}
+ *
  * @constructor
  */
-Mat.Quadtree = function (bbox) {
+Mat.Quadtree = function (bbox, config, parent) {
+    config = config || {
+        capacity: 10,
+        pointType: 'coords'
+    };
+
     /**
      * The maximum number of points stored in a quad tree node
      * before it is subdivided.
      * @type Number
      * @default 10
      */
-    this.capacity = 10;
+    this.capacity = config.capacity || 10;
+
+    /**
+     * Type of a point object. Possible values are:
+     * 'coords', 'object'.
+     * @type String
+     * @default 'coords'
+     */
+    this.pointType = config.pointType || 'coords';
 
     /**
      * Point storage.
@@ -63,6 +79,15 @@ Mat.Quadtree = function (bbox) {
     this.ylb = bbox[3];
     this.yub = bbox[1];
 
+    /**
+     * Parent quad tree or null if there is not parent.
+     *
+     * @name JXG.Math.Quadtree#northWest
+     * @type JXG.Math.Quadtree
+     *
+     */
+    this.parent = parent || null;
+
     /**
      * In a subdivided quad tree this represents the top left subtree.
      * @name JXG.Math.Quadtree#northWest
@@ -90,6 +115,7 @@ Mat.Quadtree = function (bbox) {
      * @type JXG.Math.Quadtree
      */
     this.southWest = null;
+
 };
 
 Type.extend(
@@ -106,13 +132,24 @@ Type.extend(
         },
 
         /**
-         * Insert a new point into this quad tree.
+         * Insert a new point into this quad tree. Do this only,
+         * if the point is not yet in the quadtree (test exactly).
+         *
          * @param {JXG.Coords} p
          * @returns {Boolean}
          */
         insert: function (p) {
-            if (!this.contains(p.usrCoords[1], p.usrCoords[2])) {
-                return false;
+            switch (this.pointType) {
+                case 'coords':
+                    if (!this.contains(p.usrCoords[1], p.usrCoords[2])) {
+                        return false;
+                    }
+                    break;
+                case 'object':
+                    if (!this.contains(p.x, p.y)) {
+                        return false;
+                    }
+                    break;
             }
 
             if (this.points.length < this.capacity) {
@@ -144,21 +181,22 @@ Type.extend(
          */
         subdivide: function () {
             var i,
-                l = this.points.length,
+                le = this.points.length,
                 mx = this.xlb + (this.xub - this.xlb) / 2,
                 my = this.ylb + (this.yub - this.ylb) / 2;
 
-            this.northWest = new Mat.Quadtree([this.xlb, this.yub, mx, my]);
-            this.northEast = new Mat.Quadtree([mx, this.yub, this.xub, my]);
-            this.southEast = new Mat.Quadtree([this.xlb, my, mx, this.ylb]);
-            this.southWest = new Mat.Quadtree([mx, my, this.xub, this.ylb]);
+            this.northWest = new Mat.Quadtree([this.xlb, this.yub, mx, my], this.config, this);
+            this.northEast = new Mat.Quadtree([mx, this.yub, this.xub, my], this.config, this);
+            this.southEast = new Mat.Quadtree([this.xlb, my, mx, this.ylb], this.config, this);
+            this.southWest = new Mat.Quadtree([mx, my, this.xub, this.ylb], this.config, this);
 
-            for (i = 0; i < l; i += 1) {
-                this.northWest.insert(this.points[i]);
-                this.northEast.insert(this.points[i]);
-                this.southEast.insert(this.points[i]);
-                this.southWest.insert(this.points[i]);
+            for (i = 0; i < le; i += 1) {
+                this.insert(this.points[i]);
             }
+
+            // We empty this node points
+            this.points.length = 0;
+            this.points = [];
         },
 
         /**
@@ -204,14 +242,13 @@ Type.extend(
         },
 
         /**
-         * Retrieve the smallest quad tree that contains the given point.
+         * Retrieve the smallest quad tree that contains the given coordinate pair.
          * @name JXG.Math.Quadtree#_query
          * @param {JXG.Coords|Number} xp
          * @param {Number} y
          * @returns {Boolean|JXG.Quadtree} The quad tree if the point is found, false
          * if none of the quad trees contains the point (i.e. the point is not inside
          * the root tree's AABB).
-         * @private
          */
         query: function (xp, y) {
             var _x, _y;
@@ -225,7 +262,94 @@ Type.extend(
             }
 
             return this._query(_x, _y);
+        },
+
+        /**
+         *
+         * @param {*} x
+         * @param {*} y
+         * @param {*} tol
+         * @returns {Boolean}
+         */
+        isIn: function (x, y, tol) {
+            var r, i, le;
+
+            if (this.contains(x, y)) {
+                le = this.points.length;
+
+                switch (this.pointType) {
+                    case 'coords':
+                        for (i = 0; i < le; i++) {
+                            if (Geometry.distance([x, y], this.points[i].usrCoords.slice(1), 2) < tol) {
+                                return true;
+                            }
+                        }
+                        break;
+                    case 'object':
+                        for (i = 0; i < le; i++) {
+                            if (Geometry.distance([x, y], [this.points[i].x, this.points[i].y], 2) < tol) {
+                                return true;
+                            }
+                        }
+                        break;
+               }
+
+
+                if (this.northWest === null) {
+                    return false;
+                }
+
+                r = this.northWest.isIn(x, y, tol);
+                if (r) {
+                    return r;
+                }
+
+                r = this.northEast.isIn(x, y, tol);
+                if (r) {
+                    return r;
+                }
+
+                r = this.southEast.isIn(x, y, tol);
+                if (r) {
+                    return r;
+                }
+
+                r = this.southWest.isIn(x, y, tol);
+                if (r) {
+                    return r;
+                }
+            }
+
+            return false;
+        },
+
+        /**
+         *
+         * @returns {Array}
+         */
+        getAllPoints: function() {
+            var pointsList = [];
+            this.getAllPointsRecursive(pointsList);
+            return pointsList;
+        },
+
+        /**
+         *
+         * @param {Array} pointsList
+         * @private
+         */
+        getAllPointsRecursive(pointsList) {
+            if (this.northWest === null) {
+                Array.prototype.push.apply(pointsList, this.points.slice());
+                return;
+            }
+
+            this.northWest.getAllPointsRecursive(pointsList);
+            this.northEast.getAllPointsRecursive(pointsList);
+            this.southEast.getAllPointsRecursive(pointsList);
+            this.southWest.getAllPointsRecursive(pointsList);
         }
+
     }
 );
 

package/src/options.js

@@ -788,7 +788,7 @@ JXG.Options = {
          * Especially, on mobile devices this enhances the user experience.
          * However, it is recommended to allow dragging outside of the JSXGraph board only
          * in certain constructions where users may not "loose" points outside of the board.
-         * Then points may become unreachable.
+         * In such a case, points may become unreachable.
          * <p>
          * A situation where dragging outside of the board is uncritical is for example if
          * only sliders are used to interact with the construction.
@@ -800,9 +800,18 @@ JXG.Options = {
          * <li> document
          * </ul>
          * <p>
+         * Since the introduction of this attribute "moveTarget", the value "document" has become sort of
+         * default on touch devices like smartphones. However, it is no longer the case that the document listens to
+         * move events, but there is the new feature "setPointerCapture", which is also implicitly enabled on certain devices.
+         * In future versions, JSXGraph may adopt this new standard and distinguish only two cases:
+         * <ul>
+         * <li>null: no pointerCapture
+         * <li>document: use pointerCapture
+         * </ul>
+         * <p>
          * This attribute is immutable.
          * It can be changed as follows:
-         * 
+         *
          * @example
          * board.setAttribute({moveTarget: null});
          * board.removeEventHandlers();
@@ -885,9 +894,9 @@ JXG.Options = {
          * Allow user interaction by registering mouse, pointer, keyboard or touch events.
          * Decide if JSXGraph listens to these events. Keyboard events can then turned off
          * separately with the keyboard attribute.
-         * 
+         *
          * <p>This attribute is immutable. Please use
-         * {@link JXG.Board#addEventHandlers()} and 
+         * {@link JXG.Board#addEventHandlers()} and
          * {@link JXG.Board#removeEventHandlers()} directly.
          *
          * @name JXG.Board#registerEvents
@@ -903,7 +912,7 @@ JXG.Options = {
          * Listen to fullscreen event.
          *
          * <p>This attribute is immutable. Please use
-         * {@link JXG.Board#addFullscreenEventHandlers()} and 
+         * {@link JXG.Board#addFullscreenEventHandlers()} and
          * {@link JXG.Board#removeEventHandlers()} directly.
          *
          * @name JXG.Board#registerFullscreenEvent
@@ -917,14 +926,14 @@ JXG.Options = {
         /**
          * Listen to resize events, i.e. start "resizeObserver" or handle the resize event with
          * "resizeListener". This is independent from the mouse, touch, pointer events.
-         * 
+         *
          * <p>This attribute is immutable. Please use
-         * {@link JXG.Board#addResizeEventHandlers()} and 
+         * {@link JXG.Board#addResizeEventHandlers()} and
          * {@link JXG.Board#removeEventHandlers()} directly.
          * <p>
          * This attribute just starts a resizeObserver. If the resizeObserver reacts
          * to size changed is controled wuth {@link JXG.Board#resize}.
-         * 
+         *
          * @name JXG.Board#registerResizeEvent
          * @see JXG.Board#resize
          * @see JXG.Board#registerEvents
@@ -941,7 +950,7 @@ JXG.Options = {
          * <p>
          * In case of 'canvas' it is advisable to call 'board.update()' after all elements have been
          * constructed. This ensures that all elements are drawn with their intended visual appearance.
-         * 
+         *
          * <p>
          * This attribute is immutable.
          *
@@ -3972,11 +3981,11 @@ JXG.Options = {
         width: 0.4,
 
         /**
-         * Angle under which comb elements are positioned.
+         * Angle - given in radians - under which comb elements are positioned.
          *
          * @type Number
          * @name Comb#angle
-         * @default 60 degrees
+         * @default Math.PI / 3 (i.e. &pi; /3  or 60^° degrees)
          */
         angle: Math.PI / 3,
 
@@ -4812,7 +4821,37 @@ JXG.Options = {
          *
          *
          */
-        autoPosition: false
+        autoPosition: false,
+
+        /**
+         * The auto position algorithm tries to put a label to a conflict-free
+         * position around it's anchor element. For this, the algorithm tests 12 positions
+         * around the anchor element starting at a distance from the anchor
+         * defined here (in pixel).
+         *
+         * @name Label#autoPositionMinDistance
+         * @see Label#autoPosition
+         * @see Label#autoPositionMaxDistance
+         * @type Number
+         * @default 12
+         *
+         */
+        autoPositionMinDistance: 12,
+
+        /**
+         * The auto position algorithm tries to put a label to a conflict-free
+         * position around it's anchor element. For this, the algorithm tests 12 positions
+         * around the anchor element up to a distance from the anchor
+         * defined here (in pixel).
+         *
+         * @name Label#autoPositionMaxDistance
+         * @see Label#autoPosition
+         * @see Label#autoPositionMinDistance
+         * @type Number
+         * @default 28
+         *
+         */
+        autoPositionMaxDistance: 28
 
         /**#@-*/
     },
@@ -6114,6 +6153,70 @@ JXG.Options = {
          */
         snapWidth: -1,      // -1 = deactivated
 
+        /**
+         * List of values to snap to. If the glider is within snapValueDistance
+         * (in user coordinate units) of one of these points,
+         * then the glider snaps to that point.
+         *
+         * @memberOf Slider.prototype
+         * @name snapValues
+         * @type Array
+         * @see Slider#snapValueDistance
+         * @default empty
+         *
+         * @example
+         *         var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], {
+         *             name: 'n',
+         *             snapWidth: 1,
+         *             snapValues: [1, 22, 77, 100],
+         *             snapValueDistance: 5
+         *         });
+         *
+         *         var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], {
+         *             name: 'k',
+         *             snapWidth: 0.1,
+         *             snapValues: [-3, -1, 1, 3],
+         *             snapValueDistance: 0.4
+         *         });
+         *
+         * </pre><div id="JXG9be68014-4e14-479a-82b4-e92d9b8f6eef" class="jxgbox" style="width: 300px; height: 300px;"></div>
+         * <script type="text/javascript">
+         *     (function() {
+         *         var board = JXG.JSXGraph.initBoard('JXG9be68014-4e14-479a-82b4-e92d9b8f6eef',
+         *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+         *             var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], {
+         *                 name: 'n',
+         *                 snapWidth: 1,
+         *                 snapValues: [1, 22, 77, 100],
+         *                 snapValueDistance: 5
+         *             });
+         *
+         *             var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], {
+         *                 name: 'k',
+         *                 snapWidth: 0.1,
+         *                 snapValues: [-3, -1, 1, 3],
+         *                 snapValueDistance: 0.4
+         *             });
+         *
+         *     })();
+         *
+         * </script><pre>
+         *
+         */
+        snapValues: [],
+
+        /**
+         * If the difference between the slider value and one of the elements of snapValues is less
+         * than this number (in user coordinate units), the slider will snap to that value.
+         *
+         * @memberOf Slider.prototype
+         * @name snapValueDistance
+         * @type Number
+         * @see Slider#snapValues
+         * @default 0.0
+         */
+        snapValueDistance: 0.0,
+
         /**
          * The precision of the slider value displayed in the optional text.
          * Replaced by the attribute "digits".

package/src/renderer/abstract.js

@@ -1257,20 +1257,21 @@ JXG.extend(
                                     MathJax.Hub.Queue(["Typeset", MathJax.Hub, el.rendNode]);
                                 }
 
-                                // Restore the transformation necessary for fullscreen mode
-                                // MathJax removes it when handling dynamic content
-                                id = el.board.container;
-                                wrap_id = "fullscreenwrap_" + id;
-                                if (document.getElementById(wrap_id)) {
-                                    scale = el.board.containerObj._cssFullscreenStore.scale;
-                                    vshift = el.board.containerObj._cssFullscreenStore.vshift;
-                                    Env.scaleJSXGraphDiv(
-                                        "#" + wrap_id,
-                                        "#" + id,
-                                        scale,
-                                        vshift
-                                    );
-                                }
+                                // Obsolete:
+                                // // Restore the transformation necessary for fullscreen mode
+                                // // MathJax removes it when handling dynamic content
+                                // id = el.board.container;
+                                // wrap_id = "fullscreenwrap_" + id;
+                                // if (document.getElementById(wrap_id)) {
+                                //     scale = el.board.containerObj._cssFullscreenStore.scale;
+                                //     vshift = el.board.containerObj._cssFullscreenStore.vshift;
+                                //     Env.scaleJSXGraphDiv(
+                                //         "#" + wrap_id,
+                                //         "#" + id,
+                                //         scale,
+                                //         vshift
+                                //     );
+                                // }
                             } catch (e) {
                                 JXG.debug("MathJax (not yet) loaded");
                             }

package/src/renderer/canvas.js

@@ -1687,7 +1687,7 @@ JXG.extend(
             }
             this.context = this.canvasRoot.getContext("2d");
             // The width and height of the canvas is set to twice the CSS values,
-            // followed by an appropiate scaling.
+            // followed by an appropriate scaling.
             // See https://stackoverflow.com/questions/22416462/canvas-element-with-blurred-lines
             this.context.scale(2, 2);
         },

package/src/renderer/svg.js

@@ -1827,13 +1827,8 @@ JXG.extend(
 
         // documented in AbstractRenderer
         resize: function (w, h) {
-            // this.svgRoot.style.width  = parseFloat(w) + 'px';
-            // this.svgRoot.style.height = parseFloat(h) + 'px';
-
             this.svgRoot.setAttribute("width", parseFloat(w));
             this.svgRoot.setAttribute("height", parseFloat(h));
-            // this.svgRoot.setAttribute('width',  '100%');
-            // this.svgRoot.setAttribute('height', '100%');
         },
 
         // documented in JXG.AbstractRenderer

package/src/utils/env.js

@@ -547,7 +547,7 @@ JXG.extend(
         /**
          * Cross browser mouse / pointer / touch coordinates retrieval relative to the documents's top left corner.
          * This method might be a bit outdated today, since pointer events and clientX/Y are omnipresent.
-         * 
+         *
          * @param {Object} [e] The browsers event object. If omitted, <tt>window.event</tt> will be used.
          * @param {Number} [index] If <tt>e</tt> is a touch event, this provides the index of the touch coordinates, i.e. it determines which finger.
          * @param {Object} [doc] The document object.
@@ -912,10 +912,16 @@ JXG.extend(
          *
          */
         scaleJSXGraphDiv: function (wrap_id, inner_id, doc, scale) {
-            var len = doc.styleSheets.length, style, rule, w, h, b, wi, hi, bi,
-                scale_l, vshift_l, // scale_p, vshift_p,
+            var len = doc.styleSheets.length, style, rule,
+                w, h, b,
+                wi, hi,
+                wo, ho, inner,
+                scale_l, vshift_l,
                 f = scale,
-                rule_inner_l, // rule_inner_p,
+                ratio,
+                rule_inner_l,
+                title = 'jsxgraph_fullscreen_css',
+                found_css,
                 pseudo_keys = [
                     ":fullscreen",
                     ":-webkit-full-screen",
@@ -938,45 +944,80 @@ JXG.extend(
             h = b.height;
             w = b.width;
 
-            bi = doc.getElementById(inner_id).getBoundingClientRect();
-            hi = bi.height;
-            wi = bi.width;
+            inner = doc.getElementById(inner_id);
+            wo = inner._cssFullscreenStore.w;
+            ho = inner._cssFullscreenStore.h;
+            ratio = ho / wo;
+
+            // Scale the div such that fits into the fullscreen.
+            if (wo > w * f) {
+                wo = w * f;
+                ho = wo * ratio;
+            }
+            if (ho > h * f) {
+                ho = h * f;
+                wo = ho / ratio;
+            }
 
-            if (wi / hi >= w / h) {
-                scale_l = (f * w) / wi;
+            wi = wo;
+            hi = ho;
+            // Compare this.setBoundingBox() 
+            if (ratio > 1) {
+                // h > w
+                if (ratio < h / w) {
+                    scale_l =  w * f / wo;
+                } else {
+                    scale_l =  h * f / ho;
+                }
             } else {
-                scale_l = (f * h) / hi;
+                // h <= w
+                if (ratio < h / w) {
+                    scale_l = w * f / wo;
+                } else {
+                    scale_l = h * f / ho;
+                }
             }
             vshift_l = (h - hi) * 0.5;
 
             // CSS rules to center the inner div horizontally and vertically.
             rule_inner_l =
-                "{margin:0 auto;transform:matrix(" +
-                scale_l +
-                ",0,0," +
-                scale_l +
-                ",0," +
-                vshift_l +
-                ");}";
-
-            if (len === 0) {
-                // In case there is not a single CSS rule defined at all.
+                "{" +
+                "width:" + wi + "px !important;" +
+                "height:" + hi + "px !important;" +
+                "margin:0 auto;" +
+                "transform:matrix(" + scale_l + ",0,0," + scale_l + ",0," + vshift_l + ");" +
+                "}";
+
+            found_css = false;
+            // Removing of the CSS here should happen only
+            // in emergency cases.
+            for (i = len - 1; i >= 0; i--) {
+                if (doc.styleSheets[i].title === title) {
+                    found_css = true;
+
+                    if (doc.styleSheets[i].title === title &&
+                        doc.styleSheets[i].cssRules.length > 0 &&
+                        regex.test(doc.styleSheets[i].cssRules[0].cssText) &&
+                        doc.styleSheets[i].deleteRule
+                    ) {
+                        doc.styleSheets[i].deleteRule(0);
+                        break;
+                    }
+                }
+            }
+            if (!found_css) {
+                // In case there is not yet a CSS style sheet for fullscreen
+                // defined, do it now.
                 style = document.createElement("style");
+                style.setAttribute('title', title);
                 // WebKit hack :(
                 style.appendChild(document.createTextNode(""));
-                // Add the <style> element to the page
-                doc.appendChild(style);
-                len = doc.styleSheets.length;
-            }
-
-            // Remove a previously installed CSS rule.
-            if (
-                doc.styleSheets[len - 1].cssRules.length > 0 &&
-                regex.test(doc.styleSheets[len - 1].cssRules[0].cssText) &&
-                doc.styleSheets[len - 1].deleteRule
-            ) {
-                doc.styleSheets[len - 1].deleteRule(0);
+                // Add the <style> element to the page head.
+                // It must be document, not the shadowDOM root.
+                // It seems that the head tag does always exist.
+                document.head.appendChild(style);
             }
+            len = doc.styleSheets.length;
 
             // Install a CSS rule to center the JSXGraph div at the first position of the list.
             for (i = 0; i < len_pseudo; i++) {
@@ -986,14 +1027,10 @@ JXG.extend(
                     doc.styleSheets[len - 1].insertRule(rule, 0);
 
                     break;
-                } catch (err) {
-                    // console.log('JXG.scaleJSXGraphDiv: Could not add CSS rule "' + pseudo_keys[i] + '".');
-                    // console.log('One possible reason could be that the id of the JSXGraph container does not start with a letter.');
-                }
+                } catch (err) {}
             }
             if (i === len_pseudo) {
-                console.log("JXG.scaleJSXGraphDiv: Could not add any CSS rule.");
-                console.log(
+                JXG.debug("JXG.scaleJSXGraphDiv: Could not add any CSS rule.\n" +
                     "One possible reason could be that the id of the JSXGraph container does not start with a letter."
                 );
             }