fabric 6.0.0-beta6 → 6.0.0-beta7

package/dist/index.js

@@ -416,7 +416,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta6";
+  var version = "6.0.0-beta7";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -434,6 +434,12 @@
   const LEFT_CLICK = 1;
   const MIDDLE_CLICK = 2;
   const RIGHT_CLICK = 3;
+  const CENTER = 'center';
+  const LEFT = 'left';
+  const TOP = 'top';
+  const BOTTOM = 'bottom';
+  const RIGHT = 'right';
+  const NONE = 'none';
 
   /*
    * This Map connects the objects type value with their
@@ -1587,10 +1593,10 @@
         top: 0
       },
       offsetAttributes = {
-        borderLeftWidth: 'left',
-        borderTopWidth: 'top',
-        paddingLeft: 'left',
-        paddingTop: 'top'
+        borderLeftWidth: LEFT,
+        borderTopWidth: TOP,
+        paddingLeft: LEFT,
+        paddingTop: TOP
       };
     if (!doc) {
       return offset;
@@ -1620,7 +1626,7 @@
     if (typeof element.onselectstart !== 'undefined') {
       element.onselectstart = () => false;
     }
-    element.style.userSelect = 'none';
+    element.style.userSelect = NONE;
     return element;
   }
 
@@ -2788,9 +2794,9 @@
   // align can be either none or undefined or a combination of mid/max
   const parseAlign = align => {
     //divide align in alignX and alignY
-    if (align && align !== 'none') {
+    if (align && align !== NONE) {
       return [align.slice(1, 4), align.slice(5, 8)];
-    } else if (align === 'none') {
+    } else if (align === NONE) {
       return [align, align];
     }
     return ['Mid', 'Mid'];
@@ -3735,7 +3741,7 @@
      * @param {Point} center Center point
      */
     _centerObject(object, center) {
-      object.setXY(center, 'center', 'center');
+      object.setXY(center, CENTER, CENTER);
       object.setCoords();
       this.renderOnAddRemove && this.requestRenderAll();
     }
@@ -3995,17 +4001,22 @@
         if (!isTextObject(obj)) {
           return;
         }
-        let fontFamily = obj.fontFamily;
+        const {
+          styles,
+          fontFamily
+        } = obj;
         if (fontList[fontFamily] || !fontPaths[fontFamily]) {
           return;
         }
         fontList[fontFamily] = true;
-        if (!obj.styles) {
+        if (!styles) {
           return;
         }
-        Object.values(obj.styles).forEach(styleRow => {
-          Object.values(styleRow).forEach(textCharStyle => {
-            fontFamily = textCharStyle.fontFamily;
+        Object.values(styles).forEach(styleRow => {
+          Object.values(styleRow).forEach(_ref2 => {
+            let {
+              fontFamily = ''
+            } = _ref2;
             if (!fontList[fontFamily] && fontPaths[fontFamily]) {
               fontList[fontFamily] = true;
             }
@@ -4127,8 +4138,8 @@
         clipPath
       }, {
         signal
-      })]).then(_ref2 => {
-        let [enlived, enlivedMap] = _ref2;
+      })]).then(_ref3 => {
+        let [enlived, enlivedMap] = _ref3;
         this.clear();
         this.add(...enlived);
         this.set(serialized);
@@ -4457,7 +4468,7 @@
       scaleX,
       scaleY
     });
-    object.setPositionByOrigin(center, 'center', 'center');
+    object.setPositionByOrigin(center, CENTER, CENTER);
   };
   /**
    * reset an object transform state to neutral. Top and left are not accounted for
@@ -4672,7 +4683,7 @@
    * @return {Boolean} true if transform is centered
    */
   function isTransformCentered(transform) {
-    return transform.originX === 'center' && transform.originY === 'center';
+    return transform.originX === CENTER && transform.originY === CENTER;
   }
   function invertOrigin(origin) {
     return -resolveOrigin(origin) + 0.5;
@@ -4705,7 +4716,7 @@
    */
   function normalizePoint(target, point, originX, originY) {
     const center = target.getRelativeCenterPoint(),
-      p = typeof originX !== 'undefined' && typeof originY !== 'undefined' ? target.translateToGivenOrigin(center, 'center', 'center', originX, originY) : new Point(target.left, target.top),
+      p = typeof originX !== 'undefined' && typeof originY !== 'undefined' ? target.translateToGivenOrigin(center, CENTER, CENTER, originX, originY) : new Point(target.left, target.top),
       p2 = target.angle ? point.rotate(-degreesToRadians(target.angle), center) : point;
     return p2.subtract(p);
   }
@@ -4765,8 +4776,8 @@
       newTop = y - offsetY,
       moveX = !isLocked(target, 'lockMovementX') && target.left !== newLeft,
       moveY = !isLocked(target, 'lockMovementY') && target.top !== newTop;
-    moveX && target.set('left', newLeft);
-    moveY && target.set('top', newTop);
+    moveX && target.set(LEFT, newLeft);
+    moveY && target.set(TOP, newTop);
     if (moveX || moveY) {
       fireEvent('moving', commonEventInfo(eventData, transform, x, y));
     }
@@ -4790,7 +4801,7 @@
     getSvgStyles(skipShadow) {
       const fillRule = this.fillRule ? this.fillRule : 'nonzero',
         strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
-        strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none',
+        strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : NONE,
         strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0',
         strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
         strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
@@ -5936,7 +5947,7 @@
      * @return {Point}
      */
     translateToCenterPoint(point, originX, originY) {
-      const p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center');
+      const p = this.translateToGivenOrigin(point, originX, originY, CENTER, CENTER);
       if (this.angle) {
         return p.rotate(degreesToRadians(this.angle), point);
       }
@@ -5951,7 +5962,7 @@
      * @return {Point}
      */
     translateToOriginPoint(center, originX, originY) {
-      const p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
+      const p = this.translateToGivenOrigin(center, CENTER, CENTER, originX, originY);
       if (this.angle) {
         return p.rotate(degreesToRadians(this.angle), center);
       }
@@ -6010,8 +6021,8 @@
       this._originalOriginX = this.originX;
       this._originalOriginY = this.originY;
       const center = this.getRelativeCenterPoint();
-      this.originX = 'center';
-      this.originY = 'center';
+      this.originX = CENTER;
+      this.originY = CENTER;
       this.left = center.x;
       this.top = center.y;
     }
@@ -6037,7 +6048,7 @@
      * @private
      */
     _getLeftTopCoords() {
-      return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top');
+      return this.translateToOriginPoint(this.getRelativeCenterPoint(), LEFT, TOP);
     }
   }
 
@@ -7104,11 +7115,11 @@
 
   const cloneDeep = object => JSON.parse(JSON.stringify(object));
 
-  const stateProperties = ['top', 'left', 'scaleX', 'scaleY', 'flipX', 'flipY', 'originX', 'originY', 'angle', 'opacity', 'globalCompositeOperation', 'shadow', 'visible', 'skewX', 'skewY'];
+  const stateProperties = [TOP, LEFT, 'scaleX', 'scaleY', 'flipX', 'flipY', 'originX', 'originY', 'angle', 'opacity', 'globalCompositeOperation', 'shadow', 'visible', 'skewX', 'skewY'];
   const cacheProperties = ['fill', 'stroke', 'strokeWidth', 'strokeDashArray', 'width', 'height', 'paintFirst', 'strokeUniform', 'strokeLineCap', 'strokeDashOffset', 'strokeLineJoin', 'strokeMiterLimit', 'backgroundColor', 'clipPath'];
   const fabricObjectDefaultValues = {
-    originX: 'left',
-    originY: 'top',
+    originX: LEFT,
+    originY: TOP,
     top: 0,
     left: 0,
     width: 0,
@@ -7608,7 +7619,7 @@
       const hasStaticDefaultValues = Object.keys(defaults).length > 0;
       const baseValues = hasStaticDefaultValues ? defaults : Object.getPrototypeOf(this);
       return pickBy(object, (value, key) => {
-        if (key === 'left' || key === 'top' || key === 'type') {
+        if (key === LEFT || key === TOP || key === 'type') {
           return true;
         }
         const baseValue = baseValues[key];
@@ -8322,7 +8333,7 @@
       if (options.format === 'jpeg') {
         canvas.backgroundColor = '#fff';
       }
-      this.setPositionByOrigin(new Point(canvas.width / 2, canvas.height / 2), 'center', 'center');
+      this.setPositionByOrigin(new Point(canvas.width / 2, canvas.height / 2), CENTER, CENTER);
       const originalCanvas = this.canvas;
       // static canvas and canvas have both an array of InteractiveObjects
       // @ts-ignore this needs to be fixed somehow, or ignored globally
@@ -8400,7 +8411,7 @@
      * @param {TDegree} angle Angle value (in degrees)
      */
     rotate(angle) {
-      const shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation;
+      const shouldCenterOrigin = (this.originX !== CENTER || this.originY !== CENTER) && this.centeredRotation;
       if (shouldCenterOrigin) {
         this._setOriginToCenter();
       }
@@ -8543,7 +8554,7 @@
   const changeObjectWidth = (eventData, transform, x, y) => {
     const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
     //  make sure the control changes width ONLY from it's side of target
-    if (transform.originX === 'center' || transform.originX === 'right' && localPoint.x < 0 || transform.originX === 'left' && localPoint.x > 0) {
+    if (transform.originX === CENTER || transform.originX === RIGHT && localPoint.x < 0 || transform.originX === LEFT && localPoint.x > 0) {
       const {
           target
         } = transform,
@@ -8797,6 +8808,12 @@
      * @return {Boolean} true if the action/event modified the object
      */
 
+    shouldActivate(controlKey, fabricObject) {
+      var _fabricObject$canvas;
+      // TODO: locking logic can be handled here instead of in the control handler logic
+      return ((_fabricObject$canvas = fabricObject.canvas) === null || _fabricObject$canvas === void 0 ? void 0 : _fabricObject$canvas.getActiveObject()) === fabricObject && fabricObject.isControlVisible(controlKey);
+    }
+
     /**
      * Returns control actionHandler
      * @param {Event} eventData the native mouse event
@@ -9331,7 +9348,7 @@
       skewingSide = -Math.sign(counterOriginFactor) * (target[flipKey] ? -1 : 1),
       skewingDirection = (target[skewKey] === 0 &&
       // in case skewing equals 0 we use the pointer offset from target center to determine the direction of skewing
-      getLocalPoint(transform, 'center', 'center', x, y)[axis] > 0 ||
+      getLocalPoint(transform, CENTER, CENTER, x, y)[axis] > 0 ||
       // in case target has skewing we use that as the direction
       target[skewKey] > 0 ? 1 : -1) * skewingSide,
       // anchor to the opposite side of the skewing direction
@@ -9595,23 +9612,23 @@
      */
     _findTargetCorner(pointer) {
       let forTouch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      if (!this.hasControls || !this.canvas || this.canvas._activeObject !== this) {
-        return 0;
+      if (!this.hasControls || !this.canvas) {
+        return '';
       }
       this.__corner = undefined;
       // had to keep the reverse loop because was breaking tests
       const cornerEntries = Object.entries(this.oCoords);
       for (let i = cornerEntries.length - 1; i >= 0; i--) {
-        const [cornerKey, corner] = cornerEntries[i];
-        if (!this.isControlVisible(cornerKey)) {
-          continue;
-        }
-        const lines = this._getImageLines(forTouch ? corner.touchCorner : corner.corner);
-        const xPoints = this._findCrossPoints(pointer, lines);
-        if (xPoints !== 0 && xPoints % 2 === 1) {
-          this.__corner = cornerKey;
-          return cornerKey;
+        const [key, corner] = cornerEntries[i];
+        if (this.controls[key].shouldActivate(key, this)) {
+          const lines = this._getImageLines(forTouch ? corner.touchCorner : corner.corner);
+          const xPoints = this._findCrossPoints(pointer, lines);
+          if (xPoints !== 0 && xPoints % 2 === 1) {
+            this.__corner = key;
+            return key;
+          }
         }
+
         // // debugging
         //
         // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
@@ -9627,7 +9644,7 @@
         // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
       }
 
-      return 0;
+      return '';
     }
 
     /**
@@ -10119,11 +10136,11 @@
     svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'],
     svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'],
     attributesMap = {
-      cx: 'left',
-      x: 'left',
+      cx: LEFT,
+      x: LEFT,
       r: 'radius',
-      cy: 'top',
-      y: 'top',
+      cy: TOP,
+      y: TOP,
       display: 'visible',
       visibility: 'visible',
       transform: 'transformMatrix',
@@ -10332,12 +10349,12 @@
   function normalizeValue(attr, value, parentAttributes, fontSize) {
     const isArray = Array.isArray(value);
     let parsed;
-    if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
+    if ((attr === 'fill' || attr === 'stroke') && value === NONE) {
       value = '';
     } else if (attr === 'strokeUniform') {
       return value === 'non-scaling-stroke';
     } else if (attr === 'strokeDashArray') {
-      if (value === 'none') {
+      if (value === NONE) {
         value = null;
       } else {
         value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat);
@@ -10349,7 +10366,7 @@
         value = parseTransformAttribute(value);
       }
     } else if (attr === 'visible') {
-      value = value !== 'none' && value !== 'hidden';
+      value = value !== NONE && value !== 'hidden';
       // display=none on parent element always takes precedence over child element
       if (parentAttributes && parentAttributes.visible === false) {
         value = false;
@@ -10360,7 +10377,7 @@
         value *= parentAttributes.opacity;
       }
     } else if (attr === 'textAnchor' /* text-anchor */) {
-      value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
+      value = value === 'start' ? LEFT : value === 'end' ? RIGHT : CENTER;
     } else if (attr === 'charSpacing') {
       // parseUnit returns px and we convert it to em
       parsed = parseUnit(value, fontSize) / fontSize * 1000;
@@ -11214,7 +11231,7 @@
         !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned && this._adjustObjectPosition(this.clipPath, diff);
         if (!newCenter.eq(center) || initialTransform) {
           //  set position
-          this.setPositionByOrigin(newCenter, 'center', 'center');
+          this.setPositionByOrigin(newCenter, CENTER, CENTER);
           initialTransform && this.set(initialTransform);
           this.setCoords();
         }
@@ -13264,7 +13281,7 @@
       object.width = preserveAspectRatioOptions.width;
       object.height = preserveAspectRatioOptions.height;
     }
-    object.setPositionByOrigin(center, 'center', 'center');
+    object.setPositionByOrigin(center, CENTER, CENTER);
   };
 
   var index$1 = /*#__PURE__*/Object.freeze({
@@ -14013,17 +14030,17 @@
       };
       // is a left control ?
       if (['ml', 'tl', 'bl'].includes(controlName)) {
-        origin.x = 'right';
+        origin.x = RIGHT;
         // is a right control ?
       } else if (['mr', 'tr', 'br'].includes(controlName)) {
-        origin.x = 'left';
+        origin.x = LEFT;
       }
       // is a top control ?
       if (['tl', 'mt', 'tr'].includes(controlName)) {
-        origin.y = 'bottom';
+        origin.y = BOTTOM;
         // is a bottom control ?
       } else if (['bl', 'mb', 'br'].includes(controlName)) {
-        origin.y = 'top';
+        origin.y = TOP;
       }
       return origin;
     }
@@ -14079,8 +14096,8 @@
           })
         };
       if (this._shouldCenterTransform(target, action, altKey)) {
-        transform.originX = 'center';
-        transform.originY = 'center';
+        transform.originX = CENTER;
+        transform.originY = CENTER;
       }
       this._currentTransform = transform;
       // @ts-ignore
@@ -14287,10 +14304,10 @@
         boundsWidth = bounds.width || 0,
         boundsHeight = bounds.height || 0;
       if (!boundsWidth || !boundsHeight) {
-        if ('top' in bounds && 'bottom' in bounds) {
+        if (TOP in bounds && BOTTOM in bounds) {
           boundsHeight = Math.abs(bounds.top - bounds.bottom);
         }
-        if ('right' in bounds && 'left' in bounds) {
+        if (RIGHT in bounds && LEFT in bounds) {
           boundsWidth = Math.abs(bounds.right - bounds.left);
         }
       }
@@ -14405,8 +14422,8 @@
         height: height + 'px',
         left: 0,
         top: 0,
-        'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none',
-        '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none'
+        'touch-action': this.allowTouchScrolling ? 'manipulation' : NONE,
+        '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : NONE
       });
       element.width = width;
       element.height = height;
@@ -14717,7 +14734,7 @@
      */
     _realizeGroupTransformOnObject(instance) {
       if (instance.group && instance.group === this._activeSelection && this._activeObject === instance.group) {
-        const layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top'];
+        const layoutProps = ['angle', 'flipX', 'flipY', LEFT, 'scaleX', 'scaleY', 'skewX', 'skewY', TOP];
         const originalValues = pick(instance, layoutProps);
         addTransformToObject(instance, this._activeObject.calcOwnMatrix());
         return originalValues;
@@ -14743,8 +14760,16 @@
    * In charge of synchronizing all interactive text instances of a canvas
    */
   class TextEditingManager {
-    constructor() {
+    constructor(canvas) {
       _defineProperty(this, "targets", []);
+      _defineProperty(this, "__disposer", void 0);
+      const cb = () => {
+        var _this$target, _this$target$hiddenTe;
+        return (_this$target = this.target) === null || _this$target === void 0 ? void 0 : (_this$target$hiddenTe = _this$target.hiddenTextarea) === null || _this$target$hiddenTe === void 0 ? void 0 : _this$target$hiddenTe.focus();
+      };
+      const el = canvas.upperCanvasEl;
+      el.addEventListener('click', cb);
+      this.__disposer = () => el.removeEventListener('click', cb);
     }
     exitTextEditing() {
       this.target = undefined;
@@ -14770,13 +14795,19 @@
       }
     }
     onMouseMove(e) {
-      var _this$target;
-      ((_this$target = this.target) === null || _this$target === void 0 ? void 0 : _this$target.isEditing) && this.target.updateSelectionOnMouseMove(e);
+      var _this$target2;
+      ((_this$target2 = this.target) === null || _this$target2 === void 0 ? void 0 : _this$target2.isEditing) && this.target.updateSelectionOnMouseMove(e);
     }
-    dispose() {
+    clear() {
       this.targets = [];
       this.target = undefined;
     }
+    dispose() {
+      this.clear();
+      this.__disposer();
+      // @ts-expect-error disposing
+      delete this.__disposer;
+    }
   }
 
   const _excluded$c = ["target", "oldTarget", "fireCanvas", "e"];
@@ -14864,7 +14895,7 @@
       super(el, options);
       // bind event handlers
       _defineProperty(this, "_isClick", void 0);
-      _defineProperty(this, "textEditingManager", new TextEditingManager());
+      _defineProperty(this, "textEditingManager", new TextEditingManager(this));
       ['_onMouseDown', '_onTouchStart', '_onMouseMove', '_onMouseUp', '_onTouchEnd', '_onResize',
       // '_onGesture',
       // '_onDrag',
@@ -15056,7 +15087,7 @@
      * @param {DragEvent} e
      */
     _onDragEnd(e) {
-      const didDrop = !!e.dataTransfer && e.dataTransfer.dropEffect !== 'none',
+      const didDrop = !!e.dataTransfer && e.dataTransfer.dropEffect !== NONE,
         dropTarget = didDrop ? this._activeObject : undefined,
         options = {
           e,
@@ -16113,15 +16144,12 @@
       this._groupSelector = null;
       return true;
     }
-    exitTextEditing() {
-      this.textEditingManager.exitTextEditing();
-    }
 
     /**
      * @override clear {@link textEditingManager}
      */
     clear() {
-      this.textEditingManager.dispose();
+      this.textEditingManager.clear();
       super.clear();
     }
 
@@ -16130,8 +16158,8 @@
      */
     destroy() {
       this.removeListeners();
-      super.destroy();
       this.textEditingManager.dispose();
+      super.destroy();
     }
   }
 
@@ -16900,8 +16928,8 @@
         options = _objectWithoutProperties(_ref, _excluded$a);
       super(options);
       this._setPath(path || [], true);
-      typeof left === 'number' && this.set('left', left);
-      typeof top === 'number' && this.set('top', top);
+      typeof left === 'number' && this.set(LEFT, left);
+      typeof top === 'number' && this.set(TOP, top);
     }
 
     /**
@@ -17097,7 +17125,7 @@
       });
       // using pathOffset because it match the use case.
       // if pathOffset change here we need to use left + width/2 , top + height/2
-      adjustPosition && this.setPositionByOrigin(pathOffset, 'center', 'center');
+      adjustPosition && this.setPositionByOrigin(pathOffset, CENTER, CENTER);
     }
     _calcBoundsFromPath() {
       const bounds = [];
@@ -17722,8 +17750,8 @@
             radius: point.radius,
             left: point.x,
             top: point.y,
-            originX: 'center',
-            originY: 'center',
+            originX: CENTER,
+            originY: CENTER,
             fill: point.fill
           });
         this.shadow && (circle.shadow = new Shadow(this.shadow));
@@ -17876,8 +17904,8 @@
             height: chunck.width,
             left: chunck.x + 1,
             top: chunck.y + 1,
-            originX: 'center',
-            originY: 'center',
+            originX: CENTER,
+            originY: CENTER,
             fill: this.color
           });
           rects.push(rect);
@@ -18051,8 +18079,8 @@
         left,
         top
       } = options;
-      typeof left === 'number' && this.set('left', left);
-      typeof top === 'number' && this.set('top', top);
+      typeof left === 'number' && this.set(LEFT, left);
+      typeof top === 'number' && this.set(TOP, top);
     }
 
     /**
@@ -18081,7 +18109,7 @@
         y: y2
       }]);
       const position = new Point(left + width / 2, top + height / 2);
-      this.setPositionByOrigin(position, 'center', 'center');
+      this.setPositionByOrigin(position, CENTER, CENTER);
     }
 
     /**
@@ -18523,8 +18551,8 @@
       } = options;
       this.initialized = true;
       this.setBoundingBox(true);
-      typeof left === 'number' && this.set('left', left);
-      typeof top === 'number' && this.set('top', top);
+      typeof left === 'number' && this.set(LEFT, left);
+      typeof top === 'number' && this.set(TOP, top);
     }
     isOpen() {
       return true;
@@ -18589,7 +18617,7 @@
         pathOffset,
         strokeOffset
       });
-      adjustPosition && this.setPositionByOrigin(new Point(left + width / 2, top + height / 2), 'center', 'center');
+      adjustPosition && this.setPositionByOrigin(new Point(left + width / 2, top + height / 2), CENTER, CENTER);
     }
 
     /**
@@ -18763,7 +18791,7 @@
     underline: false,
     overline: false,
     linethrough: false,
-    textAlign: 'left',
+    textAlign: LEFT,
     fontStyle: 'normal',
     lineHeight: 1.16,
     superscript: {
@@ -18783,7 +18811,7 @@
     shadow: null,
     path: null,
     pathStartOffset: 0,
-    pathSide: 'left',
+    pathSide: LEFT,
     pathAlign: 'baseline',
     _fontSizeFraction: 0.222,
     offsets: {
@@ -18798,8 +18826,10 @@
     CACHE_FONT_SIZE: 400,
     MIN_TEXT_WIDTH: 2
   };
-
-  // @TODO properly type this
+  const JUSTIFY = 'justify';
+  const JUSTIFY_LEFT = 'justify-left';
+  const JUSTIFY_RIGHT = 'justify-right';
+  const JUSTIFY_CENTER = 'justify-center';
 
   class StyledText extends FabricObject {
     /**
@@ -18836,7 +18866,7 @@
      * @return {Boolean}
      */
     styleHas(property, lineIndex) {
-      if (!this.styles || !property || property === '') {
+      if (!this.styles) {
         return false;
       }
       if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) {
@@ -18868,7 +18898,7 @@
      * @param {string} property The property to compare between characters and text.
      */
     cleanStyle(property) {
-      if (!this.styles || !property || property === '') {
+      if (!this.styles) {
         return false;
       }
       const obj = this.styles;
@@ -18880,9 +18910,8 @@
       for (const p1 in obj) {
         letterCount = 0;
         for (const p2 in obj[p1]) {
-          const styleObject = obj[p1][p2],
-            // TODO: this shouldn't be necessary anymore with modern browsers
-            stylePropertyHasBeenSet = Object.prototype.hasOwnProperty.call(styleObject, property);
+          const styleObject = obj[p1][p2] || {},
+            stylePropertyHasBeenSet = styleObject[property] !== undefined;
           stylesCount++;
           if (stylePropertyHasBeenSet) {
             if (!stylePropertyValue) {
@@ -18912,6 +18941,7 @@
         graphemeCount += this._textLines[i].length;
       }
       if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) {
+        // @ts-expect-error conspiracy theory of TS
         this[property] = stylePropertyValue;
         this.removeStyle(property);
       }
@@ -18925,7 +18955,7 @@
      * @param {String} props The property to remove from character styles.
      */
     removeStyle(property) {
-      if (!this.styles || !property || property === '') {
+      if (!this.styles) {
         return;
       }
       const obj = this.styles;
@@ -19028,6 +19058,7 @@
         styleProps = this.constructor._styleProperties;
       for (let i = 0; i < styleProps.length; i++) {
         const prop = styleProps[i];
+        // @ts-expect-error TS complains even when we serve everything on a silver plate.
         styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop];
       }
       return styleObject;
@@ -19158,7 +19189,7 @@
     }
     _setSVGTextLineText(textSpans, lineIndex, textLeftOffset, textTopOffset) {
       const lineHeight = this.getHeightOfLine(lineIndex),
-        isJustify = this.textAlign.indexOf('justify') !== -1,
+        isJustify = this.textAlign.includes(JUSTIFY),
         line = this._textLines[lineIndex];
       let actualStyle,
         nextStyle,
@@ -19549,7 +19580,7 @@
         this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH;
         this.height = this.calcTextHeight();
       }
-      if (this.textAlign.indexOf('justify') !== -1) {
+      if (this.textAlign.includes(JUSTIFY)) {
         // once text is measured we need to make space fatter to make justified text.
         this.enlargeSpaces();
       }
@@ -19561,7 +19592,7 @@
     enlargeSpaces() {
       let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
       for (let i = 0, len = this._textLines.length; i < len; i++) {
-        if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) {
+        if (this.textAlign !== JUSTIFY && (i === len - 1 || this.isEndOfWrapping(i))) {
           continue;
         }
         accumulatedSpace = 0;
@@ -19698,14 +19729,14 @@
       ctx.textBaseline = 'alphabetic';
       if (this.path) {
         switch (this.pathAlign) {
-          case 'center':
+          case CENTER:
             ctx.textBaseline = 'middle';
             break;
           case 'ascender':
-            ctx.textBaseline = 'top';
+            ctx.textBaseline = TOP;
             break;
           case 'descender':
-            ctx.textBaseline = 'bottom';
+            ctx.textBaseline = BOTTOM;
             break;
         }
       }
@@ -19895,7 +19926,7 @@
       let width = 0,
         prevGrapheme,
         graphemeInfo;
-      const reverse = this.pathSide === 'right',
+      const reverse = this.pathSide === RIGHT,
         path = this.path,
         line = this._textLines[lineIndex],
         llength = line.length,
@@ -19923,13 +19954,13 @@
         startingPoint.x += path.pathOffset.x;
         startingPoint.y += path.pathOffset.y;
         switch (this.textAlign) {
-          case 'left':
+          case LEFT:
             positionInPath = reverse ? totalPathLength - width : 0;
             break;
-          case 'center':
+          case CENTER:
             positionInPath = (totalPathLength - width) / 2;
             break;
-          case 'right':
+          case RIGHT:
             positionInPath = reverse ? 0 : totalPathLength - width;
             break;
           //todo - add support for justify
@@ -19971,7 +20002,7 @@
       const info = getPointOnPath(path.path, centerPosition, path.segmentsInfo);
       graphemeInfo.renderLeft = info.x - startingPoint.x;
       graphemeInfo.renderTop = info.y - startingPoint.y;
-      graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0);
+      graphemeInfo.angle = info.angle + (this.pathSide === RIGHT ? Math.PI : 0);
     }
 
     /**
@@ -20117,7 +20148,7 @@
      */
     _renderChars(method, ctx, line, left, top, lineIndex) {
       const lineHeight = this.getHeightOfLine(lineIndex),
-        isJustify = this.textAlign.indexOf('justify') !== -1,
+        isJustify = this.textAlign.includes(JUSTIFY),
         path = this.path,
         shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path,
         isLtr = this.direction === 'ltr',
@@ -20136,7 +20167,7 @@
       if (currentDirection !== this.direction) {
         ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
         ctx.direction = isLtr ? 'ltr' : 'rtl';
-        ctx.textAlign = isLtr ? 'left' : 'right';
+        ctx.textAlign = isLtr ? LEFT : RIGHT;
       }
       top -= lineHeight * this._fontSizeFraction / this.lineHeight;
       if (shortCut) {
@@ -20350,27 +20381,27 @@
         direction = this.direction,
         isEndOfWrapping = this.isEndOfWrapping(lineIndex);
       let leftOffset = 0;
-      if (textAlign === 'justify' || textAlign === 'justify-center' && !isEndOfWrapping || textAlign === 'justify-right' && !isEndOfWrapping || textAlign === 'justify-left' && !isEndOfWrapping) {
+      if (textAlign === JUSTIFY || textAlign === JUSTIFY_CENTER && !isEndOfWrapping || textAlign === JUSTIFY_RIGHT && !isEndOfWrapping || textAlign === JUSTIFY_LEFT && !isEndOfWrapping) {
         return 0;
       }
-      if (textAlign === 'center') {
+      if (textAlign === CENTER) {
         leftOffset = lineDiff / 2;
       }
-      if (textAlign === 'right') {
+      if (textAlign === RIGHT) {
         leftOffset = lineDiff;
       }
-      if (textAlign === 'justify-center') {
+      if (textAlign === JUSTIFY_CENTER) {
         leftOffset = lineDiff / 2;
       }
-      if (textAlign === 'justify-right') {
+      if (textAlign === JUSTIFY_RIGHT) {
         leftOffset = lineDiff;
       }
       if (direction === 'rtl') {
-        if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') {
+        if (textAlign === RIGHT || textAlign === JUSTIFY || textAlign === JUSTIFY_RIGHT) {
           leftOffset = 0;
-        } else if (textAlign === 'left' || textAlign === 'justify-left') {
+        } else if (textAlign === LEFT || textAlign === JUSTIFY_LEFT) {
           leftOffset = -lineDiff;
-        } else if (textAlign === 'center' || textAlign === 'justify-center') {
+        } else if (textAlign === CENTER || textAlign === JUSTIFY_CENTER) {
           leftOffset = -lineDiff / 2;
         }
       }
@@ -20635,7 +20666,7 @@
       const parsedAttributes = parseAttributes(element, Text.ATTRIBUTE_NAMES);
       const _options$parsedAttrib = _objectSpread2(_objectSpread2({}, options), parsedAttributes),
         {
-          textAnchor = 'left',
+          textAnchor = LEFT,
           textDecoration = '',
           dx = 0,
           dy = 0,
@@ -20684,10 +20715,10 @@
           x/y attributes in SVG correspond to the bottom-left corner of text bounding box
           fabric output by default at top, left.
       */
-      if (textAnchor === 'center') {
+      if (textAnchor === CENTER) {
         offX = text.getScaledWidth() / 2;
       }
-      if (textAnchor === 'right') {
+      if (textAnchor === RIGHT) {
         offX = text.getScaledWidth();
       }
       text.set({
@@ -20838,7 +20869,7 @@
       setStyle(dragImage, {
         position: 'fixed',
         left: "".concat(-dragImage.width, "px"),
-        border: 'none',
+        border: NONE,
         width: "".concat(dragImage.width / retinaScaling, "px"),
         height: "".concat(dragImage.height / retinaScaling, "px")
       });
@@ -21023,8 +21054,8 @@
             selectionStart,
             selectionEnd
           } = this.__dragStartSelection;
-          const dropEffect = ((_e$dataTransfer3 = e.dataTransfer) === null || _e$dataTransfer3 === void 0 ? void 0 : _e$dataTransfer3.dropEffect) || 'none';
-          if (dropEffect === 'none') {
+          const dropEffect = ((_e$dataTransfer3 = e.dataTransfer) === null || _e$dataTransfer3 === void 0 ? void 0 : _e$dataTransfer3.dropEffect) || NONE;
+          if (dropEffect === NONE) {
             // pointer is back over selection
             target.selectionStart = selectionStart;
             target.selectionEnd = selectionEnd;
@@ -21900,14 +21931,14 @@
     setSelectionStartEndWithShift(start, end, newSelection) {
       if (newSelection <= start) {
         if (end === start) {
-          this._selectionDirection = 'left';
-        } else if (this._selectionDirection === 'right') {
-          this._selectionDirection = 'left';
+          this._selectionDirection = LEFT;
+        } else if (this._selectionDirection === RIGHT) {
+          this._selectionDirection = LEFT;
           this.selectionEnd = start;
         }
         this.selectionStart = newSelection;
       } else if (newSelection > start && newSelection < end) {
-        if (this._selectionDirection === 'right') {
+        if (this._selectionDirection === RIGHT) {
           this.selectionEnd = newSelection;
         } else {
           this.selectionStart = newSelection;
@@ -21915,9 +21946,9 @@
       } else {
         // newSelection is > selection start and end
         if (end === start) {
-          this._selectionDirection = 'right';
-        } else if (this._selectionDirection === 'left') {
-          this._selectionDirection = 'right';
+          this._selectionDirection = RIGHT;
+        } else if (this._selectionDirection === LEFT) {
+          this._selectionDirection = RIGHT;
           this.selectionStart = end;
         }
         this.selectionEnd = newSelection;
@@ -21925,8 +21956,7 @@
     }
   }
 
-  //@ts-nocheck
-
+  // @ts-nocheck
   class ITextKeyBehavior extends ITextBehavior {
     /**
      * For functionalities on keyDown
@@ -21962,39 +21992,43 @@
      */
     initHiddenTextarea() {
       const doc = this.canvas && getDocumentFromElement(this.canvas.getElement()) || getFabricDocument();
-      this.hiddenTextarea = doc.createElement('textarea');
-      this.hiddenTextarea.setAttribute('autocapitalize', 'off');
-      this.hiddenTextarea.setAttribute('autocorrect', 'off');
-      this.hiddenTextarea.setAttribute('autocomplete', 'off');
-      this.hiddenTextarea.setAttribute('spellcheck', 'false');
-      this.hiddenTextarea.setAttribute('data-fabric', 'textarea');
-      this.hiddenTextarea.setAttribute('wrap', 'off');
-      const style = this._calcTextareaPosition();
+      const textarea = doc.createElement('textarea');
+      Object.entries({
+        autocapitalize: 'off',
+        autocorrect: 'off',
+        autocomplete: 'off',
+        spellcheck: 'false',
+        'data-fabric': 'textarea',
+        wrap: 'off'
+      }).map(_ref => {
+        let [attribute, value] = _ref;
+        return textarea.setAttribute(attribute, value);
+      });
+      const {
+        top,
+        left,
+        fontSize
+      } = this._calcTextareaPosition();
       // line-height: 1px; was removed from the style to fix this:
       // https://bugs.chromium.org/p/chromium/issues/detail?id=870966
-      this.hiddenTextarea.style.cssText = "position: absolute; top: ".concat(style.top, "; left: ").concat(style.left, "; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: ").concat(style.fontSize, ";");
-      if (this.hiddenTextareaContainer) {
-        this.hiddenTextareaContainer.appendChild(this.hiddenTextarea);
-      } else {
-        doc.body.appendChild(this.hiddenTextarea);
-      }
-      this.hiddenTextarea.addEventListener('blur', this.blur.bind(this));
-      this.hiddenTextarea.addEventListener('keydown', this.onKeyDown.bind(this));
-      this.hiddenTextarea.addEventListener('keyup', this.onKeyUp.bind(this));
-      this.hiddenTextarea.addEventListener('input', this.onInput.bind(this));
-      this.hiddenTextarea.addEventListener('copy', this.copy.bind(this));
-      this.hiddenTextarea.addEventListener('cut', this.copy.bind(this));
-      this.hiddenTextarea.addEventListener('paste', this.paste.bind(this));
-      this.hiddenTextarea.addEventListener('compositionstart', this.onCompositionStart.bind(this));
-      this.hiddenTextarea.addEventListener('compositionupdate', this.onCompositionUpdate.bind(this));
-      this.hiddenTextarea.addEventListener('compositionend', this.onCompositionEnd.bind(this));
-      if (!this._clickHandlerInitialized && this.canvas) {
-        this.canvas.upperCanvasEl.addEventListener('click', this.onClick.bind(this));
-        this._clickHandlerInitialized = true;
-      }
-    }
-    onClick() {
-      this.hiddenTextarea && this.hiddenTextarea.focus();
+      textarea.style.cssText = "position: absolute; top: ".concat(top, "; left: ").concat(left, "; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: ").concat(fontSize, ";");
+      (this.hiddenTextareaContainer || doc.body).appendChild(textarea);
+      Object.entries({
+        blur: 'blur',
+        keydown: 'onKeyDown',
+        keyup: 'onKeyUp',
+        input: 'onInput',
+        copy: 'copy',
+        cut: 'copy',
+        paste: 'paste',
+        compositionstart: 'onCompositionStart',
+        compositionupdate: 'onCompositionUpdate',
+        onCompositionUpdate: 'onCompositionEnd'
+      }).map(_ref2 => {
+        let [eventName, handler] = _ref2;
+        return textarea.addEventListener(eventName, this[handler].bind(this));
+      });
+      this.hiddenTextarea = textarea;
     }
 
     /**
@@ -22327,7 +22361,7 @@
      */
     _moveCursorUpOrDown(direction, e) {
       const action = "get".concat(direction, "CursorOffset"),
-        offset = this[action](e, this._selectionDirection === 'right');
+        offset = this[action](e, this._selectionDirection === RIGHT);
       if (e.shiftKey) {
         this.moveCursorWithShift(offset);
       } else {
@@ -22350,7 +22384,7 @@
      * @param {Number} offset
      */
     moveCursorWithShift(offset) {
-      const newSelection = this._selectionDirection === 'left' ? this.selectionStart + offset : this.selectionEnd + offset;
+      const newSelection = this._selectionDirection === LEFT ? this.selectionStart + offset : this.selectionEnd + offset;
       this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection);
       return offset !== 0;
     }
@@ -22421,7 +22455,7 @@
      */
     moveCursorLeftWithoutShift(e) {
       let change = true;
-      this._selectionDirection = 'left';
+      this._selectionDirection = LEFT;
 
       // only move cursor when there is no selection,
       // otherwise we discard it, and leave cursor on same place
@@ -22437,10 +22471,10 @@
      * @param {TPointerEvent} e
      */
     moveCursorLeftWithShift(e) {
-      if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) {
+      if (this._selectionDirection === RIGHT && this.selectionStart !== this.selectionEnd) {
         return this._moveLeft(e, 'selectionEnd');
       } else if (this.selectionStart !== 0) {
-        this._selectionDirection = 'left';
+        this._selectionDirection = LEFT;
         return this._moveLeft(e, 'selectionStart');
       }
     }
@@ -22482,10 +22516,10 @@
      * @param {TPointerEvent} e
      */
     moveCursorRightWithShift(e) {
-      if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) {
+      if (this._selectionDirection === LEFT && this.selectionStart !== this.selectionEnd) {
         return this._moveRight(e, 'selectionStart');
       } else if (this.selectionEnd !== this._text.length) {
-        this._selectionDirection = 'right';
+        this._selectionDirection = RIGHT;
         return this._moveRight(e, 'selectionEnd');
       }
     }
@@ -22496,7 +22530,7 @@
      */
     moveCursorRightWithoutShift(e) {
       let changed = true;
-      this._selectionDirection = 'right';
+      this._selectionDirection = RIGHT;
       if (this.selectionStart === this.selectionEnd) {
         changed = this._moveRight(e, 'selectionStart');
         this.selectionEnd = this.selectionStart;
@@ -22779,32 +22813,38 @@
     }
   }
 
+  const MOVE_CURSOR_UP = 'moveCursorUp';
+  const MOVE_CURSOR_DOWN = 'moveCursorDown';
+  const MOVE_CURSOR_LEFT = 'moveCursorLeft';
+  const MOVE_CURSOR_RIGHT = 'moveCursorRight';
+  const EXIT_EDITING = 'exitEditing';
+
   // @TODO look into import { Key } from 'ts-key-enum';
   // and transition from keyCode to Key
   // also reduce string duplication
   const keysMap = {
-    9: 'exitEditing',
-    27: 'exitEditing',
-    33: 'moveCursorUp',
-    34: 'moveCursorDown',
-    35: 'moveCursorRight',
-    36: 'moveCursorLeft',
-    37: 'moveCursorLeft',
-    38: 'moveCursorUp',
-    39: 'moveCursorRight',
-    40: 'moveCursorDown'
+    9: EXIT_EDITING,
+    27: EXIT_EDITING,
+    33: MOVE_CURSOR_UP,
+    34: MOVE_CURSOR_DOWN,
+    35: MOVE_CURSOR_RIGHT,
+    36: MOVE_CURSOR_LEFT,
+    37: MOVE_CURSOR_LEFT,
+    38: MOVE_CURSOR_UP,
+    39: MOVE_CURSOR_RIGHT,
+    40: MOVE_CURSOR_DOWN
   };
   const keysMapRtl = {
-    9: 'exitEditing',
-    27: 'exitEditing',
-    33: 'moveCursorUp',
-    34: 'moveCursorDown',
-    35: 'moveCursorLeft',
-    36: 'moveCursorRight',
-    37: 'moveCursorRight',
-    38: 'moveCursorUp',
-    39: 'moveCursorLeft',
-    40: 'moveCursorDown'
+    9: EXIT_EDITING,
+    27: EXIT_EDITING,
+    33: MOVE_CURSOR_UP,
+    34: MOVE_CURSOR_DOWN,
+    35: MOVE_CURSOR_LEFT,
+    36: MOVE_CURSOR_RIGHT,
+    37: MOVE_CURSOR_RIGHT,
+    38: MOVE_CURSOR_UP,
+    39: MOVE_CURSOR_LEFT,
+    40: MOVE_CURSOR_DOWN
   };
 
   /**
@@ -23198,11 +23238,11 @@
         left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0)
       };
       if (this.direction === 'rtl') {
-        if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') {
+        if (this.textAlign === RIGHT || this.textAlign === JUSTIFY || this.textAlign === JUSTIFY_RIGHT) {
           boundaries.left *= -1;
-        } else if (this.textAlign === 'left' || this.textAlign === 'justify-left') {
+        } else if (this.textAlign === LEFT || this.textAlign === JUSTIFY_LEFT) {
           boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
-        } else if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+        } else if (this.textAlign === CENTER || this.textAlign === JUSTIFY_CENTER) {
           boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
         }
       }
@@ -23281,7 +23321,7 @@
     _renderSelection(ctx, selection, boundaries) {
       const selectionStart = selection.selectionStart,
         selectionEnd = selection.selectionEnd,
-        isJustify = this.textAlign.indexOf('justify') !== -1,
+        isJustify = this.textAlign.includes(JUSTIFY),
         start = this.get2DCursorLocation(selectionStart),
         end = this.get2DCursorLocation(selectionEnd),
         startLine = start.lineIndex,
@@ -23323,11 +23363,11 @@
           ctx.fillStyle = this.selectionColor;
         }
         if (this.direction === 'rtl') {
-          if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') {
+          if (this.textAlign === RIGHT || this.textAlign === JUSTIFY || this.textAlign === JUSTIFY_RIGHT) {
             drawStart = this.width - drawStart - drawWidth;
-          } else if (this.textAlign === 'left' || this.textAlign === 'justify-left') {
+          } else if (this.textAlign === LEFT || this.textAlign === JUSTIFY_LEFT) {
             drawStart = boundaries.left + lineOffset - boxEnd;
-          } else if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+          } else if (this.textAlign === CENTER || this.textAlign === JUSTIFY_CENTER) {
             drawStart = boundaries.left + lineOffset - boxEnd;
           }
         }
@@ -23450,7 +23490,7 @@
       if (this.dynamicMinWidth > this.width) {
         this._set('width', this.dynamicMinWidth);
       }
-      if (this.textAlign.indexOf('justify') !== -1) {
+      if (this.textAlign.includes(JUSTIFY)) {
         // once text is measured we need to make space fatter to make justified text.
         this.enlargeSpaces();
       }
@@ -24079,22 +24119,35 @@
      * Accepts specific dimensions to initialize the texture to or a source image.
      *
      * @param {WebGLRenderingContext} gl The GL context to use for creating the texture.
-     * @param {Number} width The width to initialize the texture at.
-     * @param {Number} height The height to initialize the texture.
-     * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data.
+     * @param {number} width The width to initialize the texture at.
+     * @param {number} height The height to initialize the texture.
+     * @param {TexImageSource} textureImageSource A source for the texture data.
+     * @param {number} filter gl.NEAREST default or gl.LINEAR filters for the texture.
+     * This filter is very useful for LUTs filters. If you need interpolation use gl.LINEAR
      * @returns {WebGLTexture}
      */
-    createTexture(gl, width, height, textureImageSource) {
+    createTexture(gl, width, height, textureImageSource, filter) {
+      const {
+        NEAREST,
+        TEXTURE_2D,
+        RGBA,
+        UNSIGNED_BYTE,
+        CLAMP_TO_EDGE,
+        TEXTURE_MAG_FILTER,
+        TEXTURE_MIN_FILTER,
+        TEXTURE_WRAP_S,
+        TEXTURE_WRAP_T
+      } = gl;
       const texture = gl.createTexture();
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.bindTexture(TEXTURE_2D, texture);
+      gl.texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, filter || NEAREST);
+      gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, filter || NEAREST);
+      gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_S, CLAMP_TO_EDGE);
+      gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_T, CLAMP_TO_EDGE);
       if (textureImageSource) {
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource);
+        gl.texImage2D(TEXTURE_2D, 0, RGBA, RGBA, UNSIGNED_BYTE, textureImageSource);
       } else {
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texImage2D(TEXTURE_2D, 0, RGBA, width, height, 0, RGBA, UNSIGNED_BYTE, null);
       }
       return texture;
     }
@@ -24108,12 +24161,17 @@
      * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the
      * texture cache entry if one does not already exist.
      */
-    getCachedTexture(uniqueId, textureImageSource) {
-      if (this.textureCache[uniqueId]) {
-        return this.textureCache[uniqueId];
+    getCachedTexture(uniqueId, textureImageSource, filter) {
+      const {
+        textureCache
+      } = this;
+      if (textureCache[uniqueId]) {
+        return textureCache[uniqueId];
       } else {
-        const texture = this.createTexture(this.gl, textureImageSource.width, textureImageSource.height, textureImageSource);
-        this.textureCache[uniqueId] = texture;
+        const texture = this.createTexture(this.gl, textureImageSource.width, textureImageSource.height, textureImageSource, filter);
+        if (texture) {
+          textureCache[uniqueId] = texture;
+        }
         return texture;
       }
     }
@@ -24255,6 +24313,9 @@
     }
     return filterBackend;
   }
+  function setFilterBackend(backend) {
+    filterBackend = backend;
+  }
 
   const _excluded$5 = ["filters", "resizeFilter", "src", "crossOrigin"];
 
@@ -24798,7 +24859,7 @@
         cropX = 0,
         cropY = 0,
         offset;
-      if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) {
+      if (pAR && (pAR.alignX !== NONE || pAR.alignY !== NONE)) {
         if (pAR.meetOrSlice === 'meet') {
           scaleX = scaleY = findScaleToFit(this._element, parsedAttributes);
           offset = (pWidth - rWidth * scaleX) / 2;
@@ -24933,7 +24994,6 @@
   classRegistry.setSVGClass(Image);
 
   //@ts-nocheck
-
   /**
    * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
    */
@@ -25002,7 +25062,7 @@
 
     // default is to preserve aspect ratio
     preserveAspectRatio = parsePreserveAspectRatioAttribute(preserveAspectRatio);
-    if (preserveAspectRatio.alignX !== 'none') {
+    if (preserveAspectRatio.alignX !== NONE) {
       //translate all container for the effect of Mid, Min, Max
       if (preserveAspectRatio.meetOrSlice === 'meet') {
         scaleY = scaleX = scaleX > scaleY ? scaleY : scaleX;
@@ -25369,7 +25429,7 @@
           skewX,
           skewY: 0
         });
-        clipPath.setPositionByOrigin(new Point(translateX, translateY), 'center', 'center');
+        clipPath.setPositionByOrigin(new Point(translateX, translateY), CENTER, CENTER);
         obj.clipPath = clipPath;
       } else {
         // if clip-path does not resolve to any element, delete the property.
@@ -25546,7 +25606,7 @@
   const polyActionHandler = (eventData, transform, x, y) => {
     const poly = transform.target,
       pointIndex = transform.pointIndex,
-      mouseLocalPosition = getLocalPoint(transform, 'center', 'center', x, y),
+      mouseLocalPosition = getLocalPoint(transform, CENTER, CENTER, x, y),
       polygonBaseSize = getSize(poly),
       size = poly._getTransformedDimensions(),
       sizeFactor = polygonBaseSize.divide(size),
@@ -28313,6 +28373,7 @@
   exports.parseTransformAttribute = parseTransformAttribute;
   exports.runningAnimations = runningAnimations;
   exports.setEnv = setEnv;
+  exports.setFilterBackend = setFilterBackend;
   exports.util = index$1;
   exports.version = VERSION;