figureone 1.7.1 → 1.8.0

package/index.js

@@ -7167,6 +7167,13 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
  * @group Misc Figure Element
  */
 var GLObject = /*#__PURE__*/function (_DrawingObject) {
+  // Optional mask textures used by the `textureMap` color mode (one or more).
+  // They share the base texture's coordinates (`a_texcoord`/`v_texcoord`), so
+  // each needs no buffer or mapping of its own - just an id/src and a load
+  // color. Mask i is bound to the shader's u_mask{i} sampler (its uniform name
+  // is precomputed so the draw loop allocates nothing). A mask with an empty
+  // src is a transparent placeholder - an index-preserving no-op slot.
+
   function GLObject(webgl) {
     var _this;
     var vertexShader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -7196,6 +7203,7 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
     _this.numVertices = 0;
     _this.uniforms = {};
     _this.texture = null;
+    _this.maskTextures = [];
     // this.selectorProgramIndex = this.webgl.getProgram(selectorVertexShader, selectorFragShader);
     _this.initProgram();
     return _this;
@@ -7393,6 +7401,31 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
       }
       this.onLoad = onLoad;
     }
+
+    /**
+     * Buffer a mask texture for the `textureMap` color mode. Each call appends a
+     * mask, bound to the next u_mask{i} sampler. Masks share the base texture's
+     * coordinates, so only a source and load color are needed. The default load
+     * color is fully transparent so that, until the mask loads, no region is
+     * recolored and the base texture shows through unchanged.
+     *
+     * An empty `location` registers a transparent placeholder, which keeps the
+     * u_mask{i} indexing aligned with the tint blocks when a caller supplies an
+     * invalid/missing mask in a positional list (the slot becomes a no-op).
+     */
+  }, {
+    key: "addMaskTexture",
+    value: function addMaskTexture() {
+      var location = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var loadColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0, 0, 0];
+      var isPlaceholder = location == null || location === '';
+      this.maskTextures.push({
+        id: isPlaceholder ? '__figureOneEmptyMask' : location,
+        src: isPlaceholder ? '' : location,
+        loadColor: isPlaceholder ? [0, 0, 0, 0] : loadColor,
+        uniformName: "u_mask".concat(this.maskTextures.length)
+      });
+    }
   }, {
     key: "updateTexture",
     value: function updateTexture(data) {
@@ -7406,6 +7439,7 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
   }, {
     key: "initTexture",
     value: function initTexture() {
+      var _this4 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var texture = this.texture,
         webgl = this.webgl;
@@ -7430,6 +7464,15 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
       // );
       webgl.addTexture(id, data || src, loadColor, repeat, this.executeOnLoad.bind(this), force);
       this.state = webgl.textures[texture.id].state;
+
+      // Register the optional mask textures (textureMap color mode). Each loads
+      // onto its own texture unit and reuses the base texture's coordinates. A
+      // placeholder (empty src) is registered directly from its load color as a
+      // 1x1 transparent texture, with no image to load.
+      this.maskTextures.forEach(function (maskTexture) {
+        var data = maskTexture.src !== '' ? maskTexture.src : maskTexture.loadColor;
+        webgl.addTexture(maskTexture.id, data, maskTexture.loadColor, false, _this4.executeOnLoad.bind(_this4), force);
+      });
       // if (
       //   !(texture.id in webgl.textures)
       //   || (
@@ -7661,6 +7704,7 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
     value: function resetTextureBuffer() {
       var deleteTexture = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var texture = this.texture,
+        maskTextures = this.maskTextures,
         webgl = this.webgl,
         gl = this.gl;
       if (texture) {
@@ -7672,6 +7716,13 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
           texture.buffer = null;
         }
       }
+      if (deleteTexture) {
+        maskTextures.forEach(function (maskTexture) {
+          if (webgl.textures[maskTexture.id] != null) {
+            webgl.deleteTexture(maskTexture.id);
+          }
+        });
+      }
     }
   }, {
     key: "cleanup",
@@ -7682,14 +7733,14 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
   }, {
     key: "resetBuffers",
     value: function resetBuffers() {
-      var _this4 = this;
+      var _this5 = this;
       var deleteTexture = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var gl = this.gl;
       Object.keys(this.attributes).forEach(function (attributeName) {
-        if (_this4.attributes[attributeName].buffer != null) {
-          gl.deleteBuffer(_this4.attributes[attributeName].buffer);
+        if (_this5.attributes[attributeName].buffer != null) {
+          gl.deleteBuffer(_this5.attributes[attributeName].buffer);
         }
-        _this4.attributes[attributeName].buffer = null;
+        _this5.attributes[attributeName].buffer = null;
       });
       this.attributes = {};
       this.resetTextureBuffer(deleteTexture);
@@ -7869,7 +7920,7 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
   }, {
     key: "drawWithTransformMatrix",
     value: function drawWithTransformMatrix(scene, worldMatrix, color) {
-      var _this5 = this;
+      var _this6 = this;
       var numDrawVertices = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.numVertices;
       var targetTexture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       // if (targetTexture) {
@@ -7899,13 +7950,13 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
         if (targetTexture && attributeName !== 'a_vertex') {
           return;
         }
-        var _this5$attributes$att = _this5.attributes[attributeName],
-          buffer = _this5$attributes$att.buffer,
-          size = _this5$attributes$att.size,
-          type = _this5$attributes$att.type,
-          stride = _this5$attributes$att.stride,
-          offset = _this5$attributes$att.offset,
-          normalize = _this5$attributes$att.normalize;
+        var _this6$attributes$att = _this6.attributes[attributeName],
+          buffer = _this6$attributes$att.buffer,
+          size = _this6$attributes$att.size,
+          type = _this6$attributes$att.type,
+          stride = _this6$attributes$att.stride,
+          offset = _this6$attributes$att.offset,
+          normalize = _this6$attributes$att.normalize;
         gl.enableVertexAttribArray(locations[attributeName]);
         // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -7937,7 +7988,7 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
         gl.uniformMatrix4fv(locations.u_viewMatrix, false, _tools_m3__WEBPACK_IMPORTED_MODULE_0__.transpose(scene.viewMatrix));
       }
       Object.keys(this.uniforms).forEach(function (uniformName) {
-        var method = _this5.uniforms[uniformName].method;
+        var method = _this6.uniforms[uniformName].method;
         method(locations[uniformName], uniformName);
       });
       gl.uniform1f(locations.u_z, this.z);
@@ -7959,6 +8010,20 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
         gl.uniform1i(locations.u_use_texture, 1);
         var index = webglInstance.textures[texture.id].index;
         gl.uniform1i(locations.u_texture, index);
+
+        // Bind the mask textures (textureMap color mode), each to its own texture
+        // unit and precomputed u_mask{i} sampler. They reuse the a_texcoord /
+        // v_texcoord bound above, so no extra attribute is needed. Uses an indexed
+        // loop with precomputed uniform names to avoid per-frame allocation.
+        var maskTextures = this.maskTextures;
+        for (var i = 0; i < maskTextures.length; i += 1) {
+          var maskTexture = maskTextures[i];
+          var maskLocation = locations[maskTexture.uniformName];
+          var maskRegistered = webglInstance.textures[maskTexture.id];
+          if (maskLocation != null && maskRegistered != null) {
+            gl.uniform1i(maskLocation, maskRegistered.index);
+          }
+        }
       } else {
         gl.uniform1i(locations.u_use_texture, 0);
       }
@@ -54522,27 +54587,28 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _tools_g2__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../tools/g2 */ "./src/js/tools/g2.ts");
 /* harmony import */ var _tools_htmlGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../tools/htmlGenerator */ "./src/js/tools/htmlGenerator.ts");
 /* harmony import */ var _Element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Element */ "./src/js/figure/Element.ts");
-/* harmony import */ var _tools_math__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../tools/math */ "./src/js/tools/math.ts");
-/* harmony import */ var _tools_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../tools/tools */ "./src/js/tools/tools.ts");
-/* harmony import */ var _DrawingObjects_GLObject_GLObject__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../DrawingObjects/GLObject/GLObject */ "./src/js/figure/DrawingObjects/GLObject/GLObject.ts");
-/* harmony import */ var _Animation_Animation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Animation/Animation */ "./src/js/figure/Animation/Animation.ts");
-/* harmony import */ var _FigureElementPrimitiveMorph__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./FigureElementPrimitiveMorph */ "./src/js/figure/FigurePrimitives/FigureElementPrimitiveMorph.ts");
-/* harmony import */ var _FigureElementPrimitive2DText__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./FigureElementPrimitive2DText */ "./src/js/figure/FigurePrimitives/FigureElementPrimitive2DText.ts");
-/* harmony import */ var _FigureElementPrimitiveGLText__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./FigureElementPrimitiveGLText */ "./src/js/figure/FigurePrimitives/FigureElementPrimitiveGLText.ts");
-/* harmony import */ var _Text__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Text */ "./src/js/figure/FigurePrimitives/Text.ts");
-/* harmony import */ var _DrawingObjects_HTMLObject_HTMLObject__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../DrawingObjects/HTMLObject/HTMLObject */ "./src/js/figure/DrawingObjects/HTMLObject/HTMLObject.ts");
-/* harmony import */ var _geometries_lines_lines__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../geometries/lines/lines */ "./src/js/figure/geometries/lines/lines.ts");
-/* harmony import */ var _geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../geometries/polygon/polygon */ "./src/js/figure/geometries/polygon/polygon.ts");
-/* harmony import */ var _geometries_rectangle__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../geometries/rectangle */ "./src/js/figure/geometries/rectangle.ts");
-/* harmony import */ var _geometries_ellipse__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../geometries/ellipse */ "./src/js/figure/geometries/ellipse.ts");
-/* harmony import */ var _geometries_arc__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../geometries/arc */ "./src/js/figure/geometries/arc.ts");
-/* harmony import */ var _geometries_triangle__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../geometries/triangle */ "./src/js/figure/geometries/triangle.ts");
-/* harmony import */ var _geometries_arrow__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../geometries/arrow */ "./src/js/figure/geometries/arrow.ts");
-/* harmony import */ var _geometries_line__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../geometries/line */ "./src/js/figure/geometries/line.ts");
-/* harmony import */ var _geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../geometries/copy/copy */ "./src/js/figure/geometries/copy/copy.ts");
-/* harmony import */ var _geometries_buffer__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../geometries/buffer */ "./src/js/figure/geometries/buffer.ts");
-/* harmony import */ var _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../../tools/geometry/scene */ "./src/js/tools/geometry/scene.ts");
-/* harmony import */ var _FigureElementPrimitiveGesture__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./FigureElementPrimitiveGesture */ "./src/js/figure/FigurePrimitives/FigureElementPrimitiveGesture.ts");
+/* harmony import */ var _webgl_shaders__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../webgl/shaders */ "./src/js/figure/webgl/shaders.ts");
+/* harmony import */ var _tools_math__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../tools/math */ "./src/js/tools/math.ts");
+/* harmony import */ var _tools_tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../tools/tools */ "./src/js/tools/tools.ts");
+/* harmony import */ var _DrawingObjects_GLObject_GLObject__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../DrawingObjects/GLObject/GLObject */ "./src/js/figure/DrawingObjects/GLObject/GLObject.ts");
+/* harmony import */ var _Animation_Animation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Animation/Animation */ "./src/js/figure/Animation/Animation.ts");
+/* harmony import */ var _FigureElementPrimitiveMorph__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./FigureElementPrimitiveMorph */ "./src/js/figure/FigurePrimitives/FigureElementPrimitiveMorph.ts");
+/* harmony import */ var _FigureElementPrimitive2DText__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./FigureElementPrimitive2DText */ "./src/js/figure/FigurePrimitives/FigureElementPrimitive2DText.ts");
+/* harmony import */ var _FigureElementPrimitiveGLText__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./FigureElementPrimitiveGLText */ "./src/js/figure/FigurePrimitives/FigureElementPrimitiveGLText.ts");
+/* harmony import */ var _Text__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Text */ "./src/js/figure/FigurePrimitives/Text.ts");
+/* harmony import */ var _DrawingObjects_HTMLObject_HTMLObject__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../DrawingObjects/HTMLObject/HTMLObject */ "./src/js/figure/DrawingObjects/HTMLObject/HTMLObject.ts");
+/* harmony import */ var _geometries_lines_lines__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../geometries/lines/lines */ "./src/js/figure/geometries/lines/lines.ts");
+/* harmony import */ var _geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../geometries/polygon/polygon */ "./src/js/figure/geometries/polygon/polygon.ts");
+/* harmony import */ var _geometries_rectangle__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../geometries/rectangle */ "./src/js/figure/geometries/rectangle.ts");
+/* harmony import */ var _geometries_ellipse__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../geometries/ellipse */ "./src/js/figure/geometries/ellipse.ts");
+/* harmony import */ var _geometries_arc__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../geometries/arc */ "./src/js/figure/geometries/arc.ts");
+/* harmony import */ var _geometries_triangle__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../geometries/triangle */ "./src/js/figure/geometries/triangle.ts");
+/* harmony import */ var _geometries_arrow__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../geometries/arrow */ "./src/js/figure/geometries/arrow.ts");
+/* harmony import */ var _geometries_line__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../geometries/line */ "./src/js/figure/geometries/line.ts");
+/* harmony import */ var _geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../geometries/copy/copy */ "./src/js/figure/geometries/copy/copy.ts");
+/* harmony import */ var _geometries_buffer__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../geometries/buffer */ "./src/js/figure/geometries/buffer.ts");
+/* harmony import */ var _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../../tools/geometry/scene */ "./src/js/tools/geometry/scene.ts");
+/* harmony import */ var _FigureElementPrimitiveGesture__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./FigureElementPrimitiveGesture */ "./src/js/figure/FigurePrimitives/FigureElementPrimitiveGesture.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 _construct(t, e, r) { if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); var o = [null]; o.push.apply(o, e); var p = new (t.bind.apply(t, o))(); return r && _setPrototypeOf(p, r.prototype), p; }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
@@ -54573,6 +54639,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 // eslint-disable-next-line import/no-cycle
 // eslint-disable-next-line import/no-cycle
 
@@ -54668,7 +54735,7 @@ function setupPulse(element, options) {
         element.pulseDefault.scale = options.pulse;
       } else {
         // eslint-disable-next-line no-param-reassign
-        element.pulseDefault = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.pulseDefault, options.pulse);
+        element.pulseDefault = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.pulseDefault, options.pulse);
       }
     }
   }
@@ -54742,7 +54809,45 @@ var FigurePrimitives = /*#__PURE__*/function () {
         optionsIn[_key] = arguments[_key];
       }
       // Setup the default options
-      var oIn = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn));
+      var oIn = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn));
+      // The mask recolor (textureMap) path supports one or more mask textures,
+      // supplied as `mask` (single) or `masks` (array). Normalize the input: a
+      // non-array `masks` is coerced to an array, and an empty/absent `masks`
+      // falls back to the singular `mask`. `masks` takes precedence when both are
+      // given and `masks` is non-empty.
+      var rawMasks;
+      if (oIn.masks != null) {
+        rawMasks = Array.isArray(oIn.masks) ? oIn.masks : [oIn.masks];
+      } else {
+        rawMasks = [];
+      }
+      if (rawMasks.length === 0 && oIn.mask != null) {
+        rawMasks = [oIn.mask];
+      }
+      var isValidMask = function isValidMask(m) {
+        return m != null && m.src != null && m.src !== '';
+      };
+      // Masks are positional: each slot owns its own u_mask{i} sampler and tint
+      // block (tints[CHANNELS_PER_MASK * i ...]). Invalid/missing slots are kept
+      // as transparent no-ops rather than dropped, so a conditionally-built list
+      // never shifts later masks onto the wrong tints. The textureMap path is only
+      // selected when at least one slot is a valid mask.
+      var hasMask = rawMasks.some(isValidMask);
+      var maskList = hasMask ? rawMasks : [];
+      var numMasks = maskList.length;
+      var NUM_TINTS = numMasks * _webgl_shaders__WEBPACK_IMPORTED_MODULE_3__.CHANNELS_PER_MASK;
+      // Guard the per-element mask count against the device's texture units (one
+      // is reserved for the base texture). This catches an excessive count with a
+      // clear error instead of an opaque GL failure. Note: a figure with many
+      // other textures can still exhaust units - that global limit is pre-existing
+      // and not checked here.
+      if (hasMask) {
+        var _gl = this.webgl[0].gl;
+        var maxUnits = _gl.getParameter(_gl.MAX_TEXTURE_IMAGE_UNITS);
+        if (typeof maxUnits === 'number' && maxUnits > 0 && numMasks + 1 > maxUnits) {
+          throw new Error("FigureOne gl: ".concat(numMasks, " mask textures (plus the base texture) exceed this device's ").concat(maxUnits, " texture units. Use fewer masks."));
+        }
+      }
       var defaultOptions = {
         glPrimitive: 'TRIANGLES',
         vertexShader: {
@@ -54762,7 +54867,8 @@ var FigurePrimitives = /*#__PURE__*/function () {
           coords: [],
           loadColor: [0, 0, 1, 0.5]
         },
-        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('primitive_'),
+        tints: [],
+        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('primitive_'),
         color: this.defaultColor,
         drawNumber: 0,
         transform: [['s', 1], ['r', 0, 0, 0, 1], ['t', 0, 0, 0]],
@@ -54773,6 +54879,16 @@ var FigurePrimitives = /*#__PURE__*/function () {
         defaultOptions.vertexShader.color = 'texture';
         defaultOptions.fragmentShader.color = 'texture';
       }
+      // A mask recolors regions of the base texture, so it uses the textureMap
+      // color mode (which also samples the base texture). It therefore takes
+      // precedence over the plain 'texture' mode set above. The fragment shader is
+      // composed for the exact number of masks, so a single mask generates the
+      // same shader (and cost) as before.
+      if (hasMask) {
+        defaultOptions.vertexShader.color = 'textureMap';
+        defaultOptions.fragmentShader.color = 'textureMap';
+        defaultOptions.fragmentShader.masks = numMasks;
+      }
       if (oIn.dimension != null) {
         defaultOptions.vertexShader.dimension = oIn.dimension;
       }
@@ -54790,7 +54906,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       }
 
       // Combine default and input options
-      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultOptions, oIn);
+      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultOptions, oIn);
       options.transform = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getTransform)(options.transform);
       if (options.position != null) {
         options.position = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(options.position);
@@ -54798,7 +54914,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       }
 
       // User shaders to create a gl drawing object
-      var glObject = new _DrawingObjects_GLObject_GLObject__WEBPACK_IMPORTED_MODULE_5__["default"](this.webgl[0], options.vertexShader, options.fragmentShader);
+      var glObject = new _DrawingObjects_GLObject_GLObject__WEBPACK_IMPORTED_MODULE_6__["default"](this.webgl[0], options.vertexShader, options.fragmentShader);
 
       // Set the glPrimitive
       glObject.setPrimitive(options.glPrimitive.toUpperCase());
@@ -54879,7 +54995,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
             usage: 'STATIC',
             size: 2
           };
-          var b = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultAttribute, buffer);
+          var b = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultAttribute, buffer);
           glObject.addAttribute(b.name, b.size, b.data, b.type, b.normalize, b.stride, b.offset, b.usageIn);
         });
         glObject.initAttributes();
@@ -54892,18 +55008,58 @@ var FigurePrimitives = /*#__PURE__*/function () {
             type: 'FLOAT',
             length: 1
           };
-          var u = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultUniform, uniform);
+          var u = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultUniform, uniform);
           glObject.addUniform(u.name, u.length, u.type, u.value);
         });
       }
 
+      // Normalize a tint color to a 4-component [r, g, b, a] array. A missing
+      // tint becomes fully transparent (alpha 0), which leaves the base texture
+      // unchanged. A 3-component color defaults to alpha 1 (fully recolored).
+      var toTint = function toTint(c) {
+        if (c == null) {
+          return [0, 0, 0, 0];
+        }
+        if (c.length < 4) {
+          return [c[0] || 0, c[1] || 0, c[2] || 0, 1];
+        }
+        return [c[0], c[1], c[2], c[3]];
+      };
+
       // Add a texture - use mapFrom and mapTo if texture coords is not defined
       if (options.texture.src !== '') {
         var t = options.texture;
         glObject.addTexture(t.src, (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getRect)(t.mapFrom), (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getRect)(t.mapTo), t.mapToAttribute, t.coords || [], t.repeat, t.onLoad, t.loadColor);
+        // A mask recolors regions of the base texture (textureMap color mode).
+        // Each mask is bound to u_mask{i} and shares the base texture coordinates.
+        // Invalid slots register a transparent placeholder so masks stay
+        // positional (later masks keep their tint block).
+        maskList.forEach(function (m) {
+          if (isValidMask(m)) {
+            glObject.addMaskTexture(m.src, m.loadColor);
+          } else {
+            glObject.addMaskTexture('');
+          }
+        });
         glObject.initTexture();
       }
 
+      // Seed the textureMap tint uniforms (u_tint0..u_tint{4*numMasks-1}). Each
+      // corresponds to a mask channel (r, g, b, a). Any tints beyond the available
+      // mask channels are ignored. The values are mirrored into customState so
+      // they survive state save/restore and recordings.
+      var tintColors = [];
+      if (hasMask) {
+        tintColors = Array.from({
+          length: NUM_TINTS
+        }, function (_, i) {
+          return toTint(options.tints[i]);
+        });
+        tintColors.forEach(function (tint, i) {
+          glObject.addUniform("u_tint".concat(i), 4, 'FLOAT', tint);
+        });
+      }
+
       // Create th figure element primitive with the gl drawing object
       var element;
       if (options.figureElementPrimitiveCallback != null) {
@@ -54920,6 +55076,49 @@ var FigurePrimitives = /*#__PURE__*/function () {
       element.custom.getUniform = element.drawingObject.getUniform.bind(element.drawingObject);
       element.dimColor = this.defaultDimColor.slice();
 
+      // textureMap tints: expose setters and mirror the current values in
+      // customState so they are captured by state save/restore and recordings.
+      if (hasMask) {
+        element.customState.tints = tintColors.map(function (t) {
+          return t.slice();
+        });
+        // Set a single region's tint. Indices outside the available tints
+        // (4 * numMasks) are ignored rather than throwing - an out-of-range index
+        // would otherwise reference a nonexistent u_tint uniform and corrupt
+        // customState, which would then re-throw on every later state restore.
+        element.custom.setTint = function (index, color) {
+          if (index < 0 || index >= NUM_TINTS) {
+            return;
+          }
+          var tint = toTint(color);
+          element.customState.tints[index] = tint;
+          element.drawingObject.updateUniform("u_tint".concat(index), tint);
+        };
+        // Replace all region tints. Missing or null entries reset that region to
+        // transparent (no recolor), so setTints always defines the full set.
+        element.custom.setTints = function (colors) {
+          for (var index = 0; index < NUM_TINTS; index += 1) {
+            element.custom.setTint(index, colors[index] == null ? null : colors[index]);
+          }
+        };
+        // Custom uniforms are not part of drawing object state, so after a state
+        // restore (including Recorder playback and seek) the tint values are
+        // merged back into customState but not re-applied to the GPU. Re-push them
+        // to the u_tint uniforms whenever state is set. Only the valid tints are
+        // applied so a malformed customState can never throw here.
+        element.notifications.add('setState', function () {
+          var tints = element.customState.tints;
+          if (tints == null) {
+            return;
+          }
+          for (var index = 0; index < NUM_TINTS; index += 1) {
+            if (tints[index] != null) {
+              element.drawingObject.updateUniform("u_tint".concat(index), tints[index]);
+            }
+          }
+        });
+      }
+
       // Setup move, touch, scenarios, dim and default colors if defined in
       // options
       if (options.move != null && options.move !== false) {
@@ -54940,7 +55139,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         element.scenarios = options.scenarios;
       }
       if (options.scene != null) {
-        if (options.scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"]) {
+        if (options.scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"]) {
           element.scene = options.scene;
         } else {
           element.setScene(options.scene);
@@ -54966,13 +55165,13 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len2 = arguments.length, optionsIn = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         optionsIn[_key2] = arguments[_key2];
       }
-      var oIn = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn));
+      var oIn = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn));
       var defaultOptions = {
         dimension: 3,
         light: oIn.lines ? null : 'directional',
         usage: 'STATIC'
       };
-      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultOptions, oIn);
+      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultOptions, oIn);
       var dim = options.dimension;
       var processOptions = function processOptions(o, u) {
         if (o.usage == null) {
@@ -54985,13 +55184,13 @@ var FigurePrimitives = /*#__PURE__*/function () {
         // and colors
         if (o.copy != null) {
           if (o.vertices != null) {
-            o.vertices = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__.copyPoints)(o.vertices, o.copy, 'points');
+            o.vertices = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__.copyPoints)(o.vertices, o.copy, 'points');
           }
           if (o.normals != null) {
-            o.normals = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__.copyPoints)(o.normals, o.copy, 'normals');
+            o.normals = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__.copyPoints)(o.normals, o.copy, 'normals');
           }
           if (o.colors != null) {
-            var count = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__.getCopyCount)(o.copy);
+            var count = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__.getCopyCount)(o.copy);
             var out = [];
             for (var i = 0; i < count; i += 1) {
               out.push.apply(out, _toConsumableArray(o.colors.map(function (c) {
@@ -55001,7 +55200,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
             o.colors = out;
           }
           if (o.texture != null && o.texture.coords != null) {
-            var _count = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__.getCopyCount)(o.copy);
+            var _count = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__.getCopyCount)(o.copy);
             var _out = [];
             for (var _i = 0; _i < _count; _i += 1) {
               _out.push.apply(_out, _toConsumableArray(o.texture.coords.slice()));
@@ -55072,8 +55271,8 @@ var FigurePrimitives = /*#__PURE__*/function () {
   }, {
     key: "generic3DBase",
     value: function generic3DBase(defaultOptions, optionsIn, getPointsFn) {
-      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultOptions, optionsIn);
-      var element = this.generic3((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, options, {
+      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultOptions, optionsIn);
+      var element = this.generic3((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, options, {
         points: [],
         normals: options.lines ? null : [],
         glPrimitive: options.lines ? 'LINES' : undefined
@@ -55085,7 +55284,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       element.custom.options = options;
       element.custom.getPoints = getPointsFn;
       element.custom.updatePoints = function (updateOptions) {
-        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.custom.options, {
+        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.custom.options, {
           transform: [],
           position: [0, 0]
         }, updateOptions);
@@ -55098,12 +55297,12 @@ var FigurePrimitives = /*#__PURE__*/function () {
           points = _element$custom$getPo2[0],
           normals = _element$custom$getPo2[1];
         if (o.lines == null || o.lines === false) {
-          element.custom.updateGeneric3((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+          element.custom.updateGeneric3((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
             points: points,
             normals: normals
           }));
         } else {
-          element.custom.updateGeneric3((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+          element.custom.updateGeneric3((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
             points: points,
             normals: null
           }));
@@ -55123,7 +55322,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         sides: 10,
         normals: 'flat',
         center: [0, 0, 0]
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.sphere)(o);
       });
     }
@@ -55135,7 +55334,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       }
       return this.generic3DBase({
         side: this.defaultLength
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.cube)(o);
       });
     }
@@ -55147,7 +55346,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       }
       return this.generic3DBase({
         length: this.defaultLength / 3
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.prism)(o);
       });
     }
@@ -55161,7 +55360,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         radius: this.defaultLength / 20,
         sides: 10,
         normals: 'flat'
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.cylinder)(o);
       });
     }
@@ -55176,7 +55375,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         sides: 10,
         normals: 'flat',
         length: 1
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.cone)(o);
       });
     }
@@ -55190,7 +55389,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         width: this.defaultLength / 40,
         sides: 10,
         normals: 'curve'
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.line3)(o);
       });
     }
@@ -55203,7 +55402,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       return this.generic3DBase({
         sides: 10,
         normals: 'flat'
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.revolve)(o);
       });
     }
@@ -55216,7 +55415,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       return this.generic3DBase({
         normals: 'flat',
         lines: false
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)), function (o) {
         return _tools_g2__WEBPACK_IMPORTED_MODULE_0__.surface.surface(o);
       });
     }
@@ -55244,7 +55443,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
     value: function morph() {
       var _this = this;
       var defaultOptions = {
-        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('primitive_'),
+        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('primitive_'),
         color: this.defaultColor,
         points: [],
         glPrimitive: 'TRIANGLES',
@@ -55254,7 +55453,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len1 = arguments.length, optionsIn = new Array(_len1), _key1 = 0; _key1 < _len1; _key1++) {
         optionsIn[_key1] = arguments[_key1];
       }
-      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
+      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
       options.transform = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getTransform)(options.transform);
       if (options.position != null) {
         options.position = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(options.position);
@@ -55266,7 +55465,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         colorVertex = true;
         fragmentShader = 'vertexColor';
       }
-      var glObject = new _DrawingObjects_GLObject_GLObject__WEBPACK_IMPORTED_MODULE_5__["default"](this.webgl[0], ['morpher', options.points.length, colorVertex], fragmentShader);
+      var glObject = new _DrawingObjects_GLObject_GLObject__WEBPACK_IMPORTED_MODULE_6__["default"](this.webgl[0], ['morpher', options.points.length, colorVertex], fragmentShader);
       glObject.setPrimitive(options.glPrimitive.toUpperCase());
       var shapeNameMap = {};
       if (options.names != null) {
@@ -55285,7 +55484,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           usage: 'STATIC',
           size: 2
         };
-        var b = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultBuffer);
+        var b = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultBuffer);
         glObject.addAttribute(attribute, b.size, points, b.type, b.normalize, b.stride, b.offset, b.usageIn);
       });
       if (colorVertex) {
@@ -55310,7 +55509,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
             usage: 'STATIC',
             size: 4
           };
-          var b = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultBuffer);
+          var b = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultBuffer);
           glObject.addAttribute(attribute, b.size, colors, b.type, b.normalize, b.stride, b.offset, b.usageIn);
         });
         options.color = this.defaultColor;
@@ -55318,7 +55517,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       glObject.addUniform('u_from', 1, 'INT');
       glObject.addUniform('u_to', 1, 'INT');
       glObject.addUniform('u_percent', 1, 'FLOAT');
-      var element = new _FigureElementPrimitiveMorph__WEBPACK_IMPORTED_MODULE_7__["default"](glObject, options.transform, options.color, null, options.name);
+      var element = new _FigureElementPrimitiveMorph__WEBPACK_IMPORTED_MODULE_8__["default"](glObject, options.transform, options.color, null, options.name);
       element.shapeNameMap = shapeNameMap;
       element.setPoints(0);
       element.fnMap.add('_morphCallback', function (percentage, customProperties) {
@@ -55330,7 +55529,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         for (var _len10 = arguments.length, opt = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
           opt[_key10] = arguments[_key10];
         }
-        var o = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}, {
+        var o = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}, {
           progression: 'easeinout',
           element: element
         }].concat(opt));
@@ -55340,7 +55539,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         };
         o.callback = '_morphCallback';
         o.timeKeeper = _this.timeKeeper;
-        return new _Animation_Animation__WEBPACK_IMPORTED_MODULE_6__.CustomAnimationStep(o);
+        return new _Animation_Animation__WEBPACK_IMPORTED_MODULE_7__.CustomAnimationStep(o);
       };
       element.animations.customSteps.push({
         step: element.animations.morph.bind(this),
@@ -55458,7 +55657,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len11 = arguments.length, optionsIn = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
         optionsIn[_key11] = arguments[_key11];
       }
-      var oIn = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn));
+      var oIn = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn));
       var element = this.generic3.apply(this, [{
         dimension: 2,
         light: null,
@@ -55546,7 +55745,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         drawBorderBuffer: 0,
         simple: false
       };
-      var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultOptions, optionsIn);
+      var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultOptions, optionsIn);
       if (o.linePrimitives === false) {
         o.lineNum = 2;
       }
@@ -55555,19 +55754,19 @@ var FigurePrimitives = /*#__PURE__*/function () {
       var drawBorder;
       var drawBorderBuffer;
       if (o.simple) {
-        var _makeFastPolyLine = (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_12__.makeFastPolyLine)(o.points, o.width, o.close);
+        var _makeFastPolyLine = (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_13__.makeFastPolyLine)(o.points, o.width, o.close);
         var _makeFastPolyLine2 = _slicedToArray(_makeFastPolyLine, 3);
         points = _makeFastPolyLine2[0];
         drawBorder = _makeFastPolyLine2[1];
         drawBorderBuffer = _makeFastPolyLine2[2];
       } else if (o.cornersOnly) {
-        var _makePolyLineCorners = (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_12__.makePolyLineCorners)(o.points, o.width, o.close, o.cornerLength, o.widthIs, o.cornerStyle, o.cornerSize, o.cornerSides, o.minAutoCornerAngle, o.linePrimitives, o.lineNum, o.drawBorderBuffer);
+        var _makePolyLineCorners = (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_13__.makePolyLineCorners)(o.points, o.width, o.close, o.cornerLength, o.widthIs, o.cornerStyle, o.cornerSize, o.cornerSides, o.minAutoCornerAngle, o.linePrimitives, o.lineNum, o.drawBorderBuffer);
         var _makePolyLineCorners2 = _slicedToArray(_makePolyLineCorners, 3);
         points = _makePolyLineCorners2[0];
         drawBorder = _makePolyLineCorners2[1];
         drawBorderBuffer = _makePolyLineCorners2[2];
       } else {
-        var _makePolyLine = (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_12__.makePolyLine)(o.points, o.width, o.close, o.widthIs, o.cornerStyle, o.cornerSize, o.cornerSides, o.minAutoCornerAngle, o.dash, o.linePrimitives, o.lineNum, o.drawBorder, o.drawBorderBuffer, o.arrow);
+        var _makePolyLine = (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_13__.makePolyLine)(o.points, o.width, o.close, o.widthIs, o.cornerStyle, o.cornerSize, o.cornerSides, o.minAutoCornerAngle, o.dash, o.linePrimitives, o.lineNum, o.drawBorder, o.drawBorderBuffer, o.arrow);
         var _makePolyLine2 = _slicedToArray(_makePolyLine, 3);
         points = _makePolyLine2[0];
         drawBorder = _makePolyLine2[1];
@@ -55603,7 +55802,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len12 = arguments.length, optionsIn = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
         optionsIn[_key12] = arguments[_key12];
       }
-      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn));
+      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn));
       var element = this.generic.apply(this, [{
         transform: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1).rotate(0).translate(),
         border: 'draw',
@@ -55628,7 +55827,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         drawBorderBuffer: 0
       };
       element.custom.updatePoints = function (updateOptions) {
-        var _this2$getPolylineTri = _this2.getPolylineTris((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.custom.options, updateOptions)),
+        var _this2$getPolylineTri = _this2.getPolylineTris((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.custom.options, updateOptions)),
           _this2$getPolylineTri2 = _slicedToArray(_this2$getPolylineTri, 5),
           o = _this2$getPolylineTri2[0],
           points = _this2$getPolylineTri2[1],
@@ -55636,7 +55835,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           drawBorderBuffer = _this2$getPolylineTri2[3],
           drawType = _this2$getPolylineTri2[4];
         element.custom.options = o;
-        element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+        element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
           points: points,
           drawBorder: drawBorder,
           drawBorderBuffer: drawBorderBuffer,
@@ -55663,12 +55862,12 @@ var FigurePrimitives = /*#__PURE__*/function () {
       if (o.sidesToDraw > o.sides) {
         o.sidesToDraw = o.sides;
       }
-      var points = (0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_13__.getPolygonPoints)(o);
+      var points = (0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_14__.getPolygonPoints)(o);
       // let { drawBorderBuffer } = o;
       var drawBorderOffset = 0;
       var drawBorder;
       if (o.line != null) {
-        o.line = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, {
+        o.line = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, {
           width: this.defaultLineWidth,
           widthIs: 'mid'
         }, o.line);
@@ -55706,7 +55905,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       if (drawBorderOffset === 0) {
         drawBorder = [points];
       } else {
-        drawBorder = [(0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_13__.getPolygonPoints)((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+        drawBorder = [(0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_14__.getPolygonPoints)((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
           radius: o.radius + drawBorderOffset
         }))];
       }
@@ -55739,7 +55938,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         return [];
       };
       element.custom.updatePoints = function (updateOptions) {
-        var borderOptions = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.custom.options, updateOptions);
+        var borderOptions = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.custom.options, updateOptions);
         var _element$custom$getBo = element.custom.getBorder(borderOptions),
           _element$custom$getBo2 = _slicedToArray(_element$custom$getBo, 2),
           o = _element$custom$getBo2[0],
@@ -55750,10 +55949,10 @@ var FigurePrimitives = /*#__PURE__*/function () {
             points = _element$custom$getFi2[0],
             drawType = _element$custom$getFi2[1];
           element.custom.options = o;
-          element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+          element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
             points: points,
             drawBorder: border,
-            drawBorderBuffer: (0,_geometries_buffer__WEBPACK_IMPORTED_MODULE_21__.getBufferBorder)([border], o.drawBorderBuffer, element.custom.skipConcave, element.custom.bufferOffset),
+            drawBorderBuffer: (0,_geometries_buffer__WEBPACK_IMPORTED_MODULE_22__.getBufferBorder)([border], o.drawBorderBuffer, element.custom.skipConcave, element.custom.bufferOffset),
             drawType: drawType
           }));
         } else {
@@ -55768,7 +55967,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
             o.line.drawBorder = 'positive';
             bufferOffsetToUse = 'positive';
           }
-          var _element$custom$getLi = element.custom.getLine((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o.line, {
+          var _element$custom$getLi = element.custom.getLine((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o.line, {
               points: border
             })),
             _element$custom$getLi2 = _slicedToArray(_element$custom$getLi, 5),
@@ -55781,8 +55980,8 @@ var FigurePrimitives = /*#__PURE__*/function () {
           if (element.custom.bufferOffset === 'positive') {
             drawBorder.reverse();
           }
-          var drawBorderBuffer = (0,_geometries_buffer__WEBPACK_IMPORTED_MODULE_21__.getBufferBorder)(drawBorder, o.drawBorderBuffer, element.custom.skipConcave, bufferOffsetToUse);
-          element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+          var drawBorderBuffer = (0,_geometries_buffer__WEBPACK_IMPORTED_MODULE_22__.getBufferBorder)(drawBorder, o.drawBorderBuffer, element.custom.skipConcave, bufferOffsetToUse);
+          element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
             points: _points,
             drawBorder: drawBorder,
             drawBorderBuffer: drawBorderBuffer,
@@ -55810,7 +56009,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         direction: 1,
         rotation: 0,
         offset: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0)
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         var border = _this4.getPolygonBorder(o);
         if (o.sidesToDraw !== o.sides) {
@@ -55827,13 +56026,13 @@ var FigurePrimitives = /*#__PURE__*/function () {
         return border;
       };
       element.custom.getFill = function (border, fillOptions) {
-        return [(0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_13__.getTrisFillPolygon)(fillOptions.offset, border, fillOptions.sides, fillOptions.sidesToDraw), 'TRIANGLES'];
+        return [(0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_14__.getTrisFillPolygon)(fillOptions.offset, border, fillOptions.sides, fillOptions.sidesToDraw), 'TRIANGLES'];
       };
       // element.custom.getLine = (o: OBJ_PolyLineTris) => this.getPolylineTris(o);
 
       element.drawingObject.getPointCountForAngle = function (angle) {
         var optionsToUse = element.custom.options;
-        var sidesToDraw = Math.floor(_tools_math__WEBPACK_IMPORTED_MODULE_3__.round(angle, 8) / _tools_math__WEBPACK_IMPORTED_MODULE_3__.round(Math.PI * 2, 8) * optionsToUse.sides);
+        var sidesToDraw = Math.floor(_tools_math__WEBPACK_IMPORTED_MODULE_4__.round(angle, 8) / _tools_math__WEBPACK_IMPORTED_MODULE_4__.round(Math.PI * 2, 8) * optionsToUse.sides);
         if (optionsToUse.line == null) {
           return sidesToDraw * 3;
         }
@@ -55842,7 +56041,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         }
         return sidesToDraw * 6;
       };
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
 
@@ -55863,7 +56062,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         direction: 1,
         rotation: 0,
         offset: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0)
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         if (o.innerRadius == null) {
           o.innerRadius = o.radius / 3;
@@ -55875,9 +56074,9 @@ var FigurePrimitives = /*#__PURE__*/function () {
         return result;
       };
       element.custom.getFill = function (border, fillOptions) {
-        return [(0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_13__.getTrisFillPolygon)(fillOptions.offset, border, fillOptions.sides, fillOptions.sidesToDraw), 'TRIANGLES'];
+        return [(0,_geometries_polygon_polygon__WEBPACK_IMPORTED_MODULE_14__.getTrisFillPolygon)(fillOptions.offset, border, fillOptions.sides, fillOptions.sidesToDraw), 'TRIANGLES'];
       };
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
 
@@ -55901,7 +56100,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           sides: 1
         },
         offset: [0, 0]
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         if (o.line != null && o.line.widthIs === 'inside') {
           o.line.widthIs = 'positive';
@@ -55912,13 +56111,13 @@ var FigurePrimitives = /*#__PURE__*/function () {
         if (o.offset != null) {
           o.offset = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(o.offset);
         }
-        return [o, (0,_geometries_rectangle__WEBPACK_IMPORTED_MODULE_14__.getRectangleBorder)(o)];
+        return [o, (0,_geometries_rectangle__WEBPACK_IMPORTED_MODULE_15__.getRectangleBorder)(o)];
       };
       element.custom.getFill = function (border) {
-        return [(0,_geometries_rectangle__WEBPACK_IMPORTED_MODULE_14__.rectangleBorderToTris)(border), 'TRIANGLES'];
+        return [(0,_geometries_rectangle__WEBPACK_IMPORTED_MODULE_15__.rectangleBorderToTris)(border), 'TRIANGLES'];
       };
       // element.custom.getLine = (o: OBJ_PolyLineTris) => this.getPolylineTris(o);
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
   }, {
@@ -55937,7 +56136,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         yAlign: 'baseline',
         transform: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1).rotate(0).translate(0, 0),
         // color: this.defaultColor,
-        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('primitive_'),
+        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('primitive_'),
         vertexShader: {
           dimension: 2,
           color: 'texture'
@@ -56004,7 +56203,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         yAlign: 'baseline',
         transform: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1).rotate(0).translate(0, 0),
         color: this.defaultColor,
-        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('primitive_'),
+        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('primitive_'),
         vertexShader: {
           dimension: 2,
           color: 'texture'
@@ -56029,7 +56228,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         for (var _len18 = arguments.length, fo = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
           fo[_key18] = arguments[_key18];
         }
-        return _construct(_FigureElementPrimitiveGLText__WEBPACK_IMPORTED_MODULE_9__["default"], fo);
+        return _construct(_FigureElementPrimitiveGLText__WEBPACK_IMPORTED_MODULE_10__["default"], fo);
       };
       var element = this.gl(o);
       element.setup(o);
@@ -56060,7 +56259,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         element.scenarios = options.scenarios;
       }
       if (options.scene != null) {
-        if (options.scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"]) {
+        if (options.scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"]) {
           element.scene = options.scene;
         } else {
           element.setScene(options.scene);
@@ -56084,7 +56283,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         yAlign: 'baseline',
         transform: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1).rotate(0).translate(0, 0),
         color: this.defaultColor,
-        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('primitive_'),
+        name: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('primitive_'),
         adjustments: {
           width: 0,
           ascent: 0,
@@ -56101,14 +56300,14 @@ var FigurePrimitives = /*#__PURE__*/function () {
         for (var _len20 = arguments.length, fo = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
           fo[_key20] = arguments[_key20];
         }
-        return _construct(_FigureElementPrimitiveGLText__WEBPACK_IMPORTED_MODULE_9__["default"], fo);
+        return _construct(_FigureElementPrimitiveGLText__WEBPACK_IMPORTED_MODULE_10__["default"], fo);
       };
       o.transform = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getTransform)(o.transform);
       if (o.position != null) {
         o.position = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(o.position);
         o.transform.updateTranslation(o.position);
       }
-      var element = new _FigureElementPrimitive2DText__WEBPACK_IMPORTED_MODULE_8__["default"](this.draw2D[0], o);
+      var element = new _FigureElementPrimitive2DText__WEBPACK_IMPORTED_MODULE_9__["default"](this.draw2D[0], o);
       return this.elementSetup(element, o);
     }
   }, {
@@ -56128,15 +56327,15 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len21 = arguments.length, options = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
         options[_key21] = arguments[_key21];
       }
-      var combinedOptions = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options));
+      var combinedOptions = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options));
       for (var i = options.length - 1; i >= 0; i -= 1) {
-        if (options[i].scene != null && options[i].scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"]) {
+        if (options[i].scene != null && options[i].scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"]) {
           combinedOptions.scene = options[i].scene;
           break;
         }
       }
       for (var _i2 = options.length - 1; _i2 >= 0; _i2 -= 1) {
-        if (options[_i2].changeScene != null && options[_i2].changeScene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"]) {
+        if (options[_i2].changeScene != null && options[_i2].changeScene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"]) {
           combinedOptions.changeScene = options[_i2].changeScene;
           break;
         }
@@ -56145,16 +56344,16 @@ var FigurePrimitives = /*#__PURE__*/function () {
         scene = combinedOptions.scene;
       if (scene == null) {
         scene = this.scene;
-      } else if (!(scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"])) {
-        scene = new _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"](scene);
+      } else if (!(scene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"])) {
+        scene = new _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"](scene);
       }
-      if (changeScene != null && !(changeScene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"])) {
-        changeScene = new _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"](changeScene);
+      if (changeScene != null && !(changeScene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"])) {
+        changeScene = new _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"](changeScene);
       }
       defaultOptions.width = scene.right - scene.left;
       defaultOptions.height = scene.top - scene.bottom;
       defaultOptions.position = [scene.left + defaultOptions.width / 2, scene.bottom + defaultOptions.height / 2];
-      var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjectsWithOptions)({}, defaultOptions, combinedOptions);
+      var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjectsWithOptions)({}, defaultOptions, combinedOptions);
       var element = this.rectangle({
         width: o.width,
         height: o.height,
@@ -56166,7 +56365,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           for (var _len22 = arguments.length, fo = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
             fo[_key22] = arguments[_key22];
           }
-          return _construct(_FigureElementPrimitiveGesture__WEBPACK_IMPORTED_MODULE_23__["default"], fo);
+          return _construct(_FigureElementPrimitiveGesture__WEBPACK_IMPORTED_MODULE_24__["default"], fo);
         }
       });
       element.setup(o);
@@ -56186,7 +56385,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len23 = arguments.length, options = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
         options[_key23] = arguments[_key23];
       }
-      var o = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjectsWithOptions.apply(void 0, [{
+      var o = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjectsWithOptions.apply(void 0, [{
         except: 'controlScene'
       }, {}, {
         left: 0,
@@ -56218,7 +56417,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       }
       for (var i = options.length - 1; i >= 0; i -= 1) {
         if (options[i].controlScene != null) {
-          if (options[i].controlScene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"]) {
+          if (options[i].controlScene instanceof _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"]) {
             element.custom.sceneToChange = options[i].controlScene;
             i = -1;
           } else if (typeof options[i].controlScene === 'string') {
@@ -56227,7 +56426,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           }
         }
       }
-      element.scene = new _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_22__["default"]({
+      element.scene = new _tools_geometry_scene__WEBPACK_IMPORTED_MODULE_23__["default"]({
         style: '2D',
         left: 0,
         right: 1,
@@ -56286,7 +56485,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         }
         if (deltaEl > 0 && angleToLock > Math.PI / 2) {
           angleToLock = Math.PI - angleToLock;
-          deltaEl = _tools_math__WEBPACK_IMPORTED_MODULE_3__.round(Math.min(angleToLock - deltaAngle, deltaEl), 4);
+          deltaEl = _tools_math__WEBPACK_IMPORTED_MODULE_4__.round(Math.min(angleToLock - deltaAngle, deltaEl), 4);
         }
         var t = [['r', deltaEl].concat(_toConsumableArray(tiltAxis.toArray())), ['r', deltaAz].concat(_toConsumableArray(panAxis.toArray()))];
         var matrix = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getTransform)(t).matrix();
@@ -56316,7 +56515,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         xAlign: 'center',
         yAlign: 'middle',
         sides: 20
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         if (o.line != null && o.line.widthIs === 'inside') {
           o.line.widthIs = 'positive';
@@ -56324,13 +56523,13 @@ var FigurePrimitives = /*#__PURE__*/function () {
         if (o.line != null && o.line.widthIs === 'outside') {
           o.line.widthIs = 'negative';
         }
-        return [o, (0,_geometries_ellipse__WEBPACK_IMPORTED_MODULE_15__.getEllipseBorder)(o)];
+        return [o, (0,_geometries_ellipse__WEBPACK_IMPORTED_MODULE_16__.getEllipseBorder)(o)];
       };
       element.custom.getFill = function (border) {
-        return [(0,_geometries_ellipse__WEBPACK_IMPORTED_MODULE_15__.ellipseBorderToTris)(border), 'TRIANGLES'];
+        return [(0,_geometries_ellipse__WEBPACK_IMPORTED_MODULE_16__.ellipseBorderToTris)(border), 'TRIANGLES'];
       };
       // element.custom.getLine = (o: OBJ_PolyLineTris) => this.getPolylineTris(o);
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
 
@@ -56351,7 +56550,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         angle: 1,
         offset: [0, 0],
         fillCenter: false
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         if (o.line != null && o.line.widthIs === 'inside') {
           o.line.widthIs = 'positive';
@@ -56363,13 +56562,13 @@ var FigurePrimitives = /*#__PURE__*/function () {
           o.offset = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(o.offset);
         }
         element.custom.close = false;
-        return [o, (0,_geometries_arc__WEBPACK_IMPORTED_MODULE_16__.getArcBorder)(o)];
+        return [o, (0,_geometries_arc__WEBPACK_IMPORTED_MODULE_17__.getArcBorder)(o)];
       };
       element.custom.getFill = function (border) {
-        return [(0,_geometries_arc__WEBPACK_IMPORTED_MODULE_16__.arcBorderToTris)(border), 'TRIANGLES'];
+        return [(0,_geometries_arc__WEBPACK_IMPORTED_MODULE_17__.arcBorderToTris)(border), 'TRIANGLES'];
       };
       // element.custom.getLine = (o: OBJ_PolyLineTris) => this.getPolylineTris(o);
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
 
@@ -56391,7 +56590,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         top: 'center',
         direction: 1,
         rotation: 0
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         if (o.xAlign == null) {
           if (o.points != null) {
@@ -56418,8 +56617,8 @@ var FigurePrimitives = /*#__PURE__*/function () {
         // } else {
         //   element.custom.bufferOffset = 'negative';
         // }
-        var border = (0,_geometries_triangle__WEBPACK_IMPORTED_MODULE_17__.getTriangleBorder)(o);
-        if (o.direction === -1 || (0,_geometries_triangle__WEBPACK_IMPORTED_MODULE_17__.getTriangleDirection)(border) === -1) {
+        var border = (0,_geometries_triangle__WEBPACK_IMPORTED_MODULE_18__.getTriangleBorder)(o);
+        if (o.direction === -1 || (0,_geometries_triangle__WEBPACK_IMPORTED_MODULE_18__.getTriangleDirection)(border) === -1) {
           border.reverse();
         }
         return [o, border];
@@ -56431,7 +56630,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       element.custom.getFill = function (border) {
         return [border, 'TRIANGLES'];
       };
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
 
@@ -56456,7 +56655,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         tail: false,
         drawPosition: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0)
         // barb: this.defaultLength / 8,
-      }, _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      }, _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       element.custom.getBorder = function (o) {
         if (o.line != null && o.line.widthIs === 'inside') {
           o.line.widthIs = 'positive';
@@ -56464,17 +56663,17 @@ var FigurePrimitives = /*#__PURE__*/function () {
         if (o.line != null && o.line.widthIs === 'outside') {
           o.line.widthIs = 'negative';
         }
-        var optionsWithDefaultArrow = (0,_geometries_arrow__WEBPACK_IMPORTED_MODULE_18__.defaultArrowOptions)(o);
-        var _getArrow = (0,_geometries_arrow__WEBPACK_IMPORTED_MODULE_18__.getArrow)(optionsWithDefaultArrow),
+        var optionsWithDefaultArrow = (0,_geometries_arrow__WEBPACK_IMPORTED_MODULE_19__.defaultArrowOptions)(o);
+        var _getArrow = (0,_geometries_arrow__WEBPACK_IMPORTED_MODULE_19__.getArrow)(optionsWithDefaultArrow),
           _getArrow2 = _slicedToArray(_getArrow, 2),
           border = _getArrow2[0],
           borderBuffer = _getArrow2[1];
         return [optionsWithDefaultArrow, border, borderBuffer];
       };
       element.custom.getFill = function (border, o) {
-        return [(0,_geometries_arrow__WEBPACK_IMPORTED_MODULE_18__.getArrowTris)(border, o), 'TRIANGLES'];
+        return [(0,_geometries_arrow__WEBPACK_IMPORTED_MODULE_19__.getArrowTris)(border, o), 'TRIANGLES'];
       };
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options)));
       return element;
     }
 
@@ -56503,7 +56702,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         }
       };
       var getTris = function getTris(points) {
-        return (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_12__.makePolyLine)(points, element.custom.options.line.width, false, 'mid', 'auto',
+        return (0,_geometries_lines_lines__WEBPACK_IMPORTED_MODULE_13__.makePolyLine)(points, element.custom.options.line.width, false, 'mid', 'auto',
         // cornerStyle doesn't matter
         0.1,
         // cornerSize doesn't matter
@@ -56514,7 +56713,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         element.custom.options.line.dash, element.custom.options.line.linePrimitives, element.custom.options.line.lineNum, [[]], 0);
       };
       element.custom.updatePoints = function (updateOptions) {
-        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.custom.options, updateOptions);
+        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.custom.options, updateOptions);
         element.custom.options = o;
         // Prioritize Num over Step. Only define Num from Step if Num is undefined.
         var bounds = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getRect)(o.bounds);
@@ -56567,7 +56766,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           var _getTris = getTris([yLineStart, yLineStop]),
             _getTris2 = _slicedToArray(_getTris, 1),
             yLine = _getTris2[0];
-          yTris = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__.copyPoints)(yLine, [{
+          yTris = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__.copyPoints)(yLine, [{
             along: 'x',
             num: xNum - 1,
             step: xStep
@@ -56577,7 +56776,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
           var _getTris3 = getTris([xLineStart, xLineStop]),
             _getTris4 = _slicedToArray(_getTris3, 1),
             xLine = _getTris4[0];
-          xTris = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_20__.copyPoints)(xLine, [{
+          xTris = (0,_geometries_copy_copy__WEBPACK_IMPORTED_MODULE_21__.copyPoints)(xLine, [{
             along: 'y',
             num: yNum - 1,
             step: yStep
@@ -56598,14 +56797,14 @@ var FigurePrimitives = /*#__PURE__*/function () {
             drawBorderBuffer = [[border[0].add(-buf, -buf), border[1].add(buf, -buf), border[2].add(buf, buf), border[3].add(-buf, buf)]];
           }
         }
-        element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+        element.custom.updateGeneric((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
           points: [].concat(_toConsumableArray(xTris), _toConsumableArray(yTris)),
           drawBorder: drawBorder,
           drawBorderBuffer: drawBorderBuffer,
           drawType: o.line.linePrimitives ? 'LINES' : 'TRIANGLES'
         }));
       };
-      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(optionsIn)));
+      element.custom.updatePoints(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(optionsIn)));
       return element;
     }
 
@@ -56619,15 +56818,15 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len29 = arguments.length, options = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
         options[_key29] = arguments[_key29];
       }
-      var element = this.polyline(_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}, {
+      var element = this.polyline(_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}, {
         transform: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1).rotate(0).translate()
       }].concat(options, [{
         points: [[0, 0], [0, 1]],
         dash: [],
         arrow: null
       }])));
-      var joinedOptions = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}].concat(options));
-      element.custom.options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.custom.options, {
+      var joinedOptions = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}].concat(options));
+      element.custom.options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.custom.options, {
         p1: [0, 0],
         angle: 0,
         length: this.defaultLength,
@@ -56665,14 +56864,14 @@ var FigurePrimitives = /*#__PURE__*/function () {
 
       element.custom.updatePolyline = element.custom.updatePoints;
       element.custom.updatePoints = function (updateOptions) {
-        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, element.custom.options, updateOptions);
-        var _getLine = (0,_geometries_line__WEBPACK_IMPORTED_MODULE_19__["default"])(o),
+        var o = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, element.custom.options, updateOptions);
+        var _getLine = (0,_geometries_line__WEBPACK_IMPORTED_MODULE_20__["default"])(o),
           _getLine2 = _slicedToArray(_getLine, 3),
           updatedPoints = _getLine2[0],
           updatedBorder = _getLine2[1],
           updatedTouchBorder = _getLine2[2];
         // element.custom.setupLine(updatedPoints, o);
-        element.custom.updatePolyline((0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, o, {
+        element.custom.updatePolyline((0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, o, {
           points: updatedPoints,
           border: updatedBorder,
           touchBorder: updatedTouchBorder
@@ -56700,7 +56899,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
   }, {
     key: "textGL",
     value: function textGL(options) {
-      return (0,_Text__WEBPACK_IMPORTED_MODULE_10__["default"])(this.webgl[0], options);
+      return (0,_Text__WEBPACK_IMPORTED_MODULE_11__["default"])(this.webgl[0], options);
     }
 
     /*
@@ -56734,7 +56933,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len30 = arguments.length, optionsIn = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
         optionsIn[_key30] = arguments[_key30];
       }
-      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
+      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
       for (var i = 0; i < optionsIn.length; i += 1) {
         if (optionsIn[i].font != null) {
           if (optionsIn[i].font.src) {
@@ -56955,7 +57154,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
         wrap: true,
         id: "id__temp_".concat(Math.round(Math.random() * 10000))
       };
-      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects)({}, defaultOptions, optionsIn);
+      var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects)({}, defaultOptions, optionsIn);
       options.element = optionsIn.element;
       var element;
       var parent;
@@ -56984,7 +57183,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       if (parent == null) {
         parent = this.htmlCanvas;
       }
-      var hT = new _DrawingObjects_HTMLObject_HTMLObject__WEBPACK_IMPORTED_MODULE_11__["default"](parent, options.id, new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0), options.yAlign, options.xAlign, options.element);
+      var hT = new _DrawingObjects_HTMLObject_HTMLObject__WEBPACK_IMPORTED_MODULE_12__["default"](parent, options.id, new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0), options.yAlign, options.xAlign, options.element);
       var p = (0,_tools_g2__WEBPACK_IMPORTED_MODULE_0__.getPoint)(options.position);
       var figureElement = new _Element__WEBPACK_IMPORTED_MODULE_2__.FigureElementPrimitive(hT, new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1, 1).translate(p.x, p.y), [1, 1, 1, 1]);
       figureElement.timeKeeper = this.timeKeeper;
@@ -57016,7 +57215,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       element.style.position = 'absolute';
       element.setAttribute('id', id);
       this.htmlCanvas.appendChild(element);
-      var hT = new _DrawingObjects_HTMLObject_HTMLObject__WEBPACK_IMPORTED_MODULE_11__["default"](this.htmlCanvas, id, new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0), yAlign, xAlign, elementToAdd);
+      var hT = new _DrawingObjects_HTMLObject_HTMLObject__WEBPACK_IMPORTED_MODULE_12__["default"](this.htmlCanvas, id, new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0), yAlign, xAlign, elementToAdd);
       var figureElement = new _Element__WEBPACK_IMPORTED_MODULE_2__.FigureElementPrimitive(hT, new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Transform().scale(1, 1).translate(location.x, location.y), [1, 1, 1, 1]);
       figureElement.timeKeeper = this.timeKeeper;
       figureElement.recorder = this.recorder;
@@ -57026,7 +57225,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
     key: "htmlImage",
     value: function htmlImage() {
       var defaultOptions = {
-        id: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('id__html_image_'),
+        id: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('id__html_image_'),
         classes: '',
         position: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0),
         yAlign: 'middle',
@@ -57036,7 +57235,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len31 = arguments.length, optionsIn = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
         optionsIn[_key31] = arguments[_key31];
       }
-      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
+      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
       var image = document.createElement('img');
       image.src = options.src;
       var id = options.id,
@@ -57056,7 +57255,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
     value: function htmlText() {
       var defaultOptions = {
         text: '',
-        id: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_4__.generateUniqueId)('id__html_text_'),
+        id: (0,_tools_tools__WEBPACK_IMPORTED_MODULE_5__.generateUniqueId)('id__html_text_'),
         classes: '',
         position: new _tools_g2__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0),
         yAlign: 'middle',
@@ -57066,7 +57265,7 @@ var FigurePrimitives = /*#__PURE__*/function () {
       for (var _len32 = arguments.length, optionsIn = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
         optionsIn[_key32] = arguments[_key32];
       }
-      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_4__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
+      var options = _tools_tools__WEBPACK_IMPORTED_MODULE_5__.joinObjects.apply(void 0, [{}, defaultOptions].concat(optionsIn));
       var inside = document.createElement('div');
       (0,_tools_htmlGenerator__WEBPACK_IMPORTED_MODULE_1__.setHTML)(inside, options.text, options.modifiers);
       var id = options.id,
@@ -66072,6 +66271,7 @@ var Atlas = /*#__PURE__*/function () {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CHANNELS_PER_MASK: () => (/* binding */ CHANNELS_PER_MASK),
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _tools_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../tools/tools */ "./src/js/tools/tools.ts");
@@ -66088,6 +66288,14 @@ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(
 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; }
 
 
+/**
+ * Number of recolorable regions a single mask texture provides in the
+ * `textureMap` color mode - one per channel (r, g, b, a). N masks therefore
+ * define `CHANNELS_PER_MASK * N` tints.
+ * @group Shaders
+ */
+var CHANNELS_PER_MASK = 4;
+
 /**
  * Options used to compose vertex shader source code.
  *
@@ -66143,7 +66351,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  *    to fragment shader used when `light = 'point'`
  *
  * @property {2 | 3} [dimension] (`2`)
- * @property {'vertex' | 'uniform' | 'texture'} [color] (`uniform`)
+ * @property {'vertex' | 'uniform' | 'texture' | 'textureMap'} [color] (`uniform`)
  * @property {'point' | 'directional' | null} [light] (`null`)
  * @interface
  * @group Shaders
@@ -66176,7 +66384,16 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * - `vec4 u_color`: global color for all vertices used all times. When
  *   `color = 'texture'` or `color = 'vertex'`, only the alpha channel of
  *   `u_color` is used.
- * - `sampler2D u_texture`: texture used when `color = 'texture'`.
+ * - `sampler2D u_texture`: texture used when `color = 'texture'`,
+ *   `color = 'textureAlpha'` or `color = 'textureMap'`.
+ * - `sampler2D u_mask0`, `u_mask1`, ...: mask textures used when
+ *   `color = 'textureMap'` (one per mask, set by the `masks` count). Each mask's
+ *   `r`, `g`, `b` and `a` channels select four regions of `u_texture` to
+ *   recolor. Mask `m`'s four channels map to tints `u_tint{4m+0..3}`.
+ * - `vec4 u_tint0`, `u_tint1`, ...: region tint colors used when
+ *   `color = 'textureMap'` (four per mask). The `rgb` channels are the tint
+ *   color and the `a` channel is the tint strength (`0` leaves the base texture
+ *   unchanged).
  * - `vec3 u_directionalLight`: world space position of directional light
  *   source used when `light = 'directional'`
  * - `float u_ambientLight`: ambient light used when `light = 'directional'` or
@@ -66196,7 +66413,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  *    from vertex shader used when `light = 'point'`
  *
  * @property {2 | 3} [dimension] (`2`)
- * @property {'vertex' | 'uniform' | 'texture'} [color] (`uniform`)
+ * @property {'vertex' | 'uniform' | 'texture' | 'textureMap'} [color] (`uniform`)
  * @property {'point' | 'directional' | null} [light] (`null`)
  * @interface
  * @group Shaders
@@ -66235,7 +66452,7 @@ function composeVertexShader() {
     src += 'attribute vec4 a_vertex;\n';
     vars.push('a_vertex');
   }
-  if (color === 'texture') {
+  if (color === 'texture' || color === 'textureMap') {
     src += 'attribute vec2 a_texcoord;\n';
     src += 'varying vec2 v_texcoord;\n';
     vars.push('a_texcoord');
@@ -66270,7 +66487,7 @@ function composeVertexShader() {
   } else {
     src += '  gl_Position = u_worldViewProjectionMatrix * a_vertex;\n';
   }
-  if (color === 'texture') {
+  if (color === 'texture' || color === 'textureMap') {
     src += '  v_texcoord = a_texcoord;\n';
   } else if (color === 'vertex') {
     src += '  v_color = a_color;\n';
@@ -66289,11 +66506,18 @@ function composeFragShader() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var defaultOptions = {
     color: 'uniform',
-    light: null
+    light: null,
+    masks: 1
   };
   var _joinObjects2 = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_0__.joinObjects)(defaultOptions, options),
     light = _joinObjects2.light,
-    color = _joinObjects2.color;
+    color = _joinObjects2.color,
+    masks = _joinObjects2.masks;
+  // textureMap recolors the base texture using one or more mask textures. Each
+  // mask contributes CHANNELS_PER_MASK regions (its r, g, b, a channels), so
+  // numMasks masks define CHANNELS_PER_MASK * numMasks tints.
+  var numMasks = color === 'textureMap' ? Math.max(1, masks) : 0;
+  var channels = ['r', 'g', 'b', 'a'];
   var src = '\nprecision mediump float;\n';
   src += 'uniform vec4 u_color;\n';
   var vars = ['u_color'];
@@ -66304,6 +66528,18 @@ function composeFragShader() {
     src += 'uniform sampler2D u_texture;\n';
     src += 'varying vec2 v_texcoord;\n';
     vars.push('u_texture');
+  } else if (color === 'textureMap') {
+    src += 'uniform sampler2D u_texture;\n';
+    vars.push('u_texture');
+    for (var m = 0; m < numMasks; m += 1) {
+      src += "uniform sampler2D u_mask".concat(m, ";\n");
+      vars.push("u_mask".concat(m));
+    }
+    for (var t = 0; t < numMasks * CHANNELS_PER_MASK; t += 1) {
+      src += "uniform vec4 u_tint".concat(t, ";\n");
+      vars.push("u_tint".concat(t));
+    }
+    src += 'varying vec2 v_texcoord;\n';
   }
   if (light === 'directional') {
     src += 'varying vec3 v_normal;\n';
@@ -66338,6 +66574,23 @@ function composeFragShader() {
     // src += '  gl_FragColor.rgb *= gl_FragColor.a * texture2D(u_texture, v_texcoord).a;\n';
     // src += '  gl_FragColor = texture2D(u_texture, v_texcoord).a * u_color;\n';
     src += '  gl_FragColor.rgb *= gl_FragColor.a;\n';
+  } else if (color === 'textureMap') {
+    // Base texture color, with each mask texture retinting up to four regions.
+    // Each mask channel (r, g, b, a) selects a region, and the matching u_tint's
+    // alpha controls how strongly that region is recolored (0 = leave the base
+    // color unchanged). With one mask this is exactly four mixes and one extra
+    // texture fetch; each additional mask adds one fetch and four mixes.
+    src += '  vec4 base = texture2D(u_texture, v_texcoord);\n';
+    src += '  vec3 col = base.rgb;\n';
+    for (var _m = 0; _m < numMasks; _m += 1) {
+      src += "  vec4 mask".concat(_m, " = texture2D(u_mask").concat(_m, ", v_texcoord);\n");
+      for (var c = 0; c < CHANNELS_PER_MASK; c += 1) {
+        var _t = _m * CHANNELS_PER_MASK + c;
+        src += "  col = mix(col, u_tint".concat(_t, ".rgb, mask").concat(_m, ".").concat(channels[c], " * u_tint").concat(_t, ".a);\n");
+      }
+    }
+    src += '  gl_FragColor = vec4(col, base.a * u_color.a);\n';
+    src += '  gl_FragColor.rgb *= gl_FragColor.a;\n';
   }
 
   // src += '  gl_FragColor.rgb *= gl_FragColor.a;\n';
@@ -81845,8 +82098,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.7.1",
-  gitHash: "501b3a1fb",
+  version: "1.8.0",
+  gitHash: "4b64a8de5",
   tools: tools,
   Figure: _js_figure_Figure__WEBPACK_IMPORTED_MODULE_5__["default"],
   Recorder: _js_figure_Recorder_Recorder__WEBPACK_IMPORTED_MODULE_7__.Recorder,