@lumiscaphe/viewer 4.1.17 → 4.2.1

package/dist/lib/index.js

@@ -1,9 +1,9 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ls-viewer-container{display:block;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;width:100%;height:100%}.ls-viewer-container-image,.ls-viewer-container-video{cursor:default;pointer-events:none}.ls-viewer-container-vrcube{cursor:pointer;cursor:grab}.ls-viewer-container-vrcube-grabbing{cursor:move;cursor:grabbing}.ls-viewer-container-vrobject{cursor:move;cursor:grab}.ls-viewer-container-vrobject-grabbing{cursor:move;cursor:grabbing}.ls-viewer-container-loading{cursor:progress}.ls-viewer-canvas{position:absolute;opacity:0;transition:opacity .5s}.ls-viewer-video{position:absolute}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import C from "debounce-promise";
-import * as P from "twgl.js";
+import D from "debounce-promise";
+import * as M from "twgl.js";
 import { v3 as h, m4 as c } from "twgl.js";
-import $ from "regression";
-class b {
+import U from "regression";
+class f {
   constructor(t, e) {
     this.width = t, this.height = e;
   }
@@ -11,7 +11,7 @@ class b {
     return this.width / this.height;
   }
 }
-class p {
+const P = class P {
   constructor(t, e, i, s) {
     this.top = t, this.left = e, this.width = i, this.height = s;
   }
@@ -20,63 +20,66 @@ class p {
   }
   static fit(t, e, i) {
     const s = t.aspect, r = e.aspect;
-    let n = 0, a = 0;
+    let a = 0, n = 0;
     switch (i) {
       case "contain":
-        n = r < s ? e.width : e.height * s, a = r < s ? e.width / s : e.height;
+        a = r < s ? e.width : e.height * s, n = r < s ? e.width / s : e.height;
         break;
       case "cover":
       default:
-        n = r < s ? e.height * s : e.width, a = r < s ? e.height : e.width / s;
+        a = r < s ? e.height * s : e.width, n = r < s ? e.height : e.width / s;
         break;
       case "fill":
-        n = e.width, a = e.height;
+        a = e.width, n = e.height;
         break;
     }
-    const o = (e.height - a) / 2, l = (e.width - n) / 2;
-    return new p(o, l, n, a);
+    const o = (e.height - n) / 2, u = (e.width - a) / 2;
+    return new P(o, u, a, n);
   }
   static project(t, e, i, s) {
-    const r = p.fit(t, e, i), n = r.width / t.width, a = r.height / t.height;
+    const r = P.fit(t, e, i), a = r.width / t.width, n = r.height / t.height;
     return {
-      x: Math.round(r.left + s.x * n),
-      y: Math.round(r.top + s.y * a)
+      x: Math.round(r.left + s.x * a),
+      y: Math.round(r.top + s.y * n)
     };
   }
   static unproject(t, e, i, s) {
-    const r = p.fit(t, e, i), n = r.width / t.width, a = r.height / t.height;
+    const r = P.fit(t, e, i), a = r.width / t.width, n = r.height / t.height;
     return {
-      x: Math.round((s.x - r.left) / n),
-      y: Math.round((s.y - r.top) / a)
+      x: Math.round((s.x - r.left) / a),
+      y: Math.round((s.y - r.top) / n)
     };
   }
-  static getStandardAspectRatio(t, e) {
+  static getStandardAspectRatio(t, e, i) {
     if (t === 0 || e === 0)
       return 0;
-    const i = t / e;
-    if (t < e) {
-      const n = Math.abs(0.75 - i), a = Math.abs(9 / 16 - i);
-      return n < a ? 3 / 4 : 9 / 16;
-    }
-    const s = Math.abs(4 / 3 - i), r = Math.abs(16 / 9 - i);
-    return s < r ? 4 / 3 : 16 / 9;
+    if (i)
+      return i;
+    const s = t / e;
+    return t < e ? s < P.PORTRAIT_ASPECT_BOUNDARY ? 9 / 16 : 3 / 4 : s < P.LANDSCAPE_ASPECT_BOUNDARY ? 4 / 3 : 16 / 9;
   }
-  static getStandardResolution(t, e) {
+  static getStandardResolution(t, e, i) {
     if (t === 0 || e === 0)
-      return new b(0, 0);
-    const i = p.getStandardAspectRatio(t, e);
+      return new f(0, 0);
+    const s = P.getStandardAspectRatio(t, e, i);
+    if (i) {
+      const a = P.getStandardQuality(Math.min(t, e));
+      return new f(Math.round(a * s), Math.round(a));
+    }
     if (t < e) {
-      const r = p.getStandardQuality(Math.max(e * i, t));
-      return new b(Math.round(r), Math.round(r / i));
+      const a = P.getStandardQuality(Math.max(e * s, t));
+      return new f(Math.round(a), Math.round(a / s));
     }
-    const s = p.getStandardQuality(Math.max(t / i, e));
-    return new b(Math.round(s * i), Math.round(s));
+    const r = P.getStandardQuality(Math.max(t / s, e));
+    return new f(Math.round(r * s), Math.round(r));
   }
   static getStandardQuality(t) {
-    return t <= 240 ? 240 : t <= 360 ? 360 : t <= 480 ? 480 : t <= 720 ? 720 : 1080;
+    return t <= 720 ? 720 : 1080;
   }
-}
-class U {
+};
+P.LANDSCAPE_ASPECT_BOUNDARY = Math.sqrt(4 / 3 * (16 / 9)), P.PORTRAIT_ASPECT_BOUNDARY = Math.sqrt(3 / 4 * (9 / 16));
+let b = P;
+class N {
   constructor(t) {
     this.element = document.createElement("canvas"), this.element.classList.add("ls-viewer-canvas"), this.element.style.opacity = "0", this.element.width = 0, this.element.height = 0, this.context = this.element.getContext("2d"), this.backCanvas = document.createElement("canvas"), this.backContext = this.backCanvas.getContext("2d"), this.fit = t, this.pixelRatio = 1;
   }
@@ -90,7 +93,7 @@ class U {
     t ? this.element.style.display = "none" : this.element.style.opacity = "0";
   }
   get resolution() {
-    return new b(this.element.width / this.pixelRatio, this.element.height / this.pixelRatio);
+    return new f(this.element.width / this.pixelRatio, this.element.height / this.pixelRatio);
   }
   resize(t, e, i) {
     this.element.width = t * i, this.element.height = e * i, this.element.style.width = `${t}px`, this.element.style.height = `${e}px`, this.backCanvas.width = t * i, this.backCanvas.height = e * i, this.pixelRatio = i;
@@ -99,7 +102,7 @@ class U {
     if (!t)
       return;
     this.requestAnimationId && (cancelAnimationFrame(this.requestAnimationId), this.requestAnimationId = void 0);
-    const s = p.fit(new b(t.width, t.height), new b(this.element.width, this.element.height), this.fit);
+    const s = b.fit(new f(t.width, t.height), new f(this.element.width, this.element.height), this.fit);
     e ? (this.backContext.drawImage(this.element, 0, 0), this.context.globalAlpha = 0, this.fadeLoop(t, i || 0)) : (this.context.globalAlpha = 1, this.context.drawImage(t, s.left, s.top, s.width, s.height)), this.image = t;
   }
   fadeLoop(t, e) {
@@ -107,15 +110,15 @@ class U {
       cancelAnimationFrame(this.requestAnimationId), this.requestAnimationId = void 0;
       return;
     }
-    const i = Math.min(this.context.globalAlpha + e, 1), s = p.fit(new b(t.width, t.height), new b(this.element.width, this.element.height), this.fit);
+    const i = Math.min(this.context.globalAlpha + e, 1), s = b.fit(new f(t.width, t.height), new f(this.element.width, this.element.height), this.fit);
     this.context.clearRect(0, 0, this.element.width, this.element.height), this.context.globalAlpha = 1, this.context.drawImage(this.backCanvas, 0, 0), this.context.globalAlpha = i, this.context.drawImage(t, s.left, s.top, s.width, s.height), this.requestAnimationId = requestAnimationFrame(() => {
       this.fadeLoop(t, e);
     });
   }
 }
-class N {
+class B {
   constructor() {
-    this.element = document.createElement("canvas"), this.element.classList.add("ls-viewer-canvas"), this.element.style.opacity = "0", this.element.width = 0, this.element.height = 0, this.context = P.getContext(this.element, { preserveDrawingBuffer: !0 }), this.context && this.context.isContextLost() && (this.context = void 0), P.setDefaults({ textureColor: [1, 1, 1, 1] });
+    this.element = document.createElement("canvas"), this.element.classList.add("ls-viewer-canvas"), this.element.style.opacity = "0", this.element.width = 0, this.element.height = 0, this.context = M.getContext(this.element, { preserveDrawingBuffer: !0 }), this.context && this.context.isContextLost() && (this.context = void 0), M.setDefaults({ textureColor: [1, 1, 1, 1] });
   }
   show() {
     this.element.style.opacity = "1";
@@ -145,44 +148,44 @@ class w {
     return t - e * Math.floor(t / e);
   }
   static perspectiveWithFovX(t, e, i, s, r) {
-    const n = Math.tan(t / 2), a = n / e;
-    return this.perspectiveWithLeft(-n, n, -a, a, i, s, r);
+    const a = Math.tan(t / 2), n = a / e;
+    return this.perspectiveWithLeft(-a, a, -n, n, i, s, r);
   }
   static perspectiveWithFovY(t, e, i, s, r) {
-    const n = i * Math.tan(t / 2), a = n * e;
-    return this.perspectiveWithLeft(-a, a, -n, n, i, s, r);
+    const a = i * Math.tan(t / 2), n = a * e;
+    return this.perspectiveWithLeft(-n, n, -a, a, i, s, r);
   }
-  static perspectiveWithLeft(t, e, i, s, r, n, a) {
-    a = a || new Float32Array(16);
-    const o = e + t, l = e - t, u = s + i, f = s - i, d = n - r;
-    return a[0] = 2 * r / l, a[1] = 0, a[2] = 0, a[3] = 0, a[4] = 0, a[5] = 2 * r / f, a[6] = 0, a[7] = 0, a[8] = o / l, a[9] = u / f, a[10] = -n / d, a[11] = -1, a[12] = 0, a[13] = 0, a[14] = -n * r / d, a[15] = 0, a;
+  static perspectiveWithLeft(t, e, i, s, r, a, n) {
+    n = n || new Float32Array(16);
+    const o = e + t, u = e - t, l = s + i, p = s - i, d = a - r;
+    return n[0] = 2 * r / u, n[1] = 0, n[2] = 0, n[3] = 0, n[4] = 0, n[5] = 2 * r / p, n[6] = 0, n[7] = 0, n[8] = o / u, n[9] = l / p, n[10] = -a / d, n[11] = -1, n[12] = 0, n[13] = 0, n[14] = -a * r / d, n[15] = 0, n;
   }
 }
-const A = class A {
+const O = class O {
   static initCubeFace(t, e, i) {
     let s = [0, 0, 0];
-    const r = h.subtract(e, t), n = h.mulScalar([0, 1, 0], h.length(r)), a = h.mulScalar(h.normalize(h.cross(r, n)), h.length(r)), o = h.mulScalar(h.normalize(h.cross(n, a)), h.length(r));
+    const r = h.subtract(e, t), a = h.mulScalar([0, 1, 0], h.length(r)), n = h.mulScalar(h.normalize(h.cross(r, a)), h.length(r)), o = h.mulScalar(h.normalize(h.cross(a, n)), h.length(r));
     switch (i) {
       case "front":
-        e = h.add(t, o), s = h.normalize(n);
+        e = h.add(t, o), s = h.normalize(a);
         break;
       case "right":
-        e = h.add(t, a), s = h.normalize(n);
+        e = h.add(t, n), s = h.normalize(a);
         break;
       case "back":
-        e = h.subtract(t, o), s = h.normalize(n);
+        e = h.subtract(t, o), s = h.normalize(a);
         break;
       case "left":
-        e = h.subtract(t, a), s = h.normalize(n);
+        e = h.subtract(t, n), s = h.normalize(a);
         break;
       case "up":
-        e = h.add(t, n), s = h.normalize(h.mulScalar(o, -1));
+        e = h.add(t, a), s = h.normalize(h.mulScalar(o, -1));
         break;
       case "down":
-        e = h.subtract(t, n), s = h.normalize(o);
+        e = h.subtract(t, a), s = h.normalize(o);
         break;
     }
-    return new A(e, t, s);
+    return new O(e, t, s);
   }
   constructor(t, e, i) {
     this.target = h.copy(t), this.eye = h.copy(e), this.up = h.copy(i);
@@ -197,12 +200,12 @@ const A = class A {
     return c.inverse(c.lookAt(this.eye, this.target, this.up));
   }
   clone() {
-    return new A(h.copy(this.target), h.copy(this.eye), h.copy(this.up));
+    return new O(h.copy(this.target), h.copy(this.eye), h.copy(this.up));
   }
 };
-A.default = new A([0, 0, 0], [2, 2, 2], [0, 1, 0]);
-let L = A;
-class B {
+O.default = new O([0, 0, 0], [2, 2, 2], [0, 1, 0]);
+let S = O;
+class X {
   constructor(t) {
     this.target = t.target;
     const e = h.normalize(h.subtract(t.eye, t.target)), i = h.dot(e, [1, 0, 0]), s = h.dot(e, [0, 1, 0]), r = h.dot(e, [0, 0, 1]);
@@ -214,15 +217,15 @@ class B {
   }
   pointOfView(t) {
     const e = c.rotationY(this.longitude), i = c.rotationX(-this.latitude), s = c.rotationZ(0), r = c.multiply(e, c.multiply(i, s));
-    let n = [0, 0, -1];
-    n = c.transformPoint(r, n);
-    let a = [0, 1, 0];
+    let a = [0, 0, -1];
     a = c.transformPoint(r, a);
-    const o = h.subtract(t, h.mulScalar(n, this.distance));
-    return new L(t, o, a);
+    let n = [0, 1, 0];
+    n = c.transformPoint(r, n);
+    const o = h.subtract(t, h.mulScalar(a, this.distance));
+    return new S(t, o, n);
   }
 }
-class X {
+class Y {
   constructor() {
   }
   async animation(t) {
@@ -277,7 +280,7 @@ class H {
     return {
       id: t.getAttribute("id"),
       name: t.getAttribute("name"),
-      pointOfView: new L(
+      pointOfView: new S(
         [
           parseFloat(t.querySelector("PointOfView Target").getAttribute("x")),
           //
@@ -315,7 +318,7 @@ const g = class g {
     return Object.entries(t).filter(([e, i]) => i != null).map(([e, i]) => `${e}=${i}`).join("&");
   }
   static sceneParameters(t) {
-    const e = t.scene, i = e.length > 1 ? e.find((n) => n.accessory) : null, s = e.length > 1 ? e.find((n) => n.decor) : null, r = e.find((n) => n !== i && n !== s);
+    const e = t.scene, i = e.length > 1 ? e.find((a) => a.accessory) : null, s = e.length > 1 ? e.find((a) => a.decor) : null, r = e.find((a) => a !== i && a !== s);
     return {
       databaseId: r.database,
       configuration: r?.configuration,
@@ -415,7 +418,7 @@ const g = class g {
   }
 };
 g.xmlRegex = /directUrl="([^"]*)"/g;
-let S = g;
+let F = g;
 class m {
   constructor(t) {
     this.server = t;
@@ -627,20 +630,20 @@ class m {
     };
   }
 }
-class D {
+class V {
   constructor(t, e, i) {
     switch (e) {
       case "static":
-        this.webrender = new X();
+        this.webrender = new Y();
         break;
       case "v1":
-        this.webrender = new S(t), this.webrenderV2 = new m(t);
+        this.webrender = new F(t), this.webrenderV2 = new m(t);
         break;
       case "v2":
         this.webrender = new m(t), this.webrenderV2 = new m(t);
         break;
       default:
-        this.webrender = new S(t), this.webrenderV2 = new m(t);
+        this.webrender = new F(t), this.webrenderV2 = new m(t);
         break;
     }
     this.delegate = i, this.loadingId = 0, this.loaded = 0, this.total = 0, this.databases = [], this.onLoadStart = i && i.onLoadStart ? i.onLoadStart : () => {
@@ -677,8 +680,8 @@ class D {
   }
   async loadImage(t, e) {
     const i = new Image();
-    i.crossOrigin = location.protocol === "file:" && !D.isValidHttpUrl(t) ? null : "anonymous";
-    const s = new Promise((r, n) => {
+    i.crossOrigin = location.protocol === "file:" && !V.isValidHttpUrl(t) ? null : "anonymous";
+    const s = new Promise((r, a) => {
       i.addEventListener(
         "load",
         () => {
@@ -687,8 +690,8 @@ class D {
         { once: !0 }
       ), i.addEventListener(
         "error",
-        (a) => {
-          e === this.loadingId && n(`${a.type} : ${t}`);
+        (n) => {
+          e === this.loadingId && a(`${n.type} : ${t}`);
         },
         { once: !0 }
       );
@@ -697,27 +700,27 @@ class D {
   }
   loadImageFrames(t, e, i, s) {
     this.total = t.length;
-    const r = new Array(t.length), n = i || 0;
-    for (let a = 0, o = t.length; a < o; a += 1) {
-      const l = Math.ceil(a / 2) * (a % 2 === 0 ? 1 : -1), u = e ? w.mod(n + l, o) : a;
-      r[u] = this.loadImage(t[u], s);
+    const r = new Array(t.length), a = i || 0;
+    for (let n = 0, o = t.length; n < o; n += 1) {
+      const u = Math.ceil(n / 2) * (n % 2 === 0 ? 1 : -1), l = e ? w.mod(a + u, o) : n;
+      r[l] = this.loadImage(t[l], s);
     }
     return Promise.all(r).then(() => this.onLoadEnd(this.progress)).catch(() => {
     }), r;
   }
   async loadVideo(t, e, i, s) {
     t.loop = i;
-    const r = new Promise((n, a) => {
+    const r = new Promise((a, n) => {
       t.addEventListener(
         "canplaythrough",
         () => {
-          s === this.loadingId && (this.loaded += 1, this.onLoadProgress(this.progress), n());
+          s === this.loadingId && (this.loaded += 1, this.onLoadProgress(this.progress), a());
         },
         { once: !0 }
       ), t.addEventListener(
         "error",
         (o) => {
-          s === this.loadingId && a(`${o.type} : ${e}`);
+          s === this.loadingId && n(`${o.type} : ${e}`);
         },
         { once: !0 }
       );
@@ -725,24 +728,24 @@ class D {
     return t.src = e, t.load(), r;
   }
   async loadVideoFrame(t, e, i, s, r) {
-    let n = 0;
-    return new Promise((a, o) => {
-      const l = () => {
+    let a = 0;
+    return new Promise((n, o) => {
+      const u = () => {
         if (r !== this.loadingId) return;
-        if (n !== s) {
-          n += 1;
+        if (a !== s) {
+          a += 1;
           return;
         }
-        t.removeEventListener("seeked", l);
-        const u = document.createElement("canvas");
-        u.width = t.videoWidth, u.height = t.videoHeight, u.getContext("2d").drawImage(t, 0, 0);
+        t.removeEventListener("seeked", u);
+        const l = document.createElement("canvas");
+        l.width = t.videoWidth, l.height = t.videoHeight, l.getContext("2d").drawImage(t, 0, 0);
         const d = new Image();
-        d.src = u.toDataURL(), a(d), this.loaded += 1, this.onLoadProgress(this.progress), s !== i - 1 && (t.currentTime += 1 / e);
+        d.src = l.toDataURL(), n(d), this.loaded += 1, this.onLoadProgress(this.progress), s !== i - 1 && (t.currentTime += 1 / e);
       };
-      t.addEventListener("seeked", l), t.addEventListener(
+      t.addEventListener("seeked", u), t.addEventListener(
         "error",
-        (u) => {
-          r === this.loadingId && o(u);
+        (l) => {
+          r === this.loadingId && o(l);
         },
         { once: !0 }
       );
@@ -750,16 +753,16 @@ class D {
   }
   loadVideoFrames(t, e, i, s) {
     this.total = e;
-    const r = new Array(e), n = document.createElement("video");
-    for (let a = 0, o = e; a < o; a += 1)
-      r[a] = this.loadVideoFrame(n, i, e, a, s);
-    return n.addEventListener(
+    const r = new Array(e), a = document.createElement("video");
+    for (let n = 0, o = e; n < o; n += 1)
+      r[n] = this.loadVideoFrame(a, i, e, n, s);
+    return a.addEventListener(
       "canplaythrough",
       () => {
-        s === this.loadingId && (n.currentTime = 1 / i / 2);
+        s === this.loadingId && (a.currentTime = 1 / i / 2);
       },
       { once: !0 }
-    ), n.src = t, n.load(), Promise.all(r).then(() => this.onLoadEnd(this.progress)).catch(() => {
+    ), a.src = t, a.load(), Promise.all(r).then(() => this.onLoadEnd(this.progress)).catch(() => {
     }), r;
   }
   async loadImageHotspots(t, e) {
@@ -788,40 +791,41 @@ class D {
       return t;
     let i = this.databases.find((o) => o.id === e.database);
     (!i || !i.xmlDoc) && (i = await this.webrender.database(e.database), this.databases.push(i));
-    const s = t.view.camera?.split("/"), r = s.length === 2 ? s[0] : void 0, n = s.length === 2 ? s[1] : s[0], a = i.getCameraId(n, r);
-    if (a)
-      return { ...t, view: { ...t.view, camera: a } };
+    const s = t.view.camera.split("/"), r = s.length === 2 ? s[0] : void 0, a = s.length === 2 ? s[1] : s[0], n = i.getCameraId(a, r);
+    if (n)
+      return { ...t, view: { ...t.view, camera: n } };
     {
-      const o = i.getCameraGroupId(n);
+      const o = i.getCameraGroupId(a);
       return o ? { ...t, view: { ...t.view, cameraGroup: o } } : t;
     }
   }
   async vrObjectFrameSnapshot(t, e, i) {
     if (!this.webrenderV2)
       return t;
-    const s = t.scene.find((n) => !n.decor && !n.accessory);
+    const s = t.scene.find((a) => !a.decor && !a.accessory);
     if (!s)
       return t;
-    let r = this.databases.find((n) => n.id === s.database);
-    if (r || (r = await this.webrender.database(s.database), this.databases.push(r)), this.webrender instanceof S) {
+    let r = this.databases.find((a) => a.id === s.database);
+    if (r || (r = await this.webrender.database(s.database), this.databases.push(r)), this.webrender instanceof F) {
       if (!t.view.camera)
         return t;
-      const n = r.getCameraGroupId(t.view.camera);
-      if (!n)
-        return t;
-      const a = r.getCameraGroupById(n);
+      const a = r.getCameraGroupId(t.view.camera);
       if (!a)
         return t;
-      const o = a.cameras[e];
+      const n = r.getCameraGroupById(a);
+      if (!n)
+        return t;
+      const o = n.cameras[e];
       return o ? { ...t, view: { ...t.view, camera: o.id } } : t;
-    } else if (this.webrender instanceof m)
-      if (t.view.camera) {
-        const n = r.getCameraById(t.view.camera);
+    } else if (this.webrender instanceof m) {
+      const a = typeof t.view.camera == "string" ? t.view.camera : t.view.camera?.id;
+      if (a) {
+        const n = r.getCameraById(a);
         if (!n)
           return t;
-        const a = new B(n.pointOfView), o = 2 * Math.PI / i;
-        a.longitude += e * o % (2 * Math.PI);
-        const l = a.pointOfView(n.pointOfView.target);
+        const o = new X(n.pointOfView), u = 2 * Math.PI / i;
+        o.longitude += e * u % (2 * Math.PI);
+        const l = o.pointOfView(n.pointOfView.target);
         return {
           ...t,
           view: {
@@ -852,11 +856,11 @@ class D {
         const n = r.getCameraGroupById(t.view.cameraGroup);
         if (!n)
           return t;
-        const a = n.cameras[e];
-        return a ? { ...t, view: { ...t.view, camera: a.id } } : t;
+        const o = n.cameras[e];
+        return o ? { ...t, view: { ...t.view, camera: o.id } } : t;
       } else
         return t;
-    else
+    } else
       return t;
   }
   async vrCubeFrameSnapshot(t, e) {
@@ -867,37 +871,37 @@ class D {
     if (s || (s = await this.webrender.database(i.database), this.databases.push(s)), !t.view.camera)
       return t;
     let r;
-    if (this.webrender instanceof S) {
-      const o = t.view.camera.split("/"), l = o.length === 2 ? o[0] : void 0, u = o.length === 2 ? o[1] : o[0];
-      r = s.getCameraId(u, l);
-    } else this.webrender instanceof m && (r = t.view.camera);
+    if (this.webrender instanceof F) {
+      const o = t.view.camera.split("/"), u = o.length === 2 ? o[0] : void 0, l = o.length === 2 ? o[1] : o[0];
+      r = s.getCameraId(l, u);
+    } else this.webrender instanceof m && (r = typeof t.view.camera == "string" ? t.view.camera : t.view.camera.id);
     if (!r)
       return t;
-    const n = s.getCameraById(r);
-    if (!n)
+    const a = s.getCameraById(r);
+    if (!a)
       return t;
-    const a = L.initCubeFace(n.pointOfView.eye, n.pointOfView.target, e);
+    const n = S.initCubeFace(a.pointOfView.eye, a.pointOfView.target, e);
     return {
       ...t,
       view: {
         ...t.view,
         camera: {
-          id: n.id,
+          id: a.id,
           pov: {
             target: {
-              x: a.target[0],
-              y: a.target[1],
-              z: a.target[2]
+              x: n.target[0],
+              y: n.target[1],
+              z: n.target[2]
             },
             eye: {
-              x: a.eye[0],
-              y: a.eye[1],
-              z: a.eye[2]
+              x: n.eye[0],
+              y: n.eye[1],
+              z: n.eye[2]
             },
             up: {
-              x: a.up[0],
-              y: a.up[1],
-              z: a.up[2]
+              x: n.up[0],
+              y: n.up[1],
+              z: n.up[2]
             }
           },
           lens: {
@@ -931,7 +935,7 @@ class D {
     return e.protocol === "http:" || e.protocol === "https:";
   }
 }
-class Y {
+class J {
   constructor() {
     this.element = document.createElement("video"), this.element.classList.add("ls-viewer-video"), this.element.style.opacity = "0", this.element.width = 0, this.element.height = 0, this.element.setAttribute("muted", ""), this.element.setAttribute("playsinline", ""), this.element.setAttribute("preload", "auto");
   }
@@ -942,11 +946,11 @@ class Y {
     this.element.style.opacity = "0";
   }
   resize(t, e, i, s) {
-    const r = p.fit(i, new b(t, e), s);
+    const r = b.fit(i, new f(t, e), s);
     this.element.style.top = `${r.top}px`, this.element.style.left = `${r.left}px`, this.element.style.width = `${r.width}px`, this.element.style.height = `${r.height}px`, (i.width !== this.element.width || i.height !== this.element.height) && (this.element.width = i.width, this.element.height = i.height);
   }
 }
-class J {
+class Q {
   constructor(t, e, i) {
     this.container = t, this.canvas = e, this.loader = i, this.hotspotList = [];
   }
@@ -960,25 +964,25 @@ class J {
   }
   async load(t, e, i, s) {
     let r = Promise.resolve();
-    const n = JSON.stringify(t);
-    n === this.snapshotHash && this.image ? r = r.then(() => this.canvas.draw(this.image, s, 0.05)) : r = r.then(
+    const a = JSON.stringify(t);
+    a === this.snapshotHash && this.image ? r = r.then(() => this.canvas.draw(this.image, s, 0.05)) : r = r.then(
       () => this.loader.loadImageSnapshot(t).then((o) => {
         this.canvas.draw(o, s, 0.05), this.image = o;
       })
     );
-    const a = JSON.stringify(e);
-    return (n !== this.snapshotHash || a !== this.hotspotsHash) && (e.length ? r = r.then(
+    const n = JSON.stringify(e);
+    return (a !== this.snapshotHash || n !== this.hotspotsHash) && (e.length ? r = r.then(
       () => this.loader.loadImageHotspots(t, e).then((o) => {
         this.hotspotList = o;
       })
-    ) : this.hotspotList = []), this.hotspotsHash = a, this.snapshotHash = n, r;
+    ) : this.hotspotList = []), this.hotspotsHash = n, this.snapshotHash = a, r;
   }
   async pick(t, e) {
-    const i = new b(t.parameters.width, t.parameters.height), s = p.unproject(i, this.canvas.resolution, this.canvas.fit, e);
+    const i = new f(t.parameters.width, t.parameters.height), s = b.unproject(i, this.canvas.resolution, this.canvas.fit, e);
     return this.loader.loadImagePick(t, s);
   }
   hotspots(t) {
-    return this.hotspotList.map((e) => ({ ...e, position2D: p.project(t, this.canvas.resolution, this.canvas.fit, e.position2D) })).map((e) => ({ ...e, visibility: p.contains(this.canvas.resolution, e.position2D) ? e.visibility : "OutOfFrustum" }));
+    return this.hotspotList.map((e) => ({ ...e, position2D: b.project(t, this.canvas.resolution, this.canvas.fit, e.position2D) })).map((e) => ({ ...e, visibility: b.contains(this.canvas.resolution, e.position2D) ? e.visibility : "OutOfFrustum" }));
   }
   snapshot(t, e) {
     return this.canvas.element.toDataURL(t, e);
@@ -1000,24 +1004,24 @@ class J {
   onDeviceOrientation(t) {
   }
 }
-class I {
+class L {
   constructor(t, e) {
     this.x = t, this.y = e;
   }
   clone() {
-    return new I(this.x, this.y);
+    return new L(this.x, this.y);
   }
 }
 class y {
   static pointFromMouseEvent(t) {
-    return new I(t.screenX, t.screenY);
+    return new L(t.screenX, t.screenY);
   }
   static pointFromTouchEvent(t) {
     const e = t.targetTouches[0] || t.changedTouches[0];
-    return new I(e.screenX, e.screenY);
+    return new L(e.screenX, e.screenY);
   }
 }
-class V {
+class j {
   constructor(...t) {
     t.length === 3 ? ({ 0: this.u, 1: this.v, 2: this.o } = t, this.w = h.cross(this.u, this.v)) : t.length === 4 ? { 0: this.u, 1: this.v, 2: this.w, 3: this.o } = t : (this.u = [1, 0, 0], this.v = [0, 1, 0], this.w = [0, 0, 1], this.o = [0, 0, 0]);
   }
@@ -1034,9 +1038,9 @@ class Z {
     this.x = t, this.y = e, this.time = i;
   }
 }
-class q {
+class R {
   constructor(t) {
-    this.points = [], this.onMotion = t, this.lastPoint = new I(0, 0), this.velocity = new I(0, 0), this.loop = this.loop.bind(this);
+    this.points = [], this.onMotion = t, this.lastPoint = new L(0, 0), this.velocity = new L(0, 0), this.loop = this.loop.bind(this);
   }
   destroy() {
     this.animationFrameId && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = void 0);
@@ -1049,7 +1053,7 @@ class q {
     if (this.points.length === 0)
       return;
     const t = this.points[0], e = this.points[this.points.length - 1], i = e.x - t.x, s = e.y - t.y, r = e.time - t.time;
-    this.velocity = new I(r === 0 ? 0 : i / (r / 15), r === 0 ? 0 : s / (r / 15)), this.animationFrameId && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = void 0), this.animationFrameId = requestAnimationFrame(this.loop);
+    this.velocity = new L(r === 0 ? 0 : i / (r / 15), r === 0 ? 0 : s / (r / 15)), this.animationFrameId && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = void 0), this.animationFrameId = requestAnimationFrame(this.loop);
   }
   stop() {
     this.animationFrameId && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = void 0), this.points = [];
@@ -1062,18 +1066,18 @@ class q {
     this.lastPoint.x += this.velocity.x, this.lastPoint.y += this.velocity.y, this.velocity.x *= 0.9, this.velocity.y *= 0.9, this.onMotion(this.lastPoint.clone()), this.animationFrameId = requestAnimationFrame(this.loop);
   }
 }
-class Q {
+class W {
   constructor(t, e, i) {
-    this.isStarted = !1, this.pov = t, this.fov = w.degreesToRadians(e), this.orientationMatrix = c.identity(), this.inertia = new q(this.motion.bind(this)), this.onMotion = i, this.initPov = this.pov, this.initFov = this.fov, this.initOrientation = w.degreesToRadians(window.orientation) || 0, this.startPov = new L([0, 0, 1], [0, 0, 0], [0, 1, 0]), this.startSize = { width: 0, height: 0 }, this.previousPoint = new I(0, 0);
+    this.isStarted = !1, this.pov = t, this.fov = w.degreesToRadians(e), this.orientationMatrix = c.identity(), this.inertia = new R(this.motion.bind(this)), this.onMotion = i, this.initPov = this.pov, this.initFov = this.fov, this.initOrientation = w.degreesToRadians(window.orientation) || 0, this.startPov = new S([0, 0, 1], [0, 0, 0], [0, 1, 0]), this.startSize = { width: 0, height: 0 }, this.previousPoint = new L(0, 0);
   }
   destroy() {
     this.inertia.destroy();
   }
   get orientedPov() {
-    const t = h.normalize(h.cross(this.pov.up, this.pov.target)), e = new V(t, [0, 1, 0], this.pov.eye), i = c.identity();
+    const t = h.normalize(h.cross(this.pov.up, this.pov.target)), e = new j(t, [0, 1, 0], this.pov.eye), i = c.identity();
     c.multiply(i, e.localToGlobalMatrix, i), c.multiply(i, this.orientationMatrix, i), c.multiply(i, e.globalToLocalMatrix, i);
-    const s = c.transformDirection(i, this.pov.target), r = this.pov.eye, n = c.transformDirection(i, this.pov.up);
-    return new L(s, r, n);
+    const s = c.transformDirection(i, this.pov.target), r = this.pov.eye, a = c.transformDirection(i, this.pov.up);
+    return new S(s, r, a);
   }
   reset() {
     this.pov = this.initPov.clone(), this.fov = this.initFov;
@@ -1086,20 +1090,20 @@ class Q {
     const e = {
       x: t.x - this.previousPoint.x,
       y: t.y - this.previousPoint.y
-    }, i = w.accelerate(e.x, 1.3) / this.startSize.width * 0.2 * Math.PI * 1.5, s = w.accelerate(e.y, 1.3) / this.startSize.height * 0.2 * Math.PI, r = c.multiply(c.rotationY(i), c.rotationX(-s)), n = h.normalize(h.cross(this.pov.up, this.pov.target)), a = new V(n, [0, 1, 0], this.pov.eye), o = c.identity();
-    c.multiply(o, a.localToGlobalMatrix, o), c.multiply(o, r, o), c.multiply(o, a.globalToLocalMatrix, o);
-    const l = c.transformPoint(o, this.pov.target), u = c.transformDirection(o, this.pov.up);
-    h.cross(u, [0, 0, 1])[0] >= 0 && (this.pov.target = l, this.pov.up = u), this.previousPoint = t, this.onMotion();
+    }, i = w.accelerate(e.x, 1.3) / this.startSize.width * 0.2 * Math.PI * 1.5, s = w.accelerate(e.y, 1.3) / this.startSize.height * 0.2 * Math.PI, r = c.multiply(c.rotationY(i), c.rotationX(-s)), a = h.normalize(h.cross(this.pov.up, this.pov.target)), n = new j(a, [0, 1, 0], this.pov.eye), o = c.identity();
+    c.multiply(o, n.localToGlobalMatrix, o), c.multiply(o, r, o), c.multiply(o, n.globalToLocalMatrix, o);
+    const u = c.transformPoint(o, this.pov.target), l = c.transformDirection(o, this.pov.up);
+    h.cross(l, [0, 0, 1])[0] >= 0 && (this.pov.target = u, this.pov.up = l), this.previousPoint = t, this.onMotion();
   }
   end(t, e) {
     this.isStarted = !1, e && (this.inertia.track(t), this.inertia.start());
   }
   orientation(t, e, i) {
-    const s = w.degreesToRadians(window.orientation) || 0, r = w.degreesToRadians(t), n = w.degreesToRadians(-e), a = w.degreesToRadians(-i), o = c.rotationX(w.degreesToRadians(90));
-    c.rotateZ(o, this.initOrientation, o), c.rotateZ(o, r, o), c.rotateX(o, n, o), c.rotateY(o, a, o), c.rotateZ(o, -s, o), this.orientationMatrix = o, this.onMotion();
+    const s = w.degreesToRadians(window.orientation) || 0, r = w.degreesToRadians(t), a = w.degreesToRadians(-e), n = w.degreesToRadians(-i), o = c.rotationX(w.degreesToRadians(90));
+    c.rotateZ(o, this.initOrientation, o), c.rotateZ(o, r, o), c.rotateX(o, a, o), c.rotateY(o, n, o), c.rotateZ(o, -s, o), this.orientationMatrix = o, this.onMotion();
   }
 }
-var W = `precision mediump float;
+var _ = `precision mediump float;
 
 uniform float u_mix;
 uniform samplerCube u_texture;
@@ -1111,7 +1115,7 @@ void main() {
   vec4 backColor = textureCube(u_texture_back, direction);
   vec4 color = textureCube(u_texture, direction);
   gl_FragColor = mix(backColor, color, u_mix);
-}`, _ = `attribute vec4 position;
+}`, K = `attribute vec4 position;
 
 uniform mat4 u_mvpi;
 
@@ -1121,27 +1125,27 @@ void main() {
   direction = (u_mvpi * position).xyz;
   gl_Position = position;
 }`;
-class K {
-  constructor(t, e, i, s) {
-    this.container = t, this.canvas = e, this.loader = i, this.images = [], this.hotspotsList = [[]];
-    const r = new L([0, 0, 1], [0, 0, 0], [0, 1, 0]), n = 60, a = c.rotationX(w.degreesToRadians(15));
-    c.transformDirection(a, r.target, r.target), c.transformDirection(a, r.up, r.up), this.interaction = new Q(r, n, () => {
+class tt {
+  constructor(t, e, i, s, r) {
+    this.container = t, this.canvas = e, this.loader = i, this.aspectRatioOverride = r, this.images = [], this.hotspotsList = [[]];
+    const a = new S([0, 0, 1], [0, 0, 0], [0, 1, 0]), n = 60, o = c.rotationX(w.degreesToRadians(15));
+    c.transformDirection(o, a.target, a.target), c.transformDirection(o, a.up, a.up), this.interaction = new W(a, n, () => {
       this.animationFrameId = requestAnimationFrame(this.render), this.onInteraction({
         pov: this.interaction.pov.clone(),
         fov: this.interaction.fov
       });
-    }), this.onInteraction = s, this.gl = this.canvas.context, this.programInfo = P.createProgramInfo(this.gl, [`${_}
-`, `${W}
-`]), this.quad = P.primitives.createXYQuadBufferInfo(this.gl), this.uniforms = {
+    }), this.onInteraction = s, this.gl = this.canvas.context, this.programInfo = M.createProgramInfo(this.gl, [`${K}
+`, `${_}
+`]), this.quad = M.primitives.createXYQuadBufferInfo(this.gl), this.uniforms = {
       u_mvpi: c.identity(),
       u_mix: 0,
-      u_texture_back: P.createTexture(this.gl, {
+      u_texture_back: M.createTexture(this.gl, {
         target: this.gl.TEXTURE_CUBE_MAP,
         minMag: this.gl.LINEAR,
         width: 1,
         height: 1
       }),
-      u_texture: P.createTexture(this.gl, {
+      u_texture: M.createTexture(this.gl, {
         target: this.gl.TEXTURE_CUBE_MAP,
         minMag: this.gl.LINEAR,
         width: 1,
@@ -1176,10 +1180,10 @@ class K {
       const o = this.gl.getExtension("WEBGL_debug_renderer_info");
       o && navigator.platform === "MacIntel" && navigator.userAgent.includes("Chrome") && this.gl.getParameter(o.UNMASKED_RENDERER_WEBGL).includes("OpenGL") && (t.parameters.width = Math.min(t.parameters.width, 1812), t.parameters.height = Math.min(t.parameters.height, 1812));
     }
-    const n = JSON.stringify(t);
-    n === this.snapshotHash ? r = r.then(() => (this.animationFrameId = requestAnimationFrame(this.render), Promise.resolve())) : (this.images = [], this.animationFrameId = requestAnimationFrame(this.render), r = r.then(
+    const a = JSON.stringify(t);
+    a === this.snapshotHash ? r = r.then(() => (this.animationFrameId = requestAnimationFrame(this.render), Promise.resolve())) : (this.images = [], this.animationFrameId = requestAnimationFrame(this.render), r = r.then(
       () => this.loader.loadVRCubeSnapshot(t).then((o) => {
-        this.images = o, P.createTexture(
+        this.images = o, M.createTexture(
           this.gl,
           {
             target: this.gl.TEXTURE_CUBE_MAP,
@@ -1196,49 +1200,49 @@ class K {
             ],
             src: o
           },
-          (l, u) => {
-            l || (i && this.interaction.reset(), this.uniforms.u_mix = s ? 0 : 1, this.uniforms.u_texture_back = this.uniforms.u_texture, this.uniforms.u_texture = u, this.animationFrameId = requestAnimationFrame(this.render));
+          (u, l) => {
+            u || (i && this.interaction.reset(), this.uniforms.u_mix = s ? 0 : 1, this.uniforms.u_texture_back = this.uniforms.u_texture, this.uniforms.u_texture = l, this.animationFrameId = requestAnimationFrame(this.render));
           }
         );
       })
     ));
-    const a = JSON.stringify(e);
-    return (n !== this.snapshotHash || a !== this.hotspotsHash) && (e.length ? r = r.then(
+    const n = JSON.stringify(e);
+    return (a !== this.snapshotHash || n !== this.hotspotsHash) && (e.length ? r = r.then(
       () => this.loader.loadVRCubeHotspots(t, e).then((o) => {
         this.hotspotsList = o;
       })
-    ) : this.hotspotsList = [[]]), this.hotspotsHash = a, this.snapshotHash = n, r;
+    ) : this.hotspotsList = [[]]), this.hotspotsHash = n, this.snapshotHash = a, r;
   }
   async pick(t, e) {
-    const i = this.canvas.element.clientWidth, s = this.canvas.element.clientHeight, r = e.x, n = s - e.y, a = 2 * r / i - 1, o = 2 * n / s - 1, l = [a, o, 0], u = this.modelViewProjectionMatrix, f = c.inverse(u), d = h.normalize(c.transformPoint(f, l)), T = Math.max(Math.abs(d[0]), Math.abs(d[1]), Math.abs(d[2]));
-    let F = "";
-    Math.abs(d[0]) === T ? F = d[0] > 0 ? "XPOS" : "XNEG" : Math.abs(d[1]) === T ? F = d[1] > 0 ? "YPOS" : "YNEG" : F = d[2] > 0 ? "ZPOS" : "ZNEG";
-    let x = 0, M = 0, E = "";
-    switch (F) {
+    const i = this.canvas.element.clientWidth, s = this.canvas.element.clientHeight, r = e.x, a = s - e.y, n = 2 * r / i - 1, o = 2 * a / s - 1, u = [n, o, 0], l = this.modelViewProjectionMatrix, p = c.inverse(l), d = h.normalize(c.transformPoint(p, u)), T = Math.max(Math.abs(d[0]), Math.abs(d[1]), Math.abs(d[2]));
+    let A = "";
+    Math.abs(d[0]) === T ? A = d[0] > 0 ? "XPOS" : "XNEG" : Math.abs(d[1]) === T ? A = d[1] > 0 ? "YPOS" : "YNEG" : A = d[2] > 0 ? "ZPOS" : "ZNEG";
+    let x = 0, E = 0, I = "";
+    switch (A) {
       case "XPOS":
-        x = (-d[2] / Math.abs(d[0]) + 1) / 2, M = (-d[1] / Math.abs(d[0]) + 1) / 2, E = "right";
+        x = (-d[2] / Math.abs(d[0]) + 1) / 2, E = (-d[1] / Math.abs(d[0]) + 1) / 2, I = "right";
         break;
       case "XNEG":
-        x = (d[2] / Math.abs(d[0]) + 1) / 2, M = (-d[1] / Math.abs(d[0]) + 1) / 2, E = "left";
+        x = (d[2] / Math.abs(d[0]) + 1) / 2, E = (-d[1] / Math.abs(d[0]) + 1) / 2, I = "left";
         break;
       case "YPOS":
-        x = (d[0] / Math.abs(d[1]) + 1) / 2, M = (d[2] / Math.abs(d[1]) + 1) / 2, E = "up";
+        x = (d[0] / Math.abs(d[1]) + 1) / 2, E = (d[2] / Math.abs(d[1]) + 1) / 2, I = "up";
         break;
       case "YNEG":
-        x = (d[0] / Math.abs(d[1]) + 1) / 2, M = (-d[2] / Math.abs(d[1]) + 1) / 2, E = "down";
+        x = (d[0] / Math.abs(d[1]) + 1) / 2, E = (-d[2] / Math.abs(d[1]) + 1) / 2, I = "down";
         break;
       case "ZPOS":
-        x = (d[0] / Math.abs(d[2]) + 1) / 2, M = (-d[1] / Math.abs(d[2]) + 1) / 2, E = "front";
+        x = (d[0] / Math.abs(d[2]) + 1) / 2, E = (-d[1] / Math.abs(d[2]) + 1) / 2, I = "front";
         break;
       case "ZNEG":
-        x = (-d[0] / Math.abs(d[2]) + 1) / 2, M = (-d[1] / Math.abs(d[2]) + 1) / 2, E = "back";
+        x = (-d[0] / Math.abs(d[2]) + 1) / 2, E = (-d[1] / Math.abs(d[2]) + 1) / 2, I = "back";
         break;
     }
-    const O = {
+    const C = {
       x: Math.round(x * Math.max(t.parameters.width, t.parameters.height)),
-      y: Math.round(M * Math.max(t.parameters.width, t.parameters.height))
+      y: Math.round(E * Math.max(t.parameters.width, t.parameters.height))
     };
-    return this.loader.loadVRCubePick(t, O, E);
+    return this.loader.loadVRCubePick(t, C, I);
   }
   hotspots() {
     const t = [];
@@ -1246,36 +1250,36 @@ class K {
       return [];
     const e = this.hotspotsList[0]?.length ?? 0, i = this.modelViewProjectionMatrix;
     for (let s = 0; s < e; s++) {
-      const r = this.hotspotsList.findIndex((R) => R[s].visibility !== "OutOfFrustum");
+      const r = this.hotspotsList.findIndex(($) => $[s].visibility !== "OutOfFrustum");
       if (r === -1)
         continue;
-      const n = { ...this.hotspotsList[r][s] }, a = n.position2D.x / this.images[0].width, o = n.position2D.y / this.images[0].height;
-      let l = 0, u = 0, f = 0;
+      const a = { ...this.hotspotsList[r][s] }, n = a.position2D.x / this.images[0].width, o = a.position2D.y / this.images[0].height;
+      let u = 0, l = 0, p = 0;
       switch (r) {
         case 0:
-          this.pov.target[2] < 0 && (n.visibility = "OutOfFrustum"), l = 2 * a - 1, u = 1 - 2 * o, f = 1;
+          this.pov.target[2] < 0 && (a.visibility = "OutOfFrustum"), u = 2 * n - 1, l = 1 - 2 * o, p = 1;
           break;
         case 1:
-          this.pov.target[0] > 0 && (n.visibility = "OutOfFrustum"), l = 1, u = 1 - 2 * o, f = 1 - 2 * a;
+          this.pov.target[0] > 0 && (a.visibility = "OutOfFrustum"), u = 1, l = 1 - 2 * o, p = 1 - 2 * n;
           break;
         case 2:
-          this.pov.target[2] > 0 && (n.visibility = "OutOfFrustum"), l = 1 - 2 * a, u = 1 - 2 * o, f = -1;
+          this.pov.target[2] > 0 && (a.visibility = "OutOfFrustum"), u = 1 - 2 * n, l = 1 - 2 * o, p = -1;
           break;
         case 3:
-          this.pov.target[0] < 0 && (n.visibility = "OutOfFrustum"), l = -1, u = 1 - 2 * o, f = 2 * a - 1;
+          this.pov.target[0] < 0 && (a.visibility = "OutOfFrustum"), u = -1, l = 1 - 2 * o, p = 2 * n - 1;
           break;
         case 4:
-          this.pov.target[1] < 0 && (n.visibility = "OutOfFrustum"), l = 2 * a - 1, u = 1, f = 2 * o - 1;
+          this.pov.target[1] < 0 && (a.visibility = "OutOfFrustum"), u = 2 * n - 1, l = 1, p = 2 * o - 1;
           break;
         case 5:
-          this.pov.target[1] > 0 && (n.visibility = "OutOfFrustum"), l = 2 * a - 1, u = -1, f = 1 - 2 * o;
+          this.pov.target[1] > 0 && (a.visibility = "OutOfFrustum"), u = 2 * n - 1, l = -1, p = 1 - 2 * o;
           break;
       }
-      const d = h.normalize([l, u, f]), T = c.transformPoint(i, d), F = this.canvas.element.clientWidth, x = this.canvas.element.clientHeight, M = 0.5 * F * (T[0] + 1), E = 0.5 * x * (T[1] + 1), O = {
-        x: Math.round(M),
-        y: Math.round(x - E)
-      }, G = new b(F, x), z = p.contains(G, O) ? n.visibility : "OutOfFrustum";
-      t.push({ ...n, position2D: O, visibility: z });
+      const d = h.normalize([u, l, p]), T = c.transformPoint(i, d), A = this.canvas.element.clientWidth, x = this.canvas.element.clientHeight, E = 0.5 * A * (T[0] + 1), I = 0.5 * x * (T[1] + 1), C = {
+        x: Math.round(E),
+        y: Math.round(x - I)
+      }, G = new f(A, x), z = b.contains(G, C) ? a.visibility : "OutOfFrustum";
+      t.push({ ...a, position2D: C, visibility: z });
     }
     return t;
   }
@@ -1283,11 +1287,11 @@ class K {
     return this.canvas.element.toDataURL(t, e);
   }
   get modelViewProjectionMatrix() {
-    const t = this.canvas.element.clientWidth, e = this.canvas.element.clientHeight, i = t > e ? t / e : e / t, s = p.getStandardAspectRatio(t, e), r = this.interaction.fov * (s / i), n = c.setAxis(c.identity(), [-1, 0, 0], 0), a = t > e ? w.perspectiveWithFovY(r, t / e, 0.5, 100) : w.perspectiveWithFovX(r, t / e, 0.5, 100), o = this.interaction.orientedPov, l = c.inverse(c.lookAt(o.eye, o.target, o.up));
-    return c.multiply(c.multiply(a, l), n);
+    const t = this.canvas.element.clientWidth, e = this.canvas.element.clientHeight, i = t > e ? t / e : e / t, s = b.getStandardAspectRatio(t, e, this.aspectRatioOverride), r = this.interaction.fov * (s / i), a = c.setAxis(c.identity(), [-1, 0, 0], 0), n = t > e ? w.perspectiveWithFovY(r, t / e, 0.5, 100) : w.perspectiveWithFovX(r, t / e, 0.5, 100), o = this.interaction.orientedPov, u = c.inverse(c.lookAt(o.eye, o.target, o.up));
+    return c.multiply(c.multiply(n, u), a);
   }
   render() {
-    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height), this.uniforms.u_mvpi = c.inverse(this.modelViewProjectionMatrix), this.gl.useProgram(this.programInfo.program), P.setBuffersAndAttributes(this.gl, this.programInfo, this.quad), P.setUniforms(this.programInfo, this.uniforms), P.drawBufferInfo(this.gl, this.quad), this.uniforms.u_mix < 1 && (this.uniforms.u_mix = Math.min(this.uniforms.u_mix + 0.05, 1), this.animationFrameId = requestAnimationFrame(this.render));
+    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height), this.uniforms.u_mvpi = c.inverse(this.modelViewProjectionMatrix), this.gl.useProgram(this.programInfo.program), M.setBuffersAndAttributes(this.gl, this.programInfo, this.quad), M.setUniforms(this.programInfo, this.uniforms), M.drawBufferInfo(this.gl, this.quad), this.uniforms.u_mix < 1 && (this.uniforms.u_mix = Math.min(this.uniforms.u_mix + 0.05, 1), this.animationFrameId = requestAnimationFrame(this.render));
   }
   onMouseDown(t) {
     this.container.classList.add("ls-viewer-container-vrcube-grabbing"), this.interaction.start(y.pointFromMouseEvent(t), {
@@ -1320,9 +1324,9 @@ class K {
     this.interaction.orientation(t.alpha, t.beta, t.gamma);
   }
 }
-class tt {
+class et {
   constructor(t, e, i, s, r) {
-    this.isStarted = !1, this.position = t, this.frames = e, this.rows = i, this.loop = s, this.onMotion = r, this.inertia = new q(this.motion.bind(this)), this.initPosition = { ...this.position }, this.startPosition = { x: 0, y: 0 }, this.startPoint = new I(0, 0), this.startSize = { width: 0, height: 0 }, this.lastPoints = [], this.lastPointsNumber = 20;
+    this.isStarted = !1, this.position = t, this.frames = e, this.rows = i, this.loop = s, this.onMotion = r, this.inertia = new R(this.motion.bind(this)), this.initPosition = { ...this.position }, this.startPosition = { x: 0, y: 0 }, this.startPoint = new L(0, 0), this.startSize = { width: 0, height: 0 }, this.lastPoints = [], this.lastPointsNumber = 20;
   }
   destroy() {
     this.inertia.destroy();
@@ -1344,19 +1348,19 @@ class tt {
   }
   motion(t) {
     this.isStarted && this.inertia.track(t), this.lastPoints.push({ x: t.x, y: t.y }), this.lastPoints.splice(0, this.lastPoints.length - this.lastPointsNumber);
-    const e = $.linear(this.lastPoints.map((s) => [s.x, s.y])), i = 25;
+    const e = U.linear(this.lastPoints.map((s) => [s.x, s.y])), i = 25;
     if (Math.abs(e.equation[0]) < 1) {
       const s = w.accelerate(t.x - this.startPoint.x, 1.3) / this.startSize.width * (this.frames / 4);
       let r = this.startPosition.x - Math.round(s);
       r = this.loop ? w.mod(r, this.frames) : Math.max(0, Math.min(r, this.frames - 1)), r !== this.position.x && (this.position.x = r, this.onMotion());
-      const n = Math.min(...this.lastPoints.map((o) => o.x));
-      Math.max(...this.lastPoints.map((o) => o.x)) - n > i && (this.startPoint.y = t.y, this.startPosition.y = this.position.y);
+      const a = Math.min(...this.lastPoints.map((o) => o.x));
+      Math.max(...this.lastPoints.map((o) => o.x)) - a > i && (this.startPoint.y = t.y, this.startPosition.y = this.position.y);
     } else {
       const s = w.accelerate(t.y - this.startPoint.y, 1.7) / this.startSize.height * (this.rows / 4);
       let r = this.startPosition.y + Math.round(s);
       r = Math.max(0, Math.min(r, this.rows - 1)), r !== this.position.y && (this.position.y = r, this.onMotion());
-      const n = Math.min(...this.lastPoints.map((o) => o.y));
-      Math.max(...this.lastPoints.map((o) => o.y)) - n > i && (this.startPoint.x = t.x, this.startPosition.x = this.position.x);
+      const a = Math.min(...this.lastPoints.map((o) => o.y));
+      Math.max(...this.lastPoints.map((o) => o.y)) - a > i && (this.startPoint.x = t.x, this.startPosition.x = this.position.x);
     }
   }
   end(t, e) {
@@ -1365,7 +1369,7 @@ class tt {
 }
 class k {
   constructor(t, e, i, s) {
-    this.container = t, this.canvas = e, this.loader = i, this.images = [], this.frames = 24, this.hotspotsList = [[]], this.interaction = new tt({ x: 0, y: 0 }, 1, 1, !1, () => {
+    this.container = t, this.canvas = e, this.loader = i, this.images = [], this.frames = 24, this.hotspotsList = [[]], this.interaction = new et({ x: 0, y: 0 }, 1, 1, !1, () => {
       this.canvas.draw(this.image, !0, 0.5), this.onInteraction({
         position: this.interaction.positionIndex
       });
@@ -1406,31 +1410,31 @@ class k {
   async load(t, e, i, s) {
     let r = Promise.resolve();
     i && this.interaction.reset();
-    const n = JSON.stringify(t);
-    n === this.snapshotHash && this.image ? r = r.then(() => this.canvas.draw(this.image, s, 0.05)) : (this.images = [], r = r.then(
+    const a = JSON.stringify(t);
+    a === this.snapshotHash && this.image ? r = r.then(() => this.canvas.draw(this.image, s, 0.05)) : (this.images = [], r = r.then(
       () => this.loader.loadVRObjectSnapshot(t, this.interaction.positionIndex).then((o) => {
-        const l = o.length;
-        return this.images = new Array(l), this.interaction.frames = t.view.frames ?? t.view.panFrames ?? this.frames, this.interaction.rows = l / this.interaction.frames, this.interaction.loop = !!t.view.loop, i && this.interaction.reset(), o.forEach((u, f) => {
-          u.then((d) => {
-            this.images[f] = d, d === this.image && this.canvas.draw(this.image, s, 0.05);
+        const u = o.length;
+        return this.images = new Array(u), this.interaction.frames = t.view.frames ?? t.view.panFrames ?? this.frames, this.interaction.rows = u / this.interaction.frames, this.interaction.loop = !!t.view.loop, i && this.interaction.reset(), o.forEach((l, p) => {
+          l.then((d) => {
+            this.images[p] = d, d === this.image && this.canvas.draw(this.image, s, 0.05);
           }).catch(() => {
           });
         }), o[this.interaction.positionIndex].then(() => Promise.resolve());
       })
     ));
-    const a = JSON.stringify(e);
-    return (n !== this.snapshotHash || a !== this.hotspotsHash) && (e.length ? r = r.then(
+    const n = JSON.stringify(e);
+    return (a !== this.snapshotHash || n !== this.hotspotsHash) && (e.length ? r = r.then(
       () => this.loader.loadVRObjectHotspots(t, e).then((o) => {
         this.hotspotsList = o;
       })
-    ) : this.hotspotsList = [[]]), this.hotspotsHash = a, this.snapshotHash = n, r;
+    ) : this.hotspotsList = [[]]), this.hotspotsHash = n, this.snapshotHash = a, r;
   }
   async pick(t, e) {
-    const i = new b(t.parameters.width, t.parameters.height), s = p.unproject(i, this.canvas.resolution, this.canvas.fit, e);
+    const i = new f(t.parameters.width, t.parameters.height), s = b.unproject(i, this.canvas.resolution, this.canvas.fit, e);
     return this.loader.loadVRObjectPick(t, s, this.position, this.frames);
   }
   hotspots(t) {
-    return (this.hotspotsList[this.interaction.positionIndex] || []).map((i) => ({ ...i, position2D: p.project(t, this.canvas.resolution, this.canvas.fit, i.position2D) })).map((i) => ({ ...i, visibility: p.contains(this.canvas.resolution, i.position2D) ? i.visibility : "OutOfFrustum" }));
+    return (this.hotspotsList[this.interaction.positionIndex] || []).map((i) => ({ ...i, position2D: b.project(t, this.canvas.resolution, this.canvas.fit, i.position2D) })).map((i) => ({ ...i, visibility: b.contains(this.canvas.resolution, i.position2D) ? i.visibility : "OutOfFrustum" }));
   }
   snapshot(t, e) {
     return this.canvas.element.toDataURL(t, e);
@@ -1465,7 +1469,7 @@ class k {
   onDeviceOrientation(t) {
   }
 }
-class et {
+class it {
   constructor(t, e, i) {
     this.container = t, this.loader = i, this.video = e;
   }
@@ -1549,7 +1553,7 @@ class nt {
       onHotspotsChange: () => {
       },
       ...e.events
-    }, this.options.events.onLoadError = C(this.options.events.onLoadError, 10), this.container = t, this.container.classList.add("ls-viewer-container"), this.containerWidth = 0, this.containerHeight = 0, this.canvas2D = new U(this.options.fit), this.container.prepend(this.canvas2D.element), this.canvas3D = new N(), this.container.prepend(this.canvas3D.element), this.video = new Y(), this.container.prepend(this.video.element), this.loader = new D(this.options.server, this.options.api, this), this.resolution = new b(0, 0), this.parameters = {
+    }, this.options.events.onLoadError = D(this.options.events.onLoadError, 10), this.container = t, this.container.classList.add("ls-viewer-container"), this.containerWidth = 0, this.containerHeight = 0, this.canvas2D = new N(this.options.fit), this.container.prepend(this.canvas2D.element), this.canvas3D = new B(), this.container.prepend(this.canvas3D.element), this.video = new J(), this.container.prepend(this.video.element), this.loader = new V(this.options.server, this.options.api, this), this.resolution = new f(0, 0), this.parameters = {
       width: 0,
       height: 0,
       antialiasing: !1,
@@ -1557,7 +1561,7 @@ class nt {
     }, this.encoder = {
       format: "jpeg",
       quality: 80
-    }, this.hotspots = [], this.widgetImage = new J(t, this.canvas2D, this.loader), this.widgetVideo = new et(t, this.video, this.loader), this.widgetVRObject = new k(t, this.canvas2D, this.loader, this.onVrobjectInteraction), this.canvas3D.context && (this.widgetVRCube = new K(t, this.canvas3D, this.loader, this.onVrcubeInteraction)), this.widget = this.widgetImage, this.isDestroyed = !1, this.container.addEventListener("mousedown", this.onMouseDown), this.container.addEventListener("mouseenter", this.onMouseEnter), this.container.addEventListener("touchstart", this.onTouchStart), document.addEventListener("mousemove", this.onMouseMove, { passive: !1 }), document.addEventListener("mouseup", this.onMouseUp), document.addEventListener("touchmove", this.onTouchMove, { passive: !1 }), document.addEventListener("touchend", this.onTouchEnd), this.loadWidget = C(this.loadWidget, 10), this.onResize = C(this.onResize, 250), requestAnimationFrame(this.checkResize);
+    }, this.hotspots = [], this.widgetImage = new Q(t, this.canvas2D, this.loader), this.widgetVideo = new it(t, this.video, this.loader), this.widgetVRObject = new k(t, this.canvas2D, this.loader, this.onVrobjectInteraction), this.canvas3D.context && (this.widgetVRCube = new tt(t, this.canvas3D, this.loader, this.onVrcubeInteraction, this.aspectRatioOverride)), this.widget = this.widgetImage, this.isDestroyed = !1, this.container.addEventListener("mousedown", this.onMouseDown), this.container.addEventListener("mouseenter", this.onMouseEnter), this.container.addEventListener("touchstart", this.onTouchStart), document.addEventListener("mousemove", this.onMouseMove, { passive: !1 }), document.addEventListener("mouseup", this.onMouseUp), document.addEventListener("touchmove", this.onTouchMove, { passive: !1 }), document.addEventListener("touchend", this.onTouchEnd), this.loadWidget = D(this.loadWidget, 10), this.onResize = D(this.onResize, 250), requestAnimationFrame(this.checkResize);
   }
   destroy() {
     this.canvas2D.destroy(), this.container.removeEventListener("mousedown", this.onMouseDown), this.container.removeEventListener("mouseenter", this.onMouseEnter), this.container.removeEventListener("touchstart", this.onTouchStart), document.removeEventListener("mousemove", this.onMouseMove), document.removeEventListener("mouseup", this.onMouseUp), document.removeEventListener("touchmove", this.onTouchMove), document.removeEventListener("touchend", this.onTouchEnd), this.isDestroyed = !0;
@@ -1576,7 +1580,7 @@ class nt {
     }), e;
   }
   setParameters(t) {
-    t.width && t.height && (this.resolution = new b(t.width, t.height)), this.parameters = { ...t }, this.parameters.width = this.resolution.width, this.parameters.height = this.resolution.height;
+    t.width && t.height && (this.resolution = new f(t.width, t.height)), this.parameters = { ...t }, this.parameters.width = this.resolution.width, this.parameters.height = this.resolution.height;
     let e = Promise.resolve();
     return e = e.then(() => this.loadWidget(!1, !0)), e.catch((i) => {
       this.onLoadError(i);
@@ -1663,6 +1667,16 @@ class nt {
       this.widget.hide(), this.widget = i, this.widget.show(), this.widgetVideo.hide(), this.onHotspotsChange();
     });
   }
+  get aspectRatioOverride() {
+    switch (this.options.aspectRatio) {
+      case "4:3":
+        return 4 / 3;
+      case "16:9":
+        return 16 / 9;
+      default:
+        return;
+    }
+  }
   get viewWidget() {
     switch (this.view?.mode) {
       case "image":
@@ -1709,7 +1723,7 @@ class nt {
   }
   onResize() {
     const t = this.container.clientWidth, e = this.container.clientHeight;
-    this.options.autores && (this.resolution = p.getStandardResolution(t * window.devicePixelRatio, e * window.devicePixelRatio), this.parameters.width = this.resolution.width, this.parameters.height = this.resolution.height), this.canvas2D.resize(t, e, window.devicePixelRatio), this.canvas3D.resize(t, e, window.devicePixelRatio), this.video.resize(t, e, this.resolution, this.options.fit), this.loadWidget(!1, !1).then(() => {
+    this.options.autores && (this.resolution = b.getStandardResolution(t * window.devicePixelRatio, e * window.devicePixelRatio, this.aspectRatioOverride), this.parameters.width = this.resolution.width, this.parameters.height = this.resolution.height), this.canvas2D.resize(t, e, window.devicePixelRatio), this.canvas3D.resize(t, e, window.devicePixelRatio), this.video.resize(t, e, this.resolution, this.options.fit), this.loadWidget(!1, !1).then(() => {
       this.onHotspotsChange();
     }).catch((i) => {
       this.onLoadError(i);
@@ -1738,7 +1752,7 @@ class nt {
     this.container.classList.remove("ls-viewer-container-loading"), this.options.events.onLoadError(...t);
   }
 }
-var j;
+var q;
 ((v) => {
   ((t) => {
     t.Visible = "Visible", t.Occluded = "Occluded", t.Clipped = "Clipped", t.OutOfFrustum = "OutOfFrustum";
@@ -1751,12 +1765,12 @@ var j;
   })(v.SunUseCaseMode || (v.SunUseCaseMode = {})), ((t) => {
     t.ShowOnly = "showOnly", t.HideOnly = "hideOnly";
   })(v.SurfacesFilterMode || (v.SurfacesFilterMode = {}));
-})(j || (j = {}));
+})(q || (q = {}));
 export {
   nt as Viewer,
-  j as WRAPIv2,
-  J as WidgetImage,
-  K as WidgetVRCube,
+  q as WRAPIv2,
+  Q as WidgetImage,
+  tt as WidgetVRCube,
   k as WidgetVRObject,
-  et as WidgetVideo
+  it as WidgetVideo
 };