jsxgraph 1.14.0 → 1.14.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "jsxgraph",
   "description": "Interactive geometry, plotting, visualization",
   "homepage": "https://jsxgraph.org",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "exports": {
     "types": "./src/index.d.ts",
     "default": "./src/index.js"
@@ -65,20 +65,20 @@
     "eslint-plugin-prettier": "^5.5",
     "globals": "^15.4.0",
     "http-server": "^14.1.1",
-    "jasmine-core": "^3.10.1",
+    "jasmine-core": ">=7.0.2",
     "jsdoc": "^4.0.5",
     "jshint": "^0.5.9",
     "jslint": "^0.12.1",
-    "karma": "^6.4.3",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-detect-browsers": "^2.3.3",
-    "karma-jasmine": "^5.1.0",
+    "karma": ">=6.4.4",
+    "karma-chrome-launcher": ">=3.2.0",
+    "karma-detect-browsers": ">=2.3.3",
+    "karma-jasmine": ">=5.1.0",
     "npmignore": "^0.3.1",
-    "path-browserify": "^1.0.1",
-    "prettier": "^3.8.1",
+    "path-browserify": ">=1.0.1",
+    "prettier": ">=3.8.1",
     "terser-webpack-plugin": ">=5.6.1",
-    "webpack": ">=5.105.4",
-    "webpack-cli": ">=7.2.1"
+    "webpack": ">=5.111.1",
+    "webpack-cli": ">=7.2.3"
   },
   "engines": {
     "node": ">=20.19.0"
@@ -92,8 +92,6 @@
     "serve": "http-server -c-1",
     "test": "make test"
   },
-  "dependencies": {
-  },
   "allowScripts": {
     "esbuild@0.28.2": true
   }

package/src/3d/linspace3d.js

@@ -669,8 +669,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]);
 
@@ -2017,18 +2017,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/src/3d/point3d.js

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

package/src/3d/sphere3d.js

@@ -152,28 +152,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;
         },
 
@@ -221,34 +245,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;
 
@@ -258,6 +303,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,
@@ -265,6 +311,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
@@ -289,7 +351,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),
@@ -298,53 +368,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);
@@ -638,7 +661,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/src/3d/view3d.js

@@ -1039,7 +1039,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)) {
@@ -1051,8 +1051,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;
         }
@@ -1061,38 +1061,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/src/base/board.js

@@ -4418,6 +4418,9 @@ JXG.extend(
             var w = width,
                 h = height,
                 // bb,
+                bbox,
+                offX = 0,
+                offY = 0,
                 css,
                 width_adjustment, height_adjustment;
 
@@ -4454,7 +4457,38 @@ JXG.extend(
 
             // If bounding box is not yet initialized, do it now.
             if (isNaN(this.getBoundingBox()[0])) {
-                this.setBoundingBox(this.attr.boundingbox, this.keepaspectratio, 'keep');
+                // This is not enough
+                // this.setBoundingBox(this.attr.boundingbox, this.keepaspectratio, 'keep');
+                // Instead, we do the same as in JXG.JSXGraphinitBoard():
+                bbox = this.attr.boundingbox;
+                if (Type.exists(bbox) && this.keepaspectratio) {
+                    /*
+                     * If the boundingbox attribute is given and the ratio of height and width of the
+                     * sides defined by the bounding box and the ratio of the dimensions of the div tag
+                     * which contains the board do not coincide, then the smaller side is chosen.
+                     */
+                    this.unitX = w / (bbox[2] - bbox[0]);
+                    this.unitY = h / (bbox[1] - bbox[3]);
+
+                    if (Math.abs(this.unitX) < Math.abs(this.unitY)) {
+                        this.unitY = (Math.abs(this.unitX) * this.unitY) / Math.abs(this.unitY);
+                        // Add the additional units in equal portions above and below
+                        offY = (h / this.unitY - (bbox[1] - bbox[3])) * 0.5;
+                    } else {
+                        this.unitX = (Math.abs(this.unitY) * this.unitX) / Math.abs(this.unitX);
+                        // Add the additional units in equal portions left and right
+                        offX = (w / this.unitX - (bbox[2] - bbox[0])) * 0.5;
+                    }
+                } else {
+                    this.unitX = w / (bbox[2] - bbox[0]);
+                    this.unitY = h / (bbox[1] - bbox[3]);
+                }
+                this.origin.scrCoords = [1,
+                    -this.unitX * (bbox[0] - offX),
+                    this.unitY * (bbox[1] + offY)
+                ];
+                this.canvasWidth = w;
+                this.canvasHeight = h;
             }
 
             // Do nothing if the dimension did not change since being visible
@@ -4495,16 +4529,21 @@ JXG.extend(
             }
 
             this.resizeObserver = new ResizeObserver(function (entries) {
-                var bb;
+                // var bb;
+
+                // Take the last observed size
+                that._lastContentRect = entries[entries.length - 1].contentRect;
                 if (!that._isResizing) {
                     that._isResizing = true;
-                    bb = entries[0].contentRect;
+                    // bb = entries[0].contentRect;
                     window.setTimeout(function () {
+                        var bb = that._lastContentRect;
                         try {
                             that.updateContainerDims(bb.width, bb.height);
                         } catch (e) {
-                            JXG.debug(e);   // Used to log errors during board.update()
-                            that.stopResizeObserver();
+                            // JXG.debug(e);   // Used to log errors during board.update()
+                            console.error(e);
+                            // that.stopResizeObserver();
                         } finally {
                             that._isResizing = false;
                         }
@@ -5537,7 +5576,7 @@ JXG.extend(
          * @private
          */
         _removeObj: function (object, saveMethod) {
-            var el, o, i;
+            var el, i, pos;
 
             if (Type.isArray(object)) {
                 for (i = 0; i < object.length; i++) {
@@ -5555,6 +5594,16 @@ JXG.extend(
                 return this;
             }
 
+            // Already removed (e.g. reached again through a parent's childElements
+            // or View3D.removeObject). Removing it twice used to splice a live element.
+            if (object._pos === -1 && this.objects[object.id] !== object) {
+                return this;
+            }
+
+            if (object.is3D && Type.exists(object.view.objects[object.id])) {
+                JXG.warn("board.removeObject() of 3D object " + object.id + ". Use view3d.removeObject() instead.");
+            }
+
             try {
                 // remove all children.
                 for (el in object.childElements) {
@@ -5604,15 +5653,16 @@ JXG.extend(
                 }
 
                 // remove the object itself from our control structures
-                if (object._pos > -1) {
-                    this.objectsList.splice(object._pos, 1);
+                // Trust _pos only if it still points at the object, and reset it
+                // afterwards, so a stale index can never splice another element.
+                pos = this.objectsList[object._pos] === object ? object._pos : this.objectsList.indexOf(object);
+                if (pos > -1) {
+                    this.objectsList.splice(pos, 1);
                     // Quadratic complexity for reindexing the positions:
-                    for (i = object._pos; i < this.objectsList.length; i++) {
-                        o = this.objectsList[i];
-                        if (o._pos > -1) {
-                            o._pos--;
-                        }
+                    for (i = pos; i < this.objectsList.length; i++) {
+                        this.objectsList[i]._pos = i;
                     }
+                    object._pos = -1;
                 } else if (object.type !== Const.OBJECT_TYPE_TURTLE) {
                     JXG.debug(
                         'Board.removeObject: object ' + object.id + ' not found in list.'

package/src/base/composition.js

@@ -180,9 +180,9 @@ JXG.extend(
     /** @lends JXG.Composition.prototype */ {
         /**
          * Adds an element to the composition container.
-         * @param {String} what Descriptive name for the element, e.g. <em>startpoint</em> or <em>area</em>. This is used to
-         * access the element later on. There are some reserved names: <em>elements, add, remove, update, prepareUpdate,
-         * updateRenderer, highlight, noHighlight</em>, and all names that would form invalid object property names in
+         * @param {String} what Descriptive name for the element, e.g. `startpoint` or `area`. This is used to
+         * access the element later on. There are some reserved names: `elements`, `add`, `remove`, `update`, `prepareUpdate`,
+         * `updateRenderer`, `highlight`, `noHighlight`, and all names that would form invalid object property names in
          * JavaScript.
          * @param {JXG.GeometryElement|JXG.Composition} element A reference to the element that is to be added. This can be
          * another composition, too.

package/src/base/constants.js

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

package/src/base/element.js

@@ -2468,7 +2468,8 @@ JXG.extend(
             } else if (this.elementClass === Const.OBJECT_CLASS_CIRCLE) {
                 x = this.center.X();
                 y = this.center.Y();
-                bb = [x - this.radius, y + this.radius, x + this.radius, y - this.radius];
+                r = this.Radius(); // this.radius
+                bb = [x - r, y + r, x + r, y - r];
             } else if (this.elementClass === Const.OBJECT_CLASS_CURVE) {
                 le = this.points.length;
                 if (le === 0) {

package/src/base/text.js

@@ -1761,8 +1761,8 @@ JXG.createHTMLSlider = function (board, parents, attributes) {
     }
 
     // Backwards compatibility
-    attr.anchor = attr.parent || attr.anchor;
-    attr.fixed = attr.fixed || true;
+    attr.anchor = Type.def(attr.parent, attr.anchor);
+    attr.fixed = Type.def(attr.fixed, true);
 
     par = [
         parents[0][0],

package/src/element/conic.js

@@ -119,13 +119,30 @@ import Type from "../utils/type.js";
  * @jsxgraphsignature Ellipse
  * Parent elements can be two elements either of type {@link JXG.Point} 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
+ * The third parameter is a number/function which defines the length of the major axis.
  * @param {PointLike} point1
  * @param {PointLike} point2
  * @param {NumberLike} number
  * @param {Number} [start=0] parameter of the curve start, default: 0.
  * @param {Number} [end=2π] parameter for the curve end, default: 2π.
  *
+ * @example
+ * var A = board.create('point', [1,0]);
+ * var B = board.create('point', [-1,0]);
+ * var el = board.create('ellipse',[A, B, 4]);
+ *
+ * </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><pre>
+ *
  */
 JXG.createEllipse = function (board, parents, attributes) {
     var polarForm,
@@ -397,6 +414,23 @@ JXG.createEllipse = function (board, parents, attributes) {
  * @param {NumberLike} number
  * @param {Number} [start=-π] parameter of the curve start, default: -&pi;.
  * @param {Number} [end=π] parameter for the curve end, default: &pi;.
+ * @example
+ * var A = board.create('point', [1,0]);
+ * var B = board.create('point', [-1,0]);
+ * var el = board.create('hyperbola',[A, B, 1]);
+ *
+ * </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><pre>
  */
 JXG.createHyperbola = function (board, parents, attributes) {
     var polarForm,