fabric 6.0.0-beta7 → 6.0.0-beta8

package/dist/index.js

@@ -416,7 +416,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta7";
+  var version = "6.0.0-beta8";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -440,6 +440,7 @@
   const BOTTOM = 'bottom';
   const RIGHT = 'right';
   const NONE = 'none';
+  const reNewline = /\r?\n/;
 
   /*
    * This Map connects the objects type value with their
@@ -1521,133 +1522,6 @@
     return getFabricWindow().cancelAnimationFrame(handle);
   }
 
-  /**
-   * Wraps element with another element
-   * @param {HTMLElement} element Element to wrap
-   * @param {HTMLElement|String} wrapper Element to wrap with
-   * @param {Object} [attributes] Attributes to set on a wrapper
-   * @return {HTMLElement} wrapper
-   */
-  function wrapElement(element, wrapper) {
-    if (element.parentNode) {
-      element.parentNode.replaceChild(wrapper, element);
-    }
-    wrapper.appendChild(element);
-    return wrapper;
-  }
-
-  /**
-   * Returns element scroll offsets
-   * @param {HTMLElement} element Element to operate on
-   * @return {Object} Object with left/top values
-   */
-  function getScrollLeftTop(element) {
-    let left = 0,
-      top = 0;
-    const doc = getDocumentFromElement(element);
-    const docElement = doc.documentElement,
-      body = doc.body || {
-        scrollLeft: 0,
-        scrollTop: 0
-      };
-    // While loop checks (and then sets element to) .parentNode OR .host
-    //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
-    //  but the .parentNode of a root ShadowDOM node will always be null, instead
-    //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
-    // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
-    while (element && (element.parentNode || element.host)) {
-      // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
-      element = element.parentNode || element.host;
-      // @ts-expect-error because element is typed as HTMLElement but it can go up to document
-      if (element === doc) {
-        left = body.scrollLeft || docElement.scrollLeft || 0;
-        top = body.scrollTop || docElement.scrollTop || 0;
-      } else {
-        left += element.scrollLeft || 0;
-        top += element.scrollTop || 0;
-      }
-      if (element.nodeType === 1 && element.style.position === 'fixed') {
-        break;
-      }
-    }
-    return {
-      left,
-      top
-    };
-  }
-
-  /**
-   * Returns offset for a given element
-   * @param {HTMLElement} element Element to get offset for
-   * @return {Object} Object with "left" and "top" properties
-   */
-  function getElementOffset(element) {
-    var _getWindowFromElement;
-    let box = {
-      left: 0,
-      top: 0
-    };
-    const doc = element && getDocumentFromElement(element),
-      offset = {
-        left: 0,
-        top: 0
-      },
-      offsetAttributes = {
-        borderLeftWidth: LEFT,
-        borderTopWidth: TOP,
-        paddingLeft: LEFT,
-        paddingTop: TOP
-      };
-    if (!doc) {
-      return offset;
-    }
-    const elemStyle = ((_getWindowFromElement = getWindowFromElement(element)) === null || _getWindowFromElement === void 0 ? void 0 : _getWindowFromElement.getComputedStyle(element, null)) || {};
-    for (const attr in offsetAttributes) {
-      // @ts-expect-error TS learn to iterate!
-      offset[offsetAttributes[attr]] += parseInt(elemStyle[attr], 10) || 0;
-    }
-    const docElem = doc.documentElement;
-    if (typeof element.getBoundingClientRect !== 'undefined') {
-      box = element.getBoundingClientRect();
-    }
-    const scrollLeftTop = getScrollLeftTop(element);
-    return {
-      left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
-      top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top
-    };
-  }
-
-  /**
-   * Makes element unselectable
-   * @param {HTMLElement} element Element to make unselectable
-   * @return {HTMLElement} Element that was passed in
-   */
-  function makeElementUnselectable(element) {
-    if (typeof element.onselectstart !== 'undefined') {
-      element.onselectstart = () => false;
-    }
-    element.style.userSelect = NONE;
-    return element;
-  }
-
-  /**
-   * Makes element selectable
-   * @param {HTMLElement} element Element to make selectable
-   * @return {HTMLElement} Element that was passed in
-   */
-  function makeElementSelectable(element) {
-    if (typeof element.onselectstart !== 'undefined') {
-      element.onselectstart = null;
-    }
-    element.style.userSelect = '';
-    return element;
-  }
-  const getDocumentFromElement = el => el.ownerDocument || null;
-  const getWindowFromElement = el => {
-    var _el$ownerDocument;
-    return ((_el$ownerDocument = el.ownerDocument) === null || _el$ownerDocument === void 0 ? void 0 : _el$ownerDocument.defaultView) || null;
-  };
-
   let id = 0;
   const uid = () => id++;
 
@@ -2890,6 +2764,228 @@
     return !!fabricObject && typeof fabricObject.onDragStart === 'function' && typeof fabricObject.shouldStartDragging === 'function';
   };
 
+  /**
+   * Returns element scroll offsets
+   * @param {HTMLElement} element Element to operate on
+   * @return {Object} Object with left/top values
+   */
+  function getScrollLeftTop(element) {
+    let left = 0,
+      top = 0;
+    const doc = getDocumentFromElement(element);
+    const docElement = doc.documentElement,
+      body = doc.body || {
+        scrollLeft: 0,
+        scrollTop: 0
+      };
+    // While loop checks (and then sets element to) .parentNode OR .host
+    //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
+    //  but the .parentNode of a root ShadowDOM node will always be null, instead
+    //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
+    // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
+    while (element && (element.parentNode || element.host)) {
+      // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
+      element = element.parentNode || element.host;
+      // @ts-expect-error because element is typed as HTMLElement but it can go up to document
+      if (element === doc) {
+        left = body.scrollLeft || docElement.scrollLeft || 0;
+        top = body.scrollTop || docElement.scrollTop || 0;
+      } else {
+        left += element.scrollLeft || 0;
+        top += element.scrollTop || 0;
+      }
+      if (element.nodeType === 1 && element.style.position === 'fixed') {
+        break;
+      }
+    }
+    return {
+      left,
+      top
+    };
+  }
+  const getDocumentFromElement = el => el.ownerDocument || null;
+  const getWindowFromElement = el => {
+    var _el$ownerDocument;
+    return ((_el$ownerDocument = el.ownerDocument) === null || _el$ownerDocument === void 0 ? void 0 : _el$ownerDocument.defaultView) || null;
+  };
+
+  //@ts-nocheck
+  // TODO this file needs to go away, cross browser style support is not fabricjs domain.
+
+  /**
+   * wrapper for setting element's style
+   * @param {HTMLElement} element
+   * @param {Object | string} styles
+   */
+  function setStyle(element, styles) {
+    const elementStyle = element.style;
+    if (!elementStyle) {
+      return;
+    } else if (typeof styles === 'string') {
+      element.style.cssText += ';' + styles;
+    } else {
+      Object.entries(styles).forEach(_ref => {
+        let [property, value] = _ref;
+        return elementStyle.setProperty(property, value);
+      });
+    }
+  }
+
+  const setCanvasDimensions = function (el, ctx, _ref) {
+    let {
+      width,
+      height
+    } = _ref;
+    let retinaScaling = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    el.width = width;
+    el.height = height;
+    if (retinaScaling > 1) {
+      el.setAttribute('width', (width * retinaScaling).toString());
+      el.setAttribute('height', (height * retinaScaling).toString());
+      ctx.scale(retinaScaling, retinaScaling);
+    }
+  };
+  function allowTouchScrolling(element, allow) {
+    const touchAction = allow ? 'manipulation' : NONE;
+    setStyle(element, {
+      'touch-action': touchAction,
+      '-ms-touch-action': touchAction
+    });
+  }
+  const setCSSDimensions = (el, _ref2) => {
+    let {
+      width,
+      height
+    } = _ref2;
+    width && (el.style.width = typeof width === 'number' ? "".concat(width, "px") : width);
+    height && (el.style.height = typeof height === 'number' ? "".concat(height, "px") : height);
+  };
+
+  /**
+   * Returns offset for a given element
+   * @param {HTMLElement} element Element to get offset for
+   * @return {Object} Object with "left" and "top" properties
+   */
+  function getElementOffset(element) {
+    var _getWindowFromElement;
+    let box = {
+      left: 0,
+      top: 0
+    };
+    const doc = element && getDocumentFromElement(element),
+      offset = {
+        left: 0,
+        top: 0
+      },
+      offsetAttributes = {
+        borderLeftWidth: LEFT,
+        borderTopWidth: TOP,
+        paddingLeft: LEFT,
+        paddingTop: TOP
+      };
+    if (!doc) {
+      return offset;
+    }
+    const elemStyle = ((_getWindowFromElement = getWindowFromElement(element)) === null || _getWindowFromElement === void 0 ? void 0 : _getWindowFromElement.getComputedStyle(element, null)) || {};
+    for (const attr in offsetAttributes) {
+      // @ts-expect-error TS learn to iterate!
+      offset[offsetAttributes[attr]] += parseInt(elemStyle[attr], 10) || 0;
+    }
+    const docElem = doc.documentElement;
+    if (typeof element.getBoundingClientRect !== 'undefined') {
+      box = element.getBoundingClientRect();
+    }
+    const scrollLeftTop = getScrollLeftTop(element);
+    return {
+      left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
+      top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top
+    };
+  }
+
+  /**
+   * Makes element unselectable
+   * @param {HTMLElement} element Element to make unselectable
+   * @return {HTMLElement} Element that was passed in
+   */
+  function makeElementUnselectable(element) {
+    if (typeof element.onselectstart !== 'undefined') {
+      element.onselectstart = () => false;
+    }
+    element.style.userSelect = NONE;
+    return element;
+  }
+
+  class StaticCanvasDOMManager {
+    /**
+     * Keeps a copy of the canvas style before setting retina scaling and other potions
+     * in order to return it to original state on dispose
+     * @type string
+     */
+
+    constructor(arg0) {
+      _defineProperty(this, "_originalCanvasStyle", void 0);
+      _defineProperty(this, "lower", void 0);
+      const el = this.createLowerCanvas(arg0);
+      this.lower = {
+        el,
+        ctx: el.getContext('2d')
+      };
+    }
+    createLowerCanvas(arg0) {
+      // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
+      const el = isHTMLCanvas(arg0) ? arg0 : getFabricDocument().getElementById(arg0) || createCanvasElement();
+      if (el.hasAttribute('data-fabric')) {
+        /* _DEV_MODE_START_ */
+        throw new Error('fabric.js: trying to initialize a canvas that has already been initialized');
+        /* _DEV_MODE_END_ */
+      }
+
+      this._originalCanvasStyle = el.style.cssText;
+      el.setAttribute('data-fabric', 'main');
+      el.classList.add('lower-canvas');
+      return el;
+    }
+    cleanupDOM(_ref) {
+      let {
+        width,
+        height
+      } = _ref;
+      const {
+        el
+      } = this.lower;
+      // restore canvas style and attributes
+      el.classList.remove('lower-canvas');
+      el.removeAttribute('data-fabric');
+      // restore canvas size to original size in case retina scaling was applied
+      el.setAttribute('width', "".concat(width));
+      el.setAttribute('height', "".concat(height));
+      el.style.cssText = this._originalCanvasStyle || '';
+      this._originalCanvasStyle = undefined;
+    }
+    setDimensions(size, retinaScaling) {
+      const {
+        el,
+        ctx
+      } = this.lower;
+      setCanvasDimensions(el, ctx, size, retinaScaling);
+    }
+    setCSSDimensions(size) {
+      setCSSDimensions(this.lower.el, size);
+    }
+
+    /**
+     * Calculates canvas element offset relative to the document
+     */
+    calcOffset() {
+      return getElementOffset(this.lower.el);
+    }
+    dispose() {
+      getEnv().dispose(this.lower.el);
+      // @ts-expect-error disposing
+      delete this.lower;
+    }
+  }
+
   const StaticCanvasDefaults = {
     backgroundColor: '',
     backgroundImage: null,
@@ -3051,6 +3147,14 @@
      * Can be use to read the raw pixels, but never write or manipulate
      * @type HTMLCanvasElement
      */
+    get lowerCanvasEl() {
+      var _this$elements$lower;
+      return (_this$elements$lower = this.elements.lower) === null || _this$elements$lower === void 0 ? void 0 : _this$elements$lower.el;
+    }
+    get contextContainer() {
+      var _this$elements$lower2;
+      return (_this$elements$lower2 = this.elements.lower) === null || _this$elements$lower2 === void 0 ? void 0 : _this$elements$lower2.ctx;
+    }
 
     /**
      * Width in virtual/logical pixels of the canvas.
@@ -3076,12 +3180,6 @@
      * @type boolean
      */
 
-    /**
-     * Keeps a copy of the canvas style before setting retina scaling and other potions
-     * in order to return it to original state on dispose
-     * @type string
-     */
-
     // reference to
 
     static getDefaults() {
@@ -3094,15 +3192,14 @@
       this.set(options);
       this.initElements(el);
       this._setDimensionsImpl({
-        width: this.width || this.lowerCanvasEl.width || 0,
-        height: this.height || this.lowerCanvasEl.height || 0
+        width: this.width || this.elements.lower.el.width || 0,
+        height: this.height || this.elements.lower.el.height || 0
       });
       this.viewportTransform = [...this.viewportTransform];
       this.calcViewportBoundaries();
     }
     initElements(el) {
-      this._createLowerCanvas(el);
-      this._originalCanvasStyle = this.lowerCanvasEl.style.cssText;
+      this.elements = new StaticCanvasDOMManager(el);
     }
     add() {
       const size = super.add(...arguments);
@@ -3165,45 +3262,13 @@
     getRetinaScaling() {
       return this._isRetinaScaling() ? Math.max(1, config.devicePixelRatio) : 1;
     }
-    _initRetinaScaling() {
-      this.__initRetinaScaling(this.lowerCanvasEl, this.contextContainer);
-    }
-    __initRetinaScaling(canvas, context) {
-      const scaleRatio = config.devicePixelRatio;
-      canvas.setAttribute('width', (this.width * scaleRatio).toString());
-      canvas.setAttribute('height', (this.height * scaleRatio).toString());
-      context.scale(scaleRatio, scaleRatio);
-    }
 
     /**
      * Calculates canvas element offset relative to the document
      * This method is also attached as "resize" event handler of window
      */
     calcOffset() {
-      return this._offset = getElementOffset(this.lowerCanvasEl);
-    }
-
-    /**
-     * Creates a bottom canvas
-     * @private
-     * @param {HTMLElement} [canvasEl]
-     */
-    _createLowerCanvas(canvasEl) {
-      // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
-      if (isHTMLCanvas(canvasEl)) {
-        this.lowerCanvasEl = canvasEl;
-      } else {
-        this.lowerCanvasEl = getFabricDocument().getElementById(canvasEl) || createCanvasElement();
-      }
-      if (this.lowerCanvasEl.hasAttribute('data-fabric')) {
-        /* _DEV_MODE_START_ */
-        throw new Error('fabric.js: trying to initialize a canvas that has already been initialized');
-        /* _DEV_MODE_END_ */
-      }
-
-      this.lowerCanvasEl.classList.add('lower-canvas');
-      this.lowerCanvasEl.setAttribute('data-fabric', 'main');
-      this.contextContainer = this.lowerCanvasEl.getContext('2d');
+      return this._offset = this.elements.calcOffset();
     }
 
     /**
@@ -3259,19 +3324,19 @@
         cssOnly = false,
         backstoreOnly = false
       } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      Object.entries(dimensions).forEach(_ref => {
-        let [prop, value] = _ref;
-        let cssValue = "".concat(value);
-        if (!cssOnly) {
-          this._setBackstoreDimension(prop, value);
-          cssValue += 'px';
-          this.hasLostContext = true;
-        }
-        if (!backstoreOnly) {
-          this._setCssDimension(prop, cssValue);
-        }
-      });
-      this._isRetinaScaling() && this._initRetinaScaling();
+      if (!cssOnly) {
+        const size = _objectSpread2({
+          width: this.width,
+          height: this.height
+        }, dimensions);
+        this.elements.setDimensions(size, this.getRetinaScaling());
+        this.hasLostContext = true;
+        this.width = size.width;
+        this.height = size.height;
+      }
+      if (!backstoreOnly) {
+        this.elements.setCSSDimensions(dimensions);
+      }
       this.calcOffset();
     }
 
@@ -3298,29 +3363,6 @@
       }
     }
 
-    /**
-     * Helper for setting width/height
-     * @private
-     * @param {String} prop property (width|height)
-     * @param {Number} value value to set property to
-     * @todo subclass in canvas and handle upperCanvasEl there.
-     */
-    _setBackstoreDimension(prop, value) {
-      this.lowerCanvasEl[prop] = value;
-      this[prop] = value;
-    }
-
-    /**
-     * Helper for setting css width/height
-     * @private
-     * @param {String} prop property (width|height)
-     * @param {String} value value to set property to
-     * @todo subclass in canvas and handle upperCanvasEl there.
-     */
-    _setCssDimension(prop, value) {
-      this.lowerCanvasEl.style[prop] = value;
-    }
-
     /**
      * Returns canvas zoom level
      * @return {Number}
@@ -3405,7 +3447,7 @@
      * @return {HTMLCanvasElement}
      */
     getElement() {
-      return this.lowerCanvasEl;
+      return this.elements.lower.el;
     }
 
     /**
@@ -3421,7 +3463,7 @@
      * @return {CanvasRenderingContext2D}
      */
     getContext() {
-      return this.contextContainer;
+      return this.elements.lower.ctx;
     }
 
     /**
@@ -3433,7 +3475,7 @@
       this.overlayImage = null;
       this.backgroundColor = '';
       this.overlayColor = '';
-      this.clearContext(this.contextContainer);
+      this.clearContext(this.getContext());
       this.fire('canvas:cleared');
       this.renderOnAddRemove && this.requestRenderAll();
     }
@@ -3446,7 +3488,7 @@
       if (this.destroyed) {
         return;
       }
-      this.renderCanvas(this.contextContainer, this._objects);
+      this.renderCanvas(this.getContext(), this._objects);
     }
 
     /**
@@ -4013,10 +4055,10 @@
           return;
         }
         Object.values(styles).forEach(styleRow => {
-          Object.values(styleRow).forEach(_ref2 => {
+          Object.values(styleRow).forEach(_ref => {
             let {
               fontFamily = ''
-            } = _ref2;
+            } = _ref;
             if (!fontList[fontFamily] && fontPaths[fontFamily]) {
               fontList[fontFamily] = true;
             }
@@ -4138,8 +4180,8 @@
         clipPath
       }, {
         signal
-      })]).then(_ref3 => {
-        let [enlived, enlivedMap] = _ref3;
+      })]).then(_ref2 => {
+        let [enlived, enlivedMap] = _ref2;
         this.clear();
         this.add(...enlived);
         this.set(serialized);
@@ -4278,7 +4320,10 @@
      * @throws if aborted by a consequent call
      */
     dispose() {
-      !this.disposed && this.cleanupDOM();
+      !this.disposed && this.elements.cleanupDOM({
+        width: this.width,
+        height: this.height
+      });
       this.disposed = true;
       return new Promise((resolve, reject) => {
         const task = () => {
@@ -4299,21 +4344,6 @@
       });
     }
 
-    /**
-     * Invoked as part of the **sync** operation of {@link dispose}.
-     */
-    cleanupDOM() {
-      const canvasElement = this.lowerCanvasEl;
-      // restore canvas style and attributes
-      canvasElement.classList.remove('lower-canvas');
-      canvasElement.removeAttribute('data-fabric');
-      // restore canvas size to original size in case retina scaling was applied
-      canvasElement.setAttribute('width', "".concat(this.width));
-      canvasElement.setAttribute('height', "".concat(this.height));
-      canvasElement.style.cssText = this._originalCanvasStyle || '';
-      this._originalCanvasStyle = undefined;
-    }
-
     /**
      * Clears the canvas element, disposes objects and frees resources.
      *
@@ -4341,10 +4371,7 @@
         this.overlayImage.dispose();
       }
       this.overlayImage = null;
-      // @ts-expect-error disposing
-      this.contextContainer = null;
-      // @ts-expect-error disposing
-      this.lowerCanvasEl = undefined;
+      this.elements.dispose();
     }
 
     /**
@@ -10084,28 +10111,6 @@
     return true;
   };
 
-  //@ts-nocheck
-  // TODO this file needs to go away, cross browser style support is not fabricjs domain.
-
-  /**
-   * wrapper for setting element's style
-   * @param {HTMLElement} element
-   * @param {Object | string} styles
-   */
-  function setStyle(element, styles) {
-    const elementStyle = element.style;
-    if (!elementStyle) {
-      return;
-    } else if (typeof styles === 'string') {
-      element.style.cssText += ';' + styles;
-    } else {
-      Object.entries(styles).forEach(_ref => {
-        let [property, value] = _ref;
-        return elementStyle.setProperty(property, value);
-      });
-    }
-  }
-
   /**
    * Attributes parsed from all SVG elements
    * @type array
@@ -12168,7 +12173,7 @@
       // clone to prevent mutation
       return cloneDeep(styles);
     }
-    const textLines = text.split('\n'),
+    const textLines = text.split(reNewline),
       stylesObject = {};
     let charIndex = -1,
       styleIndex = 0;
@@ -13314,7 +13319,6 @@
     findScaleToFit: findScaleToFit,
     getBisector: getBisector,
     getBoundsOfCurve: getBoundsOfCurve,
-    getElementOffset: getElementOffset,
     getPathSegmentsInfo: getPathSegmentsInfo,
     getPointOnPath: getPointOnPath,
     getPointer: getPointer,
@@ -13332,8 +13336,6 @@
     joinPath: joinPath,
     loadImage: loadImage,
     makeBoundingBoxFromPoints: makeBoundingBoxFromPoints,
-    makeElementSelectable: makeElementSelectable,
-    makeElementUnselectable: makeElementUnselectable,
     makePathSimpler: makePathSimpler,
     matrixToSVG: matrixToSVG,
     mergeClipPaths: mergeClipPaths,
@@ -13367,10 +13369,120 @@
     toFixed: toFixed,
     transformPath: transformPath,
     transformPoint: transformPoint,
-    transformPointRelativeToCanvas: transformPointRelativeToCanvas,
-    wrapElement: wrapElement
+    transformPointRelativeToCanvas: transformPointRelativeToCanvas
   });
 
+  class CanvasDOMManager extends StaticCanvasDOMManager {
+    constructor(arg0) {
+      let {
+        allowTouchScrolling = false,
+        containerClass = ''
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      super(arg0);
+      _defineProperty(this, "upper", void 0);
+      _defineProperty(this, "container", void 0);
+      const {
+        el: lowerCanvasEl
+      } = this.lower;
+      const upperCanvasEl = this.createUpperCanvas();
+      this.upper = {
+        el: upperCanvasEl,
+        ctx: upperCanvasEl.getContext('2d')
+      };
+      this.applyCanvasStyle(lowerCanvasEl, {
+        allowTouchScrolling
+      });
+      this.applyCanvasStyle(upperCanvasEl, {
+        allowTouchScrolling
+      });
+      const container = this.createContainerElement();
+      container.classList.add(containerClass);
+      if (lowerCanvasEl.parentNode) {
+        lowerCanvasEl.parentNode.replaceChild(container, lowerCanvasEl);
+      }
+      container.append(lowerCanvasEl, upperCanvasEl);
+      this.container = container;
+    }
+    createUpperCanvas() {
+      const {
+        el: lowerCanvasEl
+      } = this.lower;
+      const el = createCanvasElement();
+      // we assign the same classname of the lowerCanvas
+      el.className = lowerCanvasEl.className;
+      // but then we remove the lower-canvas specific className
+      el.classList.remove('lower-canvas');
+      // we add the specific upper-canvas class
+      el.classList.add('upper-canvas');
+      el.setAttribute('data-fabric', 'top');
+      el.style.cssText = lowerCanvasEl.style.cssText;
+      el.setAttribute('draggable', 'true');
+      return el;
+    }
+    createContainerElement() {
+      const container = getFabricDocument().createElement('div');
+      container.setAttribute('data-fabric', 'wrapper');
+      setStyle(container, {
+        position: 'relative'
+      });
+      makeElementUnselectable(container);
+      return container;
+    }
+
+    /**
+     * @private
+     * @param {HTMLCanvasElement} element canvas element to apply styles on
+     */
+    applyCanvasStyle(element, _ref) {
+      let {
+        allowTouchScrolling: allow
+      } = _ref;
+      setStyle(element, {
+        position: 'absolute',
+        left: 0,
+        top: 0
+      });
+      allowTouchScrolling(element, allow);
+      makeElementUnselectable(element);
+    }
+    setDimensions(size, retinaScaling) {
+      super.setDimensions(size, retinaScaling);
+      const {
+        el,
+        ctx
+      } = this.upper;
+      setCanvasDimensions(el, ctx, size, retinaScaling);
+    }
+    setCSSDimensions(size) {
+      super.setCSSDimensions(size);
+      setCSSDimensions(this.upper.el, size);
+      setCSSDimensions(this.container, size);
+    }
+    cleanupDOM(size) {
+      const container = this.container,
+        {
+          el: lowerCanvasEl
+        } = this.lower,
+        {
+          el: upperCanvasEl
+        } = this.upper;
+      super.cleanupDOM(size);
+      container.removeChild(upperCanvasEl);
+      container.removeChild(lowerCanvasEl);
+      if (container.parentNode) {
+        container.parentNode.replaceChild(lowerCanvasEl, container);
+      }
+    }
+    dispose() {
+      super.dispose();
+      getEnv().dispose(this.upper.el);
+      // @ts-expect-error disposing
+      delete this.upper;
+      // @ts-expect-error disposing
+      delete this.container;
+    }
+  }
+
   const DefaultCanvasProperties = {
     uniformScaling: true,
     uniScaleKey: 'shiftKey',
@@ -13655,6 +13767,7 @@
      * Default element class that's given to wrapper (div) element of canvas
      * @type String
      * @default
+     * @deprecated customize {@link CanvasDOMManager} instead or access {@link elements} directly
      */
 
     /**
@@ -13787,6 +13900,17 @@
     static getDefaults() {
       return _objectSpread2(_objectSpread2({}, super.getDefaults()), SelectableCanvas.ownDefaults);
     }
+    get upperCanvasEl() {
+      var _this$elements$upper;
+      return (_this$elements$upper = this.elements.upper) === null || _this$elements$upper === void 0 ? void 0 : _this$elements$upper.el;
+    }
+    get contextTop() {
+      var _this$elements$upper2;
+      return (_this$elements$upper2 = this.elements.upper) === null || _this$elements$upper2 === void 0 ? void 0 : _this$elements$upper2.ctx;
+    }
+    get wrapperEl() {
+      return this.elements.container;
+    }
     constructor(el) {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       super(el, options);
@@ -13803,16 +13927,12 @@
       });
     }
     initElements(el) {
-      super.initElements(el);
-      this._applyCanvasStyle(this.lowerCanvasEl);
-      this._initWrapperElement();
-      this._createUpperCanvas();
+      this.elements = new CanvasDOMManager(el, {
+        allowTouchScrolling: this.allowTouchScrolling,
+        containerClass: this.containerClass
+      });
       this._createCacheCanvas();
     }
-    _initRetinaScaling() {
-      super._initRetinaScaling();
-      this.__initRetinaScaling(this.upperCanvasEl, this.contextTop);
-    }
 
     /**
      * @private
@@ -13876,7 +13996,7 @@
         this.hasLostContext = false;
       }
       !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender());
-      this.renderCanvas(this.contextContainer, this._objectsToRender);
+      this.renderCanvas(this.getContext(), this._objectsToRender);
     }
 
     /**
@@ -14340,55 +14460,6 @@
         this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles(this.contextTop);
       }
     }
-
-    /**
-     * Helper for setting width/height
-     * @private
-     * @param {String} prop property (width|height)
-     * @param {Number} value value to set property to
-     */
-    _setBackstoreDimension(prop, value) {
-      super._setBackstoreDimension(prop, value);
-      this.upperCanvasEl[prop] = value;
-    }
-
-    /**
-     * Helper for setting css width/height
-     * @private
-     * @param {String} prop property (width|height)
-     * @param {String} value value to set property to
-     */
-    _setCssDimension(prop, value) {
-      super._setCssDimension(prop, value);
-      this.upperCanvasEl.style[prop] = value;
-      this.wrapperEl.style[prop] = value;
-    }
-
-    /**
-     * @private
-     * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
-     */
-    _createUpperCanvas() {
-      const lowerCanvasEl = this.lowerCanvasEl;
-
-      // if there is no upperCanvas (most common case) we create one.
-      if (!this.upperCanvasEl) {
-        this.upperCanvasEl = createCanvasElement();
-      }
-      const upperCanvasEl = this.upperCanvasEl;
-      // we assign the same classname of the lowerCanvas
-      upperCanvasEl.className = lowerCanvasEl.className;
-      // but then we remove the lower-canvas specific className
-      upperCanvasEl.classList.remove('lower-canvas');
-      // we add the specific upper-canvas class
-      upperCanvasEl.classList.add('upper-canvas');
-      upperCanvasEl.setAttribute('data-fabric', 'top');
-      this.wrapperEl.appendChild(upperCanvasEl);
-      upperCanvasEl.style.cssText = lowerCanvasEl.style.cssText;
-      this._applyCanvasStyle(upperCanvasEl);
-      upperCanvasEl.setAttribute('draggable', 'true');
-      this.contextTop = upperCanvasEl.getContext('2d');
-    }
     _createCacheCanvas() {
       this.pixelFindCanvasEl = createCanvasElement();
       this.pixelFindContext = this.pixelFindCanvasEl.getContext('2d', {
@@ -14396,46 +14467,13 @@
       });
       this.setTargetFindTolerance(this.targetFindTolerance);
     }
-    _initWrapperElement() {
-      const container = getFabricDocument().createElement('div');
-      container.classList.add(this.containerClass);
-      this.wrapperEl = wrapElement(this.lowerCanvasEl, container);
-      this.wrapperEl.setAttribute('data-fabric', 'wrapper');
-      setStyle(this.wrapperEl, {
-        width: "".concat(this.width, "px"),
-        height: "".concat(this.height, "px"),
-        position: 'relative'
-      });
-      makeElementUnselectable(this.wrapperEl);
-    }
-
-    /**
-     * @private
-     * @param {HTMLCanvasElement} element canvas element to apply styles on
-     */
-    _applyCanvasStyle(element) {
-      const width = this.width || element.width,
-        height = this.height || element.height;
-      setStyle(element, {
-        position: 'absolute',
-        width: width + 'px',
-        height: height + 'px',
-        left: 0,
-        top: 0,
-        'touch-action': this.allowTouchScrolling ? 'manipulation' : NONE,
-        '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : NONE
-      });
-      element.width = width;
-      element.height = height;
-      makeElementUnselectable(element);
-    }
 
     /**
      * Returns context of top canvas where interactions are drawn
      * @returns {CanvasRenderingContext2D}
      */
     getTopContext() {
-      return this.contextTop;
+      return this.elements.upper.ctx;
     }
 
     /**
@@ -14444,7 +14482,7 @@
      * @return {CanvasRenderingContext2D}
      */
     getSelectionContext() {
-      return this.contextTop;
+      return this.elements.upper.ctx;
     }
 
     /**
@@ -14452,7 +14490,7 @@
      * @return {HTMLCanvasElement}
      */
     getSelectionElement() {
-      return this.upperCanvasEl;
+      return this.elements.upper.el;
     }
 
     /**
@@ -14646,17 +14684,6 @@
         activeObject.setCoords();
       }
     }
-    cleanupDOM() {
-      const wrapperEl = this.wrapperEl,
-        lowerCanvasEl = this.lowerCanvasEl,
-        upperCanvasEl = this.upperCanvasEl;
-      super.cleanupDOM();
-      wrapperEl.removeChild(upperCanvasEl);
-      wrapperEl.removeChild(lowerCanvasEl);
-      if (wrapperEl.parentNode) {
-        wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl);
-      }
-    }
 
     /**
      * @override clears active selection ref and interactive canvas elements and contexts
@@ -14672,20 +14699,11 @@
 
       // free resources
 
-      // top canvas
-      // @ts-expect-error disposing
-      this.contextTop = null;
-      // @ts-expect-error disposing
-      this.upperCanvasEl = undefined;
-
       // pixel find canvas
       // @ts-expect-error disposing
       this.pixelFindContext = null;
       // @ts-expect-error disposing
       this.pixelFindCanvasEl = undefined;
-
-      // @ts-expect-error disposing
-      this.wrapperEl = undefined;
     }
 
     /**
@@ -14764,8 +14782,10 @@
       _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 activeObject = canvas.getActiveObject();
+        if (isInteractiveTextObject(activeObject)) {
+          activeObject.hiddenTextarea && activeObject.hiddenTextarea.focus();
+        }
       };
       const el = canvas.upperCanvasEl;
       el.addEventListener('click', cb);
@@ -14795,8 +14815,8 @@
       }
     }
     onMouseMove(e) {
-      var _this$target2;
-      ((_this$target2 = this.target) === null || _this$target2 === void 0 ? void 0 : _this$target2.isEditing) && this.target.updateSelectionOnMouseMove(e);
+      var _this$target;
+      ((_this$target = this.target) === null || _this$target === void 0 ? void 0 : _this$target.isEditing) && this.target.updateSelectionOnMouseMove(e);
     }
     clear() {
       this.targets = [];
@@ -18781,7 +18801,7 @@
   // regexes, list of properties that are not suppose to change by instances, magic consts.
   // this will be a separated effort
   const textDefaultValues = {
-    _reNewline: /\r?\n/,
+    _reNewline: reNewline,
     _reSpacesAndTabs: /[ \t\r]/g,
     _reSpaceAndTab: /[ \t\r]/,
     _reWords: /\S+/g,
@@ -22740,22 +22760,13 @@
       }
     }
 
-    /**
-     * Returns coordinates of a pointer relative to object's top left corner in object's plane
-     * @param {Point} [pointer] Pointer to operate upon
-     * @return {Point} Coordinates of a pointer (x, y)
-     */
-    getLocalPointer(pointer) {
-      return transformPoint(pointer, invertTransform(this.calcTransformMatrix())).add(new Point(this.width / 2, this.height / 2));
-    }
-
     /**
      * Returns index of a character corresponding to where an object was clicked
      * @param {TPointerEvent} e Event object
      * @return {Number} Index of a character
      */
     getSelectionStartFromPointer(e) {
-      const mouseOffset = this.getLocalPointer(this.canvas.getPointer(e));
+      const mouseOffset = this.canvas.getPointer(e).transform(invertTransform(this.calcTransformMatrix())).add(new Point(-this._getLeftOffset(), -this._getTopOffset()));
       let height = 0,
         charIndex = 0,
         lineIndex = 0;
@@ -22773,13 +22784,6 @@
       const lineLeftOffset = Math.abs(this._getLineLeftOffset(lineIndex));
       let width = lineLeftOffset;
       const jlen = this._textLines[lineIndex].length;
-      // handling of RTL: in order to get things work correctly,
-      // we assume RTL writing is mirrored compared to LTR writing.
-      // so in position detection we mirror the X offset, and when is time
-      // of rendering it, we mirror it again.
-      if (this.direction === 'rtl') {
-        mouseOffset.x = this.width - mouseOffset.x;
-      }
       let prevWidth = 0;
       for (let j = 0; j < jlen; j++) {
         prevWidth = width;
@@ -28322,6 +28326,7 @@
   exports.BaseBrush = BaseBrush;
   exports.Canvas = Canvas;
   exports.Canvas2dFilterBackend = Canvas2dFilterBackend;
+  exports.CanvasDOMManager = CanvasDOMManager;
   exports.Circle = Circle;
   exports.CircleBrush = CircleBrush;
   exports.Color = Color;
@@ -28346,6 +28351,7 @@
   exports.Shadow = Shadow;
   exports.SprayBrush = SprayBrush;
   exports.StaticCanvas = StaticCanvas;
+  exports.StaticCanvasDOMManager = StaticCanvasDOMManager;
   exports.Text = Text;
   exports.Textbox = Textbox;
   exports.Triangle = Triangle;