@famibee/skynovel 1.29.1 → 1.29.4

package/dist/app.js

@@ -772,29 +772,30 @@ function addStyle(style) {
   gs.innerHTML = css_key4del + style;
   document.getElementsByTagName("head")[0].appendChild(gs);
 }
-function argChk_Num(hash2, name, def) {
-  const v2 = hash2[name];
-  if (!(name in hash2)) {
+function argChk_Num(hash2, name2, def) {
+  const v2 = hash2[name2];
+  if (!(name2 in hash2)) {
     if (isNaN(def))
-      throw `[${hash2[":\u30BF\u30B0\u540D"]}]\u5C5E\u6027 ${name} \u306F\u5FC5\u9808\u3067\u3059`;
-    hash2[name] = def;
+      throw `[${hash2[":\u30BF\u30B0\u540D"]}]\u5C5E\u6027 ${name2} \u306F\u5FC5\u9808\u3067\u3059`;
+    hash2[name2] = def;
     return def;
   }
   const n = String(v2).slice(0, 2) === "0x" ? parseInt(v2) : parseFloat(v2);
   if (isNaN(n))
-    throw `[${hash2[":\u30BF\u30B0\u540D"]}]\u5C5E\u6027 ${name} \u306E\u5024\u3010${v2}\u3011\u304C\u6570\u5024\u3067\u306F\u3042\u308A\u307E\u305B\u3093`;
-  return hash2[name] = n;
+    throw `[${hash2[":\u30BF\u30B0\u540D"]}]\u5C5E\u6027 ${name2} \u306E\u5024\u3010${v2}\u3011\u304C\u6570\u5024\u3067\u306F\u3042\u308A\u307E\u305B\u3093`;
+  return hash2[name2] = n;
 }
-function argChk_Boolean(hash2, name, def) {
-  if (!(name in hash2))
-    return hash2[name] = def;
-  const v2 = hash2[name];
+function argChk_Boolean(hash2, name2, def) {
+  if (!(name2 in hash2))
+    return hash2[name2] = def;
+  const v2 = hash2[name2];
   if (v2 === null)
     return false;
   const v22 = String(v2);
-  return hash2[name] = v22 === "false" ? false : Boolean(v22);
+  return hash2[name2] = v22 === "false" ? false : Boolean(v22);
 }
 function parseColor(v2) {
+  console.log(`fn:CmnLib.ts line:152 v:%o`, v2);
   if (v2.charAt(0) === "#")
     return parseInt(v2.slice(1), 16);
   const n = Number(v2);
@@ -808,11 +809,11 @@ function parseColor(v2) {
     throw `\u8272\u540D\u524D ${v2} \u304C\u7570\u5E38\u3067\u3059`;
   return parseInt(cc.slice(1), 16);
 }
-function argChk_Color(hash2, name, def) {
-  const v2 = hash2[name];
+function argChk_Color(hash2, name2, def) {
+  const v2 = hash2[name2];
   if (!v2)
-    return hash2[name] = def;
-  return hash2[name] = parseColor(String(v2));
+    return hash2[name2] = def;
+  return hash2[name2] = parseColor(String(v2));
 }
 const REG_FN = /^[^\/\.]+$|[^\/]+(?=\.)/;
 function getFn(p) {
@@ -829,10 +830,10 @@ class CmnLib {
 CmnLib.stageW = 0;
 CmnLib.stageH = 0;
 CmnLib.debugLog = false;
-CmnLib.isSafari = platform.name === "Safari";
-CmnLib.isFirefox = platform.name === "Firefox";
-CmnLib.isMac = new RegExp("OS X").test((_b2 = (_a2 = platform.os) == null ? void 0 : _a2.family) != null ? _b2 : "");
-CmnLib.isMobile = !new RegExp("(Windows|OS X)").test((_d = (_c2 = platform.os) == null ? void 0 : _c2.family) != null ? _d : "");
+CmnLib.isSafari = platform$1.exports.name === "Safari";
+CmnLib.isFirefox = platform$1.exports.name === "Firefox";
+CmnLib.isMac = new RegExp("OS X").test((_b2 = (_a2 = platform$1.exports.os) == null ? void 0 : _a2.family) != null ? _b2 : "");
+CmnLib.isMobile = !new RegExp("(Windows|OS X)").test((_d = (_c2 = platform$1.exports.os) == null ? void 0 : _c2.family) != null ? _d : "");
 CmnLib.hDip = {};
 CmnLib.isDbg = false;
 CmnLib.isPackaged = false;
@@ -3060,9 +3061,7 @@ const _SysBase = class {
       addLayCls: () => {
       },
       searchPath: () => "",
-      getVal: () => {
-        return {};
-      },
+      getVal: () => ({}),
       resume: () => {
       },
       render: () => {
@@ -3412,7 +3411,6 @@ const _Config = class {
     this.sys = sys;
     this.oCfg = {
       save_ns: "",
-      coder: { len: 864 },
       window: {
         width: 300,
         height: 300
@@ -3428,7 +3426,7 @@ const _Config = class {
       },
       log: { max_len: 1024 },
       init: {
-        bg_color: 0,
+        bg_color: "#000000",
         tagch_msecwait: 10,
         auto_msecpagewait: 3500,
         escape: ""
@@ -3461,15 +3459,13 @@ const _Config = class {
     return c2;
   }
   async load(oCfg) {
-    var _a3, _b3, _c3, _d2, _e, _f, _g, _h, _i;
+    var _a3, _b3, _c3, _d2, _e, _f, _g, _h;
     this.oCfg.save_ns = (_a3 = oCfg == null ? void 0 : oCfg.save_ns) != null ? _a3 : this.oCfg.save_ns;
-    this.oCfg.coder = (_b3 = oCfg == null ? void 0 : oCfg.coder) != null ? _b3 : this.oCfg.coder;
-    CmnLib.stageW = this.oCfg.window.width = Number((_d2 = (_c3 = oCfg == null ? void 0 : oCfg.window) == null ? void 0 : _c3.width) != null ? _d2 : this.oCfg.window.width);
-    CmnLib.stageH = this.oCfg.window.height = Number((_f = (_e = oCfg == null ? void 0 : oCfg.window) == null ? void 0 : _e.height) != null ? _f : this.oCfg.window.height);
+    CmnLib.stageW = this.oCfg.window.width = Number((_c3 = (_b3 = oCfg == null ? void 0 : oCfg.window) == null ? void 0 : _b3.width) != null ? _c3 : this.oCfg.window.width);
+    CmnLib.stageH = this.oCfg.window.height = Number((_e = (_d2 = oCfg == null ? void 0 : oCfg.window) == null ? void 0 : _d2.height) != null ? _e : this.oCfg.window.height);
     this.oCfg.book = __spreadValues(__spreadValues({}, this.oCfg.book), oCfg.book);
-    this.oCfg.log.max_len = (_i = (_h = (_g = oCfg.log) == null ? void 0 : _g.max_len) == null ? void 0 : _h.max_len) != null ? _i : this.oCfg.log.max_len;
+    this.oCfg.log.max_len = (_h = (_g = (_f = oCfg.log) == null ? void 0 : _f.max_len) == null ? void 0 : _g.max_len) != null ? _h : this.oCfg.log.max_len;
     this.oCfg.init = __spreadValues(__spreadValues({}, this.oCfg.init), oCfg.init);
-    this.oCfg.init.bg_color = parseColor(String(this.oCfg.init.bg_color));
     this.oCfg.debug = __spreadValues(__spreadValues({}, this.oCfg.debug), oCfg.debug);
     CmnLib.debugLog = this.oCfg.debug.debugLog;
     this.oCfg.debuger_token = oCfg.debuger_token;
@@ -6361,13 +6357,13 @@ function isMobile$1(param) {
   return result;
 }
 /*!
- * @pixi/settings - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/settings - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/settings is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
  */
-var isMobile = isMobile$1(self.navigator);
+var isMobile = isMobile$1(globalThis.navigator);
 function maxRecommendedTextures(max) {
   var allowMax = true;
   if (isMobile.tablet || isMobile.phone) {
@@ -6396,8 +6392,8 @@ function canUploadSameBuffer() {
   return !isMobile.apple.device;
 }
 /*!
- * @pixi/constants - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/constants - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/constants is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -6619,8 +6615,8 @@ var settings = {
   ROUND_PIXELS: false
 };
 /*!
- * @pixi/constants - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/constants - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/constants is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -7449,8 +7445,8 @@ earcut.flatten = function(data) {
 };
 var earcut$1 = earcut$2.exports;
 /*!
- * @pixi/utils - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/utils - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/utils is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -7463,7 +7459,7 @@ var url = {
 settings.RETINA_PREFIX = /@([0-9\.]+)x/;
 settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false;
 var saidHello = false;
-var VERSION = "6.2.2";
+var VERSION = "6.3.0";
 function skipHello() {
   saidHello = true;
 }
@@ -7485,9 +7481,9 @@ function sayHello(type) {
       "color: #ff2424; background: #fff; padding:5px 0;",
       "color: #ff2424; background: #fff; padding:5px 0;"
     ];
-    (_a3 = self.console).log.apply(_a3, args);
-  } else if (self.console) {
-    self.console.log("PixiJS " + VERSION + " - " + type + " - http://www.pixijs.com/");
+    (_a3 = globalThis.console).log.apply(_a3, args);
+  } else if (globalThis.console) {
+    globalThis.console.log("PixiJS " + VERSION + " - " + type + " - http://www.pixijs.com/");
   }
   saidHello = true;
 }
@@ -7500,7 +7496,7 @@ function isWebGLSupported() {
         failIfMajorPerformanceCaveat: settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT
       };
       try {
-        if (!self.WebGLRenderingContext) {
+        if (!globalThis.WebGLRenderingContext) {
           return false;
         }
         var canvas2 = document.createElement("canvas");
@@ -7830,14 +7826,14 @@ function hex2rgb(hex, out) {
 }
 function hex2string(hex) {
   var hexString = hex.toString(16);
-  hexString = "000000".substr(0, 6 - hexString.length) + hexString;
+  hexString = "000000".substring(0, 6 - hexString.length) + hexString;
   return "#" + hexString;
 }
 function string2hex(string) {
   if (typeof string === "string") {
     string = cssColorNames[string.toLowerCase()] || string;
     if (string[0] === "#") {
-      string = string.substr(1);
+      string = string.slice(1);
     }
   }
   return parseInt(string, 16);
@@ -8126,12 +8122,12 @@ function trimCanvas(canvas2) {
 var tempAnchor$1;
 function determineCrossOrigin(url$12, loc) {
   if (loc === void 0) {
-    loc = self.location;
+    loc = globalThis.location;
   }
   if (url$12.indexOf("data:") === 0) {
     return "";
   }
-  loc = loc || self.location;
+  loc = loc || globalThis.location;
   if (!tempAnchor$1) {
     tempAnchor$1 = document.createElement("a");
   }
@@ -8151,8 +8147,8 @@ function getResolutionOfUrl(url2, defaultValue2) {
   return defaultValue2 !== void 0 ? defaultValue2 : 1;
 }
 /*!
- * @pixi/runner - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/runner - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/runner is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -8233,8 +8229,8 @@ Object.defineProperties(Runner.prototype, {
   run: { value: Runner.prototype.emit }
 });
 /*!
- * @pixi/ticker - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/ticker - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/ticker is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -8590,8 +8586,8 @@ var TickerPlugin = function() {
   return TickerPlugin2;
 }();
 /*!
- * @pixi/math - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/math - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/math is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -8607,6 +8603,50 @@ var SHAPES;
   SHAPES2[SHAPES2["ELIP"] = 3] = "ELIP";
   SHAPES2[SHAPES2["RREC"] = 4] = "RREC";
 })(SHAPES || (SHAPES = {}));
+var Point = function() {
+  function Point2(x, y2) {
+    if (x === void 0) {
+      x = 0;
+    }
+    if (y2 === void 0) {
+      y2 = 0;
+    }
+    this.x = 0;
+    this.y = 0;
+    this.x = x;
+    this.y = y2;
+  }
+  Point2.prototype.clone = function() {
+    return new Point2(this.x, this.y);
+  };
+  Point2.prototype.copyFrom = function(p) {
+    this.set(p.x, p.y);
+    return this;
+  };
+  Point2.prototype.copyTo = function(p) {
+    p.set(this.x, this.y);
+    return p;
+  };
+  Point2.prototype.equals = function(p) {
+    return p.x === this.x && p.y === this.y;
+  };
+  Point2.prototype.set = function(x, y2) {
+    if (x === void 0) {
+      x = 0;
+    }
+    if (y2 === void 0) {
+      y2 = x;
+    }
+    this.x = x;
+    this.y = y2;
+    return this;
+  };
+  Point2.prototype.toString = function() {
+    return "[@pixi/math:Point x=" + this.x + " y=" + this.y + "]";
+  };
+  return Point2;
+}();
+var tempPoints$1 = [new Point(), new Point(), new Point(), new Point()];
 var Rectangle = function() {
   function Rectangle2(x, y2, width, height) {
     if (x === void 0) {
@@ -8690,6 +8730,62 @@ var Rectangle = function() {
     }
     return false;
   };
+  Rectangle2.prototype.intersects = function(other, transform) {
+    if (!transform) {
+      var x0_1 = this.x < other.x ? other.x : this.x;
+      var x1_1 = this.right > other.right ? other.right : this.right;
+      if (x1_1 <= x0_1) {
+        return false;
+      }
+      var y0_1 = this.y < other.y ? other.y : this.y;
+      var y1_1 = this.bottom > other.bottom ? other.bottom : this.bottom;
+      return y1_1 > y0_1;
+    }
+    var x0 = this.left;
+    var x1 = this.right;
+    var y0 = this.top;
+    var y1 = this.bottom;
+    if (x1 <= x0 || y1 <= y0) {
+      return false;
+    }
+    var lt = tempPoints$1[0].set(other.left, other.top);
+    var lb = tempPoints$1[1].set(other.left, other.bottom);
+    var rt = tempPoints$1[2].set(other.right, other.top);
+    var rb = tempPoints$1[3].set(other.right, other.bottom);
+    if (rt.x <= lt.x || lb.y <= lt.y) {
+      return false;
+    }
+    var s2 = Math.sign(transform.a * transform.d - transform.b * transform.c);
+    if (s2 === 0) {
+      return false;
+    }
+    transform.apply(lt, lt);
+    transform.apply(lb, lb);
+    transform.apply(rt, rt);
+    transform.apply(rb, rb);
+    if (Math.max(lt.x, lb.x, rt.x, rb.x) <= x0 || Math.min(lt.x, lb.x, rt.x, rb.x) >= x1 || Math.max(lt.y, lb.y, rt.y, rb.y) <= y0 || Math.min(lt.y, lb.y, rt.y, rb.y) >= y1) {
+      return false;
+    }
+    var nx = s2 * (lb.y - lt.y);
+    var ny = s2 * (lt.x - lb.x);
+    var n00 = nx * x0 + ny * y0;
+    var n10 = nx * x1 + ny * y0;
+    var n01 = nx * x0 + ny * y1;
+    var n11 = nx * x1 + ny * y1;
+    if (Math.max(n00, n10, n01, n11) <= nx * lt.x + ny * lt.y || Math.min(n00, n10, n01, n11) >= nx * rb.x + ny * rb.y) {
+      return false;
+    }
+    var mx = s2 * (lt.y - rt.y);
+    var my = s2 * (rt.x - lt.x);
+    var m00 = mx * x0 + my * y0;
+    var m10 = mx * x1 + my * y0;
+    var m01 = mx * x0 + my * y1;
+    var m11 = mx * x1 + my * y1;
+    if (Math.max(m00, m10, m01, m11) <= mx * lt.x + my * lt.y || Math.min(m00, m10, m01, m11) >= mx * rb.x + my * rb.y) {
+      return false;
+    }
+    return true;
+  };
   Rectangle2.prototype.pad = function(paddingX, paddingY) {
     if (paddingX === void 0) {
       paddingX = 0;
@@ -8935,49 +9031,6 @@ var RoundedRectangle = function() {
   };
   return RoundedRectangle2;
 }();
-var Point = function() {
-  function Point2(x, y2) {
-    if (x === void 0) {
-      x = 0;
-    }
-    if (y2 === void 0) {
-      y2 = 0;
-    }
-    this.x = 0;
-    this.y = 0;
-    this.x = x;
-    this.y = y2;
-  }
-  Point2.prototype.clone = function() {
-    return new Point2(this.x, this.y);
-  };
-  Point2.prototype.copyFrom = function(p) {
-    this.set(p.x, p.y);
-    return this;
-  };
-  Point2.prototype.copyTo = function(p) {
-    p.set(this.x, this.y);
-    return p;
-  };
-  Point2.prototype.equals = function(p) {
-    return p.x === this.x && p.y === this.y;
-  };
-  Point2.prototype.set = function(x, y2) {
-    if (x === void 0) {
-      x = 0;
-    }
-    if (y2 === void 0) {
-      y2 = x;
-    }
-    this.x = x;
-    this.y = y2;
-    return this;
-  };
-  Point2.prototype.toString = function() {
-    return "[@pixi/math:Point x=" + this.x + " y=" + this.y + "]";
-  };
-  return Point2;
-}();
 var ObservablePoint = function() {
   function ObservablePoint2(cb, scope, x, y2) {
     if (x === void 0) {
@@ -9506,8 +9559,8 @@ var Transform = function() {
   return Transform2;
 }();
 /*!
- * @pixi/core - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/core - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/core is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -9567,8 +9620,8 @@ function __extends$q(d2, b2) {
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-var __assign$7 = function() {
-  __assign$7 = Object.assign || function __assign2(t) {
+var __assign$8 = function() {
+  __assign$8 = Object.assign || function __assign2(t) {
     var arguments$1 = arguments;
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
       s2 = arguments$1[i2];
@@ -9580,7 +9633,7 @@ var __assign$7 = function() {
     }
     return t;
   };
-  return __assign$7.apply(this, arguments);
+  return __assign$8.apply(this, arguments);
 };
 function __rest$3(s2, e) {
   var t = {};
@@ -10146,6 +10199,15 @@ var BaseImageResource = function(_super) {
     var width = baseTexture.realWidth;
     var height = baseTexture.realHeight;
     source = source || this.source;
+    if (source instanceof HTMLImageElement) {
+      if (!source.complete || source.naturalWidth === 0) {
+        return false;
+      }
+    } else if (source instanceof HTMLVideoElement) {
+      if (source.readyState <= 1) {
+        return false;
+      }
+    }
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.alphaMode === ALPHA_MODES$3.UNPACK);
     if (!this.noSubImage && baseTexture.target === gl.TEXTURE_2D && glTexture.width === width && glTexture.height === height) {
       gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, glTexture.type, source);
@@ -10177,11 +10239,11 @@ var CanvasResource = function(_super) {
     return _super.call(this, source) || this;
   }
   CanvasResource2.test = function(source) {
-    var OffscreenCanvas2 = self.OffscreenCanvas;
+    var OffscreenCanvas2 = globalThis.OffscreenCanvas;
     if (OffscreenCanvas2 && source instanceof OffscreenCanvas2) {
       return true;
     }
-    return self.HTMLCanvasElement && source instanceof HTMLCanvasElement;
+    return globalThis.HTMLCanvasElement && source instanceof HTMLCanvasElement;
   };
   return CanvasResource2;
 }(BaseImageResource);
@@ -10272,7 +10334,7 @@ var ImageResource = function(_super) {
     _this.url = source.src;
     _this._process = null;
     _this.preserveBitmap = false;
-    _this.createBitmap = (options.createBitmap !== void 0 ? options.createBitmap : settings.CREATE_IMAGE_BITMAP) && !!self.createImageBitmap;
+    _this.createBitmap = (options.createBitmap !== void 0 ? options.createBitmap : settings.CREATE_IMAGE_BITMAP) && !!globalThis.createImageBitmap;
     _this.alphaMode = typeof options.alphaMode === "number" ? options.alphaMode : null;
     _this.bitmap = null;
     _this._load = null;
@@ -10324,10 +10386,10 @@ var ImageResource = function(_super) {
     if (this._process !== null) {
       return this._process;
     }
-    if (this.bitmap !== null || !self.createImageBitmap) {
+    if (this.bitmap !== null || !globalThis.createImageBitmap) {
       return Promise.resolve(this);
     }
-    var createImageBitmap = self.createImageBitmap;
+    var createImageBitmap = globalThis.createImageBitmap;
     var cors = !source.crossOrigin || source.crossOrigin === "anonymous";
     this._process = fetch(source.src, {
       mode: cors ? "cors" : "no-cors"
@@ -10516,7 +10578,7 @@ var VideoResource = function(_super) {
         var _a3 = source[i2], src = _a3.src, mime = _a3.mime;
         src = src || source[i2];
         var baseSrc = src.split("?").shift().toLowerCase();
-        var ext = baseSrc.substr(baseSrc.lastIndexOf(".") + 1);
+        var ext = baseSrc.slice(baseSrc.lastIndexOf(".") + 1);
         mime = mime || VideoResource2.MIME_TYPES[ext] || "video/" + ext;
         sourceElement.src = src;
         sourceElement.type = mime;
@@ -10667,7 +10729,7 @@ var VideoResource = function(_super) {
     configurable: true
   });
   VideoResource2.test = function(source, extension) {
-    return self.HTMLVideoElement && source instanceof HTMLVideoElement || VideoResource2.TYPES.indexOf(extension) > -1;
+    return globalThis.HTMLVideoElement && source instanceof HTMLVideoElement || VideoResource2.TYPES.indexOf(extension) > -1;
   };
   VideoResource2.TYPES = ["mp4", "m4v", "webm", "ogg", "ogv", "h264", "avi", "mov"];
   VideoResource2.MIME_TYPES = {
@@ -10683,7 +10745,7 @@ var ImageBitmapResource = function(_super) {
     return _super.call(this, source) || this;
   }
   ImageBitmapResource2.test = function(source) {
-    return !!self.createImageBitmap && source instanceof ImageBitmap;
+    return !!globalThis.createImageBitmap && source instanceof ImageBitmap;
   };
   return ImageBitmapResource2;
 }(BaseImageResource);
@@ -10824,6 +10886,9 @@ var Framebuffer = function() {
 var BaseRenderTexture = function(_super) {
   __extends$q(BaseRenderTexture2, _super);
   function BaseRenderTexture2(options) {
+    if (options === void 0) {
+      options = {};
+    }
     var _this = this;
     if (typeof options === "number") {
       var width = arguments[0];
@@ -11321,8 +11386,8 @@ var RenderTexturePool = function() {
       multisample = MSAA_QUALITY$3.NONE;
     }
     var key;
-    minWidth = Math.ceil(minWidth * resolution);
-    minHeight = Math.ceil(minHeight * resolution);
+    minWidth = Math.ceil(minWidth * resolution - 1e-6);
+    minHeight = Math.ceil(minHeight * resolution - 1e-6);
     if (!this.enableFullScreen || minWidth !== this._pixelsWidth || minHeight !== this._pixelsHeight) {
       minWidth = nextPow2(minWidth);
       minHeight = nextPow2(minHeight);
@@ -12305,7 +12370,7 @@ var ContextSystem = function() {
   };
   ContextSystem2.prototype.validateContext = function(gl) {
     var attributes = gl.getContextAttributes();
-    var isWebGl2 = "WebGL2RenderingContext" in self && gl instanceof self.WebGL2RenderingContext;
+    var isWebGl2 = "WebGL2RenderingContext" in globalThis && gl instanceof globalThis.WebGL2RenderingContext;
     if (isWebGl2) {
       this.webGLVersion = 2;
     }
@@ -12624,7 +12689,7 @@ var FramebufferSystem = function() {
     var sameSize = sourcePixels.width === destPixels.width && sourcePixels.height === destPixels.height;
     this.bind(framebuffer);
     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo.framebuffer);
-    gl.blitFramebuffer(sourcePixels.x, sourcePixels.y, sourcePixels.width, sourcePixels.height, destPixels.x, destPixels.y, destPixels.width, destPixels.height, gl.COLOR_BUFFER_BIT, sameSize ? gl.NEAREST : gl.LINEAR);
+    gl.blitFramebuffer(sourcePixels.left, sourcePixels.top, sourcePixels.right, sourcePixels.bottom, destPixels.left, destPixels.top, destPixels.right, destPixels.bottom, gl.COLOR_BUFFER_BIT, sameSize ? gl.NEAREST : gl.LINEAR);
   };
   FramebufferSystem2.prototype.disposeFramebuffer = function(framebuffer, contextLost) {
     var fbo = framebuffer.glFramebuffers[this.CONTEXT_UID];
@@ -14902,7 +14967,7 @@ var TextureGCSystem = function() {
 function mapTypeAndFormatToInternalFormat(gl) {
   var _a3, _b3, _c3, _d2, _e, _f, _g, _h, _j, _k, _l2, _m, _o, _p2, _q, _r2, _s, _t, _u, _v, _w, _x;
   var table;
-  if ("WebGL2RenderingContext" in self && gl instanceof self.WebGL2RenderingContext) {
+  if ("WebGL2RenderingContext" in globalThis && gl instanceof globalThis.WebGL2RenderingContext) {
     table = (_a3 = {}, _a3[TYPES$3.UNSIGNED_BYTE] = (_b3 = {}, _b3[FORMATS$3.RGBA] = gl.RGBA8, _b3[FORMATS$3.RGB] = gl.RGB8, _b3[FORMATS$3.RG] = gl.RG8, _b3[FORMATS$3.RED] = gl.R8, _b3[FORMATS$3.RGBA_INTEGER] = gl.RGBA8UI, _b3[FORMATS$3.RGB_INTEGER] = gl.RGB8UI, _b3[FORMATS$3.RG_INTEGER] = gl.RG8UI, _b3[FORMATS$3.RED_INTEGER] = gl.R8UI, _b3[FORMATS$3.ALPHA] = gl.ALPHA, _b3[FORMATS$3.LUMINANCE] = gl.LUMINANCE, _b3[FORMATS$3.LUMINANCE_ALPHA] = gl.LUMINANCE_ALPHA, _b3), _a3[TYPES$3.BYTE] = (_c3 = {}, _c3[FORMATS$3.RGBA] = gl.RGBA8_SNORM, _c3[FORMATS$3.RGB] = gl.RGB8_SNORM, _c3[FORMATS$3.RG] = gl.RG8_SNORM, _c3[FORMATS$3.RED] = gl.R8_SNORM, _c3[FORMATS$3.RGBA_INTEGER] = gl.RGBA8I, _c3[FORMATS$3.RGB_INTEGER] = gl.RGB8I, _c3[FORMATS$3.RG_INTEGER] = gl.RG8I, _c3[FORMATS$3.RED_INTEGER] = gl.R8I, _c3), _a3[TYPES$3.UNSIGNED_SHORT] = (_d2 = {}, _d2[FORMATS$3.RGBA_INTEGER] = gl.RGBA16UI, _d2[FORMATS$3.RGB_INTEGER] = gl.RGB16UI, _d2[FORMATS$3.RG_INTEGER] = gl.RG16UI, _d2[FORMATS$3.RED_INTEGER] = gl.R16UI, _d2[FORMATS$3.DEPTH_COMPONENT] = gl.DEPTH_COMPONENT16, _d2), _a3[TYPES$3.SHORT] = (_e = {}, _e[FORMATS$3.RGBA_INTEGER] = gl.RGBA16I, _e[FORMATS$3.RGB_INTEGER] = gl.RGB16I, _e[FORMATS$3.RG_INTEGER] = gl.RG16I, _e[FORMATS$3.RED_INTEGER] = gl.R16I, _e), _a3[TYPES$3.UNSIGNED_INT] = (_f = {}, _f[FORMATS$3.RGBA_INTEGER] = gl.RGBA32UI, _f[FORMATS$3.RGB_INTEGER] = gl.RGB32UI, _f[FORMATS$3.RG_INTEGER] = gl.RG32UI, _f[FORMATS$3.RED_INTEGER] = gl.R32UI, _f[FORMATS$3.DEPTH_COMPONENT] = gl.DEPTH_COMPONENT24, _f), _a3[TYPES$3.INT] = (_g = {}, _g[FORMATS$3.RGBA_INTEGER] = gl.RGBA32I, _g[FORMATS$3.RGB_INTEGER] = gl.RGB32I, _g[FORMATS$3.RG_INTEGER] = gl.RG32I, _g[FORMATS$3.RED_INTEGER] = gl.R32I, _g), _a3[TYPES$3.FLOAT] = (_h = {}, _h[FORMATS$3.RGBA] = gl.RGBA32F, _h[FORMATS$3.RGB] = gl.RGB32F, _h[FORMATS$3.RG] = gl.RG32F, _h[FORMATS$3.RED] = gl.R32F, _h[FORMATS$3.DEPTH_COMPONENT] = gl.DEPTH_COMPONENT32F, _h), _a3[TYPES$3.HALF_FLOAT] = (_j = {}, _j[FORMATS$3.RGBA] = gl.RGBA16F, _j[FORMATS$3.RGB] = gl.RGB16F, _j[FORMATS$3.RG] = gl.RG16F, _j[FORMATS$3.RED] = gl.R16F, _j), _a3[TYPES$3.UNSIGNED_SHORT_5_6_5] = (_k = {}, _k[FORMATS$3.RGB] = gl.RGB565, _k), _a3[TYPES$3.UNSIGNED_SHORT_4_4_4_4] = (_l2 = {}, _l2[FORMATS$3.RGBA] = gl.RGBA4, _l2), _a3[TYPES$3.UNSIGNED_SHORT_5_5_5_1] = (_m = {}, _m[FORMATS$3.RGBA] = gl.RGB5_A1, _m), _a3[TYPES$3.UNSIGNED_INT_2_10_10_10_REV] = (_o = {}, _o[FORMATS$3.RGBA] = gl.RGB10_A2, _o[FORMATS$3.RGBA_INTEGER] = gl.RGB10_A2UI, _o), _a3[TYPES$3.UNSIGNED_INT_10F_11F_11F_REV] = (_p2 = {}, _p2[FORMATS$3.RGB] = gl.R11F_G11F_B10F, _p2), _a3[TYPES$3.UNSIGNED_INT_5_9_9_9_REV] = (_q = {}, _q[FORMATS$3.RGB] = gl.RGB9_E5, _q), _a3[TYPES$3.UNSIGNED_INT_24_8] = (_r2 = {}, _r2[FORMATS$3.DEPTH_STENCIL] = gl.DEPTH24_STENCIL8, _r2), _a3[TYPES$3.FLOAT_32_UNSIGNED_INT_24_8_REV] = (_s = {}, _s[FORMATS$3.DEPTH_STENCIL] = gl.DEPTH32F_STENCIL8, _s), _a3);
   } else {
     table = (_t = {}, _t[TYPES$3.UNSIGNED_BYTE] = (_u = {}, _u[FORMATS$3.RGBA] = gl.RGBA, _u[FORMATS$3.RGB] = gl.RGB, _u[FORMATS$3.ALPHA] = gl.ALPHA, _u[FORMATS$3.LUMINANCE] = gl.LUMINANCE, _u[FORMATS$3.LUMINANCE_ALPHA] = gl.LUMINANCE_ALPHA, _u), _t[TYPES$3.UNSIGNED_SHORT_5_6_5] = (_v = {}, _v[FORMATS$3.RGB] = gl.RGB, _v), _t[TYPES$3.UNSIGNED_SHORT_4_4_4_4] = (_w = {}, _w[FORMATS$3.RGBA] = gl.RGBA, _w), _t[TYPES$3.UNSIGNED_SHORT_5_5_5_1] = (_x = {}, _x[FORMATS$3.RGBA] = gl.RGBA, _x), _t);
@@ -15239,7 +15304,7 @@ var AbstractRenderer = function(_super) {
     if (region.height === 0) {
       region.height = 1;
     }
-    var renderTexture = RenderTexture.create(__assign$7({ width: region.width, height: region.height }, textureOptions));
+    var renderTexture = RenderTexture.create(__assign$8({ width: region.width, height: region.height }, textureOptions));
     tempMatrix$2.tx = -region.x;
     tempMatrix$2.ty = -region.y;
     this.render(displayObject, {
@@ -16096,8 +16161,8 @@ for (var name in _systems) {
   _loop_2(name);
 }
 /*!
- * @pixi/loaders - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/loaders - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/loaders is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -16261,7 +16326,7 @@ function parseUri(str, opts) {
   });
   return uri;
 }
-var useXdr = !!(self.XDomainRequest && !("withCredentials" in new XMLHttpRequest()));
+var useXdr = !!(globalThis.XDomainRequest && !("withCredentials" in new XMLHttpRequest()));
 var tempAnchor = null;
 var STATUS_NONE = 0;
 var STATUS_OK = 200;
@@ -16466,7 +16531,7 @@ var LoaderResource = function() {
   LoaderResource2.prototype._loadElement = function(type) {
     if (this.metadata.loadElement) {
       this.data = this.metadata.loadElement;
-    } else if (type === "image" && typeof self.Image !== "undefined") {
+    } else if (type === "image" && typeof globalThis.Image !== "undefined") {
       this.data = new Image();
     } else {
       this.data = document.createElement(type);
@@ -16487,7 +16552,7 @@ var LoaderResource = function() {
   LoaderResource2.prototype._loadSourceElement = function(type) {
     if (this.metadata.loadElement) {
       this.data = this.metadata.loadElement;
-    } else if (type === "audio" && typeof self.Audio !== "undefined") {
+    } else if (type === "audio" && typeof globalThis.Audio !== "undefined") {
       this.data = new Audio();
     } else {
       this.data = document.createElement(type);
@@ -16526,6 +16591,9 @@ var LoaderResource = function() {
       this.xhrType = this._determineXhrType();
     }
     var xhr = this.xhr = new XMLHttpRequest();
+    if (this.crossOrigin === "use-credentials") {
+      xhr.withCredentials = true;
+    }
     xhr.open("GET", this.url, true);
     xhr.timeout = this.timeout;
     if (this.xhrType === LoaderResource2.XHR_RESPONSE_TYPE.JSON || this.xhrType === LoaderResource2.XHR_RESPONSE_TYPE.DOCUMENT) {
@@ -16544,7 +16612,7 @@ var LoaderResource = function() {
     if (typeof this.xhrType !== "string") {
       this.xhrType = this._determineXhrType();
     }
-    var xdr = this.xhr = new self.XDomainRequest();
+    var xdr = this.xhr = new globalThis.XDomainRequest();
     xdr.timeout = this.timeout || 5e3;
     xdr.onerror = this._boundXhrOnError;
     xdr.ontimeout = this._boundXhrOnTimeout;
@@ -16614,7 +16682,7 @@ var LoaderResource = function() {
         }
       } else if (this.xhrType === LoaderResource2.XHR_RESPONSE_TYPE.DOCUMENT) {
         try {
-          if (self.DOMParser) {
+          if (globalThis.DOMParser) {
             var domparser = new DOMParser();
             this.data = domparser.parseFromString(text, "text/xml");
           } else {
@@ -16640,10 +16708,10 @@ var LoaderResource = function() {
     if (url2.indexOf("data:") === 0) {
       return "";
     }
-    if (self.origin !== self.location.origin) {
+    if (globalThis.origin !== globalThis.location.origin) {
       return "anonymous";
     }
-    loc = loc || self.location;
+    loc = loc || globalThis.location;
     if (!tempAnchor) {
       tempAnchor = document.createElement("a");
     }
@@ -17079,7 +17147,7 @@ var Loader = function() {
     }
     if (this.defaultQueryString) {
       var hash2 = rgxExtractUrlHash.exec(result)[0];
-      result = result.substr(0, result.length - hash2.length);
+      result = result.slice(0, result.length - hash2.length);
       if (result.indexOf("?") !== -1) {
         result += "&" + this.defaultQueryString;
       } else {
@@ -18310,7 +18378,6 @@ function allSettled(arr) {
   });
 }
 var setTimeoutFunc = setTimeout;
-var setImmediateFunc = typeof setImmediate !== "undefined" ? setImmediate : null;
 function isArray$1(x) {
   return Boolean(x && typeof x.length !== "undefined");
 }
@@ -18490,8 +18557,8 @@ Promise$1.race = function(arr) {
     }
   });
 };
-Promise$1._immediateFn = typeof setImmediateFunc === "function" && function(fn) {
-  setImmediateFunc(fn);
+Promise$1._immediateFn = typeof setImmediate === "function" && function(fn) {
+  setImmediate(fn);
 } || function(fn) {
   setTimeoutFunc(fn, 0);
 };
@@ -18569,14 +18636,21 @@ var objectAssign = shouldUseNative() ? Object.assign : function(target, source)
   return to;
 };
 /*!
- * @pixi/polyfill - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/polyfill - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/polyfill is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
  */
-if (!self.Promise) {
-  self.Promise = Promise$1;
+if (typeof globalThis === "undefined") {
+  if (typeof self !== "undefined") {
+    self.globalThis = self;
+  } else if (typeof global !== "undefined") {
+    global.globalThis = global;
+  }
+}
+if (!globalThis.Promise) {
+  globalThis.Promise = Promise$1;
 }
 if (!Object.assign) {
   Object.assign = objectAssign;
@@ -18587,24 +18661,24 @@ if (!(Date.now && Date.prototype.getTime)) {
     return new Date().getTime();
   };
 }
-if (!(self.performance && self.performance.now)) {
+if (!(globalThis.performance && globalThis.performance.now)) {
   var startTime_1 = Date.now();
-  if (!self.performance) {
-    self.performance = {};
+  if (!globalThis.performance) {
+    globalThis.performance = {};
   }
-  self.performance.now = function() {
+  globalThis.performance.now = function() {
     return Date.now() - startTime_1;
   };
 }
 var lastTime = Date.now();
 var vendors = ["ms", "moz", "webkit", "o"];
-for (var x = 0; x < vendors.length && !self.requestAnimationFrame; ++x) {
+for (var x = 0; x < vendors.length && !globalThis.requestAnimationFrame; ++x) {
   var p = vendors[x];
-  self.requestAnimationFrame = self[p + "RequestAnimationFrame"];
-  self.cancelAnimationFrame = self[p + "CancelAnimationFrame"] || self[p + "CancelRequestAnimationFrame"];
+  globalThis.requestAnimationFrame = globalThis[p + "RequestAnimationFrame"];
+  globalThis.cancelAnimationFrame = globalThis[p + "CancelAnimationFrame"] || globalThis[p + "CancelRequestAnimationFrame"];
 }
-if (!self.requestAnimationFrame) {
-  self.requestAnimationFrame = function(callback) {
+if (!globalThis.requestAnimationFrame) {
+  globalThis.requestAnimationFrame = function(callback) {
     if (typeof callback !== "function") {
       throw new TypeError(callback + "is not a function");
     }
@@ -18614,14 +18688,14 @@ if (!self.requestAnimationFrame) {
       delay = 0;
     }
     lastTime = currentTime;
-    return self.setTimeout(function() {
+    return globalThis.self.setTimeout(function() {
       lastTime = Date.now();
       callback(performance.now());
     }, delay);
   };
 }
-if (!self.cancelAnimationFrame) {
-  self.cancelAnimationFrame = function(id) {
+if (!globalThis.cancelAnimationFrame) {
+  globalThis.cancelAnimationFrame = function(id) {
     return clearTimeout(id);
   };
 }
@@ -18639,27 +18713,27 @@ if (!Number.isInteger) {
     return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
   };
 }
-if (!self.ArrayBuffer) {
-  self.ArrayBuffer = Array;
+if (!globalThis.ArrayBuffer) {
+  globalThis.ArrayBuffer = Array;
 }
-if (!self.Float32Array) {
-  self.Float32Array = Array;
+if (!globalThis.Float32Array) {
+  globalThis.Float32Array = Array;
 }
-if (!self.Uint32Array) {
-  self.Uint32Array = Array;
+if (!globalThis.Uint32Array) {
+  globalThis.Uint32Array = Array;
 }
-if (!self.Uint16Array) {
-  self.Uint16Array = Array;
+if (!globalThis.Uint16Array) {
+  globalThis.Uint16Array = Array;
 }
-if (!self.Uint8Array) {
-  self.Uint8Array = Array;
+if (!globalThis.Uint8Array) {
+  globalThis.Uint8Array = Array;
 }
-if (!self.Int32Array) {
-  self.Int32Array = Array;
+if (!globalThis.Int32Array) {
+  globalThis.Int32Array = Array;
 }
 /*!
- * @pixi/display - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/display - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/display is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -18952,6 +19026,8 @@ var DisplayObject = function(_super) {
     _this.alpha = 1;
     _this.visible = true;
     _this.renderable = true;
+    _this.cullable = false;
+    _this.cullArea = null;
     _this.parent = null;
     _this.worldAlpha = 1;
     _this._lastSortedIndex = 0;
@@ -19133,6 +19209,7 @@ var DisplayObject = function(_super) {
     this.parent = null;
     this._bounds = null;
     this.mask = null;
+    this.cullArea = null;
     this.filters = null;
     this.filterArea = null;
     this.hitArea = null;
@@ -19321,8 +19398,8 @@ var TemporaryDisplayObject = function(_super) {
 }(DisplayObject);
 DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform;
 /*!
- * @pixi/constants - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/constants - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/constants is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -19737,12 +19814,40 @@ var Container = function(_super) {
   };
   Container2.prototype._calculateBounds = function() {
   };
+  Container2.prototype._renderWithCulling = function(renderer) {
+    var sourceFrame = renderer.renderTexture.sourceFrame;
+    if (!(sourceFrame.width > 0 && sourceFrame.height > 0)) {
+      return;
+    }
+    var bounds;
+    var transform;
+    if (this.cullArea) {
+      bounds = this.cullArea;
+      transform = this.worldTransform;
+    } else if (this._render !== Container2.prototype._render) {
+      bounds = this.getBounds(true);
+    }
+    if (bounds && sourceFrame.intersects(bounds, transform)) {
+      this._render(renderer);
+    } else if (this.cullArea) {
+      return;
+    }
+    for (var i2 = 0, j2 = this.children.length; i2 < j2; ++i2) {
+      var child = this.children[i2];
+      var childCullable = child.cullable;
+      child.cullable = childCullable || !this.cullArea;
+      child.render(renderer);
+      child.cullable = childCullable;
+    }
+  };
   Container2.prototype.render = function(renderer) {
     if (!this.visible || this.worldAlpha <= 0 || !this.renderable) {
       return;
     }
     if (this._mask || this.filters && this.filters.length) {
       this.renderAdvanced(renderer);
+    } else if (this.cullable) {
+      this._renderWithCulling(renderer);
     } else {
       this._render(renderer);
       for (var i2 = 0, j2 = this.children.length; i2 < j2; ++i2) {
@@ -19774,9 +19879,13 @@ var Container = function(_super) {
     if (mask) {
       renderer.mask.push(this, this._mask);
     }
-    this._render(renderer);
-    for (var i2 = 0, j2 = this.children.length; i2 < j2; i2++) {
-      this.children[i2].render(renderer);
+    if (this.cullable) {
+      this._renderWithCulling(renderer);
+    } else {
+      this._render(renderer);
+      for (var i2 = 0, j2 = this.children.length; i2 < j2; ++i2) {
+        this.children[i2].render(renderer);
+      }
     }
     if (flush) {
       renderer.batch.flush();
@@ -19837,8 +19946,8 @@ var Container = function(_super) {
 }(DisplayObject);
 Container.prototype.containerUpdateTransform = Container.prototype.updateTransform;
 /*!
- * @pixi/accessibility - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/accessibility - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/accessibility is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -19890,7 +19999,7 @@ var AccessibilityManager = function() {
     this.renderer = renderer;
     this._onKeyDown = this._onKeyDown.bind(this);
     this._onMouseMove = this._onMouseMove.bind(this);
-    self.addEventListener("keydown", this._onKeyDown, false);
+    globalThis.addEventListener("keydown", this._onKeyDown, false);
   }
   Object.defineProperty(AccessibilityManager2.prototype, "isActive", {
     get: function() {
@@ -19938,8 +20047,8 @@ var AccessibilityManager = function() {
       return;
     }
     this._isActive = true;
-    self.document.addEventListener("mousemove", this._onMouseMove, true);
-    self.removeEventListener("keydown", this._onKeyDown, false);
+    globalThis.document.addEventListener("mousemove", this._onMouseMove, true);
+    globalThis.removeEventListener("keydown", this._onKeyDown, false);
     this.renderer.on("postrender", this.update, this);
     (_a3 = this.renderer.view.parentNode) === null || _a3 === void 0 ? void 0 : _a3.appendChild(this.div);
   };
@@ -19949,8 +20058,8 @@ var AccessibilityManager = function() {
       return;
     }
     this._isActive = false;
-    self.document.removeEventListener("mousemove", this._onMouseMove, true);
-    self.addEventListener("keydown", this._onKeyDown, false);
+    globalThis.document.removeEventListener("mousemove", this._onMouseMove, true);
+    globalThis.addEventListener("keydown", this._onKeyDown, false);
     this.renderer.off("postrender", this.update);
     (_a3 = this.div.parentNode) === null || _a3 === void 0 ? void 0 : _a3.removeChild(this.div);
   };
@@ -20140,8 +20249,8 @@ var AccessibilityManager = function() {
   AccessibilityManager2.prototype.destroy = function() {
     this.destroyTouchHook();
     this.div = null;
-    self.document.removeEventListener("mousemove", this._onMouseMove, true);
-    self.removeEventListener("keydown", this._onKeyDown);
+    globalThis.document.removeEventListener("mousemove", this._onMouseMove, true);
+    globalThis.removeEventListener("keydown", this._onKeyDown);
     this.pool = null;
     this.children = null;
     this.renderer = null;
@@ -20149,8 +20258,8 @@ var AccessibilityManager = function() {
   return AccessibilityManager2;
 }();
 /*!
- * @pixi/interaction - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/interaction - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/interaction is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -20465,9 +20574,9 @@ var InteractionManager = function(_super) {
     _this.moveWhenInside = false;
     _this.eventsAdded = false;
     _this.tickerAdded = false;
-    _this.mouseOverRenderer = !("PointerEvent" in self);
-    _this.supportsTouchEvents = "ontouchstart" in self;
-    _this.supportsPointerEvents = !!self.PointerEvent;
+    _this.mouseOverRenderer = !("PointerEvent" in globalThis);
+    _this.supportsTouchEvents = "ontouchstart" in globalThis;
+    _this.supportsPointerEvents = !!globalThis.PointerEvent;
     _this.onPointerUp = _this.onPointerUp.bind(_this);
     _this.processPointerUp = _this.processPointerUp.bind(_this);
     _this.onPointerCancel = _this.onPointerCancel.bind(_this);
@@ -20555,25 +20664,25 @@ var InteractionManager = function(_super) {
       return;
     }
     var style = this.interactionDOMElement.style;
-    if (self.navigator.msPointerEnabled) {
+    if (globalThis.navigator.msPointerEnabled) {
       style.msContentZooming = "none";
       style.msTouchAction = "none";
     } else if (this.supportsPointerEvents) {
       style.touchAction = "none";
     }
     if (this.supportsPointerEvents) {
-      self.document.addEventListener("pointermove", this.onPointerMove, this._eventListenerOptions);
+      globalThis.document.addEventListener("pointermove", this.onPointerMove, this._eventListenerOptions);
       this.interactionDOMElement.addEventListener("pointerdown", this.onPointerDown, this._eventListenerOptions);
       this.interactionDOMElement.addEventListener("pointerleave", this.onPointerOut, this._eventListenerOptions);
       this.interactionDOMElement.addEventListener("pointerover", this.onPointerOver, this._eventListenerOptions);
-      self.addEventListener("pointercancel", this.onPointerCancel, this._eventListenerOptions);
-      self.addEventListener("pointerup", this.onPointerUp, this._eventListenerOptions);
+      globalThis.addEventListener("pointercancel", this.onPointerCancel, this._eventListenerOptions);
+      globalThis.addEventListener("pointerup", this.onPointerUp, this._eventListenerOptions);
     } else {
-      self.document.addEventListener("mousemove", this.onPointerMove, this._eventListenerOptions);
+      globalThis.document.addEventListener("mousemove", this.onPointerMove, this._eventListenerOptions);
       this.interactionDOMElement.addEventListener("mousedown", this.onPointerDown, this._eventListenerOptions);
       this.interactionDOMElement.addEventListener("mouseout", this.onPointerOut, this._eventListenerOptions);
       this.interactionDOMElement.addEventListener("mouseover", this.onPointerOver, this._eventListenerOptions);
-      self.addEventListener("mouseup", this.onPointerUp, this._eventListenerOptions);
+      globalThis.addEventListener("mouseup", this.onPointerUp, this._eventListenerOptions);
     }
     if (this.supportsTouchEvents) {
       this.interactionDOMElement.addEventListener("touchstart", this.onPointerDown, this._eventListenerOptions);
@@ -20588,25 +20697,25 @@ var InteractionManager = function(_super) {
       return;
     }
     var style = this.interactionDOMElement.style;
-    if (self.navigator.msPointerEnabled) {
+    if (globalThis.navigator.msPointerEnabled) {
       style.msContentZooming = "";
       style.msTouchAction = "";
     } else if (this.supportsPointerEvents) {
       style.touchAction = "";
     }
     if (this.supportsPointerEvents) {
-      self.document.removeEventListener("pointermove", this.onPointerMove, this._eventListenerOptions);
+      globalThis.document.removeEventListener("pointermove", this.onPointerMove, this._eventListenerOptions);
       this.interactionDOMElement.removeEventListener("pointerdown", this.onPointerDown, this._eventListenerOptions);
       this.interactionDOMElement.removeEventListener("pointerleave", this.onPointerOut, this._eventListenerOptions);
       this.interactionDOMElement.removeEventListener("pointerover", this.onPointerOver, this._eventListenerOptions);
-      self.removeEventListener("pointercancel", this.onPointerCancel, this._eventListenerOptions);
-      self.removeEventListener("pointerup", this.onPointerUp, this._eventListenerOptions);
+      globalThis.removeEventListener("pointercancel", this.onPointerCancel, this._eventListenerOptions);
+      globalThis.removeEventListener("pointerup", this.onPointerUp, this._eventListenerOptions);
     } else {
-      self.document.removeEventListener("mousemove", this.onPointerMove, this._eventListenerOptions);
+      globalThis.document.removeEventListener("mousemove", this.onPointerMove, this._eventListenerOptions);
       this.interactionDOMElement.removeEventListener("mousedown", this.onPointerDown, this._eventListenerOptions);
       this.interactionDOMElement.removeEventListener("mouseout", this.onPointerOut, this._eventListenerOptions);
       this.interactionDOMElement.removeEventListener("mouseover", this.onPointerOver, this._eventListenerOptions);
-      self.removeEventListener("mouseup", this.onPointerUp, this._eventListenerOptions);
+      globalThis.removeEventListener("mouseup", this.onPointerUp, this._eventListenerOptions);
     }
     if (this.supportsTouchEvents) {
       this.interactionDOMElement.removeEventListener("touchstart", this.onPointerDown, this._eventListenerOptions);
@@ -20648,7 +20757,7 @@ var InteractionManager = function(_super) {
   InteractionManager2.prototype.setCursorMode = function(mode) {
     mode = mode || "default";
     var applyStyles = true;
-    if (self.OffscreenCanvas && this.interactionDOMElement instanceof OffscreenCanvas) {
+    if (globalThis.OffscreenCanvas && this.interactionDOMElement instanceof OffscreenCanvas) {
       applyStyles = false;
     }
     if (this.currentCursorMode === mode) {
@@ -21066,7 +21175,7 @@ var InteractionManager = function(_super) {
         touch.isNormalized = true;
         normalizedEvents.push(touch);
       }
-    } else if (!self.MouseEvent || event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof self.PointerEvent))) {
+    } else if (!globalThis.MouseEvent || event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof globalThis.PointerEvent))) {
       var tempEvent = event;
       if (typeof tempEvent.isPrimary === "undefined") {
         tempEvent.isPrimary = true;
@@ -21129,8 +21238,8 @@ var InteractionManager = function(_super) {
   return InteractionManager2;
 }(EventEmitter$3);
 /*!
- * @pixi/app - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/app - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/app is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -21189,10 +21298,10 @@ var ResizePlugin = function() {
     var _this = this;
     Object.defineProperty(this, "resizeTo", {
       set: function(dom) {
-        self.removeEventListener("resize", this.queueResize);
+        globalThis.removeEventListener("resize", this.queueResize);
         this._resizeTo = dom;
         if (dom) {
-          self.addEventListener("resize", this.queueResize);
+          globalThis.addEventListener("resize", this.queueResize);
           this.resize();
         }
       },
@@ -21222,9 +21331,9 @@ var ResizePlugin = function() {
       _this.cancelResize();
       var width;
       var height;
-      if (_this._resizeTo === self) {
-        width = self.innerWidth;
-        height = self.innerHeight;
+      if (_this._resizeTo === globalThis.window) {
+        width = globalThis.innerWidth;
+        height = globalThis.innerHeight;
       } else {
         var _a3 = _this._resizeTo, clientWidth = _a3.clientWidth, clientHeight = _a3.clientHeight;
         width = clientWidth;
@@ -21237,7 +21346,7 @@ var ResizePlugin = function() {
     this.resizeTo = options.resizeTo || null;
   };
   ResizePlugin2.destroy = function() {
-    self.removeEventListener("resize", this.queueResize);
+    globalThis.removeEventListener("resize", this.queueResize);
     this.cancelResize();
     this.cancelResize = null;
     this.queueResize = null;
@@ -21248,8 +21357,8 @@ var ResizePlugin = function() {
 }();
 Application.registerPlugin(ResizePlugin);
 /*!
- * @pixi/extract - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/extract - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/extract is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -21373,8 +21482,8 @@ var Extract = function() {
   return Extract2;
 }();
 /*!
- * @pixi/compressed-textures - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/compressed-textures - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/compressed-textures is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -22087,8 +22196,8 @@ var KTX_FIELDS = {
   BYTES_OF_KEY_VALUE_DATA: 60
 };
 var FILE_HEADER_SIZE = 64;
-var TYPES_TO_BYTES_PER_COMPONENT = (_a$2 = {}, _a$2[TYPES$3.UNSIGNED_BYTE] = 1, _a$2[TYPES$3.UNSIGNED_SHORT] = 2, _a$2[TYPES$3.FLOAT] = 4, _a$2[TYPES$3.HALF_FLOAT] = 8, _a$2);
-var FORMATS_TO_COMPONENTS = (_b$1 = {}, _b$1[FORMATS$3.RGBA] = 4, _b$1[FORMATS$3.RGB] = 3, _b$1[FORMATS$3.LUMINANCE] = 1, _b$1[FORMATS$3.LUMINANCE_ALPHA] = 2, _b$1[FORMATS$3.ALPHA] = 1, _b$1);
+var TYPES_TO_BYTES_PER_COMPONENT = (_a$2 = {}, _a$2[TYPES$3.UNSIGNED_BYTE] = 1, _a$2[TYPES$3.UNSIGNED_SHORT] = 2, _a$2[TYPES$3.INT] = 4, _a$2[TYPES$3.UNSIGNED_INT] = 4, _a$2[TYPES$3.FLOAT] = 4, _a$2[TYPES$3.HALF_FLOAT] = 8, _a$2);
+var FORMATS_TO_COMPONENTS = (_b$1 = {}, _b$1[FORMATS$3.RGBA] = 4, _b$1[FORMATS$3.RGB] = 3, _b$1[FORMATS$3.RG] = 2, _b$1[FORMATS$3.RED] = 1, _b$1[FORMATS$3.LUMINANCE] = 1, _b$1[FORMATS$3.LUMINANCE_ALPHA] = 2, _b$1[FORMATS$3.ALPHA] = 1, _b$1);
 var TYPES_TO_BYTES_PER_PIXEL = (_c = {}, _c[TYPES$3.UNSIGNED_SHORT_4_4_4_4] = 2, _c[TYPES$3.UNSIGNED_SHORT_5_5_5_1] = 2, _c[TYPES$3.UNSIGNED_SHORT_5_6_5] = 2, _c);
 var KTXLoader = function() {
   function KTXLoader2() {
@@ -22096,8 +22205,31 @@ var KTXLoader = function() {
   KTXLoader2.use = function(resource, next) {
     if (resource.extension === "ktx" && resource.data) {
       try {
-        var url2 = resource.name || resource.url;
-        Object.assign(resource, registerCompressedTextures(url2, KTXLoader2.parse(url2, resource.data), resource.metadata));
+        var url_1 = resource.name || resource.url;
+        var _a3 = KTXLoader2.parse(url_1, resource.data), compressed = _a3.compressed, uncompressed = _a3.uncompressed;
+        if (compressed) {
+          Object.assign(resource, registerCompressedTextures(url_1, compressed, resource.metadata));
+        } else if (uncompressed) {
+          var textures_1 = {};
+          uncompressed.forEach(function(image, i2) {
+            var texture = new Texture(new BaseTexture(image.resource, {
+              mipmap: MIPMAP_MODES$3.OFF,
+              alphaMode: ALPHA_MODES$3.NO_PREMULTIPLIED_ALPHA,
+              type: image.type,
+              format: image.format
+            }));
+            var cacheID = url_1 + "-" + (i2 + 1);
+            BaseTexture.addToCache(texture.baseTexture, cacheID);
+            Texture.addToCache(texture, cacheID);
+            if (i2 === 0) {
+              textures_1[url_1] = texture;
+              BaseTexture.addToCache(texture.baseTexture, url_1);
+              Texture.addToCache(texture, url_1);
+            }
+            textures_1[cacheID] = texture;
+          });
+          Object.assign(resource, { textures: textures_1 });
+        }
       } catch (err) {
         next(err);
         return;
@@ -22169,8 +22301,8 @@ var KTXLoader = function() {
         }
         mips[mipmapLevel] = {
           levelID: mipmapLevel,
-          levelWidth: numberOfMipmapLevels > 1 ? mipWidth : alignedMipWidth,
-          levelHeight: numberOfMipmapLevels > 1 ? mipHeight : alignedMipHeight,
+          levelWidth: numberOfMipmapLevels > 1 || glType !== 0 ? mipWidth : alignedMipWidth,
+          levelHeight: numberOfMipmapLevels > 1 || glType !== 0 ? mipHeight : alignedMipHeight,
           levelBuffer: new Uint8Array(arrayBuffer, elementOffset, mipByteSize)
         };
         elementOffset += mipByteSize;
@@ -22184,17 +22316,41 @@ var KTXLoader = function() {
       mipByteSize = alignedMipWidth * alignedMipHeight * imagePixelByteSize;
     }
     if (glType !== 0) {
-      throw new Error("TODO: Uncompressed");
-    }
-    return imageBuffers.map(function(levelBuffers) {
-      return new CompressedTextureResource(null, {
-        format: glInternalFormat,
-        width: pixelWidth,
-        height: pixelHeight,
-        levels: numberOfMipmapLevels,
-        levelBuffers
-      });
-    });
+      return {
+        uncompressed: imageBuffers.map(function(levelBuffers) {
+          var buffer = levelBuffers[0].levelBuffer;
+          var convertToInt = false;
+          if (glType === TYPES$3.FLOAT) {
+            buffer = new Float32Array(levelBuffers[0].levelBuffer.buffer, levelBuffers[0].levelBuffer.byteOffset, levelBuffers[0].levelBuffer.byteLength / 4);
+          } else if (glType === TYPES$3.UNSIGNED_INT) {
+            convertToInt = true;
+            buffer = new Uint32Array(levelBuffers[0].levelBuffer.buffer, levelBuffers[0].levelBuffer.byteOffset, levelBuffers[0].levelBuffer.byteLength / 4);
+          } else if (glType === TYPES$3.INT) {
+            convertToInt = true;
+            buffer = new Int32Array(levelBuffers[0].levelBuffer.buffer, levelBuffers[0].levelBuffer.byteOffset, levelBuffers[0].levelBuffer.byteLength / 4);
+          }
+          return {
+            resource: new BufferResource(buffer, {
+              width: levelBuffers[0].levelWidth,
+              height: levelBuffers[0].levelHeight
+            }),
+            type: glType,
+            format: convertToInt ? KTXLoader2.convertFormatToInteger(glFormat) : glFormat
+          };
+        })
+      };
+    }
+    return {
+      compressed: imageBuffers.map(function(levelBuffers) {
+        return new CompressedTextureResource(null, {
+          format: glInternalFormat,
+          width: pixelWidth,
+          height: pixelHeight,
+          levels: numberOfMipmapLevels,
+          levelBuffers
+        });
+      })
+    };
   };
   KTXLoader2.validate = function(url2, dataView) {
     for (var i2 = 0; i2 < FILE_IDENTIFIER.length; i2++) {
@@ -22205,11 +22361,25 @@ var KTXLoader = function() {
     }
     return true;
   };
+  KTXLoader2.convertFormatToInteger = function(format2) {
+    switch (format2) {
+      case FORMATS$3.RGBA:
+        return FORMATS$3.RGBA_INTEGER;
+      case FORMATS$3.RGB:
+        return FORMATS$3.RGB_INTEGER;
+      case FORMATS$3.RG:
+        return FORMATS$3.RG_INTEGER;
+      case FORMATS$3.RED:
+        return FORMATS$3.RED_INTEGER;
+      default:
+        return format2;
+    }
+  };
   return KTXLoader2;
 }();
 /*!
- * @pixi/particle-container - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/particle-container - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/particle-container is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -22657,8 +22827,8 @@ var ParticleRenderer = function(_super) {
   return ParticleRenderer2;
 }(ObjectRenderer);
 /*!
- * @pixi/graphics - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/graphics - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/graphics is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -22761,6 +22931,35 @@ function __extends$l(d2, b2) {
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
+function fixOrientation(points, hole) {
+  var _a3, _b3;
+  if (hole === void 0) {
+    hole = false;
+  }
+  var m2 = points.length;
+  if (m2 < 6) {
+    return;
+  }
+  var area2 = 0;
+  for (var i2 = 0, x1 = points[m2 - 2], y1 = points[m2 - 1]; i2 < m2; i2 += 2) {
+    var x2 = points[i2];
+    var y2 = points[i2 + 1];
+    area2 += (x2 - x1) * (y2 + y1);
+    x1 = x2;
+    y1 = y2;
+  }
+  if (!hole && area2 > 0 || hole && area2 <= 0) {
+    var n = m2 / 2;
+    for (var i2 = n + n % 2; i2 < m2; i2 += 2) {
+      var i1 = m2 - i2 - 2;
+      var i22 = m2 - i2 - 1;
+      var i3 = i2;
+      var i4 = i2 + 1;
+      _a3 = [points[i3], points[i1]], points[i1] = _a3[0], points[i3] = _a3[1];
+      _b3 = [points[i4], points[i22]], points[i22] = _b3[0], points[i4] = _b3[1];
+    }
+  }
+}
 var buildPoly = {
   build: function(graphicsData) {
     graphicsData.points = graphicsData.shape.points.slice();
@@ -22771,9 +22970,11 @@ var buildPoly = {
     var verts = graphicsGeometry.points;
     var indices2 = graphicsGeometry.indices;
     if (points.length >= 6) {
+      fixOrientation(points, false);
       var holeArray = [];
       for (var i2 = 0; i2 < holes.length; i2++) {
         var hole = holes[i2];
+        fixOrientation(hole.points, true);
         holeArray.push(points.length / 2);
         points = points.concat(hole.points);
       }
@@ -22795,31 +22996,107 @@ var buildPoly = {
 };
 var buildCircle = {
   build: function(graphicsData) {
-    var circleData = graphicsData.shape;
     var points = graphicsData.points;
-    var x = circleData.x;
-    var y2 = circleData.y;
-    var width;
-    var height;
-    points.length = 0;
+    var x;
+    var y2;
+    var dx;
+    var dy;
+    var rx;
+    var ry;
     if (graphicsData.type === SHAPES.CIRC) {
-      width = circleData.radius;
-      height = circleData.radius;
+      var circle = graphicsData.shape;
+      x = circle.x;
+      y2 = circle.y;
+      rx = ry = circle.radius;
+      dx = dy = 0;
+    } else if (graphicsData.type === SHAPES.ELIP) {
+      var ellipse = graphicsData.shape;
+      x = ellipse.x;
+      y2 = ellipse.y;
+      rx = ellipse.width;
+      ry = ellipse.height;
+      dx = dy = 0;
     } else {
-      var ellipseData = graphicsData.shape;
-      width = ellipseData.width;
-      height = ellipseData.height;
+      var roundedRect = graphicsData.shape;
+      var halfWidth = roundedRect.width / 2;
+      var halfHeight = roundedRect.height / 2;
+      x = roundedRect.x + halfWidth;
+      y2 = roundedRect.y + halfHeight;
+      rx = ry = Math.max(0, Math.min(roundedRect.radius, Math.min(halfWidth, halfHeight)));
+      dx = halfWidth - rx;
+      dy = halfHeight - ry;
+    }
+    var n = Math.ceil(2.3 * Math.sqrt(rx + ry));
+    var m2 = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
+    points.length = m2;
+    if (m2 === 0) {
+      return;
     }
-    if (width === 0 || height === 0) {
+    if (n === 0) {
+      points.length = 8;
+      points[0] = points[6] = x + dx;
+      points[1] = points[3] = y2 + dy;
+      points[2] = points[4] = x - dx;
+      points[5] = points[7] = y2 - dy;
       return;
     }
-    var totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(width + height));
-    totalSegs /= 2.3;
-    var seg = Math.PI * 2 / totalSegs;
-    for (var i2 = 0; i2 < totalSegs - 0.5; i2++) {
-      points.push(x + Math.sin(-seg * i2) * width, y2 + Math.cos(-seg * i2) * height);
+    var j1 = 0;
+    var j2 = n * 4 + (dx ? 2 : 0) + 2;
+    var j3 = j2;
+    var j4 = m2;
+    {
+      var x0 = dx + rx;
+      var y0 = dy;
+      var x1 = x + x0;
+      var x2 = x - x0;
+      var y1 = y2 + y0;
+      points[j1++] = x1;
+      points[j1++] = y1;
+      points[--j2] = y1;
+      points[--j2] = x2;
+      if (dy) {
+        var y22 = y2 - y0;
+        points[j3++] = x2;
+        points[j3++] = y22;
+        points[--j4] = y22;
+        points[--j4] = x1;
+      }
+    }
+    for (var i2 = 1; i2 < n; i2++) {
+      var a2 = Math.PI / 2 * (i2 / n);
+      var x0 = dx + Math.cos(a2) * rx;
+      var y0 = dy + Math.sin(a2) * ry;
+      var x1 = x + x0;
+      var x2 = x - x0;
+      var y1 = y2 + y0;
+      var y22 = y2 - y0;
+      points[j1++] = x1;
+      points[j1++] = y1;
+      points[--j2] = y1;
+      points[--j2] = x2;
+      points[j3++] = x2;
+      points[j3++] = y22;
+      points[--j4] = y22;
+      points[--j4] = x1;
+    }
+    {
+      var x0 = dx;
+      var y0 = dy + ry;
+      var x1 = x + x0;
+      var x2 = x - x0;
+      var y1 = y2 + y0;
+      var y22 = y2 - y0;
+      points[j1++] = x1;
+      points[j1++] = y1;
+      points[--j4] = y22;
+      points[--j4] = x1;
+      if (dx) {
+        points[j1++] = x2;
+        points[j1++] = y1;
+        points[--j4] = y22;
+        points[--j4] = x2;
+      }
     }
-    points.push(points[0], points[1]);
   },
   triangulate: function(graphicsData, graphicsGeometry) {
     var points = graphicsData.points;
@@ -22827,15 +23104,26 @@ var buildCircle = {
     var indices2 = graphicsGeometry.indices;
     var vertPos = verts.length / 2;
     var center = vertPos;
-    var circle = graphicsData.shape;
+    var x;
+    var y2;
+    if (graphicsData.type !== SHAPES.RREC) {
+      var circle = graphicsData.shape;
+      x = circle.x;
+      y2 = circle.y;
+    } else {
+      var roundedRect = graphicsData.shape;
+      x = roundedRect.x + roundedRect.width / 2;
+      y2 = roundedRect.y + roundedRect.height / 2;
+    }
     var matrix = graphicsData.matrix;
-    var x = circle.x;
-    var y2 = circle.y;
     verts.push(graphicsData.matrix ? matrix.a * x + matrix.c * y2 + matrix.tx : x, graphicsData.matrix ? matrix.b * x + matrix.d * y2 + matrix.ty : y2);
-    for (var i2 = 0; i2 < points.length; i2 += 2) {
+    vertPos++;
+    verts.push(points[0], points[1]);
+    for (var i2 = 2; i2 < points.length; i2 += 2) {
       verts.push(points[i2], points[i2 + 1]);
       indices2.push(vertPos++, center, vertPos);
     }
+    indices2.push(center + 1, center, vertPos);
   }
 };
 var buildRectangle = {
@@ -22890,6 +23178,10 @@ function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY, out) {
 }
 var buildRoundedRectangle = {
   build: function(graphicsData) {
+    if (Graphics.nextRoundedRectBehavior) {
+      buildCircle.build(graphicsData);
+      return;
+    }
     var rrectData = graphicsData.shape;
     var points = graphicsData.points;
     var x = rrectData.x;
@@ -22908,6 +23200,10 @@ var buildRoundedRectangle = {
     }
   },
   triangulate: function(graphicsData, graphicsGeometry) {
+    if (Graphics.nextRoundedRectBehavior) {
+      buildCircle.triangulate(graphicsData, graphicsGeometry);
+      return;
+    }
     var points = graphicsData.points;
     var verts = graphicsGeometry.points;
     var indices2 = graphicsGeometry.indices;
@@ -23387,14 +23683,6 @@ var _a;
 var FILL_COMMANDS = (_a = {}, _a[SHAPES.POLY] = buildPoly, _a[SHAPES.CIRC] = buildCircle, _a[SHAPES.ELIP] = buildCircle, _a[SHAPES.RECT] = buildRectangle, _a[SHAPES.RREC] = buildRoundedRectangle, _a);
 var BATCH_POOL = [];
 var DRAW_CALL_POOL = [];
-function isPolygonClockwise(polygon) {
-  var points = polygon.points;
-  var sum2 = 0;
-  for (var i2 = 0; i2 < points.length - 2; i2 += 2) {
-    sum2 += (points[i2 + 2] - points[i2]) * (points[i2 + 3] + points[i2 + 1]);
-  }
-  return sum2 > 0;
-}
 var GraphicsData = function() {
   function GraphicsData2(shape, fillStyle, lineStyle, matrix) {
     if (fillStyle === void 0) {
@@ -23608,6 +23896,9 @@ var GraphicsGeometry = function(_super) {
       if (data.matrix) {
         this.transformPoints(data.points, data.matrix);
       }
+      if (fillStyle.visible || lineStyle.visible) {
+        this.processHoles(data.holes);
+      }
       for (var j2 = 0; j2 < 2; j2++) {
         var style = j2 === 0 ? fillStyle : lineStyle;
         if (!style.visible) {
@@ -23812,7 +24103,6 @@ var GraphicsGeometry = function(_super) {
   };
   GraphicsGeometry2.prototype.processFill = function(data) {
     if (data.holes.length) {
-      this.processHoles(data.holes);
       buildPoly.triangulate(data, this);
     } else {
       var command = FILL_COMMANDS[data.type];
@@ -23849,17 +24139,7 @@ var GraphicsGeometry = function(_super) {
       var nextMatrix = data.matrix || Matrix.IDENTITY;
       var lineWidth = 0;
       if (lineStyle && lineStyle.visible) {
-        var alignment = lineStyle.alignment;
-        lineWidth = lineStyle.width;
-        if (type === SHAPES.POLY) {
-          if (isPolygonClockwise(shape)) {
-            lineWidth = lineWidth * (1 - alignment);
-          } else {
-            lineWidth = lineWidth * alignment;
-          }
-        } else {
-          lineWidth = lineWidth * Math.max(0, alignment);
-        }
+        lineWidth = lineStyle.width * Math.max(0, lineStyle.alignment);
       }
       if (curMatrix !== nextMatrix) {
         if (!sequenceBounds.isEmpty()) {
@@ -24527,12 +24807,13 @@ var Graphics = function(_super) {
     this.batches = null;
     _super.prototype.destroy.call(this, options);
   };
+  Graphics2.nextRoundedRectBehavior = false;
   Graphics2._TEMP_POINT = new Point();
   return Graphics2;
 }(Container);
 /*!
- * @pixi/sprite - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/sprite - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/sprite is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -24848,8 +25129,8 @@ var Sprite = function(_super) {
   return Sprite2;
 }(Container);
 /*!
- * @pixi/text - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/text - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/text is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -25839,7 +26120,7 @@ var Text = function(_super) {
     }
     var style = this._style;
     var letterSpacing = style.letterSpacing;
-    var supportLetterSpacing = "letterSpacing" in CanvasRenderingContext2D.prototype || "textLetterSpacing" in CanvasRenderingContext2D.prototype;
+    var supportLetterSpacing = Text2.experimentalLetterSpacing && ("letterSpacing" in CanvasRenderingContext2D.prototype || "textLetterSpacing" in CanvasRenderingContext2D.prototype);
     if (letterSpacing === 0 || supportLetterSpacing) {
       if (supportLetterSpacing) {
         this.context.letterSpacing = letterSpacing;
@@ -26074,11 +26355,12 @@ var Text = function(_super) {
     configurable: true
   });
   Text2.nextLineHeightBehavior = false;
+  Text2.experimentalLetterSpacing = false;
   return Text2;
 }(Sprite);
 /*!
- * @pixi/prepare - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/prepare - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/prepare is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -26370,8 +26652,8 @@ var Prepare = function(_super) {
   return Prepare2;
 }(BasePrepare);
 /*!
- * @pixi/spritesheet - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/spritesheet - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/spritesheet is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -26561,8 +26843,8 @@ var SpritesheetLoader = function() {
   return SpritesheetLoader2;
 }();
 /*!
- * @pixi/sprite-tiling - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/sprite-tiling - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/sprite-tiling is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -26811,8 +27093,8 @@ var TilingSpriteRenderer = function(_super) {
   return TilingSpriteRenderer2;
 }(ObjectRenderer);
 /*!
- * @pixi/mesh - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/mesh - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/mesh is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -27222,8 +27504,8 @@ var MeshGeometry = function(_super) {
   return MeshGeometry2;
 }(Geometry);
 /*!
- * @pixi/text-bitmap - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/text-bitmap - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/text-bitmap is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -27419,13 +27701,13 @@ var XMLStringFormat = function() {
   }
   XMLStringFormat2.test = function(data) {
     if (typeof data === "string" && data.indexOf("<font>") > -1) {
-      var xml = new self.DOMParser().parseFromString(data, "text/xml");
+      var xml = new globalThis.DOMParser().parseFromString(data, "text/xml");
       return XMLFormat.test(xml);
     }
     return false;
   };
   XMLStringFormat2.parse = function(xmlTxt) {
-    var xml = new self.DOMParser().parseFromString(xmlTxt, "text/xml");
+    var xml = new globalThis.DOMParser().parseFromString(xmlTxt, "text/xml");
     return XMLFormat.parse(xml);
   };
   return XMLStringFormat2;
@@ -27885,7 +28167,7 @@ var charRenderDataPool = [];
       charRenderData.position.y = pos.y + charData.yOffset;
       charRenderData.prevSpaces = spaceCount;
       chars2.push(charRenderData);
-      lastLineWidth = charRenderData.position.x + charData.texture.orig.width;
+      lastLineWidth = charRenderData.position.x + Math.max(charData.xAdvance, charData.texture.orig.width);
       pos.x += charData.xAdvance + this._letterSpacing;
       maxLineHeight = Math.max(maxLineHeight, charData.yOffset + charData.texture.height);
       prevCharCode = charCode;
@@ -28351,8 +28633,8 @@ var BitmapFontLoader = function() {
   return BitmapFontLoader2;
 }();
 /*!
- * @pixi/filter-alpha - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/filter-alpha - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/filter-alpha is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -28414,8 +28696,8 @@ var fragment$4 = "varying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nun
   return AlphaFilter;
 })(Filter);
 /*!
- * @pixi/filter-blur - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/filter-blur - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/filter-blur is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -28513,8 +28795,8 @@ function generateBlurFragSource(kernelSize) {
   return fragSource;
 }
 /*!
- * @pixi/constants - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/constants - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/constants is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -28904,8 +29186,8 @@ var BlurFilterPass = function(_super) {
   return BlurFilter;
 })(Filter);
 /*!
- * @pixi/filter-color-matrix - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/filter-color-matrix - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/filter-color-matrix is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -29582,8 +29864,8 @@ var ColorMatrixFilter = function(_super) {
 }(Filter);
 ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale;
 /*!
- * @pixi/filter-displacement - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/filter-displacement - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/filter-displacement is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -29671,8 +29953,8 @@ var vertex$1 = "attribute vec2 aVertexPosition;\n\nuniform mat3 projectionMatrix
   return DisplacementFilter;
 })(Filter);
 /*!
- * @pixi/filter-fxaa - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/filter-fxaa - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/filter-fxaa is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -29841,8 +30123,8 @@ void main() {
   return FXAAFilter;
 })(Filter);
 /*!
- * @pixi/filter-noise - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/filter-noise - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/filter-noise is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -29921,15 +30203,15 @@ var fragment = "precision highp float;\n\nvarying vec2 vTextureCoord;\nvarying v
   return NoiseFilter;
 })(Filter);
 /*!
- * @pixi/mixin-cache-as-bitmap - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/mixin-cache-as-bitmap - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/mixin-cache-as-bitmap is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
  */
 /*!
- * @pixi/constants - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/constants - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/constants is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -30359,8 +30641,8 @@ DisplayObject.prototype._cacheAsBitmapDestroy = function _cacheAsBitmapDestroy(o
   this.destroy(options);
 };
 /*!
- * @pixi/mixin-get-child-by-name - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/mixin-get-child-by-name - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/mixin-get-child-by-name is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -30387,8 +30669,8 @@ Container.prototype.getChildByName = function getChildByName(name, deep) {
   return null;
 };
 /*!
- * @pixi/mixin-get-global-position - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/mixin-get-global-position - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/mixin-get-global-position is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -30409,8 +30691,8 @@ DisplayObject.prototype.getGlobalPosition = function getGlobalPosition(point, sk
   return point;
 };
 /*!
- * @pixi/mesh-extras - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/mesh-extras - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/mesh-extras is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -30891,8 +31173,8 @@ var DEFAULT_BORDER_SIZE = 10;
   return NineSlicePlane;
 })(SimplePlane);
 /*!
- * @pixi/sprite-animated - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * @pixi/sprite-animated - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * @pixi/sprite-animated is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -31142,8 +31424,8 @@ var AnimatedSprite = function(_super) {
   return AnimatedSprite2;
 }(Sprite);
 /*!
- * pixi.js - v6.2.2
- * Compiled Wed, 26 Jan 2022 16:23:27 UTC
+ * pixi.js - v6.3.0
+ * Compiled Wed, 23 Mar 2022 18:58:56 UTC
  *
  * pixi.js is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -32307,6 +32589,7 @@ var OBJECT = "object";
 var STRING = "string";
 var NUMBER = "number";
 var UNDEFINED = "undefined";
+var IS_WINDOW = typeof window !== UNDEFINED;
 var OPEN_CLOSED_CHARACTERS = [{
   open: "(",
   close: ")"
@@ -32586,6 +32869,23 @@ function find$1(arr, callback, defalutValue) {
   var index = findIndex(arr, callback);
   return index > -1 ? arr[index] : defalutValue;
 }
+var requestAnimationFrame$1 = /* @__PURE__ */ function() {
+  var firstTime = now();
+  var raf = IS_WINDOW && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame);
+  return raf ? raf.bind(window) : function(callback) {
+    var currTime = now();
+    var id = window.setTimeout(function() {
+      callback(currTime - firstTime);
+    }, 1e3 / 60);
+    return id;
+  };
+}();
+var cancelAnimationFrame$1 = /* @__PURE__ */ function() {
+  var caf = IS_WINDOW && (window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame);
+  return caf ? caf.bind(window) : function(handle2) {
+    clearTimeout(handle2);
+  };
+}();
 function getKeys(obj) {
   if (Object.keys) {
     return Object.keys(obj);
@@ -32753,8 +33053,8 @@ function __extends$6(d2, b2) {
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
-var __assign$6 = function() {
-  __assign$6 = Object.assign || function __assign2(t) {
+var __assign$7 = function() {
+  __assign$7 = Object.assign || function __assign2(t) {
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
       s2 = arguments[i2];
       for (var p in s2)
@@ -32763,7 +33063,7 @@ var __assign$6 = function() {
     }
     return t;
   };
-  return __assign$6.apply(this, arguments);
+  return __assign$7.apply(this, arguments);
 };
 function __rest$2(s2, e) {
   var t = {};
@@ -32777,7 +33077,7 @@ function __rest$2(s2, e) {
     }
   return t;
 }
-function __spreadArrays$4() {
+function __spreadArrays$3() {
   for (var s2 = 0, i2 = 0, il = arguments.length; i2 < il; i2++)
     s2 += arguments[i2].length;
   for (var r2 = Array(s2), k = 0, i2 = 0; i2 < il; i2++)
@@ -32887,7 +33187,7 @@ function createElement(type, props) {
     type,
     key,
     ref: ref2,
-    props: __assign$6(__assign$6({}, otherProps), {
+    props: __assign$7(__assign$7({}, otherProps), {
       children: flat$1(children).filter(function(child) {
         return child != null && child !== false;
       })
@@ -33256,7 +33556,7 @@ var Component = /* @__PURE__ */ function() {
     }
     clearTimeout(this.$_timer);
     this.$_timer = 0;
-    this.$_state = __assign$6(__assign$6({}, this.$_state), state);
+    this.$_state = __assign$7(__assign$7({}, this.$_state), state);
     if (!isForceUpdate) {
       this.$_timer = setTimeout(function() {
         _this.$_timer = 0;
@@ -33279,7 +33579,7 @@ var Component = /* @__PURE__ */ function() {
   __proto.$_setState = function(callback, isForceUpdate) {
     var hooks = [];
     var provider = this.$_provider;
-    var isUpdate = renderProviders(provider.container, [provider], [provider.original], hooks, __assign$6(__assign$6({}, this.state), this.$_state), isForceUpdate);
+    var isUpdate = renderProviders(provider.container, [provider], [provider.original], hooks, __assign$7(__assign$7({}, this.state), this.$_state), isForceUpdate);
     if (isUpdate) {
       if (callback) {
         hooks.push(callback);
@@ -33379,7 +33679,7 @@ function diffProviders(containerProvider, providers, children) {
     childProvider.index = to;
     return false;
   });
-  return __spreadArrays$4(result.added, changed.map(function(_a3) {
+  return __spreadArrays$3(result.added, changed.map(function(_a3) {
     _a3[0];
     var to = _a3[1];
     return to;
@@ -33606,15 +33906,18 @@ var OS_PRESETS = [{
 }, {
   test: "windows nt",
   id: "window"
+}, {
+  test: "win32|windows",
+  id: "window"
 }, {
   test: "iphone|ipad|ipod",
   id: "ios",
   versionTest: "iphone os|cpu os"
 }, {
-  test: "mac os x",
+  test: "macos|macintel|mac os x",
   id: "mac"
 }, {
-  test: "android",
+  test: "android|linux armv81",
   id: "android"
 }, {
   test: "tizen",
@@ -33628,6 +33931,7 @@ function parseUserAgentData(osData) {
   var brands = (userAgentData.uaList || userAgentData.brands).slice();
   var isMobile2 = userAgentData.mobile || false;
   var firstBrand = brands[0];
+  var platform2 = (osData && osData.platform || userAgentData.platform || navigator.platform).toLowerCase();
   var browser = {
     name: firstBrand.brand,
     version: firstBrand.version,
@@ -33654,12 +33958,11 @@ function parseUserAgentData(osData) {
     browser.webkit = !!webkitBrand.brand;
     browser.webkitVersion = webkitBrand.version;
   }
+  var platfomResult = find(OS_PRESETS, function(preset) {
+    return new RegExp("" + preset.test, "g").exec(platform2);
+  });
+  os.name = platfomResult ? platfomResult.id : "";
   if (osData) {
-    var platform_1 = osData.platform.toLowerCase();
-    var result = find(OS_PRESETS, function(preset) {
-      return new RegExp("" + preset.test, "g").exec(platform_1);
-    });
-    os.name = result ? result.id : platform_1;
     os.version = osData.platformVersion;
   }
   var browserBrand = findPresetBrand(BROWSER_PRESETS, brands);
@@ -33667,9 +33970,7 @@ function parseUserAgentData(osData) {
     browser.name = browserBrand.brand;
     browser.version = osData ? osData.uaFullVersion : browserBrand.version;
   }
-  if (navigator.platform === "Linux armv8l") {
-    os.name = "android";
-  } else if (browser.webkit) {
+  if (browser.webkit) {
     os.name = isMobile2 ? "ios" : "mac";
   }
   if (os.name === "ios" && browser.webview) {
@@ -34185,7 +34486,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-function __spreadArrays$3() {
+function __spreadArrays$2() {
   for (var s2 = 0, i2 = 0, il = arguments.length; i2 < il; i2++)
     s2 += arguments[i2].length;
   for (var r2 = Array(s2), k = 0, i2 = 0; i2 < il; i2++)
@@ -34370,7 +34671,7 @@ function getPointsOnLines(points, lines) {
   });
 }
 function convertLines(points) {
-  return __spreadArrays$3(points.slice(1), [points[0]]).map(function(point, i2) {
+  return __spreadArrays$2(points.slice(1), [points[0]]).map(function(point, i2) {
     return [points[i2], point];
   });
 }
@@ -34493,8 +34794,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var __assign$5 = function() {
-  __assign$5 = Object.assign || function __assign2(t) {
+var __assign$6 = function() {
+  __assign$6 = Object.assign || function __assign2(t) {
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
       s2 = arguments[i2];
       for (var p in s2)
@@ -34503,9 +34804,9 @@ var __assign$5 = function() {
     }
     return t;
   };
-  return __assign$5.apply(this, arguments);
+  return __assign$6.apply(this, arguments);
 };
-function __spreadArrays$2() {
+function __spreadArrays$1() {
   for (var s2 = 0, i2 = 0, il = arguments.length; i2 < il; i2++)
     s2 += arguments[i2].length;
   for (var r2 = Array(s2), k = 0, i2 = 0; i2 < il; i2++)
@@ -34578,7 +34879,7 @@ var EventEmitter$1 = /* @__PURE__ */ function() {
       isStop = true;
     };
     param.currentTarget = this;
-    __spreadArrays$2(events).forEach(function(info) {
+    __spreadArrays$1(events).forEach(function(info) {
       info.listener(param);
       if (info.once) {
         _this.off(eventName, info.listener);
@@ -34596,7 +34897,7 @@ var EventEmitter$1 = /* @__PURE__ */ function() {
     var events = this._events;
     events[eventName] = events[eventName] || [];
     var listeners = events[eventName];
-    listeners.push(__assign$5({
+    listeners.push(__assign$6({
       listener
     }, options));
   };
@@ -34636,6 +34937,18 @@ function __extends$4(d2, b2) {
   }
   d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
 }
+var __assign$5 = function() {
+  __assign$5 = Object.assign || function __assign2(t) {
+    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s2 = arguments[i2];
+      for (var p in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p))
+          t[p] = s2[p];
+    }
+    return t;
+  };
+  return __assign$5.apply(this, arguments);
+};
 function getDefaultScrollPosition$1(e) {
   var container = e.container;
   if (container === document.body) {
@@ -34647,10 +34960,12 @@ var DragScroll = /* @__PURE__ */ function(_super) {
   __extends$4(DragScroll2, _super);
   function DragScroll2() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.startRect = null;
-    _this.startPos = [];
-    _this.prevTime = 0;
-    _this.timer = 0;
+    _this._startRect = null;
+    _this._startPos = [];
+    _this._prevTime = 0;
+    _this._timer = 0;
+    _this._prevScrollPos = [0, 0];
+    _this._isWait = false;
     return _this;
   }
   var __proto = DragScroll2.prototype;
@@ -34670,83 +34985,115 @@ var DragScroll = /* @__PURE__ */ function(_super) {
       width = rect.width;
       height = rect.height;
     }
-    this.startPos = [e.clientX, e.clientY];
-    this.startRect = {
+    this._startPos = [e.clientX, e.clientY];
+    this._startRect = {
       top,
       left,
       width,
       height
     };
+    this._prevScrollPos = this._getScrollPosition([0, 0], options);
   };
   __proto.drag = function(e, options) {
-    var _this = this;
     var clientX = e.clientX, clientY = e.clientY;
-    var container = options.container, _a3 = options.threshold, threshold = _a3 === void 0 ? 0 : _a3, _b3 = options.throttleTime, throttleTime = _b3 === void 0 ? 0 : _b3, _c3 = options.getScrollPosition, getScrollPosition = _c3 === void 0 ? getDefaultScrollPosition$1 : _c3;
-    var _d2 = this, startRect = _d2.startRect, startPos = _d2.startPos;
-    var nowTime = now();
-    var distTime = Math.max(throttleTime + this.prevTime - nowTime, 0);
+    var _a3 = options.threshold, threshold = _a3 === void 0 ? 0 : _a3;
+    var _b3 = this, _startRect = _b3._startRect, _startPos = _b3._startPos;
     var direction = [0, 0];
-    if (startRect.top > clientY - threshold) {
-      if (startPos[1] > startRect.top || clientY < startPos[1]) {
+    if (_startRect.top > clientY - threshold) {
+      if (_startPos[1] > _startRect.top || clientY < _startPos[1]) {
         direction[1] = -1;
       }
-    } else if (startRect.top + startRect.height < clientY + threshold) {
-      if (startPos[1] < startRect.top + startRect.height || clientY > startPos[1]) {
+    } else if (_startRect.top + _startRect.height < clientY + threshold) {
+      if (_startPos[1] < _startRect.top + _startRect.height || clientY > _startPos[1]) {
         direction[1] = 1;
       }
     }
-    if (startRect.left > clientX - threshold) {
-      if (startPos[0] > startRect.left || clientX < startPos[0]) {
+    if (_startRect.left > clientX - threshold) {
+      if (_startPos[0] > _startRect.left || clientX < _startPos[0]) {
         direction[0] = -1;
       }
-    } else if (startRect.left + startRect.width < clientX + threshold) {
-      if (startPos[0] < startRect.left + startRect.width || clientX > startPos[0]) {
+    } else if (_startRect.left + _startRect.width < clientX + threshold) {
+      if (_startPos[0] < _startRect.left + _startRect.width || clientX > _startPos[0]) {
         direction[0] = 1;
       }
     }
-    clearTimeout(this.timer);
+    clearTimeout(this._timer);
     if (!direction[0] && !direction[1]) {
       return false;
     }
-    if (distTime > 0) {
-      this.timer = window.setTimeout(function() {
-        _this.drag(e, options);
-      }, distTime);
+    return this._continueDrag(__assign$5(__assign$5({}, options), {
+      direction,
+      inputEvent: e,
+      isDrag: true
+    }));
+  };
+  __proto.checkScroll = function(options) {
+    var _this = this;
+    if (this._isWait) {
       return false;
     }
-    this.prevTime = nowTime;
-    var prevPos = getScrollPosition({
-      container,
-      direction
-    });
-    this.trigger("scroll", {
-      container,
-      direction,
-      inputEvent: e
-    });
-    var nextPos = getScrollPosition({
-      container,
-      direction
-    });
-    var offsetX = nextPos[0] - prevPos[0];
-    var offsetY = nextPos[1] - prevPos[1];
+    var _a3 = options.prevScrollPos, prevScrollPos = _a3 === void 0 ? this._prevScrollPos : _a3, direction = options.direction, _b3 = options.throttleTime, throttleTime = _b3 === void 0 ? 0 : _b3, inputEvent = options.inputEvent, isDrag = options.isDrag;
+    var nextScrollPos = this._getScrollPosition(direction || [0, 0], options);
+    var offsetX = nextScrollPos[0] - prevScrollPos[0];
+    var offsetY = nextScrollPos[1] - prevScrollPos[1];
+    var nextDirection = direction || [offsetX ? Math.abs(offsetX) / offsetX : 0, offsetY ? Math.abs(offsetY) / offsetY : 0];
+    this._prevScrollPos = nextScrollPos;
     if (!offsetX && !offsetY) {
       return false;
     }
     this.trigger("move", {
-      offsetX: direction[0] ? offsetX : 0,
-      offsetY: direction[1] ? offsetY : 0,
-      inputEvent: e
+      offsetX: nextDirection[0] ? offsetX : 0,
+      offsetY: nextDirection[1] ? offsetY : 0,
+      inputEvent
     });
-    if (throttleTime) {
-      this.timer = window.setTimeout(function() {
-        _this.drag(e, options);
+    if (throttleTime && isDrag) {
+      this._timer = window.setTimeout(function() {
+        _this._continueDrag(options);
       }, throttleTime);
     }
     return true;
   };
   __proto.dragEnd = function() {
-    clearTimeout(this.timer);
+    clearTimeout(this._timer);
+  };
+  __proto._getScrollPosition = function(direction, options) {
+    var container = options.container, _a3 = options.getScrollPosition, getScrollPosition = _a3 === void 0 ? getDefaultScrollPosition$1 : _a3;
+    return getScrollPosition({
+      container,
+      direction
+    });
+  };
+  __proto._continueDrag = function(options) {
+    var _this = this;
+    var container = options.container, direction = options.direction, throttleTime = options.throttleTime, useScroll = options.useScroll, isDrag = options.isDrag, inputEvent = options.inputEvent;
+    if (isDrag && this._isWait) {
+      return;
+    }
+    var nowTime = now();
+    var distTime = Math.max(throttleTime + this._prevTime - nowTime, 0);
+    if (distTime > 0) {
+      this._timer = window.setTimeout(function() {
+        _this._continueDrag(options);
+      }, distTime);
+      return false;
+    }
+    this._prevTime = nowTime;
+    var prevScrollPos = this._getScrollPosition(direction, options);
+    this._prevScrollPos = prevScrollPos;
+    if (isDrag) {
+      this._isWait = true;
+    }
+    this.trigger("scroll", {
+      container,
+      direction,
+      inputEvent
+    });
+    this._isWait = false;
+    return useScroll || this.checkScroll(__assign$5(__assign$5({}, options), {
+      prevScrollPos,
+      direction,
+      inputEvent
+    }));
   };
   return DragScroll2;
 }(EventEmitter$2);
@@ -34888,16 +35235,6 @@ var ClientStore = /* @__PURE__ */ function() {
     this.length = clients.length;
   }
   var __proto = ClientStore2.prototype;
-  __proto.addClients = function(clients) {
-    if (clients === void 0) {
-      clients = this.prevClients;
-    }
-    var position = this.getPosition(clients);
-    var deltaX = position.deltaX, deltaY = position.deltaY;
-    this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    this.prevClients = clients;
-    return position;
-  };
   __proto.getAngle = function(clients) {
     if (clients === void 0) {
       clients = this.prevClients;
@@ -34910,8 +35247,15 @@ var ClientStore = /* @__PURE__ */ function() {
     }
     return getRotatiion(clients) - getRotatiion(this.startClients);
   };
-  __proto.getPosition = function(clients) {
-    return getPosition(clients || this.prevClients, this.prevClients, this.startClients);
+  __proto.getPosition = function(clients, isAdd) {
+    if (clients === void 0) {
+      clients = this.prevClients;
+    }
+    var position = getPosition(clients || this.prevClients, this.prevClients, this.startClients);
+    var deltaX = position.deltaX, deltaY = position.deltaY;
+    this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    this.prevClients = clients;
+    return position;
   };
   __proto.getPositions = function(clients) {
     if (clients === void 0) {
@@ -34950,10 +35294,6 @@ var ClientStore = /* @__PURE__ */ function() {
       client.clientX -= deltaX;
       client.clientY -= deltaY;
     });
-    this.prevClients.forEach(function(client) {
-      client.clientX -= deltaX;
-      client.clientY -= deltaY;
-    });
   };
   return ClientStore2;
 }();
@@ -34977,6 +35317,7 @@ var Gesto = /* @__PURE__ */ function(_super) {
     _this.targets = [];
     _this.prevTime = 0;
     _this.doubleFlag = false;
+    _this._dragFlag = false;
     _this.onDragStart = function(e, isTrusted) {
       if (isTrusted === void 0) {
         isTrusted = true;
@@ -35009,6 +35350,7 @@ var Gesto = /* @__PURE__ */ function(_super) {
         _this.clientStores = [new ClientStore(getEventClients(e))];
         _this.flag = true;
         _this.isDrag = false;
+        _this._dragFlag = true;
         _this.datas = {};
         if (preventRightClick && (e.which === 3 || e.button === 2)) {
           _this.initDrag();
@@ -35020,7 +35362,14 @@ var Gesto = /* @__PURE__ */ function(_super) {
           inputEvent: e,
           isTrusted,
           isDouble: _this.doubleFlag
-        }, _this.getCurrentStore().getPosition()));
+        }, _this.getCurrentStore().getPosition(), {
+          preventDefault: function() {
+            e.preventDefault();
+          },
+          preventDrag: function() {
+            _this._dragFlag = false;
+          }
+        }));
         if (result === false) {
           _this.initDrag();
         }
@@ -35056,20 +35405,22 @@ var Gesto = /* @__PURE__ */ function(_super) {
       }
       var clients = getEventClients(e);
       var result = _this.moveClients(clients, e, false);
-      if (_this.pinchFlag || result.deltaX || result.deltaY) {
-        var dragResult = _this.emit("drag", __assign$4({}, result, {
-          isScroll: !!isScroll,
-          inputEvent: e
-        }));
-        if (dragResult === false) {
-          _this.stop();
-          return;
+      if (_this._dragFlag) {
+        if (_this.pinchFlag || result.deltaX || result.deltaY) {
+          var dragResult = _this.emit("drag", __assign$4({}, result, {
+            isScroll: !!isScroll,
+            inputEvent: e
+          }));
+          if (dragResult === false) {
+            _this.stop();
+            return;
+          }
+        }
+        if (_this.pinchFlag) {
+          _this.onPinch(e, clients);
         }
       }
-      if (_this.pinchFlag) {
-        _this.onPinch(e, clients);
-      }
-      _this.getCurrentStore().addClients(clients);
+      _this.getCurrentStore().getPosition(clients, true);
     };
     _this.onDragEnd = function(e) {
       if (!_this.flag) {
@@ -35080,7 +35431,7 @@ var Gesto = /* @__PURE__ */ function(_super) {
         removeEvent(container2, "touchstart", _this.onDragStart);
       }
       _this.flag = false;
-      var position = _this.getCurrentStore().getPosition();
+      var position = _this._getPosition();
       var currentTime = now();
       var isDouble = !_this.isDrag && _this.doubleFlag;
       _this.prevTime = _this.isDrag || isDouble ? 0 : currentTime;
@@ -35198,6 +35549,17 @@ var Gesto = /* @__PURE__ */ function(_super) {
     }
     return this;
   };
+  __proto.getCurrentEvent = function(inputEvent) {
+    return __assign$4({
+      datas: this.datas
+    }, this._getPosition(), {
+      movement: this.getMovement(),
+      isDrag: this.isDrag,
+      isPinch: this.isPinch,
+      isScroll: false,
+      inputEvent
+    });
+  };
   __proto.getEventDatas = function() {
     return this.datas;
   };
@@ -35291,9 +35653,10 @@ var Gesto = /* @__PURE__ */ function(_super) {
     return this.clientStores[0];
   };
   __proto.moveClients = function(clients, inputEvent, isAdd) {
-    var store = this.getCurrentStore();
-    var position = store[isAdd ? "addClients" : "getPosition"](clients);
-    this.isDrag = true;
+    var position = this._getPosition(clients, isAdd);
+    if (position.deltaX || position.deltaY) {
+      this.isDrag = true;
+    }
     return __assign$4({
       datas: this.datas
     }, position, {
@@ -35304,6 +35667,20 @@ var Gesto = /* @__PURE__ */ function(_super) {
       inputEvent
     });
   };
+  __proto._getPosition = function(clients, isAdd) {
+    var store = this.getCurrentStore();
+    var position = store.getPosition(clients, isAdd);
+    var _a3 = this.clientStores.slice(1).reduce(function(prev2, cur) {
+      var storePosition = cur.getPosition();
+      prev2.distX += storePosition.distX;
+      prev2.distY += storePosition.distY;
+      return prev2;
+    }, position), distX = _a3.distX, distY = _a3.distY;
+    return __assign$4({}, position, {
+      distX,
+      distY
+    });
+  };
   return Gesto2;
 }(EventEmitter$2);
 var Gesto$1 = Gesto;
@@ -35533,12 +35910,14 @@ var extendStatics$1 = function(d2, b2) {
     d3.__proto__ = b3;
   } || function(d3, b3) {
     for (var p in b3)
-      if (b3.hasOwnProperty(p))
+      if (Object.prototype.hasOwnProperty.call(b3, p))
         d3[p] = b3[p];
   };
   return extendStatics$1(d2, b2);
 };
 function __extends$1(d2, b2) {
+  if (typeof b2 !== "function" && b2 !== null)
+    throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
   extendStatics$1(d2, b2);
   function __() {
     this.constructor = d2;
@@ -35579,13 +35958,16 @@ function __decorate$1(decorators, target, key, desc) {
         r2 = (c2 < 3 ? d2(r2) : c2 > 3 ? d2(target, key, r2) : d2(target, key)) || r2;
   return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
 }
-function __spreadArrays$1() {
-  for (var s2 = 0, i2 = 0, il = arguments.length; i2 < il; i2++)
-    s2 += arguments[i2].length;
-  for (var r2 = Array(s2), k = 0, i2 = 0; i2 < il; i2++)
-    for (var a2 = arguments[i2], j2 = 0, jl = a2.length; j2 < jl; j2++, k++)
-      r2[k] = a2[j2];
-  return r2;
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2)
+    for (var i2 = 0, l2 = from.length, ar; i2 < l2; i2++) {
+      if (ar || !(i2 in from)) {
+        if (!ar)
+          ar = Array.prototype.slice.call(from, 0, i2);
+        ar[i2] = from[i2];
+      }
+    }
+  return to.concat(ar || Array.prototype.slice.call(from));
 }
 function makeAble(name, able) {
   var _a3;
@@ -35600,7 +35982,6 @@ function getSVGCursor(scale, degree) {
 }
 function getCursorCSS(degree) {
   var x1 = getSVGCursor(1, degree);
-  var x2 = getSVGCursor(2, degree);
   var degree45 = Math.round(degree / 45) * 45 % 180;
   var defaultCursor = "ns-resize";
   if (degree45 === 135) {
@@ -35610,7 +35991,7 @@ function getCursorCSS(degree) {
   } else if (degree45 === 90) {
     defaultCursor = "ew-resize";
   }
-  return "cursor:" + defaultCursor + ";cursor: url('" + x1 + "') 16 16, " + defaultCursor + ";cursor: -webkit-image-set(url('" + x1 + "') 1x, url('" + x2 + "') 2x) 16 16, " + defaultCursor + ";";
+  return "cursor:" + defaultCursor + ";cursor: url('" + x1 + "') 16 16, " + defaultCursor + ";";
 }
 var agent = agent$1();
 var IS_WEBKIT = agent.browser.webkit;
@@ -35652,7 +36033,7 @@ var DIRECTION_ROTATIONS = {
   sw: 225,
   se: 135
 };
-var MOVEABLE_METHODS = ["isMoveableElement", "updateRect", "updateTarget", "destroy", "dragStart", "isInside", "hitTest", "setState", "getRect", "request", "isDragging", "getManager"];
+var MOVEABLE_METHODS = ["isMoveableElement", "updateRect", "updateTarget", "destroy", "dragStart", "isInside", "hitTest", "setState", "getRect", "request", "isDragging", "getManager", "forceUpdate"];
 function multiply2(pos1, pos2) {
   return [pos1[0] * pos2[0], pos1[1] * pos2[1]];
 }
@@ -35661,7 +36042,7 @@ function prefix() {
   for (var _i = 0; _i < arguments.length; _i++) {
     classNames[_i] = arguments[_i];
   }
-  return prefixNames.apply(void 0, __spreadArrays$1([PREFIX], classNames));
+  return prefixNames.apply(void 0, __spreadArray([PREFIX], classNames));
 }
 function getTransformMatrix(transform) {
   if (!transform || transform === "none") {
@@ -35956,11 +36337,12 @@ function calculateElementInfo(target, container, rootContainer, isAbsolute3d) {
   }, allResult);
 }
 function calculateMatrixStack(target, container, rootContainer, isAbsolute3d) {
+  var _a3;
   if (rootContainer === void 0) {
     rootContainer = container;
   }
-  var _a3 = getMatrixStackInfo(target, container), matrixes = _a3.matrixes, is3d = _a3.is3d, prevTargetMatrix = _a3.targetMatrix, transformOrigin = _a3.transformOrigin, targetOrigin = _a3.targetOrigin, offsetContainer = _a3.offsetContainer;
-  var _b3 = getMatrixStackInfo(offsetContainer, rootContainer, true), rootMatrixes = _b3.matrixes, isRoot3d = _b3.is3d;
+  var _b3 = getMatrixStackInfo(target, container), matrixes = _b3.matrixes, is3d = _b3.is3d, prevTargetMatrix = _b3.targetMatrix, transformOrigin = _b3.transformOrigin, targetOrigin = _b3.targetOrigin, offsetContainer = _b3.offsetContainer;
+  var _c3 = getMatrixStackInfo(offsetContainer, rootContainer, true), rootMatrixes = _c3.matrixes, isRoot3d = _c3.is3d;
   var isNext3d = isAbsolute3d || isRoot3d || is3d;
   var n = isNext3d ? 4 : 3;
   var isSVGGraphicElement = target.tagName.toLowerCase() !== "svg" && "ownerSVGElement" in target;
@@ -35970,8 +36352,6 @@ function calculateMatrixStack(target, container, rootContainer, isAbsolute3d) {
   var beforeMatrix = createIdentityMatrix(n);
   var offsetMatrix = createIdentityMatrix(n);
   var length2 = matrixes.length;
-  var originalRootContainer = rootContainer || document.body;
-  var endContainer = getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent;
   rootMatrixes.reverse();
   matrixes.reverse();
   if (!is3d && isNext3d) {
@@ -35984,6 +36364,11 @@ function calculateMatrixStack(target, container, rootContainer, isAbsolute3d) {
   rootMatrixes.forEach(function(info) {
     rootMatrix = multiply(rootMatrix, info.matrix, n);
   });
+  var originalRootContainer = rootContainer || document.body;
+  var endContainer = ((_a3 = rootMatrixes[0]) === null || _a3 === void 0 ? void 0 : _a3.target) || getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent;
+  var rootMatrixBeforeOffset = rootMatrixes.slice(1).reduce(function(matrix, info) {
+    return multiply(matrix, info.matrix, n);
+  }, createIdentityMatrix(n));
   matrixes.forEach(function(info, i2) {
     if (length2 - 2 === i2) {
       beforeMatrix = allMatrix.slice();
@@ -35993,7 +36378,7 @@ function calculateMatrixStack(target, container, rootContainer, isAbsolute3d) {
     }
     if (!info.matrix) {
       var nextInfo = matrixes[i2 + 1];
-      var offset = getSVGOffset(info, nextInfo, endContainer, n, multiply(rootMatrix, allMatrix, n));
+      var offset = getSVGOffset(info, nextInfo, endContainer, n, multiply(rootMatrixBeforeOffset, allMatrix, n));
       info.matrix = createOriginMatrix(offset, n);
     }
     allMatrix = multiply(allMatrix, info.matrix, n);
@@ -36375,10 +36760,9 @@ function roundSign(num) {
   return Math.round(num % 1 === -0.5 ? num - 1 : num);
 }
 function unset(self2, name) {
-  if (self2[name]) {
-    self2[name].unset();
-    self2[name] = null;
-  }
+  var _a3;
+  (_a3 = self2[name]) === null || _a3 === void 0 ? void 0 : _a3.unset();
+  self2[name] = null;
 }
 function fillParams(moveable, e, params) {
   var datas = e.datas;
@@ -36662,7 +37046,7 @@ function getRefTargets(targets, isSelector) {
   var userTargets = isArrayFormat(targets) ? [].slice.call(targets) : [targets];
   return userTargets.reduce(function(prev2, target) {
     if (isString(target) && isSelector) {
-      return __spreadArrays$1(prev2, [].slice.call(document.querySelectorAll(target)));
+      return __spreadArray(__spreadArray([], prev2), [].slice.call(document.querySelectorAll(target)));
     }
     prev2.push(getRefTarget(target, isSelector));
     return prev2;
@@ -37013,9 +37397,15 @@ function resolveTransformEvent(event, functionName) {
   var index = datas.transformIndex;
   var nextTransforms = originalDatas.nextTransforms;
   var nextTransformAppendedIndexes = originalDatas.nextTransformAppendedIndexes;
-  var nextIndex = index === -1 ? nextTransforms.length : index + nextTransformAppendedIndexes.filter(function(i2) {
-    return i2 < index;
-  }).length;
+  var nextIndex = 0;
+  if (index === -1) {
+    nextIndex = nextTransforms.length;
+    datas.transformIndex = nextIndex;
+  } else {
+    nextIndex = index + nextTransformAppendedIndexes.filter(function(i2) {
+      return i2 < index;
+    }).length;
+  }
   var result = getTransform(nextTransforms, nextIndex);
   var targetFunction = result.targetFunction;
   var matFunctionName = functionName === "rotate" ? "rotateZ" : functionName;
@@ -37032,7 +37422,7 @@ function resolveTransformEvent(event, functionName) {
     datas.isAppendTransform = false;
   } else {
     datas.isAppendTransform = true;
-    originalDatas.nextTransformAppendedIndexes = __spreadArrays$1(nextTransformAppendedIndexes, [nextIndex]);
+    originalDatas.nextTransformAppendedIndexes = __spreadArray(__spreadArray([], nextTransformAppendedIndexes), [nextIndex]);
   }
 }
 function convertTransformFormat(datas, value, dist) {
@@ -37199,6 +37589,10 @@ function fillOriginalTransform(e, transform) {
   var originalDatas = e.originalDatas.beforeRenderable;
   originalDatas.nextTransforms = splitSpace(transform);
 }
+function getNextTransformText(e) {
+  var originalDatas = e.originalDatas.beforeRenderable;
+  return originalDatas.nextTransforms.join(" ");
+}
 function fillTransformEvent(moveable, nextTransform, delta, isPinch, e) {
   fillOriginalTransform(e, nextTransform);
   return {
@@ -37571,7 +37965,7 @@ function getTotalGuidelines(moveable) {
   var _a3 = moveable.state, snapOffset = _a3.snapOffset, _b3 = _a3.containerClientRect, overflow = _b3.overflow, containerHeight = _b3.scrollHeight, containerWidth = _b3.scrollWidth, containerClientHeight = _b3.clientHeight, containerClientWidth = _b3.clientWidth, clientLeft = _b3.clientLeft, clientTop = _b3.clientTop;
   var _c3 = moveable.props, _d2 = _c3.snapGap, snapGap = _d2 === void 0 ? true : _d2, verticalGuidelines = _c3.verticalGuidelines, horizontalGuidelines = _c3.horizontalGuidelines, _e = _c3.snapThreshold, snapThreshold = _e === void 0 ? 5 : _e, _f = _c3.snapGridWidth, snapGridWidth = _f === void 0 ? 0 : _f, _g = _c3.snapGridHeight, snapGridHeight = _g === void 0 ? 0 : _g;
   var elementGuidelines = getElementGuidelines(moveable);
-  var totalGuidelines = __spreadArrays$1(elementGuidelines);
+  var totalGuidelines = __spreadArray([], elementGuidelines);
   if (snapGap) {
     var _h = getRect(getAbsolutePosesByState(moveable.state)), top = _h.top, left = _h.left, bottom = _h.bottom, right = _h.right;
     totalGuidelines.push.apply(totalGuidelines, getGapGuidelines(moveable, {
@@ -38130,7 +38524,7 @@ function isBoundRotate(relativePoses, boundDots, center, rad) {
   var nextPoses = rad ? relativePoses.map(function(pos) {
     return rotate(pos, rad);
   }) : relativePoses;
-  var dots = __spreadArrays$1([center], boundDots);
+  var dots = __spreadArray([center], boundDots);
   return [[nextPoses[0], nextPoses[1]], [nextPoses[1], nextPoses[3]], [nextPoses[3], nextPoses[2]], [nextPoses[2], nextPoses[0]]].some(function(line) {
     return !isSameStartLine(dots, line);
   });
@@ -38482,7 +38876,7 @@ function renderGuideline(info, React) {
 }
 function renderInnerGuideline(info, React) {
   return renderGuideline(__assign$2(__assign$2({}, info), {
-    classNames: __spreadArrays$1([prefix("line", "guideline", info.direction)], info.classNames).filter(function(className) {
+    classNames: __spreadArray([prefix("line", "guideline", info.direction)], info.classNames).filter(function(className) {
       return className;
     }),
     size: info.size || info.sizeValue + "px",
@@ -38706,11 +39100,11 @@ function renderGapGuidelines(moveable, guidelines, targetPos, targetRect, React)
     var targetSideEnd = targetRect[sideNames.end];
     nextGuidelines.forEach(function(_a3) {
       var gap = _a3.gap, gapRects = _a3.gapRects, className = _a3.className;
-      var sideStartPos = Math.max.apply(Math, __spreadArrays$1([targetSideStart], gapRects.map(function(_a4) {
+      var sideStartPos = Math.max.apply(Math, __spreadArray([targetSideStart], gapRects.map(function(_a4) {
         var rect = _a4.rect;
         return rect[sideNames.start];
       })));
-      var sideEndPos = Math.min.apply(Math, __spreadArrays$1([targetSideEnd], gapRects.map(function(_a4) {
+      var sideEndPos = Math.min.apply(Math, __spreadArray([targetSideEnd], gapRects.map(function(_a4) {
         var rect = _a4.rect;
         return rect[sideNames.end];
       })));
@@ -39144,7 +39538,7 @@ function getNextFixedPoses(matrix, width, height, fixedPos, direction, is3d) {
 function getSizeOffsetInfo(moveable, poses, direction, keepRatio, isRequest, datas) {
   var directions = getCheckSnapDirections(direction, keepRatio);
   var lines = getCheckInnerBoundLines(poses, direction, keepRatio);
-  var offsets = __spreadArrays$1(getSnapBoundInfo(moveable, poses, directions, keepRatio, isRequest, datas), getInnerBoundInfo(moveable, lines, getPosByDirection(poses, [0, 0]), datas));
+  var offsets = __spreadArray(__spreadArray([], getSnapBoundInfo(moveable, poses, directions, keepRatio, isRequest, datas)), getInnerBoundInfo(moveable, lines, getPosByDirection(poses, [0, 0]), datas));
   var widthOffsetInfo = getNearOffsetInfo(offsets, 0);
   var heightOffsetInfo = getNearOffsetInfo(offsets, 1);
   return {
@@ -39236,7 +39630,7 @@ function checkSnapRotate(moveable, rect, origin, rotation) {
   var nextPoses = prevPoses.map(function(pos) {
     return rotate(pos, rad);
   });
-  var result = __spreadArrays$1(checkRotateBounds(moveable, prevPoses, nextPoses, origin, rotation), checkRotateInnerBounds(moveable, prevPoses, nextPoses, origin, rotation));
+  var result = __spreadArray(__spreadArray([], checkRotateBounds(moveable, prevPoses, nextPoses, origin, rotation)), checkRotateInnerBounds(moveable, prevPoses, nextPoses, origin, rotation));
   result.sort(function(a2, b2) {
     return Math.abs(a2 - rotation) - Math.abs(b2 - rotation);
   });
@@ -39328,6 +39722,7 @@ function addBoundGuidelines(moveable, verticalPoses, horizontalPoses, verticalSn
 }
 var Snappable = {
   name: "snappable",
+  dragRelation: "strong",
   props: {
     snappable: [Boolean, Array],
     snapContainer: Object,
@@ -39431,7 +39826,7 @@ var Snappable = {
     if (hasExternalPoses) {
       addBoundGuidelines(moveable, [externalRect.left, externalRect.right], [externalRect.top, externalRect.bottom], verticalSnapPoses, horizontalSnapPoses, snapRenderInfo.externalBounds);
     }
-    var allGuidelines = __spreadArrays$1(verticalGuidelines, horizontalGuidelines);
+    var allGuidelines = __spreadArray(__spreadArray([], verticalGuidelines), horizontalGuidelines);
     var elementGuidelines = allGuidelines.filter(function(guideline) {
       return guideline.element && !guideline.gapRects;
     });
@@ -39446,7 +39841,7 @@ var Snappable = {
       elements: elementGuidelines,
       gaps: gapGuidelines
     }, true);
-    return __spreadArrays$1(renderDashedGuidelines(moveable, elementGuidelines, [minLeft, minTop], targetRect, React), renderGapGuidelines(moveable, gapGuidelines, [minLeft, minTop], targetRect, React), renderGuidelines(moveable, "horizontal", horizontalGuidelines, [targetLeft, targetTop], targetRect, React), renderGuidelines(moveable, "vertical", verticalGuidelines, [targetLeft, targetTop], targetRect, React), renderSnapPoses(moveable, "horizontal", horizontalSnapPoses, minLeft, targetTop, width, 0, React), renderSnapPoses(moveable, "vertical", verticalSnapPoses, minTop, targetLeft, height, 1, React));
+    return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], renderDashedGuidelines(moveable, elementGuidelines, [minLeft, minTop], targetRect, React)), renderGapGuidelines(moveable, gapGuidelines, [minLeft, minTop], targetRect, React)), renderGuidelines(moveable, "horizontal", horizontalGuidelines, [targetLeft, targetTop], targetRect, React)), renderGuidelines(moveable, "vertical", verticalGuidelines, [targetLeft, targetTop], targetRect, React)), renderSnapPoses(moveable, "horizontal", horizontalSnapPoses, minLeft, targetTop, width, 0, React)), renderSnapPoses(moveable, "vertical", verticalSnapPoses, minTop, targetLeft, height, 1, React));
   },
   dragStart: function(moveable, e) {
     moveable.state.snapRenderInfo = {
@@ -39654,6 +40049,7 @@ var Draggable = {
     var right = datas.right - beforeDist[0];
     var bottom = datas.bottom - beforeDist[1];
     var nextTransform = convertTransformFormat(datas, "translate(" + translate[0] + "px, " + translate[1] + "px)", "translate(" + dist[0] + "px, " + dist[1] + "px)");
+    fillOriginalTransform(e, nextTransform);
     moveable.state.dragInfo.dist = parentEvent ? [0, 0] : dist;
     if (!parentEvent && !parentMoveable && delta.every(function(num) {
       return !num;
@@ -39687,22 +40083,23 @@ var Draggable = {
     var _a3 = e.datas, deltaOffset = _a3.deltaOffset, distOffset = _a3.distOffset;
     if (deltaOffset[0] || deltaOffset[1]) {
       datas.deltaOffset = [0, 0];
-      distOffset[0] += deltaOffset[0];
-      distOffset[1] += deltaOffset[1];
+      distOffset[0] = deltaOffset[0];
+      distOffset[1] = deltaOffset[1];
       return this.drag(moveable, e);
     }
     return false;
   },
   dragEnd: function(moveable, e) {
-    var parentEvent = e.parentEvent, datas = e.datas, isDrag = e.isDrag;
+    var parentEvent = e.parentEvent, datas = e.datas;
     moveable.state.gesto = null;
     moveable.state.dragInfo = null;
     if (!datas.isDrag) {
       return;
     }
     datas.isDrag = false;
-    !parentEvent && triggerEvent(moveable, "onDragEnd", fillEndParams(moveable, e, {}));
-    return isDrag;
+    var param = fillEndParams(moveable, e, {});
+    !parentEvent && triggerEvent(moveable, "onDragEnd", param);
+    return param;
   },
   dragGroupStart: function(moveable, e) {
     var datas = e.datas, clientX = e.clientX, clientY = e.clientY;
@@ -39743,9 +40140,10 @@ var Draggable = {
       return;
     }
     this.dragEnd(moveable, e);
-    triggerChildGesto(moveable, this, "dragEnd", [0, 0], e, false);
+    var events = triggerChildGesto(moveable, this, "dragEnd", [0, 0], e, false);
     triggerEvent(moveable, "onDragGroupEnd", fillEndParams(moveable, e, {
-      targets: moveable.props.targets
+      targets: moveable.props.targets,
+      events
     }));
     return isDrag;
   },
@@ -39794,7 +40192,7 @@ function renderDirectionControls(moveable, defaultDirections, React, additionalC
   if (additionalClassName === void 0) {
     additionalClassName = "";
   }
-  var _a3 = moveable.state, renderPoses = _a3.renderPoses, radRotation = _a3.rotation, direction = _a3.direction;
+  var _a3 = moveable.state, renderPoses = _a3.renderPoses, rotationRad = _a3.rotation, direction = _a3.direction;
   var _b3 = moveable.props, _c3 = _b3.renderDirections, directions = _c3 === void 0 ? defaultDirections : _c3, zoom = _b3.zoom;
   var directionMap = {};
   if (!directions) {
@@ -39802,7 +40200,7 @@ function renderDirectionControls(moveable, defaultDirections, React, additionalC
   }
   var sign2 = direction > 0 ? 1 : -1;
   var renderDirections = directions === true ? DIRECTIONS : directions;
-  var degRotation = radRotation / Math.PI * 180;
+  var degRotation = rotationRad / Math.PI * 180;
   renderDirections.forEach(function(dir) {
     directionMap[dir] = true;
   });
@@ -39817,7 +40215,7 @@ function renderDirectionControls(moveable, defaultDirections, React, additionalC
       "data-rotation": directionRotation,
       "data-direction": dir,
       key: "direction-" + dir,
-      style: getControlTransform.apply(void 0, __spreadArrays$1([radRotation, zoom], indexes.map(function(index) {
+      style: getControlTransform.apply(void 0, __spreadArray([rotationRad, zoom], indexes.map(function(index) {
         return renderPoses[index];
       })))
     });
@@ -39832,7 +40230,7 @@ function renderLine(React, direction, pos1, pos2, zoom, key) {
   var rotation = direction ? throttle(rad / Math.PI * 180, 15) % 180 : -1;
   return React.createElement("div", {
     key: "line" + key,
-    className: prefix.apply(void 0, __spreadArrays$1(["line", "direction", direction], classNames)),
+    className: prefix.apply(void 0, __spreadArray(["line", "direction", direction], classNames)),
     "data-rotation": rotation,
     "data-line-index": key,
     "data-direction": direction,
@@ -40102,13 +40500,14 @@ var Rotatable = {
     return params;
   },
   dragControlEnd: function(moveable, e) {
-    var datas = e.datas, isDrag = e.isDrag;
+    var datas = e.datas;
     if (!datas.isRotate) {
-      return false;
+      return;
     }
     datas.isRotate = false;
-    triggerEvent(moveable, "onRotateEnd", fillEndParams(moveable, e, {}));
-    return isDrag;
+    var params = fillEndParams(moveable, e, {});
+    triggerEvent(moveable, "onRotateEnd", params);
+    return params;
   },
   dragGroupControlCondition: dragControlCondition,
   dragGroupControlStart: function(moveable, e) {
@@ -40175,9 +40574,10 @@ var Rotatable = {
       return;
     }
     this.dragControlEnd(moveable, e);
-    triggerChildAbles(moveable, this, "dragControlEnd", e);
+    var events = triggerChildAbles(moveable, this, "dragControlEnd", e);
     var nextParams = fillEndParams(moveable, e, {
-      targets: moveable.props.targets
+      targets: moveable.props.targets,
+      events
     });
     triggerEvent(moveable, "onRotateGroupEnd", nextParams);
     return isDrag;
@@ -40391,7 +40791,7 @@ var Resizable = {
           distHeight = Math.sin(ratioRad) * distSize;
         }
       } else if (!keepRatio) {
-        var nextDirection = __spreadArrays$1(direction);
+        var nextDirection = __spreadArray([], direction);
         if (!startOffsetWidth) {
           if (dist[0] < 0) {
             nextDirection[0] = -1;
@@ -40520,19 +40920,18 @@ var Resizable = {
       datas.prevHeight += errorHeight;
     }
     if (isErrorWidth || isErrorHeight) {
-      this.dragControl(moveable, e);
-      return true;
+      return this.dragControl(moveable, e);
     }
   },
   dragControlEnd: function(moveable, e) {
-    var datas = e.datas, isDrag = e.isDrag;
+    var datas = e.datas;
     if (!datas.isResize) {
-      return false;
+      return;
     }
     datas.isResize = false;
     var params = fillEndParams(moveable, e, {});
     triggerEvent(moveable, "onResizeEnd", params);
-    return isDrag;
+    return params;
   },
   dragGroupControlCondition: directionCondition,
   dragGroupControlStart: function(moveable, e) {
@@ -40604,9 +41003,10 @@ var Resizable = {
       return;
     }
     this.dragControlEnd(moveable, e);
-    triggerChildAbles(moveable, this, "dragControlEnd", e);
+    var events = triggerChildAbles(moveable, this, "dragControlEnd", e);
     var nextParams = fillEndParams(moveable, e, {
-      targets: moveable.props.targets
+      targets: moveable.props.targets,
+      events
     });
     triggerEvent(moveable, "onResizeGroupEnd", nextParams);
     return isDrag;
@@ -40963,9 +41363,10 @@ var Scalable = {
       return;
     }
     this.dragControlEnd(moveable, e);
-    triggerChildAbles(moveable, this, "dragControlEnd", e);
+    var events = triggerChildAbles(moveable, this, "dragControlEnd", e);
     var nextParams = fillEndParams(moveable, e, {
-      targets: moveable.props.targets
+      targets: moveable.props.targets,
+      events
     });
     triggerEvent(moveable, "onScaleGroupEnd", nextParams);
     return isDrag;
@@ -41045,7 +41446,7 @@ var Warpable = {
     var linePosTo2 = getMiddleLinePos(pos4, pos3);
     var linePosTo3 = getMiddleLinePos(pos2, pos4);
     var linePosTo4 = getMiddleLinePos(pos4, pos2);
-    return __spreadArrays$1([React.createElement("div", {
+    return __spreadArray([React.createElement("div", {
       className: prefix("line"),
       key: "middeLine1",
       style: getLineStyle(linePosFrom1, linePosTo1, zoom)
@@ -41332,7 +41733,7 @@ var DragArea = {
   enableNativeEvent: function(moveable) {
     var state = moveable.state;
     if (state.disableNativeEvent) {
-      requestAnimationFrame(function() {
+      requestAnimationFrame$1(function() {
         state.disableNativeEvent = false;
       });
     }
@@ -41366,6 +41767,7 @@ var Scrollable = {
     onScroll: "scroll",
     onScrollGroup: "scrollGroup"
   },
+  dragRelation: "strong",
   dragStart: function(moveable, e) {
     var props = moveable.props;
     var _a3 = props.scrollContainer, scrollContainer = _a3 === void 0 ? moveable.getContainer() : _a3;
@@ -41469,6 +41871,7 @@ var Default = {
     container: Object,
     portalContainer: Object,
     rootContainer: Object,
+    useResizeObserver: Boolean,
     zoom: Number,
     transformOrigin: Array,
     edge: Boolean,
@@ -41629,7 +42032,7 @@ function getRadiusValues(values, width, height, left, top, minCounts) {
   _d2 = calculateRatio([verticalPoses[1], verticalPoses[2]], height), verticalPoses[1] = _d2[0], verticalPoses[2] = _d2[1];
   var nextHorizontalPoses = horizontalPoses.slice(0, Math.max(minCounts[0], horizontalValues.length));
   var nextVerticalPoses = verticalPoses.slice(0, Math.max(minCounts[1], verticalValues.length));
-  return __spreadArrays$1(nextHorizontalPoses.map(function(pos, i2) {
+  return __spreadArray(__spreadArray([], nextHorizontalPoses.map(function(pos, i2) {
     var direction = RADIUS_DIRECTIONS[i2];
     return {
       horizontal: HORIZONTAL_RADIUS_DIRECTIONS[i2],
@@ -41639,7 +42042,7 @@ function getRadiusValues(values, width, height, left, top, minCounts) {
       raw: horizontalRawPoses[i2],
       direction
     };
-  }), nextVerticalPoses.map(function(pos, i2) {
+  })), nextVerticalPoses.map(function(pos, i2) {
     var direction = RADIUS_DIRECTIONS[i2];
     return {
       horizontal: 0,
@@ -41784,7 +42187,7 @@ function getClipStyles(moveable, clipPath, poses) {
     });
     if (poses.length > 8) {
       var _c3 = minus(poses[4], poses[0]), subWidth = _c3[0], subHeight = _c3[1];
-      clipStyles.push.apply(clipStyles, __spreadArrays$1(["round"], getRadiusStyles(poses.slice(8), clipPoses.slice(8), clipRelative, subWidth, subHeight, left, top, right, bottom).styles));
+      clipStyles.push.apply(clipStyles, __spreadArray(["round"], getRadiusStyles(poses.slice(8), clipPoses.slice(8), clipRelative, subWidth, subHeight, left, top, right, bottom).styles));
     }
     return clipStyles;
   } else if (isCircle || clipType === "ellipse") {
@@ -41863,7 +42266,7 @@ function getClipPath(target, width, height, defaultClip, customClip) {
       radiusY_1 = convertUnitSize(yRadius, height);
     }
     var centerPos_1 = [convertUnitSize(xPos, width), convertUnitSize(yPos, height)];
-    var poses = __spreadArrays$1([{
+    var poses = __spreadArray([{
       vertical: 1,
       horizontal: 1,
       pos: centerPos_1,
@@ -41902,7 +42305,7 @@ function getClipPath(target, width, height, defaultClip, customClip) {
     var nextRight = width - right;
     var nextBottom = height - bottom;
     var radiusPoses = getRadiusValues(radiusValues, nextRight - left, nextBottom - top, left, top);
-    var poses = __spreadArrays$1(getRectPoses(top, nextRight, nextBottom, left), radiusPoses);
+    var poses = __spreadArray(__spreadArray([], getRectPoses(top, nextRight, nextBottom, left)), radiusPoses);
     return {
       type: "inset",
       clipText,
@@ -42021,7 +42424,7 @@ var Clippable = {
   css: [".control.clip-control {\n    background: #6d6;\n    cursor: pointer;\n}\n.control.clip-control.clip-radius {\n    background: #d66;\n}\n.line.clip-line {\n    background: #6e6;\n    cursor: move;\n    z-index: 1;\n}\n.clip-area {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.clip-ellipse {\n    position: absolute;\n    cursor: move;\n    border: 1px solid #6d6;\n    border: var(--zoompx) solid #6d6;\n    border-radius: 50%;\n    transform-origin: 0px 0px;\n}", ":host {\n    --bounds-color: #d66;\n}", ".guideline {\n    pointer-events: none;\n    z-index: 2;\n}", ".line.guideline.bounds {\n    background: #d66;\n    background: var(--bounds-color);\n}"],
   render: function(moveable, React) {
     var _a3 = moveable.props, customClipPath = _a3.customClipPath, defaultClipPath = _a3.defaultClipPath, clipArea = _a3.clipArea, zoom = _a3.zoom;
-    var _b3 = moveable.state, target = _b3.target, width = _b3.width, height = _b3.height, allMatrix = _b3.allMatrix, is3d = _b3.is3d, left = _b3.left, top = _b3.top, pos1 = _b3.pos1, pos2 = _b3.pos2, pos3 = _b3.pos3, pos4 = _b3.pos4, clipPathState = _b3.clipPathState, snapBoundInfos = _b3.snapBoundInfos;
+    var _b3 = moveable.state, target = _b3.target, width = _b3.width, height = _b3.height, allMatrix = _b3.allMatrix, is3d = _b3.is3d, left = _b3.left, top = _b3.top, pos1 = _b3.pos1, pos2 = _b3.pos2, pos3 = _b3.pos3, pos4 = _b3.pos4, clipPathState = _b3.clipPathState, snapBoundInfos = _b3.snapBoundInfos, rotationRad = _b3.rotation;
     if (!target) {
       return [];
     }
@@ -42064,7 +42467,7 @@ var Clippable = {
         className: prefix("control", "clip-control", "snap-control"),
         "data-clip-index": i3,
         style: {
-          transform: "translate(" + pos[0] + "px, " + pos[1] + "px) scale(" + zoom + ")"
+          transform: "translate(" + pos[0] + "px, " + pos[1] + "px) rotate(" + rotationRad + "rad) scale(" + zoom + ")"
         }
       });
     });
@@ -42075,7 +42478,7 @@ var Clippable = {
           className: prefix("control", "clip-control", "clip-radius", "snap-control"),
           "data-clip-index": 8 + i3,
           style: {
-            transform: "translate(" + pos[0] + "px, " + pos[1] + "px) scale(" + zoom + ")"
+            transform: "translate(" + pos[0] + "px, " + pos[1] + "px) rotate(" + rotationRad + "rad) scale(" + zoom + ")"
           }
         });
       }));
@@ -42113,7 +42516,7 @@ var Clippable = {
       }));
     }
     if (clipArea) {
-      var _d2 = getRect(__spreadArrays$1([pos1, pos2, pos3, pos4], poses)), allWidth = _d2.width, allHeight = _d2.height, allLeft_1 = _d2.left, allTop_1 = _d2.top;
+      var _d2 = getRect(__spreadArray([pos1, pos2, pos3, pos4], poses)), allWidth = _d2.width, allHeight = _d2.height, allLeft_1 = _d2.left, allTop_1 = _d2.top;
       if (isPolygon || isRect || isInset) {
         var areaPoses = isInset ? poses.slice(0, 8) : poses;
         controls.push(React.createElement("div", {
@@ -42152,7 +42555,7 @@ var Clippable = {
         }
       });
     }
-    return __spreadArrays$1(controls, lines);
+    return __spreadArray(__spreadArray([], controls), lines);
   },
   dragControlCondition: function(moveable, e) {
     return e.inputEvent && (e.inputEvent.target.getAttribute("class") || "").indexOf("clip") > -1;
@@ -42176,7 +42579,7 @@ var Clippable = {
     var _a3 = moveable.props, defaultClipPath = _a3.defaultClipPath, customClipPath = _a3.customClipPath;
     var target = state.target, width = state.width, height = state.height;
     var inputTarget = e.inputEvent ? e.inputEvent.target : null;
-    var className = inputTarget ? inputTarget.getAttribute("class") : "";
+    var className = inputTarget && inputTarget.getAttribute("class") || "";
     var datas = e.datas;
     var clipPath = getClipPath(target, width, height, defaultClipPath || "inset", customClipPath);
     if (!clipPath) {
@@ -42194,7 +42597,7 @@ var Clippable = {
       datas.isClipStart = false;
       return false;
     }
-    datas.isControl = className.indexOf("clip-control") > -1;
+    datas.isControl = className && className.indexOf("clip-control") > -1;
     datas.isLine = className.indexOf("clip-line") > -1;
     datas.isArea = className.indexOf("clip-area") > -1 || className.indexOf("clip-ellipse") > -1;
     datas.index = inputTarget ? parseInt(inputTarget.getAttribute("data-clip-index"), 10) : -1;
@@ -42205,16 +42608,16 @@ var Clippable = {
     return true;
   },
   dragControl: function(moveable, e) {
+    var _a3;
     var datas = e.datas, originalDatas = e.originalDatas;
     if (!datas.isClipStart) {
       return false;
     }
-    var draggableData = originalDatas && originalDatas.draggable || {};
-    var _a3 = datas, isControl = _a3.isControl, isLine = _a3.isLine, isArea = _a3.isArea, index = _a3.index, clipPath = _a3.clipPath;
+    var _b3 = datas, isControl = _b3.isControl, isLine = _b3.isLine, isArea = _b3.isArea, index = _b3.index, clipPath = _b3.clipPath;
     if (!clipPath) {
       return false;
     }
-    var _b3 = draggableData.isDrag ? draggableData.prevDist : getDragDist(e), distX = _b3[0], distY = _b3[1];
+    var _c3 = getDragDist(e), distX = _c3[0], distY = _c3[1];
     var props = moveable.props;
     var state = moveable.state;
     var width = state.width, height = state.height;
@@ -42233,7 +42636,7 @@ var Clippable = {
       return [0, 0];
     });
     if (isControl && !isAll) {
-      var _c3 = clipPoses[index], horizontal = _c3.horizontal, vertical = _c3.vertical;
+      var _d2 = clipPoses[index], horizontal = _d2.horizontal, vertical = _d2.vertical;
       var dist = [distX * Math.abs(horizontal), distY * Math.abs(vertical)];
       dists = moveControlPos(clipPoses, index, dist, isRect);
     } else if (isAll) {
@@ -42244,7 +42647,7 @@ var Clippable = {
     var nextPoses = poses.map(function(pos, i3) {
       return plus(pos, dists[i3]);
     });
-    var guidePoses = __spreadArrays$1(nextPoses);
+    var guidePoses = __spreadArray([], nextPoses);
     state.snapBoundInfos = null;
     var isCircle = clipPath.type === "circle";
     var isEllipse = clipPath.type === "ellipse";
@@ -42301,12 +42704,12 @@ var Clippable = {
     }
     var boundDelta = [0, 0];
     var _loop_12 = function(i3) {
-      var _a4 = checkSnapBounds(guidelines, props.clipTargetBounds && {
+      var _e = checkSnapBounds(guidelines, props.clipTargetBounds && {
         left: 0,
         top: 0,
         right: width,
         bottom: height
-      }, guideXPoses, guideYPoses, 5), horizontalSnapInfo = _a4.horizontal, verticalSnapInfo = _a4.vertical;
+      }, guideXPoses, guideYPoses, 5), horizontalSnapInfo = _e.horizontal, verticalSnapInfo = _e.vertical;
       var snapOffsetY = horizontalSnapInfo.offset;
       var snapOffsetX = verticalSnapInfo.offset;
       if (horizontalSnapInfo.isBound) {
@@ -42379,6 +42782,9 @@ var Clippable = {
       bottom: height
     }, guideXPoses, guideYPoses, 1);
     if (originalDatas.draggable) {
+      var is3d = state.is3d, allMatrix = state.allMatrix;
+      var n = is3d ? 4 : 3;
+      _a3 = multiply(allMatrix, [boundDelta[0], boundDelta[1], 0, 0], n), boundDelta[0] = _a3[0], boundDelta[1] = _a3[1];
       originalDatas.draggable.deltaOffset = boundDelta;
     }
     triggerEvent(moveable, "onClip", fillParams(moveable, e, {
@@ -42793,6 +43199,10 @@ var Roundable = {
     moveable.state.borderRadiusState = "";
   }
 };
+function isIdentityMatrix(matrix, is3d) {
+  var value = is3d ? "matrix3d(" + createIdentityMatrix(4) : "matrix(" + createIdentityMatrix(3) + ")";
+  return matrix === value || matrix === "matrix(1,0,0,1,0,0)";
+}
 var BeforeRenderable = {
   isPinch: true,
   name: "beforeRenderable",
@@ -42805,13 +43215,15 @@ var BeforeRenderable = {
     onBeforeRenderGroup: "beforeRenderGroup",
     onBeforeRenderGroupEnd: "beforeRenderGroupEnd"
   },
+  dragRelation: "weak",
   setTransform: function(moveable, e) {
     var _a3 = moveable.state, is3d = _a3.is3d, target = _a3.target, targetMatrix = _a3.targetMatrix;
     var transform = target === null || target === void 0 ? void 0 : target.style.transform;
     var cssMatrix = is3d ? "matrix3d(" + targetMatrix.join(",") + ")" : "matrix(" + convertMatrixtoCSS(targetMatrix, true) + ")";
-    e.datas.startTransforms = !transform || transform === "none" ? [cssMatrix] : splitSpace(transform);
+    var startTransform = !transform || transform === "none" ? cssMatrix : transform;
+    e.datas.startTransforms = isIdentityMatrix(startTransform, is3d) ? [] : splitSpace(startTransform);
   },
-  resetTransform: function(moveable, e) {
+  resetTransform: function(e) {
     e.datas.nextTransforms = e.datas.startTransforms;
     e.datas.nextTransformAppendedIndexes = [];
   },
@@ -42833,7 +43245,7 @@ var BeforeRenderable = {
     triggerEvent(moveable, "onBeforeRenderStart", this.fillDragStartParams(moveable, e));
   },
   drag: function(moveable, e) {
-    this.resetTransform(moveable, e);
+    this.resetTransform(e);
     triggerEvent(moveable, "onBeforeRender", fillParams(moveable, e, {
       isPinch: !!e.isPinch
     }));
@@ -42869,7 +43281,7 @@ var BeforeRenderable = {
     var moveables = moveable.moveables;
     var params = events.map(function(childEvent, i2) {
       var childMoveable = moveables[i2];
-      _this.resetTransform(childMoveable, childEvent);
+      _this.resetTransform(childEvent);
       return _this.fillDragParams(childMoveable, childEvent);
     });
     triggerEvent(moveable, "onBeforeRenderGroup", fillParams(moveable, e, {
@@ -42916,21 +43328,22 @@ var Renderable = {
     onRenderGroup: "renderGroup",
     onRenderGroupEnd: "renderGroupEnd"
   },
+  dragRelation: "weak",
   dragStart: function(moveable, e) {
     triggerEvent(moveable, "onRenderStart", fillParams(moveable, e, {
       isPinch: !!e.isPinch
     }));
   },
   drag: function(moveable, e) {
-    triggerEvent(moveable, "onRender", fillParams(moveable, e, {
-      isPinch: !!e.isPinch
-    }));
+    triggerEvent(moveable, "onRender", this.fillDragParams(moveable, e));
+  },
+  dragAfter: function(moveable, e) {
+    if (e.resultCount) {
+      return this.drag(moveable, e);
+    }
   },
   dragEnd: function(moveable, e) {
-    triggerEvent(moveable, "onRenderEnd", fillParams(moveable, e, {
-      isPinch: !!e.isPinch,
-      isDrag: e.isDrag
-    }));
+    triggerEvent(moveable, "onRenderEnd", this.fillDragEndParams(moveable, e));
   },
   dragGroupStart: function(moveable, e) {
     triggerEvent(moveable, "onRenderGroupStart", fillParams(moveable, e, {
@@ -42939,16 +43352,33 @@ var Renderable = {
     }));
   },
   dragGroup: function(moveable, e) {
+    var _this = this;
+    var events = fillChildEvents(moveable, "beforeRenderable", e);
+    var moveables = moveable.moveables;
+    var params = events.map(function(childEvent, i2) {
+      var childMoveable = moveables[i2];
+      return _this.fillDragParams(childMoveable, childEvent);
+    });
     triggerEvent(moveable, "onRenderGroup", fillParams(moveable, e, {
       isPinch: !!e.isPinch,
-      targets: moveable.props.targets
+      targets: moveable.props.targets,
+      transform: getNextTransformText(e),
+      events: params
     }));
   },
   dragGroupEnd: function(moveable, e) {
+    var _this = this;
+    var events = fillChildEvents(moveable, "beforeRenderable", e);
+    var moveables = moveable.moveables;
+    var params = events.map(function(childEvent, i2) {
+      var childMoveable = moveables[i2];
+      return _this.fillDragEndParams(childMoveable, childEvent);
+    });
     triggerEvent(moveable, "onRenderGroupEnd", fillParams(moveable, e, {
       isPinch: !!e.isPinch,
       isDrag: e.isDrag,
-      targets: moveable.props.targets
+      targets: moveable.props.targets,
+      events: params
     }));
   },
   dragControlStart: function(moveable, e) {
@@ -42957,6 +43387,9 @@ var Renderable = {
   dragControl: function(moveable, e) {
     return this.drag(moveable, e);
   },
+  dragControlAfter: function(moveable, e) {
+    return this.dragAfter(moveable, e);
+  },
   dragControlEnd: function(moveable, e) {
     return this.dragEnd(moveable, e);
   },
@@ -42968,6 +43401,18 @@ var Renderable = {
   },
   dragGroupControlEnd: function(moveable, e) {
     return this.dragGroupEnd(moveable, e);
+  },
+  fillDragParams: function(moveable, e) {
+    return fillParams(moveable, e, {
+      isPinch: !!e.isPinch,
+      transform: getNextTransformText(e)
+    });
+  },
+  fillDragEndParams: function(moveable, e) {
+    return fillParams(moveable, e, {
+      isPinch: !!e.isPinch,
+      isDrag: e.isDrag
+    });
   }
 };
 function triggerAble(moveable, ableType, eventOperation, eventAffix, eventType, e, requestInstant) {
@@ -42980,15 +43425,15 @@ function triggerAble(moveable, ableType, eventOperation, eventAffix, eventType,
   var eventName = "" + eventOperation + eventAffix + eventType;
   var conditionName = "" + eventOperation + eventAffix + "Condition";
   var isEnd = eventType === "End";
-  var isAfter = eventType.indexOf("After") > -1;
+  var isAfter = eventType === "After";
   var isFirstStart = isStart && (!moveable.targetGesto || !moveable.controlGesto || !moveable.targetGesto.isFlag() || !moveable.controlGesto.isFlag());
   if (isFirstStart) {
     moveable.updateRect(eventType, true, false);
   }
-  if (eventType === "" && !isAfter && !isRequest) {
+  if (eventType === "" && !isRequest) {
     convertDragDist(moveable.state, e);
   }
-  var ables = __spreadArrays$1([BeforeRenderable], moveable[ableType], [Renderable]);
+  var ables = __spreadArray([], moveable[ableType]);
   if (isRequest) {
     var requestAble_1 = e.requestAble;
     if (!ables.some(function(able) {
@@ -43002,12 +43447,12 @@ function triggerAble(moveable, ableType, eventOperation, eventAffix, eventType,
   if (!ables.length) {
     return false;
   }
-  var events = ables.filter(function(able) {
+  var eventAbles = __spreadArray(__spreadArray([BeforeRenderable], ables), [Renderable]).filter(function(able) {
     return able[eventName];
   });
   var datas = e.datas;
   if (isFirstStart) {
-    events.forEach(function(able) {
+    eventAbles.forEach(function(able) {
       able.unset && able.unset(moveable);
     });
   }
@@ -43016,23 +43461,44 @@ function triggerAble(moveable, ableType, eventOperation, eventAffix, eventType,
   if (isEnd && inputEvent) {
     inputTarget = document.elementFromPoint(e.clientX, e.clientY) || inputEvent.target;
   }
-  var results = events.filter(function(able) {
+  var resultCount = 0;
+  var results = eventAbles.filter(function(able) {
     var ableName = able.name;
     var nextDatas = datas[ableName] || (datas[ableName] = {});
     if (isStart) {
       nextDatas.isEventStart = !able[conditionName] || able[conditionName](moveable, e);
     }
     if (nextDatas.isEventStart) {
-      return able[eventName](moveable, __assign$2(__assign$2({}, e), {
+      var result = able[eventName](moveable, __assign$2(__assign$2({}, e), {
+        resultCount,
         datas: nextDatas,
         originalDatas: datas,
         inputTarget
       }));
+      if (isStart && result === false) {
+        nextDatas.isEventStart = false;
+      }
+      resultCount += result ? 1 : 0;
+      return result;
     }
     return false;
   });
   var isUpdate = results.length;
-  var isForceEnd = isStart && events.length && !isUpdate;
+  var isForceEnd = false;
+  if (isStart && eventAbles.length && !isUpdate) {
+    isForceEnd = eventAbles.filter(function(able) {
+      var ableName = able.name;
+      var nextDatas = datas[ableName];
+      if (nextDatas.isEventStart) {
+        if (able.dragRelation === "strong") {
+          nextDatas.isEventStart = false;
+          return false;
+        }
+        return true;
+      }
+      return false;
+    }).length === 0;
+  }
   if (isEnd || isForceEnd) {
     moveable.state.gesto = null;
     if (moveable.moveables) {
@@ -43042,15 +43508,18 @@ function triggerAble(moveable, ableType, eventOperation, eventAffix, eventType,
     }
   }
   if (isFirstStart && isForceEnd) {
-    events.forEach(function(able) {
+    eventAbles.forEach(function(able) {
       able.unset && able.unset(moveable);
     });
   }
+  if (isStart && !isRequest && isUpdate) {
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+  }
   if (moveable.isUnmounted || isForceEnd) {
     return false;
   }
   if (!isStart && isUpdate && !requestInstant || isEnd) {
-    moveable.updateRect(eventType, true, false);
+    moveable.updateRect(isEnd ? eventType : "", true, false);
     moveable.forceUpdate();
   }
   if (!isStart && !isEnd && !isAfter && isUpdate && !requestInstant) {
@@ -43068,7 +43537,7 @@ function getTargetAbleGesto(moveable, moveableTarget, eventAffix) {
   var startFunc = function(e) {
     var eventTarget = e.inputEvent.target;
     var areaElement = moveable.areaElement;
-    return eventTarget === areaElement || !moveable.isMoveableElement(eventTarget) || hasClass(eventTarget, "moveable-area") || hasClass(eventTarget, "moveable-padding");
+    return eventTarget === areaElement || !moveable.isMoveableElement(eventTarget) && !moveable.controlBox.getElement().contains(eventTarget) || hasClass(eventTarget, "moveable-area") || hasClass(eventTarget, "moveable-padding");
   };
   return getAbleGesto(moveable, targets, "targetAbles", eventAffix, {
     dragStart: startFunc,
@@ -43081,6 +43550,7 @@ function getAbleGesto(moveable, target, ableType, eventAffix, conditionFunctions
   }
   var _a3 = moveable.props, pinchOutside = _a3.pinchOutside, pinchThreshold = _a3.pinchThreshold;
   var options = {
+    preventDefault: false,
     container: window,
     pinchThreshold,
     pinchOutside
@@ -43155,10 +43625,31 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
       "mouseEnter": null,
       "mouseLeave": null
     };
+    _this._prevTarget = null;
+    _this._prevDragArea = false;
+    _this._observer = null;
+    _this._observerId = 0;
     _this.onPreventClick = function(e) {
       e.stopPropagation();
       removeEvent(window, "click", _this.onPreventClick, true);
     };
+    _this.checkUpdateRect = function() {
+      if (_this.isDragging()) {
+        return;
+      }
+      var parentMoveable = _this.props.parentMoveable;
+      if (parentMoveable) {
+        parentMoveable.checkUpdateRect();
+        return;
+      }
+      cancelAnimationFrame$1(_this._observerId);
+      _this._observerId = requestAnimationFrame$1(function() {
+        if (_this.isDragging()) {
+          return;
+        }
+        _this.updateRect();
+      });
+    };
     return _this;
   }
   var __proto = MoveableManager2.prototype;
@@ -43200,17 +43691,21 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
     this.controlBox.getElement();
     var props = this.props;
     var parentMoveable = props.parentMoveable, container = props.container, wrapperMoveable = props.wrapperMoveable;
-    this.updateEvent(props);
-    this.updateNativeEvents(props);
+    this._updateTargets();
+    this._updateNativeEvents();
+    this._updateEvents();
     if (!container && !parentMoveable && !wrapperMoveable) {
       this.updateRect("", false, true);
     }
     this.updateCheckInput();
+    this._updateObserver(this.props);
   };
   __proto.componentDidUpdate = function(prevProps) {
-    this.updateNativeEvents(prevProps);
-    this.updateEvent(prevProps);
+    this._updateNativeEvents();
+    this._updateEvents();
+    this._updateTargets();
     this.updateCheckInput();
+    this._updateObserver(prevProps);
   };
   __proto.componentWillUnmount = function() {
     this.isUnmounted = true;
@@ -43283,77 +43778,6 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
     var rootContainer = parentMoveable ? parentMoveable.props.rootContainer : props.rootContainer;
     this.updateState(getTargetInfo(this.controlBox && this.controlBox.getElement(), target, container, container, rootContainer || container), parentMoveable ? false : isSetState);
   };
-  __proto.isTargetChanged = function(prevProps, useDragArea) {
-    var props = this.props;
-    var target = props.dragTarget || props.target;
-    var prevTarget = prevProps.dragTarget || prevProps.target;
-    var dragArea = props.dragArea;
-    var prevDragArea = prevProps.dragArea;
-    var isTargetChanged = !dragArea && prevTarget !== target;
-    return isTargetChanged || (useDragArea || dragArea) && prevDragArea !== dragArea;
-  };
-  __proto.updateNativeEvents = function(prevProps) {
-    var _this = this;
-    var props = this.props;
-    var target = props.dragArea ? this.areaElement : this.state.target;
-    var events = this.events;
-    var eventKeys = getKeys(events);
-    if (this.isTargetChanged(prevProps)) {
-      for (var eventName in events) {
-        var manager = events[eventName];
-        manager && manager.destroy();
-        events[eventName] = null;
-      }
-    }
-    if (!target) {
-      return;
-    }
-    var enabledAbles = this.enabledAbles;
-    eventKeys.forEach(function(eventName2) {
-      var ables = filterAbles(enabledAbles, [eventName2]);
-      var hasAbles = ables.length > 0;
-      var manager2 = events[eventName2];
-      if (!hasAbles) {
-        if (manager2) {
-          manager2.destroy();
-          events[eventName2] = null;
-        }
-        return;
-      }
-      if (!manager2) {
-        manager2 = new EventManager(target, _this, eventName2);
-        events[eventName2] = manager2;
-      }
-      manager2.setAbles(ables);
-    });
-  };
-  __proto.updateEvent = function(prevProps) {
-    var controlBoxElement = this.controlBox.getElement();
-    var hasTargetAble = this.targetAbles.length;
-    var hasControlAble = this.controlAbles.length;
-    var props = this.props;
-    var target = props.dragTarget || props.target;
-    var isTargetChanged = this.isTargetChanged(prevProps, true);
-    var isUnset = !hasTargetAble && this.targetGesto || isTargetChanged;
-    if (isUnset) {
-      unset(this, "targetGesto");
-      this.updateState({
-        gesto: null
-      });
-    }
-    if (!hasControlAble) {
-      unset(this, "controlGesto");
-    }
-    if (target && hasTargetAble && !this.targetGesto) {
-      this.targetGesto = getTargetAbleGesto(this, target, "");
-    }
-    if (!this.controlGesto && hasControlAble) {
-      this.controlGesto = getAbleGesto(this, controlBoxElement, "controlAbles", "Control");
-    }
-    if (isUnset) {
-      this.unsetAbles();
-    }
-  };
   __proto.isDragging = function() {
     return (this.targetGesto ? this.targetGesto.isFlag() : false) || (this.controlGesto ? this.controlGesto.isFlag() : false);
   };
@@ -43463,11 +43887,15 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
     if (!isChanged) {
       return;
     }
+    var moveableContainer = container || this.controlBox;
+    if (moveableContainer) {
+      this.unsetAbles();
+    }
     this.updateState({
       target,
       container
     });
-    if (!parentMoveable && (container || this.controlBox)) {
+    if (!parentMoveable && moveableContainer) {
       this.updateRect("End", false, false);
     }
   };
@@ -43485,15 +43913,11 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
   };
   __proto.unsetAbles = function() {
     var _this = this;
-    if (this.targetAbles.filter(function(able) {
+    this.targetAbles.forEach(function(able) {
       if (able.unset) {
         able.unset(_this);
-        return true;
       }
-      return false;
-    }).length) {
-      this.forceUpdate();
-    }
+    });
   };
   __proto.updateAbles = function(ables, eventAffix) {
     if (ables === void 0) {
@@ -43505,7 +43929,7 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
     var props = this.props;
     var triggerAblesSimultaneously = props.triggerAblesSimultaneously;
     var enabledAbles = ables.filter(function(able) {
-      return able && (able.always || props[able.name]);
+      return able && (able.always && props[able.name] !== false || props[able.name]);
     });
     var dragStart = "drag" + eventAffix + "Start";
     var pinchStart = "pinch" + eventAffix + "Start";
@@ -43555,6 +43979,52 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
   __proto.updateCheckInput = function() {
     this.targetGesto && (this.targetGesto.options.checkInput = this.props.checkInput);
   };
+  __proto._updateObserver = function(prevProps) {
+    var _a3;
+    var props = this.props;
+    var target = props.target;
+    if (!window.ResizeObserver || !target || !props.useResizeObserver) {
+      (_a3 = this._observer) === null || _a3 === void 0 ? void 0 : _a3.disconnect();
+      return;
+    }
+    if (prevProps.target === target && this._observer) {
+      return;
+    }
+    var observer = new ResizeObserver(this.checkUpdateRect);
+    observer.observe(target, {
+      box: "border-box"
+    });
+    this._observer = observer;
+    return;
+  };
+  __proto._updateEvents = function() {
+    var controlBoxElement = this.controlBox.getElement();
+    var hasTargetAble = this.targetAbles.length;
+    var hasControlAble = this.controlAbles.length;
+    var props = this.props;
+    var target = props.dragTarget || props.target;
+    var isUnset = !hasTargetAble && this.targetGesto || this._isTargetChanged(true);
+    if (isUnset) {
+      unset(this, "targetGesto");
+      this.updateState({
+        gesto: null
+      });
+    }
+    if (!hasControlAble) {
+      unset(this, "controlGesto");
+    }
+    if (target && hasTargetAble && !this.targetGesto) {
+      this.targetGesto = getTargetAbleGesto(this, target, "");
+    }
+    if (!this.controlGesto && hasControlAble) {
+      this.controlGesto = getAbleGesto(this, controlBoxElement, "controlAbles", "Control");
+    }
+  };
+  __proto._updateTargets = function() {
+    var props = this.props;
+    this._prevTarget = props.dragTarget || props.target;
+    this._prevDragArea = props.dragArea;
+  };
   __proto._renderLines = function() {
     var props = this.props;
     var edge = props.edge, zoom = props.zoom, hideDefaultLines = props.hideDefaultLines;
@@ -43567,6 +44037,51 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
     };
     return [renderLine(Renderer2, edge ? "n" : "", renderPoses[0], renderPoses[1], zoom, 0), renderLine(Renderer2, edge ? "e" : "", renderPoses[1], renderPoses[3], zoom, 1), renderLine(Renderer2, edge ? "w" : "", renderPoses[0], renderPoses[2], zoom, 2), renderLine(Renderer2, edge ? "s" : "", renderPoses[2], renderPoses[3], zoom, 3)];
   };
+  __proto._isTargetChanged = function(useDragArea) {
+    var props = this.props;
+    var target = props.dragTarget || props.target;
+    var prevTarget = this._prevTarget;
+    var prevDragArea = this._prevDragArea;
+    var dragArea = props.dragArea;
+    var isTargetChanged = !dragArea && prevTarget !== target;
+    var isDragAreaChanged = (useDragArea || dragArea) && prevDragArea !== dragArea;
+    return isTargetChanged || isDragAreaChanged;
+  };
+  __proto._updateNativeEvents = function() {
+    var _this = this;
+    var props = this.props;
+    var target = props.dragArea ? this.areaElement : this.state.target;
+    var events = this.events;
+    var eventKeys = getKeys(events);
+    if (this._isTargetChanged()) {
+      for (var eventName in events) {
+        var manager = events[eventName];
+        manager && manager.destroy();
+        events[eventName] = null;
+      }
+    }
+    if (!target) {
+      return;
+    }
+    var enabledAbles = this.enabledAbles;
+    eventKeys.forEach(function(eventName2) {
+      var ables = filterAbles(enabledAbles, [eventName2]);
+      var hasAbles = ables.length > 0;
+      var manager2 = events[eventName2];
+      if (!hasAbles) {
+        if (manager2) {
+          manager2.destroy();
+          events[eventName2] = null;
+        }
+        return;
+      }
+      if (!manager2) {
+        manager2 = new EventManager(target, _this, eventName2);
+        events[eventName2] = manager2;
+      }
+      manager2.setAbles(ables);
+    });
+  };
   MoveableManager2.defaultProps = {
     target: null,
     dragTarget: null,
@@ -43578,6 +44093,7 @@ var MoveableManager$1 = /* @__PURE__ */ function(_super) {
     wrapperMoveable: null,
     parentPosition: null,
     portalContainer: null,
+    useResizeObserver: false,
     ables: [],
     pinchThreshold: 20,
     dragArea: false,
@@ -43615,14 +44131,16 @@ var Groupable = {
       left,
       top
     };
+    var props = moveable.props;
     return targets.map(function(target, i2) {
       return React.createElement(MoveableManager$1, {
         key: "moveable" + i2,
         ref: refs(moveable, "moveables", i2),
         target,
         origin: false,
-        cssStyled: moveable.props.cssStyled,
-        customStyledMap: moveable.props.customStyledMap,
+        cssStyled: props.cssStyled,
+        customStyledMap: props.customStyledMap,
+        useResizeObserver: props.useResizeObserver,
         parentMoveable: moveable,
         parentPosition: position
       });
@@ -43630,12 +44148,15 @@ var Groupable = {
   }
 };
 var Clickable = makeAble("clickable", {
-  props: {},
+  props: {
+    clickable: Boolean
+  },
   events: {
     onClick: "click",
     onClickGroup: "clickGroup"
   },
   always: true,
+  dragRelation: "weak",
   dragStart: function(moveable, e) {
     if (!e.isRequest) {
       addEvent(window, "click", moveable.onPreventClick, true);
@@ -43653,10 +44174,12 @@ var Clickable = makeAble("clickable", {
     var target = moveable.state.target;
     var inputEvent = e.inputEvent;
     var inputTarget = e.inputTarget;
-    if (!e.isDrag) {
+    var isMoveableElement = moveable.isMoveableElement(inputTarget);
+    var containsElement = !isMoveableElement && moveable.controlBox.getElement().contains(inputTarget);
+    if (!e.isDrag || containsElement) {
       this.unset(moveable);
     }
-    if (!inputEvent || !inputTarget || e.isDrag || moveable.isMoveableElement(inputTarget)) {
+    if (!inputEvent || !inputTarget || e.isDrag || moveable.isMoveableElement(inputTarget) || containsElement) {
       return;
     }
     var containsTarget = target.contains(inputTarget);
@@ -43693,15 +44216,15 @@ var Clickable = makeAble("clickable", {
       containsTarget
     }));
   },
-  dragControlEnd: function(moveable) {
-    this.endEvent(moveable);
+  dragControlEnd: function(moveable, e) {
+    this.dragEnd(moveable, e);
   },
-  dragGroupControlEnd: function(moveable) {
-    this.endEvent(moveable);
+  dragGroupControlEnd: function(moveable, e) {
+    this.dragEnd(moveable, e);
   },
   endEvent: function(moveable) {
     var _this = this;
-    requestAnimationFrame(function() {
+    requestAnimationFrame$1(function() {
       _this.unset(moveable);
     });
   },
@@ -43753,7 +44276,7 @@ var edgeDraggable = makeAble("edgeDraggable", {
     return Draggable.dragGroupEnd(moveable, getDraggableEvent(e));
   },
   unset: function(moveable) {
-    moveable.state.dragInfo = null;
+    return Draggable.unset(moveable);
   }
 });
 var IndividualGroupable = {
@@ -43851,31 +44374,6 @@ var MoveableGroup = /* @__PURE__ */ function(_super) {
     return _this;
   }
   var __proto = MoveableGroup2.prototype;
-  __proto.updateEvent = function(prevProps) {
-    var state = this.state;
-    var props = this.props;
-    var prevTarget = prevProps.dragTarget || state.target;
-    var nextTarget = props.dragTarget || this.areaElement;
-    if (prevTarget !== nextTarget) {
-      unset(this, "targetGesto");
-      unset(this, "controlGesto");
-      state.target = null;
-    }
-    if (!state.target) {
-      state.target = this.areaElement;
-      this.controlBox.getElement().style.display = "block";
-      this.targetGesto = getTargetAbleGesto(this, nextTarget, "Group");
-      this.controlGesto = getAbleGesto(this, this.controlBox.getElement(), "controlAbles", "GroupControl");
-    }
-    var isContainerChanged = !equals(prevProps.container, props.container);
-    if (isContainerChanged) {
-      state.container = props.container;
-    }
-    var _a3 = this.differ.update(props.targets), added = _a3.added, changed = _a3.changed, removed = _a3.removed;
-    if (isContainerChanged || added.length || changed.length || removed.length) {
-      this.updateRect();
-    }
-  };
   __proto.checkUpdate = function() {
     this.updateAbles();
   };
@@ -43942,7 +44440,38 @@ var MoveableGroup = /* @__PURE__ */ function(_super) {
     }
   };
   __proto.updateAbles = function() {
-    _super.prototype.updateAbles.call(this, __spreadArrays$1(this.props.ables, [Groupable]), "Group");
+    _super.prototype.updateAbles.call(this, __spreadArray(__spreadArray([], this.props.ables), [Groupable]), "Group");
+  };
+  __proto._updateTargets = function() {
+    _super.prototype._updateTargets.call(this);
+    this._prevTarget = this.props.dragTarget || this.areaElement;
+  };
+  __proto._updateEvents = function() {
+    var state = this.state;
+    var props = this.props;
+    var prevTarget = this._prevTarget;
+    var nextTarget = props.dragTarget || this.areaElement;
+    if (prevTarget !== nextTarget) {
+      unset(this, "targetGesto");
+      unset(this, "controlGesto");
+      state.target = null;
+    }
+    if (!state.target) {
+      state.target = this.areaElement;
+      this.controlBox.getElement().style.display = "block";
+      this.targetGesto = getTargetAbleGesto(this, nextTarget, "Group");
+      this.controlGesto = getAbleGesto(this, this.controlBox.getElement(), "controlAbles", "GroupControl");
+    }
+    var isContainerChanged = !equals(state.container, props.container);
+    if (isContainerChanged) {
+      state.container = props.container;
+    }
+    var _a3 = this.differ.update(props.targets), added = _a3.added, changed = _a3.changed, removed = _a3.removed;
+    if (isContainerChanged || added.length || changed.length || removed.length) {
+      this.updateRect();
+    }
+  };
+  __proto._updateObserver = function() {
   };
   MoveableGroup2.defaultProps = __assign$2(__assign$2({}, MoveableManager$1.defaultProps), {
     transformOrigin: ["50%", "50%"],
@@ -44021,14 +44550,16 @@ var MoveableIndividualGroup = /* @__PURE__ */ function(_super) {
   };
   __proto.updateRenderPoses = function() {
   };
-  __proto.updateEvent = function() {
-  };
   __proto.checkUpdate = function() {
   };
   __proto.triggerEvent = function() {
   };
   __proto.updateAbles = function() {
   };
+  __proto._updateEvents = function() {
+  };
+  __proto._updateObserver = function() {
+  };
   return MoveableIndividualGroup2;
 }(MoveableManager$1);
 var InitialMoveable = /* @__PURE__ */ function(_super) {
@@ -44056,7 +44587,7 @@ var InitialMoveable = /* @__PURE__ */ function(_super) {
     this.defaultStyled = styled("div", prefixCSS(PREFIX, MOVEABLE_CSS + style));
   };
   InitialMoveable2.getTotalAbles = function() {
-    return __spreadArrays$1([Default, Groupable, IndividualGroupable, DragArea], this.defaultAbles);
+    return __spreadArray([Default, Groupable, IndividualGroupable, DragArea], this.defaultAbles);
   };
   __proto.render = function() {
     var moveableContructor = this.constructor;
@@ -44064,12 +44595,11 @@ var InitialMoveable = /* @__PURE__ */ function(_super) {
       moveableContructor.makeStyled();
     }
     var _a3 = this.props, userAbles = _a3.ables, userProps = _a3.props, props = __rest(_a3, ["ables", "props"]);
-    var refTargets = getRefTargets(props.target || props.targets);
+    var refTargets = this._updateRefs(true);
     var elementTargets = getElementTargets(refTargets, this.selectorMap);
-    this.refTargets = refTargets;
     var isGroup = elementTargets.length > 1;
     var totalAbles = moveableContructor.getTotalAbles();
-    var ables = __spreadArrays$1(totalAbles, userAbles || []);
+    var ables = __spreadArray(__spreadArray([], totalAbles), userAbles || []);
     var nextProps = __assign$2(__assign$2(__assign$2({}, props), userProps || {}), {
       ables,
       cssStyled: moveableContructor.defaultStyled,
@@ -44102,15 +44632,20 @@ var InitialMoveable = /* @__PURE__ */ function(_super) {
     }
   };
   __proto.componentDidMount = function() {
-    this.updateRefs();
+    this._updateRefs();
   };
   __proto.componentDidUpdate = function() {
-    this.updateRefs();
+    this._updateRefs();
   };
-  __proto.updateRefs = function(isReset) {
-    var refTargets = getRefTargets(this.props.target || this.props.targets);
-    var isUpdate = this.refTargets.some(function(target, i2) {
-      var nextTarget = refTargets[i2];
+  __proto.getManager = function() {
+    return this.moveable;
+  };
+  __proto._updateRefs = function(isRender) {
+    var prevRefTargets = this.refTargets;
+    var nextRefTargets = getRefTargets(this.props.target || this.props.targets);
+    var isBrowser = typeof document !== "undefined";
+    var isUpdate = prevRefTargets.length !== nextRefTargets.length || prevRefTargets.some(function(target, i2) {
+      var nextTarget = nextRefTargets[i2];
       if (!target && !nextTarget) {
         return false;
       } else if (target !== nextTarget) {
@@ -44118,11 +44653,11 @@ var InitialMoveable = /* @__PURE__ */ function(_super) {
       }
       return false;
     });
-    var selectorMap = isReset ? {} : this.selectorMap;
+    var selectorMap = this.selectorMap;
     var nextSelectorMap = {};
     this.refTargets.forEach(function(target) {
       if (isString(target)) {
-        if (!selectorMap[target]) {
+        if (!selectorMap[target] && isBrowser) {
           isUpdate = true;
           nextSelectorMap[target] = [].slice.call(document.querySelectorAll(target));
         } else {
@@ -44130,13 +44665,12 @@ var InitialMoveable = /* @__PURE__ */ function(_super) {
         }
       }
     });
+    this.refTargets = nextRefTargets;
     this.selectorMap = nextSelectorMap;
-    if (isUpdate) {
+    if (!isRender && isUpdate) {
       this.forceUpdate();
     }
-  };
-  __proto.getManager = function() {
-    return this.moveable;
+    return nextRefTargets;
   };
   InitialMoveable2.defaultAbles = [];
   InitialMoveable2.customStyledMap = {};
@@ -51646,7 +52180,7 @@ init_fn = async function() {
   const hApp = {
     width: __privateGet(this, _cfg3).oCfg.window.width,
     height: __privateGet(this, _cfg3).oCfg.window.height,
-    backgroundColor: __privateGet(this, _cfg3).oCfg.init.bg_color = parseColor(String(__privateGet(this, _cfg3).oCfg.init.bg_color)),
+    backgroundColor: parseColor(String(__privateGet(this, _cfg3).oCfg.init.bg_color)),
     resolution: (_b3 = globalThis.devicePixelRatio) != null ? _b3 : 1,
     autoResize: true
   };