jsxgraph 1.14.0 → 1.14.1

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+1.14.1
+===
+
+Improvements
+------------
+
+- API docs: various additions and improvements
+- TypeScript: add missing entry to index.d.ts
+- Print warning to console if a 3D element is removed with board.removeObject() instead of view3d.removeObject()
+- sphere3d: treat parallel and central projection simultaneously
+- Repository: move folder `./src/unused` to `./src_unused`
+
+Bug fixes
+---------
+
+- Correct resizing of JSXGraph boards that are invisible or hidden at initialization time
+- `removeObject()` of 3D elements
+- Regression in svg.js: setLayer()
+- line3d child elements were added twice
+- canvas renderer: updateGradientCircle()
+- circle.getBoundingBox()
+- Throw error if if intersectionline3d is used wrong
+- Catch non-integer parameters in JXG.Math.gcd()
+- Fix logical test in `JXG.Math.Numerics.GaussLegendre`
+- Type.mergeAttr setting of default parameters
+- Set default attributes in createHTMLSlider
+- Handle missing parameter config in `JXG.Math.Numerics.Romberg()`
+- Typo in sector of parallel lines
+- `Type.trimNumber()` of `100` and `0`
+
 1.14.0
 ===
 
@@ -22,7 +52,7 @@ If a defining point for one of these elements is supplied as coordinate array an
 
 *Changes:*
 
-- These parent points are now invisible by default and have the empty string `''` as name. 
+- These parent points are now invisible by default and have the empty string `''` as name.
 - Their attributes can be changed later by changeing the corresponding sub-object, e.g.
   `sector.radiusPoint.setAttribute({visible: false});`
 
@@ -54,7 +84,7 @@ Bug fixes
 - Fix regression: missing strokeColor of polygon
 - Fix resource ID collisions for anonymous containers
 - Fix two security issues
-  
+
 1.13.2
 ===
 
@@ -89,7 +119,7 @@ Bug fixes
 - Curves with transposed input
 - JXG.GeometryElement3D.setAttribute()
 - Fix media query listener cleanup
-  
+
 1.13.1
 ===
 

package/distrib/docs/3d_linspace3d.js.html

@@ -754,8 +754,8 @@ JXG.createLine3D = function (board, parents, attributes) {
          * @private
          */
         el.endpoints = endpoints;
-        el.addChild(endpoints[0]);
-        el.addChild(endpoints[1]);
+        // el.addChild(endpoints[0]); // Is done below
+        // el.addChild(endpoints[1]);
         // el.setParents(endpoints);
         el.addParents([point1, point2]);
 
@@ -2102,18 +2102,24 @@ JXG.createIntersectionLine3D = function (board, parents, attributes) {
     var view = parents[0],
         el1 = parents[1],
         el2 = parents[2],
-        ixnLine, i,// func,
+        ixnLine, i,// f,
         attr = Type.copyAttributes(attributes, board.options, 'intersectionline3d'),
         pts = [];
 
-    // func = Geometry.intersectionFunction3D(view, el1, el2);
+    // var func = Geometry.intersectionFunction3D(view, el1, el2);
     for (i = 0; i < 2; i++) {
-        pts[i] = view.create('point3d', [
-            // Use closures
-            (function(ii) {
-                return function() { return Geometry.intersectionFunction3D(view, el1, el2)[ii]; };
-            })(i)
-        ], attr['point' + (i + 1)]);
+        try {
+            pts[i] = view.create('point3d', [
+                // Use closures
+                (function (ii) {
+                    return function () { return Geometry.intersectionFunction3D(view, el1, el2)[ii]; };
+                })(i)
+            ], attr['point' + (i + 1)]);
+        } catch (err) {
+            throw new Error(
+                "JSXGraph: Can't create IntersectionLine3D from the intersection of these types. Please check the intersecting elements."
+            );
+        }
     }
     ixnLine = view.create('line3d', pts, attr);
 

package/distrib/docs/3d_point3d.js.html

@@ -563,8 +563,6 @@ JXG.extend(
             }
         },
 
-
-
         /**
         * Starts an animated point movement towards the given coordinates `where`.
         * The animation is done after `time` milliseconds.
@@ -786,9 +784,6 @@ JXG.extend(
             });
         },
 
-
-
-
         // Not yet working
         __evt__update3D: function (oc) { }
     }

package/distrib/docs/3d_sphere3d.js.html

@@ -237,28 +237,52 @@ JXG.extend(
     JXG.Sphere3D.prototype,
     /** @lends JXG.Sphere3D.prototype */ {
 
+        /**
+         * Returns the x-coordinate of the sphere given as parametric surface for parameters `u` and `v`.
+         * @param {Number} u
+         * @param {Number} v
+         * @returns {Number} x-coordinate
+         */
         X: function(u, v) {
             var r = this.Radius();
             return r * Math.sin(u) * Math.cos(v);
         },
 
+        /**
+         * Returns the y-coordinate of the sphere given as parametric surface for parameters `u` and `v`.
+         * @param {Number} u
+         * @param {Number} v
+         * @returns {Number} y-coordinate
+         */
         Y: function(u, v) {
             var r = this.Radius();
             return r * Math.sin(u) * Math.sin(v);
         },
 
+        /**
+         * Returns the z-coordinate of the sphere given as parametric surface for parameters `u` and `v`.
+         * @param {Number} u
+         * @param {Number} v
+         * @returns {Number} z-coordinate
+         */
         Z: function(u, v) {
             var r = this.Radius();
             return r * Math.cos(u);
         },
 
+        /**
+         * The parameter range of `u`
+         * @type {Array}
+         */
         range_u: [0, 2 * Math.PI],
+
+        /**
+         * The parameter range of `v`
+         * @type {Array}
+         */
         range_v: [0, Math.PI],
 
         update: function () {
-            if (this.projectionType !== this.view.projectionType) {
-                this.rebuildProjection();
-            }
             return this;
         },
 
@@ -306,34 +330,55 @@ JXG.extend(
             return NaN;
         },
 
-        // The central projection of a sphere is an ellipse. The front and back
-        // points of the sphere---that is, the points closest to and furthest
-        // from the screen---project to the foci of the ellipse.
-        //
-        // To see this, look at the cone tangent to the sphere whose tip is at
-        // the camera. The image of the sphere is the ellipse where this cone
-        // intersects the screen. By acting on the sphere with scalings centered
-        // on the camera, you can send it to either of the Dandelin spheres that
-        // touch the screen at the foci of the image ellipse.
-        //
-        // This factory method produces two functions, `focusFn(-1)` and
-        // `focusFn(1)`, that evaluate to the projections of the front and back
-        // points of the sphere, respectively.
+        /**
+         * The central projection of a sphere is an ellipse. The front and back
+         * points of the sphere -- that is, the points closest to and furthest
+         * from the screen -- project to the foci of the ellipse.
+         *
+         * To see this, look at the cone tangent to the sphere whose tip is at
+         * the camera. The image of the sphere is the ellipse where this cone
+         * intersects the screen. By acting on the sphere with scalings centered
+         * on the camera, you can send it to either of the Dandelin spheres that
+         * touch the screen at the foci of the image ellipse.
+         *
+         * This factory method produces two functions, `focusFn(-1)` and
+         * `focusFn(1)`, that evaluate to the projections of the front and back
+         * points of the sphere, respectively.
+         *
+         * The parallel projection of a sphere is a cicle. We use an ellipse curve
+         * for this projection, too. The two focii now coincide with the center of
+         * the sphere. The 2D radius point is defined by the projection of the center
+         * and the projected radius.
+         * @param {Number} sgn Expecst -1 or 1 for the two focus points
+         * @returns {Array} 2D coordinates of the projected focus point
+         *
+         */
         focusFn: function (sgn) {
             var that = this;
 
             return function () {
-                var camDir = that.view.boxToCam[3],
+                var camDir,
+                    v = (that.view.projectionType === 'central') ? 1 : 0,
                     r = that.Radius();
 
+                // Parallel projection: v === 0, the two focii coincide with the center
+                // Central projection: v === 1
+                camDir = (v === 0) ? [0, 0, 0, 0] : that.view.boxToCam[3];
+
                 return that.view.project3DTo2D([
-                    that.center.X() + sgn * r * camDir[1],
-                    that.center.Y() + sgn * r * camDir[2],
-                    that.center.Z() + sgn * r * camDir[3]
+                    that.center.X() + v * sgn * r * camDir[1],
+                    that.center.Y() + v * sgn * r * camDir[2],
+                    that.center.Z() + v * sgn * r * camDir[3]
                 ]).slice(1, 3);
             };
         },
 
+        // Replace our 2D representation with a new one that's consistent with
+        // the view's current projection type
+        /**
+         *
+         * @returns {Array} 2D coordinates of the projected 3rd point that is on the ellipse.
+         */
         innerVertexFn: function () {
             var that = this;
 
@@ -343,6 +388,7 @@ JXG.extend(
                     distOffAxis = Mat.hypot(p[0], p[1]),
                     cam = view.boxToCam,
                     r = that.Radius(),
+                    c, bs,
                     angleOffAxis = Math.atan(-distOffAxis / p[2]),
                     steepness = Math.acos(r / Mat.norm(p)),
                     lean = angleOffAxis + steepness,
@@ -350,6 +396,22 @@ JXG.extend(
                     sin_lean = Math.sin(lean),
                     inward;
 
+                // Do parallel projection
+                if (that.view.projectionType !== 'central') {
+                    bs = view.bbox3D[0][1] - view.bbox3D[0][0];
+                    r *= view.size[0] / bs;
+
+                    c = view.project3DTo2D([
+                            that.center.X(),
+                            that.center.Y(),
+                            that.center.Z()
+                        ]);
+                    c[1] += r;
+
+                    return c;
+                }
+
+                // Do central projection
                 if (distOffAxis > 1e-8) {
                     // if the center of the sphere isn't too close to the camera
                     // axis, find the direction in plane of the screen that
@@ -374,7 +436,15 @@ JXG.extend(
             };
         },
 
-        buildCentralProjection: function (attr) {
+        /**
+         * Create 2D helper points and an ellipse to visualize the `sphere3d`.
+         * Handles central and parallel projection simultaneously.
+         *
+         * This is done only once at creation time.
+         *
+         * @param {object} attr Attributes for the sphere objects
+         */
+        buildProjection: function (attr) {
             var view = this.view,
                 auxStyle = { visible: false, withLabel: false },
                 frontFocus = view.create('point', this.focusFn(-1), auxStyle),
@@ -383,53 +453,6 @@ JXG.extend(
 
             this.aux2D = [frontFocus, backFocus, innerVertex];
             this.element2D = view.create('ellipse', this.aux2D, attr === undefined ? this.visProp : attr);
-        },
-
-        buildParallelProjection: function (attr) {
-            // The parallel projection of a sphere is a circle
-            var that = this,
-                // center2d = function () {
-                //     var c3d = [1, that.center.X(), that.center.Y(), that.center.Z()];
-                //     return that.view.project3DTo2D(c3d);
-                // },
-                radius2d = function () {
-                    var boxSize = that.view.bbox3D[0][1] - that.view.bbox3D[0][0];
-                    return that.Radius() * that.view.size[0] / boxSize;
-                };
-
-            this.aux2D = [];
-            this.element2D = this.view.create(
-                'circle',
-                // [center2d, radius2d],
-                [that.center.element2D, radius2d],
-                attr === undefined ? this.visProp : attr
-            );
-        },
-
-        // replace our 2D representation with a new one that's consistent with
-        // the view's current projection type
-        rebuildProjection: function (attr) {
-            var i;
-
-            // remove the old 2D representation from the scene tree
-            if (this.element2D) {
-                this.view.board.removeObject(this.element2D);
-                for (i in this.aux2D) {
-                    if (this.aux2D.hasOwnProperty(i)) {
-                        this.view.board.removeObject(this.aux2D[i]);
-                    }
-                }
-            }
-
-            // build a new 2D representation. the representation is stored in
-            // `this.element2D`, and any auxiliary elements are stored in
-            // `this.aux2D`
-            this.projectionType = this.view.projectionType;
-            if (this.projectionType === 'central') {
-                this.buildCentralProjection(attr);
-            } else {
-                this.buildParallelProjection(attr);
-            }
 
             // attach the new 2D representation to the scene tree
             this.addChild(this.element2D);
@@ -723,7 +746,7 @@ JXG.createSphere3D = function (board, parents, attributes) {
     // to the correct initial state
     // Here, element2D is created.
     attr = el.setAttr2D(attr);
-    el.rebuildProjection(attr);
+    el.buildProjection(attr);
 
     el.element2D.prepareUpdate().update();
     if (!board.isSuspendedUpdate) {

package/distrib/docs/3d_view3d.js.html

@@ -1124,7 +1124,7 @@ JXG.extend(
     },
 
     removeObject: function (object, saveMethod) {
-        var i, el, le, o, fst, face;
+        var i, el, le, o, fst, face, gone, list;
 
         // this.board.removeObject(object, saveMethod);
         if (Type.isArray(object)) {
@@ -1136,8 +1136,8 @@ JXG.extend(
 
         object = this.select(object);
 
-        // // If the object which is about to be removed unknown or a string, do nothing.
-        // // it is a string if a string was given and could not be resolved to an element.
+        // If the object which is about to be removed unknown or a string, do nothing.
+        // it is a string if a string was given and could not be resolved to an element.
         if (!Type.exists(object) || Type.isString(object)) {
             return this;
         }
@@ -1146,38 +1146,46 @@ JXG.extend(
             // Remove all children.
             for (el in object.childElements) {
                 if (object.childElements.hasOwnProperty(el)) {
-                    this.removeObject(object.childElements[el]);
+                    o = object.childElements[el];
+                    if (!(object.is3D && object.element2D === o)) {
+                        this.removeObject(o);
+                    }
                 }
             }
             if (object.type === Const.OBJECT_TYPE_POLYHEDRON3D) {
                 // Special treatment for polyhedron3d.
                 // With this we can avoid the time consuming addChild() calls.
+                // Mark faces and their 2D elements, then compact objectsList once.
+                // Splicing face by face with stale _pos removed unrelated elements.
+                gone = {};
                 le = object.faces.length;
-                if (le > 0) {
-                    fst = object.faces[0]._pos;
-                    fst = (object.faces[0].element2D._pos < fst) ? object.faces[0].element2D._pos : fst;
-                }
                 for (i = 0; i < le; i++) {
                     face = object.faces[i];
                     delete this.objects[face.id];
 
-                    // this.board.removeObject(face.element2D, saveMethod);
                     delete this.board.objects[face.element2D.id];
                     delete this.board.elementsByName[face.element2D.name];
                     face.element2D.remove();
-                    this.board.objectsList.splice(face.element2D._pos, 1);
+                    gone[face.element2D.id] = true;
+                    face.element2D._pos = -1;
 
                     delete this.board.objects[face.id];
                     delete this.board.elementsByName[face.name];
                     face.remove();
-                    this.board.objectsList.splice(face._pos, 1);
+                    gone[face.id] = true;
+                    face._pos = -1;
                 }
-                le = this.board.objectsList.length;
-                // Reindex the positions
-                for (i = fst; i < this.board.objectsList.length; i++) {
-                    o = this.board.objectsList[i];
-                    if (o._pos > -1) { o._pos = i; }
+                list = this.board.objectsList;
+                fst = 0;
+                for (i = 0; i < list.length; i++) {
+                    o = list[i];
+                    if (!gone.hasOwnProperty(o.id)) {
+                        o._pos = fst;
+                        list[fst] = o;
+                        fst++;
+                    }
                 }
+                list.length = fst;
                 object.faces = [];
             }
 

package/distrib/docs/Angle.html

@@ -1568,7 +1568,7 @@ one.</p></dd>
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1773">line 1773</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1776">line 1776</a>
       </dd>
     
 
@@ -1638,7 +1638,7 @@ Alias for Sector#radiuspoint.</p></dd>
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1419">line 1419</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1422">line 1422</a>
       </dd>
     
 
@@ -1707,7 +1707,7 @@ Alias for Sector#radiuspoint.</p></dd>
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1429">line 1429</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1432">line 1432</a>
       </dd>
     
 
@@ -2013,7 +2013,7 @@ console.log(ang.L());
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1834">line 1834</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1837">line 1837</a>
       </dd>
     
 
@@ -2135,7 +2135,7 @@ console.log(ang.L());
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1641">line 1641</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1644">line 1644</a>
       </dd>
     
 
@@ -2407,7 +2407,7 @@ board.update();
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1485">line 1485</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1488">line 1488</a>
       </dd>
     
 
@@ -2551,7 +2551,7 @@ board.update();
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1191">line 1191</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1194">line 1194</a>
       </dd>
     
 

package/distrib/docs/CircumcircleSector.html

@@ -364,7 +364,7 @@ var p1 = board.create('point', [1.5, 5.0]),
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1041">line 1041</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line1044">line 1044</a>
       </dd>
     
 
@@ -514,7 +514,7 @@ var p1 = board.create('point', [1.5, 5.0]),
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line973">line 973</a>
+          <a href="element_sector.js.html">element/sector.js</a>, <a href="element_sector.js.html#line976">line 976</a>
       </dd>
     
 

package/distrib/docs/Conic.html

@@ -1514,7 +1514,7 @@ points or coordinate pairs.</p></dd>
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_conic.js.html">element/conic.js</a>, <a href="element_conic.js.html#line823">line 823</a>
+          <a href="element_conic.js.html">element/conic.js</a>, <a href="element_conic.js.html#line857">line 857</a>
       </dd>
     
 

package/distrib/docs/Ellipse.html

@@ -433,7 +433,7 @@ var ell = board.create('ellipse', [
 <div class="description usertext">
     <p>Parent elements can be two elements either of type <a href="JXG.Point.html">JXG.Point</a> or array of
 numbers describing the coordinates of a point.
-The third parameter is a number/function which defines the length of the major axis</p>
+The third parameter is a number/function which defines the length of the major axis.</p>
 </div>
 
 
@@ -664,6 +664,28 @@ The third parameter is a number/function which defines the length of the major a
 
 
 
+    <h5 class="h5-examples">Example</h5>
+    
+    
+
+    <pre class="prettyprint"><code>var A = board.create('point', [1,0]);
+var B = board.create('point', [-1,0]);
+var el = board.create('ellipse',[A, B, 4]);
+
+</code></pre><div id="JXG7898d447-94dc-4dce-9ad3-60e3387be9f3" class="jxgbox" style="width: 300px; height: 300px;"></div>
+<script type="text/javascript">
+    (function() {
+        var board = JXG.JSXGraph.initBoard('JXG7898d447-94dc-4dce-9ad3-60e3387be9f3',
+            {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+    var A = board.create('point', [1,0]);
+    var B = board.create('point', [-1,0]);
+    var el = board.create('ellipse',[A,B, 4]);
+    })();
+
+</script>
+
+    
+
 
 
 

package/distrib/docs/Hyperbola.html

@@ -632,6 +632,29 @@ The third parameter is a number/function which defines the length of the major a
 
 
 
+    <h5 class="h5-examples">Example</h5>
+    
+    
+
+    <pre class="prettyprint"><code>var A = board.create('point', [1,0]);
+var B = board.create('point', [-1,0]);
+var el = board.create('hyperbola',[A, B, 1]);
+
+</code></pre><div id="JXGa4c0068b-41bc-4be4-b485-d0d0c7f2e10b" class="jxgbox" style="width: 300px; height: 300px;"></div>
+<script type="text/javascript">
+    (function() {
+        var board = JXG.JSXGraph.initBoard('JXGa4c0068b-41bc-4be4-b485-d0d0c7f2e10b',
+            {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+    var A = board.create('point', [1,0]);
+    var B = board.create('point', [-1,0]);
+    var el = board.create('hyperbola',[A,B, 1]);
+
+    })();
+
+</script>
+
+    
+
 
 
 
@@ -1271,7 +1294,7 @@ The third parameter is a number/function which defines the length of the major a
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="element_conic.js.html">element/conic.js</a>, <a href="element_conic.js.html#line349">line 349</a>
+          <a href="element_conic.js.html">element/conic.js</a>, <a href="element_conic.js.html#line366">line 366</a>
       </dd>
     
 

package/distrib/docs/JXG.Board.infobox.html

@@ -554,7 +554,7 @@ var p = board.create('point', [0.1, 0.1], {});
     
     <dt class="tag-source">Source</dt>
       <dd class="tag-source">
-          <a href="base_board.js.html">base/board.js</a>, <a href="base_board.js.html#line4654">line 4654</a>
+          <a href="base_board.js.html">base/board.js</a>, <a href="base_board.js.html#line4693">line 4693</a>
       </dd>