jsxgraph 1.4.4 → 1.4.6

package/src/base/polygon.js

@@ -80,6 +80,14 @@ define([
         this.vertices = [];
         for (i = 0; i < vertices.length; i++) {
             this.vertices[i] = this.board.select(vertices[i]);
+
+            // The _is_new flag is replaced by _is_new_pol.
+            // Otherwise, the polygon would disappear if the last border element
+            // is removed (and the point has been provided by coordinates)
+            if (this.vertices[i]._is_new) {
+                delete this.vertices[i]._is_new;
+                this.vertices[i]._is_new_pol = true;
+            }
         }
 
         // Close the polygon
@@ -127,9 +135,9 @@ define([
         // - add  points (supplied as coordinate arrays by the user and created by Type.providePoints) as children to the polygon
         for (i = 0; i < this.vertices.length - 1; i++) {
             p = this.board.select(this.vertices[i]);
-            if (Type.exists(p._is_new)) {
+            if (Type.exists(p._is_new_pol)) {
                 this.addChild(p);
-                delete p._is_new;
+                delete p._is_new_pol;
             } else {
                 p.addChild(this);
             }
@@ -165,10 +173,7 @@ define([
     JXG.extend(JXG.Polygon.prototype, /** @lends JXG.Polygon.prototype */ {
 
         /**
-         * Decides if a point (x,y) is inside of the polygon.
-         * Implements W. Randolf Franklin's pnpoly method.
-         *
-         * See <a href="https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html">https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html</a>.
+         * Wrapper for JXG.Math.Geometry.pnpoly.
          *
          * @param {Number} x_in x-coordinate (screen or user coordinates)
          * @param {Number} y_in y-coordinate (screen or user coordinates)
@@ -176,7 +181,9 @@ define([
          *   Possible values are <b>JXG.COORDS_BY_USER</b> and <b>JXG.COORDS_BY_SCREEN</b>.
          *   Default value is JXG.COORDS_BY_SCREEN
          *
-         * @returns {Boolean} if (x,y) is inside of the polygon.
+         * @returns {Boolean} if (x_in, y_in) is inside of the polygon.
+         * @see JXG.Math.Geometry#pnpoly
+         *
          * @example
          * var pol = board.create('polygon', [[-1,2], [2,2], [-1,4]]);
          * var p = board.create('point', [4, 3]);
@@ -202,31 +209,7 @@ define([
          *
          */
         pnpoly: function(x_in, y_in, coord_type) {
-            var i, j, len,
-                x, y, crds,
-                v = this.vertices,
-                isIn = false;
-
-            if (coord_type === Const.COORDS_BY_USER) {
-                crds = new Coords(Const.COORDS_BY_USER, [x_in, y_in], this.board);
-                x = crds.scrCoords[1];
-                y = crds.scrCoords[2];
-            } else {
-                x = x_in;
-                y = y_in;
-            }
-
-            len = this.vertices.length;
-            for (i = 0, j = len - 2; i < len - 1; j = i++) {
-                if (((v[i].coords.scrCoords[2] > y) !== (v[j].coords.scrCoords[2] > y)) &&
-                    (x < (v[j].coords.scrCoords[1] - v[i].coords.scrCoords[1]) *
-                    (y - v[i].coords.scrCoords[2]) / (v[j].coords.scrCoords[2] - v[i].coords.scrCoords[2]) + v[i].coords.scrCoords[1])
-                   ) {
-                    isIn = !isIn;
-                }
-            }
-
-            return isIn;
+            return Geometry.pnpoly(x_in, y_in, this.vertices, coord_type);
         },
 
         /**
@@ -590,9 +573,14 @@ define([
          *
          */
         addPoints: function (p) {
-            var args = Array.prototype.slice.call(arguments);
+            var idx, args = Array.prototype.slice.call(arguments);
 
-            return this.insertPoints.apply(this, [this.vertices.length - 2].concat(args));
+            if (this.elType === 'polygonalchain') {
+                idx = this.vertices.length - 1;
+            } else {
+                idx = this.vertices.length - 2;
+            }
+            return this.insertPoints.apply(this, [idx].concat(args));
         },
 
         /**
@@ -630,38 +618,65 @@ define([
          *
          */
         insertPoints: function (idx, p) {
-            var i, le;
+            var i, le, last, start, q;
 
             if (arguments.length === 0) {
                 return this;
             }
 
+            last = this.vertices.length - 1;
+            if (this.elType === 'polygon') {
+                last--;
+            }
 
-            if (idx < -1 || idx > this.vertices.length - 2) {
+            // Wrong insertion index, get out of here
+            if (idx < -1 || idx > last) {
                 return this;
             }
 
             le = arguments.length - 1;
             for (i = 1; i < le + 1; i++) {
-                this.vertices.splice(idx + i, 0,
-                    Type.providePoints(this.board, [arguments[i]], {}, 'polygon', ['vertices'])[0]
-                );
-            }
-            if (idx === -1) {
-                this.vertices[this.vertices.length - 1] = this.vertices[0];
+                q = Type.providePoints(this.board, [arguments[i]], {}, 'polygon', ['vertices'])[0];
+                if (q._is_new) {
+                    // Add the point as child of the polygon, but not of the borders.
+                    this.addChild(q);
+                    delete q._is_new;
+                }
+                this.vertices.splice(idx + i, 0, q);
             }
+
             if (this.withLines) {
-                if (idx < 0) {
-                    this.borders[this.borders.length - 1].point2 = this.vertices[this.vertices.length - 1];
+                start = idx + 1;
+                if (this.elType === 'polygon') {
+                    if (idx < 0) {
+                        // Add point(s) in the front
+                        this.vertices[this.vertices.length - 1] = this.vertices[0];
+                        this.borders[this.borders.length - 1].point2 = this.vertices[this.vertices.length - 1];
+                    } else {
+                        // Insert point(s) (middle or end)
+                        this.borders[idx].point2 = this.vertices[start];
+                    }
                 } else {
-                    this.borders[idx].point2 = this.vertices[idx + 1];
+                    // Add point(s) in the front: do nothing
+                    // Else:
+                    if (idx >= 0) {
+                        if (idx < this.borders.length) {
+                            // Insert point(s) in the middle
+                            this.borders[idx].point2 = this.vertices[start];
+                        } else {
+                            // Add point at the end
+                            start = idx;
+                        }
+                    }
                 }
-                for (i = idx + 1; i < idx + 1 + le; i++) {
+                for (i = start; i < start + le; i++) {
                     this.borders.splice(i, 0,
                         this.board.create('segment', [this.vertices[i], this.vertices[i + 1]], this.attr_line)
                     );
                 }
             }
+            this.inherits = [];
+            this.inherits.push(this.vertices, this.borders);
             this.board.update();
 
             return this;
@@ -673,7 +688,8 @@ define([
          * @returns {JXG.Polygon} Reference to the polygon
          */
         removePoints: function (p) {
-            var i, j, idx, nvertices = [], nborders = [],
+            var i, j, j0, idx, firstPoint,
+                nvertices = [], nborders = [],
                 nidx = [], partition = [];
 
             // Partition:
@@ -684,8 +700,11 @@ define([
             // this gives us the borders, that can be removed and the borders we have to create.
 
 
-            // Remove the last vertex which is identical to the first
-            this.vertices = this.vertices.slice(0, this.vertices.length - 1);
+            // In case of polygon: remove the last vertex from the list of vertices since
+            // it is identical to the first
+            if (this.elType === 'polygon') {
+                firstPoint = this.vertices.pop();
+            }
 
             // Collect all valid parameters as indices in nidx
             for (i = 0; i < arguments.length; i++) {
@@ -693,12 +712,19 @@ define([
                 if (Type.isPoint(idx)) {
                     idx = this.findPoint(idx);
                 }
-
                 if (Type.isNumber(idx) && idx > -1 && idx < this.vertices.length && Type.indexOf(nidx, idx) === -1) {
                     nidx.push(idx);
                 }
             }
 
+            if (nidx.length === 0) {
+                // Wrong index, get out of here
+                if (this.elType === 'polygon') {
+                    this.vertices.push(firstPoint);
+                }
+                return this;
+            }
+
             // Remove the polygon from each removed point's children
             for (i = 0; i < nidx.length; i++) {
                 this.vertices[nidx[i]].removeChild(this);
@@ -709,7 +735,7 @@ define([
             nvertices = this.vertices.slice();
             nborders = this.borders.slice();
 
-            // Initialize the partition
+            // Initialize the partition with an array containing the last point to be removed
             if (this.withLines) {
                 partition.push([nidx[nidx.length - 1]]);
             }
@@ -719,7 +745,9 @@ define([
             for (i = nidx.length - 1; i > -1; i--) {
                 nvertices[nidx[i]] = -1;
 
-                if (this.withLines && (nidx[i] - 1 > nidx[i - 1])) {
+                // Find gaps between the list of points to be removed.
+                // In this case a new partition is added.
+                if (this.withLines && nidx.length > 1 && (nidx[i] - 1 > nidx[i - 1])) {
                     partition[partition.length - 1][1] = nidx[i];
                     partition.push([nidx[i - 1]]);
                 }
@@ -737,7 +765,11 @@ define([
                     this.vertices.push(nvertices[i]);
                 }
             }
-            if (this.vertices[this.vertices.length - 1].id !== this.vertices[0].id) {
+
+            // Close the polygon again
+            if (this.elType === 'polygon' &&
+                this.vertices.length > 1 &&
+                this.vertices[this.vertices.length - 1].id !== this.vertices[0].id) {
                 this.vertices.push(this.vertices[0]);
             }
 
@@ -747,23 +779,28 @@ define([
                     for (j = partition[i][1] - 1; j < partition[i][0] + 1; j++) {
                         // special cases
                         if (j < 0) {
-                            // first vertex is removed, so the last border has to be removed, too
-                            j = 0;
-                            this.board.removeObject(this.borders[nborders.length - 1]);
-                            nborders[nborders.length - 1] = -1;
-                        } else if (j > nborders.length - 1) {
-                            j = nborders.length - 1;
+                            if (this.elType === 'polygon') {
+                                // First vertex is removed, so the last border has to be removed, too
+                                this.board.removeObject(this.borders[nborders.length - 1]);
+                                nborders[nborders.length - 1] = -1;
+                            }
+                        } else if (j < nborders.length) {
+                            this.board.removeObject(this.borders[j]);
+                            nborders[j] = -1;
                         }
-
-                        this.board.removeObject(this.borders[j]);
-                        nborders[j] = -1;
                     }
 
-                    // only create the new segment if it's not the closing border. the closing border is getting a special treatment at the end
-                    // the if clause is newer than the min/max calls inside createSegment; i'm sure this makes the min/max calls obsolete, but
-                    // just to be sure...
+                    // Only create the new segment if it's not the closing border.
+                    // The closing border is getting a special treatment at the end.
                     if (partition[i][1] !== 0 && partition[i][0] !== nvertices.length - 1) {
-                        nborders[partition[i][0] - 1] = this.board.create('segment', [nvertices[Math.max(partition[i][1] - 1, 0)], nvertices[Math.min(partition[i][0] + 1, this.vertices.length - 1)]], this.attr_line);
+                        // nborders[partition[i][0] - 1] = this.board.create('segment', [
+                        //             nvertices[Math.max(partition[i][1] - 1, 0)],
+                        //             nvertices[Math.min(partition[i][0] + 1, this.vertices.length - 1)]
+                        //         ], this.attr_line);
+                        nborders[partition[i][0] - 1] = this.board.create('segment', [
+                            nvertices[partition[i][1] - 1],
+                            nvertices[partition[i][0] + 1]
+                        ], this.attr_line);
                     }
                 }
 
@@ -775,10 +812,16 @@ define([
                 }
 
                 // if the first and/or the last vertex is removed, the closing border is created at the end.
-                if (partition[0][1] === this.vertices.length - 1 || partition[partition.length - 1][1] === 0) {
-                    this.borders.push(this.board.create('segment', [this.vertices[0], this.vertices[this.vertices.length - 2]], this.attr_line));
+                if (this.elType === 'polygon' &&
+                    this.vertices.length > 2 &&  // Avoid trivial case of polygon with 1 vertex
+                    (partition[0][1] === this.vertices.length - 1 || partition[partition.length - 1][1] === 0)) {
+                    this.borders.push(this.board.create('segment',
+                            [this.vertices[0], this.vertices[this.vertices.length - 2]],
+                            this.attr_line));
                 }
             }
+            this.inherits = [];
+            this.inherits.push(this.vertices, this.borders);
 
             this.board.update();
 
@@ -1025,7 +1068,6 @@ define([
             return this.sutherlandHodgman(polygon);
         }
 
-
     });
 
 

package/src/base/text.js

@@ -196,42 +196,63 @@ define([
             var updateText, resolvedText,
                 ev_p = Type.evaluate(this.visProp.parse),
                 ev_um = Type.evaluate(this.visProp.usemathjax),
-                ev_uk = Type.evaluate(this.visProp.usekatex);
+                ev_uk = Type.evaluate(this.visProp.usekatex),
+                convertJessieCode = false;
 
             this.orgText = text;
+
             if (Type.isFunction(text)) {
+                // <value> tags will not be evaluated if text is provided by a function
                 this.updateText = function () {
-                    resolvedText = text().toString();
+                    resolvedText = text().toString();  // Evaluate function
                     if (ev_p && !ev_um && !ev_uk) {
                         this.plaintext = this.replaceSub(this.replaceSup(this.convertGeonextAndSketchometry2CSS(resolvedText)));
                     } else {
                         this.plaintext = resolvedText;
                     }
                 };
-            } else if (Type.isString(text) && !ev_p) {   // Do not parse
-                this.updateText = function () {
-                    this.plaintext = text;
-                };
-            } else {                                     // Parse
+
+            } else {
+
                 if (Type.isNumber(text)) {
                     this.content = Type.toFixed(text, Type.evaluate(this.visProp.digits));
-                } else {
-                    if (Type.evaluate(this.visProp.useasciimathml)) {
-                        // Convert via ASCIIMathML
+                } else if (Type.isString(text) && ev_p) {
+
+                    if (Type.evaluate(this.visProp.useasciimathml)) {   // ASCIIMathML
                         this.content = "'`" + text + "`'";
-                    } else if (ev_um || ev_uk) {
-                        this.content = "'" + text + "'";
+
+                    } else if (ev_um || ev_uk) {                        // MathJax or KaTeX
+                        // Replace value-tags by functions
+                        this.content = this.valueTagToJessieCode(text);
+                        this.content = this.content.replace(/\\/g, "\\\\"); // Replace single backshlash by double
+
                     } else {
+                        // No TeX involved.
                         // Converts GEONExT syntax into JavaScript string
                         // Short math is allowed
+                        // Replace value-tags by functions
                         // Avoid geonext2JS calls
-                        this.content = this.generateTerm(text, true, true);
+                        this.content = this.poorMansTeX(this.valueTagToJessieCode(text));
                     }
+                    convertJessieCode = true;
+                }
+
+                // Generate function which returns the text to be displayed
+                if (convertJessieCode) {
+
+                    // Convert JessieCode to JS function
+                    updateText = this.board.jc.snippet(this.content, true, '', false);
+
+                    // Ticks have been esacped in valueTagToJessieCode
+                    this.updateText = function () {
+                        this.plaintext = this.unescapeTicks(updateText());
+                    };
+                } else {
+                    this.updateText = function () {
+                        this.plaintext = text;
+                    };
+
                 }
-                updateText = this.board.jc.snippet(this.content, true, '', false);
-                this.updateText = function () {
-                    this.plaintext = updateText();
-                };
             }
         },
 
@@ -584,11 +605,16 @@ define([
          * Converts the GEONExT syntax of the <value> terms into JavaScript.
          * Also, all Objects whose name appears in the term are searched and
          * the text is added as child to these objects.
+         * This method is called if the attribute parse==true is set.
          *
          * @param{String} contentStr String to be parsed
          * @param{Boolean} [expand] Optional flag if shortened math syntax is allowed (e.g. 3x instead of 3*x).
          * @param{Boolean} [avoidGeonext2JS] Optional flag if geonext2JS should be called. For backwards compatibility
          * this has to be set explicitely to true.
+         * @param{Boolean} [outputTeX] Optional flag which has to be true if the resulting term will be sent to MathJax or KaTeX.
+         * If true, "_" and "^" are NOT replaced by HTML tags sub and sup. Default: false, i.e. the replacement is done.
+         * This flag allows the combination of &lt;value&gt; tag containing calculations with TeX output.
+         *
          * @private
          * @see JXG.GeonextParser.geonext2JS
          */
@@ -596,13 +622,17 @@ define([
             var res, term, i, j,
                 plaintext = '""';
 
-            // revert possible jc replacement
+            // Revert possible jc replacement
             contentStr = contentStr || '';
             contentStr = contentStr.replace(/\r/g, '');
             contentStr = contentStr.replace(/\n/g, '');
             contentStr = contentStr.replace(/"/g, '\'');
             contentStr = contentStr.replace(/'/g, "\\'");
 
+            // Old GEONExT syntax, not (yet) supported as TeX output.
+            // Otherwise, the else clause should be used.
+            // That means, i.e. the <arc> tag and <sqrt> tag are not
+            // converted into TeX syntax.
             contentStr = contentStr.replace(/&amp;arc;/g, '&ang;');
             contentStr = contentStr.replace(/<arc\s*\/>/g, '&ang;');
             contentStr = contentStr.replace(/&lt;arc\s*\/&gt;/g, '&ang;');
@@ -617,6 +647,8 @@ define([
             if (i >= 0) {
                 while (i >= 0) {
                     plaintext += ' + "' + this.replaceSub(this.replaceSup(contentStr.slice(0, i))) + '"';
+                    // plaintext += ' + "' + this.replaceSub(contentStr.slice(0, i)) + '"';
+
                     term = contentStr.slice(i + 7, j);
                     term = term.replace(/\s+/g, ''); // Remove all whitespace
                     if (expand === true) {
@@ -652,13 +684,84 @@ define([
             plaintext += ' + "' + this.replaceSub(this.replaceSup(contentStr)) + '"';
             plaintext = this.convertGeonextAndSketchometry2CSS(plaintext);
 
-            // This should replace &amp;pi; by &pi;
+            // This should replace e.g. &amp;pi; by &pi;
             plaintext = plaintext.replace(/&amp;/g, '&');
             plaintext = plaintext.replace(/"/g, "'");
 
             return plaintext;
         },
 
+        valueTagToJessieCode: function(contentStr) {
+            var res, term, i, j,
+                expandShortMath = true,
+                textComps = [],
+                tick = '"';
+
+            contentStr = contentStr || '';
+            contentStr = contentStr.replace(/\r/g, '');
+            contentStr = contentStr.replace(/\n/g, '');
+
+            contentStr = contentStr.replace(/&lt;value&gt;/g, '<value>');
+            contentStr = contentStr.replace(/&lt;\/value&gt;/g, '</value>');
+
+            // Convert content of value tag (GEONExT/JessieCode) syntax into JavaScript syntax
+            i = contentStr.indexOf('<value>');
+            j = contentStr.indexOf('</value>');
+            if (i >= 0) {
+                while (i >= 0) {
+                    // Add string fragment before <value> tag
+                    textComps.push(tick + this.escapeTicks(contentStr.slice(0, i)) + tick);
+
+                    term = contentStr.slice(i + 7, j);
+                    term = term.replace(/\s+/g, ''); // Remove all whitespace
+                    if (expandShortMath === true) {
+                        term = this.expandShortMath(term);
+                    }
+                    res = term;
+                    res = res.replace(/\\"/g, "'").replace(/\\'/g, "'");
+
+                    // Hack: apply rounding once only.
+                    if (res.indexOf('toFixed') < 0) {
+                        // Output of a value tag
+                        // Run the JessieCode parser
+                        if (Type.isNumber((Type.bind(this.board.jc.snippet(res, true, '', false), this))())) {
+                            // Output is number
+                            textComps.push('(' + res + ').toFixed(' + (Type.evaluate(this.visProp.digits)) + ')');
+                        } else {
+                            // Output is a string
+                            textComps.push('(' + res + ')');
+                        }
+                    } else {
+                        textComps.push('(' + res + ')');
+                    }
+                    contentStr = contentStr.slice(j + 8);
+                    i = contentStr.indexOf('<value>');
+                    j = contentStr.indexOf('</value>');
+                }
+            }
+            // Add trailing string fragment
+            textComps.push(tick + this.escapeTicks(contentStr) + tick);
+
+            return textComps.join(' + ').replace(/&amp;/g, '&');
+        },
+
+        poorMansTeX: function(s) {
+            s = s.replace(/<arc\s*\/*>/g, '&ang;')
+                .replace(/&lt;arc\s*\/*&gt;/g, '&ang;')
+                .replace(/<sqrt\s*\/*>/g, '&radic;')
+                .replace(/&lt;sqrt\s*\/*&gt;/g, '&radic;');
+
+            return this.convertGeonextAndSketchometry2CSS(this.replaceSub(this.replaceSup(s)));
+        },
+
+        escapeTicks: function(s) {
+            return s.replace(/"/g, '%22').replace(/'/g, '%27');
+        },
+
+        unescapeTicks: function(s) {
+            return s.replace(/%22/g, '"').replace(/%27/g, "'");
+        },
+
         /**
          * Converts the GEONExT tags <overline> and <arrow> to
          * HTML span tags with proper CSS formatting.

package/src/base/ticks.js

@@ -659,6 +659,7 @@ define([
             } else if (!ev_it) {
                 ticksDelta /= (ev_mt + 1);
             }
+            // Now, ticksdelta is the distance between two minor ticks
             this.ticksDelta = ticksDelta;
 
             if (ticksDelta < Mat.eps) {
@@ -754,6 +755,8 @@ define([
          */
         processTickPosition: function (coordsZero, tickPosition, ticksDelta, deltas) {
             var x, y, tickCoords, ti,
+                isLabelPosition,
+                ticksPerLabel = Type.evaluate(this.visProp.ticksperlabel),
                 labelVal = null;
 
             // Calculates tick coordinates
@@ -776,13 +779,19 @@ define([
             // a multiple of the number of minorticks+1
             tickCoords.major = Math.round(tickPosition / ticksDelta) % (Type.evaluate(this.visProp.minorticks) + 1) === 0;
 
+            if (!ticksPerLabel) {
+                // In case of null, 0 or false, majorTicks are labelled
+                ticksPerLabel = Type.evaluate(this.visProp.minorticks) + 1;
+            }
+            isLabelPosition = Math.round(tickPosition / ticksDelta) % (ticksPerLabel) === 0;
+
             // Compute the start position and the end position of a tick.
             // If both positions are out of the canvas, ti is empty.
             ti = this.createTickPath(tickCoords, tickCoords.major);
             if (ti.length === 3) {
                 this.ticks.push(ti);
-                if (tickCoords.major && Type.evaluate(this.visProp.drawlabels)) {
-                    // major tick label
+                if (isLabelPosition && Type.evaluate(this.visProp.drawlabels)) {
+                    // Create a label at this position
                     this.labelsData.push(
                         this.generateLabelData(
                             this.generateLabelText(tickCoords, coordsZero, labelVal),
@@ -1022,7 +1031,7 @@ define([
 
             // if value is Number
             if (Type.isNumber(value)) {
-                labelText = (Math.round(value * 1.e13) / 1.e13).toString();
+                labelText = (Math.round(value * 1.e11) / 1.e11).toString();
                 if (labelText.length > Type.evaluate(this.visProp.maxlabellength) ||
                         labelText.indexOf('e') !== -1) {
 

package/src/element/button.js

@@ -71,7 +71,7 @@ define([
      * @constructor
      * @type JXG.Text
      *
-     * @param {number,function_number,function_String_function} x,y,label,handler Parent elements for button elements.
+     * @param {number,function_number,function_String,function_function} x,y,label,handler Parent elements for button elements.
      *                     <p>
      *                     x and y are the coordinates of the lower left corner of the text box.
      *                      The position of the text is fixed,
@@ -205,18 +205,22 @@ define([
             //    "\nPossible parents are: [x, y, label, handler]");
         //}
 
+        // 1. Create empty button
         par = [parents[0], parents[1], '<button type="button" style="width:100%;"></button>'];
-
         t = board.create('text', par, attr);
         t.type = Type.OBJECT_TYPE_BUTTON;
 
         t.rendNodeButton = t.rendNode.childNodes[0];
         t.rendNodeButton.id = t.rendNode.id + '_button';
-        t.rendNodeButton.innerHTML = parents[2];
+        // t.rendNodeButton.innerHTML = parents[2];
 
         t.rendNodeTag = t.rendNodeButton; // Needed for unified treatment in setAttribute
         t.rendNodeTag.disabled = !!attr.disabled;
 
+        // 2. Set parents[2] (string|function) as content of the button.
+        // abstract.js selects the correct DOM element for the update
+        t.setText(parents[2]);
+
         // This sets the font-size of the button text
         t.visPropOld.fontsize = "0px";
         board.renderer.updateTextStyle(t, false);

package/src/element/checkbox.js

@@ -69,13 +69,13 @@ define([
      * @constructor
      * @type JXG.Text
      *
-     * @param {number,function_number,function_String_String} x,y,label Parent elements for checkbox elements.
+     * @param {number,function_number,function_String,function} x,y,label Parent elements for checkbox elements.
      *                     <p>
      *                     x and y are the coordinates of the lower left corner of the text box.
      *                      The position of the text is fixed,
      *                     x and y are numbers. The position is variable if x or y are functions.
      *                     <p>
-     *                     The label of the input element may be given as string.
+     *                     The label of the input element may be given as string or function.
      *                     <p>
      *                     The value of the checkbox can be controlled with the attribute <tt>checked</tt>
      *                     <p>The HTML node can be accessed with <tt>element.rendNodeCheckbox</tt>
@@ -184,7 +184,7 @@ define([
             '</span>'
             ];
 
-        //t = JXG.createText(board, par, attr);
+        // 1. Create checkbox element with empty label
         t = board.create('text', par, attr);
         t.type = Type.OBJECT_TYPE_CHECKBOX;
 
@@ -194,11 +194,15 @@ define([
         t.rendNodeTag = t.rendNodeCheckbox; // Needed for unified treatment in setAttribute
         t.rendNodeTag.disabled = !!attr.disabled;
 
-        t.rendNodeLabel.innerHTML = parents[2];
+        // t.rendNodeLabel.innerHTML = parents[2];
         t.rendNodeCheckbox.id = t.rendNode.id + '_checkbox';
         t.rendNodeLabel.id = t.rendNode.id + '_label';
         t.rendNodeLabel.setAttribute('for', t.rendNodeCheckbox.id);
 
+        // 2. Set parents[2] (string|function) as label of the checkbox element.
+        // abstract.js selects the correct DOM element for the update
+        t.setText(parents[2]);
+
         // This sets the font-size of the checkbox itself
         t.visPropOld.fontsize = "0px";
         board.renderer.updateTextStyle(t, false);