jsxgraph 1.3.1 → 1.4.2

package/src/element/composition.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -153,7 +153,13 @@ define([
 
         t.update();
 
-        t.generatePolynomial = function () {
+        /**
+         * Used to generate a polynomial for the orthogonal projection
+         * @name Orthogonalprojection#generatePolynomial
+         * @returns {Array} An array containing the generated polynomial.
+         * @private
+         */
+         t.generatePolynomial = function () {
             /*
              *  Perpendicular takes point P and line L and creates point T and line M:
              *
@@ -353,7 +359,13 @@ define([
 
         t.update();
 
-        t.generatePolynomial = function () {
+        /**
+         * Used to generate a polynomial for the perpendicular point
+         * @name PerpendicularPoint#generatePolynomial
+         * @returns {Array} An array containing the generated polynomial.
+         * @private
+         */
+         t.generatePolynomial = function () {
             /*
              *  Perpendicular takes point P and line L and creates point T and line M:
              *
@@ -588,7 +600,13 @@ define([
 
         t.prepareUpdate().update();
 
-        t.generatePolynomial = function () {
+        /**
+         * Used to generate a polynomial for the midpoint.
+         * @name Midpoint#generatePolynomial
+         * @returns {Array} An array containing the generated polynomial.
+         * @private
+         */
+         t.generatePolynomial = function () {
             /*
              *  Midpoint takes two point A and B or line L (with points P and Q) and creates point T:
              *
@@ -2276,7 +2294,7 @@ define([
      * within the interval <tt>i</tt>.
      * @example
      * var c1 = board.create('functiongraph', [function (t) { return t*t*t; }]);
-     * var i1 = board.create('integral', [[-1.0, 4.0], c1]);
+     * var i1 = board.create('integral', [[-2.0, 2.0], c1]);
      * </pre><div class="jxgbox" id="JXGd45d7188-6624-4d6e-bebb-1efa2a305c8a" style="width: 400px; height: 400px;"></div>
      * <script type="text/javascript">
      *   var intex1_board = JXG.JSXGraph.initBoard('JXGd45d7188-6624-4d6e-bebb-1efa2a305c8a', {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false});
@@ -2627,7 +2645,10 @@ define([
         c.elType = 'grid';
         c.type = Const.OBJECT_TYPE_GRID;
 
-        c.updateDataArray = function () {
+        /**
+         * @ignore
+         */
+         c.updateDataArray = function () {
             var start, end, i, topLeft, bottomRight,
                 gridX = Type.evaluate(this.visProp.gridx),
                 gridY = Type.evaluate(this.visProp.gridy);

package/src/element/conic.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -69,7 +69,8 @@ define([
      * numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
      * @param {JXG.Point,array_JXG.Point,array_number,function} point1,point2,number 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
-     * Optional parameters four and five are numbers which define the curve length (e.g. start/end). Default values are -pi and pi.
+     * @param {Number} start (Optional) parameter of the curve start, default: 0.
+     * @param {Number} end (Optional) parameter for the curve end, default: 2π.
      * @example
      * // Create an Ellipse by three points
      * var A = board.create('point', [-1,4]);
@@ -78,12 +79,45 @@ define([
      * var el = board.create('ellipse',[A,B,C]);
      * </pre><div class="jxgbox" id="JXGa4d7fb6f-8708-4e45-87f2-2379ae2bd2c0" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     *   (function() {
      *   var glex1_board = JXG.JSXGraph.initBoard('JXGa4d7fb6f-8708-4e45-87f2-2379ae2bd2c0', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [-1,4]);
      *   var B = glex1_board.create('point', [-1,-4]);
      *   var C = glex1_board.create('point', [1,1]);
      *   var el = glex1_board.create('ellipse',[A,B,C]);
+     * })();
      * </script><pre>
+     *
+     * @example
+     * // Create an elliptical arc
+     * var p1 = board.create('point', [-1, 2]);
+     * var p2 = board.create('point', [ 1, 2]);
+     * var p3 = board.create('point', [0, 3]);
+     * 
+     * var ell = board.create('ellipse', [
+     *   p1, p2, p3, 0, Math.PI], {
+     *   lastArrow: {type: 7}
+     * });
+     * 
+     * </pre><div id="JXG950f7c07-27a4-4c67-9505-c73c22ce9345" class="jxgbox" style="width: 300px; height: 300px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXG950f7c07-27a4-4c67-9505-c73c22ce9345',
+     *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+     *     var p1 = board.create('point', [-1, 2]);
+     *     var p2 = board.create('point', [ 1, 2]);
+     *     var p3 = board.create('point', [0, 3]);
+     *     
+     *     var ell = board.create('ellipse', [
+     *       p1, p2, p3, 0, Math.PI], {
+     *       lastArrow: {type: 7}
+     *     });
+     * 
+     *     })();
+     * 
+     * </script><pre>
+     * 
+*
      */
     JXG.createEllipse = function (board, parents, attributes) {
         var polarForm, curve, M, C, majorAxis, i,
@@ -287,7 +321,8 @@ define([
      * numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
      * @param {JXG.Point,array_JXG.Point,array_number,function} point1,point2,number 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
-     * Optional parameters four and five are numbers which define the curve length (e.g. start/end). Default values are -pi and pi.
+     * @param {Number} start (Optional) parameter of the curve start, default: -&pi;.
+     * @param {Number} end (Optional) parameter for the curve end, default: &pi;.
      * @example
      * // Create an Hyperbola by three points
      * var A = board.create('point', [-1,4]);
@@ -296,11 +331,13 @@ define([
      * var el = board.create('hyperbola',[A,B,C]);
      * </pre><div class="jxgbox" id="JXGcf99049d-a3fe-407f-b936-27d76550f8c4" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     *   (function(){
      *   var glex1_board = JXG.JSXGraph.initBoard('JXGcf99049d-a3fe-407f-b936-27d76550f8c4', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [-1,4]);
      *   var B = glex1_board.create('point', [-1,-4]);
      *   var C = glex1_board.create('point', [1,1]);
      *   var el = glex1_board.create('hyperbola',[A,B,C]);
+     * })();
      * </script><pre>
      */
     JXG.createHyperbola = function (board, parents, attributes) {
@@ -482,12 +519,14 @@ define([
      * var el = board.create('parabola',[C,l]);
      * </pre><div class="jxgbox" id="JXG524d1aae-217d-44d4-ac58-a19c7ab1de36" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     * (function() {
      *   var glex1_board = JXG.JSXGraph.initBoard('JXG524d1aae-217d-44d4-ac58-a19c7ab1de36', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [-1,4]);
      *   var B = glex1_board.create('point', [-1,-4]);
      *   var l = glex1_board.create('line', [A,B]);
      *   var C = glex1_board.create('point', [1,1]);
      *   var el = glex1_board.create('parabola',[C,l]);
+     * })();
      * </script><pre>
      *
      * @example
@@ -506,7 +545,7 @@ define([
      *
      */
     JXG.createParabola = function (board, parents, attributes) {
-        var polarForm, curve, M, i,
+        var polarForm, curve, M,
             // focus
             F1 = parents[0],
             // directrix
@@ -535,7 +574,7 @@ define([
         }
 
         // Create line if given as array of two points.
-        if (Type.isArray(l) && l.length == 2) {
+        if (Type.isArray(l) && l.length === 2) {
             attr_line = Type.copyAttributes(attributes, board.options, 'conic', 'line');
             l = board.create('line', l, attr_line);
         }
@@ -684,6 +723,7 @@ define([
      *  var conic = board.create('conic',[A,B,C,D,E]);
      * </pre><div class="jxgbox" id="JXG2d79bd6a-db9b-423c-9cba-2497f0b06320" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
+     * (function(){
      *   var glex1_board = JXG.JSXGraph.initBoard('JXG2d79bd6a-db9b-423c-9cba-2497f0b06320', {boundingbox:[-6,6,6,-6], keepaspectratio:true, showcopyright: false, shownavigation: false});
      *   var A = glex1_board.create('point', [1,5]);
      *   var B = glex1_board.create('point', [1,2]);
@@ -691,6 +731,7 @@ define([
      *   var D = glex1_board.create('point', [0,0]);
      *   var E = glex1_board.create('point', [-1,5]);
      *   var conic = glex1_board.create('conic',[A,B,C,D,E]);
+     * })();
      * </script><pre>
      *
      * @example

package/src/element/input.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -171,6 +171,7 @@ define([
         t.Value = function () {
             return this._value;
         };
+
         /**
          * Sets value of the input element.
          * @name set
@@ -180,6 +181,36 @@ define([
          * @param {String} val
          * @returns {JXG.GeometryElement} Reference to the element.
          *
+         * @example
+         *         var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
+         *         var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
+         *         var b1 = board.create('button', [-3, -1, 'Change texts', function () {
+         *                 i1.setText('g(x)');
+         *                 i1.set('cos(x)');
+         *                 c1.setText('label 2');
+         *                 b1.setText('Texts are changed');
+         *             }],
+         *             {cssStyle: 'width:400px'});
+         *
+         * </pre><div id="JXG11cac8ff-2354-47e7-9da4-eb298e53de05" class="jxgbox" style="width: 300px; height: 300px;"></div>
+         * <script type="text/javascript">
+         *     (function() {
+         *         var board = JXG.JSXGraph.initBoard('JXG11cac8ff-2354-47e7-9da4-eb298e53de05',
+         *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+         *             var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
+         *             var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
+         *             var b1 = board.create('button', [-3, -1, 'Change texts', function () {
+         *                     i1.setText('g(x)');
+         *                     i1.set('cos(x)');
+         *                     c1.setText('label 2');
+         *                     b1.setText('Texts are changed');
+         *                 }],
+         *                 {cssStyle: 'width:400px'});
+         *
+         *     })();
+         *
+         * </script><pre>
+         *
          */
         t.set = function (val) {
             this._value = val;

package/src/element/locus.js

@@ -1,5 +1,5 @@
 /*
- Copyright 2008-2021
+ Copyright 2008-2022
  Matthias Ehmann,
  Michael Gerhaeuser,
  Carsten Miller,
@@ -112,7 +112,7 @@ define([
         c.setParents([p.id]);
 
         /**
-         * should be documented in JXG.Curve
+         * Should be documented in JXG.Curve
          * @ignore
          */
         c.updateDataArray = function () {

package/src/element/measure.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -85,7 +85,7 @@ define([
      */
     JXG.createTapemeasure = function (board, parents, attributes) {
         var pos0, pos1,
-            attr, withTicks, withText, precision,
+            attr, withTicks, withText, digits,
             li, p1, p2, n, ti;
 
         pos0 = parents[0];
@@ -106,7 +106,12 @@ define([
         attr = Type.copyAttributes(attributes, board.options, 'tapemeasure');
         withTicks = attr.withticks;
         withText = attr.withlabel;
-        precision = attr.precision;
+        digits = attr.digits;
+
+        if (digits === 2 && attr.precision !== 2) {
+            // Backward compatibility
+            digits = attr.precision;
+        }
 
         // Below, we will replace the label by the measurement function.
         if (withText) {
@@ -122,7 +127,7 @@ define([
                 n = '';
             }
             li.label.setText(function () {
-                return n + Type.toFixed(p1.Dist(p2), precision);
+                return n + Type.toFixed(p1.Dist(p2), digits);
             });
         }
 

package/src/element/sector.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -198,7 +198,10 @@ define([
         };
 
         if (type === '2lines') {
-            el.Radius = function () {
+            /**
+             * @ignore
+             */
+             el.Radius = function () {
                 var r = Type.evaluate(parents[4]);
                 if (r === 'auto') {
                     return this.autoRadius();
@@ -299,8 +302,8 @@ define([
             };
 
             el.methodMap = JXG.deepCopy(el.methodMap, {
-                radius: 'getRadius',
-                getRadius: 'getRadius',
+                radius: 'Radius',
+                getRadius: 'Radius',
                 setRadius: 'setRadius'
             });
 
@@ -364,8 +367,8 @@ define([
                 center: 'center',
                 radiuspoint: 'radiuspoint',
                 anglepoint: 'anglepoint',
-                radius: 'getRadius',
-                getRadius: 'getRadius',
+                radius: 'Radius',
+                getRadius: 'Radius',
                 setRadius: 'setRadius'
             });
 
@@ -579,7 +582,10 @@ define([
          * @param {Number, Function} value New radius.
          */
         el.setRadius = function (val) {
-            el.Radius = function () {
+            /**
+             * @ignore
+             */
+             el.Radius = function () {
                 var r = Type.evaluate(val);
                 if (r === 'auto') {
                     return this.autoRadius();
@@ -965,8 +971,11 @@ define([
              */
             el.pointsquare = el.point3 = el.anglepoint = points[2];
 
-            // Set the angle radius, also @see @link Sector#autoRadius
+            /**
+             * @ignore
+             */
             el.Radius = function () {
+                // Set the angle radius, also @see @link Sector#autoRadius
                 var r = Type.evaluate(radius);
                 if (r === 'auto') {
                     return el.autoRadius();
@@ -1110,14 +1119,35 @@ define([
             *
             */
             el.setAngle = function (val) {
-                var t, t2,
+                var t1, t2, val2,
                     p = this.anglepoint,
                     q = this.radiuspoint;
 
                 if (p.draggable()) {
-                    t = this.board.create('transform', [val, this.center], {type: 'rotate'});
-                    p.addTransform(q, t);
-                    // p.isDraggable = false;
+                    t1 = this.board.create('transform', [val, this.center], {type: 'rotate'});
+                    p.addTransform(q, t1);
+                    // Immediately apply the transformation.
+                    // This prevents that jumping elements can be watched.
+                    t1.update();
+                    p.moveTo(Mat.matVecMult(t1.matrix, q.coords.usrCoords));
+
+                    if (Type.isFunction(val)) {
+                        /**
+                         * @ignore
+                         */
+                        val2 = function() { return Math.PI * 2 - val(); };
+                    } else {
+                        /**
+                         * @ignore
+                         */
+                         val2 = function() { return Math.PI * 2 - val; };
+                    }
+                    t2 = this.board.create('transform', [val2, this.center], {type: 'rotate'});
+                    p.coords.on('update', function() {
+                        t2.update();
+                        q.moveTo(Mat.matVecMult(t2.matrix, p.coords.usrCoords));
+                    });
+
                     p.setParents(q);
                 }
                 return this;
@@ -1134,11 +1164,15 @@ define([
             */
             el.free = function () {
                 var p = this.anglepoint;
+
                 if (p.transformations.length > 0) {
                     p.transformations.pop();
                     p.isDraggable = true;
                     p.parents = [];
+
+                    p.coords.off('update');
                 }
+
                 return this;
             };
 

package/src/element/slider.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -143,7 +143,7 @@ define([
      * @example
      * // Set colors
      * var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {
-     * 
+     *
      *   baseline: { strokeColor: 'blue'},
      *   highline: { strokeColor: 'red'},
      *   fillColor: 'yellow',
@@ -151,16 +151,16 @@ define([
      *   name: 'xyz', // Not shown, if suffixLabel is set
      *   suffixLabel: 'x = ',
      *   postLabel: ' u'
-     * 
+     *
      * });
-     * 
+     *
      * </pre><div id="JXGd96c9e2c-2c25-4131-b6cf-9dbb80819401" class="jxgbox" style="width: 300px; height: 300px;"></div>
      * <script type="text/javascript">
      *     (function() {
      *         var board = JXG.JSXGraph.initBoard('JXGd96c9e2c-2c25-4131-b6cf-9dbb80819401',
      *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
      *     var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {
-     *     
+     *
      *       baseline: { strokeColor: 'blue'},
      *       highline: { strokeColor: 'red'},
      *       fillColor: 'yellow',
@@ -168,24 +168,23 @@ define([
      *       name: 'xyz', // Not shown, if suffixLabel is set
      *       suffixLabel: 'x = ',
      *       postLabel: ' u'
-     *     
+     *
      *     });
-     * 
+     *
      *     })();
-     * 
+     *
      * </script><pre>
-     * 
+     *
  */
     JXG.createSlider = function (board, parents, attributes) {
         var pos0, pos1, smin, start, smax, sdiff,
             p1, p2, l1, ticks, ti, startx, starty, p3, l2, t,
-            withText, withTicks, snapWidth, sw, s, attr, precision;
+            withText, withTicks, snapWidth, sw, s, attr, digits;
 
         attr = Type.copyAttributes(attributes, board.options, 'slider');
         withTicks = attr.withticks;
         withText = attr.withlabel;
         snapWidth = attr.snapwidth;
-        precision = attr.precision;
 
         // start point
         attr = Type.copyAttributes(attributes, board.options, 'slider', 'point1');
@@ -324,10 +323,16 @@ define([
                 },
                 function () {
                     var n,
+                        d = Type.evaluate(p3.visProp.digits),
                         sl = Type.evaluate(p3.visProp.suffixlabel),
                         ul = Type.evaluate(p3.visProp.unitlabel),
                         pl = Type.evaluate(p3.visProp.postlabel);
 
+                    if (d === 2 && Type.evaluate(p3.visProp.precision) !== 2) {
+                        // Backwards compatibility
+                        d = Type.evaluate(p3.visProp.precision);
+                    }
+
                     if (sl !== null) {
                         n = sl;
                     } else if (p3.name && p3.name !== '') {
@@ -336,7 +341,7 @@ define([
                         n = '';
                     }
 
-                    n += Type.toFixed(p3.Value(), precision);
+                    n += Type.toFixed(p3.Value(), d);
 
                     if (ul !== null) {
                         n += ul;

package/src/element/slopetriangle.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,

package/src/jsxgraph.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -192,6 +192,7 @@ define([
             attr.navbar = Type.copyAttributes(attr.navbar, Options, 'navbar');
             attr.screenshot = Type.copyAttributes(attr, Options, 'board', 'screenshot');
             attr.resize = Type.copyAttributes(attr, Options, 'board', 'resize');
+            attr.fullscreen = Type.copyAttributes(attr, Options, 'board', 'fullscreen');
 
             // Treat moveTarget separately, because deepCopy will not work here.
             // Reason: moveTarget will be an HTML node and it is prevented that Type.deepCopy will copy it.
@@ -303,6 +304,8 @@ define([
         initBoard: function (box, attributes) {
             var originX, originY, unitX, unitY,
                 renderer,
+                offX = 0,
+                offY = 0,
                 w, h, dimensions,
                 bbox, attr, axattr, axattr_x, axattr_y,
                 board;
@@ -338,15 +341,19 @@ define([
 
                     if (Math.abs(unitX) < Math.abs(unitY)) {
                         unitY = Math.abs(unitX) * unitY / Math.abs(unitY);
+                        // Add the additional units in equal portions above and below
+                        offY = (h / unitY - (bbox[1] - bbox[3])) * 0.5;
                     } else {
                         unitX = Math.abs(unitY) * unitX / Math.abs(unitX);
+                        // Add the additional units in equal portions left and right
+                        offX = (w / unitX - (bbox[2] - bbox[0])) * 0.5;
                     }
                 } else {
                     unitX = w / (bbox[2] - bbox[0]);
                     unitY = h / (bbox[1] - bbox[3]);
                 }
-                originX = -unitX * bbox[0];
-                originY = unitY * bbox[1];
+                originX = -unitX * (bbox[0] - offX);
+                originY = unitY * (bbox[1] + offY);
             }
 
             renderer = this.initRenderer(box, dimensions, attr.document, attr.renderer);
@@ -541,8 +548,9 @@ define([
     if (Env.isBrowser && typeof window === 'object' && typeof document === 'object') {
         Env.addEvent(window, 'load', function () {
             var type, i, j, div,
-                id, board, width, height, bbox, axis, grid,
-                code,
+                id, board, txt,
+                width, height, maxWidth, aspectRatio, cssClasses,
+                bbox, axis, grid, code,
                 src, request, postpone = false,
                 scripts = document.getElementsByTagName('script'),
                 init = function (code, type, bbox) {
@@ -576,8 +584,11 @@ define([
                 if (Type.exists(type) &&
                     (type.toLowerCase() === 'text/jessiescript' || type.toLowerCase() === 'jessiescript' ||
                      type.toLowerCase() === 'text/jessiecode' || type.toLowerCase() === 'jessiecode')) {
-                    width = scripts[i].getAttribute('width', false) || '500px';
-                    height = scripts[i].getAttribute('height', false) || '500px';
+                    cssClasses = scripts[i].getAttribute('class', false) || '';
+                    width = scripts[i].getAttribute('width', false) || '';
+                    height = scripts[i].getAttribute('height', false) || '';
+                    maxWidth = scripts[i].getAttribute('maxwidth', false) || '100%';
+                    aspectRatio = scripts[i].getAttribute('aspectratio', false) || '1/1';
                     bbox = scripts[i].getAttribute('boundingbox', false) || '-5, 5, 5, -5';
                     id = scripts[i].getAttribute('container', false);
                     src = scripts[i].getAttribute('src', false);
@@ -597,8 +608,14 @@ define([
                         id = 'jessiescript_autgen_jxg_' + i;
                         div = document.createElement('div');
                         div.setAttribute('id', id);
-                        div.setAttribute('style', 'width:' + width + '; height:' + height + '; float:left');
-                        div.setAttribute('class', 'jxgbox');
+
+                        txt = (width !== '') ? ('width:' + width + ';') : '';
+                        txt += (height !== '') ? ('height:' + height + ';') : '';
+                        txt += (maxWidth !== '') ? ('max-width:' + maxWidth + ';') : '';
+                        txt += (aspectRatio !== '') ? ('aspect-ratio:' + aspectRatio + ';') : '';
+
+                        div.setAttribute('style', txt);
+                        div.setAttribute('class', 'jxgbox ' + cssClasses);
                         try {
                             document.body.insertBefore(div, scripts[i]);
                         } catch (e) {
@@ -618,6 +635,7 @@ define([
                         request = new XMLHttpRequest();
                         request.open("GET", src);
                         request.overrideMimeType("text/plain; charset=x-user-defined");
+                        /* jshint ignore:start */
                         request.addEventListener("load", function() {
                             if (this.status < 400) {
                                 code = this.responseText + '\n' + code;
@@ -630,6 +648,7 @@ define([
                         request.addEventListener("error", function(e) {
                             throw new Error("\nJSXGraph: failed to load file", src, ":", e);
                         });
+                        /* jshint ignore:end */
                         request.send();
                     } else {
                         postpone = false;

package/src/jxg.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -53,6 +53,7 @@ define([], function () {
 
     /**
      * JXG is the top object of JSXGraph and defines the namespace
+     * @exports jxg as JXG
      */
     var jxg = {};
 
@@ -130,9 +131,9 @@ define([], function () {
         onlyOwn = onlyOwn || false;
         toUpper = toUpper || false;
 
-        // the purpose of this for...in loop is indeed to use hasOwnProperty only if the caller explicitly wishes so.
+        // The purpose of this for...in loop is indeed to use hasOwnProperty only if the caller explicitly wishes so.
         for (e in constants) {
-            if (!onlyOwn || (onlyOwn && extension.hasOwnProperty(e))) {
+            if (!onlyOwn || (onlyOwn && constants.hasOwnProperty(e))) {
                 if (toUpper) {
                     e2 = e.toUpperCase();
                 } else {