figureone 1.7.1 → 1.9.0

package/index.js

@@ -7167,6 +7167,18 @@ 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.
+
+  // The webgl texture id this object currently holds a base-texture reference to
+  // (acquired by initTexture, or adopted from a shared atlas via
+  // setBaseTextureRef). resetTextureBuffer releases exactly this id, so the
+  // release can never be unbalanced with the acquire. null = no reference held.
+
   function GLObject(webgl) {
     var _this;
     var vertexShader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -7196,6 +7208,8 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
     _this.numVertices = 0;
     _this.uniforms = {};
     _this.texture = null;
+    _this.acquiredBaseTextureId = null;
+    _this.maskTextures = [];
     // this.selectorProgramIndex = this.webgl.getProgram(selectorVertexShader, selectorFragShader);
     _this.initProgram();
     return _this;
@@ -7393,6 +7407,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 +7445,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;
@@ -7429,7 +7469,20 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
       //   gl.STATIC_DRAW,
       // );
       webgl.addTexture(id, data || src, loadColor, repeat, this.executeOnLoad.bind(this), force);
+      // addTexture took/holds a reference to this id; record it so
+      // resetTextureBuffer releases exactly what was acquired. (For a forced
+      // update the id is unchanged, so this is idempotent.)
+      this.acquiredBaseTextureId = id;
       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)
       //   || (
@@ -7484,6 +7537,30 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
       // }
     }
 
+    /**
+     * Adopt a base-texture reference to an already-registered texture (e.g. a
+     * shared font atlas uploaded by the Atlas, whose id this object renders with
+     * but does not upload itself).
+     *
+     * Releases any previously-held base reference first (so a font/atlas change
+     * rebalances correctly) and is idempotent when the id is unchanged. If the
+     * texture isn't registered yet, no reference is taken and acquiredBaseTextureId
+     * is cleared, so the later resetTextureBuffer release stays balanced (it only
+     * releases a reference that was actually acquired).
+     */
+  }, {
+    key: "setBaseTextureRef",
+    value: function setBaseTextureRef(id) {
+      if (this.acquiredBaseTextureId === id) {
+        return;
+      }
+      var webgl = this.webgl;
+      if (this.acquiredBaseTextureId != null) {
+        webgl.deleteTexture(this.acquiredBaseTextureId);
+      }
+      this.acquiredBaseTextureId = webgl.acquireTexture(id) ? id : null;
+    }
+
     // A texture map is a texture coords point that lines up with the texture
     // vertex point. So, if the vertex shape is rectangular, centered at the
     // origin and wants to incorporate the entire texture, then the map would
@@ -7661,16 +7738,25 @@ 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) {
-        if (deleteTexture && webgl.textures[texture.id] != null) {
-          webgl.deleteTexture(texture.id);
-        }
-        if (texture.buffer != null) {
-          gl.deleteBuffer(texture.buffer);
-          texture.buffer = null;
-        }
+      if (deleteTexture && this.acquiredBaseTextureId != null) {
+        // Release exactly the base reference this object acquired, so a failed
+        // acquire (e.g. an atlas not registered yet) can never over-release.
+        webgl.deleteTexture(this.acquiredBaseTextureId);
+        this.acquiredBaseTextureId = null;
+      }
+      if (texture && texture.buffer != null) {
+        gl.deleteBuffer(texture.buffer);
+        texture.buffer = null;
+      }
+      if (deleteTexture) {
+        maskTextures.forEach(function (maskTexture) {
+          if (webgl.textures[maskTexture.id] != null) {
+            webgl.deleteTexture(maskTexture.id);
+          }
+        });
       }
     }
   }, {
@@ -7682,14 +7768,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 +7955,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 +7985,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,12 +8023,15 @@ 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);
       gl.uniform4f(locations.u_color, color[0], color[1], color[2], color[3]);
       var texture = this.texture;
+      // Set when a textured object's base texture can't be bound, so we skip the
+      // draw rather than sampling a stale/wrong texture (see below).
+      var skipDraw = false;
       if (texture != null && targetTexture === false) {
         // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)
         var texSize = 2; // 2 components per iteration
@@ -7956,13 +8045,49 @@ var GLObject = /*#__PURE__*/function (_DrawingObject) {
         gl.enableVertexAttribArray(locations.a_texcoord);
         gl.bindBuffer(gl.ARRAY_BUFFER, texture.buffer);
         gl.vertexAttribPointer(locations.a_texcoord, texSize, texType, texNormalize, texStride, texOffset);
-        gl.uniform1i(locations.u_use_texture, 1);
-        var index = webglInstance.textures[texture.id].index;
-        gl.uniform1i(locations.u_texture, index);
+        // Assign content texture units for this draw from the shared pool. Unit 0
+        // is reserved for the target/selector framebuffer texture, so content
+        // starts at unit 1: the base texture, then each mask texture in turn.
+        // bindTextureToUnit only issues a bindTexture when the unit isn't already
+        // pointing at that texture, so runs of draws sharing a texture (e.g. text
+        // sharing a font atlas) issue no bind calls.
+        var textureUnit = 1;
+        if (webglInstance.bindTextureToUnit(texture.id, textureUnit)) {
+          gl.uniform1i(locations.u_use_texture, 1);
+          gl.uniform1i(locations.u_texture, textureUnit);
+          textureUnit += 1;
+
+          // 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.
+          // Only assign the sampler if the bind succeeds — otherwise the uniform
+          // would default to sampler 0 (the reserved target texture) and recolor
+          // with garbage. 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];
+            if (maskLocation != null && webglInstance.bindTextureToUnit(maskTexture.id, textureUnit)) {
+              gl.uniform1i(maskLocation, textureUnit);
+              textureUnit += 1;
+            }
+          }
+        } else {
+          // The base texture isn't available (e.g. a shared texture was deleted by
+          // another element's cleanup while this one still references it). The
+          // composed texture shaders sample u_texture unconditionally, so there is
+          // no safe in-shader fallback — skip this object's draw this frame rather
+          // than sampling whatever stale texture occupies the unit.
+          gl.uniform1i(locations.u_use_texture, 0);
+          skipDraw = true;
+        }
       } else {
         gl.uniform1i(locations.u_use_texture, 0);
       }
-      gl.drawArrays(this.glPrimitive, 0, numDrawVertices);
+      if (!skipDraw) {
+        gl.drawArrays(this.glPrimitive, 0, numDrawVertices);
+      }
       if (texture) {
         gl.disableVertexAttribArray(locations.a_texcoord);
       }
@@ -52823,11 +52948,20 @@ var FigureElementPrimitiveGLText = /*#__PURE__*/function (_FigureElementPrimiti)
         scene: scene,
         font: this.font
       });
+      var textureID = this.atlas.font.getTextureID();
       if (this.drawingObject.texture == null) {
-        this.drawingObject.addTexture(this.atlas.font.getTextureID());
+        this.drawingObject.addTexture(textureID);
       } else {
-        this.drawingObject.texture.id = this.atlas.font.getTextureID();
-      }
+        this.drawingObject.texture.id = textureID;
+      }
+      // Take a webgl reference to the shared atlas texture so it survives other
+      // elements' cleanup. The Atlas registers/uploads the texture; this element
+      // only adopts its id (GLObject.addTexture above doesn't touch webgl), so
+      // without this its resetTextureBuffer release would be unbalanced and the
+      // first element's cleanup would free the atlas for the others.
+      // setBaseTextureRef releases any previously-held id (createAtlas re-runs on
+      // font changes) and is idempotent when the id is unchanged.
+      this.drawingObject.setBaseTextureRef(textureID);
       // console.log(this.atlas)
       this.setText(this.text);
       this.atlasNotificationsID = this.atlas.notifications.add('updated', this.loaded.bind(this));
@@ -54522,27 +54656,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 +54708,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 +54804,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 +54878,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 +54936,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 +54948,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 +54975,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 +54983,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 +55064,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 +55077,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 +55145,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 +55208,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 +55234,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 +55253,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 +55269,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 +55340,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 +55353,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 +55366,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 +55391,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 +55403,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 +55415,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 +55429,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 +55444,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 +55458,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 +55471,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 +55484,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 +55512,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 +55522,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 +55534,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 +55553,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 +55578,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 +55586,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 +55598,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 +55608,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 +55726,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 +55814,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 +55823,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 +55871,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 +55896,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 +55904,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 +55931,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 +55974,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 +56007,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 +56018,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 +56036,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 +56049,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 +56078,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 +56095,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 +56110,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 +56131,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 +56143,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 +56169,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 +56180,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 +56205,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 +56272,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 +56297,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 +56328,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 +56352,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 +56369,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 +56396,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 +56413,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 +56434,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 +56454,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 +56486,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 +56495,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 +56554,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 +56584,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 +56592,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 +56619,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 +56631,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 +56659,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 +56686,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 +56699,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 +56724,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 +56732,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 +56771,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 +56782,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 +56835,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 +56845,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 +56866,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 +56887,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 +56933,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 +56968,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 +57002,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 +57223,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 +57252,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 +57284,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 +57294,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 +57304,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 +57324,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 +57334,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 +66340,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 +66357,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 +66420,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 +66453,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 +66482,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 +66521,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 +66556,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 +66575,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 +66597,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 +66643,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';
@@ -66912,6 +67234,20 @@ var WebGLInstance = /*#__PURE__*/function () {
     value:
     // locations: Object;
 
+    // Content texture units are a small shared pool reused across draws. Unit 0 is
+    // reserved for the target/selector framebuffer texture, so content starts at
+    // unit 1. boundUnits[u] tracks which texture id is currently bound to GL unit
+    // u, so bindTextureToUnit can skip redundant binds (bind-on-change).
+
+    // Monotonic source for texture handles (never reused, so deleting a texture
+    // can never cause a later texture to collide with a live one).
+
+    // gl.MAX_TEXTURE_IMAGE_UNITS (the fragment-shader sampler limit), queried once
+    // for a diagnostic warning. Matches the per-object mask guard in
+    // FigurePrimitives.gl().
+
+    // Set once the unit-budget warning has fired, so it isn't logged every frame.
+
     /*
       Add, or update a texture. If the texture already exists, then do nothing.
        A texture is referenced with a unique id, and defined by either a url (string), Image or html canvas element.
@@ -66927,45 +67263,52 @@ var WebGLInstance = /*#__PURE__*/function () {
       var onLoad = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
       var force = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
       /*
-        If the texture already exits, then return its index. If the texture is
-        still loading, then add the onLoad callback to the list of callbacks to
-        be called once the texture loads.
+        A texture id can be shared by multiple owners (e.g. several GLText elements
+        using the same font atlas, plus the Atlas itself). Each addTexture call
+        that isn't a forced content update acquires one reference; deleteTexture
+        releases one, and the GL texture is freed only when the last owner releases
+        it. This lets one element's cleanup() drop its reference without pulling a
+        still-shared texture out from under the survivors.
+         If the texture already exists and is still loading, the onLoad callback is
+        added to the list to be called once the texture loads.
       */
       if (!force && this.textures[id] != null) {
-        if (this.textures[id].state === 'loaded') {
-          if (onLoad != null) {
-            this.textures[id].onLoad.push(onLoad);
-          }
+        // Another owner (or the same owner re-acquiring) references an existing
+        // texture: take a reference and (re)register the load callback.
+        var existingTexture = this.textures[id];
+        existingTexture.refCount += 1;
+        if (onLoad != null) {
+          existingTexture.onLoad.push(onLoad);
+        }
+        if (existingTexture.state === 'loaded') {
           this.onLoad(id);
-          return this.textures[id].index;
         }
-        // Otherwise loading
+        return existingTexture.handle;
+      }
+      var gl = this.gl;
+      if (this.textures[id] != null) {
+        // Forced content update of an existing texture: keep its identity AND
+        // reference count so other owners survive the update. setTextureData
+        // (below) frees and replaces the old glTexture, so the entry — including
+        // its glTexture pointer — is preserved here rather than recreated.
+        // Append (don't replace) onLoad so pending callbacks other owners
+        // registered while the texture was still loading aren't silently dropped.
+        this.textures[id].state = 'loading';
         if (onLoad != null) {
           this.textures[id].onLoad.push(onLoad);
         }
-        return this.textures[id].index;
-        // removed by dead control flow
-
-      }
-      var index = 0;
-      if (this.textures[id] != null) {
-        index = this.textures[id].index;
       } else {
-        index = Object.keys(this.textures).length + 1;
+        // Brand new texture: the first owner holds the only reference.
+        this.textures[id] = {
+          id: id,
+          state: 'loading',
+          onLoad: onLoad != null ? [onLoad] : [],
+          handle: this.nextTextureHandle,
+          refCount: 1
+        };
+        this.nextTextureHandle += 1;
       }
-      // If a texture already exists, then unload it
-      this.deleteTexture(id);
-      var gl = this.gl;
-      this.textures[id] = {
-        id: id,
-        state: 'loading',
-        onLoad: [],
-        index: index
-      };
       var texture = this.textures[id];
-      if (onLoad != null) {
-        texture.onLoad.push(onLoad);
-      }
       // If the data is a url string, then load the data into an image
       if (typeof data === 'string') {
         this.setTextureData(id, loadColor);
@@ -66984,7 +67327,7 @@ var WebGLInstance = /*#__PURE__*/function () {
         this.onLoad(id);
         texture.state = 'loaded';
       }
-      return this.textures[id].index;
+      return this.textures[id].handle;
     }
   }, {
     key: "getAtlas",
@@ -67020,6 +67363,27 @@ var WebGLInstance = /*#__PURE__*/function () {
         throw errors[0];
       }
     }
+
+    // Take an additional reference to an already-registered texture, without
+    // re-uploading it or touching its load callbacks. Used when an element adopts
+    // a texture another owner created and uploaded (e.g. a GLText element sharing
+    // a font atlas registered by the Atlas). Returns false if the texture isn't
+    // registered yet, in which case no reference was taken. Release with
+    // deleteTexture.
+  }, {
+    key: "acquireTexture",
+    value: function acquireTexture(id) {
+      var texture = this.textures[id];
+      if (texture == null) {
+        return false;
+      }
+      texture.refCount += 1;
+      return true;
+    }
+
+    // Release one reference to a texture. The GL texture is freed only once the
+    // last owner releases it, so one element's cleanup can't delete a texture
+    // another element still shares (see addTexture for the rationale).
   }, {
     key: "deleteTexture",
     value: function deleteTexture(id) {
@@ -67027,13 +67391,27 @@ var WebGLInstance = /*#__PURE__*/function () {
       if (texture == null) {
         return;
       }
-      var gl = this.gl;
+      texture.refCount -= 1;
+      if (texture.refCount <= 0) {
+        this.freeTexture(id);
+      }
+    }
 
-      // If texture exists, then delete it
+    // Unconditionally free a texture regardless of reference count. Used for
+    // teardown (cleanup), where every owner is going away at once.
+  }, {
+    key: "freeTexture",
+    value: function freeTexture(id) {
+      var texture = this.textures[id];
+      if (texture == null) {
+        return;
+      }
+      var gl = this.gl;
+      // gl.deleteTexture unbinds it from any unit it was bound to, so we just drop
+      // the stale cache entries.
       if (texture.glTexture != null) {
-        gl.activeTexture(gl.TEXTURE0 + texture.index);
-        gl.bindTexture(gl.TEXTURE_2D, null);
         gl.deleteTexture(texture.glTexture);
+        this.clearBoundUnits(id);
       }
       this.cancel(id);
       delete this.textures[id];
@@ -67045,6 +67423,53 @@ var WebGLInstance = /*#__PURE__*/function () {
       Object.keys(this.textures).forEach(function (id) {
         _this3.textures[id].glTexture = null;
       });
+      // The new context starts with nothing bound, so the bind cache is stale.
+      this.boundUnits = [];
+    }
+
+    // Drop any working-unit cache entries that point at this texture id, so a
+    // future draw re-binds rather than trusting a stale/deleted glTexture.
+  }, {
+    key: "clearBoundUnits",
+    value: function clearBoundUnits(id) {
+      for (var u = 0; u < this.boundUnits.length; u += 1) {
+        if (this.boundUnits[u] === id) {
+          this.boundUnits[u] = null;
+        }
+      }
+    }
+
+    /*
+      Bind a registered texture to a content texture unit for the current draw.
+       Content units are a small shared pool (unit 0 is reserved for the
+      target/selector framebuffer texture). bindTexture is only issued when the
+      unit is not already pointing at this texture, so runs of draws that share a
+      texture (e.g. text sharing a font atlas) issue zero bind calls.
+    */
+  }, {
+    key: "bindTextureToUnit",
+    value: function bindTextureToUnit(id, unit) {
+      var texture = this.textures[id];
+      if (texture == null || texture.glTexture == null) {
+        return false;
+      }
+      if (unit >= this.maxTextureUnits) {
+        // Out of unit budget: warn once (not every frame) and don't issue an
+        // out-of-range bind. The caller treats false as "not bound".
+        if (!this.warnedUnitOverflow) {
+          (0,_tools_tools__WEBPACK_IMPORTED_MODULE_2__.Console)("FigureOne WebGL warning: texture unit ".concat(unit, " exceeds this device's ") + "MAX_TEXTURE_IMAGE_UNITS (".concat(this.maxTextureUnits, "). Reduce the ") + 'number of simultaneous textures/masks.');
+          this.warnedUnitOverflow = true;
+        }
+        return false;
+      }
+      if (this.boundUnits[unit] === id) {
+        return true;
+      }
+      var gl = this.gl;
+      gl.activeTexture(gl.TEXTURE0 + unit);
+      gl.bindTexture(gl.TEXTURE_2D, texture.glTexture);
+      this.boundUnits[unit] = id;
+      return true;
     }
   }, {
     key: "cleanup",
@@ -67058,9 +67483,10 @@ var WebGLInstance = /*#__PURE__*/function () {
         }
       });
       this.programs = [];
-      // Delete all textures
+      // Free all textures outright, ignoring reference counts — every owner is
+      // going away in this teardown.
       Object.keys(this.textures).forEach(function (id) {
-        _this4.deleteTexture(id);
+        _this4.freeTexture(id);
       });
       this.textures = {};
       // Clean up atlases
@@ -67081,20 +67507,27 @@ var WebGLInstance = /*#__PURE__*/function () {
         return (value & value - 1) === 0;
       }
       var texture = this.textures[id];
-      var index = texture.index;
       var gl = this.gl;
+      // Upload happens on the first content unit as scratch. Any cache entry for
+      // this id refers to the old glTexture we're about to replace, so invalidate
+      // them all before binding the new one.
+      var uploadUnit = 1;
+      this.clearBoundUnits(id);
 
       // If texture exists, then delete it
       if (texture.glTexture != null) {
-        gl.activeTexture(gl.TEXTURE0 + index);
+        gl.activeTexture(gl.TEXTURE0 + uploadUnit);
         gl.bindTexture(gl.TEXTURE_2D, null);
         gl.deleteTexture(texture.glTexture);
       }
       // Create a texture
       var glTexture = gl.createTexture();
       texture.glTexture = glTexture;
-      gl.activeTexture(gl.TEXTURE0 + index);
+      gl.activeTexture(gl.TEXTURE0 + uploadUnit);
       gl.bindTexture(gl.TEXTURE_2D, glTexture);
+      // The new glTexture is now bound to the upload unit; record it so a draw
+      // that needs it on this unit can skip a redundant bind.
+      this.boundUnits[uploadUnit] = id;
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
 
       // If image is a color, then create s ingle pixel image of that color
@@ -67158,7 +67591,7 @@ var WebGLInstance = /*#__PURE__*/function () {
     value: function onLoad(id) {
       var _this5 = this;
       this.textures[id].onLoad.forEach(function (f) {
-        return _this5.fnMap.exec(f, true, _this5.textures[id].index);
+        return _this5.fnMap.exec(f, true, _this5.textures[id].handle);
       });
       this.textures[id].onLoad = [];
     }
@@ -67167,7 +67600,7 @@ var WebGLInstance = /*#__PURE__*/function () {
     value: function cancel(id) {
       var _this6 = this;
       this.textures[id].onLoad.forEach(function (f) {
-        return _this6.fnMap.exec(f, false, _this6.textures[id].index);
+        return _this6.fnMap.exec(f, false, _this6.textures[id].handle);
       });
       this.textures[id].onLoad = [];
     }
@@ -67232,6 +67665,11 @@ var WebGLInstance = /*#__PURE__*/function () {
     value: function init(gl) {
       this.gl = gl;
       this.textures = {};
+      this.boundUnits = [];
+      this.nextTextureHandle = 1;
+      this.warnedUnitOverflow = false;
+      var maxUnits = gl.getParameter ? gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS) : 0;
+      this.maxTextureUnits = maxUnits || 8;
       this.programs = [];
       this.targetTexture = null;
       this.lastUsedProgram = null;
@@ -81845,8 +82283,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.7.1",
-  gitHash: "501b3a1fb",
+  version: "1.9.0",
+  gitHash: "2e042f98b",
   tools: tools,
   Figure: _js_figure_Figure__WEBPACK_IMPORTED_MODULE_5__["default"],
   Recorder: _js_figure_Recorder_Recorder__WEBPACK_IMPORTED_MODULE_7__.Recorder,