jsxgraph 1.3.0 → 1.4.1

package/src/base/text.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -29,7 +29,6 @@
     and <http://opensource.org/licenses/MIT/>.
  */
 
-
 /*global JXG: true, define: true, window: true*/
 /*jslint nomen: true, plusplus: true*/
 
@@ -56,12 +55,12 @@ define([
     "use strict";
 
     var priv = {
-            HTMLSliderInputEventHandler: function () {
-                this._val = parseFloat(this.rendNodeRange.value);
-                this.rendNodeOut.value = this.rendNodeRange.value;
-                this.board.update();
-            }
-        };
+        HTMLSliderInputEventHandler: function () {
+            this._val = parseFloat(this.rendNodeRange.value);
+            this.rendNodeOut.value = this.rendNodeRange.value;
+            this.board.update();
+        }
+    };
 
     /**
      * Construct and handle texts.
@@ -99,18 +98,20 @@ define([
          * Width and height of the the text element in pixel.
          *
          * @private
-         * @type {Array}
+         * @type Array
          */
         this.size = [1.0, 1.0];
         this.id = this.board.setId(this, 'T');
 
-        // Set text before drawing
-        this._setUpdateText(content);
-        this.updateText();
-
         this.board.renderer.drawText(this);
         this.board.finalizeAdding(this);
 
+        // Set text before drawing
+        // this._createFctUpdateText(content);
+        // this.updateText();
+
+        this.setText(content);
+
         if (Type.isString(this.content)) {
             this.notifyParents(this.content);
         }
@@ -133,7 +134,7 @@ define([
          * at the left side or at the right side of the text.
          * Sensitivity is set in this.board.options.precision.hasPoint.
          * If dragarea is set to 'all' (default), tests if the the screen
-        * coordinates (x,y) are in within the text boundary.
+         * coordinates (x,y) are in within the text boundary.
          * @param {Number} x
          * @param {Number} y
          * @returns {Boolean}
@@ -177,12 +178,12 @@ define([
             top = bot - this.size[1];
 
             if (Type.evaluate(this.visProp.dragarea) === 'all') {
-                return x >= lft - r && x < rt + r && y >= top - r  && y <= bot + r;
+                return x >= lft - r && x < rt + r && y >= top - r && y <= bot + r;
             }
             // e.g. 'small'
             return (y >= top - r && y <= bot + r) &&
-                ((x >= lft - r  && x <= lft + 2 * r) ||
-                (x >= rt - 2 * r && x <= rt + r));
+                ((x >= lft - r && x <= lft + 2 * r) ||
+                    (x >= rt - 2 * r && x <= rt + r));
         },
 
         /**
@@ -191,7 +192,7 @@ define([
          * @param {String|Function|Number} text
          * @private
          */
-        _setUpdateText: function (text) {
+        _createFctUpdateText: function (text) {
             var updateText, resolvedText,
                 ev_p = Type.evaluate(this.visProp.parse),
                 ev_um = Type.evaluate(this.visProp.usemathjax),
@@ -202,7 +203,7 @@ define([
                 this.updateText = function () {
                     resolvedText = text().toString();
                     if (ev_p && !ev_um && !ev_uk) {
-                        this.plaintext = this.replaceSub(this.replaceSup(this.convertGeonext2CSS(resolvedText)));
+                        this.plaintext = this.replaceSub(this.replaceSup(this.convertGeonextAndSketchometry2CSS(resolvedText)));
                     } else {
                         this.plaintext = resolvedText;
                     }
@@ -242,7 +243,7 @@ define([
          * @private
          */
         _setText: function (text) {
-            this._setUpdateText(text);
+            this._createFctUpdateText(text);
 
             // First evaluation of the string.
             // We need this for display='internal' and Canvas
@@ -270,7 +271,6 @@ define([
             var s;
 
             this.visProp.castext = text;
-
             if (Type.isFunction(text)) {
                 s = function () {
                     return Type.sanitizeHTML(text());
@@ -308,7 +308,7 @@ define([
          * @return {[type]} [description]
          */
         updateSize: function () {
-            var tmp, s, that, node,
+            var tmp, that, node,
                 ev_d = Type.evaluate(this.visProp.display);
 
             if (!Env.isBrowser || this.board.renderer.type === 'no') {
@@ -346,13 +346,14 @@ define([
             } else if (ev_d === 'internal') {
                 if (this.board.renderer.type === 'svg') {
                     that = this;
-                    window.setTimeout(function(){
+                    window.setTimeout(function () {
                         try {
                             tmp = node.getBBox();
                             that.size = [tmp.width, tmp.height];
                             that.needsUpdate = true;
                             that.updateRenderer();
-                        } catch (e) {}
+                        } catch (e) {
+                        }
                     }, 0);
                 } else if (this.board.renderer.type === 'canvas') {
                     this.size = this.crudeSizeEstimate();
@@ -376,7 +377,7 @@ define([
          * @param {String} string
          * @returns {String}
          */
-        utf8_decode : function (string) {
+        utf8_decode: function (string) {
             return string.replace(/&#x(\w+);/g, function (m, p1) {
                 return String.fromCharCode(parseInt(p1, 16));
             });
@@ -574,8 +575,8 @@ define([
          * @param{String} expr Math term
          * @returns {string} expanded String
          */
-        expandShortMath: function(expr) {
-            var re = /([\)0-9\.])\s*([\(a-zA-Z_])/g;
+        expandShortMath: function (expr) {
+            var re = /([)0-9.])\s*([(a-zA-Z_])/g;
             return expr.replace(re, '$1*$2');
         },
 
@@ -589,7 +590,7 @@ define([
          * @param{Boolean} [avoidGeonext2JS] Optional flag if geonext2JS should be called. For backwards compatibility
          * this has to be set explicitely to true.
          * @private
-         * @see JXG.GeonextParser.geonext2JS.
+         * @see JXG.GeonextParser.geonext2JS
          */
         generateTerm: function (contentStr, expand, avoidGeonext2JS) {
             var res, term, i, j,
@@ -649,7 +650,7 @@ define([
             }
 
             plaintext += ' + "' + this.replaceSub(this.replaceSup(contentStr)) + '"';
-            plaintext = this.convertGeonext2CSS(plaintext);
+            plaintext = this.convertGeonextAndSketchometry2CSS(plaintext);
 
             // This should replace &amp;pi; by &pi;
             plaintext = plaintext.replace(/&amp;/g, '&');
@@ -660,25 +661,76 @@ define([
 
         /**
          * Converts the GEONExT tags <overline> and <arrow> to
-         * HTML span tags with proper CSS formating.
+         * HTML span tags with proper CSS formatting.
          * @private
-         * @see JXG.Text.generateTerm @see JXG.Text._setText
+         * @see JXG.Text.generateTerm
+         * @see JXG.Text._setText
          */
         convertGeonext2CSS: function (s) {
             if (Type.isString(s)) {
-                s = s.replace(/<overline>/g, '<span style=text-decoration:overline>');
-                s = s.replace(/&lt;overline&gt;/g, '<span style=text-decoration:overline>');
-                s = s.replace(/<\/overline>/g, '</span>');
-                s = s.replace(/&lt;\/overline&gt;/g, '</span>');
-                s = s.replace(/<arrow>/g, '<span style=text-decoration:overline>');
-                s = s.replace(/&lt;arrow&gt;/g, '<span style=text-decoration:overline>');
-                s = s.replace(/<\/arrow>/g, '</span>');
-                s = s.replace(/&lt;\/arrow&gt;/g, '</span>');
+                s = s.replace(
+                    /(<|&lt;)overline(>|&gt;)/g,
+                    '<span style=text-decoration:overline;>'
+                );
+                s = s.replace(
+                    /(<|&lt;)\/overline(>|&gt;)/g,
+                    '</span>'
+                );
+                s = s.replace(
+                    /(<|&lt;)arrow(>|&gt;)/g,
+                    '<span style=text-decoration:overline;>'
+                );
+                s = s.replace(
+                    /(<|&lt;)\/arrow(>|&gt;)/g,
+                    '</span>'
+                );
+            }
+
+            return s;
+        },
+
+        /**
+         * Converts the sketchometry tag <sketchofont> to
+         * HTML span tags with proper CSS formatting.
+         * @private
+         * @see JXG.Text.generateTerm
+         * @see JXG.Text._setText
+         */
+        convertSketchometry2CSS: function (s) {
+            if (Type.isString(s)) {
+                s = s.replace(
+                    /(<|&lt;)sketchofont(>|&gt;)/g,
+                    '<span style=font-family:sketchometry-light;font-weight:500;>'
+                );
+                s = s.replace(
+                    /(<|&lt;)\/sketchofont(>|&gt;)/g,
+                    '</span>'
+                );
+                s = s.replace(
+                    /(<|&lt;)sketchometry-light(>|&gt;)/g,
+                    '<span style=font-family:sketchometry-light;font-weight:500;>'
+                );
+                s = s.replace(
+                    /(<|&lt;)\/sketchometry-light(>|&gt;)/g,
+                    '</span>'
+                );
             }
 
             return s;
         },
 
+        /**
+         * Alias for convertGeonext2CSS and convertSketchometry2CSS
+         * @private
+         * @see JXG.Text.convertGeonext2CSS
+         * @see JXG.Text.convertSketchometry2CSS
+         */
+        convertGeonextAndSketchometry2CSS: function (s){
+            s = this.convertGeonext2CSS(s);
+            s = this.convertSketchometry2CSS(s);
+            return s;
+        },
+
         /**
          * Finds dependencies in a given term and notifies the parents by adding the
          * dependent object to the found objects child elements.
@@ -694,7 +746,7 @@ define([
             content = content.replace(/&lt;\/value&gt;/g, '</value>');
 
             do {
-                search = /<value>([\w\s\*\/\^\-\+\(\)\[\],<>=!]+)<\/value>/;
+                search = /<value>([\w\s*/^\-+()[\],<>=!]+)<\/value>/;
                 res = search.exec(content);
 
                 if (res !== null) {
@@ -732,7 +784,7 @@ define([
             return [c[1], c[2] + this.size[1] / this.board.unitY, c[1] + this.size[0] / this.board.unitX, c[2]];
         },
 
-        getAnchorX: function() {
+        getAnchorX: function () {
             var a = Type.evaluate(this.visProp.anchorx);
             if (a === 'auto') {
                 switch (this.visProp.position) {
@@ -753,7 +805,7 @@ define([
             return a;
         },
 
-        getAnchorY: function() {
+        getAnchorY: function () {
             var a = Type.evaluate(this.visProp.anchory);
             if (a === 'auto') {
                 switch (this.visProp.position) {
@@ -785,9 +837,9 @@ define([
          * @param  {Number} h width of the box in pixel
          * @return {Number}   Number of overlapping elements
          */
-        getNumberofConflicts: function(x, y, w, h) {
+        getNumberofConflicts: function (x, y, w, h) {
             var count = 0,
-			    i, obj, le,
+                i, obj, le,
                 savePointPrecision;
 
             // Set the precision of hasPoint to half the max if label isn't too long
@@ -796,21 +848,21 @@ define([
             this.board.options.precision.hasPoint = (w + h) * 0.25;
             // TODO:
             // Make it compatible with the objects' visProp.precision attribute
-			for (i = 0, le = this.board.objectsList.length; i < le; i++) {
-				obj = this.board.objectsList[i];
-				if (obj.visPropCalc.visible &&
+            for (i = 0, le = this.board.objectsList.length; i < le; i++) {
+                obj = this.board.objectsList[i];
+                if (obj.visPropCalc.visible &&
                     obj.elType !== 'axis' &&
                     obj.elType !== 'ticks' &&
                     obj !== this.board.infobox &&
                     obj !== this &&
                     obj.hasPoint(x, y)) {
 
-					count++;
-				}
-			}
+                    count++;
+                }
+            }
             this.board.options.precision.hasPoint = savePointPrecision;
 
-			return count;
+            return count;
         },
 
         /**
@@ -820,9 +872,10 @@ define([
          *
          * @returns {JXG.Text} Reference to the text object.
          */
-        setAutoPosition: function() {
+        setAutoPosition: function () {
             var x, y, cx, cy,
-                anchorCoords, anchorX, anchorY,
+                anchorCoords,
+                // anchorX, anchorY,
                 w = this.size[0],
                 h = this.size[1],
                 start_angle, angle,
@@ -844,8 +897,8 @@ define([
                 return this;
             }
 
-            anchorX = Type.evaluate(this.visProp.anchorx);
-            anchorY = Type.evaluate(this.visProp.anchory);
+            // anchorX = Type.evaluate(this.visProp.anchorx);
+            // anchorY = Type.evaluate(this.visProp.anchory);
             offset = Type.evaluate(this.visProp.offset);
             anchorCoords = this.element.getLabelAnchor();
             cx = anchorCoords.scrCoords[1];
@@ -870,8 +923,8 @@ define([
             start_angle = Math.atan2(dy, dx);
 
             optimum.conflicts = conflicts;
-            optimum.angle     = start_angle;
-            optimum.r         = r;
+            optimum.angle = start_angle;
+            optimum.r = r;
 
             while (optimum.conflicts > 0 && r < max_r) {
                 for (j = 1, angle = start_angle + step; j < num_positions && optimum.conflicts > 0; j++) {
@@ -880,12 +933,12 @@ define([
 
                     x = cx + r * co;
                     y = cy - r * si;
-                
+
                     conflicts = this.getNumberofConflicts(x, y, w, h);
                     if (conflicts < optimum.conflicts) {
                         optimum.conflicts = conflicts;
-                        optimum.angle     = angle;
-                        optimum.r         = r;
+                        optimum.angle = angle;
+                        optimum.r = r;
                     }
                     if (optimum.conflicts === 0) {
                         break;
@@ -992,8 +1045,8 @@ define([
 
         if (!t) {
             throw new Error("JSXGraph: Can't create text with parent types '" +
-                    (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." +
-                    "\nPossible parent types: [x,y], [z,x,y], [element,transformation]");
+                (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." +
+                "\nPossible parent types: [x,y], [z,x,y], [element,transformation]");
         }
 
         if (attr.rotate !== 0 && attr.display === 'internal') { // This is the default value, i.e. no rotation
@@ -1065,7 +1118,7 @@ define([
             t.rendNodeForm.id = t.rendNode.id + '_form';
             t.rendNodeRange.id = t.rendNode.id + '_range';
             t.rendNodeOut.id = t.rendNode.id + '_out';
-	} catch (e) {
+        } catch (e) {
             JXG.debug(e);
         }
 

package/src/base/ticks.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -133,13 +133,13 @@ define([
 
         /**
          * Stores the ticks coordinates
-         * @type {Array}
+         * @type Array
          */
         this.ticks = [];
 
         /**
          * Distance between two major ticks in user coordinates
-         * @type {Number}
+         * @type Number
          */
         this.ticksDelta = 1;
 
@@ -153,13 +153,13 @@ define([
 
         /**
          * A list of labels which have to be displayed in updateRenderer.
-         * @type {Array}
+         * @type Array
          */
         this.labelData = [];
 
         /**
          * To ensure the uniqueness of label ids this counter is used.
-         * @type {number}
+         * @type number
          */
         this.labelCounter = 0;
 
@@ -279,22 +279,23 @@ define([
                 return this;
             }
 
-            // horizontal line
             if (Math.abs(this.line.stdform[1]) < Mat.eps &&
                 Math.abs(c.usrCoords[1] * oldc.usrCoords[1]) > Mat.eps) {
 
+                // Horizontal line
                 dx = oldc.usrCoords[1] / c.usrCoords[1];
                 bb[0] *= dx;
                 bb[2] *= dx;
-                this.board.setBoundingBox(bb, false);
-            // vertical line
+                this.board.setBoundingBox(bb, this.board.keepaspectratio, 'update');
+
             } else if (Math.abs(this.line.stdform[2]) < Mat.eps &&
                        Math.abs(c.usrCoords[2] * oldc.usrCoords[2]) > Mat.eps) {
 
+                // Vertical line
                 dy = oldc.usrCoords[2] / c.usrCoords[2];
                 bb[3] *= dy;
                 bb[1] *= dy;
-                this.board.setBoundingBox(bb, false);
+                this.board.setBoundingBox(bb, this.board.keepaspectratio, 'update');
             }
 
             return this;
@@ -670,11 +671,16 @@ define([
                 tickPosition = ticksDelta;
             }
             while (tickPosition <= bounds.upper + eps2) {
-                // Only draw ticks when we are within bounds, ignore case where  tickPosition < lower < upper
+                // Only draw ticks when we are within bounds, ignore case where tickPosition < lower < upper
                 if (tickPosition >= bounds.lower - eps2) {
                     this.processTickPosition(coordsZero, tickPosition, ticksDelta, deltas);
                 }
                 tickPosition += ticksDelta;
+
+                // Emergency out
+                if ((bounds.upper - tickPosition) > ticksDelta * 10000) {
+                    break;
+                }
             }
 
             // Position ticks from zero (not inclusive) to the negative side while not reaching the lower boundary
@@ -685,6 +691,11 @@ define([
                     this.processTickPosition(coordsZero, tickPosition, ticksDelta, deltas);
                 }
                 tickPosition -= ticksDelta;
+
+                // Emergency out
+                if ((tickPosition - bounds.lower) > ticksDelta * 10000) {
+                    break;
+                }
             }
         },
 
@@ -1006,13 +1017,20 @@ define([
          */
         formatLabelText: function(value) {
             var labelText = value.toString(),
+                digits,
                 ev_s = Type.evaluate(this.visProp.scalesymbol);
 
             // if value is Number
             if (Type.isNumber(value)) {
                 if (labelText.length > Type.evaluate(this.visProp.maxlabellength) ||
                         labelText.indexOf('e') !== -1) {
-                    labelText = value.toPrecision(Type.evaluate(this.visProp.precision)).toString();
+
+                    digits = Type.evaluate(this.visProp.digits);
+                    if (Type.evaluate(this.visProp.precision) !== 3 && digits === 3) {
+                        // Use the deprecated attribute "precision"
+                        digits = Type.evaluate(this.visProp.precision);
+                    }
+                    labelText = value.toPrecision(digits).toString();
                 }
 
                 if (Type.evaluate(this.visProp.beautifulscientificticklabels)) {

package/src/base/transformation.js

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

package/src/base/turtle.js

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

package/src/element/arc.js

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

package/src/element/button.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -160,7 +160,35 @@ define([
      *     	visible: () => butt.value
      *     });
      *
+     *     })();
+     *
+     * </script><pre>
      *
+     * @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-eb928e53de05" class="jxgbox" style="width: 300px; height: 300px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXG11cac8ff-2354-47e7-9da4-eb928e53de05',
+     *             {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'});
      *
      *     })();
      *
@@ -206,7 +234,6 @@ define([
         }
 
         Env.addEvent(t.rendNodeButton, 'click', priv.ButtonClickEventHandler, t);
-
         Env.addEvent(t.rendNodeButton, 'mousedown', function (evt) { if (Type.exists(evt.stopPropagation)) { evt.stopPropagation(); } }, t);
         Env.addEvent(t.rendNodeButton, 'touchstart', function (evt) { if (Type.exists(evt.stopPropagation)) { evt.stopPropagation(); } }, t);
         Env.addEvent(t.rendNodeButton, 'pointerdown', function (evt) { if (Type.exists(evt.stopPropagation)) { evt.stopPropagation(); } }, t);

package/src/element/checkbox.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2008-2021
+    Copyright 2008-2022
         Matthias Ehmann,
         Michael Gerhaeuser,
         Carsten Miller,
@@ -137,6 +137,36 @@ define([
      * }, checkbox);
      * })();
      * </script><pre>
+     *
+     * @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="JXG11cac8gg-2354-47e7-9da4-eb298e53de05" class="jxgbox" style="width: 300px; height: 300px;"></div>
+     * <script type="text/javascript">
+     *     (function() {
+     *         var board = JXG.JSXGraph.initBoard('JXG11cac8gg-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>
      */
     JXG.createCheckbox = function (board, parents, attributes) {
         var t, par,

package/src/element/comb.js

@@ -1,5 +1,5 @@
 /*
-    Copyright 2018-2021
+    Copyright 2018-2022
         Alfred Wassermann,
         Tigran Saluev
 
@@ -176,7 +176,10 @@ define([
         Type.merge(attr, Type.copyAttributes(attributes, board.options, 'comb', 'curve'));
         c = board.create('curve', [[0], [0]], attr);
 
-        c.updateDataArray = function() {
+        /**
+         * @ignore
+         */
+         c.updateDataArray = function() {
             var s = 0,
                 max_s = p1.Dist(p2),
                 cs, sn, dx, dy,