mathjs 10.6.4 → 11.1.0

package/lib/esm/expression/node/OperatorNode.js

@@ -1,4 +1,5 @@
-import { isNode } from '../../utils/is.js';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isNode, isConstantNode, isOperatorNode, isParenthesisNode } from '../../utils/is.js';
 import { map } from '../../utils/array.js';
 import { escape } from '../../utils/string.js';
 import { getSafeProperty, isSafeMethod } from '../../utils/customs.js';
@@ -13,149 +14,29 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
   } = _ref;
 
   /**
-   * @constructor OperatorNode
-   * @extends {Node}
-   * An operator with two arguments, like 2+3
-   *
-   * @param {string} op           Operator name, for example '+'
-   * @param {string} fn           Function name, for example 'add'
-   * @param {Node[]} args         Operator arguments
-   * @param {boolean} [implicit]  Is this an implicit multiplication?
-   * @param {boolean} [isPercentage] Is this an percentage Operation?
-   */
-  function OperatorNode(op, fn, args, implicit, isPercentage) {
-    if (!(this instanceof OperatorNode)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    } // validate input
-
-
-    if (typeof op !== 'string') {
-      throw new TypeError('string expected for parameter "op"');
-    }
-
-    if (typeof fn !== 'string') {
-      throw new TypeError('string expected for parameter "fn"');
-    }
-
-    if (!Array.isArray(args) || !args.every(isNode)) {
-      throw new TypeError('Array containing Nodes expected for parameter "args"');
-    }
-
-    this.implicit = implicit === true;
-    this.isPercentage = isPercentage === true;
-    this.op = op;
-    this.fn = fn;
-    this.args = args || [];
-  }
-
-  OperatorNode.prototype = new Node();
-  OperatorNode.prototype.type = 'OperatorNode';
-  OperatorNode.prototype.isOperatorNode = true;
-  /**
-   * Compile a node into a JavaScript function.
-   * This basically pre-calculates as much as possible and only leaves open
-   * calculations which depend on a dynamic scope with variables.
-   * @param {Object} math     Math.js namespace with functions and constants.
-   * @param {Object} argNames An object with argument names as key and `true`
-   *                          as value. Used in the SymbolNode to optimize
-   *                          for arguments from user assigned functions
-   *                          (see FunctionAssignmentNode) or special symbols
-   *                          like `end` (see IndexNode).
-   * @return {function} Returns a function which can be called like:
-   *                        evalNode(scope: Object, args: Object, context: *)
+   * Returns true if the expression starts with a constant, under
+   * the current parenthesization:
+   * @param {Node} expression
+   * @param {string} parenthesis
+   * @return {boolean}
    */
+  function startsWithConstant(expr, parenthesis) {
+    var curNode = expr;
 
-  OperatorNode.prototype._compile = function (math, argNames) {
-    // validate fn
-    if (typeof this.fn !== 'string' || !isSafeMethod(math, this.fn)) {
-      if (!math[this.fn]) {
-        throw new Error('Function ' + this.fn + ' missing in provided namespace "math"');
-      } else {
-        throw new Error('No access to function "' + this.fn + '"');
+    if (parenthesis === 'auto') {
+      while (isParenthesisNode(curNode)) {
+        curNode = curNode.content;
       }
     }
 
-    var fn = getSafeProperty(math, this.fn);
-    var evalArgs = map(this.args, function (arg) {
-      return arg._compile(math, argNames);
-    });
-
-    if (evalArgs.length === 1) {
-      var evalArg0 = evalArgs[0];
-      return function evalOperatorNode(scope, args, context) {
-        return fn(evalArg0(scope, args, context));
-      };
-    } else if (evalArgs.length === 2) {
-      var _evalArg = evalArgs[0];
-      var evalArg1 = evalArgs[1];
-      return function evalOperatorNode(scope, args, context) {
-        return fn(_evalArg(scope, args, context), evalArg1(scope, args, context));
-      };
-    } else {
-      return function evalOperatorNode(scope, args, context) {
-        return fn.apply(null, map(evalArgs, function (evalArg) {
-          return evalArg(scope, args, context);
-        }));
-      };
-    }
-  };
-  /**
-   * Execute a callback for each of the child nodes of this node
-   * @param {function(child: Node, path: string, parent: Node)} callback
-   */
-
-
-  OperatorNode.prototype.forEach = function (callback) {
-    for (var i = 0; i < this.args.length; i++) {
-      callback(this.args[i], 'args[' + i + ']', this);
-    }
-  };
-  /**
-   * Create a new OperatorNode having it's childs be the results of calling
-   * the provided callback function for each of the childs of the original node.
-   * @param {function(child: Node, path: string, parent: Node): Node} callback
-   * @returns {OperatorNode} Returns a transformed copy of the node
-   */
-
-
-  OperatorNode.prototype.map = function (callback) {
-    var args = [];
+    if (isConstantNode(curNode)) return true;
 
-    for (var i = 0; i < this.args.length; i++) {
-      args[i] = this._ifNode(callback(this.args[i], 'args[' + i + ']', this));
+    if (isOperatorNode(curNode)) {
+      return startsWithConstant(curNode.args[0], parenthesis);
     }
 
-    return new OperatorNode(this.op, this.fn, args, this.implicit, this.isPercentage);
-  };
-  /**
-   * Create a clone of this node, a shallow copy
-   * @return {OperatorNode}
-   */
-
-
-  OperatorNode.prototype.clone = function () {
-    return new OperatorNode(this.op, this.fn, this.args.slice(0), this.implicit, this.isPercentage);
-  };
-  /**
-   * Check whether this is an unary OperatorNode:
-   * has exactly one argument, like `-a`.
-   * @return {boolean} Returns true when an unary operator node, false otherwise.
-   */
-
-
-  OperatorNode.prototype.isUnary = function () {
-    return this.args.length === 1;
-  };
-  /**
-   * Check whether this is a binary OperatorNode:
-   * has exactly two arguments, like `a + b`.
-   * @return {boolean} Returns true when a binary operator node, false otherwise.
-   */
-
-
-  OperatorNode.prototype.isBinary = function () {
-    return this.args.length === 2;
-  };
+    return false;
+  }
   /**
    * Calculate which parentheses are necessary. Gets an OperatorNode
    * (which is the root of the tree) and an Array of Nodes
@@ -173,7 +54,7 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
 
   function calculateNecessaryParentheses(root, parenthesis, implicit, args, latex) {
     // precedence of the root OperatorNode
-    var precedence = getPrecedence(root, parenthesis);
+    var precedence = getPrecedence(root, parenthesis, implicit);
     var associativity = getAssociativity(root, parenthesis);
 
     if (parenthesis === 'all' || args.length > 2 && root.getIdentifier() !== 'OperatorNode:add' && root.getIdentifier() !== 'OperatorNode:multiply') {
@@ -203,7 +84,7 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
         // unary operators
         {
           // precedence of the operand
-          var operandPrecedence = getPrecedence(args[0], parenthesis); // handle special cases for LaTeX, where some of the parentheses aren't needed
+          var operandPrecedence = getPrecedence(args[0], parenthesis, implicit, root); // handle special cases for LaTeX, where some of the parentheses aren't needed
 
           if (latex && operandPrecedence !== null) {
             var operandIdentifier;
@@ -252,7 +133,7 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
           var lhsParens; // left hand side needs parenthesis?
           // precedence of the left hand side
 
-          var lhsPrecedence = getPrecedence(args[0], parenthesis); // is the root node associative with the left hand side
+          var lhsPrecedence = getPrecedence(args[0], parenthesis, implicit, root); // is the root node associative with the left hand side
 
           var assocWithLhs = isAssociativeWith(root, args[0], parenthesis);
 
@@ -275,7 +156,7 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
           var rhsParens; // right hand side needs parenthesis?
           // precedence of the right hand side
 
-          var rhsPrecedence = getPrecedence(args[1], parenthesis); // is the root node associative with the right hand side?
+          var rhsPrecedence = getPrecedence(args[1], parenthesis, implicit, root); // is the root node associative with the right hand side?
 
           var assocWithRhs = isAssociativeWith(root, args[1], parenthesis);
 
@@ -341,7 +222,7 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
       default:
         if (root.getIdentifier() === 'OperatorNode:add' || root.getIdentifier() === 'OperatorNode:multiply') {
           result = args.map(function (arg) {
-            var argPrecedence = getPrecedence(arg, parenthesis);
+            var argPrecedence = getPrecedence(arg, parenthesis, implicit, root);
             var assocWithArg = isAssociativeWith(root, arg, parenthesis);
             var argAssociativity = getAssociativity(arg, parenthesis);
 
@@ -359,327 +240,483 @@ export var createOperatorNode = /* #__PURE__ */factory(name, dependencies, _ref
         }
 
         break;
-    } // handles an edge case of 'auto' parentheses with implicit multiplication of ConstantNode
-    // In that case print parentheses for ParenthesisNodes even though they normally wouldn't be
-    // printed.
-
+    } // Handles an edge case of parentheses with implicit multiplication
+    // of ConstantNode.
+    // In that case, parenthesize ConstantNodes that follow an unparenthesized
+    // expression, even though they normally wouldn't be printed.
 
-    if (args.length >= 2 && root.getIdentifier() === 'OperatorNode:multiply' && root.implicit && parenthesis === 'auto' && implicit === 'hide') {
-      result = args.map(function (arg, index) {
-        var isParenthesisNode = arg.getIdentifier() === 'ParenthesisNode';
 
-        if (result[index] || isParenthesisNode) {
-          // put in parenthesis?
-          return true;
+    if (args.length >= 2 && root.getIdentifier() === 'OperatorNode:multiply' && root.implicit && parenthesis !== 'all' && implicit === 'hide') {
+      for (var i = 1; i < result.length; ++i) {
+        if (startsWithConstant(args[i], parenthesis) && !result[i - 1] && (parenthesis !== 'keep' || !isParenthesisNode(args[i - 1]))) {
+          result[i] = true;
         }
-
-        return false;
-      });
+      }
     }
 
     return result;
   }
-  /**
-   * Get string representation.
-   * @param {Object} options
-   * @return {string} str
-   */
 
+  class OperatorNode extends Node {
+    /**
+     * @constructor OperatorNode
+     * @extends {Node}
+     * An operator with two arguments, like 2+3
+     *
+     * @param {string} op           Operator name, for example '+'
+     * @param {string} fn           Function name, for example 'add'
+     * @param {Node[]} args         Operator arguments
+     * @param {boolean} [implicit]  Is this an implicit multiplication?
+     * @param {boolean} [isPercentage] Is this an percentage Operation?
+     */
+    constructor(op, fn, args, implicit, isPercentage) {
+      super(); // validate input
+
+      if (typeof op !== 'string') {
+        throw new TypeError('string expected for parameter "op"');
+      }
 
-  OperatorNode.prototype._toString = function (options) {
-    var parenthesis = options && options.parenthesis ? options.parenthesis : 'keep';
-    var implicit = options && options.implicit ? options.implicit : 'hide';
-    var args = this.args;
-    var parens = calculateNecessaryParentheses(this, parenthesis, implicit, args, false);
-
-    if (args.length === 1) {
-      // unary operators
-      var assoc = getAssociativity(this, parenthesis);
-      var operand = args[0].toString(options);
+      if (typeof fn !== 'string') {
+        throw new TypeError('string expected for parameter "fn"');
+      }
 
-      if (parens[0]) {
-        operand = '(' + operand + ')';
-      } // for example for "not", we want a space between operand and argument
+      if (!Array.isArray(args) || !args.every(isNode)) {
+        throw new TypeError('Array containing Nodes expected for parameter "args"');
+      }
 
+      this.implicit = implicit === true;
+      this.isPercentage = isPercentage === true;
+      this.op = op;
+      this.fn = fn;
+      this.args = args || [];
+    }
 
-      var opIsNamed = /[a-zA-Z]+/.test(this.op);
+    get type() {
+      return name;
+    }
 
-      if (assoc === 'right') {
-        // prefix operator
-        return this.op + (opIsNamed ? ' ' : '') + operand;
-      } else if (assoc === 'left') {
-        // postfix
-        return operand + (opIsNamed ? ' ' : '') + this.op;
-      } // fall back to postfix
+    get isOperatorNode() {
+      return true;
+    }
+    /**
+     * Compile a node into a JavaScript function.
+     * This basically pre-calculates as much as possible and only leaves open
+     * calculations which depend on a dynamic scope with variables.
+     * @param {Object} math     Math.js namespace with functions and constants.
+     * @param {Object} argNames An object with argument names as key and `true`
+     *                          as value. Used in the SymbolNode to optimize
+     *                          for arguments from user assigned functions
+     *                          (see FunctionAssignmentNode) or special symbols
+     *                          like `end` (see IndexNode).
+     * @return {function} Returns a function which can be called like:
+     *                        evalNode(scope: Object, args: Object, context: *)
+     */
+
+
+    _compile(math, argNames) {
+      // validate fn
+      if (typeof this.fn !== 'string' || !isSafeMethod(math, this.fn)) {
+        if (!math[this.fn]) {
+          throw new Error('Function ' + this.fn + ' missing in provided namespace "math"');
+        } else {
+          throw new Error('No access to function "' + this.fn + '"');
+        }
+      }
 
+      var fn = getSafeProperty(math, this.fn);
+      var evalArgs = map(this.args, function (arg) {
+        return arg._compile(math, argNames);
+      });
 
-      return operand + this.op;
-    } else if (args.length === 2) {
-      var lhs = args[0].toString(options); // left hand side
+      if (evalArgs.length === 1) {
+        var evalArg0 = evalArgs[0];
+        return function evalOperatorNode(scope, args, context) {
+          return fn(evalArg0(scope, args, context));
+        };
+      } else if (evalArgs.length === 2) {
+        var _evalArg = evalArgs[0];
+        var evalArg1 = evalArgs[1];
+        return function evalOperatorNode(scope, args, context) {
+          return fn(_evalArg(scope, args, context), evalArg1(scope, args, context));
+        };
+      } else {
+        return function evalOperatorNode(scope, args, context) {
+          return fn.apply(null, map(evalArgs, function (evalArg) {
+            return evalArg(scope, args, context);
+          }));
+        };
+      }
+    }
+    /**
+     * Execute a callback for each of the child nodes of this node
+     * @param {function(child: Node, path: string, parent: Node)} callback
+     */
 
-      var rhs = args[1].toString(options); // right hand side
 
-      if (parens[0]) {
-        // left hand side in parenthesis?
-        lhs = '(' + lhs + ')';
+    forEach(callback) {
+      for (var i = 0; i < this.args.length; i++) {
+        callback(this.args[i], 'args[' + i + ']', this);
       }
+    }
+    /**
+     * Create a new OperatorNode whose children are the results of calling
+     * the provided callback function for each child of the original node.
+     * @param {function(child: Node, path: string, parent: Node): Node} callback
+     * @returns {OperatorNode} Returns a transformed copy of the node
+     */
 
-      if (parens[1]) {
-        // right hand side in parenthesis?
-        rhs = '(' + rhs + ')';
-      }
 
-      if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
-        return lhs + ' ' + rhs;
+    map(callback) {
+      var args = [];
+
+      for (var i = 0; i < this.args.length; i++) {
+        args[i] = this._ifNode(callback(this.args[i], 'args[' + i + ']', this));
       }
 
-      return lhs + ' ' + this.op + ' ' + rhs;
-    } else if (args.length > 2 && (this.getIdentifier() === 'OperatorNode:add' || this.getIdentifier() === 'OperatorNode:multiply')) {
-      var stringifiedArgs = args.map(function (arg, index) {
-        arg = arg.toString(options);
+      return new OperatorNode(this.op, this.fn, args, this.implicit, this.isPercentage);
+    }
+    /**
+     * Create a clone of this node, a shallow copy
+     * @return {OperatorNode}
+     */
 
-        if (parens[index]) {
-          // put in parenthesis?
-          arg = '(' + arg + ')';
-        }
 
-        return arg;
-      });
+    clone() {
+      return new OperatorNode(this.op, this.fn, this.args.slice(0), this.implicit, this.isPercentage);
+    }
+    /**
+     * Check whether this is an unary OperatorNode:
+     * has exactly one argument, like `-a`.
+     * @return {boolean}
+     *     Returns true when an unary operator node, false otherwise.
+     */
 
-      if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
-        return stringifiedArgs.join(' ');
-      }
 
-      return stringifiedArgs.join(' ' + this.op + ' ');
-    } else {
-      // fallback to formatting as a function call
-      return this.fn + '(' + this.args.join(', ') + ')';
+    isUnary() {
+      return this.args.length === 1;
     }
-  };
-  /**
-   * Get a JSON representation of the node
-   * @returns {Object}
-   */
+    /**
+     * Check whether this is a binary OperatorNode:
+     * has exactly two arguments, like `a + b`.
+     * @return {boolean}
+     *     Returns true when a binary operator node, false otherwise.
+     */
 
 
-  OperatorNode.prototype.toJSON = function () {
-    return {
-      mathjs: 'OperatorNode',
-      op: this.op,
-      fn: this.fn,
-      args: this.args,
-      implicit: this.implicit,
-      isPercentage: this.isPercentage
-    };
-  };
-  /**
-   * Instantiate an OperatorNode from its JSON representation
-   * @param {Object} json  An object structured like
-   *                       `{"mathjs": "OperatorNode", "op": "+", "fn": "add", "args": [...], "implicit": false, "isPercentage":false}`,
-   *                       where mathjs is optional
-   * @returns {OperatorNode}
-   */
+    isBinary() {
+      return this.args.length === 2;
+    }
+    /**
+     * Get string representation.
+     * @param {Object} options
+     * @return {string} str
+     */
 
 
-  OperatorNode.fromJSON = function (json) {
-    return new OperatorNode(json.op, json.fn, json.args, json.implicit, json.isPercentage);
-  };
-  /**
-   * Get HTML representation.
-   * @param {Object} options
-   * @return {string} str
-   */
+    _toString(options) {
+      var parenthesis = options && options.parenthesis ? options.parenthesis : 'keep';
+      var implicit = options && options.implicit ? options.implicit : 'hide';
+      var args = this.args;
+      var parens = calculateNecessaryParentheses(this, parenthesis, implicit, args, false);
 
+      if (args.length === 1) {
+        // unary operators
+        var assoc = getAssociativity(this, parenthesis);
+        var operand = args[0].toString(options);
 
-  OperatorNode.prototype.toHTML = function (options) {
-    var parenthesis = options && options.parenthesis ? options.parenthesis : 'keep';
-    var implicit = options && options.implicit ? options.implicit : 'hide';
-    var args = this.args;
-    var parens = calculateNecessaryParentheses(this, parenthesis, implicit, args, false);
+        if (parens[0]) {
+          operand = '(' + operand + ')';
+        } // for example for "not", we want a space between operand and argument
 
-    if (args.length === 1) {
-      // unary operators
-      var assoc = getAssociativity(this, parenthesis);
-      var operand = args[0].toHTML(options);
 
-      if (parens[0]) {
-        operand = '<span class="math-parenthesis math-round-parenthesis">(</span>' + operand + '<span class="math-parenthesis math-round-parenthesis">)</span>';
-      }
+        var opIsNamed = /[a-zA-Z]+/.test(this.op);
 
-      if (assoc === 'right') {
-        // prefix operator
-        return '<span class="math-operator math-unary-operator math-lefthand-unary-operator">' + escape(this.op) + '</span>' + operand;
-      } else {
-        // postfix when assoc === 'left' or undefined
-        return operand + '<span class="math-operator math-unary-operator math-righthand-unary-operator">' + escape(this.op) + '</span>';
-      }
-    } else if (args.length === 2) {
-      // binary operatoes
-      var lhs = args[0].toHTML(options); // left hand side
+        if (assoc === 'right') {
+          // prefix operator
+          return this.op + (opIsNamed ? ' ' : '') + operand;
+        } else if (assoc === 'left') {
+          // postfix
+          return operand + (opIsNamed ? ' ' : '') + this.op;
+        } // fall back to postfix
 
-      var rhs = args[1].toHTML(options); // right hand side
 
-      if (parens[0]) {
-        // left hand side in parenthesis?
-        lhs = '<span class="math-parenthesis math-round-parenthesis">(</span>' + lhs + '<span class="math-parenthesis math-round-parenthesis">)</span>';
-      }
+        return operand + this.op;
+      } else if (args.length === 2) {
+        var lhs = args[0].toString(options); // left hand side
 
-      if (parens[1]) {
-        // right hand side in parenthesis?
-        rhs = '<span class="math-parenthesis math-round-parenthesis">(</span>' + rhs + '<span class="math-parenthesis math-round-parenthesis">)</span>';
-      }
+        var rhs = args[1].toString(options); // right hand side
 
-      if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
-        return lhs + '<span class="math-operator math-binary-operator math-implicit-binary-operator"></span>' + rhs;
-      }
+        if (parens[0]) {
+          // left hand side in parenthesis?
+          lhs = '(' + lhs + ')';
+        }
 
-      return lhs + '<span class="math-operator math-binary-operator math-explicit-binary-operator">' + escape(this.op) + '</span>' + rhs;
-    } else {
-      var stringifiedArgs = args.map(function (arg, index) {
-        arg = arg.toHTML(options);
+        if (parens[1]) {
+          // right hand side in parenthesis?
+          rhs = '(' + rhs + ')';
+        }
 
-        if (parens[index]) {
-          // put in parenthesis?
-          arg = '<span class="math-parenthesis math-round-parenthesis">(</span>' + arg + '<span class="math-parenthesis math-round-parenthesis">)</span>';
+        if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
+          return lhs + ' ' + rhs;
         }
 
-        return arg;
-      });
+        return lhs + ' ' + this.op + ' ' + rhs;
+      } else if (args.length > 2 && (this.getIdentifier() === 'OperatorNode:add' || this.getIdentifier() === 'OperatorNode:multiply')) {
+        var stringifiedArgs = args.map(function (arg, index) {
+          arg = arg.toString(options);
+
+          if (parens[index]) {
+            // put in parenthesis?
+            arg = '(' + arg + ')';
+          }
+
+          return arg;
+        });
 
-      if (args.length > 2 && (this.getIdentifier() === 'OperatorNode:add' || this.getIdentifier() === 'OperatorNode:multiply')) {
         if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
-          return stringifiedArgs.join('<span class="math-operator math-binary-operator math-implicit-binary-operator"></span>');
+          return stringifiedArgs.join(' ');
         }
 
-        return stringifiedArgs.join('<span class="math-operator math-binary-operator math-explicit-binary-operator">' + escape(this.op) + '</span>');
+        return stringifiedArgs.join(' ' + this.op + ' ');
       } else {
         // fallback to formatting as a function call
-        return '<span class="math-function">' + escape(this.fn) + '</span><span class="math-paranthesis math-round-parenthesis">(</span>' + stringifiedArgs.join('<span class="math-separator">,</span>') + '<span class="math-paranthesis math-round-parenthesis">)</span>';
+        return this.fn + '(' + this.args.join(', ') + ')';
       }
     }
-  };
-  /**
-   * Get LaTeX representation
-   * @param {Object} options
-   * @return {string} str
-   */
+    /**
+     * Get a JSON representation of the node
+     * @returns {Object}
+     */
+
+
+    toJSON() {
+      return {
+        mathjs: name,
+        op: this.op,
+        fn: this.fn,
+        args: this.args,
+        implicit: this.implicit,
+        isPercentage: this.isPercentage
+      };
+    }
+    /**
+     * Instantiate an OperatorNode from its JSON representation
+     * @param {Object} json
+     *     An object structured like
+     *     ```
+     *     {"mathjs": "OperatorNode",
+     *      "op": "+", "fn": "add", "args": [...],
+     *      "implicit": false,
+     *      "isPercentage":false}
+     *     ```
+     *     where mathjs is optional
+     * @returns {OperatorNode}
+     */
+
+
+    static fromJSON(json) {
+      return new OperatorNode(json.op, json.fn, json.args, json.implicit, json.isPercentage);
+    }
+    /**
+     * Get HTML representation.
+     * @param {Object} options
+     * @return {string} str
+     */
 
 
-  OperatorNode.prototype._toTex = function (options) {
-    var parenthesis = options && options.parenthesis ? options.parenthesis : 'keep';
-    var implicit = options && options.implicit ? options.implicit : 'hide';
-    var args = this.args;
-    var parens = calculateNecessaryParentheses(this, parenthesis, implicit, args, true);
-    var op = latexOperators[this.fn];
-    op = typeof op === 'undefined' ? this.op : op; // fall back to using this.op
+    toHTML(options) {
+      var parenthesis = options && options.parenthesis ? options.parenthesis : 'keep';
+      var implicit = options && options.implicit ? options.implicit : 'hide';
+      var args = this.args;
+      var parens = calculateNecessaryParentheses(this, parenthesis, implicit, args, false);
 
-    if (args.length === 1) {
-      // unary operators
-      var assoc = getAssociativity(this, parenthesis);
-      var operand = args[0].toTex(options);
+      if (args.length === 1) {
+        // unary operators
+        var assoc = getAssociativity(this, parenthesis);
+        var operand = args[0].toHTML(options);
 
-      if (parens[0]) {
-        operand = "\\left(".concat(operand, "\\right)");
-      }
+        if (parens[0]) {
+          operand = '<span class="math-parenthesis math-round-parenthesis">(</span>' + operand + '<span class="math-parenthesis math-round-parenthesis">)</span>';
+        }
 
-      if (assoc === 'right') {
-        // prefix operator
-        return op + operand;
-      } else if (assoc === 'left') {
-        // postfix operator
-        return operand + op;
-      } // fall back to postfix
+        if (assoc === 'right') {
+          // prefix operator
+          return '<span class="math-operator math-unary-operator ' + 'math-lefthand-unary-operator">' + escape(this.op) + '</span>' + operand;
+        } else {
+          // postfix when assoc === 'left' or undefined
+          return operand + '<span class="math-operator math-unary-operator ' + 'math-righthand-unary-operator">' + escape(this.op) + '</span>';
+        }
+      } else if (args.length === 2) {
+        // binary operatoes
+        var lhs = args[0].toHTML(options); // left hand side
+
+        var rhs = args[1].toHTML(options); // right hand side
+
+        if (parens[0]) {
+          // left hand side in parenthesis?
+          lhs = '<span class="math-parenthesis math-round-parenthesis">(</span>' + lhs + '<span class="math-parenthesis math-round-parenthesis">)</span>';
+        }
+
+        if (parens[1]) {
+          // right hand side in parenthesis?
+          rhs = '<span class="math-parenthesis math-round-parenthesis">(</span>' + rhs + '<span class="math-parenthesis math-round-parenthesis">)</span>';
+        }
+
+        if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
+          return lhs + '<span class="math-operator math-binary-operator ' + 'math-implicit-binary-operator"></span>' + rhs;
+        }
 
+        return lhs + '<span class="math-operator math-binary-operator ' + 'math-explicit-binary-operator">' + escape(this.op) + '</span>' + rhs;
+      } else {
+        var stringifiedArgs = args.map(function (arg, index) {
+          arg = arg.toHTML(options);
 
-      return operand + op;
-    } else if (args.length === 2) {
-      // binary operators
-      var lhs = args[0]; // left hand side
+          if (parens[index]) {
+            // put in parenthesis?
+            arg = '<span class="math-parenthesis math-round-parenthesis">(</span>' + arg + '<span class="math-parenthesis math-round-parenthesis">)</span>';
+          }
 
-      var lhsTex = lhs.toTex(options);
+          return arg;
+        });
 
-      if (parens[0]) {
-        lhsTex = "\\left(".concat(lhsTex, "\\right)");
+        if (args.length > 2 && (this.getIdentifier() === 'OperatorNode:add' || this.getIdentifier() === 'OperatorNode:multiply')) {
+          if (this.implicit && this.getIdentifier() === 'OperatorNode:multiply' && implicit === 'hide') {
+            return stringifiedArgs.join('<span class="math-operator math-binary-operator ' + 'math-implicit-binary-operator"></span>');
+          }
+
+          return stringifiedArgs.join('<span class="math-operator math-binary-operator ' + 'math-explicit-binary-operator">' + escape(this.op) + '</span>');
+        } else {
+          // fallback to formatting as a function call
+          return '<span class="math-function">' + escape(this.fn) + '</span><span class="math-paranthesis math-round-parenthesis">' + '(</span>' + stringifiedArgs.join('<span class="math-separator">,</span>') + '<span class="math-paranthesis math-round-parenthesis">)</span>';
+        }
       }
+    }
+    /**
+     * Get LaTeX representation
+     * @param {Object} options
+     * @return {string} str
+     */
+
+
+    _toTex(options) {
+      var parenthesis = options && options.parenthesis ? options.parenthesis : 'keep';
+      var implicit = options && options.implicit ? options.implicit : 'hide';
+      var args = this.args;
+      var parens = calculateNecessaryParentheses(this, parenthesis, implicit, args, true);
+      var op = latexOperators[this.fn];
+      op = typeof op === 'undefined' ? this.op : op; // fall back to using this.op
+
+      if (args.length === 1) {
+        // unary operators
+        var assoc = getAssociativity(this, parenthesis);
+        var operand = args[0].toTex(options);
+
+        if (parens[0]) {
+          operand = "\\left(".concat(operand, "\\right)");
+        }
 
-      var rhs = args[1]; // right hand side
+        if (assoc === 'right') {
+          // prefix operator
+          return op + operand;
+        } else if (assoc === 'left') {
+          // postfix operator
+          return operand + op;
+        } // fall back to postfix
 
-      var rhsTex = rhs.toTex(options);
 
-      if (parens[1]) {
-        rhsTex = "\\left(".concat(rhsTex, "\\right)");
-      } // handle some exceptions (due to the way LaTeX works)
+        return operand + op;
+      } else if (args.length === 2) {
+        // binary operators
+        var lhs = args[0]; // left hand side
 
+        var lhsTex = lhs.toTex(options);
 
-      var lhsIdentifier;
+        if (parens[0]) {
+          lhsTex = "\\left(".concat(lhsTex, "\\right)");
+        }
 
-      if (parenthesis === 'keep') {
-        lhsIdentifier = lhs.getIdentifier();
-      } else {
-        // Ignore ParenthesisNodes if in 'keep' mode
-        lhsIdentifier = lhs.getContent().getIdentifier();
-      }
+        var rhs = args[1]; // right hand side
 
-      switch (this.getIdentifier()) {
-        case 'OperatorNode:divide':
-          // op contains '\\frac' at this point
-          return op + '{' + lhsTex + '}' + '{' + rhsTex + '}';
+        var rhsTex = rhs.toTex(options);
 
-        case 'OperatorNode:pow':
-          lhsTex = '{' + lhsTex + '}';
-          rhsTex = '{' + rhsTex + '}';
+        if (parens[1]) {
+          rhsTex = "\\left(".concat(rhsTex, "\\right)");
+        } // handle some exceptions (due to the way LaTeX works)
 
-          switch (lhsIdentifier) {
-            case 'ConditionalNode': //
 
-            case 'OperatorNode:divide':
-              lhsTex = "\\left(".concat(lhsTex, "\\right)");
-          }
+        var lhsIdentifier;
 
-          break;
+        if (parenthesis === 'keep') {
+          lhsIdentifier = lhs.getIdentifier();
+        } else {
+          // Ignore ParenthesisNodes if in 'keep' mode
+          lhsIdentifier = lhs.getContent().getIdentifier();
+        }
 
-        case 'OperatorNode:multiply':
-          if (this.implicit && implicit === 'hide') {
-            return lhsTex + '~' + rhsTex;
-          }
+        switch (this.getIdentifier()) {
+          case 'OperatorNode:divide':
+            // op contains '\\frac' at this point
+            return op + '{' + lhsTex + '}' + '{' + rhsTex + '}';
 
-      }
+          case 'OperatorNode:pow':
+            lhsTex = '{' + lhsTex + '}';
+            rhsTex = '{' + rhsTex + '}';
 
-      return lhsTex + op + rhsTex;
-    } else if (args.length > 2 && (this.getIdentifier() === 'OperatorNode:add' || this.getIdentifier() === 'OperatorNode:multiply')) {
-      var texifiedArgs = args.map(function (arg, index) {
-        arg = arg.toTex(options);
+            switch (lhsIdentifier) {
+              case 'ConditionalNode': //
+
+              case 'OperatorNode:divide':
+                lhsTex = "\\left(".concat(lhsTex, "\\right)");
+            }
+
+            break;
+
+          case 'OperatorNode:multiply':
+            if (this.implicit && implicit === 'hide') {
+              return lhsTex + '~' + rhsTex;
+            }
 
-        if (parens[index]) {
-          arg = "\\left(".concat(arg, "\\right)");
         }
 
-        return arg;
-      });
+        return lhsTex + op + rhsTex;
+      } else if (args.length > 2 && (this.getIdentifier() === 'OperatorNode:add' || this.getIdentifier() === 'OperatorNode:multiply')) {
+        var texifiedArgs = args.map(function (arg, index) {
+          arg = arg.toTex(options);
+
+          if (parens[index]) {
+            arg = "\\left(".concat(arg, "\\right)");
+          }
 
-      if (this.getIdentifier() === 'OperatorNode:multiply' && this.implicit) {
-        return texifiedArgs.join('~');
+          return arg;
+        });
+
+        if (this.getIdentifier() === 'OperatorNode:multiply' && this.implicit && implicit === 'hide') {
+          return texifiedArgs.join('~');
+        }
+
+        return texifiedArgs.join(op);
+      } else {
+        // fall back to formatting as a function call
+        // as this is a fallback, it doesn't use
+        // fancy function names
+        return '\\mathrm{' + this.fn + '}\\left(' + args.map(function (arg) {
+          return arg.toTex(options);
+        }).join(',') + '\\right)';
       }
+    }
+    /**
+     * Get identifier.
+     * @return {string}
+     */
 
-      return texifiedArgs.join(op);
-    } else {
-      // fall back to formatting as a function call
-      // as this is a fallback, it doesn't use
-      // fancy function names
-      return '\\mathrm{' + this.fn + '}\\left(' + args.map(function (arg) {
-        return arg.toTex(options);
-      }).join(',') + '\\right)';
+
+    getIdentifier() {
+      return this.type + ':' + this.fn;
     }
-  };
-  /**
-   * Get identifier.
-   * @return {string}
-   */
 
+  }
 
-  OperatorNode.prototype.getIdentifier = function () {
-    return this.type + ':' + this.fn;
-  };
+  _defineProperty(OperatorNode, "name", name);
 
   return OperatorNode;
 }, {