jsxgraph 1.4.3 → 1.4.4

package/distrib/sketch.min.js

@@ -1,5 +1,5 @@
 /*
-    JSXGraph 1.4.3
+    JSXGraph 1.4.4
 
     Copyright 2008-2022
         Matthias Ehmann,

package/package.json

@@ -2,7 +2,7 @@
   "name": "jsxgraph",
   "description": "Interactive geometry, plotting, visualization",
   "homepage": "https://jsxgraph.org",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "main": "distrib/jsxgraphcore.js",
   "types": "distrib/index.d.ts",
   "maintainers": [

package/src/3d/box3d.js

@@ -48,7 +48,8 @@ define(['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 = {};
 
@@ -64,9 +65,8 @@ define(['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']
@@ -115,7 +115,7 @@ define(['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;
@@ -135,13 +135,14 @@ define(['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];
@@ -150,6 +151,7 @@ define(['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];
@@ -158,11 +160,13 @@ define(['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;
     };

package/src/3d/surface3d.js

@@ -31,6 +31,68 @@
 define(['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,
@@ -54,9 +116,11 @@ define(['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];
         };
@@ -66,6 +130,81 @@ define(['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; },
@@ -78,4 +217,4 @@ define(['jxg', 'utils/type', '3d/view3d'
     };
     JXG.registerElement('functiongraph3d', ThreeD.createFunctiongraph);
 
-});
+});

package/src/3d/view3d.js

@@ -363,11 +363,81 @@ define(['jxg', 'options', 'base/constants', 'utils/type', 'math/math', 'base/ele
     });
 
     /**
+     * @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,

package/src/base/board.js

@@ -816,8 +816,12 @@ define([
          */
         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;
@@ -3340,7 +3344,7 @@ define([
             }
 
             // If div is invisible - do nothing
-            if (w <= 0 || h <= 0) {
+            if (w <= 0 || h <= 0 || Type.isNaN(w) || Type.isNaN(h)) {
                 return;
             }
 
@@ -4746,12 +4750,12 @@ define([
             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);
             }
 
@@ -5374,7 +5378,7 @@ define([
                 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;
@@ -5944,7 +5948,7 @@ define([
 
             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.
@@ -5990,16 +5994,16 @@ define([
                 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()
@@ -6011,7 +6015,7 @@ define([
                 // 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,
@@ -6027,16 +6031,16 @@ define([
                 // 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');
                 }
@@ -6044,7 +6048,6 @@ define([
                 inner_node._cssFullscreenStore.isFullscreen = false;
                 inner_node.style.margin = inner_node._cssFullscreenStore.margin;
                 inner_node.style.width = inner_node._cssFullscreenStore.width;
-
             }
 
             this.updateCSSTransforms();

package/src/base/constants.js

@@ -42,7 +42,7 @@ define(['jxg'], function (JXG) {
 
     var major = 1,
         minor = 4,
-        patch = 3,
+        patch = 4,
         add = '', //'dev'
         version = major + '.' + minor + '.' + patch + (add ? '-' + add : ''),
         constants;

package/src/element/composition.js

@@ -592,9 +592,6 @@ define([
             b.addChild(t);
         }
 
-
-
-
         t.elType = 'midpoint';
         t.setParents([a.id, b.id]);
 
@@ -804,14 +801,21 @@ define([
     };
 
     /**
-     * @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]);
@@ -829,22 +833,47 @@ define([
      *   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];
@@ -866,11 +895,19 @@ define([
         }
 
         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');
@@ -904,31 +941,33 @@ define([
     };
 
     /**
-     * @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>
      */

package/src/jsxgraph.js

@@ -228,6 +228,7 @@ define([
          */
         _setARIA: function(container, attr) {
             var doc = attr.document || document,
+                doc_glob,
                 node_jsx, newNode, parent,
                 id_label, id_description;
 
@@ -236,18 +237,19 @@ define([
             }
 
             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';
@@ -273,12 +275,12 @@ define([
             }
 
             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);
             }