figureone 1.4.1 → 1.7.0

package/index.js

@@ -11338,6 +11338,12 @@ var FigureElement = /*#__PURE__*/function () {
 
   // TODO
 
+  // `setColor` commands can be tagged with a `from` source label (e.g. an
+  // equation tags its default-color cascade with 'form'). An element listed
+  // against a source in `ignoreSetColor` will ignore commands from that source
+  // while still honoring untagged (explicit) commands like `dim`/`undim` or a
+  // direct `setColor`. Accepts a single source string or a list of them.
+
   // // TODO
   // move: {
   //   line: Line,
@@ -11380,6 +11386,7 @@ var FigureElement = /*#__PURE__*/function () {
     this.isFormIgnored = false;
     this.simple = false;
     this.allowSetColor = 'all';
+    this.ignoreSetColor = [];
     this.transform = transform._dup();
     this.dependantTransform = false;
     this.fnMap = new _tools_FunctionMap__WEBPACK_IMPORTED_MODULE_13__.FunctionMap();
@@ -12331,15 +12338,39 @@ var FigureElement = /*#__PURE__*/function () {
       return false;
     }
 
+    /**
+     * Returns `true` if a `setColor` command tagged with source `from` should be
+     * ignored by this element (per `ignoreSetColor`). Untagged commands
+     * (`from == null`) are never ignored.
+     */
+  }, {
+    key: "isSetColorIgnored",
+    value: function isSetColorIgnored() {
+      var from = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (from == null) {
+        return false;
+      }
+      if (typeof this.ignoreSetColor === 'string') {
+        return this.ignoreSetColor === from;
+      }
+      return this.ignoreSetColor.indexOf(from) > -1;
+    }
+
     /**
      Set element color.
      @param {[number, number, number, number]} color RGBA color from 0 to 1
      @param {boolean} [setDefault] also set the default color to this color
+     @param {string | null} [from] source label of this color command; if it
+     matches `ignoreSetColor` the command is ignored
      */
   }, {
     key: "setColor",
     value: function setColor(color) {
       var setDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (this.isSetColorIgnored(from)) {
+        return;
+      }
       if (this.allowSetColor === 'all') {
         this.color = color != null ? color.slice() : [0, 0, 0, 0];
       } else if (this.allowSetColor === 'opacity') {
@@ -14577,6 +14608,10 @@ var FigureElementPrimitive = /*#__PURE__*/function (_FigureElement) {
     key: "setColor",
     value: function setColor(color) {
       var setDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (this.isSetColorIgnored(from)) {
+        return;
+      }
       if (this.allowSetColor === 'all') {
         this.color = color != null ? color.slice() : [0, 0, 0, 0];
       } else if (this.allowSetColor === 'opacity') {
@@ -16307,11 +16342,15 @@ var FigureElementCollection = /*#__PURE__*/function (_FigureElement2) {
     value: function setColor() {
       var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 0, 1];
       var setDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (this.isSetColorIgnored(from)) {
+        return;
+      }
       var nonNullColor = color != null ? color : [0, 0, 0, 0];
       for (var i = 0; i < this.drawOrder.length; i += 1) {
         var element = this.elements[this.drawOrder[i]];
         if (!this.preserveChildColor) {
-          element.setColor(nonNullColor, setDefault);
+          element.setColor(nonNullColor, setDefault, from);
         }
       }
       if (this.allowSetColor === 'all') {
@@ -17185,8 +17224,14 @@ function offsetLocationForAnnotations(annotations, offset) {
   });
 }
 function setColorForAnnotations(annotations, color) {
+  var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   annotations.forEach(function (annotation) {
-    annotation.content.setColor(color);
+    annotation.content.setColor(color, from);
+  });
+}
+function setOpacityForAnnotations(annotations, opacity) {
+  annotations.forEach(function (annotation) {
+    annotation.content.setOpacity(opacity);
   });
 }
 function setPositionsForGlyphs(glyphs) {
@@ -17203,15 +17248,28 @@ function setPositionsForGlyphs(glyphs) {
   });
 }
 function setColorForGlyphs(glyphs, color) {
+  var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   Object.keys(glyphs).forEach(function (key) {
     if (glyphs[key] == null) {
       return;
     }
     var glyph = glyphs[key];
     if (color != null) {
-      glyph.glyph.setColor(color);
+      glyph.glyph.setColor(color, true, from);
     }
-    setColorForAnnotations(glyph.annotations, color);
+    setColorForAnnotations(glyph.annotations, color, from);
+  });
+}
+function setOpacityForGlyphs(glyphs, opacity) {
+  Object.keys(glyphs).forEach(function (key) {
+    if (glyphs[key] == null) {
+      return;
+    }
+    var glyph = glyphs[key];
+    if (opacity != null) {
+      glyph.glyph.setOpacity(opacity);
+    }
+    setOpacityForAnnotations(glyph.annotations, opacity);
   });
 }
 function offsetLocationForGlyphs(glyphs, offset) {
@@ -17240,6 +17298,7 @@ var BaseAnnotationFunction = /*#__PURE__*/function () {
     this.showContent = showContent;
     this.scale = 1;
     this.color = null;
+    this.opacity = null;
     this.functionName = null;
   }
   return _createClass(BaseAnnotationFunction, [{
@@ -17277,15 +17336,38 @@ var BaseAnnotationFunction = /*#__PURE__*/function () {
     key: "setColor",
     value: function setColor() {
       var colorIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var color = null;
+      var nextFrom = from;
       if (this.color != null) {
         color = this.color;
+        nextFrom = null;
       } else if (colorIn != null) {
         color = colorIn;
       }
-      this.content.setColor(color);
-      setColorForAnnotations(this.annotations, color);
-      setColorForGlyphs(this.glyphs, color);
+      this.content.setColor(color, nextFrom);
+      setColorForAnnotations(this.annotations, color, nextFrom);
+      setColorForGlyphs(this.glyphs, color, nextFrom);
+    }
+  }, {
+    key: "setOpacity",
+    value: function setOpacity() {
+      var opacityIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var opacity = opacityIn;
+      if (this.opacity != null) {
+        opacity = (opacity == null ? 1 : opacity) * this.opacity;
+      }
+      this.content.setOpacity(opacity);
+      setOpacityForAnnotations(this.annotations, opacity);
+      setOpacityForGlyphs(this.glyphs, opacity);
+    }
+  }, {
+    key: "collectDrawOrder",
+    value: function collectDrawOrder(ops) {
+      this.content.collectDrawOrder(ops);
+      this.annotations.forEach(function (annotation) {
+        annotation.content.collectDrawOrder(ops);
+      });
     }
   }, {
     key: "offsetLocation",
@@ -17985,20 +18067,45 @@ var BaseEquationFunction = /*#__PURE__*/function (_Elements) {
     key: "setColor",
     value: function setColor() {
       var colorIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var color = null;
+      // An explicit `color` function supplies its own `this.color`; re-stamp the
+      // provenance to null so this color is treated as an explicit command and is
+      // not ignored by a child that ignores the 'form' default cascade.
+      var nextFrom = from;
       if (this.color != null) {
         color = this.color;
+        nextFrom = null;
       } else if (colorIn != null) {
         color = colorIn;
       }
       this.glyphs.forEach(function (glyph) {
         if (glyph != null && color != null) {
-          glyph.setColor(color);
+          glyph.setColor(color, true, nextFrom);
+        }
+      });
+      this.contents.forEach(function (content) {
+        if (content != null) {
+          content.setColor(color, nextFrom);
+        }
+      });
+    }
+  }, {
+    key: "setOpacity",
+    value: function setOpacity() {
+      var opacityIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var opacity = opacityIn;
+      if (this.opacity != null) {
+        opacity = (opacity == null ? 1 : opacity) * this.opacity;
+      }
+      this.glyphs.forEach(function (glyph) {
+        if (glyph != null && opacity != null) {
+          glyph.setOpacity(opacity);
         }
       });
       this.contents.forEach(function (content) {
         if (content != null) {
-          content.setColor(color);
+          content.setOpacity(opacity);
         }
       });
     }
@@ -18375,6 +18482,118 @@ var Container = /*#__PURE__*/function (_BaseEquationFunction) {
 }(_BaseEquationFunction__WEBPACK_IMPORTED_MODULE_1__["default"]);
 
 
+/***/ },
+
+/***/ "./src/js/figure/Equation/Elements/DrawOrder.ts"
+/*!******************************************************!*\
+  !*** ./src/js/figure/Equation/Elements/DrawOrder.ts ***!
+  \******************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ DrawOrder)
+/* harmony export */ });
+/* harmony import */ var _Element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Element */ "./src/js/figure/Element.ts");
+/* harmony import */ var _Bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Bounds */ "./src/js/figure/Equation/Elements/Bounds.ts");
+/* harmony import */ var _BaseEquationFunction__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseEquationFunction */ "./src/js/figure/Equation/Elements/BaseEquationFunction.ts");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+
+
+
+
+// Layout-neutral wrapper that records a draw-order operation (`front` or
+// `back`) for the elements it wraps. The actual reordering of the equation
+// collection's draw stack is performed by `EquationForm.setPositions` after the
+// ops are gathered with `collectDrawOrder` (paralleling the `color`/`opacity`
+// cascade). `front` true moves wrapped elements forward in the draw stack,
+// `front` false moves them back. `num` is the number of places to move; when
+// `null` the elements are moved completely to the front/back.
+var DrawOrder = /*#__PURE__*/function (_BaseEquationFunction) {
+  function DrawOrder() {
+    _classCallCheck(this, DrawOrder);
+    return _callSuper(this, DrawOrder, arguments);
+  }
+  _inherits(DrawOrder, _BaseEquationFunction);
+  return _createClass(DrawOrder, [{
+    key: "calcSize",
+    value: function calcSize(location, scale) {
+      this.location = location._dup();
+      var loc = location._dup();
+      var fullContentBounds = this.options.fullContentBounds;
+      var _this$contents = _slicedToArray(this.contents, 1),
+        mainContent = _this$contents[0];
+      var contentBounds = new _Bounds__WEBPACK_IMPORTED_MODULE_1__["default"]();
+      var fullBounds = new _Bounds__WEBPACK_IMPORTED_MODULE_1__["default"]();
+      if (mainContent != null) {
+        mainContent.calcSize(loc._dup(), scale);
+        contentBounds.copyFrom(mainContent.getBounds(fullContentBounds));
+        fullBounds.copyFrom(mainContent.getBounds(true));
+      }
+      this.width = contentBounds.width;
+      this.height = contentBounds.height;
+      this.descent = contentBounds.descent;
+      this.ascent = contentBounds.ascent;
+      this.fullSize = {
+        leftOffset: this.location.x - fullBounds.left,
+        width: fullBounds.width,
+        ascent: fullBounds.ascent,
+        descent: fullBounds.descent,
+        height: fullBounds.height
+      };
+    }
+  }, {
+    key: "collectDrawOrder",
+    value: function collectDrawOrder(ops) {
+      // Collect nested front/back ops first so they are applied before this one.
+      // Each op moves its element group while preserving the group's *current*
+      // relative draw order, so a nested front/back reorders the elements and the
+      // outer (this) op then moves the reordered group as a unit. This composes
+      // consistently: the innermost op runs first, the outermost last.
+      _superPropGet(DrawOrder, "collectDrawOrder", this, 3)([ops]);
+      var _this$options = this.options,
+        front = _this$options.front,
+        num = _this$options.num,
+        before = _this$options.before,
+        after = _this$options.after;
+      var elements = this.getAllElements(true).filter(function (e) {
+        return e instanceof _Element__WEBPACK_IMPORTED_MODULE_0__.FigureElementPrimitive || e instanceof _Element__WEBPACK_IMPORTED_MODULE_0__.FigureElementCollection;
+      });
+      if (elements.length > 0) {
+        ops.push({
+          front: front,
+          num: num,
+          before: before,
+          after: after,
+          elements: elements
+        });
+      }
+    }
+  }]);
+}(_BaseEquationFunction__WEBPACK_IMPORTED_MODULE_2__["default"]);
+
+
 /***/ },
 
 /***/ "./src/js/figure/Equation/Elements/Element.ts"
@@ -18452,6 +18671,7 @@ var Element = /*#__PURE__*/function () {
     };
     this.color = null;
     this.defaultColor = content.color.slice();
+    this.opacity = null;
     this.fnMap = new _tools_FunctionMap__WEBPACK_IMPORTED_MODULE_4__.FunctionMap();
     this.showContent = true;
   }
@@ -18567,20 +18787,52 @@ var Element = /*#__PURE__*/function () {
     key: "setColor",
     value: function setColor() {
       var colorIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var color = this.defaultColor;
+      // `from` carries the provenance of the cascade down to the FigureElement.
+      // If this wrapper supplies its own explicit color, re-stamp `from` to null
+      // (an explicit command) so a child cannot ignore it as a 'form' default.
+      var nextFrom = from;
       if (colorIn != null) {
         color = colorIn;
       } else if (this.color != null) {
         color = this.color;
+        nextFrom = null;
+      }
+      var content = this.content;
+      if (content instanceof _Element__WEBPACK_IMPORTED_MODULE_3__.FigureElementCollection || content instanceof _Element__WEBPACK_IMPORTED_MODULE_3__.FigureElementPrimitive) {
+        if (content.isFormIgnored) {
+          return;
+        }
+        content.setColor(color, true, nextFrom);
+      }
+    }
+  }, {
+    key: "setOpacity",
+    value: function setOpacity() {
+      var opacityIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var opacity = opacityIn;
+      if (this.opacity != null) {
+        opacity = (opacity == null ? 1 : opacity) * this.opacity;
+      }
+      if (opacity == null) {
+        return;
       }
       var content = this.content;
       if (content instanceof _Element__WEBPACK_IMPORTED_MODULE_3__.FigureElementCollection || content instanceof _Element__WEBPACK_IMPORTED_MODULE_3__.FigureElementPrimitive) {
         if (content.isFormIgnored) {
           return;
         }
-        content.setColor(color);
+        content.setOpacity(opacity);
       }
     }
+
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  }, {
+    key: "collectDrawOrder",
+    value: function collectDrawOrder(ops) {
+      // A leaf element holds no draw-order operation.
+    }
   }, {
     key: "offsetLocation",
     value: function offsetLocation() {
@@ -18634,6 +18886,7 @@ var Elements = /*#__PURE__*/function () {
     this.fnMap = new _tools_FunctionMap__WEBPACK_IMPORTED_MODULE_4__.FunctionMap();
     this.showContent = true;
     this.color = null;
+    this.opacity = null;
   }
   return _createClass(Elements, [{
     key: "cleanup",
@@ -18719,14 +18972,36 @@ var Elements = /*#__PURE__*/function () {
     key: "setColor",
     value: function setColor() {
       var colorIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var color = null;
+      var nextFrom = from;
       if (this.color != null) {
         color = this.color;
+        nextFrom = null;
       } else if (colorIn != null) {
         color = colorIn;
       }
       this.content.forEach(function (e) {
-        e.setColor(color);
+        e.setColor(color, nextFrom);
+      });
+    }
+  }, {
+    key: "setOpacity",
+    value: function setOpacity() {
+      var opacityIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var opacity = opacityIn;
+      if (this.opacity != null) {
+        opacity = (opacity == null ? 1 : opacity) * this.opacity;
+      }
+      this.content.forEach(function (e) {
+        e.setOpacity(opacity);
+      });
+    }
+  }, {
+    key: "collectDrawOrder",
+    value: function collectDrawOrder(ops) {
+      this.content.forEach(function (e) {
+        e.collectDrawOrder(ops);
       });
     }
   }, {
@@ -19359,6 +19634,81 @@ var Offset = /*#__PURE__*/function (_BaseEquationFunction) {
 }(_BaseEquationFunction__WEBPACK_IMPORTED_MODULE_1__["default"]);
 
 
+/***/ },
+
+/***/ "./src/js/figure/Equation/Elements/Opacity.ts"
+/*!****************************************************!*\
+  !*** ./src/js/figure/Equation/Elements/Opacity.ts ***!
+  \****************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ Opacity)
+/* harmony export */ });
+/* harmony import */ var _Bounds__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Bounds */ "./src/js/figure/Equation/Elements/Bounds.ts");
+/* harmony import */ var _BaseEquationFunction__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseEquationFunction */ "./src/js/figure/Equation/Elements/BaseEquationFunction.ts");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+
+
+var Opacity = /*#__PURE__*/function (_BaseEquationFunction) {
+  function Opacity() {
+    _classCallCheck(this, Opacity);
+    return _callSuper(this, Opacity, arguments);
+  }
+  _inherits(Opacity, _BaseEquationFunction);
+  return _createClass(Opacity, [{
+    key: "calcSize",
+    value: function calcSize(location, scale) {
+      this.location = location._dup();
+      var loc = location._dup();
+      var _this$options = this.options,
+        opacity = _this$options.opacity,
+        fullContentBounds = _this$options.fullContentBounds;
+      var _this$contents = _slicedToArray(this.contents, 1),
+        mainContent = _this$contents[0];
+      var contentBounds = new _Bounds__WEBPACK_IMPORTED_MODULE_0__["default"]();
+      var fullBounds = new _Bounds__WEBPACK_IMPORTED_MODULE_0__["default"]();
+      if (mainContent != null) {
+        mainContent.calcSize(loc._dup(), scale);
+        contentBounds.copyFrom(mainContent.getBounds(fullContentBounds));
+        fullBounds.copyFrom(mainContent.getBounds(true));
+      }
+      this.opacity = opacity;
+      this.width = contentBounds.width;
+      this.height = contentBounds.height;
+      this.descent = contentBounds.descent;
+      this.ascent = contentBounds.ascent;
+      this.fullSize = {
+        leftOffset: this.location.x - fullBounds.left,
+        width: fullBounds.width,
+        ascent: fullBounds.ascent,
+        descent: fullBounds.descent,
+        height: fullBounds.height
+      };
+    }
+  }]);
+}(_BaseEquationFunction__WEBPACK_IMPORTED_MODULE_1__["default"]);
+
+
 /***/ },
 
 /***/ "./src/js/figure/Equation/Elements/Scale.ts"
@@ -19518,6 +19868,16 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
  * Object where keys are property names of a {@link FigureElement} and values
  * are the values to set the properties to.
  *
+ * Two keys are treated specially as draw-order operations rather than element
+ * properties: `back` and `front`. Each takes an options object (`{}` for the
+ * full extreme, `{ num }` to move a set number of places, or `{ before }` /
+ * `{ after }` to position relative to an anchor element) and reorders the
+ * element in the equation's draw stack - paralleling the {@link EQN_Back} and
+ * {@link EQN_Front} equation functions. When several elements declare `back` or
+ * `front` mods, they are applied in definition order, so
+ * `{ a: { back: {} }, b: { back: {} } }` sends `a` to the back and then `b` to
+ * the back.
+ *
  * @property {any} [_propertyName]
  * @interface
  * @group Misc Figure Element
@@ -19882,6 +20242,11 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
  * automatically in the equation based on EQN_Color equation functions. In such
  * cases, colors that are set external to the equation will be overridden. Use
  * `true` to allow setting of colors externally only. (`false`)
+ * @property {boolean} [ignoreOpacity] when `false`, opacity will be set
+ * automatically in the equation based on EQN_Opacity equation functions
+ * (multiplicative cascade). Element opacities set externally will be
+ * overridden. Use `true` to allow setting of opacities externally only.
+ * (`false`)
  *
  * @example
  * // Simple form definition of two different forms of the same equation and one
@@ -20257,6 +20622,32 @@ var GoToFormAnimationStep = /*#__PURE__*/function (_TriggerAnimationStep2) {
  * * {@link GoToFormAnimationStep}
  * * {@link NextFormAnimationStep}
  *
+ * In addition to the notifications published by {@link FigureElement}, an
+ * Equation publishes a `formChanged` notification whenever the displayed form
+ * may have changed. The payload is an object
+ * `{ phase, form, fromForm?, progress? }` where `phase` is one of:
+ * - `'showForm'`: a form was set via `showForm`. Callers can suppress this
+ *   event by passing `notify: false` to `showForm`; internal `showForm`
+ *   calls made by `goToForm` do this so the `goToForm*` event stream is
+ *   not interleaved with stray `showForm` events.
+ * - `'goToFormStart'`: a `goToForm` call has just begun
+ * - `'goToFormStep'`: published on every animation frame during a `goToForm`
+ *   animation; `progress` is the percentage (0-1) through the animation. A
+ *   final `goToFormStep` with `progress: 1` is always published immediately
+ *   before `goToFormEnd`
+ * - `'goToFormEnd'`: a `goToForm` call has finished
+ *
+ *  * `fromForm` is only included on the `goToForm*` phases (it carries the
+ * `fromWhere` option from `goToForm`); it is absent on `showForm`. `progress`
+ * is only included on `goToFormStep`. The event order for a `goToForm` call
+ * is always: `goToFormStart` → zero-or-more `goToFormStep` → `goToFormStep`
+ * with `progress: 1` → `goToFormEnd`.
+ *
+ * A user-initiated `showForm` made while a `goToForm` animation is running
+ * will publish its `showForm` event interleaved with the ongoing
+ * `goToFormStep` stream — listeners that drive UI from "the current
+ * transition" should account for this. Pass `notify: false` to suppress.
+ *
  * @extends FigureElementCollection
  *
  * @see To test examples, append them to the
@@ -20351,7 +20742,8 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         },
         elementMods: {},
         layout: 'always',
-        ignoreColor: false
+        ignoreColor: false,
+        ignoreOpacity: false
         // lazyLayout: true,
         // layoutonce: false,
       },
@@ -20411,7 +20803,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
     //   this.setTransform(getTransform(optionsToUse.transform));
     // }
     _this.shapes = shapes;
-    _this.setColor(optionsToUse.color);
+    _this.setColor(optionsToUse.color, true, 'form');
     _this.dimColor = optionsToUse.dimColor;
     // this.defaultTextType = optionsToUse.type;
     _this.textureAtlases = {};
@@ -20440,7 +20832,8 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         duration: optionsToUse.formDefaults.duration,
         translation: optionsToUse.formDefaults.translation,
         layout: optionsToUse.formDefaults.layout,
-        ignoreColor: optionsToUse.formDefaults.ignoreColor
+        ignoreColor: optionsToUse.formDefaults.ignoreColor,
+        ignoreOpacity: optionsToUse.formDefaults.ignoreOpacity
       },
       functions: new _EquationFunctions__WEBPACK_IMPORTED_MODULE_10__.EquationFunctions(_this.elements, _this.addElementFromKey.bind(_this), _this.getExistingOrAddSymbol.bind(_this), _this.makeInlineElement.bind(_this)),
       symbols: new _EquationSymbols__WEBPACK_IMPORTED_MODULE_9__["default"](_this.shapes, _this.color),
@@ -20904,7 +21297,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
       var symbol = this.eqn.symbols.get(cleanKey, options);
       if (symbol != null) {
         if (symbol.color[3] > 0.01 && options.color == null) {
-          symbol.setColor(this.color);
+          symbol.setColor(this.color, true, 'form');
         }
         if (options.mods != null) {
           symbol.setProperties(options.mods);
@@ -20931,7 +21324,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         }
         if (symbol != null) {
           if (symbol.color[3] > 0.01 && options.color == null) {
-            symbol.setColor(this.color);
+            symbol.setColor(this.color, true, 'form');
           }
           if (options.mods != null) {
             symbol.setProperties(options.mods);
@@ -21013,7 +21406,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         });
       }
       if (options.color == null && symbol.color[3] > 0.01) {
-        symbol.setColor(this.color);
+        symbol.setColor(this.color, true, 'form');
       }
       symbol.dimColor = this.dimColor.slice();
       if (options.mods != null) {
@@ -21196,7 +21589,9 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
           translation = _ref.translation,
           fromForm = _ref.fromForm,
           onShow = _ref.onShow,
-          onTransition = _ref.onTransition;
+          onTransition = _ref.onTransition,
+          ignoreColor = _ref.ignoreColor,
+          ignoreOpacity = _ref.ignoreOpacity;
         var options = {
           elementMods: elementMods,
           alignment: alignment,
@@ -21207,7 +21602,9 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
           duration: duration,
           translation: translation,
           onShow: onShow,
-          onTransition: onTransition
+          onTransition: onTransition,
+          ignoreColor: ignoreColor,
+          ignoreOpacity: ignoreOpacity
         };
         try {
           _this7.addForm(name, formContent, options);
@@ -21442,6 +21839,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
       this.stopAnimating(how, '_Equation', true);
       this.stopAnimating(how, '_EquationColor', true);
       this.stopAnimating(how, '_EquationAnimateColor', true);
+      this.stopAnimating(how, '_EquationFormStep', true);
       this.stopPulsing(how);
     }
   }, {
@@ -21480,7 +21878,8 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         onTransition = _optionsToUse.onTransition,
         duration = _optionsToUse.duration,
         translation = _optionsToUse.translation,
-        ignoreColor = _optionsToUse.ignoreColor;
+        ignoreColor = _optionsToUse.ignoreColor,
+        ignoreOpacity = _optionsToUse.ignoreOpacity;
       var form = this.createForm();
       this.eqn.forms[name] = form;
       form.description = description;
@@ -21492,6 +21891,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
       form.onShow = onShow;
       form.onTransition = onTransition;
       form.ignoreColor = ignoreColor;
+      form.ignoreOpacity = ignoreOpacity;
 
       // Populate element mods
       form.elementMods = {};
@@ -21634,13 +22034,26 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
     /**
      * Show equation form
      */
+    /**
+     * Show equation form.
+     *
+     * @param formOrName the form, or its name, to show
+     * @param animationStop if `true`, stops any in-progress element animations
+     * before rendering the form (default `true`)
+     * @param notify if `true`, publish a `formChanged` notification with
+     * `phase: 'showForm'` (default `true`). Pass `false` to suppress the
+     * event — useful for bulk updates or when this `showForm` is part of a
+     * larger transition the caller is broadcasting separately. The internal
+     * `showForm` calls made by `goToForm` use `false` so the `goToForm*`
+     * event stream is not interleaved with stray `showForm` events.
+     */
   }, {
     key: "showForm",
     value: function showForm() {
       var formOrName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.eqn.currentForm;
       var animationStop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var notify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       _superPropGet(Equation, "show", this, 3)([]);
-      // this.custom.settingForm = true;
       var form = formOrName;
       if (typeof formOrName === 'string') {
         form = this.getForm(formOrName);
@@ -21651,6 +22064,12 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         this.render(animationStop);
         this.fnMap.exec(form.onTransition);
         this.fnMap.exec(form.onShow);
+        if (notify) {
+          this.notifications.publish('formChanged', {
+            phase: 'showForm',
+            form: form
+          });
+        }
       }
     }
   }, {
@@ -21729,7 +22148,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
           // this.stopEquationAnimating('complete');
           var currentForm = this.getCurrentForm();
           if (currentForm != null) {
-            this.showForm(currentForm);
+            this.showForm(currentForm, true, false);
           }
         } else {
           // this.stopEquationAnimating('cancel');
@@ -21813,20 +22232,65 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         }
       }
       if (duration === 0) {
-        this.showForm(form);
+        this.notifications.publish('formChanged', {
+          phase: 'goToFormStart',
+          form: form,
+          fromForm: options.fromWhere
+        });
+        this.showForm(form, true, false);
         this.fnMap.exec(options.callback);
+        this.notifications.publish('formChanged', {
+          phase: 'goToFormStep',
+          form: form,
+          fromForm: options.fromWhere,
+          progress: 1
+        });
+        this.notifications.publish('formChanged', {
+          phase: 'goToFormEnd',
+          form: form,
+          fromForm: options.fromWhere
+        });
       } else {
         this.eqn.isAnimating = true;
         this.fnMap.exec(onTransition);
+        // Set the current form before publishing goToFormStart so listeners
+        // that call getCurrentForm() see the target form, matching the payload.
+        this.setCurrentForm(form);
+        this.notifications.publish('formChanged', {
+          phase: 'goToFormStart',
+          form: form,
+          fromForm: options.fromWhere
+        });
+        var stepStarted = false;
         var end = function end() {
           _this1.fnMap.exec(form.onShow);
           _this1.eqn.isAnimating = false;
           _this1.fnMap.exec(options.callback);
+          // Cancelling the step ticker stops any further frame callbacks
+          // after end(). It cannot retract a step(p:1) the ticker may have
+          // already published earlier in this frame, so the ticker callback
+          // also skips p===1 — the manual publish below is the single
+          // canonical terminal step event.
+          if (stepStarted) {
+            _this1.stopAnimating('cancel', '_EquationFormStep', true);
+          }
+          _this1.notifications.publish('formChanged', {
+            phase: 'goToFormStep',
+            form: form,
+            fromForm: options.fromWhere,
+            progress: 1
+          });
+          _this1.notifications.publish('formChanged', {
+            phase: 'goToFormEnd',
+            form: form,
+            fromForm: options.fromWhere
+          });
         };
+        var totalTime = 0;
         if (options.animate === 'move') {
-          form.animatePositionsTo(options.delay, options.dissolveOutTime, duration, options.dissolveInTime, end, options.fromWhere, false);
+          totalTime = form.animatePositionsTo(options.delay, options.dissolveOutTime, duration, options.dissolveInTime, end, options.fromWhere, false);
         } else if (options.animate === 'dissolveInThenMove') {
-          form.animatePositionsTo(options.delay, options.dissolveOutTime, duration, options.dissolveInTime, end, options.fromWhere, true);
+          totalTime = form.animatePositionsTo(options.delay, options.dissolveOutTime, duration, options.dissolveInTime, end, options.fromWhere, true);
         } else if (options.animate === 'moveFrom' && this.eqn.formRestart != null && this.eqn.formRestart.moveFrom != null) {
           var moveFrom = this.eqn.formRestart.moveFrom;
           var target = this.getPosition();
@@ -21840,7 +22304,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
             start = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(this.eqn.formRestart.moveFrom);
           }
           var showFormCallback = function showFormCallback() {
-            _this1.showForm(form.name, false);
+            _this1.showForm(form.name, false, false);
           };
           this.fnMap.add('_equationShowFormCallback', showFormCallback);
           this.animations["new"]('_Equation').dissolveOut({
@@ -21855,6 +22319,14 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
             target: target,
             duration: duration
           }).whenFinished(end).start();
+          if (duration != null) {
+            totalTime = options.delay + options.dissolveOutTime + 0.01 + duration;
+          } else {
+            // duration is null — the position step computes a velocity-based
+            // move time internally. Read it back from the chain we just
+            // started so the step ticker still covers the full animation.
+            totalTime = this.animations.getRemainingTime('_Equation');
+          }
         } else if (options.animate === 'pulse' && this.eqn.formRestart != null && this.eqn.formRestart.pulse != null) {
           var pulse = this.eqn.formRestart.pulse;
           var newEnd = function newEnd() {
@@ -21871,11 +22343,30 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
               });
             }
           };
-          form.allHideShow(options.delay, options.dissolveOutTime, options.blankTime, options.dissolveInTime, newEnd);
+          var hideShowTime = form.allHideShow(options.delay, options.dissolveOutTime, options.blankTime, options.dissolveInTime, newEnd);
+          totalTime = hideShowTime + (pulse.duration != null ? pulse.duration : 0);
         } else {
-          form.allHideShow(options.delay, options.dissolveOutTime, options.blankTime, options.dissolveInTime, end);
+          totalTime = form.allHideShow(options.delay, options.dissolveOutTime, options.blankTime, options.dissolveInTime, end);
+        }
+        if (totalTime > 0) {
+          this.animations["new"]('_EquationFormStep').custom({
+            callback: function callback(p) {
+              // Skip the terminal tick — end() publishes the canonical
+              // step(p:1) so the ticker would otherwise duplicate it (and
+              // CustomAnimationStep can land on p=1 twice via
+              // nextFrame + finish()).
+              if (p >= 1) return;
+              _this1.notifications.publish('formChanged', {
+                phase: 'goToFormStep',
+                form: form,
+                fromForm: options.fromWhere,
+                progress: p
+              });
+            },
+            duration: totalTime
+          }).start();
+          stepStarted = true;
         }
-        this.setCurrentForm(form);
       }
     }
   }, {
@@ -21986,7 +22477,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         this.eqn.isAnimating = false;
         var currentForm = this.getCurrentForm();
         if (currentForm != null) {
-          this.showForm(currentForm);
+          this.showForm(currentForm, true, false);
         }
         return;
       }
@@ -22095,6 +22586,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Element */ "./src/js/figure/Element.ts");
 /* harmony import */ var _Elements_Element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Elements/Element */ "./src/js/figure/Equation/Elements/Element.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -22166,6 +22663,7 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
     _this.positionsSet = false;
     _this.layout = 'always';
     _this.ignoreColor = false;
+    _this.ignoreOpacity = false;
     // this.subForm = '';
     return _this;
   }
@@ -22199,8 +22697,187 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
       }
       _superPropGet(EquationForm, "setPositions", this, 3)([]);
       if (!this.ignoreColor) {
-        _superPropGet(EquationForm, "setColor", this, 3)([]);
+        _superPropGet(EquationForm, "setColor", this, 3)([null, 'form']);
+      }
+      if (!this.ignoreOpacity) {
+        _superPropGet(EquationForm, "setOpacity", this, 3)([]);
+      }
+      this.setDrawOrder();
+    }
+
+    // Collect the `front`/`back` draw-order operations declared on this form's
+    // `elementMods` (e.g. `elementMods: { a: { back: {} } }`). These are applied
+    // alongside the inline `front`/`back` equation functions, in element-mod key
+    // order, so `{ a: { back: {} }, b: { back: {} } }` sends `a` to the back and
+    // then `b` to the back.
+  }, {
+    key: "collectElementModDrawOrder",
+    value: function collectElementModDrawOrder(ops) {
+      var _this2 = this;
+      Object.keys(this.elementMods).forEach(function (name) {
+        var entry = _this2.elementMods[name];
+        if (entry == null || entry.element == null || entry.mods == null) {
+          return;
+        }
+        var element = entry.element,
+          mods = entry.mods;
+        if (element.isFormIgnored) {
+          return;
+        }
+        var add = function add(modOption, front) {
+          if (modOption === undefined) {
+            return;
+          }
+          var o = modOption == null ? {} : modOption;
+          ops.push({
+            front: front,
+            num: o.num,
+            before: o.before,
+            after: o.after,
+            elements: [element]
+          });
+        };
+        add(mods.back, false);
+        add(mods.front, true);
+      });
+    }
+
+    // Apply any `front`/`back` draw-order operations - both the inline equation
+    // functions (gathered from the form tree) and those declared on `elementMods`.
+    // Operations are applied relative to a baseline (the natural draw order,
+    // captured before the first reorder) so the result is deterministic no matter
+    // how many times `setPositions` runs. The reorder is performed on the shared
+    // equation collection (the common parent of all wrapped elements).
+  }, {
+    key: "setDrawOrder",
+    value: function setDrawOrder() {
+      var _this3 = this;
+      var ops = [];
+      _superPropGet(EquationForm, "collectDrawOrder", this, 3)([ops]);
+      this.collectElementModDrawOrder(ops);
+      // Find the equation collection (the common parent of all child elements).
+      var children = this.collectionMethods.getAllElements();
+      var collection = children != null && children.length > 0 ? children[0].parent : null;
+      if (collection == null) {
+        return;
+      }
+      // Draw order is color-like: once the equation has used front/back at least
+      // once (so a baseline has been captured), every form resets to the natural
+      // baseline before applying its ops - so a form with no front/back restores
+      // the natural draw order. Equations that never use front/back are left
+      // untouched (no baseline, no reset).
+      if (ops.length === 0 && collection.equationDrawOrderBaseline == null) {
+        return;
+      }
+      // Lazily capture / extend the baseline draw order on the shared collection
+      // (so every form resets to the same natural order). New element names (added
+      // after the baseline was captured) are appended in their current order.
+      if (collection.equationDrawOrderBaseline == null) {
+        collection.equationDrawOrderBaseline = [];
+      }
+      var baseline = collection.equationDrawOrderBaseline;
+      var baselineSet = new Set(baseline);
+      collection.drawOrder.forEach(function (name) {
+        if (!baselineSet.has(name)) {
+          baseline.push(name);
+          baselineSet.add(name);
+        }
+      });
+      // Reset to baseline (dropping any names no longer present) before applying.
+      var currentSet = new Set(collection.drawOrder);
+      collection.drawOrder = baseline.filter(function (name) {
+        return currentSet.has(name);
+      });
+      ops.forEach(function (op) {
+        _this3.applyDrawOrderOp(collection, op);
+      });
+    }
+
+    // Move a single op's element group within the equation collection's draw
+    // stack. The group is always kept contiguous and in its current relative
+    // order (front/back does not reorder within the group). The target position
+    // is determined by `before`/`after` (anchor relative) or `num` (relative for
+    // positive, absolute-from-the-extreme for negative), else the full extreme.
+    // eslint-disable-next-line class-methods-use-this
+  }, {
+    key: "applyDrawOrderOp",
+    value: function applyDrawOrderOp(collection, op) {
+      var order = collection.drawOrder;
+      var inGroup = {};
+      op.elements.forEach(function (e) {
+        inGroup[e.name] = true;
+      });
+      // Group names in their current relative draw order, so the move preserves it
+      var group = order.filter(function (name) {
+        return inGroup[name];
+      });
+      if (group.length === 0) {
+        return;
+      }
+      var groupSize = group.length;
+      var minIdx = order.indexOf(group[0]);
+      var maxIdx = order.indexOf(group[groupSize - 1]);
+      var rest = order.filter(function (name) {
+        return !inGroup[name];
+      });
+      var restLength = rest.length;
+      var anchorNames = function anchorNames(anchor) {
+        if (anchor == null) {
+          return [];
+        }
+        var arr = Array.isArray(anchor) ? anchor : [anchor];
+        return arr.map(function (a) {
+          return a != null && a.name != null ? a.name : a;
+        }).filter(function (n) {
+          return typeof n === 'string';
+        });
+      };
+      var target;
+      if (op.before != null) {
+        // Position the group just before the most-back anchor (`num` shifts it
+        // further back; defaults to 0 when an anchor is given). If none of the
+        // named anchors resolve (typo, or the anchor is itself inside the moved
+        // group), leave the group where the baseline placed it rather than
+        // silently sending it to an extreme.
+        var idxs = anchorNames(op.before).map(function (n) {
+          return rest.indexOf(n);
+        }).filter(function (i) {
+          return i > -1;
+        });
+        if (idxs.length === 0) {
+          return;
+        }
+        var num = op.num == null ? 0 : op.num;
+        target = Math.min.apply(Math, _toConsumableArray(idxs)) - num;
+      } else if (op.after != null) {
+        // Position the group just after the most-front anchor (`num` shifts it
+        // further forward; defaults to 0 when an anchor is given). As with
+        // `before`, an unresolved anchor is a no-op.
+        var _idxs = anchorNames(op.after).map(function (n) {
+          return rest.indexOf(n);
+        }).filter(function (i) {
+          return i > -1;
+        });
+        if (_idxs.length === 0) {
+          return;
+        }
+        var _num = op.num == null ? 0 : op.num;
+        target = Math.max.apply(Math, _toConsumableArray(_idxs)) + 1 + _num;
+      } else if (op.num == null) {
+        target = op.front ? restLength : 0;
+      } else {
+        // Positive `num` moves the group that many places relative to its current
+        // edge; negative `num` positions it absolutely, `|num|` places before the
+        // full extreme.
+        var n = op.num;
+        if (op.front) {
+          target = n >= 0 ? maxIdx + n - groupSize + 1 : restLength + n;
+        } else {
+          target = n >= 0 ? minIdx - n : -n;
+        }
       }
+      target = Math.max(0, Math.min(restLength, target));
+      collection.drawOrder = [].concat(_toConsumableArray(rest.slice(0, target)), _toConsumableArray(group), _toConsumableArray(rest.slice(target)));
     }
   }, {
     key: "_dup",
@@ -22394,7 +23071,7 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
   }, {
     key: "dissolveElements",
     value: function dissolveElements(elements) {
-      var _this2 = this;
+      var _this4 = this;
       var dissolve = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'in';
       var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.01;
       var time = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
@@ -22413,7 +23090,7 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
         if (completed === count) {
           if (callback) {
             // callback(cancelled);
-            _this2.fnMap.exec(callback, cancelled);
+            _this4.fnMap.exec(callback, cancelled);
           }
         }
       };
@@ -22518,7 +23195,7 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
   }, {
     key: "allHideShow",
     value: function allHideShow() {
-      var _this3 = this;
+      var _this5 = this;
       var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var hideTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
       var blankTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
@@ -22542,15 +23219,15 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
       if (elementsToShow.length === 0 && elementsShown.length === 0) {
         if (callback != null) {
           callback(false);
-          return;
         }
+        return 0;
       }
       var dissolveOutCallback = function dissolveOutCallback() {
-        _this3.setPositions();
+        _this5.setPositions();
       };
       if (elementsToShow.length === 0) {
         dissolveOutCallback = function dissolveOutCallback(cancelled) {
-          _this3.setPositions();
+          _this5.setPositions();
           if (callback != null) {
             callback(cancelled);
           }
@@ -22587,6 +23264,13 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
           delay: blankTime
         }).start();
       });
+      if (elementsToShow.length > 0) {
+        cumTime += blankTime + showTime;
+      }
+      // Upper bound on the total animation time: when elementsToDelayShowing
+      // finish their dissolveIn. elementsToShowAfterDissolve are scheduled with
+      // `delay: blankTime` (not `cumTime + blankTime`) so they may finish earlier.
+      return cumTime;
     }
   }, {
     key: "applyElementMods",
@@ -22601,7 +23285,9 @@ var EquationForm = /*#__PURE__*/function (_Elements) {
             return;
           }
           if (element != null && mods != null) {
-            element.setProperties(mods);
+            // `back`/`front` are draw-order operations handled by setDrawOrder, not
+            // element properties, so don't copy them onto the element.
+            element.setProperties(mods, ['back', 'front']);
             if (mods.color != null) {
               element.setColor(mods.color);
             }
@@ -22841,6 +23527,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Symbols_Line__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Symbols/Line */ "./src/js/figure/Equation/Symbols/Line.ts");
 /* harmony import */ var _Elements_Offset__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Elements/Offset */ "./src/js/figure/Equation/Elements/Offset.ts");
 /* harmony import */ var _Elements_Color__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Elements/Color */ "./src/js/figure/Equation/Elements/Color.ts");
+/* harmony import */ var _Elements_Opacity__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Elements/Opacity */ "./src/js/figure/Equation/Elements/Opacity.ts");
+/* harmony import */ var _Elements_DrawOrder__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Elements/DrawOrder */ "./src/js/figure/Equation/Elements/DrawOrder.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -22871,6 +23559,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
+
 // import type {
 //   EQN_Annotation, EQN_EncompassGlyph, EQN_LeftRightGlyph, EQN_TopBottomGlyph,
 // } from './Elements/BaseAnnotationFunction';
@@ -22923,6 +23613,10 @@ function getFigureElement(elementsObject, name) {
  *  - `{ prodOf: `{@link EQN_ProdOf} `}`
  *  - `{ topStrike: `{@link EQN_StrikeComment} `}`
  *  - `{ bottomStrike: `{@link EQN_StrikeComment} `}`
+ *  - `{ color: `{@link EQN_Color} `}`
+ *  - `{ opacity: `{@link EQN_Opacity} `}`
+ *  - `{ back: `{@link EQN_Back} `}`
+ *  - `{ front: `{@link EQN_Front} `}`
  *  - `{ make: string, name?: string, ... }` (inline element — creates any
  *    element type directly in a form using the same `make` values as
  *    {@link Figure.add}. If `name` is omitted, one is auto-generated.)
@@ -23317,6 +24011,243 @@ function getFigureElement(elementsObject, name) {
  *   },
  *   touch: { onClick: e => e.nextForm() },
  * });
+ * @example
+ * // The `color` function recolours a phrase explicitly. Separately, an element
+ * // can opt out of the equation's default ('form') colour cascade with
+ * // `ignoreSetColor`, while still accepting explicit colour commands. Here both
+ * // squares start blue; recolouring the whole equation to grey greys the left
+ * // (free) square, but the right (locked) square keeps its colour.
+ * const blue = [0, 0, 1, 1];
+ * const locked = figure.primitives.rectangle({ width: 0.5, height: 0.5, color: blue });
+ * locked.ignoreSetColor = 'form'; // ignore the default cascade, keep blue
+ * const eqn = figure.add({
+ *   make: 'equation',
+ *   color: [1, 0, 0, 1],
+ *   elements: {
+ *     free: figure.primitives.rectangle({ width: 0.5, height: 0.5, color: blue }),
+ *     locked,
+ *   },
+ *   forms: { 0: ['free', '  ', 'locked'] },
+ * });
+ * eqn.setColor([0.5, 0.5, 0.5, 1], true, 'form'); // free -> grey, locked stays blue
+ * @interface
+ * @group Equation Layout
+ */
+
+/**
+ * Equation opacity function
+ *
+ * Set an opacity multiplier on an equation phrase. The opacity cascades
+ * multiplicatively, so nested `opacity` functions multiply together (e.g. an
+ * outer `0.5` around an inner `0.5` yields `0.25` on the inner content).
+ *
+ * Opacity values are expected to be in the range `[0, 1]`. Whenever the form
+ * is shown, the cascaded opacity is assigned to each wrapped element, overriding
+ * any externally-set element `opacity`. Set `ignoreOpacity: true` on the form
+ * to suppress this and preserve externally-set opacities.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {number} opacity opacity multiplier in the range `[0, 1]`
+ * @property {boolean} [fullContentBounds] Use full bounds with content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Simple Array Definition
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     0: ['a', { opacity: ['b', 0.3] }, 'c'],
+ *   },
+ * });
+ *
+ * @example
+ * // Simple Object Definition
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     0: [
+ *       'a',
+ *       {
+ *         opacity: {
+ *           content: 'b',
+ *           opacity: 0.3,
+ *         },
+ *       },
+ *       'c',
+ *     ],
+ *   },
+ * });
+ *
+ * @interface
+ * @group Equation Layout
+ */
+
+/**
+ * Equation back function
+ *
+ * Send an equation phrase's elements back in the equation's draw stack. All
+ * elements within `content` are moved together as a group, keeping their
+ * current relative draw order. Nested `front`/`back` functions are applied
+ * inner-most first, so an inner `front`/`back` reorders the elements and this
+ * (outer) function then moves the reordered group as a unit.
+ *
+ * The group's position is determined by, in order of precedence:
+ * - `before` - position the group just before (behind) the most-back of the
+ *   named anchor element(s). `num` shifts it further back (default `0`).
+ * - `after` - position the group just after (in front of) the most-front of
+ *   the named anchor element(s). `num` shifts it further forward (default `0`).
+ * - `num` - a positive value moves the group that many places back; a negative
+ *   value positions it `|num|` places ahead of the very back.
+ * - otherwise the group is sent completely to the back.
+ *
+ * The reorder is applied whenever the form is shown, relative to the equation's
+ * natural (definition) draw order, so each form deterministically defines its
+ * own stacking.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {number} [num] places to send the group back (positive), or an
+ * absolute position `|num|` places ahead of the full back (negative). When
+ * `before`/`after` is set, `num` is the offset from the anchor (default `0`).
+ * If undefined (and no anchor), the group is sent completely to the back
+ * @property {string | Array<string>} [before] anchor element name(s) - position
+ * the group just before the most-back anchor
+ * @property {string | Array<string>} [after] anchor element name(s) - position
+ * the group just after the most-front anchor
+ * @property {boolean} [fullContentBounds] Use full bounds with content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Three overlapping squares, offset so the stacking order is visible. Blue
+ * // is defined last so it sits on top by default; `back` sends it behind the
+ * // red and green squares (so green ends up on top).
+ * const sq = color => figure.primitives.rectangle({ width: 0.6, height: 0.6, color });
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     r: sq([1, 0, 0, 1]),
+ *     g: sq([0, 0.8, 0, 1]),
+ *     b: sq([0, 0, 1, 1]),
+ *   },
+ *   forms: {
+ *     0: [
+ *       { offset: ['r', [0, 0]] },
+ *       { offset: ['g', [0.3, -0.25]] },
+ *       { offset: [{ back: ['b'] }, [0.6, -0.5]] },
+ *     ],
+ *   },
+ * });
+ *
+ * @example
+ * // Object Definition with an anchor - position the blue square just before
+ * // (behind) the red square, so red and green sit on top of it.
+ * const sq = color => figure.primitives.rectangle({ width: 0.6, height: 0.6, color });
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     r: sq([1, 0, 0, 1]),
+ *     g: sq([0, 0.8, 0, 1]),
+ *     b: sq([0, 0, 1, 1]),
+ *   },
+ *   forms: {
+ *     0: [
+ *       { offset: ['r', [0, 0]] },
+ *       { offset: ['g', [0.3, -0.25]] },
+ *       { offset: [{ back: { content: 'b', before: 'r' } }, [0.6, -0.5]] },
+ *     ],
+ *   },
+ * });
+ *
+ * @interface
+ * @group Equation Layout
+ */
+
+/**
+ * Equation front function
+ *
+ * Bring an equation phrase's elements forward in the equation's draw stack. All
+ * elements within `content` are moved together as a group, keeping their
+ * current relative draw order. Nested `front`/`back` functions are applied
+ * inner-most first, so an inner `front`/`back` reorders the elements and this
+ * (outer) function then moves the reordered group as a unit.
+ *
+ * The group's position is determined by, in order of precedence:
+ * - `before` - position the group just before (behind) the most-back of the
+ *   named anchor element(s). `num` shifts it further back (default `0`).
+ * - `after` - position the group just after (in front of) the most-front of
+ *   the named anchor element(s). `num` shifts it further forward (default `0`).
+ * - `num` - a positive value moves the group that many places forward; a
+ *   negative value positions it `|num|` places behind the very front.
+ * - otherwise the group is brought completely to the front.
+ *
+ * The reorder is applied whenever the form is shown, relative to the equation's
+ * natural (definition) draw order, so each form deterministically defines its
+ * own stacking.
+ *
+ * Options can be an object, or an array in the property order below
+ *
+ * @property {TypeEquationPhrase} content
+ * @property {number} [num] places to bring the group forward (positive), or an
+ * absolute position `|num|` places behind the full front (negative). When
+ * `before`/`after` is set, `num` is the offset from the anchor (default `0`).
+ * If undefined (and no anchor), the group is brought completely to the front
+ * @property {string | Array<string>} [before] anchor element name(s) - position
+ * the group just before the most-back anchor
+ * @property {string | Array<string>} [after] anchor element name(s) - position
+ * the group just after the most-front anchor
+ * @property {boolean} [fullContentBounds] Use full bounds with content (`false`)
+ *
+ * @see To test examples, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Three overlapping squares, offset so the stacking order is visible. Red is
+ * // defined first so it sits at the back by default; `front` brings it on top
+ * // of the green and blue squares.
+ * const sq = color => figure.primitives.rectangle({ width: 0.6, height: 0.6, color });
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     r: sq([1, 0, 0, 1]),
+ *     g: sq([0, 0.8, 0, 1]),
+ *     b: sq([0, 0, 1, 1]),
+ *   },
+ *   forms: {
+ *     0: [
+ *       { offset: [{ front: ['r'] }, [0, 0]] },
+ *       { offset: ['g', [0.3, -0.25]] },
+ *       { offset: ['b', [0.6, -0.5]] },
+ *     ],
+ *   },
+ * });
+ *
+ * @example
+ * // Object Definition with an anchor - position the red square just after (in
+ * // front of) the green square, so it covers green but stays behind blue.
+ * const sq = color => figure.primitives.rectangle({ width: 0.6, height: 0.6, color });
+ * figure.add({
+ *   make: 'equation',
+ *   elements: {
+ *     r: sq([1, 0, 0, 1]),
+ *     g: sq([0, 0.8, 0, 1]),
+ *     b: sq([0, 0, 1, 1]),
+ *   },
+ *   forms: {
+ *     0: [
+ *       { offset: [{ front: { content: 'r', after: 'g' } }, [0, 0]] },
+ *       { offset: ['g', [0.3, -0.25]] },
+ *       { offset: ['b', [0.6, -0.5]] },
+ *     ],
+ *   },
+ * });
+ *
  * @interface
  * @group Equation Layout
  */
@@ -25723,6 +26654,15 @@ var EquationFunctions = /*#__PURE__*/function () {
       if (name === 'color') {
         return this.color(params);
       }
+      if (name === 'opacity') {
+        return this.opacity(params);
+      }
+      if (name === 'back') {
+        return this.back(params);
+      }
+      if (name === 'front') {
+        return this.front(params);
+      }
       return null;
     }
 
@@ -26348,6 +27288,108 @@ var EquationFunctions = /*#__PURE__*/function () {
       }
     }
 
+    /**
+     * Equation opacity function
+     * @see {@link EQN_Opacity} for description and examples
+     */
+  }, {
+    key: "opacity",
+    value: function opacity(options) {
+      try {
+        var content;
+        var _opacity;
+        var fullContentBounds;
+        var defaultOptions = {
+          opacity: null,
+          fullContentBounds: false
+        };
+        if (Array.isArray(options)) {
+          var _options6 = _slicedToArray(options, 3);
+          content = _options6[0];
+          _opacity = _options6[1];
+          fullContentBounds = _options6[2];
+        } else {
+          content = options.content;
+          _opacity = options.opacity;
+          fullContentBounds = options.fullContentBounds;
+        }
+        var optionsIn = {
+          opacity: _opacity,
+          fullContentBounds: fullContentBounds
+        };
+        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_1__.joinObjects)(defaultOptions, optionsIn);
+        return new _Elements_Opacity__WEBPACK_IMPORTED_MODULE_14__["default"]([this.contentToElement(content)], [], o);
+      } catch (e) {
+        throw new Error("FigureOne Equation Opacity Error: ".concat(e.message));
+      }
+    }
+
+    /**
+     * Equation back function
+     * @see {@link EQN_Back} for description and examples
+     */
+  }, {
+    key: "back",
+    value: function back(options) {
+      try {
+        return this.drawOrder(options, false);
+      } catch (e) {
+        throw new Error("FigureOne Equation Back Error: ".concat(e.message));
+      }
+    }
+
+    /**
+     * Equation front function
+     * @see {@link EQN_Front} for description and examples
+     */
+  }, {
+    key: "front",
+    value: function front(options) {
+      try {
+        return this.drawOrder(options, true);
+      } catch (e) {
+        throw new Error("FigureOne Equation Front Error: ".concat(e.message));
+      }
+    }
+
+    // Shared implementation for the `front`/`back` equation functions.
+  }, {
+    key: "drawOrder",
+    value: function drawOrder(options, front) {
+      var content;
+      var num;
+      var fullContentBounds;
+      var before;
+      var after;
+      var defaultOptions = {
+        num: null,
+        fullContentBounds: false,
+        before: null,
+        after: null
+      };
+      if (Array.isArray(options)) {
+        var _options7 = _slicedToArray(options, 3);
+        content = _options7[0];
+        num = _options7[1];
+        fullContentBounds = _options7[2];
+      } else {
+        content = options.content;
+        num = options.num;
+        fullContentBounds = options.fullContentBounds;
+        before = options.before;
+        after = options.after;
+      }
+      var optionsIn = {
+        num: num,
+        fullContentBounds: fullContentBounds,
+        front: front,
+        before: before,
+        after: after
+      };
+      var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_1__.joinObjects)(defaultOptions, optionsIn);
+      return new _Elements_DrawOrder__WEBPACK_IMPORTED_MODULE_15__["default"]([this.contentToElement(content)], [], o);
+    }
+
     /**
      * Equation fraction function
      * @see {@link EQN_Fraction} for description and examples
@@ -26382,17 +27424,17 @@ var EquationFunctions = /*#__PURE__*/function () {
           baseline: 'vinculum'
         };
         if (Array.isArray(options)) {
-          var _options6 = _slicedToArray(options, 10);
-          numerator = _options6[0];
-          symbol = _options6[1];
-          denominator = _options6[2];
-          scale = _options6[3];
-          numeratorSpace = _options6[4];
-          denominatorSpace = _options6[5];
-          overhang = _options6[6];
-          offsetY = _options6[7];
-          baseline = _options6[8];
-          fullContentBounds = _options6[9];
+          var _options8 = _slicedToArray(options, 10);
+          numerator = _options8[0];
+          symbol = _options8[1];
+          denominator = _options8[2];
+          scale = _options8[3];
+          numeratorSpace = _options8[4];
+          denominatorSpace = _options8[5];
+          overhang = _options8[6];
+          offsetY = _options8[7];
+          baseline = _options8[8];
+          fullContentBounds = _options8[9];
         } else {
           numerator = options.numerator;
           symbol = options.symbol;
@@ -26537,14 +27579,14 @@ var EquationFunctions = /*#__PURE__*/function () {
       var superscriptOffset = null;
       var inSize;
       if (Array.isArray(options)) {
-        var _options7 = _slicedToArray(options, 7);
-        content = _options7[0];
-        superscript = _options7[1];
-        subscript = _options7[2];
-        scale = _options7[3];
-        superscriptOffset = _options7[4];
-        subscriptOffset = _options7[5];
-        inSize = _options7[6];
+        var _options9 = _slicedToArray(options, 7);
+        content = _options9[0];
+        superscript = _options9[1];
+        subscript = _options9[2];
+        scale = _options9[3];
+        superscriptOffset = _options9[4];
+        subscriptOffset = _options9[5];
+        inSize = _options9[6];
       } else {
         content = options.content;
         superscript = options.superscript;
@@ -26614,12 +27656,12 @@ var EquationFunctions = /*#__PURE__*/function () {
         // let superscriptOffset = null;
         var inSize;
         if (Array.isArray(options)) {
-          var _options8 = _slicedToArray(options, 5);
-          content = _options8[0];
-          superscript = _options8[1];
-          scale = _options8[2];
-          offset = _options8[3];
-          inSize = _options8[4];
+          var _options0 = _slicedToArray(options, 5);
+          content = _options0[0];
+          superscript = _options0[1];
+          scale = _options0[2];
+          offset = _options0[3];
+          inSize = _options0[4];
         } else {
           content = options.content;
           superscript = options.superscript;
@@ -26653,12 +27695,12 @@ var EquationFunctions = /*#__PURE__*/function () {
         var offset;
         var inSize;
         if (Array.isArray(options)) {
-          var _options9 = _slicedToArray(options, 5);
-          content = _options9[0];
-          subscript = _options9[1];
-          scale = _options9[2];
-          offset = _options9[3];
-          inSize = _options9[4];
+          var _options1 = _slicedToArray(options, 5);
+          content = _options1[0];
+          subscript = _options1[1];
+          scale = _options1[2];
+          offset = _options1[3];
+          inSize = _options1[4];
         } else {
           content = options.content;
           subscript = options.subscript;
@@ -26702,14 +27744,14 @@ var EquationFunctions = /*#__PURE__*/function () {
           rightSpace: null
         };
         if (Array.isArray(options)) {
-          var _options0 = _slicedToArray(options, 7);
-          content = _options0[0];
-          symbol = _options0[1];
-          space = _options0[2];
-          topSpace = _options0[3];
-          rightSpace = _options0[4];
-          bottomSpace = _options0[5];
-          leftSpace = _options0[6];
+          var _options10 = _slicedToArray(options, 7);
+          content = _options10[0];
+          symbol = _options10[1];
+          space = _options10[2];
+          topSpace = _options10[3];
+          rightSpace = _options10[4];
+          bottomSpace = _options10[5];
+          leftSpace = _options10[6];
         } else {
           content = options.content;
           symbol = options.symbol;
@@ -26779,17 +27821,17 @@ var EquationFunctions = /*#__PURE__*/function () {
           useFullBounds: false
         };
         if (Array.isArray(options)) {
-          var _options1 = _slicedToArray(options, 10);
-          content = _options1[0];
-          symbol = _options1[1];
-          inSize = _options1[2];
-          space = _options1[3];
-          topSpace = _options1[4];
-          rightSpace = _options1[5];
-          bottomSpace = _options1[6];
-          leftSpace = _options1[7];
-          fullContentBounds = _options1[8];
-          useFullBounds = _options1[9];
+          var _options11 = _slicedToArray(options, 10);
+          content = _options11[0];
+          symbol = _options11[1];
+          inSize = _options11[2];
+          space = _options11[3];
+          topSpace = _options11[4];
+          rightSpace = _options11[5];
+          bottomSpace = _options11[6];
+          leftSpace = _options11[7];
+          fullContentBounds = _options11[8];
+          useFullBounds = _options11[9];
         } else {
           content = options.content;
           symbol = options.symbol;
@@ -26856,12 +27898,12 @@ var EquationFunctions = /*#__PURE__*/function () {
           bottom: 0
         };
         if (Array.isArray(options)) {
-          var _options10 = _slicedToArray(options, 5);
-          content = _options10[0];
-          top = _options10[1];
-          right = _options10[2];
-          bottom = _options10[3];
-          left = _options10[4];
+          var _options12 = _slicedToArray(options, 5);
+          content = _options12[0];
+          top = _options12[1];
+          right = _options12[2];
+          bottom = _options12[3];
+          left = _options12[4];
         } else {
           content = options.content;
           top = options.top;
@@ -26948,17 +27990,17 @@ var EquationFunctions = /*#__PURE__*/function () {
           fullContentBounds: false
         };
         if (Array.isArray(options)) {
-          var _options11 = _slicedToArray(options, 10);
-          order = _options11[0];
-          left = _options11[1];
-          content = _options11[2];
-          right = _options11[3];
-          scale = _options11[4];
-          fit = _options11[5];
-          space = _options11[6];
-          yAlign = _options11[7];
-          brac = _options11[8];
-          fullContentBounds = _options11[9];
+          var _options13 = _slicedToArray(options, 10);
+          order = _options13[0];
+          left = _options13[1];
+          content = _options13[2];
+          right = _options13[3];
+          scale = _options13[4];
+          fit = _options13[5];
+          space = _options13[6];
+          yAlign = _options13[7];
+          brac = _options13[8];
+          fullContentBounds = _options13[9];
         } else {
           order = options.order;
           left = options.left;
@@ -27031,13 +28073,13 @@ var EquationFunctions = /*#__PURE__*/function () {
           fullContentBounds: false
         };
         if (Array.isArray(options)) {
-          var _options12 = _slicedToArray(options, 6);
-          content = _options12[0];
-          justify = _options12[1];
-          baselineSpace = _options12[2];
-          space = _options12[3];
-          yAlign = _options12[4];
-          fullContentBounds = _options12[5];
+          var _options14 = _slicedToArray(options, 6);
+          content = _options14[0];
+          justify = _options14[1];
+          baselineSpace = _options14[2];
+          space = _options14[3];
+          yAlign = _options14[4];
+          fullContentBounds = _options14[5];
         } else {
           content = options.content;
           justify = options.justify;
@@ -27155,34 +28197,34 @@ var EquationFunctions = /*#__PURE__*/function () {
           useFullBounds: false
         };
         if (Array.isArray(options)) {
-          var _options13 = _slicedToArray(options, 27);
-          symbol = _options13[0];
-          content = _options13[1];
-          from = _options13[2];
-          to = _options13[3];
-          inSize = _options13[4];
-          space = _options13[5];
-          topSpace = _options13[6];
-          bottomSpace = _options13[7];
-          height = _options13[8];
-          yOffset = _options13[9];
-          scale = _options13[10];
-          fromScale = _options13[11];
-          toScale = _options13[12];
-          fromOffset = _options13[13];
-          toOffset = _options13[14];
-          limitsPosition = _options13[15];
-          limitsAroundContent = _options13[16];
-          fromXPosition = _options13[17];
-          fromYPosition = _options13[18];
-          fromXAlign = _options13[19];
-          fromYAlign = _options13[20];
-          toXPosition = _options13[21];
-          toYPosition = _options13[22];
-          toXAlign = _options13[23];
-          toYAlign = _options13[24];
-          fullBoundsContent = _options13[25];
-          useFullBounds = _options13[26];
+          var _options15 = _slicedToArray(options, 27);
+          symbol = _options15[0];
+          content = _options15[1];
+          from = _options15[2];
+          to = _options15[3];
+          inSize = _options15[4];
+          space = _options15[5];
+          topSpace = _options15[6];
+          bottomSpace = _options15[7];
+          height = _options15[8];
+          yOffset = _options15[9];
+          scale = _options15[10];
+          fromScale = _options15[11];
+          toScale = _options15[12];
+          fromOffset = _options15[13];
+          toOffset = _options15[14];
+          limitsPosition = _options15[15];
+          limitsAroundContent = _options15[16];
+          fromXPosition = _options15[17];
+          fromYPosition = _options15[18];
+          fromXAlign = _options15[19];
+          fromYAlign = _options15[20];
+          toXPosition = _options15[21];
+          toYPosition = _options15[22];
+          toXAlign = _options15[23];
+          toYAlign = _options15[24];
+          fullBoundsContent = _options15[25];
+          useFullBounds = _options15[26];
         } else {
           content = options.content;
           symbol = options.symbol;
@@ -27731,17 +28773,17 @@ var EquationFunctions = /*#__PURE__*/function () {
           useFullBounds: false
         };
         if (Array.isArray(options)) {
-          var _options14 = _slicedToArray(options, 10);
-          content = _options14[0];
-          symbol = _options14[1];
-          inSize = _options14[2];
-          space = _options14[3];
-          topSpace = _options14[4];
-          rightSpace = _options14[5];
-          bottomSpace = _options14[6];
-          leftSpace = _options14[7];
-          fullContentBounds = _options14[8];
-          useFullBounds = _options14[9];
+          var _options16 = _slicedToArray(options, 10);
+          content = _options16[0];
+          symbol = _options16[1];
+          inSize = _options16[2];
+          space = _options16[3];
+          topSpace = _options16[4];
+          rightSpace = _options16[5];
+          bottomSpace = _options16[6];
+          leftSpace = _options16[7];
+          fullContentBounds = _options16[8];
+          useFullBounds = _options16[9];
         } else {
           content = options.content;
           symbol = options.symbol;
@@ -51603,7 +52645,11 @@ var FigureElementPrimitive2DText = /*#__PURE__*/function (_FigureElementPrimiti)
     key: "setColor",
     value: function setColor(color) {
       var setDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      _superPropGet(FigureElementPrimitive2DText, "setColor", this, 3)([color, setDefault]);
+      var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (this.isSetColorIgnored(from)) {
+        return;
+      }
+      _superPropGet(FigureElementPrimitive2DText, "setColor", this, 3)([color, setDefault, from]);
       this.drawingObject.font.color = color.slice();
     }
   }, {
@@ -52072,7 +53118,11 @@ var FigureElementPrimitiveGLText = /*#__PURE__*/function (_FigureElementPrimiti)
     key: "setColor",
     value: function setColor(color) {
       var setDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      _superPropGet(FigureElementPrimitiveGLText, "setColor", this, 3)([color, setDefault]);
+      var from = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (this.isSetColorIgnored(from)) {
+        return;
+      }
+      _superPropGet(FigureElementPrimitiveGLText, "setColor", this, 3)([color, setDefault, from]);
       this.font.color = color.slice();
     }
   }, {
@@ -80795,8 +81845,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.4.1",
-  gitHash: "2fa15b061",
+  version: "1.7.0",
+  gitHash: "8c04ba173",
   tools: tools,
   Figure: _js_figure_Figure__WEBPACK_IMPORTED_MODULE_5__["default"],
   Recorder: _js_figure_Recorder_Recorder__WEBPACK_IMPORTED_MODULE_7__.Recorder,