lunchboxjs 2.1.18 → 2.2.0

package/dist/lunchboxjs.cjs

@@ -40,4 +40,4 @@
       max-width: 100%;
       max-height: 100%;
     }
-  `;let f=re;A([y()],f.prototype,"background");A([y()],f.prototype,"dpr");A([y()],f.prototype,"headless");A([y({attribute:"manual-render",type:Boolean})],f.prototype,"manualRender");A([y({attribute:"dispatch-before-render",type:Boolean})],f.prototype,"dispatchBeforeRender");A([y({attribute:"dispatch-after-render",type:Boolean})],f.prototype,"dispatchAfterRender");A([y({attribute:"renderer-args",type:Object})],f.prototype,"rendererArgs");A([y({attribute:"camera-args",type:Object})],f.prototype,"cameraArgs");class Pe extends C{constructor(){super(...arguments),this.parentLunchbox=null,this.frame=-1,this.scratchV3=new p.Vector3,this.scratchFrustum=new p.Frustum,this.scratchMatrix4=new p.Matrix4}tryAttachUpdate(){var o;const e=(o=this.parentLunchbox)==null?void 0:o.instance;if(!e)return!1;if(!e.isObject3D)throw new Error("html-anchor must be the child of an Object3D");const t=k(this,a=>{var h;return!!((h=a==null?void 0:a.three)!=null&&h.renderer)});if(!t)return console.error("three-lunchbox parent required for html-anchor"),!1;const s=t.three.camera;if(!s)return console.error("camera required for html-anchor"),!1;const r=t.three.renderer;if(!(r!=null&&r.domElement))return console.error("renderer and DOM element required for html-anchor"),!1;const n=()=>{this.frame=requestAnimationFrame(n),s.updateMatrix(),s.updateMatrixWorld(),e.getWorldPosition(this.scratchV3);const a=this.scratchV3.clone();this.scratchV3.project(s),this.scratchV3.multiplyScalar(.5).addScalar(.5),this.scratchV3.y=1-this.scratchV3.y;const h=this.scratchV3.clone().set(r.domElement.width,r.domElement.height,1);h.divideScalar(devicePixelRatio),this.scratchV3.multiply(h);const c=e.position.clone().distanceTo(s.getWorldPosition(this.scratchV3.clone()));this.scratchFrustum.setFromProjectionMatrix(this.scratchMatrix4.clone().multiplyMatrices(s.projectionMatrix,s.matrixWorldInverse));const d=this.scratchFrustum.containsPoint(a);Array.from(this.children).forEach(l=>{l.style.setProperty("--left",`${this.scratchV3.x}px`),l.style.setProperty("--top",`${this.scratchV3.y}px`),l.style.setProperty("--distance-from-camera",`${c}`),l.style.setProperty("--in-frustum",`${d?1:0}`)})};return n(),!0}connectedCallback(){super.connectedCallback();const e=this.parentNode;if(!e)throw new Error("html-anchor requires a 3D parent");this.parentLunchbox=e,this.tryAttachUpdate()||this.parentLunchbox.addEventListener("instanceadded",()=>{if(!this.tryAttachUpdate())throw new Error("error attaching html-anchor to Object3D")},{once:!0})}disconnectedCallback(){this.frame!==-1&&cancelAnimationFrame(this.frame)}render(){return se`<slot></slot>`}createRenderRoot(){return this}}const mt=({prependList:i=[]}={})=>{Object.entries({"three-lunchbox":f,"html-anchor":Pe}).forEach(([t,s])=>{customElements.get(t)||customElements.define(t,s)}),[...i,...Y].forEach(t=>{const s=Le(t);if(customElements.get(s))return;const r=Te(t);r&&customElements.define(s,r)})},ft=(i,e,t=window)=>{if(t.customElements.get(i)){console.log(`${i} already registered as a custom element. Try a different name if registering is still required.`);return}const s=Te(e);if(s)t.customElements.define(i,s);else throw new Error(`Could not extend ${i}. The second paramater must be a class.`)},Me="threepointermove",Oe="threemousemove",xe="threeclick",Re="beforerender",Ne="afterrender",Le=i=>{let e=i.split(/\.?(?=[A-Z])/).join("-").toLowerCase().replace(/-g-l-/,"-gl-");return e.includes("-")||(e=`three-${e}`),e},yt=Y.map(Le);exports.AFTER_RENDER_EVENT_NAME=Ne;exports.BEFORE_RENDER_EVENT_NAME=Re;exports.HtmlAnchor=Pe;exports.THREE_CLICK_EVENT_NAME=xe;exports.THREE_MOUSE_MOVE_EVENT_NAME=Oe;exports.THREE_POINTER_MOVE_EVENT_NAME=Me;exports.ThreeBase=U;exports.ThreeLunchbox=f;exports.autoComponents=Y;exports.extend=ft;exports.initLunchbox=mt;exports.webComponentNames=yt;
+  `;let f=re;A([y()],f.prototype,"background");A([y()],f.prototype,"dpr");A([y()],f.prototype,"headless");A([y({attribute:"manual-render",type:Boolean})],f.prototype,"manualRender");A([y({attribute:"dispatch-before-render",type:Boolean})],f.prototype,"dispatchBeforeRender");A([y({attribute:"dispatch-after-render",type:Boolean})],f.prototype,"dispatchAfterRender");A([y({attribute:"renderer-args",type:Object})],f.prototype,"rendererArgs");A([y({attribute:"camera-args",type:Object})],f.prototype,"cameraArgs");class Pe extends C{constructor(){super(...arguments),this.parentLunchbox=null,this.frame=-1,this.scratchV3=new p.Vector3,this.scratchFrustum=new p.Frustum,this.scratchMatrix4=new p.Matrix4}tryAttachUpdate(){var o;const e=(o=this.parentLunchbox)==null?void 0:o.instance;if(!e)return!1;if(!e.isObject3D)throw new Error("html-anchor must be the child of an Object3D");const t=k(this,a=>{var h;return!!((h=a==null?void 0:a.three)!=null&&h.renderer)});if(!t)return console.error("three-lunchbox parent required for html-anchor"),!1;const s=t.three.camera;if(!s)return console.error("camera required for html-anchor"),!1;const r=t.three.renderer;if(!(r!=null&&r.domElement))return console.error("renderer and DOM element required for html-anchor"),!1;const n=()=>{this.frame=requestAnimationFrame(n),s.updateMatrix(),s.updateMatrixWorld(),e.getWorldPosition(this.scratchV3);const a=this.scratchV3.clone();this.scratchV3.project(s),this.scratchV3.multiplyScalar(.5).addScalar(.5),this.scratchV3.y=1-this.scratchV3.y;const h=this.scratchV3.clone().set(r.domElement.width,r.domElement.height,1);h.divideScalar(devicePixelRatio),this.scratchV3.multiply(h);const c=e.position.clone().distanceTo(s.getWorldPosition(this.scratchV3.clone()));this.scratchFrustum.setFromProjectionMatrix(this.scratchMatrix4.clone().multiplyMatrices(s.projectionMatrix,s.matrixWorldInverse));const d=this.scratchFrustum.containsPoint(a);this.style.setProperty("--left",`${this.scratchV3.x}px`),this.style.setProperty("--top",`${this.scratchV3.y}px`),this.style.setProperty("--distance-from-camera",`${c}`),this.style.setProperty("--in-frustum",`${d?1:0}`),d?this.classList.add("in-frustum"):this.classList.remove("in-frustum")};return n(),!0}connectedCallback(){super.connectedCallback();const e=this.parentNode;if(!e)throw new Error("html-anchor requires a 3D parent");this.parentLunchbox=e,this.tryAttachUpdate()||this.parentLunchbox.addEventListener("instanceadded",()=>{if(!this.tryAttachUpdate())throw new Error("error attaching html-anchor to Object3D")},{once:!0})}disconnectedCallback(){this.frame!==-1&&cancelAnimationFrame(this.frame)}render(){return se`<slot></slot>`}createRenderRoot(){return this}}const mt=({prependList:i=[]}={})=>{Object.entries({"three-lunchbox":f,"html-anchor":Pe}).forEach(([t,s])=>{customElements.get(t)||customElements.define(t,s)}),[...i,...Y].forEach(t=>{const s=Le(t);if(customElements.get(s))return;const r=Te(t);r&&customElements.define(s,r)})},ft=(i,e,t=window)=>{if(t.customElements.get(i)){console.log(`${i} already registered as a custom element. Try a different name if registering is still required.`);return}const s=Te(e);if(s)t.customElements.define(i,s);else throw new Error(`Could not extend ${i}. The second paramater must be a class.`)},Me="threepointermove",Oe="threemousemove",xe="threeclick",Re="beforerender",Ne="afterrender",Le=i=>{let e=i.split(/\.?(?=[A-Z])/).join("-").toLowerCase().replace(/-g-l-/,"-gl-");return e.includes("-")||(e=`three-${e}`),e},yt=Y.map(Le);exports.AFTER_RENDER_EVENT_NAME=Ne;exports.BEFORE_RENDER_EVENT_NAME=Re;exports.HtmlAnchor=Pe;exports.THREE_CLICK_EVENT_NAME=xe;exports.THREE_MOUSE_MOVE_EVENT_NAME=Oe;exports.THREE_POINTER_MOVE_EVENT_NAME=Me;exports.ThreeBase=U;exports.ThreeLunchbox=f;exports.autoComponents=Y;exports.extend=ft;exports.initLunchbox=mt;exports.webComponentNames=yt;

package/dist/lunchboxjs.js

@@ -92,7 +92,7 @@ const Ae = [
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const j = globalThis, Y = j.ShadowRoot && (j.ShadyCSS === void 0 || j.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, X = Symbol(), re = /* @__PURE__ */ new WeakMap();
-let Ee = class {
+let be = class {
   constructor(e, t, s) {
     if (this._$cssResult$ = !0, s !== X)
       throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -111,7 +111,7 @@ let Ee = class {
     return this.cssText;
   }
 };
-const Me = (i) => new Ee(typeof i == "string" ? i : i + "", void 0, X), Oe = (i, ...e) => {
+const Me = (i) => new be(typeof i == "string" ? i : i + "", void 0, X), Oe = (i, ...e) => {
   const t = i.length === 1 ? i[0] : e.reduce((s, r, n) => s + ((o) => {
     if (o._$cssResult$ === !0)
       return o.cssText;
@@ -119,7 +119,7 @@ const Me = (i) => new Ee(typeof i == "string" ? i : i + "", void 0, X), Oe = (i,
       return o;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(r) + i[n + 1], i[0]);
-  return new Ee(t, i, X);
+  return new be(t, i, X);
 }, xe = (i, e) => {
   if (Y)
     i.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
@@ -390,8 +390,8 @@ S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[O("elementProper
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const x = globalThis, ae = (i) => i, I = x.trustedTypes, he = I ? I.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, be = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, _e = "?" + g, ke = `<${_e}>`, C = document, R = () => C.createComment(""), N = (i) => i === null || typeof i != "object" && typeof i != "function", ee = Array.isArray, Ie = (i) => ee(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", q = `[ 	
-\f\r]`, M = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ce = /-->/g, le = />/g, b = RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ 	
+const x = globalThis, ae = (i) => i, I = x.trustedTypes, he = I ? I.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, Ee = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, _e = "?" + g, ke = `<${_e}>`, C = document, R = () => C.createComment(""), N = (i) => i === null || typeof i != "object" && typeof i != "function", ee = Array.isArray, Ie = (i) => ee(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", q = `[ 	
+\f\r]`, M = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ce = /-->/g, le = />/g, E = RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), de = /'/g, ue = /"/g, ve = /^(?:script|style|textarea|title)$/i, Be = (i) => (e, ...t) => ({ _$litType$: i, strings: e, values: t }), te = Be(1), P = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), pe = /* @__PURE__ */ new WeakMap(), _ = C.createTreeWalker(C, 129);
 function we(i, e) {
   if (!ee(i) || !i.hasOwnProperty("raw"))
@@ -405,9 +405,9 @@ const Ge = (i, e) => {
     const h = i[a];
     let c, d, l = -1, m = 0;
     for (; m < h.length && (o.lastIndex = m, d = o.exec(h), d !== null); )
-      m = o.lastIndex, o === M ? d[1] === "!--" ? o = ce : d[1] !== void 0 ? o = le : d[2] !== void 0 ? (ve.test(d[2]) && (r = RegExp("</" + d[2], "g")), o = b) : d[3] !== void 0 && (o = b) : o === b ? d[0] === ">" ? (o = r ?? M, l = -1) : d[1] === void 0 ? l = -2 : (l = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? b : d[3] === '"' ? ue : de) : o === ue || o === de ? o = b : o === ce || o === le ? o = M : (o = b, r = void 0);
-    const $ = o === b && i[a + 1].startsWith("/>") ? " " : "";
-    n += o === M ? h + ke : l >= 0 ? (s.push(c), h.slice(0, l) + be + h.slice(l) + g + $) : h + g + (l === -2 ? a : $);
+      m = o.lastIndex, o === M ? d[1] === "!--" ? o = ce : d[1] !== void 0 ? o = le : d[2] !== void 0 ? (ve.test(d[2]) && (r = RegExp("</" + d[2], "g")), o = E) : d[3] !== void 0 && (o = E) : o === E ? d[0] === ">" ? (o = r ?? M, l = -1) : d[1] === void 0 ? l = -2 : (l = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? E : d[3] === '"' ? ue : de) : o === ue || o === de ? o = E : o === ce || o === le ? o = M : (o = E, r = void 0);
+    const $ = o === E && i[a + 1].startsWith("/>") ? " " : "";
+    n += o === M ? h + ke : l >= 0 ? (s.push(c), h.slice(0, l) + Ee + h.slice(l) + g + $) : h + g + (l === -2 ? a : $);
   }
   return [we(i, n + (i[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
@@ -425,7 +425,7 @@ class L {
       if (r.nodeType === 1) {
         if (r.hasAttributes())
           for (const l of r.getAttributeNames())
-            if (l.endsWith(be)) {
+            if (l.endsWith(Ee)) {
               const m = d[o++], $ = r.getAttribute(l).split(g), H = /([.?@])?(.*)/.exec(m);
               h.push({ type: 1, index: n, name: H[2], strings: $, ctor: H[1] === "." ? We : H[1] === "?" ? qe : H[1] === "@" ? Fe : z }), r.removeAttribute(l);
             } else
@@ -968,7 +968,7 @@ const Pe = (i) => {
   }
   return t ? r : s;
 };
-var it = Object.defineProperty, E = (i, e, t, s) => {
+var it = Object.defineProperty, b = (i, e, t, s) => {
   for (var r = void 0, n = i.length - 1, o; n >= 0; n--)
     (o = i[n]) && (r = o(e, t, r) || r);
   return r && it(e, t, r), r;
@@ -1101,40 +1101,40 @@ se.styles = Oe`
     }
   `;
 let f = se;
-E([
+b([
   y()
 ], f.prototype, "background");
-E([
+b([
   y()
 ], f.prototype, "dpr");
-E([
+b([
   y()
 ], f.prototype, "headless");
-E([
+b([
   y({
     attribute: "manual-render",
     type: Boolean
   })
 ], f.prototype, "manualRender");
-E([
+b([
   y({
     attribute: "dispatch-before-render",
     type: Boolean
   })
 ], f.prototype, "dispatchBeforeRender");
-E([
+b([
   y({
     attribute: "dispatch-after-render",
     type: Boolean
   })
 ], f.prototype, "dispatchAfterRender");
-E([
+b([
   y({
     attribute: "renderer-args",
     type: Object
   })
 ], f.prototype, "rendererArgs");
-E([
+b([
   y({
     attribute: "camera-args",
     type: Object
@@ -1173,9 +1173,7 @@ class ot extends w {
       const c = e.position.clone().distanceTo(s.getWorldPosition(this.scratchV3.clone()));
       this.scratchFrustum.setFromProjectionMatrix(this.scratchMatrix4.clone().multiplyMatrices(s.projectionMatrix, s.matrixWorldInverse));
       const d = this.scratchFrustum.containsPoint(a);
-      Array.from(this.children).forEach((l) => {
-        l.style.setProperty("--left", `${this.scratchV3.x}px`), l.style.setProperty("--top", `${this.scratchV3.y}px`), l.style.setProperty("--distance-from-camera", `${c}`), l.style.setProperty("--in-frustum", `${d ? 1 : 0}`);
-      });
+      this.style.setProperty("--left", `${this.scratchV3.x}px`), this.style.setProperty("--top", `${this.scratchV3.y}px`), this.style.setProperty("--distance-from-camera", `${c}`), this.style.setProperty("--in-frustum", `${d ? 1 : 0}`), d ? this.classList.add("in-frustum") : this.classList.remove("in-frustum");
     };
     return n(), !0;
   }

package/dist/lunchboxjs.umd.cjs

@@ -40,4 +40,4 @@
       max-width: 100%;
       max-height: 100%;
     }
-  `;let f=ne;_([E()],f.prototype,"background"),_([E()],f.prototype,"dpr"),_([E()],f.prototype,"headless"),_([E({attribute:"manual-render",type:Boolean})],f.prototype,"manualRender"),_([E({attribute:"dispatch-before-render",type:Boolean})],f.prototype,"dispatchBeforeRender"),_([E({attribute:"dispatch-after-render",type:Boolean})],f.prototype,"dispatchAfterRender"),_([E({attribute:"renderer-args",type:Object})],f.prototype,"rendererArgs"),_([E({attribute:"camera-args",type:Object})],f.prototype,"cameraArgs");class Me extends S{constructor(){super(...arguments),this.parentLunchbox=null,this.frame=-1,this.scratchV3=new m.Vector3,this.scratchFrustum=new m.Frustum,this.scratchMatrix4=new m.Matrix4}tryAttachUpdate(){var o;const e=(o=this.parentLunchbox)==null?void 0:o.instance;if(!e)return!1;if(!e.isObject3D)throw new Error("html-anchor must be the child of an Object3D");const t=z(this,a=>{var h;return!!((h=a==null?void 0:a.three)!=null&&h.renderer)});if(!t)return console.error("three-lunchbox parent required for html-anchor"),!1;const s=t.three.camera;if(!s)return console.error("camera required for html-anchor"),!1;const r=t.three.renderer;if(!(r!=null&&r.domElement))return console.error("renderer and DOM element required for html-anchor"),!1;const n=()=>{this.frame=requestAnimationFrame(n),s.updateMatrix(),s.updateMatrixWorld(),e.getWorldPosition(this.scratchV3);const a=this.scratchV3.clone();this.scratchV3.project(s),this.scratchV3.multiplyScalar(.5).addScalar(.5),this.scratchV3.y=1-this.scratchV3.y;const h=this.scratchV3.clone().set(r.domElement.width,r.domElement.height,1);h.divideScalar(devicePixelRatio),this.scratchV3.multiply(h);const c=e.position.clone().distanceTo(s.getWorldPosition(this.scratchV3.clone()));this.scratchFrustum.setFromProjectionMatrix(this.scratchMatrix4.clone().multiplyMatrices(s.projectionMatrix,s.matrixWorldInverse));const d=this.scratchFrustum.containsPoint(a);Array.from(this.children).forEach(l=>{l.style.setProperty("--left",`${this.scratchV3.x}px`),l.style.setProperty("--top",`${this.scratchV3.y}px`),l.style.setProperty("--distance-from-camera",`${c}`),l.style.setProperty("--in-frustum",`${d?1:0}`)})};return n(),!0}connectedCallback(){super.connectedCallback();const e=this.parentNode;if(!e)throw new Error("html-anchor requires a 3D parent");this.parentLunchbox=e,this.tryAttachUpdate()||this.parentLunchbox.addEventListener("instanceadded",()=>{if(!this.tryAttachUpdate())throw new Error("error attaching html-anchor to Object3D")},{once:!0})}disconnectedCallback(){this.frame!==-1&&cancelAnimationFrame(this.frame)}render(){return Q`<slot></slot>`}createRenderRoot(){return this}}const mt=({prependList:i=[]}={})=>{Object.entries({"three-lunchbox":f,"html-anchor":Me}).forEach(([t,s])=>{customElements.get(t)||customElements.define(t,s)}),[...i,...W].forEach(t=>{const s=Ue(t);if(customElements.get(s))return;const r=Te(t);r&&customElements.define(s,r)})},ft=(i,e,t=window)=>{if(t.customElements.get(i)){console.log(`${i} already registered as a custom element. Try a different name if registering is still required.`);return}const s=Te(e);if(s)t.customElements.define(i,s);else throw new Error(`Could not extend ${i}. The second paramater must be a class.`)},Oe="threepointermove",Re="threemousemove",Ne="threeclick",xe="beforerender",Le="afterrender",Ue=i=>{let e=i.split(/\.?(?=[A-Z])/).join("-").toLowerCase().replace(/-g-l-/,"-gl-");return e.includes("-")||(e=`three-${e}`),e},yt=W.map(Ue);u.AFTER_RENDER_EVENT_NAME=Le,u.BEFORE_RENDER_EVENT_NAME=xe,u.HtmlAnchor=Me,u.THREE_CLICK_EVENT_NAME=Ne,u.THREE_MOUSE_MOVE_EVENT_NAME=Re,u.THREE_POINTER_MOVE_EVENT_NAME=Oe,u.ThreeBase=D,u.ThreeLunchbox=f,u.autoComponents=W,u.extend=ft,u.initLunchbox=mt,u.webComponentNames=yt,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+  `;let f=ne;_([E()],f.prototype,"background"),_([E()],f.prototype,"dpr"),_([E()],f.prototype,"headless"),_([E({attribute:"manual-render",type:Boolean})],f.prototype,"manualRender"),_([E({attribute:"dispatch-before-render",type:Boolean})],f.prototype,"dispatchBeforeRender"),_([E({attribute:"dispatch-after-render",type:Boolean})],f.prototype,"dispatchAfterRender"),_([E({attribute:"renderer-args",type:Object})],f.prototype,"rendererArgs"),_([E({attribute:"camera-args",type:Object})],f.prototype,"cameraArgs");class Me extends S{constructor(){super(...arguments),this.parentLunchbox=null,this.frame=-1,this.scratchV3=new m.Vector3,this.scratchFrustum=new m.Frustum,this.scratchMatrix4=new m.Matrix4}tryAttachUpdate(){var o;const e=(o=this.parentLunchbox)==null?void 0:o.instance;if(!e)return!1;if(!e.isObject3D)throw new Error("html-anchor must be the child of an Object3D");const t=z(this,a=>{var h;return!!((h=a==null?void 0:a.three)!=null&&h.renderer)});if(!t)return console.error("three-lunchbox parent required for html-anchor"),!1;const s=t.three.camera;if(!s)return console.error("camera required for html-anchor"),!1;const r=t.three.renderer;if(!(r!=null&&r.domElement))return console.error("renderer and DOM element required for html-anchor"),!1;const n=()=>{this.frame=requestAnimationFrame(n),s.updateMatrix(),s.updateMatrixWorld(),e.getWorldPosition(this.scratchV3);const a=this.scratchV3.clone();this.scratchV3.project(s),this.scratchV3.multiplyScalar(.5).addScalar(.5),this.scratchV3.y=1-this.scratchV3.y;const h=this.scratchV3.clone().set(r.domElement.width,r.domElement.height,1);h.divideScalar(devicePixelRatio),this.scratchV3.multiply(h);const c=e.position.clone().distanceTo(s.getWorldPosition(this.scratchV3.clone()));this.scratchFrustum.setFromProjectionMatrix(this.scratchMatrix4.clone().multiplyMatrices(s.projectionMatrix,s.matrixWorldInverse));const d=this.scratchFrustum.containsPoint(a);this.style.setProperty("--left",`${this.scratchV3.x}px`),this.style.setProperty("--top",`${this.scratchV3.y}px`),this.style.setProperty("--distance-from-camera",`${c}`),this.style.setProperty("--in-frustum",`${d?1:0}`),d?this.classList.add("in-frustum"):this.classList.remove("in-frustum")};return n(),!0}connectedCallback(){super.connectedCallback();const e=this.parentNode;if(!e)throw new Error("html-anchor requires a 3D parent");this.parentLunchbox=e,this.tryAttachUpdate()||this.parentLunchbox.addEventListener("instanceadded",()=>{if(!this.tryAttachUpdate())throw new Error("error attaching html-anchor to Object3D")},{once:!0})}disconnectedCallback(){this.frame!==-1&&cancelAnimationFrame(this.frame)}render(){return Q`<slot></slot>`}createRenderRoot(){return this}}const mt=({prependList:i=[]}={})=>{Object.entries({"three-lunchbox":f,"html-anchor":Me}).forEach(([t,s])=>{customElements.get(t)||customElements.define(t,s)}),[...i,...W].forEach(t=>{const s=Ue(t);if(customElements.get(s))return;const r=Te(t);r&&customElements.define(s,r)})},ft=(i,e,t=window)=>{if(t.customElements.get(i)){console.log(`${i} already registered as a custom element. Try a different name if registering is still required.`);return}const s=Te(e);if(s)t.customElements.define(i,s);else throw new Error(`Could not extend ${i}. The second paramater must be a class.`)},Oe="threepointermove",Re="threemousemove",Ne="threeclick",xe="beforerender",Le="afterrender",Ue=i=>{let e=i.split(/\.?(?=[A-Z])/).join("-").toLowerCase().replace(/-g-l-/,"-gl-");return e.includes("-")||(e=`three-${e}`),e},yt=W.map(Ue);u.AFTER_RENDER_EVENT_NAME=Le,u.BEFORE_RENDER_EVENT_NAME=xe,u.HtmlAnchor=Me,u.THREE_CLICK_EVENT_NAME=Ne,u.THREE_MOUSE_MOVE_EVENT_NAME=Re,u.THREE_POINTER_MOVE_EVENT_NAME=Oe,u.ThreeBase=D,u.ThreeLunchbox=f,u.autoComponents=W,u.extend=ft,u.initLunchbox=mt,u.webComponentNames=yt,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -13,7 +13,7 @@
       "types": "./src/types.d.ts"
     }
   },
-  "version": "2.1.18",
+  "version": "2.2.0",
   "type": "module",
   "types": "./src/types.d.ts",
   "scripts": {

package/src/html-anchor.ts

@@ -60,12 +60,15 @@ export class HtmlAnchor extends LitElement {
       const inFrustum = this.scratchFrustum.containsPoint(worldPosition);
 
       // apply position data as CSS vars
-      Array.from(this.children).forEach(child => {
-        (child as unknown as HTMLElement).style.setProperty('--left', `${this.scratchV3.x}px`);
-        (child as unknown as HTMLElement).style.setProperty('--top', `${this.scratchV3.y}px`);
-        (child as unknown as HTMLElement).style.setProperty('--distance-from-camera', `${distance}`);
-        (child as unknown as HTMLElement).style.setProperty('--in-frustum', `${inFrustum ? 1 : 0}`);
-      })
+      this.style.setProperty('--left', `${this.scratchV3.x}px`);
+      this.style.setProperty('--top', `${this.scratchV3.y}px`);
+      this.style.setProperty('--distance-from-camera', `${distance}`);
+      this.style.setProperty('--in-frustum', `${inFrustum ? 1 : 0}`);
+      if (inFrustum){
+        this.classList.add('in-frustum');
+      } else {
+        this.classList.remove('in-frustum');
+      }
     }
     update();