jsxgraph 1.4.3 → 1.4.4

package/distrib/jsxgraphsrc.js

@@ -842,7 +842,7 @@ define('base/constants',['jxg'], function (JXG) {
 
     var major = 1,
         minor = 4,
-        patch = 3,
+        patch = 4,
         add = '', //'dev'
         version = major + '.' + minor + '.' + patch + (add ? '-' + add : ''),
         constants;
@@ -14737,6 +14737,30 @@ define('math/geometry',[
                     return that.meetCurveLine(el1, el2, i, el1.board, alwaysintersect);
                 };
 
+            } else if (el1.type === Const.OBJECT_TYPE_POLYGON || el2.type === Const.OBJECT_TYPE_POLYGON) {
+                // polygon - other
+                // Uses the Greiner-Hormann clipping algorithm
+                // Not implemented: polygon - point
+
+                if (el1.elementClass === Const.OBJECT_CLASS_LINE) {
+                    // line - path
+                    /** @ignore */
+                    func = function () {
+                        return that.meetPolygonLine(el2, el1, i, el1.board, alwaysintersect);
+                    };
+                } else if (el2.elementClass === Const.OBJECT_CLASS_LINE) {
+                    // path - line
+                    func = function () {
+                        return that.meetPolygonLine(el1, el2, i, el1.board, alwaysintersect);
+                    };
+                } else {
+                    // path - path
+                    /** @ignore */
+                    func = function () {
+                        return that.meetPathPath(el1, el2, i, el1.board);
+                    };
+                }
+
             } else if (el1.elementClass === Const.OBJECT_CLASS_LINE && el2.elementClass === Const.OBJECT_CLASS_LINE) {
                 // line - line, lines may also be segments.
                 /** @ignore */
@@ -15152,6 +15176,8 @@ define('math/geometry',[
          * @param {JXG.Line} li Line
          * @param {Number} nr Will return the nr-th intersection point.
          * @param {JXG.Board} board
+         * @param {Boolean} testSegment Test if intersection has to be inside of the segment or somewhere on the
+         * line defined by the segment
          * @returns {JXG.Coords} Coords object containing the intersection.
          */
         meetCurveLineContinuous: function (cu, li, nr, board, testSegment) {
@@ -15216,7 +15242,6 @@ define('math/geometry',[
             return (new Coords(Const.COORDS_BY_USER, [z, cu.X(t), cu.Y(t)], board));
         },
 
-
         /**
          * Intersection of line and curve, discrete case.
          * Segments are treated as lines.
@@ -15403,6 +15428,87 @@ define('math/geometry',[
             return [c, t, u];
         },
 
+        /**
+         * Find the n-th intersection point of two pathes, usually given by polygons. Uses parts of the
+         * Greiner-Hormann algorithm in JXG.Math.Clip.
+         *
+         * @param {JXG.Circle|JXG.Curve|JXG.Polygon} path1
+         * @param {JXG.Circle|JXG.Curve|JXG.Polygon} path2
+         * @param {Number} n
+         * @param {JXG.Board} board
+         *
+         * @returns {JXG.Coords} Intersection point. In case no intersection point is detected,
+         * the ideal point [0,0,0] is returned.
+         *
+         */
+        meetPathPath: function(path1, path2, nr, board) {
+            var S, C, len, intersections;
+
+            S = JXG.Math.Clip._getPath(path1, board);
+            len = S.length;
+            if (len > 0 && this.distance(S[0].coords.usrCoords, S[len - 1].coords.usrCoords, 3) < Mat.eps) {
+                S.pop();
+            }
+
+            C = JXG.Math.Clip._getPath(path2, board);
+            len = C.length;
+            if (len > 0 && this.distance(C[0].coords.usrCoords, C[len - 1].coords.usrCoords, 3) < Mat.eps * Mat.eps) {
+                C.pop();
+            }
+
+            // Handle cases where at least one of the paths is empty
+            if (nr < 0 || JXG.Math.Clip.isEmptyCase(S, C, 'intersection')) {
+                return (new Coords(Const.COORDS_BY_USER, [0, 0, 0], board));
+            }
+
+            JXG.Math.Clip.makeDoublyLinkedList(S);
+            JXG.Math.Clip.makeDoublyLinkedList(C);
+
+            intersections = JXG.Math.Clip.findIntersections(S, C, board)[0];
+            if (nr < intersections.length) {
+                return intersections[nr].coords;
+            }
+            return (new Coords(Const.COORDS_BY_USER, [0, 0, 0], board));
+        },
+
+        /**
+         * Find the n-th intersection point between a polygon and a line.
+         * @param {JXG.Polygon} path
+         * @param {JXG.Line} line
+         * @param {Number} nr
+         * @param {JXG.Board} board
+         * @param {Boolean} alwaysIntersect If false just the segment between the two defining points of the line are tested for intersection.
+         *
+         * @returns {JXG.Coords} Intersection point. In case no intersection point is detected,
+         * the ideal point [0,0,0] is returned.
+         */
+        meetPolygonLine: function(path, line, nr, board, alwaysIntersect) {
+            var i, res, border,
+                crds = [0,0,0],
+                len = path.borders.length,
+                intersections = [];
+
+            for (i = 0; i < len; i++) {
+                border = path.borders[i];
+                res = this.meetSegmentSegment(
+                    border.point1.coords.usrCoords,
+                    border.point2.coords.usrCoords,
+                    line.point1.coords.usrCoords,
+                    line.point2.coords.usrCoords);
+
+                if (
+                    (!alwaysIntersect || (res[2] >= 0 && res[2] < 1)) &&
+                    res[1] >= 0 && res[1] < 1) {
+                    intersections.push(res[0]);
+                }
+            }
+
+            if (nr >= 0 && nr < intersections.length) {
+                crds = intersections[nr];
+            }
+            return (new Coords(Const.COORDS_BY_USER, crds, board));
+        },
+
         /****************************************/
         /****   BEZIER CURVE ALGORITHMS      ****/
         /****************************************/
@@ -23228,7 +23334,6 @@ define('math/clip',[
 
             // Collect all points into clip array C
             C = this._getPath(clip, board);
-
             len = C.length;
             if (len > 0 && Geometry.distance(C[0].coords.usrCoords, C[len - 1].coords.usrCoords, 3) < Mat.eps * Mat.eps) {
                 C.pop();
@@ -44255,8 +44360,12 @@ define('base/board',[
          */
         getCoordsTopLeftCorner: function () {
             var cPos, doc, crect,
-                docElement = this.document.documentElement || this.document.body.parentNode,
-                docBody = this.document.body,
+                // In ownerDoc we need the "real" document object.
+                // The first version is used in the case of shadowDom,
+                // the second case in the "normal" case.
+                ownerDoc = this.document.ownerDocument || this.document, 
+                docElement = ownerDoc.documentElement || this.document.body.parentNode,
+                docBody = ownerDoc.body,
                 container = this.containerObj,
                 // viewport, content,
                 zoom, o;
@@ -46779,7 +46888,7 @@ define('base/board',[
             }
 
             // If div is invisible - do nothing
-            if (w <= 0 || h <= 0) {
+            if (w <= 0 || h <= 0 || Type.isNaN(w) || Type.isNaN(h)) {
                 return;
             }
 
@@ -48185,12 +48294,12 @@ define('base/board',[
             this.inUpdate = true;
 
             if (this.attr.minimizereflow === 'all' && this.containerObj && this.renderer.type !== 'vml') {
-                storeActiveEl = document.activeElement; // Store focus element
+                storeActiveEl = this.document.activeElement; // Store focus element
                 insert = this.renderer.removeToInsertLater(this.containerObj);
             }
 
             if (this.attr.minimizereflow === 'svg' && this.renderer.type === 'svg') {
-                storeActiveEl = document.activeElement;
+                storeActiveEl = this.document.activeElement;
                 insert = this.renderer.removeToInsertLater(this.renderer.svgRoot);
             }
 
@@ -48813,7 +48922,7 @@ define('base/board',[
                 o2 = o2.parentNode;
                 while (o2 !== o) {
                     this.cssTransMat = Mat.matMatMult(Env.getCSSTransformMatrix(o), this.cssTransMat);
-                    o2 = o2.parentNode;
+                    o2 = o2.parentNode || o2.host;
                 }
 
                 o = o.offsetParent;
@@ -49383,7 +49492,7 @@ define('base/board',[
 
             id = id || this.container;
             this._fullscreen_inner_id = id;
-            inner_node = document.getElementById(id);
+            inner_node = this.document.getElementById(id);
             wrap_id = 'fullscreenwrap_' + id;
 
             // Wrap a div around the JSXGraph div.
@@ -49429,16 +49538,16 @@ define('base/board',[
                 return;
             }
 
-            document.fullscreenElement = document.fullscreenElement ||
-                    document.webkitFullscreenElement ||
-                    document.mozFullscreenElement ||
-                    document.msFullscreenElement;
+            this.document.fullscreenElement = this.document.fullscreenElement ||
+                    this.document.webkitFullscreenElement ||
+                    this.document.mozFullscreenElement ||
+                    this.document.msFullscreenElement;
 
-            inner_node = document.getElementById(inner_id);
+            inner_node = this.document.getElementById(inner_id);
             // If full screen mode is started we have to remove CSS margin around the JSXGraph div.
             // Otherwise, the positioning of the fullscreen div will be false.
             // When leaving the fullscreen mode, the margin is put back in.
-            if (document.fullscreenElement) {
+            if (this.document.fullscreenElement) {
                 // Just entered fullscreen mode
 
                 // Get the data computed in board.toFullscreen()
@@ -49450,7 +49559,7 @@ define('base/board',[
                 // Further, the CSS margin has to be removed when in fullscreen mode,
                 // and must be restored later.
                 inner_node._cssFullscreenStore = {
-                    id: document.fullscreenElement.id,
+                    id: this.document.fullscreenElement.id,
                     isFullscreen: true,
                     margin: inner_node.style.margin,
                     width: inner_node.style.width,
@@ -49466,16 +49575,16 @@ define('base/board',[
                 // of the JSXGraph div.
                 Env.scaleJSXGraphDiv(document.fullscreenElement.id, inner_id, res.scale, res.vshift);
 
-                // Clear document.fullscreenElement, because Safari doesn't to it and
+                // Clear this.document.fullscreenElement, because Safari doesn't to it and
                 // when leaving full screen mode it is still set.
-                document.fullscreenElement = null;
+                this.document.fullscreenElement = null;
 
             } else if (Type.exists(inner_node._cssFullscreenStore)) {
                 // Just left the fullscreen mode
 
                 // Remove the CSS rules added in Env.scaleJSXGraphDiv
                 try {
-                    document.styleSheets[document.styleSheets.length - 1].deleteRule(0);
+                    this.document.styleSheets[this.document.styleSheets.length - 1].deleteRule(0);
                 } catch (err) {
                     console.log('JSXGraph: Could not remove CSS rules for full screen mode');
                 }
@@ -49483,7 +49592,6 @@ define('base/board',[
                 inner_node._cssFullscreenStore.isFullscreen = false;
                 inner_node.style.margin = inner_node._cssFullscreenStore.margin;
                 inner_node.style.width = inner_node._cssFullscreenStore.width;
-
             }
 
             this.updateCSSTransforms();
@@ -51393,10 +51501,11 @@ define('renderer/svg',[
          * 	setTimeout(function() { console.log('done'); }, 400);
          */
         dumpToCanvas: function (canvasId, w, h, ignoreTexts) {
-            var svg, tmpImg, cv, ctx;
+            var svg, tmpImg, cv, ctx,
+                doc = this.container.ownerDocument;
 
             // Prepare the canvas element
-            cv = document.getElementById(canvasId);
+            cv = doc.getElementById(canvasId);
 
             // Clear the canvas
             /* eslint-disable no-self-assign */
@@ -51532,7 +51641,8 @@ define('renderer/svg',[
             } else {
                 // Debug: use canvas element 'jxgbox_canvas' from jsxdev/dump.html
                 id = 'jxgbox_canvas';
-                canvas = document.getElementById(id);
+                // canvas = document.getElementById(id);
+                canvas = doc.getElementById(id);
             }
 
             if (newImg) {
@@ -51552,7 +51662,8 @@ define('renderer/svg',[
             }
 
             // Hide navigation bar in board
-            zbar = document.getElementById(this.container.id + '_navigationbar');
+            // zbar = document.getElementById(this.container.id + '_navigationbar');
+            zbar = doc.getElementById(this.container.id + '_navigationbar');
             if (Type.exists(zbar)) {
                 zbarDisplay = zbar.style.display;
                 zbar.style.display = 'none';
@@ -55088,6 +55199,7 @@ define('jsxgraph',[
          */
         _setARIA: function(container, attr) {
             var doc = attr.document || document,
+                doc_glob,
                 node_jsx, newNode, parent,
                 id_label, id_description;
 
@@ -55096,18 +55208,19 @@ define('jsxgraph',[
             }
 
             node_jsx = doc.getElementById(container);
+            doc_glob = node_jsx.ownerDocument;   // This is the window.document element, needed below.
             parent = node_jsx.parentNode;
 
             id_label = container + '_ARIAlabel';
             id_description = container + '_ARIAdescription';
 
-            newNode = doc.createElement('div');
+            newNode = doc_glob.createElement('div');
             newNode.innerHTML = attr.title;
             newNode.setAttribute('id', id_label);
             newNode.style.display = 'none';
             parent.insertBefore(newNode, node_jsx);
 
-            newNode = doc.createElement('div');
+            newNode = doc_glob.createElement('div');
             newNode.innerHTML = attr.description;
             newNode.setAttribute('id', id_description);
             newNode.style.display = 'none';
@@ -55133,12 +55246,12 @@ define('jsxgraph',[
             }
 
             id = board.containerObj.getAttribute('aria-labelledby');
-            node = document.getElementById(id);
+            node = doc.getElementById(id);
             if (node && node.parentNode) {
                 node.parentNode.removeChild(node);
             }
             id = board.containerObj.getAttribute('aria-describedby');
-            node = document.getElementById(id);
+            node = doc.getElementById(id);
             if (node && node.parentNode) {
                 node.parentNode.removeChild(node);
             }
@@ -68837,9 +68950,6 @@ define('element/composition',[
             b.addChild(t);
         }
 
-
-
-
         t.elType = 'midpoint';
         t.setParents([a.id, b.id]);
 
@@ -69049,14 +69159,21 @@ define('element/composition',[
     };
 
     /**
-     * @class A parallel is a line through a given point with the same slope as a given line.
+     * @class A parallel is a line through a given point with the same slope as a given line or
+     * the line through two given point.
+     * <p>
+     * If original line is given as a JSXGraph line object, the resulting parallel line will be defined by the given point and an
+     * infinitely far away point (an ideal point). That means, the line can not be shortened to a segment.
+     * <p>
+     * If the original line is given as two points, the resulting parallel line can be shortened to a a segment.
      * @pseudo
      * @name Parallel
      * @augments Line
      * @constructor
      * @type JXG.Line
      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
-     * @param {JXG.Line_JXG.Point} l,p The constructed line contains p and has the same slope as l.
+     * @param {JXG.Line_JXG.Point} l,p The constructed line contains p and has the same slope as l. Alternative parameters are p1, p2, p: The
+     * constructed line contains p and has the same slope as the line through p1 and p2.
      * @example
      * // Create a parallel
      * var p1 = board.create('point', [0.0, 2.0]);
@@ -69074,22 +69191,47 @@ define('element/composition',[
      *   var plex1_p3 = plex1_board.create('point', [3.0, 3.0]);
      *   var plex1_pl1 = plex1_board.create('parallel', [plex1_l1, plex1_p3]);
      * </script><pre>
+     * @example
+     * var p1, p2, p3, l1, pl1;
+     *
+     * p1 = board.create('point', [0.0, 2.0]);
+     * p2 = board.create('point', [2.0, 1.0]);
+     * l1 = board.create('line', [p1, p2]);
+     *
+     * p3 = board.create('point', [1.0, 3.0]);
+     * pl1 = board.create('parallel', [p1, p2, p3], {straightFirst: false, straightLast: false});
+     *
+     * </pre><div id="JXGd643305d-20c3-4a88-91f9-8d0c4448594f" class="jxgbox" style="width: 300px; height: 300px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXGd643305d-20c3-4a88-91f9-8d0c4448594f',
+     *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+     *     var p1, p2, p3, l1, pl1;
+     *
+     *     p1 = board.create('point', [0.0, 2.0]);
+     *     p2 = board.create('point', [2.0, 1.0]);
+     *     l1 = board.create('line', [p1, p2]);
+     *
+     *     p3 = board.create('point', [1.0, 3.0]);
+     *     pl1 = board.create('parallel', [p1, p2, p3], {straightFirst: false, straightLast: false});
+     *
+     *     })();
+     *
+     * </script><pre>
+     *
      */
     JXG.createParallel = function (board, parents, attributes) {
-        var p, pp, pl, li, i, attr;
+        var p, pp, pl, li, i, attr, ty = 1;
 
         for (i = 0; i < parents.length; ++i) {
             parents[i] = board.select(parents[i]);
         }
         p = null;
         if (parents.length === 3) {
+            // Line / segment through point parents[2] which is parallel to line through parents[0] and parents[1]
             parents = Type.providePoints(board, parents, attributes, 'point');
-            // line through point parents[2] which is parallel to line through parents[0] and parents[1]
             p = parents[2];
-            /** @ignore */
-            li = function () {
-                return Mat.crossProduct(parents[0].coords.usrCoords, parents[1].coords.usrCoords);
-            };
+            ty = 0;
         } else if (Type.isPointType(board, parents[0])) {
             // Parallel to line parents[1] through point parents[0]
             p = Type.providePoints(board, [parents[0]], attributes, 'point')[0];
@@ -69111,11 +69253,19 @@ define('element/composition',[
         }
 
         attr = Type.copyAttributes(attributes, board.options, 'parallel', 'point');
-        pp = board.create('point', [
-            function () {
-                return Mat.crossProduct([1, 0, 0], li());
-            }
-        ], attr);
+        if (ty === 1) {
+            // Line is given by line element. The parallel line is
+            // constructed as line through an ideal point.
+            pp = board.create('point', [
+                function () {
+                    return Mat.crossProduct([1, 0, 0], li());
+                }
+            ], attr);
+        } else {
+            // Line is given by two points. The parallel line is
+            // constructed as line through two finite point.
+            pp = board.create('parallelpoint', parents, attr);
+        }
         pp.isDraggable = true;
 
         attr = Type.copyAttributes(attributes, board.options, 'parallel');
@@ -69149,31 +69299,33 @@ define('element/composition',[
     };
 
     /**
-     * @class An arrow parallel is a parallel segment with an arrow attached.
+     * @class An arrow parallel is a segment with an arrow attached which is parallel through a given segment, given by its defining two points,
+     * through a given point.
+     * <p>
      * @pseudo
      * @constructor
      * @name Arrowparallel
      * @type Parallel
      * @augments Parallel
      * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
-     * @param {JXG.Line_JXG.Point} l,p The constructed arrow contains p and has the same slope as l.
+     * @param JXG.Point_JXG.Point_JXG.Point} p1, p2,p3 The constructed arrow contains p3 and has the same slope as the line through p1 and p2.
      * @example
      * // Create a parallel
      * var p1 = board.create('point', [0.0, 2.0]);
      * var p2 = board.create('point', [2.0, 1.0]);
-     * var l1 = board.create('line', [p1, p2]);
+     * var l1 = board.create('segment', [p1, p2]);
      *
      * var p3 = board.create('point', [3.0, 3.0]);
-     * var pl1 = board.create('arrowparallel', [l1, p3]);
+     * var pl1 = board.create('arrowparallel', [p1, p2, p3]);
      * </pre><div class="jxgbox" id="JXGeeacdf99-036f-4e83-aeb6-f7388423e369" style="width: 400px; height: 400px;"></div>
      * <script type="text/javascript">
      * (function () {
      *   var plex1_board = JXG.JSXGraph.initBoard('JXGeeacdf99-036f-4e83-aeb6-f7388423e369', {boundingbox: [-1, 9, 9, -1], axis: true, showcopyright: false, shownavigation: false});
      *   var plex1_p1 = plex1_board.create('point', [0.0, 2.0]);
      *   var plex1_p2 = plex1_board.create('point', [2.0, 1.0]);
-     *   var plex1_l1 = plex1_board.create('line', [plex1_p1, plex1_p2]);
+     *   var plex1_l1 = plex1_board.create('segment', [plex1_p1, plex1_p2]);
      *   var plex1_p3 = plex1_board.create('point', [3.0, 3.0]);
-     *   var plex1_pl1 = plex1_board.create('arrowparallel', [plex1_l1, plex1_p3]);
+     *   var plex1_pl1 = plex1_board.create('arrowparallel', [plex1_p1, plex1_p2, plex1_p3]);
      * })();
      * </script><pre>
      */
@@ -80066,6 +80218,272 @@ define('element/button',[
     };
 });
 
+/*global JXG:true, define: true*/
+
+define('options3d',[
+    'jxg', 'options'
+], function (JXG, Options) {
+
+    "use strict";
+
+    JXG.extend(Options, {
+
+        infobox: {
+            strokeColor: 'black'
+        },
+
+        axes3d: {
+            /**#@+
+             * @visprop
+             */
+
+            /**
+             * Position of the main axes in a View3D element. Possible values are
+             * 'center' and 'border'.
+             *
+             * @type String
+             * @name View3D#axesPosition
+             * @default 'center'
+             */
+            axesPosition: 'center',  // Possible values: 'center', otherwise: border
+
+            // Main axes
+
+            /**
+             * Attributes of the 3D x-axis.
+             *
+             * @type Line3D
+             * @name View3D#xAxis
+             */
+            xAxis: { visible: true, point2: {name: 'x'}},
+
+            /**
+             * Attributes of the 3D y-axis.
+             *
+             * @type Line3D
+             * @name View3D#yAxis
+             */
+            yAxis: { visible: true, point2: {name: 'y'}},
+
+            /**
+             * Attributes of the 3D z-axis.
+             *
+             * @type Line3D
+             * @name View3D#zAxis
+             */
+            zAxis: { visible: true, point2: {name: 'z'}},
+
+            // Planes
+            /**
+             * Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#xPlaneRear
+             */
+            xPlaneRear: { visible: true, layer: 0, mesh3d: { layer: 1 } },
+            /**
+             * Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#yPlaneRear
+             */
+            yPlaneRear: { visible: true, layer: 0, mesh3d: { layer: 1 } },
+            /**
+             * Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#zPlaneRear
+             */
+            zPlaneRear: { visible: true, layer: 0, mesh3d: { layer: 1 } },
+
+            /**
+             * Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#xPlaneFront
+             */
+            xPlaneFront: { visible: false, layer: 0, mesh3d: { layer: 1 } },
+            /**
+             * Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#yPlaneFront
+             */
+            yPlaneFront: { visible: false, layer: 0, mesh3d: { layer: 1 } },
+            /**
+             * Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#zPlaneFront
+             */
+            zPlaneFront: { visible: false, layer: 0, mesh3d: { layer: 1 } },
+
+            // Axes on the planes
+            /**
+             * Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#xPlaneRearYAxis
+             */
+            xPlaneRearYAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#xPlaneRearZAxis
+             */
+            xPlaneRearZAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#xPlaneFrontYAxis
+             */
+            xPlaneFrontYAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#xPlaneFrontZAxis
+             */
+            xPlaneFrontZAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+
+            /**
+             * Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#yPlaneRearXAxis
+             */
+            yPlaneRearXAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#yPlaneRearZAxis
+             */
+            yPlaneRearZAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#yPlaneFrontXAxis
+             */
+            yPlaneFrontXAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#yPlaneFrontZAxis
+             */
+            yPlaneFrontZAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+
+            /**
+             * Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#zPlaneRearXAxis
+             */
+            zPlaneRearXAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube.
+             * @type Plane3D
+             * @name View3D#zPlaneRearYAxis
+             */
+            zPlaneRearYAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#zPlaneFrontXAxis
+             */
+            zPlaneFrontXAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1},
+            /**
+             * Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube.
+             * @type Plane3D
+             * @name View3D#zPlaneFrontYAxis
+             */
+            zPlaneFrontYAxis: {visible: 'inherit', strokeColor: '#888888', strokeWidth: 1}
+
+            /**#@-*/
+        },
+
+        axis3d: {
+            highlight: false,
+            strokecolor: 'black',
+            strokeWidth: 1,
+            tabindex: null,
+
+            point1: { visible: false, name: '' },
+            point2: { visible: false, name: '', label: { visible: true } }
+        },
+
+        mesh3d: {
+            strokeWidth: 1,
+            strokeColor: '#9a9a9a',
+            strokeOpacity: 0.6,
+            highlight: false,
+            fillColor: '#9a9a9a',
+            fillOpacity: 0.1,
+            tabindex: null,
+
+            visible: 'inherit'
+        },
+
+        line3d: {
+            strokeWidth: 1,
+            strokeColor: 'black',
+            fixed: true,
+            tabindex: null,
+
+            gradient: 'linear',
+            gradientSecondColor: '#ffffff',
+
+            point1: {visible: false, name: ''},
+            point2: {visible: false, name: ''}
+        },
+
+        plane3d: {
+            strokeWidth: 0,
+            strokeColor: 'black',
+            strokeOpacity: 1,
+            highlight: false,
+            tabindex: null,
+
+            gradient: 'linear',
+            gradientSecondColor: '#ffffff',
+            gradientAngle: Math.PI,
+            fillColor: '#a7a7a7',
+            fillOpacity: 0.6
+        },
+
+        point3d: {
+            strokeWidth: 0,
+            gradient: 'radial',
+            gradientSecondColor: '#555555',
+            fillColor: 'yellow',
+            highlightStrokeColor: '#555555'
+        },
+
+        surface3d: {
+            /**#@+
+             * @visprop
+             */
+
+            highlight: false,
+            tabindex: -1,
+            strokeWidth: 1,
+
+            /**
+             * Number of intervals the mesh is divided into in direction of parameter u.
+             * @type Number
+             * @name Surface3D#stepsU
+             */
+            stepsU: 30,
+
+            /**
+             * Number of intervals the mesh is divided into in direction of parameter v.
+             * @type Number
+             * @name Surface3D#stepsV
+             */
+             stepsV: 30
+
+            /**#@-*/
+        },
+
+        view3d: {
+            needsRegularUpdate: true
+        }
+
+    });
+
+    return JXG.Options;
+});
+
+
 /*
     Copyright 2008-2022
         Matthias Ehmann,
@@ -80470,11 +80888,81 @@ define('3d/view3d',['jxg', 'options', 'base/constants', 'utils/type', 'math/math
     });
 
     /**
+     * @class This element creates a 3D view.
+     * @pseudo
+     * @description  A View3D element provides the container and the methods to create and display 3D elements.
+     * It is contained in a JSXGraph board.
+     * @name View3D
+     * @augments JXG.View3D
+     * @constructor
+     * @type Object
+     * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
+     * @param {Array_Array_Array} lower,dim,cube  Here, lower is an array of the form [x, y] and
+     * dim is an array of the form [w, h].
+     * The arrays [x, y] and [w, h] define the 2D frame into which the 3D cube is
+     * (roughly) projected.
+     * cube is an array of the form [[x1, x2], [y1, y2], [z1, z2]]
+     * which determines the coordinate ranges of the 3D cube.
+     *
+     * @example
+     *  var bound = [-5, 5];
+     *  var view = board.create('view3d',
+     *      [[-6, -3],
+     *       [8, 8],
+     *       [bound, bound, bound]],
+     *      {
+     *          // Main axes
+     *          axesPosition: 'center',
+     *          xAxis: { strokeColor: 'blue', strokeWidth: 3},
+     *
+     *          // Planes
+     *          xPlaneRear: { fillColor: 'yellow',  mesh3d: {visible: false}},
+     *          yPlaneFront: { visible: true, fillColor: 'blue'},
+     *
+     *          // Axes on planes
+     *          xPlaneRearYAxis: {strokeColor: 'red'},
+     *          xPlaneRearZAxis: {strokeColor: 'red'},
+     *
+     *          yPlaneFrontXAxis: {strokeColor: 'blue'},
+     *          yPlaneFrontZAxis: {strokeColor: 'blue'},
+     *
+     *          zPlaneFrontXAxis: {visible: false},
+     *          zPlaneFrontYAxis: {visible: false}
+     *      });
+     *
+     * </pre><div id="JXGdd06d90e-be5d-4531-8f0b-65fc30b1a7c7" class="jxgbox" style="width: 500px; height: 500px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXGdd06d90e-be5d-4531-8f0b-65fc30b1a7c7',
+     *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
+     *                             var bound = [-5, 5];
+     *                             var view = board.create('view3d',
+     *                                 [[-6, -3], [8, 8],
+     *                                 [bound, bound, bound]],
+     *                                 {
+     *                                     // Main axes
+     *                                     axesPosition: 'center',
+     *                                     xAxis: { strokeColor: 'blue', strokeWidth: 3},
+     *
+     *                                     // Planes
+     *                                     xPlaneRear: { fillColor: 'yellow',  mesh3d: {visible: false}},
+     *                                     yPlaneFront: { visible: true, fillColor: 'blue'},
+     *
+     *                                     // Axes on planes
+     *                                     xPlaneRearYAxis: {strokeColor: 'red'},
+     *                                     xPlaneRearZAxis: {strokeColor: 'red'},
+     *
+     *                                     yPlaneFrontXAxis: {strokeColor: 'blue'},
+     *                                     yPlaneFrontZAxis: {strokeColor: 'blue'},
+     *
+     *                                     zPlaneFrontXAxis: {visible: false},
+     *                                     zPlaneFrontYAxis: {visible: false}
+     *                                 });
+     *
+     *     })();
+     *
+     * </script><pre>
      *
-     * @param {*} board
-     * @param {*} parents
-     * @param {*} attributes
-     * @returns
      */
     ThreeD.createView3D = function (board, parents, attributes) {
         var view, frame, attr,
@@ -80615,7 +81103,8 @@ define('3d/box3d',['jxg', 'utils/type', 'math/math', 'math/geometry', '3d/view3d
             rear = [0, 0, 0],   // x, y, z
             front = [0, 0, 0],  // x, y, z
             from, to,
-            vec1, vec2, range1, range2, na,
+            vec1, vec2, range1, range2,
+            na, na_parent,
             ticks_attr,
             axes = {};
 
@@ -80631,9 +81120,8 @@ define('3d/box3d',['jxg', 'utils/type', 'math/math', 'math/geometry', '3d/view3d
             }
         }
 
-        // Axes
+        // Main 3D axes
         attr = Type.copyAttributes(attributes, board.options, 'axes3d');
-
         pos = attr.axesposition;
         for (i = 0; i < directions.length; i++) {
             // Run through ['x', 'y', 'z']
@@ -80682,7 +81170,7 @@ define('3d/box3d',['jxg', 'utils/type', 'math/math', 'math/geometry', '3d/view3d
                 name: '', visible: false, withLabel: false
             });
 
-        // Planes
+        // Front and rear planes
         for (i = 0; i < directions.length; i++) {
             // Run through ['x', 'y', 'z']
             i1 = (i + 1) % 3;
@@ -80702,13 +81190,14 @@ define('3d/box3d',['jxg', 'utils/type', 'math/math', 'math/geometry', '3d/view3d
                 range2 = [rear[i2], front[i2]];
                 na = dir + 'Plane' + sides[j];
 
+                attr = Type.copyAttributes(attributes, board.options, 'axes3d', na);
                 axes[na] =
-                    view.create('plane3d', [from, vec1, vec2, range1, range2], attr[na.toLowerCase()]);
+                    view.create('plane3d', [from, vec1, vec2, range1, range2], attr);
                 axes[na].D3.elType = 'axisplane3d';
             }
         }
 
-        // Axes on planes
+        // Axes on front and rear planes
         for (i = 0; i < directions.length; i++) {
             // Run through ['x', 'y', 'z']
             dir = directions[i];
@@ -80717,6 +81206,7 @@ define('3d/box3d',['jxg', 'utils/type', 'math/math', 'math/geometry', '3d/view3d
                     i1 = (i + k) % 3;
                     dir1 = directions[i1];
                     na = dir + 'Plane' + sides[j] + dir1.toUpperCase() + 'Axis';
+                    na_parent = dir + 'Plane' + sides[j];
 
                     from = [0, 0, 0];
                     to = [0, 0, 0];
@@ -80725,11 +81215,13 @@ define('3d/box3d',['jxg', 'utils/type', 'math/math', 'math/geometry', '3d/view3d
                     from[i1] = rear[i1];
                     to[i1] = front[i1];
 
-                    axes[na] = view.create('axis3d', [from, to], attr[na.toLowerCase()]);
+                    attr = Type.copyAttributes(attributes, board.options, 'axes3d', na);
+                    axes[na] = view.create('axis3d', [from, to], attr);
+                    axes[na_parent].addChild(axes[na]);
+                    axes[na_parent].inherits.push(axes[na]);
                 }
             }
         }
-        // axes.Y2Dxy = view.create('axis3d', [[0, sy, sz], [0, ey, sz]], attr);
 
         return axes;
     };
@@ -81534,6 +82026,68 @@ define('3d/point3d',['jxg', 'base/constants', 'math/math', 'math/geometry', 'uti
 define('3d/surface3d',['jxg', 'utils/type', '3d/view3d'
 ], function (JXG, Type, ThreeD) {
     "use strict";
+
+
+    /**
+     * @class This element creates a 3D parametric surface.
+     * @pseudo
+     * @description A 3D parametric surface is defined by a function
+     *    <i>F: R<sup>2</sup> &rarr; R<sup>3</sup></i>.
+     *
+     * @name ParametricSurface3D
+     * @augments Curve
+     * @constructor
+     * @type Object
+     * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
+     * @param {Function_Function_Function_Array_Array} F<sub>X</sub>,F<sub>Y</sub>,F<sub>Z</sub>,rangeX,rangeY
+     * F<sub>X</sub>(u,v), F<sub>Y</sub>(u,v), F<sub>Z</sub>(u,v) are functions returning a number, rangeU is the array containing
+     * lower and upper bound for the range of parameter u, rangeV is the array containing
+     * lower and upper bound for the range of parameter v. rangeU and rangeV may also be functions returning an array of length two.
+     * @example
+     * var view = board.create('view3d',
+     * 		        [[-6, -3], [8, 8],
+     * 		        [[-5, 5], [-5, 5], [-5, 5]]]);
+     *
+     * // Sphere
+     * var c = view.create('parametricsurface3d', [
+     *     (u, v) => 2 * Math.sin(u) * Math.cos(v),
+     *     (u, v) => 2 * Math.sin(u) * Math.sin(v),
+     *     (u, v) => 2 * Math.cos(u),
+     *     [0, 2 * Math.PI],
+     *     [0, Math.PI]
+     * ], {
+     *     strokeColor: '#ff0000',
+     *     stepsU: 30,
+     *     stepsV: 30
+     * });
+     *
+     * </pre><div id="JXG52da0ecc-1ba9-4d41-850c-36e5120025a5" class="jxgbox" style="width: 500px; height: 500px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXG52da0ecc-1ba9-4d41-850c-36e5120025a5',
+     *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
+     *     var view = board.create('view3d',
+     *     		        [[-6, -3], [8, 8],
+     *     		        [[-5, 5], [-5, 5], [-5, 5]]]);
+     *
+     *     // Sphere
+     *     var c = view.create('parametricsurface3d', [
+     *         (u, v) => 2 * Math.sin(u) * Math.cos(v),
+     *         (u, v) => 2 * Math.sin(u) * Math.sin(v),
+     *         (u, v) => 2 * Math.cos(u),
+     *         [0, 2 * Math.PI],
+     *         [0, Math.PI]
+     *     ], {
+     *         strokeColor: '#ff0000',
+     *         stepsU: 20,
+     *         stepsV: 20
+     *     });
+     *
+     *     })();
+     *
+     * </script><pre>
+     *
+     */
     ThreeD.createParametricSurface = function (board, parents, attributes) {
         var view = parents[0],
             attr,
@@ -81557,9 +82111,11 @@ define('3d/surface3d',['jxg', 'utils/type', '3d/view3d'
         el.updateDataArray = function () {
             var steps_u = Type.evaluate(this.visProp.stepsu),
                 steps_v = Type.evaluate(this.visProp.stepsv),
+                r_u = Type.evaluate(this.D3.range_u), // Type.evaluate(range_u),
+                r_v = Type.evaluate(this.D3.range_v), // Type.evaluate(range_v),
                 res = view.getMesh(this.D3.X, this.D3.Y, this.D3.Z,
-                    this.D3.range_u.concat([steps_u]),
-                    this.D3.range_v.concat([steps_v]));
+                    r_u.concat([steps_u]),
+                    r_v.concat([steps_v]));
             this.dataX = res[0];
             this.dataY = res[1];
         };
@@ -81569,6 +82125,81 @@ define('3d/surface3d',['jxg', 'utils/type', '3d/view3d'
     };
     JXG.registerElement('parametricsurface3d', ThreeD.createParametricSurface);
 
+    /**
+     * @class This element creates a 3D function graph.
+     * @pseudo
+     * @description A 3D function graph is defined by a function
+     *    <i>F: R<sup>2</sup> &rarr; R</i>.
+     *
+     * @name Functiongraph3D
+     * @augments ParametricSurface3D
+     * @constructor
+     * @type Object
+     * @throws {Exception} If the element cannot be constructed with the given parent objects an exception is thrown.
+     * @param {Function_Array_Array} F,rangeX,rangeY  F(x,y) is a function returning a number, rangeX is the array containing
+     * lower and upper bound for the range of x, rangeY is the array containing
+     * lower and upper bound for the range of y.
+     * @example
+     * var box = [-5, 5];
+     * var view = board.create('view3d',
+     *     [
+     *         [-6, -3], [8, 8],
+     *         [box, box, box]
+     *     ],
+     *     {
+     *         xPlaneRear: {visible: false},
+     *         yPlaneRear: {visible: false},
+     *     });
+     *
+     * // Function F to be plotted
+     * var F = (x, y) => Math.sin(x * y / 4);
+     *
+     * // 3D surface
+     * var c = view.create('functiongraph3d', [
+     *     F,
+     *     box, // () => [-s.Value()*5, s.Value() * 5],
+     *     box, // () => [-s.Value()*5, s.Value() * 5],
+     * ], {
+     *     strokeWidth: 0.5,
+     *     stepsU: 70,
+     *     stepsV: 70
+     * });
+     *
+     * </pre><div id="JXG87646dd4-9fe5-4c21-8734-089abc612515" class="jxgbox" style="width: 500px; height: 500px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXG87646dd4-9fe5-4c21-8734-089abc612515',
+     *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
+     *     var box = [-5, 5];
+     *     var view = board.create('view3d',
+     *         [
+     *             [-6, -3], [8, 8],
+     *             [box, box, box]
+     *         ],
+     *         {
+     *             xPlaneRear: {visible: false},
+     *             yPlaneRear: {visible: false},
+     *         });
+     *
+     *     // Function F to be plotted
+     *     var F = (x, y) => Math.sin(x * y / 4);
+     *
+     *     // 3D surface
+     *     var c = view.create('functiongraph3d', [
+     *         F,
+     *         box, // () => [-s.Value()*5, s.Value() * 5],
+     *         box, // () => [-s.Value()*5, s.Value() * 5],
+     *     ], {
+     *         strokeWidth: 0.5,
+     *         stepsU: 70,
+     *         stepsV: 70
+     *     });
+     *
+     *     })();
+     *
+     * </script><pre>
+     *
+     */
     ThreeD.createFunctiongraph = function (board, parents, attributes) {
         var view = parents[0],
             X = function(u, v) { return u; },
@@ -81582,6 +82213,7 @@ define('3d/surface3d',['jxg', 'utils/type', '3d/view3d'
     JXG.registerElement('functiongraph3d', ThreeD.createFunctiongraph);
 
 });
+
 /*global define: true*/
 define('../build/core.deps.js',[
     'jxg',
@@ -81655,6 +82287,7 @@ define('../build/core.deps.js',[
     'element/input',
     'element/button',
     'base/foreignobject',
+    'options3d',
     '3d/box3d',
     '3d/curve3d',
     '3d/linspace3d',