@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/plugins/plugin.text_selection.js

@@ -0,0 +1,621 @@
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+//@ts-check
+import { createDIVPageLayer } from '../BookReader/PageContainer.js';
+import { SelectionObserver } from '../BookReader/utils/SelectionObserver.js';
+import { applyVariables } from '../util/strings.js';
+/** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
+/** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
+
+var BookReader = /** @type {typeof import('../BookReader').default} */window.BookReader;
+export var DEFAULT_OPTIONS = {
+  enabled: true,
+  /** @type {StringWithVars} The URL to fetch the entire DJVU xml. Supports options.vars */
+  fullDjvuXmlUrl: null,
+  /** @type {StringWithVars} The URL to fetch a single page of the DJVU xml. Supports options.vars. Also has {{pageIndex}} */
+  singlePageDjvuXmlUrl: null,
+  /** Whether to fetch the XML as a jsonp */
+  jsonp: false
+};
+/** @typedef {typeof DEFAULT_OPTIONS} TextSelectionPluginOptions */
+
+/**
+ * @template T
+ */
+export class Cache {
+  constructor() {
+    var maxSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+    this.maxSize = maxSize;
+    /** @type {T[]} */
+    this.entries = [];
+  }
+
+  /**
+   * @param {T} entry
+   */
+  add(entry) {
+    if (this.entries.length >= this.maxSize) {
+      this.entries.shift();
+    }
+    this.entries.push(entry);
+  }
+}
+export class TextSelectionPlugin {
+  /**
+   * @param {'lr' | 'rl'} pageProgression In the future this should be in the ocr file
+   * since a book being right to left doesn't mean the ocr is right to left. But for
+   * now we do make that assumption.
+   */
+  constructor() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_OPTIONS;
+    var optionVariables = arguments.length > 1 ? arguments[1] : undefined;
+    var pageProgression = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'lr';
+    /**
+     * @param {'started' | 'cleared'} type
+     * @param {HTMLElement} target
+     */
+    _defineProperty(this, "_onSelectionChange", (type, target) => {
+      if (type === 'started') {
+        this.textSelectingMode(target);
+      } else if (type === 'cleared') {
+        this.defaultMode(target);
+      } else {
+        throw new Error("Unknown type ".concat(type));
+      }
+    });
+    this.options = options;
+    this.optionVariables = optionVariables;
+    /**@type {PromiseLike<JQuery<HTMLElement>|undefined>} */
+    this.djvuPagesPromise = null;
+    /** Whether the book is right-to-left */
+    this.rtl = pageProgression === 'rl';
+
+    /** @type {Cache<{index: number, response: any}>} */
+    this.pageTextCache = new Cache();
+
+    /**
+     * Sometimes there are too many words on a page, and the browser becomes near
+     * unusable. For now don't render text layer for pages with too many words.
+     */
+    this.maxWordRendered = 2500;
+    this.selectionObserver = new SelectionObserver('.BRtextLayer', this._onSelectionChange);
+  }
+  init() {
+    this.selectionObserver.attach();
+
+    // Only fetch the full djvu xml if the single page url isn't there
+    if (this.options.singlePageDjvuXmlUrl) return;
+    this.djvuPagesPromise = $.ajax({
+      type: "GET",
+      url: applyVariables(this.options.fullDjvuXmlUrl, this.optionVariables),
+      dataType: this.options.jsonp ? "jsonp" : "html",
+      cache: true,
+      xhrFields: {
+        withCredentials: window.br.protected
+      },
+      error: e => undefined
+    }).then(res => {
+      try {
+        var xmlMap = $.parseXML(res);
+        return xmlMap && $(xmlMap).find("OBJECT");
+      } catch (e) {
+        return undefined;
+      }
+    });
+  }
+
+  /**
+   * @param {number} index
+   * @returns {Promise<HTMLElement|undefined>}
+   */
+  getPageText(index) {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      if (_this.options.singlePageDjvuXmlUrl) {
+        var cachedEntry = _this.pageTextCache.entries.find(x => x.index == index);
+        if (cachedEntry) {
+          return cachedEntry.response;
+        }
+        var res = yield $.ajax({
+          type: "GET",
+          url: applyVariables(_this.options.singlePageDjvuXmlUrl, _this.optionVariables, {
+            pageIndex: index
+          }),
+          dataType: _this.options.jsonp ? "jsonp" : "html",
+          cache: true,
+          xhrFields: {
+            withCredentials: window.br.protected
+          },
+          error: e => undefined
+        });
+        try {
+          var xmlDoc = $.parseXML(res);
+          var result = xmlDoc && $(xmlDoc).find("OBJECT")[0];
+          _this.pageTextCache.add({
+            index,
+            response: result
+          });
+          return result;
+        } catch (e) {
+          return undefined;
+        }
+      } else {
+        var XMLpagesArr = yield _this.djvuPagesPromise;
+        if (XMLpagesArr) return XMLpagesArr[index];
+      }
+    })();
+  }
+
+  /**
+   * Intercept copied text to remove any styling applied to it
+   * @param {JQuery} $container
+   */
+  interceptCopy($container) {
+    $container[0].addEventListener('copy', event => {
+      var selection = document.getSelection();
+      event.clipboardData.setData('text/plain', selection.toString());
+      event.preventDefault();
+    });
+  }
+
+  /**
+   * Applies mouse events when in default mode
+   * @param {HTMLElement} textLayer
+   */
+  defaultMode(textLayer) {
+    var $pageContainer = $(textLayer).closest('.BRpagecontainer');
+    textLayer.style.pointerEvents = "none";
+    $pageContainer.find("img").css("pointer-events", "auto");
+    $(textLayer).off(".textSelectPluginHandler");
+    var startedMouseDown = this.mouseIsDown;
+    var skipNextMouseup = this.mouseIsDown;
+    if (startedMouseDown) {
+      textLayer.style.pointerEvents = "auto";
+    }
+
+    // Need to stop propagation to prevent DragScrollable from
+    // blocking selection
+    $(textLayer).on("mousedown.textSelectPluginHandler", event => {
+      this.mouseIsDown = true;
+      if ($(event.target).is(".BRwordElement, .BRspace")) {
+        event.stopPropagation();
+      }
+    });
+    $(textLayer).on("mouseup.textSelectPluginHandler", event => {
+      this.mouseIsDown = false;
+      textLayer.style.pointerEvents = "none";
+      if (skipNextMouseup) {
+        skipNextMouseup = false;
+        event.stopPropagation();
+      }
+    });
+  }
+
+  /**
+   * This mode is active while there is a selection on the given textLayer
+   * @param {HTMLElement} textLayer
+   */
+  textSelectingMode(textLayer) {
+    var $pageContainer = $(textLayer).closest('.BRpagecontainer');
+    // Make text layer consume all events
+    textLayer.style.pointerEvents = "all";
+    // Block img from getting long-press to save while selecting
+    $pageContainer.find("img").css("pointer-events", "none");
+    $(textLayer).off(".textSelectPluginHandler");
+    $(textLayer).on('mousedown.textSelectPluginHandler', event => {
+      this.mouseIsDown = true;
+      event.stopPropagation();
+    });
+
+    // Prevent page flip on click
+    $(textLayer).on('mouseup.textSelectPluginHandler', event => {
+      this.mouseIsDown = false;
+      event.stopPropagation();
+    });
+  }
+
+  /**
+   * Initializes text selection modes if there is a text layer on the page
+   * @param {JQuery} $container
+   */
+  stopPageFlip($container) {
+    /** @type {JQuery<HTMLElement>} */
+    var $textLayer = $container.find('.BRtextLayer');
+    if (!$textLayer.length) return;
+    $textLayer.each((i, s) => this.defaultMode(s));
+    this.interceptCopy($container);
+  }
+
+  /**
+   * @param {PageContainer} pageContainer
+   */
+  createTextLayer(pageContainer) {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      var pageIndex = pageContainer.page.index;
+      var $container = pageContainer.$container;
+      var $textLayers = $container.find('.BRtextLayer');
+      if ($textLayers.length) return;
+      var XMLpage = yield _this2.getPageText(pageIndex);
+      if (!XMLpage) return;
+      recursivelyAddCoords(XMLpage);
+      var totalWords = $(XMLpage).find("WORD").length;
+      if (totalWords > _this2.maxWordRendered) {
+        console.log("Page ".concat(pageIndex, " has too many words (").concat(totalWords, " > ").concat(_this2.maxWordRendered, "). Not rendering text layer."));
+        return;
+      }
+      var textLayer = createDIVPageLayer(pageContainer.page, 'BRtextLayer');
+      var ratioW = parseFloat(pageContainer.$container[0].style.width) / pageContainer.page.width;
+      var ratioH = parseFloat(pageContainer.$container[0].style.height) / pageContainer.page.height;
+      textLayer.style.transform = "scale(".concat(ratioW, ", ").concat(ratioH, ")");
+      textLayer.setAttribute("dir", _this2.rtl ? "rtl" : "ltr");
+      var ocrParagraphs = $(XMLpage).find("PARAGRAPH[coords]").toArray();
+      var paragEls = ocrParagraphs.map(p => {
+        var el = _this2.renderParagraph(p);
+        textLayer.appendChild(el);
+        return el;
+      });
+
+      // Fix up paragraph positions
+      var paragraphRects = determineRealRects(textLayer, '.BRparagraphElement');
+      var yAdded = 0;
+      for (var [ocrParagraph, paragEl] of zip(ocrParagraphs, paragEls)) {
+        var ocrParagBounds = $(ocrParagraph).attr("coords").split(",").map(parseFloat);
+        var realRect = paragraphRects.get(paragEl);
+        var [ocrLeft,, ocrRight, ocrTop] = ocrParagBounds;
+        var newStartMargin = _this2.rtl ? realRect.right - ocrRight : ocrLeft - realRect.left;
+        var newTop = ocrTop - (realRect.top + yAdded);
+        paragEl.style[_this2.rtl ? 'marginRight' : 'marginLeft'] = "".concat(newStartMargin, "px");
+        paragEl.style.marginTop = "".concat(newTop, "px");
+        yAdded += newTop;
+        textLayer.appendChild(paragEl);
+      }
+      $container.append(textLayer);
+      _this2.stopPageFlip($container);
+    })();
+  }
+
+  /**
+   * @param {HTMLElement} ocrParagraph
+   * @returns {HTMLParagraphElement}
+   */
+  renderParagraph(ocrParagraph) {
+    var paragEl = document.createElement('p');
+    paragEl.classList.add('BRparagraphElement');
+    var [paragLeft, paragBottom, paragRight, paragTop] = $(ocrParagraph).attr("coords").split(",").map(parseFloat);
+    var wordHeightArr = [];
+    var lines = $(ocrParagraph).find("LINE[coords]").toArray();
+    if (!lines.length) return paragEl;
+    for (var [prevLine, line, nextLine] of lookAroundWindow(genMap(lines, augmentLine))) {
+      var isLastLineOfParagraph = line.ocrElement == lines[lines.length - 1];
+      var lineEl = document.createElement('span');
+      lineEl.classList.add('BRlineElement');
+      for (var [wordIndex, currWord] of line.words.entries()) {
+        var [, bottom, right, top] = $(currWord).attr("coords").split(',').map(parseFloat);
+        var wordHeight = bottom - top;
+        wordHeightArr.push(wordHeight);
+        if (wordIndex == 0 && prevLine !== null && prevLine !== void 0 && prevLine.lastWord.textContent.trim().endsWith('-')) {
+          // ideally prefer the next line to determine the left position,
+          // since the previous line could be the first line of the paragraph
+          // and hence have an incorrectly indented first word.
+          // E.g. https://archive.org/details/driitaleofdaring00bachuoft/page/360/mode/2up
+          var [newLeft,,,] = $((nextLine || prevLine).firstWord).attr("coords").split(',').map(parseFloat);
+          $(currWord).attr("coords", "".concat(newLeft, ",").concat(bottom, ",").concat(right, ",").concat(top));
+        }
+        var wordEl = document.createElement('span');
+        wordEl.setAttribute("class", "BRwordElement");
+        wordEl.textContent = currWord.textContent.trim();
+        if (wordIndex > 0) {
+          var space = document.createElement('span');
+          space.classList.add('BRspace');
+          space.textContent = ' ';
+          lineEl.append(space);
+
+          // Edge ignores empty elements (like BRspace), so add another
+          // space to ensure Edge's ReadAloud works correctly.
+          lineEl.appendChild(document.createTextNode(' '));
+        }
+        lineEl.appendChild(wordEl);
+      }
+      var hasHyphen = line.lastWord.textContent.trim().endsWith('-');
+      var lastWordEl = lineEl.children[lineEl.children.length - 1];
+      if (hasHyphen && !isLastLineOfParagraph) {
+        lastWordEl.textContent = lastWordEl.textContent.trim().slice(0, -1);
+        lastWordEl.classList.add('BRwordElement--hyphen');
+      }
+      paragEl.appendChild(lineEl);
+      if (!isLastLineOfParagraph && !hasHyphen) {
+        // Edge does not correctly have spaces between the lines.
+        paragEl.appendChild(document.createTextNode(' '));
+      }
+    }
+    wordHeightArr.sort((a, b) => a - b);
+    var paragWordHeight = wordHeightArr[Math.floor(wordHeightArr.length * 0.85)] + 4;
+    paragEl.style.left = "".concat(paragLeft, "px");
+    paragEl.style.top = "".concat(paragTop, "px");
+    paragEl.style.width = "".concat(paragRight - paragLeft, "px");
+    paragEl.style.height = "".concat(paragBottom - paragTop, "px");
+    paragEl.style.fontSize = "".concat(paragWordHeight, "px");
+
+    // Fix up sizes - stretch/crush words as necessary using letter spacing
+    var wordRects = determineRealRects(paragEl, '.BRwordElement');
+    var ocrWords = $(ocrParagraph).find("WORD").toArray();
+    var wordEls = paragEl.querySelectorAll('.BRwordElement');
+    for (var [ocrWord, _wordEl] of zip(ocrWords, wordEls)) {
+      var realRect = wordRects.get(_wordEl);
+      var [left,, _right] = $(ocrWord).attr("coords").split(',').map(parseFloat);
+      var ocrWidth = _right - left;
+      // Some books (eg theworksofplato01platiala) have a space _inside_ the <WORD>
+      // element. That makes it impossible to determine the correct positining
+      // of everything, but to avoid the BRspace's being width 0, which makes selection
+      // janky on Chrome Android, assume the space is the same width as one of the
+      // letters.
+      if (ocrWord.textContent.endsWith(' ')) {
+        ocrWidth = ocrWidth * (ocrWord.textContent.length - 1) / ocrWord.textContent.length;
+      }
+      var diff = ocrWidth - realRect.width;
+      _wordEl.style.letterSpacing = "".concat(diff / (ocrWord.textContent.length - 1), "px");
+    }
+
+    // Stretch/crush lines as necessary using line spacing
+    // Recompute rects after letter spacing
+    wordRects = determineRealRects(paragEl, '.BRwordElement');
+    var spaceRects = determineRealRects(paragEl, '.BRspace');
+    var ocrLines = $(ocrParagraph).find("LINE[coords]").toArray();
+    var lineEls = Array.from(paragEl.querySelectorAll('.BRlineElement'));
+    var ySoFar = paragTop;
+    for (var [ocrLine, _lineEl] of zip(ocrLines, lineEls)) {
+      // shift words using marginLeft to align with the correct x position
+      var words = $(ocrLine).find("WORD").toArray();
+      // const ocrLineLeft = Math.min(...words.map(w => parseFloat($(w).attr("coords").split(',')[0])));
+      var xSoFar = this.rtl ? paragRight : paragLeft;
+      for (var [_ocrWord, _wordEl2] of zip(words, _lineEl.querySelectorAll('.BRwordElement'))) {
+        // start of line, need to compute the offset relative to the OCR words
+        var wordRect = wordRects.get(_wordEl2);
+        var [ocrLeft,, ocrRight] = $(_ocrWord).attr("coords").split(',').map(parseFloat);
+        var _diff = this.rtl ? -(ocrRight - xSoFar) : ocrLeft - xSoFar;
+        if (_wordEl2.previousElementSibling) {
+          var _space = _wordEl2.previousElementSibling;
+          _space.style.letterSpacing = "".concat(_diff - spaceRects.get(_space).width, "px");
+        } else {
+          _wordEl2.style[this.rtl ? 'paddingRight' : 'paddingLeft'] = "".concat(_diff, "px");
+        }
+        if (this.rtl) xSoFar -= _diff + wordRect.width;else xSoFar += _diff + wordRect.width;
+      }
+      // And also fix y position
+      var ocrLineTop = Math.min(...words.map(w => parseFloat($(w).attr("coords").split(',')[3])));
+      var _diff2 = ocrLineTop - ySoFar;
+      if (_lineEl.previousElementSibling) {
+        _lineEl.previousElementSibling.style.lineHeight = "".concat(_diff2, "px");
+        ySoFar += _diff2;
+      }
+    }
+
+    // The last line will have a line height subtracting from the paragraph height
+    lineEls[lineEls.length - 1].style.lineHeight = "".concat(paragBottom - ySoFar, "px");
+
+    // Edge does not include a newline for some reason when copying/pasting the <p> els
+    paragEl.appendChild(document.createElement('br'));
+    return paragEl;
+  }
+}
+export class BookreaderWithTextSelection extends BookReader {
+  init() {
+    var options = Object.assign({}, DEFAULT_OPTIONS, this.options.plugins.textSelection);
+    if (options.enabled) {
+      this.textSelectionPlugin = new TextSelectionPlugin(options, this.options.vars, this.pageProgression);
+      // Write this back; this way the plugin is the source of truth, and BR just
+      // contains a reference to it.
+      this.options.plugins.textSelection = options;
+      this.textSelectionPlugin.init();
+      new SelectionObserver('.BRtextLayer', selectEvent => {
+        // Track how often selection is used
+        if (selectEvent == 'started') {
+          var _this$archiveAnalytic;
+          (_this$archiveAnalytic = this.archiveAnalyticsSendEvent) === null || _this$archiveAnalytic === void 0 || _this$archiveAnalytic.call(this, 'BookReader', 'SelectStart');
+
+          // Set a class on the page to avoid hiding it when zooming/etc
+          this.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
+          $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
+        }
+      }).attach();
+    }
+    super.init();
+  }
+
+  /**
+   * @param {number} index
+   */
+  _createPageContainer(index) {
+    var pageContainer = super._createPageContainer(index);
+    // Disable if thumb mode; it's too janky
+    // .page can be null for "pre-cover" region
+    if (this.mode !== this.constModeThumb && pageContainer.page) {
+      var _this$textSelectionPl;
+      (_this$textSelectionPl = this.textSelectionPlugin) === null || _this$textSelectionPl === void 0 || _this$textSelectionPl.createTextLayer(pageContainer);
+    }
+    return pageContainer;
+  }
+}
+window.BookReader = BookreaderWithTextSelection;
+export default BookreaderWithTextSelection;
+
+/**
+ * @param {HTMLElement} parentEl
+ * @param {string} selector
+ * @returns {Map<Element, Rect>}
+ */
+function determineRealRects(parentEl, selector) {
+  var initals = {
+    position: parentEl.style.position,
+    visibility: parentEl.style.visibility,
+    top: parentEl.style.top,
+    left: parentEl.style.left,
+    transform: parentEl.style.transform
+  };
+  parentEl.style.position = 'absolute';
+  parentEl.style.visibility = 'hidden';
+  parentEl.style.top = '0';
+  parentEl.style.left = '0';
+  parentEl.style.transform = 'none';
+  document.body.appendChild(parentEl);
+  var rects = new Map(Array.from(parentEl.querySelectorAll(selector)).map(wordEl => {
+    var origRect = wordEl.getBoundingClientRect();
+    return [wordEl, new Rect(origRect.left + window.scrollX, origRect.top + window.scrollY, origRect.width, origRect.height)];
+  }));
+  document.body.removeChild(parentEl);
+  Object.assign(parentEl.style, initals);
+  return rects;
+}
+
+/**
+ * @param {HTMLElement} line
+ */
+function augmentLine(line) {
+  var words = $(line).find("WORD").toArray();
+  return {
+    ocrElement: line,
+    words,
+    firstWord: words[0],
+    lastWord: words[words.length - 1]
+  };
+}
+
+/**
+ * @template TFrom, TTo
+ * Generator version of map
+ * @param {Iterable<TFrom>} gen
+ * @param {function(TFrom): TTo} fn
+ * @returns {Iterable<TTo>}
+ */
+export function* genMap(gen, fn) {
+  for (var x of gen) yield fn(x);
+}
+
+/**
+ * @template T
+ * Generator that provides a sliding window of 3 elements,
+ * prev, current, and next.
+ * @param {Iterable<T>} gen
+ * @returns {Iterable<[T | undefined, T, T | undefined]>}
+ */
+export function* lookAroundWindow(gen) {
+  var prev = undefined;
+  var cur = undefined;
+  var next = undefined;
+  for (var x of gen) {
+    if (typeof cur !== 'undefined') {
+      next = x;
+      yield [prev, cur, next];
+    }
+    prev = cur;
+    cur = x;
+    next = undefined;
+  }
+  if (typeof cur !== 'undefined') {
+    yield [prev, cur, next];
+  }
+}
+
+/**
+ * @template T1, T2
+ * Lazy zip implementation to avoid importing lodash
+ * Expects iterators to be of the same length
+ * @param {Iterable<T1>} gen1
+ * @param {Iterable<T2>} gen2
+ * @returns {Iterable<[T1, T2]>}
+ */
+export function* zip(gen1, gen2) {
+  var it1 = gen1[Symbol.iterator]();
+  var it2 = gen2[Symbol.iterator]();
+  while (true) {
+    var r1 = it1.next();
+    var r2 = it2.next();
+    if (r1.done && r2.done) {
+      return;
+    }
+    if (r1.done || r2.done) {
+      throw new Error('zip: one of the iterators is done');
+    }
+    yield [r1.value, r2.value];
+  }
+}
+
+/**
+ * [left, bottom, right, top]
+ * @param {Array<[number, number, number, number]>} bounds
+ * @returns {[number, number, number, number]}
+ */
+function determineBounds(bounds) {
+  var leftMost = Infinity;
+  var bottomMost = -Infinity;
+  var rightMost = -Infinity;
+  var topMost = Infinity;
+  for (var [left, bottom, right, top] of bounds) {
+    leftMost = Math.min(leftMost, left);
+    bottomMost = Math.max(bottomMost, bottom);
+    rightMost = Math.max(rightMost, right);
+    topMost = Math.min(topMost, top);
+  }
+  return [leftMost, bottomMost, rightMost, topMost];
+}
+
+/**
+ * Recursively traverses the XML tree and adds coords
+ * which are the bounding box of all child coords
+ * @param {Element} xmlEl
+ */
+function recursivelyAddCoords(xmlEl) {
+  if ($(xmlEl).attr('coords') || !xmlEl.children) {
+    return;
+  }
+  var children = $(xmlEl).children().toArray();
+  if (children.length === 0) {
+    return;
+  }
+  for (var child of children) {
+    recursivelyAddCoords(child);
+  }
+  var childCoords = [];
+  for (var _child of children) {
+    if (!$(_child).attr('coords')) continue;
+    childCoords.push($(_child).attr('coords').split(',').map(parseFloat));
+  }
+  var boundingCoords = determineBounds(childCoords);
+  if (Math.abs(boundingCoords[0]) != Infinity) {
+    $(xmlEl).attr('coords', boundingCoords.join(','));
+  }
+}
+
+/**
+ * Basically a polyfill for the native DOMRect class
+ */
+class Rect {
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {number} width
+   * @param {number} height
+   */
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  get top() {
+    return this.y;
+  }
+  get left() {
+    return this.x;
+  }
+}