@splinetool/viewer 0.0.32 → 0.0.33
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/README.md +2 -2
- package/build/spline-viewer.cjs +2 -2
- package/build/spline-viewer.d.ts +1 -1
- package/build/spline-viewer.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,7 +54,7 @@ A css like color that will override the background color of your scene as it was
|
|
|
54
54
|
|
|
55
55
|
This option controls the agressiveness of the preload of your scene. Possible values are `auto`, `lazy` and `eager`. By default (`auto`) the behavior is to `lazy` load the scene and only start to preload when the tag enters the viewport. If you need to start loading immediately then you can set `loading="eager"` instead.
|
|
56
56
|
|
|
57
|
-
### `
|
|
57
|
+
### `loading-anim` (optional)
|
|
58
58
|
|
|
59
59
|
When true (default is false), this option displays a simple spinner preloader during the loading of the spline file.
|
|
60
60
|
|
|
@@ -62,7 +62,7 @@ When true (default is false), this option displays a simple spinner preloader du
|
|
|
62
62
|
|
|
63
63
|
When true (default is false), this options makes the viewer unload the spline element when it leaves the viewport.
|
|
64
64
|
|
|
65
|
-
### `
|
|
65
|
+
### `events-target` (optional)
|
|
66
66
|
|
|
67
67
|
Values can either be `local` (events listened on the canvas) or `global` (events listened on the window).
|
|
68
68
|
|
package/build/spline-viewer.cjs
CHANGED
|
@@ -5279,7 +5279,7 @@ outputColor=vec4(color,inputColor.a);}`,Wc={DEFAULT:0,ESKIL:1},WG=class extends
|
|
|
5279
5279
|
/>
|
|
5280
5280
|
</svg>
|
|
5281
5281
|
</a>
|
|
5282
|
-
</div>`,Ti=class extends An{constructor(){super();this.url=null;this.width=void 0;this.height=void 0;this.background=void 0;this.loading="auto";this.unloadable=!1;this.eventsTarget=void 0;this.
|
|
5282
|
+
</div>`,Ti=class extends An{constructor(){super();this.url=null;this.width=void 0;this.height=void 0;this.background=void 0;this.loading="auto";this.unloadable=!1;this.eventsTarget=void 0;this.loadingAnim=!1;this._intersectionObserver=null;this._isElementInViewport=!1;this._loaded=!1;this._loadedUrl=null;this._wasContextLost=!1;this._handleContextLost=()=>{this._wasContextLost=!0,this._loadedUrl=null,this._spline.dispose(),this._isElementInViewport&&this.load(),this.dispatchEvent(new CustomEvent("context-loss",{detail:{}}))};this._handleContextRestored=()=>{};this.onLoaded=()=>{this._loaded=!0,this.eventsTarget!==void 0&&this._spline.eventManager.updateUseWindowEvents(this.eventsTarget==="global"),this.background!==void 0&&this._spline?.setBackgroundColor(this.background),this._spline?.data.scene.publish.settings.web.logo!==!1&&(this._logo.style.display="flex"),this.loadingAnim&&(this._preloader.style.display="none"),setTimeout(()=>{this._canvas.style.visibility="visible"}),this.dispatchEvent(new CustomEvent("load-complete",{detail:{url:this.url}})),(this.hint??this._spline.data.scene.publish.settings.web.hint)&&(this._canvas.addEventListener("pointerdown",this.onInteract),this._canvas.addEventListener("pointerup",this.onInteract),this._hintDrag.style.display="block")};this.onInteract=()=>{this._canvas.removeEventListener("pointerdown",this.onInteract),this._canvas.removeEventListener("pointerup",this.onInteract),this._hintDrag.style.display="none"};this.attachShadow({mode:"open"});let i=this.shadowRoot;Ou(xV,i),this._container=i.querySelector("#container"),this._canvas=i.querySelector("#spline"),this._logo=i.querySelector("#logo"),this._hintDrag=i.querySelector("#hint-drag"),this._preloader=i.querySelector("#preloader"),this._canvas.addEventListener("webglcontextlost",this._handleContextLost),this._canvas.addEventListener("webglcontextrestored",this._handleContextRestored),this._spline=new pv(this._canvas),Lu?this._intersectionObserver=new IntersectionObserver(r=>{for(let s of r)s.target===this&&(this._isElementInViewport=s.isIntersecting,this._isElementInViewport&&(!this._loaded||this._wasContextLost)?this.load():this.unloadable&&!this._isElementInViewport&&this._loaded&&this.unload(),this.dispatchEvent(new CustomEvent("viewport-intersection",{detail:{intersection:this._isElementInViewport}})))},{root:null,rootMargin:"0px",threshold:1e-5}):this._isElementInViewport=!0}unload(){!this._loaded||(this._loaded=!1,this._loadedUrl=null,this._spline.dispose(),this.dispatchEvent(new CustomEvent("unload",{detail:{}})))}recreateCanvas(){let i=this._canvas;i.removeEventListener("pointerdown",this.onInteract),i.removeEventListener("pointerup",this.onInteract),i.removeEventListener("webglcontextlost",this._handleContextLost),i.removeEventListener("webglcontextrestored",this._handleContextRestored);let r=document.createElement("canvas");this._container.insertBefore(r,this._canvas),this._container.removeChild(this._canvas),r.setAttribute("id","spline"),this._canvas=r,this._canvas.addEventListener("webglcontextlost",this._handleContextLost),this._canvas.addEventListener("webglcontextrestored",this._handleContextRestored),this._spline=new pv(this._canvas)}load(){this._loaded&&!this._wasContextLost||!this._isElementInViewport&&this.loading!=="eager"||!this.url||this.url===this._loadedUrl||(this.loadingAnim&&(this._preloader.style.display="flex"),this._canvas.style.visibility="hidden",this.dispatchEvent(new CustomEvent("load-start",{detail:{url:this.url}})),this._wasContextLost&&this.recreateCanvas(),this._canvas.removeEventListener("pointerdown",this.onInteract),this._canvas.removeEventListener("pointerup",this.onInteract),this._hintDrag.style.display="none",this._loadedUrl=this.url,this._spline.load(this.url).then(this.onLoaded))}updated(i){if(super.updated(i),i.has("url")&&(this.url==null&&this._loaded?this.unload():this.url!==this._loadedUrl&&this.load()),i.has("width")&&this.width!==void 0&&(this._container.style.width=this.width+"px"),i.has("height")&&this.height!==void 0&&(this._container.style.height=this.height+"px"),i.has("background")&&this.background!==void 0&&this._spline?.setBackgroundColor(this.background),i.has("eventsTarget")&&this.eventsTarget!==void 0){let r=this.eventsTarget==="global";this._spline?.eventManager?.updateUseWindowEvents(r),this._spline?.controls?.updateUseWindowEvents(r)}}connectedCallback(){super.connectedCallback(),Lu&&this._intersectionObserver.observe(this)}disconnectedCallback(){Lu&&this._intersectionObserver.unobserve(this),super.disconnectedCallback()}};Ti.styles=mv`
|
|
5283
5283
|
:host {
|
|
5284
5284
|
display: block;
|
|
5285
5285
|
}
|
|
@@ -5393,4 +5393,4 @@ outputColor=vec4(color,inputColor.a);}`,Wc={DEFAULT:0,ESKIL:1},WG=class extends
|
|
|
5393
5393
|
color: rgba(0, 0, 0, 0.5);
|
|
5394
5394
|
animation: spin 1s infinite linear;
|
|
5395
5395
|
}
|
|
5396
|
-
`,gr([Ir({type:String})],Ti.prototype,"url",2),gr([Ir({type:Number})],Ti.prototype,"width",2),gr([Ir({type:Number})],Ti.prototype,"height",2),gr([Ir({type:String})],Ti.prototype,"background",2),gr([Ir({type:String})],Ti.prototype,"loading",2),gr([Ir({type:Boolean})],Ti.prototype,"unloadable",2),gr([Ir({type:String})],Ti.prototype,"eventsTarget",2),gr([Ir({type:Boolean})],Ti.prototype,"hint",2),gr([Ir({type:Boolean})],Ti.prototype,"
|
|
5396
|
+
`,gr([Ir({type:String})],Ti.prototype,"url",2),gr([Ir({type:Number})],Ti.prototype,"width",2),gr([Ir({type:Number})],Ti.prototype,"height",2),gr([Ir({type:String})],Ti.prototype,"background",2),gr([Ir({type:String})],Ti.prototype,"loading",2),gr([Ir({type:Boolean})],Ti.prototype,"unloadable",2),gr([Ir({type:String,attribute:"events-target"})],Ti.prototype,"eventsTarget",2),gr([Ir({type:Boolean})],Ti.prototype,"hint",2),gr([Ir({type:Boolean,attribute:"loading-anim"})],Ti.prototype,"loadingAnim",2),Ti=gr([QA("spline-viewer")],Ti);
|
package/build/spline-viewer.d.ts
CHANGED
|
@@ -43,7 +43,7 @@ export declare class SplineViewer extends LitElement {
|
|
|
43
43
|
/**
|
|
44
44
|
* When true it displays the spinner preloader
|
|
45
45
|
*/
|
|
46
|
-
|
|
46
|
+
loadingAnim: boolean;
|
|
47
47
|
protected _spline: Application;
|
|
48
48
|
protected _intersectionObserver: IntersectionObserver | null;
|
|
49
49
|
protected _isElementInViewport: boolean;
|
package/build/spline-viewer.js
CHANGED
|
@@ -5279,7 +5279,7 @@ outputColor=vec4(color,inputColor.a);}`,Gc={DEFAULT:0,ESKIL:1},zG=class extends
|
|
|
5279
5279
|
/>
|
|
5280
5280
|
</svg>
|
|
5281
5281
|
</a>
|
|
5282
|
-
</div>`,zi=class extends An{constructor(){super();this.url=null;this.width=void 0;this.height=void 0;this.background=void 0;this.loading="auto";this.unloadable=!1;this.eventsTarget=void 0;this.
|
|
5282
|
+
</div>`,zi=class extends An{constructor(){super();this.url=null;this.width=void 0;this.height=void 0;this.background=void 0;this.loading="auto";this.unloadable=!1;this.eventsTarget=void 0;this.loadingAnim=!1;this._intersectionObserver=null;this._isElementInViewport=!1;this._loaded=!1;this._loadedUrl=null;this._wasContextLost=!1;this._handleContextLost=()=>{this._wasContextLost=!0,this._loadedUrl=null,this._spline.dispose(),this._isElementInViewport&&this.load(),this.dispatchEvent(new CustomEvent("context-loss",{detail:{}}))};this._handleContextRestored=()=>{};this.onLoaded=()=>{this._loaded=!0,this.eventsTarget!==void 0&&this._spline.eventManager.updateUseWindowEvents(this.eventsTarget==="global"),this.background!==void 0&&this._spline?.setBackgroundColor(this.background),this._spline?.data.scene.publish.settings.web.logo!==!1&&(this._logo.style.display="flex"),this.loadingAnim&&(this._preloader.style.display="none"),setTimeout(()=>{this._canvas.style.visibility="visible"}),this.dispatchEvent(new CustomEvent("load-complete",{detail:{url:this.url}})),(this.hint??this._spline.data.scene.publish.settings.web.hint)&&(this._canvas.addEventListener("pointerdown",this.onInteract),this._canvas.addEventListener("pointerup",this.onInteract),this._hintDrag.style.display="block")};this.onInteract=()=>{this._canvas.removeEventListener("pointerdown",this.onInteract),this._canvas.removeEventListener("pointerup",this.onInteract),this._hintDrag.style.display="none"};this.attachShadow({mode:"open"});let i=this.shadowRoot;Pu(dV,i),this._container=i.querySelector("#container"),this._canvas=i.querySelector("#spline"),this._logo=i.querySelector("#logo"),this._hintDrag=i.querySelector("#hint-drag"),this._preloader=i.querySelector("#preloader"),this._canvas.addEventListener("webglcontextlost",this._handleContextLost),this._canvas.addEventListener("webglcontextrestored",this._handleContextRestored),this._spline=new dv(this._canvas),Du?this._intersectionObserver=new IntersectionObserver(r=>{for(let s of r)s.target===this&&(this._isElementInViewport=s.isIntersecting,this._isElementInViewport&&(!this._loaded||this._wasContextLost)?this.load():this.unloadable&&!this._isElementInViewport&&this._loaded&&this.unload(),this.dispatchEvent(new CustomEvent("viewport-intersection",{detail:{intersection:this._isElementInViewport}})))},{root:null,rootMargin:"0px",threshold:1e-5}):this._isElementInViewport=!0}unload(){!this._loaded||(this._loaded=!1,this._loadedUrl=null,this._spline.dispose(),this.dispatchEvent(new CustomEvent("unload",{detail:{}})))}recreateCanvas(){let i=this._canvas;i.removeEventListener("pointerdown",this.onInteract),i.removeEventListener("pointerup",this.onInteract),i.removeEventListener("webglcontextlost",this._handleContextLost),i.removeEventListener("webglcontextrestored",this._handleContextRestored);let r=document.createElement("canvas");this._container.insertBefore(r,this._canvas),this._container.removeChild(this._canvas),r.setAttribute("id","spline"),this._canvas=r,this._canvas.addEventListener("webglcontextlost",this._handleContextLost),this._canvas.addEventListener("webglcontextrestored",this._handleContextRestored),this._spline=new dv(this._canvas)}load(){this._loaded&&!this._wasContextLost||!this._isElementInViewport&&this.loading!=="eager"||!this.url||this.url===this._loadedUrl||(this.loadingAnim&&(this._preloader.style.display="flex"),this._canvas.style.visibility="hidden",this.dispatchEvent(new CustomEvent("load-start",{detail:{url:this.url}})),this._wasContextLost&&this.recreateCanvas(),this._canvas.removeEventListener("pointerdown",this.onInteract),this._canvas.removeEventListener("pointerup",this.onInteract),this._hintDrag.style.display="none",this._loadedUrl=this.url,this._spline.load(this.url).then(this.onLoaded))}updated(i){if(super.updated(i),i.has("url")&&(this.url==null&&this._loaded?this.unload():this.url!==this._loadedUrl&&this.load()),i.has("width")&&this.width!==void 0&&(this._container.style.width=this.width+"px"),i.has("height")&&this.height!==void 0&&(this._container.style.height=this.height+"px"),i.has("background")&&this.background!==void 0&&this._spline?.setBackgroundColor(this.background),i.has("eventsTarget")&&this.eventsTarget!==void 0){let r=this.eventsTarget==="global";this._spline?.eventManager?.updateUseWindowEvents(r),this._spline?.controls?.updateUseWindowEvents(r)}}connectedCallback(){super.connectedCallback(),Du&&this._intersectionObserver.observe(this)}disconnectedCallback(){Du&&this._intersectionObserver.unobserve(this),super.disconnectedCallback()}};zi.styles=pv`
|
|
5283
5283
|
:host {
|
|
5284
5284
|
display: block;
|
|
5285
5285
|
}
|
|
@@ -5393,4 +5393,4 @@ outputColor=vec4(color,inputColor.a);}`,Gc={DEFAULT:0,ESKIL:1},zG=class extends
|
|
|
5393
5393
|
color: rgba(0, 0, 0, 0.5);
|
|
5394
5394
|
animation: spin 1s infinite linear;
|
|
5395
5395
|
}
|
|
5396
|
-
`,gr([Ir({type:String})],zi.prototype,"url",2),gr([Ir({type:Number})],zi.prototype,"width",2),gr([Ir({type:Number})],zi.prototype,"height",2),gr([Ir({type:String})],zi.prototype,"background",2),gr([Ir({type:String})],zi.prototype,"loading",2),gr([Ir({type:Boolean})],zi.prototype,"unloadable",2),gr([Ir({type:String})],zi.prototype,"eventsTarget",2),gr([Ir({type:Boolean})],zi.prototype,"hint",2),gr([Ir({type:Boolean})],zi.prototype,"
|
|
5396
|
+
`,gr([Ir({type:String})],zi.prototype,"url",2),gr([Ir({type:Number})],zi.prototype,"width",2),gr([Ir({type:Number})],zi.prototype,"height",2),gr([Ir({type:String})],zi.prototype,"background",2),gr([Ir({type:String})],zi.prototype,"loading",2),gr([Ir({type:Boolean})],zi.prototype,"unloadable",2),gr([Ir({type:String,attribute:"events-target"})],zi.prototype,"eventsTarget",2),gr([Ir({type:Boolean})],zi.prototype,"hint",2),gr([Ir({type:Boolean,attribute:"loading-anim"})],zi.prototype,"loadingAnim",2),zi=gr([WA("spline-viewer")],zi);export{zi as SplineViewer};
|