jsxgraph 1.4.2 → 1.4.3

package/src/base/polygon.js

@@ -559,8 +559,35 @@ define([
 
         /**
          * Add more points to the polygon. The new points will be inserted at the end.
-         * @param {JXG.Point} p Arbitrary number of points
+         * The attributes of new border segments are set to the same values
+         * as those used when the polygon was created.
+         * If new vertices are supplied by coordinates, the default attributes of polygon
+         * vertices are taken as their attributes. Therefore, the visual attributes of
+         * new vertices and borders may have to be adapted afterwards.
+         * @param {JXG.Point} p Arbitrary number of points or coordinate arrays
          * @returns {JXG.Polygon} Reference to the polygon
+         * @example
+         * const board = JXG.JSXGraph.initBoard('jxgbox', {axis:true});
+         * var pg = board.create('polygon', [[1,2], [3,4], [-3,1]], {hasInnerPoints: true});
+         * var newPoint = board.create('point', [-1, -1]);
+         * var newPoint2 = board.create('point', [-1, -2]);
+         * pg.addPoints(newPoint, newPoint2, [1, -2]);
+         *
+         * </pre><div id="JXG70eb0fd2-d20f-4ba9-9ab6-0eac92aabfa5" class="jxgbox" style="width: 300px; height: 300px;"></div>
+         * <script type="text/javascript">
+         *     (function() {
+         *         var board = JXG.JSXGraph.initBoard('JXG70eb0fd2-d20f-4ba9-9ab6-0eac92aabfa5',
+         *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+         *     const board = JXG.JSXGraph.initBoard('jxgbox', {axis:true});
+         *     var pg = board.create('polygon', [[1,2], [3,4], [-3,1]], {hasInnerPoints: true});
+         *     var newPoint = board.create('point', [-1, -1]);
+         *     var newPoint2 = board.create('point', [-1, -2]);
+         *     pg.addPoints(newPoint, newPoint2, [1, -2]);
+         *
+         *     })();
+         *
+         * </script><pre>
+         *
          */
         addPoints: function (p) {
             var args = Array.prototype.slice.call(arguments);
@@ -569,44 +596,72 @@ define([
         },
 
         /**
-         * Adds more points to the vertex list of the polygon, starting with index <tt><i</tt>
-         * @param {Number} idx The position where the new vertices are inserted, starting with 0.
-         * @param {JXG.Point} p Arbitrary number of points to insert.
+         * Insert points to the vertex list of the polygon after index <tt><idx</tt>.
+         * The attributes of new border segments are set to the same values
+         * as those used when the polygon was created.
+         * If new vertices are supplied by coordinates, the default attributes of polygon
+         * vertices are taken as their attributes. Therefore, the visual attributes of
+         * new vertices and borders may have to be adapted afterwards.
+         *
+         * @param {Number} idx The position after which the new vertices are inserted.
+         * Setting idx to -1 inserts the new points at the front, i.e. at position 0.
+         * @param {JXG.Point} p Arbitrary number of points or coordinate arrays to insert.
          * @returns {JXG.Polygon} Reference to the polygon object
+         *
+         * @example
+         * const board = JXG.JSXGraph.initBoard('jxgbox', {axis:true});
+         * var pg = board.create('polygon', [[1,2], [3,4], [-3,1]], {hasInnerPoints: true});
+         * var newPoint = board.create('point', [-1, -1]);
+         * pg.insertPoints(0, newPoint, newPoint, [1, -2]);
+         *
+         * </pre><div id="JXG17b84b2a-a851-4e3f-824f-7f6a60f166ca" class="jxgbox" style="width: 300px; height: 300px;"></div>
+         * <script type="text/javascript">
+         *     (function() {
+         *         var board = JXG.JSXGraph.initBoard('JXG17b84b2a-a851-4e3f-824f-7f6a60f166ca',
+         *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
+         *     const board = JXG.JSXGraph.initBoard('jxgbox', {axis:true});
+         *     var pg = board.create('polygon', [[1,2], [3,4], [-3,1]], {hasInnerPoints: true});
+         *     var newPoint = board.create('point', [-1, -1]);
+         *     pg.insertPoints(0, newPoint, newPoint, [1, -2]);
+         *
+         *     })();
+         *
+         * </script><pre>
+         *
          */
         insertPoints: function (idx, p) {
-            var i, npoints = [], tmp;
+            var i, le;
 
             if (arguments.length === 0) {
                 return this;
             }
 
 
-            if (idx < 0 || idx > this.vertices.length - 2) {
+            if (idx < -1 || idx > this.vertices.length - 2) {
                 return this;
             }
 
-            for (i = 1; i < arguments.length; i++) {
-                if (Type.isPoint(arguments[i])) {
-                    npoints.push(arguments[i]);
-                }
+            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];
             }
-
-            tmp = this.vertices.slice(0, idx + 1).concat(npoints);
-            this.vertices = tmp.concat(this.vertices.slice(idx + 1));
-
             if (this.withLines) {
-                tmp = this.borders.slice(0, idx);
-                this.board.removeObject(this.borders[idx]);
-
-                for (i = 0; i < npoints.length; i++) {
-                    tmp.push(this.board.create('segment', [this.vertices[idx + i], this.vertices[idx + i + 1]], this.attr_line));
+                if (idx < 0) {
+                    this.borders[this.borders.length - 1].point2 = this.vertices[this.vertices.length - 1];
+                } else {
+                    this.borders[idx].point2 = this.vertices[idx + 1];
+                }
+                for (i = idx + 1; i < idx + 1 + le; i++) {
+                    this.borders.splice(i, 0,
+                        this.board.create('segment', [this.vertices[i], this.vertices[i + 1]], this.attr_line)
+                    );
                 }
-
-                tmp.push(this.board.create('segment', [this.vertices[idx + npoints.length], this.vertices[idx + npoints.length + 1]], this.attr_line));
-                this.borders = tmp.concat(this.borders.slice(idx + 1));
             }
-
             this.board.update();
 
             return this;
@@ -621,7 +676,7 @@ define([
             var i, j, idx, nvertices = [], nborders = [],
                 nidx = [], partition = [];
 
-            // partition:
+            // Partition:
             // in order to keep the borders which could be recycled, we have to partition
             // the set of removed points. I.e. if the points 1, 2, 5, 6, 7, 10 are removed,
             // the partitions are
@@ -629,10 +684,10 @@ 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
+            // Remove the last vertex which is identical to the first
             this.vertices = this.vertices.slice(0, this.vertices.length - 1);
 
-            // collect all valid parameters as indices in nidx
+            // Collect all valid parameters as indices in nidx
             for (i = 0; i < arguments.length; i++) {
                 idx = arguments[i];
                 if (Type.isPoint(idx)) {
@@ -644,22 +699,22 @@ define([
                 }
             }
 
-            // remove the polygon from each removed point's children
+            // Remove the polygon from each removed point's children
             for (i = 0; i < nidx.length; i++) {
                 this.vertices[nidx[i]].removeChild(this);
             }
 
-            // sort the elements to be eliminated
+            // Sort the elements to be eliminated
             nidx = nidx.sort();
             nvertices = this.vertices.slice();
             nborders = this.borders.slice();
 
-            // initialize the partition
+            // Initialize the partition
             if (this.withLines) {
                 partition.push([nidx[nidx.length - 1]]);
             }
 
-            // run through all existing vertices and copy all remaining ones to nvertices
+            // Run through all existing vertices and copy all remaining ones to nvertices,
             // compute the partition
             for (i = nidx.length - 1; i > -1; i--) {
                 nvertices[nidx[i]] = -1;
@@ -670,12 +725,12 @@ define([
                 }
             }
 
-            // finalize the partition computation
+            // Finalize the partition computation
             if (this.withLines) {
                 partition[partition.length - 1][1] = nidx[0];
             }
 
-            // update vertices
+            // Update vertices
             this.vertices = [];
             for (i = 0; i < nvertices.length; i++) {
                 if (Type.isPoint(nvertices[i])) {
@@ -686,7 +741,7 @@ define([
                 this.vertices.push(this.vertices[0]);
             }
 
-            // delete obsolete and create missing borders
+            // Delete obsolete and create missing borders
             if (this.withLines) {
                 for (i = 0; i < partition.length; i++) {
                     for (j = partition[i][1] - 1; j < partition[i][0] + 1; j++) {

package/src/base/ticks.js

@@ -1267,6 +1267,8 @@ define([
                     attr.id = this.id + ld.i + 'Label' + this.labelCounter;
 
                     label = Text.createText(this.board, [ld.x, ld.y, ld.t], attr);
+                    this.addChild(label);
+                    label.setParents(this);
                     label.isDraggable = false;
                     label.dump = false;
                     this.labels.push(label);

package/src/element/composition.js

@@ -1375,7 +1375,7 @@ define([
     };
 
     /**
-     * @class Bisector lines are similar to {@link Bisector} but takes two lines as parent elements. The resulting element is
+     * @class Bisector lines are similar to {@link Bisector} but take two lines as parent elements. The resulting element is
      * a composition of two lines.
      * @pseudo
      * @constructor

package/src/element/slider.js

@@ -463,6 +463,10 @@ define([
         p2.dump = false;
         l1.dump = false;
         l2.dump = false;
+        if (withText) {
+            t.dump = false;
+        }
+
 
         p3.elType = 'slider';
         p3.parents = parents;
@@ -480,6 +484,14 @@ define([
             p3.inherits.push(ti);
         }
 
+        p3.getParents = function() {
+            return [
+                this.point1.coords.usrCoords.slice(1),
+                this.point2.coords.usrCoords.slice(1),
+                [this._smin, this.position * (this._smax - this._smin) + this._smin, this._smax]
+            ];
+        };
+
         p3.baseline.on('up', function(evt) {
             var pos, c;
 

package/src/loadjsxgraph.js

@@ -55,10 +55,9 @@ var JXG = {},
     ////                                                                  ////
     ////             Attention! Slows down the loading time!              ////
     //////////////////////////////////////////////////////////////////////////
-    var preventCachingFiles = true;
-
-    // check and table are initialized at the end of the life
-    var table,
+    var preventCachingFiles = true,
+        // check and table are initialized at the end of the life
+        table,
         waitlist = [],
         checkwaitlist = true,
         checkJXG = function () {
@@ -146,6 +145,9 @@ var JXG = {},
     ////////////////////////////////////////////////////////////////////////////////
 
     JXG.Load = (function () {
+        var requirePathLocation = 'href',
+        allowDocumentWrite = true;
+
         function createHTMLElement(tagName, attr) {
             var el = document.createElement(tagName), i,
                 a_name, a_value, a_object;
@@ -162,14 +164,10 @@ var JXG = {},
             return el;
         }
 
-        var allowDocumentWrite = true;
-
         window.onload = function () {
             allowDocumentWrite = false;
         };
 
-        var requirePathLocation = 'href';
-
         return {
             requirePath: window.location.href,
 
@@ -298,7 +296,7 @@ var JXG = {},
                     xhr.open('POST', url, true);
                     xhr.send();
                 }(file));
-            },
+            }
         };
     })();
 
@@ -307,7 +305,7 @@ var JXG = {},
     ////////////////////////////////////////////////////////////////////////////////
 
     // Has to be a String for Makefile!
-    JXG.Load.baseFiles = 'jxg,base/constants,utils/type,utils/xml,utils/env,utils/event,utils/expect,utils/color,math/probfuncs,math/math,math/ia,math/extrapolate,math/numerics,math/nlp,math/plot,math/metapost,math/statistics,math/symbolic,math/geometry,math/clip,math/poly,math/complex,renderer/abstract,renderer/no,reader/file,parser/geonext,base/board,options,jsxgraph,base/element,base/coordselement,base/coords,base/point,base/line,base/group,base/circle,element/conic,base/polygon,base/curve,element/arc,element/sector,base/composition,element/composition,base/text,base/image,element/slider,element/measure,base/chart,base/transformation,base/turtle,base/ticks,utils/zip,utils/base64,utils/uuid,utils/encoding,server/server,element/locus,parser/datasource,parser/ca,parser/jessiecode,utils/dump,renderer/svg,renderer/vml,renderer/canvas,renderer/no,element/comb,element/slopetriangle,math/qdt,element/checkbox,element/input,element/button,base/foreignobject';
+    JXG.Load.baseFiles = 'jxg,base/constants,utils/type,utils/xml,utils/env,utils/event,utils/expect,utils/color,math/probfuncs,math/math,math/ia,math/extrapolate,math/numerics,math/nlp,math/plot,math/metapost,math/statistics,math/symbolic,math/geometry,math/clip,math/poly,math/complex,renderer/abstract,renderer/no,reader/file,parser/geonext,base/board,options,jsxgraph,base/element,base/coordselement,base/coords,base/point,base/line,base/group,base/circle,element/conic,base/polygon,base/curve,element/arc,element/sector,base/composition,element/composition,base/text,base/image,element/slider,element/measure,base/chart,base/transformation,base/turtle,base/ticks,utils/zip,utils/base64,utils/uuid,utils/encoding,server/server,element/locus,parser/datasource,parser/ca,parser/jessiecode,utils/dump,renderer/svg,renderer/vml,renderer/canvas,renderer/no,element/comb,element/slopetriangle,math/qdt,element/checkbox,element/input,element/button,base/foreignobject,options3d,3d/threed,3d/view3d,3d/point3d,3d/curve3d,3d/surface3d,3d/linspace3d,3d/box3d';
     JXG.Load.setRequirePathToScriptFile('loadjsxgraph.js');
     JXG.Load.JSfiles(JXG.Load.baseFiles.split(','), preventCachingFiles);
     JXG.Load.baseFiles = null;
@@ -403,6 +401,14 @@ var JXG = {},
         'utils/type': checkJXG,
         'utils/uuid': makeCheck('Util'),
         'utils/xml': makeCheck('XML'),
-        'utils/zip': makeCheck('Util')
+        'utils/zip': makeCheck('Util'),
+
+        '3d/threed': checkJXG,
+        '3d/view3d': checkJXG,
+        '3d/point3d': checkJXG,
+        '3d/curve3d': checkJXG,
+        '3d/surface3d': checkJXG,
+        '3d/linspace3d': checkJXG
+
     };
 }());

package/src/math/geometry.js

@@ -2707,7 +2707,86 @@ define([
                 };
 
             return [makeFct('X', 'cos'), makeFct('Y', 'sin'), 0, pi2];
-        }
+        },
+
+
+        meet3Planes: function (n1, d1, n2, d2, n3, d3) {
+            var p = [0, 0, 0],
+                n31, n12, n23, denom,
+                i;
+
+            n31 = Mat.crossProduct(n3, n1);
+            n12 = Mat.crossProduct(n1, n2);
+            n23 = Mat.crossProduct(n2, n3);
+            denom = Mat.innerProduct(n1, n23, 3);
+            for (i = 0; i < 3; i++) {
+                p[i] = (d1 * n23[i] + d2 * n31[i] + d3 * n12[i]) / denom;
+            }
+            return p;
+        },
+
+
+        meetPlanePlane: function (v11, v12, v21, v22) {
+            var i, no1, no2,
+                v = [0, 0, 0],
+                w = [0, 0, 0];
+
+            for (i = 0; i < 3; i++) {
+                v[i] = Type.evaluate(v11[i]);
+                w[i] = Type.evaluate(v12[i]);
+            }
+            no1 = Mat.crossProduct(v, w);
+
+            for (i = 0; i < 3; i++) {
+                v[i] = Type.evaluate(v21[i]);
+                w[i] = Type.evaluate(v22[i]);
+            }
+            no2 = Mat.crossProduct(v, w);
+
+            return Mat.crossProduct(no1, no2);
+        },
+
+        project3DTo3DPlane: function (point, normal, foot) {
+            // TODO: homogeneous 3D coordinates
+            var sol = [0, 0, 0],
+                le, d1, d2, lbda;
+
+            foot = foot || [0, 0, 0];
+
+            le = Mat.norm(normal);
+            d1 = Mat.innerProduct(point, normal, 3);
+            d2 = Mat.innerProduct(foot, normal, 3);
+            // (point - lbda * normal / le) * normal / le == foot * normal / le
+            // => (point * normal - foot * normal) ==  lbda * le
+            lbda = (d1 - d2) / le;
+            sol = Mat.axpy(-lbda, normal, point);
+
+            return sol;
+        },
+
+        getPlaneBounds: function (v1, v2, q, s, e) {
+            var s1, s2, e1, e2, mat, rhs, sol;
+
+            if (v1[2] + v2[0] !== 0) {
+                mat = [
+                    [v1[0], v2[0]],
+                    [v1[1], v2[1]]
+                ];
+                rhs = [s - q[0], s - q[1]];
+
+                sol = Numerics.Gauss(mat, rhs);
+                s1 = sol[0];
+                s2 = sol[1];
+
+                rhs = [e - q[0], e - q[1]];
+                sol = Numerics.Gauss(mat, rhs);
+                e1 = sol[0];
+                e2 = sol[1];
+                return [s1, e1, s2, e2];
+            }
+            return null;
+        },
+
     });
 
     return Mat.Geometry;

package/src/math/math.js

@@ -466,6 +466,15 @@ define(['jxg', 'utils/type'], function (JXG, Type) {
             return Math.sqrt(sum);
         },
 
+        axpy: function (a, x, y) {
+            var i, le = x.length,
+                p = [];
+            for (i = 0; i < le; i++) {
+                p[i] = a * x[i] + y[i];
+            }
+            return p;
+        },
+
         /**
          * Compute the factorial of a positive integer. If a non-integer value
          * is given, the fraction will be ignored.

package/src/options.js

@@ -783,6 +783,10 @@ define([
              *   visible: false      // Initial visibility. Should be set to false always
              * }
              * </pre>
+             * <p>
+             * Board events triggered by selection manipulation:
+             * 'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting',
+             * 'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'.
              *
              * @example
              * board.on('stopselecting', function(){
@@ -796,14 +800,10 @@ define([
              * });
              *
              * @name JXG.Board#selection
-             * @see JXG.Board#startselecting
-             * @see JXG.Board#stopselecting
-             * @see JXG.Board#mousestartselecting
-             * @see JXG.Board#pointerstartselecting
-             * @see JXG.Board#touchstartselecting
-             * @see JXG.Board#mousestopselecting
-             * @see JXG.Board#pointerstopselecting
-             * @see JXG.Board#touchstopselecting
+             *
+             * @see JXG.Board#startSelectionMode
+             * @see JXG.Board#stopSelectionMode
+             *
              * @type Object
              * @default
              */

package/src/options3d.js

@@ -0,0 +1,123 @@
+/*global JXG:true, define: true*/
+
+define([
+    'jxg', 'options'
+], function (JXG, Options) {
+
+    "use strict";
+
+    JXG.extend(Options, {
+
+        infobox: {
+            strokeColor: 'black'
+        },
+
+        axes3d: {
+            axesPosition: 'center',  // Possible values: 'center', otherwise: border
+
+            // Main axes
+            xAxis: { visible: true, point2: {name: 'x'}},
+            yAxis: { visible: true, point2: {name: 'y'}},
+            zAxis: { visible: true, point2: {name: 'z'}},
+
+            // Planes
+            xPlaneRear: { visible: true, layer: 0, mesh3d: { layer: 1 } },
+            yPlaneRear: { visible: true, layer: 0, mesh3d: { layer: 1 } },
+            zPlaneRear: { visible: true, layer: 0, mesh3d: { layer: 1 } },
+
+            xPlaneFront: { visible: false, layer: 0, mesh3d: { layer: 1 } },
+            yPlaneFront: { visible: false, layer: 0, mesh3d: { layer: 1 } },
+            zPlaneFront: { visible: false, layer: 0, mesh3d: { layer: 1 } },
+
+            // Axes on the planes
+            xPlaneRearYAxis: {visible: true, strokeColor: '#888888'},
+            xPlaneRearZAxis: {visible: true, strokeColor: '#888888'},
+            xPlaneFrontYAxis: {visible: false, strokeColor: '#888888'},
+            xPlaneFrontZAxis: {visible: false, strokeColor: '#888888'},
+
+            yPlaneRearXAxis: {visible: true, strokeColor: '#888888'},
+            yPlaneRearZAxis: {visible: true, strokeColor: '#888888'},
+            yPlaneFrontXAxis: {visible: false, strokeColor: '#888888'},
+            yPlaneFrontZAxis: {visible: false, strokeColor: '#888888'},
+
+            zPlaneRearXAxis: {visible: true, strokeColor: '#888888'},
+            zPlaneRearYAxis: {visible: true, strokeColor: '#888888'},
+            zPlaneFrontXAxis: {visible: false, strokeColor: '#888888'},
+            zPlaneFrontYAxis: {visible: false, strokeColor: '#888888'}
+
+        },
+
+        axis3d: {
+            highlight: false,
+            strokecolor: 'black',
+            strokeWidth: 1,
+            tabindex: null,
+
+            point1: { visible: false, name: '' },
+            point2: { visible: false, name: '', label: { visible: true } }
+        },
+
+        mesh3d: {
+            strokeWidth: 1,
+            strokeColor: '#9a9a9a',
+            strokeOpacity: 0.6,
+            highlight: false,
+            fillColor: '#9a9a9a',
+            fillOpacity: 0.1,
+            tabindex: null,
+
+            visible: 'inherit'
+        },
+
+        line3d: {
+            strokeWidth: 1,
+            strokeColor: 'black',
+            fixed: true,
+            tabindex: null,
+
+            gradient: 'linear',
+            gradientSecondColor: '#ffffff',
+
+            point1: {visible: false, name: ''},
+            point2: {visible: false, name: ''}
+        },
+
+        plane3d: {
+            strokeWidth: 0,
+            strokeColor: 'black',
+            strokeOpacity: 1,
+            highlight: false,
+            tabindex: null,
+
+            gradient: 'linear',
+            gradientSecondColor: '#ffffff',
+            gradientAngle: Math.PI,
+            fillColor: '#a7a7a7',
+            fillOpacity: 0.6
+        },
+
+        point3d: {
+            strokeWidth: 0,
+            gradient: 'radial',
+            gradientSecondColor: '#555555',
+            fillColor: 'yellow',
+            highlightStrokeColor: '#555555'
+        },
+
+        surface3d: {
+            highlight: false,
+            tabindex: -1,
+            strokeWidth: 1,
+            stepsU: 30,
+            stepsV: 30
+        },
+
+        view3d: {
+            needsRegularUpdate: true
+        }
+
+    });
+
+    return JXG.Options;
+});
+

package/src/reader/sketch.js

@@ -886,7 +886,7 @@ Copyright 2008-2022
                             str1[i] = pn(step.args.p1[i]);
                         }
 
-                        set_str = 'point(' + str1.join(', ') + ') <<id: \'' + pid1 + '\', name: \'\', visible: false, ';
+                        set_str = 'point(' + str1.join(', ') + ') <<id: \'' + pid1 + '\', name: \'\', visible: false, isinfinit: true, ';
                         set_str += 'snaptogrid: false, snaptopoints: false, priv: true>>; ';
                         reset_str = 'remove(' + pid1 + '); ';
                     } else {
@@ -901,7 +901,7 @@ Copyright 2008-2022
                             str1[i] = pn(step.args.p2[i]);
                         }
 
-                        set_str += 'point(' + str1.join(', ') + ') <<id: \'' + pid2 + '\', name: \'\', visible: false, ';
+                        set_str += 'point(' + str1.join(', ') + ') <<id: \'' + pid2 + '\', name: \'\', visible: false, isinfinit: true, ';
                         set_str += 'snaptogrid: false, snaptopoints: false, priv: true>>; ';
                         reset_str = 'remove(' + pid2 + '); ' + reset_str;
                     } else {

package/src/utils/type.js

@@ -977,7 +977,7 @@ define([
             }
 
             // options from attributes
-            o = attributes;
+            o = (typeof attributes === 'object') ? attributes : {};
             isAvail = true;
             for (i = 3; i < len; i++) {
                 if (this.exists(o[arguments[i]])) {
@@ -1283,7 +1283,7 @@ define([
                 return html_sanitize(str, function () { return undefined; }, function (id) { return id; });
             }
 
-            if (str) {
+            if (str && typeof str === 'string') {
                 str = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
             }