lunchboxjs 2.2.2 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lunchboxjs.cjs +1 -1
- package/dist/lunchboxjs.js +3 -3
- package/dist/lunchboxjs.umd.cjs +4 -4
- package/package.json +3 -3
- package/src/three-lunchbox.ts +21 -9
package/dist/lunchboxjs.cjs
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
-
*/function lt(i){return y({...i,state:!0,attribute:!1})}var dt=Object.defineProperty,Oe=(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&&dt(e,t,r),r};const Y="raycast",Ee=[Y,"args","data"],$e=i=>i.split("-");class H extends C{constructor(e){super(),this.classSource=e,this.instance=null,this.dispose=[],this.mutationObserver=null,this.tryAddOnce=!1,this.connected=!1}observeAttributes(){this.mutationObserver=new MutationObserver(e=>{e.forEach(t=>{var r;if(!t.attributeName||(r=Object.getPrototypeOf(this).constructor.observedAttributes)!=null&&r.includes(t.attributeName))return;const s=this.attributes.getNamedItem(t.attributeName);s&&this.updateProperty(s)})}),this.mutationObserver.observe(this,{attributes:!0})}parsedArgs(){const e=this.args??this.getAttribute("args")??[];return typeof e=="string"?JSON.parse(e):e}createUnderlyingThreeObject(){this.instance=new this.classSource(...this.parsedArgs().map(e=>G(e,this)))}refreshAttributes(){this.getAttributeNames().forEach(e=>{const t=this.attributes.getNamedItem(e);t&&this.updateProperty(t)}),Array.from(this.attributes).forEach(this.updateProperty.bind(this))}async onUnderlyingThreeObjectReady(){var s,r,n,o;const e=this.instance;e.uuid&&this.setAttribute(ie,e.uuid);let t=K(this);for(;this!=null&&this.connected&&!this.tryAddOnce&&!t;)await new Promise(requestAnimationFrame),t=K(this);if(t&&t.instance||(s=t==null?void 0:t.three)!=null&&s.scene){const a=this.instance,h=this.instance,c=t.instance,d=t.instance??((r=t.three)==null?void 0:r.scene),l=this.instance;if((n=a.type)!=null&&n.toLowerCase().includes("geometry")&&c.geometry)c.geometry=a;else if((o=h.type)!=null&&o.toLowerCase().includes("material")&&c.material)c.material=h;else if(d.add)try{d.add(l),this.dispatchEvent(new CustomEvent("instanceadded",{detail:{instance:this.instance,parent:d}}))}catch{throw new Error(`Error adding ${this.tagName} to ${d}`)}const m=this.getAttribute("attach");m&&this.executeAttach(m,this.instance)}}connectedCallback(){super.connectedCallback(),this.observeAttributes.call(this),this.createUnderlyingThreeObject.call(this),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("instancecreated",{detail:{instance:this.instance}})),this.connected=!0,this.onUnderlyingThreeObjectReady.call(this)}updateProperty(e){const{name:t,value:s}=e;let r=t;Object.keys(this.instance??{}).forEach(a=>{a.toLowerCase()===r&&(r=a)});const n=$e(r);if(Ee.includes(r)||Ee.includes(n[0]))return;let o=G(s,this);try{o=JSON.parse(s===""?"true":s)}catch{}this.instance&&Z(this.instance,n,o)}executeAttach(e,t){const s=this.parentElement;s.instance&&Z(s.instance,$e(e),t)}disconnectedCallback(){super.disconnectedCallback();const e=[this.instance];this.disposeThreeObjects.call(this,e),this.connected=!1}disposeThreeObjects(e){e.forEach(t=>{var n,o;if(!t)return;const s=t,r=t;(n=s.dispose)==null||n.call(s),(o=r.removeFromParent)==null||o.call(r)})}render(){return re`<slot></slot>`}createRenderRoot(){return this}}Oe([y({type:Boolean,attribute:"try-add-once"})],H.prototype,"tryAddOnce");Oe([lt()],H.prototype,"connected");const xe=i=>{const e=typeof i=="string"?p[i]:i;if(!Te(e))return null;const t=i.toString().toLowerCase().endsWith("loader");class s extends H{constructor(){super(e)}}class r extends H{constructor(){super(...arguments),this.loader=null}createUnderlyingThreeObject(){this.loader=new e(...this.parsedArgs().map(o=>G(o,this)))}async onUnderlyingThreeObjectReady(){const o=this.getAttribute("src");if(!o)throw new Error("Loader requires a source.");if(!this.loader)throw new Error(`Missing loader ${this.tagName}`);this.loader.load(o,a=>{this.instance=a;const h=this.getAttribute("attach");h&&this.executeAttach(h,a),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("loaded",{detail:{instance:a}}))},void 0,a=>{throw new Error(`error loading: ${o}`+a)})}disconnectedCallback(){super.disconnectedCallback(),this.disposeThreeObjects.call(this,[this.loader])}}return t?r:s};var ut=Object.defineProperty,A=(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&&ut(e,t,r),r};const pt="orthographic",ge=1/0,ne=class ne extends C{constructor(){super(),this.scratchV2=new p.Vector2,this.background=null,this.dpr=ge,this.headless=!1,this.manualRender=!1,this.dispatchBeforeRender=!1,this.dispatchAfterRender=!1,this.rendererArgs=[],this.cameraArgs=[],this.raycaster=new p.Raycaster,this.raycastPool=[],this.frame=1/0,this.three=this.createThree(),this.resizeObserver=new ResizeObserver(e=>{e.forEach(({target:t,contentRect:s})=>{var r;if(t===this&&((r=this.three.renderer)==null||r.setSize(s.width*this.dpr,s.height*this.dpr),this.three.camera)){const n=s.width/s.height;if(this.three.camera.type.toLowerCase()==="perspectivecamera")this.three.camera.aspect=n,this.three.camera.updateProjectionMatrix();else if(this.three.camera.type.toLowerCase()==="orthographiccamera"){const o=s.height/s.width,a=10;this.three.camera.top=o*a,this.three.camera.bottom=-o*a,this.three.camera.right=a,this.three.camera.left=-a,this.three.camera.updateProjectionMatrix()}this.manualRender||this.renderThree()}})})}createDefaultScene(){return new p.Scene}createThree(){return{scene:this.createDefaultScene(),camera:null,renderer:null}}connectedCallback(){if(super.connectedCallback(),this.dpr===ge&&(this.dpr=window.devicePixelRatio),this.getAttribute(pt)!==null?this.three.camera=new p.OrthographicCamera(...this.cameraArgs):this.three.camera=new p.PerspectiveCamera(...this.cameraArgs.length?this.cameraArgs:[75]),["scene","camera","renderer"].forEach(e=>{const t=this[e]??this.getAttribute(e)??{},s=typeof t=="string"?JSON.parse(t):t;Object.entries(s).forEach(([r,n])=>{this.three[e]&&Z(this.three[e],r.split("-"),G(n,this))})}),this.resizeObserver.observe(this),this.background!==null&&(this.three.scene.background=new p.Color(this.background)),!this.headless){const e=new p.WebGLRenderer(...this.rendererArgs);e.domElement.addEventListener("pointermove",this.onPointerMove.bind(this)),e.domElement.addEventListener("mousemove",this.onPointerMove.bind(this)),e.domElement.addEventListener("click",this.onClick.bind(this)),this.three.renderer=e}this.manualRender||this.updateLoop()}disconnectedCallback(){var e,t,s,r;(e=this.three.renderer)==null||e.domElement.removeEventListener("pointermove",this.onPointerMove.bind(this)),(t=this.three.renderer)==null||t.domElement.removeEventListener("mousemove",this.onPointerMove.bind(this)),(s=this.three.renderer)==null||s.domElement.removeEventListener("click",this.onClick.bind(this)),(r=this.three.renderer)==null||r.dispose(),this.resizeObserver.unobserve(this),cancelAnimationFrame(this.frame)}handleDefaultSlotChange(e){e.target.assignedElements().forEach(t=>{const s=t;s.instance instanceof p.Object3D&&t.getAttributeNames().includes(Y)&&t.getAttributeNames().includes(Y)&&this.raycastPool.push(s.instance)}),this.renderThree()}runRaycast(e){var a,h;if(!this.raycastPool.length||!this.three.camera)return[];const t=((a=this.three.renderer)==null?void 0:a.domElement.width)??0,s=((h=this.three.renderer)==null?void 0:h.domElement.height)??0,r=this.scratchV2.clone().set(e.clientX/(t/this.dpr)*2-1,-(e.clientY/(s/this.dpr))*2+1);return this.raycaster.setFromCamera(r,this.three.camera),this.raycaster.intersectObjects(this.raycastPool).map(c=>({intersect:c,element:this.querySelector(`[${ie}="${c.object.uuid}"]`)}))}onPointerMove(e){this.runRaycast.bind(this)(e).forEach(s=>{var r,n,o,a;e.type==="pointermove"?((r=s.element)==null||r.dispatchEvent(new PointerEvent("pointermove")),(n=s.element)==null||n.dispatchEvent(new CustomEvent(Ne,{detail:s}))):e.type==="mousemove"&&((o=s.element)==null||o.dispatchEvent(new MouseEvent("mousemove")),(a=s.element)==null||a.dispatchEvent(new CustomEvent(Le,{detail:s})))})}onClick(e){let t=[];if(e instanceof TouchEvent){const s=e.touches[0];t=this.runRaycast.bind(this)(s),t.forEach(r=>{var n;(n=r.element)==null||n.dispatchEvent(new TouchEvent("touchstart"))})}else t=this.runRaycast.bind(this)(e),t.forEach(s=>{var r;(r=s.element)==null||r.dispatchEvent(new MouseEvent("click"))});t.forEach(s=>{var r;(r=s.element)==null||r.dispatchEvent(new CustomEvent(Ue,{detail:s}))})}updateLoop(){this.renderThree(),this.manualRender||(this.frame=requestAnimationFrame(this.updateLoop.bind(this)))}renderThree(e,t){var s;this.dispatchBeforeRender&&this.dispatchEvent(new CustomEvent(He,{})),this.three.camera&&((s=this.three.renderer)==null||s.render(e??this.three.scene,t??this.three.camera),this.dispatchAfterRender&&this.dispatchEvent(new CustomEvent(je,{})))}render(){var e;return re`
|
|
27
|
+
*/function lt(i){return y({...i,state:!0,attribute:!1})}var dt=Object.defineProperty,Oe=(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&&dt(e,t,r),r};const Y="raycast",Ee=[Y,"args","data"],$e=i=>i.split("-");class H extends C{constructor(e){super(),this.classSource=e,this.instance=null,this.dispose=[],this.mutationObserver=null,this.tryAddOnce=!1,this.connected=!1}observeAttributes(){this.mutationObserver=new MutationObserver(e=>{e.forEach(t=>{var r;if(!t.attributeName||(r=Object.getPrototypeOf(this).constructor.observedAttributes)!=null&&r.includes(t.attributeName))return;const s=this.attributes.getNamedItem(t.attributeName);s&&this.updateProperty(s)})}),this.mutationObserver.observe(this,{attributes:!0})}parsedArgs(){const e=this.args??this.getAttribute("args")??[];return typeof e=="string"?JSON.parse(e):e}createUnderlyingThreeObject(){this.instance=new this.classSource(...this.parsedArgs().map(e=>G(e,this)))}refreshAttributes(){this.getAttributeNames().forEach(e=>{const t=this.attributes.getNamedItem(e);t&&this.updateProperty(t)}),Array.from(this.attributes).forEach(this.updateProperty.bind(this))}async onUnderlyingThreeObjectReady(){var s,r,n,o;const e=this.instance;e.uuid&&this.setAttribute(ie,e.uuid);let t=K(this);for(;this!=null&&this.connected&&!this.tryAddOnce&&!t;)await new Promise(requestAnimationFrame),t=K(this);if(t&&t.instance||(s=t==null?void 0:t.three)!=null&&s.scene){const a=this.instance,h=this.instance,c=t.instance,d=t.instance??((r=t.three)==null?void 0:r.scene),l=this.instance;if((n=a.type)!=null&&n.toLowerCase().includes("geometry")&&c.geometry)c.geometry=a;else if((o=h.type)!=null&&o.toLowerCase().includes("material")&&c.material)c.material=h;else if(d.add)try{d.add(l),this.dispatchEvent(new CustomEvent("instanceadded",{detail:{instance:this.instance,parent:d}}))}catch{throw new Error(`Error adding ${this.tagName} to ${d}`)}const m=this.getAttribute("attach");m&&this.executeAttach(m,this.instance)}}connectedCallback(){super.connectedCallback(),this.observeAttributes.call(this),this.createUnderlyingThreeObject.call(this),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("instancecreated",{detail:{instance:this.instance}})),this.connected=!0,this.onUnderlyingThreeObjectReady.call(this)}updateProperty(e){const{name:t,value:s}=e;let r=t;Object.keys(this.instance??{}).forEach(a=>{a.toLowerCase()===r&&(r=a)});const n=$e(r);if(Ee.includes(r)||Ee.includes(n[0]))return;let o=G(s,this);try{o=JSON.parse(s===""?"true":s)}catch{}this.instance&&Z(this.instance,n,o)}executeAttach(e,t){const s=this.parentElement;s.instance&&Z(s.instance,$e(e),t)}disconnectedCallback(){super.disconnectedCallback();const e=[this.instance];this.disposeThreeObjects.call(this,e),this.connected=!1}disposeThreeObjects(e){e.forEach(t=>{var n,o;if(!t)return;const s=t,r=t;(n=s.dispose)==null||n.call(s),(o=r.removeFromParent)==null||o.call(r)})}render(){return re`<slot></slot>`}createRenderRoot(){return this}}Oe([y({type:Boolean,attribute:"try-add-once"})],H.prototype,"tryAddOnce");Oe([lt()],H.prototype,"connected");const xe=i=>{const e=typeof i=="string"?p[i]:i;if(!Te(e))return null;const t=i.toString().toLowerCase().endsWith("loader");class s extends H{constructor(){super(e)}}class r extends H{constructor(){super(...arguments),this.loader=null}createUnderlyingThreeObject(){this.loader=new e(...this.parsedArgs().map(o=>G(o,this)))}async onUnderlyingThreeObjectReady(){const o=this.getAttribute("src");if(!o)throw new Error("Loader requires a source.");if(!this.loader)throw new Error(`Missing loader ${this.tagName}`);this.loader.load(o,a=>{this.instance=a;const h=this.getAttribute("attach");h&&this.executeAttach(h,a),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("loaded",{detail:{instance:a}}))},void 0,a=>{throw new Error(`error loading: ${o}`+a)})}disconnectedCallback(){super.disconnectedCallback(),this.disposeThreeObjects.call(this,[this.loader])}}return t?r:s};var ut=Object.defineProperty,A=(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&&ut(e,t,r),r};const pt="orthographic",ge=1/0,ne=class ne extends C{constructor(){super(),this.scratchV2=new p.Vector2,this.background=null,this.dpr=ge,this.headless=!1,this.manualRender=!1,this.dispatchBeforeRender=!1,this.dispatchAfterRender=!1,this.rendererArgs=[],this.cameraArgs=[],this.raycaster=new p.Raycaster,this.raycastPool=[],this.frame=1/0,this.three=this.createThree(),this.resizeObserver=new ResizeObserver(e=>{e.forEach(({target:t,contentRect:s})=>{var r;if(t===this&&((r=this.three.renderer)==null||r.setSize(s.width*this.dpr,s.height*this.dpr),this.three.camera)){const n=s.width/s.height;if(this.three.camera.type.toLowerCase()==="perspectivecamera")this.three.camera.aspect=n,this.three.camera.updateProjectionMatrix();else if(this.three.camera.type.toLowerCase()==="orthographiccamera"){const o=s.height/s.width,a=10;this.three.camera.top=o*a,this.three.camera.bottom=-o*a,this.three.camera.right=a,this.three.camera.left=-a,this.three.camera.updateProjectionMatrix()}this.manualRender||this.renderThree()}})})}createDefaultScene(){return new p.Scene}createThree(){return{scene:this.createDefaultScene(),camera:null,renderer:null}}connectedCallback(){if(super.connectedCallback(),this.dpr===ge&&(this.dpr=window.devicePixelRatio),this.three.camera||(this.getAttribute(pt)!==null?this.three.camera=new p.OrthographicCamera(...this.cameraArgs):this.three.camera=new p.PerspectiveCamera(...this.cameraArgs.length?this.cameraArgs:[75])),["scene","camera","renderer"].forEach(e=>{const t=this[e]??this.getAttribute(e)??{},s=typeof t=="string"?JSON.parse(t):t;Object.entries(s).forEach(([r,n])=>{this.three[e]&&Z(this.three[e],r.split("-"),G(n,this))})}),this.resizeObserver.observe(this),this.background!==null&&(this.three.scene.background=new p.Color(this.background)),!this.three.renderer&&!this.headless){const e=new p.WebGLRenderer(...this.rendererArgs);e.domElement.addEventListener("pointermove",this.onPointerMove.bind(this)),e.domElement.addEventListener("mousemove",this.onPointerMove.bind(this)),e.domElement.addEventListener("click",this.onClick.bind(this)),this.three.renderer=e}this.dispatchEvent(new CustomEvent("three-ready",{bubbles:!0,composed:!0,detail:{lunchbox:this}})),this.manualRender||this.updateLoop()}disconnectedCallback(){var e,t,s,r;(e=this.three.renderer)==null||e.domElement.removeEventListener("pointermove",this.onPointerMove.bind(this)),(t=this.three.renderer)==null||t.domElement.removeEventListener("mousemove",this.onPointerMove.bind(this)),(s=this.three.renderer)==null||s.domElement.removeEventListener("click",this.onClick.bind(this)),(r=this.three.renderer)==null||r.dispose(),this.resizeObserver.unobserve(this),cancelAnimationFrame(this.frame)}handleDefaultSlotChange(e){e.target.assignedElements().forEach(t=>{const s=t;s.instance instanceof p.Object3D&&t.getAttributeNames().includes(Y)&&t.getAttributeNames().includes(Y)&&this.raycastPool.push(s.instance)}),this.renderThree()}runRaycast(e){var a,h;if(!this.raycastPool.length||!this.three.camera)return[];const t=((a=this.three.renderer)==null?void 0:a.domElement.width)??0,s=((h=this.three.renderer)==null?void 0:h.domElement.height)??0,r=this.scratchV2.clone().set(e.clientX/(t/this.dpr)*2-1,-(e.clientY/(s/this.dpr))*2+1);return this.raycaster.setFromCamera(r,this.three.camera),this.raycaster.intersectObjects(this.raycastPool).map(c=>({intersect:c,element:this.querySelector(`[${ie}="${c.object.uuid}"]`)}))}onPointerMove(e){this.runRaycast.bind(this)(e).forEach(s=>{var r,n,o,a;e.type==="pointermove"?((r=s.element)==null||r.dispatchEvent(new PointerEvent("pointermove")),(n=s.element)==null||n.dispatchEvent(new CustomEvent(Ne,{detail:s}))):e.type==="mousemove"&&((o=s.element)==null||o.dispatchEvent(new MouseEvent("mousemove")),(a=s.element)==null||a.dispatchEvent(new CustomEvent(Le,{detail:s})))})}onClick(e){let t=[];if(e instanceof TouchEvent){const s=e.touches[0];t=this.runRaycast.bind(this)(s),t.forEach(r=>{var n;(n=r.element)==null||n.dispatchEvent(new TouchEvent("touchstart"))})}else t=this.runRaycast.bind(this)(e),t.forEach(s=>{var r;(r=s.element)==null||r.dispatchEvent(new MouseEvent("click"))});t.forEach(s=>{var r;(r=s.element)==null||r.dispatchEvent(new CustomEvent(Ue,{detail:s}))})}updateLoop(){this.renderThree(),this.manualRender||(this.frame=requestAnimationFrame(this.updateLoop.bind(this)))}renderThree(e,t){var s;this.dispatchBeforeRender&&this.dispatchEvent(new CustomEvent(He,{})),this.three.camera&&((s=this.three.renderer)==null||s.render(e??this.three.scene,t??this.three.camera),this.dispatchAfterRender&&this.dispatchEvent(new CustomEvent(je,{})))}render(){var e;return re`
|
|
28
28
|
<slot @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
29
29
|
${(e=this.three.renderer)==null?void 0:e.domElement}
|
|
30
30
|
`}};ne.styles=Ge`
|
package/dist/lunchboxjs.js
CHANGED
|
@@ -1004,16 +1004,16 @@ const nt = "orthographic", $e = 1 / 0, se = class se extends w {
|
|
|
1004
1004
|
}
|
|
1005
1005
|
/** To run on start. */
|
|
1006
1006
|
connectedCallback() {
|
|
1007
|
-
if (super.connectedCallback(), this.dpr === $e && (this.dpr = window.devicePixelRatio), this.getAttribute(nt) !== null ? this.three.camera = new p.OrthographicCamera(...this.cameraArgs) : this.three.camera = new p.PerspectiveCamera(...this.cameraArgs.length ? this.cameraArgs : [75]), ["scene", "camera", "renderer"].forEach((e) => {
|
|
1007
|
+
if (super.connectedCallback(), this.dpr === $e && (this.dpr = window.devicePixelRatio), this.three.camera || (this.getAttribute(nt) !== null ? this.three.camera = new p.OrthographicCamera(...this.cameraArgs) : this.three.camera = new p.PerspectiveCamera(...this.cameraArgs.length ? this.cameraArgs : [75])), ["scene", "camera", "renderer"].forEach((e) => {
|
|
1008
1008
|
const t = this[e] ?? this.getAttribute(e) ?? {}, s = typeof t == "string" ? JSON.parse(t) : t;
|
|
1009
1009
|
Object.entries(s).forEach(([r, n]) => {
|
|
1010
1010
|
this.three[e] && Z(this.three[e], r.split("-"), B(n, this));
|
|
1011
1011
|
});
|
|
1012
|
-
}), this.resizeObserver.observe(this), this.background !== null && (this.three.scene.background = new p.Color(this.background)), !this.headless) {
|
|
1012
|
+
}), this.resizeObserver.observe(this), this.background !== null && (this.three.scene.background = new p.Color(this.background)), !this.three.renderer && !this.headless) {
|
|
1013
1013
|
const e = new p.WebGLRenderer(...this.rendererArgs);
|
|
1014
1014
|
e.domElement.addEventListener("pointermove", this.onPointerMove.bind(this)), e.domElement.addEventListener("mousemove", this.onPointerMove.bind(this)), e.domElement.addEventListener("click", this.onClick.bind(this)), this.three.renderer = e;
|
|
1015
1015
|
}
|
|
1016
|
-
this.manualRender || this.updateLoop();
|
|
1016
|
+
this.dispatchEvent(new CustomEvent("three-ready", { bubbles: !0, composed: !0, detail: { lunchbox: this } })), this.manualRender || this.updateLoop();
|
|
1017
1017
|
}
|
|
1018
1018
|
disconnectedCallback() {
|
|
1019
1019
|
var e, t, s, r;
|
package/dist/lunchboxjs.umd.cjs
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
* @license
|
|
11
11
|
* Copyright 2017 Google LLC
|
|
12
12
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
13
|
-
*/const N=globalThis,pe=i=>i,G=N.trustedTypes,me=G?G.createPolicy("lit-html",{createHTML:i=>i}):void 0,fe="$lit$",
|
|
13
|
+
*/const N=globalThis,pe=i=>i,G=N.trustedTypes,me=G?G.createPolicy("lit-html",{createHTML:i=>i}):void 0,fe="$lit$",b=`lit$${Math.random().toFixed(9).slice(2)}$`,ye="?"+b,Xe=`<${ye}>`,_=document,x=()=>_.createComment(""),L=i=>i===null||typeof i!="object"&&typeof i!="function",Y=Array.isArray,Qe=i=>Y(i)||typeof(i==null?void 0:i[Symbol.iterator])=="function",X=`[
|
|
14
14
|
\f\r]`,U=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ee=/-->/g,$e=/>/g,v=RegExp(`>|${X}(?:([^\\s"'>=/]+)(${X}*=${X}*(?:[^
|
|
15
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),ge=/'/g,
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),ge=/'/g,be=/"/g,Ae=/^(?:script|style|textarea|title)$/i,et=i=>(e,...t)=>({_$litType$:i,strings:e,values:t}),Q=et(1),P=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),_e=new WeakMap,C=_.createTreeWalker(_,129);function ve(i,e){if(!Y(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return me!==void 0?me.createHTML(e):e}const tt=(i,e)=>{const t=i.length-1,s=[];let r,n=e===2?"<svg>":e===3?"<math>":"",o=U;for(let a=0;a<t;a++){const h=i[a];let c,u,l=-1,y=0;for(;y<h.length&&(o.lastIndex=y,u=o.exec(h),u!==null);)y=o.lastIndex,o===U?u[1]==="!--"?o=Ee:u[1]!==void 0?o=$e:u[2]!==void 0?(Ae.test(u[2])&&(r=RegExp("</"+u[2],"g")),o=v):u[3]!==void 0&&(o=v):o===v?u[0]===">"?(o=r??U,l=-1):u[1]===void 0?l=-2:(l=o.lastIndex-u[2].length,c=u[1],o=u[3]===void 0?v:u[3]==='"'?be:ge):o===be||o===ge?o=v:o===Ee||o===$e?o=U:(o=v,r=void 0);const $=o===v&&i[a+1].startsWith("/>")?" ":"";n+=o===U?h+Xe:l>=0?(s.push(c),h.slice(0,l)+fe+h.slice(l)+b+$):h+b+(l===-2?a:$)}return[ve(i,n+(i[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),s]};class H{constructor({strings:e,_$litType$:t},s){let r;this.parts=[];let n=0,o=0;const a=e.length-1,h=this.parts,[c,u]=tt(e,t);if(this.el=H.createElement(c,s),C.currentNode=this.el.content,t===2||t===3){const l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(r=C.nextNode())!==null&&h.length<a;){if(r.nodeType===1){if(r.hasAttributes())for(const l of r.getAttributeNames())if(l.endsWith(fe)){const y=u[o++],$=r.getAttribute(l).split(b),V=/([.?@])?(.*)/.exec(y);h.push({type:1,index:n,name:V[2],strings:$,ctor:V[1]==="."?rt:V[1]==="?"?it:V[1]==="@"?nt:z}),r.removeAttribute(l)}else l.startsWith(b)&&(h.push({type:6,index:n}),r.removeAttribute(l));if(Ae.test(r.tagName)){const l=r.textContent.split(b),y=l.length-1;if(y>0){r.textContent=G?G.emptyScript:"";for(let $=0;$<y;$++)r.append(l[$],x()),C.nextNode(),h.push({type:2,index:++n});r.append(l[y],x())}}}else if(r.nodeType===8)if(r.data===ye)h.push({type:2,index:n});else{let l=-1;for(;(l=r.data.indexOf(b,l+1))!==-1;)h.push({type:7,index:n}),l+=b.length-1}n++}}static createElement(e,t){const s=_.createElement("template");return s.innerHTML=e,s}}function M(i,e,t=i,s){var o,a;if(e===P)return e;let r=s!==void 0?(o=t._$Co)==null?void 0:o[s]:t._$Cl;const n=L(e)?void 0:e._$litDirective$;return(r==null?void 0:r.constructor)!==n&&((a=r==null?void 0:r._$AO)==null||a.call(r,!1),n===void 0?r=void 0:(r=new n(i),r._$AT(i,t,s)),s!==void 0?(t._$Co??(t._$Co=[]))[s]=r:t._$Cl=r),r!==void 0&&(e=M(i,r._$AS(i,e.values),r,s)),e}class st{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:s}=this._$AD,r=((e==null?void 0:e.creationScope)??_).importNode(t,!0);C.currentNode=r;let n=C.nextNode(),o=0,a=0,h=s[0];for(;h!==void 0;){if(o===h.index){let c;h.type===2?c=new j(n,n.nextSibling,this,e):h.type===1?c=new h.ctor(n,h.name,h.strings,this,e):h.type===6&&(c=new ot(n,this,e)),this._$AV.push(c),h=s[++a]}o!==(h==null?void 0:h.index)&&(n=C.nextNode(),o++)}return C.currentNode=_,r}p(e){let t=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(e,s,t),t+=s.strings.length-2):s._$AI(e[t])),t++}}class j{get _$AU(){var e;return((e=this._$AM)==null?void 0:e._$AU)??this._$Cv}constructor(e,t,s,r){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=s,this.options=r,this._$Cv=(r==null?void 0:r.isConnected)??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(e==null?void 0:e.nodeType)===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=M(this,e,t),L(e)?e===p||e==null||e===""?(this._$AH!==p&&this._$AR(),this._$AH=p):e!==this._$AH&&e!==P&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Qe(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==p&&L(this._$AH)?this._$AA.nextSibling.data=e:this.T(_.createTextNode(e)),this._$AH=e}$(e){var n;const{values:t,_$litType$:s}=e,r=typeof s=="number"?this._$AC(e):(s.el===void 0&&(s.el=H.createElement(ve(s.h,s.h[0]),this.options)),s);if(((n=this._$AH)==null?void 0:n._$AD)===r)this._$AH.p(t);else{const o=new st(r,this),a=o.u(this.options);o.p(t),this.T(a),this._$AH=o}}_$AC(e){let t=_e.get(e.strings);return t===void 0&&_e.set(e.strings,t=new H(e)),t}k(e){Y(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let s,r=0;for(const n of e)r===t.length?t.push(s=new j(this.O(x()),this.O(x()),this,this.options)):s=t[r],s._$AI(n),r++;r<t.length&&(this._$AR(s&&s._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,t);e!==this._$AB;){const r=pe(e).nextSibling;pe(e).remove(),e=r}}setConnected(e){var t;this._$AM===void 0&&(this._$Cv=e,(t=this._$AP)==null||t.call(this,e))}}class z{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,s,r,n){this.type=1,this._$AH=p,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=n,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(e,t=this,s,r){const n=this.strings;let o=!1;if(n===void 0)e=M(this,e,t,0),o=!L(e)||e!==this._$AH&&e!==P,o&&(this._$AH=e);else{const a=e;let h,c;for(e=n[0],h=0;h<n.length-1;h++)c=M(this,a[s+h],t,h),c===P&&(c=this._$AH[h]),o||(o=!L(c)||c!==this._$AH[h]),c===p?e=p:e!==p&&(e+=(c??"")+n[h+1]),this._$AH[h]=c}o&&!r&&this.j(e)}j(e){e===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class rt extends z{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===p?void 0:e}}class it extends z{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==p)}}class nt extends z{constructor(e,t,s,r,n){super(e,t,s,r,n),this.type=5}_$AI(e,t=this){if((e=M(this,e,t,0)??p)===P)return;const s=this._$AH,r=e===p&&s!==p||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,n=e!==p&&(s===p||r);r&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,e):this._$AH.handleEvent(e)}}class ot{constructor(e,t,s){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(e){M(this,e)}}const ee=N.litHtmlPolyfillSupport;ee==null||ee(H,j),(N.litHtmlVersions??(N.litHtmlVersions=[])).push("3.3.2");const at=(i,e,t)=>{const s=(t==null?void 0:t.renderBefore)??e;let r=s._$litPart$;if(r===void 0){const n=(t==null?void 0:t.renderBefore)??null;s._$litPart$=r=new j(e.insertBefore(x(),n),n,void 0,t??{})}return r._$AI(i),r};/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
-
*/function lt(i){return E({...i,state:!0,attribute:!1})}var dt=Object.defineProperty,Pe=(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&&dt(e,t,r),r};const oe="raycast",Me=[oe,"args","data"],Oe=i=>i.split("-");class k extends S{constructor(e){super(),this.classSource=e,this.instance=null,this.dispose=[],this.mutationObserver=null,this.tryAddOnce=!1,this.connected=!1}observeAttributes(){this.mutationObserver=new MutationObserver(e=>{e.forEach(t=>{var r;if(!t.attributeName||(r=Object.getPrototypeOf(this).constructor.observedAttributes)!=null&&r.includes(t.attributeName))return;const s=this.attributes.getNamedItem(t.attributeName);s&&this.updateProperty(s)})}),this.mutationObserver.observe(this,{attributes:!0})}parsedArgs(){const e=this.args??this.getAttribute("args")??[];return typeof e=="string"?JSON.parse(e):e}createUnderlyingThreeObject(){this.instance=new this.classSource(...this.parsedArgs().map(e=>q(e,this)))}refreshAttributes(){this.getAttributeNames().forEach(e=>{const t=this.attributes.getNamedItem(e);t&&this.updateProperty(t)}),Array.from(this.attributes).forEach(this.updateProperty.bind(this))}async onUnderlyingThreeObjectReady(){var s,r,n,o;const e=this.instance;e.uuid&&this.setAttribute(se,e.uuid);let t=re(this);for(;this!=null&&this.connected&&!this.tryAddOnce&&!t;)await new Promise(requestAnimationFrame),t=re(this);if(t&&t.instance||(s=t==null?void 0:t.three)!=null&&s.scene){const a=this.instance,h=this.instance,c=t.instance,u=t.instance??((r=t.three)==null?void 0:r.scene),l=this.instance;if((n=a.type)!=null&&n.toLowerCase().includes("geometry")&&c.geometry)c.geometry=a;else if((o=h.type)!=null&&o.toLowerCase().includes("material")&&c.material)c.material=h;else if(u.add)try{u.add(l),this.dispatchEvent(new CustomEvent("instanceadded",{detail:{instance:this.instance,parent:u}}))}catch{throw new Error(`Error adding ${this.tagName} to ${u}`)}const y=this.getAttribute("attach");y&&this.executeAttach(y,this.instance)}}connectedCallback(){super.connectedCallback(),this.observeAttributes.call(this),this.createUnderlyingThreeObject.call(this),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("instancecreated",{detail:{instance:this.instance}})),this.connected=!0,this.onUnderlyingThreeObjectReady.call(this)}updateProperty(e){const{name:t,value:s}=e;let r=t;Object.keys(this.instance??{}).forEach(a=>{a.toLowerCase()===r&&(r=a)});const n=Oe(r);if(Me.includes(r)||Me.includes(n[0]))return;let o=q(s,this);try{o=JSON.parse(s===""?"true":s)}catch{}this.instance&&ie(this.instance,n,o)}executeAttach(e,t){const s=this.parentElement;s.instance&&ie(s.instance,Oe(e),t)}disconnectedCallback(){super.disconnectedCallback();const e=[this.instance];this.disposeThreeObjects.call(this,e),this.connected=!1}disposeThreeObjects(e){e.forEach(t=>{var n,o;if(!t)return;const s=t,r=t;(n=s.dispose)==null||n.call(s),(o=r.removeFromParent)==null||o.call(r)})}render(){return Q`<slot></slot>`}createRenderRoot(){return this}}Pe([E({type:Boolean,attribute:"try-add-once"})],k.prototype,"tryAddOnce"),Pe([lt()],k.prototype,"connected");const Re=i=>{const e=typeof i=="string"?m[i]:i;if(!we(e))return null;const t=i.toString().toLowerCase().endsWith("loader");class s extends k{constructor(){super(e)}}class r extends k{constructor(){super(...arguments),this.loader=null}createUnderlyingThreeObject(){this.loader=new e(...this.parsedArgs().map(o=>q(o,this)))}async onUnderlyingThreeObjectReady(){const o=this.getAttribute("src");if(!o)throw new Error("Loader requires a source.");if(!this.loader)throw new Error(`Missing loader ${this.tagName}`);this.loader.load(o,a=>{this.instance=a;const h=this.getAttribute("attach");h&&this.executeAttach(h,a),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("loaded",{detail:{instance:a}}))},void 0,a=>{throw new Error(`error loading: ${o}`+a)})}disconnectedCallback(){super.disconnectedCallback(),this.disposeThreeObjects.call(this,[this.loader])}}return t?r:s};var ut=Object.defineProperty,
|
|
27
|
+
*/function lt(i){return E({...i,state:!0,attribute:!1})}var dt=Object.defineProperty,Pe=(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&&dt(e,t,r),r};const oe="raycast",Me=[oe,"args","data"],Oe=i=>i.split("-");class k extends S{constructor(e){super(),this.classSource=e,this.instance=null,this.dispose=[],this.mutationObserver=null,this.tryAddOnce=!1,this.connected=!1}observeAttributes(){this.mutationObserver=new MutationObserver(e=>{e.forEach(t=>{var r;if(!t.attributeName||(r=Object.getPrototypeOf(this).constructor.observedAttributes)!=null&&r.includes(t.attributeName))return;const s=this.attributes.getNamedItem(t.attributeName);s&&this.updateProperty(s)})}),this.mutationObserver.observe(this,{attributes:!0})}parsedArgs(){const e=this.args??this.getAttribute("args")??[];return typeof e=="string"?JSON.parse(e):e}createUnderlyingThreeObject(){this.instance=new this.classSource(...this.parsedArgs().map(e=>q(e,this)))}refreshAttributes(){this.getAttributeNames().forEach(e=>{const t=this.attributes.getNamedItem(e);t&&this.updateProperty(t)}),Array.from(this.attributes).forEach(this.updateProperty.bind(this))}async onUnderlyingThreeObjectReady(){var s,r,n,o;const e=this.instance;e.uuid&&this.setAttribute(se,e.uuid);let t=re(this);for(;this!=null&&this.connected&&!this.tryAddOnce&&!t;)await new Promise(requestAnimationFrame),t=re(this);if(t&&t.instance||(s=t==null?void 0:t.three)!=null&&s.scene){const a=this.instance,h=this.instance,c=t.instance,u=t.instance??((r=t.three)==null?void 0:r.scene),l=this.instance;if((n=a.type)!=null&&n.toLowerCase().includes("geometry")&&c.geometry)c.geometry=a;else if((o=h.type)!=null&&o.toLowerCase().includes("material")&&c.material)c.material=h;else if(u.add)try{u.add(l),this.dispatchEvent(new CustomEvent("instanceadded",{detail:{instance:this.instance,parent:u}}))}catch{throw new Error(`Error adding ${this.tagName} to ${u}`)}const y=this.getAttribute("attach");y&&this.executeAttach(y,this.instance)}}connectedCallback(){super.connectedCallback(),this.observeAttributes.call(this),this.createUnderlyingThreeObject.call(this),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("instancecreated",{detail:{instance:this.instance}})),this.connected=!0,this.onUnderlyingThreeObjectReady.call(this)}updateProperty(e){const{name:t,value:s}=e;let r=t;Object.keys(this.instance??{}).forEach(a=>{a.toLowerCase()===r&&(r=a)});const n=Oe(r);if(Me.includes(r)||Me.includes(n[0]))return;let o=q(s,this);try{o=JSON.parse(s===""?"true":s)}catch{}this.instance&&ie(this.instance,n,o)}executeAttach(e,t){const s=this.parentElement;s.instance&&ie(s.instance,Oe(e),t)}disconnectedCallback(){super.disconnectedCallback();const e=[this.instance];this.disposeThreeObjects.call(this,e),this.connected=!1}disposeThreeObjects(e){e.forEach(t=>{var n,o;if(!t)return;const s=t,r=t;(n=s.dispose)==null||n.call(s),(o=r.removeFromParent)==null||o.call(r)})}render(){return Q`<slot></slot>`}createRenderRoot(){return this}}Pe([E({type:Boolean,attribute:"try-add-once"})],k.prototype,"tryAddOnce"),Pe([lt()],k.prototype,"connected");const Re=i=>{const e=typeof i=="string"?m[i]:i;if(!we(e))return null;const t=i.toString().toLowerCase().endsWith("loader");class s extends k{constructor(){super(e)}}class r extends k{constructor(){super(...arguments),this.loader=null}createUnderlyingThreeObject(){this.loader=new e(...this.parsedArgs().map(o=>q(o,this)))}async onUnderlyingThreeObjectReady(){const o=this.getAttribute("src");if(!o)throw new Error("Loader requires a source.");if(!this.loader)throw new Error(`Missing loader ${this.tagName}`);this.loader.load(o,a=>{this.instance=a;const h=this.getAttribute("attach");h&&this.executeAttach(h,a),this.refreshAttributes.call(this),this.dispatchEvent(new CustomEvent("loaded",{detail:{instance:a}}))},void 0,a=>{throw new Error(`error loading: ${o}`+a)})}disconnectedCallback(){super.disconnectedCallback(),this.disposeThreeObjects.call(this,[this.loader])}}return t?r:s};var ut=Object.defineProperty,A=(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&&ut(e,t,r),r};const pt="orthographic",Ne=1/0,ae=class ae extends S{constructor(){super(),this.scratchV2=new m.Vector2,this.background=null,this.dpr=Ne,this.headless=!1,this.manualRender=!1,this.dispatchBeforeRender=!1,this.dispatchAfterRender=!1,this.rendererArgs=[],this.cameraArgs=[],this.raycaster=new m.Raycaster,this.raycastPool=[],this.frame=1/0,this.three=this.createThree(),this.resizeObserver=new ResizeObserver(e=>{e.forEach(({target:t,contentRect:s})=>{var r;if(t===this&&((r=this.three.renderer)==null||r.setSize(s.width*this.dpr,s.height*this.dpr),this.three.camera)){const n=s.width/s.height;if(this.three.camera.type.toLowerCase()==="perspectivecamera")this.three.camera.aspect=n,this.three.camera.updateProjectionMatrix();else if(this.three.camera.type.toLowerCase()==="orthographiccamera"){const o=s.height/s.width,a=10;this.three.camera.top=o*a,this.three.camera.bottom=-o*a,this.three.camera.right=a,this.three.camera.left=-a,this.three.camera.updateProjectionMatrix()}this.manualRender||this.renderThree()}})})}createDefaultScene(){return new m.Scene}createThree(){return{scene:this.createDefaultScene(),camera:null,renderer:null}}connectedCallback(){if(super.connectedCallback(),this.dpr===Ne&&(this.dpr=window.devicePixelRatio),this.three.camera||(this.getAttribute(pt)!==null?this.three.camera=new m.OrthographicCamera(...this.cameraArgs):this.three.camera=new m.PerspectiveCamera(...this.cameraArgs.length?this.cameraArgs:[75])),["scene","camera","renderer"].forEach(e=>{const t=this[e]??this.getAttribute(e)??{},s=typeof t=="string"?JSON.parse(t):t;Object.entries(s).forEach(([r,n])=>{this.three[e]&&ie(this.three[e],r.split("-"),q(n,this))})}),this.resizeObserver.observe(this),this.background!==null&&(this.three.scene.background=new m.Color(this.background)),!this.three.renderer&&!this.headless){const e=new m.WebGLRenderer(...this.rendererArgs);e.domElement.addEventListener("pointermove",this.onPointerMove.bind(this)),e.domElement.addEventListener("mousemove",this.onPointerMove.bind(this)),e.domElement.addEventListener("click",this.onClick.bind(this)),this.three.renderer=e}this.dispatchEvent(new CustomEvent("three-ready",{bubbles:!0,composed:!0,detail:{lunchbox:this}})),this.manualRender||this.updateLoop()}disconnectedCallback(){var e,t,s,r;(e=this.three.renderer)==null||e.domElement.removeEventListener("pointermove",this.onPointerMove.bind(this)),(t=this.three.renderer)==null||t.domElement.removeEventListener("mousemove",this.onPointerMove.bind(this)),(s=this.three.renderer)==null||s.domElement.removeEventListener("click",this.onClick.bind(this)),(r=this.three.renderer)==null||r.dispose(),this.resizeObserver.unobserve(this),cancelAnimationFrame(this.frame)}handleDefaultSlotChange(e){e.target.assignedElements().forEach(t=>{const s=t;s.instance instanceof m.Object3D&&t.getAttributeNames().includes(oe)&&t.getAttributeNames().includes(oe)&&this.raycastPool.push(s.instance)}),this.renderThree()}runRaycast(e){var a,h;if(!this.raycastPool.length||!this.three.camera)return[];const t=((a=this.three.renderer)==null?void 0:a.domElement.width)??0,s=((h=this.three.renderer)==null?void 0:h.domElement.height)??0,r=this.scratchV2.clone().set(e.clientX/(t/this.dpr)*2-1,-(e.clientY/(s/this.dpr))*2+1);return this.raycaster.setFromCamera(r,this.three.camera),this.raycaster.intersectObjects(this.raycastPool).map(c=>({intersect:c,element:this.querySelector(`[${se}="${c.object.uuid}"]`)}))}onPointerMove(e){this.runRaycast.bind(this)(e).forEach(s=>{var r,n,o,a;e.type==="pointermove"?((r=s.element)==null||r.dispatchEvent(new PointerEvent("pointermove")),(n=s.element)==null||n.dispatchEvent(new CustomEvent(Le,{detail:s}))):e.type==="mousemove"&&((o=s.element)==null||o.dispatchEvent(new MouseEvent("mousemove")),(a=s.element)==null||a.dispatchEvent(new CustomEvent(Ue,{detail:s})))})}onClick(e){let t=[];if(e instanceof TouchEvent){const s=e.touches[0];t=this.runRaycast.bind(this)(s),t.forEach(r=>{var n;(n=r.element)==null||n.dispatchEvent(new TouchEvent("touchstart"))})}else t=this.runRaycast.bind(this)(e),t.forEach(s=>{var r;(r=s.element)==null||r.dispatchEvent(new MouseEvent("click"))});t.forEach(s=>{var r;(r=s.element)==null||r.dispatchEvent(new CustomEvent(He,{detail:s}))})}updateLoop(){this.renderThree(),this.manualRender||(this.frame=requestAnimationFrame(this.updateLoop.bind(this)))}renderThree(e,t){var s;this.dispatchBeforeRender&&this.dispatchEvent(new CustomEvent(je,{})),this.three.camera&&((s=this.three.renderer)==null||s.render(e??this.three.scene,t??this.three.camera),this.dispatchAfterRender&&this.dispatchEvent(new CustomEvent(De,{})))}render(){var e;return Q`
|
|
28
28
|
<slot @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
29
29
|
${(e=this.three.renderer)==null?void 0:e.domElement}
|
|
30
30
|
`}};ae.styles=ze`
|
|
@@ -40,4 +40,4 @@
|
|
|
40
40
|
max-width: 100%;
|
|
41
41
|
max-height: 100%;
|
|
42
42
|
}
|
|
43
|
-
`;let f=ae;
|
|
43
|
+
`;let f=ae;A([E()],f.prototype,"background"),A([E()],f.prototype,"dpr"),A([E()],f.prototype,"headless"),A([E({attribute:"manual-render",type:Boolean})],f.prototype,"manualRender"),A([E({attribute:"dispatch-before-render",type:Boolean})],f.prototype,"dispatchBeforeRender"),A([E({attribute:"dispatch-after-render",type:Boolean})],f.prototype,"dispatchAfterRender"),A([E({attribute:"renderer-args",type:Object})],f.prototype,"rendererArgs"),A([E({attribute:"camera-args",type:Object})],f.prototype,"cameraArgs");class xe 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=D(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 u=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",`${u?1:0}`),u?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":xe}).forEach(([t,s])=>{customElements.get(t)||customElements.define(t,s)}),[...i,...W].forEach(t=>{const s=ke(t);if(customElements.get(s))return;const r=Re(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=Re(e);if(s)t.customElements.define(i,s);else throw new Error(`Could not extend ${i}. The second paramater must be a class.`)},Le="threepointermove",Ue="threemousemove",He="threeclick",je="beforerender",De="afterrender",ke=i=>{let e=i.split(/\.?(?=[A-Z])/).join("-").toLowerCase().replace(/-g-l-/,"-gl-");return e.includes("-")||(e=`three-${e}`),e},yt=W.map(ke);d.AFTER_RENDER_EVENT_NAME=De,d.BEFORE_RENDER_EVENT_NAME=je,d.HtmlAnchor=xe,d.THREE_CLICK_EVENT_NAME=He,d.THREE_MOUSE_MOVE_EVENT_NAME=Ue,d.THREE_POINTER_MOVE_EVENT_NAME=Le,d.THREE_UUID_ATTRIBUTE_NAME=se,d.ThreeBase=k,d.ThreeLunchbox=f,d.autoComponents=W,d.closestPassShadow=D,d.extend=ft,d.get=Ce,d.getCandidateParent=re,d.initLunchbox=mt,d.isClass=we,d.isNumber=Se,d.set=Te,d.webComponentNames=yt,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"types": "./src/types.d.ts"
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
|
-
"version": "2.
|
|
16
|
+
"version": "2.3.0",
|
|
17
17
|
"type": "module",
|
|
18
18
|
"types": "./src/types.d.ts",
|
|
19
19
|
"scripts": {
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"preview": "vite preview",
|
|
23
23
|
"cy:open": "cypress open",
|
|
24
24
|
"test:e2e": "cypress run",
|
|
25
|
-
"test:
|
|
26
|
-
"test": "npm run test:
|
|
25
|
+
"test:vitest": "vitest",
|
|
26
|
+
"test": "npm run test:vitest && npm run test:e2e"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"lit": "^3.3.2"
|
package/src/three-lunchbox.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { LitElement, css, html } from 'lit';
|
|
|
2
2
|
import * as THREE from 'three';
|
|
3
3
|
import { THREE_UUID_ATTRIBUTE_NAME } from './utils';
|
|
4
4
|
import { RAYCASTABLE_ATTRIBUTE_NAME } from './three-base';
|
|
5
|
-
import { AFTER_RENDER_EVENT_NAME, BEFORE_RENDER_EVENT_NAME, Lunchbox, THREE_CLICK_EVENT_NAME, THREE_MOUSE_MOVE_EVENT_NAME, THREE_POINTER_MOVE_EVENT_NAME
|
|
5
|
+
import { AFTER_RENDER_EVENT_NAME, BEFORE_RENDER_EVENT_NAME, Lunchbox, THREE_CLICK_EVENT_NAME, THREE_MOUSE_MOVE_EVENT_NAME, THREE_POINTER_MOVE_EVENT_NAME } from '.';
|
|
6
6
|
import { setThreeProperty } from './setThreeProperty';
|
|
7
7
|
import { property } from 'lit/decorators.js';
|
|
8
8
|
import { parseAttributeOrPropertyValue } from './parseAttributeValue';
|
|
@@ -117,10 +117,12 @@ export class ThreeLunchbox extends LitElement {
|
|
|
117
117
|
if (this.dpr === DEFAULT_DPR) {
|
|
118
118
|
this.dpr = window.devicePixelRatio;
|
|
119
119
|
}
|
|
120
|
-
if (this.
|
|
121
|
-
this.
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
if (!this.three.camera){
|
|
121
|
+
if (this.getAttribute(ORTHOGRAPHIC_CAMERA_ATTR_NAME) !== null) {
|
|
122
|
+
this.three.camera = new THREE.OrthographicCamera(...this.cameraArgs);
|
|
123
|
+
} else {
|
|
124
|
+
this.three.camera = new THREE.PerspectiveCamera(...(this.cameraArgs.length ? this.cameraArgs : [75]));
|
|
125
|
+
}
|
|
124
126
|
}
|
|
125
127
|
|
|
126
128
|
// Camera, scene, renderer information
|
|
@@ -145,7 +147,7 @@ export class ThreeLunchbox extends LitElement {
|
|
|
145
147
|
}
|
|
146
148
|
|
|
147
149
|
// Prep mouse info
|
|
148
|
-
if (!this.headless) {
|
|
150
|
+
if (!this.three.renderer && !this.headless) {
|
|
149
151
|
const renderer = new THREE.WebGLRenderer(...this.rendererArgs);
|
|
150
152
|
renderer.domElement.addEventListener('pointermove', this.onPointerMove.bind(this));
|
|
151
153
|
renderer.domElement.addEventListener('mousemove', this.onPointerMove.bind(this));
|
|
@@ -154,6 +156,7 @@ export class ThreeLunchbox extends LitElement {
|
|
|
154
156
|
this.three.renderer = renderer;
|
|
155
157
|
}
|
|
156
158
|
|
|
159
|
+
this.dispatchEvent(new CustomEvent('three-ready', { bubbles: true, composed: true, detail: {lunchbox: this}}));
|
|
157
160
|
|
|
158
161
|
// Kick update loop
|
|
159
162
|
if (!this.manualRender) {
|
|
@@ -223,10 +226,10 @@ export class ThreeLunchbox extends LitElement {
|
|
|
223
226
|
matches.forEach((match: any) => {
|
|
224
227
|
if (evt.type === 'pointermove') {
|
|
225
228
|
match.element?.dispatchEvent(new PointerEvent('pointermove'));
|
|
226
|
-
match.element?.dispatchEvent(new CustomEvent
|
|
229
|
+
match.element?.dispatchEvent(new CustomEvent(THREE_POINTER_MOVE_EVENT_NAME, { detail: match }));
|
|
227
230
|
} else if (evt.type === 'mousemove') {
|
|
228
231
|
match.element?.dispatchEvent(new MouseEvent('mousemove'));
|
|
229
|
-
match.element?.dispatchEvent(new CustomEvent
|
|
232
|
+
match.element?.dispatchEvent(new CustomEvent(THREE_MOUSE_MOVE_EVENT_NAME, { detail: match }));
|
|
230
233
|
}
|
|
231
234
|
});
|
|
232
235
|
}
|
|
@@ -250,7 +253,7 @@ export class ThreeLunchbox extends LitElement {
|
|
|
250
253
|
}
|
|
251
254
|
|
|
252
255
|
matches.forEach(match => {
|
|
253
|
-
match.element?.dispatchEvent(new CustomEvent
|
|
256
|
+
match.element?.dispatchEvent(new CustomEvent(THREE_CLICK_EVENT_NAME, { detail: match }));
|
|
254
257
|
});
|
|
255
258
|
}
|
|
256
259
|
|
|
@@ -303,3 +306,12 @@ export class ThreeLunchbox extends LitElement {
|
|
|
303
306
|
`;
|
|
304
307
|
}
|
|
305
308
|
}
|
|
309
|
+
|
|
310
|
+
declare global {
|
|
311
|
+
interface GlobalEventHandlersEventMap {
|
|
312
|
+
'three-ready': CustomEvent<{lunchbox: ThreeLunchbox}>
|
|
313
|
+
}
|
|
314
|
+
interface HTMLElementTagNameMap {
|
|
315
|
+
'three-lunchbox': ThreeLunchbox
|
|
316
|
+
}
|
|
317
|
+
}
|