locar 0.1.0 → 0.1.2

package/README.md

@@ -22,7 +22,7 @@ Some of these issues, such as incorrect North on some devices, may well be to do
 
 ## Cross-platform Compatibility
 
-It should now work on Chrome (and possibly Safari) on iOS as well as Android, due to a number of recent iOS fixes by project contributors.
+It should now work on Chrome and Safari on iOS as well as Android, due to a number of recent iOS fixes by project contributors.
 
 Firefox unfortunately does not appear to fully implement the Device Orientation API so is unlikely to work.
 
@@ -42,7 +42,7 @@ import * as LocAR from 'locar';
 as long as you include `locar` as a dependency, e.g. in your `package.json`:
 ```
 "dependencies": {
-   "locar" : "^0.1.0",
+   "locar" : "^0.1.2",
    "three" : "^0.175.0"
 }
 ```
@@ -59,7 +59,7 @@ Please see [here](https://github.com/AR-js-org/locar.js/blob/master/docs/tutoria
 
 ## Contributors
 
-Many thanks to all contributors to the project, in particular [Darian Elias Weiß](https://github.com/darianwwu) and [Kazuhiro Matsuyama](https://github.com/ma2yama) for providing extremely valuable iOS fixes and enhancements.
+Many thanks to all contributors to the project, in particular [Darian Elias Weiß](https://github.com/darianwwu), [Kazuhiro Matsuyama](https://github.com/ma2yama) and [Luigi Mannoni](https://github.com/luigimannoni-smartify) for providing extremely valuable iOS fixes and enhancements.
 
 ## Disclaimer
 

package/dist/locar.es.js

@@ -1,6 +1,6 @@
-import * as f from "three";
-import { Vector3 as I, Euler as A, Quaternion as w, EventDispatcher as C, MathUtils as m } from "three";
-class T {
+import * as g from "three";
+import { Vector3 as R, Euler as C, Quaternion as I, EventDispatcher as T, MathUtils as m } from "three";
+class w {
   /**
    * Create a SphMercProjection.
    */
@@ -14,12 +14,12 @@ class T {
    * @return {Array} Two-member array containing easting and northing.
    */
   project(e, i) {
-    return [this.#t(e), this.#h(i)];
+    return [this.#t(e), this.#l(i)];
   }
   /**
    * Unproject a Spherical Mercator easting and northing.
    * @param {Array} projected - Two-member array containing easting and northing
-   * @return {Array} Two-member array containing longitude and latitude 
+   * @return {Array} Two-member array containing longitude and latitude
    */
   unproject(e) {
     return [this.#e(e[0]), this.#s(e[1])];
@@ -27,7 +27,7 @@ class T {
   #t(e) {
     return e / 180 * this.HALF_EARTH;
   }
-  #h(e) {
+  #l(e) {
     var i = Math.log(Math.tan((90 + e) * Math.PI / 360)) / (Math.PI / 180);
     return i * this.HALF_EARTH / 180;
   }
@@ -46,7 +46,7 @@ class T {
     return "epsg:3857";
   }
 }
-class P {
+class A {
   constructor() {
     this.eventHandlers = {};
   }
@@ -59,17 +59,18 @@ class P {
     this.eventHandlers[e] = i;
   }
   /**
-   * Emit an event. 
+   * Emit an event.
    * @param {string} eventName - the event to emit.
-   * @param ...params - parameters to pass to the event handler. 
+   * @param ...params - parameters to pass to the event handler.
    */
   emit(e, ...i) {
     this.eventHandlers[e]?.call(this, ...i);
   }
 }
-class L extends P {
+class k extends A {
   #t;
-  #h;
+  // eslint-disable-next-line no-unused-private-class-members
+  #l;
   #e;
   #s;
   #c;
@@ -80,19 +81,19 @@ class L extends P {
   #n;
   /**
    * @param {THREE.Scene} scene - The Three.js scene to use.
-   * @param {THREE.Camera} camera - The Three.js camera to use. Should usually 
+   * @param {THREE.Camera} camera - The Three.js camera to use. Should usually
    * be a THREE.PerspectiveCamera.
    * @param {Object} options - Initialisation options for the GPS; see
    * setGpsOptions() below.
    * @param {Object} serverLogger - an object which can optionally log GPS position to a server for debugging. null by default, so no logging will be done. This object should implement a sendData() method to send data (2nd arg) to a given endpoint (1st arg). Please see source code for details. Ensure you comply with privacy laws (GDPR or equivalent) if implementing this.
    */
   constructor(e, i, t = {}, c = null) {
-    super(), this.scene = e, this.camera = i, this.#t = new T(), this.#e = null, this.#s = 0, this.#c = 100, this.#o = null, this.setGpsOptions(t), this.#i = null, this.#r = 0, this.#a = 0, this.#n = c;
+    super(), this.scene = e, this.camera = i, this.#t = new w(), this.#e = null, this.#s = 0, this.#c = 100, this.#o = null, this.setGpsOptions(t), this.#i = null, this.#r = 0, this.#a = 0, this.#n = c;
   }
   /**
    * Set the projection to use.
-   * @param {Object} any object which includes a project() method 
-   * taking longitude and latitude as arguments and returning an array 
+   * @param {Object} any object which includes a project() method
+   * taking longitude and latitude as arguments and returning an array
    * containing easting and northing.
    */
   setProjection(e) {
@@ -102,7 +103,7 @@ class L extends P {
    * Set the GPS options.
    * @param {Object} object containing gpsMinDistance and/or gpsMinAccuracy
    * properties. The former specifies the number of metres which the device
-   * must move to process a new GPS reading, and the latter specifies the 
+   * must move to process a new GPS reading, and the latter specifies the
    * minimum accuracy, in metres, for a GPS reading to be counted.
    */
   setGpsOptions(e = {}) {
@@ -123,7 +124,7 @@ class L extends P {
     }
     return this.#o === null ? (this.#o = navigator.geolocation.watchPosition(
       (e) => {
-        this.#l(e);
+        this.#h(e);
       },
       (e) => {
         this.emit("gpserror", e);
@@ -151,7 +152,7 @@ class L extends P {
    * ignored if lower than the specified minimum accuracy.
    */
   fakeGps(e, i, t = null, c = 0) {
-    t !== null && this.setElevation(t), this.#l({
+    t !== null && this.setElevation(t), this.#h({
       coords: {
         longitude: e,
         latitude: i,
@@ -183,23 +184,23 @@ class L extends P {
    * @param {THREE.Mesh} object the object
    * @param {number} lon - the longitude.
    * @param {number} lat - the latitude.
-   * @param {number} elev - the elevation in metres 
+   * @param {number} elev - the elevation in metres
    * (if not specified, 0 is assigned)
    * @param {Object} properties - properties describing the object (for example,
    * the contents of the GeoJSON properties field).
    */
-  add(e, i, t, c, d = {}) {
-    e.properties = d, this.#d(e, i, t, c), this.scene.add(e), this.#n?.sendData("/object/new", {
+  add(e, i, t, c, h = {}) {
+    e.properties = h, this.#d(e, i, t, c), this.scene.add(e), this.#n?.sendData("/object/new", {
       position: e.position,
       x: e.position.x,
       z: e.position.z,
       session: this.#a,
-      properties: d
+      properties: h
     });
   }
   #d(e, i, t, c) {
-    const d = this.lonLatToWorldCoords(i, t);
-    c !== void 0 && (e.position.y = c), [e.position.x, e.position.z] = d;
+    const h = this.lonLatToWorldCoords(i, t);
+    c !== void 0 && (e.position.y = c), [e.position.x, e.position.z] = h;
   }
   /**
    * Set the elevation (y coordinate) of the camera.
@@ -211,7 +212,7 @@ class L extends P {
   #u(e, i) {
     this.#i = this.#t.project(e, i);
   }
-  #l(e) {
+  #h(e) {
     let i = Number.MAX_VALUE;
     this.#r++, this.#n?.sendData("/gps/new", {
       gpsCount: this.#r,
@@ -249,22 +250,22 @@ class L extends P {
    * Taken from original A-Frame AR.js location-based components
    */
   #m(e, i) {
-    const t = f.MathUtils.degToRad(i.longitude - e.longitude), c = f.MathUtils.degToRad(i.latitude - e.latitude), d = Math.sin(c / 2) * Math.sin(c / 2) + Math.cos(f.MathUtils.degToRad(e.latitude)) * Math.cos(f.MathUtils.degToRad(i.latitude)) * (Math.sin(t / 2) * Math.sin(t / 2));
-    return 2 * Math.atan2(Math.sqrt(d), Math.sqrt(1 - d)) * 6371e3;
+    const t = g.MathUtils.degToRad(i.longitude - e.longitude), c = g.MathUtils.degToRad(i.latitude - e.latitude), h = Math.sin(c / 2) * Math.sin(c / 2) + Math.cos(g.MathUtils.degToRad(e.latitude)) * Math.cos(g.MathUtils.degToRad(i.latitude)) * (Math.sin(t / 2) * Math.sin(t / 2));
+    return 2 * Math.atan2(Math.sqrt(h), Math.sqrt(1 - h)) * 6371e3;
   }
 }
-class H extends P {
+class W extends A {
   #t;
   /**
    * Create a Webcam.
-   * @param constraints {Object} - options to use for initialising the camera. 
-   * The same constraints object as used by standard MediaDevices API.
-   * @param {string} videoElementSelector - selector to obtain the HTML video 
-   * element to render the webcam feed. If a falsy value (e.g. null or 
+   * @param constraints {Object} - options to use for initialising the camera.
+   * This is the same constraints object as used by standard MediaDevices API.
+   * @param {string} videoElementSelector - selector to obtain the HTML video
+   * element to render the webcam feed. If a falsy value (e.g. null or
    * undefined), a video element will be created.
    */
   constructor(e = { video: { facingMode: "environment" } }, i) {
-    super(), this.sceneWebcam = new f.Scene(), i ? this.#t = document.querySelector(i) : (this.#t = document.createElement("video"), this.#t.setAttribute("autoplay", !0), this.#t.setAttribute("playsinline", !0), this.#t.style.display = "none", document.body.appendChild(this.#t)), this.texture = new f.VideoTexture(this.#t), navigator.mediaDevices && navigator.mediaDevices.getUserMedia ? navigator.mediaDevices.getUserMedia(e).then((t) => {
+    super(), this.sceneWebcam = new g.Scene(), i ? this.#t = document.querySelector(i) : (this.#t = document.createElement("video"), this.#t.setAttribute("autoplay", !0), this.#t.setAttribute("playsinline", !0), this.#t.style.display = "none", document.body.appendChild(this.#t)), this.texture = new g.VideoTexture(this.#t), navigator.mediaDevices && navigator.mediaDevices.getUserMedia ? navigator.mediaDevices.getUserMedia(e).then((t) => {
       this.#t.addEventListener("loadedmetadata", () => {
         this.#t.setAttribute("width", this.#t.videoWidth), this.#t.setAttribute("height", this.#t.videoHeight), this.#t.play(), this.emit("webcamstarted", { texture: this.texture });
       }), this.#t.srcObject = t;
@@ -286,25 +287,25 @@ class H extends P {
     this.texture.dispose();
   }
 }
-const E = navigator.userAgent.match(/iPhone|iPad|iPod/i) || /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints != null && navigator.maxTouchPoints > 1, _ = new I(0, 0, 1), y = new A(), R = new w(), D = new w(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
-class x extends C {
+const b = "locar-device-orientation-permission-modal", D = "locar-device-orientation-permission-button", S = "locar-device-orientation-permission-message", N = "locar-device-orientation-permission-inner", L = "locar-device-orientation-permission-button-inner", P = "This immersive website requires access to your device motion sensors.", O = navigator.userAgent.match(/iPhone|iPad|iPod/i) || /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints != null && navigator.maxTouchPoints > 1, x = new R(0, 0, 1), y = new C(), H = new I(), F = new I(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
+class V extends T {
   /**
-    * Create an instance of DeviceOrientationControls.
-    * @param {Object} object - the object to attach the controls to
-    * (usually your Three.js camera)
-    * @param {Object} options - options for DeviceOrientationControls: currently accepts smoothingFactor, enablePermissionDialog
-    */
+   * Create an instance of DeviceOrientationControls.
+   * @param {Object} object - the object to attach the controls to
+   * (usually your Three.js camera)
+   * @param {Object} options - options for DeviceOrientationControls: currently accepts smoothingFactor, enablePermissionDialog
+   */
   constructor(e, i = {}) {
-    super(), this.eventEmitter = new P();
+    super(), this.eventEmitter = new A();
     const t = this;
-    this.object = e, this.object.rotation.reorder("YXZ"), this.enabled = !0, this.deviceOrientation = null, this.screenOrientation = 0, this.alphaOffset = 0, this.orientationOffset = 0, this.initialOffset = null, this.lastCompassY = void 0, this.lastOrientation = null, this.TWO_PI = 2 * Math.PI, this.HALF_PI = 0.5 * Math.PI, this.orientationChangeEventName = "ondeviceorientationabsolute" in window ? "deviceorientationabsolute" : "deviceorientation", console.log("Device Orientation Event Name:", this.orientationChangeEventName), this.smoothingFactor = i.smoothingFactor || 1, this.enablePermissionDialog = i.enablePermissionDialog ?? !0;
+    this.object = e, this.object.rotation.reorder("YXZ"), this.enabled = !0, this.deviceOrientation = null, this.screenOrientation = 0, this.alphaOffset = 0, this.orientationOffset = 0, this.initialOffset = null, this.lastCompassY = void 0, this.lastOrientation = null, this.TWO_PI = 2 * Math.PI, this.HALF_PI = 0.5 * Math.PI, this.orientationChangeEventName = "ondeviceorientationabsolute" in window ? "deviceorientationabsolute" : "deviceorientation", this.smoothingFactor = i.smoothingFactor || 1, this.enablePermissionDialog = i.enablePermissionDialog ?? !0, this.enableInlineStyling = i.enableStyling ?? !0, this.preferConfirmDialog = i.preferConfirmDialog ?? !1;
     const c = function({
       alpha: n,
       beta: s,
       gamma: a,
       webkitCompassHeading: r
     }) {
-      if (E) {
+      if (O) {
         const o = 360 - r;
         t.alphaOffset = m.degToRad(o - n), t.deviceOrientation = { alpha: n, beta: s, gamma: a, webkitCompassHeading: r };
       } else
@@ -314,15 +315,15 @@ class x extends C {
           detail: { cameraRotation: e.rotation }
         })
       );
-    }, d = function() {
-      t.screenOrientation = window.orientation || 0, E && (t.screenOrientation === 90 ? t.orientationOffset = -t.HALF_PI : t.screenOrientation === -90 ? t.orientationOffset = t.HALF_PI : t.orientationOffset = 0);
-    }, M = function(n, s, a, r, o) {
-      y.set(a, s, -r, "YXZ"), n.setFromEuler(y), n.multiply(D), n.multiply(R.setFromAxisAngle(_, -o));
+    }, h = function() {
+      t.screenOrientation = window.orientation || 0, O && (t.screenOrientation === 90 ? t.orientationOffset = -t.HALF_PI : t.screenOrientation === -90 ? t.orientationOffset = t.HALF_PI : t.orientationOffset = 0);
+    }, E = function(n, s, a, r, o) {
+      y.set(a, s, -r, "YXZ"), n.setFromEuler(y), n.multiply(F), n.multiply(H.setFromAxisAngle(x, -o));
     };
     this.connect = function() {
-      d(), window.addEventListener(
+      h(), window.addEventListener(
         "orientationchange",
-        d
+        h
       ), window.addEventListener(
         t.orientationChangeEventName,
         c
@@ -330,7 +331,7 @@ class x extends C {
     }, this.disconnect = function() {
       window.removeEventListener(
         "orientationchange",
-        d
+        h
       ), window.removeEventListener(
         t.orientationChangeEventName,
         c
@@ -346,7 +347,8 @@ class x extends C {
       }).catch(function(n) {
         this.eventEmitter.emit("deviceorientationerror", {
           code: "LOCAR_DEVICE_ORIENTATION_PERMISSION_FAILED",
-          message: "Permission request for device orientation failed - AR will not work correctly"
+          message: "Permission request for device orientation failed - AR will not work correctly",
+          error: JSON.stringify(n, null, 2)
         });
       }) : this.eventEmitter.emit("deviceorientationerror", {
         code: "LOCAR_DEVICE_ORIENTATION_INTERNAL_ERROR",
@@ -357,22 +359,22 @@ class x extends C {
       const s = t.deviceOrientation;
       if (s) {
         let a = s.alpha ? m.degToRad(s.alpha) + t.alphaOffset : 0, r = s.beta ? m.degToRad(s.beta) : 0, o = s.gamma ? m.degToRad(s.gamma) : 0;
-        const g = t.screenOrientation ? m.degToRad(t.screenOrientation) : 0;
+        const f = t.screenOrientation ? m.degToRad(t.screenOrientation) : 0;
         if (t.smoothingFactor < 1) {
           if (t.lastOrientation) {
-            const h = t.smoothingFactor;
+            const d = t.smoothingFactor;
             a = t._getSmoothedAngle(
               a,
               t.lastOrientation.alpha,
-              h
+              d
             ), r = t._getSmoothedAngle(
               r + Math.PI,
               t.lastOrientation.beta,
-              h
+              d
             ), o = t._getSmoothedAngle(
               o + t.HALF_PI,
               t.lastOrientation.gamma,
-              h,
+              d,
               Math.PI
             );
           } else
@@ -383,42 +385,46 @@ class x extends C {
             gamma: o
           };
         }
-        if (E) {
-          const h = new w();
-          M(
-            h,
+        if (O) {
+          const d = new I();
+          E(
+            d,
             a,
             t.smoothingFactor < 1 ? r - Math.PI : r,
             t.smoothingFactor < 1 ? o - Math.PI / 2 : o,
-            g
+            f
           );
-          const u = new A().setFromQuaternion(
-            h,
+          const u = new C().setFromQuaternion(
+            d,
             "YXZ"
           );
-          let v = m.degToRad(360 - s.webkitCompassHeading);
-          t.smoothingFactor < 1 && t.lastCompassY !== void 0 && (v = t._getSmoothedAngle(v, t.lastCompassY, t.smoothingFactor)), t.lastCompassY = v, u.y = v + (t.orientationOffset || 0), h.setFromEuler(u), t.object.quaternion.copy(h);
+          let p = m.degToRad(360 - s.webkitCompassHeading);
+          t.smoothingFactor < 1 && t.lastCompassY !== void 0 && (p = t._getSmoothedAngle(
+            p,
+            t.lastCompassY,
+            t.smoothingFactor
+          )), t.lastCompassY = p, u.y = p + (t.orientationOffset || 0), d.setFromEuler(u), t.object.quaternion.copy(d);
         } else
-          M(
+          E(
             t.object.quaternion,
-            E ? a + t.alphaOffset : a,
+            O ? a + t.alphaOffset : a,
             t.smoothingFactor < 1 ? r - Math.PI : r,
             t.smoothingFactor < 1 ? o - Math.PI / 2 : o,
-            g
+            f
           );
       }
     }, this.getCorrectedHeading = function() {
       const { deviceOrientation: n } = t;
       if (!n) return 0;
       let s = 0;
-      return E ? (s = 360 - n.webkitCompassHeading, t.orientationOffset && (s += t.orientationOffset * (180 / Math.PI), s = (s + 360) % 360)) : (n.absolute === !0 || t.orientationChangeEventName, s = n.alpha ? n.alpha : 0, s = (360 - s) % 360, s < 0 && (s += 360)), s;
+      return O ? (s = 360 - n.webkitCompassHeading, t.orientationOffset && (s += t.orientationOffset * (180 / Math.PI), s = (s + 360) % 360)) : (n.absolute === !0 || t.orientationChangeEventName, s = n.alpha ? n.alpha : 0, s = (360 - s) % 360, s < 0 && (s += 360)), s;
     }, this._orderAngle = function(n, s, a = t.TWO_PI) {
       return s > n && Math.abs(s - n) < a / 2 || n > s && Math.abs(s - n) > a / 2 ? { left: n, right: s } : { left: s, right: n };
     }, this._getSmoothedAngle = function(n, s, a, r = t.TWO_PI) {
-      const o = t._orderAngle(n, s, r), g = o.left, h = o.right;
-      o.left = 0, o.right -= g, o.right < 0 && (o.right += r);
-      let u = h == s ? (1 - a) * o.right + a * o.left : a * o.right + (1 - a) * o.left;
-      return u += g, u >= r && (u -= r), u;
+      const o = t._orderAngle(n, s, r), f = o.left, d = o.right;
+      o.left = 0, o.right -= f, o.right < 0 && (o.right += r);
+      let u = d == s ? (1 - a) * o.right + a * o.left : a * o.right + (1 - a) * o.left;
+      return u += f, u >= r && (u -= r), u;
     }, this.updateAlphaOffset = function() {
       t.initialOffset = !1;
     }, this.dispose = function() {
@@ -432,57 +438,91 @@ class x extends C {
     }, this.getGamma = function() {
       const { deviceOrientation: n } = t;
       return n && n.gamma ? m.degToRad(n.gamma) : 0;
-    }, this.obtainPermissionGesture = function() {
-      const n = document.createElement("div"), s = document.createElement("div"), a = document.createElement("div"), r = document.createElement("div");
-      document.body.appendChild(n);
-      const o = {
-        display: "flex",
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        zIndex: 1,
-        backgroundColor: "rgba(0,0,0,0.6)",
-        justifyContent: "center",
-        alignItems: "center"
-      }, g = {
-        backgroundColor: "white",
-        padding: "6px",
-        borderRadius: "3px",
-        width: "36rem",
-        height: "24rem"
-      }, h = {
-        width: "100%",
-        height: "70%",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      }, u = {
-        display: "inline-flex",
-        width: "100%",
-        height: "30%",
-        justifyContent: "center",
-        alignItems: "center"
-      };
-      for (let l in o)
-        n.style[l] = o[l];
-      for (let l in g)
-        s.style[l] = g[l];
-      for (let l in h)
-        a.style[l] = h[l];
-      for (let l in u)
-        r.style[l] = u[l];
-      n.appendChild(s), s.appendChild(a), s.appendChild(r), a.innerHTML = '<div style="font-size: 24pt; margin: 1rem;">This immersive website requires access to your device motion sensors.</div>';
-      const v = () => {
+    }, this.createObtainPermissionGestureDialog = function() {
+      const n = document.createElement("div");
+      n.classList.add(b);
+      const s = document.createElement("div");
+      s.classList.add(N);
+      const a = document.createElement("div");
+      a.classList.add(S);
+      const r = document.createElement("div");
+      r.classList.add(L);
+      const o = document.createElement("button");
+      if (o.classList.add(D), document.body.appendChild(n), this.enableInlineStyling === !0) {
+        const d = {
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+          display: "flex",
+          position: "fixed",
+          zIndex: 1e5,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.2)",
+          inset: 0,
+          padding: "20px"
+        }, u = {
+          backgroundColor: "rgba(220, 220, 220, 0.85)",
+          padding: "6px 0",
+          borderRadius: "10px",
+          width: "100%",
+          maxWidth: "400px"
+        }, p = {
+          padding: "10px 12px",
+          textAlign: "center",
+          fontWeight: 400,
+          fontSize: "13px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }, M = {
+          display: "block",
+          textAlign: "center",
+          textDecoration: "none",
+          borderTop: "rgb(180,180,180) solid 1px"
+        }, _ = {
+          display: "block",
+          width: "100%",
+          textAlign: "center",
+          appearance: "none",
+          background: "none",
+          border: "none",
+          outline: "none",
+          padding: "10px",
+          fontWeight: 400,
+          fontSize: "16px",
+          color: "#2e7cf1",
+          cursor: "pointer"
+        };
+        for (let l in d)
+          n.style[l] = d[l];
+        for (let l in u)
+          s.style[l] = u[l];
+        for (let l in p)
+          a.style[l] = p[l];
+        for (let l in M)
+          r.style[l] = M[l];
+        for (let l in _)
+          o.style[l] = _[l];
+      }
+      n.appendChild(s), s.appendChild(a), s.appendChild(r), a.appendChild(
+        document.createTextNode(P)
+      );
+      const f = () => {
         this.requestOrientationPermissions(), n.style.display = "none";
-      }, p = document.createElement("button");
-      p.addEventListener("click", v), p.style.width = "50%", p.style.height = "80%", p.style.fontSize = "20pt", p.appendChild(document.createTextNode("OK")), r.appendChild(p), document.body.appendChild(n);
+      };
+      o.addEventListener("click", f), o.appendChild(document.createTextNode("OK")), r.appendChild(o), document.body.appendChild(n);
+    }, this.obtainPermissionGesture = function() {
+      this.preferConfirmDialog === !0 ? window.confirm(P) && this.requestOrientationPermissions() : this.createObtainPermissionGestureDialog();
     };
   }
   on(e, i) {
     this.eventEmitter.on(e, i);
   }
+  /**
+   * Initialise device orientation controls.
+   * Should be called after you have created the DeviceOrientationControls
+   * object and set up the deviceorientationgranted and deviceorientationerror
+   * event handlers.
+   */
   init() {
     window.DeviceOrientationEvent === void 0 ? this.eventEmitter.emit("deviceorientationerror", {
       code: "LOCAR_DEVICE_ORIENTATION_NOT_SUPPORTED",
@@ -493,14 +533,14 @@ class x extends C {
     }) : typeof window.DeviceOrientationEvent.requestPermission == "function" && this.enablePermissionDialog ? this.obtainPermissionGesture() : this.eventEmitter.emit("deviceorientationgranted", { target: this });
   }
 }
-class N {
+class j {
   /**
    * Create a ClickHandler.
    * @param {THREE.WebGLRenderer} - The Three.js renderer on which the click
    * events will be handled.
    */
   constructor(e) {
-    this.raycaster = new f.Raycaster(), this.normalisedMousePosition = new f.Vector2(null, null), e.domElement.addEventListener("click", (i) => {
+    this.raycaster = new g.Raycaster(), this.normalisedMousePosition = new g.Vector2(null, null), e.domElement.addEventListener("click", (i) => {
       this.normalisedMousePosition.set(
         i.clientX / e.domElement.clientWidth * 2 - 1,
         -(i.clientY / e.domElement.clientHeight * 2) + 1
@@ -524,13 +564,13 @@ class N {
     return [];
   }
 }
-const S = "0.1.0";
+const U = "0.1.2";
 export {
-  N as ClickHandler,
-  x as DeviceOrientationControls,
-  P as EventEmitter,
-  L as LocationBased,
-  T as SphMercProjection,
-  H as Webcam,
-  S as version
+  j as ClickHandler,
+  V as DeviceOrientationControls,
+  A as EventEmitter,
+  k as LocationBased,
+  w as SphMercProjection,
+  W as Webcam,
+  U as version
 };

package/dist/locar.umd.js

@@ -1 +1 @@
-(function(d,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],c):(d=typeof globalThis<"u"?globalThis:d||self,c(d.locar={},d.THREE))})(this,(function(d,c){"use strict";function E(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const i in u)if(i!=="default"){const e=Object.getOwnPropertyDescriptor(u,i);Object.defineProperty(t,i,e.get?e:{enumerable:!0,get:()=>u[i]})}}return t.default=u,Object.freeze(t)}const v=E(c);class A{constructor(){this.EARTH=4007501668e-2,this.HALF_EARTH=2003750834e-2}project(t,i){return[this.#t(t),this.#l(i)]}unproject(t){return[this.#e(t[0]),this.#s(t[1])]}#t(t){return t/180*this.HALF_EARTH}#l(t){var i=Math.log(Math.tan((90+t)*Math.PI/360))/(Math.PI/180);return i*this.HALF_EARTH/180}#e(t){return t/this.HALF_EARTH*180}#s(t){var i=t/this.HALF_EARTH*180;return i=180/Math.PI*(2*Math.atan(Math.exp(i*Math.PI/180))-Math.PI/2),i}getID(){return"epsg:3857"}}class y{constructor(){this.eventHandlers={}}on(t,i){this.eventHandlers[t]=i}emit(t,...i){this.eventHandlers[t]?.call(this,...i)}}class C extends y{#t;#l;#e;#s;#c;#o;#i;#r;#a;#n;constructor(t,i,e={},l=null){super(),this.scene=t,this.camera=i,this.#t=new A,this.#e=null,this.#s=0,this.#c=100,this.#o=null,this.setGpsOptions(e),this.#i=null,this.#r=0,this.#a=0,this.#n=l}setProjection(t){this.#t=t}setGpsOptions(t={}){t.gpsMinDistance!==void 0&&(this.#s=t.gpsMinDistance),t.gpsMinAccuracy!==void 0&&(this.#c=t.gpsMinAccuracy)}async startGps(){if(this.#n){const i=await(await this.#n.sendData("/gps/start",{gpsMinDistance:this.#s,gpsMinAccuracy:this.#c})).json();this.#a=i.session}return this.#o===null?(this.#o=navigator.geolocation.watchPosition(t=>{this.#h(t)},t=>{this.emit("gpserror",t)},{enableHighAccuracy:!0}),!0):!1}stopGps(){return this.#o!==null?(navigator.geolocation.clearWatch(this.#o),this.#o=null,!0):!1}fakeGps(t,i,e=null,l=0){e!==null&&this.setElevation(e),this.#h({coords:{longitude:t,latitude:i,accuracy:l}})}lonLatToWorldCoords(t,i){const e=this.#t.project(t,i);if(this.#i)e[0]-=this.#i[0],e[1]-=this.#i[1];else throw"No initial position determined";return[e[0],-e[1]]}add(t,i,e,l,m={}){t.properties=m,this.#d(t,i,e,l),this.scene.add(t),this.#n?.sendData("/object/new",{position:t.position,x:t.position.x,z:t.position.z,session:this.#a,properties:m})}#d(t,i,e,l){const m=this.lonLatToWorldCoords(i,e);l!==void 0&&(t.position.y=l),[t.position.x,t.position.z]=m}setElevation(t){this.camera.position.y=t}#u(t,i){this.#i=this.#t.project(t,i)}#h(t){let i=Number.MAX_VALUE;this.#r++,this.#n?.sendData("/gps/new",{gpsCount:this.#r,lat:t.coords.latitude,lon:t.coords.longitude,acc:t.coords.accuracy,session:this.#a}),t.coords.accuracy<=this.#c&&(this.#e===null?this.#e={latitude:t.coords.latitude,longitude:t.coords.longitude}:i=this.#m(this.#e,t.coords),i>=this.#s&&(this.#e.longitude=t.coords.longitude,this.#e.latitude=t.coords.latitude,this.#i||(this.#u(t.coords.longitude,t.coords.latitude),this.#n?.sendData("/worldorigin/new",{gpsCount:this.#r,lat:t.coords.latitude,lon:t.coords.longitude,session:this.#a,initialPosition:this.#i})),this.#d(this.camera,t.coords.longitude,t.coords.latitude),this.#n?.sendData("/gps/accepted",{gpsCount:this.#r,cameraX:this.camera.position.x,cameraZ:this.camera.position.z,session:this.#a,distMoved:i}),this.emit("gpsupdate",{position:t,distMoved:i})))}#m(t,i){const e=v.MathUtils.degToRad(i.longitude-t.longitude),l=v.MathUtils.degToRad(i.latitude-t.latitude),m=Math.sin(l/2)*Math.sin(l/2)+Math.cos(v.MathUtils.degToRad(t.latitude))*Math.cos(v.MathUtils.degToRad(i.latitude))*(Math.sin(e/2)*Math.sin(e/2));return 2*Math.atan2(Math.sqrt(m),Math.sqrt(1-m))*6371e3}}class _ extends y{#t;constructor(t={video:{facingMode:"environment"}},i){super(),this.sceneWebcam=new v.Scene,i?this.#t=document.querySelector(i):(this.#t=document.createElement("video"),this.#t.setAttribute("autoplay",!0),this.#t.setAttribute("playsinline",!0),this.#t.style.display="none",document.body.appendChild(this.#t)),this.texture=new v.VideoTexture(this.#t),navigator.mediaDevices&&navigator.mediaDevices.getUserMedia?navigator.mediaDevices.getUserMedia(t).then(e=>{this.#t.addEventListener("loadedmetadata",()=>{this.#t.setAttribute("width",this.#t.videoWidth),this.#t.setAttribute("height",this.#t.videoHeight),this.#t.play(),this.emit("webcamstarted",{texture:this.texture})}),this.#t.srcObject=e}).catch(e=>{this.emit("webcamerror",{code:e.name,message:e.message})}):this.emit("webcamerror",{code:"LOCAR_NO_MEDIA_DEVICES_API",message:"Media devices API not supported"})}dispose(){this.texture.dispose()}}const w=navigator.userAgent.match(/iPhone|iPad|iPod/i)||/Macintosh/i.test(navigator.userAgent)&&navigator.maxTouchPoints!=null&&navigator.maxTouchPoints>1,b=new c.Vector3(0,0,1),I=new c.Euler,D=new c.Quaternion,T=new c.Quaternion(-Math.sqrt(.5),0,0,Math.sqrt(.5));class L extends c.EventDispatcher{constructor(t,i={}){super(),this.eventEmitter=new y;const e=this;this.object=t,this.object.rotation.reorder("YXZ"),this.enabled=!0,this.deviceOrientation=null,this.screenOrientation=0,this.alphaOffset=0,this.orientationOffset=0,this.initialOffset=null,this.lastCompassY=void 0,this.lastOrientation=null,this.TWO_PI=2*Math.PI,this.HALF_PI=.5*Math.PI,this.orientationChangeEventName="ondeviceorientationabsolute"in window?"deviceorientationabsolute":"deviceorientation",console.log("Device Orientation Event Name:",this.orientationChangeEventName),this.smoothingFactor=i.smoothingFactor||1,this.enablePermissionDialog=i.enablePermissionDialog??!0;const l=function({alpha:n,beta:s,gamma:a,webkitCompassHeading:r}){if(w){const o=360-r;e.alphaOffset=c.MathUtils.degToRad(o-n),e.deviceOrientation={alpha:n,beta:s,gamma:a,webkitCompassHeading:r}}else n<0&&(n+=360),e.deviceOrientation={alpha:n,beta:s,gamma:a};window.dispatchEvent(new CustomEvent("camera-rotation-change",{detail:{cameraRotation:t.rotation}}))},m=function(){e.screenOrientation=window.orientation||0,w&&(e.screenOrientation===90?e.orientationOffset=-e.HALF_PI:e.screenOrientation===-90?e.orientationOffset=e.HALF_PI:e.orientationOffset=0)},P=function(n,s,a,r,o){I.set(a,s,-r,"YXZ"),n.setFromEuler(I),n.multiply(T),n.multiply(D.setFromAxisAngle(b,-o))};this.connect=function(){m(),window.addEventListener("orientationchange",m),window.addEventListener(e.orientationChangeEventName,l),e.enabled=!0},this.disconnect=function(){window.removeEventListener("orientationchange",m),window.removeEventListener(e.orientationChangeEventName,l),e.enabled=!1,e.initialOffset=!1,e.deviceOrientation=null},this.requestOrientationPermissions=function(){window.DeviceOrientationEvent!==void 0&&typeof window.DeviceOrientationEvent.requestPermission=="function"?window.DeviceOrientationEvent.requestPermission().then(n=>{n==="granted"?this.eventEmitter.emit("deviceorientationgranted",{target:this}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_DENIED",message:"Permission for device orientation denied - AR will not work correctly"})}).catch(function(n){this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_FAILED",message:"Permission request for device orientation failed - AR will not work correctly"})}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_INTERNAL_ERROR",message:"Internal error: no requestPermission() found although requestOrientationPermissions() was called - please raise an issue on GitHub"})},this.update=function({theta:n=0}={theta:0}){if(e.enabled===!1)return;const s=e.deviceOrientation;if(s){let a=s.alpha?c.MathUtils.degToRad(s.alpha)+e.alphaOffset:0,r=s.beta?c.MathUtils.degToRad(s.beta):0,o=s.gamma?c.MathUtils.degToRad(s.gamma):0;const p=e.screenOrientation?c.MathUtils.degToRad(e.screenOrientation):0;if(e.smoothingFactor<1){if(e.lastOrientation){const h=e.smoothingFactor;a=e._getSmoothedAngle(a,e.lastOrientation.alpha,h),r=e._getSmoothedAngle(r+Math.PI,e.lastOrientation.beta,h),o=e._getSmoothedAngle(o+e.HALF_PI,e.lastOrientation.gamma,h,Math.PI)}else r+=Math.PI,o+=e.HALF_PI;e.lastOrientation={alpha:a,beta:r,gamma:o}}if(w){const h=new c.Quaternion;P(h,a,e.smoothingFactor<1?r-Math.PI:r,e.smoothingFactor<1?o-Math.PI/2:o,p);const f=new c.Euler().setFromQuaternion(h,"YXZ");let O=c.MathUtils.degToRad(360-s.webkitCompassHeading);e.smoothingFactor<1&&e.lastCompassY!==void 0&&(O=e._getSmoothedAngle(O,e.lastCompassY,e.smoothingFactor)),e.lastCompassY=O,f.y=O+(e.orientationOffset||0),h.setFromEuler(f),e.object.quaternion.copy(h)}else P(e.object.quaternion,w?a+e.alphaOffset:a,e.smoothingFactor<1?r-Math.PI:r,e.smoothingFactor<1?o-Math.PI/2:o,p)}},this.getCorrectedHeading=function(){const{deviceOrientation:n}=e;if(!n)return 0;let s=0;return w?(s=360-n.webkitCompassHeading,e.orientationOffset&&(s+=e.orientationOffset*(180/Math.PI),s=(s+360)%360)):(n.absolute===!0||e.orientationChangeEventName,s=n.alpha?n.alpha:0,s=(360-s)%360,s<0&&(s+=360)),s},this._orderAngle=function(n,s,a=e.TWO_PI){return s>n&&Math.abs(s-n)<a/2||n>s&&Math.abs(s-n)>a/2?{left:n,right:s}:{left:s,right:n}},this._getSmoothedAngle=function(n,s,a,r=e.TWO_PI){const o=e._orderAngle(n,s,r),p=o.left,h=o.right;o.left=0,o.right-=p,o.right<0&&(o.right+=r);let f=h==s?(1-a)*o.right+a*o.left:a*o.right+(1-a)*o.left;return f+=p,f>=r&&(f-=r),f},this.updateAlphaOffset=function(){e.initialOffset=!1},this.dispose=function(){e.disconnect()},this.getAlpha=function(){const{deviceOrientation:n}=e;return n&&n.alpha?c.MathUtils.degToRad(n.alpha)+e.alphaOffset:0},this.getBeta=function(){const{deviceOrientation:n}=e;return n&&n.beta?c.MathUtils.degToRad(n.beta):0},this.getGamma=function(){const{deviceOrientation:n}=e;return n&&n.gamma?c.MathUtils.degToRad(n.gamma):0},this.obtainPermissionGesture=function(){const n=document.createElement("div"),s=document.createElement("div"),a=document.createElement("div"),r=document.createElement("div");document.body.appendChild(n);const o={display:"flex",position:"fixed",top:0,left:0,width:"100%",height:"100%",zIndex:1,backgroundColor:"rgba(0,0,0,0.6)",justifyContent:"center",alignItems:"center"},p={backgroundColor:"white",padding:"6px",borderRadius:"3px",width:"36rem",height:"24rem"},h={width:"100%",height:"70%",display:"flex",justifyContent:"center",alignItems:"center"},f={display:"inline-flex",width:"100%",height:"30%",justifyContent:"center",alignItems:"center"};for(let g in o)n.style[g]=o[g];for(let g in p)s.style[g]=p[g];for(let g in h)a.style[g]=h[g];for(let g in f)r.style[g]=f[g];n.appendChild(s),s.appendChild(a),s.appendChild(r),a.innerHTML='<div style="font-size: 24pt; margin: 1rem;">This immersive website requires access to your device motion sensors.</div>';const O=()=>{this.requestOrientationPermissions(),n.style.display="none"},M=document.createElement("button");M.addEventListener("click",O),M.style.width="50%",M.style.height="80%",M.style.fontSize="20pt",M.appendChild(document.createTextNode("OK")),r.appendChild(M),document.body.appendChild(n)}}on(t,i){this.eventEmitter.on(t,i)}init(){window.DeviceOrientationEvent===void 0?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NOT_SUPPORTED",message:"Device orientation API not supported"}):window.isSecureContext===!1?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NO_HTTPS",message:"DeviceOrientationEvent is only available in secure contexts (https)"}):typeof window.DeviceOrientationEvent.requestPermission=="function"&&this.enablePermissionDialog?this.obtainPermissionGesture():this.eventEmitter.emit("deviceorientationgranted",{target:this})}}class R{constructor(t){this.raycaster=new v.Raycaster,this.normalisedMousePosition=new v.Vector2(null,null),t.domElement.addEventListener("click",i=>{this.normalisedMousePosition.set(i.clientX/t.domElement.clientWidth*2-1,-(i.clientY/t.domElement.clientHeight*2)+1)})}raycast(t,i){if(this.normalisedMousePosition.x!==null&&this.normalisedMousePosition.y!==null){this.raycaster.setFromCamera(this.normalisedMousePosition,t);const e=this.raycaster.intersectObjects(i.children,!1);return this.normalisedMousePosition.set(null,null),e}return[]}}const S="0.1.0";d.ClickHandler=R,d.DeviceOrientationControls=L,d.EventEmitter=y,d.LocationBased=C,d.SphMercProjection=A,d.Webcam=_,d.version=S,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+(function(h,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],c):(h=typeof globalThis<"u"?globalThis:h||self,c(h.locar={},h.THREE))})(this,(function(h,c){"use strict";function b(m){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const i in m)if(i!=="default"){const e=Object.getOwnPropertyDescriptor(m,i);Object.defineProperty(t,i,e.get?e:{enumerable:!0,get:()=>m[i]})}}return t.default=m,Object.freeze(t)}const p=b(c);class A{constructor(){this.EARTH=4007501668e-2,this.HALF_EARTH=2003750834e-2}project(t,i){return[this.#t(t),this.#l(i)]}unproject(t){return[this.#e(t[0]),this.#s(t[1])]}#t(t){return t/180*this.HALF_EARTH}#l(t){var i=Math.log(Math.tan((90+t)*Math.PI/360))/(Math.PI/180);return i*this.HALF_EARTH/180}#e(t){return t/this.HALF_EARTH*180}#s(t){var i=t/this.HALF_EARTH*180;return i=180/Math.PI*(2*Math.atan(Math.exp(i*Math.PI/180))-Math.PI/2),i}getID(){return"epsg:3857"}}class M{constructor(){this.eventHandlers={}}on(t,i){this.eventHandlers[t]=i}emit(t,...i){this.eventHandlers[t]?.call(this,...i)}}class w extends M{#t;#l;#e;#s;#c;#o;#i;#r;#a;#n;constructor(t,i,e={},l=null){super(),this.scene=t,this.camera=i,this.#t=new A,this.#e=null,this.#s=0,this.#c=100,this.#o=null,this.setGpsOptions(e),this.#i=null,this.#r=0,this.#a=0,this.#n=l}setProjection(t){this.#t=t}setGpsOptions(t={}){t.gpsMinDistance!==void 0&&(this.#s=t.gpsMinDistance),t.gpsMinAccuracy!==void 0&&(this.#c=t.gpsMinAccuracy)}async startGps(){if(this.#n){const i=await(await this.#n.sendData("/gps/start",{gpsMinDistance:this.#s,gpsMinAccuracy:this.#c})).json();this.#a=i.session}return this.#o===null?(this.#o=navigator.geolocation.watchPosition(t=>{this.#h(t)},t=>{this.emit("gpserror",t)},{enableHighAccuracy:!0}),!0):!1}stopGps(){return this.#o!==null?(navigator.geolocation.clearWatch(this.#o),this.#o=null,!0):!1}fakeGps(t,i,e=null,l=0){e!==null&&this.setElevation(e),this.#h({coords:{longitude:t,latitude:i,accuracy:l}})}lonLatToWorldCoords(t,i){const e=this.#t.project(t,i);if(this.#i)e[0]-=this.#i[0],e[1]-=this.#i[1];else throw"No initial position determined";return[e[0],-e[1]]}add(t,i,e,l,g={}){t.properties=g,this.#d(t,i,e,l),this.scene.add(t),this.#n?.sendData("/object/new",{position:t.position,x:t.position.x,z:t.position.z,session:this.#a,properties:g})}#d(t,i,e,l){const g=this.lonLatToWorldCoords(i,e);l!==void 0&&(t.position.y=l),[t.position.x,t.position.z]=g}setElevation(t){this.camera.position.y=t}#u(t,i){this.#i=this.#t.project(t,i)}#h(t){let i=Number.MAX_VALUE;this.#r++,this.#n?.sendData("/gps/new",{gpsCount:this.#r,lat:t.coords.latitude,lon:t.coords.longitude,acc:t.coords.accuracy,session:this.#a}),t.coords.accuracy<=this.#c&&(this.#e===null?this.#e={latitude:t.coords.latitude,longitude:t.coords.longitude}:i=this.#m(this.#e,t.coords),i>=this.#s&&(this.#e.longitude=t.coords.longitude,this.#e.latitude=t.coords.latitude,this.#i||(this.#u(t.coords.longitude,t.coords.latitude),this.#n?.sendData("/worldorigin/new",{gpsCount:this.#r,lat:t.coords.latitude,lon:t.coords.longitude,session:this.#a,initialPosition:this.#i})),this.#d(this.camera,t.coords.longitude,t.coords.latitude),this.#n?.sendData("/gps/accepted",{gpsCount:this.#r,cameraX:this.camera.position.x,cameraZ:this.camera.position.z,session:this.#a,distMoved:i}),this.emit("gpsupdate",{position:t,distMoved:i})))}#m(t,i){const e=p.MathUtils.degToRad(i.longitude-t.longitude),l=p.MathUtils.degToRad(i.latitude-t.latitude),g=Math.sin(l/2)*Math.sin(l/2)+Math.cos(p.MathUtils.degToRad(t.latitude))*Math.cos(p.MathUtils.degToRad(i.latitude))*(Math.sin(e/2)*Math.sin(e/2));return 2*Math.atan2(Math.sqrt(g),Math.sqrt(1-g))*6371e3}}class D extends M{#t;constructor(t={video:{facingMode:"environment"}},i){super(),this.sceneWebcam=new p.Scene,i?this.#t=document.querySelector(i):(this.#t=document.createElement("video"),this.#t.setAttribute("autoplay",!0),this.#t.setAttribute("playsinline",!0),this.#t.style.display="none",document.body.appendChild(this.#t)),this.texture=new p.VideoTexture(this.#t),navigator.mediaDevices&&navigator.mediaDevices.getUserMedia?navigator.mediaDevices.getUserMedia(t).then(e=>{this.#t.addEventListener("loadedmetadata",()=>{this.#t.setAttribute("width",this.#t.videoWidth),this.#t.setAttribute("height",this.#t.videoHeight),this.#t.play(),this.emit("webcamstarted",{texture:this.texture})}),this.#t.srcObject=e}).catch(e=>{this.emit("webcamerror",{code:e.name,message:e.message})}):this.emit("webcamerror",{code:"LOCAR_NO_MEDIA_DEVICES_API",message:"Media devices API not supported"})}dispose(){this.texture.dispose()}}const S="locar-device-orientation-permission-modal",T="locar-device-orientation-permission-button",N="locar-device-orientation-permission-message",R="locar-device-orientation-permission-inner",L="locar-device-orientation-permission-button-inner",P="This immersive website requires access to your device motion sensors.",I=navigator.userAgent.match(/iPhone|iPad|iPod/i)||/Macintosh/i.test(navigator.userAgent)&&navigator.maxTouchPoints!=null&&navigator.maxTouchPoints>1,x=new c.Vector3(0,0,1),_=new c.Euler,F=new c.Quaternion,U=new c.Quaternion(-Math.sqrt(.5),0,0,Math.sqrt(.5));class j extends c.EventDispatcher{constructor(t,i={}){super(),this.eventEmitter=new M;const e=this;this.object=t,this.object.rotation.reorder("YXZ"),this.enabled=!0,this.deviceOrientation=null,this.screenOrientation=0,this.alphaOffset=0,this.orientationOffset=0,this.initialOffset=null,this.lastCompassY=void 0,this.lastOrientation=null,this.TWO_PI=2*Math.PI,this.HALF_PI=.5*Math.PI,this.orientationChangeEventName="ondeviceorientationabsolute"in window?"deviceorientationabsolute":"deviceorientation",this.smoothingFactor=i.smoothingFactor||1,this.enablePermissionDialog=i.enablePermissionDialog??!0,this.enableInlineStyling=i.enableStyling??!0,this.preferConfirmDialog=i.preferConfirmDialog??!1;const l=function({alpha:n,beta:s,gamma:a,webkitCompassHeading:r}){if(I){const o=360-r;e.alphaOffset=c.MathUtils.degToRad(o-n),e.deviceOrientation={alpha:n,beta:s,gamma:a,webkitCompassHeading:r}}else n<0&&(n+=360),e.deviceOrientation={alpha:n,beta:s,gamma:a};window.dispatchEvent(new CustomEvent("camera-rotation-change",{detail:{cameraRotation:t.rotation}}))},g=function(){e.screenOrientation=window.orientation||0,I&&(e.screenOrientation===90?e.orientationOffset=-e.HALF_PI:e.screenOrientation===-90?e.orientationOffset=e.HALF_PI:e.orientationOffset=0)},E=function(n,s,a,r,o){_.set(a,s,-r,"YXZ"),n.setFromEuler(_),n.multiply(U),n.multiply(F.setFromAxisAngle(x,-o))};this.connect=function(){g(),window.addEventListener("orientationchange",g),window.addEventListener(e.orientationChangeEventName,l),e.enabled=!0},this.disconnect=function(){window.removeEventListener("orientationchange",g),window.removeEventListener(e.orientationChangeEventName,l),e.enabled=!1,e.initialOffset=!1,e.deviceOrientation=null},this.requestOrientationPermissions=function(){window.DeviceOrientationEvent!==void 0&&typeof window.DeviceOrientationEvent.requestPermission=="function"?window.DeviceOrientationEvent.requestPermission().then(n=>{n==="granted"?this.eventEmitter.emit("deviceorientationgranted",{target:this}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_DENIED",message:"Permission for device orientation denied - AR will not work correctly"})}).catch(function(n){this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_FAILED",message:"Permission request for device orientation failed - AR will not work correctly",error:JSON.stringify(n,null,2)})}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_INTERNAL_ERROR",message:"Internal error: no requestPermission() found although requestOrientationPermissions() was called - please raise an issue on GitHub"})},this.update=function({theta:n=0}={theta:0}){if(e.enabled===!1)return;const s=e.deviceOrientation;if(s){let a=s.alpha?c.MathUtils.degToRad(s.alpha)+e.alphaOffset:0,r=s.beta?c.MathUtils.degToRad(s.beta):0,o=s.gamma?c.MathUtils.degToRad(s.gamma):0;const v=e.screenOrientation?c.MathUtils.degToRad(e.screenOrientation):0;if(e.smoothingFactor<1){if(e.lastOrientation){const u=e.smoothingFactor;a=e._getSmoothedAngle(a,e.lastOrientation.alpha,u),r=e._getSmoothedAngle(r+Math.PI,e.lastOrientation.beta,u),o=e._getSmoothedAngle(o+e.HALF_PI,e.lastOrientation.gamma,u,Math.PI)}else r+=Math.PI,o+=e.HALF_PI;e.lastOrientation={alpha:a,beta:r,gamma:o}}if(I){const u=new c.Quaternion;E(u,a,e.smoothingFactor<1?r-Math.PI:r,e.smoothingFactor<1?o-Math.PI/2:o,v);const f=new c.Euler().setFromQuaternion(u,"YXZ");let O=c.MathUtils.degToRad(360-s.webkitCompassHeading);e.smoothingFactor<1&&e.lastCompassY!==void 0&&(O=e._getSmoothedAngle(O,e.lastCompassY,e.smoothingFactor)),e.lastCompassY=O,f.y=O+(e.orientationOffset||0),u.setFromEuler(f),e.object.quaternion.copy(u)}else E(e.object.quaternion,I?a+e.alphaOffset:a,e.smoothingFactor<1?r-Math.PI:r,e.smoothingFactor<1?o-Math.PI/2:o,v)}},this.getCorrectedHeading=function(){const{deviceOrientation:n}=e;if(!n)return 0;let s=0;return I?(s=360-n.webkitCompassHeading,e.orientationOffset&&(s+=e.orientationOffset*(180/Math.PI),s=(s+360)%360)):(n.absolute===!0||e.orientationChangeEventName,s=n.alpha?n.alpha:0,s=(360-s)%360,s<0&&(s+=360)),s},this._orderAngle=function(n,s,a=e.TWO_PI){return s>n&&Math.abs(s-n)<a/2||n>s&&Math.abs(s-n)>a/2?{left:n,right:s}:{left:s,right:n}},this._getSmoothedAngle=function(n,s,a,r=e.TWO_PI){const o=e._orderAngle(n,s,r),v=o.left,u=o.right;o.left=0,o.right-=v,o.right<0&&(o.right+=r);let f=u==s?(1-a)*o.right+a*o.left:a*o.right+(1-a)*o.left;return f+=v,f>=r&&(f-=r),f},this.updateAlphaOffset=function(){e.initialOffset=!1},this.dispose=function(){e.disconnect()},this.getAlpha=function(){const{deviceOrientation:n}=e;return n&&n.alpha?c.MathUtils.degToRad(n.alpha)+e.alphaOffset:0},this.getBeta=function(){const{deviceOrientation:n}=e;return n&&n.beta?c.MathUtils.degToRad(n.beta):0},this.getGamma=function(){const{deviceOrientation:n}=e;return n&&n.gamma?c.MathUtils.degToRad(n.gamma):0},this.createObtainPermissionGestureDialog=function(){const n=document.createElement("div");n.classList.add(S);const s=document.createElement("div");s.classList.add(R);const a=document.createElement("div");a.classList.add(N);const r=document.createElement("div");r.classList.add(L);const o=document.createElement("button");if(o.classList.add(T),document.body.appendChild(n),this.enableInlineStyling===!0){const u={fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",display:"flex",position:"fixed",zIndex:1e5,justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0,0,0,0.2)",inset:0,padding:"20px"},f={backgroundColor:"rgba(220, 220, 220, 0.85)",padding:"6px 0",borderRadius:"10px",width:"100%",maxWidth:"400px"},O={padding:"10px 12px",textAlign:"center",fontWeight:400,fontSize:"13px",display:"flex",justifyContent:"center",alignItems:"center"},y={display:"block",textAlign:"center",textDecoration:"none",borderTop:"rgb(180,180,180) solid 1px"},C={display:"block",width:"100%",textAlign:"center",appearance:"none",background:"none",border:"none",outline:"none",padding:"10px",fontWeight:400,fontSize:"16px",color:"#2e7cf1",cursor:"pointer"};for(let d in u)n.style[d]=u[d];for(let d in f)s.style[d]=f[d];for(let d in O)a.style[d]=O[d];for(let d in y)r.style[d]=y[d];for(let d in C)o.style[d]=C[d]}n.appendChild(s),s.appendChild(a),s.appendChild(r),a.appendChild(document.createTextNode(P));const v=()=>{this.requestOrientationPermissions(),n.style.display="none"};o.addEventListener("click",v),o.appendChild(document.createTextNode("OK")),r.appendChild(o),document.body.appendChild(n)},this.obtainPermissionGesture=function(){this.preferConfirmDialog===!0?window.confirm(P)&&this.requestOrientationPermissions():this.createObtainPermissionGestureDialog()}}on(t,i){this.eventEmitter.on(t,i)}init(){window.DeviceOrientationEvent===void 0?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NOT_SUPPORTED",message:"Device orientation API not supported"}):window.isSecureContext===!1?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NO_HTTPS",message:"DeviceOrientationEvent is only available in secure contexts (https)"}):typeof window.DeviceOrientationEvent.requestPermission=="function"&&this.enablePermissionDialog?this.obtainPermissionGesture():this.eventEmitter.emit("deviceorientationgranted",{target:this})}}class q{constructor(t){this.raycaster=new p.Raycaster,this.normalisedMousePosition=new p.Vector2(null,null),t.domElement.addEventListener("click",i=>{this.normalisedMousePosition.set(i.clientX/t.domElement.clientWidth*2-1,-(i.clientY/t.domElement.clientHeight*2)+1)})}raycast(t,i){if(this.normalisedMousePosition.x!==null&&this.normalisedMousePosition.y!==null){this.raycaster.setFromCamera(this.normalisedMousePosition,t);const e=this.raycaster.intersectObjects(i.children,!1);return this.normalisedMousePosition.set(null,null),e}return[]}}const k="0.1.2";h.ClickHandler=q,h.DeviceOrientationControls=j,h.EventEmitter=M,h.LocationBased=w,h.SphMercProjection=A,h.Webcam=D,h.version=k,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/lib/types/locar.d.ts

@@ -0,0 +1,316 @@
+declare module "locar" {
+  import * as THREE from "three";
+
+  /**
+   * Generic, small event emitter that only stores a single handler per event name.
+   */
+  export class EventEmitter {
+    protected eventHandlers: Record<string, (...args: any[]) => void>;
+    on(eventName: string, handler: (...args: any[]) => void): void;
+    emit(eventName: string, ...params: any[]): void;
+  }
+
+  /**
+   * Spherical Mercator (EPSG:3857) projection used by `LocationBased`.
+   */
+  export class SphMercProjection {
+    constructor();
+    /**
+     * @returns [easting, northing]
+     */
+    project(lon: number, lat: number): [number, number];
+    /**
+     * @returns [lon, lat]
+     */
+    unproject(projected: [number, number]): [number, number];
+    getID(): "epsg:3857";
+  }
+
+  /**
+   * Options for GPS in `LocationBased`.
+   * Mirrored from `setGpsOptions(...)`
+   */
+  export interface GpsOptions {
+    /**
+     * Meters the device must move to accept the next GPS reading.
+     */
+    gpsMinDistance?: number;
+    /**
+     * Minimum accuracy in meters to accept a GPS reading.
+     */
+    gpsMinAccuracy?: number;
+  }
+
+  /**
+   * Optional logger object passed to `LocationBased` for debug.
+   */
+  export interface ServerLogger {
+    /**
+     * Should send data to server. Implementation-specific in userland.
+     */
+    sendData(endpoint: string, data: any): Promise<Response> | Response;
+  }
+
+  /**
+   * Main location AR class.
+   */
+  export class LocationBased extends EventEmitter {
+    readonly scene: THREE.Scene;
+    readonly camera: THREE.Camera;
+
+    constructor(
+      scene: THREE.Scene,
+      camera: THREE.Camera,
+      options?: GpsOptions,
+      serverLogger?: ServerLogger | null,
+    );
+
+    /**
+     * Set the projection (must have `project(lon,lat): [x,y]`).
+     */
+    setProjection(proj: {
+      project(lon: number, lat: number): [number, number];
+    }): void;
+
+    /**
+     * Update GPS options at runtime.
+     */
+    setGpsOptions(options?: GpsOptions): void;
+
+    /**
+     * Start real GPS (`navigator.geolocation.watchPosition`).
+     */
+    startGps(): Promise<boolean> | boolean;
+
+    /**
+     * Stop real GPS.
+     */
+    stopGps(): boolean;
+
+    /**
+     * Send a fake GPS position.
+     */
+    fakeGps(lon: number, lat: number, elev?: number | null, acc?: number): void;
+
+    /**
+     * Convert lon/lat to world coordinates (needs initial position).
+     */
+    lonLatToWorldCoords(lon: number, lat: number): [number, number];
+
+    /**
+     * Add a THREE object at lon/lat/(elev) and put in the scene.
+     */
+    add(
+      object: THREE.Object3D,
+      lon: number,
+      lat: number,
+      elev?: number,
+      properties?: Record<string, any>,
+    ): void;
+
+    /**
+     * Set camera elevation (y).
+     */
+    setElevation(elev: number): void;
+
+    /**
+     * Events:
+     * - "gpsupdate": `{ position: GeolocationPosition, distMoved: number }``
+     * - "gpserror": `GeolocationPositionError`
+     */
+    on(
+      eventName: "gpsupdate",
+      handler: (data: {
+        position: GeolocationPosition;
+        distMoved: number;
+      }) => void,
+    ): void;
+    on(
+      eventName: "gpserror",
+      handler: (error: GeolocationPositionError) => void,
+    ): void;
+    on(eventName: string, handler: (...args: any[]) => void): void;
+  }
+
+  /**
+   * Small webcam wrapper that creates a hidden `<video>` and a `THREE.VideoTexture`.
+   */
+  export interface WebcamStartedEvent {
+    texture: THREE.VideoTexture;
+  }
+  export interface WebcamErrorEvent {
+    code: string;
+    message: string;
+  }
+
+  export class Webcam extends EventEmitter {
+    /**
+     * @param constraints `MediaDevices.getUserMedia` constraints
+     * @param videoElementSelector selector for an existing `<video>`; if falsy, it creates one
+     */
+    constructor(
+      constraints?: MediaStreamConstraints,
+      videoElementSelector?: string | null,
+    );
+
+    /**
+     * Texture that streams the camera feed.
+     */
+    readonly texture: THREE.VideoTexture;
+
+    /**
+     * Free GPU resources.
+     */
+    dispose(): void;
+
+    // events
+    on(
+      eventName: "webcamstarted",
+      handler: (e: WebcamStartedEvent) => void,
+    ): void;
+    on(eventName: "webcamerror", handler: (e: WebcamErrorEvent) => void): void;
+    on(eventName: string, handler: (...args: any[]) => void): void;
+  }
+
+  /**
+   * Click handler/raycaster wrapper.
+   */
+  export class ClickHandler {
+    constructor(renderer: THREE.WebGLRenderer);
+
+    /**
+     * Cast a ray and return intersects with scene children.
+     */
+    raycast(camera: THREE.Camera, scene: THREE.Scene): THREE.Intersection[];
+  }
+
+  export interface DeviceOrientationControlsOptions {
+    /**
+     * 0 < k <= 1. Lower = more smoothing.
+     */
+    smoothingFactor?: number;
+    /**
+     * Show iOS permission dialog.
+     */
+    enablePermissionDialog?: boolean;
+    /**
+     * Apply inline styles on the created dialog.
+     */
+    enableStyling?: boolean;
+    /**
+     * Use `window.confirm(...)` instead of building DOM.
+     */
+    preferConfirmDialog?: boolean;
+  }
+
+  export interface DeviceOrientationGrantedEvent {
+    target: DeviceOrientationControls;
+  }
+
+  export interface DeviceOrientationErrorEvent {
+    code: string;
+    message: string;
+    error?: string;
+  }
+
+  export class DeviceOrientationControls extends THREE.EventDispatcher {
+    /**
+     * @param object usually a `THREE.Camera`
+     */
+    constructor(
+      object: THREE.Object3D,
+      options?: DeviceOrientationControlsOptions,
+    );
+
+    /**
+     * Initialize the device orientation controls. Should be called first to set up permission flow.
+     */
+    init(): void;
+
+    /**
+     * Begin listening to orientation + screenorientation (must be called after permission is granted on iOS).
+     */
+    connect(): void;
+
+    /**
+     * Stop listening.
+     */
+    disconnect(): void;
+
+    /**
+     * iOS: must be called in a user gesture to ask for perms.
+     */
+    requestOrientationPermissions(): void;
+
+    /**
+     * Create the DOM dialog (iOS-style) and wire it to requestOrientationPermissions.
+     */
+    createObtainPermissionGestureDialog(): void;
+
+    /**
+     * Choose `confirm()` vs DOM dialog.
+     */
+    obtainPermissionGesture(): void;
+
+    /**
+     * Call each frame.
+     */
+    update(args?: { theta?: number }): void;
+
+    /**
+     * iOS heading correction.
+     */
+    getCorrectedHeading(): number;
+
+    /**
+     * Provided in AR.js fix — forces re-evaluation of alpha offset.
+     */
+    updateAlphaOffset(): void;
+
+    /**
+     * Getters (radians).
+     */
+    getAlpha(): number;
+    getBeta(): number;
+    getGamma(): number;
+
+    dispose(): void;
+
+    on(
+      eventName: "deviceorientationgranted",
+      handler: (ev: DeviceOrientationGrantedEvent) => void,
+    ): void;
+    on(
+      eventName: "deviceorientationerror",
+      handler: (ev: DeviceOrientationErrorEvent) => void,
+    ): void;
+    on(eventName: string, handler: (...args: any[]) => void): void;
+
+    enabled: boolean;
+  }
+
+  /**
+   * Version string.
+   */
+  export const version: string;
+
+  /**
+   * Default export from build (UMD/ES) is the namespace with all the above.
+   * Modeled so that:
+   *   `import * as LocAR from "locar"`
+   * and
+   *   `import LocAR from "locar"``
+   * both typecheck.
+   */
+  const LocAR: {
+    EventEmitter: typeof EventEmitter;
+    SphMercProjection: typeof SphMercProjection;
+    LocationBased: typeof LocationBased;
+    Webcam: typeof Webcam;
+    ClickHandler: typeof ClickHandler;
+    DeviceOrientationControls: typeof DeviceOrientationControls;
+    version: string;
+  };
+
+  export default LocAR;
+}

package/package.json

@@ -1,24 +1,35 @@
 {
   "name": "locar",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Location-based AR from AR.js.",
   "files": [
-    "dist"
+    "dist",
+    "lib/types"
   ],
   "main": "./dist/locar.umd.js",
   "module": "./dist/locar.es.js",
+  "types": "lib/types/locar.d.ts",
   "exports": {
     ".": {
+      "types": "./lib/types/locar.d.ts",
       "import": "./dist/locar.es.js",
       "require": "./dist/locar.umd.js"
     }
   },
   "scripts": {
-    "build": "vite build && npm pack",
+    "lint": "eslint ./lib --ext .js,.json,.css",
+    "lint:fix": "prettier --write ./lib && eslint ./lib --ext .js,.json,.css --fix",
+    "build": "npm run lint && vite build && npm pack",
     "makedocs": "jsdoc -r lib -d docs/api"
   },
   "devDependencies": {
+    "@eslint/css": "^0.11.0",
+    "@eslint/js": "^9.35.0",
+    "@eslint/json": "^0.13.2",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
     "jsdoc": "^4.0.4",
+    "prettier-eslint": "^16.4.2",
     "vite": "^7.1.3"
   },
   "dependencies": {